chap 1 le interfaces richesv140
Post on 08-Dec-2014
2.370 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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
Formation sur www.lecapitalhumain.net
Plan
Définition d’interfaces riches Exemples RichCommerce Exemples Rich Internet Application Exemples Dashboard Quelques conclusions
Formation sur www.lecapitalhumain.net
Plan
Définition d’interfaces riches Exemples RichCommerce Exemples Rich Internet Application Exemples Dashboard Quelques conclusions
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
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
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)
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)
Formation sur www.lecapitalhumain.net
Plan
Définition d’interfaces riches Exemples richCommerce Exemples Rich internet Application Exemples Dashboard Quelques conclusions
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.
Formation sur www.lecapitalhumain.net
Exemples 1: choisir sa voiture
Formation sur www.lecapitalhumain.net
Acheter un téléphone:
Formation sur www.lecapitalhumain.net
Exemple 3 richCommerce
Voir la source et les effets de transition et de fluidité
Formation sur www.lecapitalhumain.net
Exemple 4 richCommerce
Click-Shirt.comConfiguration de t-shirts pour l’achat
Formation sur www.lecapitalhumain.net
Plan
Définition d’interfaces riches Exemples richCommerce Exemples Rich internet Application Exemples Dashboard
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.
Formation sur www.lecapitalhumain.net
CoolBook : contenu web 2.0
Formation sur www.lecapitalhumain.net
Scribd: contenu web 2.0
Formation sur www.lecapitalhumain.net
Que constate-t-on ?
Utilisation
- onglets- glisser déposer
Exploration en profondeur - l’information se présente en couche
Formation sur www.lecapitalhumain.net
Portail personnalisé en Ajax
Le portail personnalisé Netvibes.fr
Qui connaît ?
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
Formation sur www.lecapitalhumain.net
Ria Ajax : agrégateur de fil RSS
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)
Formation sur www.lecapitalhumain.net
Les technologies ajax
On constate que Ajax - javascript- feuilles de style- objet XMLHttpRequest - XHR
Formation sur www.lecapitalhumain.net
Application RIA: calendrier
Quel technologie ? A quoi cela ressemble ?
Formation sur www.lecapitalhumain.net
Plan
Définition d’interfaces riches Exemples richCommerce Exemples Rich internet Application Exemples Dashboard
Formation sur www.lecapitalhumain.net
Exemples Dashboard 1
View source
Formation sur www.lecapitalhumain.net
Exemples Dashbord III
Business objet techniqueForage d’information
Formation sur www.lecapitalhumain.net
Plan
Définition d’interfaces riches Exemples richCommerce Exemples Rich internet Application Exemples Dashboard Quelques conclusions
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
Formation sur www.lecapitalhumain.net
On rassemble dans une pagecinq pages
5 pages en une avec onglets
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)
Formation sur www.lecapitalhumain.net
Un framework IA classiques
Dialectes XML
Langages pour l’ interactivité
Les feuilles de styles CSS
Expérienceutilisateur
Contenu
Chartegraphique
Formation sur www.lecapitalhumain.net
Comparaison
Technologies Contenu Langage de script
Ajax du consortium
XHTML javascript
Flex de Adobe MXML actionscript
OpenLaszlo LZX javascript
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
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
Formation sur www.lecapitalhumain.net
Plan
Définition d’interfaces riches Exemples RichCommerce Exemples Rich internet Application Exemples Dashboard Quelques conclusions Réferences
Formation sur www.lecapitalhumain.net
Références
Formation sur www.lecapitalhumain.net
Références indispensables
Formation sur www.lecapitalhumain.net
La suite ….
Exemples interfaces riches
Exemples ajax
Ajax dans le code
top related