html5-aplicaciones web
DESCRIPTION
Introducción a HTML5, aplicaciones web.TRANSCRIPT
![Page 1: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/1.jpg)
Curso HTML5 y el
Futuro de la Web
Jose María Álvarez Rodríguez
WESO-Universidad de Oviedo
E-mail: [email protected]
WWW: http://josemalvarez.es
Aplicaciones Web
19 de Julio 2012
![Page 2: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/2.jpg)
Conceptos Clave
Diseño y Estilo Audio y Vídeo
Dibujar Rich-Apps
Geolocalización Semántica
![Page 3: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/3.jpg)
Aplicación Web
Aplicación cuyo acceso se realiza a través de los protocolos propios de
Internet.
![Page 4: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/4.jpg)
…Y en HTML5
Lo mismo
(JS+CSS+…) pero más
elegante y abierto
![Page 5: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/5.jpg)
HTML5 en acción
Data Storage
Aplicaciones off-line
Comunicación con el
servidor web
![Page 6: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/6.jpg)
Data Storage
Servidor Lógica de negocio
Cliente Preferencias
Estado de la aplicación
![Page 7: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/7.jpg)
Data Storage
El nombre de storage no es del todo adecuado ya que no se almacena en la
web.
![Page 8: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/8.jpg)
Antecedentes
![Page 9: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/9.jpg)
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
![Page 10: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/10.jpg)
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"]);
![Page 11: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/11.jpg)
Características • En general de 5MB (según
navegador) hasta 50MB
• Privacidad (datos se pueden)
• Bloquear
• Caducar
• Tratar como cookies
• Blacklists, etc.
![Page 12: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/12.jpg)
![Page 13: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/13.jpg)
Navegador Mínimo
Internet Explorer 8
Firefox 3.5
Google Chrome 5
Apple Safari 4
Opera 10.5
Soporte
![Page 14: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/14.jpg)
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 (operaciones)
FileAPI: FileReader(); readAsText(); readAsBinaryString()
Múltiples ficheros: atributo multiple en elemento input
![Page 15: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/15.jpg)
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);
};
![Page 16: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/16.jpg)
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
![Page 17: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/17.jpg)
Tarea 2
Leer y mostrar el contenido de un fichero.
Ver: cursoHtml5/aplicaciones-web/ejemplos/t2.html
![Page 18: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/18.jpg)
Tarea 3
Arrastrar y mostrar una fotografía en una página web.
Ver: cursoHtml5/aplicaciones-web/ejemplos/t3.html
![Page 19: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/19.jpg)
Aplicaciones off-line
Stateful
Interactivas
Depende de usuarios
objetivos
http://www.w3.org/TR/offline-webapps/
![Page 20: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/20.jpg)
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
![Page 21: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/21.jpg)
Ejemplo CACHE MANIFEST
index.html
results.html
style.css
style_results.css
results.js
arrow_left.png
arrow_right.png
star.png
Se descargan los ficheros:
• Páginas HTML • Archivos CSS • Scripts con lógica de
negocio • Imágenes
<!DOCTYPE html>
<html lang="en"
manifest=“fichero.manifest">
Referencia
![Page 22: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/22.jpg)
Problemas Conocidos
Descarga del fichero manifest
Descarga de los ficheros
indicados
Fichero manifest en caché
![Page 23: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/23.jpg)
Navegador Mínimo
Internet Explorer 8
Firefox 3.5
Google Chrome 5
Apple Safari 4
Opera 10.6
Soporte
…hasta 5MB
![Page 24: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/24.jpg)
Aplicaciones off-line
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.
![Page 25: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/25.jpg)
Añadir fallbacks
Añadir recursos en
red
Aplicaciones off-line
FALLBACK:
*.jpg missing.jpg
/ offline.html
NETWORK:
imgs/logo.png
![Page 26: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/26.jpg)
• onChecking
• onNoUpdate
• onDownloading
• onProgress
• onCached
• onUpdateReady
• onError
• onObsolete
Eventos
No todos los navegadores ejecutan de la
misma forma
![Page 27: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/27.jpg)
Tarea 4
Crear una página de las ya realizadas con recursos para que se ejecute off-line
![Page 28: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/28.jpg)
Enviar mensajes al servidor
Recibir mensajes del
servidor (Server event)
Websockets
Comunicación con el
servidor web
![Page 29: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/29.jpg)
Tarea 5
Observar el código y comportamiento de aplicaciones web HTML5
http://www.html5arena.com/blog/html5/16-awesome-
examples-of-html5-applications/
https://developer.tizen.org/resources/sample-web-
applications
http://www.sudokubum.com/
![Page 30: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/30.jpg)
Resumiendo…
• Mejora del desarrollo con
HTML5+JS+CSS
• Explotación de recursos en
el cliente
Javascript, Javascript,
Javascript…
![Page 31: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/31.jpg)
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
• …
![Page 32: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/32.jpg)
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
![Page 33: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/33.jpg)
![Page 34: HTML5-Aplicaciones web](https://reader033.vdocuments.co/reader033/viewer/2022051312/546db78baf795962298b547d/html5/thumbnails/34.jpg)
Curso HTML5 y el
Futuro de la Web
Jose María Álvarez Rodríguez
WESO-Universidad de Oviedo
E-mail: [email protected]
WWW: http://josemalvarez.es
Aplicaciones Web
19 de Julio 2012