Mozilla Francophone https://mozfr.org/ 2015-05-30T04:00:19+00:00 Firefox OS : Mamie Fox sera ce week-end à la Ubuntu Party ET à la VIP https://firefoxos.mozfr.org/post/2015/05/Mamie-Fox-sera-Ubuntu-Party-ET-VIP 2015-05-29T18:56:00+00:00 Mozinet <p><a href="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/UP-1204_kinou_pascal_megane.jpg" title="Ubuntu Party 2012 Kinou, Pascal et Mégane (Christelle Thomas, DR)"><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/.UP-1204_kinou_pascal_megane_s.jpg" alt="Ubuntu Party 2012 – Kinou, Pascal et Mégane" style="float:right; margin: 0 0 1em 1em;" /></a>Bonjour à tous mes petits Fox,</p> <p>Le week-end dernier, mon petit-fils le Fox m’avait emmené à <a href="https://firefoxos.mozfr.org/post/2015/05/Mamie-Fox-a-Geekopolis-le-week-end-prochain" hreflang="fr" title="Mamie Fox sera à Geekopolis le week-end prochain (21 mai 2015)">Geekopolis</a>. Je vous raconterai cette fantastique expérience très bientôt.</p> <p>Comme je suis une super mamie, cette semaine, je vais l’accompagner vers deux nouveaux univers complétement différents&#160;: l’<a href="http://ubuntu-paris.org/" hreflang="fr" title="Ubuntu Party Paris">Ubuntu Party</a> et la <a href="http://vip2015.popsyteam.org/" hreflang="fr" title="Very Important Party 2015">Very Important Party</a>. Il m’avait parlé d’un troisième événement appelé <a href="http://sudweb.fr/2015/" hreflang="fr" title="Sud Web les 29 et 30 mai à Montpellier">Sud Web</a> ce même week-end mais nous n’y serons pas. J’aurai quand même une pensée pour eux.</p> <p>Pour en revenir à notre prochain week-end, je vais me couper en deux pour être dans deux villes en même temps car tout est possible avec mon petit-fils et ses nombreux amis.</p> <h3>Ubuntu Party</h3> <p><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/ubuntuparty_grey.png" alt="Logo Ubuntu Party" style="float:right; margin: 0 0 1em 1em;" /><a href="http://www.ubuntu-fr.org/" hreflang="fr" title="Ubuntu-fr – Communauté francophone d'utilisateurs d'Ubuntu">Ubuntu</a> est un système d’exploitation open source – mon petit-fils m’a expliqué que chacun pouvait regarder sous son capot car le code écrit par ses développeurs était ouvert. Les 30 et 31 mai 2015 se déroulera à la Cité des sciences et de l&#8217;industrie de La Vilette à Paris la 20<sup>e</sup> édition des journées de sensibilisation aux logiciels libres et à Ubuntu, appelée <a href="http://ubuntu-paris.org/" hreflang="fr" title="Ubuntu Party Paris">Ubuntu Party</a>.</p> <p>Mon petit-fils le Fox m’a depuis longtemps expliqué les enjeux «&#160;du Libre&#160;» comme il dit. C’est important pour lui et c’est important pour nous tous. C’est pourquoi j’ai accepté de l’accompagner pour voir et comprendre grâce aux ateliers proposés, et aux nombreuses conférences et sessions techniques prévues.</p> <p>Il m’a aussi expliqué que c’était un rendez-vous pour toute la famille, aussi bien pour les grands que pour les petits.</p> <p><a href="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/up1104_groupe.jpg" title="Ubuntu Party 11.04 2013 – photo de groupe (DR)"><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/.up1104_groupe_m.jpg" alt="Ubuntu Party 11.04 2013 – photo de groupe" style="display:block; margin:0 auto;" /></a></p> <p>Parmi toutes les conférences et ateliers <a href="http://ubuntu-paris.org/UPP1504.pdf" hreflang="fr" title="Ubuntu Party 2015 Programme [PDF]">au programme</a> (leur nombre et leur diversité sur un week-end sont épatants), Le Fox espère aussi pouvoir assister aux conférences du contributeur Mozilla Genma sur les thèmes suivants&#160;:</p> <dl> <dt>Samedi 30 mai à 12h35 – Salle Agora par Genma&#160;: <strong>Firefox OS, l&#8217;OS pour smartphone par Mozilla</strong>&#160;:</dt> <dd>Présentation du système d’exploitation pour smartphone concocté par Mozilla. Quel est le principe, l’architecture et les fonctionnalités de Firefox OS&#160;? Quelle est l’implication de la communauté dans cet OS, et plus particulièrement la communauté francophone&#160;? Venez découvrir cet OS alternatif pour les smartphones.</dd> <dt>Samedi 30 mai 2015 à 15h00 – Salle Agora par Genma&#160;: <strong>Tor – Présentation et usage</strong>&#160;:</dt> <dd>Description du navigateur [basé sur Firefox ESR] qui tend à protéger votre vie privée. Nous expliquerons ce qu’est le réseau Tor, comment et pourquoi l’utiliser. Nous présenterons le TorBrowser et Tails, ce qu’est un service caché et un nœud, ainsi que les précautions d’usage et les limites à l’anonymat que peut procurer Tor.</dd> <dt>Samedi 30 mai 2015 à 17h00 – Salle Agora par Genma&#160;: <strong>Dégooglisons avec Framasoft</strong>&#160;:</dt> <dd>Présentation de l’initiative Dégooglisons de Framasoft. Celle-ci vise à amoindrir l’utilisation des services web que propose Google en nous indiquant une multitude de services libres et respectueux de ses utilisateurs. Cela permet de diminuer sa dépendance à un acteur qui tente de devenir hégémonique. Découverte du traitement de texte et tableur collaboratif, de l’hébergement de vidéos et à l’avenir, d’un moteur de recherche ou d’un service de mail.</dd> <dt>Dimanche 31 mai à 11h50 - Salle Studio par Genma&#160;: <strong>Les geeks aussi ont le droit à une vie privée</strong>&#160;:</dt> <dd>Être geek, c’est s’impliquer dans des communautés au sein desquelles on vit sa passion. C’est aussi avoir une activité en ligne, s’exposer comme un personnage public, sur les réseaux sociaux… Quelles sont les limites entre la vie publique et la vie privée&#160;? Quels sont les risques liés à cette exposition&#160;? Car oui, les geeks ont aussi des choses à cacher. L’objectif de la conférence est de sensibiliser à ces problématiques qui seront abordées tout au long des deux jours sur le stand «&#160;Café vie privée&#160;».</dd> </dl> <p>Mon petit-fils le Fox est un <em>geek</em> comme s’appellent même entre eux ses amis fanatiques d’informatique et de nouvelles technologies. Bien que je me débrouille avec Internet et que j’assiste à des conventions remplies de <em>geeks</em>, je ne suis pas encore une mamie <em>geek</em>.</p> <p><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/Lightbeam.png" alt="Lightbeam" style="float:right; margin: 0 0 1em 1em;" title="Lightbeam (Mozilla, DR) " />Le Fox m’emmènera aussi le samedi 30 mai 2015 à 13h20&#160;en salle Agora pour une démonstration de <a href="https://www.mozilla.org/fr/lightbeam/" hreflang="fr" title="Lightbeam pour Firefox – Mozilla">Lightbeam</a>, l’extension de Mozilla qui vous montre graphiquement par qui vous êtes pisté en ligne. Il parait que c’est impressionnant&#160;!</p> <p>Les amis de mon petit-fils ont un stand à l’Ubuntu Party et ils ont prévu de nombreuses animations. Ainsi, il y aura quelques téléphones en démonstration&#160;: l’Open C de ZTE et le Flame d’Alcatel. Vous pourrez toucher Firefox OS.</p> <p>Les deux jours en salle FabLab, vous trouverez un Café vie privée avec des <em>talks</em> et ateliers autour de la vie privée, un des grands thèmes de cette Ubuntu Party. Vous pourrez y voir&#160;:</p> <ul> <li>Extensions Firefox pour la vie privée</li> <li>Tor et le TorBrowser-Tails</li> <li>Chiffrement des mails GPG</li> <li>KeySigning Party</li> <li>Comment changer son DNS</li> <li>Communiquer avec cryptocat</li> <li>Auto-hébergement</li> <li>Création collaborative de l’Album Autocollants des Libristes.</li> </ul> <p>Je ne comprends pas tous les termes mais il parait qu’avec tout ces outils on peut échapper aux surveillances publiques et privées ou au moins aux plus courantes.</p> <p>Ensuite, vous pourrez assister à des animations <a href="https://webmaker.org/fr" hreflang="fr" title="Webmaker">Webmaker</a> où vous pourrez analyser et construire des pages web tout en vous amusant. En salle LivingLab, les samedi et dimanche vous aurez des ateliers des <em>webmakers</em> à destination des jeunes.</p> <p>Alors, si vous vous trouvez dans le coin, venez nous voir sur le stand de Mozilla avec nos nombreux amis mozilliens.</p> <p>Bien entendu, la Ubuntu Party c’est un rendez-vous très complet, car vous pouvez vous faire aider et participer à une «&#160;install party »…</p> <p><a href="https://www.flickr.com/photos/mauriz/495285938" title="Ubuntu Party 2007 Install Party (Maurice Svay, DR)"><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/ubuntu_party_2007_install_party_Maurice_Svay.jpg" alt="Ubuntu Party 2007 Install Party" style="display:block; margin:0 auto;" /></a></p> <p>… voir des débats et poser vos questions…</p> <p><a href="https://www.flickr.com/photos/43957949@N05/4652422211" title="Ubuntu Party 2009 débats (Florit0, CC By-SA 2.0)"><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/ubuntu_party_2009_debats_Florit0.jpg" alt="Ubuntu Party 2009 débats (Florit0)" style="display:block; margin:0 auto;" /></a></p> <p>… où encore participer aux autres conférences proposées…</p> <p><a href="https://www.flickr.com/photos/mauriz/3536648142/" title="Ubuntu Party 2009 conférence Jérémie Zimmerman (Maurice Svay, CC By 2.0)"><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/ubuntu_party_2009_conference_jeremy_zimmerman_Maurice_Svay.jpg" alt="ubuntu_party_2009_conference_jeremy_zimmerman_Maurice_Svay.jpg" style="display:block; margin:0 auto;" /></a></p> <p>Si vous n’avez pas la chance de venir à cette fête du Libre et de la liberté, toutes les conférences sont filmées et diffusées sur Internet à l&#8217;adresse <a href="http://ubuntu-paris.org/" hreflang="fr" title="Ubuntu-paris.org Ubuntu Party Live!">http://ubuntu-paris.org/</a>.</p> <h3>VIP (Very Important Party)</h3> <p><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/vip2015.png" alt="VIP 2015" style="float:right; margin: 0 0 1em 1em;" />La <a href="http://vip2015.popsyteam.org/" hreflang="fr" title="Very Important Party">Very Important Party</a> est une <a href="http://fr.wikipedia.org/wiki/Demoparty/" hreflang="fr" title="Démoparty">Démoparty</a>, organisée par le groupe PopsyTeam. Elle se déroulera du 29 au 31 mai 2015 à Thoissey (dans l’Ain).</p> <p>Mon petit-fils Le Fox m’a expliqué qu’il s’agit d’un rassemblement de passionnés d’informatique dont le but est de réaliser une animation ou un clip dans une taille limitée et une catégorie bien précise. Il s’agit d’un phénomène qui dure puisqu’il est apparu dans les années 80.</p> <p>Il m’a sorti un petit reportage pour montrer en images ce qu’était une scène démo pour que je comprenne mieux&#160;:</p> <iframe frameborder="0" width="480" height="270" src="//www.dailymotion.com/embed/video/xcjkya" allowfullscreen></iframe><p><a href="http://www.dailymotion.com/video/xcjkya_what-is-demoscene-dtv_tech" hreflang="fr" title="What is Demoscene (DTV) - vidéo dailymotion">What is Demoscene (DTV)</a> par <a href="http://www.dailymotion.com/0x00h">0x00h</a> (11 min 37)</p> <p>Il m’a aussi montré que l’animation est toujours présente quel que soit l’ordinateur, le matériel et même sur Internet à travers les navigateurs. Ainsi, le site <a href="http://www.wab.com/" hreflang="en" title="We are black">We are black</a> convertit régulièrement des clips de l’époque et il y a aussi possibilité de retrouver toutes les créations artistiques de la scène démo sur le site <a href="http://www.pouet.net/" hreflang="en" title="Pouet">Pouet</a>, quelle que soit la machine.</p> <p>Le rendez-vous de ce week-end propose de nombreux concours&#160;:</p> <ul> <li>Demo</li> <li>Graphique</li> <li>Music</li> <li>Old school</li> <li>Wild</li> </ul> <p>En plus de tout cela, mon petit-fils m’a expliqué qu’il y avait des concours surprises, appelés «&#160;Fast Compo&#160;», c’est à dire un ou plusieurs concours surprises dans un thème bien précis pour occuper et distraire les participants.</p> <p>Mais avant de recevoir les participants, les organisateurs préparent la salle d’une certaine manière pour accueillir un maximum de personnes et de matériel.</p> <p><a href="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/vip0.jpg"><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/.vip0_m.jpg" alt="VIP salle vide" style="display:block; margin:0 auto;" /></a></p> <p>Par ailleurs, des conférences sont prévues le samedi après-midi. Ce sera l’occasion pour le Fox de quitter un peu son écran afin d’assister aux conférences d’un contributeur Mozilla, connu de la scène démo, sur les thèmes suivants&#160;:</p> <ul> <li>14h00 par Christophe Villeneuve&#160;: Le Full Vectoriel, l’animation SVG sur Firefox et Firefox OS</li> <li>16h00&#160;: Christophe Villeneuve animera une table ronde sur la «&#160;Gloire et tournant de l&#8217;Atari&#160;» pour parler des années folles et mythiques de l&#8217;Atari</li> </ul> <p>Bien sûr, quand les participants sont présents, c’est complètement une autre affaire.</p> <p><a href="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/vip1-2.jpg"><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/.vip1-2_s.jpg" alt="VIP" /></a> <a href="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/vip2.jpg"><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/.vip2_s.jpg" alt="VIP" /></a></p> <p>En outre, des concerts sont aussi prévus chaque soir. Ce sera l’occasion de découvrir la musique numérique (chiptune, 8 bits, électronique…) que je ne connais pas encore. Mon petit-fils m’a montré ce petit reportage&#160;:</p> <iframe width="420" height="315" src="https://www.youtube.com/embed/3Gn1eCYMFDY" frameborder="0" allowfullscreen></iframe> <p>Reportage d’Arte sur les Chiptunes 8 bits <a href="https://www.youtube.com/watch?v=3Gn1eCYMFDY" hreflang="fr" title="Reportage chiptunes - chaîne YouTube de Chobus (12 mai 2006)">sur Youtube</a> (7 min 47)</p> <h3>Enfin</h3> <p>Je suis impatiente de retrouver tout ce petit monde. Mon petit-fils se prépare pour être au TOP et moi pour devenir une super mamie en étant présente à ces deux événements durant le même week-end.</p> <p><br /></p> <p><strong><em>Mamie Fox</em></strong></p> <address><br /> <a href="https://twitter.com/hellosct1" hreflang="fr" title="Christophe Villeneuve (@hellosct1) sur Twitter">@hellosct1</a>, beaucoup, et <a href="https://twitter.com/Mozinet" hreflang="fr" title="Mozinet (@Mozinet) sur Twitter">@Mozinet</a>, un peu </address> <p><br /> <em>Précédent message de Mamie Fox&#160;:</em> <a href="https://firefoxos.mozfr.org/post/2015/05/Mamie-Fox-a-Geekopolis-le-week-end-prochain" hreflang="fr" title="Mamie Fox sera à Geekopolis le week-end prochain (21 mai 2015) Firefox OS">Mamie Fox sera à Geekopolis le week-end prochain</a></p> <p><br /> <em>Crédits illustrations&#160;:</em> photo n° 1&#160;<a href="http://kinouchou.org/dotcl/index.php?post/2012/11/15/Ubuntu-party-12.10" hreflang="fr" title="kinouchou : Ubuntu-party 12.10 (15 nov. 2012) Christelle Thomas">kinouchou</a>. Tous droits réservés.</p> <p>n° 2 logo <a href="http://ubuntu-paris.org/" hreflang="fr" title="Ubuntu-paris.org">Ubuntu Party</a>. Tous droits réservés.</p> <p>n° 3 photo de groupe <a href="http://ubuntu-party.org/paris-1er-juin-2013/" hreflang="fr" title="Ubuntu Party : Seizième Ubuntu Party de Paris les 1er et 2 juin 2013 (7 avr. 2013)">Ubuntu Party 2013</a>. Tous droits réservés.</p> <p>n° 4 illustration <a href="https://www.mozilla.org/fr/lightbeam/" hreflang="fr" title="Lightbeam pour Firefox — Mozilla">Lightbeam de Mozilla</a>. Tous droits réservés.</p> <p>n° 5 photo <a href="https://www.flickr.com/photos/mauriz/495285938" hreflang="fr" title="Install Party – Explore Maurice Svay photos on Flickr. Mauri… – Flickr">de Maurice Svay</a> (tous droits réservés) et <a href="https://www.flickr.com/photos/mauriz/3536648142/" hreflang="fr" title="Ubuntu Party – Jérémie Zimmerman – Devant une salle pleine à… – Flickr">n° 7</a> id. (<a href="https://creativecommons.org/licenses/by/2.0/deed.fr" hreflang="fr" title="Creative Commons — Attribution 2.0 Générique — CC By 2.0">CC By 2.0</a>).</p> <p>n° 6 photo <a href="https://www.flickr.com/photos/43957949@N05/4652422211" hreflang="fr" title="_1170170 – Explore Florit0 photos on Flickr. Florit0 has upl… – Flickr">de Florit0&#160;</a> (<a href="https://creativecommons.org/licenses/by-sa/2.0/deed.fr" hreflang="fr" title="Creative Commons — Attribution - partage dans les mêmes conditions 2.0 Générique — CC By-SA 2.0">CC By-SA 2.0</a>).</p> <p>n° 8 dessin <a href="http://vip2015.popsyteam.org/" hreflang="fr" title="Vip2015">VIP 2015</a>. Tous droits réservés.</p> <p>n<sup>os</sup> 9 à 11 photos VIP. Tous droits réservés.</p> Ubuntu Party 2012 – Kinou, Pascal et MéganeBonjour à tous mes petits Fox,

Le week-end dernier, mon petit-fils le Fox m’avait emmené à Geekopolis. Je vous raconterai cette fantastique expérience très bientôt.

Comme je suis une super mamie, cette semaine, je vais l’accompagner vers deux nouveaux univers complétement différents : l’Ubuntu Party et la Very Important Party. Il m’avait parlé d’un troisième événement appelé Sud Web ce même week-end mais nous n’y serons pas. J’aurai quand même une pensée pour eux.

Pour en revenir à notre prochain week-end, je vais me couper en deux pour être dans deux villes en même temps car tout est possible avec mon petit-fils et ses nombreux amis.

Ubuntu Party

Logo Ubuntu PartyUbuntu est un système d’exploitation open source – mon petit-fils m’a expliqué que chacun pouvait regarder sous son capot car le code écrit par ses développeurs était ouvert. Les 30 et 31 mai 2015 se déroulera à la Cité des sciences et de l’industrie de La Vilette à Paris la 20e édition des journées de sensibilisation aux logiciels libres et à Ubuntu, appelée Ubuntu Party.

Mon petit-fils le Fox m’a depuis longtemps expliqué les enjeux « du Libre » comme il dit. C’est important pour lui et c’est important pour nous tous. C’est pourquoi j’ai accepté de l’accompagner pour voir et comprendre grâce aux ateliers proposés, et aux nombreuses conférences et sessions techniques prévues.

Il m’a aussi expliqué que c’était un rendez-vous pour toute la famille, aussi bien pour les grands que pour les petits.

Ubuntu Party 11.04 2013 – photo de groupe

Parmi toutes les conférences et ateliers au programme (leur nombre et leur diversité sur un week-end sont épatants), Le Fox espère aussi pouvoir assister aux conférences du contributeur Mozilla Genma sur les thèmes suivants :

Samedi 30 mai à 12h35 – Salle Agora par Genma : Firefox OS, l’OS pour smartphone par Mozilla :
Présentation du système d’exploitation pour smartphone concocté par Mozilla. Quel est le principe, l’architecture et les fonctionnalités de Firefox OS ? Quelle est l’implication de la communauté dans cet OS, et plus particulièrement la communauté francophone ? Venez découvrir cet OS alternatif pour les smartphones.
Samedi 30 mai 2015 à 15h00 – Salle Agora par Genma : Tor – Présentation et usage :
Description du navigateur [basé sur Firefox ESR] qui tend à protéger votre vie privée. Nous expliquerons ce qu’est le réseau Tor, comment et pourquoi l’utiliser. Nous présenterons le TorBrowser et Tails, ce qu’est un service caché et un nœud, ainsi que les précautions d’usage et les limites à l’anonymat que peut procurer Tor.
Samedi 30 mai 2015 à 17h00 – Salle Agora par Genma : Dégooglisons avec Framasoft :
Présentation de l’initiative Dégooglisons de Framasoft. Celle-ci vise à amoindrir l’utilisation des services web que propose Google en nous indiquant une multitude de services libres et respectueux de ses utilisateurs. Cela permet de diminuer sa dépendance à un acteur qui tente de devenir hégémonique. Découverte du traitement de texte et tableur collaboratif, de l’hébergement de vidéos et à l’avenir, d’un moteur de recherche ou d’un service de mail.
Dimanche 31 mai à 11h50 - Salle Studio par Genma : Les geeks aussi ont le droit à une vie privée :
Être geek, c’est s’impliquer dans des communautés au sein desquelles on vit sa passion. C’est aussi avoir une activité en ligne, s’exposer comme un personnage public, sur les réseaux sociaux… Quelles sont les limites entre la vie publique et la vie privée ? Quels sont les risques liés à cette exposition ? Car oui, les geeks ont aussi des choses à cacher. L’objectif de la conférence est de sensibiliser à ces problématiques qui seront abordées tout au long des deux jours sur le stand « Café vie privée ».

Mon petit-fils le Fox est un geek comme s’appellent même entre eux ses amis fanatiques d’informatique et de nouvelles technologies. Bien que je me débrouille avec Internet et que j’assiste à des conventions remplies de geeks, je ne suis pas encore une mamie geek.

LightbeamLe Fox m’emmènera aussi le samedi 30 mai 2015 à 13h20 en salle Agora pour une démonstration de Lightbeam, l’extension de Mozilla qui vous montre graphiquement par qui vous êtes pisté en ligne. Il parait que c’est impressionnant !

Les amis de mon petit-fils ont un stand à l’Ubuntu Party et ils ont prévu de nombreuses animations. Ainsi, il y aura quelques téléphones en démonstration : l’Open C de ZTE et le Flame d’Alcatel. Vous pourrez toucher Firefox OS.

Les deux jours en salle FabLab, vous trouverez un Café vie privée avec des talks et ateliers autour de la vie privée, un des grands thèmes de cette Ubuntu Party. Vous pourrez y voir :

  • Extensions Firefox pour la vie privée
  • Tor et le TorBrowser-Tails
  • Chiffrement des mails GPG
  • KeySigning Party
  • Comment changer son DNS
  • Communiquer avec cryptocat
  • Auto-hébergement
  • Création collaborative de l’Album Autocollants des Libristes.

Je ne comprends pas tous les termes mais il parait qu’avec tout ces outils on peut échapper aux surveillances publiques et privées ou au moins aux plus courantes.

Ensuite, vous pourrez assister à des animations Webmaker où vous pourrez analyser et construire des pages web tout en vous amusant. En salle LivingLab, les samedi et dimanche vous aurez des ateliers des webmakers à destination des jeunes.

Alors, si vous vous trouvez dans le coin, venez nous voir sur le stand de Mozilla avec nos nombreux amis mozilliens.

Bien entendu, la Ubuntu Party c’est un rendez-vous très complet, car vous pouvez vous faire aider et participer à une « install party »…

Ubuntu Party 2007 Install Party

… voir des débats et poser vos questions…

Ubuntu Party 2009 débats (Florit0)

… où encore participer aux autres conférences proposées…

ubuntu_party_2009_conference_jeremy_zimmerman_Maurice_Svay.jpg

Si vous n’avez pas la chance de venir à cette fête du Libre et de la liberté, toutes les conférences sont filmées et diffusées sur Internet à l’adresse http://ubuntu-paris.org/.

VIP (Very Important Party)

VIP 2015La Very Important Party est une Démoparty, organisée par le groupe PopsyTeam. Elle se déroulera du 29 au 31 mai 2015 à Thoissey (dans l’Ain).

Mon petit-fils Le Fox m’a expliqué qu’il s’agit d’un rassemblement de passionnés d’informatique dont le but est de réaliser une animation ou un clip dans une taille limitée et une catégorie bien précise. Il s’agit d’un phénomène qui dure puisqu’il est apparu dans les années 80.

Il m’a sorti un petit reportage pour montrer en images ce qu’était une scène démo pour que je comprenne mieux :

What is Demoscene (DTV) par 0x00h (11 min 37)

Il m’a aussi montré que l’animation est toujours présente quel que soit l’ordinateur, le matériel et même sur Internet à travers les navigateurs. Ainsi, le site We are black convertit régulièrement des clips de l’époque et il y a aussi possibilité de retrouver toutes les créations artistiques de la scène démo sur le site Pouet, quelle que soit la machine.

Le rendez-vous de ce week-end propose de nombreux concours :

  • Demo
  • Graphique
  • Music
  • Old school
  • Wild

En plus de tout cela, mon petit-fils m’a expliqué qu’il y avait des concours surprises, appelés « Fast Compo », c’est à dire un ou plusieurs concours surprises dans un thème bien précis pour occuper et distraire les participants.

Mais avant de recevoir les participants, les organisateurs préparent la salle d’une certaine manière pour accueillir un maximum de personnes et de matériel.

VIP salle vide

