Introducción a HTML5: Nuevos elementos multimedia

Introducción a HTML5
José Luis Serrano Lozano


Índice
- Historia
- Novedades
- Algunas diferencias con HTML4
- Nuevos elementos
- Vídeo
- Canvas
- Formularios
- Polyfills y Modernizr
- Otras APIs
- Recursos


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.



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.



HTML + CSS 3 + JavaScript APIs = 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.



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



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



Novedades

• Web Workers
• File API
• Offline
• Web Sockets
• XMLHttpRequest 2
• Geolocation



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>




- HTML

HTML 4.01:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
HTML 5:
<html lang="en">




- META

HTML 4.01:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML 5:
<meta charset="utf-8" />



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.



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



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.



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.



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.



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.



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.



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



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.



Nuevos elementos

- Veamos un ejemplo.



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…



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



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.



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



Vídeo




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



Canvas




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.



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


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



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



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



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



Formularios

- Color
Permite seleccionar un color devolviendo su valor en hexadecimal fácil de usar en css:
<input name="entrada" type="color" />



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.



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.



Formularios




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.



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();
}
}
]);


Modernizr

- Veamos un par de ejemplos.



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


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



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.



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


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


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



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


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



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.



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



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 = '';
}



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


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.



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


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>


Offline
CACHE MANIFEST
NETWORK:
/cuenta-visitas
FALLBACK:
/ /no-encontrado.html
CACHE:
/un.css
/un.js
/logo.jpg
/contacta.html


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.



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.


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



MUCHAS GRACIAS!!!!


Introducción a HTML5: Nuevos elementos multimedia

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Introducción a HTML5: Nuevos elementos multimedia

Similaire à Introducción a HTML5: Nuevos elementos multimedia (20)

Plus de ADWE Team

Plus de ADWE Team (20)

Dernier

Dernier (10)

Introducción a HTML5: Nuevos elementos multimedia