web 2.0 : impacts sur les ihmsusers.polytech.unice.fr/~occello/web2/cours_web2_ihm01.pdf ·...

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

Web 2.0 :Impacts sur les IHMs

Module IHM01SI5 – Master IFI


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

Analyse des besoins

Conception

Conception logicielle

Codage

Tests Unitaires

Tests d’intégration

Tests UtilisateursEvaluation ergonomique

Boîtes à outilsMécanismes généraux

Modèle d’architecture logicielle

Espace de conceptionPropriétés ergonomiques


Web2.0 : nouveaux usages


Evolution d'Internet:point de vue des usages

Admin

Utilisateurs

Web1.0Web1.0 Web2.0Web2.0

consultent

publieAdmin

Utilisateurs

consultent

publieAdmin

gère

Utilisateurs/communauté

Interagissent

(RSS, services web, mashups)

Admin

gère

Utilisateurs/communauté

contribuentcontribuent


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é


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


Une nouvelle vague d'évolution de Internet arrive déjà !

e-mail

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


Les interfaces riches


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


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


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


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 brefAsynchronous Javascript And XML

Serveurweb

Navigateur réseau

requête HTML

IHM InterprèteJavascript

appel Javascript

HTML + CSS

données XML


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


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

Source : http://java.sun.com/developer/technicalArticles/J2EE/AJAX/RealtimeValidation/


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


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


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


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

ClientFlash player

réseau

requête HTML

Appli SWF


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


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


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


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)

Synthèse sur les RIAs


Les mondes virtuels


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


“ 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 ?


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 Lifehttp://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é



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


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 ...


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)


Échanges entre SL et l'extérieur

HTTP GET/POST to an external resource

Scripting

WebMapAPI

Display a map of a given region of Second Life through JavaScript calls

XML data

Export

ExchangeRiskAPIGet a risk level in exchanging L$

with a given avatar/accountImport

Vidéo, powerpoint, sound, animation, shapes


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 »

Nouveaux types d'applications envisagés


Présence des marques


San Diego State University

Présence des universités


Présence culturelle

Taj Mahal

Tour Eiffel

Big Ben

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


Présence politique


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 ...


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 ?


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 ?


Alors ? 3D-Web ou WebOS ?Nivea

u d'

inte

ract

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


Quelques liens intéressants ...• Interfaces riches

– Actualité des RIAshttp://www.riapedia.com/

– Tutorial et demos sur Ajaxhttp://www.xul.fr/xml-ajax.html

– Des cours en ligne autour des techno Ajaxhttp://www.javapassion.com/ajaxcodecamp/

– Tutoriaux sur Flexhttp://www.flex-tutorial.fr/

– Librairie de composants UI Flex gratuitshttp://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

web 2.0 : impacts sur les ihmsusers.polytech.unice.fr/~occello/web2/cours_web2_ihm01.pdf ·...

Documents