Qu ofrece Autentia?

Somos su empresa de Soporte a Desarrollo Informtico

Ese apoyo que siempre quiso tener .
Desarrollo de componentes y proyectos a medida. Auditora de cdigo y recomendaciones de mejora. Arranque de proyectos basados en nuevas tecnologas. Curso de Formacin Direccin de Proyectos Informticos. Gestin eficaz del Tiempo. Arquitecturas de desarrollo Web: Web, J2EE, SOA, WebServices, BPM, etc. Java/ J2EE a todos los niveles: JSPs, Servlets, EJBs, JMS, JNI, etc. Anlisis y diseo orientado a objeto. UML y patrones de diseo. Buenas prcticas en el desarrollo de aplicaciones Tcnicas avanzadas: Lucene, Hibernate, Spring, JSF, Struts, etc.

Nuestra mejor referencia son los conocimientos que compartimos en nuestro web

www.adictosaltrabajo.com
Decenas de entidades cuentan ya con nosotros
Para ms informacin vistenos en www.autentia.com
Tel. 91 675 33 06 - info@autentia.com

Introduccin a HTML5.

Pgina 1 de 9

E-mail: Contrasea:

Deseo registrarme Entrar He olvidado mis datos de acceso Inicio Quines somos Tutoriales Formacin Comparador de salarios Nuestro libro

Charlas Ms Ests en: Inicio Tutoriales

Introduccin a HTML5. DESARROLLADO POR: Jose Manuel Snchez Surez

Catlogo de servicios Autentia

Consultor tecnolgico de desarrollo de proyectos informticos. Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo, factora y formacin Somos expertos en Java/J2EE

Anuncios Google

Curso De Guitarra

Aprender a Tocar

Como Tocar Guitarra ltimas Noticias

Cursos Gratis

Fecha de publicacin del tutorial: 2010-10-08

Share | Regstrate para votar

19

Introduccin a HTML 5.

0. ndice de contenidos.
1. 2. 3. 4. 5. 6. 7. 8. 9. Introduccin. A nivel de etiquetado. A nivel de javascript. Soporte para media. Soporte para css3. Una pgina de ejemplo?. Cul es el estado actual de la especificacin y las implementaciones?. Referencias. Conclusiones.

Comic Flash sobre Las factorias de software retos y oportunidades Mi primer coderetreat, Chispas!!! Entregamos nuestro primer diploma ... Comic Flash de Head Hunting XI Charla Autentia - Mule - Recordatorio

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=html5

08/10/2010

Introduccin a HTML5.

Pgina 2 de 9

1. Introduccin
En este tutorial vamos a realizar una breve introduccin a las novedades que traer la versin 5 de html. S, el ttulo est bien escrito, hablamos de html, aunque tambin habr la correlativa versin en xhtml, las diferencias entre ambas solo vendrn dadas por las restricciones tpicas de un documento xml bien formado.

Histrico de NOTICIAS

ltimos Tutoriales
Visto lo anterior, lo primero que debemos saber es que no se trata solo de una actualizacin de la coleccin de marcas que podemos utilizar dentro del etiquetado de nuestras pginas. En versiones anteriores, frente a una nueva especificacin, o al pasar a xhtml, las diferencias con las versiones anteriores venan dadas por la supresin de etiquetas en desuso y la incorporacin de nuevas etiquetas que ampliaban funcionalidad. La nueva versin del estandar, adems de lo anterior, viene de la mano de nuevas y muy interesantes caractersticas, como las que veremos a continuacin. Lo que debe quedar claro es que estas caractersticas, como la estandarizacin de CSS3, geolocalizacin, soporte de audio y video o la ampliacin de los mtodos de acceso al rbol DOM en javascript, no son estictamente del estndar HTML5, pero se asocian con la nueva versin, le dan mucha ms potencia y la hacen mucho ms atractiva. Cmo realizar un tutorial con Wink y de paso ser ms amables en Twitter (y evitar spam con 10minutemail) Introduccin a los algoritmos genticos: como implementar un algoritmo gentico en JAVA Cmo alcanzar el xito en el sector de la informtica. IAQ (Interesting Asked Questions), recordando la posicin del scroll con el soporte de jQuery. Publicar un repositorio Mercurial con Apache

