Archivo de la categoría: Diseño

Tema WordPress con Skeleton

html5boilerplate

Sin duda alguna el uso de Html5 en la web ya no es una cosa de juegos, ni mucho menos un “lujo”, es algo esencial en una web que esta enfocada al web 2.0 y más aún si esta dirigida a darle al usuario una navegación cómoda.

Seguramente muchos utilizamos para tareas de blogging el CMS WordPress, por su seguridad, comodidad y por esas personas que están dedicadas día a día a hacerlo aun mejor. Claro que surge la necesidad en muchos de adaptarlo a los estándares HTML5 y mejor aun si es posible a una sólida estructura que un FrameWork Frontend nos puede brindar.

En este caso les dejare el código para mezclar la potencialidad de:

WordPress + Html5 + Skeleton
 

wordpresyskeleton

 

Siendo Skeleton el Framework Frontend Html5 que utilizaremos en este código. Antes quisiera dejar en claro que esto no es llegar poner imágenes y subir, sino que por el contrario esta enfocado a ser una herramienta “boilerplate” para el desarrollador. Como es lógico también necesitara de su mano para adaptarlo a las necesidades de cada uno 😉

Partamos explicando lo básico de un skin en wordpress y finalmente podrán ver el código con la implementación de Skeleton.

Estructura de archivos para un tema wordpress

Cuando creamos un tema WordPress debemos tener los siguientes archivos:

style.css : Corresponde a la hoja de estilos que estamos aplicando al tema.

header.php : El encabezado de nuestra plantilla.

index.php : Cuerpo principal de la plantilla.

single.php : Utilizado para leer un articulo en particular.

footer.php : Pie de pagina de la plantilla.

archive.php : Se lanza cuando realizamos una búsqueda por algún criterio de articulo o autor en la web, muestra pre visualizaciones de los post.

page.php : Similar a single.php.

sidebar.php : Barra lateral.

functions.php : Funciones necesarias para el tema y el correcto funcionamiento de éste.

Si deseas profundizar en estos temas, pueden hacerlo en la siguiente dirección que les recomiendo.

Como crear un tema para WordPress

Ahora que conocemos la estructura básica de un tema, solo faltaría integrar ésta arquitectura con la de Skeleton, lo que puedes descargar y observar acá:

Descargar
 

pd: Son bienvenidas las correcciones y/o mejoras que puedan irse agregando en el Repositorio GitHub.

Saludos.

Bordes Redondeados en Formularios con Internet Explorer

Como todo desarrollador debe haber experimentado en programación web tenemos un Nemesis bien definido, que lleva el nombre de Internet Explorer.. siendo que este villano a la hora de realizar efectos CSS simples que nos permiten un diseño de una mayor categoría nos presenta problemas de compatibilidad, aunque con las nuevas tecnologías y bondades que ofrece CSS3 y HTML5 se pueden realizar maravillas al vernos en la necesidad de utilizar una versión anterior a la de Internet Explorer como puede ser la 6 o 7 entramos en los conflictos para realizar este tipo de sutilezas como por ejemplo el famoso Borde Redondeado de los Input en un documento HTML lo que en CSS3 lo logramos en menos de dos palabras escritas..

Claro que buscamos formas siempre tendremos la mano de ayuda que nace de la creatividad de aquellos que se han encontrado en el mismo problema, lo que nos puede sacar de un apuro y muchas veces dar a volar nuestra imaginacion.

Entre las alternativas que tenemos para solucionar esto tenemos multiples como las siguientes:

Alternativa 1 – Utilizar una libreria JavaScript que nos permita emular el efecto de redondeado en versión inferiores.

Alternativa 2- Utilizar imágenes de fondo como redondeado.

Como siempre, debo decir que la opción que tomes debe ser especifica para el caso que tengas, osea la mas adecuada para la situación en que te encuentres.

Alternativa 1

Existen varias librerías javascript que nos permiten realizar este tipo de efectos en navegadores que no son compatibles con CSS3, pero el problema radica que algunas de estas librerías solo funcionan en algunos navegadores puntuales, vale decir tal vez en Internet Explorer 6, pero no 7 y 8. Me encontré con esta librería que es capaz de funcionar bajo IE 6,7 y 8 😉

CSS Pie permite:

border-radius
box-shadow
border-image
multiple background
linear-gradient

Para instalarlo, basta con bajarse el fichero PIE.htc, y ponerlo en alguna carpeta de nuestra web. Y para aplicar el estilo mediante CSS.

Alternativa 2

1. Primero empezaremos por definir el ancho de nuestro input, lo recomendable es que se realice por CSS pues de esta manera puedes tener un control mayor sobre el input y de manera mas global en caso de que desees aplicar lo mismo a otros input y así evitar la redundancia de código.

2. Necesitaremos de nuestro amigo photoshop (con licencia original OBVIO) o algún programa de edición de fotografía similar como gimp, una vez dentro creamos una imagen que se ajuste como fondo a las proporciones del ancho de nuestro input.. permiteme ilustrarte la idea.

Me comprendes mendez? de esta manera, daremos el efecto de que el input esta redondeado, pero solamente hemos añadido una imagen por detrás de este de el mismo color que el campo, que nos permite confundir al ojo y hacerle pensar que los bordes están redondeados.

Y el resto es historia, ahora solamente en css debemos asignarle esta imagen como imagen de fondo, y asignarle al input la clase que hemos desarrollado en css!

Y voilá! bordes redondeados en este navegador de mierda 😀

Si me gusta te lo pago.

¡Esta es una de las imagen que merece el oro!

Cierto, al trabajar en el área de desarrollo y ademas al ser mi hermano diseñador gráfico, he notado que extrañamente una de las carreras mas desprestigiadas monetaria mente cabe la casualidad que es el diseño y el desarrollo.. si os ponéis a pensar que tal vez lo son porque no conforman una parte importante y de aporte de para la sociedad, déjame decirte que creo que deberías tomar un pañuelo echarle cloroformo, colgarte en un árbol y aspirar del pañuelo porque estas equivocado, Osea abramos los ojos! En la actualidad practica mente TODO lo que podemos percibir esta basado en diseño e informática o la gran mayoría, acaso si sales a la calle y un semáforo no funciona, tienes idea del caos que seria circular por las calles? Tan solo caminando, ni siquiera hablando de viajar en automóvil, te has puesto pensar lo horrible que serian las casas, calles, automóviles si alguien no se preocupara de embellecerl@s? Y ni hablar de los caóticos y desagradables a la vista que serian las paginas web en la Internet que por cierto están a base de sistemas informáticos.

Si te sientes completamente identificado con esta imagen como yo y muchos (puesto no es solo un patrón que se puede ver en el diseño) te diría que aprendas a valorar tu trabajo, pues una vez que tu lo valores podrás empezar a proyectar el valor en los demás, la gente que paga y no conoce sobre el trabajo que lleva realizar este tipo de cosas tiende a menos preciar lo que ve, pero créeme que debes ser sumamente didáctico y comprensivo con ellos, pues bien la mayoría de la gente no tienen idea de ni siquiera para que sirve el diseño o la informática, generalmente cuando comento que soy informático, lo asocian rápidamente a que trabajo con software como Word, Excel y PowerPoint o que me dedico a estar formateando computadores o algo igual de ridículo.

¿Cual seria nuestro trabajo entonces?

Culturizarlos! si nadie les enseña a las personas lo que valen las cosas nunca podrán saberlo, y la persona que debe empezar a hacerlo eres tu mismo.