Outils sans code pour réaliser des narrations web multimédia et interactives

Video Design Formation - 11 octobre 2016  


Simon Duflo


whut?


    

Nouveau(x) genre(s)


Depuis 2008/09, on trouve de plus en plus de nouvelles œuvres audiovisuelles en ligne: "webdocs", reportages multimédia, brand content...

  • journalistes
  • réalisateurs
  • documentaristes
  • photographes...

veulent investir le web, mais...

Flash!

À cette époque ces créations web réalisées avec Flash,
logiciel de scénarisation multimédia + animation + interactivité


flash...

Programme Adobe très complet et sophistiqué: 
le flasher devint un métier à part entière
une compétence recherchée et... assez chère.




Flash...


Or beaucoup de projets ont une économie précaire.

Pour le "créateur de contenus" apprendre Flash:

  • long
  • coûteux
  • complexe et difficile: apprendre du code ActionScript

(En plus Flash est -presque- obsolète, aujourd'hui HTML5)

apparition de nouveaux outils web codefree


Destinés aux auteurs/réalisateurs:
  • usage facile, sans code 
  • accessibles économiquement


1. hypervidéo


Hyper-vidéo, vidéo interactive, augmentée, enrichie... 

   

HYper?


Soit le même principe que l'hyper-texte.

Bref rappel...
Internet: réseau d'ordinateurs et de serveurs
www: world wide web 
langage du web: HTML (Hyper Text Markup Language) 
nativement interactif et non-linéaire:
passer librement d'une "page" web à une autre.

popcorn, MADVIDEO, SMADEO, Storygami, Taggled, WIREWAX, ADWAYS, HAPYAK, zentrick, metta, zaption...

Synchroniser et enrichir


Popcorn maker


un media master: vidéo (ou audio)
"enrichi" avec des plugins synchronisés sur la  time line
("évènements" interactifs, ou pas) 
  • texte
  • image 
  • Wikipédia  
  • Google Map
  • objet 3D

Tout est gratuit et en ligne !  
+ Kettle Corn version améliorée pour journalistes, disparue?

né de popcorn.js


Initiative de la Mozilla Foundation:
Web Made Movies que a développé un framework 
gratuit et collaboratif, libre et ouvert.
Ensuite développement de Popcorn Maker, codefree.
Philosophie de Mozilla: web gratuit et ouvert: 
"Remix the web!"




Happy World, 2011

deux mots de BERTO


Berto Yáñez
Développeur A Navalla Suíza / Popcorn.js


MadVideo


"Tag your videos, make them interactive"


Basique...


Pas très convaincant: UX discutable
Seulement avec des vidéos Youtube, Vimeo, Brightcove
Formaté, limité mais customizable, disent-ils.
Publication Facebook
Tout en ligne: SaaS (Software as a Service)
Gratuit, 10$ / mois, 60$ / mois
Business oriented

Fait en Espagne et aux États-Unis
Porté disparu ?...




SMADEO


"HyperMedia Management System"


"smart videos" 


Principes similaires à Popcorn Maker:
contenus additionnelsaccessibles en pop up à un TC,
le clic met en pause la vidéo,
tout est dans le même video player.
Contenu enrichi.
Publication Facebook.
Pay as you go... ou 4800€/an!
Fait en France. Toujours actif?

Interactive video Creator


Initiative assez discrète du Orange Transmedia Lab
J'ai demandé 2 fois à tester, pas de réponse...
Toujours actif?
Interface semble pas très user-friendly...
Fait en France
Gratuit

Storygami


"Keep your audience engaging with your content"


storygami


Vidéo Youtube, Vimeo, Brightcove enrichi avec: 
  • texte et PDF
  • images (galerie)
  • autre vidéo
  • Google Maps
  • fil Twitter
  • sondages
  • nouveau "purchase layer" ?
  • stats "détaillées" sur l'audience
  • Gratuit, 9$/mois, 39$/mois
Fait en Angleterre...
...et on va le tester !?

Wirewax


"Create shoppable or information overlays"


Wirewax


  • Player video Wirewax ou Youtube/Brightcove
  • "Objects automatically motion-tracked": comment??
  • Tout en ligne: uploader votre vidéo
  • Toujours gratuit: "we will always be free"...
  • ...mais aussi 750 $ ou... 15 000 $!! soit de la presta
  • Pas réussi à créer mon compte wirewax...!
  • Fait en Angleterre et aux États-Unis

TAggled


"Product/Place/People/Music tags"


Taggled


  • Fonctionnalités très similaires à Madvideo: 
  • gens, produits, lieux avec l'API Google Map, musique
  • Gratuit pour l'utilisateur individuel, combien Pro?
  • utilisateur indiv: commission sur produits vendus...
  • Fait en Irlande du Nord

ADWAYS


"Video like you've never seen before!"... 
Eeuh ?

  • Même principe que Wirewax / Taggled etc.
  • Programme en ligne SaaS Cloud...
  • ...pour enrichir vidéo avec contenu en overlay
  • overlay mobile/tactile cela dit
  • Destiné au e-commerce et comm corporate
  • Prix... à la tête du client ^_^
  • Made in France

Hapyak


"If you can watch a video, you can make it interactive"


Hapyak


  • video player fragile, amélioré depuis début
  • dessiner sur la vidéo!
  • "quizz"
  • chapitrer la vidéo (ils disent: "over 2 min: no viewers")...
  • stats "détaillées"
  • 500 $/mois, 1400 $/mois, 4700 $/mois
  • Fait aux États-Unis
  • viennent de sortir un mini guide "how to"
  • et on va le tester !

zentrick


"Intelligent interactive video"


zentrick


  • enrichi avec multimedia + shopping + jeux?
  • Templates: Blueprints
  • Publication Facebook et réseaux sociaux
  • Essai gratuit, prix ensuite? 
  • Fait en Belgique

Metta


"Keep them interested!"


Metta


  • usage pédagogique: vidéos interactives pour enseigner
  • "quizz" et sondages, 
  • questionnable sur le plan pédagogique... autre sujet
  • SaaS
  • Gratuit, 60 $/an, 108 $/an
  • Fait en Hongrie

Zaption


"Don't just watch. Learn"


Zaption


  • plateforme éducative de vidéos interactives
  • MOOC interactif: "Massive Open Online Course"
  • trim youtube, vimeo + sync. multimédia, quizz et dialogue
  • stats visiteurs
  • Essai gratuit, 79 $/an (prof), 1195 $/an (école)
  • Monde de l'éducation: marché énorme...
  • Fait aux États-Unis

ACCLAIM


 Annotation vidéo (à usage prof/élèves)

  • Plateforme en ligne
  • Destinée au monde de l'éducation
  • Vidéo annotée + échanges prof/élèves
  • Fait aux États-Unis
  • Prix ? request access...

CINE TOOLS


Annotation vidéo 

  • autre nouvel outil d'annotation
  • destiné à l'étude du cinéma
  • Fait en France dans un cadre universitaire 
  • Article de présentation
  • de plus en plus d'outils/solutions à venir...

TouchCast


Minority Report like


WOW!


Principes de Popcorn: contenu vidéo enrichi...
...à l'époque de la tablette et du mobile device,
soit: le touch.
Nouveau sens: vue + ouïe + toucher!
Pour les tablettes, par les tablettes: 
application iPad avec des video-apps: vApps
(version desktop aussi)
Gratuit... aujourd'hui.
Fait aux États-Unis

Storyfriend


Social narrative is the new king


Storyfriend


  • Nouvel outil interactif de Bjarke Myrthu...
  • ...après StoryPlanet (que nous évoquerons)
  • Appli iOS: iPad et iPhone
  • Aussi pour les ordinateurs?
  • Mixer les contenus, créant des liens
  • Dimension importante: curation/sélection, remix
  • + partage, plateforme sociale
  • Gratuit
  • Fait au Danemark             

FOLD


  • aparté / digression
  • outil du MIT de curation/sélection/agrégation
  • réunir des informations
  • "cartes" enrichies d'infos contextuelles
  • (// timeline app: perspective historique)
  • flux vertical / bonus horizontal
  • vidéo démo

2. Récits, histoires... enfin!


Outils plus développés pour la narration

    

Honneur aux vaincus !


Tout n'est pas rose dans le monde des start-ups...

    
       Juin 2011 - Décembre 2013  //  2012 - Oct 13 

KORSAKOW


  • Conçu par Florian Thalhofer, artiste de Berlin
  • avec Macromedia Director en...2000!
  • Précurseur
  • Un outil autant qu'un concept:
  • Navigation sémantique // association d'idées
  • Programme libre et  open source
  • Jamais commercialisé, esprit de chercheur universitaire
  • Florian parcourt des universités du monde entier, workshops avec étudiants
  • Logiciel  geek, pas très user-friendly, développé en Flash
  • Application de bureau  desktop, pas en ligne (SaaS)
  • Fait en Allemagne, dont on reparle bcp en ce moment!

Korsakow system


Editeur

KLYNT

Premier soft du genre commercialisé, octobre 2011
Logiciel de bureau, local: stable
User-friendly, intuitif, ergonomique:
Storyboard: construction architecture narrative
Éditeur de sequences // Final Cut Pro, softs Adobe
Flash, puis HTML5:
  Compatible tous devices + responsive design
Multi-interactions, aujourd'hui Klynt 3 
Code-source accessible et modifiable, personnalisable
Prix: Pro: 500€, Entreprise: 2500€ 
Étudiant: 49€, Prof: 249 €, Université: 2500€/an
Fait en France

Deux mots d'Arnaud


Arnaud Dressen
Producteur Honkytonk Films / Créateur Klynt



Nouveau KLYNT: WONDA VR!

"VIRTUAL REALITY"

  • Sorti en avril 2016
  • à voir dans une appli mobile dédiée...
  • ...avec les casques Samsung Gear VR, Cardboard...
  • Wonda VR

Racontr


Programme HTML5 en ligne, SaaS
En 2011 Djehouti; en 2014 il évolua en Racontr
Narration multimédia + animation
Potentiel interactif: multi-action (et mobile)
Scrollytelling et templates de base
Ambition: plateforme, "réseau social" de créateurs
Storyboard moins userfriendly que Klynt
Éditeur plus ergonomique que l'ex Djehouti
Customizable avec des "briques" de code JS
Prix: Gratuit, 10 €/mois, 100 €/mois, 200 €/mois
Maintenant: Prix à la demande seulement ! 
Fait en France

Deux mots de Grégoire


Grégoire Sierra 
Fondateur Djehouti / Racontr

Memoways


Ovni, conceptuel: collaboratif et mémoriel
Version Beta, demander l'accès
Vídéos géolocalisées accessibles sur mobile, en déambulant. Présentation du concept
Fait en Suisse

Interlude


Soft en ligne: SaaS (Software as a Service)
Gratuit, ou on demand
Peu de documentaires, surtout des clips et pubs
Tutoriel: "recette" ludique et engageante
Flash, puis HTML5
Templates et publication Facebook
Stats
Fort: tout se déroule de façon très fluide dans le player
Éditeur de l'architecture narrative: tree
Fait en Israel et aux USA

RAPT MEDIA


  • SaaS, Cloud: tout en ligne
  • Simple et efficace: choix, liens, contenus additionnels
  • Business oriented: 
  • "how companies engage with their customers"
  • Stats
  • Projets personnels: gratuit, entreprises: on demand
  • Fait aux États-Unis

3. Tendance

 "scrollytelling"

                           

                                    

Aesop, Story AM, Lasso, Shorthand, Atavist....

                    


"scrollytelling"


Navigation "scroll" / glisse
design d'interface + design d'interaction
dynamique, agréable, élégante, "fresh"
tendance graphique, mode, ou écriture durable?
Webdocs mais surtout des articles longforms.
Forme si populaire qu'elle a déjà ses outils codefree !

4. Animation et interactivité


Softs d'animation qui implémentent vidéo et interactivité 

  

HYPE


Animation & narration
Au départ un programme d'animation HTML5,
pour remplacer Flash, mais plus simple.
Timeline / scénario multimédia: 
texte, image, photo, audio, vidéo 
Personnalisable avec des "briques" de code JS
Pas de storyboard, un peu plus geek que Klynt
Application de bureau, local
Uniquement pour Mac OS!
Hype 3.5: incroyable, accéléromètre et plus!
Bon marché: 50 $, 100$
Fait aux États-Unis

ADOBE Animate CC


  • Niveau super avancé
  • Pour les animators, webdesigners, programmeurs...
  • ...+ que pour réalisateurs, mais puissant, prometteur
  • Soft de Adobe, de la Suite, aujourd'hui Creative Cloud
  • Remplaçant de Flash Professional
  • Animation, interactivité (mobile), avec du code JS, WebGL
  • Prix: vendu séparément?, tout CC: 30 $/mois, 60 $ mois
  • Fait aux États-Unis

Google Webdesigner


  • Tout HTML5: tous devices
  • Animation et interactivité (et actions de tablettes)
  • Sans code, ou code ouvert pour customizer // Klynt
  • Composant vidéo
  • Connecté avec services Google: Drive, Admob...
  • Logiciel de bureau
  • Gratuit
  • Fait aux États-Unis

Quelques liens en +



Liste Twitter d'outils de vidéo interactive 
Sélection d'outils de Docubase (MIT)
Veille du webdocumentariste David Dufresne
Net Stories (base de données d'outils étendue)
Journalism Tools (bdd d'outils étendue monstrueuse)
Vintage: ma "Thèse Professionnelle", 2011 



Merci !


simonduflo.com
hello@simonduflo.com
@magicwindowz


Made with Slides.com