html5 computación web (curso 2013/2014) · principales novedades de html5 nuevas marcas para...
TRANSCRIPT
Edi
ted
with
emac
s+
LAT E
X+
pros
per
HTML5
Computación Web (Curso 2013/2014)
Jesus Arias Fisteus // [email protected]
HTML5– p. 1
Edi
ted
with
emac
s+
LAT E
X+
pros
per
HTML5
Revisión del lenguaje HTML/XHTML, el modeloDOM HTML y APIs Javascript.
Mejora del navegador Web como plataforma parala ejecución de aplicaciones interactivas ymultimedia.
http://dev.w3.org/html5/spec/
Overview.html
HTML5– p. 2
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Principales novedades de HTML5
Nuevas marcas para bloques de contenido, tiposde datos, etc.
Mejoras en formularios.
Mejoras en la API DOM.
Multimedia.
Nuevas APIs: presentación 2D/3D,almacenamiento en el cliente, drag and drop, Websockets, acceso a ficheros, notificaciones en elescritorio, etc.
CSS3: mejoras en CSS.
SVG incrustado.
HTML5– p. 3
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Especificaciones en progreso
Especificaciones que pueden sufrir cambios.
Soporte incompleto de los navegadores a laespecificación.
http://caniuse.com/
Distintos navegadores dan soporte a distintasfunciones.
Problemas con versiones antiguas denavegadores.
Existen bibliotecas de compatibilidad:http://www.modernizr.com/
HTML5– p. 4
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Sintaxis HTML o XML
Dos sintaxis alternativas:HTML.XHTML.
HTML5– p. 5
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Sintaxis HTML
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
HTML5– p. 6
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Marcado de bloques de contenido
main
article
section
header, footer
nav
aside
figure, figcaption
HTML5– p. 7
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Nuevo marcado semántico de texto
mark
time
meter
progress
HTML5– p. 8
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Formularios
Se añaden nuevas funciones que hasta ahorarequerían el uso de Javascript:
Nuevos controles (fechas y horas, colores, etc.)Verificación de valores.Controles obligatorios.Texto descriptivo.Subida de múltiples ficheros.
http://www.w3.org/html/wg/drafts/html/
master/forms.html#forms
http://slides.html5rocks.com/#
new-form-types
HTML5– p. 9
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Nuevos controles
Nuevos tipos de elemento input (atributo type):search
number, range
color
tel, url, email
date, month, week
time, datetime, datetime-local
http://dev.w3.org/html5/spec/single-page.
html#the-input-element
HTML5– p. 10
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Elemento datalist
Sugerencias de valores para un campo.http://www.w3.org/html/wg/drafts/
html/master/forms.html#
the-datalist-element
HTML5– p. 11
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Almacenamiento en el cliente
Proporciona un espacio de almacenamiento dedatos en el navegador del usuario.
Objetivos:Mejorar prestaciones.Funcionamiento en modo desconectado de laaplicación.
HTML5– p. 12
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Almacenamiento en el cliente
Varias opciones:Web storage.Indexed Database.File Access.Web SQL Database (en vía muertaactualmente).
http://www.html5rocks.com/en/
features/storage
http://www.html5rocks.com/en/
tutorials/offline/storage/
HTML5– p. 13
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Web Storage
Almacenamiento clave-valor.Persistente o volátil: localStorage vs.sessionStorage
Sin índices.En varias implementaciones, los valores debenser cadenas de texto.
http://dev.w3.org/html5/webstorage/
HTML5– p. 14
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Web Storage
<p>
You have viewed this page
<span id="count">an untold number of</span>
time(s).
</p>
<script>
if (!localStorage.pageLoadCount)
localStorage.pageLoadCount = 0;
localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1;
document.getElementById(’count’).textContent = localStorage.pageLoadCount;
</script>
HTML5– p. 15
Edi
ted
with
emac
s+
LAT E
X+
pros
per
IndexedDB
Almacenamiento de información estructuradaasociada a claves.
Proporciona API asíncrona.Permite construir índices.Transaccional.
http://www.w3.org/TR/IndexedDB/
https://developer.mozilla.org/en-US/
docs/IndexedDB/Using_IndexedDB
HTML5– p. 16
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Dibujo 2D y 3D con canvas
Elemento canvas (lienzo):Reserva un espacio en la página Web sobre elcual se puede dibujar desde Javascript.Contexto de dibujo 2D: http://dev.w3.org/html5/2dcontext/
Contexto de dibujo WebGL (permite 3D):http://www.khronos.org/registry/
webgl/specs/latest/1.0/.
HTML5– p. 17
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Dibujo 2D con canvas
API de dibujo 2D:Dibujo de líneas, rectángulos, elipses, texto,imágenes, etc.Transformaciones de coordenadas.Dibujo sobre zonas del lienzo (clipping).Composición con transparencia.Sombras.
http://slides.html5rocks.com/#canvas-2d
HTML5– p. 18
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Dibujo 2D con canvas
<html>
<head>
<script type=”application/x-javascript”>
function draw() {
var canvas = document.getElementById(“canvas1”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = “rgb(40,0,0)”;
ctx.fillRect (20, 20, 65, 60);
ctx.fillStyle = “rgba(0, 0, 160, 0.5)”;
ctx.fillRect (40, 40, 65, 60);
}
}
</script>
</head>
<body onLoad=”draw();”>
<canvas id=”canvas1” width=”150 height=”150></canvas>
</body>
</html>
Fuente: http://html5tutorial.net/examples/canvas-examples.html
HTML5– p. 19
Edi
ted
with
emac
s+
LAT E
X+
pros
per
SVG incrustado
SVG (Scalable Vector Graphics) es un estándarpara la representación de gráficos vectoriales.
Se puede incrustar en documentos HTML5.
Se puede interaccionar con Javascript en elgráfico SVG.
http://slides.html5rocks.com/#inline-svg
HTML5– p. 20
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Audio y vídeo
APIs para reproducción de audio y vídeo en elnavegador:
Se puede controlar la reproducción desdeJavascript.Se puede proporcionar varios formatos delvídeo/audio, y el navegador seleccionará elmás adecuado.
http://slides.html5rocks.com/#video-audio
http://diveintohtml5.info/video.html
HTML5– p. 21
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Conectividad
Nuevos mecanismos de comunicación con elservidor:
WebSocket.Server-sent events.
HTML5– p. 22
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Websocket
Protocolo y API Javascript para comunicaciónbidireccional entre cliente y servidor Web.
https://tools.ietf.org/html/rfc6455
http://www.w3.org/TR/websockets/
http://www.html5rocks.com/en/
tutorials/websockets/basics/
HTML5– p. 23
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Websocket
var connection = new WebSocket(’ws://html5rocks.websocket.org/echo’);
connection.onopen = function () {
// the connection is now open...
};
connection.onerror = function (error) {
// an error happened
};
connection.onmessage = function (msg) {
// a message has arrived, and is available as msg.data
};
(...)
connection.send(’a new message’);
HTML5– p. 24
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Acceso a ficheros
API FileSystem:Permite crear, escribir y leer ficheros.En un espacio aislado del sistema de ficheros.Con limitaciones de espacio dealmacenamiento utilizado.
http://www.w3.org/TR/file-system-api/
http://www.html5rocks.com/en/
tutorials/file/filesystem/
HTML5– p. 25
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Notificaciones en el escritorio
Notificaciones en el escritorio:Dos tipos de mensaje:
Texto: título, texto e imagen.HTML.
La aplicación necesita solicitar permiso paramostrar notificaciones.
http://www.w3.org/TR/notifications/
http://www.html5rocks.com/en/tutorials/
notifications/quick/
http://slides.html5rocks.com/#notifications-api
HTML5– p. 26
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Notificaciones en el escritorio
// check for notifications support
// you can omit the ’window’ keyword
if (window.webkitNotifications) {
console.log("Notifications are supported!");
}
else {
console.log("Notifications are not supported.");
}
function createNotificationInstance(options) {
if (options.notificationType == ’simple’) {
return window.webkitNotifications.createNotification(
’icon.png’, ’Notification Title’, ’Notification content...’);
} else if (options.notificationType == ’html’) {
return window.webkitNotifications.createHTMLNotification(url);
}
}
HTML5– p. 27
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Notificaciones en el escritorio
document.querySelector(’#show_button’).addEventListener(’click’, function() {
if (window.webkitNotifications.checkPermission() == 0) {
// 0 is PERMISSION_ALLOWED
createNotificationInstance({ notificationType: ’html’ });
} else {
window.webkitNotifications.requestPermission();
}
}, false);
HTML5– p. 28
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Arrastrar y soltar
Arrastrar y soltar (drag and drop):Permite arrastrar objetos dentro de una página.Permite arrastrar ficheros desde el escritorio ala página:
Combinable con la API de lectura de ficheros:http://www.html5rocks.com/en/
tutorials/file/dndfiles/
http://www.w3.org/TR/html5/editing.html#dnd
http://www.html5rocks.com/en/tutorials/dnd/
basics/
http://html5demos.com/drag
HTML5– p. 29
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Tareas en otros hilos
API worker:Permite lanzar tareas en otro hilo, para nobloquear el hilo principal.
Útil para tareas cuya ejecución se alargue en eltiempo.http://www.w3.org/TR/workers/
http://slides.html5rocks.com/#web-workers
HTML5– p. 30
Edi
ted
with
emac
s+
LAT E
X+
pros
per
Referencias
HTML5 Unleashed. Simon Sarris. Sams (2013).Accesible en Safari: http://proquest.safaribooksonline.com/book/
web-development/html/9780133151336
HTML5– p. 31