chap 1 le interfaces richesv140
DESCRIPTION
Présentation des interfaces richesTRANSCRIPT
![Page 1: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/1.jpg)
Les interfaces riches et web 2.0Une révolution technique qui change
l’expérience utilisateur des sites et des application web.
Formation sur www.lecapitalhumain.net
![Page 2: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/2.jpg)
Formation sur www.lecapitalhumain.net
Objectifs de ce chapitre
Comprendre le phénomène des interfaces riches
Se familiariser aux nouveaux composants : accordeon, onglets de ces interfaces
Comprendre l’émergence d’une nouvelle métaphore : l’écran unique, le dashbord
![Page 3: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/3.jpg)
Formation sur www.lecapitalhumain.net
Plan
Définition d’interfaces riches Exemples RichCommerce Exemples Rich Internet Application Exemples Dashboard Quelques conclusions
![Page 4: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/4.jpg)
Formation sur www.lecapitalhumain.net
Plan
Définition d’interfaces riches Exemples RichCommerce Exemples Rich Internet Application Exemples Dashboard Quelques conclusions
![Page 5: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/5.jpg)
Formation sur www.lecapitalhumain.net
Présentation
Les interfaces riches ou enrichies permettent, une ergonomie et une interactivité sans précédant aux interfaces web.
Un nouveau vocabulaire d’ergonomie- onglets, accordeon, viewstack, infobulles- glisser/déposer
Une plus grande intégration multimédia- séquence video- monde 3d
![Page 6: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/6.jpg)
Formation sur www.lecapitalhumain.net
Expérience utilisateur
Les interfaces riches est un renouveau une nouvelle interaction avec les interfaces web
qui favorisent une expérience utilisateurexceptionnelle.
En somme, les sites deviennent plus facile à naviguer- on clique moins- l’information est plus facilement accessible
![Page 7: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/7.jpg)
Formation sur www.lecapitalhumain.net
Un phénomène web 2.0
Le phénomène interface riche irrigue tous les sites du web 2.0 et les sites traditionnelles.
Les sites statiques informationnels (web 1.0) Les sites de partages numériques (web 2.0) Les systèmes de gestion de contenu – cms, blog, wiki (web 2.0)
Les applications web -- RIA (web 2.0) Les widgets qui attaque les OS (web 2.0) Les boutiques en ligne – richCommerce (web 1.0)
![Page 8: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/8.jpg)
Formation sur www.lecapitalhumain.net
Les technologies IR
Les technologies d’interfaces riches les plus matures
- Ajax du consortium(2005)- Flex de Adobe (2004)
Les technologies matures mais peu connu- Openlaszlo (2000)- curl du MIT (2000)
Les technologies peu matures- Silverlight de microsoft (2007)- JavaFx de Sun (2008)
![Page 9: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/9.jpg)
Formation sur www.lecapitalhumain.net
Plan
Définition d’interfaces riches Exemples richCommerce Exemples Rich internet Application Exemples Dashboard Quelques conclusions
![Page 10: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/10.jpg)
Formation sur www.lecapitalhumain.net
RichCommerce
Voiture d’occasion Volkswagen au Royaume-UniRéalisé en Flex, cette application vous permet de trouver une voiture d’occasion en choisissant le modèle, les options et sa localisation dans le pays. Intuitif et agréable à utiliser, son utilisation sans rafraîchissement de page est très bien conçue.
![Page 11: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/11.jpg)
Formation sur www.lecapitalhumain.net
Exemples 1: choisir sa voiture
![Page 12: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/12.jpg)
Formation sur www.lecapitalhumain.net
Acheter un téléphone:
![Page 13: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/13.jpg)
Formation sur www.lecapitalhumain.net
Exemple 3 richCommerce
Voir la source et les effets de transition et de fluidité
![Page 14: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/14.jpg)
Formation sur www.lecapitalhumain.net
Exemple 4 richCommerce
Click-Shirt.comConfiguration de t-shirts pour l’achat
![Page 15: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/15.jpg)
Formation sur www.lecapitalhumain.net
Plan
Définition d’interfaces riches Exemples richCommerce Exemples Rich internet Application Exemples Dashboard
![Page 16: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/16.jpg)
Formation sur www.lecapitalhumain.net
Livre interactif web 2.0
MycoolbookCe site permets de réaliser un livre interactif à partir d’image, de vidéos ou autres. Une fois générée on obtient un livre virtuel dont on peut tourner la page. Exemple plus classique et dont il existe beaucoup d’autres copies, l’effet reste cependant toujours très surprenant.
![Page 17: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/17.jpg)
Formation sur www.lecapitalhumain.net
CoolBook : contenu web 2.0
![Page 18: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/18.jpg)
Formation sur www.lecapitalhumain.net
Scribd: contenu web 2.0
![Page 19: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/19.jpg)
Formation sur www.lecapitalhumain.net
Que constate-t-on ?
Utilisation
- onglets- glisser déposer
Exploration en profondeur - l’information se présente en couche
![Page 20: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/20.jpg)
Formation sur www.lecapitalhumain.net
Portail personnalisé en Ajax
Le portail personnalisé Netvibes.fr
Qui connaît ?
![Page 21: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/21.jpg)
Formation sur www.lecapitalhumain.net
On analyse
Glisser/ déposer LightBox Configuration des blocs /widgets Utilisation onglets pour créer une page Aucun rechargement de la page Les widgets exploite au maximum les
interfaces riches - visent à être exploiter sur les OS directement
![Page 22: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/22.jpg)
Formation sur www.lecapitalhumain.net
Ria Ajax : agrégateur de fil RSS
![Page 23: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/23.jpg)
Formation sur www.lecapitalhumain.net
Google Docs
Google Docs est une suite bureautique entièrement en ligne et réalisé en Ajax (framework ext js)
![Page 24: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/24.jpg)
Formation sur www.lecapitalhumain.net
Les technologies ajax
On constate que Ajax - javascript- feuilles de style- objet XMLHttpRequest - XHR
![Page 25: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/25.jpg)
Formation sur www.lecapitalhumain.net
Application RIA: calendrier
Quel technologie ? A quoi cela ressemble ?
![Page 26: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/26.jpg)
Formation sur www.lecapitalhumain.net
Plan
Définition d’interfaces riches Exemples richCommerce Exemples Rich internet Application Exemples Dashboard
![Page 27: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/27.jpg)
Formation sur www.lecapitalhumain.net
Exemples Dashboard 1
View source
![Page 28: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/28.jpg)
Formation sur www.lecapitalhumain.net
Exemples Dashbord III
Business objet techniqueForage d’information
![Page 29: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/29.jpg)
Formation sur www.lecapitalhumain.net
Plan
Définition d’interfaces riches Exemples richCommerce Exemples Rich internet Application Exemples Dashboard Quelques conclusions
![Page 30: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/30.jpg)
Formation sur www.lecapitalhumain.net
La métaphore du Dashboard
On passe de la métaphore du livre dont on tourne (télécharge) les pages à une page unique qui rassemble les informations sur plusieurs couches.
Le modele dashbord est l’aboutissement- convergence d ’information en un lieu unique
- simplicité de recherche d’information- nouvelle synthese : video-son-texte-diaporama
![Page 31: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/31.jpg)
Formation sur www.lecapitalhumain.net
On rassemble dans une pagecinq pages
5 pages en une avec onglets
![Page 32: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/32.jpg)
Formation sur www.lecapitalhumain.net
Les technologies IR
Les technologies d’interfaces riches les plus matures
- technologie Ajax (2005)- technologie Flex de Adobe (2004)
Les technologies matures mais peu connu- openlaszlo (2000)- curl du MIT
Les nouveaux concurrents- Silverlight de Microsoft (2007)- JavaFX Sun (2008)
![Page 33: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/33.jpg)
Formation sur www.lecapitalhumain.net
Un framework IA classiques
Dialectes XML
Langages pour l’ interactivité
Les feuilles de styles CSS
Expérienceutilisateur
Contenu
Chartegraphique
![Page 34: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/34.jpg)
Formation sur www.lecapitalhumain.net
Comparaison
Technologies Contenu Langage de script
Ajax du consortium
XHTML javascript
Flex de Adobe MXML actionscript
OpenLaszlo LZX javascript
![Page 35: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/35.jpg)
Formation sur www.lecapitalhumain.net
Quelques faiblesses des IA
Pas d’historique de pages L’accessibilité peut être un problème Beaucoup plus complexes à progarmmer
![Page 36: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/36.jpg)
Formation sur www.lecapitalhumain.net
Tendances lourdes : RIA-DIA-MIA
On constate que ces technologies veulent passer de RIA à applications autonomes surle bureau
La technologie Air d’Adobe- des applications déconnectés- des applications hors navigateur- des applications Ajax ou Flex au choix
![Page 37: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/37.jpg)
Formation sur www.lecapitalhumain.net
Plan
Définition d’interfaces riches Exemples RichCommerce Exemples Rich internet Application Exemples Dashboard Quelques conclusions Réferences
![Page 38: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/38.jpg)
Formation sur www.lecapitalhumain.net
Références
![Page 39: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/39.jpg)
Formation sur www.lecapitalhumain.net
Références indispensables
![Page 40: Chap 1 Le Interfaces Richesv140](https://reader033.vdocuments.site/reader033/viewer/2022061220/548578c0b4af9f8e0a8b4638/html5/thumbnails/40.jpg)
Formation sur www.lecapitalhumain.net
La suite ….
Exemples interfaces riches
Exemples ajax
Ajax dans le code