8/6/2019 Guía básica de HTML 5 para diseñadores web

http://slidepdf.com/reader/full/guia-basica-de-html-5-para-disenadores-web 1/12

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

Escrito el 01 octubre 2009 por Sebastián Thüer

HTML 5 para diseñadores webHace 10 años que se actualizó por última vez el HTML con la especificación4.01. Desde entonces, la web ha cambiado radicalmente como también lo hahecho el modo de diseñar y desarrollar páginas. Se han estandarizado unaserie de elementos como los encabezados o el menú, se utiliza Ajax pararecargar el contenido dinámicamente y todo el mundo usa CSS para definir losatributos visuales de la página.

El nuevo HTML 5 intenta adaptarse al nuevo escenario y presenta elementospara desarrollar páginas dándole un valor especial a la semántica, es decir, quese 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 queun lenguaje de etiquetas sencillo orientado a poner en líneas trabajosacadé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. Laprimera versión salió a la luz en enero de 2008 pero ha sido revisada variasveces. Sin embargo, navegadores como Firefox 3.5 o Internet Explorer 8 yapueden interpretarlo y tienen soporte para las etiquetas y tecnologías quevienen de la mano.

Las novedades

El borrador del HTML 5 es un documento complejo y extenso. Hice la pruebade convertilo a PDF obtuve un documento de 1737 hojas tamaño A4. Sinembargo, hay mucha información estrictamente técnica que no afecta al diseñoweb 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 delnavegador.

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

8/6/2019 Guía básica de HTML 5 para diseñadores web

http://slidepdf.com/reader/full/guia-basica-de-html-5-para-disenadores-web 2/12

8/6/2019 Guía básica de HTML 5 para diseñadores web

http://slidepdf.com/reader/full/guia-basica-de-html-5-para-disenadores-web 3/12

14.METER15.TIME16.RUBY (RT y RP)17.CANVAS18.COMMAND

19.DETAILS20.DATALIST21.KEYGEN22.OUTPUT

También tenemos etiquetas que soportan nuevos atributos. Por ejemplo,anteriormente en INPUT solo podías escoger entre botones, casillas deverificación, campos de texto o clave y pocas opciones más. Ahora tenemosatributos 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 unafecha. También aparece el atributo AUTOFOCUS para poder poner el foco deun 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 enmi opinión) a través de un ejemplo práctico. Supongamos que tenemos un sitioclásico formado por el encabezado, menú a la izquierda, contenido y pide depágina.

En HTML 4.01 hubiésemos usado algo así:

Esquema de una página en HTML 4

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

8/6/2019 Guía básica de HTML 5 para diseñadores web

http://slidepdf.com/reader/full/guia-basica-de-html-5-para-disenadores-web 4/12

Esquema de una página en HTML 5

Claramente podemos adivinar que HEADER sive para definir el encabezadodel sitio, NAV contiene los enlaces para navegar y FOOTER la información delpie de página.Luego aparecen una serie de etiquetas para especificar dentro del área decontenido el tipo de información que agregamos. SECTION obviamente marcael inicio y fin de una sección, ARTICLE sirve para indicar cada artículo (muy útilen un blog, por ejemplo) mientras que FIGURE es usado para señalar que unelemento se trata de una ilustración que acompaña un texto. Estos elementospuede ser tanto una imagen, como un video o un audio.

Pasemos este esquema a código HTML 5:

HTML | copiar código | ?

0102 <html >03 <head >04 <title >Mi Sitio </title >05 </head >0607 <body >08 <header>09 <h1 ><a href = “/home”> El nombre o título de mi Sitio </a ></h1 >10 </header>1112 <nav>

8/6/2019 Guía básica de HTML 5 para diseñadores web

http://slidepdf.com/reader/full/guia-basica-de-html-5-para-disenadores-web 5/12

13 <ul >14 <li><h2 >Sitio </h2 >15 <ul >16 <li><a href ="/home/" >Inicio </a ></li>17 <li><a href =" /acerca" >Acerca De </a ></li>18 <li><a href ="/contacto" >Contacto </a ></li>19 </ul >20 </li>21 </ul >22 </nav>2324 <section>25 <article>26 <h2 ><a href ="/html-5" >Las novedades del HTML 5 </a ></h2 >

27<p >La nueva versión del lenguaje ya está aquí y llega con nuevoscambios... </p >

28 </article>2930 <article>31 <h2 ><a href ="/tutoriales-con-CSS" >Tutoriales con CSS </a ></h2 >

32 <p >Nueva serie de tutoriales con CSS sobre la posiblidad de crear efectoscon nuestras imagenes... </p >

