Sur la route de la Geek I'll still be a geek after nobody thinks it's chic !

20fév/120

HowTo : organiser un Learning Lab Popcorn.js

Ceci est une traduction d'un article de Michelle Thorne, qui travaille chez Mozilla. Ce genre d'événement d'enseignement aurait une belle place dans le Mozilla Space dont je parlais plus tôt, d'où la traduction.

Learning Lab Popcorn

Un labo d'enseignement Popcorn (ou Learning Lab Popcorn) est un événement permettant aux développeurs et aux réalisateurs de films de se familiariser avec la technologie Popcorn.js, une bibliothèque HTML5 Javascript qui permet d'intégrer les technologies du Web dans la production de médias.

Les participants peuvent créer de nouvelles extensions, bidouiller des modèles et coder des démonstrations qui mélangent des informations à des vidéos, en utilisant des outils ouverts et un design collaboratif.

Ce guide a pour but de vous permettre d'organiser un learning lab de manière autonome.

Pourquoi Popcorn ?

Outre le fait que c'est une librairie amusante qui permet de bidouiller des vidéos facilement, c'est aussi un outil puissant qui permet de créer des vidéos parfaitement intégrées dans les technologies Web. Christian Heilmann a fait du bon travail en décrivant ses points forts :

  • la vidéo est par nature assez compliquée à éditer et à modifier
  • une vidéo est souvent une boîte noire, non indexée sur le Web
  • la séparation entre l'information et la vidéo permet de faciliter la maintenance, l'amélioration, l'accessibilité et la découverte
  • l'élément video dans HTML5 n'est qu'un nouvel élément de la page
  • l'horadatage est la base
  • on peut bidouiller le Web en temps réel grâce à Popcorn.js

Il existe aussi de nombreuses démonstrations des capacités de Popcorn.js. N'hésitez pas à y jeter un coup d’œil !

Que faire ?

Les participants vont mettre les mains dans le cambouis en partageant leurs bidouilles et en se faisant évaluer par leurs pairs. Les démos venant de la communauté Popcorn peuvent être prises comme source d'inspiration.

La devise est : Partager et faire !

Les Learning Labs peuvent être organisés en partenariat avec Mozilla, qui fournit son expérience et sa connaissance approfondie du logiciel, et avec l'aide de la communauté de Popcorn.

Mozilla travaillera avec les partenaires pour assurer aux participants une compréhension plus approfondie des possibilités de Popcorn et une manière de l'enseigner.

Le laboratoire d'enseignement peut également être auto-organisé, en suivant ce présent guide !

Qui ?

Les équipes sont constituées de :

  • développeurs Web possédant des compétences en Javascript
  • cinéastes audacieux qui veulent jouer avec le code
  • contributeurs Popcorn.js expérimentés

De petites équipes de développeurs Web sont mélangées avec des contributeurs expérimentés. Les facilitateurs et les Web designers peuvent aussi jouer un rôle durant ce genre de sessions d'événements.

Comment ?

Préparation

Mozilla ainsi que les partenaires de l'événement contactent la communauté Popcorn, les développeurs Javascript ainsi que les cinéastes de la région. Grâce à des entretiens avec un petit échantillon de participants, il est possible de calibrer le niveau de compétence et les intérêts du groupe, en affinant l'ordre du jour autour de ce que les gens veulent apprendre et faire.

Agenda

Tous les animateurs et les participants se regroupent pour une démonstration. Les contributeurs Popcorn font un rappel des bases du framework Javascript, en mettant en avant les principales fonctionnalités et utilisations de développement.

Durant la première session de bidouillage, selon les compétences techniques en présence, les participants peuvent choisir de :

  • jouer avec Popcorn Maker - un environnement de création de vidéos interactives - et rendre une vidéo interactive
  • ou plonger de le développement d'extensions, une manière puissante d'ajouter des services, comme Flickr, Open Street Map, Document Cloud, ou d'autres fonctionnalités, pour enrichir les vidéos.

Après avoir produit un premier "hack", le groupe partage son résultat. Les participants donnent des retours d'utilisation, rapporte des bugs, proposent leur aide et notent des manières d'améliorer l'expérience.

Durant la seconde session de bidouillage, vous pouvez :

  • créer votre propre template Popcorn Maker
  • commencer à créer des démos
  • continuer à coder votre extension
  • ou encore traîner dans le coin et aider les autres

Les participants codent leurs projets, donnent des retours d'utilisation et demandent de l'aide aux contributeurs plus expérimentés s'ils sont bloqués.

À la fin de la journée, une projection et une fête sont organisées. Chaque groupe fait une présentation de sa démo finalisée, évalue le tout et fait la fête après une dure journée de travail.

