Comprendre les notions de Web 2.0, découvrir les opportunités que génère cette nouvelle façon de travailler et apprendre à construire et à gérer une page web personnalisée, grâce à un outil tel que Netvibes. I. LES NOTIONS FONDAMENTALES 1.1 Définition du Web 1.2 Du Web 1.0 au Web 2.0 : comparaison 1.3 Concepts et vocabulaire de base (syndication, flux rss, agrégation de contenu, tags etc). II. LES OUTILS 2.1 Identifier ses besoins (contenus textuels, médias, favoris, bureautique, etc), 2.2 Quelques sites incontournables (wikipedia, Délicious,; FlickR, Dailymotion, Youtube, Google Drive, Google Agenda, Google Maps, Slideshare, Calaméo, etc. III. L'ATELIER : PRÉSENTATION ET GESTION D’UN ESPACE PERSONNEL AVEC NETVIBES Démonstration sur place - prise en main de netvibes, - les principales fonctions, - création de son compte personnel, - création des onglets, - création de modules, - insertion des modules dans les onglets, - organiser sa page.

1. Willkommen Bienvenue
Welcome
yôkoso
welkom
Benvenuto
Bienvenida
tervetuloa

2. Animation
 Bienvenue à tous les stagiaires…
 Je vous souhaite une excellente journée

3. Prêts à travailler ?

4. Les notions fondamentales
Partie 1

5. Le Web 2.0
1.1 Essai de definitions

6. Où va-t-on ?

Web 3.0 : ensemble de technologies
qui visent à adapter en temps réel le
contenu et les contours d'un site
internet en fonction du profil et du
comportement de l'internaute.

7. Quid ? Essai de définition

Web 1.0 : l'internaute se voyait imposé un
parcours figé auquel il devait forcément
s'adapter.

Web 2.0 : l'internaute est placé au centre
d'un monde figé mais paramétrable.

Web 3.0 : le monde tourne
automatiquement et se construit en
permanence autour de l'internaute, son
profil, son cheminement et ses désirs !

8. Le Web 2.0
1.2 Du Web 1.0 au Web 2.0

9. Du Web 1.0 au Web 2.0

Web 1.0 : Conçu comme un grand livre composé
de pages reliées entre elles par des liens
hypertextes, le web 1.0 s'est contenté de
reproduire les modèles connus de l'édition papier.
Une conception aujourd'hui dépassée

Web 1.0 : l'internaute se voyait imposé un parcours
figé auquel il devait forcément s'adapter.
Il est spectateur !!

10. Web 1.0 …un grand livre
… une conception dépassée
Webmaster
Logiciels hors ligne
bureautique etc.

11. Les techniques et les
comportements changent
S’appuyant sur des technologies matures,
le web se restructure en un gigantesque
réseau de bases de données et de
services exposés grâce à des techniques
(flux RSS, Atom et autres API XML) . Une
plate-forme de développement planétaire
dont les internautes s'emparent.
On est dans des structures d’échange, on
identifie dans chaque site ce qui est le plus
important (les objets xml et non les pages
html)

12. Du Web 1.0 au Web 2.0


Les progrès technologiques de ces dernières années ne sont
pas les seules ferments de cette évolution. Les internautes
ont changé. Plus nombreux, connectés en haut débit, ils
s'impliquent de plus en plus dans la création de «leur» réseau:
ils ne se contentent plus de lire, mais publient aussi des
données.
On passe d’une collection de sites web à une plateforme
informatique à part entière, fournissant des contenus à intégrer
et des applications web aux utilisateurs.
Web 2.0
l'internaute est placé au centre
d'un monde figé mais qu’il peut paramétrer.

13. Web 2.0 …
une gigantesque base de données
Webmaster
?
Logiciels en ligne
bureautique etc.

14. Applications classiques
Tableurs,
traitement de texte, etc.
Gestionnaire
Intranet
Etc.
d’images,
collaboratif (wiki)

15. Des changements
Web 1.0
Web 2.0
Entreprises, marchands
Internautes
Profil de l'internaute
Passif
Actif
Interactivité perçue
Sélection et lecture
d'information
Sélection, lecture et
publication de données
Mot-clé
Tag
(mots clés saisis par
internaute)
Leaders du web
Unité de recherche

16. Le Web 2.0
1.3 Concepts et vocabulaire de base

17. Le RSS…




Qu’est-ce que le RSS ?
RSS est un format dit de “syndication de
contenu Internet”.
La syndication permet d’établir des échanges
d’informations (textes, liens, images) entre
sites internet, qui sont automatiquement mis
à jour.
Ce dispositif permet notamment d’afficher
sur un site des informations issues d’un autre
site tout en conservant sa propre mise en
page et sa propre charte graphique (on parle
de publication en marque blanche)
Une petite vidéo pour mieux comprendre ?

18. Le RSS…

19. Tout se partage !
MON SITE
Importer et exporter des
contenus
Articles, photos, images, vidéos,
favoris, documents, applications,
…
GOOGLE

21. CTRL + V = Coller

22. Les outils

23. La valse de l’échange

24. Le TAG …
Un marqueur (mot, dessin, code,) qui permet de
donner des précisions sur l’usage de l’internaute et
classer l’information
(un peu comme l’ensemble des mots dans un dictionnaire de
langue). Il est utilisé sur les sites dits de réseaux sociaux,
blogs etc. . sous différentes formes.
Les Tag sont séparés par
des espaces ou des virgules.
Ils sont souvent postés par l’Internaute !

25. Les outils et sites
Partie 2

26. Le Web 2.0
2.1 Identifier ses besoins

27. De nombreux sites et outils

Avec le web 2.0, de nombreuses applications ont vu le
jour. De plus, l’émergence des réseaux sociaux n’a fait
qu’amplifier le phénomène. La vraie question devient :
Pour quoi faire et non où est le site utile ?

Le copier/coller préformaté d’un code mis à disposition
de l’utilisateur novice est devenu la norme. Il faut
repérer le symbole <> et faire copier/coller du code.

Le CTRL C – CTRL V devient l’outil du Web 2 mais
Attention, à l’accès et à la pérennité du site !

28. Des exemples d’applications

Publier et partager facilement de l’information ->
Blogs…

Travailler de façon collaborative sur un projet -> Wiki

Travailler avec des logiciels en ligne en intégrant des
contenus sur un site -> google, flickr, etc.

Surveiller et récupérer l’information publiée (veille
technologique, intelligence économique) -> lecteur de
flux rss- > netvibes, …

29. Les blogs
L’internaute au cœur du web

Simple journal intime, ou véritable outil de
communication la blogosphere prend de
l’ampleur , mais au fait pourquoi ?




Accessibilité a tous
Facilité de gestion
Interactivité
Intégration de flux RSS
Exemple : canalblog.com, overblog, etc.

30. Là où il y a un code
<> ou embed…
… Il y a un copier/coller
qui permet d’intégrer
facilement la vidéo
dans un site, blog, etc.
Il n’est pas nécessaire
de comprendre le code !
Vidéos
sur dailymotion,
youtube, viméo,
watt, etc.
CTRL + C puis CTRL + V

31. Là où il y a un code
<> ou embed…
… Il y a un copier/coller
Photos
sur Flickr, Google
Photos, etc.
qui permet d’intégrer
facilement la photo,
le diaporama dans
un site, un blog, etc.
Il n’est pas nécessaire
de comprendre le code !
CTRL + C puis CTRL + V

32. Les médias ont aussi des flux Rss
Vous pouvez aussi être averti, grâce aux flux rss, de la
mise à jour de vidéos, de photos, d’audios, etc.

33. La lutte pour l’information
est commencée ..

35. Le Web 2.0
2.2 Quelques sites incontournables

36. Exemple de sites
Wikipédia (l’encyclopédie universelle)
-> tout le monde peut participer !

37. Delicious : favoris sociaux

38. Delicious
(service de Yahoo)
Gestion des favoris en ligne – notion de TAGS
La première fois, il faut
créer un compte, en
cliquant sur
Join now
Les fois suivantes, pour
se connecter,
il faut cliquer sur
Sign in

39. Delicious
Gestion des favoris en ligne – notion de TAGS
Pourquoi utiliser Delicious ?
-
Les favoris sont en ligne, donc sauvegardés …
-
Les favoris peuvent être multi-classables (notion de tags)
On peut classer un favori dans social et fiscal à la fois.
Exemple pour le compte xlair.
http://www.delicious.com/xlair/android
http://www.delicious.com/xlair/mobile
- On peut les partager avec d’autres personnes, suivre leurs ajouts,
- On peut voir quels sont les sites les plus pertinents (les plus sauvegardés)

40. flickR
de Yahoo
photos, diaporamas partagés

41. flickR
de Yahoo
photos, diaporamas partagés






1 To (1000 Go) pour la version gratuite
d'espace de stockage de photos et de vidéos
Importez des photos dont la taille de chacune
peut atteindre 200 Mo
Importez des vidéos haute définition de
1080 p, dont la taille de chacune peut
atteindre 1 Go
Lecture de vidéos jusqu'à 3 minutes chacune
Importez et téléchargez en qualité originale
Bande passante mensuelle illimitée

42. flickR
de Yahoo
photos, diaporamas partagés
Quelquefois on ajuste un peu le code
WIDTH = LARGEUR
HEIGHT = HAUTEUR
Les mesures son en pixels !
(pas en cm)

43. Dailymotion
de nombreuses vidéos et outils

44. Dailymotion
de nombreuses vidéos et outils
http://www.dailymotion.com/fr/extras

45. Youtube
Un éditeur en ligne
http://www.youtube.com/editor
Des transitions, des bandes sons, du texte en surimpression, etc.
Vous pouvez aussi enregistrer votre powerpoint
(à partir de 2010) en fichier vidéo et le mettre sur youtube !

46. Google Agenda
Créer et partager son agenda

47. Google Drive
Créer et partager ses documents
Vous pouvez créer des documents,
des formulaires en ligne et les partager.

48. Slideshare
Transformer vos powerpoint en flash
Vous pouvez créer des diaporamas dynamiques en
ligne et les intégrer sur votre site !

49. Calaméo
Créer des eBooks et les intégrer
Vous pouvez créer des eBooks
en ligne et les intégrer sur votre site !

50. Les pages personnalisées
Surveiller et récupérer l’information publiée
(veille technologique, intelligence économique)
Travailler avec des logiciels en ligne en
intégrant des contenus sur un site …
Ex Netvibes


Lecteur de flux rss
Intégration d’applications d’autres sites etc,

51. Netvibes
Pages personnalisées

52. Netvibes
Pages personnalisées
Pour
« ajouter du contenu »,
il faut cliquer sur le
bouton vert.
Puis choisissez un module
et faites le glisser
vers le bas.
Si c’est un flux Rss,
copier/coller l’adresse du
flux dans la zone
« ajouter un flux »

53. Netvibes
Pages personnalisées
Vous pouvez avoir
de nombreux
espaces
privés et publics

54. Netvibes
Pages personnalisées
Pour publier
quelque chose de
l’espace privé vers
le public, il suffit de
cliquer sur partager
et de choisir
« copier vers votre
page »

55. Flux Rss
Divers annuaires

56. Flux Rss
Un annuaire d’annuaire
http://www.lesannuaires.com/annuaire-rss.html

57. On fait des tests ?

58. Synthèse
Copier/Coller
 Flux RSS
 Notion de TAGS
(mots clés donnés par l’utilisateur)
 <> ou embed
codes à coller dans un blog ou site
 Delicious (gestion des favoris en ligne)


59. En marge…
Autant des sites, autant de comptes…
De plus en plus de
personnes s’identifient avec
un seul compte …
Celui de FaceBook
qui sert de clé de passage
dans de nombreux sites.
Cela évite d’avoir trop de
comptes à créer et à retenir.

60. En marge…
Deux logiciels de capture d’écran

Utipu
(http://www.utipu.com/tipcam-download/)
Très bon logiciel mais le site en ligne a été fermé aux européens.
Cependant, le logiciel fonctionne en local sur l’ordinateur. Vous
pouvez le télécharger. Il faut un micro-casque.

61. En marge…
Deux logiciels de capture d’écran

Jing
(http://www.techsmith.com/jing/)

62. Merci de votre attention !