Impresiones de nuestro primer diseño Web en HTML5.

Veterinaria Machado ha sido nuestro primer sitio hecho con dicha tecnología y a como prometimos en nuestro portafolio, queríamos poner nuestras impresiones con respecto a HTML5 y lo que nos gustó y lo que no nos gustó. No vamos a hablar de CSS3, por que hemos ido adaptándolo gradualmente en todos nuestros proyectos, y creemos que no vale la pena discutirlo aquí, aunque es un buen tema para discutirlo a futuro.

La diferencia más notoria

Vamos a ser honestos. La diferencia más notoria no se nota cuando uno visita un sitio hecho en HTML5. ¿Simple y complicado a la vez, no? Es que la esencia en nuestra opinión de HTML5 radica ahí; utiliza elementos muchísimo más semánticos que recurrir a DIV’s que tienen poco sentido para alguien que lee el código. Los elementos que utilizamos para la Veterinaria Machado fueron los siguientes:

• header.
• nav.
• aside.
• section.
• footer.
• figure.
• figcaption.

Ante la pregunta, ¿qué diablos importa el código? Como bien les dije, para el visitante promedio, absolutamente nada y para el diseñador Web que está husmeando el código de la competencia, quizás para sentirse bien o mal comparándolo. ¿Pero para un bot de Google, Bing o Yahoo? Mejor prevenir que lamentar diría yo. Al tener elementos estrictamente semánticos que identifican qué bloques de contenido son de arriba, abajo, contenido de la página o laterales, usted le está otorgando información a un bot que puede o no indexar con prioridades distintas dichos bloques. Eso es importantísimo, por que seamos honestos, si usted estiliza sus páginas Web en XHTML o HTML4 junto con CSS a como lo venía haciendo, ¿cómo hace una araña para saber qué parte del documento es el contenido de la página como tal, qué es navegación y qué es una sección del documento?

Otro aspecto con respecto al código es lo limpio que resulta y lo fácil que lo podemos manipular mediante CSS. Esta parte nos fascinó en lo particular; no más DIV’s en medio de DIV’s si con una reglita rápida y en dos toques tenemos la presentación bien moldeada utilizando los elementos de HTML5 nuevos como bloques.

Creo que no soy el único cuando afirmo la locura que se puede armar en un documento CSS buscando y editando propiedades (más si hablamos de Internet Explorer) y ojalá estemos en puras carreras por entregar el diseño Web lo antes posible. Nos quedaba la resignación de buscar div’s a lo loco, con nombres medios extraños que después había que ir nuevamente al código de la página para hallarnos. HTML5 lo hace más semántico y por lo tanto, más fácil de ubicar dentro de un documento CSS qué partes del código son qué. Pero bueno, la explicación de los elementos.

Explicación rápida de cada una de ellas

Para explicarles los elementos de HTML5 y cómo los estilizamos dentro el diseño Web de la Veterinaria, veamos el wireframe que puse abajo que consiste de forma rápida el diseño Web que hicimos y lo explicamos en términos de estilizarlo en CSS.

El elemento header junto con un nav.

Se estiliza de tal manera que el header es tratado como un bloque, ahí cambiamos las propiedades de CSS necesarias según el objetivo; el elemento header en HTML5 se interpreta como parte del encabezado del documento, típicamente reservado para elementos propios de un encabezado dentro de una página Web como el logo, la navegación y cualquier otro botón-texto de importancia para el diseño final.

Con respecto al bloque nav, la abreviatura lo dice todo; es para ser considerado como un bloque de navegación. Esto nos facilita de nuevo, estilizar el bloque entero como tal. En el caso del diseño de la Veterinaria, sólo lo movemos un toquecito a la derecha utilizando márgenes. De nuevo, ¿es esto lo mismo de forma visual hacerlo con un DIV=»nav»? Sí, lo es. Pero no se trata de eso. Se trata de utilizar código más semántico para identificar elementos clave dentro del diseño Web. Usted a través de su código le está hablando a una araña de un buscador y le está diciendo qué partes de su código son qué dentro de cada página. ¡Antes no se podía!

Aside y repetimos combo.

Aside, es otro elemento de HTML5 y como su nombre lo implica, sirve para contenido que es conocido como «lateral» dentro de un diseño Web, donde típicamente se pone información relevante o no, al contenido principal. Aquí lo que hacemos es flotar aside hacia la izquierda y acomodar article para que fluya con respecto a el. Así construimos un diseño Web líquido. Volvemos a incluir nav pero obviamente estilizado de una manera distinta.

Article, la carne de nuestra página.

