Html5 telefonica-curso

Curso HTML5

Juan Quemada
Distrito C
Madrid, 27 de Junio 2011

Wednesday, June 29, 2011

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


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


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


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


Plataforma Web
está acelerando

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


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


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)

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/


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/


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


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.

Presentación página HTML5 con CSS3


Presentación página HTML5 con CSS3

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


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


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 I
Extraido de: Dive into HTML5
(http://diveintohtml5.org),
Mark Pilgrim, O’Reilly 2010


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


Gráficos


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


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


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/

Chrome
Web Store
Tienda de
aplicaciones
Web de Google
para ejecutar
en Chrome

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:
Proyecto
Spartan
Juegos en HTML5
para saltarse las
limitaciones de iOS

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

WebGL: Medusa 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


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.

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>


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


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>


Ejemplo
MathML

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


Almacenamiento, Protocolos,
Off-line y Web Workers


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


Ejemplo de aplicación de localStorage
¡Guarda datos efizcazmente en
Navegador!
Las aplicaciones se pueden
ejecutar sin estar conectado a Internet


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


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
$(function() { $("#inn").val(localStorage.nn); });
</script>
</form>
</body>
</html>


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/


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.


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


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



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)


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


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


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


Geolocalización y Sensores


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


Ejemplo
Geolocation
<!DOCTYPE html>
<html>
<head>
<title>Example of W3C Geolocation API</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
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>


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

HTML5 Peeks, Pokes and Pointers III


Audio y Video en HTML5


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>


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

 Calidad menor

Contenedor MP4
 Video: H264, Audio: ACC

 Existen Patentes

Contenedor WebM
 Video: VP8, Audio: Vorbis


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


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


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


Youtube HTML5 video trial
http://www.youtube.com/html5


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

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


Audio/Video Players: Videojs
http://videojs.com/


HTML5 Peeks, Pokes and Pointers II


Uniendo Video y Canvas:
Realidades Aumentada


Manipulando Video con Canvas

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


Manipulando Video con Canvas
Video simetrico generado en tiempo real utilizando Canvas y
programa en Javascript

http://html5demos.com/video-canvas


Video y Canvas en HTML5
http://media.chikuyonok.ru/ambilight/


Videoconferencia y Tiempo Real:
Web RTC


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


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


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

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


PeerConnections:
Adaptación Webkit
de Ericsson Labs


Web RTC:
Proyecto de
Software Libre
para soportar
conexiones P2P
en navegador

Apoyado por:

- Google
- Mozilla
- Opera


Arquitectura Web RTC


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.


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


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


CSS3


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


Componentes de las Aplicaciones
Web HTML5
HTML5 (lenguaje de marcado)
CSS3
Javascript
Imagenes (Canvas, SVG, Video, ....)
Cache Manifest (para cache off-line)


Conclusiones


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


Muchas Gracias


Html5 telefonica-curso

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Html5 telefonica-curso

Más de Juan Quemada

Último

Html5 telefonica-curso