33 <figure>34 <video src = “/video”>< /video>35 <legend >Video explicativo sobre uso de CSS para efectos </legend >36 </figure>37 </article>3839 <nav>40 <a href ="/blog/page/2/" >Más articulos </a >41 </nav>4243 </section>4445 <footer>46 <p >Copyright 2009 por mi </p >47 </footer>4849 </body >50 </html >51

Este ejemplo es muy simple pero sirve para analizar la estructura básica deuna página web en HTML 5. Como se puede ver, en este caso usé la etiquetaFIGURE para insertar un video y que acompañé con LEGEND para agregarleel 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

8/6/2019 Guía básica de HTML 5 para diseñadores web

http://slidepdf.com/reader/full/guia-basica-de-html-5-para-disenadores-web 6/12

para las fechas, AUDIO para insertar sonidos o METER para representar unamagnitud de medición (el espacio en el disco rígido, por ejemplo). Otras no loson tanto pero su uso es interesante. Un par de ejemplos

• ASIDE: Es para lo que en periodismo se llaman “apostillas”, esto es, unainformación adicional sobre un tema pero que no hace al centro del acuestión. Como los recuadros que acompañan a veces la nota central deuna 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 detrabajar 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 lamano de estándares cerrados como Quick Time y Flash respectivamente.

La intención del W3C fue apostar fuerte por soluciones de código abierto comoOggTheora para manejar la reproducción multimedia. Sin embargo, laspresiones de la industria hicieron que la propuesta se retirara y aun no hay unadefinición concreta a respecto.

Pero lo cierto es que las etiquetas OBJECT y EMBED que se utilizan paraagregar contenido multimedia con plugins siguen siendo soportadas. En el casode OBJECT desaparecen algunos atributos como ARCHIVE, CLASSID,CODEBASE, CODETYPE, DECLARE y STANDBY. Estos atributos se puedenmantener por razones de compatibilidad con HTML 4 pero no tienen funciónalguna en la nueva versión. La etiqueta APPLET –usada casi exclusivamentepara 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 horade trabajar con formulario. Ahora el nuevo HTML 5 nos permite trabajar concomponentes específicos para algunos tipos de datos como fechas, un códigopostal o una dirección de e-mail.

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

HTML | copiar código | ?

1 <input id="nombre" name ="nombre" type ="text" />2 <input id="correo" name ="correo" type ="email" />3 <input id="web" name ="web" type ="url"/>

Uno de los aspectos más interesantes de HTML con los formularios es quepodemos hacer validaciones de datos sin recurrir a JavaScript. Aunque yatenemos tipos de datos específicos como correo, fechas o teléfono siempre esinteresante verificar que el usuario realmente escribe datos de forma correctaen 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

8/6/2019 Guía básica de HTML 5 para diseñadores web

http://slidepdf.com/reader/full/guia-basica-de-html-5-para-disenadores-web 7/12

expresiones regulares pero veamos un ejemplo sencillo de cómo evitar que nosmetan código malicioso en un formulario:

HTML | copiar código | ?

1 <input title="Por favor, no ingreses código en este campo" name ="texto" />

El soporte para formularios en HTML 5 funciona al 100% en Opera, mientrasque 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 decambios que facilitan la creción de aplicaciones webs. La representación de undocumento se realiza a partir del DOM (DocumentObjectModel) y no de lasintaxis 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 losobjetos 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 debits como sería un JPG, PNG o GIF. Del mismo modo que el CSS podemosescribir el SVG en línea (dentro del código en la página) o vinculado a unarchivo externo. Empleando la etiqueta CANVAS y JavaScript tambiénpodemos 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 perocreo que pronto comenzarán a hacerse más populares de la mano de

herramientas específicas que faciliten su desarrollo. Sin embargo, esimportante tomar nota de las nuevas posibilidades que esto abre para el diseñoweb.

Conclusión

El HTML 5 trae bastantes novedades, muchas de ellas necesarias después de10 años sin demasiados cambios. Nos guste o no, lo cierto es que HTML 5 seterminará 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 delHTML 5 es un documento en desarrollo que está sujeto a cambios. Una seriede diseñadores influyentes como AaronGustafson, Eric Meyer y Jeffrey

Zeldman crearon HTML 5 SuperFriends para apoyar la dirección que estátomando la nueva versión del lenguaje. Varias de sus sugerencias está siendoincorporadas lo cual significa que el W3C realmente está escuchando laopinión de los profesionales.

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

Compartir:

•

•

8/6/2019 Guía básica de HTML 5 para diseñadores web

http://slidepdf.com/reader/full/guia-basica-de-html-5-para-disenadores-web 8/12

•

•

•

Etiquetas: Diseño Web , html5

13 Comentarios Sobre Este Post — Agregar tu comentario

