HTML5-Aplicaciones web

1,664 views

Published on

Introducción a HTML5, aplicaciones web.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,664
On SlideShare
0
From Embeds
0
Number of Embeds
354
Actions
Shares
0
Downloads
41
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5-Aplicaciones web

  1. 1. Curso HTML5 y elFuturo 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
  2. 2. Conceptos ClaveDiseño y Estilo Audio y Vídeo Dibujar Rich-AppsGeolocalización Semántica
  3. 3. Aplicación WebAplicación cuyo acceso se realiza através de los protocolos propios de Internet.
  4. 4. …Y en HTML5 Lo mismo(JS+CSS+…) pero más elegante y abierto
  5. 5. HTML5 en acción Data StorageAplicaciones off-lineComunicación con el servidor web
  6. 6. Data Storage Servidor Lógica de negocio Cliente PreferenciasEstado de la aplicación
  7. 7. Data Storage El nombre de storage no es del todoadecuado ya que no se almacena en la web.
  8. 8. Antecedentes
  9. 9. Data Storage Session Temporal Sólo mientras la página está abierta Local Permanente Algunos navegadores permiten su gestiónhttp://dev.w3.org/html5/webstorage/ (Actualizado 10/07/2012
  10. 10. Data Storage Es una base de datos clave/valor: localStorage[“clave”]= valor localStorage.clave = valorlocalStorage["user_name"] =nameInput.value;alert(“Nombre: " +localStorage["user_name"]);
  11. 11. Características• En general de 5MB (según navegador) hasta 50MB• Privacidad (datos se pueden) • Bloquear • Caducar • Tratar como cookies • Blacklists, etc.
  12. 12. SoporteNavegador MínimoInternet Explorer 8Firefox 3.5Google Chrome 5Apple Safari 4Opera 10.5
  13. 13. Tipos de DatosID ExpresiónStrings localStorage.clave = valorNú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
  14. 14. OperacionesTipo ExpresiónBorrar 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); };
  15. 15. Tarea 1Crear 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
  16. 16. Tarea 2 Leer y mostrar el contenido de un fichero.Ver: cursoHtml5/aplicaciones-web/ejemplos/t2.html
  17. 17. Tarea 3 Arrastrar y mostrar una fotografía en una página web.Ver: cursoHtml5/aplicaciones-web/ejemplos/t3.html
  18. 18. Aplicaciones off-line Stateful InteractivasDepende de usuarios objetivoshttp://www.w3.org/TR/offline-webapps/
  19. 19. Pasos para convertir en off-line1. Crear un fichero de texto manifest2. Indicar en la página el uso del manifest3. Configurar el servidor para el tipo mime del manifest text/cache-manifest
  20. 20. EjemploCACHE MANIFEST Se descargan los ficheros:index.html • Páginas HTMLresults.html • Archivos CSS • Scripts con lógica de negociostyle.css • Imágenesstyle_results.cssresults.js Referenciaarrow_left.png <!DOCTYPE html>arrow_right.png <html lang="en"star.png manifest=“fichero.manifest">
  21. 21. Problemas Conocidos Descarga del fichero manifest Descarga de los ficheros indicadosFichero manifest en caché
  22. 22. SoporteNavegador MínimoInternet Explorer 8Firefox 3.5 …hastaGoogle Chrome 5 5MBApple Safari 4Opera 10.6
  23. 23. 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.
  24. 24. Aplicaciones off-line Añadir fallbacks FALLBACK: *.jpg missing.jpg / offline.htmlAñadir recursos en red NETWORK: imgs/logo.png
  25. 25. Eventos• onChecking• onNoUpdate• onDownloading• onProgress• onCached• onUpdateReady• onError• onObsolete No todos los navegadores ejecutan de la misma forma
  26. 26. Tarea 4Crear una página de las ya realizadas con recursos para que se ejecute off-line
  27. 27. Comunicación con el servidor webEnviar mensajes al servidor Recibir mensajes del servidor (Server event) Websockets
  28. 28. Tarea 5Observar el código y comportamiento de aplicaciones web HTML5http://www.sudokubum.com/http://www.html5arena.com/blog/html5/16-awesome-examples-of-html5-applications/https://developer.tizen.org/resources/sample-web-applications
  29. 29. Resumiendo…• Mejora del desarrollo con HTML5+JS+CSS• Explotación de recursos en el cliente Javascript, Javascript, Javascript…
  30. 30. 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• …
  31. 31. 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
  32. 32. Curso HTML5 y elFuturo 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

×