Voici une (très) petite expérimentation. Le défi était de réaliser un jeu en HTML / CSS, sans JavaScript, avec un code minimal.

Si vous êtes développeur, vous serez probablement intéressés par jeter un oeil au code source.

Pour les autres visiteurs, passez votre chemin : outre le côté prouesse technique, le jeu n'a pas vraiment d'intérêt...

Dans ce petit jeu, initialement prévu pour mobile et réadapté pour le web, une boîte mystérieuse prend des nombres pour les transformer en d'autres nombres. À vous de deviner la règle !

Derrière ce concept simple, il y a une démarche éducative. Nous essayons de faire adopter au joueur une démarche scientifique : il observe un phénomène et essaie de comprendre la règle qui le régit. Il échafaude une théorie qui si elle est valide devrait, comme en sciences, l'aider à faire des prédictions.

Côté technique, ce jeu est codé en HTML, JavaScript et CSS, et ne présente pas de difficulté notable de réalisation.

Au cours de précédents projets, nous avons acquis une bonne expérience dans le traitement et l'affichage de données cartographiques.

Nous avons décidé, lors des élections présidentielles et législatives, de les mettre à l'oeuvre pour générer des cartes de résultats.

Les cartes affichées traditionnellement dans les médias sont un peu toutes pareilles, et selon nous pas toujours très efficaces niveau lisibilité (par exemple le Front National et l'UMP sont souvent affichés dans des teintes proches, ce qui rend difficile de les distinguer au premier coup d'oeil).

Nous avons donc voulu nous démarquer un peu, en travaillant sur les codes couleurs, mais aussi en proposant des cartes inédites : où sont les candidats dits "régionalistes" ? en quelle position arrive le Front National ? dans quelles circonscriptions votre voix compte-t-elle le plus ?

Étant les seuls à proposer une carte des résultats du Parti Pirate, ça nous a valu d'être repris par un grand nombre de médias.

Côté technique, ces cartes sont des images générées en HTML5 par un mélange de Canvas et SVG, à partir de données servies par un programme en ruby.

Cette section "élections" était une sorte de démonstration de nos savoir faire, n'hésitez pas à nous contacter pour des projets de cartes, ou plus généralement d'affichage de gros jeux de données.

Jeu réalisé par Pierre dans le cadre du Ludum Dare, compétition mondiale pour laquelle chaque participant doit créer seul et entièrement un jeu en 48h, sur un thème annoncé au dernier moment.

Le thème de cette édition était "10 seconds", et le jeu porte sur la perception du temps.

Il a été bien classé parmi les 1436 jeux soumis, notamment dans les catégories :

• Utilisation du thème : 6 ème
• Musique et audio : 7 ème
• Caractère innovant : 58 ème
• Général : 63 ème

Pour la technique, il s'agit de HTML et JavaScript, les animations et le style étant purement CSS3 (pas de Canvas). Plus de détails ici.

Pour ce genre de concours, où l'on crée sous pression en temps limité, porter une attention à la qualité du code est plutôt superflu, mieux vaut foncer. Ceci dit, ça peut être aussi vu comme une bonne occasion d'essayer de nouvelles choses, de nouvelles façons de coder, de se mettre en difficulté.

Là, ce fut l'occasion d'expérimenter une architecture très centrée sur de l'événementiel, en découplant un maximum les composantes : moteur du jeu, niveaux, rendu graphique.

Le code source est plutôt propre, et disponible sur Github.

Voici un petit jeu adapté aux mobiles, et pour lequel les contrôles sont minimalistes : un tap ou un clic fait changer la chenille de direction. Elle doit éviter les coccinelles.

Côté technique, c'est du HTML5, avec Canvas et JavaScript.

Cette réalisation date déjà de quelques années. Pas mal d'astuces CSS et JQuery avaient dû être utilisées à l'époque pour faire ce système de navigation commandé par un gros site, à partir de graphisme qui nous étaient fournis.

Avec un travail important sur les finitions des effets et sur la compatibilité, qui devait être large.

Parmi les points délicats : le changement de couleur des titres lorsque le rectangle de navigation passe partiellement dessus, ou les effets de survol sur du contenu d'arrières plan (alors qu'il y a des DIV au premier plan qui empêche d'utiliser :hover CSS).

Avec cette démo, nous voulions savoir si l'on pouvait reconstruire une animation avec l'api Canvas à partir d'une suite de d'images exportées d'une vidéo, et quelle fluidité et vitesse de chargement ça nous donnerait.

