Avenida de Castilla,1 - Edificio Best Point - Oficina 21B28830 San Fernando de Henares (Madrid)

tel./fax: +34 91 675 33 06info@autentia.com - www.autentia.com

Somos su empresa de Soporte a Desarrollo Informático.Ese apoyo que siempre quiso tener...

1. Desarrollo de componentes y proyectos a medida

TecnologíaDesarrolloSistemas

Gran Empresa

Producción

autentia

Certificacióno Pruebas

Verificación previa

RFP Concurso

Consultora 1

Consultora 2

Consultora 3

Equipo propio desarrolloPiloto

3a

3b

1. Definición de frameworks corporativos.2. Transferencia de conocimiento de nuevas arquitecturas.3. Soporte al arranque de proyectos.4. Auditoría preventiva periódica de calidad.5. Revisión previa a la certificación de proyectos.6. Extensión de capacidad de equipos de calidad.7. Identificación de problemas en producción.

3. Arranque de proyectos basados en nuevas tecnologías

¿Qué ofrece Autentia Real Business Solutions S.L?

Para más información visítenos en: www.autentia.com

Compartimos nuestro conociemiento en: www.adictosaltrabajo.com

Gestor portales (Liferay)Gestor de contenidos (Alfresco)Aplicaciones híbridas

Tareas programadas (Quartz)Gestor documental (Alfresco)Inversión de control (Spring)

BPM (jBPM o Bonita)Generación de informes (JasperReport)ESB (Open ESB)

Control de autenticación y acceso (Spring Security)UDDIWeb ServicesRest ServicesSocial SSOSSO (Cas)

Spring MVC, JSF-PrimeFaces /RichFaces, HTML5, CSS3, JavaScript-jQuery

JPA-Hibernate, MyBatisMotor de búsqueda empresarial (Solr)ETL (Talend)

Dirección de Proyectos Informáticos.Metodologías ágilesPatrones de diseñoTDD

2. Auditoría de código y recomendaciones de mejora

4. Cursos de formación (impartidos por desarrolladores en activo)

13/4/2015 Introducción a HTML5.

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

Entra en Adictos a través de

Entrar

E­mail

Contraseña

RegistrarmeOlvidé mi contraseña

Inicio Quiénes somos Formación Comparador de salarios Nuestros libros Más

» Estás en: Inicio Tutoriales Introducción a HTML5.

Síguenos a travésde:

Catálogo de serviciosAutentia

Últimas Noticias

» 2015: ¡Volvemos a la oficina!

» Curso JBoss de Red Hat

» Si eres el responsable o lídertécnico, considératedesafortunado. No puedesculpar a nadie por ser gris

» Portales, gestores decontenidos documentales ydesarrollos a medida

» Comentando el libro Start­upNation, La historia del milagroeconómico de Israel, de DanSenor & Salu Singer

Histórico de noticias

Últimos Tutoriales

» Técnicas de realización deentrevistas

» Imprimiendo documentosOffice y PDF existentes conJava en entorno Windows.Batch & Print

» Enfréntate con éxito a lacrisis de la hoja en blanco

» Patrones de diseño enHadoop: Patrón Partitioner

» Movimientos de la cámara

Ver todos los tutoriales del autor

Jose Manuel Sánchez Suárez

Consultor tecnológico de desarrollo de proyectos informáticos.

Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo, factoría yformación

Somos expertos en Java/J2EE

Fecha de publicación del tutorial: 2010­10­09 Tutorial visitado 18.825 veces Descargar en PDF

Introducción a HTML 5.

0. Índice de contenidos.

1. Introducción.2. A nivel de etiquetado.3. A nivel de javascript.4. Soporte para media.5. Soporte para css3.6. ¿Una página de ejemplo?.7. ¿Cuál es el estado actual de la especificación y las implementaciones?.8. Referencias.9. Conclusiones.

1. Introducción

En este tutorial vamos a realizar una breve introducción a las novedades que traerá la versión 5 de html. Sí, el título está bienescrito, hablamos de html, aunque también habrá la correlativa versión en xhtml, las diferencias entre ambas solo vendrándadas por las restricciones típicas de un documento xml bien formado.

