Cours Web2 Ihm01

Web 2.
0 :
Impacts sur les IHMs
Module IHM01
SI5 – Master IFI
(c) 2008, Occello Audrey, IHM01 / Web2.0 - 1 -

Plan du cours
• Web2.0 : nouveaux usages d'Internet
• Les interfaces riches ou RIA (Rich Internet Applications)
• Les mondes virtuels
Analyse des besoins

Evaluation ergonomique Tests Utilisateurs
Espace de conception
Conception Propriétés ergonomiques
Tests d’intégration
Conception logicielle Modèle d’architecture
Tests Unitaires logicielle
Boîtes à outils
Codage
Mécanismes généraux

Web2.0 : nouveaux usages

Evolution d'Internet:
point de vue des usages
Web1.0 Web2.0
Admin Admin Admin Admin
publie publie gère gère
Interagissent
(RSS, services
web, mashups)
consultent consultent contribuent contribuent
Utilisateurs Utilisateurs
Utilisateurs/communauté Utilisateurs/communauté
Web2.0, définition et points clé
 Met l'accent sur l'agilité et la réutilisabilité des applis :
 Focalisation sur les services rendus et sur les données mais pas sur
les applications
 Faiblement couplé pour faciliter l’assemblage de services en
applications
 Faciliter la réutilisabilité des contenus
 Implication des utilisateurs comme acteurs du service rendu

 Plus le service est utilisé, plus il s’améliore
 Plus le service est utilisé, plus il devient intéressant
 Le Web2.0 qualifie les interfaces permettant aux

internautes d'interagir sur le contenu des pages et entre
eux

Du web1.0 vers le web2.0 : synthèse
Depuis… …Vers…
• Contemplatif • Participatif
• Contenu propriétaire • Contenu collectif (wikis)
• Tri arborescent (taxonomie) • Tri par tags (“folksonomy”)
• “Webscraping” • Services web & mashups
• Sites perso • Blogs, réseaux sociaux
• Britannica online • Wikipedia

• Ofoto • Flickr
• mp3.com • Napster
• amazon • eBay
• Google • iGoogle
Enrichissement des interfaces (RIA)

Une nouvelle vague d'évolution de
Internet arrive déjà !
 D’avantage d’informations ont été produites ces dernières 30 années
que durant les 5000 ans précédents !
 Surcharge de l'information & des canaux de communication
e-mail
mails journaux
audio/video
IM podcast/webcast
chat
RSS téléphone
Adapter les interfaces à deux aspects essentiels

de l'être humain : notre nature innée sociale et
visuelle (mondes virtuels)
Les interfaces riches

Limites ergonomiques du web1.0
 Navigateur = outil générique d'affichage
 Logique de navigation (enchaînement de pages) déterminée par le
serveur
 Interruption des activités de l'utilisateur durant le

traitement d'une requête
 L'utilisateur doit attendre la page suivante générée par le serveur
 L'utilisateur ne peut effectuer d'autres opérations pendant qu'il
attend une réponse
 Perte du contexte opérationnel suite au rafraîchissement

 L'utilisateur perd la position de scrolling dans la page
 L'utilisateur doit réanalyser entièrement toute nouvelle page

Idées derrières les interfaces riches
 Logique de présentation déplacée coté client mais l’état du
service (les données) reste côté serveur
 Toutes les interactions de l’utilisateur ne nécessitent pas
l'interrogation du serveur (échanges client/serveur limités)
 L'utilisateur continue ses activités durant le traitement d'une
requête (communication asynchrone)
 Échange des données plutôt que de la présentation (une fois la
page initiale chargée) – i.e. : sans redessiner entièrement la page
 Rich Internet Application (RIA) qualifie les applications

internet dont l’interface utilisateur se rapproche d’une
application « desktop » classique
Gains en ergonomie, interactivité, rapidité, bande

passante, etc
Solutions RIAs disponibles
 AJAX n'est pas un outil mais un ensemble de techno open
source éprouvées
 Utilisation combinée nouvelle
 Offres propriétaires (par ordre de maturité)

 Adobe Flex :
http://www.adobe.com/support/documentation/en/flex/
 Microsoft Silverlight :
http://www.silverlight.net
 Sun JavaFX :
http://java.sun.com/javafx/
 ...

AJAX en bref
Asynchronous Javascript And XML
 Interaction de l'utilisateur via le navigateur

 Lancement d'une requête HTTP à partir de Javascript
 Mise à jour partielle de l'interface coté client avec des
