Après plusieurs mois de travail intense, la plateforme technique qui supporte MDN vient de changer. Originellement basée sur la solution DekiWiki de la société MindTouch, la documentation de Mozilla vient de passer sous une solution 100% maison : Kuma. Kuma est un projet codé à l’aide de Python/Django et est directement inspiré de la plateforme qui supporte déjà SUMO (le support utilisateur de Firefox) connu sous le nom de Kitsune.

Comme tous les projets Mozilla, Kuma est 100% open source. Le code est disponible sur GitHub et vous êtes largement invité à proposer patches et fixes si vous en avez envie

Le principal intérêt pour MDN de passer sur une plateforme ouverte et développée par Mozilla est simple : Pouvoir maîtriser les évolutions à apporter à la plateforme pour garantir la meilleure expérience utilisateur possible sur MDN. En la matière, les besoins sont importants et Mozilla a de grandes ambitions pour MDN.

Quoi de neuf ?

Si la plateforme, très jeune, souffre encore de quelques bugs en cours de résolution, les premières améliorations sont déjà visibles. Les deux plus évidentes sont liées à la localisation et aux templates personnalisés.

Concernant la localisation des contenus, disons-le clairement : on ne pouvait pas faire pire que ce qu’il y avait avant. Désormais, à chaque fois que vous voulez traduire une page, vous disposerez toujours de la version anglaise d’un coté et de votre propre version de l’autre, de même les liens entre les différentes versions localisées seront automatiques et vous avez même la possibilité de localiser l’URL de chaque page comme bon vous semble. La fonctionnalité la plus intéressante est liée à la navigation : lorsque vous naviguez sur une version locale de MDN (disons, le français par exemple) et qu’un contenu n’est pas disponible dans cette langue (souvent matérialisé par un lien rouge), vous accèderez automatiquement au contenu en anglais avec un bandeau vous proposant directement de traduire ce contenu.

Concernant les templates personnalisés, l’équipe de développement a créé un langage de script entièrement basé sur JavaScript (exécuté coté serveur) qui porte le nom de KumaScript. En clair, c’est du JavaScript avec quelques extensions pour en faire un langage de gabarit autonome (précédemment, il s’agissait d’un langage basé sur Lua, peu ou pas extensible). Les API disponibles restent encore sommaires, n’hésitez donc pas à ouvrir des bugs si vous avez des besoins particuliers. Ce système de template permet de créer des automatismes et des gabarits faciles à réutiliser d’une page à l’autre et il y a beaucoup à faire en la matière.

Et après ?

Dans les prochains mois, de nouvelles fonctionnalités vont faire leur apparition. La semaine dernière, toute l’équipe MDN (rédacteurs et développeurs) ainsi que quelques contributeurs se sont réunis à Toronto pour planifier et prioriser ces améliorations, 3 jours intenses sous la direction d’Ali Spivak, la nouvelle « Product Manager » de MDN. La listes de toutes les idées que nous avons amenées est beaucoup trop longue pour tout vous mettre ici… disons simplement que l’équipe de développement a du boulot pour plusieurs années si personne ne les aide

Parmi les principales priorités, les éléments suivant sont ressortis et vont faire l’objet d’un effort particulier dans les prochaines semaines/mois :

1. Sécurité

La plateforme étant encore jeune, certaines fonctionnalités ont besoin d’êtres sérieusement passées au crible des questions de sécurité. Ainsi, des filtres vont être appliqués ou améliorés pour rendre l’édition à la fois plus souple et plus sur (en particulier pour lutter contre les attaques de type CSRF), la politique de sécurité actuelle étant de tout interdire par défaut (script, iframe, etc. ne sont pas permis, même pour des usages légitimes). De même, l’envoi de fichiers n’est pour l’instant pas permis mais tout cela va rapidement changer.

2. Exemples de codes

Un travail de fond va être réalisé pour permettre aux utilisateurs d’embarquer des exemples de code actifs et modifiables (à la jsFiddle ou dabblet), le tout dans des conditions garantissant la sécurité des utilisateurs et des contenus. C’est sans doute le plus gros chantier des mois à venir (et celui que j’attends le plus impatiemment pour pouvoir déployer des exemples dans la doc SVG ;).

3. Localisation

Les outils pour la localisation vont être très largement améliorés (oui, c’est possible). Il s’agit d’un travail qui va s’étaler sur plusieurs mois (voire plusieurs années). Une des premières améliorations va être la possibilité de choisir la langue d’origine pour réaliser une traduction (aujourd’hui, c’est forcément l’anglais). Dans le même temps les bases d’un tableau de bord vont être posées pour permettre de plus facilement prioriser et planifier les pages à traduire.