Par la suite, les participants s'inscrivent aux activités qui les intéressent : participer aux événements futurs, contribuer au code Popcorn.js, enseigner à d'autres développeurs ou tout simplement rester informé sur le sujet.

Ressources nécessaires

  • Un ordinateur par équipe au moins.
  • Des logiciels de montage vidéo rapide et un navigateur moderne.
  • Popcorn.js installé.
  • Des fichiers vidéos pour chaque démo.
  • Du Wifi fiable.
  • Des prises électriques.
  • Des projecteurs avec tous les adaptateurs nécessaires.
  • Les repas doivent être pris en charge par l'événement.
  • Des commodités tels que du café, de l'eau et des casse-croûtes doivent être prévus.
  • Si besoin, de l'aide pour les transports.

Étude de cas d'événements Popcorn passés

Independent Television Service (ITVS) + Mozilla, San Francisco. http://www.wired.com/underwire/2011/10/coders-filmmakers-popcorn/all/1 Video: http://mozillapopcorn.org/the-living-docs-hack-day/

“ButterCamp”, NYC, March 2011. http://mozillapopcorn.org/videoblog-buttercamp/

Mozilla Festival, London. November 2011. http://mozillapopcorn.org/what-we-made-at-mozfest/

Photos: CC BY-NC-SA by Jonathan Mcintosh

17fév/122

L’attribut viewBox en SVG

En ce moment, je profite de mon chômage pour faire de la documentation. SVG sur le portail MDN, pour être plus précise. C'est donc en traduisant le guide du débutant pour le SVG que je me suis frottée à une incompréhension :  l'attribut viewBox, extrêmement mal documenté, même en anglais. D'où ce petit article, qui va servir de bac à sable pour écrire la page de documentation correspondante.

Commençons déjà par une belle démonstration, histoire d'expliquer comment fonctionne SVG. SVG permet de faire du rendu graphique grâce à du balisage XML :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect x="0" y="0" width="1500" height="1000" fill="red"/>

<circle cx="750" cy="500" r="450" fill="green"/>

<text x="750" y="550" font-size="250" text-anchor="middle" fill="white">SVG</text>
</svg>

Voici le résultat. Ici, rien de bien sorcier, je dessine un rectangle rouge, un cercle vert et des lettres blanches. C'est un peu gros, n'est-ce pas ? Il faudrait le redimensionner, non ? Si je me souviens bien de mes cours de CSS, peut être qu'en rajoutant des attributs width et height, ça va passer, non ?

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" width="300" height="200"
xmlns="http://www.w3.org/2000/svg">

<rect x="0" y="0" width="1500" height="1000" fill="red"/>

<circle cx="750" cy="500" r="450" fill="green"/>

<text x="750" y="550" font-size="250" text-anchor="middle" fill="white">SVG</text>
</svg>

Le résultat n'est pas vraiment ce que j'attendais. Cela m'a effectivement retaillé l'image, mais ne l'a pas redimensionné. En gros, il a pris mon image d'origine, à tailler ce qui correspondait aux coordonnées (0,0) (3OO,200) (soit un rectangle de 300 px par 200) et à laisser tomber tout le reste. C'est ici que viewBox entre en jeu :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" width="300" height="200"
viewBox="0 0 1500 1000"
xmlns="http://www.w3.org/2000/svg">

<rect x="0" y="0" width="1500" height="1000" fill="red"/>

<circle cx="750" cy="500" r="450" fill="green"/>

<text x="750" y="550" font-size="250" text-anchor="middle" fill="white">SVG</text>

</svg>

C'est mieux, , non ? En fait, viewBox va tout simplement définir l'échelle de l'image à afficher. Mon image d'origine commence au point (0,0) et fait 1500 par 1300px. Ainsi, quand je vais adjoindre des attributs de taille à mon élément SVG, le viewBox adaptera automatiquement l'échelle définit à ces nouveaux attributs.

Taggé comme: , , 2 Commentaires
16fév/121

Mozilla Spaces

DY Hack-A-Space

When I attended the Mozilla Festival last November, I saw an unusual workshop: you had to "hack" a space to make it the ideal place to work, create, innovate, in short, change the world. Initially, you had a plan of an empty space and add parts, equipment, furniture, arrange it to fit your needs. It was then possible to create the office of our dreams with modeling clay. The final step was to share plans, to create a debate around what should be a workspace. The project was called "Hack-A-Space".http://www.mozilla.org/en/about/mozilla-spaces/

Recently, Mozilla launched a web page named Mozilla Spaces:

