Introduccion html5

José Luis Serrano LozanoIntroducció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

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.



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(); // Reproducirvideo.pause(); // Pausarvideo.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

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

- AutofocusPermite indicar el elemento del formulario en el que se deberá situar el foco al cargar la página:

<input name="texto" type=”text” autofocus />

- RequiredPermite indicar de forma nativa qué campos del formulario son obligatorios.

<input name="texto" type=”text” required />



Formularios

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

- NovalidatePara desactivar todas las validaciones por defecto de un formulario:

<form action=”” novalidate />



Formularios

- EmailPara la introducción de emails. En los dispositivos móviles se adapta el teclado:

<input name="entrada" type="email" />

- UrlDestinado 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éricoNos 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" />

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

- FechaPermite hasta 6 formas de introducir una fecha: date, month, week, time, datetime y datetime-local.

<input name="entrada" type="date" />

- BúsquedaPermite 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

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



IndexedDBvar 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 URLfunction 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 Systemwindow.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);

}



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 principalvar miWorker = new Worker(‘fichero.js’);// Recibir mensajes del worker en el hilo principalmiWorker.onmessage = function(event){

alert(event.data);};// Finalizar worker desde el hilo principalmiWorker.terminate();// Enviar mensajes desde el hilo principalmiWorker.postMessage(obj);// Enviar mensajes desde el workerpostMessage(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 MANIFESTNETWORK:/cuenta-visitasFALLBACK:/ /no-encontrado.htmlCACHE:/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.comhttp://html5demos.com- Soporte de los navegadores:http://www.fmbip.com/litmushttp://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


http://www.html5rocks.com/

http://www.fmbip.com/litmus

http://html5facil.com/wp-content/uploads/2011/12/

http://media.smashingmagazine.com/wp-content/uploads/images/


MUCHAS GRACIAS!!!!


Introduccion html5

Technology

Transcript of Introduccion html5