Html5 telefonica-curso
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Html5 telefonica-curso

  • 9,245 views
Uploaded on

Curso de 4 horas con con ejemplos. Bastante completo, incluye canvas, video, almacenamiento, protocols, geolocation, WebRTC, .. y muchos punteros a sitios vistosos

Curso de 4 horas con con ejemplos. Bastante completo, incluye canvas, video, almacenamiento, protocols, geolocation, WebRTC, .. y muchos punteros a sitios vistosos

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
9,245
On Slideshare
9,137
From Embeds
108
Number of Embeds
18

Actions

Shares
Downloads
159
Comments
0
Likes
2

Embeds 108

http://mashmetv.appspot.com 34
http://localhost 21
http://2105.vaas-roulette.appspot.com 11
http://www.mashme.tv 10
http://666.mashmetv.appspot.com 4
http://www.techgig.com 4
http://cmslan.com 4
http://4.vaas-roulette.appspot.com 3
http://130792.mashmetv.appspot.com 3
http://31.mashmetv.appspot.com 2
http://www.slideshare.net 2
http://1307.vaas-roulette.appspot.com 2
http://vaas-roulette.appspot.com 2
http://www.cmslan.com 2
http://999.mashmetv.appspot.com 1
http://www.google.es 1
http://localhost:8081 1
http://paper.li 1

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 Juan Quemada Distrito C Madrid, 27 de Junio 2011Wednesday, June 29, 2011
  • 2. Los componentes del primer Web URI (URL)  Dirección en la red de un documento o recurso  Ejemplo: http://www.upm.es/centros/etsit/personal.html  Los hiperenlaces modelan  Relaciones o interacciones entre personas, información, empresas, …  ¡¡Todo recurso Web posee un URL que lo identifica!! HTML  Lenguaje abierto de  descripción de documentos hipermedia, formularios, …  ¡Programación y navegación Web muy sencillas! HTTP  Protocolo transaccional genérico  Protocolo sin estado (Stateless) -> ¡Servidores y servicio escalables! 2Wednesday, June 29, 2011
  • 3. Evolución: Aplicaciones Web Aplicaciones de servidor  El Web permite acceso remoto a aplicaciones interactivas  Consulta y actualización de bases de datos HTTP (URL) Aplicaciones de cliente HTML, XML, ..  HTML no es suficiente  Hay que mejorar la experiencia de usuario (velocidad, interactividad)  Aparecen: CSS, Javascript, CSS, AJAX, .... “RIA: Rich Internet Applications” (Flex, HTML5, ..)  Nuevo Paradigma: Arquitecturas de objetos distribuidos 3Wednesday, June 29, 2011
  • 4. Plataforma HTML (HTML5) Conjunto de normas  para diseñar aplicaciones avanzadas de cliente  Basados en Web  HTML (HTML5)  CSS (CSS3)  Javascript  AJAX  ......... Parte del paradigma -> Web as platform  Despliegue de servicios en la nube  Despliegue en servidor (granja de servidores)  Usuario no necesita instalar nada 4Wednesday, June 29, 2011
  • 5. Normalización: HTML, XML y XHTML 1999: HTML deja de actualizarse por W3C  W3C promueve XHTML (redefinición de HTML en XML)  Sustitución muy compleja  no aceptada por diseñadores de navegadores  XHTML tiene demasiadas variantes:  transitional, frameset, strict, basic, ....... Aparecen tecnologías propietarias para nuevas aplicaciones  Adobe Flash  para Webs dinámicas  con gráficos bonitos  para videoWednesday, June 29, 2011
  • 6. Plataforma Web está acelerando From Brad Neuberg, Google, http://www.slideshare.net/jobfan/google-html5-tutorial 6Wednesday, June 29, 2011
  • 7. HTML5 2004: Apple, Mozilla y Opera crean WHATWG  Para definir nueva versión de la plataforma HTML  Denominada HTML5  Capaz de soportar páginas y aplicaciones Web avanzadas 2008: W3C converge con WHATWG y HTML5  Publica “Working Draft” de HTML5 en W3C  W3C finaliza actividad en XHTML 2 Calendario de HTML5  2012: Candidate Recommendation ?  2022: Proposed RecommendationWednesday, June 29, 2011
  • 8. Transición a HTML5 Transición a HTML5 ha comenzado ya  Con fuerte apoyo de Google, Apple, Opera, Microsoft, ..... La mayoria de los navegadores soportan mas del 50% de la norma  La norma se aprobará cuando haya implementaciones interoperables http://html5test.com/ http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)Wednesday, June 29, 2011
  • 9. Soporte a HTML5 en los navegadores actuales Esta avanzando muy rapiadmente En todos los navegadores con implantación significativa La norma definitiva, esta prevista para 2022  Norma requiere 2 implementaciones previas completas  Mucho HTML5 se puede usar ya Mayo 2011 http://caniuse.com/Wednesday, June 29, 2011
  • 10. Plataforma HTML5: novedades Paginas Web estructuradas y formularios enriquecidos Gráficos vectoriales (SVG) y formulas matematicas (MathML) CANVAS para juegos y animaciones (2D, 3D, ..) Video y audio nativo Geolocalicación y sensores Variables locales, BBDD y Web & Offline Web workers WebSockets y VC con PeerConnection API XML-HTTP-Request Nivel 2 con “cross-origin” Microdatos o RDFa (Web semántica) ....... Conjunto de demos de características de HTML5: http://html5demos.com/Wednesday, June 29, 2011
  • 11. Test de HTML5 de Chrome 12 en http://html5test.com/ (el mejor soportado)Wednesday, June 29, 2011
  • 12. http://www.modernizr.com/ modernizr Libreria Javascript Detecta soporte aHTML5 y CSS3 deforma segura.modernizr puedecomplementarsecon libreriasjavascript desoporte acaracteristicasHTML5 y CSS3 ennavegadoresantiguos: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-PolyfillsWednesday, June 29, 2011
  • 13. Lenguaje de Marcado HTML5Wednesday, June 29, 2011
  • 14. *From Peter Lubers, Kaazing: HTML5 The 30,000’ View, http://www.slideshare.net/peterlubbers/html5-4378635Wednesday, June 29, 2011
  • 15. *From Peter Lubers, Kaazing: HTML5 The 30,000’ View, http://www.slideshare.net/peterlubbers/html5-4378635Wednesday, June 29, 2011
  • 16. Listado de marcas de HTML5 incluyendo las nuevas y las deprecadas: por Antonio Lupetti http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf <datalist> Defines a dropdown list Defines inserted text HTML 5 TAG REFERENCE C <dd> Defines a definition description <ins> cite, datetime <samp> Defines sample computer code Defines a definition list Defines a generated key in a form <script> <!--...--> Define a comment Defines deleted text async, type charset defer, src <del> <keygen> autofocus, challenge, disabled, form, cite, datetime keytype, name Defines a section <!DOCTYPE> Defines the document type <section> Defines details of an element cite Defines a hyperlink <details> <kbd> Defines keyboard text open Defines a selectable list <a> href, hreflang, media, ping , rel, Defines an inline sub window target, type <dialog> Defines a dialog (conversation) <label> <select> autofocus, disabled, form, multiple, for, form name, size <abbr> Defines an abbreviation <dfn> Defines a definition term <legend> Defines a title in a fieldset <small> Defines small text ! <acronym> Used to define an embedded acronyms ! <dir> Used to define a directory list Defines a list item <li> Defines media resources <address> Defines an address element <div> Defines a section in a document value <source> media, src, type ! <applet> Used to define an embedded applet <dl> Defines a definition list Defines a resource reference <span> Defines a section in a document <link> href, hreflang, media, rel, sizes, type Defines an area inside an image map <dt> Defines a definition term <strong> Defines strong text <area> alt, coords, href, hreflang, media, Defines an image map <em> Defines emphasized text <map> Defines a style definition ping, rel, shape, target, type name <style> Defines external interactive content or type, media, scoped Defines an article <mark> Defines marked text <article> <embed> plugin <sub>, <sup> Defines sub/super-scripted text cite, pubdate height, src, type, width Defines a menu list Defines content aside from the page <menu> Defines a table <aside> label, type <table> content Defines a fieldset <fieldset> summary disabled, form, name Defines meta information Defines sound content <meta> Defines a table body <audio> charset, content, http-equiv, name <tbody> autobuffer, autoplay, controls, src <figure> Defines a group of media content, and their summary caption Defines measurement within a predefined <b> Defines bold text <meter> range Defines a table cell Used to define font face, font size, and font <td> Defines a base URL for all the links in a ! <font> color of text high, low, max, min, optimum, value colspan, headers, rowspan <base> page <footer> Defines a footer for a section or page <nav> Defines navigation links Defines a text area href, target autofocus, cols, disabled, form, Defines a form Used to display text for browsers that do <textarea> Used to define a default font-color, font- ! <noframes> not handle frames maxlength, name, placeholder, ! <basefont> accept-charset, action, autocomplete, readonly, readonly, required, rows, size, or font-family for all the document <form> enctype, method, name, novalidate, <noscript> Defines a noscript section wrap Defines the direction of text display target <bdo> Defines an embedded object <tfoot>, dir Defines a table footer / head <frame> Used to define one particular window <object> <thead> (frame) within a frameset data, form, height, name, type, ! <big> Used to make text bigger usemap, width Defines a table header Used to define a frameset, which organized <th> Defines a long quotation ! <frameset> Defines an ordered list colspan, headers, rowspan, scope <blockquote> multiple windows (frames) <ol> cite reversed, start <h1> to <h6> Defines header 1 to header 6 Defines a date/tim <body> Defines the body element <time> Defines an option group datetime <head> Defines information about the document <optgroup> <br> Inserts a single line break label, disabled <title> Defines the document title <header> Defines a header for a section or page Defines an option in a drop-down list Defines a push button <option> Defines a table row Defines information about a section in a disabled, label, selected, value <tr> autofocus, disabled, form, <hgroup> datetime <button> formaction, formenctype, document Defines some types of output formmethod, formnovalidate, <hr> Defines a horizontal rule <output> ! <tt> Used to define teletype text formtarget, name, type, value for, form, name ! <u> Used to define underlined text Defines an html document <p> Defines a paragraph Defines graphics <html> <canvas> manifest, xmlns <ul> Defines an unordered list height, width Defines a parameter for an object <i> Defines italic text <param> <var> Defines a variable <caption> Defines a table caption name, value Defines an inline sub window <pre> Defines preformatted text Defines a video ! <center> Used to center align text and content <iframe> height, name, sandbox, seamless, src, <video> autobuffer, autoplay, controls, <cite> Defines a citation width Defines progress of a task of any kind height, loop, src, width <progress> max, value Defines computer code text Defines an image <code> <img> Defines a short quotation HTML 5 new tag autobuffer, autoplay, controls, src alt, src, height, ismap, usemap, width <q> cite <col> Defines attributes for table columns Defines an input field ! Tag not supported in HTML 5 accept, alt, autocomplete, autofocus, Used in ruby annotations to define what to Defines groups of table columns <rp> show browsers that to not support the ruby <colgroup> checked, disabled, form, formaction, span <input> formenctype, formmethod, formnovalidate, formtarget, height, element Designed by Antonio Lupetti THE k <rt> Defines explanation to ruby annotations (http://woorkup.com) Defines a command button list, max, maxlength, min, multiple, WORKING <command> name, pattern, placeholder, readonly, http://facebook.com/antoniolupetti checked, disabled, icon, label, required, size, src, step, type, value, <ruby> Defines ruby annotations http://www.twitter.com/woork BRAIN radiogroup, type width ! <s>, <strike> Used to define strikethrough text.Wednesday, June 29, 2011
  • 17. Presentación página HTML5 con CSS3 *From Peter Lubers, Kaazing: HTML5 The 30,000’ View, http://www.slideshare.net/peterlubbers/html5-4378635Wednesday, June 29, 2011
  • 18. Presentación página HTML5 con CSS3 *From Bruce Lawson: HTML5 Doctor, http://html5doctor.com/designing-a-blog-with-html5/Wednesday, June 29, 2011
  • 19. Anatomia de una página HTML5 Nuevas marcas para definir la estructura de una página <header>: cabecera de página, articulo, sección, .... <nav>: lista de navegación y enlaces <section>: colección de articulos y otros contenidos <article>: articulos, contribuciones, ..... <aside>: contenidos situados a un lado <footer>: pie de pagina o de contenidoWednesday, June 29, 2011
  • 20. Anatomía página HTML5 En Navegador HTML 4.01 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Mi Blog</title> <link rel="stylesheet" href="html5.css" /> </head> <body> <header> <h1>Header: Blog en HTML5</h1> </header> <div id="container"> <nav> <h3>Navegacion</h3> <a href=”url1”>loc1</a> <a href=”url2”>loc2</a> </nav> <section> <article> <header> <h2>Hablando en Plata</h2> </header> El Web esta en continua expansion y debe incorporar nuevas funcionalidades para soportar ...... <footer> <h4>Luis Cea, 10/8/2010</h4> </footer> </article> <article> <header> <h2>Ha llegado HTML5</h2> </header> El lenguaje HTML no se actualiza desde 1999. Por fin W3C y WHATWG, desarrollan juntos HTML5 ......... <footer> <h4>Luis Cea, 4/8/2010</h4> </footer> </article> </section> <footer> <h2>Footer</h2> </footer> </div> </body> </html>Wednesday, June 29, 2011
  • 21. HTML5 Peeks, Pokes and Pointers I Extraido de: Dive into HTML5 (http://diveintohtml5.org), Mark Pilgrim, O’Reilly 2010Wednesday, June 29, 2011
  • 22. Formularios enriquecidos Nuevos tipos de entradas  Validación de entradas  Fechas, calendarios  Busquedas  URLs  eMails  Autofocus  Deslizadores  .... Compatible hacia atras  Browsers no HTML5  ignoran nuevos atributosWednesday, June 29, 2011
  • 23. HTML5 Peeks, Pokes and Pointers I Extraido de: Dive into HTML5 (http://diveintohtml5.org), Mark Pilgrim, O’Reilly 2010Wednesday, June 29, 2011
  • 24. GráficosWednesday, June 29, 2011
  • 25. Gráficos y Símbolos en HTML5 Mapas de bits con CANVAS  Mucho potencial: programado en Javascript Librerias Javascript para: juegos, 2D, 3D, .... Gráficos vectoriales con SVG (Scalable Vector Graphics)  SVG se desarrollo para XML y XHTML Tamaño escalable: independientes de dispositivo Formulas y símbolos con MathML  MathML se desarrollo para XML y XHTML Tamaño escalable: independientes de dispositivoWednesday, June 29, 2011
  • 26. Mapas de bits con CANVAS CANVAS define un mapa de bits  Se define en HTML con la marca <canvas>  y se programa en Javascript  Permite aplicaciones interactivas, juegos, 2D, 3D (WebGL), ....  Esta soportado ya en los principales navegadores Ejemplo definición  <canvas id="canvas1" width="150" height="350"></canvas>  Nombre que lo identifica (javascript): id="canvas1"  Tamaño en puntos: width="150" height="350" Tutoriales  https://developer.mozilla.org/En/Canvas_tutorial  http://www.desarrolloweb.com/manuales/manual-canvas-html5.htmlWednesday, June 29, 2011
  • 27. Ejemplo de Canvas <html> <head> <script type="application/javascript"> function draw() { var canvas = document.getElementById("canvas1"); // obtiene "canvas1" if (canvas1.getContext) { // comprueba si CANVAS soportado var ctx = canvas1.getContext("2d"); // define contexto 2D ctx.strokeStyle = "green"; // Define color ("blue", FFA022, rgb(255,3,2), ..) de linea (stroke) ctx.strokeRect (30, 30, 55, 50); // strokeRect(x,y,width,height): dibuja contorno ctx.fillStyle = "rgb(200,0,0)"; // Define color ("blue", FFA022, rgb(255,3,2), ..) de relleno ctx.fillRect (10, 10, 55, 50); // fillRect(x,y,width,height): rellena rectangulo ctx.clearRect(15, 15, 20, 20); // Hace una zona (rectangulo) transparente // Triangulo relleno ctx.fillStyle = "blue"; ctx.beginPath(); // Abre camino ctx.moveTo(25,105); // Punto de comienzo ctx.lineTo(105,105); // Primer lado ctx.lineTo(25,185); // Segundo lado ctx.fill(); // Relleno } } </script> </head> <body onload="draw();"> // Ejecuta draw() al cargar la pagina <h3> CANVAS Example </h3> <canvas id="canvas1" width="150" height="350"></canvas> // define el canvas </body> </html>Wednesday, June 29, 2011
  • 28. HTML5 Peeks, Pokes and Pointers IV Extraido de: Dive into HTML5 (http://diveintohtml5.org), Mark Pilgrim, O’Reilly 2010Wednesday, June 29, 2011
  • 29. HTML5- Canvas Tutorials Magnífica fuente de tutoriales y ejemplos sobre el Canvas http://www.html5canvastutorials.com/Wednesday, June 29, 2011
  • 30. Chrome Web Store Tienda de aplicaciones Web de Google para ejecutar en Chrome https://chrome.google.com/webstore?hl=esWednesday, June 29, 2011
  • 31. InfoRapid: Portal de Conocimiento http://en.inforapid.org/Wednesday, June 29, 2011
  • 32. Game- Salad Creator Editor de juegos HTML5 interactivos sobre el Canvas. Para iPhone y iPad sin AppStore http://gamesalad.com/productsWednesday, June 29, 2011
  • 33. Impact Motor de juegos HTML5 interactivos sobre el Canvas. Para iPhone y iPad sin AppStore http://impactjs.com/Wednesday, June 29, 2011
  • 34. FaceBook: Proyecto Spartan Juegos en HTML5 para saltarse las limitaciones de iOS http://techcrunch.com/2011/06/15/facebook-project-spartan/Wednesday, June 29, 2011
  • 35. WebGL: Medusa http://aleksandarrodic.com/p/jellyfish/Wednesday, June 29, 2011
  • 36. Google WebGL Globe Visualización en 3d (WebGL) de los volumenes de busquedas por ciudades http://www.html5canvastutorials.com/showcase/google-webgl-globe/Wednesday, June 29, 2011
  • 37. WebGL: Web en 3D http://www.chromeexperiments.com/webglWednesday, June 29, 2011
  • 38. Ejemplo de Mundo virtual en WebGL http://www.chromeexperiments.com/detail/3-dreams-of-black/?f=webgl “3 Dreams of Black” takes you on a journey through three dream worlds constructed through a combination of rich 2D drawings and animations interwoven with interactive 3D sequences. Throughout various points in these dream worlds, you can grab your mouse and guide the protagonist’s point of view through the experience. This music experience also includes a 3D model creator that allows you to create your own relics and contribute to the shared collective dream. “3 Dreams of Black” is written and directed by Chris Milk, and developed with a few folks here at Google.Wednesday, June 29, 2011
  • 39. Gráficos vectoriales con SVG SVG se desarrolló para XML y XHTML HTML5 integra SVG entre marcas <svg> .......... </svg>  Soporte parcial en HTML5 (en vias de desarrollo)  Tutoriales  http://www.w3schools.com/svg/default.asp  http://www.w3.org/TR/SVG/  http://commons.wikimedia.org/wiki/SVG <!DOCTYPE html> <html> <body> <h3>HTML5 Example: SVG</h3> <svg> <circle id="myCircle" x="200" y="400" cx="100" cy="80" r="50" fill="blue" stroke="red" stroke-width="8" /> <text x="60" y="20">My first circle</text> </svg> Blue circle with red stroke </body> </html>Wednesday, June 29, 2011
  • 40. Ejemplos SVG Estos ejemplos se han descargado de Wikimedia  http://commons.wikimedia.org/wiki/SVG Editor SVG:  http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html http://commons.wikimedia.org/wiki/File:Compass.svg http://commons.wikimedia.org/wiki/SVG_examplesWednesday, June 29, 2011
  • 41. Formulas y Símbolos con MathML MathML se desarrolló para XML y XHTML  HTML5 integra MathML entre marcas <math> ......... </math>  Herramientas y ejemplos  http://www.w3.org/TR/MathML/  http://www.mathjax.org/demos/mathml-samples/  http://www.mathmlcentral.com/ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>MathML test</title> </head> <body> <h3>HTML5 <br> Example: <br> MathML</h3> <math> <mrow> <mi>y</mi> <mo>=</mo> <msup> <mi>x</mi> <mn>2</mn> </msup> </mrow> </math> </body> </html>Wednesday, June 29, 2011
  • 42. Ejemplo MathML http://www.mathjax.org/demos/mathml-samples/Wednesday, June 29, 2011
  • 43. Almacenamiento, Protocolos, Off-line y Web WorkersWednesday, June 29, 2011
  • 44. Almacenamiento de datos de cliente HTML5 implementa varios tipos de almacenamiento  Permiten aplicaciones locales muy potentes  Sustituyen a las cookies  Son más seguras y no consumen ancho de banda  Sencillas y eficientes de utilizar desde Javascript  Definición: http://dev.w3.org/html5/webstorage/ Variables de sesión  Los datos solo se guardan durante la sesión Variables locales  los datos se guardan entre sesiones Base de datos  Permiten acceso eficiente a grandes volumenes de datosWednesday, June 29, 2011
  • 45. Ejemplo de aplicación de localStorage ¡Guarda datos efizcazmente en Navegador! Las aplicaciones se pueden ejecutar sin estar conectado a InternetWednesday, June 29, 2011
  • 46. Ejemplo variables locales y de sesion Almacenamiento Web: con objetos Javascript predefinidos  Almacenamiento local, objeto: “localStorage”  Almacenamiento de sesión, objeto: “sessionStorage” // Cada variable es un campo nuevo de “localStorage” o de “sessionStorage” // Se crean dinamicamente cuando se necesitan. Ejemplo <script type="text/javascript"> localStorage.firstname="John"; localStorage.lastname="Smith"; document.write("Name: " + localStorage.firstname + " " + localStorage.lastname); </script> // El campo “pagecount” lleva la cuenta de cuantas veces se ha visitado una página. // El siguiente ejemplo cuenta las veces que se ha visitado una página en una sesión. // Si se cambiase “sessionStorage” por “localStorage” contaría el número total de visitas <script type="text/javascript"> if (sessionStorage.pagecount) // Comprobar si “sessionStorage.pagecount” existe { sessionStorage.pagecount=Number( ++sessionStorage.pagecount) ; } else { sessionStorage.pagecount=1; } // Crear y/o inicializar “sessionStorage.pagecount” document.write("Visits: "+sessionStorage.pagecount+" time(s) this session."); </script>Wednesday, June 29, 2011
  • 47. Ejemplo localStorage <html> Formulario que guarda <head> el nombre en una <script type="text/javascript" src="jquery-1.4.2.js"></script> variable local <title>Local Storage</title> </script>  El valor será </head> recordado en futuros <body> <h1>Ejemplo localStorage</h1> accesos a la página <form method=get action="http://localhost/cgi-bin">  Sin necesidad de Introducir nombre: <br> <input id=inn type=text name=nn size=40> <p> guardarlo en el // “form.nn.value” referencia atributo “value” de campo “nn” servidor // de “form” según jerarquia de objetos DOM de la página <input type=button value="Borrar nombre" onClick="form.nn.value = localStorage.nn=;"> <input type=button value=Guardar onClick="localStorage.nn=form.nn.value;"> <input type=submit value="Enviar formulario" onClick="localStorage.nn=form.nn.value;"> // Inserta atributo “value” con jQuery <script type="text/javascript"> $(function() { $("#inn").val(localStorage.nn); }); </script> </form> </body> </html>Wednesday, June 29, 2011
  • 48. Comunicación entre clientes y servidores HTML5 introduce múltiples formas de comunicar clientes y servidores  XHR y XHR2: XML HTTP Request y Level 2  Con CORS: Cross Origin Resource Sharing  Protocolo básico de AJAX  Web Sockets  Circuitos virtuales bidireccionales entre cliente y servidor  Web Messaging  Mensajes entre ventanas diferentes de una aplicación de cliente  SSE: Server Side Events  Flujos de mensajes de servidor a cliente  Web Workers  Mensajes entre hebras javascript de una aplicación Aplicaciones de cliente mas sencillas y potentes  http://html5doctor.com/methods-of-communication/Wednesday, June 29, 2011
  • 49. WebSockets Protocolo cliente-servidor  Circ. Virtuales full duplex  entre cliente y servidor  norma IETF-W3C Reduce ancho de banda y latencia  Reducción de cabeceras HTTP (~500) y de latencia (~3) Es transparente a la mayoria de firewalls, proxies y caches Otros protocolos se pueden montar sobre Websockets  XMPP, Jabber, Pub/sub (Stomp/AMPQ), juegos, etc.Wednesday, June 29, 2011
  • 50. WebSockets API API Javascript para uso de WebSockets  “WebSocket” es una clase predefinida de la librería Javascript // Se crean invocando el constructor WebSocket (...) especificando el servidor con un // URL específico de WebSockets como parametro // Ejemplos: // ws://www.dit.upm.es establece un WebSocket sobre TCP // wss://www.dit.upm.es establece un WebSocket seguro sobre SSL var myWebSocket = new WebSocket("ws://www.websocket.org"); // Se utilizán eventos Javascript con capturadores asociados (event listeners) para // capturar los eventos de servidor. Ejemplos myWebSocket.onopen = function(eventt) { alert("Connection open ..."); }; myWebSocket.onmessage = function(event) { alert( "Received Message: " + event.data); }; myWebSocket.onclose = function(event) { alert("Connection closed."); }; // Para enviar datos al servidor o cerrar el WebSocket el cliente podrá invocar estos metodos myWebSocket.send("Hello Web Socket!"); myWebSocket.postMessage("Hello Web Socket!"); // equivalente a send("Hello Web Socket!") myWebSocket.close();Wednesday, June 29, 2011
  • 51. Web Messaging Envío de mensajes  Entre contextos javascript como  Ventanas, pestañas, iframes, .. Utiliza “PostMessage API”  Similar a Websockets, SSE, ... La seguridad se basa en  El concepto de origen:  esquema + host + puerto *From Peter Lubers, Kaazing: HTML5 The 30,000’ View, http://www.slideshare.net/peterlubbers/html5-4378635Wednesday, June 29, 2011
  • 52. XMLHttpRequest Level 2 (XHR2) XHR es la API que ha hecho AJAX posible  XHR2 mejora XHR con Eventos de progreso y cross-origin Cross-origin: cliente accede a varios servidores de forma segura  El servidor de base tiene que autorizarlo  Se basa en CORS (Cross Origin Resource sharing) *From Peter Lubers, Kaazing: HTML5 The 30,000’ View, http://www.slideshare.net/peterlubbers/html5-4378635Wednesday, June 29, 2011
  • 53. Web & Offline workers ¡Creación de servicios más eficaces que funcionan con y sin conexión a Internet! Web Workers  Los visores ejecutan hebras diferentes en  Diferentes pestañas  Diferentes hebras de Javascript  Saca provecho de CPUs multi-core  Evita que browsers se bloqueen Offline workers  HTML5 permite detectar estado (online/offline)  Definiciones de caches y manifiestos  Detalles sobre que ficheros cachear y en que situaciones  Aplicaciones Web podrán trabajar sobre la cache  Y sincronizar con el servidor cuando se conectenWednesday, June 29, 2011
  • 54. Cache Manifest ¡Creación de servicios más eficaces que funcionan con y sin conexión a Internet! Web Workers  Los visores ejecutan hebras diferentes en  Diferentes pestañas  Diferentes hebras de Javascript  Saca provecho de CPUs multi-core  Evita que browsers se bloqueen Offline workers  HTML5 permite detectar estado (online/offline)  Definiciones de caches y manifiestos  Detalles sobre que ficheros cachear y en que situaciones  Aplicaciones Web podrán trabajar sobre la cache  Y sincronizar con el servidor cuando se conectenWednesday, June 29, 2011
  • 55. Offline Web Applications Offline Web Apllications se basa en: <!DOCTYPE html> <html manifest="prueba.manifest"> ........... ........... Cache Manifest </html>  Define recursos ========== fichero prueba.manifest ========= CACHE MANIFEST necesarios para que # Datos de la sección CACHE por defecto una aplicación Web index.html images/logo.png pueda trabajar sin # Sección NETWORK para recursos que requieren conexión a Internet # forzosamente conexión NETWORK: http://api.twitter.com # Sección FALLBACK para saber que hacer si no hay conexión Application Cache API FALLBACK: images/maps unavailable.png  Objeto Javascript que # Otra sección CACHE, las URLs pueden ser relativas o absolutas permite saber el CACHE: http://www.prueba.com/images/image01.png estado de la conexión http://www.prueba.com/images/image02.png http://www.prueba.com/images/image03.png a Internet y mas ... Tutoriales: http://www.inmensia.com/blog/20110118/html5_offline_web_applications_applicationcache.html http://www.inmensia.com/blog/20110115/html5_offline_web_applications_manifest.htmlWednesday, June 29, 2011
  • 56. Geolocalización y SensoresWednesday, June 29, 2011
  • 57. Geolocalización y Sensores HTML5 incluye geolocalización  Utiliza: GPS, IP, antenas GSM o 3G, ..... El objeto Javascript “navigator.geolocation”  Da acceso tambien a sensores  Brujula, acelerometro, .. y Web of ThingsWednesday, June 29, 2011
  • 58. Geolocalización HTML5 incluye geolocalización  Muy importante en móviles, pero también en PCS  Soportado ya en Firefox 3.5, Safari 4, Chrome, Opera,.....  Busca por GPS, IP, triangulación y antenas GSM o 3G, ..... El objeto predefinido “navigator.geolocation”  da acceso a la posicion utilizando metodo:  “getCurrentPosition(successFunction, errorFunction)  Permite conocer  Latitud y longitud en formato decimal  Altitud y precisión de la altitud  Dirección y velocidad Norma y tutoriales  http://dev.w3.org/geo/api/spec-source.html  http://dev.opera.com/articles/view/how-to-use-the-w3c-geolocation-api/  http://code.google.com/apis/maps/index.htmlWednesday, June 29, 2011
  • 59. Ejemplo Geolocation <!DOCTYPE html> <html> <head> <title>Example of W3C Geolocation API</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript"> if (navigator.geolocation) { //Check if browser supports W3C Geolocation API navigator.geolocation.getCurrentPosition(successFunction, errorFunction); } else { alert(Geolocation is not supported in this browser.); } function successFunction(position) { var lat = position.coords.latitude; var long = position.coords.longitude; alert(Your latitude is :+lat+ and longitude is +long); } function errorFunction(position) { alert(Error!); } </script> </head> <body> <p>If your browser supports Geolocation, you should get an alert with your coordinates.</p> <p>Read the <a href="http://dev.opera.com">Dev.Opera</a> article <a href="http://dev.opera.com/articles/view/how-to-use-the-w3c-geolocation-api/">"How to use the W3C Geolocation API"</a>. </body> </html>Wednesday, June 29, 2011
  • 60. <!DOCTYPE html> <html> <head> <title>W3C Geolocation API Example</title> Ejemplo Geolocation II <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> html, body { width: 100%; height: 100%; } #map_canvas { width: 100%; height: 85%; } </style> <script src="http://maps.google.com/maps/api/js?sensor=false"> // Carga la librería de Google Maps // Doc de Google Maps API: http://code.google.com/apis/maps/documentation/javascript/ </script> <script type="text/javascript"> // Determine support for Geolocation if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(displayPosition, errorFunction); } else { alert(Geolocation is not supported in this browser.); } // Success callback function function displayPosition(pos) { .... en la transparencia siguiente .... } // Error callback function function errorFunction(pos) { alert(Error!); } </script> </head> <body> <div id="map_canvas"></div> <div id="locationinfo"></div> </body> </html>Wednesday, June 29, 2011
  • 61. function displayPosition() // Success callback function function displayPosition(pos) { var mylat = pos.coords.latitude; var mylong = pos.coords.longitude; var thediv = document.getElementById(locationinfo); thediv.innerHTML = <p>Your longitude is : + mylong + and your latitide is + mylat + </p>; // Store my position (“y=mylat”, “x=mylong”) in variable “lating” var latlng = new google.maps.LatLng(mylat, mylong); // Define my Google Maps options in variable “myOptions” var myOptions = { zoom: 15, // Define scale center: latlng, // Define map center mapTypeId: google.maps.MapTypeId.ROADMAP // tipo Roadmad, Satellite, Terrain, Hybrid }; // Load Google Map according to “myOptions” in Canvas identified by “map_canvas” var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // Add marker in Google Maps “map” in position defined by “lating” var marker = new google.maps.Marker({ position: latlng, map: map, title:"You are here" }); }Wednesday, June 29, 2011
  • 62. HTML5 Peeks, Pokes and Pointers III Extraido de: Dive into HTML5 (http://diveintohtml5.org), Mark Pilgrim, O’Reilly 2010Wednesday, June 29, 2011
  • 63. Audio y Video en HTML5Wednesday, June 29, 2011
  • 64. Audio y Video en HTML5 Audio y Video en Internet  Audio y video están hoy en muchas páginas Web  HTML5 posee marcas dedicadas  Simplifican la inclusión de audio y video // Marca de audio y atributo de fuente <audio src="miAudio.mp3"> </audio> // Marca de video y atributos de fuente, // tamaño, controles, preload y autoplay <video src="miVideo.webm" width="320" height="240" controls preload autoplay> </video>Wednesday, June 29, 2011
  • 65. Video: Contendientes Contenedor OGG  Video: Theora (VP7), Audio: Vorbis  Calidad menor Contenedor MP4  Video: H264, Audio: ACC  Existen Patentes Contenedor WebM  Video: VP8, Audio: VorbisWednesday, June 29, 2011
  • 66. Codecs en liza Codecs de Audio  AAC: Advanced Audio Codec  Utilizado por Apple en iTunes, protegido por licencias  MP3  MPEG-1 Audio Layer 3, desarrollado por grupo MPEG y protegido con patentes  Vorbis (OGG)  libre de patentes Codecs de video  H.264:  desarrollado por grupo MPEG, protegido con patentes  Theora (conocido como VP3)  Desarrollado por On2 para Xiph.org, libre  VP8  Desarrollado por On2, comprado por Google, libreWednesday, June 29, 2011
  • 67. Proyecto WebM (Video on the Web) http://www.webmproject.org/ Mission:  “Dedicated to developing a high-quality, open video format for the web that is freely available to everyone” The WebM launch is supported by  Mozilla, Opera, Adobe, Google and more than forty other publishers, software and hardware vendors  Promovido por Google y soportado por Adobe Basado en  Video: VP8 (de Google)  Para competir con H264  Audio: Ogg Vorbis  Container: Matroska Amplio soporte con librerias con licencia BSD  Librerias: FFmpeg, MPlayer, DirectShow, GStreamer, SDKs, ........  Navegadores: Mozilla, Opera, Google Chrome, IExplorer, ...  Otros: VLC, Moovida Core, ...Wednesday, June 29, 2011
  • 68. Proyecto WebM (Video on the Web) http://www.webmproject.org/Wednesday, June 29, 2011
  • 69. Youtube HTML5 video trial http://www.youtube.com/html5Wednesday, June 29, 2011
  • 70. WOWZA Media Systems http://www.wowzamedia.com/ Servidores streaming para  H264  Flash  iOS (iPhone, ....)  Apple QuickTime  Android  Set-top boxes  HTML5 http://www.wowzamedia.com/_demo/webm/html5.htmlWednesday, June 29, 2011
  • 71. Audio/Video Players: Sublime Video http://sublimevideo.net/demoWednesday, June 29, 2011
  • 72. Audio/Video Players: Videojs http://videojs.com/Wednesday, June 29, 2011
  • 73. HTML5 Peeks, Pokes and Pointers II Extraido de: Dive into HTML5 (http://diveintohtml5.org), Mark Pilgrim, O’Reilly 2010Wednesday, June 29, 2011
  • 74. Uniendo Video y Canvas: Realidades AumentadaWednesday, June 29, 2011
  • 75. Manipulando Video con Canvas http://www.craftymind.com/factory/html5video/CanvasVideo.html http://www.craftymind.com/factory/html5video/CanvasVideo3D.htmlWednesday, June 29, 2011
  • 76. Manipulando Video con Canvas Video simetrico generado en tiempo real utilizando Canvas y programa en Javascript http://html5demos.com/video-canvasWednesday, June 29, 2011
  • 77. Video y Canvas en HTML5 http://media.chikuyonok.ru/ambilight/Wednesday, June 29, 2011
  • 78. Videoconferencia y Tiempo Real: Web RTCWednesday, June 29, 2011
  • 79. Web RTC Web Real Time Communications (API)  Grupos de trabajo en  WHATWG  http://www.whatwg.org/specs/web-apps/current-work/webrtc.html  W3C  Definicion APIs (Febrero 2013)  http://www.w3.org/2011/04/webrtc-charter.html  IETF  http://datatracker.ietf.org/wg/rtcweb/charter/  Se están definiendo varias APIs  Device API, Stream API, Peer Connection API, .... Web RTC esta apoyado por  Google, Opera, Mozilla, Ericsson, Nokia, Microsoft, ...  Apple es el menos entusiasta (¿Facetime?)Wednesday, June 29, 2011
  • 80. Objetivos de Web RTC (W3C) API para explorar las capacidades del dispositivo  por ejemplo, cámara, micrófono, altavoces  en la actualidad en el ámbito del Device APIs and Policy WG API para capturar de los dispositivos locales (cámara, micrófono)  en la actualidad en el ámbito del Device APIs and Policy WG API para la codificación y el procesamiento esos flujos de medios API para el establecimiento de conexiones punto a punto  incluyendo firewall / NAT API para decodificar y procesar los streams en el cliente  incluyendo cancelación de eco, sincronización y otras funciones La entrega al usuario de los flujos de video y audio a través de pantallas locales y dispositivos de salida de audio  Actualmente parcialmente cubierta con HTML5Wednesday, June 29, 2011
  • 81. Device API -> Acceso a agenda de contactos -> Acceso a interfaces de red -> Acceso a estado bateria -> Acceso a calendario -> SMS, MMS, email, ... -> Caracteristicas captura audio/video -> Permisos de seguridad -> API de acceso a audio, video, ... -> Caracteristicas del sistemaWednesday, June 29, 2011
  • 82. Ericsson Labs esta validando y contribuyendo a la arquitectura  Web RTC de WhatWG Ha modificado Webkit en Linux para  Realizar múltiples demos de validación de Web RTC Experimentos publicados  https://labs.ericsson.com/developer-community/blog/beyond-html5-peer-peer-conversational-video  https://labs.ericsson.com/developer-community/blog/beyond-html5-experiment-real-time-communication- browserWednesday, June 29, 2011
  • 83. Wednesday, June 29, 2011
  • 84. Wednesday, June 29, 2011
  • 85. PeerConnections:Adaptación Webkit de Ericsson LabsWednesday, June 29, 2011
  • 86. <script> var serverConfig = ...; // provided by server to handle, e.g., TURN Ejemplo var local = new ConnectionPeer(serverConfig);   window.onload = function() {   PeerConnection local.onconnect = function() { // executed when were connected to the other peer: // from now on, we can start adding streams }   local.onstream = function() { // executed when the other peer adds a stream, e.g., video or voice var remoteView = document.getElementById("remoteView"); remoteView.src = local.remoteStreams[0].url; }   var videoDevice = document.getElementById("videoDevice"); videoDevice.onchange = function() { // executed when the user selects a video source in the <device> element var localStream = videoDevice.data; var selfView = document.getElementById("selfView");   // display the selected video source (self view) selfView.src = localStream.url;   // ... and show it to the remote peer by adding it to the connection local.addStream(localStream); } }   // listen to an EventSource for invitation events var invitationEvents = new EventSource(...); invitationEvents.addEventListener("message", function(event) { // request the local connectivity configuration (step 1 above) local.getLocalConfiguration(function (peer, configuration) { // include the local configuration in an invitation response // to the server (step 2 above) using some "out-of-band" mechanism, // such as an XHR } }); </script>;   <video width="320" height="240" id="selfView" autoplay="true"></video> <video width="320" height="240" id="remoteView" autoplay="true"></video>   <device id="videoDevice" type="media">Wednesday, June 29, 2011
  • 87. Web RTC: Proyecto de Software Libre para soportar conexiones P2P en navegadorApoyado por:- Google- Mozilla- OperaWednesday, June 29, 2011
  • 88. Arquitectura Web RTCWednesday, June 29, 2011
  • 89. AudioEngine iSAC  Wideband audio codec for VoIP and streaming audio.  16 kHz or 32 kHz sampling, adaptive bit rate: 12 to 52 kbps iLBC  Narrowband codec for VoIP and streaming (RFCs 3951, 3952)  8 kHz sampling, 5.2 kbps (20ms frames), 13.33 kbps (30ms fr.) NetEQ for Voice  Dynamic jitter buffer and error concealment algorithm used for concealing the negative effects of network jitter and packet loss.  Keeps latency low, while maintaining the highest voice quality. Acoustic Echo Canceler (AEC)  Software signal processing component, for real time removal of acoustic echo of voice feeding into the active microphone Noise Reduction (NR)  Software signal processing component removing background noise usually associated with VoIP, such as Hiss, fan noise, etc.Wednesday, June 29, 2011
  • 90. VideoEngine VideoEngine is a framework video media chain for video, from camera to the network, and from network to the screen. VP8  Video codec from WebM Project.  Well suited for RTC as it is designed for low latency Video Jitter Buffer  Dynamic Jitter Buffer for video.  Conceals effects of jitter and packet loss on overall video quality Image enhancements  For example, removes video noise from the image capture by the webcamWednesday, June 29, 2011
  • 91. Protocolos PeerConnection El ejemplo intercambia información a traves de Servidor Web (chat)  Que luego es utilizada en ICE/TURN/STUN  Para establecer la conexión a través de NAT ICE  Interactive Connectivity Establishment. RFC 5245  Establishing connectivity over NATs with STUN/TURN servers TURN  Traversal Using Relays around NAT (TURN), RFC 5766  Para NATs simetricos, con servidor TURN (relay) STUN  Session Traversal Utilities for NAT (STUN), IETF 5389  No funciona con nat simetricos La conexion se realiza a través de UDP/RTPWednesday, June 29, 2011
  • 92. CSS3Wednesday, June 29, 2011
  • 93. CSS3: principales novedades Nuevos selectores Webfonts Enmarcado de texto (wrapping) Columnas Control de opacidad y transparencia de objetos Control de tinte, saturación, luminacia de colores Esquinas redondeadas Control de sombras, gradientes y fondos Transiciones, transformaciones y animaciones Demos de efectos de CSS3: http://slides.html5rocks.com/#css3-titleWednesday, June 29, 2011
  • 94. Componentes de las Aplicaciones Web HTML5 HTML5 (lenguaje de marcado) CSS3 Javascript Imagenes (Canvas, SVG, Video, ....) Cache Manifest (para cache off-line)Wednesday, June 29, 2011
  • 95. ConclusionesWednesday, June 29, 2011
  • 96. Conclusiones y reflexiones HTML5: entorno normalizado de creación de aplicaciones fijo+movil  Crea nuevo ecosistema con instalación-cero en cliente  “Open gardens” frente a “walled gardens”  Impactara en todos los servicios, incluyendo AppStores, Incorporación de HTML5 a navegadores es muy rapida  Implementaciones que interoperen deben preceder a la norma HTML5: pilar fundamental de las aplicaciones en la nube  Aplicación HTML5 de FT (Financial Times) es ilustrativo  Apple redefiniendo precios de contenidos en apps de AppStore  ¿AppStores o acceso directo a aplicaciones HTML5? HTML5 se esta configurando como un sistema operativo  Aplicaciones configuracion-cero descargadas del servidor  ¿Sustituira a los S.O. actuales (Chrome Netbooks)?Wednesday, June 29, 2011
  • 97. Muchas GraciasWednesday, June 29, 2011