Ecriture web : les applications multimédia pour enrichir ses contenus web

1 809 vues

Publié le

Cartes interactives, frises chronologiques, diaporamas, carte Google Streetview intégrées, infographies et data-visualisations, lives sociaux. Tous les outils gratuits pour enrichir ses pages web et créer du lien avec vos lecteurs.

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

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

Aucune remarque pour cette diapositive

Ecriture web : les applications multimédia pour enrichir ses contenus web

  1. 1. FRANK Cyrille Journaliste/consultant/formateur Fondateur de Askmedia&Médiaculture www.mediaculture.fr mediacademie.org cfrankfr@gmail.comtwitter : @cyceron
  2. 2. Aujourd'hui | Jour 2 Photo Matt Erasmus sous licence Creative Commons (Flickr). >Intégrer des contenus mutimédias(photos, vidéos, sons, documents…) > La visualisation de l’information et les formats dynamiques : cartes, timelines, graphiques interactifs Intégrer l’information en continu : comment actualiser un article, organiser les multiples entrées d’un même sujet >Intégration des éléments multimédia sur Tumblr.com Edition et adaptation des contenus web
  3. 3. Le traitement et enrichissementplurimediade l’info
  4. 4. Les élémentsmultimedia peuventillustrer, compléter, voireremplacerunehistoire écrite
  5. 5. Les sons soundcloud.com
  6. 6. EXERCICE Intégrationde bandesson Soundclouddansun article www.tumblr.com cfrankfr@yahoo.fr vendredi24
  7. 7. Les vidéos www.youtube.com
  8. 8. Les videos www.dailymotion.com
  9. 9. EXERCICE Intégrationd’unevideo youtubedansun article, modification de sataille dansle code www.tumblr.com cfrankfr@yahoo.fr vendredi24
  10. 10. Unecarte interactive en 3D pour localiser le lieu de l’évènement maps.google.fr
  11. 11. Repasserdansla version classique pour pouvoirrécupérerle code iframe maps.google.fr
  12. 12. EXERCICE Intégrationd’une carte googleStreet dans son tumblr www.tumblr.com cfrankfr@yahoo.fr vendredi24
  13. 13. Les cartesinteractivesinformatives maps.google.fr
  14. 14. Unecarte pour localiser des concerts... maps.google.fr
  15. 15. Unecarte pour localiser un bâtiment, unezone... maps.google.fr
  16. 16. EXERCICE Créez une carte interactive et ajoutez-la à votre Tumblr
  17. 17. Un «powerpoint» pour expliquer www.slideshare.com
  18. 18. Un document pdfavec liseuse www.sribd.com
  19. 19. EXERCICE Intégrationd’un Slidesharedans tumblr www.tumblr.com cfrankfr@yahoo.fr vendredi24
  20. 20. Les photos interactives www.thinglink
  21. 21. EXERCICE Modification d’unephoto dans thinglink Et intégration dans un tumblr (A partir d’un article Francebleu) www.thinkglink.com cfrankfr@gmail.com cyrille www.tumblr.com cfrankfr@yahoo.fr vendredi24
  22. 22. Un texteaccompagné d'uneouplusieursimages et d'unevideo ne sontpas toujoursles meilleursmoyens de raconterunehistoire
  23. 23. Les infographies www.piktochart.com
  24. 24. Lesinfographiesplus illustrées www.easel.ly
  25. 25. Les graphiques www.infogr.am
  26. 26. Les graphiques www.datawrapper.de
  27. 27. EXERCICE www.tumblr.com cfrankfr@yahoo.fr vendredi24 Création d’un graphique simple et intégration dans un tumblr www.infogr.am cfrankfr vendredi24
  28. 28. Les quiz http://www.linternaute.com/ http://www.dossierfamilial.com/
  29. 29. www.pollsnack.com Les quiz
  30. 30. Les mashups On mélange contenu+ service web
  31. 31. Une frise chronologique pour suivre un événement http://timeline.verite.co
  32. 32. Uneagrégationde liens, videos, réactionsTwitter/FB… www.storify.com
  33. 33. EXERCICE Créationd’un storify et intégration dans son tumblr A partir par exemple de :
  34. 34. Un «direct» permanent www.twitter.com
  35. 35. Un «powerpoint» pour expliquer www.sliderocket.com
  36. 36. Un widget photo avant/après www.blogvio.com
  37. 37. Les diaporamas
  38. 38. Les diaporamas www.photosnack.com
  39. 39. EXERCICE Création d’un diaporama sur wordpress
  40. 40. Maiscen’estpas parce qu’unechose est Techniquementpossible Qu’ilfautla faire
  41. 41. 1e question à se poser : Quel est le format qui met le mieux en valeur le propos ? Le plus clair Le plus simple Le plus agréable Le plus impactant
  42. 42. 2e question à se poser : Quel est le support surlequel le contenu sera regardé* ? PC = à moitié au travail Mobile = écrans petits, pas de flash Tablette = grands écrans, pas de flash *Probablementet majoritairement
  43. 43. Mercide votre attention!! SurTwitter : @cyceronmediacademie.org mediaculture.fr Conseil éditorial, formation, accompagnement

×