Aitor Rodríguez Enginer R+D [email_address] Avenços   en tecnologies Web  per entorns intel.ligents Jornada Nous Reptes de...
Continguts <ul><li>Intel·ligència ambiental </li></ul><ul><ul><li>Presentació de continguts </li></ul></ul><ul><li>Noves t...
<ul><li>Intel·ligència ambiental </li></ul><ul><ul><li>Presentació de continguts </li></ul></ul>Jornada Nous Reptes de CEP...
Intel·ligència ambiental Jornada Nous Reptes de CEPHIS per al 2011 Capacitat de l’entorn per  captar i respondre  a la pre...
Intel·ligència ambiental Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Interacció multimodal </li></ul></ul>Entorn...
Intel·ligència ambiental Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Interacció multimodal </li></ul></ul>Entorn...
Intel·ligència ambiental Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Conciència del context </li></ul></ul><ul><...
Intel·ligència ambiental Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Conciència del context </li></ul></ul><ul><...
Jornada Nous Reptes de CEPHIS per al 2011 <ul><li>Noves tecnologies Web </li></ul><ul><ul><li>HTML5 </li></ul></ul><ul><ul...
Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Què és? </li></ul></ul><ul><ul><li>Conju...
Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Per què? </li></ul></ul><ul><ul><li>Inte...
Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>...
Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>...
Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>...
Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>...
Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>...
Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>...
Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>...
Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>...
Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>...
Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>...
Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>...
Noves tecnologies Web SVG Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Què és? </li></ul></ul><ul><ul><li>Scalabl...
Noves tecnologies Web SVG Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Per què? </li></ul></ul><ul><ul><li>Format...
Noves tecnologies Web SVG vs. Canvas  Jornada Nous Reptes de CEPHIS per al 2011 SVG Canvas (HTML5) <ul><li>A nivell de vec...
Noves tecnologies Web SMIL Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Què és? </li></ul></ul><ul><ul><li>Synchr...
Noves tecnologies Web  SMIL Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Per què? </li></ul></ul><ul><ul><li>Anim...
Noves tecnologies Web  SMIL vs. JavaScript Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Exemple:  El·lipse oscil·...
Jornada Nous Reptes de CEPHIS per al 2011 <ul><li>Demos </li></ul><ul><ul><li>Video amb HTML5 i SVG </li></ul></ul><ul><ul...
Noves tecnologies Web  SMIL vs. JavaScript Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>En JS,  setTimeout()  i  ...
Upcoming SlideShare
Loading in …5
×

Avenços en tecnologies web per entorns intel.ligents

678 views

Published on