4. API d’écriture

Pour le moment, Kuma n’offre qu’une API en lecture des contenus de MDN. Afin de rétablir le fonctionnement de certains outils et permettre le développement d’outils de consultation et d’édition tiers, une API permettant d’écrire du contenu dans MDN va être mise en œuvre. L’objectif est de permettre aux personnes voulant éditer du contenu avec leur éditeur de textes préféré de le faire ou bien de permettre à certains projets utilisant d’autres systèmes de wiki (GitHub par exemple) de partager leurs contenus facilement sur MDN (c’est typiquement le cas du projet JetPack pour Firefox).

5. Présence dans les moteurs de recherche

MDN souffre encore de certains manques qui grèvent son indexation par les moteurs de recherche. Les points les plus évidents vont être rapidement améliorés : qualité des méta-données (titre et description) et ajout d’un sitemap.

6. Recherche et tableau de bord

Un travail de fond va être engagé afin d’améliorer sérieusement la qualité des recherches sur MDN (techniquement parlant, cela va passer par le déploiement d’une base de données Elastic Search) et permettre de poser les bases techniques permettant de créer un véritable système de tableau de bord pour les éditeurs. Ce tableau de bord permettra dans un premier temps aux éditeurs de suivre et filtrer les contenus qui les intéressent pour, dans un second temps se transformer en un véritable système d’échange, de communication et de coordination (mais tout ça va prendre du temps, il va falloir être patient).

Mais encore…

Tout cela n’est que le début. Bien d’autre demandes ont été émises, parmi lesquels ont été priorisées les suivantes :

• Localisation complète du système de tags
• Possibilité de déplacer des ensembles de pages en une fois
• Améliorer les liens croisés entre documentation et démos
• Mettre en base de données, automatiser et partager les tables de compatibilité navigateurs
• Améliorer le bandeau de localisation des articles non-traduit pour directement choisir la langue d’affichage alternative

Et bien plus encore… Si cela vous intéresse, vous trouverez toutes les notes de la semaine de travail sur ce Pad : https://etherpad.mozilla.org/MDN-Toronto-2012

Enfin, n’hésitez pas à ouvrir des bugs si vous avez des besoins ou des fonctionnalités que vous souhaiteriez voir dans MDN. L’équipe a profité de la réunion de la semaine dernière pour revoir son système de triage et de priorisation des bugs afin que leur traitement soit plus simple et plus compréhensible par tout le monde. L’opportunité de travailler sur un redesign de MDN a également été évoqué, cela fera l’objet d’un projet à part entière dans les prochains mois.

Ce n’est certes que le début et nul ne sait comment tout ça va évoluer, mais les choses sont bien engagées et MDN est bien parti pour devenir la documentation de référence du Web ouvert en étant désormais lui-même ouvert et accessible à tous. Je profite de l’occasion pour remercier chaleureusement toute l’équipe de développement de Kuma : Luke Crouch (groovecoder), Les Orchard (lmorchard), David Walsh (darkwing) et James Bennett (ubernostrum). Ils font un travail remarquable qui mérite d’être souligné.

Bonne documentation (^_^)

J’ai eu la chance de participer à la Kiwi Party organisé le 4 mai 2012 par l’agence Alsacréations. En toute simplicité, j’ai envie de dire : « c’était vachement bien ! ».

Avant toute chose, un grand bravo au staff qui a assuré grave pour faire de cette journée un franche réussite et un remerciement tout spécial à Mme. Goetter qui a passé 15 jours en cuisine pour nous offrir un goutaÿ™ épique

En suite, un grand merci également a tous ceux qui sont venu à Strasbourg pour assister à l’événement. votre enthousiasme, votre plaisir manifeste à être là ont fait de ce moment un moment exceptionnel.

Au niveau des conférences, nous avons eu droit à un panel de très bon orateurs avec des sujets allant du référencement au développement en passant par l’accessibilité et la conception. Une partie des conférences ayant eu lieu en parallèle les unes des autres, je n’ai pas pu voir tout ce que je voulais, mais heureusement, elles ont toutes été filmées. Vivement que ces vidéos soient diffusées car j’ai hâte de voir les conférences de Vincent de Oliveira sur les effets graphiques avancés et celle de Frédéric Kayser sur la gestion des images pour le Web.

Parmi celles que j’ai pu voir, deux ont plus particulièrement retenu mon attention :

