Une bouteille à la mer

La vidéo sur Internet se taille une part de lion de plus en plus affamé: cela peut se vérifier dans les usages et le développement vertigineux de la consommation de bande passante.
Cependant, la vidéo telle que nous la pratiquons sur nos ordinateurs et appareils mobiles n’a pas véritablement évolué depuis les beaux jours de la télévision ou même l’âge d’or du cinéma.
La vidéo est un objet fermé, non évolutif et non participatif, qui raconte toujours la même histoire: le monologue plus ou moins inspiré et inspirant d’un auteur – c’est d’ailleurs ce qui en fait sa valeur.
Cet objet ne va pas disparaître: il est bien trop important et correspond à un besoin humain profond.

Mais cet objet vidéo est un « corps étranger » dans le web d’aujourd’hui, dans le sens que les pages affichées sur l’écran de notre ordinateur ou de notre smartphone n’existent pas en tant que tel: elles sont calculées à partir de données dans une base de données, du contexte et du profil de l’utilisateur et d’une multitude de paramètres.
Au contraire de la grande majorité des sites web qui ne sont plus « statiques » mais « dynamiques », la vidéo reste statique, immuable, « éternelle »…
Imaginez Facebook sous forme d’un PDF: est-ce que cela fonctionnerait ?

La suite…

Une comète dans le ciel vidéo

Dans ce billet, j’aimerais positionner notre projet Comet en perspective à la consommation vidéo sur le web (avec une pointe de provocation) et développer des arguments en faveur d’un changement de paradigme (avec une tonalité plus intégrante).
D’un côté, il s’agit de mettre en question de manière constructive nos réflexes et héritages culturels, et de l’autre, de proposer des nouvelles manières de créer, de visionner, puis, potentiellement, de participer.
En somme, de passer d’un état de lecture (clic sur le bouton play) à un état de lecture / écriture (clics multiples, avec création d’une trace qui nous « appartient » et que l’on peut partager).

comet3

Problématiques

  • La vidéo est un objet mort. En effet, une fois uploadée, la vidéo reste statique et ne peut pas évoluer au gré des besoins, des interactions ou du contexte de l’utilisateur.
  • Le contexte initial de la vidéo est perdu. À moins de remplir une multitude de champs dans un formulaire, aucune information importante liée aux sources constitutives de la vidéo publiée n’est gardée et pourrait être exploitable. En effet, à la sortie du montage, plus aucune information sur les rushes et autres éléments narratifs et structurants qui constituent le montage. Une vidéo sans le contexte de ses origines, c’est comme un arbre sans racines: ça ne tient pas et ne peut survivre sans mise sous serre (merci YouTube, Netflix et consorts).
  • Les playlists sont figées ou aléatoires. Soit la playlist est éditorialisée en amont par un auteur et elle fait sens – mais elle reste figée. Soit la playlist est générée de manière aléatoire et elle ne fait pas sens – mais elle est vivante. Une playlist qui fait sens tout en étant vivante et personnalisable: voilà qui pourrait être désirable. Non ?
  • L’interaction utilisateur est très limitée. À moins de rajouter des boutons interactifs sur la vidéo et de créer ainsi une navigation de vidéo à vidéo par dessus la vidéo en cours, le spectateur reste passif. Comme au temps des CD/DVD-ROM ou du web des années 1990, ce type d’interactivité ajoute une dynamique active pour le spectateur. Mais cela repousse le problème plus loin: les liens entre les vidéos sont définis une fois pour toutes, et donc la navigation va toujours être la même: statique, non évolutive, figée. Tellement pas web 2.0…

La vidéo doit-elle forcément rester comme un objet figé qui vient d’un autre temps, alors que le web d’aujourd’hui est tellement inventif, vivant et personnalisable ?
Pourquoi la vidéo doit-elle rester exclue de la dynamique d’appropriation, de participation, de remix ou d’interactions sociales que l’on vit dans le web des années 201X ?

