Seconde partie du cours "Fondamentaux du Journalisme Web" édition 2014 - Sciences Po Grenoble. > Session 2 : Créer l'information sur le Web. Première partie ici : http://fr.slideshare.net/perringwendal/fondamentaux-du-journalisme-web-2014-partie-1

1. SESSION 2 :
PRODUIRE LA « WEB-INFORMATION »

2. Quelles sont les armes à notre
disposition ?
L’écriture
La photo
Le son
La vidéo
Le live
Les data
L’infographie
PRODUIRE LA WEB-INFORMATION

3. Premier « cliché » : la longueur des papiers
• Il paraît qu’il faut écrire court sur le Web. Plus court qu’ailleurs en tout cas.
• L’information se consommerait plus rapidement : il faut donc des contenus courts,
stéréotypés, pour faire plaisir à Google et/ou ne pas fatiguer le lecteur…
Ce n’est pas totalement faux.
• La lecture sur écran fatiguerait l’œil 25% plus vite que sur tout autre support selon
l’ergonome Jacob Nielsen
• La surabondance d’information conduit
(ou conduirait) à faire concis pour être compris
ÉCRIRE POUR LE WEB

4. Certains média font du court pour le court.
• Avènement du « link journalism » (Drudge Report)
• En France : dépêches reprises, courts papiers pour aller « à l’essentiel »
(HuffPo, Atlantico…)
D’autres font délibérément le choix inverse
• Le New York Times n’hésite pas à écrire du 20 000 signes SUR LE NET
(ils découpent leurs articles en plusieurs pages, choix discutable)
• ProPublica ne fait QUE ça : du long sur le Web.
• Mediapart fait rarement dans le court
ÉCRIRE POUR LE WEB

5. Plus de long au final… mais le court est plus lu
• Slate fait du « link journalism » mais pond souvent des papiers d’au moins 6 000
signes (Atlantico, au fond, fait de même) ; le HuffPo (hors blogs), moins (et son
audience est meilleure…)
• OWNI avait pour habitude de faire dans la longueur
• Hors dépêches, Le Monde, Libération & co excèdent régulièrement les 3 feuillets
La notion de calibrage est dépassée, le Web a un stockage (quasi) infini !
• Info courte vs. Info longue : privilégier la quantité (logique de flux) ou celle de
qualité (logiques d’investigation mais aussi de curation) ?
• (Et le lecteur, veut-il vraiment s’infliger 9 000 signes ? Une infographie ne ferait-
elle pas mieux ?)
ÉCRIRE POUR LE WEB

6. Comment organiser un papier Web ?
Quelques petites règles de base (il y
en a quelques-unes, mais peu)…
• Les « 5W » (what, who, where, when,
why) doivent arriver vite, de préférence
dans la première partie du papier si
celui-ci est long
• Corps de l’article : informations
importantes plutôt au début, le
secondaire à la fin.
• Un paragraphe, une idée – quitte à ce
qu’ils soient de taille inégale
• Bref, la « pyramide inversée » est encore
plus importante sur le Web que sur un
support papier !
Et ceci est d’autant plus important
que c’est…
qui dirige (presque) tout
ÉCRIRE POUR LE WEB

7. Second cliché : « Sans référencement, je suis impuissant »
Il est important d’y songer après l’écriture d’un article – au niveau du secrétariat de
rédaction notamment – car un article bien fichu mais mal référencé a toujours moins de
chances d’être lu qu’un mauvais feuillet avec un SEO bien réfléchi
… bref, faire plaisir au « Googlebot » !
ÉCRIRE POUR LE WEB

8. Deux éléments principaux au niveau de la rédaction :
• Importance des liens sortants : faire référence à d’autres papiers dans votre
papier (et espérer obtenir la réciproque). Un papier bien linké est considéré
par le Googlebot comme mieux « rempli » qu’un texte sans URL externe
• Répéter certains mots-clés fondamentaux de votre papier… mais pas trop,
sans quoi votre article serait illisible
Deux autres points au niveau de la « mise en page » :
• Mettre les principaux termes en gras, sans oublier les mots-clés. Importance
du chapô et des « sous-titres » : le Googlebot lit en priorité les 1 000
premiers signes d’un papier
• Réfléchir à une URL optimisée SEO (Slate.fr s’est un temps spécialisé dans
l’URL tarabiscotée mais efficace)
ÉCRIRE POUR LE WEB

