In BlogDiseño Web

Guía básica de HTML 5 para diseñadores web

Escrito el 01.10.2009 por Sebastián Thüer
HTML 5 para diseñadores web

HTML 5 para diseñadores web

Hace 10 años que se actualizó por última vez el HTML con la especificación 4.01. Desde entonces, la web ha cambiado radicalmente como también lo ha hecho el modo de diseñar y desarrollar páginas. Se han estandarizado una serie de elementos como los encabezados o el menú,  se utiliza Ajax para recargar el contenido dinámicamente y todo el mundo usa CSS para definir los atributos visuales de la página.

El nuevo HTML 5 intenta adaptarse al nuevo escenario y presenta elementos para desarrollar páginas dándole un valor especial a la semántica, es decir, que se pueda reconocer desde el propio código el tipo de contenido que se está mostrando. Conviene recordar, que en sus orígenes el HTML no era más que un lenguaje de etiquetas sencillo orientado a poner en líneas trabajos académicos. Por eso, por ejemplo, tenemos seis niveles de títulos (<h1>, <h2>… <h6>) que casi nadie usa en su totalidad.

El estado actual del HTML 5 es el de un borrador que está madurando. La primera versión salió a la luz en enero de 2008 pero ha sido revisada varias veces. Sin embargo, navegadores como Firefox 3.5 o Internet Explorer 8 ya pueden interpretarlo y tienen soporte para las etiquetas y tecnologías que vienen de la mano.

Las novedades

El borrador del HTML 5 es un documento complejo y extenso. Hice la prueba de convertilo a PDF  obtuve un documento de 1737 hojas tamaño A4. Sin embargo, hay mucha información estrictamente técnica que no afecta al diseño web como dice Eric Meyer . Por ejemplo, el cómo hacer un análsis sintáctico (“parsear”) del componente tiempo o cómo moverse por el historial del navegador.

En lo que es estrictamente diseño lo más importante son las etiquetas del HTML 5. Pero antes avanzar conviene recordar que -como es habitual en el W3C- se asegura la compatibilidad hacia atrás con lo cual podemos seguir escribiendo en el viejo HTML 4 sin miedo porque los navegadores seguirán mostrando correctamente las páginas. Sin embargo, profesionalmente nos vamos a quedar atrás y en algún momento debemos encarar la transición. Mejor hacerlo ahora.

Etiquetas que salen

Con la llegada del CSS muchas etiquetas del HTML que afectaban la presentación de los elementos de pantalla cayeron en desuso. Ahora definitivamente se eliminan. Todas pueden ser perfectamente reempalzadas por atributos en las hojas de estilo.

El listado de etiquetas que caen en desuso -porque ya existe una forma de hacer lo mismo con CSS- es el siguiente:

  • FONT
  • CENTER
  • STRIKE
  • BASEFONT
  • BIG
  • S
  • STRIKE
  • TT
  • U

El HTML 5 elimina completamente el uso de frames (marcos) por razones de usabilidad y accesibilidad. No ocurre lo mismo con el IFRAME que seguirá siendo válido. Por lo tanto, las etiquetas vinculadas con los frames que salen son:

  • FRAME
  • FAMESET
  • NOFRAMES

Para terminar, encontramos etiquetas que ya no se usan porque creaban confusión o hacían lo mismo que otras ya existes. Estas son:

  • ACRONYM
  • APPLET
  • ISINDEX
  • DIR

Etiquetas que entran

Como mencioné anteriormente, una prioridad del HTML 5 es darle valor semántico al código para que se pueda reconocer fácilmente la función de los elementos en una página. Por eso, aparecen muchos indicadores de secciones y contenedores para tipos de contenido específicos.

Hay 22 nuevas etiquetas y son las siguientes:

  1. SECTION
  2. ARTICLE
  3. ASIDE
  4. HGROUP
  5. HEADER
  6. FOOTER
  7. NAV
  8. DIALOG
  9. FIGURE
  10.  VIDEO
  11. EMBED
  12. MARK
  13. PROGRESS
  14. METER
  15. TIME
  16. RUBY (RT y RP)
  17. CANVAS
  18. COMMAND
  19. DETAILS
  20. DATALIST
  21. KEYGEN
  22. OUTPUT

