10 mars 20111 Ecrire pour le Web Les bases de l’écriture informative Ecrire pour le web Communiquer en « rich media » Licence 3 Infocom – UCO-BS – Françoise.

Présentation au sujet: "10 mars 20111 Ecrire pour le Web Les bases de l’écriture informative Ecrire pour le web Communiquer en « rich media » Licence 3 Infocom – UCO-BS – Françoise."— Transcription de la présentation:

1 10 mars 20111 Ecrire pour le Web Les bases de l’écriture informative Ecrire pour le web Communiquer en « rich media » Licence 3 Infocom – UCO-BS – Françoise Nicol

2 10 mars 20112 Print ou web : quelle différence ? Des supports différents  Papier : espace limité, périodicité fixe, information durable…  Ecran : volume d’information illimité, espaces différents selon les supports, lecture plus difficile, lecteur plus volatile… Des modes d’expression différents  Papier : textes, photos, dessins, graphiques  Ecran : textes, images fixes ou animées, son Un seul et même métier Recueillir, vérifier, organiser, traiter et diffuser des informations Ecrire de façon claire et concise et s’adapter à son lectorat Les mêmes règles de base Immuables quel que soit le support

3 10 mars 20113 Les règles de base Organiser les contenus Tenir compte des règles de lecture Définir le mode de traitement de l’information Aller de l’essentiel au détail Structurer les textes

4 10 mars 20114 Organiser les contenus Classer et organiser les sujets  Classement par rubriques (print) ou onglets (web) : choix éditorial en fonction du positionnement du support et des cibles ou du lectorat  Choix et organisation des sujets en fonction de leur importance : plus l’info est importante, plus elle est valorisée (emplacement, taille, photo, graphiques…) Exemple de l’Express : http://static.lexpress.fr/assets/36/sommaire_18927.pdfhttp://static.lexpress.fr/assets/36/sommaire_18927.pdf Exemple du Télégramme : http://www.letelegramme.com/static/papier.php Hiérarchiser les informations  Print : titraille, textes, photos, légendes, infographies  Web : titre (lead) et accroche au 1 er niveau, détails aux niveaux suivants

5 10 mars 20115 Sommaire de l’Express

6 10 mars 20116 Onglets Internet

7 10 mars 20117 Tenir compte des règles de lecture 1.L’œil parcourt la page pour avoir une idée globale du contenu 2.Puis il balaye le texte sélectionné pour localiser l’information qu’il recherche ou qui l’intéresse 3.Il s’appuie sur des repères : mots, série de mots, textes en gras, images…  Créer des hiérarchies dans la page et dans chaque article : taille des titres, taille de la photo, taille et emplacement des textes…  Mettre en valeur les informations importantes : l’essentiel en haut de la page, dans le titre, en début de texte et en début de paragraphe, dans les accroches, créer des repères typographiques (blancs, gras, italiques)…

8 10 mars 20118 Télégramme - la Une

9 10 mars 20119 Télégramme P. 2/3

10 10 mars 201110 Rue 89 - Page d’accueil/1 http://www.rue89.com/

11 10 mars 201111 Owni - Page d’accueil/1 http://www.owni.fr/ http://www.owni.fr/

12 10 mars 201112 Owni - Page d’accueil/2

13 10 mars 201113 Définir le mode de traitement de l’info Qu’est-ce que ça vaut et comment j’en parle?  Sujet de Une ? Tête de rubrique ? Sous-papier ? Brève ?  Comment vais-je la traiter ? Article de synthèse, reportage, interview, enquête, portrait, photo légendée… Qu’est-ce que je dis et de quelle façon ?  Print : comment je découpe et je valorise mes informations ? Sous-papiers, encadrés Titraille Choix des photos, graphiques  Web : comment je structure l’information ? Quelle information à quel niveau ? Quel média pour quel type d’information ?

14 10 mars 201114 Aller de l’essentiel aux détails La pyramide inversée  Aller du plus important au plus détaillé  du concret à l’abstrait  du plus récent au plus ancien  du plus proche du lecteur au plus loin, dans le temps ou l’espace… La règle des QQCOQPC ou des 5 W et des 2 H  Qui ? Quoi ? Comment ? Où ? Quand ? Pourquoi ? Combien ?  Who ? What ? When ? Where ? Why ? How ? How much ?

15 10 mars 201115 Ce qu’il ne faut pas faire Questions Qui ? Quoi ? Comment ? Où ? Quand ? Pourquoi ? Combien