données du serveur au format XML
réseau
Navigateur
appel requête
Javascript HTML
Interprète Serveur
IHM
Javascript web
HTML + données
CSS XML

AJAX = DOM + CSS + Javascript +
XMLhttpRequest
 Javascript
 intervient lorsqu'un événement est déclenché sur la page
 sert de "glue" pour tout le fonctionnement de l'interface
 réalise les communications avec le serveur via la classe
XMLhttpRequest
 DOM (Document Object Model)

 sert à représenter les pages web de manière structurées
 CSS (Cascading Style Sheets)

 permet une séparation contenu/présentation
 modifiable par le code Javascript

Exemple d'utilisation d'AJAX
Validation coté serveur sans rechargement de la page
Source : http://java.sun.com/developer/technicalArticles/J2EE/AJAX/RealtimeValidation/
Exemple d'utilisation d'AJAX
Validation coté serveur sans rechargement de la page
Source : http://java.sun.com/developer/technicalArticles/J2EE/AJAX/RealtimeValidation/
Outillage autour de AJAX
 Bibliothèques pour une indépendance vis à vis des
navigateurs
 fonctions Javascript pour la gestion des communications,
manipulation de DOM, gestion des événements, etc
 widgets de haut niveau
 exemples : Prototype, jQuery, Dojo, Script.aculo.us, Yahoo UI
library, ...
 Frameworks pour éviter de manipuler le Javascript

directement
 bibliothèques + IDE
 exemples en Java : GWT (Google Web Toolkit), Echo, DWR (Direct
Web Remoting)
 exemples en .Net : ASP.Net AJAX, Projet Volta (GWT pour .Net)

Cas de GWT :
Développer, débugger, tester en Java
 Développement en Java (mais pas standard)
 Traduction automatique en Javascript/CSS
 Bibliothèque de widgets proche de Swing
 Composition graphique des interfaces

 GWT designer (plug-in Eclipse)
 GWT editor (NetBeans)
 CSS utilisé pour customiser les widgets
 Possibilité d’appeler des services distants via RPC

Les avantages et inconvénients de
AJAX/GWT
 De manière générale :
 L'option du navigateur JavaScript doit être activée sinon
certaines widgets ne fonctionnent pas (bookmarks, boutons
précédent/suivant, etc)
 Des différences de comportement entre navigateurs si
développement “artisanal”
 Spécifiquement à GWT :
 Intégration facilitée avec les autres frameworks (Struts, Spring,
J2EE etc.)
 Support pour l'internationalisation et l'historique
 Code généré difficile à debugger
 Bibliothèque de widgets pas très riche

Flex en bref
 Application SWF (Shockwave Flash) intégrée à une page HTML
 Déploiement de la page HTML sur un serveur de présentation Flex
 Accès à la page par un navigateur via une URL comme une page HTML
classique
 Téléchargement de l'appli SWF sur le client
 Accès à des services distants via des requêtes HTTP, SOAP ou RPC
(échange de données en XML)
réseau
Serveur de
requête presentation Flex
Client HTML Serveur
Flash player d'application
Appli
SWF

FLEX = MXML + AS3 + RSL
 MXML
 met en forme de l’application (positionnement des composants UI,
navigation)
 définit l’accès aux sources de données serveur
 fait la liaison entre les composants UI et les données
 AS3 (ActionScript3)
 décrit la logique applicative nécessaire coté client
 RSL (Runtime Shared Library)

 permet de partager des composants UI et des librairies entre
plusieurs fichiers SWF

Outillage autour de Flex
 SDK gratuit : compilateur + bibliothèque composants
graphiques + bibliothèque services applicatifs
(glisser/déposer, animation, liaison des données; ect)
 permet de générer une application SWF à partir de MXML/AS3
 Flash player
 est le plugin à rajouter au navigateur pour interpréter le byte code
d'une appli Flex
 Flex Builder
 outil de développement, pas obligatoire
 disponible en Standalone ou en plugin Eclipse
 utile surtout pour débugger et composer graphiquement les
interfaces
Les avantages de Flex
 Rendu identique sur la plupart des navigateurs et des
systèmes d’exploitation
 Bibliothèque de composants graphiques riches et soignés
 Plus facile à apprendre que GWT

Synthèse sur les RIAs
 RIA = le meilleur du client léger et du client lourd
 RIA & conception des interfaces

 Séparer présentation - logique – données
 Briques d'IHM réutilisables
 Nécessité d'installer un plugin dans le navigateur et forte

