Web social - GTI780 & MTI780 - ETS - A08

Web social
Sujets spéciaux en TI

Le Web 2.0 : concepts et outils

École de technologie supérieure

par

Claude Coulombe

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

Web social

GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, novembre 2008

Web social
À la base, Internet est un réseau, un réseau de
serveurs de contenus et de plus en plus un
réseau d'applications mais également un réseau
d'utilisateurs.

Il est donc tout à fait naturel, dans le contexte
du Web 2.0, où l'accent est mis sur les
utilisateurs, que soient apparues des
applications Web qui mettent en valeur les
réseaux d'utilisateurs d'Internet.


Réseautage social en ligne


Réseautage social en ligne
Une application de réseau social en ligne (ou site de
réseautage), comme MySpace ou Facebook, permet à
ses utilisateurs d'entrer des informations personnelles
(profils) et d'interagir avec d'autres utilisateurs.

Ces informations permettent de retrouver des
utilisateurs ou « pseudo amis » partageant les mêmes
intérêts. Les utilisateurs peuvent former des groupes
et y inviter d'autres personnes. Les interactions entre
membres comportent des discussions et le partage de
photos, de baladodiffusions, de vidéos, de liens et de
documents.

Web social - Patron d'application


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


Sites de réseau social
Le premier site Internet de réseautage social fut
www.classmates.com toujours en activité depuis 1995.


Friendster
Cependant le « boum » se produisit autour de 2002
avec entre autres le site Friendster www.friendster.com

dont le succès s'étiola après le rejet d'une offre de 30
M$ USD par Google, l'année de sa fondation
http://www.nytimes.com/2006/10/15/business/yourmoney/15friend.html?_r=2&oref=slogin&oref=slogin


MySpace
Dépassé par MySpace en 2004 www.MySpace.com
qui compterait 122 millions d'utilisateurs et enregistre
des revenus de 900 M$


FaceBook
Lui-même dépassé par FaceBook www.FaceBook.com
en 2007 qui compte 132 millions d'utilisateurs et qui
déclare des revenus de 350 M$*


Réseaux d'affaires
Certains réseaux comme www.LinkedIn.com misent sur
les contacts ou relations d'affaires

* Source : http://rdfweb.org/foafcorp/intro.html


Web social – Composantes d'applications