16 10 mars 201116 Ce qu’il vaut mieux faire http://www.lefigaro.fr - http://www.lesechos.fr/ http://www.lefigaro.frhttp://www.lesechos.fr/ Questions Qui ? Quoi ? Comment ? Où ? Quand ? Pourquoi ? Combien ? www.lefigaro.fr/conjoncture/2011/03/09/04016- 20110309ARTFIG00360-internet-moteur-de-la- croissance-en-france.php www.lesechos.fr/entreprises-secteurs/tech- medias/actu/0201204390895-comment-internet-a- dope-la-croissance-francaise.htm

17 10 mars 201117 Structurer les textes La loi de proximité  La proximité temporelle : du passé proche ou du futur proche (actualité) au futur lointain puis au passé lointain  La proximité géographique : la rue, le quartier, la ville, la région, le pays…  La proximité psycho-affective : l’amour, la mort, la violence, l’argent, la peur, le chômage…  La proximité sociale : même âge, même milieu, mêmes centres d’intérêt… Mettre les bons éléments en haut de la pyramide  Définir quel est le sujet principal en fonction de son lecteur ? Le qui ? Le quoi ?  Répondre aux quatre questions de base dans le titre et le chapo (accroche) : Qui et Quoi ? Plutôt dans le titre. Quand et Où ? Dans l’accroche  Développer ces 4 questions en attaque puis expliquer le pourquoi et le comment  Enfin, entrer dans le détail de chacune des 6 questions pour un grand article

18 10 mars 201118 Ecrire pour le Web Ce qui change par rapport au print Trois façons d’organiser les contenus Structurer les contenus Adapter son écriture au Web Exemples

19 10 mars 201119 Ce qui change Il faut accrocher le lecteur tout de suite Etre clair, distrayant, illustré, dynamique, facile à lire On joue sur la « profondeur » Plusieurs niveaux d’information, réparties dans des pages différentes, du plus succint au plus expert, grâce aux liens hypertexte On peut utiliser tous les médias et tous les genres Les textes, les photos, les sons, les vidéos, les infographies, fixes ou animées, les quizz, les serious game… On peut augmenter le trafic en adaptant son écriture En utilisant des mots clés pour créer du référencement naturel par les moteurs de recherche (SEO) En multipliant les liens internes ou externes En utilisant les blogs et les réseaux sociaux : Facebook, Twitter…

20 10 mars 201120 3 façons d’organiser les contenus L’écriture web : C’est adapter son écriture texte avec des liens, des mots clés… Positionnement SEO (search engine optimization) : indexation, référencement naturel par les moteurs de recherche L’écriture multimédia C’est utiliser des vidéos, des photos, des sons, des graphiques et les intégrer directement dans l’article Le rich média C’est organiser tous les types de contenus en tenant compte de leur spécificité et en faisant appel à l’interactivité

21 10 mars 201121 Structurer - 1 La pyramide inversée (Jacob Nielsen en 1997) Utilisée au départ par les médias de flux, tels ceux de la presse. Référencement par mots clés

22 10 mars 201122 Bretagne durable- http://www.bretagne-durable.fr http://www.bretagne-durable.fr Un site construit comme un magazine Pas de hiérarchie Titrage magazine Accroches trop longues et peu informatives Beaucoup de texte, pas de mots clés Photos prétexte Pas de liens internes en page d’accueil Peu de multimédia et d’interactivité

23 10 mars 201123 Structurer - 2 Schéma de Carole Rich (1998, université d’Anchorage, Alaska) Répartition de l’information sur 3 niveaux, les autres médias sont installés en périphérie Navigation assurée par des liens hypertextes Modèle Top/down aujourd’hui dépassé

24 10 mars 201124 Presse quotidienne régionale http://www.ouestfrance.fr http://www.letelegramme.com http://www.ouestfrance.frhttp://www.letelegramme.com

25 10 mars 201125 Structurer - 3 Modèles de Ramon Salaveria (2005, université de Navarre) 5 types de narration : linéaire, parallèle, arborescente, réticulaire, mixte

26 10 mars 201126 Site du Monde - 1 http://www.lemonde.fr http://www.lemonde.fr

27 10 mars 201127 Site du Monde - 2 http://www.lemonde.fr http://www.lemonde.fr