9. Ceci étant…
Vous n’êtes PAS les esclaves de Google !
Les critères « réclamés » sont en soi légers – le gras aide même au confort du lecteur
Il n’interdit EN RIEN les textes longs – bien au contraire :
Plus de possibilités de placer des occurrences pertinentes (et ainsi d’éviter de placer 6 fois le même mot
dans un feuillet comme on pourrait le croire)
Plus de possibilités d’insérer des liens (enfin, pas trop, il ne s’agirait pas de noyer le lecteur non plus…)
Vous pouvez écrire des sujets sérieux !
En lisant les histoires du « Découvrir » de Twitter, on pourrait croire que les sujets
« sérieux », « lourds » ne marchent pas sur le Web. Dans Google News, il y a déjà (un peu)
plus matière à se réjouir. Mais surtout…
> Un sujet complexe traité avec un format pertinent (infographie, mapping… bref tout ce
qu’on va voir dans les prochains slides) SERA LU par le lecteur car CELA L’INTERESSE
ÉCRIRE POUR LE WEB

10. Et si mon nouveau maître esclavagiste, c’était
• Facebook représente 7% de l’audience des sites
d’info en France en moyenne (Twitter, 1,3%)
• Très fortes disparités selon les médias
• Aux Etats-Unis, Facebook commence à devancer
Google en tant que source
• Sites spécialisés : BuzzFeed, ViralNova,
Upworthy…
• La titraille made in Facebook n’a rien à voir avec
la titraille made in Google : du SEO au SMO
ECRIRE POUR LE WEB

11. Plusieurs possibilités de se « fournir » en photos :
• Les faire soi-même (pas toujours possible…)
• Ceci étant, les smartphones peuvent fournir des contenus photo de qualité suffisante pour le Web
• Au cas où, rajouter un filtre Instagram/PixlrOmatic/PiMagic
• Voir chez les agences (payant, évidemment)
• Explorer le monde du gratuit : les licences Creative Commons
• Deux sources principales : Flickr et Wikimedia Commons
• Coexistence de contenus libres de droits et d’autres réservés !
• Mention obligatoire de la source
Et, bien entendu, A NE PAS FAIRE : reprendre une image pêchée sur Google sans
autorisation car, justement, grâce à Google (et aussi grâce aux données EXIF de la
photo) il est facile de se faire rattraper (+Tineye)
Exemple de #Fail : la photo de l’affiche de campagne de Nicolas Sarkozy identifiée comme
celle d’une mer de Grèce grâce aux EXIF
L’IMAGE

12. Creative Commons : késako ?
« Creative Commons est une organisation à but non lucratif qui a pour
dessein de faciliter la diffusion et le partage des œuvres tout en accompagnant
les nouvelles pratiques de création à l’ère numérique. »
Plusieurs licences (six actuellement) permettent pour l’utilisateur de contrôler
ce qui peut être réutilisé/remixé de son site, de ses œuvres, … et dans quelles
conditions.
Cela concerne donc un champ de contenus beaucoup plus large que celui des
photos : sons, contenus textuels…
Plusieurs moyens de se procurer ces contenus réutilisables…
L’IMAGE

13. Via Google : la « Recherche Avancée » permet de sélectionner
uniquement des images en Creative Commons, choisir un type
de licence particulier… 
http://support.google.com/websearch/bin/answer.py?hl=fr&a
nswer=29508
Via Wikimedia Commons :
http://commons.wikimedia.org/wiki/Main_Page
Et sinon, pour coordonner tout ceci, une seule adresse (et pas
que pour les photos d’ailleurs) :
http://search.creativecommons.org
Ceci étant, si vous êtes en rédac, vous parlerez plutôt en photos
AFP/Reuters/AP/Getty (mais individuellement on va plutôt
s’en tenir à du gratuit pour l’instant)
L’IMAGE