Visto lo anterior, lo primero que debemos saber es que no se trata solo de una actualización de la colección de marcas quepodemos utilizar dentro del etiquetado de nuestras páginas. En versiones anteriores, frente a una nueva especificación, o alpasar a xhtml, las diferencias con las versiones anteriores venían dadas por la supresión de etiquetas en desuso y laincorporación de nuevas etiquetas que ampliaban funcionalidad. La nueva versión del estandar, además de lo anterior, vienede la mano de nuevas y muy interesantes características, como las que veremos a continuación.

Lo que debe quedar claro es que estas características, como la estandarización de CSS3, geolocalización, soporte de audio yvideo o la ampliación de los métodos de acceso al árbol DOM en javascript, no son estictamente del estándar HTML5, pero seasocian con la nueva versión, le dan mucha más potencia y la hacen mucho más atractiva.

2. A nivel de etiquetado.

Tenemos las siguientes características destacables:

Nuevas etiquetas:hay una etiqueta específica para el menú de navegación, navhay etiquetas para distinguir secciones y artículos, pensadas para páginas de noticias o blogs, section y articlepor fin hay un footer, siempre escribiendo la cabecera y hasta ahora no teníamos pie de página.pero también hay un header, distinto del head, que serviría para insertar contenido visible en la cabecera de lapágina,mark, indicará un texto resaltado,time, indica una fecha u hora,meter, representa un valor numérico,progress, indica el estado de una tarea, lo que es una barra de progeso,

Nueva colección de tags que añaden contenido semántico:aside, anotaciones que complementan el texto pero quedan fuera del texto,figure, se podrá asociar contenido multimedia a un título o legend,

Nuevos tipos de componenentes de formulario:input type="date | time | email | url | tel | search | ...", que permite introducir distintos tipos de contenidosproduciendo una validación automática de los mismos, como un email válido; los input de selección de fecha yhora se pueden convertir en un date picker en función del navegador,validación de campo requerido mediante el atributo required, así como mínimo y máximo,input spinner, a través del atributo step y type,sliders, a través de type="range"validaciones con expresiones regularesrestricción de valores en un input a través de un dataListel atributo placeholder permitirá asignar un texto por defecto sombreado a los inputs (el típico de Google en el

13/4/2015 Introducción a HTML5.

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

Últimos Tutoriales delAutor

» Generación de vistas HTML5con el soporte de JSF2: passthrough

» Extendiendo las reglas deSonarQube con Xpath

» Solución de problemascomunes con la integración demaven en Eclipse Luna.

» Integración de SonarQubeen Eclipse.

» Monitorización de ApacheTomcat con psi­probe.

Categorías del Tutorial

Navegadores

HTML5

campo de búsqueda de firefox),

Hay etiquetas que han caido en desuso y otras características también interesantes que no he incluido, podéis consultar todaslas etiquetas en forma de tabla periódica en el siguiente enlace

http://websitesetup.org/html5­periodical­table/

A continuación un ejemplo de documento html5:

3. A nivel de javascript.

Tenemos las siguientes características destacables:

nuevos métodos de acceso a los nodos del árbol DOM que incorporan las facilidades que, hasta ahora, solo teníamoscon librerías de javascript como prototype.js o jQuery. Son métodos como:

document.getElementsByClassName: que permite recuperar todos los nodos del árbol DOM con el mismoestilo de clase,document.querySelectorAll y document.querySelector: viene a sustituir lo que en jQuery es la propia funciónjQuery o el alias $, heredado de prototype, que permite realizar consultas al árbol DOM para recuperar nodos condistintos selectores o combinación de los mismos,

soporte drag & drop nativo.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354

<!DOCTYPE html><html><head> <title>HTML5 test</title> <meta content="text/html; charset=ISO­8859­1" http­equiv="content­type" /></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="#">Administración</a></li> </ul> </nav> <form> <input type="search" name="q" placeholder="Búsqueda" /> </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><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>

1234567

<script language="javascript"> document.getElementsByClassName("style1"); document.querySelectorAll("ul li:nth­child(odd)"); document.querySelector("table.test > tr > td");</script>