28 10 mars 201128 Structurer - 4 La pyramide couchée (Joao Canavilhas) Hiérarchiser les informations dans les pages et aux différents niveaux  Niveau 1 : Lead (titre + accroche) Qui, quand, quoi ? Niveau 2 : Texte. Rappel du titre + chapo + pourquoi et comment ? Niveau 3 : Informations plus détaillées ou éclairages sur chacune des 6 questions, en texte, en diaporama, en vidéo, en son, en infographie… Niveau 4 : archives du site ou ressources externes

29 10 mars 201129 Les Echos - Niveau 1 http://www.lesechos.fr/ http://www.lesechos.fr/

30 10 mars 201130 Les Echos - Niveaux 2, 3 et 4 http://www.lesechos.fr/ http://www.lesechos.fr/

31 10 mars 201131 Les Echos - Niveau 3 http://www.lesechos.fr/ http://www.lesechos.fr/

32 10 mars 201132 Niveau 4 - Le Télégramme http://www.letelegramme.com http://www.letelegramme.com

33 10 mars 201133 Structurer - 5 Les Black’s Wheels (Roger Black, université de Sao Polo, USA, 1997) Chacun des cercles représente un élément de narration

34 10 mars 201134 Structurer - 6 Les Black’s Wheel complexes (université de Sao Polo, USA) Schéma de narration organisé autour de 8 lignes directrices Encore au stade du développement Les besoins de l’internaute Les éléments de l’identification L’interactivité Le multimédia La personnalisation La navigation Le taggage La documentation

35 10 mars 201135 Adapter son écriture au Web/1 Optimiser le référencement par les moteurs de recherche (SEO) Identifier les mots clés ou les groupes de mots clés les plus utilisés Anticiper sur la façon dont les utilisateurs vont faire leur recherche Visiter les sites concurrents pour repérer les contenus et les mots clés Créer un corpus sémantique qui sera utilisé dans la page Le tester sur Google tendances : http://www.google.com/insights/search/?hl=fr#http://www.google.com/insights/search/?hl=fr# Augmenter l’indice de densité de mots clés (IDM) 2,5 % à 3,5 %, soit environ 3 fois le même mot cl é pour 100 mots, 9 fois pour un texte de 300 mots Les placer à des emplacements stratégiques, repérés par les moteurs : Dans l’URL et l’intitulé des pages, le nom des photos, des vidéos et des infographies Dans la titraille : titre, accroche, chapo, intertitres, légendes… En début de texte ou de paragraphes, dans les listes à puces En les mettant en gras ou en couleur Dans le code source de la page : dans les balises, les liens et l’URL

36 10 mars 201136 Adapter son écriture au Web/2 Des règles d’écriture spécifiques Soigner la titraille et les accroches Un titre informatif : Qui ? Quoi ? Une accroche qui complète le titre : Où, quand, comment ? Un chapeau synthétique qui résume le texte et sa conclusion Le message essentiel dans les premières lignes Ecrire dense, plutôt que court Un texte resserré (1 200 signes/180 mots), découpé en paragraphes (maxi 10 lignes) Des phrases courtes (12 à 13 mots), de structure simple (sujet, verbe, complément), au présent, à la forme active Un seul message par phrase, placé au début Un vocabulaire simple, concret, précis, imagé, vivant Des blancs pour isoler les textes importants Des listes à puces ou à numéros pour faciliter la lecture Placer des liens Vers des sous-papiers, des cartographies, des vidéos… Vers des ressources internes ou externes

37 10 mars 201137 Communiquer en rich média Les principes L’architecture des informations Exemple de Géo Webreportages

38 10 mars 201138 Qu’est-ce-que le rich media ? * « Ce qui permet de traiter une information en combinant plusieurs modes d’expression, organisés de manière à mettre en valeur leurs spécificités et leurs complémentarités » > Maîtriser la technique et les spécificités de chaque média > Savoir articuler les modes d’expression numérique (sons, images fixes et animées) en tenant compte des attentes et des usages des internautes > Savoir utiliser l’interactivité entre les différents médias et avec les internautes La complémentarité des modes d’expression permet : > L’accès intuitif à des contenus attractifs > La possibilité de construire son propre parcours de lecture > La compréhension aisée d’informations ou d’événements complexes > L’accès à un volume quasi infini de contenus pour approfondir un sujet > L’actualisation par enrichissements progressifs * D’après « Communiquer en rich media », d’Alain Joannès, 2009, CFPJ

39 10 mars 201139 L’arbre TSIFIAL des modes d’expression Textes Sons Bruits Musiques Voix Images fixes Dessins Photos Cartographies Images animées Diaporamas Vidéos Animations électroniques Liens hypertextes

