HTML5-Aplicaciones web

Curso HTML5 y el
Futuro de la Web
Aplicaciones Web
19 de Julio 2012
Jose María Álvarez Rodríguez
WESO-Universidad de Oviedo
E-mail: josem.alvarez@weso.es
WWW: http://josemalvarez.es

Conceptos Clave

Diseño y Estilo Audio y Vídeo

Dibujar Rich-Apps

Geolocalización Semántica

Aplicación Web

Aplicación cuyo acceso se realiza a
través de los protocolos propios de
Internet.

…Y en HTML5

Lo mismo
(JS+CSS+…) pero más
elegante y abierto

HTML5 en acción
Data Storage
Aplicaciones off-line
Comunicación con el
servidor web

Data Storage
Servidor
Lógica de negocio

Cliente
Preferencias
Estado de la aplicación

Data Storage

El nombre de storage no es del todo
adecuado ya que no se almacena en la
web.

Data Storage
Session
Temporal
Sólo mientras la página está abierta

Local
Permanente
Algunos navegadores permiten su gestión
http://dev.w3.org/html5/webstorage/ (Actualizado 10/07/2012

Data Storage
Es una base de datos clave/valor:

localStorage[“clave”]= valor
localStorage.clave = valor

localStorage["user_name"] =
nameInput.value;
alert(“Nombre: " +
localStorage["user_name"]);

Características
• En general de 5MB (según
navegador) hasta 50MB
• Privacidad (datos se pueden)
• Bloquear
• Caducar
• Tratar como cookies
• Blacklists, etc.

Soporte
Navegador Mínimo

Internet Explorer 8

Firefox 3.5
Google Chrome 5

Apple Safari 4

Opera 10.5

Tipos de Datos
ID Expresión

Strings localStorage.clave = valor

Números edad = Number(localStorage[“edad”]);

Fechas sessionStorage[“fecha"] = new Date();

Objetos sessionStore[“persona"] =
JSON.stringify(p);

Ficheros FileAPI: FileReader(); readAsText();
(operaciones) readAsBinaryString()
Múltiples ficheros: atributo multiple en elemento input

Operaciones
Tipo Expresión

Borrar un ítem localStorage.removeItem("user_name");

Borrar todos sessionStorage.clear();

Buscar todos for (var i=0; i<localStorage.length; i++) {
var key = localStorage.key(i);
var item = localStorage[key]; }

… …

Evento window.onload = function() {
window.addEventListener("storage",
storageChanged, false);
};

Tarea 1
Crear una página que lea un nombre y lo
almacene en local y en la sesión.
Comprobar que funciona
(cerrar y abrir página)

Ver: cursoHtml5/aplicaciones-web/ejemplos/t1.html

Tarea 2

Leer y mostrar el contenido de un
fichero.


Tarea 3

Arrastrar y mostrar una fotografía en
una página web.


Stateful
Interactivas
Depende de usuarios
objetivos
http://www.w3.org/TR/offline-webapps/

Pasos para convertir en
off-line

1. Crear un fichero de texto manifest
2. Indicar en la página el uso del
manifest
3. Configurar el servidor para el tipo
mime del manifest
text/cache-manifest

Ejemplo
CACHE MANIFEST Se descargan los ficheros:
index.html
• Páginas HTML
results.html • Archivos CSS
• Scripts con lógica de
negocio
style.css • Imágenes
style_results.css

results.js
Referencia
arrow_left.png
<!DOCTYPE html>
arrow_right.png <html lang="en"
star.png manifest=“fichero.manifest">

Problemas Conocidos

Descarga del fichero
manifest
Descarga de los ficheros
indicados
Fichero manifest en caché

Soporte
Navegador Mínimo

Internet Explorer 8

Firefox 3.5 …hasta
Google Chrome 5 5MB

Apple Safari 4

Opera 10.6

Para hacer pruebas desactivar el
sistema de caché del navegador.

Se puede utilizar un script de JS para
chequear la conexión y cargar de
distinta forma.

Añadir fallbacks
FALLBACK:
*.jpg missing.jpg
/ offline.html

Añadir recursos en
red
NETWORK:
imgs/logo.png

Eventos
• onChecking
• onNoUpdate
• onDownloading
• onProgress
• onCached
• onUpdateReady
• onError
• onObsolete

No todos los navegadores ejecutan de la
misma forma

Tarea 4

Crear una página de las ya realizadas con
recursos para que se ejecute off-line

Comunicación con el
servidor web

Enviar mensajes al servidor
Recibir mensajes del
servidor (Server event)
Websockets

Tarea 5
Observar el código y comportamiento de
aplicaciones web HTML5

http://www.sudokubum.com/

http://www.html5arena.com/blog/html5/16-awesome-
examples-of-html5-applications/

https://developer.tizen.org/resources/sample-web-
applications

Resumiendo…
• Mejora del desarrollo con
HTML5+JS+CSS
• Explotación de recursos en
el cliente

Javascript, Javascript,
Javascript…

Conclusiones
• HTML5 permite llevar el
entorno de escritorio a la web
• Mejora tecnológica
• Basado en estándares y
abierto
• Computación ubicua
• Bajo acoplamiento
• …

Enlaces interesantes
• http://www.whatwg.org/specs/web-apps/current-
work/multipage/offline.html
• http://www.catswhocode.com/blog/how-to-create-offline-
html5-web-apps-in-5-easy-steps
• http://googlecode.blogspot.com.es/2009/04/gmail-for-
mobile-html5-series-using.html
• http://jonathanstark.com/blog/2009/09/27/debugging-
html-5-offline-application-cache/
• http://gigaom.com/collaboration/why-html5-web-apps-are-
going-to-rock-your-world/
• http://www.w3schools.com/html5/att_html_manifest.asp
• http://www.w3schools.com/html5/html5_app_cache.asp
• http://www.w3schools.com/html5/html5_webstorage.asp

HTML5-Aplicaciones web

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (16)

Andere mochten auch

Andere mochten auch (14)

Ähnlich wie HTML5-Aplicaciones web

Ähnlich wie HTML5-Aplicaciones web (20)

Mehr von CARLOS III UNIVERSITY OF MADRID

Mehr von CARLOS III UNIVERSITY OF MADRID (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (11)

HTML5-Aplicaciones web