Web 2.0 - GTI780 & MTI780 - ETS - A08

Web 2.0Web 2.0

Montréal, octobre 2008Montréal, octobre 2008GTI-780 / MTI-780GTI-780 / MTI-780

Sujets spéciaux en TI

Le Web 2.0 : concepts et outils

École de technologie supérieure

par

Claude Coulombe


Web 2.0 - OrigineWeb 2.0 - Origine

* Source: Markus Angermeier http://kosmar.de/wp-content/web20map.png


Web 2.0 - OrigineWeb 2.0 - Origine

Tendance perçue amenant à la définition Tendance perçue amenant à la définition d'une 2e génération de sites et de services d'une 2e génération de sites et de services WebWeb

Première conférence « O'Reilly Web 2.0 » en Première conférence « O'Reilly Web 2.0 » en 2004 2004


Web 2.0Web 2.0 – – Google Maps, l'application « phare »Google Maps, l'application « phare »

* Lancé le 8 février 2005


Web 2.0 – Exemples Web 2.0 – Exemples •Google Maps Google Maps http://maps.google.comhttp://maps.google.com

•Wikipedia Wikipedia http://fr.wikipedia.org/wiki/Pagina_principalehttp://fr.wikipedia.org/wiki/Pagina_principale

•You Tube You Tube http://www.youtube.comhttp://www.youtube.com

•Flickr Flickr http://www.flickr.comhttp://www.flickr.com

•Delicious Delicious http://delicious.comhttp://delicious.com

•Gmail Gmail http://mail.google.comhttp://mail.google.com

•Netvibes Netvibes http://www.netvibes.comhttp://www.netvibes.com

•Facebook Facebook http://www.facebook.comhttp://www.facebook.com

•ebayebay http://www.ebay.comhttp://www.ebay.com

http://maps.google.com/

http://fr.wikipedia.org/wiki/Pagina_principale

http://www.youtube.com/

http://www.flickr.com/

http://delicious.com/

http://mail.google.com/

http://www.netvibes.com/

http://www.facebook.com/

http://www.ebay.com/


Web 2.0Web 2.0 – – Un exemple Québécois!Un exemple Québécois!

http://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Home

OpenSyllabus : un éditeur structuré de plan de cours


Comprendre le Web 2.0Comprendre le Web 2.0

Web 2.0Web 2.0

* Source Clipart : http://www.clipart.com


Web 2.0 Web 2.0 –– Applications types Applications types

* Comme une application bureautique s'exécutant localement.

Réseaux sociaux ou sites de réseautage - Réseaux sociaux ou sites de réseautage - MySpace, Ning, LinkedInMySpace, Ning, LinkedIn

Applications Web riches (RIA) – Applications Web riches (RIA) – iTunes, You Tube, FlickriTunes, You Tube, Flickr

Applications « comme une application bureautique » Applications « comme une application bureautique » (Desktop-like)* - (Desktop-like)* - OpenSyllabusOpenSyllabus

Applications collaboratives - Applications collaboratives - Google Docs, Basecamp, ZohoGoogle Docs, Basecamp, Zoho

Blogues – Blogues – Blogger, wordpress.comBlogger, wordpress.com

Wikis – Wikis – Wikipedia, ConfluenceWikipedia, Confluence

Sites de partage - Sites de partage - Flickr, Delicious, Wikipedia, You Tube, SlideShare, AmazonFlickr, Delicious, Wikipedia, You Tube, SlideShare, Amazon

Sites de nouvelles avec vote – Sites de nouvelles avec vote – Digg, RedditDigg, Reddit Folksonomie (Folksonomy) – Folksonomie (Folksonomy) – Yahoo!, Flickr, Delicious, Technorati, DiggYahoo!, Flickr, Delicious, Technorati, Digg

Webagrégats (Mashups) – Webagrégats (Mashups) – Netvibes, iGoogle, PageFlakes, BloglinesNetvibes, iGoogle, PageFlakes, Bloglines

Outils de communication – Outils de communication – Gmail, Skype, MeeboGmail, Skype, Meebo


Web 2.0 Web 2.0 –– Patrons d'applicationsPatrons d'applications



