Web 2.0
Gérald Collaud,
François Jimenez
         Jimenez,
Jacques Monnard
Centre NTE Université de Fribourg
       NTE,
Objectifs
Disposer d’un panorama
          d un
des applications « web 2.0 »
Se familiariser avec de nouveaux outils en li...
Programme
Accueil et bienvenue
Introduction
Au cœur du web 2.0
  Gestion de signets (bookmarking)
  Blogs et fils rss
  Pa...
Cours en ligne du cours
http://moodle.unifr.ch/course/view.php?id 4994
http://moodle.unifr.ch/course/view.php?id=4994




...
Introduction
Web 2.0 :
     « we are th web »
              the  b

Web avant 2.0




                            Web 2.0




         ...
Web 2.0 :
   « we are th web »
            the  b

Web avant 2.0




                   Web 2.0


                       G...
Web 2.0 :
« we are th web »
         the  b




                    G. Collaud, F. Jimenez, J. Monnard, Web 2.0
          ...
Web 2.0 : Caractéristiques
Production de contenu avec un navigateur
Contrôle
Partage




                              G. ...
Video : quot;The Machine is Us/ing Usquot;
                                   g




4'30
http://www.youtube.com/watch?v=6g...
Web 2.0, chronologie



                 Web 2.0
                 W b20

   2003   2004    2005




                      ...
Web 2.0, des outils




                      G. Collaud, F. Jimenez, J. Monnard, Web 2.0
                                ...
http://www.go2web20.net/
Applications composites
(mashups)
(   h     )




                   G. Collaud, F. Jimenez, J. Monnard, Web 2.0
         ...
Mashup




         G. Collaud, F. Jimenez, J. Monnard, Web 2.0
                                      Prénom Nom
Mashup




         G. Collaud, F. Jimenez, J. Monnard, Web 2.0
                                      Prénom Nom
Classification
Blogs                   blogger, typepad, wordpress
Image and video sharing flickr, slide, dailymotion, you...
Web 2.0, des outils
        Blog
                                    Bureau en li
                                    B   ...
1%



     100 visiteurs




     10 contributeurs

     1 créateur

           G. Collaud, F. Jimenez, J. Monnard, Web 2....
Au cœur du web 2.0
Gestion de signets – favoris
(bookmarking)




                    G. Collaud, F. Jimenez, J. Monnard, Web 2.0
           ...
Bookmarking 2.0




         +

                  G. Collaud, F. Jimenez, J. Monnard, Web 2.0
                            ...
Bookmarking 2.0 : del.icio.us




                    G. Collaud, F. Jimenez, J. Monnard, Web 2.0
                        ...
Etiquettes (tags)




                    G. Collaud, F. Jimenez, J. Monnard, Web 2.0
                                    ...
Del.icio.us : édition




                        G. Collaud, F. Jimenez, J. Monnard, Web 2.0
                            ...
Activité 1
Gestion de signets en ligne
Del.icio.us
D li i
Les blogs
Blog = ensemble de billets (articles, notes)
classés par ordre déchronologique
Tags et catégories
Commentaires
N...
Blog web 2.0



               Billet,
               Billet article




               commentaires
                     ...
Flux RSS
Syndication : accéder au contenu d’un blog
                                 d un
depuis d’autres sites/outils
Flu...
Activité 2
Blogs et fils rss
Wordpress
W d
Pages d’accueil
personnalisables
         li bl




                   G. Collaud, F. Jimenez, J. Monnard, Web 2.0
       ...
iGoogle




          G. Collaud, F. Jimenez, J. Monnard, Web 2.0
                                       Prénom Nom
Netvibes

                   search
     météo
                              webnotes



contenu web    vidéo




        ...
Netvibes : Généralités
      “Netvibes est un concept français de p
                            p      ç       portail
   ...
Netvibes : Vue d ensemble
                              d’ensemble
Modules
                                              P...
Activité 3
Pages en ligne personnalisables
Netvibes
N t ib
Bureautique 2.0
Applications de bureautique accessibles avec un
navigateur web
  Traitement de texte
  Feuille de calcul
 ...
Bureautique 2.0
Avantages
      g
  Multi-plateformes
  Pas d'installation (un navigateur web suffit)
  Partage facilité d...
Bureautique 2.0




                  G. Collaud, F. Jimenez, J. Monnard, Web 2.0
                                        ...
Google Docs : document




                  G. Collaud, F. Jimenez, J. Monnard, Web 2.0
                                 ...
Google Docs : feuille de calcul




                     G. Collaud, F. Jimenez, J. Monnard, Web 2.0
                     ...
Google Agenda




                G. Collaud, F. Jimenez, J. Monnard, Web 2.0
                                            ...
Fichiers en ligne : box.net




                     G. Collaud, F. Jimenez, J. Monnard, Web 2.0
                         ...
Activité 4
Bureautique en ligne
Google docs
G    l d
Activité 5
Google Agenda
Images




         G. Collaud, F. Jimenez, J. Monnard, Web 2.0
                                      Prénom Nom
