Html5 telefonica-curso

Curso HTML5

Juan QuemadaDistrito CMadrid, 27 de Junio 2011

Wednesday, June 29, 2011

Los componentes del primer WebURI (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


http://www.upm.es/centros/etsit/personal.html

http://www.upm.es/centros/etsit/personal.html

Evolución: Aplicaciones WebAplicaciones de servidor El Web permite acceso remoto a aplicaciones interactivas

Consulta y actualización de bases de datos

Aplicaciones de cliente 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

HTTP (URL)

HTML, XML, ..


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


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ámicascon gráficos bonitospara video

Normalización: HTML, XML y XHTML


Plataforma Web está acelerando

6From Brad Neuberg, Google, http://www.slideshare.net/jobfan/google-html5-tutorial


http://www.slideshare.net/jobfan/google-html5-tutorial

http://www.slideshare.net/jobfan/google-html5-tutorial

2004: Apple, Mozilla y Opera crean WHATWG Para definir nueva versión de la plataforma HTML

Denominada HTML5Capaz 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

HTML5


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://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

http://html5test.com/






Esta avanzando muy rapiadmenteEn todos los navegadores con implantación significativaLa norma definitiva, esta prevista para 2022 Norma requiere 2 implementaciones previas completas

Mucho HTML5 se puede usar ya

Soporte a HTML5 en los navegadores actuales

Mayo 2011

http://caniuse.com/


http://caniuse.com/

http://caniuse.com/

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)

.......

Plataforma HTML5: novedades

Conjunto de demos de características de HTML5: http://html5demos.com/


http://html5demos.com/

http://html5demos.com/

Test de HTML5 de Chrome 12 en http://html5test.com/ (el mejor soportado)




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






Lenguaje de Marcado HTML5


*From Peter Lubers, Kaazing: HTML5 The 30,000’ View, http://www.slideshare.net/peterlubbers/html5-4378635




HTML 5 TAG REFERENCE

 Define a comment

<!DOCTYPE> Defines the document type

<a>Defines a hyperlink

href, hreflang, media, ping , rel, target, type

<abbr> Defines an abbreviation

! <acronym> Used to define an embedded acronyms

<address> Defines an address element

! <applet> Used to define an embedded applet

<area>Defines an area inside an image map

alt, coords, href, hreflang, media, ping, rel, shape, target, type

★ <article>Defines an article

cite, pubdate

★ <aside> Defines content aside from the page content

★ <audio>Defines sound content

autobuffer, autoplay, controls, src

<b> Defines bold text

<base>Defines a base URL for all the links in a

page

href, target

! <basefont> Used to define a default font-color, font-size, or font-family for all the document

<bdo>Defines the direction of text display

dir

! <big> Used to make text bigger

<blockquote>Defines a long quotation

cite

<body> Defines the body element

<br> Inserts a single line break

<button>

Defines a push button

autofocus, disabled, form, formaction, formenctype,

formmethod, formnovalidate, formtarget, name, type, value

★ <canvas>Defines graphics

height, width

<caption> Defines a table caption

! <center> Used to center align text and content

<cite> Defines a citation

<code>Defines computer code text

autobuffer, autoplay, controls, src

<col> Defines attributes for table columns

<colgroup>Defines groups of table columns

span

★ <command>Defines a command button

checked, disabled, icon, label, radiogroup, type

★ <datalist> Defines a dropdown list

<dd> Defines a definition description

<del>Defines deleted text

cite, datetime

★ <details>Defines details of an element

open

★ <dialog> Defines a dialog (conversation)

<dfn> Defines a definition term

! <dir> Used to define a directory list

<div> Defines a section in a document

<dl> Defines a definition list

<dt> Defines a definition term

<em> Defines emphasized text

★ <embed>Defines external interactive content or

plugin

height, src, type, width

<fieldset>Defines a fieldset

disabled, form, name

★ <figure> Defines a group of media content, and their caption

! <font> Used to define font face, font size, and font color of text

★ <footer> Defines a footer for a section or page

<form>

Defines a form

accept-charset, action, autocomplete, enctype, method, name, novalidate,

target

<frame> Used to define one particular window (frame) within a frameset

! <frameset> Used to define a frameset, which organized multiple windows (frames)

<h1> to <h6> Defines header 1 to header 6

<head> Defines information about the document

★ <header> Defines a header for a section or page

★ <hgroup> Defines information about a section in a document

<hr> Defines a horizontal rule

<html>Defines an html document