Par ailleurs, des conférences sont prévues le samedi après-midi. Ce sera l’occasion pour le Fox de quitter un peu son écran afin d’assister aux conférences d’un contributeur Mozilla, connu de la scène démo, sur les thèmes suivants :

  • 14h00 par Christophe Villeneuve : Le Full Vectoriel, l’animation SVG sur Firefox et Firefox OS
  • 16h00 : Christophe Villeneuve animera une table ronde sur la « Gloire et tournant de l’Atari » pour parler des années folles et mythiques de l’Atari

Bien sûr, quand les participants sont présents, c’est complètement une autre affaire.

VIP VIP

En outre, des concerts sont aussi prévus chaque soir. Ce sera l’occasion de découvrir la musique numérique (chiptune, 8 bits, électronique…) que je ne connais pas encore. Mon petit-fils m’a montré ce petit reportage :

Reportage d’Arte sur les Chiptunes 8 bits sur Youtube (7 min 47)

Enfin

Je suis impatiente de retrouver tout ce petit monde. Mon petit-fils se prépare pour être au TOP et moi pour devenir une super mamie en étant présente à ces deux événements durant le même week-end.


Mamie Fox


@hellosct1, beaucoup, et @Mozinet, un peu


Précédent message de Mamie Fox : Mamie Fox sera à Geekopolis le week-end prochain


Crédits illustrations : photo n° 1 kinouchou. Tous droits réservés.

n° 2 logo Ubuntu Party. Tous droits réservés.

n° 3 photo de groupe Ubuntu Party 2013. Tous droits réservés.

n° 4 illustration Lightbeam de Mozilla. Tous droits réservés.

n° 5 photo de Maurice Svay (tous droits réservés) et n° 7 id. (CC By 2.0).

n° 6 photo de Florit0  (CC By-SA 2.0).

n° 8 dessin VIP 2015. Tous droits réservés.

nos 9 à 11 photos VIP. Tous droits réservés.

]]>
Blog technique de MozFR : ES6 en détails : les générateurs https://tech.mozfr.org/post/2015/05/23/ES6-en-details-%3A-les-generateurs 2015-05-27T20:40:00+00:00 sphinx <p><em><a href="https://tech.mozfr.org/post/2015/05/20/ES6-en-details-%3A-les-iterateurs-et-la-boucle-for-of" hreflang="fr" title="ES en détails : les itérateurs et la boucle for-of">Suite de la traduction</a>, qui continue la série d&#8217;articles de <a href="https://twitter.com/jorendorff" title="@jorendorff">Jason Orendorff</a>. L&#8217;article original se trouve <a href="https://hacks.mozilla.org/2015/05/es6-in-depth-generators/">ici</a>.</em></p> <p><em>Merci aux traducteurs et relecteurs :) Marine, Mentalo, Benjamin, Ilphrin et Goofy&#160;!</em></p> <hr /> <p><em><a href="https://hacks.mozilla.org/category/es6-in-depth/" hreflang="en" title="ES6 in depth">ES6&#160;en détails</a> est une série d’articles décrivant les nouvelles fonctionnalités ajoutées au langage de programmation JavaScript avec la sixième édition du standard ECMAScript (ES6&#160;en abrégé).</em></p> <p>Je suis vraiment excité par l&#8217;article d&#8217;aujourd&#8217;hui. Aujourd&#8217;hui, nous allons parler de la fonctionnalité la plus magique d&#8217;ES6.</p> <p>Mais qu&#8217;entends-je par «&#160;magique&#160;»&#160;? Pour les débutants, cette fonctionnalité est si différente de ce qui existait déjà en JavaScript que cela peut sembler un peu flou à première vue. D&#8217;une certaine façon, elle peut complètement renverser le comportement du langage&#160;! Si ce n&#8217;est pas de la magie, je ne sais pas ce que c&#8217;est.</p> <p>Mais ce n&#8217;est pas tout&#160;: cette fonctionnalité peut repousser les frontières de «&#160;l&#8217;enfer des <em>callbacks</em>&#160;» aux limites du surnaturel.</p> <p>En fais-je suffisamment assez&#160;? Allons-y et jugez-en par vous-même.</p> <h2>Introduction aux générateurs ES6</h2> <p>Que sont les générateurs?</p> <p>Commençons par en observer un&#160;:</p> <pre> function* quips(nom) { yield "bonjour " + nom + " !"; yield "j'espère que vous appréciez ces billets"; if (nom.startsWith("X")) { yield "Tiens, votre nom commence par un X, " + nom; } yield "À la prochaine !"; } </pre> <p>Ceci est un morceau de code pour simuler <a href="http://people.mozilla.org/~jorendorff/demos/meow.html" hreflang="en" title="Démo chat">un chat qui parle</a>, probablement un type d&#8217;application crucial sur Internet aujourd&#8217;hui. (Essayez-la, <a href="http://people.mozilla.org/~jorendorff/demos/meow.html" hreflang="en" title="Démo chat">cliquez sur le lien et jouez avec le chat</a>. Quand vous serez perdu, revenez ici pour quelques explications.)</p> <p>Cela ressemble à une fonction, n&#8217;est-ce pas&#160;? C&#8217;est ce qu&#8217;on appelle une fonction génératrice (ou générateur) et ça possède beaucoup de liens avec les fonctions. Dès le premier coup d&#8217;œil, on peut toutefois observer deux différences&#160;:</p> <ul> <li>Les fonctions classiques commencent par <code>function</code>. Les fonctions génératrices commencent par <code>function*</code>.</li> <li>Dans une fonction génératrice, <code>yield</code> est un mot-clé, avec une syntaxe similaire à <code>return</code>. La différence est que, tandis qu&#8217;une fonction (même un générateur) ne peut utiliser <code>return</code> qu&#8217;une seule fois, un générateur peut utiliser <code>yield</code> plusieurs fois. L&#8217;expression <code>yield</code> suspend l’exécution du générateur, qui peut donc être reprise plus tard.</li> </ul> <p>Voici donc la principale différence entre une fonction classique et une fonction génératrice. Les fonctions normales ne peuvent pas être mises en pause. Les générateurs peuvent être interrompus puis repris.</p> <h2>Ce que font les générateurs</h2> <p>Que se passe-t-il lorsqu&#8217;on appelle la fonction génératrice <code>quips()</code>&#160;?</p> <pre> > var iter = quips("jorendorff"); [object Generator] > iter.next() { value: "bonjour jorendorff!", done: false } > iter.next() { value: "j'espère que vous appréciez ces billets", done: false } > iter.next() { value: "À la prochaine !", done: false } > iter.next() { value: undefined, done: true } </pre> <p>Vous êtes sans doute familier des fonctions classiques et de leur comportement. Lorsqu&#8217;elles sont appelées, elles démarrent immédiatement et ne s&#8217;arrêtent que lorsqu&#8217;elles rencontrent le mot-clé <code>return</code> ou <code>throw</code>. Élémentaire pour tout programmeur en JavaScript.</p> <p>Un appel à un générateur ressemble à un appel à une fonction classique&#160;: <code>quips("jorendorff")</code>. Cependant, quand on appelle un générateur, il ne démarre pas immédiatement. En fait, il renvoie un objet générateur en pause (nommé <code>iter</code> dans l&#8217;exemple ci-dessus). On peut considérer cet objet générateur comme un appel de fonction, gelé dans le temps. En particulier, il est mis en pause tout au début de la fonction génératrice, juste avant de démarrer la première ligne de code.</p> <p>À chaque appel de la méthode <code>.next()</code> de l&#8217;objet générateur, l&#8217;appel de la fonction se remet en route jusqu&#8217;au <code>yield</code> suivant.</p> <p>C&#8217;est pour cette raison qu&#8217;à chaque fois que nous avons appelé <code>iter.next()</code> dans l&#8217;exemple ci-dessus nous avons obtenu une valeur différente (sous la forme d&#8217;une chaîne de caractères).</p> <p>Lors du dernier appel à <code>iter.next()</code>, nous avons finalement atteint la fin de la fonction génératrice, le champ <code>.done</code> vaut donc <code>true</code>. Atteindre la fin d&#8217;une fonction revient à renvoyer <code>undefined</code>, c&#8217;est pour cela que la propriété <code>.value</code> du résultat vaut <code>undefined</code>.</p> <p>C&#8217;est sans doute le bon moment pour revenir à <a href="http://people.mozilla.org/~jorendorff/demos/meow.html" hreflang="en" title="Démo chat">la page de démo du chat parlant</a> et manipuler le code pour de bon. Essayez par exemple d&#8217;ajouter un <code>yield</code> dans une boucle, que se passe-t-il&#160;?</p> <p>D&#8217;un point de vue technique, chaque fois qu&#8217;un générateur utilise <code>yield</code>, le cadre de sa pile (<em>stack frame</em>) — qui contient les variables locales, les arguments, les valeurs temporaires ainsi que la position actuelle de l’exécution dans le générateur — est ôté de la pile. Cependant, le générateur conserve une référence vers ce cadre afin que le prochain appel à <code>.next()</code> puisse réutiliser ce cadre et continuer l’exécution du code.</p> <p>Il est important de préciser que <strong>les générateurs ne sont pas des <em>threads</em></strong>. Dans les langages utilisant des <em>threads</em>, on peut rencontrer plusieurs parties de code qui fonctionnent en même temps, entraînant habituellement des accès concurrents, un certain indéterminisme et de meilleures performances.</p> <p>Les générateurs n&#8217;agissent pas du tout de cette façon. Quand un générateur fonctionne, il se situe dans le même <em>thread</em> que son appel. L&#8217;ordre des exécutions est séquentiel et déterministe, il n&#8217;y a pas d&#8217;accès concurrents. Contrairement aux systèmes utilisant des <em>threads</em>, un générateur est uniquement suspendu aux endroits correspondants aux <code>yield</code> contenus dans son code.</p> <p>OK, nous savons maintenant ce que sont les générateurs. Nous avons vu un générateur fonctionner, s&#8217;arrêter puis reprendre. Arrive maintenant la grande question&#160;: en quoi cette chose bizarre pourrait-elle nous être utile&#160;?</p> <h2>Les générateurs sont des itérateurs</h2> <p>La semaine dernière nous avons vu que les itérateurs ES6 ne sont pas seulement une classe native. Ils représentent une extension du langage dans son ensemble. Vous pouvez créer vos propres itérateurs, il suffit d&#8217;implémenter deux méthodes&#160;: <code>[Symbol.iterator()]</code> et <code>next()</code>.</p> <p>Malgré tout, implémenter une interface demande toujours un minimum de travail. Voyons à quoi ressemble réellement l&#8217;implémentation d&#8217;un itérateur. Par exemple, créons un itérateur basique qui compte d&#8217;un nombre à un autre, comme le ferait une bonne vieille boucle <code>for(;;)</code> en C.</p> <pre> // Cela devrait sonner 3 fois for (var value of range(0, 3)) { alert("Ding ! à l'étage numéro " + value); } </pre> <p>Voici une solution qui utilise une classe ES6 (si cette syntaxe vous semble un peu obscure, pas de panique, ce sera l&#8217;objet d&#8217;un prochain billet).</p> <pre> class RangeIterator { constructor(start, stop) { this.value = start; this.stop = stop; } [Symbol.iterator]() { return this; } next() { var value = this.value; if (value < this.stop) { this.value++; return {done: false, value: value}; } else { return {done: true, value: undefined}; } } } // On renvoie un nouvel itérateur qui compte de 'start' à 'stop'. function range(start, stop) { return new RangeIterator(start, stop); } </pre> <p><a href="http://codepen.io/anon/pen/eNdqop" title="Demo Codepen 1">Essayez ce code.</a></p> <p>Note&#160;: il est nécessaire d&#8217;utiliser Firefox Nightly ou Chrome avec une version supérieure ou égale à 42 pour que cet exemple fonctionne.</p> <p>C&#8217;est pour cela qu&#8217;implémenter un itérateur se fait comme avec <a href="http://gafter.blogspot.fr/2007/07/internal-versus-external-iterators.html" hreflang="en" title="Billet itérateur Java">Java</a> ou <a href="https://schani.wordpress.com/2014/06/06/generators-in-swift/" hreflang="en" title="Billet générateurs Swift">Swift</a>, ce n&#8217;est pas si compliqué&#160;! Mais ce n&#8217;est pas vraiment trivial non plus&#160;! Est-ce que ce code contient des erreurs&#160;? Pas facile à dire. Il ne ressemble pas du tout à la boucle <code>for(;;)</code> habituelle que l&#8217;on essaie de remplacer&#160;: le protocole des itérateurs nous oblige à démanteler la boucle.</p> <p>À ce stade, vos sentiments concernant les itérateurs sont sans doute mitigés. Ils sont sûrement super à utiliser mais ils semblent difficiles à implémenter.</p> <p>À tout hasard, n&#8217;auriez vous pas idée d&#8217;une toute nouvelle structure de contrôle du flux en JavaScript, fonctionnant étape par étape, et qui rendraient les itérateurs beaucoup plus simples à construire&#160;? Puisque nous avons les générateurs, pourquoi ne pas les utiliser ici&#160;?</p> <p>Essayons&#160;:</p> <pre> function* range(start, stop) { for (var i = start; i < stop; i++) yield i; } </pre> <p><a href="http://codepen.io/anon/pen/GJjVLG" title="Démo Codepen 2">Essayez ce code.</a></p> <p>Les 4 lignes du générateur ci-dessus remplacent exactement les 23 lignes utilisées précédemment pour implémenter <code>range()</code>, y compris l&#8217;intégralité de la classe <code>RangeIterator</code>. Ceci est possible parce que les générateurs sont des itérateurs. Tous les générateurs possèdent une implémentation native de <code>.next()</code> et de <code>[Symbol.iterator]()</code>. Il suffit simplement d&#8217;écrire le comportement de la boucle.</p> <p>Implémenter des itérateurs sans disposer de générateurs, c&#8217;est équivalent à devoir écrire un courrier en utilisant uniquement la voie passive. Lorsqu&#8217;il est impossible d&#8217;exprimer directement ce qu&#8217;on a besoin, on se retrouve à formuler des phrases de façon alambiquée. <code>RangeIterator</code> était long et étrange car on l&#8217;utilisait pour décrire une boucle sans pouvoir utiliser une syntaxe de boucle. Les générateurs permettent de répondre à ce problème.</p> <p>Comment peut-on utiliser les générateurs comme des itérateurs&#160;?</p> <ul> <li><p>En rendant n&#8217;importe quel objet itérable. Il suffit d&#8217;écrire une fonction génératrice qui parcourt <code>this</code>, et qui utilise <code>yield</code> sur chaque valeur rencontrée. La fonction obtenue peut être définie comme la méthode <code>[Symbol.iterator]</code> de l&#8217;objet.</p></li> <li><p>En simplifiant les fonctions de construction de tableaux. Si votre fonction retourne un tableau de résultats à chaque appel, comme ceci&#160;:</p> <pre> // Divise un tableau à une dimension 'icons' // en tableaux de taille fixe 'rowLength' function splitIntoRows(icons, rowLength) { var rows = []; for (var i = 0; i < icons.length; i += rowLength) { rows.push(icons.slice(i, i + rowLength)); } return rows; } </pre> <p>Les générateurs permettent de faire la même chose de manière plus concise&#160;:</p> <pre> function* splitIntoRows(icons, rowLength) { for (var i = 0; i < icons.length; i += rowLength) { yield icons.slice(i, i + rowLength); } } </pre> <p> La seule différence de comportement est le fait qu&#8217;au lieu de travailler sur tous les résultats à la fois et de renvoyer un tableau les contenant, ceci renvoie un itérateur et les valeurs de retour sont calculées l&#8217;une après l&#8217;autre, à la demande. </p> <li><p>Pour des résultats de grande taille, cela peut également être utile. Il est impossible de construire un tableau infini. Mais vous pouvez renvoyer un générateur qui produit une séquence sans fin, chaque appelant pourra récupérer autant de valeurs que nécessaire à partir de ce générateur.</p></li> <li><p>Pour «&#160;refactorer&#160;» des boucles complexes&#160;: vous avez une fonction énorme et moche&#160;? Vous souhaitez la scinder en éléments plus simples&#160;? Les générateurs sont des couteaux que vous pouvez ajouter à votre boîte à outils. Lorsque vous êtes face à une boucle complexe, vous pouvez sortir la partie qui produit les données dans une fonction génératrice indépendante. Puis modifier la boucle en utilisant <code>for(var toto of monNouveauGenerateur(args))</code>. <li><p>Pour créer des outils afin de manipuler les itérables. ES6 ne fournit pas de bibliothèque complète pour filtrer, mapper et bidouiller les ensembles de données itérables. Cependant, les générateurs sont très bien adaptés à la création de ces outils dont vous pourriez avoir besoin, en écrivant simplement quelques lignes de code. Par exemple, supposons que vous ayez besoin d&#8217;un équivalent de <code>Array.prototype.filter()</code> qui fonctionne sur les <code>NodeList</code> du DOM et pas uniquement sur les objets <code>Array</code>. Facile&#160;!</p> <pre> function* filter(test, iterable) { for (var item of iterable) { if (test(item)) yield item; } } </pre> </li> </ul> <p>Alors, est-ce que les générateurs sont utiles&#160;? Évidemment. Ils représentent une façon étonnament simple d&#8217;implémenter des itérateurs personnalisés et les itérateurs représentent le nouveau standard pour les données et les boucles dans ES6.</p> <p>Mais ce n&#8217;est pas la seule chose que peuvent faire les générateurs. Ce n&#8217;est peut-être même pas la plus importante chose qu&#8217;ils peuvent faire&#160;!</p> <h2>Générateurs et code asynchrone</h2> <p>Voici du code JS que j&#8217;ai écrit il y a quelque temps&#160;:</p> <pre> }; }) }); }); }); }); </pre> <p>Cela vous rappelle peut-être quelques lignes de votre code. <a href="http://www.html5rocks.com/en/tutorials/async/deferred/" hreflang="en" title="Asynch JS: The Power Of $.Deferred">Les API asynchrones</a> demandent généralement une fonction de rappel (<em>callback</em>), ce qui signifie qu&#8217;il faut écrire une fonction anonyme supplémentaire chaque fois qu&#8217;on fait quelque chose. Ainsi, si vous avez un code qui fait 3 choses, plutôt que 3 lignes de code, vous aurez 3 niveaux d&#8217;indentation dans votre code.</p> <p>Voici un autre fragment de code JS que j&#8217;ai écrit&#160;:</p> <pre> }).on('close', function () { done(undefined, undefined); }).on('error', function (error) { done(error); }); </pre> <p>Les API asynchrones possèdent certaines conventions concernant la gestion des erreurs plutôt que d&#8217;utiliser des exceptions. Différentes API possèdent différentes conventions. Dans la plupart des cas, les erreurs sont ignorées par défaut. Dans certains cas, même les cas de terminaisons normales sont ignorés par défaut.</p> <p>Jusqu&#8217;à maintenant, ces problèmes ont été le prix à payer pour utiliser la programmation asynchrone. Nous avons fini par accepter que le code asynchrone n&#8217;est pas aussi propre et simple que la version synchrone correspondante.</p> <p>Les générateurs nous font espérer que ce ne soit plus le cas.</p> <p><a href="https://github.com/kriskowal/q/tree/v1/examples/async-generators" hreflang="en" title="Q Async - GitHub">Q.async()</a> est un tentative expérimentale pour utiliser les générateurs avec des promesses afin de produire du code asynchrone qui ressemble à du code synchrone. Par exemple&#160;:</p> <pre> // Code synchrone pour créer une fonction qui fait du bruit function makeNoise() { shake(); rattle(); roll(); } // Code asynchrone pour faire du bruit. // Renvoie un objet Promise qui est résolu // quand nous avons fini de faire du bruit. function makeNoise_async() { return Q.async(function* () { yield shake_async(); yield rattle_async(); yield roll_async(); }); } </pre> <p>La principale différence est que, dans la version asynchrone, il faut ajouter le mot-clé <code>yield</code> à chaque appel d&#8217;une fonction asynchrone.</p> <p>Ajouter un détail comme une condition <code>if</code> ou un bloc <code>try-catch</code> dans la version <code>Q.async</code> se fait exactement de la même façon que dans la version synchrone. Comparé à d&#8217;autres façons d&#8217;écrire du code asynchrone, cela ressemble beaucoup moins à l&#8217;apprentissage d&#8217;un nouveau langage.</p> <p>Si vous êtes arrivé jusqu&#8217;ici, vous apprécierez sans doute <a href="http://jlongster.com/A-Study-on-Solving-Callbacks-with-JavaScript-Generators" hreflang="en" title="Billet de James Long sur les générateurs">l&#8217;article très détaillé de James Long sur ce sujet</a>.</p> <p>Les générateurs illustrent donc un nouveau modèle de programmation asynchrone qui semble mieux adapté au cerveau humain. Les travaux autour de ces concepts sont toujours en cours. Entre autres choses, une meilleure syntaxe devrait aider. Pour <a href="https://github.com/tc39/ecma262" hreflang="en" title="ES7 - GitHub">la version ES7</a>, il existe <a href="https://github.com/lukehoban/ecmascript-asyncawait" hreflang="en" title="Asyncawait - GitHub">une proposition</a> pour construire des fonctions asynchrones basées à la fois sur les promesses (<em>promises</em>) et les générateurs, inspirées de fonctionnalités similaires existant en C#.</p> <h2>Quand puis-je commencer à utiliser cette fonctionnalité&#160;?</h2> <p>Côté serveur, vous pouvez utiliser les générateurs ES6 dès aujourd&#8217;hui avec io.js (et avec Node en utilisant l&#8217;option &#8212;harmony)</p> <p>Côté navigateur, seuls Firefox 27+ et Chrome 39+ supportent les générateurs ES6 pour le moment. Pour les utiliser à travers le web, vous devrez utiliser un compilateur tel que <a href="http://babeljs.io/" hreflang="en" title="BabelJS">Babel</a> ou <a href="https://github.com/google/traceur-compiler#what-is-traceur" hreflang="en" title="Traceur - GitHub">Traceur</a> pour traduire votre code ES6&#160;en code ES5, plus largement compatible avec les anciens navigateurs.</p> <p>Quelques remerciements à qui de droit&#160;: les générateurs ont d&#8217;abord été implémentés dans JS par Brendan Eich&#160;; sa conception suivait de près <a href="https://www.python.org/dev/peps/pep-0255/" hreflang="en" title="PEP 0255">les générateurs Python</a>, inspirés par <a href="http://www.cs.arizona.edu/icon/" hreflang="en" title="Icon">Icon</a>. Ils sont apparus dans Firefox 2.0&#160;<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Nouveaut%C3%A9s_et_historique_de_JavaScript/1.7" hreflang="fr" title="Historique JavaScript 1.7 - MDN">dès 2006</a>. Le chemin vers la standardisation a été chaotique et la syntaxe ainsi que le comportement ont évolué au cours de cette période. Les générateurs d&#8217;ES6 ont été implémentés dans Firefox et Chrome par la même personne, <a href="http://wingolog.org/" hreflang="en" title="Andy Wingo">Andy Wingo</a>, un professionnel du compilateur. Ce travail a été sponsorisé par Bloomberg.</p> <h2><code>yield;</code></h2> <p>Il y a encore à dire sur les générateurs. Nous n&#8217;avons pas évoqué les méthodes <code>.throw()</code> et <code>return()</code>, les arguments optionnels de <code>.next()</code> ou encore la syntaxe de l&#8217;expression <code>yield*</code>. Cependant, je pense que ça suffira pour ce billet, déjà suffisamment déconcertant. Comme le font les générateurs, il vaut mieux faire une pause et reprendre une autre fois.</p> <p>La semaine prochaine, nous changerons d&#8217;allure. Nous avons abordé deux sujets assez conséquents, l&#8217;un après l&#8217;autre. Ne pourrions-nous pas parler d&#8217;une fonctionnalité ES6 qui ne changera pas votre vie&#160;? Quelque chose de simple et de manifestement utile&#160;? Quelque chose qui vous fera sourire&#160;? ES6 possède aussi quelques fonctionnalités de ce genre.</p> <p>À venir&#160;: une fonctionnalité <em>qui va immédiatement trouver sa place</em> dans le code que vous écrivez tous les jours. Rejoignez-nous la semaine prochaine pour une explication détaillée sur les patrons de chaînes (<em>template strings</em>) d&#8217;ES6&#160;!</p> <style> pre { white-space: pre;} </style> Suite de la traduction, qui continue la série d’articles de Jason Orendorff. L’article original se trouve ici.

Merci aux traducteurs et relecteurs :) Marine, Mentalo, Benjamin, Ilphrin et Goofy !


ES6 en détails est une série d’articles décrivant les nouvelles fonctionnalités ajoutées au langage de programmation JavaScript avec la sixième édition du standard ECMAScript (ES6 en abrégé).

Je suis vraiment excité par l’article d’aujourd’hui. Aujourd’hui, nous allons parler de la fonctionnalité la plus magique d’ES6.

Mais qu’entends-je par « magique » ? Pour les débutants, cette fonctionnalité est si différente de ce qui existait déjà en JavaScript que cela peut sembler un peu flou à première vue. D’une certaine façon, elle peut complètement renverser le comportement du langage ! Si ce n’est pas de la magie, je ne sais pas ce que c’est.

Mais ce n’est pas tout : cette fonctionnalité peut repousser les frontières de « l’enfer des callbacks » aux limites du surnaturel.

En fais-je suffisamment assez ? Allons-y et jugez-en par vous-même.

Introduction aux générateurs ES6

Que sont les générateurs?

Commençons par en observer un :

function* quips(nom) {
  yield "bonjour " + nom + " !";
  yield "j'espère que vous appréciez ces billets";
  if (nom.startsWith("X")) {
    yield "Tiens, votre nom commence par un X, " + nom;
  }
  yield "À la prochaine !";
}

Ceci est un morceau de code pour simuler un chat qui parle, probablement un type d’application crucial sur Internet aujourd’hui. (Essayez-la, cliquez sur le lien et jouez avec le chat. Quand vous serez perdu, revenez ici pour quelques explications.)

