avenços en tecnologies web per entorns intel.ligents

Aitor RodríguezEnginer R+D

[email protected]

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


Intel·ligència ambientalPresentació de continguts


Intel·ligència ambiental


Capacitat de l’entorn per captar i respondre

a la presència de persones

ubiquitous computing pervasive computing

calm technology…



Interacció multimodal

Entorn intel·ligen

t

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

presentació de continguts, senyals auditives, …



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



Conciència del context

– Descobrir serveis disponibles

– Interacció implícita. Dissenys accessibles

– Continguts adaptables

– Interfícies d’usuari adaptables



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>


Noves tecnologies WebHTML5

SVGSMIL



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



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



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ó



Novetats


<section>

<article>

<header>

<footer>

<nav>

<figure>



Novetats


Video:

<video>

<source

src=“v.mp4“>

<source

src=“v.webm”>

<source src=“v.ogv“>

//<flash_object>

</video>



Novetats


SVG (+SMIL):

<svg>

<ellipse … />

<text> … </text>

<animate … />

</svg>



Novetats


<canvas> …

</canvas>

<script>

c.fillRect( … );

c.drawImage( …);

c.rotate( … );

</script>



Novetats


<input type=“tel”>

<input

type=“search”>

<input type=“url”>

<input type=“email”>

<input type=“date”>

<input

type=“number”>

<input type=“color”>



Novetats




Novetats


<basefont>

<big>

<center>

<font>

<s>

<strike>

<tt>

<u>

<frame>

CSS

Noves tecnologies WebSVG


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


Per què?

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

– Interficies d’usuari escalables

– Formes vectorials en DOM

Noves tecnologies WebSVG vs. Canvas


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


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


Per què?

– Animacions en format declaratiu (i en DOM)

– Sincronització de continguts

– Línia de temps sense JavaScript

Noves tecnologies Web SMIL vs. JavaScript


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


DemosVideo amb HTML5 i SVG

Filtres amb SVGSincronització de contingut amb SMIL

Noves tecnologies Web SMIL vs. JavaScript


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

avenços en tecnologies web per entorns intel.ligents

Technology