URL: https://linuxfr.org/users/jehan/journaux/participation-a-firefox-flicks Title: Participation à Firefox Flicks Authors: Jehan Date: 2012年05月06日T20:11:42+02:00 License: CC By-SA Tags: firefox Score: 16 Bonjour, Je viens faire un peu la publicité d'un projet multimédia de courte durée sur lequel j'ai travaillé. Il s'agit d'une participation au concours [Firefox Flicks](https://firefoxflicks.mozilla.org/). Le principe est simple: faire une vidéo promotionnelle pour la fondation Mozilla. Les gagnants sont répartis par région (étant basé au Japon en ce moment, nous sommes en région Asie, Afrique, Australie. Oui c'est une région large. uhuh). Et il y a quatre catégories : animation, vidéo de moins de 30 sec, message d’intérêt public et nouvelles technologies. # Notre Participation # ![Flick](http://download.tuxfamily.org/girinflick12/firefox02_preview.png) Nous étions 2, une animatrice et moi. Nous avons participé dans 2 catégories : animation et nouvelles technologies. Les deux utilisent quasiment la même vidéo, à une différence près: sur la fin, des utilisateurs fictifs en image sont affichés sur une carte du monde et ont été retirés. À la place, la version "nouvelle technologie" est HTML-augmentée en affichant des photos que les visiteurs peuvent uploader et la carte est affichée un peu plus longtemps. Le but étant d'avoir un maximum de photos pour faire vraiment effet. * Voici la vidéo dans la catégorie "animation" : http://download.tuxfamily.org/girinflick12/firefox01.mov [50 Mo] /o\ (aussi disponible aux formats [webm](http://download.tuxfamily.org/girinflick12/firefox01.webm) ou [ogg/theora](http://download.tuxfamily.org/girinflick12/firefox01.ogv) directement lisibles dans Firefox, [5 Mo]) * Voici la vidéo modifiée et intégrée dans une page web pour la nouvelle technologie: http://girinflick12.tuxfamily.org/ Bien sûr, j’apprécierai si vous uploadez une photo et votre localisation (mais n'en tiens pas rigueur si vous ne le faites pas). :-) Simplement ne mettez pas n'importe quoi, sinon ça ne sert à rien (j'ai déjà retiré 2 images par quelqu'un qui apparemment aime bien Bart Simpson). ## Licence ## C'est une question qui viendra, et à juste titre. Donc : la vidéo est du CC-by-sa/Art Libre. Note : le concours imposait du CC-by-sa-nc, mais j'ai demandé au contact Mozilla du concours si on pouvait être plus laxiste en jartant le NC et ils ont dit qu'on pouvait. J'imagine que le but est de ne pas effrayer les artistes (?). La "musique" (si on peut dire cela pour les quelques notes jouées pendant le film) est aussi CC-by-sa/Art Libre, puisque c'est moi qui l'ai improvisée/jouée. Les sons divers sont soit CC-sampling, soit CC-by soit Domaine Public (tous trouvés sur [freesound.org](http://freesound.org)). Les détails sur les auteurs et licence de chaque son utilisé sont sur la page donnée en lien plus haut. Le code est AGPL v3. ## Animation ## Tristement, ce n'est pas un travail tout à fait fini (du moins pas comme on l'aimerait). Malheureusement, nous n'avons pas eu beaucoup de temps. Bien que le concours fût annoncé assez tôt, nous n'avons pu commencer que 2 semaines avant. Dans ce court laps de temps, nous avons donc discuté les concepts à aborder, écrit et comparé divers scénarios, écrit un storyboard, tout dessiné, puis édité, et enfin nous avons fait les sons. Pour tout dire, on était tellement en retard sur la fin que j'ai enregistré toutes les voix en environ 2h sans rien traiter derrière. C'est pour cela que le son est si médiocre et qu'il y a tant de souffle. On en n'est pas très fier, mais c’était ça ou ne rien rendre de nos 2 semaines de travail car en retard sur la deadline. Espérons juste que cela ne pénalise pas trop, surtout que si on gagne, on compte améliorer la vidéo et le son. En effet, dans l'animation aussi, il y a plein de détails qu'on a laissé de côté, des choses qu'on aurait voulu retoucher après coup, et même une scène qu'on a laissé tomber : je voulais finir la vidéo par une sorte de "batsignal" (un foxsignal ?) qui utilise le logo Firefox et balaye le ciel pour s’arrêter sur la lune. ## Nouvelles Technologies ## Il semble que la plupart des autres participants de cette catégorie n'aient pas compris en quoi elle consistait, ou alors c'est moi qui n'aie vraiment rien compris mais la description "_Meilleure utilisation de nouvelles technologies ouvertes (par exemple Popcorn.js, HTML5)_" ne semble pas indiquer que faire du stopmotion en prenant des photos avec un smartphone rentre dans la désignation. Quoi qu'il en soit, j'ai fait ce que — je crois — était attendu avec du HTML et du javascript, même si là encore, le temps a manqué (j'ai codé pendant seulement 2 journées sur la fin pendant un week-end et ma TODO list est encore longue). Voici la liste des technologies utilisées: 1. [OpenStreetMap](http://openstreetmap) (OSM) que nous utilisons principalement avec l'[API Nominatim](http://wiki.openstreetmap.org/wiki/Nominatim) soit parce qu'on a des coordonnées pour lesquelles on souhaite obtenir un nom "humain", soit à l'inverse parce que l'utilisateur a donné une adresse et on souhaite trouver des coordonnées. 2. [OpenLayers](http://openlayers.org), une API javascript sous licence BSD qui permet d'afficher des cartes svg (utilisant les données OSM). 3. Géolocalisation. 4. L’élément HTML `video`, notamment en réagissant à divers évènements (pour dire, c'est pas juste "y a un tag video", mais aussi un traitement spécifique fait dessus en js). 5. Du SVG pour les boutons de contrôle de la vidéo et l’élément HTML `canvas`. Techniquement cela se passe en 2 étapes: ### Étape 1 (optionnelle) : interaction avec le visiteur ### L'utilisateur uploade sa photo. Du PHP classique opère a ce moment pour * récupérer le fichier uploadé, * en vérifier le format pour sécurité (pas seulement avec l'extension, mais avec détection de format), la taille, * puis la redimensionner en 2 tailles si besoin (en général, il y a besoin car les gens ont tendance à envoyer de grosses photos et dans ce cas, je veux pouvoir charger très vite des dizaines de photos). Dans le même temps, l'utilisateur aura aussi indiqué sa position dans le monde, * soit par géolocalisation (elle ne fonctionne pas tout le temps, ça dépend un peu du beau temps, des étoiles et des papillons qui volent dans mon expérience perso), * soit en cliquant sur la carte (et dans ce cas, une requête "reverse" est faite sur OSM Nominatim pour obtenir un nom de lieu), * soit en indiquant un nom de lieu (et les coordonnées sont trouvées par une requête "search" sur OSM Nominatim. ### Étape 2 : visionnage ### Sur la fin, quand on regarde la vidéo, les photos des diverses personnes apparaissent dans la vidéo même (en apparence). Pour opérer ce miracle, comme à ma connaissance, on ne peut pas dessiner directement dans une vidéo en HTML, la vraie vidéo est en fait cachée, ce pourquoi à la place des habituels et pratiques contrôles et barre d'avancement de la vidéo, il y a 3 pauvres boutons, lecture/pause et avance/recule (5 secondes). Je n'ai pas eu le temps de faire de meilleurs contrôles ou de chercher/utiliser une bibliothèque. Je disais donc que la vraie video est cachée et il y a un canvas vierge (qui a juste un background, ce qui permet de montrer un "aperçu" au début). Puis, quand la vidéo démarre, je la copie juste frame par frame dans le canvas. Enfin, quand le moment fatidique arrive (déterminé par l’événement `timeupdate`) où on doit insérer du contenu dans la vidéo, je dessine les photos (que j'aurai prechargées au préalable dès le chargement de la page) au bon endroit sur la carte du monde dans le canvas (avec un calcul simple pour transformer des coordonnées latitude/longitude en pixel équivalent). Le code est disponible ici, si vous souhaitez le regarder : http://git.tuxfamily.org/?p=girinflick12/girinflick12.git;a=tree Ce n'est pas destiné à devenir une sorte de projet à long terme bien sûr, mais j'imagine que c'est toujours un proof of concept sympathique et peut intéresser d'autres personnes. :-) Y a pas mal de choses que j'aurais voulu faire mieux. Notamment, avoir un passage de la grosse à la petite photo plus fluide en interposant des tailles intermédiaires. Aussi, je veux pousser beaucoup plus de code (tout ce qui est traitement des coordonnées par exemple, mais pas seulement) côté serveur, pour alléger la machine cliente qui pourrait faire beaucoup moins de calcul, etc. Enfin voilà. J’espère que la vidéo et le petit site vous ont plu. Et n’hésitez pas à uploader photo/localisation !

AltStyle によって変換されたページ (->オリジナル) /