Web social – Composantes d'applications
 Espace personnel comportant un profil (coordonnées, âge, sexe,
nationalité, niveau d'études, photo) et des centres d'intérêt
 L'utilisateur peut organiser et personnaliser son espace
 Outil pour créer des liens avec ses « amis » et gérer des listes d'amis et
d'amis communs (FOAF : friends of a friend)
 Outils pour créer, inviter et gérer des groupes
 Outil pour créer, proposer et gérer des activités
 Fils RSS : syndication de contenu http://fr.wikipedia.org/wiki/RSS_(format)
 Blogue : journal personnel qui contient essentiellement des opinions
personnelles sur différents sujets ou d'une thématique particulière. Offre
la possibilité aux visiteurs de commenter* http://fr.wikipedia.org/wiki/Blog
 Outils de partage de photos, de baladodiffusions (podcast), de vidéos, de
signets et de documents textuels
 Outils de conversation Web : synchrone (ex. messagerie instantanée) ou
asynchrone (ex. courriel ou forum) http://fr.wikipedia.org/wiki/Forum_Internet

GTI-780 / MTI-780 * Note: ou plus simplement un livre d'or Montréal, novembre 2008

Web social – Applications tierces
 En plus d'un ensemble d'applications de base fournies
par l'opérateur du site, beaucoup de sites sont ouverts
aux applications tierces
 Cette ouverture contribue au succès des sites
 Certaines applications tierces font l'objet d'un partage
des revenus publicitaires
 8000 applications tierces sur Facebook en 2007
 Des outils et des canevas d'applications (FrameWorks)
sont proposés aux développeurs pour faciliter leur
travail
 Cependant, les normes sont souvent propriétaires
comme le fameux FBML, une variante du HTML pour
FaceBook

Site de réseau social - Avantages & inconvénients


Site de réseau social - Inconvénients
 Effet « de mode »
 Menaces et atteintes à la vie privée
 Utilisation abusive des données personnelles des utilisateurs par les propriétaires
des sites
 Publicité envahissante. Par exemple en 2007, lancement du logiciel publicitaire
Beacon de FaceBook qui communique de l'information sur les achats des membres
à leurs « amis »... (maintenant avec consentement)
 Activité consommatrice de temps
 Amitiés factices et éphémères... Peut-on avoir 400 vrais amis?
 Risque que les utilisateurs deviennent otages des sites qui abritent leurs données
personnelles (Data lock-in)*
 Problèmes de compatibilité entre les différents réseaux
 Problème des droits d'auteur, contrefaçon
 Contenus violents, racistes, pornographiques, faux, mensongers
 L'aspect sécurité est à surveiller
 Au plan technique, nombreuses APIs et normes propriétaires

* Après le « hardware lock-in » et le « software lock-in »
GTI-780 / MTI-780 selon Tim O'Reilly Montréal, novembre 2008

Site de réseau social - Avantages
Démocratisation des moyens de production et de diffusion

d'informations, de musique et de contenus audiovisuels

Permet de se créer un site personnalisé et à son image

Partage des centres d'intérêt et des passions

Permet de retrouver des copains ou des amis

Diffusion internationale

Divertissement a priori peu coûteux et accessible

Au plan technique

Réponses rapides aux actions de l'utilisateur

Applications Web riches, rapides et légères

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

Compatibilité avec tous les fureteurs Web

Le fureteur devient la plateforme


Gadgets

Gadgets


Gadgets - définition
Les gadgets (ou widgets) sont des mini sites web, en général de
petits blocs de contenu autonomes, placés dans une page web ou
dans un conteneurs de gadgets
Popularisés par la norme porlet (portail Excite) mais qui
nécessitait le rechargement complet de la page, remplacés par les
webagrégats (ou aggrégateur de gadgets) en Ajax au
rafraîchissement asynchrone
Les gadgets sont de petites applications constituées de : XML,
HTML et JavaScript auxquels s'ajoutent des ressources comme
des images et des fichiers CSS
XML sert en général à décrire la configuration du gadget
HTML sert de support au contenu statique
JavaSript fournit l'interactivité (le comportement dynamique) et
assure les communications avec les services Web externes


Conteneur de gadgets - Netvibes


Conteneur de gadgets - iGoogle


Architecture à base de gadgets
Basée sur le patron d'applications conteneur (Container) :
application avec une structure de style plugiciel (plugin) qui
contient un ensemble de petites applications ou utilitaires
Conteneur offre un bac à sable (sandbox) pratique et
sécuritaire pour l'exécution de gadgets
Popularisée par les sites web sociaux
Services Web légers (du style REST) et composants logiciels
légers (gadgets à base de XHTML et JavaScript)


GWT – Atelier Java de gadgets?
GWT produit déjà des applications clientes en pur HTML et
JavaSCript très proches parentes des gadgets
En effet, on peut utiliser les atouts de GWT pour produire à
partir d'un code Java des gadgets en JavaScript optimisé
Voici la recette* :
Google API Libraries for Google Web Toolkit
http://code.google.com/docreader/#p=gwt-google-apis&s=gwt-google-apis&t=GadgetsGettingStarted

* Note : ne produit pas encore un gadget à la norme
GTI-780 / MTI-780 OpenSocial, mais selon la norme Google Gadget Montréal, novembre 2008

GWT & gadget – Un peu de code...
package com.google.gwt.gadgets.sample.hellogadgets.client;

import com.google.gwt.gadgets.client.Gadget;

...

@ModulePrefs( title = quot;Mon premier gadget avec GWTquot;, author = quot;Claude Coulombequot;, height = 300 )

public class HelloGadget extends Gadget<HelloPreferences> {

protected void init(final HelloPreferences prefs) {

Image img = new Image(quot;http://code.google.com/webtoolkit/logo-185x175.pngquot;);

Button button = new Button(quot;Cliquez-moi!quot;);

VerticalPanel vPanel = new VerticalPanel();

vPanel.setWidth(quot;100%quot;);

vPanel.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER);

vPanel.add(img);

vPanel.add(button);

RootPanel.get().add(vPanel)

button.addClickListener(new ClickListener() {

public void onClick(Widget sender) {

Window.alert(quot;Mon premier gadget avec GWTquot;);

}

});

}

GTI-780 / MTI-780 } Montréal, novembre 2008

Gadgets - Avantages & inconvénients


Gadgets - Inconvénients
« Phénomène de mode »
Tendance à la multiplication des gadgets et des services d'utilité douteuse
Difficile à tester
Problème de sécurité
Problème d'interopérabilité
Limité quant à la complexité si l'on développe directement en JavaScript


Gadgets - Avantages
Couplage faible
Favorise la réutilisation
Facile à développer
Légers et peu exigeants en bande passante et capacité des serveurs
Déploiement facile sur plusieurs sites Web sociaux
Facile pour l'utilisateur d'ajouter / retirer des gadgets et de personnaliser


Norme OpenSocial

GTI-780 / MTI-780 * Source image : http://code.google.com/apis/opensocial/ Montréal, novembre 2008

OpenSocial
Créé en réaction* à la prolifération de normes et d'APIs propriétaires ou
spécifiques à un seul site (novembre 2007)
OpenSocial se veut une norme libre et ouverte qui définit une API
commune à un ensemble d'applications sociales sur un grand nombre de
sites Web différents
Combinaison des Google gadgets, d'un conteneur de gadgets et d'APIs de
communication normalisés
Partenaires de l'OpenSocial Foundation: Engage.com, Friendster, Google,
hi5, Hyves, imeem, LinkedIn, MySpace, Ning, Oracle, orkut, Plaxo,
Salesforce.com, Six Apart, Tianji, Viadeo, XING, Yahoo!
http://www.opensocial.org/
http://code.google.com/apis/opensocial

GTI-780 / MTI-780 * Note : beaucoup en réaction à FaceBook Montréal, novembre 2008

Norme OpenSocial

OpenSocial


OpenSocial
Définit un format XML pour les applications, comprenant l'interface-
utilisateur (HTML/CSS/Javascript) et des métadonnées (titre, auteur,
courriel, taille du gadget, préférences)
Définit des APIs pour des services Web pour l'échange de données,
incluant des services REST et de la persistance de données
Service d'authentification
Trois principaux services de la norme OpenSocial :
1) Personnes & Relations (amis)
(accès par programmation aux informations sur les amis)
2) Activités
(Qu'est ce vos amis veulent faire? Faites savoir ce que vous faites)
3) Persistance (données de l'application, données des gadgets)
(Fournir un état sans le serveur, partager des données avec vos amis)

OpenSocial – un peu de code
Demande d'information sur un ami...
function getFriendData() {

var req = opensocial.newDataRequest();

req.add(req.newFetchPersonRequest(VIEWER),'viewer');

req.add(req.newFetchPeopleRequest(VIEWER_FRIENDS),'viewerFriends');

req.send(onLoadFriends);

}

Fonction de rappel (Callback) des données sur un ami...
function onLoadFriends(resp) {

var viewer = resp.get('viewer').getData();

var viewerFriends = resp.get('viewerFriends').getData();

var html = 'Friends of ' + viewer.getDisplayName() + ‘:<br><ul>’;

viewerFriends.each(function(person) {

html += '<li>' + person.getDisplayName()+'</li>';

});

html += '</ul>';

document.getElementById('friends').innerHTML = html;

}GTI-780 / MTI-780 * Source code : http://www.google.com Montréal, novembre 2008

OpenSocial – Services Rest
Basé sur la norme AtomPub (Atom publishing protocol) et JSON
/people/{guid}/@all
-- Retourne l'ensemble de toutes les personnes en relation avec l'usager {guid}
/people/{guid}/@friends
-- Retourne l'ensemble de toutes les personnes amies de l'usager {guid}
-- i.e. un sous-ensemble de @all
/people/{guid}/@self
-- Retour l'information contenue dans le profil de l'usager {guid}
/activities/{guid}/@self
-- Retourne l'ensemble de toutes les activités générées par l'usager {guid}
/activities/{guid}/@friends
-- Retourne l'ensemble de toutes les activités des amis de l'usager {guid}

GTI-780 / MTI-780 * Source code : http://www.google.com Montréal, novembre 2008

Shindig

Shindig


Serveur Shindig
Implantation de référence de la norme OpenSocial
en Java et en PHP
Projet Apache en logiciel libre et supporté par un consortium d'entreprises
mené par Google
Comporte 4 parties principales :
1) Conteneur de gadgets JavaScript (IU, sécurité, communication, préf.)
2) Serveur de gadgets (spécifications XML vers JS + HTML)
3) Conteneur OpenSocial (couche au-dessus du conteneur de gadgets) :
profils, amis, activités
4) Passerelle du serveur OpenSocial : interface vers d'autres serveurs de
contenu incluant des APIs REST
http://incubator.apache.org/shindig/