12345678910111213141516171819

<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;);

?

?

?

13/4/2015 Introducción a HTML5.

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

web storage o almacenamiento local de datos, que viene a solventar las limitaciones de almacenamiento de lascookies, permitiendo almacenar mucha más información en el cliente dando pie a trabajar con aplicaciones web como sifuesen aplicaciones de escritorio en modo offline, para ello también disponemos de un API de caché que permite indicara través de un fichero de manifest, qué recursos deben ser cacheados,

existirá la posibilidad de disponer de bases de datos SQL en cliente, ¿habíais pensado alguna vez en la posibilidad detener que escribir sentencias SQL en javascript?, pues si; ¿que será lo siguiente? ¿cuánto tardaremos en tener unaversión de hibernate para javascript? ;­),

geolocalización: mediante una simple invocación a un método javascript nativo, podremos obtener la localización delequipo cliente, previa aceptación del usuario a facilitar dicha información,

web workers: permite la ejecución de scripts en segundo plano, son procesos de larga duración y pueden consumirmucha memoria que hasta ahora se podían implementar con la función window.setTimeOut(). Los workers tienen lassiguientes 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, podrían persistir al cierre de lamisma.

web sockets: es la implementación de la comunicación bidireccional entre el cliente y el servidor, lo que podemosdenominar push o comet, y que antes hacíamos con Ajax a través del objeto XMLHttpRequest. Con HTML5 ya no seránecesario su uso puesto que provee de un mecanismo estándar para realizar dicha comunicación invocandodirectamente a un método send() que remitirá la información al servidor.

notificaciones: huyendo de los alerts, permiten notificar al usuario eventos que se producen en una ventana fuera delnavegador, con lo que, aunque esté minimizada la misma se mostrarán al usuario,

4. Soporte para media.

Soporte para audio y video: que nos permitirá insertar contenido media sin necesidad de hacer uso de flash,

Es bastante interesante la compatibilidad con navegadores con versiones anteriores, de modo que si el navegador nosoporta html5 se renderizará el contenido de las etiquetas, en el que se podría introducir, por ejemplo, un plugin en flashque proporcione el mismo soporte de audio o video.

Posibilidad de acceso a los dispositivos de micro y webcam, que nos permitirán:

mostrar el video al propio usuario,

2021

</script>

1234567

<script language="javascript"> window.localStorage['value'] = document.getElementById("comments"); document.getElementById("comments") = window.localStorage['value']; </script>

123456

<script language="javascript">var db = window.openDatabase("Items", "1.0");db.transaction(function(tx) tx.executeSql("SELECT * FROM Item", [], successCallback, errorCallback););</script>

12345678

<script language="javascript">if (navigator.geolocation) navigator.geolocation.getCurrentPosition(function(position) var lat = position.coords.latitude; var lng = position.coords.longitude; );</script>

1234

<script language="javascript"> var worker = new Worker('myjavascript.js'); worker.onmessage = function(event) alert(event.data); ;</script>

123456789

<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>

12345678910111213141516

<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", "Título", "Cuerpo").show(); </script>

12345

<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 />

?

?

?

?

?

?

?

13/4/2015 Introducción a HTML5.

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

grabar el video y audio,enviar y recibir imágenes de la webcam,

svg: renderización de gráficos en función de un documento SVG (Scalable Vector Graphics),

canvas: nos permitirá renderizar imágenes sin necesidad de plugins, generando de forma dinámica el contenido através de javascript , y es el elemento de la polémica, en el que muchos han visto la muerte del flash, como hasta ahoralo conocíamos,

5. Soporte para css3.

Tenemos las siguientes características destacables:

un estilo nativo para esquinas redondeadas, gradient y sombreado.

será posible utilizar cualquier tipo de fuente, no solo las que tenga instaladas el cliente. Para ello, bastará con añadir alestilo la url de la tipografía, del ttf.

text wrapping con mayor parametrización que permite por ejemplo incluir puntos suspensivos...

opacidad estándar en todos los navegadores,

soporte para transiciones entre estilos basadas en el concepto análogo de jQuery, con un periodo de cadencia,