Arguments 

  • Rendre la vidéo vivante. Le concept que Memoways met en avant avec Comet est de d’interconnecter puis d’exposer les éléments constitutifs d’une vidéo: les plans. Chaque plan a sa propre cohérence et garde son contexte initial. La vidéo que l’on voit au final n’existe pas en tant que telle: elle est lue en temps réel et sans coupures à partir des plans, en fonction de la volonté de l’auteur, de la playlist et des envies ou du contexte de l’utilisateur. La vidéo est donc un flux de plans: comme avec les Tweets sur Twitter, on peut lire le flux dans l’ordre défini, mais on peut également aller chercher dans le flux juste les éléments qui nous intéressent. On a alors un flux de plans qui correspondent à nos envies, nos besoins.
  • Garder le contexte de la vidéo à la racine. Chaque vidéo qui est exposée à travers la plateforme vidéo de Memoways est un plan non monté, qui garde le maximum de son contexte initial: qui a fait la vidéo, où, quand, comment… Et l’on peut ajouter des informations sur ce que raconte la vidéo, de manière à lui donner la chance d’être trouvée et exploitée avec d’autres vidéos qui parlent de la même chose.
  • Les playlists sont maitrisées mais restent vivantes. L’auteur a la possibilité d’exposer une playlist qui correspond à un besoin: par exemple de présenter toutes les vidéos qui parlent d’une certaine thématique à travers des interviews de plusieurs personnes différentes. À partir de là, l’utilisateur peut aller filtrer le flux thématique exposé pour regarder puis partager que ce que raconte un seul intervenant qui lui plait bien.
  • L’interaction est hautement personnalisable. Comme les liens entre les vidéos se font au niveau du plan et que les combinaisons entre les plans ne sont pas basées sur des connexions définies « en dur » (de manière statique et unique), l’interaction que l’utilisateur peut avoir avec le flux de vidéos est hautement personnalisé.

comet-pedagogic-web

En somme, l’expérience Comet permet à chaque utilisateur de naviguer à travers un flux structuré de vidéos pour ensuite, s’il le souhaite, créer sa propre playlist en fonction de ses besoins, questions ou envies.

La playlist peut être composée de plans et donc générer une histoire personnalisée, unique.
Ou la playlist est composée de vidéos déjà montées et permet de partager une liste structurée d’histoires choisies.

Grâce à Comet, il devient enfin possible de confectionner des histoires personnelles, de manière non destructive (on ne détruit pas les histoires des autres ce faisant) et de partager une collection de contenus choisis.

Autrement dit: après l’avènement de ce que l’on appelle le « responsive design », où l’affichage des contenus s’adapte automatiquement à l’appareil de l’utilisateur, voici venir enfin le temps du « responsive storytelling », où l’histoire s’adapte de manière dynamique et personnalisée a ses propres envies, besoins ou contexte d’usage (mobile, stationnaire…).

Nous développons avec Memoways actuellement la version 2 de Comet – stay tuned 😉

Outils pour la création en ligne

Dans le cadre de la formation vidéo et nouveaux médias au CEPV, voici quelques outils de création que nous allons regarder de plus près.

Une collection de liens très complète, avec petits résumés pour commencer.

Pour créer des projets interactifs, « webdoc »:

http://www.djehouti.com/97-djehouti.htm (présentation sur le blog documentaire) – update: cet outil est remplacé par https://beta.racontr.com/fr/.
http://zeega.com (présentation sur le blog documentaire)
http://www.klynt.net (présentation sur le blog documentaire)
http://www.3wdoc.com/fr/ (présentation sur le blog documentaire) – update: cet outil n’est plus mis à jour.
http://memoways.com l’outil de vidéo interactive auquel je participe moi même – cf un usage réalisé entre 2009 et 2013 http://walking-the-edit.net/fr/

Mais il y a aussi (quand même) des grosses pointures qui proposent également des outils (usines à gaz):

http://html.adobe.com/edge/animate/
http://html.adobe.com/edge/reflow/

Des plateformes pour ajouter de l’interactivité aux vidéos:

http://mozillapopcorn.org/popcorn-maker/ (mode d’emploi et présentation sur NetPublic) et quelques autres ressources http://livingdocs.org/code/ pour pousser encore plus loin (avec du code) les expérimentations.
http://www.raptmedia.com
http://interlude.fm
http://beta.storygami.co/

http://themadvideo.com
http://www.seriouslyjs.org
http://rollypolly.com

Pour développer des « modules » interactifs avec de l’image, de la vidéo, de l’audio et du texte:

http://www.thinglink.com
http://www.imagespike.com
http://www.blurb.com/mobile
https://narrable.com
http://animoto.com

Pour créer des « fils » narratifs à partir d’une agrégation de contenus divers:

http://storify.com
http://projeqt.com

Une collection de liens sur la question de la mémoire (machines à remonter le temps):

http://checkthis.com/remonterletemps

De quoi se (re)lier à l’espace, au territoire:

http://checkthis.com/67j0
http://www.jetphotosoft.com/web/home/

Des combinaisons entre applications smartphone et site web:

http://cinemagr.am
http://vyclone.com
http://www.trollback.com/loop/

Et quelques autres outils online:

http://prezi.com
https://videolicious.com

Pour finir, une présentation à la « Pearltrees » des outils pour faire des webdoc (une autre sélection quelle celle ci dessus):