Flickr: Généralités
        “Flickr est un site web de partage
                                   p    g
             de p...
Flickr : vue d’ensemble
               d ensemble
Page d’accueil
                           Tags




                     ...
Flickr : édition d image
                     d’image
                 Edition de l’image en ligne
                       ...
Flickr : tags & géolocalisation




 Tags



                 Géolocalisation




                       G. Collaud, F. Ji...
Flickr : Création d’un badge
                         d un
http://www.flickr.com/badge.gne

  Personnaliser le mod le
    ...
Flickr : un peu de fun
http://flickr.com/services/

   Choisir le ser ice “Flickr to s”
              service         toys...
Activité 6
Images
Flickr
Fli k
Vidéos : Généralités
 “YouTube et Dailymotion sont des sites web
  YouTube
          d’hébergement de vidéos”
            ...
Youtube, Dailymotion
Youtube

               Dailymotion




                     G. Collaud, F. Jimenez, J. Monnard, Web ...
Vidéos: Edition de vidéo
JayCut
                      Jumpcut




 Edition de l’image
 en ligne
                      Yout...
Vidéos : intégration




                       G. Collaud, F. Jimenez, J. Monnard, Web 2.0
                              ...
Activité 7
Vidéos
Youtube
Y t b
Réseautage social
“Le réseautage social se rapporte à une catégorie
 Le
    d’applications Internet pour aider à relier de...
Réseautage social
Twitter               Facebook




                Interactions, contenus, amis,
                 actual...
Réseautage social
              E
              Exemple d’
                    l d’applications
                          ...
Démo
Prochain SlideShare
Chargement dans…5
×

Web2.0

780 vues

Publié le