Web 2.0 Web 2.0 –– Patrons d'applicationsPatrons d'applications

* Source : R. Dewsbury 2008

Conteneur (Container) : application avec une structure de style Conteneur (Container) : application avec une structure de style plugiciel (plugin) qui contient un ensemble de petites applications plugiciel (plugin) qui contient un ensemble de petites applications ou utilitaires ou utilitaires (Netvibes)(Netvibes)

Agrégateur / Webagrégat (Aggregator, Mashup) : application qui Agrégateur / Webagrégat (Aggregator, Mashup) : application qui combine plusieurs sources de données dans une même interface combine plusieurs sources de données dans une même interface (Google Map)(Google Map)

Espace de travail (Workspace) : application basée sur un Espace de travail (Workspace) : application basée sur un document et un ensemble d'outils non-intrusifs pour travailler document et un ensemble d'outils non-intrusifs pour travailler dessus dessus (OpenSyllabus, Wiki)(OpenSyllabus, Wiki)

Outil de collaboration (Collaborator) : application qui permet à Outil de collaboration (Collaborator) : application qui permet à plusieurs utilisateurs d'être ensembles et de communiquer plusieurs utilisateurs d'être ensembles et de communiquer (Skype)(Skype)

Tableau de bord (Manager) : application qui fournit une interface Tableau de bord (Manager) : application qui fournit une interface pour accéder et gérer une grosse base de donnéespour accéder et gérer une grosse base de données

Réseau social (Social Network) : application qui permet aux Réseau social (Social Network) : application qui permet aux utilisateurs d'entrer des profils et du contenu, de former des utilisateurs d'entrer des profils et du contenu, de former des groupes et d'interagir avec d'autres partageant ces intérêts groupes et d'interagir avec d'autres partageant ces intérêts (Ning)(Ning)


Web 2.0 Web 2.0 –– Composantes d'applicationsComposantes d'applications



Web 2.0 Web 2.0 –– Composantes d'applicationsComposantes d'applications

* Source : R. Dewsbury 2008

Wiki :outil collaboratif de création de contenu. Le wiki permet à Wiki :outil collaboratif de création de contenu. Le wiki permet à un groupe de produire en collaboration des contenus, sans être un groupe de produire en collaboration des contenus, sans être au même endroit au même moment.au même endroit au même moment. http://fr.wikipedia.org/wiki/Wikihttp://fr.wikipedia.org/wiki/Wiki

Fils RSS : syndication de contenuFils RSS : syndication de contenu http://fr.wikipedia.org/wiki/RSS_(format)http://fr.wikipedia.org/wiki/RSS_(format)

Blogue : outil de création de contenu dont les entrées constituent Blogue : outil de création de contenu dont les entrées constituent un journal personnel qui sont présentées en ordre chronologique un journal personnel qui sont présentées en ordre chronologique inverse. Essentiellement des opinions personnelles sur différents inverse. Essentiellement des opinions personnelles sur différents sujets ou autour d'une thématique particulière. Contenu parfois sujets ou autour d'une thématique particulière. Contenu parfois enrichis de liens, de photos, de contenus audios ou vidéos. Le enrichis de liens, de photos, de contenus audios ou vidéos. Le blogue offre la possibilité aux visiteurs de commenter.blogue offre la possibilité aux visiteurs de commenter.http://fr.wikipedia.org/wiki/Bloghttp://fr.wikipedia.org/wiki/Blog

Outils de partage de photos, de baladodiffusions (podcast), de Outils de partage de photos, de baladodiffusions (podcast), de vidéos, de signets et de documents textuelsvidéos, de signets et de documents textuels

Outils de discussion Web : synchrone (ex. messagerie Outils de discussion Web : synchrone (ex. messagerie instantanée) ou asynchrone (ex. courriel ou forum) instantanée) ou asynchrone (ex. courriel ou forum) http://fr.wikipedia.org/wiki/Forum_Internethttp://fr.wikipedia.org/wiki/Forum_Internet

http://fr.wikipedia.org/wiki/Wiki

http://fr.wikipedia.org/wiki/Blog

http://fr.wikipedia.org/wiki/Forum_Internet