Cela ressemble à une fonction, n’est-ce pas ? C’est ce qu’on appelle une fonction génératrice (ou générateur) et ça possède beaucoup de liens avec les fonctions. Dès le premier coup d’œil, on peut toutefois observer deux différences :

  • Les fonctions classiques commencent par function. Les fonctions génératrices commencent par function*.
  • Dans une fonction génératrice, yield est un mot-clé, avec une syntaxe similaire à return. La différence est que, tandis qu’une fonction (même un générateur) ne peut utiliser return qu’une seule fois, un générateur peut utiliser yield plusieurs fois. L’expression yield suspend l’exécution du générateur, qui peut donc être reprise plus tard.

Voici donc la principale différence entre une fonction classique et une fonction génératrice. Les fonctions normales ne peuvent pas être mises en pause. Les générateurs peuvent être interrompus puis repris.

Ce que font les générateurs

Que se passe-t-il lorsqu’on appelle la fonction génératrice quips() ?

> var iter = quips("jorendorff");
  [object Generator]
> iter.next()
  { value: "bonjour jorendorff!", done: false }
> iter.next()
  { value: "j'espère que vous appréciez ces billets", done: false }
> iter.next()
  { value: "À la prochaine !", done: false }
> iter.next()
  { value: undefined, done: true }

Vous êtes sans doute familier des fonctions classiques et de leur comportement. Lorsqu’elles sont appelées, elles démarrent immédiatement et ne s’arrêtent que lorsqu’elles rencontrent le mot-clé return ou throw. Élémentaire pour tout programmeur en JavaScript.

Un appel à un générateur ressemble à un appel à une fonction classique : quips("jorendorff"). Cependant, quand on appelle un générateur, il ne démarre pas immédiatement. En fait, il renvoie un objet générateur en pause (nommé iter dans l’exemple ci-dessus). On peut considérer cet objet générateur comme un appel de fonction, gelé dans le temps. En particulier, il est mis en pause tout au début de la fonction génératrice, juste avant de démarrer la première ligne de code.

À chaque appel de la méthode .next() de l’objet générateur, l’appel de la fonction se remet en route jusqu’au yield suivant.

C’est pour cette raison qu’à chaque fois que nous avons appelé iter.next() dans l’exemple ci-dessus nous avons obtenu une valeur différente (sous la forme d’une chaîne de caractères).

Lors du dernier appel à iter.next(), nous avons finalement atteint la fin de la fonction génératrice, le champ .done vaut donc true. Atteindre la fin d’une fonction revient à renvoyer undefined, c’est pour cela que la propriété .value du résultat vaut undefined.

C’est sans doute le bon moment pour revenir à la page de démo du chat parlant et manipuler le code pour de bon. Essayez par exemple d’ajouter un yield dans une boucle, que se passe-t-il ?

D’un point de vue technique, chaque fois qu’un générateur utilise yield, le cadre de sa pile (stack frame) — qui contient les variables locales, les arguments, les valeurs temporaires ainsi que la position actuelle de l’exécution dans le générateur — est ôté de la pile. Cependant, le générateur conserve une référence vers ce cadre afin que le prochain appel à .next() puisse réutiliser ce cadre et continuer l’exécution du code.

Il est important de préciser que les générateurs ne sont pas des threads. Dans les langages utilisant des threads, on peut rencontrer plusieurs parties de code qui fonctionnent en même temps, entraînant habituellement des accès concurrents, un certain indéterminisme et de meilleures performances.

Les générateurs n’agissent pas du tout de cette façon. Quand un générateur fonctionne, il se situe dans le même thread que son appel. L’ordre des exécutions est séquentiel et déterministe, il n’y a pas d’accès concurrents. Contrairement aux systèmes utilisant des threads, un générateur est uniquement suspendu aux endroits correspondants aux yield contenus dans son code.

OK, nous savons maintenant ce que sont les générateurs. Nous avons vu un générateur fonctionner, s’arrêter puis reprendre. Arrive maintenant la grande question : en quoi cette chose bizarre pourrait-elle nous être utile ?

Les générateurs sont des itérateurs

La semaine dernière nous avons vu que les itérateurs ES6 ne sont pas seulement une classe native. Ils représentent une extension du langage dans son ensemble. Vous pouvez créer vos propres itérateurs, il suffit d’implémenter deux méthodes : [Symbol.iterator()] et next().

Malgré tout, implémenter une interface demande toujours un minimum de travail. Voyons à quoi ressemble réellement l’implémentation d’un itérateur. Par exemple, créons un itérateur basique qui compte d’un nombre à un autre, comme le ferait une bonne vieille boucle for(;;) en C.

// Cela devrait sonner 3 fois
for (var value of range(0, 3)) {
  alert("Ding ! à l'étage numéro " + value);
}

Voici une solution qui utilise une classe ES6 (si cette syntaxe vous semble un peu obscure, pas de panique, ce sera l’objet d’un prochain billet).

class RangeIterator {
  constructor(start, stop) {
    this.value = start;
    this.stop = stop;
  }

  [Symbol.iterator]() { return this; }

  next() {
    var value = this.value;
    if (value < this.stop) {
      this.value++;
      return {done: false, value: value};
    } else {
      return {done: true, value: undefined};
    }
  }
}

// On renvoie un nouvel itérateur qui compte de 'start' à 'stop'.
function range(start, stop) {
  return new RangeIterator(start, stop);
}

Essayez ce code.

Note : il est nécessaire d’utiliser Firefox Nightly ou Chrome avec une version supérieure ou égale à 42 pour que cet exemple fonctionne.

C’est pour cela qu’implémenter un itérateur se fait comme avec Java ou Swift, ce n’est pas si compliqué ! Mais ce n’est pas vraiment trivial non plus ! Est-ce que ce code contient des erreurs ? Pas facile à dire. Il ne ressemble pas du tout à la boucle for(;;) habituelle que l’on essaie de remplacer : le protocole des itérateurs nous oblige à démanteler la boucle.

À ce stade, vos sentiments concernant les itérateurs sont sans doute mitigés. Ils sont sûrement super à utiliser mais ils semblent difficiles à implémenter.

À tout hasard, n’auriez vous pas idée d’une toute nouvelle structure de contrôle du flux en JavaScript, fonctionnant étape par étape, et qui rendraient les itérateurs beaucoup plus simples à construire ? Puisque nous avons les générateurs, pourquoi ne pas les utiliser ici ?

Essayons :

function* range(start, stop) {
  for (var i = start; i < stop; i++)
    yield i;
}

Essayez ce code.

Les 4 lignes du générateur ci-dessus remplacent exactement les 23 lignes utilisées précédemment pour implémenter range(), y compris l’intégralité de la classe RangeIterator. Ceci est possible parce que les générateurs sont des itérateurs. Tous les générateurs possèdent une implémentation native de .next() et de [Symbol.iterator](). Il suffit simplement d’écrire le comportement de la boucle.

Implémenter des itérateurs sans disposer de générateurs, c’est équivalent à devoir écrire un courrier en utilisant uniquement la voie passive. Lorsqu’il est impossible d’exprimer directement ce qu’on a besoin, on se retrouve à formuler des phrases de façon alambiquée. RangeIterator était long et étrange car on l’utilisait pour décrire une boucle sans pouvoir utiliser une syntaxe de boucle. Les générateurs permettent de répondre à ce problème.

Comment peut-on utiliser les générateurs comme des itérateurs ?

  • En rendant n’importe quel objet itérable. Il suffit d’écrire une fonction génératrice qui parcourt this, et qui utilise yield sur chaque valeur rencontrée. La fonction obtenue peut être définie comme la méthode [Symbol.iterator] de l’objet.

  • En simplifiant les fonctions de construction de tableaux. Si votre fonction retourne un tableau de résultats à chaque appel, comme ceci :

     
    // Divise un tableau à une dimension 'icons'
    // en tableaux de taille fixe 'rowLength'
    function splitIntoRows(icons, rowLength) {
      var rows = [];
      for (var i = 0; i < icons.length; i += rowLength) {
        rows.push(icons.slice(i, i + rowLength));
      }
      return rows;
    }
    

    Les générateurs permettent de faire la même chose de manière plus concise :

    function* splitIntoRows(icons, rowLength) {
      for (var i = 0; i < icons.length; i += rowLength) {
        yield icons.slice(i, i + rowLength);
      }
    }
    

    La seule différence de comportement est le fait qu’au lieu de travailler sur tous les résultats à la fois et de renvoyer un tableau les contenant, ceci renvoie un itérateur et les valeurs de retour sont calculées l’une après l’autre, à la demande.

  • Pour des résultats de grande taille, cela peut également être utile. Il est impossible de construire un tableau infini. Mais vous pouvez renvoyer un générateur qui produit une séquence sans fin, chaque appelant pourra récupérer autant de valeurs que nécessaire à partir de ce générateur.

  • Pour « refactorer » des boucles complexes : vous avez une fonction énorme et moche ? Vous souhaitez la scinder en éléments plus simples ? Les générateurs sont des couteaux que vous pouvez ajouter à votre boîte à outils. Lorsque vous êtes face à une boucle complexe, vous pouvez sortir la partie qui produit les données dans une fonction génératrice indépendante. Puis modifier la boucle en utilisant for(var toto of monNouveauGenerateur(args)).

  • Pour créer des outils afin de manipuler les itérables. ES6 ne fournit pas de bibliothèque complète pour filtrer, mapper et bidouiller les ensembles de données itérables. Cependant, les générateurs sont très bien adaptés à la création de ces outils dont vous pourriez avoir besoin, en écrivant simplement quelques lignes de code. Par exemple, supposons que vous ayez besoin d’un équivalent de Array.prototype.filter() qui fonctionne sur les NodeList du DOM et pas uniquement sur les objets Array. Facile !

    function* filter(test, iterable) {
      for (var item of iterable) {
        if (test(item))
          yield item;
      }
    }
    

Alors, est-ce que les générateurs sont utiles ? Évidemment. Ils représentent une façon étonnament simple d’implémenter des itérateurs personnalisés et les itérateurs représentent le nouveau standard pour les données et les boucles dans ES6.

Mais ce n’est pas la seule chose que peuvent faire les générateurs. Ce n’est peut-être même pas la plus importante chose qu’ils peuvent faire !

Générateurs et code asynchrone

Voici du code JS que j’ai écrit il y a quelque temps :

          };
        })
      });
    });
  });
});

Cela vous rappelle peut-être quelques lignes de votre code. Les API asynchrones demandent généralement une fonction de rappel (callback), ce qui signifie qu’il faut écrire une fonction anonyme supplémentaire chaque fois qu’on fait quelque chose. Ainsi, si vous avez un code qui fait 3 choses, plutôt que 3 lignes de code, vous aurez 3 niveaux d’indentation dans votre code.

Voici un autre fragment de code JS que j’ai écrit :

}).on('close', function () {
  done(undefined, undefined);
}).on('error', function (error) {
  done(error);
});

Les API asynchrones possèdent certaines conventions concernant la gestion des erreurs plutôt que d’utiliser des exceptions. Différentes API possèdent différentes conventions. Dans la plupart des cas, les erreurs sont ignorées par défaut. Dans certains cas, même les cas de terminaisons normales sont ignorés par défaut.

Jusqu’à maintenant, ces problèmes ont été le prix à payer pour utiliser la programmation asynchrone. Nous avons fini par accepter que le code asynchrone n’est pas aussi propre et simple que la version synchrone correspondante.

Les générateurs nous font espérer que ce ne soit plus le cas.

Q.async() est un tentative expérimentale pour utiliser les générateurs avec des promesses afin de produire du code asynchrone qui ressemble à du code synchrone. Par exemple :

// Code synchrone pour créer une fonction qui fait du bruit
function makeNoise() {
  shake();
  rattle();
  roll();
}

// Code asynchrone pour faire du bruit.
// Renvoie un objet Promise qui est résolu
// quand nous avons fini de faire du bruit.
function makeNoise_async() {
  return Q.async(function* () {
    yield shake_async();
    yield rattle_async();
    yield roll_async();
  });
}

La principale différence est que, dans la version asynchrone, il faut ajouter le mot-clé yield à chaque appel d’une fonction asynchrone.

Ajouter un détail comme une condition if ou un bloc try-catch dans la version Q.async se fait exactement de la même façon que dans la version synchrone. Comparé à d’autres façons d’écrire du code asynchrone, cela ressemble beaucoup moins à l’apprentissage d’un nouveau langage.

Si vous êtes arrivé jusqu’ici, vous apprécierez sans doute l’article très détaillé de James Long sur ce sujet.

Les générateurs illustrent donc un nouveau modèle de programmation asynchrone qui semble mieux adapté au cerveau humain. Les travaux autour de ces concepts sont toujours en cours. Entre autres choses, une meilleure syntaxe devrait aider. Pour la version ES7, il existe une proposition pour construire des fonctions asynchrones basées à la fois sur les promesses (promises) et les générateurs, inspirées de fonctionnalités similaires existant en C#.

Quand puis-je commencer à utiliser cette fonctionnalité ?

Côté serveur, vous pouvez utiliser les générateurs ES6 dès aujourd’hui avec io.js (et avec Node en utilisant l’option —harmony)

Côté navigateur, seuls Firefox 27+ et Chrome 39+ supportent les générateurs ES6 pour le moment. Pour les utiliser à travers le web, vous devrez utiliser un compilateur tel que Babel ou Traceur pour traduire votre code ES6 en code ES5, plus largement compatible avec les anciens navigateurs.

Quelques remerciements à qui de droit : les générateurs ont d’abord été implémentés dans JS par Brendan Eich ; sa conception suivait de près les générateurs Python, inspirés par Icon. Ils sont apparus dans Firefox 2.0 dès 2006. Le chemin vers la standardisation a été chaotique et la syntaxe ainsi que le comportement ont évolué au cours de cette période. Les générateurs d’ES6 ont été implémentés dans Firefox et Chrome par la même personne, Andy Wingo, un professionnel du compilateur. Ce travail a été sponsorisé par Bloomberg.

yield;

Il y a encore à dire sur les générateurs. Nous n’avons pas évoqué les méthodes .throw() et return(), les arguments optionnels de .next() ou encore la syntaxe de l’expression yield*. Cependant, je pense que ça suffira pour ce billet, déjà suffisamment déconcertant. Comme le font les générateurs, il vaut mieux faire une pause et reprendre une autre fois.

La semaine prochaine, nous changerons d’allure. Nous avons abordé deux sujets assez conséquents, l’un après l’autre. Ne pourrions-nous pas parler d’une fonctionnalité ES6 qui ne changera pas votre vie ? Quelque chose de simple et de manifestement utile ? Quelque chose qui vous fera sourire ? ES6 possède aussi quelques fonctionnalités de ce genre.

À venir : une fonctionnalité qui va immédiatement trouver sa place dans le code que vous écrivez tous les jours. Rejoignez-nous la semaine prochaine pour une explication détaillée sur les patrons de chaînes (template strings) d’ES6 !

]]>
BlogZiNet : Blog du groupe comm communautaire pour Firefox OS http://blogzinet.free.fr/blog/index.php?post/2015/05/24/Blog-du-groupe-comm-communautaire-pour-Firefox-OS 2015-05-24T14:58:00+00:00 Mozinet <p>Le week-end dernier les contenus du groupe comm pour Firefox&nbsp;OS ont été migrés du <a href="https://blog.mozfr.org/" hreflang="fr" title="Communauté Mozilla francophone">blog communautaire général</a> vers un blog spécialisé de MozFr pour <a href="https://firefoxos.mozfr.org/" hreflang="fr">Firefox OS</a>.</p> <p>Pour le contexte, je reprendrai l&#8217;intro que j&#8217;ai rédigée <a href="http://mozfr.org/pipermail/moz-fr/2015-May/007733.html" hreflang="fr" title="[Moz-fr] De la thématique des blogs + blog groupe comm">en réponse</a> au message de Pascal sur la liste communautaire générale&#160;:</p> <hr /> <!-- <blockquote cite="http://mozfr.org/pipermail/moz-fr/2015-May/007733.html"> --> <p>Depuis le début des préparatifs du groupe comm, nous cherchons à avoir notre propre blog et avons commencé à publier à la demande de Mozilla sur le blog général. Nous nous désespérons depuis octobre 2014 de ne pas avoir notre propre espace de communication cohérent.</p> <p>Des essais avaient été menés pour avoir un blog WordPress mais les dev bénévoles d&#8217;alors n&#8217;avaient pu mener le projet à sa fin. Quand nous avions voulu reprendre le projet – avec des connaissances sur WordPress en interne pour ce <abbr lang="en" title="Content management system">CMS</abbr> qui a les fonctions qu&#8217;il nous faut – il nous avais été pratiquement refusé pour des raisons de sécurité. Un blog Dotclear nous a été finalement proposé et le blog de test cité a été créé. Précisons que nous n&#8217;avons dessus que des droits limités.</p> <p>Julien (qui a désormais les droits d&#8217;administrateur dessus) a accepté de le designer à l&#8217;image de Firefox OS avec les fonctions que nous avons demandées. Il a peu de temps et le blog n&#8217;a pas avancé malgré l&#8217;installation de plugins disponibles pour Dotclear et une recherche parmi les thèmes adaptés. Il est en vacances. Nous serions très heureux d&#8217;avoir une version qui ressemble un peu à quelque chose pour pouvoir mettre en avant notre propre objet de communication cohérent.</p> <!-- </blockquote> --> <hr /> <p>Concernant le refus de WordPress pour des raisons de sécurité, ce n&#8217;était pas un reproche aux admin de MozFr mais un état de fait à prendre en compte et qui rajoutait un obstacle sur notre chemin…</p> <h3>Migration</h3> <p>Nous en sommes venus à la conclusion qu&#8217;il fallait migrer le contenu se trouvant sur le blog général vers notre propre instance du Dotclear de MozFr avec un thème générique (nous avons retenu <em>Ductile</em>, l&#8217;ancien thème par défaut de Dotclear dans une version plus évoluée que celle du blog général, <i lang="en">responsive</i> aussi mais en HTML5)<a href="http://blogzinet.free.fr/blog/index.php?post/2015/05/24/Blog-du-groupe-comm-communautaire-pour-Firefox-OS#note814-1" title="Cliquez pour aller à  la note de fin : Nous avions le choix entre les thèmes…" id="appel814-1" class="anote"><sup>1</sup></a>.</p> <p>Nous avons remplacé le site vitrine en espérant pouvoir créer un thème reprenant le <a href="http://web.archive.org/web/20150314230930/http://firefoxos.mozfr.org/" hreflang="fr" title="Firefox OS — Regardez l’avenir">concept des tuiles</a> lui-même adapté en son temps du <a href="https://www.mozilla.org/fr/" hreflang="en" title="Nous œuvrons à améliorer Internet – Mozilla">site de Mozilla</a>.</p> <p>Pascal a donc mis notre instance Dotclear à l&#8217;adresse https://firefoxos.mozfr.org (<abbr lang="lat" title="Nota bene">N. B.</abbr> le S), migré les articles relatifs à Firefox OS (82 billets, 1 page et 85 commentaires) du blog général au blog Firefox OS et mis en place des redirections permanentes pour les articles déplacés afin de ne pas perdre le référencement et d&#8217;éviter les erreurs 404. Après quelques réglages, le blog semble OK<a href="http://blogzinet.free.fr/blog/index.php?post/2015/05/24/Blog-du-groupe-comm-communautaire-pour-Firefox-OS#note814-2" title="Cliquez pour aller à  la note de fin : Des « @ » semblent avoir disparus d’autres non." id="appel814-2" class="anote"><sup>2</sup></a> avec son thème générique.</p> <p>D&#8217;accord avec Pascal, nous avons laissé le dernier article sur <a href="https://blog.mozfr.org/post/2015/05/Firefox-OS-reussira-en-Afrique-avec-nous" hreflang="fr" title="Firefox OS réussira en Afrique avec nous (9 mai 2015) Communauté Mozilla francophone">Firefox OS en Afrique</a> car il s&#8217;agit d&#8217;un billet qui s&#8217;adresse à la communauté et qu&#8217;il reprend des appels de membres de la communauté.</p> <p>La communauté francophone qui blogue a aussi ses planètes&#160;: <a href="https://planete.mozfr.org/" hreflang="fr" title="Planète Mozilla francophone">planete.mozfr.org</a> et <a href="http://www.mozfr.org/" hreflang="fr" title="Mozilla Francophone">mozfr.org</a><a href="http://blogzinet.free.fr/blog/index.php?post/2015/05/24/Blog-du-groupe-comm-communautaire-pour-Firefox-OS#note814-3" title="Cliquez pour aller à la note de fin : cf. Tutoriel : aussi en HTTPS, ce qui pose un problème pour afficher les iframe (fichiers inclus) des sites eux restés en HTTP." id="appel814-3" class="anote"><sup>3</sup></a>. Le nouveau blog y est.</p> <p><img src="http://blogzinet.free.fr/blog/public/Firefox_OS/raccourcis_top_blog_Firefox_OS_fr.png" alt="raccourcis en haut du blog Firefox OS fr" style="float: right; margin: 0 0 1em 1em;" title="raccourcis en haut du blog Firefox OS fr, mai 2015" />J&#8217;ai fait quelques personnalisations à la marge. Pour les raccourcis en haut de page, j&#8217;ai créé une page <a href="https://firefoxos.mozfr.org/pages/Reseaux-sociaux-de-Firefox-OS-fr" hreflang="fr" title="Réseaux sociaux de Firefox OS fr – Firefox OS">Nos réseaux sociaux</a>, comme nous n&#8217;avons pas encore mis en place de formulaire de contact ni décidé de la forme qu&#8217;il prendra, pour le «&#160;@&#160;», et mis la page <a href="https://firefoxos.mozfr.org/pages/Assistance-de-Firefox-OS" hreflang="fr" title="Assistance de Firefox OS - Firefox OS">Assistance</a> migrée sous le «&#160;?&#160;».</p> <p>Le pied de page comporte désormais une description avec des liens&#160;:</p> <blockquote cite="https://firefoxos.mozfr.org/"> Blog de la <a href="http://www.mozfr.org/" hreflang="fr" title="Mozilla Francophone">communauté francophone</a> pour <a href="https://www.mozilla.org/fr/firefox/os/" hreflang="fr" title="Firefox OS – Exactement ce dont vous avez besoin – Fonctionnalités, applis et plus : un smartphone complet – Mozilla">Firefox OS</a>, le système d&#8217;exploitation mobile de <a href="https://www.mozilla.org/fr/" hreflang="fr" title="Nous œuvrons à améliorer Internet – Mozilla">Mozilla</a>.<br> Apprenez-en davantage sur notre <a href="http://wiki.mozfr.org/FirefoxOS/GroupeCommunication" hreflang="fr" title="Firefox OS : Groupe de communication — Wiki Mozilla francophone">équipe de communication</a>. </blockquote> <h3>Licence</h3> <p><a href="http://wiki.mozfr.org/FirefoxOS/GroupeCommunication/reunions/reunion-comm-2015-05-18#Notre_nouveau_blog" hreflang="fr" title="FirefoxOS/GroupeCommunication/reunions/reunion-comm-2015-05-18 — Mozilla Francophone">Lundi</a>, nous avons confirmé que par défaut (donc sauf mentions explicites contraires), les textes seront en <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.fr" hreflang="fr" title="Creative Commons — Attribution - Partage dans les Mêmes Conditions 4.0 International — CC BY-SA 4.0">CC BY-SA 4.0</a> (<cite lang="en">Creative Commons</cite> – Attribution – partage dans les mêmes conditions 4.0 International). Nous avons écarté la restriction NC qui aurait interdit les réutilisations commerciales. Par contre, les «&#160;graphiques&#160;» (photos, dessins, images d’illustrations, logos, maquette, charte graphique, identité visuelle, vidéos, etc.) seront en «&#160;Tous droits réservés&#160;». La complexité, l&#8217;entremêlement des droits et la non disponibilité de certains éléments du droit d&#8217;auteur sur les images nous font préférer de restreindre la licence libérale aux productions textuelles. Dans les deux cas, une mention spéciale pourra changer la donne pour un contenu précis. Nous faisons attention à mentionner nos sources et les crédits pour les illustrations.</p> <p>La note de copyright renvoyée dans le code des pages est pour l&#8217;heure&#160;: <q cite="https://firefoxos.mozfr.org/">Textes&#160;: CC BY-SA 4.0. Graphismes/images/photos/vidéos/visuels&#160;: Tous droits réservés.</q>. Je n&#8217;ai pas trouvé de mention de pied de page qui me satisfasse.</p> <p>Tout cela sera précisé dans de futures mentions légales et politique de données personnelles dont il faut reprendre l&#8217;étude abandonnée cette automne avec le blog sous WordPress.</p> <h3>Statistiques</h3> <p>Grâce à Anthony qui avait mis en place <a href="http://fr.piwik.org/piwik/" hreflang="fr" title="Qu’est ce que Piwik?">Piwik</a> à l&#8217;automne, nous avons pu configurer le <a href="http://plugins.dotaddict.org/dc2/details/piwik" hreflang="fr" title="Piwik - DotAddict.org : Plugins pour Dotclear">plugin <i lang="la">ad hoc</i> pour Dotclear</a><a href="http://blogzinet.free.fr/blog/index.php?post/2015/05/24/Blog-du-groupe-comm-communautaire-pour-Firefox-OS#note814-4" title="Cliquez pour aller à  la note de fin : cf. Tutoriel : installer Piwik sous dotclear 2 par StandarTux." id="appel814-4" class="anote"><sup>4</sup></a>. Piwik avec <a href="http://www.cnil.fr/fileadmin/documents/approfondir/dossier/internet/Configuration_piwik.pdf" hreflang="fr" title="Guide de mise en conformité de Piwik à destination des éditeurs de sites Web [PDF]">un léger paramétrage</a> permet de <a href="http://www.cnil.fr/vos-obligations/sites-web-cookies-et-autres-traceurs/outils-et-codes-sources/la-mesure-daudience/" hreflang="fr" title="Solutions pour la mesure d'audience - CNIL - Commission nationale de l'informatique et des libertés">s&#8217;exonérer</a> de la demande de consentement préalable au dépôt d&#8217;un cookie imposée par le <a href="http://www.cnil.fr/vos-obligations/sites-web-cookies-et-autres-traceurs/que-dit-la-loi/" hreflang="fr" title="Cookies &amp; traceurs : que dit la loi ? - CNIL - Commission nationale de l'informatique et des libertés"></a>droit européen et sa transposition</a> que contrôle la <abbr title="Commission nationale de l'informatique et des libertés">CNIL</abbr> en France.</p> <h3>Et maintenant&#160;?</h3> <p>On peut dire que le blog est en bêta. Il reste encore pas mal à faire pour avoir un objet de communication en bonnet difforme. Comme signalé nous avons des pages de mentions légales, données personnelles, de crédit, etc. Si vous voulez participer même sans être juriste à l&#8217;élaboration d&#8217;instruments en accord avec les valeurs de Mozilla et de la communauté, rejoignez-nous.</p> <p>Le gros truc va être le thème à l&#8217;image de Firefox OS et pensé pour répondre aux besoins d&#8217;un espace central de communication. Donc, si vous avez des compétences en Dotclear ou en webdesign (comme <a href="http://www.lefigaro.fr/livres/2015/05/20/03005-20150520ARTFIG00360-le-petit-larousse-et-le-petit-robert-les-rivaux-des-mots-nouveaux.php" hreflang="fr" title="Le Petit Larousse et le Petit Robert: les rivaux des mots nouveaux (20 ami 2015) Mohammed Aissaoui et Paul Valmalle">l&#8217;écrit désormais le dictionnaire</a>), nous serions heureux et reconnaissants de bénéficier de votre aide.</p> <p>Nous avons <a href="http://mozfr.org/mailman/listinfo/firefoxos-mozfr" hreflang="fr" title="Page d'infos de FirefoxOS-MozFr">une liste publique</a> sans approbation préalable. Y&#8217;a plein de gens sympa que seront heureux de vous lire, même juste pour un avis ponctuel, et d&#8217;ailleurs, en attendant, vous pouvez faire qu&#8217;observer.</p> <div class="notesfin"> <br /> <hr /> <p><a href="http://blogzinet.free.fr/blog/index.php?post/2015/05/24/Blog-du-groupe-comm-communautaire-pour-Firefox-OS#appel814-1" title="Cliquez pour revenir au premier appel de note : (nous avons retenu Ductile, l’ancien thème par défaut de Dotclear dans une version plus évoluée que celle du blog général, responsive aussi mais en HTML5)" id="note814-1">Note&nbsp;1</a>&#160;: Nous avions le choix entre les thèmes&#160;:</p> <ul> <li><a href="http://themes.dotaddict.org/galerie-dc2/details/international" hreflang="fr" title="International - DotAddict.org : Thèmes pour Dotclear">International</a> que nous avions choisi avec une disposition magazine – <a href="http://themes.dotaddict.org/demo-dc2/" hreflang="fr" title="International">démo</a> – HTML5 mais pas <i lang="en">responsive</i>.</li> <li>Berlin&#160;: thème par défaut de Dotclear 2.7&#160;; <a href="http://themes.dotaddict.org/demo-dc2/" hreflang="fr" title="Berlin">Démo</a>&#160;: en HTML5 qui a l&#8217;air <i lang="en">responsive</i>.</li> <li><a href="http://ductile.dotaddict.org/" hreflang="fr" title="Ductile blog">Ductile</a>&#160;: thème par défaut de Dotclear 2.4. La version installée est en HTML5 et <i lang="en">responsive</i>&#160;; <a href="http://themes.dotaddict.org/demo-dc2/" hreflang="fr" title="Ductile">démo</a>.</li> <li>Ductile-mozfr basé sur une version de Ductile non HTML5 mais <i lang="en">responsive</i>. C&#8217;est le thème du <a href="https://blog.mozfr.org/" hreflang="fr" title="Communauté Mozilla francophone">blog général</a>.</li> </ul> <p>Pour être complet, ces thèmes sont installés mais ne répondent pas à nos exigences minimales&#160;:</p> <ul> <li>Blowup&#160;: ancien thème de Dotclear – <a href="http://themes.dotaddict.org/demo-dc2/" hreflang="fr" title="Blowup">démo</a> – en HTML5 mais pas <i lang="en">responsive</i>.</li> <li>Blue Silence&#160;: l’ancien thème par défaut de Dotclear avant Blowup n&#8217;est ni HTML5 ni <i lang="en">responsive</i>.</li> <li><a href="http://themes.dotaddict.org/galerie-dc2/details/chestnut" hreflang="fr" title="Chestnut - DotAddict.org : Thèmes pour Dotclear">Chestnut</a> que nous avions choisi auparavant en disposition magazine mais qui n&#8217;est ni en HTML5 ni <i lang="en">responsive</i> et que nous avions donc abandonné&#160;; <a href="http://themes.dotaddict.org/demo-dc2/" hreflang="fr" title="Chestnut">démo</a>.</li> <li><a href="http://themes.dotaddict.org/galerie-dc2/details/time-flies" hreflang="fr" title="Time Flies - DotAddict.org : Thèmes pour Dotclear" lang="en">Time Flies</a> – <a href="http://themes.dotaddict.org/demo-dc2/" hreflang="fr" title="Time Flies">démo</a> – HTML5 mais pas <i lang="en">responsive</i>.</li> </ul> <p><a href="http://blogzinet.free.fr/blog/index.php?post/2015/05/24/Blog-du-groupe-comm-communautaire-pour-Firefox-OS#appel814-2" title="Cliquez pour revenir au premier appel de note : le blog semble OK" id="note814-2">Note&nbsp;2</a>&#160;: Des «&#160;@&#160;» semblent avoir disparus d&#8217;autres non.</p> <p><a href="http://blogzinet.free.fr/blog/index.php?post/2015/05/24/Blog-du-groupe-comm-communautaire-pour-Firefox-OS#appel814-3" title="Cliquez pour revenir au premier appel de note : planete.mozfr.org et mozfr.org" id="note814-3">Note&nbsp;3</a>&#160;: aussi en HTTPS, ce qui pose un problème pour afficher les iframe (fichiers inclus) des sites eux restés en HTTP.</p> <p><a href="http://blogzinet.free.fr/blog/index.php?post/2015/05/24/Blog-du-groupe-comm-communautaire-pour-Firefox-OS#appel814-4" title="Cliquez pour revenir au premier appel de note : configurer le plugin ad hoc pour Dotclear" id="note814-4">Note&nbsp;4</a>&#160;: cf. <a href="http://standartux.fr/?p=806" hreflang="fr">Tutoriel&#160;: installer Piwik sous dotclear 2</a> par StandarTux.</p> </div><p>—</p> <p>© 2010-2014 Mozinet - Ce billet a été publié sur <a href="http://blogzinet.free.fr/blog/" hreflang="fr">BlogZiNet</a>.</p> Le week-end dernier les contenus du groupe comm pour Firefox OS ont été migrés du blog communautaire général vers un blog spécialisé de MozFr pour Firefox OS.

