1. Web 2.0
Gérald Collaud,
François Jimenez
Jimenez,
Jacques Monnard
Centre NTE Université de Fribourg
NTE,

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. 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. 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. Introduction

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. 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. Web 2.0 :
« we are th web »
the b
G. Collaud, F. Jimenez, J. Monnard, Web 2.0
Prénom Nom

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. 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. 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. Web 2.0, des outils
G. Collaud, F. Jimenez, J. Monnard, Web 2.0
Prénom Nom

13. http://www.go2web20.net/

14. Applications composites
(mashups)
( h )
G. Collaud, F. Jimenez, J. Monnard, Web 2.0
Prénom Nom

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

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

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. 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. 1%
100 visiteurs
10 contributeurs
1 créateur
G. Collaud, F. Jimenez, J. Monnard, Web 2.0
Prénom Nom

20. Au cœur du web 2.0

21. Gestion de signets – favoris
(bookmarking)
G. Collaud, F. Jimenez, J. Monnard, Web 2.0
Prénom Nom

22. Bookmarking 2.0
+
G. Collaud, F. Jimenez, J. Monnard, Web 2.0
Prénom Nom

23. Bookmarking 2.0 : del.icio.us
G. Collaud, F. Jimenez, J. Monnard, Web 2.0
Prénom Nom

24. Etiquettes (tags)
G. Collaud, F. Jimenez, J. Monnard, Web 2.0
Prénom Nom

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

26. Activité 1
Gestion de signets en ligne
Del.icio.us
D li i

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. Blog web 2.0
Billet,
Billet article
commentaires
t i
G. Collaud, F. Jimenez, J. Monnard, Web 2.0
Prénom Nom

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. Activité 2
Blogs et fils rss
Wordpress
W d

31. Pages d’accueil
personnalisables
li bl
G. Collaud, F. Jimenez, J. Monnard, Web 2.0
Prénom Nom

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

33. Netvibes
search
météo
webnotes
contenu web vidéo
G. Collaud, F. Jimenez, J. Monnard, Web 2.0
Prénom Nom

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. 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. Activité 3
Pages en ligne personnalisables
Netvibes
N t ib

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. 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. Bureautique 2.0
G. Collaud, F. Jimenez, J. Monnard, Web 2.0
Prénom Nom

40. Google Docs : document
G. Collaud, F. Jimenez, J. Monnard, Web 2.0
Prénom Nom

41. Google Docs : feuille de calcul
G. Collaud, F. Jimenez, J. Monnard, Web 2.0
Prénom Nom

42. Google Agenda
G. Collaud, F. Jimenez, J. Monnard, Web 2.0
Prénom Nom

43. Fichiers en ligne : box.net
G. Collaud, F. Jimenez, J. Monnard, Web 2.0
Prénom Nom

44. Activité 4
Bureautique en ligne
Google docs
G l d

45. Activité 5
Google Agenda

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

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. 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. 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. Flickr : tags & géolocalisation
Tags
Géolocalisation
G. Collaud, F. Jimenez, J. Monnard, Web 2.0
Prénom Nom

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. 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. Activité 6
Images
Flickr
Fli k

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. Youtube, Dailymotion
Youtube
Dailymotion
G. Collaud, F. Jimenez, J. Monnard, Web 2.0
Prénom Nom

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. Vidéos : intégration
G. Collaud, F. Jimenez, J. Monnard, Web 2.0
Prénom Nom

58. Activité 7
Vidéos
Youtube
Y t b

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. 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. 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. Démo