2. A nivel de etiquetado.
Tenemos las siguientes caractersticas destacables: Nuevas etiquetas: hay una etiqueta especfica para el men de navegacin, nav hay etiquetas para distinguir secciones y artculos, pensadas para pginas de noticias o blogs, section y article por fin hay un footer, siempre escribiendo la cabecera y hasta ahora no tenamos pie de pgina. pero tambin hay un header, distinto del head, que servira para insertar contenido visible en la cabecera de la pgina, mark, indicar un texto resaltado, time, indica una fecha u hora, meter, representa un valor numrico, progress, indica el estado de una tarea, lo que es una barra de progeso, Nueva coleccin de tags que aaden contenido semntico: aside, anotaciones que complementan el texto pero quedan fuera del texto, figure, se podr asociar contenido multimedia a un ttulo o legend, Nuevos tipos de componenentes de formulario: input type="date | time | email | url | tel | search | ...", que permite introducir distintos tipos de contenidos produciendo una validacin automtica de los mismos, como un email vlido; los input de seleccin de fecha y hora se pueden convertir en un date picker en funcin del navegador, validacin de campo requerido mediante el atributo required, as como mnimo y mximo, input spinner, a travs del atributo step y type, sliders, a travs de type="range" validaciones con expresiones regulares restriccin de valores en un input a travs de un dataList el atributo placeholder permitir asignar un texto por defecto sombreado a los inputs (el tpico de Google en el campo de bsqueda de firefox), Hay etiquetas que han caido en desuso y otras caractersticas tambin interesantes que no he incluido, podis consultar todas las etiquetas en forma de tabla peridica en el siguiente enlace

ltimos Tutoriales del Autor

IAQ (Interesting Asked Questions), recordando la posicin del scroll con el soporte de jQuery. AppDynamics Lite, encontrar problemas de rendimiento en aplicaciones Java en un entorno de produccin

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=html5

08/10/2010

Introduccin a HTML5.

Pgina 3 de 9

http://joshduck.com/periodic-table.html A continuacin un ejemplo de documento html5: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 <!DOCTYPE html> <html> <head> <title>HTML5 test</title> <meta content="text/html; charset=ISO-8859-1" http-equiv="contenttype" /> </head> <body> <header> <nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Pedidos</a></li> <li><a href="#">Facturas</a></li> <li><a href="#">Administracin</a></li> </ul> </nav> <form> <input type="search" name="q" placeholder="Bsqueda" /> </form> </header> <section> <article> <header> <h2>Noticia #1</h2> </header> <section> <p>Texto de la noticia #1...</p> </section> </article> <article> <header> <h2>Noticia #2</h2> </header> <section> <p>Texto de la noticia #2...</p> </section> </article> </section> <aside> <form> <p><label>Nombre: <input name="name" required></label></p> <p><label>E-mail: <input name="email" type="email" required></label></p> <p><label>Edad: <input type="number" min="0" max="99" step="1" value="33"></label></p> <p><label>Edad: <input type="range" min="0" max="10" step="2" value="6"></label></p> <p><label>URL: <input name="url" type="url"></label></p> <p><label>Commentario: <textarea name="comment" required></textarea></label></p> <p><input type="submit" value="Enviar"></p> </form> </aside> <footer> <p>Copyleft 2010</p> </footer> </body> </html>

Gestin de eventos en el cliente con el soporte de Ajax de RichFaces Envo de correo electrnico con el soporte de Jboss Seam. Creacin de servicios web RESTful con el soporte de RESTeasy de Jboss Seam.

Sguenos a travs de:

ltimas ofertas de empleo

2010-08-30

Otras Electricidad BARCELONA.

2010-08-24

Otras Sin catalogar LUGO.

2010-06-25

T. Informacin - Analista / Programador BARCELONA.

Jose Manuel Snchez

sanchezsuar
@izaera publicado un tuto en adictos de #html5: http://ow.ly/2QwIB, por si quieres echarle un ojo, se basa tambin en lo visto en el DevFest