14. Réaliser des slideshows photos : simple et souple
Galerie Flickr : pour regrouper des photos, les organiser en album… Un usage
« à la base » personnel mais qui peut tout à fait être professionnel – tout dépend
du mode de partage des contenus choisi.
Exemples d’utilisation
Les slideshows du groupe CCM Benchmark (L’Internaute, Journal du Net…) :
http://www.journaldunet.com/management/emploi-cadres/entreprises-qui-recrutent/
France TV Info : http://www.francetv.fr/info/un-oeil-sur-l-actu_69151.html
A noter : comment connaître l’origine d’une photo ?
Tineye : http://www.tineye.com
En retirer son EXIF : Jeffery’s Exif Viewer - http://regex.info/exif.cgi
(Comme ça, si quelqu’un vole une photo…)
L’IMAGE

15. Editer une photo :
-GIMP
-Photoshop
-Pixlr
-Social Media Image
Maker
L’IMAGE
Voir même un GIF : Picasion !
En faire une photo interactive :
- Thinglink (annotation)
- Stipple (annotation sociale)
- Dermandar (panorama)

16. Plusieurs possibilités de se « fournir » en son :
Bases de données audio
Gratuites : Freesound, Archive.org
A noter : Jamendo (Creative Commons)
Plateformes spécialisées
Mixcloud : peu de contenus média – et non téléchargeables – mais peut constituer une
base de sources
Soundcloud : plus souple que Mixcloud, les média y arrivent tranquillement…
Et, bien entendu, les faire vous-même (mais ça coule de source…)
LE SON

17. Que faire du « produit sonore » créé ?
Mixcloud
Utilisé surtout par les DJ, il est une plateforme rêvée pour les podcasts
Pas de limite dans la taille des uploads
Possibilité d’étiqueter des épisodes (« timecode »)
Impossibilité de télécharger (question de droits d’auteur) mais embeddable
Encore assez méconnu par les média
LE SON
Audioboo
Une utilisation plus axée sur le smartphone que Mixcloud
Possibilité d’ajouter des photos du téléphone au son (« boo »)
pour faire un diaporama sonore à partir de votre mobile
Moins commode (mais illimitée en temps d’upload) : Minch

18. Que faire du « produit sonore » créé ?
Soundcloud
Plateforme audio beaucoup plus « connue » que Mixcloud
Limite dans la taille des uploads en mode gratuit (2 heures
de son sur un compte)
Possibilité de paramétrer le partage et le téléchargement
des fichiers
(Un peu) plus facile de l’utiliser via un mobile que Mixcloud
Média qui l’utilisent : France 24, RFI, ESPN (sport), Radio
Campus France (si si)… (Tiens, même Radio Campus
Grenoble)
Inclure dans un texte via http://soundcite.knightlab.com/
LE SON

19. Moins lourd à réaliser qu’une vidéo, un diaporama sonore peut tout à fait
convenir comme produit journalistique si le besoin d’ « animation » n’est
pas primordial.
A retenir : un diaporama sonore peut tout à fait être considéré comme une vidéo quand vous
aurez besoin de le mettre sur une plateforme comme Youtube.
IMAGE + SON = DIAPORAMA SONORE
Principal logiciel de
création de
diaporamas sonores :
Soundslides (version
gratuite limitée,
version de base
à $40)
Alternative à
Soundslides :
VUVOX.
« Diasporamas »

20. Plusieurs possibilités de se « fournir » en vidéos :
Les faire soi-même (pas toujours possible…)
Soit en plateau
Soit avec une caméra de télévision « normale »
Soit avec des outils type Smartphone : la qualité est souvent suffisante
pour les standards de la publication vidéo en ligne.
Quid de Vine, déjà utilisé par Euronews ?
Youtube Capture, sur le même modèle
Tout, entre Vine et réseau social people
Soit avec des outils en ligne : Skype, Twitcam, Livestream, Ustream,
Google+ Hangout…
LA VIDÉO