http://cdn.pearltrees.com/s/embed/getApp

Mise en route d’un site internet

Mise en place d’une site web pour des photographes

Ce billet pour cadrer les choses à faire / penser sur la route d’un site internet: ce n’est pas juste de montrer ses photographies d’une manière plus ou moins jolie, mais potentiellement bien plus.

Les questions à se poser avant de commencer:
– FOND: quels contenus vont être présentés ? Il s’agit d’anticiper la masse d’images, vidéos, textes etc afin de voir quelle est la meilleure stratégie à prendre. Quelle est la pondération entre les contenus visuels, les informations (légendes etc) et les contenus textuels plus généraux (textes de présentation, textes critiques etc) ? Réponses à apporter: type de contenus; quantité estimée
– FOND: qu’est-ce que ça doit communiquer, induire, susciter ? Emotions, intérêt artistique etc. Réfléchir sur la bonne adéquation entre fond et forme pour qu’au final le spectateur puisse être touché par votre travail. « La forme, c’est le fond qui remonte à la surface » est une formule tout à fait adéquate, à laquelle cependant il faut ajouter l’usage (l’interaction dans le temps). Ce qui doit « fonctionner », ce n’est pas seulement vos images (la base) mais également la manière dont vos images viennent se présenter dans une scénographie orientée usage…
– FORME: navigation. Quelle structure de menus, navigation transversale (tags, catégories), navigation visuelle etc ? Il y a des outils de mockup qui existent pour se faciliter la tâche (pour simuler comment on navigue et on passe d’une forme à une autre).
– FORME: base de données. Un CMS est une interface au dessus d’une base de données – il faut donc idéalement mettre en place et gérer cette base de données de manière réfléchie et consciente. L’idéal est de renseigner un maximum de choses (via des descripteurs, métadonnées) pour des contenus non textuels (images, vidéos, audio), dans le but de le retrouver d’une part et de pouvoir les afficher de manière plus « souple » d’autre part. Cela demande de mettre en place des listes (taxinomies) qui permettent de garantir une certaine logique dès le départ.
– FORME: interactivité. Quelle interaction vous voulez proposer à vos visiteurs / spectateurs ? (commentaires, connections aux réseaux sociaux, ajout de contenus, login, versement d’argent etc)
– USAGE: part de pages statiques / pages « blog » (flux de billets) / pages « générées » (agrégation de contenus)
– USAGE: engagement. En lien avec l’interactivité, penser à la question de la relation de votre visiteur avec votre travail, et au delà, avec votre démarche artistique.
– WORKFLOW: comment optimiser le flux de travail depuis la production de contenus (appareil photo etc) vers le site, en passant par un ordinateur (ou smartphone / tablet)

Les éléments et enjeux à considérer:
les liens du site vers le monde matériel (notre « premier monde »), votre personnalité (profil artistique) et votre production (expositions, livres, mandats etc). Idéalement, la présence numérique reflète, continue et développe votre personnalité physique;
le site comme élément englobant: ce n’est pas seulement le bout de la chaîne (montrer un travail) ou un amplificateur (diffuser un travail) mais un environnement qui accompagne depuis l’amont (la réflexion conceptuelle, mise en place d’un projet) à l’aval (présentation des résultats) en passant par la phase de production (étapes, progression). Il faut idéalement penser le site comme une dynamique, un chemin et pas comme une destination, un aboutissement…
le site comme outil de travail: dans le cadre d’une production (artistique, culturelle etc) il est possible de prendre les différents composants d’un site (blog, wiki, réseaux sociaux etc) comme boite à outil pour avancer sur un projet.
le site comme outil de communication: c’est le rôle « historique » des sites web que de communiquer d’une activité en profitant de la mise en réseau des contenus; aujourd’hui il ne s’agit plus seulement de communiquer autour d’objets produits et fermés (des photographies par exemple) mais de discuter, interagir dynamiquement avec ses publics, partenaires, pairs etc. Ce n’est plus une communication unidirectionnelle et figée, mais bidirectionnelle et « liquide »…
le site comme plateforme de partage: un projet ne se fait pas tout seul dans son coin et à priori pour un public de consommateurs passifs, donc la notion de partage (à prendre au sens large) est à « implanter » à la racine… Si le site comme plateforme d’échange est généreux (partage des sources, le chemin) le public lui aussi sera généreux (rebonds, buzz, donations, achat etc).

Liens de CMS

Voici une liste de CMS (Content Management System) qu’il est possible d’utiliser en vue de créer son propre site / blog / présence internet.