3. A nivel de javascript.
Tenemos las siguientes caractersticas destacables:

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=html5

08/10/2010

Introduccin a HTML5.

Pgina 4 de 9

3 minutes ago

nuevos mtodos de acceso a los nodos del rbol DOM que incorporan las facilidades que, hasta ahora, solo tenamos con libreras de javascript como prototype.js o jQuery. Son mtodos como: document.getElementsByClassName: que permite recuperar todos los nodos del rbol DOM con el mismo estilo de clase, document.querySelectorAll y document.querySelector: viene a sustituir lo que en jQuery es la propia funcin jQuery o el alias $, heredado de prototype, que permite realizar consultas al rbol DOM para recuperar nodos con distintos selectores o combinacin de los mismos, 1 2 3 4 5 6 7 <script language="javascript"> document.getElementsByClassName("style1"); document.querySelectorAll("ul li:nth-child(odd)"); document.querySelector("table.test > tr > td"); </script>

#JPA2, soporta compounded entities como parmetro de la anotacin @OrderBy ("expenditure.position") la 1.0 no, :(
about 1 hour ago

5 interesantes consejos para usuarios de Maven: Join the conversation

soporte drag & drop nativo. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 <script language="javascript"> var dragItems = document.querySelectorAll('[draggable=true]'); for (var i = 0; i < dragItems.length; i++) { addEvent(dragItems[i], 'dragstart', function (event) { event.dataTransfer.setData('Text', this.id); }); } var bin = document.querySelector('#dropable'); addEvent(bin, 'drop', function (e) { if (e.stopPropagation) e.stopPropagation(); var el = document.getElementById(e.dataTransfer.getData ('Text')); el.parentNode.removeChild(el); return false; }); </script>

web storage o almacenamiento local de datos, que viene a solventar las limitaciones de almacenamiento de las cookies, permitiendo almacenar mucha ms informacin en el cliente dando pie a trabajar con aplicaciones web como si fuesen aplicaciones de escritorio en modo offline, para ello tambin disponemos de un API de cach que permite indicar a travs de un fichero de manifest, qu recursos deben ser cacheados, 1 2 3 4 5 6 7 <script language="javascript"> window.localStorage['value'] = document.getElementById ("comments"); document.getElementById("comments") = window.localStorage ['value']; </script>

existir la posibilidad de disponer de bases de datos SQL en cliente, habais pensado alguna vez en la posibilidad de tener que escribir sentencias SQL en javascript?, pues si; que ser lo siguiente? cunto tardaremos en tener una versin de hibernate para javascript? ;-), 1 2 3 4 <script language="javascript"> var db = window.openDatabase("Items", "1.0"); db.transaction(function(tx) { tx.executeSql("SELECT * FROM Item", [], successCallback, errorCallback);

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=html5

08/10/2010

Introduccin a HTML5.

Pgina 5 de 9

5 6

}); </script>

geolocalizacin: mediante una simple invocacin a un mtodo javascript nativo, podremos obtener la localizacin del equipo cliente, previa aceptacin del usuario a facilitar dicha informacin, 1 2 3 4 5 6 7 8 <script language="javascript"> if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; }); } </script>

web workers: permite la ejecucin de scripts en segundo plano, son procesos de larga duracin y pueden consumir mucha memoria que hasta ahora se podan implementar con la funcin window.setTimeOut(). Los workers tienen las siguientes ventajas: se ejecutan en threads separados, de forma concurrente, no bloquean la interfaz de usuario, pueden ser dedicados (al tab) o compartidos por varios tabs o por la ventana e, incluso, podran persistir al cierre de la misma. 1 2 3 4 <script language="javascript"> var worker = new Worker('myjavascript.js'); worker.onmessage = function(event) { alert(event.data); }; </script>