concurrence sur les technologies
 Multiplication des technologies sur le poste de travail
 Quid de l'accessibilité (normes W3C)

Les mondes virtuels

Genèse des mondes virtuels
Jeux de rôle (en ligne) massivement multi-joueur (MMORG)
Réseaux sociaux
Systèmes d’information géographique
Mondes virtuels
Qu'est ce qu'un monde virtuel ?
 “ Monde créé artificiellement par un programme informatique et
hébergeant une communauté d'utilisateurs présents sous forme
d'avatars et pouvant s'y déplacer et y interagir ” (source Wikipedia)
 Ingrédients de base :
 IHM représentant l'espace entièrement de façon visuelle
 Présence humaine sous la forme d'avatars (attributs sociaux)
 Interactions en temps réel
 Espace partagé et persistant permettant à de nombreux utilisateurs de
participer de manière collaborative
 Quelques exemples :

Exemple de Second Life
http://secondlife.com/
 Propriété de Linden Lab (Philip Rosedale), accès tout public en 2003
 Mais tout ce qui est créé est la propriété de ces utilisateurs
 Personnalisation de l'avatar :
forme, cheveux, peau, vêtements, etc

 Interactions avec d'autres utilisateurs :
chat, IM, VOIP, langage corporel
 Navigation en marchant, courant, volant
 L'avatar se subtilise à la souris
 Disparition des niveaux d'excentricité

 Construction du monde et donc de l'IHM (formes géométriques +
textures + animations) !
 Le contenu fait partie intégrante de l'IHM

 Achat, vente et mise en location de terrains (abonnement spécial)
 Achat et vente d'objets virtuels mais aussi réels
 Emplois (réceptionnistes, guides, danseurs, animateurs, vendeurs, etc)
 Transactions en Linden dollars (échangeables en dollars réels !)
Source : Reuters

Quelques chiffres ...
 Environ 2000 nouvelles inscriptions chaque jour
 Nb d'utilisateur en ligne croit de 20% par mois (18000 en
décembre 2006, 42000 actuellement
 Nb total de comptes : 15 millions
 2 utilisateurs sur 3 créent du contenu
 5000 serveurs supportant 34 terabytes de contenu
 Certains gagnent 200,000 $/an sur SL

 Premier $millionaire :