Pour le contexte, je reprendrai l’intro que j’ai rédigée en réponse au message de Pascal sur la liste communautaire générale :


Depuis le début des préparatifs du groupe comm, nous cherchons à avoir notre propre blog et avons commencé à publier à la demande de Mozilla sur le blog général. Nous nous désespérons depuis octobre 2014 de ne pas avoir notre propre espace de communication cohérent.

Des essais avaient été menés pour avoir un blog WordPress mais les dev bénévoles d’alors n’avaient pu mener le projet à sa fin. Quand nous avions voulu reprendre le projet – avec des connaissances sur WordPress en interne pour ce CMS qui a les fonctions qu’il nous faut – il nous avais été pratiquement refusé pour des raisons de sécurité. Un blog Dotclear nous a été finalement proposé et le blog de test cité a été créé. Précisons que nous n’avons dessus que des droits limités.

Julien (qui a désormais les droits d’administrateur dessus) a accepté de le designer à l’image de Firefox OS avec les fonctions que nous avons demandées. Il a peu de temps et le blog n’a pas avancé malgré l’installation de plugins disponibles pour Dotclear et une recherche parmi les thèmes adaptés. Il est en vacances. Nous serions très heureux d’avoir une version qui ressemble un peu à quelque chose pour pouvoir mettre en avant notre propre objet de communication cohérent.


Concernant le refus de WordPress pour des raisons de sécurité, ce n’était pas un reproche aux admin de MozFr mais un état de fait à prendre en compte et qui rajoutait un obstacle sur notre chemin…

Migration

Nous en sommes venus à la conclusion qu’il fallait migrer le contenu se trouvant sur le blog général vers notre propre instance du Dotclear de MozFr avec un thème générique (nous avons retenu Ductile, l’ancien thème par défaut de Dotclear dans une version plus évoluée que celle du blog général, responsive aussi mais en HTML5)1.

Nous avons remplacé le site vitrine en espérant pouvoir créer un thème reprenant le concept des tuiles lui-même adapté en son temps du site de Mozilla.

Pascal a donc mis notre instance Dotclear à l’adresse https://firefoxos.mozfr.org (N. B. le S), migré les articles relatifs à Firefox OS (82 billets, 1 page et 85 commentaires) du blog général au blog Firefox OS et mis en place des redirections permanentes pour les articles déplacés afin de ne pas perdre le référencement et d’éviter les erreurs 404. Après quelques réglages, le blog semble OK2 avec son thème générique.

D’accord avec Pascal, nous avons laissé le dernier article sur Firefox OS en Afrique car il s’agit d’un billet qui s’adresse à la communauté et qu’il reprend des appels de membres de la communauté.

La communauté francophone qui blogue a aussi ses planètes : planete.mozfr.org et mozfr.org3. Le nouveau blog y est.

raccourcis en haut du blog Firefox OS frJ’ai fait quelques personnalisations à la marge. Pour les raccourcis en haut de page, j’ai créé une page Nos réseaux sociaux, comme nous n’avons pas encore mis en place de formulaire de contact ni décidé de la forme qu’il prendra, pour le « @ », et mis la page Assistance migrée sous le « ? ».

Le pied de page comporte désormais une description avec des liens :

Blog de la communauté francophone pour Firefox OS, le système d’exploitation mobile de Mozilla.
Apprenez-en davantage sur notre équipe de communication.

Licence

Lundi, nous avons confirmé que par défaut (donc sauf mentions explicites contraires), les textes seront en CC BY-SA 4.0 (Creative Commons – Attribution – partage dans les mêmes conditions 4.0 International). Nous avons écarté la restriction NC qui aurait interdit les réutilisations commerciales. Par contre, les « graphiques » (photos, dessins, images d’illustrations, logos, maquette, charte graphique, identité visuelle, vidéos, etc.) seront en « Tous droits réservés ». La complexité, l’entremêlement des droits et la non disponibilité de certains éléments du droit d’auteur sur les images nous font préférer de restreindre la licence libérale aux productions textuelles. Dans les deux cas, une mention spéciale pourra changer la donne pour un contenu précis. Nous faisons attention à mentionner nos sources et les crédits pour les illustrations.

La note de copyright renvoyée dans le code des pages est pour l’heure : Textes : CC BY-SA 4.0. Graphismes/images/photos/vidéos/visuels : Tous droits réservés.. Je n’ai pas trouvé de mention de pied de page qui me satisfasse.

Tout cela sera précisé dans de futures mentions légales et politique de données personnelles dont il faut reprendre l’étude abandonnée cette automne avec le blog sous WordPress.

Statistiques

Grâce à Anthony qui avait mis en place Piwik à l’automne, nous avons pu configurer le plugin ad hoc pour Dotclear4. Piwik avec un léger paramétrage permet de s’exonérer de la demande de consentement préalable au dépôt d’un cookie imposée par le droit européen et sa transposition que contrôle la CNIL en France.

Et maintenant ?

On peut dire que le blog est en bêta. Il reste encore pas mal à faire pour avoir un objet de communication en bonnet difforme. Comme signalé nous avons des pages de mentions légales, données personnelles, de crédit, etc. Si vous voulez participer même sans être juriste à l’élaboration d’instruments en accord avec les valeurs de Mozilla et de la communauté, rejoignez-nous.

Le gros truc va être le thème à l’image de Firefox OS et pensé pour répondre aux besoins d’un espace central de communication. Donc, si vous avez des compétences en Dotclear ou en webdesign (comme l’écrit désormais le dictionnaire), nous serions heureux et reconnaissants de bénéficier de votre aide.

Nous avons une liste publique sans approbation préalable. Y’a plein de gens sympa que seront heureux de vous lire, même juste pour un avis ponctuel, et d’ailleurs, en attendant, vous pouvez faire qu’observer.



Note 1 : Nous avions le choix entre les thèmes :

  • International que nous avions choisi avec une disposition magazine – démo – HTML5 mais pas responsive.
  • Berlin : thème par défaut de Dotclear 2.7 ; Démo : en HTML5 qui a l’air responsive.
  • Ductile : thème par défaut de Dotclear 2.4. La version installée est en HTML5 et responsive ; démo.
  • Ductile-mozfr basé sur une version de Ductile non HTML5 mais responsive. C’est le thème du blog général.

Pour être complet, ces thèmes sont installés mais ne répondent pas à nos exigences minimales :

  • Blowup : ancien thème de Dotclear – démo – en HTML5 mais pas responsive.
  • Blue Silence : l’ancien thème par défaut de Dotclear avant Blowup n’est ni HTML5 ni responsive.
  • Chestnut que nous avions choisi auparavant en disposition magazine mais qui n’est ni en HTML5 ni responsive et que nous avions donc abandonné ; démo.
  • Time Fliesdémo – HTML5 mais pas responsive.

Note 2 : Des « @ » semblent avoir disparus d’autres non.

Note 3 : aussi en HTTPS, ce qui pose un problème pour afficher les iframe (fichiers inclus) des sites eux restés en HTTP.

Note 4 : cf. Tutoriel : installer Piwik sous dotclear 2 par StandarTux.

© 2010-2014 Mozinet - Ce billet a été publié sur BlogZiNet.

]]>
Blog technique de MozFR : ES6 en détails : les itérateurs et la boucle for-of https://tech.mozfr.org/post/2015/05/20/ES6-en-details-%3A-les-iterateurs-et-la-boucle-for-of 2015-05-23T20:15:00+00:00 sphinx <p><em><a href="https://tech.mozfr.org/post/2015/05/19/ES6-en-details-%3A-Une-introduction" hreflang="fr" title="ES en détails : une introduction">Suite de la traduction</a>, qui continue la série d&#8217;articles de <a href="https://twitter.com/jorendorff" title="@jorendorff">Jason Orendorff</a>. L&#8217;article original se trouve <a href="https://hacks.mozilla.org/2015/04/es6-in-depth-iterators-and-the-for-of-loop/">ici</a>.</em></p> <p><em>Merci aux traducteurs et relecteurs :) Marine, Mentalo, Benjamin, Amarok, Lucas, Ilphrin et Goofy&#160;!</em></p> <hr /> <p><em><a href="https://hacks.mozilla.org/category/es6-in-depth/" hreflang="en" title="ES6 in depth">ES6&#160;en détails</a> est une série d’articles décrivant les nouvelles fonctionnalités ajoutées au langage de programmation JavaScript avec la sixième édition du standard ECMAScript (ES6&#160;en abrégé).</em></p> <p>Comment itérer sur les éléments d’un tableau&#160;? Lorsque JavaScript est apparu, il y a vingt ans de ça, on aurait fait ainsi&#160;:</p> <pre> for (var index = 0; index &lt; monTableau.length; index++) { console.log(monTableau[index]); } </pre> <p>Depuis ES5, on peut utiliser la méthode native <code>forEach</code>&#160;:</p> <pre> monTableau.forEach(function (value) { console.log(value); }); </pre> <p>C’est un petit peu plus court, mais il y a un léger inconvénient&#160;: il n’est pas possible de sortir de cette boucle avec une instruction <code>break</code> ou de faire retourner la fonction englobante avec une instruction <code>return</code>.</p> <p>Ce serait effectivement agréable s’il y avait une syntaxe de boucle <code>for</code> itérant directement sur les éléments du tableau.</p> <p>Quid d’une boucle <code>for-in</code>&#160;?</p> <pre> for (var index in monTableau) { // ne faites pas ceci console.log(monTableau[index]); }</pre> <p>C’est une mauvaise idée pour plusieurs raisons&#160;:</p> <ol> <li>Les valeurs assignées pour l’index dans ce code sont les chaînes de caractères &#34;0&#34;, &#34;1&#34;, &#34;2&#34;, et ainsi de suite&#160;: ce ne sont pas réellement des nombres. Étant donné qu’on ne souhaite sûrement pas manipuler des chaînes de façon arithmétique (&#34;2&#34; + 1 == &#34;21&#34;), c’est, a minima, peu pratique&#160;;</li> <li>Le corps de la boucle ne va pas seulement s’exécuter pour chaque élément du tableau, mais également pour toutes les propriétés non-natives que l’on pourrait avoir ajoutées. Par exemple, si votre tableau possède une propriété énumérable <code>monTableau.nom</code>, alors cette boucle va s’exécuter une fois de plus, avec <code>index == "nom"</code>. Même les propriétés présentes sur la chaîne de prototypes du tableau peuvent être visitées&#160;;</li> <li>Le plus étonnant dans tout ça est que, dans certaines circonstances, ce code va boucler sur les éléments du tableau dans un ordre arbitraire.</li> </ol> <p>Pour faire court, <code>for-in</code> a été pensé pour travailler avec de bons vieux objets (type <code>Object</code>) dont les clés sont des chaînes de caractères. Pour les tableaux (type <code>Array</code>), ce n’est pas génial.</p> <h2>La puissante boucle <code>for-of</code></h2> <p>Vous souvenez-vous de la semaine dernière, lorsque j’ai promis qu’ES6 ne casserait pas le code JavaScript que vous avez déjà écrit&#160;? En fait, il existe des millions de sites Web qui dépendent du comportement de <code>for-in</code> — oui, même de son comportement sur les tableaux. Il n’a donc jamais été question de «&#160;réparer&#160;» <code>for-in</code> afin qu’elle soit plus utile pour manipuler avec des tableaux. Le seul moyen pour ES6 d’améliorer les choses était d’ajouter une nouvelle forme de syntaxe de boucle.</p> <p>La voilà&#160;:</p> <pre> for (var valeur of monTableau) { console.log(valeur); } </pre> <p>Hmm. Après toute cette publicité, ça ne semble pas si impressionnant, n’est-ce pas&#160;? Pourtant, nous allons voir que <code>for-of</code> a plus d’un tour dans son sac. Pour l’instant, notez simplement que&#160;:</p> <ol> <li>C’est la syntaxe la plus concise et la plus directe pour boucler sur les éléments d’un tableau&#160;;</li> <li>Celle-ci permet d’éviter les pièges de <code>for-in</code>&#160;;</li> <li>Contrairement à <code>forEach()</code>, elle est compatible avec les instructions <code>break</code>, <code>continue</code> et <code>return</code>.</li> </ol> <p>La boucle <code>for-<strong>in</strong></code> est faite pour boucler sur les propriétés d’un objet.</p> <p>La boucle <code>for-<strong>of</strong></code> est faite pour boucler sur des données — comme les valeurs d’un tableau.</p> <p>Mais ce n’est pas tout.</p> <h2><code>for-of</code> fonctionne également avec les autres collections</h2> <p><code>for-of</code> n’est pas restreint aux tableaux. Cela fonctionne également avec la plupart des objets qui agissent comme des tableaux, telles que les <code>NodeList</code> du DOM. Cela fonctionne également sur les chaînes de caractères, en considérant que la chaîne est une séquence de caractères Unicode&#160;:</p> <pre> for (var chr of "♂ ♀"){ alert(chr); } </pre> <p>Cela fonctionne également avec les objets <code>Map</code> et <code>Set</code>.</p> <p>Oh, désolé si vous n’avez jamais entendu parler des objets <code>Map</code> et <code>Set</code>, ceux-ci sont des nouveautés apportées par ES6. Nous en parlerons plus tard dans un article dédié. Si vous avez déjà utilisé des <code>Maps</code> (dictionnaires) et <code>Sets</code> (ensembles) dans d’autres langages, vous ne serez pas très surpris.</p> <p>Par exemple, un objet <code>Set</code> peut être utilisé pour éliminer des doublons&#160;:</p> <pre> // créons un ensemble à partir d'un tableau de mots var motsUniques = new Set(mots); </pre> <p>Une fois que l’on a un ensemble (<code>Set</code>), que se passe-t-il si on veut itérer sur son contenu&#160;? Facile&#160;:</p> <pre> for (var mot of motsUniques) { console.log(mot); } </pre> <p>Une <code>Map</code> est légèrement différente&#160;: les données que celle-ci contient sont des paires de clés-valeurs, il faudra donc utiliser l’affectation «&#160;destructurée&#160;» (<em>destructuring</em>) pour séparer la clé et la valeur en deux variables distinctes&#160;:</p> <pre> for (var [clé, valeur] of annuaireMap) { console.log("Le numéro de téléphone de "+clé +" est " + valeur); } </pre> <p>La décomposition est une autre fonctionnalité, également apparue avec ES6 qui fera un sujet idéal pour un prochain article que j’écrirai.</p> <p>Maintenant, vous avez une idée du tableau&#160;: JS possède déjà un certain nombre de structures de données pour des collections, et il y en a encore plus à venir. <code>for-of</code> a été pensé pour être l’instruction de boucle ultime à utiliser avec toutes ces structures.</p> <p><code>for-of</code> ne fonctionne pas avec des objets tout simples, mais si vous voulez itérer sur les propriétés d’un objet, vous pouvez soit utiliser <code>for-in</code> (c’est sa raison d’être), soit la fonction native <code>Object.keys()</code>&#160;:</p> <pre> // affiche toutes les propriétés propres énumérables // d'un objet dans la console for (var clé of Object.keys(monObjet)) { console.log(clé + ": " + monObjet[clé]); } </pre> <h2>Sous le capot</h2> <blockquote><p>«&#160;Les bons artistes copient, les très bons artistes volent&#160;» — Pablo Picasso</p></blockquote> <p>Un thème récurrent d’ES6 est le fait que les nouvelles fonctionnalités ajoutées au langage ne viennent pas de nulle part. La plupart ont été essayées et se sont avérées utiles dans d’autres langages.</p> <p>La boucle <code>for-of</code>, par exemple, rappelle des instructions de boucle similaires en C++, Java, C#, et Python. Comme celles-ci, elle fonctionne avec des structures de données différentes, fournies par le langage et sa bibliothèque standard. Mais c’est également un ajout au langage.</p> <p>De même qu’avec les instructions <code>for</code> ou <code>forEach</code> dans ces autres langages, <strong><code>for-of</code> fonctionne entièrement à l’aide d’appels de fonctions</strong>. Ce que les tableaux (objets <code>Array</code>), dictionnaires (objets <code>Map</code>), ensembles (objets <code>Set</code>) et les autres objets ont en commun est le fait qu’ils ont chacun une méthode <code>iterator</code> (NdT&#160;: pour «&#160;itérateur&#160;»).</p> <p>Il existe une autre catégorie d’objets qui peuvent aussi avoir une méthode <code>iterator</code>&#160;: n’importe quel objet.</p> <p>De la même manière que lorsqu’on ajoute une méthode <code>monObjet.toString()</code> à n’importe quel objet, JS sait comment convertir cet objet en une chaîne de caractères, on peut ajouter la méthode <code>monObjet<a href="https://tech.mozfr.org/post/2015/05/20/Symbol.iterator" title="Symbol.iterator">Symbol.iterator</a>()</code> à n’importe quel objet, et, soudainement, JS sait comment itérer sur cet objet.</p> <p>Par exemple, imaginons que vous utilisiez jQuery, et que, bien que vous soyez très fan de <code>.each()</code>, vous aimeriez que les objets jQuery fonctionnent également avec <code>for-of</code>. Voici la manière de procéder&#160;:</p> <pre> // Comme les objets jQuery se comportent comme des tableaux, // donnons-leur la même méthode iterator que celle de l'objet Array jQuery.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator]; </pre> <p>OK, je sais ce que vous êtes en train de vous dire. Cette syntaxe <code><a href="https://tech.mozfr.org/post/2015/05/20/Symbol.iterator" title="Symbol.iterator">Symbol.iterator</a></code> est bizarre. Que se passe-t-il ici&#160;? C’est en lien avec le nom de la méthode. Le comité de standardisation aurait pu appeler cette méthode <code>.iterator()</code>, or dans ce cas, votre code aurait déjà pu comporter des objets ayant une méthode <code>.iterator()</code>, et cela aurait pu être une source de confusion. C’est pourquoi le standard préfère utiliser un symbole plutôt qu’une chaine de caractères comme nom de la méthode.</p> <p>Les symboles sont apparus avec ES6, et nous vous expliquerons tout sur eux — vous l’avez deviné — dans un prochain article de blog. Pour l’instant, tout ce que vous avez besoin de savoir, c’est que le standard peut définir un symbole entièrement nouveau, comme <code>Symbol.iterator</code>, et qu’il est garanti que cela ne créera pas de conflit avec du code existant. Le compromis que cela implique est une syntaxe un peu étrange. Mais c’est un petit prix à payer pour cette nouvelle fonctionnalité versatile et la garantie d’une excellente rétro-compatibilité.</p> <p>Un objet qui possède une méthode <code><a href="https://tech.mozfr.org/post/2015/05/20/Symbol.iterator" title="Symbol.iterator">Symbol.iterator</a>()</code> est appelé un itérable. Dans les semaines qui viennent, nous verrons que le concept d’objets itérables est utilisé à travers tout le langage, pas seulement avec <code>for-of</code> mais également avec les constructeurs des objets <code>Map</code> et <code>Set</code>, avec les affectations déstructurées et avec le nouvel opérateur «&#160;<em>spread</em>&#160;» (NdT&#160;: ou «&#160;opérateur de décomposition&#160;»).</p> <h2>Les objets itérateurs</h2> <p>Il est probable que vous n’ayez jamais à implémenter un itérateur de A à Z. On verra pourquoi la semaine prochaine. Cependant, pour être tout à fait complet, regardons de près à quoi ressemble un objet itérable (si vous sautez cette section, vous ne manquerez que quelques détails techniques).</p> <p>Une boucle <code>for-of</code> commence par appeler la méthode <code><a href="https://tech.mozfr.org/post/2015/05/20/Symbol.iterator" title="Symbol.iterator">Symbol.iterator</a>()</code> de la collection utilisée. Ceci renvoie un nouvel itérateur qui peut être n’importe quel objet possédant une méthode <code>.next()</code>&#160;; la boucle <code>for-of</code> appellera cette méthode de façon répétitive, une fois pour chaque itération. Par exemple, voici l’itérateur le plus simple auquel je peux penser&#160;:</p> <pre> var itérateurPleinDeZéros = { [Symbol.iterator]: function () { return this; }, next: function () { return {done: false, value: 0}; } }; </pre> <p>À chaque appel de la méthode <code>.next()</code>, le même résultat sera renvoyé et communiquera les informations suivantes à la boucle <code>for-of</code>&#160;:</p> <ol> <li>nous n’avons pas encore terminé les itérations&#160;;</li> <li>la prochaine valeur est 0.</li> </ol> <p>Cela signifie que la boucle <code>for (valeur of itérateurPleinDeZéros) {}</code> sera une boucle infinie. Évidemment, un itérateur utilisé dans du code ne sera pas aussi trivial.</p> <p>Ce concept d’itérateur, avec les propriétés <code>.done</code> et <code>.value</code>, est légèrement différente de celui utilisé dans les autres langages. En Java, les itérateurs possèdent des méthodes séparées <code>.hasNext()</code> et <code>.next()</code>. En Python, ils possèdent une seule méthode <code>.next()</code> qui appelle <code>StopIteration</code> lorsqu’il n’y a plus de valeur. Fondamentalement, ces trois conceptions renvoient les mêmes informations.</p> <p>Un itérateur peut également implémenter les méthodes optionnelles <code>.return()</code> et <code>.throw(exc)</code>. La boucle <code>for-of</code> appelle la méthode <code>.return()</code> si la boucle est interrompue de façon prématurée, à cause d’une exception, d’une instruction <code>break</code> ou <code>return</code>.</p> <p>Un itérateur peut également implémenter la méthode <code>return()</code> s’il est nécessaire de procéder à un nettoyage ou de libérer des ressources utilisées. La plupart des objets itérateurs n’auront pas à implémenter cette méthode. La méthode <code>throw(exc)</code> est un cas encore plus spécifique&#160;: les boucles <code>for-of</code> ne les appellent jamais, on en parlera la semaine prochaine.</p> <p>Maintenant que nous connaissons tous les détails, nous pouvons nous intéresser à une boucle <code>for-of</code> simple et la ré-écrire avec les appels des méthodes sous-jacentes.</p> <p>Commençons avec la boucle <code>for-of</code>&#160;:</p> <pre> for (VAR of ITERABLE) { INSTRUCTIONS } </pre> <p>Voici un équivalent, un peu brut, utilisant les méthodes sous-jacentes ainsi que quelques variables temporaires&#160;:</p> <pre> var $iterator = ITERABLE[Symbol.iterator](); var $result = $iterator.next(); while (!result.done) { VAR = result.value; INSTRUCTIONS $result = $iterator.next(); } </pre> <p>Ce code n’illustre pas l’utilisation de la méthode <code>.return()</code>. On pourrait l’ajouter mais je pense que cela ajouterait plus de confusion. Les boucles <code>for-of</code> sont simples à utiliser, malgré cela, il se passe beaucoup de choses en arrière-plan.</p> <h2>Quand puis-je commencer à utiliser cette fonctionnalité&#160;?</h2> <p>Les boucles <code>for-of</code> sont supportées par les versions actuelles de Firefox. Elles sont supportés dans Chrome sous réserve d’activer l’option «&#160;Activer la fonctionnalité expérimentale JavaScript&#160;» accessible via l’URL <code>chrome://flags</code>. Cela fonctionne également dans le prochain navigateur Edge (nom de code «&#160;Spartan&#160;») de Microsoft. En revanche, cette fonctionnalité n’est pas disponible dans les différentes versions d’Internet Explorer. Si vous souhaitez utiliser cette nouvelle syntaxe et que devez prendre en compte IE et Safari, vous pouvez utiliser un compilateur tel que <a href="http://babeljs.io/" title="BabelJS">Babel</a> ou <a href="https://github.com/google/traceur-compiler#what-is-traceur" hreflang="en" title="Traceur - GitHub">Traceur</a> de Google pour traduire votre code ES6&#160;en code ES5, plus largement compatible avec les anciens navigateurs.</p> <p>Côté serveur, pas besoin d’installer un compilateur - vous pouvez utiliser les boucles <code>for-of</code> dès aujourd’hui avec io.js (et avec Node en utilisant l’option <code>--harmony</code>)</p> <p>(Mise à jour&#160;: j’ai oublié de mentionner que <code>for-of</code> est désactivé par défaut dans Chrome. Merci à Oleg d’avoir signalé cet oubli dans les les commentaires.) (NdT&#160;: voir <a href="https://hacks.mozilla.org/2015/04/es6-in-depth-iterators-and-the-for-of-loop/comment-page-1/#comment-17608" hreflang="en" title="Commentaire Oleg">ce commentaire</a>).</p> <h2><code>{done: true}</code></h2> <p>Whaou&#160;!</p> <p>Bon, c’est tout pour aujourd’hui, mais nous n’en n’avons toujours pas fini avec la boucle <code>for-of</code>.</p> <p>Il y a encore une nouvelle sorte d’objet apparue avec ES6 et qui fonctionne très bien avec les boucles <code>for-of</code>. Je n’en ai pas parlé car c’est le sujet de l’article de la semaine prochaine. Je pense que cette nouvelle fonctionnalité est la plus magique d’ES6. Si vous ne l’avez jamais utilisé dans des langages comme Python et C#, vous serez vraisemblablement déstabilisé au début. Ce sera la manière la plus simple d’écrire un itérateur, un atout pour le <em>refactoring</em> et cela pourrait changer la façon d’écrire du code asynchrone tant au niveau du navigateur que du serveur.</p> <p>Rejoignez-nous donc la semaine prochaine pour une étude approfondie des générateurs dans ES6.</p> <style> pre { white-space: pre;} </style> Suite de la traduction, qui continue la série d’articles de Jason Orendorff. L’article original se trouve ici.

