avenços en tecnologies web per entorns intel.ligents

Aitor RodríguezEnginer R+D

aitor.rodriguez@uab.cat

AvençosAvenços  en tecnologies Web en tecnologies Web per entorns intel.ligentsper entorns intel.ligents

Jornada Nous Reptes de CEPHIS per al 2011

9 de Desembre del 2010

Continguts

1. Intel·ligència ambiental Presentació de continguts

2. Noves tecnologies Web HTML5 SVG SMIL

3. Demos

Jornada Nous Reptes de CEPHIS per al 2011

Intel·ligència ambientalPresentació de continguts

Jornada Nous Reptes de CEPHIS per al 2011

Intel·ligència ambiental

Jornada Nous Reptes de CEPHIS per al 2011

Capacitat de l’entorn per captar i respondre

a la presència de persones

ubiquitous computing pervasive computing

calm technology…

Intel·ligència ambiental

Jornada Nous Reptes de CEPHIS per al 2011

Interacció multimodal

Entorn intel·ligen

t

teclat, ratolí, comandament, parla, superfícies tàctils, mirada, gestos manuals, gestos corporals, …

presentació de continguts, senyals auditives, …

Intel·ligència ambiental

Jornada Nous Reptes de CEPHIS per al 2011

Interacció multimodal

Entorn intel·ligen

t

presentació de continguts, senyals auditives, …

On es presenten els continguts?

teclat, ratolí, comandament, parla, superfícies tàctils, mirada, gestos manuals, gestos corporals, …

Intel·ligència ambiental

Jornada Nous Reptes de CEPHIS per al 2011

Conciència del context

– Descobrir serveis disponibles

– Interacció implícita. Dissenys accessibles

– Continguts adaptables

– Interfícies d’usuari adaptables

Intel·ligència ambiental

Jornada Nous Reptes de CEPHIS per al 2011

Conciència del context

– Descobrir serveis disponibles

– Interacció implícita. Dissenys accessibles

– Continguts adaptables

– Interfícies d’usuari adaptables

Com es presenten els continguts?<HTML5>

Jornada Nous Reptes de CEPHIS per al 2011

Noves tecnologies WebHTML5

SVGSMIL

Noves tecnologies WebHTML5

Jornada Nous Reptes de CEPHIS per al 2011

Què és?

– Conjunt d’especificacions pel desenvolupament Web

– Evolució de HTML 4, XHTML 1 i DOM nivell 2

– En desenvolupament pel W3C• Versió “final” pel 2012• Algunes funcionalitats ja estan disponibles i suportades

Noves tecnologies WebHTML5

Jornada Nous Reptes de CEPHIS per al 2011

Per què?

– Integració dels múltiples llenguatges • CSS, JavaScript, SVG, MathML, Flash, …

– Integració de múltiples continguts• video, audio, canvas, formularis, …

– Integració en múltiples entorns• desktop, Web, mòbil, TV, …

Noves tecnologies WebHTML5

Jornada Nous Reptes de CEPHIS per al 2011

Novetats

Estructura de la pàgina Contingut específic Canvas Elements de formulari Aplicacions Web Offline Bases de dades locals Web workers Geolocalització No més etiquetes de presentació

Noves tecnologies WebHTML5

Jornada Nous Reptes de CEPHIS per al 2011

Novetats

Estructura de la pàgina Contingut específic Canvas Elements de formulari Aplicacions Web Offline Bases de dades locals Web workers Geolocalització No més etiquetes de presentació

<section>

<article>

<header>

<footer>

<nav>

<figure>

Noves tecnologies WebHTML5

Jornada Nous Reptes de CEPHIS per al 2011

Novetats

Estructura de la pàgina Contingut específic Canvas Elements de formulari Aplicacions Web Offline Bases de dades locals Web workers Geolocalització No més etiquetes de presentació

Video:

<video>

<source

src=“v.mp4“>

<source

src=“v.webm”>

<source src=“v.ogv“>

//<flash_object>

</video>

Noves tecnologies WebHTML5

Jornada Nous Reptes de CEPHIS per al 2011

Novetats

Estructura de la pàgina Contingut específic Canvas Elements de formulari Aplicacions Web Offline Bases de dades locals Web workers Geolocalització No més etiquetes de presentació

SVG (+SMIL):

<svg>

<ellipse … />

<text> … </text>

<animate … />

</svg>

Noves tecnologies WebHTML5

Jornada Nous Reptes de CEPHIS per al 2011

Novetats

Estructura de la pàgina Contingut específic Canvas Elements de formulari Aplicacions Web Offline Bases de dades locals Web workers Geolocalització No més etiquetes de presentació

<canvas> …

</canvas>

<script>

c.fillRect( … );

c.drawImage( …);

c.rotate( … );

</script>

Noves tecnologies WebHTML5

