Logearse a su interfaz.

El estatus de su proyecto lo puede consultar en cualquier momento al iniciar sesión por acá. Si se le olvidó sus credenciales, no pasa nada, puede recuperar su clave.

Información de cuenta

En términos generales, HTML5.0 nos gustó y vamos a seguir diseñando con dicha tecnología.

Impresiones de nuestro primer diseño Web en HTML5.

Creo que somos la primera empresa que hace un diseño Web en HTML5 en Costa Rica, busqué y no encontré ninguno hecho por una empresa de diseño Web de Costa Rica, si estoy equivocado por favor corregirme; 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.

Una representación básica del diseño Web de Veterinaria Machado

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.

Técnicamente, esto es un footer 1
Este es mucho más vistoso y funcional

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.

14 Respuestas

  1. J dice:

    http://www.sbrforum.com/betting-odds/

    Esta página usa HTML 5. Mercado USA pero si es producto costarricense 😉

  2. J dice:

    Especificamente se usa para cambiar el url del browser sin refrescar la pagina.

    • Natalie dice:

      Hola J! Gracias por sus comentarios y por darnos ese enlace. Si nos referíamos a sitios hechos para empresas de diseño Web de Costa Rica. Si conoces de alguna agencia de diseño web en Costa Rica que haya hecho un sitio en HTML5 para alguna empresa Tica no avisas. Una pregunta, por qué no utilizaron elementos en HTML5?

  3. Gilberto dice:

    Porque las pagins hechas para moviles en jquery no se pueden ver en symbian.

    • mentor-admin dice:

      Hola Gilberto,

      ¿En qué navegador lo intentó? El que viene con Symbian u Opera Mobile?

      Saludos!!

  4. Felicitaciones por este articulo, expresa de una manera clara y concisa la importancia de este tema

  5. Josue dice:

    Hey, excelente articulo, pero lo mejor aun es que con HTML5 podemos decirle adios a Flash (gracias a Dios) con la utilizacion de canvas y es definitiva que la semantica es lo mas sobresaliente.

  6. Natalie dice:

    Hola Josue! Muchas Gracias por su comentario. Que Dios te escuche!!! Saludos 😉

  7. Nacho dice:

    Hola.
    Buscando un plugin para wp he dado con vuestra pagina y solo puedo decir que me ha gustado mucho :D.
    Hay muy poca gente actualmente que realice paginas al 100% con Html5 y CSS3, como ejemplo de lo despacio que va esto os contare que solo desde hace pocos años es obligado en Ingeniería Informática estudiar la actualizacion de estos códigos en la universidad.
    De echo muy pocas empresas de nuestro país actualmente programan sin estos cánones, sobre todo por la posibilidad de adaptar a todo tipo de dispositivos, desde móviles a tablets o portátiles las paginas web para poder verlas facilemente y navegar por ellas, adaptándose a todo tipo de pantallas.
    El html y css1 y css2 estan totalmente obsoletos, por mucho que Microsoft se niegue a implementar en sus nuevos exploradores el css3 por ejemplo, cosa que hace que muchísimas paginas creadas en los dos últimos años no se puedan ver correctamente, ¿acaso no se dan cuenta que así pierden muchísimos clientes?.
    En fin, que me alegro ver que por esos lares que tanto admiro también se rebase en programación a los ingenieros norteamericanos, haciendo las cosas como mandan los cánones en html5 y css3. :D.
    Un gran saludo de un programador Madrileño y animo con vuestra pagina que es muy buena.

    • mentor-admin dice:

      Hola Nacho.

      Muchas gracias por los buenos comentarios y sorry por no contestar antes.

      Es una lucha contracorriente, no sólo en España, sino en Latinoamérica también. Existe esa (triste) tendencia por irse por lo conocido en vez de aventurarse por lo desconocido. Y también, como la mayoría de decisiones de índole Informática son escatimadas por que los que dirigen no tienen esa visión de mantenerse vigentes.

      Un gran saludo y mis más acérrimas disculpas por no contestar antes.

  8. Gabriel Brancolini dice:

    Estimados,
    Me llamó la atención que en todo un país no hubiera una sola página en HTML 5, así que introduje esta búsqueda en google… y adivina que… HAY UN MONTON!!!

    Siempre ten en cuenta que no importa que la gente que tú conozcas que no hayan hecho nada… seguro que alguno lo hizo!! Saludos!!

    https://www.google.com.ar/search?num=100&cr=countryCR&newwindow=1&es_sm=93&biw=1366&bih=677&tbs=ctr%3AcountryCR&q=costa+rica+%22%3C%21–DOCTYPE+html%22+-%22DTD+HTML+4.0%22&oq=costa+rica+%22%3C%21–DOCTYPE+html%22+-%22DTD+HTML+4.0%22&gs_l=serp.3…40960.53487.0.53967.16.16.0.0.0.0.601.3889.3-6j1j2.9.0.ernk_qsrb…0…1.1.45.serp..16.0.0.uxUPYHq5WjU

    • mentor-admin dice:

      Hola Gabriela,

      Han pasado 3 años desde que escribimos esto. 😉 Manda la parada si no han hecho más. Vivimos en una era maravillosa.

      Un saludo.

Deje su respuesta