Publié dans : Formation, Technologie, Design
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Web2.0

  1. 1. Web 2.0 Gérald Collaud, François Jimenez Jimenez, Jacques Monnard Centre NTE Université de Fribourg NTE,
  2. 2. Objectifs Disposer d’un panorama d un des applications « web 2.0 » Se familiariser avec de nouveaux outils en ligne Savoir sélectionner l’outil adapté au besoin Concevoir et configurer un site avec des services « web 2.0 » G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  3. 3. Programme Accueil et bienvenue Introduction Au cœur du web 2.0 Gestion de signets (bookmarking) Blogs et fils rss Pages d’accueil personnalisables + Activités Bureautique en ligne Images et vidéos en ligne (édition et partage) Réseautage social (social networking) Synthèse et conclusion G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  4. 4. Cours en ligne du cours http://moodle.unifr.ch/course/view.php?id 4994 http://moodle.unifr.ch/course/view.php?id=4994 G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  5. 5. Introduction
  6. 6. Web 2.0 : « we are th web » the b Web avant 2.0 Web 2.0 G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  7. 7. Web 2.0 : « we are th web » the b Web avant 2.0 Web 2.0 G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  8. 8. Web 2.0 : « we are th web » the b G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  9. 9. Web 2.0 : Caractéristiques Production de contenu avec un navigateur Contrôle Partage G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  10. 10. Video : quot;The Machine is Us/ing Usquot; g 4'30 http://www.youtube.com/watch?v=6gmP4nk0EOE http://www.dailymotion.com/video/x160h3_web-20-traduction p y _ G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  11. 11. Web 2.0, chronologie Web 2.0 W b20 2003 2004 2005 G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  12. 12. Web 2.0, des outils G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  13. 13. http://www.go2web20.net/
  14. 14. Applications composites (mashups) ( h ) G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  15. 15. Mashup G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  16. 16. Mashup G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  17. 17. Classification Blogs blogger, typepad, wordpress Image and video sharing flickr, slide, dailymotion, youtube, metacafe, jumpcut, motionbox pp g Mind mapping bubll.us Online desktops netvibes, pageflakes, iGoogle Online office google docs, zoho, google calendar, calendar hub Organisation voo2do, voo2do planzone Social bookmarking furl.net, del.icio.us, simpy, blinklist, stumbleUpon, blummy, spurl.net Social networking myspace, facebook, ning, linkedin Social news website scoopeo, reddit, digg, newsvine, gabbr Social web annotating g linoit, diigo, fleck, trailfire , g , , Video sharing Wiki wikipedia, jottit, wetpaint, google sites (jotspot), pbwiki G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  18. 18. Web 2.0, des outils Blog Bureau en li B ligne Social bookmarking Bureautique en li B ti ligne Partage de photos Réseautage social G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  19. 19. 1% 100 visiteurs 10 contributeurs 1 créateur G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  20. 20. Au cœur du web 2.0
  21. 21. Gestion de signets – favoris (bookmarking) G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  22. 22. Bookmarking 2.0 + G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  23. 23. Bookmarking 2.0 : del.icio.us G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  24. 24. Etiquettes (tags) G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  25. 25. Del.icio.us : édition G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  26. 26. Activité 1 Gestion de signets en ligne Del.icio.us D li i
  27. 27. Les blogs Blog = ensemble de billets (articles, notes) classés par ordre déchronologique Tags et catégories Commentaires Nombreux usages : blogs personnels, thématiques, politiques, d’entreprise, pédagogiques, … Ouvrir un blog hébergeur de blogs (Wordpress, Blogger) installer un logiciel sur un serveur G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  28. 28. Blog web 2.0 Billet, Billet article commentaires t i G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  29. 29. Flux RSS Syndication : accéder au contenu d’un blog d un depuis d’autres sites/outils Flux RSS = billets/commentaires d un blog d’un Récupérer : icône ou lien Lire : Bloglines, Google Reader, Feedreader, … Avec une application (Thunderbird) Netvibes, iGoogle, … G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  30. 30. Activité 2 Blogs et fils rss Wordpress W d
  31. 31. Pages d’accueil personnalisables li bl G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  32. 32. iGoogle G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  33. 33. Netvibes search météo webnotes contenu web vidéo G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  34. 34. Netvibes : Généralités “Netvibes est un concept français de p p ç portail personnalisable” http://netvibes.com C aque utilisateur Chaque ut sateu peut c ée sa page créer personnelle (décomposée en modules) Nombreux services disponibles Sans cesse en évolution Accès bli A è public / privé i é G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  35. 35. Netvibes : Vue d ensemble d’ensemble Modules Paramètres Public / Privé Onglets Portail Web 2.0 Page personnelle G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  36. 36. Activité 3 Pages en ligne personnalisables Netvibes N t ib
  37. 37. Bureautique 2.0 Applications de bureautique accessibles avec un navigateur web Traitement de texte Feuille de calcul Présentations Calendrier Fichiers en ligne … Exemples : Google Docs + Google Agenda ThinkFree Office Online Zoho Office Suite Box.net (fichiers en ligne) G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  38. 38. Bureautique 2.0 Avantages g Multi-plateformes Pas d'installation (un navigateur web suffit) Partage facilité des documents/agendas Documents sauvegardés à distance => accessibles de partout Coût Inconvénients Moins de fonctionnalités que les applications de bureau équivalentes Sécurité, protection des données Connexion internet requise (travail offline ?) G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  39. 39. Bureautique 2.0 G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  40. 40. Google Docs : document G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  41. 41. Google Docs : feuille de calcul G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  42. 42. Google Agenda G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  43. 43. Fichiers en ligne : box.net G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  44. 44. Activité 4 Bureautique en ligne Google docs G l d
  45. 45. Activité 5 Google Agenda
  46. 46. Images G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  47. 47. Flickr: Généralités “Flickr est un site web de partage p g de photos et de vidéos” http://flickr.com Gestion des images/videos g Tags (mots-clés) Géolocalisation Edition d’images Nombreux services Accès public / privé G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  48. 48. Flickr : vue d’ensemble d ensemble Page d’accueil Tags Edition d’image Géolocalisation G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  49. 49. Flickr : édition d image d’image Edition de l’image en ligne l image Modifier G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  50. 50. Flickr : tags & géolocalisation Tags Géolocalisation G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  51. 51. Flickr : Création d’un badge d un http://www.flickr.com/badge.gne Personnaliser le mod le module Insérer le code final dans votre blog G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  52. 52. Flickr : un peu de fun http://flickr.com/services/ Choisir le ser ice “Flickr to s” service toys” Choisir un module (ex : puzzle) Choisir une photo dans votre gallerie Presser le bouton Télécharger l’image dans votre gallerie G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  53. 53. Activité 6 Images Flickr Fli k
  54. 54. Vidéos : Généralités “YouTube et Dailymotion sont des sites web YouTube d’hébergement de vidéos” http://fr.youtube.com http://dailymotion.com Envoyer, visualiser et partager Clips, films, documentaires, … Tags g Géolocalisation Edition, annotations montage, Edition annotations, montage … Accès public / privé G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  55. 55. Youtube, Dailymotion Youtube Dailymotion G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  56. 56. Vidéos: Edition de vidéo JayCut Jumpcut Edition de l’image en ligne Youtube G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  57. 57. Vidéos : intégration G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  58. 58. Activité 7 Vidéos Youtube Y t b
  59. 59. Réseautage social “Le réseautage social se rapporte à une catégorie Le d’applications Internet pour aider à relier des personnes en employant une variété d'outils” d outils http://facebook.com http://twitter.com http://linkedin.com p Interactions multiples p Invitations Intérêts et activités communes Contenus divers G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  60. 60. Réseautage social Twitter Facebook Interactions, contenus, amis, actualités, images, …etc G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  61. 61. Réseautage social E Exemple d’ l d’applications li ti LinkedIn Twitter Facebook Myspace G. Collaud, F. Jimenez, J. Monnard, Web 2.0 Prénom Nom
  62. 62. Démo

×