Merci aux traducteurs et relecteurs :) Marine, Mentalo, Benjamin, Amarok, Lucas, Ilphrin et Goofy !


ES6 en détails est une série d’articles décrivant les nouvelles fonctionnalités ajoutées au langage de programmation JavaScript avec la sixième édition du standard ECMAScript (ES6 en abrégé).

Comment itérer sur les éléments d’un tableau ? Lorsque JavaScript est apparu, il y a vingt ans de ça, on aurait fait ainsi :

for (var index = 0; index < monTableau.length; index++) {
  console.log(monTableau[index]);
}

Depuis ES5, on peut utiliser la méthode native forEach :

monTableau.forEach(function (value) {
  console.log(value);
});

C’est un petit peu plus court, mais il y a un léger inconvénient : il n’est pas possible de sortir de cette boucle avec une instruction break ou de faire retourner la fonction englobante avec une instruction return.

Ce serait effectivement agréable s’il y avait une syntaxe de boucle for itérant directement sur les éléments du tableau.

Quid d’une boucle for-in ?

for (var index in monTableau) {    
  // ne faites pas ceci
  console.log(monTableau[index]);
}

C’est une mauvaise idée pour plusieurs raisons :

  1. Les valeurs assignées pour l’index dans ce code sont les chaînes de caractères "0", "1", "2", et ainsi de suite : ce ne sont pas réellement des nombres. Étant donné qu’on ne souhaite sûrement pas manipuler des chaînes de façon arithmétique ("2" + 1 == "21"), c’est, a minima, peu pratique ;
  2. Le corps de la boucle ne va pas seulement s’exécuter pour chaque élément du tableau, mais également pour toutes les propriétés non-natives que l’on pourrait avoir ajoutées. Par exemple, si votre tableau possède une propriété énumérable monTableau.nom, alors cette boucle va s’exécuter une fois de plus, avec index == "nom". Même les propriétés présentes sur la chaîne de prototypes du tableau peuvent être visitées ;
  3. Le plus étonnant dans tout ça est que, dans certaines circonstances, ce code va boucler sur les éléments du tableau dans un ordre arbitraire.

Pour faire court, for-in a été pensé pour travailler avec de bons vieux objets (type Object) dont les clés sont des chaînes de caractères. Pour les tableaux (type Array), ce n’est pas génial.

La puissante boucle for-of

Vous souvenez-vous de la semaine dernière, lorsque j’ai promis qu’ES6 ne casserait pas le code JavaScript que vous avez déjà écrit ? En fait, il existe des millions de sites Web qui dépendent du comportement de for-in — oui, même de son comportement sur les tableaux. Il n’a donc jamais été question de « réparer » for-in afin qu’elle soit plus utile pour manipuler avec des tableaux. Le seul moyen pour ES6 d’améliorer les choses était d’ajouter une nouvelle forme de syntaxe de boucle.

La voilà :

for (var valeur of monTableau) {
  console.log(valeur);
}

Hmm. Après toute cette publicité, ça ne semble pas si impressionnant, n’est-ce pas ? Pourtant, nous allons voir que for-of a plus d’un tour dans son sac. Pour l’instant, notez simplement que :

  1. C’est la syntaxe la plus concise et la plus directe pour boucler sur les éléments d’un tableau ;
  2. Celle-ci permet d’éviter les pièges de for-in ;
  3. Contrairement à forEach(), elle est compatible avec les instructions break, continue et return.

La boucle for-in est faite pour boucler sur les propriétés d’un objet.

La boucle for-of est faite pour boucler sur des données — comme les valeurs d’un tableau.

Mais ce n’est pas tout.

for-of fonctionne également avec les autres collections

for-of n’est pas restreint aux tableaux. Cela fonctionne également avec la plupart des objets qui agissent comme des tableaux, telles que les NodeList du DOM. Cela fonctionne également sur les chaînes de caractères, en considérant que la chaîne est une séquence de caractères Unicode :

for (var chr of "♂ ♀"){
  alert(chr);
}

Cela fonctionne également avec les objets Map et Set.

Oh, désolé si vous n’avez jamais entendu parler des objets Map et Set, ceux-ci sont des nouveautés apportées par ES6. Nous en parlerons plus tard dans un article dédié. Si vous avez déjà utilisé des Maps (dictionnaires) et Sets (ensembles) dans d’autres langages, vous ne serez pas très surpris.

Par exemple, un objet Set peut être utilisé pour éliminer des doublons :

// créons un ensemble à partir d'un tableau de mots
var motsUniques = new Set(mots);

Une fois que l’on a un ensemble (Set), que se passe-t-il si on veut itérer sur son contenu ? Facile :

for (var mot of motsUniques) {
  console.log(mot);
}

Une Map est légèrement différente : les données que celle-ci contient sont des paires de clés-valeurs, il faudra donc utiliser l’affectation « destructurée » (destructuring) pour séparer la clé et la valeur en deux variables distinctes :

for (var [clé, valeur] of annuaireMap) {
  console.log("Le numéro de téléphone de "+clé +" est " + valeur);
}

La décomposition est une autre fonctionnalité, également apparue avec ES6 qui fera un sujet idéal pour un prochain article que j’écrirai.

Maintenant, vous avez une idée du tableau : JS possède déjà un certain nombre de structures de données pour des collections, et il y en a encore plus à venir. for-of a été pensé pour être l’instruction de boucle ultime à utiliser avec toutes ces structures.

for-of ne fonctionne pas avec des objets tout simples, mais si vous voulez itérer sur les propriétés d’un objet, vous pouvez soit utiliser for-in (c’est sa raison d’être), soit la fonction native Object.keys() :

// affiche toutes les propriétés propres énumérables 
// d'un objet dans la console
for (var clé of Object.keys(monObjet)) {
  console.log(clé + ": " + monObjet[clé]);
}

Sous le capot

« Les bons artistes copient, les très bons artistes volent » — Pablo Picasso

Un thème récurrent d’ES6 est le fait que les nouvelles fonctionnalités ajoutées au langage ne viennent pas de nulle part. La plupart ont été essayées et se sont avérées utiles dans d’autres langages.

La boucle for-of, par exemple, rappelle des instructions de boucle similaires en C++, Java, C#, et Python. Comme celles-ci, elle fonctionne avec des structures de données différentes, fournies par le langage et sa bibliothèque standard. Mais c’est également un ajout au langage.

De même qu’avec les instructions for ou forEach dans ces autres langages, for-of fonctionne entièrement à l’aide d’appels de fonctions. Ce que les tableaux (objets Array), dictionnaires (objets Map), ensembles (objets Set) et les autres objets ont en commun est le fait qu’ils ont chacun une méthode iterator (NdT : pour « itérateur »).

Il existe une autre catégorie d’objets qui peuvent aussi avoir une méthode iterator : n’importe quel objet.

De la même manière que lorsqu’on ajoute une méthode monObjet.toString() à n’importe quel objet, JS sait comment convertir cet objet en une chaîne de caractères, on peut ajouter la méthode monObjetSymbol.iterator() à n’importe quel objet, et, soudainement, JS sait comment itérer sur cet objet.

Par exemple, imaginons que vous utilisiez jQuery, et que, bien que vous soyez très fan de .each(), vous aimeriez que les objets jQuery fonctionnent également avec for-of. Voici la manière de procéder :

// Comme les objets jQuery se comportent comme des tableaux,
// donnons-leur la même méthode iterator que celle de l'objet Array
jQuery.prototype[Symbol.iterator] =
Array.prototype[Symbol.iterator];

OK, je sais ce que vous êtes en train de vous dire. Cette syntaxe Symbol.iterator est bizarre. Que se passe-t-il ici ? C’est en lien avec le nom de la méthode. Le comité de standardisation aurait pu appeler cette méthode .iterator(), or dans ce cas, votre code aurait déjà pu comporter des objets ayant une méthode .iterator(), et cela aurait pu être une source de confusion. C’est pourquoi le standard préfère utiliser un symbole plutôt qu’une chaine de caractères comme nom de la méthode.

Les symboles sont apparus avec ES6, et nous vous expliquerons tout sur eux — vous l’avez deviné — dans un prochain article de blog. Pour l’instant, tout ce que vous avez besoin de savoir, c’est que le standard peut définir un symbole entièrement nouveau, comme Symbol.iterator, et qu’il est garanti que cela ne créera pas de conflit avec du code existant. Le compromis que cela implique est une syntaxe un peu étrange. Mais c’est un petit prix à payer pour cette nouvelle fonctionnalité versatile et la garantie d’une excellente rétro-compatibilité.

Un objet qui possède une méthode Symbol.iterator() est appelé un itérable. Dans les semaines qui viennent, nous verrons que le concept d’objets itérables est utilisé à travers tout le langage, pas seulement avec for-of mais également avec les constructeurs des objets Map et Set, avec les affectations déstructurées et avec le nouvel opérateur « spread » (NdT : ou « opérateur de décomposition »).

Les objets itérateurs

Il est probable que vous n’ayez jamais à implémenter un itérateur de A à Z. On verra pourquoi la semaine prochaine. Cependant, pour être tout à fait complet, regardons de près à quoi ressemble un objet itérable (si vous sautez cette section, vous ne manquerez que quelques détails techniques).

Une boucle for-of commence par appeler la méthode Symbol.iterator() de la collection utilisée. Ceci renvoie un nouvel itérateur qui peut être n’importe quel objet possédant une méthode .next() ; la boucle for-of appellera cette méthode de façon répétitive, une fois pour chaque itération. Par exemple, voici l’itérateur le plus simple auquel je peux penser :

var itérateurPleinDeZéros = {
   [Symbol.iterator]: function () {
    return this;
  },
  next: function () {
    return {done: false, value: 0};
  }
};

À chaque appel de la méthode .next(), le même résultat sera renvoyé et communiquera les informations suivantes à la boucle for-of :

  1. nous n’avons pas encore terminé les itérations ;
  2. la prochaine valeur est 0.

Cela signifie que la boucle for (valeur of itérateurPleinDeZéros) {} sera une boucle infinie. Évidemment, un itérateur utilisé dans du code ne sera pas aussi trivial.

Ce concept d’itérateur, avec les propriétés .done et .value, est légèrement différente de celui utilisé dans les autres langages. En Java, les itérateurs possèdent des méthodes séparées .hasNext() et .next(). En Python, ils possèdent une seule méthode .next() qui appelle StopIteration lorsqu’il n’y a plus de valeur. Fondamentalement, ces trois conceptions renvoient les mêmes informations.

Un itérateur peut également implémenter les méthodes optionnelles .return() et .throw(exc). La boucle for-of appelle la méthode .return() si la boucle est interrompue de façon prématurée, à cause d’une exception, d’une instruction break ou return.

Un itérateur peut également implémenter la méthode return() s’il est nécessaire de procéder à un nettoyage ou de libérer des ressources utilisées. La plupart des objets itérateurs n’auront pas à implémenter cette méthode. La méthode throw(exc) est un cas encore plus spécifique : les boucles for-of ne les appellent jamais, on en parlera la semaine prochaine.

Maintenant que nous connaissons tous les détails, nous pouvons nous intéresser à une boucle for-of simple et la ré-écrire avec les appels des méthodes sous-jacentes.

Commençons avec la boucle for-of :

for (VAR of ITERABLE) {
  INSTRUCTIONS
}

Voici un équivalent, un peu brut, utilisant les méthodes sous-jacentes ainsi que quelques variables temporaires :

var $iterator = ITERABLE[Symbol.iterator]();
var $result = $iterator.next();
while (!result.done) {
  VAR = result.value;
  INSTRUCTIONS
  $result = $iterator.next();
}

Ce code n’illustre pas l’utilisation de la méthode .return(). On pourrait l’ajouter mais je pense que cela ajouterait plus de confusion. Les boucles for-of sont simples à utiliser, malgré cela, il se passe beaucoup de choses en arrière-plan.

Quand puis-je commencer à utiliser cette fonctionnalité ?

Les boucles for-of sont supportées par les versions actuelles de Firefox. Elles sont supportés dans Chrome sous réserve d’activer l’option « Activer la fonctionnalité expérimentale JavaScript » accessible via l’URL chrome://flags. Cela fonctionne également dans le prochain navigateur Edge (nom de code « Spartan ») de Microsoft. En revanche, cette fonctionnalité n’est pas disponible dans les différentes versions d’Internet Explorer. Si vous souhaitez utiliser cette nouvelle syntaxe et que devez prendre en compte IE et Safari, vous pouvez utiliser un compilateur tel que Babel ou Traceur de Google pour traduire votre code ES6 en code ES5, plus largement compatible avec les anciens navigateurs.

Côté serveur, pas besoin d’installer un compilateur - vous pouvez utiliser les boucles for-of dès aujourd’hui avec io.js (et avec Node en utilisant l’option --harmony)

(Mise à jour : j’ai oublié de mentionner que for-of est désactivé par défaut dans Chrome. Merci à Oleg d’avoir signalé cet oubli dans les les commentaires.) (NdT : voir ce commentaire).

{done: true}

Whaou !

Bon, c’est tout pour aujourd’hui, mais nous n’en n’avons toujours pas fini avec la boucle for-of.

Il y a encore une nouvelle sorte d’objet apparue avec ES6 et qui fonctionne très bien avec les boucles for-of. Je n’en ai pas parlé car c’est le sujet de l’article de la semaine prochaine. Je pense que cette nouvelle fonctionnalité est la plus magique d’ES6. Si vous ne l’avez jamais utilisé dans des langages comme Python et C#, vous serez vraisemblablement déstabilisé au début. Ce sera la manière la plus simple d’écrire un itérateur, un atout pour le refactoring et cela pourrait changer la façon d’écrire du code asynchrone tant au niveau du navigateur que du serveur.

Rejoignez-nous donc la semaine prochaine pour une étude approfondie des générateurs dans ES6.

]]>
Le Weblog de Frederic Bezies : Ah, les articles « putaclic » dont Mozilla Firefox est la victime idéale en ce mois de mai 2015. http://frederic.bezies.free.fr/blog/?p=12890 2015-05-22T10:18:16+00:00 Frederic Bezies <p>Il est de bon ton sur certains webzines de faire des articles &laquo;&nbsp;putaclic&nbsp;&raquo; sur Mozilla Firefox. En ce mois de mai 2015, c&rsquo;est la <a href="http://fr.wiktionary.org/wiki/f%C3%AAte_du_slip">fête du slip</a>&#8230;</p> <p>Nous avons eu droit à l&rsquo;arrivée du support de la technologie EME (uniquement pour MS-Windows Vista et supérieur, en 32 bits), <a href="https://support.mozilla.org/en-US/kb/enable-drm">dixit la page de wiki de la technologie en question</a>. Parfois en oubliant de préciser que des versions sans EME sont disponibles pour les versions MS-Windows.</p> <blockquote><p>Currently, Adobe Primetime is only available in Microsoft Windows Vista and above when using 32-bit versions of Firefox. Mac OS X, Linux, Windows XP and 64-bit versions of Firefox are currently not supported.</p></blockquote> <p>Ce qui donne traduit :</p> <blockquote><p>Actuellement, Adobe Primetime est disponible uniquement dans Microsoft Windows Vista avec l&rsquo;utilisation des versions 32 bits de Firefox. Les versions Mac OS X, Linux, Windows XP et 64 bits de Firefox ne sont actuellement pas pris en charge.</p></blockquote> <p>Vu le magnifique support d&rsquo;Adobe Flash sous Linux, je pense que le code de l&rsquo;EME ne sera <strong>jamais activé</strong> sous les distribution GNU/Linux, ce qui n&rsquo;empechera pas certaines personnes de hurler au fork.</p> <p><span id="more-12890"></span></p> <p><a href="http://www.nextinpact.com/news/95144-mozilla-critiquee-pour-son-integration-prochaine-pocket-dans-firefox.htm">Je ne reviendrais pas sur l&rsquo;affaire dite &laquo;&nbsp;Pocket&nbsp;&raquo;</a>, n&rsquo;utilisant pas de services de ce type, et n&rsquo;en voyant pas l&rsquo;utilité au quotidien.</p> <p>Maintenant, <a href="http://www.numerama.com/magazine/33175-firefox-affichera-des-publicites-ciblees-basees-sur-l-historique.html">c&rsquo;est au tour des tuiles sponsorisées que certains webzines annonce l&rsquo;arrivée</a> sans préciser que la fonctionnalité est désactivable en&#8230; 2 clics !</p> <p><a href="http://frederic.bezies.free.fr/blog/?p=12109">Fonctionnalité dont il est question depuis au moins&#8230; novembre 2014</a>. Vous parlez d&rsquo;une nouveauté. Mais six mois sur internet, c&rsquo;est parfois le bout du monde <img src="http://frederic.bezies.free.fr/blog/wp-includes/images/smilies/simple-smile.png" alt=":)" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p> <p>J&rsquo;ai fait une minuscule vidéo pour montrer la<strong> complexité</strong> de désactivation des dites tuiles qui nécessitent une énorme manipulation tellement difficile à faire qu&rsquo;il faut sortir de Polytechnique pour y arriver.</p> <p><iframe src="https://www.youtube.com/embed/Ty1zFPoBhk0?rel=0" width="640" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p> <p>Bon, j&rsquo;ai eu tendance à utiliser un langage assez fleuri, mais cela est lié à mon niveau d&rsquo;exaspération envers une partie de la communauté du logiciel libre.</p> <p>Je sais très bien ce qui va se passer quand la fonctionnalité des tuiles &laquo;&nbsp;sponsorisées&nbsp;&raquo; va arriver. On va avoir droit aux mêmes <em>vierges effarouchées</em> qui vont vouer aux gémonies le navigateur de la Fondation Mozilla, et appeller à un nouveau fork. Ce qui ne fera qu&rsquo;amoindrir encore la force de frappe du navigateur.</p> <p>Car il faut être réaliste, dans le monde du libre, il n&rsquo;y a que deux moteurs : Gecko (Mozilla Firefox, <a href="http://www.seamonkey-project.org/">Seamonkey</a> et ses &laquo;&nbsp;forks&nbsp;&raquo; que sont <a href="https://wiki.debian.org/fr/Iceweasel">IceWeasel</a> de Debian GNU/Linux et <a href="http://www.gnu.org/software/gnuzilla/">GNU IceCat</a>) et les frères jumeaux Webkit/Blink (<a href="https://www.chromium.org/Home">Chromium</a>, <a href="http://midori-browser.org/">Midori</a>, <a href="https://rekonq.kde.org/">Rekonq</a>, Web, <a href="http://www.qupzilla.com/">QupZilla</a> et <a href="http://www.opera.com/fr">Opera</a> depuis sa version 15).</p> <p>Un vrai choix après tout&#8230; Ou pas !</p> Il est de bon ton sur certains webzines de faire des articles « putaclic » sur Mozilla Firefox. En ce mois de mai 2015, c’est la fête du slip

Nous avons eu droit à l’arrivée du support de la technologie EME (uniquement pour MS-Windows Vista et supérieur, en 32 bits), dixit la page de wiki de la technologie en question. Parfois en oubliant de préciser que des versions sans EME sont disponibles pour les versions MS-Windows.

Currently, Adobe Primetime is only available in Microsoft Windows Vista and above when using 32-bit versions of Firefox. Mac OS X, Linux, Windows XP and 64-bit versions of Firefox are currently not supported.

Ce qui donne traduit :

Actuellement, Adobe Primetime est disponible uniquement dans Microsoft Windows Vista avec l’utilisation des versions 32 bits de Firefox. Les versions Mac OS X, Linux, Windows XP et 64 bits de Firefox ne sont actuellement pas pris en charge.

Vu le magnifique support d’Adobe Flash sous Linux, je pense que le code de l’EME ne sera jamais activé sous les distribution GNU/Linux, ce qui n’empechera pas certaines personnes de hurler au fork.

Je ne reviendrais pas sur l’affaire dite « Pocket », n’utilisant pas de services de ce type, et n’en voyant pas l’utilité au quotidien.