Article es un elemento interesante por que se supone que aquí comienza el «contenido» real de la página, a lo que vinimos por decirlo así. Si vemos cualquier diseño Web vemos que comienza un título, y luego el texto. Article es el elemento que encapsula todo esto. Piense en una noticia de un periódico; el elemento article es desde el artículo hasta el fin del mismo. Todo lo demás, encabezado del periódico, anuncios al lado, etc, no tienen nada que ver con el contenido de la noticia en sí.

Footer

Otro elemento que nos gusta es el footer; a pesar de que la Veterinaria Machado nos pidió mantener el diseño lo más simple posible, siempre nos gusta poner footers locos y llamativos, por que creemos que la nueva onda de diseño Web, y la firma de un diseñador Web, radica en un footer. Un buen footer, con un diseño atractivo, es una buena señal de la calidad de un diseño Web.

La pregunta del millón, ¿cuál le va a dejar una impresión más placentera y duradera? El primero, lo hemos visto no sé cuántas veces, el segundo apuesto a que nunca.

Pero bueno, volviendo al tema, el elemento footer nos permite delimitar y decirle a todo ser vivo o no, que esta parte del sitio es la parte «final» del documento.

El figure y ficaption fueron amor a primer vista.

Amamos que nuestros diseños Web tengan captions o texto debajo de cada imagen. Esto es una firma nuestra en TODOS nuestros diseños desde el momento que descrubimos HTML5 (por eso ni Web Mentor ni Lan Zone lo tienen pero estamos por cambiar esto). Es algo que a todos nos gusta y no sé por qué no se incluyen en diseños Web si los periódicos y las revistas lo tienen. Siempre hay una pequeña leyenda de texto a la par de una imagen.

Figure y figcaption hacen precisamente eso; figure es el bloque que «envuelve» a la imagen y figcaption se encarga de ponerle el texto debajo de la imagen; de nuevo, estilizando ambos debidamente y tenemos una imagen con leyenda de texto.

Lo que no nos gustó de HTML5.

Sabemos que HTML5 aún no ha destapado todo su potencial y menos aquí en Costa Rica; creo que serán quizás años para que empresas ticas lo adopten. Si creemos que es una forma en que la Web «evoluciona» y se dirige hacia la dirección correcta. El caos de las tablas, Flash y demás están llegando a su fin dado a que cada vez más y más diseños Web son hechos con HTML5 + CSS3, por fin hay una dirección y consentimiento común entre las empresas líderes del mundo y el consorcio. Pero no todos han sido capaces de avanzar hacia esa dirección y tenemos dos grandes inconvenientes con respecto a desarrollar sitios en HTML5 actualmente:

WordPress y HTML5.

Wordress maneja bien, de forma aceptable los elementos; declararlos fuera del editor no conlleva riesgos, el problema surge cuando el usuario edita el contenido utilizando la parte visual del editor (WYSIWYG); cualquier elemento de HTML5 que venía dentro del editor, se «borra» por que el script del editor visual de WordPress no reconoce dichos elementos; existen soluciones poco eficientes y poco ortodoxas que desgraciadamente no sirvieron; tuvimos que separar dichas partes del contenido para que el cliente pudiera editar sin estropear el diseño final. La única esperanza es o un plug-in que aún no ha sido hecho o esperar a que WordPress incluya soporte a HTML5 dentro del editor. Más noticias cuando alguna u la otra suceda.

Internet Explorer, ayer, hoy y siempre.

Para todos los diseñadores Web, no pensaban por un instante que Internet Explorer no fuese un problema, ¿correcto? Microsoft no nos desilusiona; el soporte para elementos de HTML5 no son soportados por Internet Explorer 6-8 y finalmente, Microsoft tuvo que doblar el brazo con la versión 9 y darle soporte. El problema radica en que los reconoce, pero no los estiliza lo cual es un problema enorme; por dicha, existe una solución, llamada HTML5SHIM desarrollada por el equipo de Google (y la hostean así que se ahorra ese ancho de banda extra, cortesía de Google).

El inconveniente es si el usuario no tiene Javascript habilitado; si un usuario que tiene Internet Explorer 8 tiene Javascript deshabilitado y entra a una página Web hecha en HTML5 lo que va a ver es algo bastante desagradable; por dicha según estadísticas de Yahoo! cerca del 1% tiene Javascript deshabilitado. Si uno de cada tres usuarios utiliza Internet Explorer, entonces yo diría que ese número es aún menor.

Esto conlleva al debate si diseñar sitios en función de aquellos que tienen Javascript deshabilitado o no, aún si es sólo un 1%. Nuestra opinión es que si Ud tiene Internet Explorer 6, 7 u 8 y tras de eso Javascript deshabilitado, es hora de actualizarse, en algo. La iniciativa de mover a la Web hacia adelante no puede verse detenida por usuarios que no quieren actualizar sus navegadores y tras de eso tienen Javascript deshabilitado.