A l'occasion de l'établissement de nos cartes pour les législatives, nous nous sommes rendus compte que les limites géographiques des circonscriptions ne sont disponibles gratuitement nulle part (l'IGN et le ministère de l'Intérieur de les fournissent pas).

Un travail assez fastidieux, mais heureusement accéléré par nos outils interne de cartographie, a alors été entamé pour reconstruire ces contours, afin de proposer nos cartes.

Un des buts de cette opération, pour Toxicode, était de pouvoir proposer en exclusivité nos cartes aux médias, qui en étaient logiquement dépourvus aussi.

Ayant lancé tout ça pas plus de 3 semaines avant les législatives, et sans grande connaissance du milieu des rédactions des grands journaux, nous n'avons au final pas réussi à tirer de profit financier de nos efforts.

Nous avons alors décidé de mettre ses données à disposition du public, gratuitement sous licence OpenData.

Depuis, ces données ont été utilisées par des initiatives comme le site Nos Députés, mais aussi reprises ici ou sur la plateforme gouvernementale data.gouv.

La licence que nous avons associée à nos données permet un usage gratuit, à condition de citer les sources. Au vu des centaines de téléchargements que nous avons enregistrés, il semblerait que de nombreux utilisateurs n'aient pas joué le jeu... il nous est d'ailleurs arrivé de tomber par hasard sur des cartes dans la presse établies avec notre jeu de données, sans nous citer. Pas très fair play...

C'est fascinant comme souvent des règles très simples peuvent engendrer des structures complexes...

Cette démo construisant le triangle de Sierpinski en est un exemple typique.

En jetant un oeil au code source, les non programmeurs d'entre vous pourront déjà constater qu'il ne faut pas plus de quelques lignes de code pour générer cette image (seules 7 de ces lignes concernent vraiment la recette de fabrication, le reste est du pur affichage).

Les programmeurs, à vous de décortiquer le code pour comprendre la recette... ce que vous découvrirez vous étonnera probablement : il n'y a pas de fonctions récursives.

Nous participons de temps en temps à des hackathons, comme celui d'AXA, dédié à la relation client.

Notre proposition a été nominée et présenté à deux reprises à des responsables d'AXA France.

Il s'agit de proposer aux clients de soumettre des idées pour améliorer les services, et de voter pour celles qu'ils soutiennent. Bien que le principe soit simple, ce sont les détails d'implémentation et la politique de communication avec les clients qui détermine le succès d'une telle initiative.

Un exemple de projet de ce genre qui a bien réussi, c'est Ideastorm de Dell, qui leur a permis il y a quelques années de renverser la mauvaise réputation qu'ils commençaient à avoir au niveau de leur service client.

Techniquement, notre projet est en HTML5, interfacé avec Salesforce.

Pour cette mini démo, le défi technique était de montrer jusqu'où on peut aller en HTML et CSS sans utiliser un seul bout de JavaScript

Attention : ne tourne que sur Chrome (Firefox et Internet Explorer n'acceptent pas certaines instructions CSS employées).

Le code source est affreux, long et redondant, mais le rendu final est fonctionnel, preuve qu'on peut créer des comportements complexes en CSS.

Évidemment, la même chose réalisée avec du JavaScript serait énormément plus courte, plus élégante, et facile à programmer.

Lors de notre collaboration avec Tralalère sur les projets GameCode et DataDecode, nous avons été amenés à utiliser Blockly : un outil de programmation par bloc pour navigateur inspiré de Scratch. C’était l’occasion de se pencher sur ce qu’apporte cette façon de programmer, ainsi que sur son ergonomie.

Blockly fournit un certain nombre de blocs de bases (“if”, “repeat”, “variables”, etc…). Pour les besoins des projets, nous avons dû créer des blocs personnalisés et nous occuper de la transpilation bloc vers javascript.

Nous avons également réalisé notre propre boîte à outils, car celle fournie par Blockly n’est pas assez personnalisable. Nous avons abouti à quelque chose de plus souple et simple à personnaliser, pour l’ajout de descriptions et titres par exemple. Une des difficultés a été de coder le drag-and-drop des blocs depuis la boîte à outils vers l’environnement de création, car on passe d’un environnement DOM vers canvas.

En résulte notre propre surcouche à Blockly que nous avons éprouvée sur les projets de Tralalère.