manifest, xmlns

<i> Defines italic text

<iframe>Defines an inline sub window

height, name, sandbox, seamless, src, width

<img>Defines an image

alt, src, height, ismap, usemap, width

<input>

Defines an input field

accept, alt, autocomplete, autofocus, checked, disabled, form, formaction,

formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple,

name, pattern, placeholder, readonly, required, size, src, step, type, value,

width

<ins>Defines inserted text

cite, datetime

★ <keygen>Defines a generated key in a form

autofocus, challenge, disabled, form, keytype, name

<kbd> Defines keyboard text

<label>Defines an inline sub window

for, form

<legend> Defines a title in a fieldset

<li>Defines a list item

value

<link>Defines a resource reference

href, hreflang, media, rel, sizes, type

<map>Defines an image map

name

★ <mark> Defines marked text

<menu>Defines a menu list

label, type

<meta>Defines meta information

charset, content, http-equiv, name

★ <meter>Defines measurement within a predefined

range

high, low, max, min, optimum, value

★ <nav> Defines navigation links

! <noframes> Used to display text for browsers that do not handle frames

<noscript> Defines a noscript section

<object>Defines an embedded object

data, form, height, name, type, usemap, width

<ol>Defines an ordered list

reversed, start

<optgroup>Defines an option group

label, disabled

<option>Defines an option in a drop-down list

disabled, label, selected, value

★ <output>Defines some types of output

for, form, name

<p> Defines a paragraph

<param>Defines a parameter for an object

name, value

<pre> Defines preformatted text

<progress>Defines progress of a task of any kind

max, value

<q>Defines a short quotation

cite

★ <rp>Used in ruby annotations to define what to show browsers that to not support the ruby

element

★ <rt> Defines explanation to ruby annotations

★ <ruby> Defines ruby annotations

! <s>, <strike> Used to define strikethrough text.

<samp> Defines sample computer code

<script>Defines a definition list

async, type charset defer, src

★ <section>Defines a section

cite

<select>Defines a selectable list

autofocus, disabled, form, multiple, name, size

<small> Defines small text

★ <source>Defines media resources

media, src, type

<span> Defines a section in a document

<strong> Defines strong text

<style>Defines a style definition

type, media, scoped

<sub>, <sup> Defines sub/super-scripted text

<table>Defines a table

summary

<tbody>Defines a table body

summary

<td>Defines a table cell

colspan, headers, rowspan

<textarea>

Defines a text area

autofocus, cols, disabled, form, maxlength, name, placeholder,

readonly, readonly, required, rows, wrap

<tfoot>, <thead> Defines a table footer / head

<th>Defines a table header

colspan, headers, rowspan, scope

<time>Defines a date/tim

datetime

<title> Defines the document title

<tr>Defines a table row

datetime

! <tt> Used to define teletype text

! <u> Used to define underlined text

<ul> Defines an unordered list

<var> Defines a variable

★ <video>Defines a video

autobuffer, autoplay, controls, height, loop, src, width

C

★ HTML 5 new tag

! Tag not supported in HTML 5

Designed by Antonio Lupetti

