0
Curso HTML5 y elFuturo de la Web  Aplicaciones Web   19 de Julio 2012     Jose María Álvarez Rodríguez     WESO-Universida...
Conceptos ClaveDiseño y Estilo   Audio y Vídeo   Dibujar         Rich-AppsGeolocalización     Semántica
Aplicación WebAplicación cuyo acceso se realiza atravé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 StorageAplicaciones off-lineComunicación con el    servidor web
Data Storage    Servidor  Lógica de negocio     Cliente     PreferenciasEstado de la aplicación
Data Storage El nombre de storage no es del todoadecuado ya que no se almacena en la                web.
Antecedentes
Data Storage                    Session                       Temporal       Sólo mientras la página está abierta         ...
Data Storage   Es una base de datos clave/valor: localStorage[“clave”]= valor  localStorage.clave = valorlocalStorage["use...
Características• En general de 5MB (según  navegador) hasta 50MB• Privacidad (datos se pueden)  • Bloquear  • Caducar  • T...
SoporteNavegador MínimoInternet Explorer 8Firefox 3.5Google Chrome 5Apple Safari 4Opera 10.5
Tipos de DatosID              ExpresiónStrings         localStorage.clave = valorNúmeros         edad = Number(localStorag...
OperacionesTipo             ExpresiónBorrar un ítem   localStorage.removeItem("user_name");Borrar todos     sessionStorage...
Tarea 1Crear una página que lea un nombre y lo    almacene en local y en la sesión.       Comprobar que funciona         (...
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.h...
Aplicaciones off-line       Stateful    InteractivasDepende de usuarios      objetivoshttp://www.w3.org/TR/offline-webapps/
Pasos para convertir en            off-line1.    Crear un fichero de texto manifest2.    Indicar en la página el uso del  ...
EjemploCACHE MANIFEST                  Se descargan los ficheros:index.html                            •     Páginas HTMLr...
Problemas Conocidos   Descarga del fichero       manifest Descarga de los ficheros         indicadosFichero manifest en ca...
SoporteNavegador MínimoInternet Explorer 8Firefox 3.5                …hastaGoogle Chrome 5             5MBApple Safari 4Op...
Aplicaciones off-line    Para hacer pruebas desactivar el    sistema de caché del navegador.  Se puede utilizar un script ...
Aplicaciones off-line  Añadir fallbacks    FALLBACK:    *.jpg missing.jpg    / offline.htmlAñadir recursos en        red  ...
Eventos•     onChecking•     onNoUpdate•     onDownloading•     onProgress•     onCached•     onUpdateReady•     onError• ...
Tarea 4Crear una página de las ya realizadas con  recursos para que se ejecute off-line
Comunicación con el    servidor webEnviar mensajes al servidor   Recibir mensajes del  servidor (Server event)       Webso...
Tarea 5Observar el código y comportamiento de       aplicaciones web HTML5http://www.sudokubum.com/http://www.html5arena.c...
Resumiendo…•   Mejora del desarrollo con    HTML5+JS+CSS•   Explotación de recursos en    el cliente       Javascript, Jav...
Conclusiones•   HTML5 permite llevar el    entorno de escritorio a la web•   Mejora tecnológica•   Basado en estándares y ...
Enlaces interesantes• http://www.whatwg.org/specs/web-apps/current-  work/multipage/offline.html• http://www.catswhocode.c...
Curso HTML5 y elFuturo de la Web  Aplicaciones Web   19 de Julio 2012     Jose María Álvarez Rodríguez     WESO-Universida...
HTML5-Aplicaciones web
HTML5-Aplicaciones web
Upcoming SlideShare
Loading in...5
×

HTML5-Aplicaciones web

1,298

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,298
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
37
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×