Característiques de HTML5 i SVG que fan d'aquestes tecnologies el suport ideal per implementar aplicacions d'intel·ligència ambiental.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
678
On SlideShare
0
From Embeds
0
Number of Embeds
285
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Avenços en tecnologies web per entorns intel.ligents

  1. 1. Aitor Rodríguez Enginer R+D [email_address] Avenços   en tecnologies Web per entorns intel.ligents Jornada Nous Reptes de CEPHIS per al 2011 9 de Desembre del 2010
  2. 2. Continguts <ul><li>Intel·ligència ambiental </li></ul><ul><ul><li>Presentació de continguts </li></ul></ul><ul><li>Noves tecnologies Web </li></ul><ul><ul><li>HTML5 </li></ul></ul><ul><ul><li>SVG </li></ul></ul><ul><ul><li>SMIL </li></ul></ul><ul><li>Demos </li></ul>Jornada Nous Reptes de CEPHIS per al 2011
  3. 3. <ul><li>Intel·ligència ambiental </li></ul><ul><ul><li>Presentació de continguts </li></ul></ul>Jornada Nous Reptes de CEPHIS per al 2011
  4. 4. 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 …
  5. 5. Intel·ligència ambiental Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Interacció multimodal </li></ul></ul>Entorn intel·ligent teclat, ratolí, comandament, parla, superfícies tàctils, mirada, gestos manuals, gestos corporals, … presentació de continguts , senyals auditives, …
  6. 6. Intel·ligència ambiental Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Interacció multimodal </li></ul></ul>Entorn intel·ligent presentació de continguts , senyals auditives, … On es presenten els continguts? teclat, ratolí, comandament, parla, superfícies tàctils, mirada, gestos manuals, gestos corporals, …
  7. 7. Intel·ligència ambiental Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Conciència del context </li></ul></ul><ul><ul><li>Descobrir serveis disponibles </li></ul></ul><ul><ul><li>Interacció implícita. Dissenys accessibles </li></ul></ul><ul><ul><li>Continguts adaptables </li></ul></ul><ul><ul><li>Interfícies d’usuari adaptables </li></ul></ul>
  8. 8. Intel·ligència ambiental Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Conciència del context </li></ul></ul><ul><ul><li>Descobrir serveis disponibles </li></ul></ul><ul><ul><li>Interacció implícita. Dissenys accessibles </li></ul></ul><ul><ul><li>Continguts adaptables </li></ul></ul><ul><ul><li>Interfícies d’usuari adaptables </li></ul></ul>Com es presenten els continguts? <HTML 5 >
  9. 9. Jornada Nous Reptes de CEPHIS per al 2011 <ul><li>Noves tecnologies Web </li></ul><ul><ul><li>HTML5 </li></ul></ul><ul><ul><li>SVG </li></ul></ul><ul><ul><li>SMIL </li></ul></ul>
  10. 10. Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Què és? </li></ul></ul><ul><ul><li>Conjunt d’especificacions pel desenvolupament Web </li></ul></ul><ul><ul><li>Evolució de HTML 4, XHTML 1 i DOM nivell 2 </li></ul></ul><ul><ul><li>En desenvolupament pel W3C </li></ul></ul><ul><ul><ul><li>Versió “final” pel 2012 </li></ul></ul></ul><ul><ul><ul><li>Algunes funcionalitats ja estan disponibles i suportades </li></ul></ul></ul>
  11. 11. Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Per què? </li></ul></ul><ul><ul><li>Integració dels múltiples llenguatges </li></ul></ul><ul><ul><ul><li>CSS, JavaScript, SVG, MathML, Flash, … </li></ul></ul></ul><ul><ul><li>Integració de múltiples continguts </li></ul></ul><ul><ul><ul><li>video, audio, canvas, formularis, … </li></ul></ul></ul><ul><ul><li>Integració en múltiples entorns </li></ul></ul><ul><ul><ul><li>desktop, Web, mòbil, TV, … </li></ul></ul></ul>
  12. 12. Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>Estructura de la pàgina </li></ul></ul></ul><ul><ul><ul><li>Contingut específic </li></ul></ul></ul><ul><ul><ul><li>Canvas </li></ul></ul></ul><ul><ul><ul><li>Elements de formulari </li></ul></ul></ul><ul><ul><ul><li>Aplicacions Web Offline </li></ul></ul></ul><ul><ul><ul><li>Bases de dades locals </li></ul></ul></ul><ul><ul><ul><li>Web workers </li></ul></ul></ul><ul><ul><ul><li>Geolocalització </li></ul></ul></ul><ul><ul><ul><li>No més etiquetes de presentació </li></ul></ul></ul>
  13. 13. Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>Estructura de la pàgina </li></ul></ul></ul><ul><ul><ul><li>Contingut específic </li></ul></ul></ul><ul><ul><ul><li>Canvas </li></ul></ul></ul><ul><ul><ul><li>Elements de formulari </li></ul></ul></ul><ul><ul><ul><li>Aplicacions Web Offline </li></ul></ul></ul><ul><ul><ul><li>Bases de dades locals </li></ul></ul></ul><ul><ul><ul><li>Web workers </li></ul></ul></ul><ul><ul><ul><li>Geolocalització </li></ul></ul></ul><ul><ul><ul><li>No més etiquetes de presentació </li></ul></ul></ul><section> <article> <header> <footer> <nav> <figure>
  14. 14. Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>Estructura de la pàgina </li></ul></ul></ul><ul><ul><ul><li>Contingut específic </li></ul></ul></ul><ul><ul><ul><li>Canvas </li></ul></ul></ul><ul><ul><ul><li>Elements de formulari </li></ul></ul></ul><ul><ul><ul><li>Aplicacions Web Offline </li></ul></ul></ul><ul><ul><ul><li>Bases de dades locals </li></ul></ul></ul><ul><ul><ul><li>Web workers </li></ul></ul></ul><ul><ul><ul><li>Geolocalització </li></ul></ul></ul><ul><ul><ul><li>No més etiquetes de presentació </li></ul></ul></ul>Video : <video> <source src=“v.mp4“> <source src=“v.webm”> <source src=“v.ogv“> // <flash_object> </video>
  15. 15. Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>Estructura de la pàgina </li></ul></ul></ul><ul><ul><ul><li>Contingut específic </li></ul></ul></ul><ul><ul><ul><li>Canvas </li></ul></ul></ul><ul><ul><ul><li>Elements de formulari </li></ul></ul></ul><ul><ul><ul><li>Aplicacions Web Offline </li></ul></ul></ul><ul><ul><ul><li>Bases de dades locals </li></ul></ul></ul><ul><ul><ul><li>Web workers </li></ul></ul></ul><ul><ul><ul><li>Geolocalització </li></ul></ul></ul><ul><ul><ul><li>No més etiquetes de presentació </li></ul></ul></ul>SVG (+SMIL) : <svg> <ellipse … /> <text> … </text> <animate … /> </svg>
  16. 16. Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>Estructura de la pàgina </li></ul></ul></ul><ul><ul><ul><li>Contingut específic </li></ul></ul></ul><ul><ul><ul><li>Canvas </li></ul></ul></ul><ul><ul><ul><li>Elements de formulari </li></ul></ul></ul><ul><ul><ul><li>Aplicacions Web Offline </li></ul></ul></ul><ul><ul><ul><li>Bases de dades locals </li></ul></ul></ul><ul><ul><ul><li>Web workers </li></ul></ul></ul><ul><ul><ul><li>Geolocalització </li></ul></ul></ul><ul><ul><ul><li>No més etiquetes de presentació </li></ul></ul></ul><canvas> … </canvas> <script> c.fillRect( … ); c.drawImage( …); c.rotate( … ); </script>
  17. 17. Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>Estructura de la pàgina </li></ul></ul></ul><ul><ul><ul><li>Contingut específic </li></ul></ul></ul><ul><ul><ul><li>Canvas </li></ul></ul></ul><ul><ul><ul><li>Elements de formulari </li></ul></ul></ul><ul><ul><ul><li>Aplicacions Web Offline </li></ul></ul></ul><ul><ul><ul><li>Bases de dades locals </li></ul></ul></ul><ul><ul><ul><li>Web workers </li></ul></ul></ul><ul><ul><ul><li>Geolocalització </li></ul></ul></ul><ul><ul><ul><li>No més etiquetes de presentació </li></ul></ul></ul><input type=“ tel ”> <input type=“ search ”> <input type=“ url ”> <input type=“ email ”> <input type=“ date ”> <input type=“ number ”> <input type=“ color ”>
  18. 18. Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>Estructura de la pàgina </li></ul></ul></ul><ul><ul><ul><li>Contingut específic </li></ul></ul></ul><ul><ul><ul><li>Canvas </li></ul></ul></ul><ul><ul><ul><li>Elements de formulari </li></ul></ul></ul><ul><ul><ul><li>Aplicacions Web Offline </li></ul></ul></ul><ul><ul><ul><li>Bases de dades locals </li></ul></ul></ul><ul><ul><ul><li>Web workers </li></ul></ul></ul><ul><ul><ul><li>Geolocalització </li></ul></ul></ul><ul><ul><ul><li>No més etiquetes de presentació </li></ul></ul></ul>
  19. 19. Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>Estructura de la pàgina </li></ul></ul></ul><ul><ul><ul><li>Contingut específic </li></ul></ul></ul><ul><ul><ul><li>Canvas </li></ul></ul></ul><ul><ul><ul><li>Elements de formulari </li></ul></ul></ul><ul><ul><ul><li>Aplicacions Web Offline </li></ul></ul></ul><ul><ul><ul><li>Bases de dades locals </li></ul></ul></ul><ul><ul><ul><li>Web workers </li></ul></ul></ul><ul><ul><ul><li>Geolocalització </li></ul></ul></ul><ul><ul><ul><li>No més etiquetes de presentació </li></ul></ul></ul>
  20. 20. Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>Estructura de la pàgina </li></ul></ul></ul><ul><ul><ul><li>Contingut específic </li></ul></ul></ul><ul><ul><ul><li>Canvas </li></ul></ul></ul><ul><ul><ul><li>Elements de formulari </li></ul></ul></ul><ul><ul><ul><li>Aplicacions Web Offline </li></ul></ul></ul><ul><ul><ul><li>Bases de dades locals </li></ul></ul></ul><ul><ul><ul><li>Web workers </li></ul></ul></ul><ul><ul><ul><li>Geolocalització </li></ul></ul></ul><ul><ul><ul><li>No més etiquetes de presentació </li></ul></ul></ul>
  21. 21. Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>Estructura de la pàgina </li></ul></ul></ul><ul><ul><ul><li>Contingut específic </li></ul></ul></ul><ul><ul><ul><li>Canvas </li></ul></ul></ul><ul><ul><ul><li>Elements de formulari </li></ul></ul></ul><ul><ul><ul><li>Aplicacions Web Offline </li></ul></ul></ul><ul><ul><ul><li>Bases de dades locals </li></ul></ul></ul><ul><ul><ul><li>Web workers </li></ul></ul></ul><ul><ul><ul><li>Geolocalització </li></ul></ul></ul><ul><ul><ul><li>No més etiquetes de presentació </li></ul></ul></ul>
  22. 22. Noves tecnologies Web HTML5 Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Novetats </li></ul></ul><ul><ul><ul><li>Estructura de la pàgina </li></ul></ul></ul><ul><ul><ul><li>Contingut específic </li></ul></ul></ul><ul><ul><ul><li>Canvas </li></ul></ul></ul><ul><ul><ul><li>Elements de formulari </li></ul></ul></ul><ul><ul><ul><li>Aplicacions Web Offline </li></ul></ul></ul><ul><ul><ul><li>Bases de dades locals </li></ul></ul></ul><ul><ul><ul><li>Web workers </li></ul></ul></ul><ul><ul><ul><li>Geolocalització </li></ul></ul></ul><ul><ul><ul><li>No més etiquetes de presentació </li></ul></ul></ul>CSS <basefont> <big> <center> <font> <s> <strike> <tt> <u> <frame>
  23. 23. Noves tecnologies Web SVG Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Què és? </li></ul></ul><ul><ul><li>Scalable Vector Graphics (W3C) </li></ul></ul><ul><ul><li>Basat en XML i integrable amb HTML5 </li></ul></ul><ul><ul><li>Suport natiu en els principals navegadors Web </li></ul></ul><ul><ul><li>(inclus IE des de IE9!) </li></ul></ul>
  24. 24. Noves tecnologies Web SVG Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Per què? </li></ul></ul><ul><ul><li>Format obert per gràfics vectorials (a la Web) </li></ul></ul><ul><ul><li>Interficies d’usuari escalables </li></ul></ul><ul><ul><li>Formes vectorials en DOM </li></ul></ul>
  25. 25. Noves tecnologies Web SVG vs. Canvas Jornada Nous Reptes de CEPHIS per al 2011 SVG Canvas (HTML5) <ul><li>A nivell de vectors </li></ul><ul><li>Independent de la resolució </li></ul><ul><li>Animacions en format declaratiu </li></ul><ul><li>Tots els objectes son accessibles (DOM) </li></ul><ul><li>Ideal per gràfics vectorials i GUI </li></ul><ul><li>Temps de càrrega depén de la complexitat (DOM) </li></ul><ul><li>A nivell de píxel </li></ul><ul><li>Menor temps de càrrega </li></ul><ul><li>Rendiment constant – tot son píxels </li></ul><ul><li>Conversió directa a .png o .jpg </li></ul><ul><li>Ideal per gràfics raster </li></ul><ul><li>No hi ha API DOM per qualsevol objecte – queda fora de control JS </li></ul><ul><li>No existeix la línia de temps </li></ul><ul><li>Menys funcions pel renderitzat de text </li></ul>
  26. 26. Noves tecnologies Web SMIL Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Què és? </li></ul></ul><ul><ul><li>Synchronized Multimedia Integration Language (W3C) </li></ul></ul><ul><ul><li>Sincronització, temporització, animacions, transicions </li></ul></ul><ul><ul><li> concepte de temps </li></ul></ul><ul><ul><li>Basat en XML i integrable amb SVG </li></ul></ul>
  27. 27. Noves tecnologies Web SMIL Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Per què? </li></ul></ul><ul><ul><li>Animacions en format declaratiu (i en DOM) </li></ul></ul><ul><ul><li>Sincronització de continguts </li></ul></ul><ul><ul><li>Línia de temps sense JavaScript </li></ul></ul>
  28. 28. Noves tecnologies Web SMIL vs. JavaScript Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>Exemple: El·lipse oscil·lant </li></ul></ul><ul><li>Menys codi i més simple </li></ul><ul><li>Concepte de temps implícit </li></ul><ul><li>Animacions integrades com a objecte en el document </li></ul><ul><li>Dependència de les etiquetes definides </li></ul><ul><li> Sempre ens quedarà JS </li></ul>
  29. 29. Jornada Nous Reptes de CEPHIS per al 2011 <ul><li>Demos </li></ul><ul><ul><li>Video amb HTML5 i SVG </li></ul></ul><ul><ul><li>Filtres amb SVG </li></ul></ul><ul><ul><li>Sincronització de contingut amb SMIL </li></ul></ul>
  30. 30. Noves tecnologies Web SMIL vs. JavaScript Jornada Nous Reptes de CEPHIS per al 2011 <ul><ul><li>En JS, setTimeout() i setInterval() permeten actualitzacions repetides per modificar atributs d’alguns obj. de la pàgina </li></ul></ul><ul><ul><li>En JS, el temps d’actualització depén del temps de refresc (màquines diferents  velocitats diferents) </li></ul></ul><ul><ul><li>En JS, per crear múltiples animacions independents: </li></ul></ul><ul><ul><ul><li>Es crea un gran bucle que es repeteix cada N segons </li></ul></ul></ul><ul><ul><ul><ul><li>Totes les animacions han de ser múltiples de N </li></ul></ul></ul></ul><ul><ul><ul><li>Es creen múltiples bucles amb N independents </li></ul></ul></ul><ul><ul><ul><ul><li>La sincronia entre diferents bucles l’ha de controlar el programador i tendeix a disipar-se al llarg el temps </li></ul></ul></ul></ul><ul><ul><li>Amb SMIL aquestes decisions passen del dissenyador al navegador  Filosofia HTML5 !! </li></ul></ul>

×