(http://woorkup.com)

http://facebook.com/antoniolupetti http://www.twitter.com/woork

THE WORKING BRAIN

k

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


http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf

http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf

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

http://www.slideshare.net/peterlubbers/html5-4378635

http://www.slideshare.net/peterlubbers/html5-4378635

Presentación página HTML5 con CSS3

*From Bruce Lawson: HTML5 Doctor, http://html5doctor.com/designing-a-blog-with-html5/


http://html5doctor.com/designing-a-blog-with-html5/

http://html5doctor.com/designing-a-blog-with-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

Anatomia de una página HTML5


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>


HTML5 Peeks, Pokes and Pointers IExtraido de: Dive into HTML5 (http://diveintohtml5.org), Mark Pilgrim, O’Reilly 2010


http://diveintohtml5.org


Nuevos tipos de entradas Validación de entradas Fechas, calendarios Busquedas URLs eMails Autofocus Deslizadores ....

Compatible hacia atras Browsers no HTML5

ignoran nuevos atributos

Formularios enriquecidos


HTML5 Peeks, Pokes and Pointers IExtraido de: Dive into HTML5 (http://diveintohtml5.org), Mark Pilgrim, O’Reilly 2010




Gráficos


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

Gráficos y Símbolos en HTML5


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

Mapas de bits con CANVAS


https://developer.mozilla.org/En/Canvas_tutorial

https://developer.mozilla.org/En/Canvas_tutorial

http://www.desarrolloweb.com/manuales/manual-canvas-html5.html

http://www.desarrolloweb.com/manuales/manual-canvas-html5.html

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>


HTML5 Peeks, Pokes and Pointers IV Extraido de: Dive into HTML5 (http://diveintohtml5.org), Mark Pilgrim, O’Reilly 2010




HTML5-Canvas Tutorials

Magnífica fuente de tutoriales y ejemplos sobre el Canvas

http://www.html5canvastutorials.com/Wednesday, June 29, 2011

http://www.html5canvastutorials.com/

http://www.html5canvastutorials.com/

ChromeWeb Store

Tienda de aplicaciones Web de Google para ejecutar en Chrome

https://chrome.google.com/webstore?hl=esWednesday, June 29, 2011

https://chrome.google.com/webstore?hl=es

https://chrome.google.com/webstore?hl=es

InfoRapid: Portal de Conocimiento

http://en.inforapid.org/




Game-Salad Creator

Editor de juegos HTML5 interactivos sobre el Canvas.Para iPhone y iPad sin AppStore

http://gamesalad.com/products




Impact

Motor de juegos HTML5 interactivos sobre el Canvas.Para iPhone y iPad sin AppStore

http://impactjs.com/




FaceBook:ProyectoSpartan

Juegos en HTML5 para saltarse las limitaciones de iOS

http://techcrunch.com/2011/06/15/facebook-project-spartan/Wednesday, June 29, 2011

http://techcrunch.com/2011/06/15/facebook-project-spartan/

http://techcrunch.com/2011/06/15/facebook-project-spartan/

WebGL: Medusa http://aleksandarrodic.com/p/jellyfish/


http://aleksandarrodic.com/p/jellyfish/

http://aleksandarrodic.com/p/jellyfish/

Google WebGL Globe

Visualización en 3d (WebGL)de los volumenes de busquedas por ciudades

http://www.html5canvastutorials.com/showcase/google-webgl-globe/




WebGL: Web en 3D http://www.chromeexperiments.com/webgl


http://www.chromeexperiments.com/webgl

http://www.chromeexperiments.com/webgl

Ejemplo de Mundo virtual en WebGLhttp://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.


http://www.chromeexperiments.com/detail/3-dreams-of-black/?f=webgl

http://www.chromeexperiments.com/detail/3-dreams-of-black/?f=webgl

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

Gráficos vectoriales con 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>


http://www.w3schools.com/svg/default.asp

http://www.w3schools.com/svg/default.asp

http://www.w3.org/TR/SVG/


http://commons.wikimedia.org/wiki/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

Ejemplos SVG

http://commons.wikimedia.org/wiki/File:Compass.svg

http://commons.wikimedia.org/wiki/SVG_examples




http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html

http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html





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/

Formulas y Símbolos con MathML

<!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>




http://www.mathjax.org/demos/mathml-samples/


http://www.mathmlcentral.com/

http://www.mathmlcentral.com/

EjemploMathML





Almacenamiento, Protocolos, Off-line y Web Workers


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 JavascriptDefinició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

Almacenamiento de datos de cliente


http://dev.w3.org/html5/webstorage/

http://dev.w3.org/html5/webstorage/

¡Guarda datos efizcazmente en Navegador!

Las aplicaciones se pueden ejecutar sin estar conectado a Internet

Ejemplo de aplicación de localStorage


Almacenamiento Web: con objetos Javascript predefinidos Almacenamiento local, objeto: “localStorage” Almacenamiento de sesión, objeto: “sessionStorage”

Ejemplo variables locales y de sesion

// 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>


Formulario que guarda el nombre en una variable local El valor será

recordado en futuros accesos a la páginaSin necesidad de

guardarlo en el servidor

Ejemplo localStorage<html><head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <title>Local Storage</title> </script></head>

<body> <h1>Ejemplo localStorage</h1>

<form method=get action="http://localhost/cgi-bin"> Introducir nombre: <br> <input id=inn type=text name=nn size=40> <p>

// “form.nn.value” referencia atributo “value” de campo “nn” // 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>


http://localhost/cgi-bin

http://localhost/cgi-bin

HTML5 introduce múltiples formas de comunicar clientes y servidores XHR y XHR2: XML HTTP Request y Level 2

Con CORS: Cross Origin Resource SharingProtocolo básico de AJAX

Web SocketsCircuitos virtuales bidireccionales entre cliente y servidor

Web MessagingMensajes entre ventanas diferentes de una aplicación de cliente

SSE: Server Side EventsFlujos de mensajes de servidor a cliente

Web WorkersMensajes entre hebras javascript de una aplicación

Aplicaciones de cliente mas sencillas y potentes http://html5doctor.com/methods-of-communication/

Comunicación entre clientes y servidores


http://html5doctor.com/methods-of-communication/

http://html5doctor.com/methods-of-communication/

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.

WebSockets

Protocolo cliente-servidor Circ. Virtuales full duplex

entre cliente y servidor norma IETF-W3C


API Javascript para uso de WebSockets “WebSocket” es una clase predefinida de la librería Javascript

WebSockets API

// 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();


http://www.dit.upm.es




http://www.websocket.org

http://www.websocket.org

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

Web Messaging



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)

XMLHttpRequest Level 2 (XHR2)



Web Workers Los visores ejecutan hebras diferentes en

Diferentes pestañasDiferentes 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 situacionesAplicaciones Web podrán trabajar sobre la cache

Y sincronizar con el servidor cuando se conecten

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ñasDiferentes 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 situacionesAplicaciones Web podrán trabajar sobre la cache

Y sincronizar con el servidor cuando se conecten

Cache Manifest¡Creación de servicios más eficaces que funcionan

con y sin conexión a Internet!


Offline Web Apllications se basa en:

Cache Manifest Define recursos

necesarios para que una aplicación Web pueda trabajar sin conexión a Internet

Application Cache API Objeto Javascript que

permite saber el estado de la conexión a Internet y mas ...

Offline Web Applications<!DOCTYPE html><html manifest="prueba.manifest"> ........... ...........

</html>

========== fichero prueba.manifest =========CACHE MANIFEST

# Datos de la sección CACHE por defectoindex.htmlimages/logo.png

# Sección NETWORK para recursos que requieren # forzosamente conexiónNETWORK:http://api.twitter.com

# Sección FALLBACK para saber que hacer si no hay conexiónFALLBACK:images/maps unavailable.png

# Otra sección CACHE, las URLs pueden ser relativas o absolutasCACHE:http://www.prueba.com/images/image01.pnghttp://www.prueba.com/images/image02.pnghttp://www.prueba.com/images/image03.png

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


http://api.twitter.com

http://api.twitter.com

http://www.prueba.com/images/image01.png






http://www.inmensia.com/blog/20110118/html5_offline_web_applications_applicationcache.html

http://www.inmensia.com/blog/20110118/html5_offline_web_applications_applicationcache.html

http://www.inmensia.com/blog/20110115/html5_offline_web_applications_manifest.html

http://www.inmensia.com/blog/20110115/html5_offline_web_applications_manifest.html

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

Geolocalización y Sensores


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 decimalAltitud y precisión de la altitudDirecció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

Geolocalización


http://dev.w3.org/geo/api/spec-source.html

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

http://code.google.com/apis/maps/index.html

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>


http://dev.opera.com

http://dev.opera.com



Ejemplo Geolocation II<!DOCTYPE html> <html><head><title>W3C Geolocation API Example</title><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>


http://maps.google.com/maps/api/js?sensor=false

http://maps.google.com/maps/api/js?sensor=false

http://code.google.com/apis/maps/documentation/javascript/

http://code.google.com/apis/maps/documentation/javascript/

functiondisplayPosition()// 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" });}


HTML5 Peeks, Pokes and Pointers III Extraido de: Dive into HTML5 (http://diveintohtml5.org), Mark Pilgrim, O’Reilly 2010




Audio y Video en HTML5


Audio y Video en Internet Audio y video están hoy en muchas páginas Web

HTML5 posee marcas dedicadasSimplifican la inclusión de audio y video

Audio y Video en HTML5

// 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>


Contenedor OGG Video: Theora (VP7), Audio: Vorbis

Calidad menor

Contenedor MP4 Video: H264, Audio: ACC

Existen Patentes

Contenedor WebM Video: VP8, Audio: Vorbis

Video: Contendientes


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

Codecs en liza


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, ...


http://www.webmproject.org


Proyecto WebM (Video on the Web)http://www.webmproject.org/




Youtube HTML5 video trialhttp://www.youtube.com/html5


http://www.youtube.com/html5

http://www.youtube.com/html5

Servidores streaming para H264 Flash iOS (iPhone, ....) Apple QuickTime Android Set-top boxes HTML5

WOWZAMedia Systems

http://www.wowzamedia.com/

http://www.wowzamedia.com/_demo/webm/html5.htmlWednesday, June 29, 2011



http://www.wowzamedia.com/_demo/webm/html5.html

http://www.wowzamedia.com/_demo/webm/html5.html

Audio/Video Players: Sublime Videohttp://sublimevideo.net/demo


http://sublimevideo.net/demo

http://sublimevideo.net/demo

Audio/Video Players: Videojshttp://videojs.com/


http://videojs.com/

http://videojs.com/

HTML5 Peeks, Pokes and Pointers II Extraido de: Dive into HTML5 (http://diveintohtml5.org), Mark Pilgrim, O’Reilly 2010




Uniendo Video y Canvas:Realidades Aumentada


Manipulando Video con Canvas

http://www.craftymind.com/factory/html5video/CanvasVideo.htmlhttp://www.craftymind.com/factory/html5video/CanvasVideo3D.html


http://www.craftymind.com/factory/html5video/CanvasVideo.html

http://www.craftymind.com/factory/html5video/CanvasVideo.html

http://www.craftymind.com/factory/html5video/CanvasVideo3D.html

http://www.craftymind.com/factory/html5video/CanvasVideo3D.html

Manipulando Video con CanvasVideo simetrico generado en tiempo real utilizando Canvas y

programa en Javascript

http://html5demos.com/video-canvas




Video y Canvas en HTML5http://media.chikuyonok.ru/ambilight/


http://media.chikuyonok.ru/ambilight/

http://media.chikuyonok.ru/ambilight/

Videoconferencia y Tiempo Real: Web RTC


Web Real Time Communications (API) Grupos de trabajo en

WHATWG http://www.whatwg.org/specs/web-apps/current-work/webrtc.html

W3CDefinicion 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 APIsDevice API, Stream API, Peer Connection API, ....

Web RTC esta apoyado porGoogle, Opera, Mozilla, Ericsson, Nokia, Microsoft, ...

Apple es el menos entusiasta (¿Facetime?)

Web RTC


http://www.whatwg.org/specs/web-apps/current-work/webrtc.html

http://www.whatwg.org/specs/web-apps/current-work/webrtc.html



http://datatracker.ietf.org/wg/rtcweb/charter/

http://datatracker.ietf.org/wg/rtcweb/charter/

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

Objetivos de Web RTC (W3C)


Device API

-> SMS, MMS, email, ...

-> Acceso a agenda de contactos

-> Acceso a interfaces de red

-> Acceso a estado bateria

-> Acceso a calendario

-> Caracteristicas captura audio/video

-> Permisos de seguridad

-> API de acceso a audio, video, ...

-> Caracteristicas del sistema


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


https://labs.ericsson.com/developer-community/blog/beyond-html5-peer-peer-conversational-video

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






PeerConnections:Adaptación Webkitde Ericsson Labs


Ejemplo PeerConnection

<script>var serverConfig = ...; // provided by server to handle, e.g., TURNvar local = new ConnectionPeer(serverConfig); window.onload = function() { 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 eventsvar 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">


Web RTC:

Proyecto de Software Libre

para soportar conexiones P2Pen navegador

Apoyado por:

- Google- Mozilla- Opera


Arquitectura Web RTC


iSAC Wideband audio codec for VoIP and streaming audio.

16 kHz or 32 kHz sampling, adaptive bit rate: 12 to 52 kbpsiLBC 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 microphoneNoise Reduction (NR) Software signal processing component removing background

noise usually associated with VoIP, such as Hiss, fan noise, etc.

AudioEngine


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

VideoEngine


http://webmproject.org/

http://webmproject.org/

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 NATICE Interactive Connectivity Establishment. RFC 5245

Establishing connectivity over NATs with STUN/TURN serversTURN 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 simetricosLa conexion se realiza a través de UDP/RTP

Protocolos PeerConnection


http://tools.ietf.org/html/rfc5766




CSS3


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

CSS3: principales novedades

Demos de efectos de CSS3: http://slides.html5rocks.com/#css3-title


http://slides.html5rocks.com/#css3-title

http://slides.html5rocks.com/#css3-title

HTML5 (lenguaje de marcado)

CSS3

Javascript

Imagenes (Canvas, SVG, Video, ....)

Cache Manifest (para cache off-line)

Componentes de las Aplicaciones Web HTML5


Conclusiones


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)?

Conclusiones y reflexiones


Muchas Gracias

Technology

Html5 telefonica-curso