Embed Size (px)
DESCRIPTION
Introducción a HTML5, aplicaciones web.
Citation preview
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
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.
Antecedentes
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.
Navegador Mínimo
Internet Explorer 8
Firefox 3.5
Google Chrome 5
Apple Safari 4
Opera 10.5
Soporte
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
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.
Ver: cursoHtml5/aplicaciones-web/ejemplos/t2.html
Tarea 3
Arrastrar y mostrar una fotografía en una página web.
Ver: cursoHtml5/aplicaciones-web/ejemplos/t3.html
Aplicaciones off-line
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
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
Problemas Conocidos
Descarga del fichero manifest
Descarga de los ficheros
indicados
Fichero manifest en caché
Navegador Mínimo
Internet Explorer 8
Firefox 3.5
Google Chrome 5
Apple Safari 4
Opera 10.6
Soporte
…hasta 5MB
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.
Añadir fallbacks
Añadir recursos en
red
Aplicaciones off-line
FALLBACK:
*.jpg missing.jpg
/ offline.html
NETWORK:
imgs/logo.png
• onChecking
• onNoUpdate
• onDownloading
• onProgress
• onCached
• onUpdateReady
• onError
• onObsolete
Eventos
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
Enviar mensajes al servidor
Recibir mensajes del
servidor (Server event)
Websockets
Comunicación con el
servidor web
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/
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
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
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ...interoperability.blob.core.windows.net/web/MS-HTML5/[MS-HTML5].pdf · Microsoft Edge / Internet Explorer HTML5 Standards Support](https://img.pdfslide.net/doc/110x75/5a903bb67f8b9a4a268e1ade/ms-html5-microsoft-edge-internet-explorer-html5-ms-html5pdfmicrosoft.jpg)
![HTML5 - W3C...HTML4 + CSS 56 HTML5 - Futuro da Web Futuro da Web - HTML5 HTML 5 [HyperText Markup Language] Novos elementos (semânticos) HTML5 + CSS E o que ficou de fora do HTML5?](https://img.pdfslide.net/doc/110x75/5f9769938559bc0a406dee44/html5-w3c-html4-css-56-html5-futuro-da-web-futuro-da-web-html5-html.jpg)