1.

Marc

# 1 octubre 8th, 2009Muy interesante el resumen, aunque si me permites un apunte, cualquier elemento puede contener un href, como un li. El problema será solo deretrocompatibilidad.

Seguiremos al loro a ver que massacais

2.

Sebastián Thüer # 2 octubre 8th, 2009

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

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

Gracias por el apunte y el comentario. Un saludo.

3.

Pharpe

# 3 octubre 14th, 2009

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

8/6/2019 Guía básica de HTML 5 para diseñadores web

http://slidepdf.com/reader/full/guia-basica-de-html-5-para-disenadores-web 9/12

4.

Hola

# 4 noviembre 26th, 2009Interesante sube más información.

5.

Hostper

# 5 noviembre 26th, 2009

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.

6.

WebHostingPeru

# 6 noviembre 26th, 2009

Déjame felicitarte, que bueno que está tu blog los temas tienen la

información exacta que me interesa, sigue posteando más sobre estostemas de color y diseño.Felicidades.

7.

Sebastián Thüer

# 7 noviembre 26th, 2009

@hola, @hopster y @webHostingPeru: Gracias por los comentarios y

me alegro que la información sea de utilidad. Un saludo.

8.

Eduardo

# 8 mayo 29th, 2010

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. Lasmayorias de las paginas tiran error si no teneslal ultima version del

navegador. Creería que antes de implementar nuevas tecnicas, habriaque empezar a sabre como usarlas!!

8/6/2019 Guía básica de HTML 5 para diseñadores web

http://slidepdf.com/reader/full/guia-basica-de-html-5-para-disenadores-web 10/12

9.

IDC Logic

# 9 junio 22nd, 2010El HTML 5 es el futuro q ya está llegando. Ya lo dijo Steve Jobs (quedebe ser un futurólogo) “Flash tuvo su momento pero está quedándoseatrás y parece que ahora es el momento de HTML5″

10.

Sebastián Thüer

# 10 junio 24th, 2010

@IDC Logic: Sí, el HTML 5 es el futuro y hay mucho intereses entorno alas tecnologías, estándares y protocolos con los cuales trabajará. Todaslas grandes empresas, desde Google hasta Apple, están moviendo sus

fichas a respecto. Saludos y gracias por tu comentario

11.

Posicionamiento Web

# 11 septiembre 12th, 2010Muy interesante el artículo, es justo lo que estaba buscando. Sabesdonde puedo encontrar mas información sobre esto? Gracias por el post,saludos.

12.

Sebastián Thüer

# 12 septiembre 14th, 2010

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

13.

CodigoCamaleon

# 13 octubre 28th, 2010

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

8/6/2019 Guía básica de HTML 5 para diseñadores web

http://slidepdf.com/reader/full/guia-basica-de-html-5-para-disenadores-web 11/12

4 Referencias A Este Post1. Bitacoras.com

octubre 1st, 2009

Información Bitacoras.com…

Valora en Bitacoras.com: No hay resumen disponible para estaanotación…

2. Recopilación de todo lo que necesitas saber de HTML 5 | Algo de Geek

enero 9th, 2010

[...] Guía básica de HTML5 para diseñadores Web (Ver) [...]3. HTML 5 |Novedades y Tutorial |

enero 10th, 2010

[...] Fuente [...]

4. Tutorial Html 5 - TecFull febrero 25th, 2010

[...] Fuente [...]

Dejar una Respuesta

Principio del formulario

Nombre (required) E-mail (no será

publicado) (required) Web

Notificarme de nuevos comentarios por e-mail

Final del formulario

Suscripción

Principio del formulario

Recibir novedades por emailFinal del formulario

8/6/2019 Guía básica de HTML 5 para diseñadores web

http://slidepdf.com/reader/full/guia-basica-de-html-5-para-disenadores-web 12/12

Suscripción RSS

Popular 1. Premio WorldPressPhoto 2010, las mejores fotografías periodísticas2. Diseño web con HTML5: 10 recursos para comenzar ya3. Mapa de los sitios de compra colectiva en Argentina4. Primeras impresiones de Internet Explorer 95. Anatomía de una landing page perfecta [infografía]

Secciones• Analytics• Arte & Diseño• Blog• Destacado• Diseño Web• Educación• Infografías• Medios Sociales• Photoshop• Portfolio• SEO & SEM• Software• Usabilidad• Wordpress

• Inicio• Archivo

• Suscripción por RSS

Powered by WordPress . Tema: Newport WordPress Theme (beta!).

2005-2011 El Blog de SebastianThüerby Sebastián Thüer islicensedunder aCreativeCommons Reconocimiento-No comercial 2.5 Argentina License .