web sockets: es la implementacin de la comunicacin bidireccional entre el cliente y el servidor, lo que podemos denominar push o comet, y que antes hacamos con Ajax a travs del objeto XMLHttpRequest. Con HTML5 ya no ser necesario su uso puesto que provee de un mecanismo estndar para realizar dicha comunicacin invocando directamente a un mtodo send() que remitir la informacin al servidor. 1 2 3 4 5 6 7 8 9 <script language="javascript"> var socket = new WebSocket(location); socket.onopen = function(event) { socket.postMessage("Hola mundo, WebSocket"); } socket.onmessage = function(event) { alert(event.data); } socket.onclose = function(event) { alert("closed"); } </script>

notificaciones: huyendo de los alerts, permiten notificar al usuario eventos que se producen en una ventana fuera del navegador, con lo que, aunque est minimizada la misma se mostrarn al usuario, 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 <script language="javascript"> function RequestPermission (callback) { window.webkitNotifications.requestPermission(callback); } function showNotification(){ if (window.webkitNotifications.checkPermission() > 0) { RequestPermission(showNotification); } else { window.webkitNotifications.createNotification("image.png", "Ttulo", "Cuerpo").show(); } } </script>

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=html5

08/10/2010

Introduccin a HTML5.

Pgina 6 de 9

4. Soporte para media.

Soporte para audio y video: que nos permitir insertar contenido media sin necesidad de hacer uso de flash, 1 2 3 4 5 <audio src="mp3/sonido.mp3" type="audio/mp3" controls> Your browser does not support the <CODE>audio</CODE> element. </audio> <br /> <video src="video/presentacion.ogg" autoplay />

Es bastante interesante la compatibilidad con navegadores con versiones anteriores, de modo que si el navegador no soporta html5 se renderizar el contenido de las etiquetas, en el que se podra introducir, por ejemplo, un plugin en flash que proporcione el mismo soporte de audio o video. Posibilidad de acceso a los dispositivos de micro y webcam, que nos permitirn: mostrar el video al propio usuario, grabar el video y audio, enviar y recibir imgenes de la webcam, svg: renderizacin de grficos en funcin de un documento SVG (Scalable Vector Graphics), 1 2 3 4 5 6 7 8 <svg> <circle id="myCircle" cx="100" cy="75" r="50" fill="blue" stroke="firebrick" stroke-width="3" /> <text x="60" y="155">Hello World</text> </svg>

canvas: nos permitir renderizar imgenes sin necesidad de plugins, generando de forma dinmica el contenido a travs de javascript , y es el elemento de la polmica, en el que muchos han visto la muerte del flash, como hasta ahora lo conocamos, 01 02 03 04 05 06 07 08 09 10 11 12 13 <canvas id="mycanvas" width="200" height="100"> Your browser does not support the <CODE>canvas</CODE> element. </canvas> <script language="javascript"> var canvas = document.getElementById('mycanvas'); var context = canvas.getContext('2d'); contexto.fillRect(50, 0, 10, 150); </script>

5. Soporte para css3.

Tenemos las siguientes caractersticas destacables: un estilo nativo para esquinas redondeadas, gradient y sombreado. 1 2 3 4 5 <style type="text/css"> #style1 { border-radius: 15px; } </style>

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=html5

08/10/2010

Introduccin a HTML5.

Pgina 7 de 9

ser posible utilizar cualquier tipo de fuente, no solo las que tenga instaladas el cliente. Para ello, bastar con aadir al estilo la url de la tipografa, del ttf. 1 2 3 4 5 6 7 8 9 <style type="text/css"> @font-face { font-family: 'Comics'; src: url(Comics.ttf); } header { font-family: 'Comics'; } </style>

text wrapping con mayor parametrizacin que permite por ejemplo incluir puntos suspensivos... 1 2 3 4 5 <style type="text/css"> div { text-overflow: ellipsis; } </style>

opacidad estndar en todos los navegadores, 1 <div style="background: rgba(255, 0, 0, 1) ;"></div>

soporte para transiciones entre estilos basadas en el concepto anlogo de jQuery, con un periodo de cadencia, 01 02 03 04 05 06 07 08 09 10 11 12 13 14 <style type="text/css"> #box { -webkit-transition: margin-left 1s ease-in-out; } </style> <script language="javascript"> document.getElementById('box').className = 'left'; document.getElementById('box').className = 'right'; </script>

