Chap 1 Le Interfaces Richesv140
Upcoming SlideShare
Loading in...5
×
 

Chap 1 Le Interfaces Richesv140

on

  • 2,293 views

Présentation des interfaces riches

Présentation des interfaces riches

Statistics

Views

Total Views
2,293
Views on SlideShare
2,285
Embed Views
8

Actions

Likes
1
Downloads
17
Comments
0

2 Embeds 8

http://www.slideshare.net 7
http://www.moodle-france.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 43 pages 20 exemples Gerder des exemples pour les autre cours Presentation ajax et flex

Chap 1 Le Interfaces Richesv140 Chap 1 Le Interfaces Richesv140 Presentation Transcript

  • 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
  • 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
  • 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 utilisateur exceptionnelle.
    • 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-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.
  • 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.com Configuration 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
    • 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.
  • 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
  • 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
    • 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 page cinq 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 Contenu Charte graphique Dialectes XML Langages pour l’ interactivité Les feuilles de styles CSS Expérience utilisateur
  • Comparaison javascript LZX OpenLaszlo actionscript MXML Flex de Adobe javascript XHTML Ajax du consortium Langage de script Contenu Technologies
  • 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 sur le 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