Presentación Seminario Cleformación HTML5, El lenguaje del futuro

  • 2,211 views
Uploaded on

CLEFormación organizó un seminario técnico gratuito sobre "HTML5, el lenguaje del futuro, nuevos paradigmas y nuevos problemas en el desarrollo de aplicaciones web". Como referentes en la Capacitación …

CLEFormación organizó un seminario técnico gratuito sobre "HTML5, el lenguaje del futuro, nuevos paradigmas y nuevos problemas en el desarrollo de aplicaciones web". Como referentes en la Capacitación Profesional en el entorno de las Tecnologías de la Información, concretamente en cursos de programación Oracle, Java, y HTML5 quisieron reiterar su compromiso con la formación en el sector. Por eso después del seminario, comparten la presentación desarrollada por el formador.

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
2,211
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
105
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. HTML5. El lenguaje delfuturoNuevos paradigmas yproblemas en el desarrollode aplicaciones Web7 de Junio 2013Fernando Silvano Gil
  • 2. El HTML5 (HyperText Markup Language, versión 5) es la quinta revisión dellenguaje de programación “básico” de la World Wide Web, el HTMLEsta nueva versión pretende remplazar al actual (X)HTML, corrigiendoproblemas con los que los desarrolladores web se encuentran, así comorediseñar el código actualizándolo a nuevas necesidades que demanda laweb de hoy en díaMETAS:• Documentos se comporten igual en todos los navegadores• Documentar y estandarizar extensiones útiles• Desarrollar prácticas nuevas características• Asegurar la compatibilidad hacia atrás• Definir un robusto tratamiento de erroresIntroducción a HTML5 y CSS3
  • 3. Introducción a HTML5 y CSS3
  • 4.  PRINCIPIOS DE DISEÑO Y DESARROLLO: Organizado en 3 categorías:• Compatibilidad• Utilidad• InteroperabilidadIntroducción a HTML5 y CSS3
  • 5. Principios de diseño: Compatibilidad• Apoyar el contenido existente• Degradar de forma elegante• No reinventar la rueda• Pavimentar los Cowpaths• Evolución, no revoluciónIntroducción a HTML5 y CSS3
  • 6. Principios de diseño: Utilidad• Resolver problemas reales• Prioridad a la constitución• Medios independientes• Acceso universal• Apoyo a diferentes idiomas del mundo• Seguro por diseño• La separación de las preocupaciones / conceptosIntroducción a HTML5 y CSS3
  • 7. Principios de diseño: Interoperabilidad• Bien definida por el comportamiento• Evitar una complejidad innecesaria• Controlar los erroresIntroducción a HTML5 y CSS3
  • 8. Este seminario presenta los elementos de HTML 5 que estánactualmente siendo implementados por los navegadores:• FireFox• Chrome• Safari• Opera• Esperemos próximamente IE (a partir de las versiones 9)HTML 5 es la quinta revisión más importante que se hace allenguaje HTML. En esta versión, se introducen nuevascaracterísticas para ayudar a los autores de aplicacionesWeb, y se ha prestado especial atención a la definición declaros criterios de conformidad para los agentes de usuario(navegadores) en un esfuerzo por mejorar lainteroperabilidad.Navegadores
  • 9. http://caniuse.com/NavegadoresLINK DE AYUDA
  • 10. TABLA DE %DE OPERATIBILIDAD
  • 11. La declaración del tipo de documento (DTD Document Type Declaration), estasección se ubica en la primera línea del archivo HTML, es decir antes de lamarca html.Según el rigor de HTML 4.01 utilizado podemos declararla como:• Declaración transitoria:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">• Declaración estricta:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">Ahora con el HTML 5 se simplifica esta sección con la siguiente sintaxis:<!DOCTYPE HTML>Es importante agregar el DOCTYPE, de esta forma el navegador puede saberque estamos utilizando la especificación del HTML 5.Etiquetas de HTML5DOCTYPE
  • 12. <!DOCTYPE HTML><html><head></head><body><p>Si vemos el código fuente de esta páginaveremos la forma de declarar el DOCTYPE enHTML5.</p></body></html>Etiquetas de HTML5DOCTYPE
  • 13. Meta en XHTML 1.1<meta content="text/html; charset=utf-8"http-equiv="Content-Type" />Meta en HTML5: (sólo codificación de caracteres)<meta charset="UTF-8">Etiquetas de HTML5META
  • 14. Script en HTML4:<script type="text/javascript“scr="jquery.js"></script>Script en HTML5:<script scr="jquery.js"></script>Etiquetas de HTML5SCRIPTS
  • 15. Link stylesheet en HTML4:<link rel="stylesheet" type="text/css”href="style.css">Link stylesheet en HTML5:<link rel="stylesheet" href="style.css">Etiquetas de HTML5LINKS
  • 16. Atributos que desaparecen:• align• link, vlink, alink, (enlaces)• bgcolor• height and width• scrolling (dentro de los iframes)• valign• hspace y vspace• cellpadding, cellspacing, y border de las tablas• Target• Font• marqueeEtiquetas de HTML5
  • 17. El HTML 5 introduce una serie de elementos estructurales que facilitarán tanto eldesarrollo de las páginas como también el análisis de las mismas por buscadores.Los elementos de HTML 5 que ayudan a estructurar la parte semántica de la páginason:header: El elemento header debe utilizarse para marcar la cabecera de una página(contiene el logotipo del sitio, una imagen, un cuadro de búsqueda etc)El elemento header puede estar anidado en otras secciones de la página (es decir queno solo se utiliza para la cabecera de la página)nav: El elemento nav representa una parte de una página que enlaza a otras páginaso partes dentro de la página. Es una sección con enlaces de navegación.No todos los grupos de enlaces en una página deben ser agrupados en un elementonav. únicamente las secciones que consisten en bloques de navegación másimportantes son adecuados para el elemento de navegación.section: El elemento section representa un documento genérico o de la sección deaplicación. Una sección, en este contexto, es una agrupación temática de loscontenidos. Puede ser un capítulo, una sección de un capítulo o básicamente cualquiercosa que incluya su propio encabezado.Una página de inicio de un sitio Web puede ser dividida en secciones para unaintroducción, noticias, información de contacto etc.Etiquetas de HTML5Elementos HTML Semánticos
  • 18. footer: El elemento footer se utiliza para indicar el pié de la página o de unasección. Un pie de página contiene información general acerca de su secciónel autor, enlaces a documentos relacionados, datos de derechos de autor etc.aside: El elemento aside representa una nota, un consejo, una explicación.Esta área son representados a menudo como barras laterales en la revistasimpresa.El elemento puede ser utilizado para efectos de atracción, como las comillastipográficas o barras laterales, para la publicidad, por grupos de elementos denavegación, y por otro contenido que se considera por separado del contenidoprincipal de la página.article: El elemento article representa una entrada independiente en un blog,revista, periódico etc.Cuando se anidan los elementos article, los artículos internos estánrelacionados con el contenido del artículo exterior. Por ejemplo, una entradade blog en un sitio que acepta comentarios, el elemento article principalagrupa el artículo propiamente dicho y otro bloque article anidado con loscomentarios de los usuario.Etiquetas de HTML5Elementos HTML Semánticos
  • 19. Etiquetas de HTML5Elementos HTML Semánticos - NAVEGADORES
  • 20. Etiquetas de HTML5NUEVAS TAGS
  • 21. Etiquetas de HTML5TAGS DEPRECADAS
  • 22.  La estructura de los formularios con HTML 5 no varía en nada con las versionesmás antiguas de HTML aunque añadiendo muchas funciones, es decir para crearun formulario con nombre, e-mail, edad y pagina web como el que utilizaremosde ejemplo: Su código sería:<form id="form1" name="form1" method="post"action="consultar.php">Nombre: <input type="text" name="nombre" id="nombre" />Edad:<input type="text" name="edad" id="edad" />E-mail:<input type="text" name="email" id="email" />Web:<input type="text" name="web" id="web" /></form>Formularios Web
  • 23. Como podemos ver en el código todos los campos de texto sontype="text" ya sea para numero en caso de edad o para URL eneste caso con el nombre de web, también existen otros "types"como password para que el texto se viera con asteriscos.En el caso de HTML5 tiene muchos "type" diferentes, cada unoespecífico para cada tipo de datos, son los siguientes:• text: Para introducir texto, simplemente.• search: Específico para input en un buscador.• url:Específico para direcciones de página web. Requierehttp:// o http: simplemente.Formularios Web
  • 24. • tel:números de teléfono.• email: El nombre lo dice.• password: Escribe el contenido en asteriscos.• De tiempo: datetime, date, month, week, time ydatetimelocal.• number: Específico para números.• range: Sale una barra para elegir un número entre unrango, el número hay que indicarlo entre un min="10" yun max="12" (los números son de ejemplo.)• checkbox: Para seleccionar y deseleccionar.• radio button: Para seleccionar, uno obligatorio.Formularios Web
  • 25. Formularios WebNAVEGADORES
  • 26.  Las propiedades CSS3 se llaman de manera distinta en cadanavegador:• propiedad-css3 /* Oficial */• -moz-propiedad-css3 /* Mozilla Firefox */• -o-propiedad-css3 /* Opera */• -webkit-propiedad-css3 /* Chrome, Safari */5 Propiedades de ejemplo:• Box Shadow: Lo que box shadow hace, es añadir unasombra a un elemento del tipo caja (display: box), susintaxis es la siguiente:box-shadow: opcional: inset | desplazamiento-x |desplazamiento-y | desenfoque | expansion |color de sombraPropiedades de CSS3
  • 27. • Border Radius: añade bordes redondeados en las esquinas,su sintaxis es la siguiente:border-radius: radio top | radio right | radiobottom | radio left• Columns: Esta propiedad/propiedades son bastante útilespara cuando se quiere separar en columnas un texto o ungrupo de elementos:− column-count: define el numero de columnas.− column-rule: añade un separador entre las columnas,mismo sintaxis que un borde.− column-gap: la distancia que hay entra las columnas.− column-width: define el ancho de cada columna, pordefecto es auto.Propiedades de CSS3
  • 28. Text Shadows: Esta propiedad añade una sombra paralela altexto, usa la misma sintaxis que box-shadow obviando el valoropcional de inset y el valor de expansión:text-shadow: desplazamiento-x | desplazamiento-y| desenfoque | color de sombra;Transitions: La propiedad transition es una animación hechaúnicamente con CSS, su sintaxis consiste en seleccionar unapropiedad a animar y definir el tiempo de animación:−/* Firefox */−-moz-transition: propiedad a animar | duración de la animación;−/* para Safari y Chrome */−-webkit-transition: propiedad a animar | duración de la animación;−/* para Opera */−-o-transition: propiedad a animar | duración de la animación;−/* Se pueden agrupar transiciones usando comas. */NOTA: Cabe notar que para que esta propiedad funcione tiene que existir un cambiode estado sobre el elemento, en el siguiente ejemplo voy a definir:hover comoactivador, cuando el cursor pase por encima del elemento se ejecutara la animación.Propiedades de CSS3
  • 29. Propiedades de CSS3NAVEGADORES
  • 30. Propiedades de CSS3NAVEGADORES
  • 31. Propiedades de CSS3NAVEGADORES
  • 32. Propiedades de CSS3NAVEGADORES
  • 33. Propiedades de CSS3NAVEGADORES
  • 34.  CANVAS es una nueva marca del HTML 5, permitedibujar en dicha área mediante JavaScript. El objetivo de este elemento es hacer gráficos en elcliente (navegador), juegos, etc. Para hacer un uso efectivo de este nuevo elemento deHTML tenemos que manejar JavaScript.Canvas y dibujado
  • 35. Canvas y dibujadoNAVEGADORES
  • 36. HISTORYUna de las mejoras que acompaña a HTML 5 nos permitirá trabajarde manera más cómoda con peticiones asíncronas y, yendo más allá,con las ya conocidas Single Page Applications, donde nuestro sitioweb nos aporta la gran experiencia de usuario, al no sentir lanecesidad de generar peticiones completas para tener la informaciónque el usuario necesita en cada momento.Tiempo atrás, uno de los quebraderos de cabeza para losdesarrolladores era encontrar la estrategia más óptima para podermodificar la URL que se mostraba en el navegador, con el objetivo depoder seguir la pista de dónde nos encontrábamos y cómo volver aese punto tanto a nivel de página cómo mostrar la informaciónpertinente. Hasta ahora se solía hacer uso de hashbangs (#!), aunqueello desembocara en cierta penalización en el rendimiento (Twitter sedeshizo de este mecanismo hace relativamente poco tiempo).
  • 37. HISTORY• History API en versiones anteriores tenía como único cometidoel poder manipular el histórico de la sesión actual vía script. ConHTML 5, disponemos de una ampliación considerablemente útilde esta API:– history.back(): Genera el mismo resultado que el uso delbotón Atrás (Back) del navegador, permitiendo visualizar lapágina anteriormente visualizada.– history.forward(): Nos permite avanzar en el histórico de laventana, siempre y cuando hayamos retrocedido en elmismo– history.length: A medida que vamos visitando páginas elhistórico irá creciendo. La forma de conocer el número depáginas a las que podemos regresar es a través de estapropiedad dentro de history.
  • 38. HISTORY– history.go(): Realmente útil ya que nos permite dirigirnosdirectamente a cualquiera de las páginas almacenadas en elhistórico. La forma de indicar a la que nos queremos dirigir esindicando el número relativo desde la posición en la que nosencontramos. (La página actual tiene el valor 0, por lo queusaremos números negativos para retroceder y positivos paraavanzar).– history.pushState(object,title,url): La parte más innovadoraque nos ofrece HTML 5 es la posibilidad de añadir de formamanual entradas al histórico y,al mismo tiempo, actualizar laURL actual (No más hashbangs!).– history.replaceState(object,title,url): En este caso, a diferenciadel anterior, nos permite modificar una entrada, en lugar deañadirla (por lo que el tamaño del histórico no se veráalterado).
  • 39. HISTORY– window.onpopstate: Este evento a nivel de window trabaja enconjunción con los métodos anteriores. Este evento se lanzarácada vez que avancemos o retrocedamos en el histórico y conello se refresque la información actual de history.– history.state: contiene el objeto inyectado a través depushState o replaceState. Cada página del histórico tendrá supropio objeto, lo cual nos permitirá almacenar los valoresnecesarios para que la página a la que volvamos seatotalmente funcional, haciendo peticiones AJAX por ejemplo.
  • 40. HISTORY
  • 41. • HTML5 proporciona un mecanismo de caché de aplicación que permite que lasaplicaciones basadas en la web se ejecuten sin conexión.Los desarrolladores pueden usar la interface de Caché de aplicaciones (AppCache)para especificar los recursos que el navegador debería guardar en caché y tenerdisponibles para los usuarios cuando no estén conectados. Las aplicaciones queestán en caché se cargan y funcionan correctamente aunque los usuarios haganclic en el botón recargar cuando no están conectados.• Usar el caché de aplicaciones le da a la aplicación los siguientes beneficios:– Navegación sin conexión: los usuarios pueden navegar un sitio aún cuandono estén conectados.– Velocidad: los recursos en caché son locales, y por lo tanto, se cargan másrápido.– Carga al servidor reducida: el navegador solamente descarga desde elservidor recursos que han cambiado…Offline ApplicationCaching API
  • 42. Habilitando caché de aplicaciones• Para habilitar el caché de aplicaciones, debe incluir el atributo Manifest en elelemento <html> en las páginas de sus aplicaciones, como se muestra en elsiguiente ejemplo:<html manifest="ejemplo.appcache">...</html>• El atributo manifest referencia un archivo manifiesto de cache, que es unarchivo de texto que lista los recursos (archivos) que el navegador deberáguardar en caché para la aplicación.• Debería incluir el atributo Manifest en cada página de la aplicación que quieraguardar en caché. El navegador no guardará páginas que no contengan elatributo Manifest , a menos que esas páginas estén específicamente listadasen el archivo de manifiesto en sí mismo. No es necesario listar todas laspáginas que se quieran guardar en caché en el archivo de manfifesto, elnavegador implícitamente agrega cada página que el usuario visite y tenga elatributo manifest establecido para caché de aplicación.Offline ApplicationCaching API
  • 43. Detección de la activación del modo offline– Es bastante habitual que, en algunos navegadores como Firefox, elalmacenamiento de páginas para su uso offline conlleve que se muestre alusuario una alerta especial:– De igual forma, es necesario en muchos casos saber si el navegador está enmodo online a la hora de lanzar o no una operación de sincronización.Aunque podemos conseguir esto de forma directa intentando abrir unaconexión y comprobando si ha sido posible establecerla o no, el navegadornos proporciona una forma bastante más elegante de hacerlo.Offline ApplicationCaching API
  • 44. • El método definido en la especificación a tal efecto consiste en la incorporacióndel atributo onLine, el cual se define a nivel del objeto JavaScript Navigator:<script>function updateIndicator() {var indicator =document.getElementById("indicator");indicator.textContent = navigator.onLine ?"online" : "offline";}</script>Offline ApplicationCaching API
  • 45. • Adicionalmente, si queremos detectar cuando el navegador pasa a modo onlineu offline, existen dos eventos a tal efecto a nivel del objeto Window:<script>document.addEventListener("offline", function(e) {alert("Offline");});document.addEventListener("online", function(e) {alert("Online")});</script></head><body ononline="alert( Online);"onoffline="alert(Offline);">Offline ApplicationCaching API
  • 46. Cargando documentos• Es uso de caché de aplicaciones modifica el proceso normal de la carga de undocumento:– Si existe caché de aplicaciones, el navegador carga el documento y susrecursos asociados directamente desde ahí, sin acceder a la red. Estoacelera el tiempo de carga del documento.– El navegador entonces verifica si hubo actualizaciones al manifiesto decaché en el servidor.– Si el manifiesto de caché fue actualizado, el navegador descarga la nuevaversión del archivo y de los recursos listados en él. Esto se realiza ensegundo plano y no afecta el rendimiento de forma significativa.Offline ApplicationCaching API
  • 47. Offline ApplicationCaching API
  • 48. Otro elemento que se agrega al HTML5 es el AUDIO. El objetivo de estaetiqueta es permitir la carga y ejecución de archivos de audio sinrequerir un plug-in de Flash, Silverlignt o Java.El comité de estandarización W3C deja abierto a cada empresa quedesarrolla navegadores los formatos que quieran soportar (asítenemos que algunos soportan mp3, wav, ogg, au)Un ejemplo de disponer el elemento audio dentro de una página sería:<audio src="sonido.ogg" autoplay controlsloop></audio>Audio y VídeoAUDIO
  • 49. Las propiedades que podemos utilizar con la marca audio son:src: La URL donde se almacena el archivo de audio. Si no definimosla URL la busca en el mismo directorio donde se almacena la página.autoplay: En caso de estar presente el archivo se ejecutaautomáticamente luego de cargarse la página sin requerir laintervención del visitante.loop: El archivo de audio se ejecuta una y otra vez.controls: Indica que se deben mostrar la interface visual del controlen la página (este control permite al visitante arrancar el audio,detenerlo, desplazarse etc.)autobuffer: En caso de estar presente indica que primero debedescargarse el archivo en el cliente antes de comenzar a ejecutarse.Audio y VídeoAUDIO
  • 50. Como no hay un formato de audio universalmente adoptado por todos losnavegadores el elemento audio nos permite agregarle distintas fuentes:<audio controls autoplay loop><source src="sonido.ogg"><source src="sonido.mp3"><source src="sonido.wav"><source src="sonido.au"><!-- Aplique de flash --></audio>El elemento source indica a través de la propiedad src la ubicación del archivo deaudio respectivo.Audio y VídeoAUDIO
  • 51. El orden que disponemos estas fuentes es importante.Primero el navegador busca la primera fuente y verifica que puede reproducirdicho archivo, en caso negativo pasa a la siguiente fuente.Como vemos si queremos que cualquier navegador reciba un audio podemosinclusive hacer el aplique de Flash respectivo por si el navegador no implementael elemento AUDIO o no soporta el formato de archivo.Por el momento no hay un formato con soporte para todos los navegadores,dependerá del sitio que implementemos para ver si tiene sentido duplicarnuestros archivos con distintos formatos de audio.Audio y VídeoAUDIO
  • 52. Audio y VídeoAUDIO - NAVEGADORES
  • 53. El elemento VIDEO permite mostrar un video sin la necesidad de plugin(Flash). En este momento los navegadores permiten mostrar unacantidad limitada de formatos de video.Pasará un tiempo hasta que todos los navegadores comiencen a soportardistintos formatos.FireFox permite mostrar videos en formato ogv (formato de vídeo decódigo abierto Ogg/Theora).Luego para visualizar un video con este formato en FireFox tenemos:<video width="640" height="360"src="http://videos.mozilla.org/firefox/3.5/overview/overview.ogv"controls>Este navegador no permite tag video</video>Audio y VídeoVIDEO
  • 54. Las propiedades más importantes de la marca video son:src: Dirección donde se almacena el video.controls: Se visualiza el panel de control del video: botón de inicio, barra deavance del video etc.autoplay: El video se inicia inmediatamente luego que la página se carga enel navegador.width: Ancho en píxeles del video.height: Alto en píxeles del video.Como no hay un formato de video universalmente adoptado por todos losnavegadores el elemento video nos permite agregarle distintas fuentes:<video width="640" height="360" controls><sourcesrc="http://videos.mozilla.org/firefox/3.5/overview/overview.ogv"><sourcesrc="http://videos.mozilla.org/firefox/3.5/overview/overview.mp4"></video>Audio y VídeoVIDEO
  • 55. Audio y VídeoVIDEO - NAVEGADORES
  • 56.  HTML5 introduce una característica que puede mejorarsustancialmente las aplicaciones web, los WebSockets, loscuales permite crear un canal de comunicación bidireccionalentre el cliente y el servidor, solucionando los problemas quepresenta Ajax o Comet. El ancho de banda ahorrado tiene una proporción de 500:1 yuna latencia de 3:1, resultados increíbles que hacen que losde Google anden muy interesados en esta tecnología (elahorro en aplicaciones como GMail puede ser considerable).Web Sockets
  • 57. Web SocketsNAVEGADORES
  • 58.  La Geolocalización es una de las características principales deHTML5, la cual empieza a tener un gran empuje en todos losámbitos de la web, redes sociales y más. Veremos con solamente un poco de código cómo podremosobtener la ubicación de un usuario con HTML5, que enrealidad estaremos usando la API de Geolocalización de laW3C (Consorcio World Wide Web), que es el organismointernacional que dicta lo estándares Web. Podremos observar que obtener la información de estamanera es aún más rápida.Geolocalización
  • 59. if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(function(position) {var lat = position.coords.latitude;var lng = position.coords.longitude;var options = { position: newgoogle.maps.LatLng(lat, lng) }var marker = newgoogle.maps.Marker(options);marker.setMap(map);});}Con el objeto navigator.geolocation es con el que detectamos si elnavegador tiene las capacidades necesarias para detectar laGeolocalizaciónGeolocalización
  • 60. El método navigator.geolocation.getCurrentPosition es el que hace lalabor de recuperación de la ubicación del usuario mediante el objetoposition que se envía a la función.Una vez que se ha llamado a este método, por medio de una función quepermita su ejecución, el navegador nos preguntará si le permitimos usar lainformación de nuestra ubicación, lo hará de esta manera:Geolocalización
  • 61. Las instrucciones position.coords.latitude y position.coords.longitudeextraen la información de latitud y longitud correspondiente de laposición obtenida.Las últimas 3 líneas del código son las que dibujan el mapa y noscolocan el pin en las coordenadas obtenidas.Si quieres dibujar el mapa con estas instrucciones no olvides agregarel siguiente script dentro de las etiquetas head:<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=true" > </script>Geolocalización
  • 62. GeolocalizaciónNAVEGADORES
  • 63. Web storageCon el método "key(index)" se obtiene el nombre de la clave para uníndice dado. Este método puede resultar un poco extraño de entrada,pero es útil para recorrer todas las claves que actualmente se encuentranalmacenadas. Si en el almacén hay N claves, entonces se puedenrecuperar sus nombres iterando entre 0 y N-1.for (var i= 0; i < localStorage.length; ++ i){hacerAlgoCon( localStorage.key(i) ); }Finalmente, comentar que si lo que se quiere almacenar son objetos máscomplejos de JavaScript, siempre se puede utilizar las utilidades deconversión entre objetos JSON y String.var user = {name: "Holmes", friend: "Watson"};...localStorage.setItem("user", JSON.stringify(user) );… user = JSON.parse( localStorage.getItem("user") );
  • 64. Web storageEn la especificación oficial se indica además que cualquier tipo de cambioen el almacén debe disparar un evento de tipo "StorageEvent", de formaque cualquier ventana con acceso al almacén pueda responder al mismo.window.addEventListener("storage", onStorage, false);function onStorage(event){//Evento recibido de tipo StorageEvent}El evento tiene los atributos "key", "oldValue", "newValue", "storageArea"y "url", para indicar la clave afectada, el valor anterior, el nuevo valor, elalmacén afectado, y la url desde la que se realizó el cambio.Si la clave es nueva el valor anterior llega como null.Si la clave está siendo borrada el nuevo valor llega como null.Si el almacén entero está siendo borrado la clave y los dos valores llegan a null.
  • 65. Web storage
  • 66. Web workersHTML5 aparte de añadir nuevas etiquetas, también incluye otrasposibilidades javascript, como los Web Workers, los cuales permitenejecutar scripts en paralelo (background). Por ejemplo, tenemos unproceso costoso en recursos que no es interrumpible, podemosutilizar un Worker y evitar que el navegador se nos colapse.Su uso es bastante sencillo, se instancia un Worker que estará en unfichero javascript independiente, se indica qué hacer cuando sereciba un mensaje y ya solo queda que el javascript y el Worker secomuniquen mandándose mensajes.
  • 67. El script que instancia el Worker sería así:// Crea el Web Workervar worker = new Worker("worker.js");// Envía un mensaje al workerworker.postMessage(0);// Recibe los mensajes del Workerworker.onmessage = function (evt) {// evt.data es el valor devuelto por el Workeralert(evt.data);}// Trata los erroresworker.onerror = function (evt) {alert(evt.data);}Web workers
  • 68. Y el worker.js sería el siguiente:// Ejemplo de Workeronmessage = function (evt) {// evt.data es el valor enviado desde el javascriptfor (var i=evt.data, il=1000001; i<il; i++) {// Envía datos continuamentepostMessage(i);}}Los Workers también admiten el evento onconnect, aunque tan sólofunciona en Webkit:onconnect = function(evt) {postMessage(Hola, acabas de conectarte al Worker);}Web workers
  • 69. Web workersNAVEGADORES
  • 70. WebGLWebGL es una tecnología capaz de recrear animaciones 3D en unnavegador web sin necesidad de utilizar plugins adicionales, sinohaciendo uso de su propio estándar.Flight of the Navigator es una demostración, realizada por Mozilla ypublicada en su sitio web videos.mozilla.org , donde se han hecho usode las nuevas tecnologías para la web HTML5 y WebGL:http://videos.mozilla.org/serv/mozhacks/flight-of-the-navigator/Después de ver una demo como esta, Microsoft ha tomado la decisiónde no incorporar WebGL en Internet Explorer; por supuestos motivosde seguridad, cuando en realidad todo el mundo sospecha que elverdadero motivo es defender sus tecnologías propias DirectX ySilverlight.
  • 71. WebGLNAVEGADORES
  • 72. Drag & Drophttp://html5demos.com/drag
  • 73. Drag & DropNAVEGADORES
  • 74. • JSON es un acrónimo de JavaScript Object Notation, un formato ligerooriginalmente concebido para el intercambio de datos en Internet. Seconsidera un subconjunto de la notación literal para representarobjetos, Arrays, cadenas, booleanos y números en Javascript.• Su popularización llegó sobre 2001 gracias al apoyo incondicional deDouglas Crockford. Yahoo! ayudó en gran manera a su difusión a raízde la inclusión de este formato en algunos de sus servicios web másinnovadores.• En diciembre de 2006, Google comenzaría a ofrecer sus feeds en JSONpara su protocolo web GData.• Pese a que JSON se basa en la notación Javascript, está consideradocomo un lenguaje independiente de formato de datos cuyaespecificación es descrita en RFC4627.JSON
  • 75. • NOTA: Para comprobar la validez de un marcado JSON existen un par deherramientas online de gran valor: JSONFormatter y JSONLint. EnJSON - Anatomía
  • 76. Particularidades de JSON sobre Javascript• Algunas de las particularidades o reglas del formato JSON a tener encuenta son:• Los pares nombre-valor van siempre delimitados por comillas,independientemente de si se tratan de nombres válidos en Javascriptque podrían aparecer sin ellas.• JSON puede representar seis tipos de valores: objetos, Arrays,números, cadenas, booleanos y null.• Las fechas no son reconocidas como un tipo de objeto propio.• Los números en JSON no pueden ir precedidos de ceros salvo en elcaso de notación decimal ( Ejem: 0.001 ).• En definitiva, como JSON es considerado un lenguaje independiente,sus objetos deben ser considerados como cadenas Javascript, nocomo objetos nativos.JSON
  • 77. Usando JSON en Javascript• El verdadero potencial de JSON es su integración con Javascript.Esto permite un fácil intercambio de datos entre aplicacionesmediante peticiones XHR al servidor a la vez que abre posibilidadesilimitadas a nuevos paradigmas de gestión como los emergentessistemas No-SQL.• Para permitir que un objeto JSON sea utilizado por Javascript,debemos parsearlo (interpretarlo) mediante el uso del comandoeval() tal y como se muestra a continuación:var myCakes = eval(( + cakeJSON + ));alert(myCakes.name); // donutalert(myCakes.image.width); // 200JSON
  • 78. Usando JSON en Javascript• A través de eval(), interpretamos el objeto JSON y lo convertimosen una entidad (objeto) Javascript; esto permite acceder a suspropiedades directamente como con cualquier otro objeto.Obsérvese que es necesario un doble paréntesis para evitar laambigüedad con la que Javascript interpreta las llaves con las quecomienza el objeto JSON.NOTA: Para acceder a las propiedades del objeto, utilizamos lanotación con punto en lugar de corchetes tal y como recomiendanlos expertos:alert( myCakes[thumbnail][height] ); // Peoralert( myCakes.thumbnail.height ); // MejorJSON
  • 79. Usando JSON en Javascript• Las transacciones XHR, por seguridad, están limitadas únicamente alámbito del dominio que hace la petición, por lo tanto, cuando serecibe una respuesta, podemos estar 100% seguros de que ésta,proviene del propio dominio. Sin embargo, eso no tiene por quelibrarnos de un error del servidor o de una redirección maliciosa quenuestro eval() a ciegas puede convertir en desastre.• Siempre es útil recordar ese mantra que inunda foros y artículos yque suele ser lo primero que se graba a fuego en la conciencia de unprogramador Javascript: eval is evil. Para evitar todos los problemasderivados de una incorrecta interpretación de nuestro código,podemos hacer uso de algunas herramientas de terceros.JSON
  • 80. JSON
  • 81. JSON
  • 82. JSON
  • 83. Parseando JSON de forma segura• Existen diversas formas que permiten prescindir de eval() delegandola tarea en métodos más seguros.• En JQuery, tenemos por ejemplo el método parseJSON quecomprueba la integridad del marcado antes de evaluarlo.Mootols ofrece también su propio método, JSON.encode(), que realizauna tarea similar al anterior ejemplo de jQuery.• Sin embargo, con la llegada del ECMAScript 5, se ha implementado unnuevo objeto JSON basado en la API programada por el propioDouglas Crockford. Sus métodos más interesantes son parse() ystringify().JSON
  • 84. • JSON.parse ofrece un eval() seguro a través de su filtradomediante expresiones regulares. Si la cadena no es un objeto JSONválido, devuelve un error de sintaxis y el eval no es llamado.• La sintaxis de este comando es la siguiente:JSON.parse( string $JSONString [, function$reviver ] );• El primer parámetro recoge la cadena JSON mientras que elsegundo, opcional, acepta una función para el tratamiento dedicha cadena. Esta función recoge dos parámetros (clave y valor) ypor cada registro del objeto Javascript que estamos componiendo,se evalúan sus pares según el criterio definido.JSON – parse( )
  • 85. • Este método resulta muy práctico para, por ejemplo, convertir lascadenas de fechas en objetos Javascript:function dateReviver(key, value) {if (typeof value === string) {var a = /^(d{4})-(d{2})-(d{2})$/.exec(value);if (a) {return new Date(Date.UTC(+a[1], +a[2] - 1,+a[3]));}}return value;};var myObj = JSON.parse( myStringJSON, dateReviver);myObj.dateEntry; //Sat Dec 04 2010 16:00:00 GMT-0800 (Pacific Standard Time)JSON – parse( )
  • 86. • JSON.stringify hace la operación contraria. Su sintaxis es la siguiente:JSON.stringify( obj $value [, $replacer] [, @space] );• El primer parámetro $value suele ser un objeto Javascript (o un array) yes a partir del cual, obtenemos la cadena JSON correspondiente.• El segundo parámetro, $replacer, si es una función, actúa básicamentecomo el $reviver anterior pero de modo inverso. Sin embargo, si leproporcionamos un array, actúa como una lista blanca de aquellaspropiedades del objeto que serán serializadas.• El tercer parámetro, $space, puede ser un número o una cadena. En elprimer caso, representa el número de espacios en blanco con el queserá indentado cada nivel de nuestro JSON. Si usamos una cadena, cadauno de los pares aparecerá indentado con el carácter que hayamosdefinido. Por lo general, usaremos los caracteres de escape Javascriptpara indicar tabulaciones o saltos de línea (el más común será ‘t’ paraindicar una tabulación horizontal).JSON – stringify( )
  • 87. • Como podemos ver, el uso de un $replacer resulta interesante parafiltrar aquellos pares clave-valor que no nos interesan en unmomento dado.• Podemos encontrar ambas funciones en la mayoría de navegadoresmodernos con la excepción de IE7. Asen Bozhilov ha compilado unatabla comparativa con las diferentes formas en que los fabricanteshan implementada JSON.parse.JSON.stringify(myObj, [id,type,name], t)/*{"id" : "0001","type" : "donut","name" : "Cake"}*/87JSON – stringify( )
  • 88. MODERNIZRModernizr: librería Javascript para detectar HTML5, CSS3 y másEs una librería que permite detectar las nuevas características deHTML5, CSS3, Canvas, … que admite el navegador. Tan sólo habráque acceder a propiedades para saber si admite o no unacaracterística en particular.
  • 89. MODERNIZR Las características que detecta son:− @font-face− Canvas, Canvas Text− HTML5 Audio− HTML5 Audio formats− HTML5 Video− HTML5 Video formats− Rgba(), hsla() Border-image, border-radius− Box-shadow, opacity− Multiple backgrounds− CSS Animations− CSS Columns− CSS Gradients− CSS Reflections− CSS 2D Transforms− CSS 3D TransformsCSS TransitionsGeolocation APIInput TypesInput AttributeslocalStorageSessionStorageWeb WorkersapplicationCacheSVG, SVG Clip pathsSMILWeb SQL DatabaseIndexedDBWeb SocketsCross-window Messaginghashchange EventHistory ManagementDrag and Drop
  • 90. JQUERY• ¿Qué es jQuery?jQuery es considerado un Framework de Javascript, o ambiente dedesarrollo. Lo que no es más que un conjunto de utilidades las cualesno necesitan ser programadas, de hecho ya fueron programadas,probadas y podemos utilizarlas de una manera muy simplificada.En otras palabras, podremos lograr los mismos resultados, en menostiempo sin necesidad de programar una funcionalidadcompletamente.• ¿Qué puedo hacer con jQuery?jQuery nos permite agregar efectos y funcionalidades complejas anuestro sitio web, como por ejemplo: galerías de fotos dinámicas yelegantes, validación de formularios, calendarios, hacer aparecer ydesaparecer elementos en nuestra página y muchas otras poderosasopciones. Otra ventaja sin duda es la posibilidad que nos brinda detrabajar con AJAX, sin preocuparnos de los detalles complejos de laprogramación.
  • 91. Javascript & Jquery - JQUERY• ¿Por qué utilizar jQuery?Muchas veces nos planteamos si es mejor utilizar cosas ya hechas odesarrollarlas por nuestra propia cuenta. Bueno… este es totalmenterelativo dado que cuando programamos, muchos de los lenguajesutilizados no son de bajo nivel, es decir estamos utilizando funciones pre-desarrolladas y simplificadas.Con jQuery ocurre lo mismo, por ejemplo: el detectar que tipo deexplorador utiliza un visitante tendríamos que escribir una cuentas líneasde código en Javascript. Dado que jQuery es totalmente compactible conla mayoría de los exploradores, Internet Explorer, Firefox, Opera, AppleSafari etc. En definitiva, nosotros no necesitamos preocuparnos por losasuntos de compactibilidad, jQuery lo hace automáticamente.
  • 92. Javascript & Jquery - JQUERY• ¿Por qué utilizar jQuery?El soporte es otra de las razones por la cual la utilización de jQuery ennuestros sitios es totalmente recomendada. Esta fantástica librería hatenido una aceptación muy grande por los programadores, lo que hagenerado que muchos desarrolladores se dediquen a la creación deplugins o complementos que utilizan jQuery. Esto nos permite agregargalerías dinámicas, calendarios, sistemas de votación, formulariosdinámicos y muchas otras cosas tan solo agregando los plugins.Otra razón, que es muy importante es que es gratis, y el código fuentepuede ser modificada y adaptado a nuestras necesidades siguiendo laspolíticas de las licencias (MIT y GPL2)
  • 93. JQUERY• ¿Cómo comenzar a utilizar jQuery?Para hacer uso de esta fabulosa Librería tienes que bajarladirectamente desde el sitio oficial. Haz clic http://jquery.com/ parabajar jQuery.Conceptos Básicos:En tu página HTML agrega lo siguiente dentro del tag HEAD.<script type="text/javascript" src="jquery.js"></script>− Podemos adjuntar la librería en dos modos, el reducido que es idealpara agilizar y acelerar la carga de las páginas o la versión extendida, lacual tiene más tamaño y es ideal para los desarrolladores.− jQuery lo hace más fácil, para demostrarlo vamos a tomar comoejemplo una de las acciones más utilizadas cuando trabajamos conJavascript, que es la de seleccionar un elemento con“getElementById()”
  • 94. JQUERYEXTRAIDO DE LA PÁGINA OFICIAL DE JQUERY:
  • 95. Bases de datos localesOtra de las grandes novedades de HTML5 es las nuevas alternativasrespecto a la forma de guardar información en el cliente por partede una web. Hasta ahora, la única alternativa que se tenia desdeuna web era usar cookies. HTML5 introduce tres nuevas formas,“local” y “session” storage y por otro lado la posibilidad de manejartoda una base de datos relacional que reside en cada cliente. Adiferencia del localstorage o sessionstorage, que son mas similares alas cookies, el hecho de manejar una base de datos totalmentefuncional es una novedad bastante importante que puede ayudar anuestras webs a guardar información de una forma mucho masestructurada.Como hemos dicho, la base de datos es de tipo relacional, por lo queel lenguaje para “hablar” con ella será enteramente SQL.Aunque expresamente la W3 desaconseja ligar el estándar a unaimplementación concreta, en la practica, prácticamente la totalidadde navegadores han usado SQL lite para implementar la gestión dela base de datos.
  • 96. Como sabemos, no el SQL que entiende todas las bases de datos esigual, existen lo que se denominan “dialectos”, debido a que SQL lite escasi la opción “de-facto” podremos usar el “dialecto” del SQL lite en lassentencias. Aunque, al igual que el estándar desaconsejaba ligarse auna implementación, no es buena idea ligar el código a un dialecto,pues puede ser que en algún momento uno de los navegadores decidautilizar otro “backend” de bases de datos, y haga nuestro códigoincompatible. Lo ideal es usar, en la medida de lo posible, el SQL mascercano al estándar.Pese a todo esto, de momento y hasta que no se plantee unaimplementación independiente, el estándar de HTML5 respecto al“WebSQL” apunta a que el dialecto a seguir es del SQL lite.Pasando ya a como usar la base de datos desde javascript, el primerpaso es obtener una referencia a la base de datos para poder operarcon ella. Para ello usaremos la función openDatabase() donde lepasaremos, el nombre de la base de datos, la versión del esquema y eltamaño estimado.Bases de datos locales
  • 97. Una vez tenemos la referencia de la base de datos, vamos a ver que,prácticamente la totalidad de los métodos son asíncronos, por lo quetípicamente los argumentos serán callbacks. En este caso Javascriptsale a nuestra ayuda, como seguramente sabremos, en Javascriptpodemos encapsular en una variable la declaración de una función, porlo que la forma mas común de pasar los parámetros a las funciones queoperan en la base de datos es incluir la declaración de los propioscallbacks, ya que habitualmente, no será muy útil reutilizar dichoscallbacks.Las dos funciones más usadas sin duda van a ser “transaction” y“executeSql”, con la primera crearemos una transacción que seejecutará contra la base de datos de forma atómica (bueno, esa es ladefinición de transacción, no?), mientras que con la segunda, como sunombre indica ejecutaremos las propias sentencias sql.A continuación veremos un simple ejemplo en el que creamos una basede datos de usuarios en el cliente, donde guardamos cosas como sunombre de usuario o password.Bases de datos locales
  • 98. Bases de datos locales
  • 99. • Empresa creada en el año 2003 con capital100% español. 10 años dedicados a la formaciónde profesionales TIC.• Facturación sostenida superior al millón deeuros/año• Más de 25.000 alumnos han pasado pornuestras aulas.• El número de cursos impartidos supera los3.000, recibiendo una excelente valoración delos alumnos.
  • 100. • Calendario público abierto y estable• Gestión de las bonificaciones de la FundaciónTripartita para la formación• ISO-9001. Certificamos nuestro compromiso conla calidad.• Redes sociales como nuevo canal decomunicación de CLEFormación.
  • 101. ¡Estamos en las Redes Sociales!http://www.facebook.com/cleformacionhttp://www.linkedin.com/company/cleformaci-nhttps://twitter.com/CLEFormacion¡ Síguenos !cursos@cleformacion.comhttp://gplus.to/cleformacion