Blog de sonicbyte

Mi granito de arena – Plantilla HTML5 / CSS3

Hace 11 años comencé a diseñar webs y en ese momento me incliné por hacerlo fundamentalmente con Flash. Por ese entonces usaba la versión 4, y en perspectiva me resulta asombroso ahora la falta de accesibilidad, estándares web y algo llamado SEO (¿les suena?) que tenía no sólo mi trabajo sino en general la web, por esa y otras razones comencé a dejar de utilizarlo y me volqué de lleno al HTML, CSS3 y PHP entre otros lenguajes web.

Hoy HTML5 es el nuevo rey, Flash ha sido algo exiliado y los estándares web, los frameworks, el SEO y demás son, como diría un amigo, la bomba. Aprendí mucho también en como hacer mas eficiente mi flujo de trabajo, gracias a la experiencia y buenas prácticas de otros diseñadores y proyectos (como Boilerplate) me inspiraron en hacer lo que llamo mi “Master template“, una plantilla de trabajo, simple pero muy útil, con la que comienzo a maquetar casi cualquier web.

Desde que la utilizo mi productividad es claramente superior, siempre estoy intentando mejorarla para hacerla mas eficiente, y ahora me parece increíble el tiempo que perdía al no utilizarla.

La plantilla está hecha en HTML5 válida. Si bien detallar en profundidad el fundamento de cada decisión y cada linea de código sería muy largo para este post, intentaré a grandes rasgos explicar la lógica de la plantilla:

Tiene cuatro carpetas principales

• css
• images
• js
• lib

Las carpetas js y lib las utilizo para ordenar archivos de javascript, frameworks y otras librerías que mencionaré luego como CSS3PIE. Por supuesto, no necesito explicar la carpeta “images” :)

Contenido carpeta CSS:

reset.css

Cada navegador posee valores por defecto, para todas las etiquetas de HTML y estilos CSS, gracias a una hoja de reset, se reducen las inconsistencias, logrando que la mayoría de las propiedades queden con los mismos valores, por defecto, para todos los navegadores.

fonts.css

Aquí incluiremos (si lo deseamos) las reglas css necesarias para utilizar font-face en nuestro diseño. Incluyo aquí una carpeta “fonts” donde guardo los archivos de las fuentes que utilizo.

handheld.css

La utilizo para definir algunas pocas reglas que mejoran la visualizacion de la página en telefonos móviles antiguos, básicamente quito los floats de todos los elementos, reduzco la fuente y le doy buen contraste al fondo y texto.

layout.css y estilo.css

Aquí defino por separado estructura y estilo de cada elemento del diseño respectivamente. Esto facilita bastante la lectura del código y encontrar lo que uno necesita editar o mejorar posteriormente. Algo para destacar, encontrarán una poco común

behavior: url(lib/pie/PIE.htc);

esto se debe a la libreria CSS3PIE de la que hablé en un post anterior, sirve para aplicar algunos estilos css3 en versiones antiguas de Internet Explorer.

movil.css

En este css están agregados todos las reglas Media-Query necesarias para que el sitio web pueda verse correctamente en distintos dispositivos de múltiples resoluciones de pantalla, como netbooks y smartphones como Iphone y Ipad entre otros.

global.css

Esta es la hoja css que carga todas las demás mediante “import” (excepto handheld.css) de esta forma:

@import url("reset.css");
@import url("estilo.css");
@import url("layout.css");
@import url("fonts.css");
@import url("movil.css");

Archivos html

• Index.html
• 404.html
• ie6.html

Index.html

Lo primero que defino en la plantilla, aparte del doctype HTML5, son los condicionales para la detección de versión de Internet Explorer, utilizo la técnica de Boilerplate de agregarle una clase al ser detectada la versión, de esta forma todos los estilos pueden separarse por clases y agregarse las reglas en la hoja principal de estilo en vez de hacerlo en hojas específicas, ahorrando llamadas al servidor y resulta más simple enfocar las correciones necesarias por versión.

Ejemplo:

<!--[if IE 7 ]>class="ie7"</strong><mce:script _mce_src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script><![endif]-->;

Entonces si necesitamos corregir un selector específico para Explorer 7, podemos usar esa clase aplicada al condicional, todo desde la hoja principal de estilos. En el ejemplo además se carga el script html5shiv que les recomiendo utilizar, ya que permite que navegadores antiguos reconozcan selectores de HTML5.

.ie7 input[type="submit"]   {background: #ccc; height:37px; padding-top: 17px; pointer:cursor;}

El resto de la hoja index.html muestra una estructura sencilla con cabecera, menú de navegación y pie de página (en donde se cargan los javascripts para mejorar la velocidad de carga general de la página)

404.html

Simplemente una página para mediante htaccess customizar el aspecto de una página no encontrada.

ie6.html

Salvo excepciones, no solemos dar mas soporte a Internet Explorer 6, por lo que si es detectado por los condicionales del index.html el usuario es redirigido a una página explicandole que su navegador no es soportado en este sitio e invitándolo a actualizar su navegador.

Sean libres de descargar, modificar y utilizar esta plantilla, espero les sea de utilidad y cualquier consejo para mejorarla será bienvenido.

Hasta la próxima…

Descargar plantilla desde GitHub