Jornada Nous Reptes de CEPHIS per al 2011

Novetats

Estructura de la pàgina Contingut específic Canvas Elements de formulari Aplicacions Web Offline Bases de dades locals Web workers Geolocalització No més etiquetes de presentació

<input type=“tel”>

<input

type=“search”>

<input type=“url”>

<input type=“email”>

<input type=“date”>

<input

type=“number”>

<input type=“color”>

Noves tecnologies WebHTML5

Jornada Nous Reptes de CEPHIS per al 2011

Novetats

Estructura de la pàgina Contingut específic Canvas Elements de formulari Aplicacions Web Offline Bases de dades locals Web workers Geolocalització No més etiquetes de presentació

Noves tecnologies WebHTML5

Jornada Nous Reptes de CEPHIS per al 2011

Novetats

Estructura de la pàgina Contingut específic Canvas Elements de formulari Aplicacions Web Offline Bases de dades locals Web workers Geolocalització No més etiquetes de presentació

Noves tecnologies WebHTML5

Jornada Nous Reptes de CEPHIS per al 2011

Novetats

Estructura de la pàgina Contingut específic Canvas Elements de formulari Aplicacions Web Offline Bases de dades locals Web workers Geolocalització No més etiquetes de presentació

Noves tecnologies WebHTML5

Jornada Nous Reptes de CEPHIS per al 2011

Novetats

Estructura de la pàgina Contingut específic Canvas Elements de formulari Aplicacions Web Offline Bases de dades locals Web workers Geolocalització No més etiquetes de presentació

Noves tecnologies WebHTML5

Jornada Nous Reptes de CEPHIS per al 2011

Novetats

Estructura de la pàgina Contingut específic Canvas Elements de formulari Aplicacions Web Offline Bases de dades locals Web workers Geolocalització No més etiquetes de presentació

<basefont>

<big>

<center>

<font>

<s>

<strike>

<tt>

<u>

<frame>

CSS

Noves tecnologies WebSVG

Jornada Nous Reptes de CEPHIS per al 2011

Què és?

– Scalable Vector Graphics (W3C)

– Basat en XML i integrable amb HTML5

– Suport natiu en els principals navegadors Web(inclus IE des de IE9!)

Noves tecnologies WebSVG

Jornada Nous Reptes de CEPHIS per al 2011

Per què?

– Format obert per gràfics vectorials (a la Web)

– Interficies d’usuari escalables

– Formes vectorials en DOM

Noves tecnologies WebSVG vs. Canvas

Jornada Nous Reptes de CEPHIS per al 2011

SVG Canvas (HTML5)

• A nivell de vectors• Independent de la resolució• Animacions en format declaratiu• Tots els objectes son accessibles (DOM)• Ideal per gràfics vectorials i GUI• Temps de càrrega depén de la complexitat (DOM)

• A nivell de píxel • Menor temps de càrrega• Rendiment constant – tot son píxels• Conversió directa a .png o .jpg• Ideal per gràfics raster• No hi ha API DOM per qualsevol objecte – queda fora de control JS• No existeix la línia de temps• Menys funcions pel renderitzat de text

Noves tecnologies WebSMIL

Jornada Nous Reptes de CEPHIS per al 2011

Què és?

– Synchronized Multimedia Integration Language (W3C)

– Sincronització, temporització, animacions, transicions concepte de temps

– Basat en XML i integrable amb SVG

Noves tecnologies Web SMIL

Jornada Nous Reptes de CEPHIS per al 2011

Per què?

– Animacions en format declaratiu (i en DOM)

– Sincronització de continguts

– Línia de temps sense JavaScript

Noves tecnologies Web SMIL vs. JavaScript

Jornada Nous Reptes de CEPHIS per al 2011

Exemple: El·lipse oscil·lant-Menys codi i més simple

-Concepte de temps implícit

-Animacions integrades com a objecte en el document

-Dependència de les etiquetes definides Sempre ens quedarà JS

Jornada Nous Reptes de CEPHIS per al 2011

DemosVideo amb HTML5 i SVG

Filtres amb SVGSincronització de contingut amb SMIL

Noves tecnologies Web SMIL vs. JavaScript

Jornada Nous Reptes de CEPHIS per al 2011

En JS, setTimeout() i setInterval() permeten actualitzacions repetides per modificar atributs d’alguns obj. de la pàgina

En JS, el temps d’actualització depén del temps de refresc (màquines diferents velocitats diferents)

En JS, per crear múltiples animacions independents: Es crea un gran bucle que es repeteix cada N segons

Totes les animacions han de ser múltiples de N

Es creen múltiples bucles amb N independents La sincronia entre diferents bucles l’ha de controlar el

programador i tendeix a disipar-se al llarg el temps

Amb SMIL aquestes decisions passen del dissenyador al navegador Filosofia HTML5 !!