Maintenant, c’est au tour des tuiles sponsorisées que certains webzines annonce l’arrivée sans préciser que la fonctionnalité est désactivable en… 2 clics !

Fonctionnalité dont il est question depuis au moins… novembre 2014. Vous parlez d’une nouveauté. Mais six mois sur internet, c’est parfois le bout du monde :)

J’ai fait une minuscule vidéo pour montrer la complexité de désactivation des dites tuiles qui nécessitent une énorme manipulation tellement difficile à faire qu’il faut sortir de Polytechnique pour y arriver.

Bon, j’ai eu tendance à utiliser un langage assez fleuri, mais cela est lié à mon niveau d’exaspération envers une partie de la communauté du logiciel libre.

Je sais très bien ce qui va se passer quand la fonctionnalité des tuiles « sponsorisées » va arriver. On va avoir droit aux mêmes vierges effarouchées qui vont vouer aux gémonies le navigateur de la Fondation Mozilla, et appeller à un nouveau fork. Ce qui ne fera qu’amoindrir encore la force de frappe du navigateur.

Car il faut être réaliste, dans le monde du libre, il n’y a que deux moteurs : Gecko (Mozilla Firefox, Seamonkey et ses « forks » que sont IceWeasel de Debian GNU/Linux et GNU IceCat) et les frères jumeaux Webkit/Blink (Chromium, Midori, Rekonq, Web, QupZilla et Opera depuis sa version 15).

Un vrai choix après tout… Ou pas !

]]>
Firefox OS : Mamie Fox sera à Geekopolis le week-end prochain https://firefoxos.mozfr.org/post/2015/05/Mamie-Fox-a-Geekopolis-le-week-end-prochain 2015-05-21T10:30:00+00:00 Mozinet <p>Bonjour à tous mes petits Fox,</p> <p>Mon petit-fils le Fox m’avait dit que le mois de mai allait être très chargé et plus particulièrement les deux prochaines semaines. Mais comme je suis une super mamie, je vais découvrir plusieurs événements tous différents, dont mon petit-fils le Fox connait déjà l’ensemble des sujets sur le bout des doigts.</p> <p>Cette semaine, je vais vous parler d’un événement appelé Geekopolis et la prochaine fois de deux événements où je serais aussi présente&#160;: l’<a href="http://ubuntu-paris.org" hreflang="fr" title="Ubuntu Party">Ubuntu Party</a> et la <a href="http://vip2015.popsyteam.org" hreflang="fr" title="Very Important Party">Very Important Party</a>.</p> <p><a href="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/geekopolis-affiche.jpg"><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/.geekopolis-affiche_m.jpg" alt="Affiche de Geekopolis" style="display:block; margin:0 auto;" /></a></p> <p>Pour commencer, je vais accompagner mon petit-fils le Fox au festival des cultures de l’imaginaire appelé <a href="https://www.geekopolis.fr/" hreflang="fr" title="Geekopolis - 23, 24 mai 2015 Paris Expo Porte de Versailles">Geekopolis</a>. Il s’agit de sa troisième édition. Elle se déroulera le 23 et 24 mai 2015 à la Paris Expo Porte de Versailles. Son thème principal est <strong>le coté obscur des univers Geek</strong>.</p> <p>Mon petit-fils m’a expliqué que je vais y découvrir 5 quartiers qui représentent chacun un univers habillé autour du thème principal&#160;: Nautilus, Tokyo, Métropolis, Avalon et Teklab.</p> <p><a href="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/geekopolis.jpg"><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/geekopolis.jpg" alt="Les 5 quartiers de Geekopolis" style="display:block; margin:0 auto;" /></a></p> <dl> <dt><strong>Avalon&#160;: Médiéval Fantastique</strong></dt> <dd>L’univers Avalon va nous permettre de faire des jeux de plateaux et des jeux de rôles, voir et participer à l’escrime médiévale, participer aux différents ateliers…</dd> <dt><strong>Little Tokyo&#160;: Manga, Japon et Jeux vidéo</strong></dt> <dd>L’univers Little Tokyo va vous amener dans l’univers japonais et du manga. Ainsi, nous pourrons participer au karaoké et aux jeux musicaux, voir des concerts…</dd> <dt><strong>Metropolis&#160;: Science Fiction</strong></dt> <dd>Nous allons pouvoir nous entrainer au sabre laser, découvrir les véhicules de science-fiction, devenir aventurier galactique…</dd> <dt><strong>Nautilus&#160;: l’univers Steampunk (Jules Verne)</strong></dt> <dd>L’univers Nautilus nous amène dans un univers de fonds marins avec des défilés, des duels, le téléguide de poissons volants…</dd> <dt><strong>Teklab&#160;: Sciences et nouvelles technologies</strong></dt> <dd>L’univers Teklas nous amène dans la réalité augmentée et dans ce qui nous attend à l’avenir au niveau de la robotique du futur, des sciences et des nouvelles technologies…</dd> </dl> <p><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/.geekopolis_fond_m.png" alt="" style="display:block; margin:0 auto;" /></p> <p>Mon petit-fils m’a aussi expliqué qu’il ne s’agit pas d’une manifestation culturelle comme les autres où j’ai pu me rendre car c’est réellement «&#160;<strong>le festival dont vous êtes le héros</strong>&#160;».</p> <p>Cette phrase m’a surprise au départ car je n’ai pas l’habitude d’être une héroïne. Heureusement, mon petit-fils m’a expliqué qu’il s’agit d’un lieu avec de nombreuses activités, des ateliers, des conférences, des démonstrations et des spectacles. Je pourrai participer, jouer et être un personnage d’une série télé ou d’un jeu.</p> <p>L’ensemble des informations est disponible sur la page d’<a href="http://www.geekopolis.fr/index.php#actualites" hreflang="fr" title="Actualités du site Geekopolis - 23, 24 mai 2015 Paris Expo Porte de Versailles">actualité du site officiel Geekopolis</a>.</p> <p>Bien entendu, je vous attends sur notre stand Mozilla, avec les nombreux amis de mon petit Fox au village du Libre qui se trouve dans l’univers Teklab.</p> <p>Pour couronner le tout, Geekopolis propose une bande annonce officielle que je vous conseille.</p> <iframe width="560" height="315" src="https://www.youtube.com/embed/Lpr15X0q4AM" frameborder="0" allowfullscreen></iframe> <p>La bande annonce de Geekopolis <a href="https://www.youtube.com/watch?v=Lpr15X0q4AM" hreflang="fr" title="[GEEKOPOLIS 2015] : Bande-annonce - chaîne YouTube du GEEKOPOLISfestival">sur YouTube</a> (30&#160;s)</p> <p>Comme mon petit-fils le Fox était impatient de me faire découvrir les différents univers de Geekopolis, il m’a sorti de son placard quelques photos souvenirs de l’édition 2014&#160;:</p> <p>Tout d’abord, une harpe sans corde et elle fonctionne&#160;:</p> <p><a href="https://www.flickr.com/photos/chperrot/14053686690/in/album-72157644771571402/" hreflang="fr" title="Salon Geekopolis 2014 (CC BY-NC-SA 2.0 Chris Perrot) sur Flickr"><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/geekopolis_2014_harpe_perrot.jpg" alt="Geekopolis 2014 : harpe" style="display:block; margin:0 auto;" /></a></p> <p>Ensuite, un match de quitdiche – il s’agit d’un nouveau sport qui est mal connu chez nous, mais sur d’autres continents il est très répandu.</p> <p><a href="https://www.flickr.com/photos/chperrot/14236990251/in/album-72157644771571402/" title="Geekopolis 2014 : match de quitdiche (CC BY-NC-SA 2.0 Chris Perrot) sur Flickr"><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/geekopolis_2014_match_quitdiche_1_perrot.jpg" alt="Geekopolis 2014 : match de quitdiche" /></a> <a href="https://www.flickr.com/photos/chperrot/14053705497/in/album-72157644771571402/" title="Geekopolis 2014 : match de quitdiche (CC BY-NC-SA 2.0 Chris Perrot) sur Flickr"><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/geekopolis_2014_match_quitdiche_2_perrot.jpg" alt="geekopolis_2014_match_quitdiche_2_perrot.jpg" /></a> <a href="https://www.flickr.com/photos/chperrot/14240288635/in/album-72157644771571402/" title="Geekopolis 2014 : match de quitdiche (CC BY-NC-SA 2.0 Chris Perrot) sur Flickr"><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/geekopolis_2014_match_quitdiche_3_perrot.jpg" alt="Geekopolis 2014 : match de quitdiche" /></a></p> <p>Mais aussi une attaque de zombies&#160;:</p> <p><a href="https://www.flickr.com/photos/chperrot/14240266875/in/album-72157644771571402/" title="Geekopolis 2014 : zombies (CC BY-NC-SA 2.0 Chris Perrot) sur Flickr"><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/geekopolis_2014_zombies_1_perrot.jpg" alt="Geekopolis 2014 : zombies" /></a> <a href="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/geekopolis_2014_zombies_2_perrot.jpg" title="Geekopolis 2014 : zombies (CC BY-NC-SA 2.0 Chris Perrot) sur Flickr"><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/geekopolis_2014_zombies_2_perrot.jpg" alt="Geekopolis 2014 : zombies" /></a> <a href="https://www.flickr.com/photos/chperrot/14238016132/in/album-72157644771571402/" title="Geekopolis 2014 : zombies (CC BY-NC-SA 2.0 Chris Perrot) sur Flickr"><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/geekopolis_2014_zombies_3_perrot.jpg" alt="Geekopolis 2014 : zombies" /></a></p> <p>Et beaucoup d’autres choses que je garde en réserve.</p> <p>Enfin, je vous donne rendez-vous après Geekopolis pour découvrir les autres événements qui se dérouleront le dernier week-end de mai.</p> <p>En attendant, rendez-vous à Geekopolis, ça promet d&#8217;être fun&#160;!</p> <p><strong><em>Mamie Fox</em></strong></p> <address><br /> <a href="https://twitter.com/hellosct1" hreflang="fr" title="Christophe Villeneuve (@hellosct1) sur Twitter">@hellosct1</a> </address> <p><em>Précédent message de Mamie Fox&#160;:</em> <a href="https://firefoxos.mozfr.org/post/2015/05/Mamie-Fox-revient-des-JDLL-2015" hreflang="fr" title="Mamie Fox revient des JDLL 2015 – Firefox OS">Mamie Fox revient des <abbr title="Journées du logiciel libre">JDLL</abbr> 2015</a></p> <p><em>Crédit illustrations&#160;:</em> n<sup>os</sup> 1, 2 et 3 Geekopolis. Tous droits réservés.</p> <p>Photos n<sup>os</sup> 4 à 10 Christophe Perrot sous licence <em>Creative Commons</em> <a href="https://creativecommons.org/licenses/by-nc-sa/2.0/deed.fr" hreflang="fr" title="Creative Commons — Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 2.0 Générique — CC BY-NC-SA 2.0">Attribution - pas d’utilisation commerciale - partage dans les mêmes conditions 2.0&#160;générique</a> (CC BY-NC-SA 2.0) sur Flickr</p> Bonjour à tous mes petits Fox,

Mon petit-fils le Fox m’avait dit que le mois de mai allait être très chargé et plus particulièrement les deux prochaines semaines. Mais comme je suis une super mamie, je vais découvrir plusieurs événements tous différents, dont mon petit-fils le Fox connait déjà l’ensemble des sujets sur le bout des doigts.

Cette semaine, je vais vous parler d’un événement appelé Geekopolis et la prochaine fois de deux événements où je serais aussi présente : l’Ubuntu Party et la Very Important Party.

Affiche de Geekopolis

Pour commencer, je vais accompagner mon petit-fils le Fox au festival des cultures de l’imaginaire appelé Geekopolis. Il s’agit de sa troisième édition. Elle se déroulera le 23 et 24 mai 2015 à la Paris Expo Porte de Versailles. Son thème principal est le coté obscur des univers Geek.

Mon petit-fils m’a expliqué que je vais y découvrir 5 quartiers qui représentent chacun un univers habillé autour du thème principal : Nautilus, Tokyo, Métropolis, Avalon et Teklab.

Les 5 quartiers de Geekopolis

Avalon : Médiéval Fantastique
L’univers Avalon va nous permettre de faire des jeux de plateaux et des jeux de rôles, voir et participer à l’escrime médiévale, participer aux différents ateliers…
Little Tokyo : Manga, Japon et Jeux vidéo
L’univers Little Tokyo va vous amener dans l’univers japonais et du manga. Ainsi, nous pourrons participer au karaoké et aux jeux musicaux, voir des concerts…
Metropolis : Science Fiction
Nous allons pouvoir nous entrainer au sabre laser, découvrir les véhicules de science-fiction, devenir aventurier galactique…
Nautilus : l’univers Steampunk (Jules Verne)
L’univers Nautilus nous amène dans un univers de fonds marins avec des défilés, des duels, le téléguide de poissons volants…
Teklab : Sciences et nouvelles technologies
L’univers Teklas nous amène dans la réalité augmentée et dans ce qui nous attend à l’avenir au niveau de la robotique du futur, des sciences et des nouvelles technologies…

Mon petit-fils m’a aussi expliqué qu’il ne s’agit pas d’une manifestation culturelle comme les autres où j’ai pu me rendre car c’est réellement « le festival dont vous êtes le héros ».

Cette phrase m’a surprise au départ car je n’ai pas l’habitude d’être une héroïne. Heureusement, mon petit-fils m’a expliqué qu’il s’agit d’un lieu avec de nombreuses activités, des ateliers, des conférences, des démonstrations et des spectacles. Je pourrai participer, jouer et être un personnage d’une série télé ou d’un jeu.

L’ensemble des informations est disponible sur la page d’actualité du site officiel Geekopolis.

Bien entendu, je vous attends sur notre stand Mozilla, avec les nombreux amis de mon petit Fox au village du Libre qui se trouve dans l’univers Teklab.

Pour couronner le tout, Geekopolis propose une bande annonce officielle que je vous conseille.

La bande annonce de Geekopolis sur YouTube (30 s)

Comme mon petit-fils le Fox était impatient de me faire découvrir les différents univers de Geekopolis, il m’a sorti de son placard quelques photos souvenirs de l’édition 2014 :

Tout d’abord, une harpe sans corde et elle fonctionne :

Geekopolis 2014 : harpe

Ensuite, un match de quitdiche – il s’agit d’un nouveau sport qui est mal connu chez nous, mais sur d’autres continents il est très répandu.

Geekopolis 2014 : match de quitdiche geekopolis_2014_match_quitdiche_2_perrot.jpg Geekopolis 2014 : match de quitdiche

Mais aussi une attaque de zombies :

Geekopolis 2014 : zombies Geekopolis 2014 : zombies Geekopolis 2014 : zombies

Et beaucoup d’autres choses que je garde en réserve.

Enfin, je vous donne rendez-vous après Geekopolis pour découvrir les autres événements qui se dérouleront le dernier week-end de mai.

En attendant, rendez-vous à Geekopolis, ça promet d’être fun !

Mamie Fox


@hellosct1

Précédent message de Mamie Fox : Mamie Fox revient des JDLL 2015

Crédit illustrations : nos 1, 2 et 3 Geekopolis. Tous droits réservés.

Photos nos 4 à 10 Christophe Perrot sous licence Creative Commons Attribution - pas d’utilisation commerciale - partage dans les mêmes conditions 2.0 générique (CC BY-NC-SA 2.0) sur Flickr

]]>
Blog technique de MozFR : ES6 en détails : une introduction https://tech.mozfr.org/post/2015/05/19/ES6-en-details-%3A-Une-introduction 2015-05-19T22:12:00+00:00 sphinx <p><em>Ce billet est une traduction de <a href="https://hacks.mozilla.org/2015/04/es6-in-depth-an-introduction/" title="ES6 In Depth: An introduction">cet article</a>, écrit par <a href="https://twitter.com/jorendorff" title="@jorendorff">Jason Orendorff</a> qui participe au développement du moteur JavaScript de Firefox. Ce billet sera le premier d&#8217;une série de traductions, chaque billet décrivant une nouvelle fonctionnalité apportée par ECMAScript 6.</em></p> <p><em>Merci à Marine, Mentalo, Lucas et Benjamin pour la traduction :)</em></p> <hr /> <p>Bienvenue dans cette série hebdomadaire que sera «&#160;ES6&#160;en détails&#160;»&#160;! Nous explorerons ECMAScript 6 (ES6), la nouvelle édition, imminente, du langage JavaScript. ES6 contient de nouvelles et nombreuses fonctionnalités qui feront de JavaScript (JS) un langage plus puissant et expressif. Chaque semaine, nous détaillerons une de ces fonctionnalités. Avant de commencer, arrêtons-nous quelques minutes sur ce qu&#8217;est ES6 et ce qu&#8217;on peut en attendre.</p> <h2>Quel est le champ d&#8217;application d&#8217;ECMAScript&#160;?</h2> <p>Le langage de programmation JavaScript a été standardisé par l&#8217;organisation de standardisation ECMA sous le nom d&#8217;ECMAScript (ES). Entre autres choses, ECMAScript définit&#160;:</p> <ul> <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">La syntaxe du langage</a>&#160;: les règles d&#8217;analyse lexicale du langage, les mots-clés, les instructions, les déclarations, les opérateurs, etc.</li> <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Structures_de_donn%C3%A9es">Les types</a>&#160;: booléens, nombres, chaînes de caractères, objets, etc.</li> <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/H%C3%A9ritage_et_cha%C3%AEne_de_prototypes">Les concepts de prototype et d&#8217;héritage</a></li> <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux">La bibliothèque de fonctionnalités et d&#8217;objets natifs standards</a>&#160;: <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON">JSON</a>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math"><code>Math</code></a>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array">les méthodes pour l&#8217;objet <code>Array</code></a>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object">les méthodes d&#8217;inspection des objets</a>, etc.</li> </ul> <p>ECMAScript ne définit rien qui concerne HTML ou CSS ni même les <a href="https://developer.mozilla.org/fr/docs/Web/API">API Web</a> telles que le DOM (Document Object Model). Ces éléments sont définis dans des standards distincts. ECMAScript couvre les aspects de JavaScript qui interviennent dans un navigateur ou dans un autre environnement (par exemple <a href="https://nodejs.org/">node.js</a>).</p> <h2>Le nouveau standard</h2> <p>La semaine dernière (NdT&#160;: le 16 avril 2015), la version finale de la spécification de la sixième édition du langage ECMAScript, a été proposée à l&#8217;Assemblée Générale ECMA pour relecture. Qu&#8217;est-ce que cela signifie&#160;?</p> <p>Cela signifie que cet été, <strong>nous aurons un nouveau standard pour le cœur du langage de programmation Javascript.</strong></p> <p>C&#8217;est une grande nouvelle. Un nouveau standard pour le langage JavaScript ne se fait pas en un jour. La dernière édition, ES5, est sortie en 2009. Le comité de standardisation travaille sur ES6 depuis cette date.</p> <p>ES6 est une évolution majeure du langage. Votre code JS continuera à fonctionner. ES6 a été conçu pour apporter un maximum de compatibilité avec le code existant. En fait, de nombreux navigateurs supportent d&#8217;ores et déjà les fonctionnalités d&#8217;ES6, et les implémentent continuellement. Votre code JS est <em>déjà</em> exécuté par les navigateurs qui implémentent les fonctionnalités d&#8217;ES6. Si vous n&#8217;avez pas constaté de problèmes de compatibilité à ce jour, vous n&#8217;en verrez probablement jamais.</p> <h2>Compter jusqu&#8217;à 6</h2> <p>Les éditions précédentes du standard d&#8217;ECMAScript furent numérotées 1, 2, 3, et 5.</p> <p>Qu&#8217;est-il arrivé à la quatrième édition&#160;? Elle était planifiée — et le travail avait bien avancé — mais elle a été stoppée car considérée comme trop ambitieuse (elle proposait, par exemple, un système avancé de typage statique optionnel, doté de types génériques et d&#8217;une inférence de types).</p> <p>ES4 a été un sujet controversé. Quand le comité de standardisation a finalement décidé d&#8217;arrêter ce projet, ses membres ont décidé de publier une version plus modeste d&#8217;ES5, puis ont commencé à travailler sur d&#8217;autres fonctionnalités. Ce travail a été appelé «&#160;Harmony&#160;», et c&#8217;est pourquoi la spécification ES5 contient ces deux phrases&#160;:</p> <blockquote> <p>«&#160;ECMAScript est un langage passionnant et son évolution n&#8217;est pas figée. Une amélioration technique considérable se poursuivra dans les futures éditions de la spécification.&#160;»</p> </blockquote> <p>Cette déclaration peut être lue comme une promesse faite pour ECMAScript 6.</p> <h2>Les promesses tenues</h2> <p>ES5, la version du langage datant de 2009, a introduit <code>Object.create()</code>, <code>Object.defineProperty()</code>, les <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/get">accesseurs</a> et les <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/set">mutateurs</a> (aussi respectivement appelés getters et setters), le <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> et les objets JSON. J&#8217;ai déjà utilisé toutes ces fonctionnalités, et j&#8217;aime ce qu&#8217;ES5 a apporté à ce langage. Cependant, force est de constater que ces fonctionnalités eurent assez peu d&#8217;impact sur la façon d&#8217;écrire du code JS. Selon moi, l&#8217;innovation majeure a probablement été les nouvelles méthodes sur les tableaux&#160;: <code>.map()</code>, <code>.filter()</code>, et ainsi de suite.</p> <p>Eh bien ES6 est différent. Il est le fruit d&#8217;années de travail harmonieux. Et il regorge de nouvelles fonctionnalités pour le langage et sa bibliothèque. C&#8217;est, à ce jour, la mise à jour <em>la plus importante</em> de JS. Les nouvelles fonctionnalités vont des fonctions basiques, comme les fonctions fléchées ou l&#8217;interpolation de chaînes de caractères, à de nouveaux concepts qui vont vous en mettre plein la vue comme les proxies et les générateurs. ES6 va changer la manière dont vous développez en JS.</p> <p>Le but de cette série est de vous montrer comment, en examinant les nouvelles fonctionnalités qu&#8217;ES6 apporte aux développeurs JavaScript.</p> <p>Nous démarrerons par la classique «&#160;fonctionnalité manquante&#160;» que j&#8217;attends impatiemment en Javascript depuis une décennie.</p> <p>Rendez-vous la semaine prochaine pour découvrir les itérateurs et la boucle <code>for-of</code> d&#8217;ES6.</p> Ce billet est une traduction de cet article, écrit par Jason Orendorff qui participe au développement du moteur JavaScript de Firefox. Ce billet sera le premier d’une série de traductions, chaque billet décrivant une nouvelle fonctionnalité apportée par ECMAScript 6.

Merci à Marine, Mentalo, Lucas et Benjamin pour la traduction :)


Bienvenue dans cette série hebdomadaire que sera « ES6 en détails » ! Nous explorerons ECMAScript 6 (ES6), la nouvelle édition, imminente, du langage JavaScript. ES6 contient de nouvelles et nombreuses fonctionnalités qui feront de JavaScript (JS) un langage plus puissant et expressif. Chaque semaine, nous détaillerons une de ces fonctionnalités. Avant de commencer, arrêtons-nous quelques minutes sur ce qu’est ES6 et ce qu’on peut en attendre.

Quel est le champ d’application d’ECMAScript ?

Le langage de programmation JavaScript a été standardisé par l’organisation de standardisation ECMA sous le nom d’ECMAScript (ES). Entre autres choses, ECMAScript définit :

ECMAScript ne définit rien qui concerne HTML ou CSS ni même les API Web telles que le DOM (Document Object Model). Ces éléments sont définis dans des standards distincts. ECMAScript couvre les aspects de JavaScript qui interviennent dans un navigateur ou dans un autre environnement (par exemple node.js).

Le nouveau standard

La semaine dernière (NdT : le 16 avril 2015), la version finale de la spécification de la sixième édition du langage ECMAScript, a été proposée à l’Assemblée Générale ECMA pour relecture. Qu’est-ce que cela signifie ?

Cela signifie que cet été, nous aurons un nouveau standard pour le cœur du langage de programmation Javascript.

C’est une grande nouvelle. Un nouveau standard pour le langage JavaScript ne se fait pas en un jour. La dernière édition, ES5, est sortie en 2009. Le comité de standardisation travaille sur ES6 depuis cette date.

ES6 est une évolution majeure du langage. Votre code JS continuera à fonctionner. ES6 a été conçu pour apporter un maximum de compatibilité avec le code existant. En fait, de nombreux navigateurs supportent d’ores et déjà les fonctionnalités d’ES6, et les implémentent continuellement. Votre code JS est déjà exécuté par les navigateurs qui implémentent les fonctionnalités d’ES6. Si vous n’avez pas constaté de problèmes de compatibilité à ce jour, vous n’en verrez probablement jamais.

Compter jusqu’à 6

Les éditions précédentes du standard d’ECMAScript furent numérotées 1, 2, 3, et 5.

Qu’est-il arrivé à la quatrième édition ? Elle était planifiée — et le travail avait bien avancé — mais elle a été stoppée car considérée comme trop ambitieuse (elle proposait, par exemple, un système avancé de typage statique optionnel, doté de types génériques et d’une inférence de types).

ES4 a été un sujet controversé. Quand le comité de standardisation a finalement décidé d’arrêter ce projet, ses membres ont décidé de publier une version plus modeste d’ES5, puis ont commencé à travailler sur d’autres fonctionnalités. Ce travail a été appelé « Harmony », et c’est pourquoi la spécification ES5 contient ces deux phrases :

« ECMAScript est un langage passionnant et son évolution n’est pas figée. Une amélioration technique considérable se poursuivra dans les futures éditions de la spécification. »

Cette déclaration peut être lue comme une promesse faite pour ECMAScript 6.

Les promesses tenues

ES5, la version du langage datant de 2009, a introduit Object.create(), Object.defineProperty(), les accesseurs et les mutateurs (aussi respectivement appelés getters et setters), le mode strict et les objets JSON. J’ai déjà utilisé toutes ces fonctionnalités, et j’aime ce qu’ES5 a apporté à ce langage. Cependant, force est de constater que ces fonctionnalités eurent assez peu d’impact sur la façon d’écrire du code JS. Selon moi, l’innovation majeure a probablement été les nouvelles méthodes sur les tableaux : .map(), .filter(), et ainsi de suite.