También tenemos etiquetas que soportan nuevos atributos. Por ejemplo, anteriormente en INPUT solo podías escoger entre botones, casillas de verificación, campos de texto o clave y pocas opciones más. Ahora tenemos atributos específicos como SEARCH si se trata de un campo de búsqueda, EMAIL si el usuario tiene que introducir un correo electrónico o DATE si es una fecha. También aparece el atributo AUTOFOCUS para poder poner el foco de un formulario en un lugar concreto sin tener que recurrir al JavaScript.

Primeros pasos con HTML 5

Voy a intentar explicar algunas de las nuevas etiquetas (las más importantes en mi opinión) a través de un ejemplo práctico. Supongamos que tenemos un sitio clásico formado por el encabezado, menú a la izquierda, contenido y pide de página.

En HTML 4.01 hubiésemos usado algo así:

Esquema de una página en HTML 4

Esquema de una página en HTML 4

Mientras que en HTML 5 podemos hacer más explícito el contenido de cada sección en lugar de usar identificadores para los DIVs.

Esquema de una página en HTML 5

Esquema de una página en HTML 5

Claramente podemos adivinar que HEADER sive para definir el encabezado del sitio, NAV contiene los enlaces para navegar y FOOTER la información del pie de página.

Luego aparecen una serie de etiquetas para especificar dentro del área de contenido el tipo de información que agregamos. SECTION obviamente marca el inicio y fin de una sección, ARTICLE sirve para indicar cada artículo (muy útil en un blog, por ejemplo) mientras que FIGURE es usado para señalar que un elemento se trata de una ilustración que acompaña un texto. Estos elementos puede ser tanto una imagen, como un video o un audio.

Pasemos este esquema a código HTML 5:



 



El nombre o título de mi Sitio

Tutoriales con CSS

Nueva serie de tutoriales con CSS sobre la posiblidad de crear efectos con nuestras imagenes...

Video explicativo sobre uso de CSS para efectos

Copyright 2009 por mi

Este ejemplo es muy simple pero sirve para analizar la estructura básica de una página web en HTML 5. Como se puede ver, en este caso usé la etiqueta FIGURE para insertar un video y que acompañé con LEGEND para agregarle el epígrafe.

El HTML 5 también tiene etiquetas para tipos de contenidos muy específicos. Muchas se pueden comprender fácilmente: TIME para mostrar la hora, DATE para las fechas, AUDIO para insertar sonidos o METER para representar una magnitud de medición (el espacio en el disco rígido, por ejemplo).  Otras no lo son tanto pero su uso es interesante. Un par de ejemplos

  • ASIDE: Es para lo que en periodismo se llaman “apostillas”, esto es, una información adicional sobre un tema pero que no hace al centro del a cuestión. Como los recuadros que acompañan a veces la nota central de una revista.
  • PROGRESS: Para representar el avance de una tarea como puede ser el proceso de registro o suscripción en una web.

El adiós a los plugins que no fue

Una de las propuestas más controvertidas del HTML 5 fue su intención de trabajar con estándares abiertos para el tratamiento del contenido multimedia. Hay que recodar que la llegada del video y la animación a la web fue de la mano de estándares cerrados como Quick Time y Flash respectivamente.

La intención del W3C fue apostar fuerte por soluciones de código abierto como Ogg Theora para manejar la reproducción multimedia. Sin embargo, las presiones de la industria hicieron que la propuesta se retirara y aun no hay una definición concreta a respecto.

Pero lo cierto es que las etiquetas OBJECT y EMBED que se utilizan para agregar contenido multimedia con plugins siguen siendo soportadas. En el caso de OBJECT desaparecen algunos atributos como ARCHIVE, CLASSID, CODEBASE, CODETYPE, DECLARE y STANDBY. Estos atributos se pueden mantener por razones de compatibilidad con HTML 4 pero no tienen función alguna en la nueva versión. La etiqueta APPLET –usada casi exclusivamente para embeber un programa en Java dentro de una página- no tuvo la misma suerte y fue retirada.

Formularios más complejos

Uno de los aspectos en el cual el HTML 4 exhibe más limitaciones es la hora de trabajar con formulario. Ahora el nuevo HTML 5 nos permite trabajar con componentes específicos para algunos tipos de datos como fechas, un código postal o una dirección de e-mail.

Por ejemplo, un formulario clásico donde pedimos al usuario su nombre, correo y página web queda del siguiente modo:



Uno de los aspectos más interesantes de HTML con los formularios es que podemos hacer validaciones de datos sin recurrir a JavaScript. Aunque ya tenemos tipos de datos específicos como correo, fechas o teléfono siempre es interesante verificar que el usuario realmente escribe datos de forma correcta en los campos. Para realizar la validación empleamos el atributo PATTERN.

La validación se realiza con un método estándar como son las expresiones regulares definidas en ECMAScript. No vamos a desarrollar acá el tema de expresiones regulares pero veamos un ejemplo sencillo de cómo evitar que nos metan código malicioso en un formulario:

El soporte para formularios en HTML 5 funciona al 100% en Opera, mientras que lo hace de forma parcial en Chrome y Safari. Sin embargo, podemos usar Web Forms 2 para implementar sus características en otros navegadores.

HTML 5 avanzado

Además de nuevas etiquetas el HTML 5 también introduce una serie de cambios que facilitan la creción de aplicaciones webs. La representación de un documento se realiza a partir del DOM (Document Object Model) y no de la sintaxis del lenguaje. En palabras simples, es un nivel más abstracto que, por ejemplo, permite que unapágina se pueda escribir tanto en HTML 5 como XHTML 5: el resultado será el mismo. También afecta el modo en que los objetos son recorridos desde JavaScript.

Otro aspecto interesante es el soporte para gráficos vectoriales escalables (SVG). Permiten dibujar en pantalla sin tener que usar imágenes en mapa de bits como sería un JPG, PNG o GIF. Del mismo modo que el CSS podemos escribir el SVG en línea (dentro del código en la página) o vinculado a un archivo externo. Empleando la etiqueta CANVAS y JavaScript también podemos crear dibujos de forma dinámica o sobreponer elementos a un video.

Tanto el nuevo DOM como el uso de SVG son temas bastante complejos pero creo que pronto comenzarán a hacerse más populares de la mano de herramientas específicas que faciliten su desarrollo. Sin embargo, es importante tomar nota de las nuevas posibilidades que esto abre para el diseño web.

Conclusión

El HTML 5 trae bastantes novedades, muchas de ellas necesarias después de 10 años sin demasiados cambios. Nos guste o no, lo cierto es que HTML 5 se terminará convirtiendo en un estándar para el desarrollo de páginas web.

No hay que perder de vista que el borrador que define las características del HTML 5 es un documento en desarrollo que está sujeto a cambios. Una serie de diseñadores influyentes como Aaron Gustafson, Eric Meyer y Jeffrey Zeldman crearon HTML 5 Super Friends para apoyar la dirección que está tomando la nueva versión del lenguaje. Varias de sus sugerencias está siendo incorporadas lo cual significa que el W3C realmente está escuchando la opinión de los profesionales.