Ailin Graef/Anshe Chung a gagné 2M $ en 30 mois
(http://www.anshechung.com/)

Animations : Linden Script Language (LSL)
 Langage événementiel, intégré au client SL, C/Java-like
 200+ fonctions built-in et 33 événements (Touch, Attach, ...) pour :
– Ajouter des animations sur les objets et les avatars
– Bouger les objets
– Ouvrir des notes
– Lancer des liens HTTP/S dans des navigateurs standards
– Exécuter des services web externes
– ...
default {
state_entry() {
llSay(0, "Hello, Avatar!");
}
touch_start(integer total_number) {
llSay(0, "Touched.");
}
}

Échanges entre SL et l'extérieur
XML data
Display a map of a given
region of Second Life
through JavaScript calls Export
WebMap
API
Scripting
HTTP GET/POST to an
external resource
ExchangeRisk
Get a risk level in exchanging L$ API Import
with a given avatar/account
Vidéo, powerpoint, sound, animation, shapes

Nouveaux types d'applications envisagés
 Communication & collaboration immersives
– Présence des « Autres » permet l'interaction
– Espace collaboratif intégré (+ réel que visio ou téléconf)
 Simulation & répétition peu coûteuses

– Simuler des scénarios en grandeur nature
(incendies, accidents, etc)
– Répéter des gestes et les améliorer
(interventions chirurgicales, etc)

Nouveaux types d'applications envisagés
 Education
– Simplifier les concepts en les visualisant et manipulant en 3D et en
utilisant des métaphores du quotidien
– Améliorer la qualité des cours à distance
 Domaines métiers
– Prévoir les nouvelles tendances
– Tester des produits/services/concepts en avant première
– Publicité/marketing, créer un « buzz »
Présence des marques

Présence des universités
San Diego State University

Présence culturelle
Big Ben
Tour Eiffel
Taj Mahal
Et aussi :
Le Louvre,
la cathédrale de Cologne,
Venise, New york, ...

Présence politique

Et aussi ...
 Les médias tels Reuters, Endemol, MTV, la BBC qui
organisent des événements en ligne
 Sites internet tel que Amazon

 Mais plus les banques et casinos !

Vers un internet en 3D ?
 Les mondes virtuels remplaçant les pages Internet
 La téléportation remplaçant la navigation via les URLs
 La présence de l'avatar remplaçant un nickname, photo, etc
 Le tout intégré avec l'internet 2D d'aujourd'hui dans des

navigateurs nouvelle génération

Vers un internet en 3D ? Est ce illusoire ?
 Aujourd’hui, environ 45 mondes virtuels regroupent près de 350
millions d’utilisateurs (hors MMORPG) (source : K Zero)
 1/5 des internautes sont dans un réseau social (source : Ifop, 2007)
 << By the end of 2011, 80 % of active Internet users (and Fortune 500
enterprises) will have a “second life”, but not necessarily in Second
Life >> (source : Gartner Inc, avril 2007)
 Plus aller plus loin dans l'amélioration de l'expérience utilisateur

 Ordinateurs + rapides, graphismes + réalistes, bande passante accrue
 Des équipements à porter sur soi (wearable computer)
 Des standards pour favoriser l'interoperabilité entre “les mondes”
 Quid des moteurs de recherche

 Quid de l'accessibilité (normes W3C)
Alors ? 3D-Web ou WebOS ?
Web 3.0
Explorer/
Emporter
Co-Créer
2010-2020
Web 2.0
Niveau d'interactivité
Partager Participer
Web 1.0 2000-2010
Consulter Rechercher
1990-2000
Temps
Quelques liens intéressants ...
• Interfaces riches
– Actualité des RIAs
http://www.riapedia.com/
– Tutorial et demos sur Ajax
http://www.xul.fr/xml-ajax.html
– Des cours en ligne autour des techno Ajax
http://www.javapassion.com/ajaxcodecamp/
– Tutoriaux sur Flex
http://www.flex-tutorial.fr/
– Librairie de composants UI Flex gratuits
http://code.google.com/p/flexlib/wiki/ComponentList
• Mondes virtuels
– Actualité des mondes virtuels
http://www.metaverse3d.com/
– Toute l'actualité de Second Life vue par Reuters
http://secondlife.reuters.com/
– Projet sur l'amélioration de l'IHM du client SL
http://wiki.secondlife.com/wiki/User_Interface_Improvements

Cours Web2 Ihm01

Transféré par

Droits d'auteur :

Formats disponibles

Cours Web2 Ihm01

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours Web2 Ihm01

Transféré par

Droits d'auteur :

Formats disponibles

Web 2.

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 1 -

Analyse des besoins

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 2 -

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 3 -

Admin Admin Admin Admin

publie publie gère gère

consultent consultent contribuent contribuent

 Implication des utilisateurs comme acteurs du service rendu

 Le Web2.0 qualifie les interfaces permettant aux

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 5 -

• Britannica online • Wikipedia

Enrichissement des interfaces (RIA)

Adapter les interfaces à deux aspects essentiels

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 8 -

 Interruption des activités de l'utilisateur durant le

 Perte du contexte opérationnel suite au rafraîchissement

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 9 -

 Rich Internet Application (RIA) qualifie les applications

Gains en ergonomie, interactivité, rapidité, bande

 Offres propriétaires (par ordre de maturité)

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 11 -

 Interaction de l'utilisateur via le navigateur

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 12 -

 DOM (Document Object Model)

 CSS (Cascading Style Sheets)

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 13 -

 Frameworks pour éviter de manipuler le Javascript

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 16 -

 Bibliothèque de widgets proche de Swing

 Composition graphique des interfaces

 CSS utilisé pour customiser les widgets

 Possibilité d’appeler des services distants via RPC

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 17 -

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 18 -

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 19 -

 RSL (Runtime Shared Library)

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 20 -

 Bibliothèque de composants graphiques riches et soignés

 Plus facile à apprendre que GWT

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 22 -

 RIA = le meilleur du client léger et du client lourd

 RIA & conception des interfaces

 Nécessité d'installer un plugin dans le navigateur et forte

 Quid de l'accessibilité (normes W3C)

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 23 -

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 24 -

Systèmes d’information géographique

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 26 -

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 27 -

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 28 -

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 29 -

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 30 -

 2 utilisateurs sur 3 créent du contenu

 5000 serveurs supportant 34 terabytes de contenu

 Certains gagnent 200,000 $/an sur SL

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 31 -

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 32 -

Vidéo, powerpoint, sound, animation, shapes