Eh bien ES6 est différent. Il est le fruit d’années de travail harmonieux. Et il regorge de nouvelles fonctionnalités pour le langage et sa bibliothèque. C’est, à ce jour, la mise à jour la plus importante de JS. Les nouvelles fonctionnalités vont des fonctions basiques, comme les fonctions fléchées ou l’interpolation de chaînes de caractères, à de nouveaux concepts qui vont vous en mettre plein la vue comme les proxies et les générateurs. ES6 va changer la manière dont vous développez en JS.

Le but de cette série est de vous montrer comment, en examinant les nouvelles fonctionnalités qu’ES6 apporte aux développeurs JavaScript.

Nous démarrerons par la classique « fonctionnalité manquante » que j’attends impatiemment en Javascript depuis une décennie.

Rendez-vous la semaine prochaine pour découvrir les itérateurs et la boucle for-of d’ES6.

]]>
Firefox OS : Ce qui a étonné AmarOk en rejoignant le groupe comm pour Firefox OS et Mozilla https://firefoxos.mozfr.org/post/2015/05/Ce-qui-a-etonne-AmarOk-en-rejoignant-le-groupe-comm-pour-Firefox-OS-et-Mozilla 2015-05-13T10:30:00+00:00 Mozinet <p>Nous nous étions promis de le faire plus souvent&#160;: donner la parole à un utilisateur de <a href="http://firefoxos.mozfr.org/" hreflang="fr" title="Firefox OS – Regardez l’avenir">Firefox OS</a> ou à un membre de l’écosystème de Firefox OS (développeur, développeur d’applications, communiquant, traducteur, membre de la communauté participant à la promotion, etc. bien sûr au féminin comme au masculin). Parmi ces <a href="http://firefoxos.mozfr.org/tag/starfox" hreflang="fr" title="Mot-clé - starfox - Communauté Mozilla francophone">Starfox</a>, nous accueillons AmarOk qui a participé à sa première réunion du <a href="http://wiki.mozfr.org/FirefoxOS/GroupeCommunication" hreflang="fr" title="FirefoxOS/GroupeCommunication – Wiki Mozilla francophone">groupe de communication pour Firefox OS</a>. Ce n’était cependant pas sa première contribution dans ce domaine. Nous lui avons demandé ce qui l’avait étonné dans le travail d’un groupe de comm et lors de son entrée dans l’univers Mozilla.</p> <blockquote><p><img src="https://firefoxos.mozfr.org/dotclear/public/Firefox_OS/amarok.jpg" alt="AmarOk" style="float:left; margin: 0 1em 1em 0; width:250px;" />Pour me présenter vite fait, je contribue à Mozilla depuis maintenant un an et demi. Et cette expérience m&#8217;a permis de découvrir plein de choses. Au début, je cherchais à faire du code, mais le manque de temps (projets personnels, études, etc.) m&#8217;a poussé à voir d&#8217;autres choses pour me prendre moins de temps.</p> <p> J&#8217;ai notamment pu faire un peu de traduction de <abbr title="Mozilla Developer Network">MDN</abbr>, réaliser quelques petits «&#160;patchs&#160;», et en fin d’année 2014 participer au lancement de Firefox OS en France (Leclerc de Nantes et de Vannes avec quelques autres Mozilliens). J&#8217;ai toujours suivi le projet, mais ma contribution a baissé durant ces derniers mois. Mes contributions les plus récentes pour MozFr sont le flyer pour la communauté, l&#8217;animation du stand Webmaker à la <a href="http://www.makerfairesaintmalo.com/" hreflang="fr" title="makerfairesaintmalo.com – 11 &amp; 12 Avril 2015 – Le Quai Saint-Malo">Maker Faire de Saint-Malo</a> avec la <a href="http://wiki.mdl29.net/doku.php" hreflang="fr" title="Maison du Libre Brest">Maison du Libre de Brest</a> et un article paru sur <a href="https://zestedesavoir.com/" hreflang="fr" title="Zeste de Savoir">Zeste de Savoir</a> sur le <a href="http://www.mozillascience.org/" hreflang="en" title="Mozilla Science Lab" lang="en">Mozilla Science Lab</a> justement intitulé&#160;: <a href="https://zestedesavoir.com/articles/178/les-chroniques-du-libre-le-mozilla-science-lab/" hreflang="fr" title="[Les chroniques du libre] Le Mozilla Science Lab • Articles • Zeste de Savoir">Le Mozilla Science Lab</a>.</p> <p>À mon arrivée dans la communauté, je cherchais à m’investir plus dans des projets autour de l’<em>open source</em>. Il faut avouer que Mozilla possède énormément de sites pour les nouveaux contributeurs (des <a href="http://wiki.mozfr.org/Conf%C3%A9rences" hreflang="fr" title="Conférences – Wiki Mozilla francophone">conférences</a> filmées comme l’<a href="https://air.mozilla.org/aperoofnewbies-aperodespetitsnouveaux-mozillaparis-presentation-de-la-communaute-par-clarista/" hreflang="fr" title="AperoOfNewbies/AperoDesPetitsNouveaux@MozillaParis: Présentation de la communauté par Clarista (30 mai 2014) Air Mozilla – Mozilla, in Video">apéro des petits nouveaux</a>, <a href="http://whatcanidoformozilla.org/" title="What can I do for Mozilla – Que puis-je faire pour Mozilla ?">What can I do for Mozilla</a>, <a href="http://www.joshmatthews.net/bugsahoy/" hreflang="en" title="Bugs Ahoy - find relevant Mozilla bugs">Bugs Ahoy!</a>) ainsi que de nombreux outils (<a href="https://www.transifex.com/projects/p/mozilla/" hreflang="en" title="Localisation de Mozilla Localization">Transifex</a>, <a href="https://bugzilla.mozilla.org/" hreflang="en" title="Bugzilla@Mozilla Main Page">Bugzilla</a>, <a href="https://developer.mozilla.org/fr/" hreflang="fr" title="Mozilla Developer Network">MDN</a>, etc.). Mais la communauté apporte une aide très précieuse et on arrive très vite à prendre les outils en main. Il existe de très nombreux projets Mozilla. Il est donc facile de trouver un projet dans lequel on peut aider. Le plus dur est de choisir parmi les projets qui nous plaisent.</p> <p> Bref, je suis <a href="http://mozfr.org/mailman/listinfo/firefoxos-mozfr" hreflang="fr" title="Page d'infos de FirefoxOS-MozFr">la liste du groupe de communication</a> depuis sa création et j&#8217;ai enfin eu l&#8217;occasion d&#8217;assister à une de leur <a href="http://wiki.mozfr.org/FirefoxOS/GroupeCommunication/reunions" hreflang="fr" title="Réunions du groupe communication de MozFr pour Firefox OS – Wiki Mozilla francophone">réunion</a>, surtout en tant que curieux. Et comme d&#8217;habitude, je regrette que ce type de réunion se fasse via <a href="http://fr.vidyo.com/" hreflang="fr" title="Visioconférence HD – Collaboration Vidéo – Téléprésence – Vidyo">Vidyo</a> (et je sais que je ne suis pas le seul).</p> <p> Mais c&#8217;est à priori mon seul défaut ressenti. La réunion a été fluide, rapidement traitée vu le nombre d&#8217;informations qu&#8217;il y avait à dire. Une réunion hebdomadaire est un rythme dur à tenir pour des bénévoles n&#8217;ayant pas forcément le temps. Je suis donc heureux de recevoir un message m&#8217;y invitant chaque semaine. Je suis aussi heureux de voir le projet Firefox OS se développer et la synchronisation qu&#8217;il peut y avoir entre les différentes communautés francophones (qui fut un des thèmes abordés lors de <a href="http://wiki.mozfr.org/FirefoxOS/GroupeCommunication/reunions/reunion-comm-2015-04-20" hreflang="fr" title="FirefoxOS/GroupeCommunication/reunions/reunion-comm-2015-04-20 – Wiki Mozilla francophone">la réunion</a> pour l&#8217;intégration de Firefox OS en Afrique).</p></blockquote> <p><br /> <strong>Pour finir, nous lui avons demandé s’il avait une actualité à nous faire partager&#160;?</strong></p> <blockquote><p>Une petite actualité&#160;: le <a href="http://www.labfab.fr/actualites/5-semaines-un-chateau-100-makers-poc21-vous-attend/" hreflang="fr" title="5 semaines, un chateau, 100 makers : POC21 vous attend ! - LabFab Rennes - Projet de laboratoire de fabrication francophoneLabFab Rennes – Projet de laboratoire de fabrication francophone">POC21</a>. Je trouve l&#8217;intention admirable, et j&#8217;espère que ça donnera vie à de nouveaux projets en septembre et que ça fera connaître ce genre d&#8217;initiative à un plus large public.</p></blockquote> <address><br /> <a href="https://twitter.com/AmarOk1412" hreflang="fr" title="AmarOk (@AmarOk1412) sur Twitter">AmarOk</a> </address> <p><br /> <strong>Le groupe est conscient des difficultés pratiques et éthiques posées par l’utilisation d’outils de travail fermés, privés et centralisés. Nous sommes à l’écoute et en recherche de solutions meilleures mais ne voulons pas épuiser toute notre énergie dans cette quête et dans l’installation et la maintenance de nouveaux outils. Voyez cette <a href="https://firefoxos.mozfr.org/post/2015/04/Ce-qui-a-etonne-Pyves-en-rejoignant-le-groupe-comm-pour-Firefox-OS-et-Mozilla#c17163" hreflang="fr" title="Mozinet sous Ce qui a étonné Pyves en rejoignant le groupe comm pour Firefox OS et Mozilla - Communauté Mozilla francophone">réponse à propos de l&#8217;utilisation de Google Docs</a>.</strong></p> <h3>Débuter</h3> <h4>MozFr</h4> <p><a href="http://www.mozfr.org/participer" hreflang="fr" title="Mozilla francophone : Participer">Participer</a></p> <p><a href="http://www.mozfr.org/liste" hreflang="fr" title="Mozilla francophone : s'inscrire à la liste de discussion">S’inscrire sur la liste communautaire générale</a></p> <h4>Groupe comm pour Firefox OS</h4> <p><a href="http://wiki.mozfr.org/FirefoxOS/GroupeCommunication/GuideDuDebutant" hreflang="fr" title="FirefoxOS : Guide du débutant – Wiki Mozilla francophone">Guide du débutant</a></p> <p><a href="http://wiki.mozfr.org/FirefoxOS/GroupeCommunication/PetitesChosesAFaire" hreflang="fr" title="Firefox OS – groupe communication : Petites choses à faire – Wiki Mozilla francophone">Petites choses à faire</a> idéales pour débuter avec l’aide bienveillante d’un mentor</p> <p><br /> <em>Notre précédent Starfox&#160;:</em> <a href="https://firefoxos.mozfr.org/post/2015/05/Philippe-a-aussi-participe-au-futur-de-Firefox-OS" hreflang="fr" title="Philippe a aussi participé au futur de Firefox OS (7 mai 2015) Communauté Mozilla francophone">Philippe</a></p> <p><em>Le précédent rapport d’étonnement&#160;:</em> <a href="https://firefoxos.mozfr.org/post/2015/04/Ce-qui-a-etonne-Pyves-en-rejoignant-le-groupe-comm-pour-Firefox-OS-et-Mozilla" hreflang="fr" title="Ce qui a étonné Pyves en rejoignant le groupe comm pour Firefox OS et Mozilla (16 avril 2015) Communauté Mozilla francophone">Ce qui a étonné Pyves en rejoignant le groupe comm pour Firefox OS et Mozilla</a></p> <p><em>Crédit illustrations&#160;:</em> Avatar par AmarOk. <abbr title="Do What The Fuck You Want to Public License">WTFPL</abbr>.</p> <p><em>Mise en forme et laïus&#160;:</em> <a href="https://twitter.com/Mozinet" hreflang="fr" title="Mozinet (@Mozinet) sur Twitter">Mozinet</a></p> Nous nous étions promis de le faire plus souvent : donner la parole à un utilisateur de Firefox OS ou à un membre de l’écosystème de Firefox OS (développeur, développeur d’applications, communiquant, traducteur, membre de la communauté participant à la promotion, etc. bien sûr au féminin comme au masculin). Parmi ces Starfox, nous accueillons AmarOk qui a participé à sa première réunion du groupe de communication pour Firefox OS. Ce n’était cependant pas sa première contribution dans ce domaine. Nous lui avons demandé ce qui l’avait étonné dans le travail d’un groupe de comm et lors de son entrée dans l’univers Mozilla.

AmarOkPour me présenter vite fait, je contribue à Mozilla depuis maintenant un an et demi. Et cette expérience m’a permis de découvrir plein de choses. Au début, je cherchais à faire du code, mais le manque de temps (projets personnels, études, etc.) m’a poussé à voir d’autres choses pour me prendre moins de temps.

J’ai notamment pu faire un peu de traduction de MDN, réaliser quelques petits « patchs », et en fin d’année 2014 participer au lancement de Firefox OS en France (Leclerc de Nantes et de Vannes avec quelques autres Mozilliens). J’ai toujours suivi le projet, mais ma contribution a baissé durant ces derniers mois. Mes contributions les plus récentes pour MozFr sont le flyer pour la communauté, l’animation du stand Webmaker à la Maker Faire de Saint-Malo avec la Maison du Libre de Brest et un article paru sur Zeste de Savoir sur le Mozilla Science Lab justement intitulé : Le Mozilla Science Lab.

À mon arrivée dans la communauté, je cherchais à m’investir plus dans des projets autour de l’open source. Il faut avouer que Mozilla possède énormément de sites pour les nouveaux contributeurs (des conférences filmées comme l’apéro des petits nouveaux, What can I do for Mozilla, Bugs Ahoy!) ainsi que de nombreux outils (Transifex, Bugzilla, MDN, etc.). Mais la communauté apporte une aide très précieuse et on arrive très vite à prendre les outils en main. Il existe de très nombreux projets Mozilla. Il est donc facile de trouver un projet dans lequel on peut aider. Le plus dur est de choisir parmi les projets qui nous plaisent.

Bref, je suis la liste du groupe de communication depuis sa création et j’ai enfin eu l’occasion d’assister à une de leur réunion, surtout en tant que curieux. Et comme d’habitude, je regrette que ce type de réunion se fasse via Vidyo (et je sais que je ne suis pas le seul).

Mais c’est à priori mon seul défaut ressenti. La réunion a été fluide, rapidement traitée vu le nombre d’informations qu’il y avait à dire. Une réunion hebdomadaire est un rythme dur à tenir pour des bénévoles n’ayant pas forcément le temps. Je suis donc heureux de recevoir un message m’y invitant chaque semaine. Je suis aussi heureux de voir le projet Firefox OS se développer et la synchronisation qu’il peut y avoir entre les différentes communautés francophones (qui fut un des thèmes abordés lors de la réunion pour l’intégration de Firefox OS en Afrique).


Pour finir, nous lui avons demandé s’il avait une actualité à nous faire partager ?

Une petite actualité : le POC21. Je trouve l’intention admirable, et j’espère que ça donnera vie à de nouveaux projets en septembre et que ça fera connaître ce genre d’initiative à un plus large public.


AmarOk


Le groupe est conscient des difficultés pratiques et éthiques posées par l’utilisation d’outils de travail fermés, privés et centralisés. Nous sommes à l’écoute et en recherche de solutions meilleures mais ne voulons pas épuiser toute notre énergie dans cette quête et dans l’installation et la maintenance de nouveaux outils. Voyez cette réponse à propos de l’utilisation de Google Docs.

Débuter

MozFr

Participer

S’inscrire sur la liste communautaire générale

Groupe comm pour Firefox OS

Guide du débutant

Petites choses à faire idéales pour débuter avec l’aide bienveillante d’un mentor


Notre précédent Starfox : Philippe

Le précédent rapport d’étonnement : Ce qui a étonné Pyves en rejoignant le groupe comm pour Firefox OS et Mozilla

Crédit illustrations : Avatar par AmarOk. WTFPL.

Mise en forme et laïus : Mozinet

]]>
Mozilla Francophone : Firefox OS réussira en Afrique avec nous https://blog.mozfr.org/post/2015/05/Firefox-OS-reussira-en-Afrique-avec-nous 2015-05-09T20:21:00+00:00 Mozinet <p><img src="https://blog.mozfr.org/dotclear/public/Firefox_OS/OrangeKlif.png" alt="Orange Klif, un Alcatel Onetouch avec Firefox OS" style="float:right; margin: 0 0 1em 1em;" title="Orange Klif, un Alcatel Onetouch avec Firefox OS (Alcatel Onetouch)" />Nous vous l’annoncions au lendemain du <cite lang="en">Mobile World Congress 2015</cite>&#160;: <a href="https://blog.mozfr.org/post/2015/03/Firefox-OS-au-Mobile-World-Congress-2015-Orange-Alcatel-Onetouch-Mozilla-vers-Afrique-et-Moyen-Orient" hreflang="fr" title="Firefox OS au Mobile World Congress 2015 : Orange, Alcatel Onetouch et Mozilla vers l’Afrique et le Moyen Orient (9 mars 2015) Communauté Mozilla francophone">Orange, Alcatel Onetouch et Mozilla vont lancer des smartphones Firefox OS en Afrique et au Moyen Orient</a> (et même un peu plus loin). C’est aujourd’hui une réalité. Mozilla a annoncé sur son blog officiel qu’<a href="https://blog.mozilla.org/blog/2015/05/08/orange-launches-first-firefox-os-smartphones-in-africa/" hreflang="fr" title="Orange Launches First Firefox OS Smartphones in Africa ">Orange avait mis en vente ses premiers smartphones au Sénégal et à Madagascar cette semaine</a>. Andreas Gal, <a href="https://blog.mozilla.org/press/bios/andreas-gal/" hreflang="en" title="Andreas Gal Mozilla Press Center Bio"><abbr title="Chief Technology Officer">CTO</abbr> et <abbr title="Vice-président">VP</abbr> Mobile chez Mozilla</a>, y déclare&#160;: «&#160;<em>Je suis également ravi de voir comment l&#8217;arrivée imminente de Firefox OS a suscité un enthousiasme dans les communautés locales de Mozilla.</em>&#160;»</p> <blockquote cite="https://blog.mozilla.org/blog/2015/05/08/orange-launches-first-firefox-os-smartphones-in-africa/"><p>Firefox OS est la première plateforme mobile véritablement ouverte entièrement construite sur des technologies web, apportant plus de choix et de contrôle à l&#8217;industrie du mobile. Avec ces lancements, Mozilla et Orange tiennent leur promesse de mettre le Web mobile à la portée de millions de nouvelles personnes à qui les offres mobiles ne s’adressaient pas jusqu’ici. L&#8217;offre d&#8217;Orange inclut le nouveau téléphone Firefox OS, l’<a href="http://www.alcatelonetouch.com/global-en/news/pressroom/Latest_Orange_Klif.html#goStar" hreflang="en" title="ALCATEL ONETOUCH Expands Mobile Internet Access With the Latest Orange Klif – CP">Orange Klif</a>. Ce smartphone Firefox OS 3G est une exclusivité d’Orange.</p></blockquote> <p>Au début du printemps, <a href="https://blog.mozilla.org/blog/2015/04/02/firefox-os-arrives-in-south-africa/" hreflang="fr" title="Firefox OS Arrives in South Africa (2 avr. 2015) The Mozilla Blog">Firefox OS avait été lancé en Afrique du Sud</a>. Mais cette fois-ci, beaucoup des nouveaux pays annoncés sont francophones et notre communauté peut faire la différence en aidant les communautés locales à réussir leur lancement de Firefox OS.</p> <p>Nous avions déjà mi-avril relayé des <a href="https://blog.mozfr.org/post/2015/04/Firefox-OS-en-Afrique-des-petites-taches-qui-font-la-difference" hreflang="fr" title="Firefox OS en Afrique : des petites tâches qui font la différence (17 avr. 2015) Communauté Mozilla francophone">appels à contribution</a> en vue des lancements à venir. Depuis, d’autres tâches ont été proposées et vous pouvez faire la différence.</p> <img src="https://blog.mozfr.org/dotclear/public/Firefox_OS/Fox_afrique_900x640.jpg" alt="Fox tendant la main à un éléphant sur fond de dunes" style="margin: 0 auto; display: block;" title="Fox tendant la main à un éléphant sur fond de dunes (Rendleflow, DR)" /> <h3>Mobilisation générale</h3> <p><a href="http://mozfr.org/pipermail/moz-fr/2015-May/007671.html" hreflang="fr" title="[Moz-fr] Sortie prochaine de Firefox OS en Afrique (4 mai 2015)">Sur la liste communautaire</a>, Flore a sonné la mobilisation générale. Toute la communauté peut aider et nous pouvons «&#160;faire profiter toute la communauté francophone de l&#8217;expérience de la sortie de Firefox OS en France et du fait qu&#8217;on est bien nombreux en Europe et qu&#8217;on a un peu de temps pour aider (enfin ceux qui peuvent)&#160;». Il y a bien des façons de «&#160;mettre la main à la pâte&#160;» et chacun selon ses compétences et ses envies peut trouver à se rendre utile.</p> <h4>Traductions</h4> <p>Vous pouvez aider à traduire et à relire les traductions en réponse aux appels à l’aide lancés sur la liste générale (<a href="http://mozfr.org/pipermail/moz-fr/2015-May/007670.html" hreflang="fr" title="[Moz-fr] Fwd: FW: Localisation (4 mai 2015)">comme celui-ci</a>). Ça pourra donner des articles sur le nouveau blog Firefox OS Africa comme ceux-ci&#160;: <a href="https://africa.mozilla.community/fr/firefox-os-betounsi-le-projet-original-dun-mozillien-en-langue-tunisienne/" hreflang="fr" title="« Firefox OS Betounsi », le projet original d’un Mozillien en langue tunisienne (30 avr. 2015) Melek Jebnoun – Firefox OS Africa blog">«&#160;Firefox OS Betounsi&#160;», le projet original d’un Mozillien en langue tunisienne</a> et <a href="https://africa.mozilla.community/fr/le-lancement-de-firefox-os-en-afrique-du-sud/" hreflang="fr" title="Le lancement de Firefox OS en Afrique du Sud (5 mai 2015) Kelly Paull – Firefox OS Africa blog">Le lancement de Firefox OS en Afrique du Sud</a>. Les articles et contenus produits pour la campagne de lancements africaine peuvent également être traduits en langue local.</p> <p>Les articles de l’assistance officielle de Mozilla sont traduits par la communauté. <a href="https://support.mozilla.org/fr/get-involved/l10n" hreflang="fr" title="Assistance de Mozilla">Inscrivez-vous</a> sur <abbr title="Support.mozilla.org">SUMO</abbr>, consultez la documentation et commencez à traduire les articles en anglais ou leurs mises à jour <a href="https://support.mozilla.org/fr/products/firefox-os" hreflang="fr" title="Assistance de Firefox OS">pour Firefox OS</a> en particulier.</p> <h4>Assistance directe aux utilisateurs</h4> <div style="margin: 1em; padding:0.5em; background-color: #e9d3d3; border: 2px dashed grey;"> <p>Nos ressources actuelles pour les utilisateurs&#160;: <a href="https://blog.mozfr.org/pages/Assistance-de-Firefox-OS" hreflang="fr" title="Assistance de Firefox OS - Communauté Mozilla francophone">page Assistance de Firefox OS</a> et présentation en détails&#160;: <a href="https://blog.mozfr.org/post/2014/12/La-communaute-d-entraide-Firefox-OS-toutes-ressources-utiles" hreflang="fr" title="La communauté d’entraide pour Firefox OS : toutes les ressources utiles (3 déc. 2014) Communauté Mozilla francophone">La communauté d’entraide pour Firefox OS&#160;: toutes les ressources utiles</a>.</p> </div> <p>Vous pouvez aussi directement répondre aux nouveaux utilisateurs et les aider à résoudre leurs problèmes.</p> <p>Un premier moyen est de rejoindre ce que Mozilla appelle son <a href="https://support.mozilla.org/fr/army-of-awesome" hreflang="fr" title="Army of Awesome – Assistance de Mozilla">Army of Awesome</a>. Elle est chargée de répondre sur Twitter aux questions dans chaque langue à propos de Firefox (OS aussi) et de Mozilla en général. Comme l’indique <a href="http://mozfr.org/pipermail/moz-fr/2015-May/007680.html" hreflang="fr" title="[Moz-fr] Besoin de francophones pour l'Army of awesome (5 mai 2015)">Mariot sur la liste générale</a>, il y a besoin de bataillons de twittos francophones (l’expression est de moi) pour répondre aux nouveaux utilisateurs africains qui tweetent leur problème. <a href="http://mozfr.org/pipermail/moz-fr/2015-May/007681.html" hreflang="fr" title="[Moz-fr] Besoin de francophones pour l'Army of awesome (5 mai 2015)">Dattaz précise</a> que <q cite="”http://mozfr.org/pipermail/moz-fr/2015-May/007681.html”">c&#8217;est super simple à faire, et c&#8217;est super bien pour commencer à s&#8217;impliquer. En plus, ça ne prend généralement pas beaucoup de temps ;) Donc, à tous ceux qui voudraient s&#8217;impliquer mais qui ne savent pas par quoi/où commencer, allez-y&#160;!</q></p> <p>L’autre moyen où vous pouvez doser votre contribution et n’y investir que le temps que vous avez c’est de répondre aux questions sur les <a href="https://forums.mozfr.org/" hreflang="fr" title="Geckozone">forums communautaires francophones de Geckozone</a>. Deux forums d’entraide sont spécialisés dans Firefox OS&#160;:</p> <ul> <li><a href="https://forums.mozfr.org/viewforum.php?f=35" hreflang="fr" title="Geckozone – forum – Firefox OS, le système d'exploitation de Mozilla pour appareils mobiles">Le forum consacré aux versions stables de Firefox OS (1.3 et 2.0)</a>&#160;: celui sur lequel postent les utilisateurs lambda des smartphones grand public sous Firefox OS.</li> <li><a href="https://forums.mozfr.org/viewforum.php?f=33" hreflang="fr" title="Geckozone • Consulter le forum - Firefox OS (versions de développement)">Le forum qui traite des problèmes rencontrés sur les branches en développement de Firefox OS</a> (ainsi que des téléphones et tablettes de développement, et peut-être un jour des téléviseurs, montres, objets connectés… sous Firefox OS).</li> </ul> <p>Vous pouvez aussi faire connaître ces moyens d’obtenir une assistance personnalisée dans leur langue aux nouveaux utilisateurs directement ou en reprenant la nouvelle sur vos canaux de communication.</p> <h4>Communication</h4> <p>Vous pouvez aussi faire passer la bonne nouvelle et relayer les lancements de Firefox OS sur vos blogs et sur vos propres réseaux sociaux créant ainsi une grande caisse de résonance.</p> <p>Les réseaux sociaux en français sont aussi menés par la communauté. Vous pouvez donc participer à leur alimentation directement et relayer les messages sur vos propres réseaux.</p> <p>Faisons un petit tour de réseaux en français ou qui postent en français&#160;:</p> <h5>Connaissez-vous les comptes tweetant sur Mozilla&#160;?</h5> <p>Voici les comptes à suivre pour être au courant de tout ce qui se passe chez Mozilla et en français&#160;:</p> <ul> <li><a href="https://twitter.com/FirefoxOSAfrica" hreflang="fr" title="Firefox OS Africa (@FirefoxOSAfrica) sur Twitter">Firefox OS Africa</a> (compte multilingue dont le français) <li><a href="https://twitter.com/firefoxosfr" hreflang="fr" title="Firefox OS FR (firefoxosfr) sur Twitter">Firefox OS francophone</a></li> <li><a href="https://twitter.com/mozilla_fr/" hreflang="fr" title="Mozilla FR (mozilla_fr) sur Twitter">Communauté Mozilla francophone</a></li> <li><a href="https://twitter.com/MozillaPR_FR" hreflang="fr" title="Mozilla Press France (MozillaPR_FR) sur Twitter">Mozilla Presse France</a>*</li> <li><a href="https://twitter.com/MozillaZineFr" hreflang="fr" title="MozillaZine-fr.org (MozillaZineFr) sur Twitter">Toute l’actualité Mozilla de MozillaZine-fr</a></li> </ul> <p>(*) compte officiel ou tenu par des employés de Mozilla</p> <p>Nous avons aussi une <a href="https://blog.mozfr.org/post/2015/02/Macaw-demultiplier-la-puissance-de-Twitter-sur-Firefox-OS#comptes-twitter-mozilla-en-362" hreflang="fr" title="Macaw, démultiplier la puissance de Twitter sur Firefox OS - Communauté Mozilla francophone">sélection de comptes Mozilla anglophones</a> dans notre article sur le client Twitter pour Firefox OS, Macaw.</p> <h5>Autres réseaux sociaux</h5> <p> Mozilla ne fait pas d’assistance organisée sur Facebook. Firefox OS en français y est présent, ainsi que sur d’autres réseaux plus spécialisés où votre aide sera vraiment bienvenue et décisive.</p> <ul> <li><a href="https://fr-fr.facebook.com/firefoxosfr" hreflang="fr" title="Firefox OS FR – Facebook">Firefox OS fr sur Facebook</a></li> <li><a href="https://plus.google.com/u/0/b/102403271624576887074/102403271624576887074/posts" hreflang="fr" title="Firefox OS FR - Google+">Firefox OS fr sur Google+</a></li> <li><a href="https://www.youtube.com/user/FirefoxOSfr" hreflang="fr" title="Firefox OS FR - YouTube">Firefox OS fr YouTube</a> (lié au précédent)</li> <li><a href="https://free-beer.ch/u/mozfr" hreflang="fr" title="Mozilla Francophone">Diaspora Mozilla francophone</a></li> <li><a href="https://www.flickr.com/groups/mozfr/" hreflang="fr" title="Flickr : Le pool mozfr">Flickr&#160;: Le groupe mozfr</a> (photos des événements)</li> </ul> <p>Il n’y a pas de compte Facebook de la communauté francophone, mais des communautés locales francophones ont le leur.</p> <h5>Le groupe communication francophone pour Firefox OS</h5> <p>De la même façon que la communauté MozFr n’est pas limitée à la France, le <a href="http://wiki.mozfr.org/FirefoxOS/GroupeCommunication" hreflang="fr" title="FirefoxOS/GroupeCommunication – Wiki Mozilla francophone">groupe de communication</a> communautaire francophone monté avec l’aide de Mozilla vise toute la francophonie. C’est la communauté qui est aux manettes, mais nous bénéficions de l&#8217;aide d&#8217;une agence marketing, ReUP, la même que Mozilla a engagé pour la campagne de lancements africaine. Elle est là pour apprendre à la communauté à communiquer sur le Web et à travers les réseaux sociaux. Un des objectifs est de transmettre notre expérience à d’autres membres de la communauté et à d’autres communautés.</p> <p>Nous avons essayé de réduire les barrières à la contribution et la courbe d’apprentissage. Un débutant à rédigé un <a href="http://wiki.mozfr.org/FirefoxOS/GroupeCommunication/GuideDuDebutant" hreflang="fr" title="FirefoxOS/GroupeCommunication/GuideDuDebutant – Wiki Mozilla francophone">guide du débutant</a> illustré. Nous avons aussi identifié des <a href="http://wiki.mozfr.org/FirefoxOS/GroupeCommunication/PetitesChosesAFaire" hreflang="fr" title="FirefoxOS/GroupeCommunication/PetitesChosesAFaire — Mozilla Francophone">petites tâches</a> idéales pour un débutant (avec possibilité d’être guidé par un mentor), mais rien ne vous limite à ces contributions. Vous pouvez venir rédiger des articles pour la francophonie sur votre quotidien ou les sujets Firefox OS qui vous intéressent. Nous avons une <a href="http://mozfr.org/mailman/listinfo/firefoxos-mozfr" hreflang="fr" title="Page d'infos de FirefoxOS-MozFr">liste MozFr</a> publique pour en discuter. Pas d’approbation préalable.</p> <h3>Marketplace</h3> <h4>Identifier les contenus pertinents localement</h4> <p>Le conseil communautaire de curation du <a href="https://marketplace.firefox.com/" title="Firefox Marketplace">Marketplace</a>, la boutique d’applications pour Firefox OS (et plus) gérée par Mozilla, a publié les <a href="https://wiki.mozilla.org/Marketplace/Contributing/May2015" hreflang="en" title="Contribute to Firefox Marketplace : May 2015 – Mozilla Wiki">opportunités de contribution pour mai 2015</a>. Une tâche prenant entre 15 et 30 minutes seulement y est proposée pour faire la différence. Vous pouvez fournir de l’expertise sur l’endroit que vous connaissez en aidant à identifier les contenus pertinents localement pour le Marketplace dans les pays où le lancement de Firefox OS est imminent (ou déjà fait). Voir <a href="https://oneanddone.mozilla.org/fr/tasks/102/" hreflang="en" title="FirefoxOS local mobile-friendly websites – Mozilla One and Done">Mozilla One and Done</a>. Les pays cités&#160;:</p> <ul> <li>Mali</li> <li>Madagascar</li> <li>Maurice</li> <li>Niger</li> <li>Botswana</li> </ul> <h4>Des <em>reviewers</em> francophones pour le Marketplace</h4> <p>Flore <a href="http://mozfr.org/pipermail/moz-fr/2015-May/007655.html" hreflang="fr" title="[Moz-fr] On rechercher des reviewers francophones pour le marketplace (4 mai 2015)">sur la liste communautaire</a> a indiqué que le Marketplace s’attend à une augmentation des soumissions des applis en français. Actuellement, il n’y a pas assez de <em>reviewers</em>, ce qui rallonge l’attente pour l’approbation des nouvelles applications ou de leurs nouvelles versions. Lors de cet appel, il n’y avait qu’un examinateur francophone sur le Marketplace. Cette tâche est plus exigeante <a href="http://mozfr.org/pipermail/moz-fr/2015-May/007673.html" hreflang="fr" title="[Moz-fr] On rechercher des reviewers francophones pour le marketplace (4 mai 2015)">en compétences techniques et en matériel</a> que pour les simples traductions pour lesquelles votre aide est habituellement demandée sur la liste.</p> <p><br /> Les possibilités sont déjà nombreuses et chacun peut aider selon ses compétences, ses centres d’intérêt et le temps dont il dispose. Tout ne dépend pas de nous mais nous pouvons faire la différence pour réussir cette campagne de lancements dans la francophonie.</p> <address><br /> <a href="https://twitter.com/Mozinet" hreflang="fr" title="Mozinet (@Mozinet) sur Twitter">@Mozinet</a> </address> <p><em>Crédits illustrations&#160;: Photo du téléphone</em> <a href="http://www.alcatelonetouch.com/global-en/news/pressroom/Latest_Orange_Klif.html#goStar" hreflang="fr" title="ALCATEL ONETOUCH - Press Room - ALCATEL ONETOUCH Expands Mobile Internet Access With the Latest Orange Klif">Alcatel Onetouch</a></p> <p><em>Dessin&#160;:</em> <a href="http://www.rend-le-flow.tumblr.com/" hreflang="f" title="Ceci est un blog rempli de Bandes dessinées">rendleflow</a>. <em>Tous droits réservés.</em></p> Orange Klif, un Alcatel Onetouch avec Firefox OSNous vous l’annoncions au lendemain du Mobile World Congress 2015 : Orange, Alcatel Onetouch et Mozilla vont lancer des smartphones Firefox OS en Afrique et au Moyen Orient (et même un peu plus loin). C’est aujourd’hui une réalité. Mozilla a annoncé sur son blog officiel qu’Orange avait mis en vente ses premiers smartphones au Sénégal et à Madagascar cette semaine. Andreas Gal, CTO et VP Mobile chez Mozilla, y déclare : « Je suis également ravi de voir comment l’arrivée imminente de Firefox OS a suscité un enthousiasme dans les communautés locales de Mozilla. »

