web 2.0 : impacts sur les ihmsusers.polytech.unice.fr/~occello/web2/cours_web2_ihm01.pdf ·...
TRANSCRIPT
(c) 2008, Occello Audrey, IHM01 / Web2.0 - 1 -
Web 2.0 :Impacts sur les IHMs
Module IHM01SI5 – 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
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
(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.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
(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à !
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
(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 brefAsynchronous Javascript And XML
Serveurweb
Navigateur réseau
requête HTML
IHM InterprèteJavascript
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'AJAXValidation 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'AJAXValidation 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
ClientFlash 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 Multiplication 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 Lifehttp://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 Lifehttp://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 Lifehttp://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 Lifehttp://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
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
(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 ?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
(c) 2008, Occello Audrey, IHM01 / Web2.0 - 44 -
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