Mozilla Spaces are open working environments where Mozillians can hack, code, design, research, create, engage and contribute to building a brighter future for the Web. Keep reading to learn more or check out the map above for info on specific locations.

And I don't know why, but this project remind me about the Mozilla Festival's workshop. As this workshop suggested, I share my version of Mozilla Space "hacked", in Paris' sauce, of course :)

  1. In downtown, close from a metro station: it must be conveniently accessible.
  2. Unlimited Internet, high availability, unfiltered, uncensored: it sounds trivial, but nothing more irritating than a cut Internet during a meeting or when you're researching for a project. Similarly, nothing more boring than blocked ports when we want access to Jabber to contact people, for example.
  3. Comfortable desks, in relatively large quantities, in a calm environment: it sounds trivial again, but nothing more annoying than a creaky chair or an unsteady desk. Small offices isolated must be added, where it may be possible to isolate themselves to think or to phone.
  4. A conference room: to make events more or less public, conferences, demos, lessons, playing geeks in short.
  5. A kitchen and a relaxation area: we all know the coffee machine's phenomenon that solves bugs, or at least is useful to disconnect and socialize 5 min.
  6. Accessibility to all: triviality again, but nobody thinks about it. In the same way that web integrators often forget the integration of accessibility, we often forget that a work place must be accessible for a wheelchair.
  7. An on-line forum, dedicated to the Space: to keep in touch afterwards, there is no better way than the Web. For keeping exchanges about past events, announcing next ones, requesting emergency assistance, etc. A instant channel and a recording one is the perfect combo (for example, IRC + wiki).
  8. A community manager: to organize life in this kind of place, an office manager is not enough. It needs someone close to communities, capable of directing newcomers, organizing events (geek or not geek), speaking for Mozilla, linking projects to the Space.

Imagine that this co-working space dedicated to the Web is available in Paris! Just a quick scenario. I am bringing a project. It may be an association project, an software's idea, even a project to create a business, why not? I'm home alone, and do not necessarily like to work at my place. Also, I did not necessarily have all the skills for my project. I seek a place where I'm pretty sure of finding people to help me, or even to take part in the project, if it tells them. I see this kind of spaces, where meetings are organized about documentation, code, open web, standards, [add your topic here] are organized. A beautiful dream of geek, isn't it?

16fév/120

Mozilla Spaces

DY Hack-A-Space

Quand j'ai participé au Mozilla Festival en novembre dernier, j'ai pu y voir un atelier des plus singuliers : il fallait "hacker" un espace pour en faire le lieu idéal pour travailler, créer, innover, bref, changer le monde. Dans un premier temps, il fallait prendre le plan d'un espace vide et y ajouter des pièces, du matériel, du mobilier, l'aménager donc. Il était ensuite possible de créer le bureau de nos rêves avec de la pâte à modeler. L'étape ultime était de partager les plans, de manière à créer un débat autour de ce que devrait être un espace de travail. Le projet s’appelait "Hack-A-Space".

Récemment, Mozilla vient de lancer une page nommée Mozilla Spaces :

Les espaces Mozilla sont des environnements de travail ouverts où les Mozilliens peuvent venir bidouiller, développer, concevoir, rechercher, créer, s'impliquer et contribuer à construire un avenir meilleur pour le Web.

Et je ne sais pourquoi, cela m'a rappelé ce projet durant le Mozilla Festival. Comme le suggérait alors l'atelier, je vais donc partager ma version "hackée" du Mozilla Space, à la sauce parisienne bien sûr :)

  1. En centre-ville, très proche d'une station de métro : il faut que ce soit pratique d'accès.
  2. Internet illimité, à haute disponibilité, non filtré, non censuré : ça paraît triviale, mais rien de plus énervant qu'une coupure Internet en pleine réunion ou quand on est en pleines recherches pour un projet. De la même manière, rien de plus chiant que des ports bloqués quand on veut accéder à Jabber pour contacter des gens, par exemple.
  3. Des bureaux confortables et en assez grandes quantités, le tout au calme : là encore, ça paraît triviale, mais rien de plus désagréable qu'une chaise qu'un couine ou un bureau qui vibre. Le système Open Space doit être adjoint de petits bureaux d'isolement, où il peut être possible de s'isoler pour réfléchir ou pour téléphoner.
  4. Une salle de conférence : pour faire des événements plus ou moins grand public, des cours, des démos, bref, jouer aux geeks.
  5. Une cuisine et un espace détente : on connaît tous le phénomène de la machine à café qui résout les bugs, ou en tout cas permet de déconnecter et de socialiser 5 min.
  6. Une accessibilité à tous : encore de la trivialité, mais on y pense jamais. De la même manière que les intégrateurs web oublient souvent l'intégration d'accessibilité, on oublie souvent qu'il faut qu'un endroit soit accessible en fauteuil roulant et pourtant, c'est la base.
  7. Un espace de discussion en ligne dédié à l'espace en question : pour garder le contact après coup, rien de tel que le Web. Que ce soit pour conserver les échanges des conférences et rencontre passées, pour annoncer les événements à venir, pour demander une aide d'urgence, etc. Un canal de discussion instantanée et un canal d'enregistrement des informations est le combo rêvé (par exemple, IRC + wiki).
  8. Un community manager : pour organiser la vie dans ce genre d'endroit, un office manager n'est pas suffisant. Il faut quelqu'un proche des communautés, capable de diriger les nouveaux arrivants, d'organiser les événements geek ou non geek, de parler au nom de Mozilla et de relier les projets du Space entre eux.

