Web 2.0 : Impacts sur les IHMs

cowseedΛογισμικό & κατασκευή λογ/κού

12 Ιουν 2012 (πριν από 5 χρόνια και 9 μέρες)

373 εμφανίσεις

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

Web2.0 : nouveaux usages d'Internet

Les interfaces riches ou RIA (Rich Internet Applications)

Les mondes virtuels

A
n
a
l
y
s
e

d
e
s

b
e
s
o
i
n
s
C
o
n
c
e
p
t
i
o
n
C
o
n
c
e
p
t
i
o
n

l
o
g
i
c
i
e
l
l
e
C
o
d
a
g
e
T
e
s
t
s

U
n
i
t
a
i
r
e
s
T
e
s
t
s

d

i
n
t
é
g
r
a
t
i
o
n
T
e
s
t
s

U
t
i
l
i
s
a
t
e
u
r
s
Evaluation ergonomique
Boîtes à outils
Mécanismes généraux
Modèle d’architecture
logicielle
Espace de conception
Propriétés ergonomiques
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
3
-
Web2.0 : nouveaux usages
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
4
-
Evolution d'Internet:
point de vue des usages
Admin
Utilisateurs
Web1.0
Web1.0
Web2.0
Web2.0
consultent
publie
Admin
Utilisateurs
consultent
publie
Admin
gère
Utilisateurs/communauté
Interagissent
(RSS, services
web, mashups)
Admin
gère
Utilisateurs/communauté
contribuent
contribuent
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
5
-

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
Web2.0, définition et points clé
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
6
-

Contemplatif

Contenu propriétaire

Tri arborescent (taxonomie)


Webscraping”

Sites perso
Depuis…
Depuis…


Vers…
Vers…

Participatif

Contenu collectif (wikis)

Tri par tags (“folksonomy”)

Services web & mashups

Blogs, réseaux sociaux

Britannica online

Ofoto

mp3.com

amazon

Google

Wikipedia

Flickr

Napster

eBay

iGoogle
Du web1.0 vers le web2.0 : synthèse
Enrichissement des interfaces (RIA)
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
7
-
Une nouvelle vague d'évolution de
Internet arrive déjà !
e-mail
IM
audio/video
Adapter les interfaces à deux aspects essentiels
de l'être humain : notre nature innée sociale et
visuelle (mondes virtuels)
mails
RSS
chat
journaux
podcast/webcast
téléphone

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

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

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
Idées derrières les interfaces riches
Gains en
ergonomie
,
interactivité
,
rapidité
, bande
passante, etc
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
11
-

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/

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

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
AJAX en bref
Asynchronous Javascript And XML
Serveur
web
Navigateur
réseau
requête
HTML
IHM
Interprète
Javascript
appel
Javascript
HTML +
CSS
données
XML
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
13
-

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
AJAX = DOM + CSS + Javascript +
XMLhttpRequest
(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
-
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
-
16
-

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)
Outillage autour de AJAX
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
17
-

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
Cas de GWT :
Développer, débugger, tester en Java
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
18
-

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
Les avantages et inconvénients de
AJAX/GWT
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
19
-

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)
Flex
en bref
Serveur
d'application
Serveur de
presentation Flex
Client
Flash player
réseau
requête
HTML
Appli
SWF
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
20
-

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
FLEX = MXML + AS3 + RSL
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
21
-

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
Outillage autour de Flex
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
22
-

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
Les avantages de Flex
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
23
-

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

M
ultiplication des technologies sur le poste de travail

Quid de l'accessibilité (normes W3C)
Synthèse sur les RIAs
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
24
-
Les mondes virtuels
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
25
-
Jeux de rôle (en ligne) massivement multi-joueur (MMORG)
Genèse des mondes virtuels
Réseaux sociaux
Mondes virtuels
Systèmes d’information géographique
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
26
-


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 :
Qu'est ce qu'un monde virtuel ?
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
27
-


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
Exemple de Second Life
http://secondlife.com/
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
28
-


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é
Exemple de Second Life
http://secondlife.com/
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
29
-


Construction du monde et donc de l'IHM (
formes géométriques +
textures + animations
) !


Le contenu fait partie intégrante de l'IHM
Exemple de Second Life
http://secondlife.com/
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
30
-


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 !)
Exemple de Second Life
http://secondlife.com/
Source : Reuters
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
31
-


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


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

}
}
Animations : Linden Script Language (LSL)
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
33
-
Échanges entre SL et l'extérieur
HTTP GET/POST to an
external resource
Scripting
WebMap
API
Display a map of a given
region of Second Life
through JavaScript calls
XML data
Export
ExchangeRisk
API
Get a risk level in exchanging L$
with a given avatar/account
Import
Vidéo, powerpoint, sound, animation, shapes
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
34
-


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


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 »
Nouveaux types d'applications
envisagés
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
36
-
Présence des marques
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
37
-
San Diego State University
Présence des universités
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
38
-
Présence culturelle
Taj Mahal
Tour Eiffel
Big Ben
Et aussi :
Le Louvre,
la cathédrale de Cologne,
Venise, New york, ...
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
39
-
Présence politique
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
40
-

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

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

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)
Vers un internet en 3D ? Est ce illusoire ?
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
43
-
Alors ? 3D-Web ou WebOS ?
Niveau d'interact
ivité
Temps
Consulter
Participer
Rechercher
Partager
Explorer/
Co-Créer
Emporter
1990-2000
2000-2010
2010-2020
Web 1.0
Web 2.0
Web 3.0
(c) 2008, Occello Audrey, IHM01 / Web2.0
-
44
-
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