21. Que faire du « produit vidéo » créé ? Deux grands champs
de possibilité :
L’héberger soi-même
Contrairement aux documents et sons (et encore, ceci est tout relatif), les
fichiers vidéo sont beaucoup plus lourds en termes de taille
Nécessité d’avoir un FTP résistant et un gros stockage
Passer par l’upload chez Youtube, Dailymotion, Vimeo…
Création d’une chaîne spécialisée pour vous ou votre média
Beaucoup plus facile à partager
Que ce soit sur les réseaux sociaux…
… que de fixer les modalités de ce partage, justement !
LA VIDÉO

22. Faire du live via le Web peut se
faire de plusieurs manières :
En vidéo :
Dailymotion autorise le live : une télé dans
votre ordinateur pour les programmes qui
acceptent d’être « streamés »
Exemple : « Des clics et des claques » d’Europe 1
(Moins commun sur Youtube, un peu avec feu
« Vinvinteur » de France 5)
Les outils de stream : Livestream,
Ustream, Twitcam, Skype, Spreecast
LE LIVE

23. Faire du live via le Web peut se faire
de plusieurs manières :
En textuel :
Outils de live : le principal a longtemps été
CoverItLive
« Le Monde » utilise une solution maison qui en est
très proche (et développée par CIL)
ScribbleLive est la meilleure alternative
Storify (que l’on développera plus tard) est un
outil intéressant de « live différé »
LE LIVE

24. Faire du live via le Web peut se
faire de plusieurs manières :
En textuel :
Pas forcément besoin de passer par un
outil spécifique… si on pense à Google
Beaucoup de sites gardent le format
textuel brut qu’ils alimentent au fur et à
mesure…
… en modifiant la date de « publication »
du contenu…
… pour que Google croit que c’est un
nouveau papier…
… et qu’il le remonte sur Google News !
LE LIVE

25. Puisque Word ne suffit pas (plus)…
Il va falloir passer à Excel !
Le « data journalism », ou « journalisme de
données », rend les data – sur le papier si barbantes
– plus intéressantes… et graphiquement parlantes.
Il existe une multitude d’outils permettant, sur la
base de ces données, de réaliser de jolies choses :
Mapping :
Google Maps : http://maps.google.com/maps?hl=fr&tab=Xl
Open Heat Map : http://www.openheatmap.com/gallery.html
CommunityMap (technologie Google) :
http://www.communitywalk.com/
CartoDB, ZeeMaps, MapTales, Mapbox, OpenStreetMap, MapBox
(cartes dans le « cloud »)…
Data-visualisation : Google Fusion Tables, Tableau Public…
LES DATA
Les Gmaps se bidouillent avec
MapChannels, Snazzy Maps…

26. Mapping perso réalisé pour feu Pigemag sur les élections cantonales
en Isère : résultats en temps réel par localisation.
LES DATA : MAPPING

27. France Info sort aussi un mapping plutôt basique mais
efficace (sur OpenStreetMap) dans la même lignée
LES DATA : MAPPING

28. Mapping sorti le 6 mars
2012 : étude
cartographique de la
pauvreté en Angleterre
(Guardian)
Différents niveaux de
lecture : risque de
pauvreté, risque de
maladies pulmonaires, de
déscolarisation…
Sous la forme d’un
« rank » de 1 à 350 (350
comtés en Angleterre)
LES DATA : MAPPING

29. LES DATA : MAPPING

30. Google Chart Tools (pour faire des
graphiques simples) :
http://code.google.com/apis/chart/imag
e/docs/making_charts.html
Google Fusion Tables :
http://www.google.com/fusiontables/pu
blic/tour/index.html
Beaucoup plus complexe : Google Refine
Exemple d’utilisation de Fusion Tables
Plus globalement, Google recense ses
outils dans les « Media Tools » :
http://www.google.com/get/mediatools/
LES DATA : CE QUE GOOGLE
PROPOSE

31. Tableau Public :
http://www.tableausoftware.c
om/public/training
Many Eyes (IBM) :
http://www-
958.ibm.com/software/data/c
ognos/manyeyes/page/Data_
Format.html
Vidi : http://www.dataviz.org/
Lucidchart :
https://www.lucidchart.com
LES DATA : DATA-VISUALISATION

