Date post: | 18-Dec-2014 |
Category: |
Technology |
Upload: | aitorrod |
View: | 585 times |
Download: | 3 times |
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
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 !!