Mettre en scène l'info sur le web   etienne thierry-ayme
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 255 views

 

Statistics

Views

Total Views
255
Views on SlideShare
255
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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. Si la formation ne durait que 10 minutes…
    • Du Mix-Média au Récit multimédia
    • Un récit multimédia n’est pas un récit linéaire
    • C’est un sujet avec plusieurs angles
    • C’est une combinaison de médias
    • Avec un média pivot autour duquel viendront s’articuler les autres
    • L’utilisateur choisit les éléments de l’histoire
    • Sur internet, c’est facile d’intégrer du son, des images de
    • la vidéo…
  • 3. On lit 25 % moins vite à l’écran que sur papier Ce que vous savez déjà…
  • 4. Les internautes scannent les pages plus qu’ils ne les lisent … Ce que vous savez déjà…
  • 5. Les modes de lecture d’un contenu multimédia Scanning / Reading 83 % des internautes lisent en diagonales 17% lisent mot à mot
  • 6. Le temps moyen passé sur une page Web … Ce que vous savez déjà… ? Entre 40 et 50 secondes
  • 7. La lecture en « F » Source Jakob Nielsen http://bit.ly/18Zl1I Comment lisons-nous à l’écran ?
  • 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. Les modes de lecture d’un contenu multimédia Les zones prioritaires
  • 10. Adapter son style
  • 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.
      • Écrire court
      • Écrire simple
      • Écrire concret
    Ecrire sur le Web Bonnes pratiques
  • 13. Plus la phrase est courte…
    • Mémorisation du message en fonction du nombre de mots par phrase
    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. Taille d’un article web
    • Ne pas dépasser les trois pages écrans
    • 1 écran = 1000-1500 s.
    + de mille signes : mettre en relief Edition web Bonnes pratiques
  • 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. 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. L’écrit est nécessaire mais pas suffisant
    • Pour exploiter le potentiel du web
    • Pour satisfaire les internautes, tous les internautes
  • 18. Typologie des lecteurs sur le web
    • Les visuels et auditifs
    • Les utilisateurs
    • Les lecteurs
    • Les «parleurs»
    • Votre seul objectif -> Capter leur attention
    Source : Crawford Killian http://bit.ly/hTot6i
  • 19. Ecrire multimédia
    • Les photos
    • recadrées sur détail - Visuels forts, avec apport informatif - balises ALT et TITLE
    • Son / Vidéo
    • - Mix Média (stream)
    • Récit multimédia
    • Diaporama
    • - avec du son c’est mieux
    • N’oubliez pas… de proposer des
    • ressources complémentaires (ex de Rue 89)
  • 20. Les liens Bonnes pratiques > Les liens hypertextes Ecrire hypertexte
    • Éléments de navigation par excellence
    • Apportent une nouvelle dimension aux textes
  • 21. Les liens hypertextes richmédia
    • Avec Apture
    • Des liens contextuels
    • Son, vidéo, ressources
    • documentaires
    • Une expérience optimisée :
    • Une application ergonomique
    • L’effet labyrinthe supprimé
    www.apture.com
  • 22. Du simple mix-média au récit multimédia Pour en savoir plus : www.knightdigitalmediacenter.org
  • 23. C’est quoi un mix-média ?
    • Concilier texte et
    • vidéo/son
    • Son et vidéos
    • de citations sont
    • intégrées
    • tout au long du texte
    http://bit.ly/eZGkre
  • 24. Scénariser Texte et vidéo
    • Construire la lecture
    • d’un sujet complexe
    • Contextualiser les faits
    • bruts :
    • Une vidéo document
    • (pivot central)
    • Le texte décrypte l’histoire
    http://bit.ly/i3JSMz
  • 25. Mix-Média Texte et vidéo
    • La vidéo pivot central
    • Le texte indique la
    • thématique du contenu vidéo
    • Mots clés, référencement
    • Format court
    http://bit.ly/f1aAdv
  • 26. Mix-Média Texte et vidéo
    • En texte : des infos
    • service
    • En vidéo : reportage
    • complet sur la grève
    • Deux angles différents
    • Formats courts
    http://bit.ly/hijwGF
  • 27. Mix-Média Texte et son
    • L’interview audio
    • Le texte permet de chapitrer
    • l’interview
    • Le son pivot central
    • Format très court
    http://bit.ly/igWW0d
  • 28. Mix Média Texte et son
    • L’interview audio
    • Contextualisation
    • +
    • Info essentielle
        • MAIS
    • La mauvaise qualité
    • sonore nuit à l’info
    http://bit.ly/9JIb93
  • 29. Mix Média Texte et diaporama
    • Article pivot central
    • Le diaporama
    • comme illustration
    • Format court
    http://bit.ly/qfHay
  • 30. Mix-média Mashup et vidéo
    • Zeemaps
    • Un fond de carte
    • Des événements
    • géolocalisés
    • Une vidéo par
    • événement
    www.zeemaps.com
  • 31. Le récit multimédia ou Digital Story telling
  • 32. Un récit multimédia , c’est quoi ?
    • C’est une combinaison textes - images -sons –
    • vidéos - graphiques - mashups autour d’un même
    • sujet
    • Un format de récit non linéaire
    • Des médias non redondants
    • Des éléments d’interactivité
  • 33. Un récit multimédia , c’est quoi ?
    • Pas de structure narrative rigide
    • Un sujet, plusieurs angles
    • Un angle, un média
    • L’utilisateur choisit les éléments de l’histoire
  • 34. Quelques exemples…
    • 360°
    http://www.360degrees.org
  • 35. Touching hearts http://media.soundslides.com/archive/2000/hearts/
  • 36. Géo Web-Reportages http://reportage-video.geo.fr
  • 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. Un sujet : le crash du vol 3407
    • Plusieurs angles à traiter :
    • Les faits
    • L’intervention des pompiers
    • Les dernières minutes de vol
    • Dégats sur le lieu du crash (zone d’habitation)
    • Portraits de victimes
    • Derniers échanges entre le pilote et le contrôle aérien
    Le choix de l’angle www.journalatelier.net/L-angle-journalistique.html
  • 39. A chaque angle, son média :
    • Les faits : texte
    • Les pompiers : diaporama
    • Dernières minutes du vol : infographie interactive
    • Le lieu du crash : Googlemap + Streetview
    • Portraits de victimes : Diaporama
    • Derniers échanges : bande-son
  • 40. A chaque média , son intention :
    • Les textes : pour comprendre, objectiver
    • Le diaporama : pour voir le lieu et l’action de l’événement
    • L’infographie interactive : pour rationnaliser «scientifique»
    • Google Map & Streetview : pour situer l’événement
    • Diaporama des victimes : pour humaniser la catastrophe
    • Bande-son : pour donner le ton, l’émotion, l’ambiance
    • La vidéo : pour replonger dans l’action, vivre l’événement, témoigner
  • 41. Un récit multimédia , c’est donc :
    • Un récit non linéaire
    • Essentiellement visuel
    • Interactif
    • A dimensions multiples (Factuel, humain, sociologique, économique, géographique, historique… universel)
    • Avec un média pivot (autour duquel s’articulent les autres)
    • Des ressources complémentaires (liens)
  • 42. Sons, diaporamas, vidéos… Intégrer des éléments multimédias grâce aux outils du Web
  • 43. Sons, vidéos, diaporamas, présentations…
    • Deux méthodes pour publier :
    • Hébergement propre
    • ASP (Application Service Provider)
  • 44. Choisir sa solution d’hébergement source : www.universmedia.com
  • 45. La vidéo
    • Deux plateformes principales
    • Mais aussi…
    http://bit.ly/qfHay
  • 46. Le son
    • MODE ASP
      • Sound Cloud
      • Podcastpeople
    • HEBERGEMENT PROPRE
    • Solutions Quicktime ou Flash
    • Pour le montage de vos fichiers
    http://audacity.sourceforge.net/
      • www.soundcloud.com
    www.podcastpeople.com
  • 47. Le diaporama
    • MODE ASP
    • flickr.com, animoto.com, voicethread.com
    • HEBERGEMENT PROPRE
    • Soundslides (Flash)
    www.soundslides.com
  • 48. Le diaporama
    • Flickr
    • pour stocker ses photos en
    • ligne et créer ses
    • diaporamas
    • Et aussi…
    • Flickrslidr
    • pour créer un diaporama, à partir d’un album de Flickr
    www.flickr.com www.flickrslidr.com
  • 49. Créer un diaporama sonore…
    • … avec Animoto.com
    • Fond musical uniquement
    • Exportable au format vidéo
    www.animoto.com
  • 50. Créer un diaporama sonore interactif…
    • … avec Voice Thread
    • Les internautes pourront alors commenter chaque image (texte, son, vidéo)
    • Exportable en vidéo
    http://voicethread.com
  • 51. L’info à la carte !
    • Google maps
    • maps.google.fr
    • Communitywalk
    • www.communitywalk.com
    • Zeemaps
    • www.zeemaps.com
    • Avec pour chacun :
    • L’ouverture d’un compte gratuit
    • La simplicité de mise en œuvre
    • Des cartes exportables sur son site Web
    http://bit.ly/ejBHb5
  • 52. Intégrer une présentation
    • Grâce à slideshare.net, scribd.com, issuu.com …
    • Partagez
    • vos présentations
    • powerpoint
    • ou fichiers PDF en ligne
  • 53. Créer une ligne de temps…
    • … pour suivre un événement dans la durée avec Dipity
    www.dipity.com
  • 54. Et aussi…
    • Many eyes pour habiller vos données
    • Pearltrees
    • pour suivre le fil
    • d’une
    • navigation
    http://bit.ly/bUxl0J
    • Rich Chart Live
    • pour créer de beaux
    • graphiques en 5 mn
    www.richchartlive.com www.pearltrees.com
    • Micropoll pour créer un sondage en ligne
    www.micropoll.com
  • 55. Le micro bloging
    • L’info en temps réel
    • Le partage dans un réseau social
    • Lifestreaming
    « 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. Le micro blogging
    • Vivre un événement à chaud
    • La photo a fait le tour du monde
    www.twitter.com
  • 57. Concevoir un sujet multimédia sur Internet
  • 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. Concevoir un récit multimédia
    • Un récit non linéaire
    • Proposer un scénario
    • Choisir les outils multimédias pour chaque partie du récit
    • Dessiner le Storyboard de chaque élément multimédia du récit
    • Concevoir la page d’accueil du dossier
    Source : Knight Digital Media center www.knightdigitalmediacenter.org/multimedia_training
  • 60. Soigner sa page d’accueil
    • En HTML
    http://nyti.ms/hxRK4S
  • 61. Soigner sa page d’accueil http://bit.ly/cSzd3l EN FLASH
  • 62. Soigner sa page d’accueil EN FLASH http://bit.ly/yagHr
  • 63. Soigner sa page d’accueil source : www.universmedias.com
  • 64. Soigner sa page d’accueil source : www.universmedias.com
  • 65. Le dossier multimédia www.vuvox.com/collage/detail/0144a7b618
  • 66. Le dossier multimédia www.vuvox.com/collage/detail/036007ff80
  • 67. Le dossier multimédia www.vuvox.com/collage/detail/0113aee81c
  • 68. Le dossier multimédia www.vuvox.com/collage/detail/012838bc5e
  • 69. Le dossier multimédia www.vuvox.com/collage/detail/0ed895cc9
  • 70. A vous de jouer !
    • Sujets au choix :
    • Evénements du Japon
    • Printemps des peuples arabes
    • Phénomène de Flash mob
    • Crash de l’A320 dans l’Hudson river…
    • Concevoir un dossier multimédia
    • Proposer un story-board
    • Présenter la page d’accueil du dossier
    • Réaliser un VUVOX Collage
  • 71. Etienne Thierry-Aymé [email_address] Tél : 06 14 15 15 02