0
Curso HTML5        Juan Quemada        Distrito C        Madrid, 27 de Junio 2011Wednesday, June 29, 2011
Los componentes del primer Web               URI (URL)                   Dirección en la red de un documento o recurso   ...
Evolución: Aplicaciones Web             Aplicaciones de servidor                 El Web permite acceso remoto a aplicacio...
Plataforma HTML (HTML5)              Conjunto de normas                 para diseñar aplicaciones avanzadas de cliente   ...
Normalización: HTML, XML y XHTML             1999: HTML deja de actualizarse por W3C              W3C promueve XHTML (red...
Plataforma Web         está acelerando                From Brad Neuberg, Google, http://www.slideshare.net/jobfan/google-h...
HTML5          2004: Apple, Mozilla y Opera crean WHATWG            Para definir nueva versión de la plataforma HTML     ...
Transición      a HTML5       Transición a HTML5 ha      comenzado ya        Con fuerte apoyo de         Google, Apple, O...
Soporte a HTML5 en los          navegadores actuales                 Esta avanzando muy rapiadmente                 En tod...
Plataforma HTML5: novedades               Paginas Web estructuradas y formularios enriquecidos               Gráficos vect...
Test de HTML5 de Chrome 12 en http://html5test.com/ (el mejor soportado)Wednesday, June 29, 2011
http://www.modernizr.com/    modernizr  Libreria Javascript Detecta soporte aHTML5 y CSS3 deforma segura.modernizr puedeco...
Lenguaje de Marcado HTML5Wednesday, June 29, 2011
*From Peter Lubers, Kaazing: HTML5 The 30,000’ View, http://www.slideshare.net/peterlubbers/html5-4378635Wednesday, June 2...
*From Peter Lubers, Kaazing: HTML5 The 30,000’ View, http://www.slideshare.net/peterlubbers/html5-4378635Wednesday, June 2...
Listado de marcas de HTML5 incluyendo las nuevas y las deprecadas:                por Antonio Lupetti http://woorkup.com/w...
Presentación página HTML5 con CSS3        *From Peter Lubers, Kaazing: HTML5 The 30,000’ View, http://www.slideshare.net/p...
Presentación página HTML5 con CSS3        *From Bruce Lawson: HTML5 Doctor, http://html5doctor.com/designing-a-blog-with-h...
Anatomia de una página HTML5            Nuevas marcas para definir la estructura de una página            <header>: cabece...
Anatomía página HTML5                                                   En Navegador HTML 4.01    <!DOCTYPE html>      <ht...
HTML5 Peeks,      Pokes and Pointers I      Extraido de: Dive into HTML5      (http://diveintohtml5.org),      Mark Pilgri...
Formularios enriquecidos           Nuevos tipos de entradas             Validación de entradas             Fechas, calen...
HTML5 Peeks,     Pokes and Pointers I     Extraido de: Dive into HTML5     (http://diveintohtml5.org),     Mark Pilgrim, O...
GráficosWednesday, June 29, 2011
Gráficos y Símbolos en HTML5             Mapas de bits con CANVAS              Mucho potencial: programado en Javascript ...
Mapas de bits con CANVAS              CANVAS define un mapa de bits               Se define en HTML con la marca <canvas>...
Ejemplo de Canvas     <html>     <head>      <script type="application/javascript">       function draw() {        var can...
HTML5 Peeks, Pokes and Pointers IV         Extraido de: Dive into HTML5 (http://diveintohtml5.org), Mark Pilgrim, O’Reilly...
HTML5-         Canvas         Tutorials         Magnífica         fuente de         tutoriales y         ejemplos sobre   ...
Chrome            Web Store            Tienda de            aplicaciones            Web de Google            para ejecutar...
InfoRapid: Portal de Conocimiento   http://en.inforapid.org/Wednesday, June 29, 2011
Game-  Salad  Creator  Editor de  juegos  HTML5  interactivos  sobre el  Canvas.  Para iPhone  y iPad sin  AppStore      h...
Impact     Motor de     juegos     HTML5     interactivos     sobre el     Canvas.     Para iPhone y     iPad sin     AppS...
FaceBook:        Proyecto        Spartan        Juegos en HTML5        para saltarse las        limitaciones de iOS       ...
WebGL: Medusa http://aleksandarrodic.com/p/jellyfish/Wednesday, June 29, 2011
Google         WebGL         Globe         Visualización         en 3d (WebGL)         de los         volumenes de        ...
WebGL: Web en 3D    http://www.chromeexperiments.com/webglWednesday, June 29, 2011
Ejemplo de Mundo virtual en WebGL                 http://www.chromeexperiments.com/detail/3-dreams-of-black/?f=webgl “3 Dr...
Gráficos vectoriales con SVG             SVG se desarrolló para XML y XHTML             HTML5 integra SVG entre marcas <sv...
Ejemplos SVG           Estos ejemplos se han descargado de Wikimedia                http://commons.wikimedia.org/wiki/SVG...
Formulas y Símbolos con MathML             MathML se desarrolló para XML y XHTML              HTML5 integra MathML entre ...
Ejemplo  MathML  http://www.mathjax.org/demos/mathml-samples/Wednesday, June 29, 2011
Almacenamiento, Protocolos,                 Off-line y Web WorkersWednesday, June 29, 2011
Almacenamiento de datos de cliente              HTML5 implementa varios tipos de almacenamiento               Permiten ap...
Ejemplo de aplicación de localStorage                               ¡Guarda datos efizcazmente en                         ...
Ejemplo variables locales y de sesion                Almacenamiento Web: con objetos Javascript predefinidos              ...
Ejemplo localStorage    <html>                                                                      Formulario que guarda ...
Comunicación entre clientes y servidores            HTML5 introduce múltiples formas de comunicar clientes y servidores   ...
WebSockets     Protocolo cliente-servidor       Circ. Virtuales full duplex          entre cliente y servidor       nor...
WebSockets API                API Javascript para uso de WebSockets                 “WebSocket” es una clase predefinida ...
Web Messaging           Envío de mensajes            Entre contextos javascript como               Ventanas, pestañas, i...
XMLHttpRequest Level 2 (XHR2)                 XHR es la API que ha hecho AJAX posible                  XHR2 mejora XHR co...
Web & Offline workers   ¡Creación de servicios más eficaces que funcionan             con y sin conexión a Internet!      ...
Cache Manifest   ¡Creación de servicios más eficaces que funcionan             con y sin conexión a Internet!             ...
Offline Web Applications      Offline Web Apllications      se basa en:                                 <!DOCTYPE html>   ...
Geolocalización y SensoresWednesday, June 29, 2011
Geolocalización y Sensores        HTML5 incluye geolocalización         Utiliza: GPS, IP, antenas GSM o 3G, .....        ...
Geolocalización                HTML5 incluye geolocalización                 Muy importante en móviles, pero también en P...
Ejemplo               Geolocation   <!DOCTYPE html>   <html>    <head>      <title>Example of W3C Geolocation API</title> ...
<!DOCTYPE html>    <html>    <head>    <title>W3C Geolocation API Example</title>                                         ...
function   displayPosition()     // Success callback function     function displayPosition(pos) {       var mylat = pos.co...
HTML5 Peeks, Pokes and Pointers III         Extraido de: Dive into HTML5 (http://diveintohtml5.org), Mark Pilgrim, O’Reill...
Audio y Video en HTML5Wednesday, June 29, 2011
Audio y Video en HTML5              Audio y Video en Internet               Audio y video están hoy en muchas páginas Web...
Video: Contendientes           Contenedor OGG            Video: Theora (VP7), Audio: Vorbis               Calidad menor ...
Codecs en liza            Codecs de Audio             AAC: Advanced Audio Codec                Utilizado por Apple en iT...
Proyecto WebM (Video on the Web)             http://www.webmproject.org/           Mission:             “Dedicated to dev...
Proyecto WebM (Video on the Web)             http://www.webmproject.org/Wednesday, June 29, 2011
Youtube HTML5 video trial                             http://www.youtube.com/html5Wednesday, June 29, 2011
WOWZA          Media Systems   http://www.wowzamedia.com/         Servidores streaming         para           H264       ...
Audio/Video Players: Sublime Video                           http://sublimevideo.net/demoWednesday, June 29, 2011
Audio/Video Players: Videojs                                  http://videojs.com/Wednesday, June 29, 2011
HTML5 Peeks, Pokes and Pointers II         Extraido de: Dive into HTML5 (http://diveintohtml5.org), Mark Pilgrim, O’Reilly...
Uniendo Video y Canvas:                 Realidades AumentadaWednesday, June 29, 2011
Manipulando Video con Canvas                    http://www.craftymind.com/factory/html5video/CanvasVideo.html             ...
Manipulando Video con Canvas          Video simetrico generado en tiempo real utilizando Canvas y                         ...
Video y Canvas en HTML5                           http://media.chikuyonok.ru/ambilight/Wednesday, June 29, 2011
Videoconferencia y Tiempo Real:            Web RTCWednesday, June 29, 2011
Web RTC             Web Real Time Communications (API)              Grupos de trabajo en                 WHATWG         ...
Objetivos de Web RTC (W3C)             API para explorar las capacidades del dispositivo              por ejemplo, cámara...
Device API                             -> Acceso a agenda de contactos                                   -> Acceso a inter...
Ericsson Labs esta validando y contribuyendo a la arquitectura            Web RTC de WhatWG           Ha modificado Webki...
Wednesday, June 29, 2011
Wednesday, June 29, 2011
PeerConnections:Adaptación Webkit de Ericsson LabsWednesday, June 29, 2011
<script>       var serverConfig = ...; // provided by server to handle, e.g., TURN                                        ...
Web RTC:    Proyecto de Software Libre   para soportar conexiones P2P  en navegadorApoyado por:- Google- Mozilla- OperaWed...
Arquitectura Web RTCWednesday, June 29, 2011
AudioEngine              iSAC                Wideband audio codec for VoIP and streaming audio.                   16 kHz...
VideoEngine              VideoEngine is a framework video media chain for video, from              camera to the network, ...
Protocolos PeerConnection                El ejemplo intercambia información a traves de Servidor Web (chat)               ...
CSS3Wednesday, June 29, 2011
CSS3: principales novedades               Nuevos selectores               Webfonts               Enmarcado de texto (wrapp...
Componentes de las Aplicaciones           Web HTML5                     HTML5 (lenguaje de marcado)                     CS...
ConclusionesWednesday, June 29, 2011
Conclusiones y reflexiones             HTML5: entorno normalizado de creación de aplicaciones fijo+movil              Cre...
Muchas GraciasWednesday, June 29, 2011
Upcoming SlideShare
Loading in...5
×

Html5 telefonica-curso

9,642

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,642
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
173
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Html5 telefonica-curso"

  1. 1. Curso HTML5 Juan Quemada Distrito C Madrid, 27 de Junio 2011Wednesday, June 29, 2011
  2. 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. 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. 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. 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. 6. Plataforma Web está acelerando From Brad Neuberg, Google, http://www.slideshare.net/jobfan/google-html5-tutorial 6Wednesday, June 29, 2011
  7. 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. 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. 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. 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. 11. Test de HTML5 de Chrome 12 en http://html5test.com/ (el mejor soportado)Wednesday, June 29, 2011
  12. 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. 13. Lenguaje de Marcado HTML5Wednesday, June 29, 2011
  14. 14. *From Peter Lubers, Kaazing: HTML5 The 30,000’ View, http://www.slideshare.net/peterlubbers/html5-4378635Wednesday, June 29, 2011
  15. 15. *From Peter Lubers, Kaazing: HTML5 The 30,000’ View, http://www.slideshare.net/peterlubbers/html5-4378635Wednesday, June 29, 2011
  16. 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. 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. 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. 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. 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. 21. HTML5 Peeks, Pokes and Pointers I Extraido de: Dive into HTML5 (http://diveintohtml5.org), Mark Pilgrim, O’Reilly 2010Wednesday, June 29, 2011
  22. 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. 23. HTML5 Peeks, Pokes and Pointers I Extraido de: Dive into HTML5 (http://diveintohtml5.org), Mark Pilgrim, O’Reilly 2010Wednesday, June 29, 2011
  24. 24. GráficosWednesday, June 29, 2011
  25. 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. 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. 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. 28. HTML5 Peeks, Pokes and Pointers IV Extraido de: Dive into HTML5 (http://diveintohtml5.org), Mark Pilgrim, O’Reilly 2010Wednesday, June 29, 2011
  29. 29. HTML5- Canvas Tutorials Magnífica fuente de tutoriales y ejemplos sobre el Canvas http://www.html5canvastutorials.com/Wednesday, June 29, 2011
  30. 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. 31. InfoRapid: Portal de Conocimiento http://en.inforapid.org/Wednesday, June 29, 2011
  32. 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. 33. Impact Motor de juegos HTML5 interactivos sobre el Canvas. Para iPhone y iPad sin AppStore http://impactjs.com/Wednesday, June 29, 2011
  34. 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. 35. WebGL: Medusa http://aleksandarrodic.com/p/jellyfish/Wednesday, June 29, 2011
  36. 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. 37. WebGL: Web en 3D http://www.chromeexperiments.com/webglWednesday, June 29, 2011
  38. 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. 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. 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. 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. 42. Ejemplo MathML http://www.mathjax.org/demos/mathml-samples/Wednesday, June 29, 2011
  43. 43. Almacenamiento, Protocolos, Off-line y Web WorkersWednesday, June 29, 2011
  44. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 56. Geolocalización y SensoresWednesday, June 29, 2011
  57. 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. 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. 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. 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. 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. 62. HTML5 Peeks, Pokes and Pointers III Extraido de: Dive into HTML5 (http://diveintohtml5.org), Mark Pilgrim, O’Reilly 2010Wednesday, June 29, 2011
  63. 63. Audio y Video en HTML5Wednesday, June 29, 2011
  64. 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. 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. 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. 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. 68. Proyecto WebM (Video on the Web) http://www.webmproject.org/Wednesday, June 29, 2011
  69. 69. Youtube HTML5 video trial http://www.youtube.com/html5Wednesday, June 29, 2011
  70. 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. 71. Audio/Video Players: Sublime Video http://sublimevideo.net/demoWednesday, June 29, 2011
  72. 72. Audio/Video Players: Videojs http://videojs.com/Wednesday, June 29, 2011
  73. 73. HTML5 Peeks, Pokes and Pointers II Extraido de: Dive into HTML5 (http://diveintohtml5.org), Mark Pilgrim, O’Reilly 2010Wednesday, June 29, 2011
  74. 74. Uniendo Video y Canvas: Realidades AumentadaWednesday, June 29, 2011
  75. 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. 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. 77. Video y Canvas en HTML5 http://media.chikuyonok.ru/ambilight/Wednesday, June 29, 2011
  78. 78. Videoconferencia y Tiempo Real: Web RTCWednesday, June 29, 2011
  79. 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. 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. 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. 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. 83. Wednesday, June 29, 2011
  84. 84. Wednesday, June 29, 2011
  85. 85. PeerConnections:Adaptación Webkit de Ericsson LabsWednesday, June 29, 2011
  86. 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. 87. Web RTC: Proyecto de Software Libre para soportar conexiones P2P en navegadorApoyado por:- Google- Mozilla- OperaWednesday, June 29, 2011
  88. 88. Arquitectura Web RTCWednesday, June 29, 2011
  89. 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. 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. 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. 92. CSS3Wednesday, June 29, 2011
  93. 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. 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. 95. ConclusionesWednesday, June 29, 2011
  96. 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. 97. Muchas GraciasWednesday, June 29, 2011
  1. A particular slide catching your eye?

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

×