animaciones, al estilo de las que disponemos con script.aculo.us para prototype.js o con jqueryUI para jQuery. 1 2 3 4 5 6 7 8 9 <style type="text/css"> div { -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-direction: alternate; } </style>

6. Una pgina de ejemplo?.

Lo primero que debemos conocer es que el DOCTYPE de HTML5 es el siguiente: 1 <!DOCTYPE html>

El DOCTYPE es lo que diferencia las versiones de los documentos html, y define el contrato que deben seguir los documentos XML en general. En HTML5 es sencillo, no hay referencia a DTD, de modo que los navegadores que no lo soporten harn uso de su versin de html por defecto. Me voy a remitir en este punto a la pgina de ejemplo que ha generado la gente de Google para explorar las capacidades de HTML5 y que se us en el reciente Google

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=html5

08/10/2010

Introduccin a HTML5.

Pgina 8 de 9

D3vF3st de Madrid para demostrar la compatibilidad de Google Chrome con el estndar; por esto ltimo la recomendacin, hoy da, es verla con Google Chrome. http://slides.html5rocks.com Tambin es buena recomendacin: http://html5demos.com/ donde se puede ver la compatibilidad hoy da con los navegadores.

7. Cul es el estado actual de la especificacin y las implementaciones?.

La especificacin est an en borrador, aunque sufrir ya pocas modificaciones y, si bien en el arranque se barajaban como fechas para tener las primeras implementaciones 2012 e incluso 2022, los navegadores soportan ya bastante del estndar, algunos ms que otros. La idea es que la especificacin se cerrar cuando haya, al menos, dos implementaciones completas del estndar, esto es, dos navegadores que la soporten al 100%. Para saber qu de compatible es tu navegador favorito con HTML5, puedes visitar la siguiente pgina: http://www.html5test.com. Comenzaramos ahora a desarrollar basndonos en HTML5?, si no fuese una aplicacin para internet y tuviesemos poder de decisin sobre qu navegador tendr instalado el cliente, s. Podramos decir que estamos en un primer estadio de la tecnologa y que si lo pillamos a tiempo nos podemos subir al carro y estar preparados para cuando est maduro.

8. Referencias.
http://dev.w3.org/html5/html-author/ http://slides.html5rocks.com http://www.html5test.com http://joshduck.com/periodic-table.html http://www.chromeexperiments.com/ http://html5demos.com/ http://code.google.com/p/html5-shims/wiki/LinksandResources

9. Conclusiones.
Como os podis imaginar, esta breve introduccin da pie a muchos ms tutoriales sobre cada una de las nuevas caractersticas de HTML5, iremos poco a poco sumergindonos en ellos. Siempre intentaremos no tener que bajar a nivel del lenguaje de cliente para desarrollar, porque es ms dificil depurar, siempre estaremos a expensas de cmo se comporte el cdigo en los distintos navegadores,... que os voy a contar, que no sepis, a los que habis estado trabajando los ltimos aos con interfaces|documentos web. La esperanza es que tendremos libreras de componentes visuales que nos den soporte a las nuevas caractersticas, las libreras de componentes JSF se terminarn adaptando y, para los que trabajen con Spring MVC ya hay una primera implementacin basada en HTML5 de un proyecto llamado Summer, como la continuacin del Spring ;-) Un saludo.

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=html5

08/10/2010

Introduccin a HTML5.

Pgina 9 de 9

Jose jmsanchez@autentia.com

Anmate y comntanos lo que pienses sobre este TUTORIAL:

Puedes opinar o comentar cualquier sugerencia que quieras comunicarnos sobre este tutorial; con tu ayuda, podemos ofrecerte un mejor servicio.

Enviar comentario
(Slo para usuarios registrados)

Registrate y accede a esta y otras ventajas

COMENTARIOS

Esta obra est licenciada bajo licencia Creative Commons de Reconocimiento-No comercialSin obras derivadas 2.5

Copyright 2003-2010 All Rights Reserved | Texto Contacto Powered by Autentia | legal y condiciones de uso | Banners |

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=html5

08/10/2010