Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
NOVEDADES DE HTML5
NOVEDADES DE HTML5
Novedades y mejoras que ofrece HTML 5 La nueva versin del lenguaje HTML (Hypertext Markup Language), va a traer consigo una serie de mejoras importantes, as como nuevas etiquetas de marcado y otras etiquetas que por el contrario van a desaparecer. Una de los puntos a destacar del lenguaje HTML 5, es que nos ofrece ms potencia a la hora del desarrollo web, sin tener que pasar a utilizar otras tecnologas. As mismo con las nuevas etiquetas del lenguaje vamos a simplificar y ahorrar a la hora de escribir cdigo. Desde la web del w3C, nos encontramos una introduccin a las novedades del HTML5: Algunos de las nuevas caractersticas ms interesantes para los autores son APIs para dibujar grficos en dos dimensiones, incorporar y controlar contenido de audio y vdeo, mantener persistente en la parte del cliente el almacenamiento de datos y para ofrecer a los usuarios la edicin de documentos, o partes de stos, de forma interactiva. Otras caractersticas facilitan la representacin de elementos familiares de las pginas, incluyendo <section> (seccin) <footer> (pie); <nav> (para navegacin) y <figure> (para asignacin de un ttulo a una foto u otro contenido incluido en la pgina). Los autores escriben el HTML 5 usando una sintaxis HTML "clsica" o una sintaxis XML, de acuerdo con las necesidades de la aplicacin. Aqu ya nos estn hablando de algunas de las nuevas etiquetas que va a traer consigo el lenguaje.
1. Nuevo Doctype
Lo primero que est en toda pgina web, el doctype, es hora ya de cambiar ese antiguo, largo e inmemorizable doctype:
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
4. Elementos ms semnticos
<div class="header"> </div> <div class="nav"> </div> <div class="content"> </div> <div class="sidebar"> </div> <div class="footer"> </div>
El cdigo anterior puede ser reemplazado por los nuevos elementos header y footer de HTML5:
<header> </header> <nav> </nav> <section> </section> <aside> </aside> <footer> </footer>
Hay que notar que una pgina web puede tener mltiples de estos elementos, por ejemplo puede haber un header para la pgina entera y un header para cada artculo en el caso de un blog y lo mismo con el footer. Nota: estos elementos no son soportados nativamente en navegadores antiguos como IE 6, 7 y 8, para hacer que sean compatibles puedes usar HTML5 Shiv, un
minsculo archivo JS que se encarga de crear estos elementos que no existen en navegadores antiguos:
<!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
5. Contenido editable
Ahora con HTML5 podemos hacer que cualquier elemento que contenga textos (prrafos, listas, ttulos, etc.) sea editable en el mismo navegador, por ejemplo un prrafo:
<p contenteditable="true"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum se d pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Ali quam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetr a posuere sapien. </p>
8. Autofocus
HTML5 introduce tambin el atributo autofocus para campos de formulario, esta facultad hace que al cargar la pgina el foco del usuario se concentre en el campo de texto deseado, ideal para el campo de bsqueda de una pgina web:
<input type="text" autofocus> <button>Buscar</button>
Si declaramos type=number a un campo de texto, este solo permitir que se ingresen nmeros:
<form> <input type="number" /> <button type="submit">Enviar</button> </form>
10.
Canvas
Canvas, es sin duda alguna uno de los elementos ms interesantes que introduce HTML5, el canvas es un plano vaco en el cual podemos dibujar grficos con la ayuda de Javascript: Ejemplo:
<!DOCTYPE html> <html> <body> <canvas id="micanvas">Tu navegador no soporta canvas</canvas> <script type="text/javascript"> var canvas=document.getElementById('micanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#b8dc69'; ctx.fillRect(0,0,200,200); </script> </body> </html>
FUENTES DE INFORMACIN:
http://www.albasuardiaz.com/html5-novedades/ http://www.angelvicen.com/blog/html5-novedades-html5.html http://webintenta.com/novedades-de-html5.html