Serveur Shindig
1. Requête à Shindig via /social/rest ou
/social/rpc (REST API ou JSON-RPC API)
2. La servlet créée un RequestItem qui
analyse la requête
(2 RequestItem différents : un pour le
REST et un pour le RPC)
3. La servlet appelle le gestionnaire (handler)
approprié
4. Une des trois gestionnaires (handler) de
Shindig prend en charge la requête
(PersonHandler, ActivityHandler,
AppDataHandler)
5. Le gestionnaire (handler) de Shindig
appelle le SPI (Shindig Service Provider)
qui est défini par un ensemble d'interfaces
avec des méthodes qui retournent des
ResponseItems (des POJOs). Le SPI est
l'endroit où établir des passerelles avec les
autres modules du serveur (backend)
6. Le gestionnaire (handler) retourne un
ResponseItem qui enveloppe un seul ou un
ensemble de POJOs. La servlet peut alors
retourner cette réponse ou accumuler les
ResponseItems lors d' un traitement en lot.
7. La servlet convertit / sérialise et retourne
le ou les ResponseItem(s) en XML ou
JSON

GTI-780 / MTI-780 * Source : http://rollerweblogger.org/roller/entry/shindig_java_internals_diagram_updated Montréal, novembre 2008

OpenSocial - Avantages & inconvénients


