Curso de 4 horas con con ejemplos. Bastante completo, incluye canvas, video, almacenamiento, protocols, geolocation, WebRTC, .. y muchos punteros a sitios vistosos
1. Curso HTML5
Juan Quemada
Distrito C
Madrid, 27 de Junio 2011
Wednesday, 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!
2
Wednesday, 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
3
Wednesday, 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
4
Wednesday, 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 video
Wednesday, June 29, 2011
6. Plataforma Web
está acelerando
From Brad Neuberg, Google, http://www.slideshare.net/jobfan/google-html5-tutorial
6
Wednesday, 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 Recommendation
Wednesday, 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 a
HTML5 y CSS3 de
forma segura.
modernizr puede
complementarse
con librerias
javascript de
soporte a
caracteristicas
HTML5 y CSS3 en
navegadores
antiguos:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Wednesday, June 29, 2011
14. *From Peter Lubers, Kaazing: HTML5 The 30,000’ View, http://www.slideshare.net/peterlubbers/html5-4378635
Wednesday, June 29, 2011
15. *From Peter Lubers, Kaazing: HTML5 The 30,000’ View, http://www.slideshare.net/peterlubbers/html5-4378635
Wednesday, 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-4378635
Wednesday, 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 contenido
Wednesday, 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 2010
Wednesday, 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
atributos
Wednesday, June 29, 2011
23. HTML5 Peeks,
Pokes and Pointers I
Extraido de: Dive into HTML5
(http://diveintohtml5.org),
Mark Pilgrim, O’Reilly 2010
Wednesday, 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 dispositivo
Wednesday, 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.html
Wednesday, 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 2010
Wednesday, 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=es
Wednesday, 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/products
Wednesday, 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
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/webgl
Wednesday, 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_examples
Wednesday, 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
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 datos
Wednesday, June 29, 2011
45. Ejemplo de aplicación de localStorage
¡Guarda datos efizcazmente en
Navegador!
Las aplicaciones se pueden
ejecutar sin estar conectado a Internet
Wednesday, 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-4378635
Wednesday, 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-4378635
Wednesday, 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 conecten
Wednesday, 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 conecten
Wednesday, 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.html
Wednesday, 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 Things
Wednesday, 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.html
Wednesday, 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 2010
Wednesday, 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
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, libre
Wednesday, 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/html5
Wednesday, 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.html
Wednesday, June 29, 2011
73. HTML5 Peeks, Pokes and Pointers II
Extraido de: Dive into HTML5 (http://diveintohtml5.org), Mark Pilgrim, O’Reilly 2010
Wednesday, June 29, 2011
74. Uniendo Video y Canvas:
Realidades Aumentada
Wednesday, June 29, 2011
75. Manipulando Video con Canvas
http://www.craftymind.com/factory/html5video/CanvasVideo.html
http://www.craftymind.com/factory/html5video/CanvasVideo3D.html
Wednesday, June 29, 2011
76. Manipulando Video con Canvas
Video simetrico generado en tiempo real utilizando Canvas y
programa en Javascript
http://html5demos.com/video-canvas
Wednesday, June 29, 2011
77. Video y Canvas en HTML5
http://media.chikuyonok.ru/ambilight/
Wednesday, 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 HTML5
Wednesday, 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 sistema
Wednesday, 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-
browser
Wednesday, 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 we're 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 navegador
Apoyado por:
- Google
- Mozilla
- Opera
Wednesday, 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
webcam
Wednesday, 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/RTP
Wednesday, 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-title
Wednesday, 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
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