Web social
                         Sujets spéciaux en TI

                    Le Web 2.0 : concepts et outils

          ...
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'application...
Réseautage social en ligne




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   Montréal, novembre 2008
Réseautage social en ligne
   Une application de réseau social en ligne (ou site de
   réseautage), comme MySpace ou Faceb...
Web social - Patron d'application




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   Montréal, novembre 2...
Web social - Patron d'application
   Réseau social (Social Network) : application qui
   permet aux utilisateurs d'entrer ...
Sites de réseau social
 Le premier site Internet de réseautage social fut
 www.classmates.com toujours en activité depuis ...
Friendster
Cependant le « boum » se produisit autour de 2002
avec entre autres le site Friendster www.friendster.com




d...
MySpace
Dépassé par MySpace en 2004 www.MySpace.com
qui compterait 122 millions d'utilisateurs et enregistre
des revenus d...
FaceBook
Lui-même dépassé par FaceBook www.FaceBook.com
en 2007 qui compte 132 millions d'utilisateurs et qui
déclare des ...
Réseaux d'affaires
Certains réseaux comme www.LinkedIn.com misent sur
les contacts ou relations d'affaires




           ...
Web social –                 Composantes d'applications




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com ...
Web social –                     Composantes d'applications
   Espace personnel comportant un profil (coordonnées, âge, s...
Web social –           Applications tierces
 En plus d'un ensemble d'applications de base fournies
  par l'opérateur du s...
Site de réseau social -                           Avantages & inconvénients




GTI-780 / MTI-780   * Source Clipart : htt...
Site de réseau social -                                                  Inconvénients
   Effet « de mode »
   Menaces e...
Site de réseau social -                                  Avantages
Démocratisation des moyens de production et de diffusio...
Gadgets


             Gadgets




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   Montréal, novembre 2008
Gadgets - définition
  Les gadgets (ou widgets) sont des mini sites web, en général de
 petits blocs de contenu autonomes,...
Conteneur de gadgets - Netvibes




GTI-780 / MTI-780       Montréal, novembre 2008
Conteneur de gadgets - iGoogle




GTI-780 / MTI-780       Montréal, novembre 2008
Architecture à base de gadgets
 Basée sur le patron d'applications conteneur (Container) :
application avec une structure ...
GWT – Atelier Java de gadgets?
 GWT produit déjà des applications clientes en pur HTML et
JavaSCript très proches parentes...
GWT & gadget – Un peu de code...
                 package com.google.gwt.gadgets.sample.hellogadgets.client;

            ...
Gadgets - Avantages & inconvénients




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   Montréal, novembre...
Gadgets - Inconvénients
 « Phénomène de mode »
 Tendance à la multiplication des gadgets et des services d'utilité douteus...
Gadgets - Avantages
 Couplage faible
 Favorise la réutilisation
 Facile à développer
 Légers et peu exigeants en bande pas...
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...
Norme OpenSocial



             OpenSocial




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   Montréal, ...
OpenSocial
 Définit un format XML pour les applications, comprenant l'interface-
utilisateur (HTML/CSS/Javascript) et des ...
OpenSocial – un peu de code
Demande d'information sur un ami...
function getFriendData() {

    var req = opensocial.newDa...
OpenSocial – Services Rest
 Basé sur la norme AtomPub (Atom publishing protocol) et JSON
/people/{guid}/@all
-- Retourne l...
Shindig


             Shindig




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   Montréal, novembre 2008
Serveur Shindig
 Implantation de référence de la norme OpenSocial
 en Java et en PHP
 Projet Apache en logiciel libre et s...
Serveur Shindig
1. Requête à Shindig via /social/rest ou
  /social/rpc (REST API ou JSON-RPC API)
2. La servlet créée un R...
OpenSocial - Avantages & inconvénients




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   Montréal, novem...
OpenSocial - Inconvénients
Contraintes apportées par la norme
Plusieurs vieilles versions de gadgets Google
Difficulté inh...
OpenSocial - Avantages
  Présente les avantages usuels d'une norme : interopérabilité,
portabilité, création d'une masse c...
Questions




                                   ?

GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   Montré...
Upcoming SlideShare
Loading in …5
×

Web social - GTI780 & MTI780 - ETS - A08

1,237 views

Published on

Présentation sur le Web social dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l\'Ecole de technologie supérieure, Montréal, Automne 2008

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,237
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
33
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web social - GTI780 & MTI780 - ETS - A08

  1. 1. 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
  2. 2. Web social GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, novembre 2008
  3. 3. 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. GTI-780 / MTI-780 Montréal, novembre 2008
  4. 4. Réseautage social en ligne GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, novembre 2008
  5. 5. 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. GTI-780 / MTI-780 Montréal, novembre 2008
  6. 6. Web social - Patron d'application GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, novembre 2008
  7. 7. 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 GTI-780 / MTI-780 Montréal, novembre 2008
  8. 8. Sites de réseau social Le premier site Internet de réseautage social fut www.classmates.com toujours en activité depuis 1995. GTI-780 / MTI-780 Montréal, novembre 2008
  9. 9. 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 GTI-780 / MTI-780 Montréal, novembre 2008
  10. 10. MySpace Dépassé par MySpace en 2004 www.MySpace.com qui compterait 122 millions d'utilisateurs et enregistre des revenus de 900 M$ GTI-780 / MTI-780 Montréal, novembre 2008
  11. 11. 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$* GTI-780 / MTI-780 Montréal, novembre 2008
  12. 12. 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 GTI-780 / MTI-780 Montréal, novembre 2008
  13. 13. Web social – Composantes d'applications GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, novembre 2008
  14. 14. 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
  15. 15. 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 GTI-780 / MTI-780 Montréal, novembre 2008
  16. 16. Site de réseau social - Avantages & inconvénients GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, novembre 2008
  17. 17. 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
  18. 18. 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 GTI-780 / MTI-780 Montréal, novembre 2008
  19. 19. Gadgets Gadgets GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, novembre 2008
  20. 20. 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 GTI-780 / MTI-780 Montréal, novembre 2008
  21. 21. Conteneur de gadgets - Netvibes GTI-780 / MTI-780 Montréal, novembre 2008
  22. 22. Conteneur de gadgets - iGoogle GTI-780 / MTI-780 Montréal, novembre 2008
  23. 23. 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) GTI-780 / MTI-780 Montréal, novembre 2008
  24. 24. 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
  25. 25. 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
  26. 26. Gadgets - Avantages & inconvénients GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, novembre 2008
  27. 27. 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 GTI-780 / MTI-780 Montréal, novembre 2008
  28. 28. 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 GTI-780 / MTI-780 Montréal, novembre 2008
  29. 29. Norme OpenSocial GTI-780 / MTI-780 * Source image : http://code.google.com/apis/opensocial/ Montréal, novembre 2008
  30. 30. 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
  31. 31. Norme OpenSocial OpenSocial GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, novembre 2008
  32. 32. 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) GTI-780 / MTI-780 Montréal, novembre 2008
  33. 33. 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
  34. 34. 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
  35. 35. Shindig Shindig GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, novembre 2008
  36. 36. 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/ GTI-780 / MTI-780 Montréal, novembre 2008
  37. 37. 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
  38. 38. OpenSocial - Avantages & inconvénients GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, novembre 2008
  39. 39. 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é GTI-780 / MTI-780 Montréal, novembre 2008
  40. 40. 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é GTI-780 / MTI-780 Montréal, novembre 2008
  41. 41. Questions ? GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, novembre 2008

×