Mettre en scène l'info sur le web etienne thierry-ayme

581 vues

Publié le

Formation cfpj

Publié dans : Formation
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
581
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
17
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Mettre en scène l'info sur le web etienne thierry-ayme

  1. 1. Etienne Thierry-Aymé [email_address] Tél : 06 14 15 15 02 M ettre en scène l’information sur le W eb Ecrire avec le mutlimédia pour rendre l’information plus attractive
  2. 2. Si la formation ne durait que 10 minutes… <ul><li>Du Mix-Média au Récit multimédia </li></ul><ul><li>Un récit multimédia n’est pas un récit linéaire </li></ul><ul><li>C’est un sujet avec plusieurs angles </li></ul><ul><li>C’est une combinaison de médias </li></ul><ul><li>Avec un média pivot autour duquel viendront s’articuler les autres </li></ul><ul><li>L’utilisateur choisit les éléments de l’histoire </li></ul><ul><li>Sur internet, c’est facile d’intégrer du son, des images de </li></ul><ul><li>la vidéo… </li></ul>
  3. 3. On lit 25 % moins vite à l’écran que sur papier Ce que vous savez déjà…
  4. 4. Les internautes scannent les pages plus qu’ils ne les lisent … Ce que vous savez déjà…
  5. 5. Les modes de lecture d’un contenu multimédia Scanning / Reading 83 % des internautes lisent en diagonales 17% lisent mot à mot
  6. 6. Le temps moyen passé sur une page Web … Ce que vous savez déjà… ? Entre 40 et 50 secondes
  7. 7. La lecture en « F » Source Jakob Nielsen http://bit.ly/18Zl1I Comment lisons-nous à l’écran ?
  8. 8. Les modes de lecture d’un contenu multimédia Lecture en « F » Pour un parcours de lecture détaillé http://bit.ly/fopVID Source : Laurent Goffin http://bit.ly/ePre65
  9. 9. Les modes de lecture d’un contenu multimédia Les zones prioritaires
  10. 10. Adapter son style
  11. 11. + Neuf + Important + Proche + général + détails + explicatif Who ? When ? Where ? Why ? What ? + 2 H + Architecture de l’information hypertexte Au niveau d’un texte La pyramide inversée Essentiel Détail Pour en savoir plus : http://bit.ly/eYswj
  12. 12. <ul><ul><li>Écrire court </li></ul></ul><ul><ul><li>Écrire simple </li></ul></ul><ul><ul><li>Écrire concret </li></ul></ul>Ecrire sur le Web Bonnes pratiques
  13. 13. Plus la phrase est courte… <ul><li>Mémorisation du message en fonction du nombre de mots par phrase </li></ul>Source  : La Lisibilité , François Richaudeau, Retz, 1969 10 % 50 % 30 % 40 30 % 70 % 50 % 24 50 % 90 % 70 % 17 85 % 95 % 90 % 13 100% 100% 100 % 12 2eme moitié 1ere moitié Message entier Nb mots
  14. 14. Taille d’un article web <ul><li>Ne pas dépasser les trois pages écrans </li></ul><ul><li>1 écran = 1000-1500 s. </li></ul>+ de mille signes : mettre en relief Edition web Bonnes pratiques
  15. 15. Aérer, donner du relief > Intertitres > Illustrations > Tableaux > Gras (éviter l’italique) > Mise en exergue (retrait, guillemet, fond de couleur) > Eviter la justification > Découper en paragraphes Edition web Bonnes pratiques
  16. 16. La gamme d'écrans plats Numerik L'écran plat le plus compact au monde Si vous cherchez à utiliser un produit dernier cri occupant un minimum d'espace, la gamme d'écrans plats Numerik vous séduira à coup sûr. Grâce à leur taille réduite, ces écrans ne pourront jamais encombrer votre espace de travail. Ergonomiques et esthétiques, ils sont tout désignés pour les foires commerciales, les réunions d'affaires et les conférences publiques; bref, un produit de rendement inégalé pour toutes les situations où l'économie d'espace et la qualité du design comptent. L'image nette et sans scintillement, jumelée à l'effet panoramique, procurent un confort d'utilisation optimal. Avec sa résolution de 1 3000 ppp et son poids de 1,2 Kg, l'écran plat Numerik supplante le produit équivalent de Hewlett-Packard (1 000 ppp, 3,4 Kg) ou celui de Dell (900 ppp, 5,6 Kg). Détails. Après Avant Edition web Bonnes pratiques
  17. 17. L’écrit est nécessaire mais pas suffisant <ul><li>Pour exploiter le potentiel du web </li></ul><ul><li>Pour satisfaire les internautes, tous les internautes </li></ul>
  18. 18. Typologie des lecteurs sur le web <ul><li>Les visuels et auditifs </li></ul><ul><li>Les utilisateurs </li></ul><ul><li>Les lecteurs </li></ul><ul><li>Les «parleurs» </li></ul><ul><li>Votre seul objectif -> Capter leur attention </li></ul>Source : Crawford Killian http://bit.ly/hTot6i
  19. 19. Ecrire multimédia <ul><li>Les photos </li></ul><ul><li>recadrées sur détail - Visuels forts, avec apport informatif - balises ALT et TITLE </li></ul><ul><li>Son / Vidéo </li></ul><ul><li>- Mix Média (stream) </li></ul><ul><li>Récit multimédia </li></ul><ul><li>Diaporama </li></ul><ul><li>- avec du son c’est mieux </li></ul><ul><li>N’oubliez pas… de proposer des </li></ul><ul><li>ressources complémentaires (ex de Rue 89) </li></ul>
  20. 20. Les liens Bonnes pratiques > Les liens hypertextes Ecrire hypertexte <ul><li>Éléments de navigation par excellence </li></ul><ul><li>Apportent une nouvelle dimension aux textes </li></ul>
  21. 21. Les liens hypertextes richmédia <ul><li>Avec Apture </li></ul><ul><li>Des liens contextuels </li></ul><ul><li>Son, vidéo, ressources </li></ul><ul><li>documentaires </li></ul><ul><li>Une expérience optimisée : </li></ul><ul><li>Une application ergonomique </li></ul><ul><li>L’effet labyrinthe supprimé </li></ul>www.apture.com
  22. 22. Du simple mix-média au récit multimédia Pour en savoir plus : www.knightdigitalmediacenter.org
  23. 23. C’est quoi un mix-média ? <ul><li>Concilier texte et </li></ul><ul><li>vidéo/son </li></ul><ul><li>Son et vidéos </li></ul><ul><li>de citations sont </li></ul><ul><li>intégrées </li></ul><ul><li>tout au long du texte </li></ul>http://bit.ly/eZGkre
  24. 24. Scénariser Texte et vidéo <ul><li>Construire la lecture </li></ul><ul><li>d’un sujet complexe </li></ul><ul><li>Contextualiser les faits </li></ul><ul><li>bruts : </li></ul><ul><li>Une vidéo document </li></ul><ul><li>(pivot central) </li></ul><ul><li>Le texte décrypte l’histoire </li></ul>http://bit.ly/i3JSMz
  25. 25. Mix-Média Texte et vidéo <ul><li>La vidéo pivot central </li></ul><ul><li>Le texte indique la </li></ul><ul><li>thématique du contenu vidéo </li></ul><ul><li>Mots clés, référencement </li></ul><ul><li>Format court </li></ul>http://bit.ly/f1aAdv
  26. 26. Mix-Média Texte et vidéo <ul><li>En texte : des infos </li></ul><ul><li>service </li></ul><ul><li>En vidéo : reportage </li></ul><ul><li>complet sur la grève </li></ul><ul><li>Deux angles différents </li></ul><ul><li>Formats courts </li></ul>http://bit.ly/hijwGF
  27. 27. Mix-Média Texte et son <ul><li>L’interview audio </li></ul><ul><li>Le texte permet de chapitrer </li></ul><ul><li>l’interview </li></ul><ul><li>Le son pivot central </li></ul><ul><li>Format très court </li></ul>http://bit.ly/igWW0d
  28. 28. Mix Média Texte et son <ul><li>L’interview audio </li></ul><ul><li>Contextualisation </li></ul><ul><li>+ </li></ul><ul><li>Info essentielle </li></ul><ul><ul><ul><li>MAIS </li></ul></ul></ul><ul><li>La mauvaise qualité </li></ul><ul><li>sonore nuit à l’info </li></ul>http://bit.ly/9JIb93
  29. 29. Mix Média Texte et diaporama <ul><li>Article pivot central </li></ul><ul><li>Le diaporama </li></ul><ul><li>comme illustration </li></ul><ul><li>Format court </li></ul>http://bit.ly/qfHay
  30. 30. Mix-média Mashup et vidéo <ul><li>Zeemaps </li></ul><ul><li>Un fond de carte </li></ul><ul><li>Des événements </li></ul><ul><li>géolocalisés </li></ul><ul><li>Une vidéo par </li></ul><ul><li>événement </li></ul>www.zeemaps.com
  31. 31. Le récit multimédia ou Digital Story telling
  32. 32. Un récit multimédia , c’est quoi ? <ul><li>C’est une combinaison textes - images -sons – </li></ul><ul><li>vidéos - graphiques - mashups autour d’un même </li></ul><ul><li>sujet </li></ul><ul><li>Un format de récit non linéaire </li></ul><ul><li>Des médias non redondants </li></ul><ul><li>Des éléments d’interactivité </li></ul>
  33. 33. Un récit multimédia , c’est quoi ? <ul><li>Pas de structure narrative rigide </li></ul><ul><li>Un sujet, plusieurs angles </li></ul><ul><li>Un angle, un média </li></ul><ul><li>L’utilisateur choisit les éléments de l’histoire </li></ul>
  34. 34. Quelques exemples… <ul><li>360° </li></ul>http://www.360degrees.org
  35. 35. Touching hearts http://media.soundslides.com/archive/2000/hearts/
  36. 36. Géo Web-Reportages http://reportage-video.geo.fr
  37. 37. Récit multimédia Etude de cas Le crash aérien de Buffalo Le crash aérien de Buffalo le 13 février 2009 http://nyti.ms/dT38Or
  38. 38. Un sujet : le crash du vol 3407 <ul><li>Plusieurs angles à traiter : </li></ul><ul><li>Les faits </li></ul><ul><li>L’intervention des pompiers </li></ul><ul><li>Les dernières minutes de vol </li></ul><ul><li>Dégats sur le lieu du crash (zone d’habitation) </li></ul><ul><li>Portraits de victimes </li></ul><ul><li>Derniers échanges entre le pilote et le contrôle aérien </li></ul>Le choix de l’angle www.journalatelier.net/L-angle-journalistique.html
  39. 39. A chaque angle, son média : <ul><li>Les faits : texte </li></ul><ul><li>Les pompiers : diaporama </li></ul><ul><li>Dernières minutes du vol : infographie interactive </li></ul><ul><li>Le lieu du crash : Googlemap + Streetview </li></ul><ul><li>Portraits de victimes : Diaporama </li></ul><ul><li>Derniers échanges : bande-son </li></ul>
  40. 40. A chaque média , son intention : <ul><li>Les textes : pour comprendre, objectiver </li></ul><ul><li>Le diaporama : pour voir le lieu et l’action de l’événement </li></ul><ul><li>L’infographie interactive : pour rationnaliser «scientifique» </li></ul><ul><li>Google Map & Streetview : pour situer l’événement </li></ul><ul><li>Diaporama des victimes : pour humaniser la catastrophe </li></ul><ul><li>Bande-son : pour donner le ton, l’émotion, l’ambiance </li></ul><ul><li>La vidéo : pour replonger dans l’action, vivre l’événement, témoigner </li></ul>
  41. 41. Un récit multimédia , c’est donc : <ul><li>Un récit non linéaire </li></ul><ul><li>Essentiellement visuel </li></ul><ul><li>Interactif </li></ul><ul><li>A dimensions multiples (Factuel, humain, sociologique, économique, géographique, historique… universel) </li></ul><ul><li>Avec un média pivot (autour duquel s’articulent les autres) </li></ul><ul><li>Des ressources complémentaires (liens) </li></ul>
  42. 42. Sons, diaporamas, vidéos… Intégrer des éléments multimédias grâce aux outils du Web
  43. 43. Sons, vidéos, diaporamas, présentations… <ul><li>Deux méthodes pour publier : </li></ul><ul><li>Hébergement propre </li></ul><ul><li>ASP (Application Service Provider) </li></ul>
  44. 44. Choisir sa solution d’hébergement source : www.universmedia.com
  45. 45. La vidéo <ul><li>Deux plateformes principales </li></ul><ul><li>Mais aussi… </li></ul>http://bit.ly/qfHay
  46. 46. Le son <ul><li>MODE ASP </li></ul><ul><ul><li>Sound Cloud </li></ul></ul><ul><ul><li>Podcastpeople </li></ul></ul><ul><li>HEBERGEMENT PROPRE </li></ul><ul><li>Solutions Quicktime ou Flash </li></ul><ul><li>Pour le montage de vos fichiers </li></ul>http://audacity.sourceforge.net/ <ul><ul><li>www.soundcloud.com </li></ul></ul>www.podcastpeople.com
  47. 47. Le diaporama <ul><li>MODE ASP </li></ul><ul><li>flickr.com, animoto.com, voicethread.com </li></ul><ul><li>HEBERGEMENT PROPRE </li></ul><ul><li>Soundslides (Flash) </li></ul>www.soundslides.com
  48. 48. Le diaporama <ul><li>Flickr </li></ul><ul><li>pour stocker ses photos en </li></ul><ul><li>ligne et créer ses </li></ul><ul><li>diaporamas </li></ul><ul><li>Et aussi… </li></ul><ul><li>Flickrslidr </li></ul><ul><li>pour créer un diaporama, à partir d’un album de Flickr </li></ul>www.flickr.com www.flickrslidr.com
  49. 49. Créer un diaporama sonore… <ul><li>… avec Animoto.com </li></ul><ul><li>Fond musical uniquement </li></ul><ul><li>Exportable au format vidéo </li></ul>www.animoto.com
  50. 50. Créer un diaporama sonore interactif… <ul><li>… avec Voice Thread </li></ul><ul><li>Les internautes pourront alors commenter chaque image (texte, son, vidéo) </li></ul><ul><li>Exportable en vidéo </li></ul>http://voicethread.com
  51. 51. L’info à la carte ! <ul><li>Google maps </li></ul><ul><li>maps.google.fr </li></ul><ul><li>Communitywalk </li></ul><ul><li>www.communitywalk.com </li></ul><ul><li>Zeemaps </li></ul><ul><li>www.zeemaps.com </li></ul><ul><li>Avec pour chacun : </li></ul><ul><li>L’ouverture d’un compte gratuit </li></ul><ul><li>La simplicité de mise en œuvre </li></ul><ul><li>Des cartes exportables sur son site Web </li></ul>http://bit.ly/ejBHb5
  52. 52. Intégrer une présentation <ul><li>Grâce à slideshare.net, scribd.com, issuu.com … </li></ul><ul><li>Partagez </li></ul><ul><li>vos présentations </li></ul><ul><li>powerpoint </li></ul><ul><li>ou fichiers PDF en ligne </li></ul>
  53. 53. Créer une ligne de temps… <ul><li>… pour suivre un événement dans la durée avec Dipity </li></ul>www.dipity.com
  54. 54. Et aussi… <ul><li>Many eyes pour habiller vos données </li></ul><ul><li>Pearltrees </li></ul><ul><li>pour suivre le fil </li></ul><ul><li>d’une </li></ul><ul><li>navigation </li></ul>http://bit.ly/bUxl0J <ul><li>Rich Chart Live </li></ul><ul><li>pour créer de beaux </li></ul><ul><li>graphiques en 5 mn </li></ul>www.richchartlive.com www.pearltrees.com <ul><li>Micropoll pour créer un sondage en ligne </li></ul>www.micropoll.com
  55. 55. Le micro bloging <ul><li>L’info en temps réel </li></ul><ul><li>Le partage dans un réseau social </li></ul><ul><li>Lifestreaming </li></ul>« Le lifestream est un flux chronologique de documents qui fonctionne comme un agenda de votre vie électronique. Chaque document que vous créez et tous les document que les gens vous envoient sont répertoriés dans votre lifestream. » Ce terme a été formulé par Eric Freeman et David Gelernter de la Yale University au milieu des années 90. www.coveritlive.com
  56. 56. Le micro blogging <ul><li>Vivre un événement à chaud </li></ul><ul><li>La photo a fait le tour du monde </li></ul>www.twitter.com
  57. 57. Concevoir un sujet multimédia sur Internet
  58. 58. Penser et gérer l’événement dans la durée L’exemple du Tsunami au Japon : www.dipity.com/e_tha/Gerer-un-evenement-dans-sa-duree Premières alertes Microbloging Infographies Diaporamas Sujets froids Dossiers complets Réactions Commentaires des internautes (vidéos) Appels à contribution Couverture « live »
  59. 59. Concevoir un récit multimédia <ul><li>Un récit non linéaire </li></ul><ul><li>Proposer un scénario </li></ul><ul><li>Choisir les outils multimédias pour chaque partie du récit </li></ul><ul><li>Dessiner le Storyboard de chaque élément multimédia du récit </li></ul><ul><li>Concevoir la page d’accueil du dossier </li></ul>Source : Knight Digital Media center www.knightdigitalmediacenter.org/multimedia_training
  60. 60. Soigner sa page d’accueil <ul><li>En HTML </li></ul>http://nyti.ms/hxRK4S
  61. 61. Soigner sa page d’accueil http://bit.ly/cSzd3l EN FLASH
  62. 62. Soigner sa page d’accueil EN FLASH http://bit.ly/yagHr
  63. 63. Soigner sa page d’accueil source : www.universmedias.com
  64. 64. Soigner sa page d’accueil source : www.universmedias.com
  65. 65. Le dossier multimédia www.vuvox.com/collage/detail/0144a7b618
  66. 66. Le dossier multimédia www.vuvox.com/collage/detail/036007ff80
  67. 67. Le dossier multimédia www.vuvox.com/collage/detail/0113aee81c
  68. 68. Le dossier multimédia www.vuvox.com/collage/detail/012838bc5e
  69. 69. Le dossier multimédia www.vuvox.com/collage/detail/0ed895cc9
  70. 70. A vous de jouer ! <ul><li>Sujets au choix : </li></ul><ul><li>Evénements du Japon </li></ul><ul><li>Printemps des peuples arabes </li></ul><ul><li>Phénomène de Flash mob </li></ul><ul><li>Crash de l’A320 dans l’Hudson river… </li></ul><ul><li>Concevoir un dossier multimédia </li></ul><ul><li>Proposer un story-board </li></ul><ul><li>Présenter la page d’accueil du dossier </li></ul><ul><li>Réaliser un VUVOX Collage </li></ul>
  71. 71. Etienne Thierry-Aymé [email_address] Tél : 06 14 15 15 02

×