40 10 mars 201140 A chaque mode d’expression, son usage Le texte, indispensable mais insuffisant Ce qui est reconnu par les mœurs de recherche > mots clés Se conserve, s’améliore, s’actualise, s’assimile Mais il peut être interprété et ne permet pas toujours d’exprimer des sentiments, de donner des ambiances et d’expliquer des phénomènes complexes Le son alerte, suggère, touche, nuance Les bruits évoquent des images La musique véhicule des sensations, des humeurs, des sentiments… La voix précise, nuance, émeut, humanise… Les images fixes détaillent, crédibilisent, enrichissent Peinture ou photographie Les images animées représentent, attirent, interprètent Le cinéma ou le documentaire : efficacité, persuasion, désinformation ? La vidéo permet le direct, l’instantané, mais aussi le partiel et le partial ? L’infographie traduit, explique, synthétise, simplifie

41 10 mars 201141 Exemple Géo Web reportage http://reportage-video.geo.fr/nouvelle-orleans-katrina/ http://reportage-video.geo.fr/nouvelle-orleans-katrina/ « C’est le contenu qui détermine le média que l’on va utiliser » Jean-Luc Marty, directeur éditorial et rédacteur en chef de Géo (Prisma Presse)

42 10 mars 201142 Exemple Géo Web reportage/1 http://reportage-video.geo.fr/nouvelle-orleans-katrina/

43 10 mars 201143 Exemple Géo Web reportage/2 http://reportage-video.geo.fr/nouvelle-orleans-katrina/

44 10 mars 201144 Exemple Géo Web reportage/3 http://reportage-video.geo.fr/nouvelle-orleans-katrina/

45 10 mars 201145 Exemple Géo Web reportage/4 http://reportage-video.geo.fr/nouvelle-orleans-katrina/

46 10 mars 201146 Exemple Géo Web reportage/5 http://reportage-video.geo.fr/nouvelle-orleans-katrina/

47 10 mars 201147 Exemple Géo Web reportage/6 http://reportage-video.geo.fr/nouvelle-orleans-katrina/

48 10 mars 201148 Exemple Géo Web reportage/7 http://reportage-video.geo.fr/nouvelle-orleans-katrina/

49 10 mars 201149 Structurer en rich media PrévisiblesImprévisiblesComplexesSimplesConcretsAbstraitsLongsBrefs 53404241 Caractéristiques des événements adaptés au rich media Les plus adaptés : Les événements prévisibles, complexes, concrets et longs Exemple : la crise économique Modes de traitement possibles des différents aspects de la crise DonnéesImagesSonsTextes PertesGraphiques, statistiquesCommentairesListes d’établissements FaillitesPhotos, vidéos, cartesCommentairesCommentaires, chiffrages AidesGraphiquesCommentairesChiffrages, précisions PIBAnimations électroniquesCommentairesPrécisions EmploiVidéos, animations, cartesTémoignagesPrécisions PrixGraphiques, animationsCommentairesPrécisions, chiffrages

50 10 mars 201150 La crise vue par le Financial Times Une infographie animée de Wall Street avec un curseur chronologique allant de septembre 2007 à octobre 2008 Des données chiffrées révélées en passant la souris sur les gratte-ciel Un diaporama sur l’affaire Kerviel Les interviews en vidéo d’analystes financiers Mode de traitement

51 10 mars 201151 Pour aller plus loin… L’Ecrit web, traitement de l’information sur Internet, de Joël Ronez, 2007, CFPJ Communiquer en rich media, de Alain Joannès, 2009, CFPJ Livres Sites ou blogs http://www.journalistiques.fr, le site d’Alain Joannès http://www.journalistiques.fr http://obsweb.net/, l’observatoire du journalismehttp://obsweb.net/ http://www.journalismes.info/, le web observatoire du journalisme sur Internethttp://www.journalismes.info/ http://www.inaglobal.fr/, la Revue des industries créatives et des médiashttp://www.inaglobal.fr/ http://www.presseedition.fr/, l’actualité des médias, de l’édition et de la communicationhttp://www.presseedition.fr/ http://www.categorynet.com/, portail du journalisme (actus, emplois et stages)http://www.categorynet.com/ http://www.asfored.org, portail de l’édition (actu, emplois, stages)http://www.asfored.org http://www.pcompublique.com, portail de la communication territorialehttp://www.pcompublique.com http://www.mediaetudiant.fr/, bons plans étudiants, actu, forumhttp://www.mediaetudiant.fr/