14 novembre 2015

React : interface monopage avec timeline

Quelques jours passés sur une interface de type SPA, que j'ai conçue et développée en vue de connaître ReactJS.

Elle interroge l'API de Github et a pour objectif de rechercher des dépôts. Elle va permettre de les trouver via un terme présent dans leur nom ; l'utilisateur est en option.

"Recherche de dépôts sur Github"

C'est une interface monopage qui présente un formulaire de recherche, la liste des résultats, et une information détaillée pour chacun des résultats.

23 juin 2015

Jeux web (5/5) : jeu des milieux

Quatre jeux web éducatifs que j'ai développés chez Ludwik, pour le parc naturel des Alpilles et sur le thème des oiseaux.
Ces jeux sont de type :

Le jeu des milieux

Le jeu des milieux - démo - est un jeu de type exploration-placement. Il propose trois phases : exploration, placement, relecture.

Mutualisation des structures et des développements

Les scripts de ce jeu - déposés sur Github - reprennent des fonctionnalités des jeux précédents :

22 juin 2015

Jeux web (4/5) : puzzle

Quatre jeux web éducatifs que j'ai développés chez Ludwik, pour le parc naturel des Alpilles et sur le thème des oiseaux.
Ces jeux sont de type :

Le puzzle

Le puzzle - démo - est un jeu de type placement. Venu deuxième dans l'ordre du développement des jeux, il est généré à partir de ses propres pièces, qui sont des éléments SVG dispersés sur la page au chargement.

Jeux web (3/5) : cache-cache

Quatre jeux web éducatifs que j'ai développés chez Ludwik, pour le parc naturel des Alpilles et sur le thème des oiseaux.
Ces jeux sont de type :

Le jeu de cache-cache

Le jeu de cache-cache - démo - est un jeu de type exploration. Il faut explorer un paysage avec un "projecteur" pour l'éclairer et trouver les oiseaux. L'on peut ainsi révéler leur nom et entendre leur chant. Il y a à explorer quatre paysages représentatifs du parc des Alpilles.

Jeux web (2/5) : jeu des tailles

Quatre jeux web éducatifs que j'ai développés chez Ludwik, pour le parc naturel des Alpilles et sur le thème des oiseaux.
Ces jeux sont de type :

Le jeu des tailles

Le jeu des tailles - démo - est un jeu de type classement. Il consiste à déplacer quatre oiseaux pour les trier selon leur taille. Le résultat correct déclenche une animation de mise à l'échelle relative des oiseaux.
Ce jeu est présenté en quatre séries.

Jeux web (1/5) : présentation

J'ai développé des jeux web éducatifs chez Ludwik. Le thème en était les oiseaux. Il en a résulté un site responsive, compatible avec une couche ARIA.
Les quatre jeux sont manipulables tactilement et à la souris.

Cette commande, émanant du parc naturel des Alpilles dans le cadre d'une exposition permanente, concernait la livraison de jeux consultables sur destktop, tablette et mobile - les spécifications restant assez générales par ailleurs.

Aperçu technique

Les jeux passent ainsi sur des terminaux iOS et Androïd, de bureau… Le code des pages développées est clair et léger. Les interfaces sont basées sur HTML5, JavaScript orienté prototype - scripts déposés sur Github - SVG, jQuery UI (drag and drop, position).

Les technologies, réserve faite du plugin de drag and drop, sont employées d'une manière native :

  • HTML pour le sens de la structure ;
  • CSS pour la présentation et les effets ;
  • SVG pour les formes sensibles, manipulables ;
  • JavaScript orienté prototype avec des fonctions constructrices conçues selon les instances des éléments de l'interface ;
  • l'url pour accéder aux déclinaisons de chaque jeu.

Notes sur la conception

Ludwik est une société d'ingénierie culturelle, qui se site en-dehors de la production web. La conception finale des jeux provient à la fois ainsi des idées du fondateur de Ludwik, de mes discussions avec lui, de mes versions prototypes et POC, et d'échanges avec le Parc.
A ces tâches de spécification itérative s'est liée une réflexion sur le but pédagogique, l'accès à des informations ornithologiques et écologiques : en savoir plus sur l'apparence, le chant, la taille des oiseaux, aussi bien que sur leur environnement, en particulier dans l'habitat naturel du parc des Alpilles.

Autre axe dans l'élaboration des scénarios, que chaque étape d'un jeu stimule l'envie de poursuivre dans la manipulation et la découverte des oiseaux.

Les quatre jeux

L'ensemble est constitué de quatre jeux de type :

13 avril 2015

Personnaliser un contour sensible via SVG

Un élément HTML contenant un SVG peut tirer profit des <g pour établir des zones sensibles sur mesure : autrement dit, pour redéfinir ses contours. Par exemple, en superposant dans un SVG une image à fond transparent et un <path qui en reprend le contour, il est possible de gérer des événements en fonction du contour précis du vecteur. De l'élément, seul le vecteur bénéficie de la propriété "pointer-events", et il est sans couleur. Sa forme prennd alors la préséance sur la forme rectangulaire de l'élément HTML.

La technique permet d'atteindre un élément situé derrière mais visible via un vide interne - pour le passer en premier plan par exemple - et de gérer la sensibilité au survol, au clic etc. d'un élément selon des contours ainsi totalement redéfinis.
À noter aussi que ces zones sont aisément responsives, peuvent être transparentes ou stylées etc.

Une démo sur Equatorium.

Cela repose aussi partiellement sur JavaScript - gestion des événements, application des classes CSS.

Et s'avère utile pour développer puzzles et autres jeux web, comme je le fais actuellement pour la société Ludwik (ingénierie culturelle).
À noter en passant, outre le caractère responsive des interfaces et de ses composants (voici une loupe), le SVG présente bien d'autres d'autres avantages - dont la génération de la "scène" du puzzle à partir des pièces le constituant.

07 janvier 2015

Chaîne des affectations et chronologie d'exécution en JavaScript

Avec des expressions JavaScript comme :

a = b = 4;
c[i] = c[++i] = 4;

les opérateurs d'affectation sont évalués de droite à gauche, mais chaque opérande est d'abord évalué distinctement de gauche à droite.

Ainsi, dans la chronologie de l'exécution, les opérandes sont individuellement évalués à partir de celui de gauche, avant d'être chaînés à partir de la droite via l'opérateur d'affectation. L'expression est alors globalement évaluée à rebours des évaluations individuelles.