1. « Le développement HTML5 au sein de Windows 8 » présenté par David Rousset. Il s’est agit d’une excellente introduction aux principes de développement d’applications HTML5 pour Windows 8. Ce fut vraiment l’occasion de voir à qu’elle point Microsoft a décidé de jouer le jeu des standards du Web. Et même si toute la couche d’accès au système (appelée WindowsRT) reste encore une API JavaScript propriétaire, je suis persuadé que le développement des Web API standards permettra à Microsoft de d’offrir toujours plus d’interopérabilité.
2. « Conquérir l’internet des objets avec les technologies web » présenté par Steren Giannini. Si j’ai malheureusement raté le début de la conférence, ce que j’en ai vu m’a passionné. En particulier, il est vraiment intéressant de voir à quel point le Web sort de plus en plus des navigateurs traditionnels pour aller se nicher là ou on ne l’attend pas. C’est également très instructif de réaliser à quel point la diversité des supports rend toute forme de prédiction sur l’usage, l’interactivité ou le rendu visuel complètement hasardeuse.

De mon coté, j’ai eu la lourde tache de clôturer la journée en proposant une introduction aux transitions et animations CSS3. Je suis bien sur très mal placé pour juger ma performance, mais le nombre de retours extrêmement positifs que l’on m’a fait laisse penser que ça s’est plutôt bien passé (J’ai même eu droit à une tape sur l’épaule et à un « super » de la part de Karl Dubost… je croie que désormais, je peux mourir l’esprit en paix :P). Les slides de cette présentation sont bien sur disponible en ligne :

Voila encore merci à tous. Vivement l’année prochaine

Note for English speaker, there is an English version down below

Le 27 mai dernier, j’ai eu la chance de participer à la toute première édition de SudWeb à Nîmes. Partie sur une boutade lors du dernier Paris Web, les organisateurs se sont juste arrachés pour arriver à monter le truc en à peine 6 mois. Bravo à tous, ce fût beau ! Car on peut le dire, pour un coup d’essai, ce fût un coup de maitre. Au delà de la logistique impeccable, l’ensemble du programme des conférences était tout simplement parfait. Mixant à la fois les aspects fonctionnels, techniques et prospectifs, l’équilibre du déroulé m’a complètement estomaqué (ainsi que le respect des horaires, tenus d’une main de fer, couplé à des moments de pause ô combien conviviaux).

Vous n’y étiez pas ? Ce n’est pas grave. D’une part toutes les conférences ont été filmées et devraient être disponibles prochainement et d’autre part, il y aura une autre édition l’année prochaine, viendez-y

En ce qui concerne mon nombril, j’ai eu l’occasion d’y donner une conférence sur un sujet qui me tient à cœur depuis un peu plus d’un an : SVG. Au cours de cette conférence, j’ai montré ce qu’il était possible de faire aujourd’hui avec SVG (qui, rappelons le, est disponible dans tous les navigateurs moderne). Plutôt que de m’attacher aux questions techniques qui tourne autour de cette technologie, j’ai préféré mettre l’accent sur des outils et des résultats concrets. L’idée étant de montrer comment des designers et les développeurs on déjà utilisé SVG et ce qu’il apporte au web design moderne.

Évidemment, même si j’ai oublié de le préciser pendant la conférence, je n’ai pas pu m’empêcher de réaliser mes slides en SVG, les voici (cliquez sur l’image pour lui donner le focus et utilisez les flèches de direction pour passer d’un slide à l’autre) :

A noter que je cite tous les sites suivant :

Outils

• http://code.google.com/p/svgweb
• http://raphaeljs.com : Vous devriez tous avoir cette bibliothèque dans votre trousse à outils si vous voulez réaliser du SVG tout en étant compatible avec les vieux IE.
• http://www.highcharts.com : LA bibliothèque pour faire des graphiques de données sans vous casser la tête.
• http://mbostock.github.com/d3/ : D3.js est une bibliothèque qui vous permet de mapper des données au seins de graphiques vectoriels en SVG. C’est un pont technique idéal entre les développeurs qui doivent manipuler ces données et les designers qui doivent les mettre en scène.

Références

