chap 1 le interfaces richesv140

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


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


Plan

Définition d’interfaces riches Exemples RichCommerce Exemples Rich Internet Application Exemples Dashboard Quelques conclusions


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


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


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)


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)


Plan

Définition d’interfaces riches Exemples richCommerce Exemples Rich internet Application Exemples Dashboard Quelques conclusions


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.


Exemples 1: choisir sa voiture


Acheter un téléphone:


Exemple 3 richCommerce

Voir la source et les effets de transition et de fluidité


Exemple 4 richCommerce

Click-Shirt.comConfiguration de t-shirts pour l’achat


Plan

Définition d’interfaces riches Exemples richCommerce Exemples Rich internet Application Exemples Dashboard


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.


CoolBook : contenu web 2.0


Scribd: contenu web 2.0


Que constate-t-on ?

Utilisation

- onglets- glisser déposer

Exploration en profondeur - l’information se présente en couche


Portail personnalisé en Ajax

Le portail personnalisé Netvibes.fr

Qui connaît ?


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


Ria Ajax : agrégateur de fil RSS


Google Docs

Google Docs est une suite bureautique entièrement en ligne et réalisé en Ajax (framework ext js)


Les technologies ajax

On constate que Ajax - javascript- feuilles de style- objet XMLHttpRequest - XHR


Application RIA: calendrier

Quel technologie ? A quoi cela ressemble ?


Plan

Définition d’interfaces riches Exemples richCommerce Exemples Rich internet Application Exemples Dashboard


Exemples Dashboard 1

View source


Exemples Dashbord III

Business objet techniqueForage d’information


Plan

Définition d’interfaces riches Exemples richCommerce Exemples Rich internet Application Exemples Dashboard Quelques conclusions


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


On rassemble dans une pagecinq pages

5 pages en une avec onglets


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)


Un framework IA classiques

Dialectes XML

Langages pour l’ interactivité

Les feuilles de styles CSS

Expérienceutilisateur

Contenu

Chartegraphique


Comparaison

Technologies Contenu Langage de script

Ajax du consortium

XHTML javascript

Flex de Adobe MXML actionscript

OpenLaszlo LZX javascript


Quelques faiblesses des IA

Pas d’historique de pages L’accessibilité peut être un problème Beaucoup plus complexes à progarmmer


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


Plan

Définition d’interfaces riches Exemples RichCommerce Exemples Rich internet Application Exemples Dashboard Quelques conclusions Réferences


Références


Références indispensables


La suite ….

Exemples interfaces riches

Exemples ajax

Ajax dans le code

chap 1 le interfaces richesv140

Education

exemples dashbord

application web

interfaces riches et

ria web

phnomne web

contenu web

os web

interfaces riches est