Les interfaces riches et web 2.0 Une révolution technique qui change l’expérience utilisateur des sites et des application...
Objectifs de ce chapitre <ul><li>Comprendre le phénomène des  interfaces riches  </li></ul><ul><li>Se familiariser aux nou...
Plan <ul><li>Définition d’interfaces riches  </li></ul><ul><li>Exemples RichCommerce </li></ul><ul><li>Exemples Rich Inter...
Plan <ul><li>Définition d’interfaces riches  </li></ul><ul><li>Exemples RichCommerce </li></ul><ul><li>Exemples Rich Inter...
Présentation <ul><li>Les interfaces riches ou enrichies permettent, une  ergonomie et une interactivité  sans précédant au...
Expérience utilisateur <ul><li>Les interfaces riches est un renouveau une nouvelle interaction avec les interfaces web  </...
Un phénomène web 2.0 <ul><li>Le phénomène interface riche irrigue tous les sites du web 2.0 et les sites traditionnelles. ...
Les technologies IR <ul><li>Les technologies d’interfaces riches les plus matures </li></ul><ul><li>- Ajax du consortium(2...
Plan <ul><li>Définition d’interfaces riches  </li></ul><ul><li>Exemples richCommerce </li></ul><ul><li>Exemples Rich inter...
RichCommerce  <ul><li>Voiture d’occasion Volkswagen au Royaume-Uni Réalisé en Flex, cette application vous permet de trouv...
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 <ul><li>Click-Shirt.com Configuration de t-shirts pour l’achat    </li></ul>
Plan <ul><li>Définition d’interfaces riches  </li></ul><ul><li>Exemples richCommerce </li></ul><ul><li>Exemples Rich inter...
Livre interactif web 2.0 <ul><li>Mycoolbook Ce site permets de réaliser un livre interactif à partir d’image, de vidéos ou...
CoolBook : contenu web 2.0
Scribd: contenu web 2.0
Que constate-t-on ? <ul><li>Utilisation  </li></ul><ul><li>- onglets - glisser déposer </li></ul><ul><li>Exploration en pr...
Portail personnalisé en Ajax <ul><li>Le portail personnalisé Netvibes.fr   </li></ul>Qui connaît ?
On analyse <ul><li>Glisser/ déposer </li></ul><ul><li>LightBox </li></ul><ul><li>Configuration des blocs /widgets  </li></...
Ria Ajax : agrégateur de fil RSS
Google Docs <ul><li>Google Docs est une suite bureautique entièrement en ligne et réalisé en Ajax (framework ext js) </li>...
Les technologies ajax <ul><li>On constate que Ajax  - javascript - feuilles de style - objet XMLHttpRequest - XHR </li></ul>
Application RIA: calendrier Quel technologie ?  A quoi cela ressemble ?
Plan <ul><li>Définition d’interfaces riches  </li></ul><ul><li>Exemples richCommerce </li></ul><ul><li>Exemples Rich inter...
Ria Tracker permet de suivre les statistiques d’un RIA
Exemples Dashboard 1 View source
Exemples Dashboard II ILLOG View source
Exemples Dashbord III Business objet technique Forage d’information
Plan <ul><li>Définition d’interfaces riches  </li></ul><ul><li>Exemples richCommerce </li></ul><ul><li>Exemples Rich inter...
La métaphore du Dashboard <ul><li>On passe de la métaphore du livre dont on tourne (télécharge) les pages à une page uniqu...
On rassemble dans une page cinq pages 5 pages en une  avec onglets
Les technologies IR <ul><li>Les technologies d’interfaces riches les plus matures </li></ul><ul><li>- technologie Ajax (20...
Un framework IA classiques Contenu  Charte graphique Dialectes XML Langages pour  l’ interactivité Les feuilles de  styles...
Comparaison javascript LZX OpenLaszlo actionscript MXML Flex de Adobe javascript XHTML Ajax du consortium Langage de scrip...
Quelques faiblesses des IA <ul><li>Pas d’historique de pages </li></ul><ul><li>L’accessibilité peut être un problème </li>...
Tendances lourdes : RIA-DIA-MIA <ul><li>On constate que ces technologies veulent  passer de RIA à applications autonomes s...
Plan <ul><li>Définition d’interfaces riches  </li></ul><ul><li>Exemples RichCommerce </li></ul><ul><li>Exemples Rich inter...
Références
Références indispensables
La suite …. Exemples interfaces riches Exemples ajax Ajax dans le code
Upcoming SlideShare
Loading in …5
×

Chap 1 Le Interfaces Richesv140

1,486
-1

Published on

Présentation des interfaces riches

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,486
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 43 pages 20 exemples Gerder des exemples pour les autre cours Presentation ajax et flex
  • Chap 1 Le Interfaces Richesv140

    1. 1. Les interfaces riches et web 2.0 Une révolution technique qui change l’expérience utilisateur des sites et des application web. Formation sur www.lecapitalhumain.net
    2. 2. Objectifs de ce chapitre <ul><li>Comprendre le phénomène des interfaces riches </li></ul><ul><li>Se familiariser aux nouveaux composants : accordeon, onglets de ces interfaces </li></ul><ul><li>Comprendre l’émergence d’une nouvelle métaphore : l’écran unique, le dashbord </li></ul>
    3. 3. Plan <ul><li>Définition d’interfaces riches </li></ul><ul><li>Exemples RichCommerce </li></ul><ul><li>Exemples Rich Internet Application </li></ul><ul><li>Exemples Dashboard </li></ul><ul><li>Quelques conclusions </li></ul>
    4. 4. Plan <ul><li>Définition d’interfaces riches </li></ul><ul><li>Exemples RichCommerce </li></ul><ul><li>Exemples Rich Internet Application </li></ul><ul><li>Exemples Dashboard </li></ul><ul><li>Quelques conclusions </li></ul>
    5. 5. Présentation <ul><li>Les interfaces riches ou enrichies permettent, une ergonomie et une interactivité sans précédant aux interfaces web. </li></ul><ul><ul><li>Un nouveau vocabulaire d’ergonomie - onglets, accordeon, viewstack, infobulles - glisser/déposer </li></ul></ul><ul><ul><li>Une plus grande intégration multimédia - séquence video - monde 3d </li></ul></ul>
    6. 6. Expérience utilisateur <ul><li>Les interfaces riches est un renouveau une nouvelle interaction avec les interfaces web </li></ul><ul><li>qui favorisent une expérience utilisateur exceptionnelle. </li></ul><ul><li>En somme, les sites deviennent plus facile à naviguer - on clique moins - l’information est plus facilement accessible </li></ul>
    7. 7. Un phénomène web 2.0 <ul><li>Le phénomène interface riche irrigue tous les sites du web 2.0 et les sites traditionnelles. </li></ul><ul><li>Les sites statiques informationnels (web 1.0) </li></ul><ul><li>Les sites de partages numériques (web 2.0) </li></ul><ul><li>Les systèmes de gestion de contenu – cms, blog, wiki (web 2.0) </li></ul><ul><li>Les applications web -- RIA (web 2.0) </li></ul><ul><li>Les widgets qui attaque les OS (web 2.0) </li></ul><ul><li>Les boutiques en ligne – richCommerce (web 1.0) </li></ul>
    8. 8. Les technologies IR <ul><li>Les technologies d’interfaces riches les plus matures </li></ul><ul><li>- Ajax du consortium(2005) - Flex de Adobe (2004) </li></ul><ul><li>Les technologies matures mais peu connu - Openlaszlo (2000) - curl du MIT (2000) </li></ul><ul><li>Les technologies peu matures - Silverlight de microsoft (2007) - JavaFx de Sun (2008) </li></ul>
    9. 9. Plan <ul><li>Définition d’interfaces riches </li></ul><ul><li>Exemples richCommerce </li></ul><ul><li>Exemples Rich internet Application </li></ul><ul><li>Exemples Dashboard </li></ul><ul><li>Quelques conclusions </li></ul>
    10. 10. RichCommerce <ul><li>Voiture d’occasion Volkswagen au Royaume-Uni Ré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. </li></ul>
    11. 11. Exemples 1: choisir sa voiture
    12. 12. Acheter un téléphone:
    13. 13. Exemple 3 richCommerce Voir la source et les effets de transition et de fluidité
    14. 14. Exemple 4 richCommerce <ul><li>Click-Shirt.com Configuration de t-shirts pour l’achat </li></ul>
    15. 15. Plan <ul><li>Définition d’interfaces riches </li></ul><ul><li>Exemples richCommerce </li></ul><ul><li>Exemples Rich internet Application </li></ul><ul><li>Exemples Dashboard </li></ul>
    16. 16. Livre interactif web 2.0 <ul><li>Mycoolbook Ce 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. </li></ul>
    17. 17. CoolBook : contenu web 2.0
    18. 18. Scribd: contenu web 2.0
    19. 19. Que constate-t-on ? <ul><li>Utilisation </li></ul><ul><li>- onglets - glisser déposer </li></ul><ul><li>Exploration en profondeur - l’information se présente en couche </li></ul>
    20. 20. Portail personnalisé en Ajax <ul><li>Le portail personnalisé Netvibes.fr </li></ul>Qui connaît ?
    21. 21. On analyse <ul><li>Glisser/ déposer </li></ul><ul><li>LightBox </li></ul><ul><li>Configuration des blocs /widgets </li></ul><ul><li>Utilisation onglets pour créer une page </li></ul><ul><li>Aucun rechargement de la page </li></ul><ul><li>Les widgets exploite au maximum les interfaces riches - visent à être exploiter sur les OS directement </li></ul>
    22. 22. Ria Ajax : agrégateur de fil RSS
    23. 23. Google Docs <ul><li>Google Docs est une suite bureautique entièrement en ligne et réalisé en Ajax (framework ext js) </li></ul>
    24. 24. Les technologies ajax <ul><li>On constate que Ajax - javascript - feuilles de style - objet XMLHttpRequest - XHR </li></ul>
    25. 25. Application RIA: calendrier Quel technologie ? A quoi cela ressemble ?
    26. 26. Plan <ul><li>Définition d’interfaces riches </li></ul><ul><li>Exemples richCommerce </li></ul><ul><li>Exemples Rich internet Application </li></ul><ul><li>Exemples Dashboard </li></ul>
    27. 27. Ria Tracker permet de suivre les statistiques d’un RIA
    28. 28. Exemples Dashboard 1 View source
    29. 29. Exemples Dashboard II ILLOG View source
    30. 30. Exemples Dashbord III Business objet technique Forage d’information
    31. 31. Plan <ul><li>Définition d’interfaces riches </li></ul><ul><li>Exemples richCommerce </li></ul><ul><li>Exemples Rich internet Application </li></ul><ul><li>Exemples Dashboard </li></ul><ul><li>Quelques conclusions </li></ul>
    32. 32. La métaphore du Dashboard <ul><li>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. </li></ul><ul><li>Le modele dashbord est l’aboutissement - convergence d ’information en un lieu unique </li></ul><ul><li>- simplicité de recherche d’information - nouvelle synthese : video-son-texte-diaporama </li></ul>
    33. 33. On rassemble dans une page cinq pages 5 pages en une avec onglets
    34. 34. Les technologies IR <ul><li>Les technologies d’interfaces riches les plus matures </li></ul><ul><li>- technologie Ajax (2005) - technologie Flex de Adobe (2004) </li></ul><ul><li>Les technologies matures mais peu connu - openlaszlo (2000) - curl du MIT </li></ul><ul><li>Les nouveaux concurrents - Silverlight de Microsoft (2007) - JavaFX Sun (2008) </li></ul>
    35. 35. Un framework IA classiques Contenu Charte graphique Dialectes XML Langages pour l’ interactivité Les feuilles de styles CSS Expérience utilisateur
    36. 36. Comparaison javascript LZX OpenLaszlo actionscript MXML Flex de Adobe javascript XHTML Ajax du consortium Langage de script Contenu Technologies
    37. 37. Quelques faiblesses des IA <ul><li>Pas d’historique de pages </li></ul><ul><li>L’accessibilité peut être un problème </li></ul><ul><li>Beaucoup plus complexes à progarmmer </li></ul>
    38. 38. Tendances lourdes : RIA-DIA-MIA <ul><li>On constate que ces technologies veulent passer de RIA à applications autonomes sur le bureau </li></ul><ul><li>La technologie Air d’Adobe - des applications déconnectés - des applications hors navigateur - des applications Ajax ou Flex au choix </li></ul>
    39. 39. Plan <ul><li>Définition d’interfaces riches </li></ul><ul><li>Exemples RichCommerce </li></ul><ul><li>Exemples Rich internet Application </li></ul><ul><li>Exemples Dashboard </li></ul><ul><li>Quelques conclusions </li></ul><ul><li>Réferences </li></ul>
    40. 40. Références
    41. 41. Références indispensables
    42. 42. La suite …. Exemples interfaces riches Exemples ajax Ajax dans le code
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×