Firefox OS est la première plateforme mobile véritablement ouverte entièrement construite sur des technologies web, apportant plus de choix et de contrôle à l’industrie du mobile. Avec ces lancements, Mozilla et Orange tiennent leur promesse de mettre le Web mobile à la portée de millions de nouvelles personnes à qui les offres mobiles ne s’adressaient pas jusqu’ici. L’offre d’Orange inclut le nouveau téléphone Firefox OS, l’Orange Klif. Ce smartphone Firefox OS 3G est une exclusivité d’Orange.

Au début du printemps, Firefox OS avait été lancé en Afrique du Sud. Mais cette fois-ci, beaucoup des nouveaux pays annoncés sont francophones et notre communauté peut faire la différence en aidant les communautés locales à réussir leur lancement de Firefox OS.

Nous avions déjà mi-avril relayé des appels à contribution en vue des lancements à venir. Depuis, d’autres tâches ont été proposées et vous pouvez faire la différence.

Fox tendant la main à un éléphant sur fond de dunes

Mobilisation générale

Sur la liste communautaire, Flore a sonné la mobilisation générale. Toute la communauté peut aider et nous pouvons « faire profiter toute la communauté francophone de l’expérience de la sortie de Firefox OS en France et du fait qu’on est bien nombreux en Europe et qu’on a un peu de temps pour aider (enfin ceux qui peuvent) ». Il y a bien des façons de « mettre la main à la pâte » et chacun selon ses compétences et ses envies peut trouver à se rendre utile.

Traductions

Vous pouvez aider à traduire et à relire les traductions en réponse aux appels à l’aide lancés sur la liste générale (comme celui-ci). Ça pourra donner des articles sur le nouveau blog Firefox OS Africa comme ceux-ci : « Firefox OS Betounsi », le projet original d’un Mozillien en langue tunisienne et Le lancement de Firefox OS en Afrique du Sud. Les articles et contenus produits pour la campagne de lancements africaine peuvent également être traduits en langue local.

Les articles de l’assistance officielle de Mozilla sont traduits par la communauté. Inscrivez-vous sur SUMO, consultez la documentation et commencez à traduire les articles en anglais ou leurs mises à jour pour Firefox OS en particulier.

Assistance directe aux utilisateurs

Nos ressources actuelles pour les utilisateurs : page Assistance de Firefox OS et présentation en détails : La communauté d’entraide pour Firefox OS : toutes les ressources utiles.

Vous pouvez aussi directement répondre aux nouveaux utilisateurs et les aider à résoudre leurs problèmes.

Un premier moyen est de rejoindre ce que Mozilla appelle son Army of Awesome. Elle est chargée de répondre sur Twitter aux questions dans chaque langue à propos de Firefox (OS aussi) et de Mozilla en général. Comme l’indique Mariot sur la liste générale, il y a besoin de bataillons de twittos francophones (l’expression est de moi) pour répondre aux nouveaux utilisateurs africains qui tweetent leur problème. Dattaz précise que c’est super simple à faire, et c’est super bien pour commencer à s’impliquer. En plus, ça ne prend généralement pas beaucoup de temps ;) Donc, à tous ceux qui voudraient s’impliquer mais qui ne savent pas par quoi/où commencer, allez-y !

L’autre moyen où vous pouvez doser votre contribution et n’y investir que le temps que vous avez c’est de répondre aux questions sur les forums communautaires francophones de Geckozone. Deux forums d’entraide sont spécialisés dans Firefox OS :

Vous pouvez aussi faire connaître ces moyens d’obtenir une assistance personnalisée dans leur langue aux nouveaux utilisateurs directement ou en reprenant la nouvelle sur vos canaux de communication.

Communication

Vous pouvez aussi faire passer la bonne nouvelle et relayer les lancements de Firefox OS sur vos blogs et sur vos propres réseaux sociaux créant ainsi une grande caisse de résonance.

Les réseaux sociaux en français sont aussi menés par la communauté. Vous pouvez donc participer à leur alimentation directement et relayer les messages sur vos propres réseaux.

Faisons un petit tour de réseaux en français ou qui postent en français :

Connaissez-vous les comptes tweetant sur Mozilla ?

Voici les comptes à suivre pour être au courant de tout ce qui se passe chez Mozilla et en français :

(*) compte officiel ou tenu par des employés de Mozilla

Nous avons aussi une sélection de comptes Mozilla anglophones dans notre article sur le client Twitter pour Firefox OS, Macaw.

Autres réseaux sociaux

Mozilla ne fait pas d’assistance organisée sur Facebook. Firefox OS en français y est présent, ainsi que sur d’autres réseaux plus spécialisés où votre aide sera vraiment bienvenue et décisive.

Il n’y a pas de compte Facebook de la communauté francophone, mais des communautés locales francophones ont le leur.

Le groupe communication francophone pour Firefox OS

De la même façon que la communauté MozFr n’est pas limitée à la France, le groupe de communication communautaire francophone monté avec l’aide de Mozilla vise toute la francophonie. C’est la communauté qui est aux manettes, mais nous bénéficions de l’aide d’une agence marketing, ReUP, la même que Mozilla a engagé pour la campagne de lancements africaine. Elle est là pour apprendre à la communauté à communiquer sur le Web et à travers les réseaux sociaux. Un des objectifs est de transmettre notre expérience à d’autres membres de la communauté et à d’autres communautés.

Nous avons essayé de réduire les barrières à la contribution et la courbe d’apprentissage. Un débutant à rédigé un guide du débutant illustré. Nous avons aussi identifié des petites tâches idéales pour un débutant (avec possibilité d’être guidé par un mentor), mais rien ne vous limite à ces contributions. Vous pouvez venir rédiger des articles pour la francophonie sur votre quotidien ou les sujets Firefox OS qui vous intéressent. Nous avons une liste MozFr publique pour en discuter. Pas d’approbation préalable.

Marketplace

Identifier les contenus pertinents localement

Le conseil communautaire de curation du Marketplace, la boutique d’applications pour Firefox OS (et plus) gérée par Mozilla, a publié les opportunités de contribution pour mai 2015. Une tâche prenant entre 15 et 30 minutes seulement y est proposée pour faire la différence. Vous pouvez fournir de l’expertise sur l’endroit que vous connaissez en aidant à identifier les contenus pertinents localement pour le Marketplace dans les pays où le lancement de Firefox OS est imminent (ou déjà fait). Voir Mozilla One and Done. Les pays cités :

  • Mali
  • Madagascar
  • Maurice
  • Niger
  • Botswana

Des reviewers francophones pour le Marketplace

Flore sur la liste communautaire a indiqué que le Marketplace s’attend à une augmentation des soumissions des applis en français. Actuellement, il n’y a pas assez de reviewers, ce qui rallonge l’attente pour l’approbation des nouvelles applications ou de leurs nouvelles versions. Lors de cet appel, il n’y avait qu’un examinateur francophone sur le Marketplace. Cette tâche est plus exigeante en compétences techniques et en matériel que pour les simples traductions pour lesquelles votre aide est habituellement demandée sur la liste.


Les possibilités sont déjà nombreuses et chacun peut aider selon ses compétences, ses centres d’intérêt et le temps dont il dispose. Tout ne dépend pas de nous mais nous pouvons faire la différence pour réussir cette campagne de lancements dans la francophonie.


@Mozinet

Crédits illustrations : Photo du téléphone Alcatel Onetouch

Dessin : rendleflow. Tous droits réservés.

]]>
BlogZiNet : Des outils de travail centralisés, fermés… du groupe de communication communautaire pour Firefox OS http://blogzinet.free.fr/blog/index.php?post/2015/05/08/Des-outils-de-travail-centralises-fermes-du-groupe-de-communication-communautaire-Firefox-OS 2015-05-08T19:15:00+00:00 Mozinet <p><img src="http://blogzinet.free.fr/blog/public/Firefox_OS/.img-mypads-ulule2_s.jpg" alt="My Pads" style="float: right; margin: 0 0 1em 1em;" title="My Pads (Framasoft)" />Au <a href="http://wiki.mozfr.org/FirefoxOS/GroupeCommunication" hreflang="fr" title="FirefoxOS/GroupeCommunication – Wiki Mozilla francophone">groupe comm pour Firefox OS</a>, nous avons régulièrement des critiques de personnes extérieures au groupe ou des questions de nouveaux membres sur l&#8217;utilisation d&#8217;outils non libres, fermés ou centralisés sur les serveurs des aspirateurs à données personnelles souvent américains, en particulier à propos des Google Docs et de Vidyo. Pour faire avancer le débat et inscrire dans le marbre avec un lien à indiquer aux futurs critiques, j&#8217;ai ajouté <a href="https://blog.mozfr.org/post/2015/04/Ce-qui-a-etonne-Pyves-en-rejoignant-le-groupe-comm-pour-Firefox-OS-et-Mozilla#c17163" hreflang="fr" title="Commentaire de Mozinet sous Ce qui a étonné Pyves en rejoignant le groupe comm pour Firefox OS et Mozilla (16 avr. 2015) Communauté Mozilla francophone">un commentaire</a> sous <a href="https://blog.mozfr.org/post/2015/04/Ce-qui-a-etonne-Pyves-en-rejoignant-le-groupe-comm-pour-Firefox-OS-et-Mozilla" hreflang="fr" title="Ce qui a étonné Pyves en rejoignant le groupe comm pour Firefox OS et Mozilla (16 avr. 2015) Communauté Mozilla francophone">l&#8217;article du blog communautaire</a> qui l&#8217;évoquait. Dans la même optique, je le reposte ici&#160;:</p> <hr /> <p>Nous fondons de grands espoirs sur le développement par Framasoft du plugin MyPads<a href="http://blogzinet.free.fr/blog/index.php?post/2015/05/08/Des-outils-de-travail-centralises-fermes-du-groupe-de-communication-communautaire-Firefox-OS#note812-1" title="Cliquez pour aller à  la note de fin : « L’objectif poursuivi est l’obtention d’une version stable dans la première quinzaine du mois de mai. » in MyPads : développement, point numéro 3 sur le Framablog (16 avril 2015)" id="appel812-1" class="anote">*</a> pour Etherpad issu du financement participatif. Actuellement, les pads n&#8217;offrent pas pour le travail en groupe sur des articles les fonctionnalités qui nous ont fait choisir les Google Docs. Nous utilisons cependant Etherpad quand c&#8217;est pratique pour d&#8217;autres types de contenus.</p> <p>Nous sommes conscients des réticences de certains à entrer dans le système Google. Cependant, nos documents de travail chez Google – juste nos documents de travail – sont publics et archivés (notre démarche reste documentée). Nous faisons en sorte d&#8217;indiquer les liens dans nos outils (<i lang="en">mailing list</i> publique et ouverte à tous sans approbation préalable, Trello public) permettant à chacun suivant le lien de les modifier même anonymement. Ce serait bien différent si nous étions dans un contexte de secret professionnel, médical, des affaires, de fabrication, bancaire, d&#8217;État, de polichinelle…</p> <p>Notre travail étant ouvert, se déroulant en très grande majorité sur des canaux publics et son résultat étant d&#8217;être publié, nous avons moins de scrupules à le livrer un peu à l&#8217;avance à Google.</p> <p>Notez aussi qu&#8217;une partie des participants échangeant les contenus ou leurs avis avec Gmail, Google est au courant de nombre de discussions qu&#8217;on aimerait mieux voir restées circonscrites dans le cercle des confidents. Nous (et les autres) n&#8217;avons donc déjà pas toutes les cartes entre les mains.</p> <p>Nous sommes un petit groupe, loin d&#8217;être tous techniciens du logiciel et des serveurs. Nous n&#8217;avons pas d&#8217;énergie à dépenser à essayer d&#8217;installer des solutions libres et décentralisées. On nous critique souvent là-dessus sans nous proposer de meilleure solution. Même pour un groupe qui évolue dans le milieu du logiciel et de la high tech, la chemin vers la décentralisation et le contrôle des données personnelles (que nous défendons) est rude…</p> <p>Un jour, je vous parlerai de Vidyo et de Trello…</p> <div class="notesfin"> <hr /> <p><a href="http://blogzinet.free.fr/blog/index.php?post/2015/05/08/Des-outils-de-travail-centralises-fermes-du-groupe-de-communication-communautaire-Firefox-OS#appel812-1" title="Cliquez pour revenir à l'appel de note : développement par Framasoft du plugin MyPads" id="note812-1">Note&nbsp;(*)</a>&#160;: <q cite="http://framablog.org/2015/04/16/mypads-developpement-point-numero-3/">L&#8217;objectif poursuivi est l&#8217;obtention d&#8217;une version stable dans la première quinzaine du mois de mai.</q> <i lang="la">in</i> <a href="http://framablog.org/2015/04/16/mypads-developpement-point-numero-3/" hreflang="fr">MyPads&#160;: développement, point numéro 3</a> sur le Framablog (16 avril 2015).</p> <hr /> </div> <p>Illustration&#160;: Framasoft, sous licence <cite lang="en">Creative Commons</cite> <a href="http://creativecommons.org/licenses/by-sa/4.0/deed.fr" hreflang="fr" title="Creative Commons – Attribution - partage dans les mêmes conditions 4.0 international – CC BY-SA 4.0">Attribution - partage dans les mêmes conditions 4.0 international</a> (CC BY-SA 4.0). </p><p>—</p> <p>© 2010-2014 Mozinet - Ce billet a été publié sur <a href="http://blogzinet.free.fr/blog/" hreflang="fr">BlogZiNet</a>.</p> My PadsAu groupe comm pour Firefox OS, nous avons régulièrement des critiques de personnes extérieures au groupe ou des questions de nouveaux membres sur l’utilisation d’outils non libres, fermés ou centralisés sur les serveurs des aspirateurs à données personnelles souvent américains, en particulier à propos des Google Docs et de Vidyo. Pour faire avancer le débat et inscrire dans le marbre avec un lien à indiquer aux futurs critiques, j’ai ajouté un commentaire sous l’article du blog communautaire qui l’évoquait. Dans la même optique, je le reposte ici :


Nous fondons de grands espoirs sur le développement par Framasoft du plugin MyPads* pour Etherpad issu du financement participatif. Actuellement, les pads n’offrent pas pour le travail en groupe sur des articles les fonctionnalités qui nous ont fait choisir les Google Docs. Nous utilisons cependant Etherpad quand c’est pratique pour d’autres types de contenus.

Nous sommes conscients des réticences de certains à entrer dans le système Google. Cependant, nos documents de travail chez Google – juste nos documents de travail – sont publics et archivés (notre démarche reste documentée). Nous faisons en sorte d’indiquer les liens dans nos outils (mailing list publique et ouverte à tous sans approbation préalable, Trello public) permettant à chacun suivant le lien de les modifier même anonymement. Ce serait bien différent si nous étions dans un contexte de secret professionnel, médical, des affaires, de fabrication, bancaire, d’État, de polichinelle…

Notre travail étant ouvert, se déroulant en très grande majorité sur des canaux publics et son résultat étant d’être publié, nous avons moins de scrupules à le livrer un peu à l’avance à Google.

Notez aussi qu’une partie des participants échangeant les contenus ou leurs avis avec Gmail, Google est au courant de nombre de discussions qu’on aimerait mieux voir restées circonscrites dans le cercle des confidents. Nous (et les autres) n’avons donc déjà pas toutes les cartes entre les mains.

Nous sommes un petit groupe, loin d’être tous techniciens du logiciel et des serveurs. Nous n’avons pas d’énergie à dépenser à essayer d’installer des solutions libres et décentralisées. On nous critique souvent là-dessus sans nous proposer de meilleure solution. Même pour un groupe qui évolue dans le milieu du logiciel et de la high tech, la chemin vers la décentralisation et le contrôle des données personnelles (que nous défendons) est rude…

Un jour, je vous parlerai de Vidyo et de Trello…


Note (*) : L’objectif poursuivi est l’obtention d’une version stable dans la première quinzaine du mois de mai. in MyPads : développement, point numéro 3 sur le Framablog (16 avril 2015).


Illustration : Framasoft, sous licence Creative Commons Attribution - partage dans les mêmes conditions 4.0 international (CC BY-SA 4.0).

© 2010-2014 Mozinet - Ce billet a été publié sur BlogZiNet.

]]>