OpenSocial - Inconvénients
Contraintes apportées par la norme
Plusieurs vieilles versions de gadgets Google
Difficulté inhérente à la création de grosses applications en HTML
et JavaScript
Difficulté inhérente au partage d'une norme par des entreprises
concurrentes
Dépendance de Google
Pas adapté aux services critiques avec des transactions sécurisées
Problème de sécurité


OpenSocial - Avantages
Présente les avantages usuels d'une norme : interopérabilité,
portabilité, création d'une masse critique, apprentissage réduit,
meilleure documentation, meilleurs outils, plus grande productivité,
réduction des coûts, pérennité de la technologie
Endossement par de grands joueurs comme Google
Permet aux applications tierces de rouler sur un plus grand
nombre de sites Web sociaux
Plus d'applications accessibles à plus de personnes
Permet aux opérateurs de sites sociaux de se concentrer sur leurs
métiers et services et de consacrer moins d'efforts sur les
développements technologiques
Selon Hal Varian : L'adoption de normes entrîne le passage d'une
compétition pour un marché vers une compétition dans un marché

Questions

?


Web social - GTI780 & MTI780 - ETS - A08

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

Similaire à Web social - GTI780 & MTI780 - ETS - A08

Similaire à Web social - GTI780 & MTI780 - ETS - A08 (20)

Plus de Claude Coulombe

Plus de Claude Coulombe (20)

Web social - GTI780 & MTI780 - ETS - A08