32. Infogr.am permet, à partir d’un ensemble de
modèles préétablis, de réaliser sa propre
infographie interactive.
Comme ici sur ce blog de la « Monde
Académie ».
Datawrapper est également de plus en plus utilisé,
Grafly pourrait bientôt l’être
L’INFOGRAPHIE

33. Plus poussé que Infogr.am, Visual.ly
sert de « communauté » des data-
visualisations.
Catalogue d’outils plus confidentiels
mais servant pour des besoins précis :
la boîte à outils de l’Expoviz !
Et l’indispensable DataBlog du
Guardian
L’INFOGRAPHIE

34. A noter également l’open source RAW >
http://raw.densitydesign.org/
L’INFOGRAPHIE

35. Le principe : agréger des contenus pluriels pour en
faire une histoire complète.
Photos : Flickr, Instagram
Twitter : recherche par hashtag, par utilisateur…
Facebook : statuts
Liens URL
Google : résultats de recherche, images, vidéos (+
Youtube)
Autres Storify
Et on peut aussi ajouter du texte à l’intérieur de la Storify
(en plus du titre et du chapô)
C’est donc à la fois un outil de live et de curation
La « machine à écrire » du XXIe siècle ?
(Bientôt la concurrence du « Story Engine » ?)
L’INFOGRAPHIE : STORIFY

36. Quand utiliser une Storify ? Cet outil – à la
base – de curation est particulièrement
adapté à certains types d’utilisation :
Evènements en live. La simplicité de l’interface et
sa connexion en temps réel aux différents réseaux
sociaux imbriqués (Twitter, Facebook, Flickr) lui
permet une très grande instantanéité
Manifestations
Conférences
Cérémonies (genre Oscars)
Comptes rendus d’activité sur les réseaux sociaux.
Storify permet en quelques clics de resituer des
débats/discussions qui ont eu lieu sur les réseaux,
que ce soit en matière politique, économique ou
plus généraliste
L’INFOGRAPHIE : STORIFY

37. L’outil Storify s’adapte au CMS Wordpress.
Une Storify peut ainsi constituer en 2 CLICS maximum un article comme un autre
sur un site d’information fonctionnant sous ce CMS
Encore peu utilisé en France mais à l’international plusieurs s’y sont
déjà mis :
Le LA Times ou encore le Washington Post l’utilisent (genre, pour rendre compte
des Grammy Awards http://storify.com/washingtonpost/grammy-awards-2012)
BBC pour rendre compte… du Marathon de Londres !
http://storify.com/bbclondonnews/your-story-of-marathon-2011
Breaking News (qui a écrit l’une des Storify les plus vues avec ce compte-rendu en
images d’une série de tempêtes dans le sud des Etats-Unis 
http://storify.com/breakingnews/storms-in-the-south)
L’INFOGRAPHIE : STORIFY

38. Comment organiser un ensemble de dates, d’évènements, sous forme
de frise chronologique ?
-Dipity, l’ancêtre
-TimelineJS
L’INFOGRAPHIE : LES
CHRONOLOGIES
Autre belle illustration :
> les dix ans de Last.fm (basée sur une architecture JS là aussi)

39. > A la base, Prezi est un outil de
présentation alternatif à PowerPoint.
Très joli, qui bouge tout le temps mais
avec des possibilités de
personnalisation encore limitées (à
moins d’y mettre un peu le prix)
Applications :
Une utilisation média de Prezi, c’est
toujours rare
http://www.francetv.fr/info/la-
galaxie-sarkozy_63135.html
L’INFOGRAPHIE : PREZI

40. Lien pour savoir quoi faire de vos données :
http://www.miseajournalisme.com/wp-content/uploads/tableau-
dataviz.html
A noter aussi :
http://www.passiondataviz.fr/
http://datavizcatalogue.com/
Plus lourd : les webdoc-like – RacontR (ex-Djehouti), Klynt,
Interlude… sans oublier le bon vieux Wix
L’INFOGRAPHIE