HTML5-Aplicaciones web

  • 1,201 views
Uploaded on

Introducción a HTML5, aplicaciones web.

Introducción a HTML5, aplicaciones web.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,201
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
36
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. Conceptos ClaveDiseño y Estilo Audio y Vídeo Dibujar Rich-AppsGeolocalización Semántica
  • 3. Aplicación WebAplicación cuyo acceso se realiza através de los protocolos propios de Internet.
  • 4. …Y en HTML5 Lo mismo(JS+CSS+…) pero más elegante y abierto
  • 5. HTML5 en acción Data StorageAplicaciones off-lineComunicación con el servidor web
  • 6. Data Storage Servidor Lógica de negocio Cliente PreferenciasEstado de la aplicación
  • 7. Data Storage El nombre de storage no es del todoadecuado ya que no se almacena en la web.
  • 8. Antecedentes
  • 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. 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. Características• En general de 5MB (según navegador) hasta 50MB• Privacidad (datos se pueden) • Bloquear • Caducar • Tratar como cookies • Blacklists, etc.
  • 12. SoporteNavegador MínimoInternet Explorer 8Firefox 3.5Google Chrome 5Apple Safari 4Opera 10.5
  • 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. 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. 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. Tarea 2 Leer y mostrar el contenido de un fichero.Ver: cursoHtml5/aplicaciones-web/ejemplos/t2.html
  • 17. Tarea 3 Arrastrar y mostrar una fotografía en una página web.Ver: cursoHtml5/aplicaciones-web/ejemplos/t3.html
  • 18. Aplicaciones off-line Stateful InteractivasDepende de usuarios objetivoshttp://www.w3.org/TR/offline-webapps/
  • 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. 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. Problemas Conocidos Descarga del fichero manifest Descarga de los ficheros indicadosFichero manifest en caché
  • 22. SoporteNavegador MínimoInternet Explorer 8Firefox 3.5 …hastaGoogle Chrome 5 5MBApple Safari 4Opera 10.6
  • 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. Aplicaciones off-line Añadir fallbacks FALLBACK: *.jpg missing.jpg / offline.htmlAñadir recursos en red NETWORK: imgs/logo.png
  • 25. Eventos• onChecking• onNoUpdate• onDownloading• onProgress• onCached• onUpdateReady• onError• onObsolete No todos los navegadores ejecutan de la misma forma
  • 26. Tarea 4Crear una página de las ya realizadas con recursos para que se ejecute off-line
  • 27. Comunicación con el servidor webEnviar mensajes al servidor Recibir mensajes del servidor (Server event) Websockets
  • 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. Resumiendo…• Mejora del desarrollo con HTML5+JS+CSS• Explotación de recursos en el cliente Javascript, Javascript, Javascript…
  • 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. 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. 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