Web 2.0 Web 2.0 –– Nouveaux designs, vieilles technos! Nouveaux designs, vieilles technos!



Web 2.0 Web 2.0 –– Nouveaux designs, vieilles technos! Nouveaux designs, vieilles technos!

Le Web 2.0 n'implique pas beaucoup de nouvelles technologies, Le Web 2.0 n'implique pas beaucoup de nouvelles technologies, mais plutôt de nouvelles manières d'utiliser le Web.mais plutôt de nouvelles manières d'utiliser le Web.

TCP/IP – HTTP - HTML – XMLTCP/IP – HTTP - HTML – XML Architectures : Client / Serveur, SOA*, Services webArchitectures : Client / Serveur, SOA*, Services web Bases de données SQL (au coeur du Web 2.0)**Bases de données SQL (au coeur du Web 2.0)** Développement logiciel : cycles très court, toujours en béta, Développement logiciel : cycles très court, toujours en béta,

sortie rapide et fréquente, méthodes agiles, tests automatisés, sortie rapide et fréquente, méthodes agiles, tests automatisés, maintenance continuemaintenance continue

Bande passante plus élevée – Internet haute vitesse - MobilitéBande passante plus élevée – Internet haute vitesse - Mobilité Standards Web de base : XHTML – CSS – DOM – JavaScriptStandards Web de base : XHTML – CSS – DOM – JavaScript Vidéo et audio numériqueVidéo et audio numérique Réutilisation & transformation facile des données Réutilisation & transformation facile des données Standards avancés du Web : Ajax – RSS – JSON – REST – Standards avancés du Web : Ajax – RSS – JSON – REST –

COMETCOMET

* SOA : Architecture orientée services ** On parle « d'Infoware »


Web 2.0 – Web 2.0 – « L'expérience-utilisateur »« L'expérience-utilisateur »



Facilite la participation, la production de contenus, la Facilite la participation, la production de contenus, la collaboration et le partage entre les utilisateurs*collaboration et le partage entre les utilisateurs*

Simplicité - Convivialité - Interactivité - ErgonomieSimplicité - Convivialité - Interactivité - Ergonomie Interfaces web au comportement similaire aux interfaces Interfaces web au comportement similaire aux interfaces

des logiciels qui s'exécutent localementdes logiciels qui s'exécutent localement Interfaces riches et réactivesInterfaces riches et réactives Conception centrée sur l'utilisateurConception centrée sur l'utilisateur Sollicite l'opinion de l'utilisateurSollicite l'opinion de l'utilisateur

Adaptation fine aux besoins de l'utilisateurAdaptation fine aux besoins de l'utilisateur (customization) (customization)

Processus de qualité totale Processus de qualité totale (genre Kaizen)(genre Kaizen)

Comme les saucisses : un plus grand nombre d'utilisateurs Comme les saucisses : un plus grand nombre d'utilisateurs entraîne une meilleure applicationentraîne une meilleure application

Web 2.0 – Web 2.0 – « L'expérience-utilisateur »« L'expérience-utilisateur »

* Vision originale de l'inventeur du Web, Tim Berners-Lee


Évolution des interfaces utilisateurs Évolution des interfaces utilisateurs



Évolution des interfaces utilisateurs Évolution des interfaces utilisateurs Cartes perforées, gros boutons, dérouleurs de Cartes perforées, gros boutons, dérouleurs de

rubans et lumières clignotantes (1965-1975)rubans et lumières clignotantes (1965-1975)

Terminaux, micro-ordinateurs (Apple II, IBM PC) Terminaux, micro-ordinateurs (Apple II, IBM PC)

clavier, affichage de textes souvent en vert... clavier, affichage de textes souvent en vert...

(1976-1983)(1976-1983)

Interfaces graphiques, le Mac d'Apple (1984-1994)Interfaces graphiques, le Mac d'Apple (1984-1994)

Web 1.0 – formulaires HTML avec le bouton Web 1.0 – formulaires HTML avec le bouton

"submit" (1994-2004)"submit" (1994-2004)

Web 2.0 – AJAX, RIA (2005-aujourd'hui)Web 2.0 – AJAX, RIA (2005-aujourd'hui)


Web 2.0 – Aspects économiquesWeb 2.0 – Aspects économiques