Un incentivo más para comenzar a estudiar, debatir y opinar.

  • Pingback: Bitacoras.com()

  • Marc

    Muy interesante el resumen, aunque si me permites un apunte, cualquier elemento puede contener un href, como un li. El problema será solo de retrocompatibilidad.

    Seguiremos al loro a ver que mas sacais :)

    • http://www.thuer.com.ar Sebastián Thüer

      @Marc: Exacto, el problema será como hacer que los viejos navegadores puedan seguir mostrando una web en HTML5. Al final parece que tendremos que hacer algo redundante al estilo:


      <div id="nav">
      <nav>
      ....
      </nav>
      </div>

      Gracias por el apunte y el comentario. Un saludo.

  • http://reflexionespharpianas.blogspot.com Pharpe

    Pues habrá que estar muy atentos a las novedades que seguirán surgiendo, pero como resumen ha estado muy bien el post. Felicidades Sebastián. Saludos

  • http://www.usmp.edu.pe Hola

    Interesante sube más información.

  • http://www.hostper.com Hostper

    Hola estuve revisando tu blog y me parece muy interesante y entretendido, sobre todo que la información es detallada y precisa, espero que sigas posteando más temas para informarnos y comentar.
    Saludos.

  • http://web-hostingperu.com WebHostingPeru

    Déjame felicitarte, que bueno que está tu blog los temas tienen la información exacta que me interesa, sigue posteando más sobre estos temas de color y diseño.
    Felicidades.

    • http://www.thuer.com.ar Sebastián Thüer

      @hola, @hopster y @webHostingPeru: Gracias por los comentarios y me alegro que la información sea de utilidad. Un saludo.

  • Pingback: Recopilación de todo lo que necesitas saber de HTML 5 | Algo de Geek()

  • Pingback: HTML 5 |Novedades y Tutorial |()

  • Pingback: Tutorial Html 5 - TecFull()

  • http://www.eduardomgallo.com.ar/ Eduardo

    Si muy bueno, pero la mayoría de las webs que comenzaron a utilizar esto, sus diseñadores no tienen en cuanta esta herramienta W3C. Las mayorias de las paginas tiran error si no tenes lal ultima version del navegador. Creería que antes de implementar nuevas tecnicas, habria que empezar a sabre como usarlas!!

  • http://www.idclogic.com IDC Logic

    El HTML 5 es el futuro q ya está llegando. Ya lo dijo Steve Jobs (que debe ser un futurólogo) “Flash tuvo su momento pero está quedándose atrás y parece que ahora es el momento de HTML5″

    • http://www.thuer.com.ar Sebastián Thüer

      @IDC Logic: Sí, el HTML 5 es el futuro y hay mucho intereses entorno a las tecnologías, estándares y protocolos con los cuales trabajará. Todas las grandes empresas, desde Google hasta Apple, están moviendo sus fichas a respecto. Saludos y gracias por tu comentario :)

  • http://www.seowebperu.com Posicionamiento Web

    Muy interesante el artículo, es justo lo que estaba buscando. Sabes donde puedo encontrar mas información sobre esto? Gracias por el post, saludos.

    • http://www.thuer.com.ar Sebastián Thüer

      Gracias, estoy preparando un post con más info sobre HTML5 ;)

  • http://www.codigocamaleon.com Codigo Camaleon

    Parece que el principal problema con el que tenemos que lidiar es con el molesto I6 ya que muchas personas aun empresas lo siguen usando

  • http://www.telasdeprotecao.com Telas de proteção

    Muy interessante el articulo, gracias por el post.

  • Juanjo

    Hola muy buen artículo, os recomiendo para los que queráis aprender que visitéis la comunidad hispana de desarrolladores de HTML5,

    http://www.foroshtml5.com

    saludos!

  • http://www.totalprotecao.com.br Rede de proteção

    Muy buena las dicas, gracias por nos mostrar su conocimiento.
    Redes de proteçãoVarais

  • http://www.gravatinhas.com.br/ Gravatinhas para casamento

    Estas dicas ajuda amelhorar aweb cada vez mais

  • http://www.globocosas.com/ Miguel Alfredo Tovar

    Me sirven algunas de sus indicacines, estoy mudandome de hxhtml para HTML-5, lo voy agregar eb nus favirutas oara seguirle visitando, saludos

  • http://soltronica.com Soltronica

    Es interesante el articulo, pero tenemos que tener en consideración que mientras hayan internautas que usan navegadores antiguos tenemos que crear sitios compatibles para todos los navegadores.

  • Xavi

    Es muy interesante pero a la vez dificil de entender para los que estamos comenzando con el html. miren yo tengo poca edad estoi empezando con el html i me resulta un tanto complejo.He echo una sencilla pagina web con el bloc de notas i codigo html5, me gustaria aprender a modelar i diseñar a partir de codigo con CSS me podrian ayudra?

  • despex

    Es muy interesante pero a la vez dificil de entender para los que estamos comenzando con el html. miren yo tengo poca edad estoi empezando con el html i me resulta un tanto complejo.He echo una sencilla pagina web con el bloc de notas i codigo html5, me gustaria aprender a modelar i diseñar a partir de codigo con CSS me podrian ayudra?

  • luis

    como coloco la imagen en el encabezado de la apgina web html5 cuales la etiqueta es despues de header

  • http://bit.ly/H0AxPB Mauro

    Muy buen aporte. Aprender a programar puede ser de mucha utilidad teniendo en cuenta la gran cantidad de trabajo que poseen los diseñadores webs hoy en día.

  • http://www.twitter.com/tontonsan9 Bruno Michel Sanchez

    que pasa si lo uso la marca center en html5? ya en mucho caso son necesario

    • http://www.thuer.com.ar/ Seba

      Con CSS3 no sería necesario. Simplemente hay que encerrar todo el contenido de la página en una etiqueta (wrapper, por ejemplo) y darle los siguientes valores en CSS:

      #wrapper{
      width:960px; /* ancho de pagina */
      margin:0 auto;
      }

Pin It on Pinterest