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

Le CMS – mise en route de la base de données

Après une première phase de tests techniques et ergonomiques, nous sommes maintenant en train de « métadater » les médias (que des vidéos pour le moment) pour mettre à l’épreuve le concept et pouvoir faire les premières simulations.

Voici quelques captures d’écrans de ce CMS (qui reste pour le moment privé, usage interne du groupe de recherche). Un grand merci à Lionel Tardy qui a travaillé depuis février sur la construction de cette solution personnalisée aux besoins du projet !

A télécharger, un PDF qui donne une vision d’ensemble des champs et listes, ainsi que le type d’analyse et de règles qui vont être appliquées par le moteur de montage. Également à télécharger, un PDF qui donne une idée du montage type, en simulant un montage avec les règles.

La page de départ:

Cette page permet d’importer des fichiers créés dans Final Cut: toutes les vidéos sont pour le moment préparées dans FCP, puis exportées sous forme de fichiers QuickTime natifs, puis compressés au format flash (quelques exemples dans ce blog). Puis, il est possible de paramétrer les thèmes, les listes, de gérer la structure et d’ajouter des utilisateurs. La partie la plus importante est « Gestion des médias ».

CMS HOME

La page de gestion des médias:

C’est dans cette partie que nous devons définir:

– le titre artistique du média (sera présent sur la carte du module embarqué);
– le statut du média;
– le type de média;
– il est possible de placer le média d’origine sur la carte google intégrée, puis – et c’est là que commence le montage (spatial, ou spécial, c’est selon) – de placer le média sur la carte en fonction de ses combinaisons souhaitées avec d’autres médias placés dans les environs. C’est principalement ce choix qui va déterminer le premier choix de média intégré au film…

CMS_GESTION MEDIAS

La page des métadonnées subjectives:

Ici c’est encore le chantier expérimental – c’est une partie importante (contenant les règles, les logiques d’analyse etc, ainsi que d’autres informations utiles pour classer / chercher / présenter les médias). Ce n’est qu’en expérimentant avec une certaine masse de médias la plus variée possible que nous pourrons tirer des conclusions et préciser les besoins réels – ce chantier là est en cours, autour de 300 médias sont à disposition.

CMS_METADONNEES

La page pour définir les thématiques et les « tags » libres:

Page importante également: c’est ici qu’on détermine l’appartenance au nuage – c’est le choix du visiteur qui va déterminer dans quel « étage » thématique le média sera choisi; son choix aura forcément une incidence sur le contenu et la forme. Nous sommes en train d’expérimenter la l’indexation multiple d’un média à plusieurs nuages en même temps – mais avec une « intensité » différence (cf les 30/70 dans l’exemple).
Il y a également les tags qui permettent de personnaliser le contenu du média, puis ensuite de pouvoir former un nuage supplémentaire dans le site web (nuage de tags les plus utilisés par exemple).

CMS_THEMATIQUES

Prochainement sera publiée la liste des champs et des variables utilisées, ainsi qu’un schéma expliquant la méthode d’analyse et les règles implémentées.

En parallèle, les collaborateurs de la HEIG-VD sont en train de préparer un simulateur du moteur d’analyse – cette application nous permettra de tester des premières combinaisons basées sur un itinéraire urbain.
Techniquement, il s’agit d’une application JAVA qui lit un fichier .csv venant d’un tracé GPS enregistré sur le module embarqué, puis analyse avec un certain nombre de variables ce tracé pour pouvoir ensuite exporter un fichier décrivant une playlist (le montage sous forme de suite de fichiers avec durée).

UF 12.06.2008