• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5-Aplicaciones web
 

HTML5-Aplicaciones web

on

  • 1,466 views

Introducción a HTML5, aplicaciones web.

Introducción a HTML5, aplicaciones web.

Statistics

Views

Total Views
1,466
Views on SlideShare
1,241
Embed Views
225

Actions

Likes
1
Downloads
30
Comments
0

2 Embeds 225

http://www.josemalvarez.es 224
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5-Aplicaciones web HTML5-Aplicaciones web Presentation Transcript

    • 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
    • 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 Local Permanente Algunos navegadores permiten su gestiónhttp://dev.w3.org/html5/webstorage/ (Actualizado 10/07/2012
    • Data Storage Es una base de datos clave/valor: localStorage[“clave”]= valor localStorage.clave = valorlocalStorage["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.
    • SoporteNavegador MínimoInternet Explorer 8Firefox 3.5Google Chrome 5Apple Safari 4Opera 10.5
    • 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
    • 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); };
    • 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
    • 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 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 manifest3. Configurar el servidor para el tipo mime del manifest text/cache-manifest
    • 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">
    • Problemas Conocidos Descarga del fichero manifest Descarga de los ficheros indicadosFichero manifest en caché
    • SoporteNavegador MínimoInternet Explorer 8Firefox 3.5 …hastaGoogle Chrome 5 5MBApple Safari 4Opera 10.6
    • 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.
    • Aplicaciones off-line Añadir fallbacks FALLBACK: *.jpg missing.jpg / offline.htmlAñadir recursos en red NETWORK: imgs/logo.png
    • Eventos• onChecking• onNoUpdate• onDownloading• onProgress• onCached• onUpdateReady• onError• onObsolete No todos los navegadores ejecutan de la misma forma
    • 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) Websockets
    • 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
    • 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 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