Orientés portfolio
http://www.squarespace.com (payant http://www.squarespace.com/pricing/)
http://flowboard.com
http://koken.me avec démos http://demo.koken.me
http://4ormat.com
http://fr.wix.com
Spécialement pour photographes
http://www.photodeck.com/fr/
http://fr.photographes.com

Orientés blog
http://wordpress.com (avec des plugins spécifiques pour la photo, comme http://www.photocrati.com)
http://www.blogger.com/home
https://www.tumblr.com

(en cours de rédaction, d’autres liens vont suivre)

Mise à jour du site

movies_bruxelles_02new

Après plusieurs mois de travaux, voici enfin la nouvelle version du site web de walking the edit en ligne !

Il y a eu énormément de travail « sous le capot »; les différences visibles sont:
– menus déroulants
– nouveau player pour les films et la carte: on peut voir maintenant le média joué sur la carte (la bulle sélectionnée / jouée est mise en avant), on peut mieux déplacer la tête de lecture sur la carte.

La suite…

La production cinéma en perspective binaire

Avec l’équipe de C-Side, nous avons fait une présentation sur le DCP à Fonction cinéma hier soir.

Pour mettre en perspective les enjeux de la projection numérique (et de la production numérique tout court), j’en ai profité pour faire une mise à plat de la production cinéma à travers une opposition en face à face de l’ancien monde (l’analogique) et le nouveau monde (le numérique).

Tout bouge sur la planète cinéma: outils et workflows techniques, méthodologies de travail, normes (tournage, montage, diffusion), relation au spectateur, nouveaux formats et plateformes de diffusion, droits d’auteur, diffusion et distribution, financements – la liste est longue et évolue tous les jours.
Un film reste un film, mais le chemin pour arriver « au bout du film » n’est plus du tout le même: il y a maintenant autant de chemins qu’il y a de films…
Pour tenter d’y voir un peu plus clair, voici un jeu de miroir entre l’ancien et le nouveau monde.
http://prezi.com/bin/preziloader.swf

Wanted: développeur web

Un petit billet pas comme les autres – mais oh combien important…

Nous cherchons un(e) développeur web pour les sites suivants:
http://memoways.com/ (à faire entièrement sur base d’une structure existante); http://walking-the-edit.net (à reprendre depuis les bases, ajout de modules de visualisation et de fonctionnalités d’édition); http://www.c-sideprod.ch/ (à repenser et refaire intégralement). Pour chacun de ces sites un blog dédié est également à mettre en place (WordPress…)

Lieu: Genève, centre ville
Disponibilité: de suite
Type d’engagement: idéalement un développeur indépendant pour plusieurs mandats qui demandent environ 30 jours de travail cumulés sur une période de 3 mois. Selon la dynamique créée, potentiellement du travail à 40% sur l’année avec d’autres développement de sites de type http://walking-the-edit.net et suivi sites existants.
Profil: développeur Web JS/CSS/HTML avec bonnes connaissances de Ruby On Rails souhaitées; bonne maîtrise des outils collaboratifs de développement, notamment GIT. Expérimenté à l’utilisation de librairie javascript (JQuery…) et interaction avec un serveur d’API.

Dans ce cadre, vous aurez en charge les missions suivantes :
– Prise en main des sites existants puis développement en lien avec les personnes responsables des améliorations graduées dans un planning à effectuer
– Réaliser les développements et l’intégration technique des conceptions graphiques en JS/CSS/HTML
– Tests, débugage, formation rapide des utilisateurs sur les CMS de gestion

Une bonne vision et utilisation du web actuel (HTML5, réseaux sociaux etc) est vivement souhaitée; nous cherchons une personne ayant quelques années d’expérience tout en étant ouverte et curieuse sur de nouveaux développements à « inventer » (flexible est ouvert/e à de nouveau langages et outils de développement). Organisé(e) et précis(e), vous avez le goût du travail en équipe et du partage des connaissances.

Pour des questions et contact: [email protected]

Graphisme – pistes pour le site web

Le chantier du graphisme est complexe – il s’agit de proposer des interfaces claires, intuitives et ayant un même air de famille entre le WEphone et le site web.
De la même manière que pour le WEphone, nous n’aurons pas le temps ni les moyens d’aboutir à une version évoluée et complète du site web d’ici la fin de la phase 2, donc les efforts actuels sont portés sur le fait de déterminer les intentions, les idées et les fonctionnalités que nous aimerions voir sur le site web final.

