Las mejores nuevas características y técnicas de HTML5 – Parte I
Categories: Recursos - Tags: html5Hace un tiempo por twitter me llego un link de Nettuts+ con algunas nuevas técnicas y características de HTML5
A continuación les dejo las que me parecieron más interesantes y útiles ,incluso había alguna que ni yo conocía. Estan ordenadas por mi sin ningún criterio y también agregue o junte alguna que otra característica.
1. Nuevo DOCTYPE
Hasta ahora se venía usando el engorroso DOCTYPE de toda la vida que yo si mi editor HTML no lo pusiera cada vez que abro una nueva página me sería imposible recordar.
1 2 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Bueno a partir de ahora creo que va a ser un poco más fácil no?
1 | <!DOCTYPE html> |
2. No más TYPE para scripts y links
Reconozco que al día de la fecha sigo usando type para mis links y scripts tags como siempre se uso.
1 2 | <link rel="stylesheet" href="stylesheet.css" type="text/css" /> <script type="text/javascript" src="script.js"></script> |
Pero a partir de ahora voy a cambiar el modo de enlazar mis scripts y hojas de estilo.
1 2 | <link rel="stylesheet" href="stylesheet.css" /> <script src="script.js"></script> |
3. No más comillas ni cerrar elementos
A diferencia de XHTML en HTML5 ya no es necesario usar comillas para los atributos, y ni siquiera es necesario cerrar los elementos. En esta coincido con el autor original de este artículo, no se si por costumbre o prolijidad me siento mejor haciéndolo al viejo estilo.
1 | <p id=cualquierID> Hola que tal. |
4. <figure> , nuevo elemento de HTML5
Con <figure> podemos ordenar semánticamente mejor una imagen a un pie de imagen uniendo ambos elementos dentro de uno mismo.
Por lo que una imagen como esta
1 2 | <img src="images/marte.jpg" alt="Imagen de Marte" /> <p>Imagen de Marte. </p> |
Quedaría de la siguiente forma:
1 2 3 4 5 6 | <figure> <img src="images/marte.jpg" alt="Imagen de Marte" /> <figcaption> <p>Imagen de Marte. </p> </figcaption> </figure> |
5. Text inputs para emails
Dentro de poco la mayoría de navegadores va a venir con validación de formularios incorporado por lo que agregando el nuevo type de email , crearemos input texts que solo permitan direcciones de email válidas
1 | <input id="email" name="email" type="email" /> |
6. Los nuevos atributos “required” y “autofocus”
Además de la validación si añadimos el atributo “required” no podremos enviar un formulario hasta no añadir la dirección de email en dicho campo.
1 | <input id="email" name="email" type="email" required> |
O se puede usar :
1 | <input id="email" name="email" type="email" required="required"/> |
Por otro lado el atributo “autofocus” es otra solución más que nos evita usar javascript en nuestros formularios y al igual que el atributo anterior se usa de la siguiente forma.
1 | <input id="email" name="email" type="email" required autofocus> |
7. Placeholders o marcas de agua
Los placeholders o marcas de agua son el texto que aparece en las cajas de búsqueda que al escribir o hacer focus desaparece. De momento esto se podía hacer con javascript , pero ahora simplemente añadiendo este nuevo atributo conseguimos el mismo resultado.
1 | <input name="email" type="email" placeholder="[email protected]" /> |
8. Nueva semántica de <header> <nav> y <footer>
A la hora de ordenar la web yo utilizo DIVs y les asigno atributos tales como:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div id="header"> <div id="nav"> <ul> <li></li> <li></li> </ul> </div> </div> <div id="footer"> ... </div> |
A partir de ahora HTML5 incorpora nueva semántica para estas partes de la página quedando de la siguiente manera:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <header> <nav> <ul> <li></li> <li></li> </ul> </nav> </header> <footer> ... </footer> |
9. Internet Explorer y HTML5
Para variar internet explorer es un mundo aparte en respecto a todos los navegadores , y la única forma que reconozca los elementos de HTML5 es haciéndoselo saber. Para ello Remy Sharp creo un script que inicializa todos los elementos en IE
1 2 3 | <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> |
10. Contenido editable
Los nuevos navegadores soportan un nuevo atributo que puede ser aplicado a los elementos para permitir editar el texto en ellos. Como bien dicen en nettuts esto sumado a por ejemplo la posibilidad de guardas datos localmente te permite crear simples programas como por ejemplo una lista de Tareas
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <h2> To-Do List </h2> <ul contenteditable="true"> <li> Break mechanical cab driver. </li> <li> Drive to abandoned factory <li> Watch video of self </li> </ul> </body> </html> |
imagen de nettuts
Mañana si me queda algo de tiempo cuelgo la segunda parte. Un saludo y comenten cual les parece más interesante.
[...] con mi post anterior vamos a seguir numerando algunas nuevas técnicas y características de HTML5 que nos van a ayudar [...]
Interesante post amigo se agradece
esto lo tendré en mente ya que de ahora en adelante esto va ser lo mas novedoso al igual que la unión de HTML5 con CANVAS
mmmmmmmmmmm wow la verdad es que me gusto muxo este post porque esta muy bien explicado
esla primera vez que comento en un post hee
jeje y hora checare ella segunda parte
GRACIAS !! POR PUBLICARLO ME AYUDARA MUCHO PARA MI EXPOCICION DE DESARROLLO DE APLICACIONES WEB