2. Introducción a HTML5
Índice
- Historia
- Novedades
- Algunas diferencias con HTML4
- Nuevos elementos
- Vídeo
- Canvas
- Formularios
- Polyfills y Modernizr
- Otras APIs
- Recursos
José Luis Serrano Lozano
3. Introducción a HTML5
Historia
- Se trata del nuevo estándar del lenguaje HTML para estructurar
y presentar contenido en la web.
- Es la quinta revisión importante del lenguaje, la anterior, HTML 4,
data ya de 1997, y la última, HTML 4.01, es de 1999.
- La web ha cambiado mucho desde entonces.
- Su intención es englobar todas las tecnologías web en un solo estándar.
José Luis Serrano Lozano
4. Introducción a HTML5
Historia
- Surgió como una cooperación en 2006 entre el W3C (World Wide Web
Consortium) y el WHATWG (Web Hypertext Application Technology
Working Group).
- Algunas de las reglas:
• Las nuevas características deben estar basadas en HTML, CSS
y JavaScript.
• Reducir la necesidad de plugins externos.
• Más marcado para reducir scripting.
• Independencia del dispositivo.
José Luis Serrano Lozano
6. Introducción a HTML5
Novedades
- Nuevos elementos y atributos para contenido específico:
header, nav, footer, article...
- Algunos son similares a div y span pero añaden un significado
semántico:
<div> → <div id=”header”> → <header>
- Otros proporcionan nuevas funcionalidades a través de una interfaz
estandarizada.
- Elementos audio y video para reproducción multimedia.
José Luis Serrano Lozano
7. Introducción a HTML5
Novedades
- Nuevo elemento canvas para dibujos en 2D.
- Nuevos tipos de inputs para un mejor manejo de los formularios,
como calendar, date, email...
- Se eliminan elementos obsoletos de HTML 4.01, incluyendo algunos
puros de presentación: font, center, frame...
José Luis Serrano Lozano
8. Introducción a HTML5
Novedades
- No sólo hay cambios en las etiquetas.
- Nacen muchas APIs basadas en Javascript y que extienden el DOM:
• Audio y Vídeo
• Canvas 2D
• Drag & Drop
• Web Storage
• Indexed BD
José Luis Serrano Lozano
9. Introducción a HTML5
Novedades
• Web Workers
• File API
• Offline
• Web Sockets
• XMLHttpRequest 2
• Geolocation
José Luis Serrano Lozano
10. Introducción a HTML5
Algunas diferencias con HTML4
- DOCTYPE
HTML 4.01:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 5:
<!DOCTYPE html>
José Luis Serrano Lozano
11. Introducción a HTML5
Algunas diferencias con HTML4
- HTML
HTML 4.01:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
HTML 5:
<html lang="en">
José Luis Serrano Lozano
12. Introducción a HTML5
Algunas diferencias con HTML4
- META
HTML 4.01:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML 5:
<meta charset="utf-8" />
José Luis Serrano Lozano
13. Introducción a HTML5
Nuevos elementos
- De estructura:
<section>
Marcar una sección genérica en un documento. Se trata de un conjunto de contenido temático,
normalmente con una cabecera.
<nav>
Declarar una sección navegacional de una página. Este elemento está pensando para los
bloques de navegación más importantes de la página.
José Luis Serrano Lozano
14. Introducción a HTML5
Nuevos elementos
- De estructura:
<article>
Marcar un contenido independiente o un bloque como un artículo, éste puede ser un artículo
de una noticia, el post de un blog... Este contenido debe ser, en principio, reusable o distribuible
de forma independiente.
<aside>
Envolver todo aquel contenido que sea relativo a la sección principal de un sitio, pero que no es
el tema principal. Es habitual colocarlo a la derecha, por ejemplo: formulario de login, widgets
de Facebook o Twitter, post antiguos...
José Luis Serrano Lozano
15. Introducción a HTML5
Nuevos elementos
- De estructura:
<hgroup>
Representa la cabecera de una sección. Agrupa un conjunto de encabezados en un sólo bloque
para que puedan ser usados como una única unidad. Sólo se pueden usar las etiquetas que
van desde <h1> hasta <h6>.
<header>
Cabecera para la introducción de un documento o de una sección con las etiquetas <h1> hasta
<h6> y <hgroup>, aunque no es obligatorio. Puede incluir navegación, una tabla de contenidos,
un formulario de búsqueda o logos.
José Luis Serrano Lozano
16. Introducción a HTML5
Nuevos elementos
- De estructura:
<footer>
Marcar el pie de un documento o de una sección, puede incluir el nombre del autor, la fecha
del documento, información de contacto o información de copyright.
José Luis Serrano Lozano
17. Introducción a HTML5
Nuevos elementos
- De agrupación de contenido:
<figure> y <figcaption>
Agrupar una sección de contenido autónomo. Es usado para marcar ilustraciones, diagramas,
fotos, código fuente, gráficos... <figcaption> puede ser utilizado para asociar un título al
contenido embebido.
<div>
No tiene ningún significado semántico especial. Debe ser utilizado como último recurso cuando
no haya ningún otro elemento más adecuado, y sólo para marcar semánticamente y de forma
común a un grupo consecutivo de elementos.
José Luis Serrano Lozano
18. Introducción a HTML5
Nuevos elementos
- A nivel de texto:
<mark>
Marcar un texto que debe ser resaltado y diferenciado. Su función puede tener dependencia
con el comportamiento del usuario, ya que en ocasiones esta etiqueta puede indicar algún
tipo de actividad reciente.
<time>
Definir una hora o fecha, o ambos.
José Luis Serrano Lozano
19. Introducción a HTML5
Nuevos elementos
- Interactivos:
<details> y <summary>
Proporcionan un área de contenido desplegable. Inicialmente se muestra un elemento
<summary> que será con el que se alterne la visibilidad del contenido de forma interactiva.
José Luis Serrano Lozano
20. Introducción a HTML5
Nuevos elementos
- Otros:
<progress>
Estado de un trabajo en progreso o tarea en curso.
<meter>
Representa una medida dentro de un rango conocido, sólo se puede utilizar si son conocidos
los valores mínimo y máximo, por ejemplo el uso de disco, la fracción de una votación...
José Luis Serrano Lozano
21. Introducción a HTML5
Nuevos elementos
- Multimedia:
<audio> y <video>
Para añadir y reproducir contenido multimedia, sonidos, música y vídeo.
<source>
Para definir los recursos de los elementos audio y video.
<embed>
Como contenedor para aplicaciones externas o plugins, como una animación Flash.
<track>
Para especificar subtítulos, títulos y otros ficheros que contengan texto y que deban
visualizarse.
José Luis Serrano Lozano
22. Introducción a HTML5
Nuevos elementos
- Veamos un ejemplo.
José Luis Serrano Lozano
23. Introducción a HTML5
Vídeo
- En el pasado la única manera de introducir vídeo en una página web
era a través de un plugin de terceros como podía ser Flash, Silverlight,
Quicktime, Windows Media…
- HTML5 incorpora una forma estándar de introducir vídeo en las páginas
web.
- Esta manera estándar está soportada por Firefox 3.5, Safari 3, Chrome,
Opera, IE 9…
José Luis Serrano Lozano
24. Introducción a HTML5
Vídeo
- Actualmente es una de las partes del estándar mejor soportada por
casi todos los navegadores, aunque no todos son capaces de reproducir
vídeos codificados en todos los formados.
- Hay multitud de formatos de vídeo: Ogg Theora, H.264, WebM, MPEG-4,
Flash video...
José Luis Serrano Lozano
25. Introducción a HTML5
Vídeo
- Si queremos usar html 5 para reproducir vídeo y que funcione en todos
los navegadores tendremos que codificar ese vídeo en varios formatos.
- No todos los formatos son soportados por todos los navegadores.
- Se definen nuevas APIs Javascript para la manipulación del elemento
video: HTMLMediaElement y HTMLVideoElement.
José Luis Serrano Lozano
26. Introducción a HTML5
Vídeo
<video id="elVideo" controls autoplay>
<source src="clase.ogv" type="video/ogg"/>
<source src="clase.mp4" />
Tu navegador no soporta vídeo.
</video>
var video = document.getElementById('elVideo');
video.play(); // Reproducir
video.pause(); // Pausar
video.currentTime = 20; // Ir al segundo 20 del vídeo
José Luis Serrano Lozano
28. Introducción a HTML5
Canvas
- Sirve para dibujar gráficos en una página usando Javascript. Se trata de
un área rectangular de la que podemos controlar cada uno de sus píxeles.
- Su API ofrece toda una serie de métodos para pintar líneas, rectángulos,
círculos, imágenes...
<canvas id="elCanvas" width="200" height="200"></canvas>
var canvas = document.getElementById("elCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#ff0000";
ctx.fillRect(0, 0, 50, 50);
ctx.fillStyle = "orange";
ctx.arc(50,50,15,0,Math.PI*2);
ctx.fill();
José Luis Serrano Lozano
30. Introducción a HTML5
Formularios
- HTML5 ofrece toda una serie de nuevos tipos de campos de entrada que
permiten construir y validar de manera estándar formularios mucho más
ricos en aspecto y funcionalidad.
- También trae algunos nuevos atributos que facilitan el control y la
validación de los campos.
José Luis Serrano Lozano
31. Introducción a HTML5
Formularios
- Placeholder
Permite indicar un texto en el interior de un input que describe el valor esperado para el campo:
<input name="texto" type=”text” placeholder="Introduce el texto a buscar" />
- Autofocus
Permite indicar el elemento del formulario en el que se deberá situar el foco al cargar la página:
<input name="texto" type=”text” autofocus />
- Required
Permite indicar de forma nativa qué campos del formulario son obligatorios.
<input name="texto" type=”text” required />
José Luis Serrano Lozano
32. Introducción a HTML5
Formularios
- Pattern
Nos permite indicar la expresión regular que debe cumplir el texto del campo para que éste se
considere correcto:
<input name="texto" type=”text” pattern=”regexp” />
- Novalidate
Para desactivar todas las validaciones por defecto de un formulario:
<form action=”” novalidate />
José Luis Serrano Lozano
33. Introducción a HTML5
Formularios
- Email
Para la introducción de emails. En los dispositivos móviles se adapta el teclado:
<input name="entrada" type="email" />
- Url
Destinado a la introducción de urls. Al igual que el anterior en los dispositivos móviles se adapta
el teclado:
<input name="entrada" type="url" />
José Luis Serrano Lozano
34. Introducción a HTML5
Formularios
- Numérico
Nos permite indicar que se trata de un tipo de campo numérico. Podremos indicar el valor
mínimo, el máximo, el intervalo permitido y el valor por defecto:
<input name=”entrada” type="number" min="0" max="12" step="2" value="6" />
- Rango
Similar al campo de arriba, salvo por su representación visual, que será como un slider:
<input type="range" min="0" max="12" step="2" value="6" name=”entrada” />
José Luis Serrano Lozano
35. Introducción a HTML5
Formularios
- Fecha
Permite hasta 6 formas de introducir una fecha: date, month, week, time, datetime y
datetime-local.
<input name="entrada" type="date" />
- Búsqueda
Permite indicar que el elemento se trata de un campo de búsqueda. A efectos prácticos
aporta poco, aunque algunos navegadores lo renderizan de una forma especial:
<input name="entrada" type="search" />
José Luis Serrano Lozano
36. Introducción a HTML5
Formularios
- Color
Permite seleccionar un color devolviendo su valor en hexadecimal fácil de usar en css:
<input name="entrada" type="color" />
José Luis Serrano Lozano
37. Introducción a HTML5
Formularios
- A nivel de formulario:
checkValidity(): valida todos los campos.
- A nivel de inputs:
checkValidity(): si el campo es válido.
setCustomValidity(): asigna un mensaje de error personalizado y hace que automáticamente
el formulario no se valide.
willValidate: propiedad que indica si el campo debe ser validado o no atendiendo a su tipo.
validationMessage: propiedad que indica el mensaje de error que se mostrará.
validity: propiedad de tipo ValidityState que indica qué tipos de restricciones no se cumplen.
José Luis Serrano Lozano
38. Introducción a HTML5
Formularios
- ValidityState:
customError: cuando se ha indicado un mensaje de error personalizado.
patternMismatch: si el valor no cumple con el patrón indicado.
rangeOverflow: si el valor es superior al máx.
rangeUnderflow: si el valor es inferior al mín.
stepMismatch: si el valor no cumple con la regla del intervalo.
tooLong: si el valor supera el tamaño máx.
typeMismatch: si el valor no cumple la sintaxis esperada (tipo email, url...).
valueMissing: si el campo es obligatorio pero no tiene valor.
valid: cierta si son false todas las demás propiedades.
José Luis Serrano Lozano
40. Introducción a HTML5
Polyfills
- Nos van a permitir utilizar las nuevas funcionalidades de HTML5 y CSS3
en navegadores antiguos.
- Un polyfill es un bloque de código JavaScript que replica o emula una API
estándar aportando funcionalidad futura a navegadores antiguos,
permitiéndonos mantener la compatibilidad entre navegadores.
José Luis Serrano Lozano
41. Introducción a HTML5
Modernizr
- Librería JavaScript que detecta la disponibilidad de implementaciones
nativas de las características de HTML5 y CSS3.
Modernizr.load([
{
test : Modernizr.websockets,
yep : 'recurso.js',
nope : 'socket-io.js',
both : [ 'app.js', 'extra.js' ],
complete : function () {
myApp.init();
}
}
]);
José Luis Serrano Lozano
42. Introducción a HTML5
Modernizr
- Veamos un par de ejemplos.
José Luis Serrano Lozano
43. Introducción a HTML5
Geolocation
- El API de geolocalización nos permite obtener la posición aproximada en
la que se encuentra el navegador:
navigator.geolocation.getCurrentPosition(function(pos) {
alert( 'latitud: ' + pos.coords.latitude + 'nlongitud: ' + pos.coords.longitude);
}, function(error) {
var msg = 'Error desconocido';
if(error.code == 1) {
msg = 'Permiso denegado';
} else if(error.code == 2) {
msg = 'Posición no disponible';
} else if(error.code == 3) {
msg = 'Timeout';
}
console.log('Error: ' + error.code + ' --> ' + msg);
});
José Luis Serrano Lozano
44. Introducción a HTML5
WebSockets
- WebSockets proporciona un socket sobre HTTP que permite comunicación
bidireccional entre cliente y servidor en tiempo real.
var connection = new WebSocket('ws://localhost:8080/Prueba/socketPrueba');
connection.onopen = function () {};
connection.onerror = function (error) {};
connection.onmessage = function (e) { console.log(e.data); };
connection.send('mensaje a enviar');
José Luis Serrano Lozano
45. Introducción a HTML5
WebStorage
- Web Storage permite almacenar pares clave-valor donde la clave será una
cadena y el valor otra cadena.
- Define dos tipos de almacenamiento con características distintas:
•Session Storage
•Local Storage
- Se diferencian en como se comportan los datos en cuanto a durabilidad y
ámbitos para el acceso.
José Luis Serrano Lozano
46. Introducción a HTML5
Session Storage
- Elimina el problema de las cookies compartidas entre diferentes ventanas.
- Sólo se debe guardar información efímera que no tenga que conservarse
en diferentes sesiones.
// Almacenar con setItem o directamente la propiedad con el nombre que deseamos usar:
sessionStorage.nombre = nombre;
sessionStorage.setItem('apellidos', apellidos);
//Para recuperar accedemos bien por propiedad o bien mediante el método getItem:
var nombre = sessionStorage.nombre;
var apellidos = sessionStorage.getItem('apellidos');
// Para eliminar con el método removeItem:
sessionStorage.removeItem('nombre');
sessionStorage.removeItem('apellidos');
José Luis Serrano Lozano
47. Introducción a HTML5
Local Storage
- Permite almacenar información que perdurará aún cuando la ventana
se cierre.
- Es compartido entre las diferentes ventanas dentro de un mismo dominio.
// Almacenar con setItem o directamente la propiedad con el nombre que deseamos usar:
localStorage.nombre = nombre;
localStorage.setItem('apellidos', apellidos);
//Para recuperar accedemos bien por propiedad o bien mediante el método getItem:
var nombre = localStorage.nombre;
var apellidos = localStorage.getItem('apellidos');
// Para eliminar con el método removeItem:
localStorage.removeItem('nombre');
localStorage.removeItem('apellidos');
José Luis Serrano Lozano
48. Introducción a HTML5
IndexedDB
- Nos permite crear bases de datos en cliente asociadas a dominios.
- No presentan tablas pero sí cierta estructura basada en objetos:
object stores (almacenes de objetos).
- Un object store es una asociación clave-valor.
- Nos permite definir claves, índices y campos únicos.
- Transaccionalidad, consulta, inserción, borrado, cursores...
José Luis Serrano Lozano
49. Introducción a HTML5
IndexedDB
var request = indexedDB.open('users');
request.onsuccess = function(e) {
var v = '1.0';
database.db = e.target.result;
var db = database.db;
if(v != db.version) {
var versionRequest = db.setVersion(v);
versionRequest.onerror = database.onerror;
versionRequest.onsuccess = function(e) {
if(db.objectStoreNames.contains('objectStoreUsers')) {
db.deleteObjectStore('objectStoreUsers');
}
db.createObjectStore('objectStoreUsers', { keyPath : 'email' });
};
}
};
José Luis Serrano Lozano
50. Introducción a HTML5
IndexedDB
database.addUser = function(user) {
var db = database.db;
var transaction = db.transaction(['objectStoreUsers'], IDBTransaction.READ_WRITE);
var objectStore = transaction.objectStore(objectStoreUsers);
var putRequest = objectStore.put(user);
putRequest.onsuccess = function(e) {
alert("Usuario creado");
};
putRequest.onerror = database.onerror;
};
José Luis Serrano Lozano
51. Introducción a HTML5
File API
- HTML5 introduce nuevas posibilidades para seleccionar ficheros y
trabajar con ellos.
- También ofrece un sistema de ficheros en el navegador en el que
se pueden crear, modificar y borrar tanto directorios como ficheros.
José Luis Serrano Lozano
52. Introducción a HTML5
File API
<input type=”file” id=”input-archivos-imagen” multiple=”multiple” accept=”image/*” />
document.getElementById(“input-archivos-imagen”).addEventListener('change', getInfo);
function getInfo(){
var files = this.files;
for (var i=0; i<files.length; i++){
var file = files[i];
console.log(file.name + ' ' + file.type + ' ' + file.size);
}
}
José Luis Serrano Lozano
53. Introducción a HTML5
File API – Object URL
function previsualizar(){
var files = this.files;
var divPreview = document.getElementById('zonaPreview');
for (var i=0; i<files.length; i++){
var img = document.createElement('image');
img.src = window.URL.createObjectURL(files[i]);
img.onload = function(e){
window.URL.revokeObjectURL(this.src);
}
divPreview.appendChild(img);
}
divPreview.style.display = '';
}
José Luis Serrano Lozano
54. Introducción a HTML5
File API – File System
window.requestFileSystem(window.TEMPORARY, 10*1024*1024 /*10MB*/, successInitFileSystem,
fileSystemErrorHandler);
function successInitFileSystem(fs) {
fs.root.getFile('log.txt', {create: true, exclusive: true}, ok, error);
}
function leeFichero(fs){
fs.root.getFile('log.txt', {}, function(fileEntry){
fileEntry.file(function(file){
var reader = new FileReader();
reader.onloadend = function(e){
var contenido = this.result;
}
reader.readAsText(file);
}
}, error);
} José Luis Serrano Lozano
55. Introducción a HTML5
Web Workers
- Permiten poder lanzar tareas en segundo plano sin que interfieran con el
hilo principal.
- Permiten el intercambio de mensajes con el hilo principal (en ambas
Direcciones).
- Pueden realizar tareas de comunicación con el servidor mediante
XMLHttpRequest.
- Un Worker no puede acceder al DOM ni a ningún componente que no sea
thread-safe.
José Luis Serrano Lozano
56. Introducción a HTML5
Web Workers
// Creación del worker desde el hilo principal
var miWorker = new Worker(‘fichero.js’);
// Recibir mensajes del worker en el hilo principal
miWorker.onmessage = function(event){
alert(event.data);
};
// Finalizar worker desde el hilo principal
miWorker.terminate();
// Enviar mensajes desde el hilo principal
miWorker.postMessage(obj);
// Enviar mensajes desde el worker
postMessage(obj);
José Luis Serrano Lozano
57. Introducción a HTML5
Offline
- A través de un simple fichero de meta-información.
- Se trata de un fichero con una estructura que indica como debe actuar
el navegador a la hora de cachear los recursos.
- Debe servirse con la cabecera Content-Type igual “text/cache-manifest”.
<!DOCTYPE HTML>
<html manifest="/cache.manifest">
<body>
...
</body>
</html>
José Luis Serrano Lozano
58. Introducción a HTML5
Offline
CACHE MANIFEST
NETWORK:
/cuenta-visitas
FALLBACK:
/ /no-encontrado.html
CACHE:
/un.css
/un.js
/logo.jpg
/contacta.html
José Luis Serrano Lozano
59. Introducción a HTML5
Offline
- Para conocer si estamos online:
navigator.onLine con valores true o false.
Evento online del body que salta siempre que el navegador pasa de estado offline a online.
Evento offline del body que salta siempre que el navegador pasa de estado online a offline.
José Luis Serrano Lozano
60. Introducción a HTML5
Drag & Drop
- Para hacer un elemento “draggable” simplemente indicaremos su atributo
draggable a true:
<div draggable=”true” />
- Sin embargo, tenemos que recurrir a los eventos nativos para realizar
el seguimiento de toda la acción:
dragstart, drag, dragenter, dragleave, dragover, drop, dragend
- A través de la propiedad dataTransfer podremos enviar la información
asociada a la acción de drag & drop.
José Luis Serrano Lozano
61. Introducción a HTML5
Recursos
- Ejemplos y tutoriales:
http://www.html5rocks.com
http://html5demos.com
- Soporte de los navegadores:
http://www.fmbip.com/litmus
http://www.html5test.com
- Tabla periódica de los elementos:
http://html5facil.com/wp-content/uploads/2011/12/tabla-periodica-de-los-elementos-en-html5.png
- Polyfills:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
- Guía de referencia rápida:
http://media.smashingmagazine.com/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf
José Luis Serrano Lozano