Dans les grandes lignes, les intentions et envies sont les suivantes:
– le site doit être vivant et modulable, il doit rendre compte à sa manière des enjeux contenus dans le projet (rapport à la mémoire; réapropriation d’un territoire et de médias; auteur collectif; forme de l’inachevé et de l’ouverture, etc). On doit également sentir qu’il s’agit de jouer avec les dimensions spatiales et temporelles: espace réel / espace digital; potentialités d’un espace (réel ou digital); temps multiples (le passé dans le temps réel; le futur à l’horizon du présent; le temps du parcours et le temps du film, etc)
– la place du spectateur: il n’est pas seulement passif mais peut aussi devenir actif – et le but du site est de l’inviter à le devenir. Il s’agit donc d’imaginer plusieurs stratégies qui l’y amènent (marcher son film; commenter les films des autres; éditer des modules etc). Le site comme moteur d’enregistrement de son parcours à travers les liens qui y sont possibles… (d’où l’idée du bouton d’enregistrement qui s’allume sur le logo, cf plus bas)
– degré de personnalisation: découlant de ce qui est développé ci dessus, inviter le visiteur du site d’utiliser celui-ci en combinant les modules et les filtres de recherches selon ses envies. Le site est, d’une certaine manière, un gestionnaire de base de données avec lequel on peut accéder et afficher les informations qui nous intéressent…
– et bien sûr, il faut que le contenu éditorial soit le plus complet et « excitant » possible: il s’agit de parler autant à un public plus large (habitants, touristes d’une ville) qu’à des spécialistes habitués à ce genre d’aventures.

Ce qui est posé actuellement est surtout une grille de base qui est très modulaire; la plupart du temps on a une zone centrale qui peut présenter soit du contenu éditorial soit du contenu « vivant » (les films etc), entourée par une zone verticale et horizontale qui donne des contenus supplémentaires selon le contexte (news; commentaires; films; parcours; modules).

Premier exemple: la homepage.

siteweb_home_mai09

A savoir:
– la zone de menu est encore en évolution; il s’agit de rester sobre, mais actuellement c’est trop neutre et standard (donner plus de « profondeur », de volume, de hiérarchie).
– En dessous du logo, il y aurait une zone de texte défilant avec un lot de phrases qui décrivent le projet (style « un lieu de rencontre entre l’espace urbain et l’espace digital »; « un dispositif qui permet de générer un film en marchant » etc);
– de la même manière, le texte sous « Le dispositif » change (il y a 3-4 types de textes différents);
– un film, sous forme d’une capture d’écran, est promu en home et donne un exemple avec les commentaires et statistiques sur le résultat escompté;
– on peut filtrer les films affichés via une liste déroulante (actuellement, trié selon le nombre de vues et par date) directement dans l’entête;
– Edit box: c’est l’endroit où on trouvera les fonctionnalités d’édition (notre boite à outils). Elle n’est opérationnelle que si on est loggué (ce qui est possible de faire en tout temps). On pourra y changer / éditer les commentaires que l’on a fait sur les films; si l’on a marché un film, on peut via cette interface ajouter des intertitres au film (en fonction des règles édictées), on peut y concevoir des modules personnalisés (fonction encore très embryonnaire, mais qui permet de concevoir des boites qui présentent de manière imagée des statistiques, par exemple une représentation de la vitesse en rapport avec le nombre de médias, ou les thématiques par rapport aux sujets etc); on peut indiquer les préférences de tri, de recherche etc
Questions ouvertes:
– première ligne de menus: idéalement ne garder que le login et mettre le reste ailleurs…
– permettre de hiérarchiser (via des couleurs, formes ou séparations) les niveaux de contenus (cf ci dessous)

Deuxième exemple: la page du visionnement des films.

siteweb_movie_mai09

Il y a plusieurs idées ici, qui sont assez difficiles de rendre compte sur une image statique:
– le logo prend des couleurs différentes en fonction de la navigation. Il y a deux pistes (encore toutes fraîches, à vérifier et tester):
1) couleurs qui donnent une indication sur le niveau ou le type d’information. Le rond en magenta « s’allume » si on est logué, si l’on enregistre une action (texte, module etc); le premier / détermine les informations éditoriale (textes, extraits image etc) et le double // détermine les « informations collectives » (les films, parcours, commentaires), ce qui est vivant de manière indépendante…
2) couleurs qui donnent l’information du niveau de navigation. Il y a 3 niveaux: la home; le premier niveau de menu; le deuxième niveau de menus.
– il reste également à voir comment on « éteind » notre salle de cinéma (la page qui accueille le duo trajet / film), de manière à pouvoir se concentrer sur l’essentiel, tout en ayant la possibilité d’y voir également quelques statistiques (selon une présentation que l’on peut personnaliser)…

Encore pas mal de travail…!

UF, 22.05.2009