animaciones, al estilo de las que disponemos con script.aculo.us para prototype.js o con jqueryUI para jQuery.

6. ¿Una página de ejemplo?.

Lo primero que debemos conocer es que el DOCTYPE de HTML5 es el siguiente:

12345678

<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>

12345678910111213

<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>

12345

<style type="text/css">#style1 border­radius: 15px;</style>

123456789

<style type="text/css">@font­face font­family: 'Comics'; src: url(Comics.ttf);header font­family: 'Comics';</style>

12345

<style type="text/css">div text­overflow: ellipsis;</style>

1 <div style="background: rgba(255, 0, 0, 1) ;"></div>

1234567891011121314

<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>

123456789

<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>

1 <!DOCTYPE html>

?

?

?

?

?

?

?

?

?

13/4/2015 Introducción a HTML5.

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

Share | 3

» Registrate y accede a esta y otras ventajas «

Anímate y coméntanos lo que pienses sobre este TUTORIAL:

El DOCTYPE es lo que diferencia las versiones de los documentos html, y define el contrato que deben seguir los documentosXML en general. En HTML5 es sencillo, no hay referencia a DTD, de modo que los navegadores que no lo soporten harán usode su versión de html por defecto.

Me voy a remitir en este punto a la página de ejemplo que ha generado la gente de Google para explorar las capacidades deHTML5 y que se usó en el reciente Google D3vF3st de Madrid para demostrar la compatibilidad de Google Chrome con elestándar; por esto último la recomendación, hoy día, es verla con Google Chrome.

http://slides.html5rocks.com

También es buena recomendación:

http://html5demos.com/

donde se puede ver la compatibilidad hoy día con los navegadores.

7. ¿Cuál es el estado actual de la especificación y las implementaciones?.

La especificación está aún en borrador, aunque sufrirá ya pocas modificaciones y, si bien en el arranque se barajaban comofechas para tener las primeras implementaciones 2012 e incluso 2022, los navegadores soportan ya bastante del estándar,algunos más que otros. La idea es que la especificación se cerrará cuando haya, al menos, dos implementaciones completasdel estándar, esto es, dos navegadores que la soporten al 100%.

Para saber qué de compatible es tu navegador favorito con HTML5, puedes visitar la siguiente página:http://www.html5test.com.

¿Comenzaríamos ahora a desarrollar basándonos en HTML5?, si no fuese una aplicación para internet y tuviesemos poder dedecisión sobre qué navegador tendrá instalado el cliente, sí. Podríamos decir que estamos en un primer estadio de latecnología 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.comhttp://www.html5test.comhttp://joshduck.com/periodic­table.htmlhttp://www.chromeexperiments.com/http://html5demos.com/http://code.google.com/p/html5­shims/wiki/LinksandResources

9. Conclusiones.

Como os podéis imaginar, esta breve introducción da pie a muchos más tutoriales sobre cada una de las nuevascaracterísticas de HTML5, iremos poco a poco sumergiéndonos en ellos.

Siempre intentaremos no tener que bajar a nivel del lenguaje de cliente para desarrollar, porque es más dificil depurar, siempreestaremos a expensas de cómo se comporte el código en los distintos navegadores,... que os voy a contar, que no sepáis, alos que habéis estado trabajando los últimos años con interfaces|documentos web.

La esperanza es que tendremos librerías de componentes visuales que nos den soporte a las nuevas características, laslibrerías de componentes JSF se terminarán adaptando y, para los que trabajen con Spring MVC ya hay una primeraimplementación basada en HTML5 de un proyecto llamado Summer, como la continuación del Spring ;­)

Un saludo.

Jose

jmsanchez@autentia.com

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

13/4/2015 Introducción a HTML5.

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

Esta obra está licenciada bajo licencia Creative Commons de Reconocimiento­No comercial­Sin obras derivadas 2.5

PUSH THIS Page Pushers Community Help?

----no clicks

+ + + + + + + +

0 people brought clicks to this page

powered by karmacracy

Copyright 2003­2015 © All Rights Reserved | Texto legal y condiciones de uso | Banners | Powered by Autentia | Contacto