• http://www.thenounproject.com : Projet mettant à disposition des icones libres de droit au format SVG. Indispensable pour réaliser de la signalétique. A noter que toutes les icones proposées sont composées d’un seul est unique chemin SVG ce qui en fait une base travail extrêmement propre et malléable pour les Web designers.
• http://www.bifter.co.uk : Web comics humoristique intégralement réalisé en SVG.
• http://opendata.zeit.de/pisa-wohlstands-vergleich/visualisierung.php : Le journal allemand Zeit propose une visualisation de données démographiques intégralement réalisée en SVG
• http://www.nissanusa.com/leaf-electric-car/index : Dans la série “Non, ce n’est pas du Flash” Nissan USA fait une magnifique utilisation de SVG pour proposer une navigation non linéaire des caractéristiques de sa nouvelle voiture électrique. A noter que RaphaelJS est utilisé pour assurer la compatibilité avec IE6, 7 et 8 (et oui).
• http://rickardsund.com : Je n’ai pas de mot assez fort pour exprimer l’adoration que j’ai pour ce site. Pour moi, Il représente la quintessence du Web design moderne. D’un coté un design épuré à l’extrême qui sert parfaitement son propos. Il est l’œuvre de Hugo Ahlberg qui a un lourd passif de designer Flash, ce qui lui a permis de s’extraire des contraintes (artificielles) du design web traditionnel. D’un autre coté, il est intégré à la perfection en utilisant exclusivement des standards Web : HTML5 (à noter en particulier la magnifique utilisation de l’API History), CSS3, JS (Du “mouse gesture” de toute beauté) et bien sur du SVG (par petites touches mais indispensables). Ce travail formidable a été réalisé par Daniel Mahal et Daniel Connor qui font là une démonstration d’excellence de ce que devrais toujours être une intégration aux standards, en particulier la maitrise de la dégradation élégante qui est quasi parfaite : Ce site fonctionne dans IE6 ! Vous DEVEZ regarder la source de ce site et vous en inspirer.

Pour conclure, je n’ai plus qu’une chose à dire : Longue vie à SudWeb, vivement l’année prochaine

On May 27th, I got the chance to attend the very first SudWeb event in Nîmes, France. Starting on a joke during the last Paris Web event, the people behind SudWeb make it possible in just 6 months. Thanks dudes that was awesome! We can say it, for a first run that was a master piece. Beyond the perfect logistic, the program was just great. Talks were amazingly well balanced between functional, technical and prospective subjects (and the schedule was perfectly mastered with good time to talk and network with people).

You wasn’t their ? Don’t worry. First, all the talks were camcorded and should be available soon. Second, there will be another edition next year, attend it

On my own, I had the opportunity to give a talk about one of my favorite subject for a year now : SVG. During this talk, I show off what is it possible to make with SVG today (which, as a reminder, is available in all modern browsers). Instead of talking about technical stuffs, I focused on tools and practical results. The idea was to demonstrate how designers and developers had used SVG and what that technology brings to modern Web design.

Of course, even if I forgot to mention it during my talk, I felt oblige to made my slides with SVG. Here there are (see above, click on the image to give it the focus then use the arrow keys to switch between the slides).

Note that I use all the following web sites as examples:

Tools

• http://code.google.com/p/svgweb
• http://raphaeljs.com : You should all have that library in your toolbox if you want to use SVG with IE compatibility in mind.
• http://www.highcharts.com : THE library to build charts without headache.
• http://mbostock.github.com/d3/ : D3.js is a library that allow you to connect data with graphics. This is an awesome bridge between developers that deal with data and designer that deal with graphics.

References

• http://www.thenounproject.com : That project collect visual symbol and make them available in SVG. Note that all the symbols are made of one single SVG path. That make them highly usable as a work basis for Web designers.
• http://www.bifter.co.uk : A humorous Web comics build with SVG.
• http://opendata.zeit.de/pisa-wohlstands-vergleich/visualisierung.php : The dutch newspaper Zeit had a demographic data representation driven by SVG.
• http://www.nissanusa.com/leaf-electric-car/index : Ok, so “This is NOT Flash”. This is a great SVG work made by Nissan USA to build a non-linear navigation system. Take care about the library behind the scene, it’s RaphaelJS. This means that it works properly even with IE6, 7 and 8 (crazy!).
• http://rickardsund.com : I do not have strong enough words to express my love for this web site. To me, it’s the best of modern Web design. On the one hand, the simplistic design suits its subject perfectly. It has been made by Hugo Ahlberg who has extensive skills in Flash design. Those skills give him the ability to overcome the classic HTML web design. On the other hand, This Web site is perfectly develop with Web standards only : HTML5 (with a noticeable use of the History API), CSS3, JS (awesome mouse gesture) and, of course, some small (but essential) touches of SVG. This amazing work has been done by Daniel Mahal and Daniel Connor who demonstrate what a Web standards front-end development should always be. They especially mastered the graceful degradation: This site works perfectly with IE6 ! You SHOULD look at the source and use it as an inspiration.

To conclude, there is one thing left : Live long SudWeb, I strongly hope for the next edition