Avenços en tecnologies web per entorns intel.ligents
-
Upload
aitorrod -
Category
Technology
-
view
585 -
download
3
description
Transcript of Avenços en tecnologies web per entorns intel.ligents
![Page 1: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/1.jpg)
Aitor RodríguezEnginer R+D
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
![Page 2: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/2.jpg)
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
![Page 3: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/3.jpg)
Intel·ligència ambientalPresentació de continguts
Jornada Nous Reptes de CEPHIS per al 2011
![Page 4: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/4.jpg)
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…
![Page 5: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/5.jpg)
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, …
![Page 6: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/6.jpg)
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, …
![Page 7: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/7.jpg)
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
![Page 8: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/8.jpg)
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>
![Page 9: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/9.jpg)
Jornada Nous Reptes de CEPHIS per al 2011
Noves tecnologies WebHTML5
SVGSMIL
![Page 10: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/10.jpg)
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
![Page 11: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/11.jpg)
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, …
![Page 12: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/12.jpg)
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ó
![Page 13: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/13.jpg)
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>
![Page 14: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/14.jpg)
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>
![Page 15: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/15.jpg)
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>
![Page 16: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/16.jpg)
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>
![Page 17: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/17.jpg)
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”>
![Page 18: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/18.jpg)
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ó
![Page 19: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/19.jpg)
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ó
![Page 20: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/20.jpg)
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ó
![Page 21: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/21.jpg)
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ó
![Page 22: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/22.jpg)
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
![Page 23: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/23.jpg)
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!)
![Page 24: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/24.jpg)
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
![Page 25: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/25.jpg)
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
![Page 26: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/26.jpg)
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
![Page 27: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/27.jpg)
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
![Page 28: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/28.jpg)
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
![Page 29: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/29.jpg)
Jornada Nous Reptes de CEPHIS per al 2011
DemosVideo amb HTML5 i SVG
Filtres amb SVGSincronització de contingut amb SMIL
![Page 30: Avenços en tecnologies web per entorns intel.ligents](https://reader033.fdocuments.es/reader033/viewer/2022061214/549a41aeb47959514d8b59a7/html5/thumbnails/30.jpg)
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 !!