Imaginez que cet espace de coworking dédié au Web soit disponible, dans Paris ! Juste une petite mise en situation. Je suis porteuse d'un projet. Cela peut être un projet d'association, une idée de logiciel, même un projet de création d'entreprise, pourquoi pas ? Je suis seule chez moi, et n'aime pas forcément travailler à mon domicile. De plus, je n'ai pas forcément toutes les compétences nécessaires à mon projet. Je cherche donc un lieu où je suis à peu près sure de trouver des gens pour m'aider, voire même pour prendre part au projet, si ça leur dit. Je vois ce genre d'espaces, où  des rencontres documentations sont organisés, des conférences de code, de Web ouvert, de standards, [ajoutez le sujet qui vous intéresse ici] sont organisés. Un beau rêve de geek !

Yapuka, comme on dit !

Taggé comme: Aucun commentaire
9fév/120

Février 2012 : FOSDEM

2 ans sans FOSDEM, c'était long. Trop long !

Les FOSDEM, c'est une grande réunion de geeks autour du Logiciel Libre et de l'Open Source, le tout arrosé (avec modération) de bière en cette charmante ville qu'est Bruxelles. Plus précisément, cet événement se déroule à l'Université Libre de Bruxelles, aussi surnommée ULB. Tout cela a lieu durant 2 jours, le premier week-end de février généralement.

On va reprendre le bon vieux système des points négatifs et positifs, en gardant le meilleur pour la fin, bien sûr :

  • pour le lieu : il fait froid ! Mais vraiment TRÈS froid ! Neige, verglas, vent glacé, tout le bataclan ! Donc pensez à prévoir du lourd en matière d'équipement : fringues chaudes sur plusieurs épaisseurs, approvisionnement en café, thé et autres boissons chaudes, etc. J'ai trouvé que cette année, les stands étaient un peu excentrés de tout le reste. La signalétique était un peu difficile à décrypter au début, si bien que j'ai dû chercher le bar pendant des heures, en quête désespérée de chocolat chaud.
  • pour Mozilla : bah, rien en fait ! Cf points positifs

Et maintenant, ce qui fait que cet événement est génial :

  • Bruxelles est une ville magnifique. Rien que pour Bruxelles, il faut aller aux FOSDEM. L'université en elle même est géniale, grande, avec des amphis de bonne qualité, du WiFi partout. Et quand on en a fini avec les stands et autres conférences de geek, il suffit de prendre le bus qui amène directement en centre ville pour se balader tranquillement, faire le touriste et en profiter un peu (beaucoup).
  • Les FOSDEM sont un bon moyen de networker entre les projets. Je l'ai expliqué pour l'Ubuntu-Party, mais ça vaut ici aussi pour cet événement, à la différence prêt que les FOSDEM sont plus européens.
  • Au niveau du stand Mozilla, ça manquait peut être un peu de démos techniques, vu que tout était déporté dans la DevRoom. Peut être une fiche rappelant les différentes sessions aurait été un plus. Sur un point de vue plus personnel, je trouve que ça manque d'affiches pour inciter les gens à contribuer, si bien qu'on se retrouve à écrire les annonces sur un papier, ce qui n'est pas forcément des plus présentables. Mais sinon, comme d'habitude pour les FOSDEM, c'est bonne humeur et joie de revoir les collègues contributeurs qui sont au rendez-vous. Une énorme standing ovation est à réserver à Benoit Leseul, de Mozilla Belgium, parce qu'il le vaut bien ! En règle générale, ça fait toujours très plaisir de voir des amis qu'on ne voit pas souvent, comme les contributeurs belges, niçois ou d'autres régions lointaines :)

Et pour finir, toutes les photos que j'ai prises de l’événement se trouvent sur Flickr en CC-BY-SA: =>ICI<=.