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

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

 Web2.0 : nouveaux usages

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

 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é
(c) 2008, Occello Audrey, IHM01 / Web2.0 - 4 -
 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

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

 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)

(c) 2008, Occello Audrey, IHM01 / Web2.0 - 6 -
 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)
(c) 2008, Occello Audrey, IHM01 / Web2.0 - 7 -
 Les interfaces riches

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

 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

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

 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
(c) 2008, Occello Audrey, IHM01 / Web2.0 - 10 -
 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/
 ...

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

 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

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

 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

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

 Exemple d'utilisation d'AJAX
Validation coté serveur sans rechargement de la page

Source : http://java.sun.com/developer/technicalArticles/J2EE/AJAX/RealtimeValidation/
(c) 2008, Occello Audrey, IHM01 / Web2.0 - 14 -
 Exemple d'utilisation d'AJAX
Validation coté serveur sans rechargement de la page

Source : http://java.sun.com/developer/technicalArticles/J2EE/AJAX/RealtimeValidation/
(c) 2008, Occello Audrey, IHM01 / Web2.0 - 15 -
 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)

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

 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

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

 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

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

 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

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

 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

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

 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
(c) 2008, Occello Audrey, IHM01 / Web2.0 - 21 -
 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

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

 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)

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

 Les mondes virtuels

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

 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
(c) 2008, Occello Audrey, IHM01 / Web2.0 - 25 -
 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 :

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

 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

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

 Exemple de Second Life
http://secondlife.com/
 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é

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

 Exemple de Second Life
http://secondlife.com/
 Construction du monde et donc de l'IHM (formes géométriques +
textures + animations) !
 Le contenu fait partie intégrante de l'IHM

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

 Exemple de Second Life
http://secondlife.com/
 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

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

 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/)

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

 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.");
}
}

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

 É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

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

 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)

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

 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 »
(c) 2008, Occello Audrey, IHM01 / Web2.0 - 35 -
 Présence des marques

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

 Présence des universités

San Diego State University

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

 Présence culturelle
Big Ben

Tour Eiffel

Taj Mahal

Et aussi :
Le Louvre,
la cathédrale de Cologne,
Venise, New york, ...

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

 Présence politique

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

 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 !

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

 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

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

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)
(c) 2008, Occello Audrey, IHM01 / Web2.0 - 42 -
 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
(c) 2008, Occello Audrey, IHM01 / Web2.0 - 43 -
 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

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