Web 2.0 – Aspects économiquesWeb 2.0 – Aspects économiques Miser sur la Longue Traîne (The Long Tail, Chris Anderson, Miser sur la Longue Traîne (The Long Tail, Chris Anderson,

Wired 2004, Wired 2004, http://thelongtail.comhttp://thelongtail.com), i.e. niches), i.e. niches

Marketing viral – moteur de rechercheMarketing viral – moteur de recherche

Miser sur le libre-service des utilisateursMiser sur le libre-service des utilisateurs

Miser sur la valeur ajoutée par les utilisateursMiser sur la valeur ajoutée par les utilisateurs

Miser sur l'intelligence collectiveMiser sur l'intelligence collective

Miser sur le partage des contenusMiser sur le partage des contenus

Exploiter les données des utilisateurs (Data Mining)Exploiter les données des utilisateurs (Data Mining)

Les données sont de l'orLes données sont de l'or

Le modèle économique dominant demeure la publicitéLe modèle économique dominant demeure la publicité

L'échec de FriendsterL'échec de Friendster http://www.nytimes.com/2006/10/15/business/yourmoney/15friend.html?_r=2&oref=slogin&oref=sloginhttp://www.nytimes.com/2006/10/15/business/yourmoney/15friend.html?_r=2&oref=slogin&oref=slogin

http://thelongtail.com/

http://www.nytimes.com/2006/10/15/business/yourmoney/15friend.html?_r=2&oref=slogin&oref=slogin


Web 2.0 - Web 2.0 - Avantages & inconvénientsAvantages & inconvénients



Web 2.0 - InconvénientsWeb 2.0 - Inconvénients Effet « de mode »Effet « de mode » Problème des droits d'auteur, contrefaçonProblème des droits d'auteur, contrefaçon Utilisation abusive des données personnelles des Utilisation abusive des données personnelles des

utilisateurs par les propriétaires des sitesutilisateurs par les propriétaires des sites Menaces et atteintes à la vie privéeMenaces et atteintes à la vie privée Risque que les utilisateurs deviennent otages des sites qui Risque que les utilisateurs deviennent otages des sites qui

abritent leurs données personnelles (Data lock-in)*abritent leurs données personnelles (Data lock-in)* Contenus violents, racistes, sexistes, pornographiques, faux Contenus violents, racistes, sexistes, pornographiques, faux

ou mensongers...ou mensongers... L'aspect sécurité est à surveillerL'aspect sécurité est à surveiller Problèmes de fiabilité de l'information publiéeProblèmes de fiabilité de l'information publiée

* Après le « hardware lock-in » et le « software lock-in » selon Tim O'Reilly


Web 2.0 - AvantagesWeb 2.0 - Avantages Démocratisation des moyens de production et de diffusion Démocratisation des moyens de production et de diffusion

d'informations et de contenus audiovisuelsd'informations et de contenus audiovisuels

Contenu généré par les utilisateurs, les citoyensContenu généré par les utilisateurs, les citoyens

Diffusion et production internationaleDiffusion et production internationale

Au plan technique Au plan technique

Plus sécuritaire face aux logiciels malveillantsPlus sécuritaire face aux logiciels malveillants

Réponses rapides aux actions de l'utilisateurRéponses rapides aux actions de l'utilisateur

Applications Web riches, rapides et légèresApplications Web riches, rapides et légères

Pas de long téléchargement, ni d'installationPas de long téléchargement, ni d'installation

Compatibilité avec tous les fureteurs WebCompatibilité avec tous les fureteurs Web

Le fureteur devient la plateformeLe fureteur devient la plateforme


ConclusionConclusion

* Source TIME Magazine janvier 2007


ConclusionConclusion

La chose la plus importante « L'expérience-utilisateur»

Synonyme de Web 2.0 : « Web participatif »

Deux caractéristiques du Web 2.0 : Participation active et génération des contenus par les utilisateurs

Interfaces simples, agréables et ergonomiques


QuestionsQuestions

??


Web 2.0 - GTI780 & MTI780 - ETS - A08

Technology

Transcript of Web 2.0 - GTI780 & MTI780 - ETS - A08