Gaëtan L. : notes en front-end

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 :

classement ;
exploration ;
placement (puzzle) ;
exploration-placement.

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 :

classement ;
exploration ;
placement (puzzle) ;
exploration-placement.

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.

16 décembre 2014

CSS alternatifs aux pseudo-classes avec PHP et Modernizr

PHP paramètre JavaScrit qui charge le cas échéant des CSS alternatifs : eux-mêmes générés via PHP uniquement dans les cas nécessaires…
exemple.

Il est difficile lors de l'exécution PHP, d'anticiper des particularités telles que la présence de JavaScript, l'interprétation de HTML5, le niveau de CSS supporté etc. Il faut en général générer une page qui s'adaptera aux contraintes du front une fois chargée par le navigateur.

Il reste possible de ne générer de solutions alternatives aux CSS avancés que dans les cas précis où cela soit nécessaire.

20 septembre 2014

Notes d'animation et de stylage

Une interface de losange animé pour rassembler quelques notes :
equatorium.net/e1/an--animations/an-losange.html

Enchaînement de durées "aléatoires" pour 'transition'

Chaîner des transitions CSS de durée pseudo-aléatoire sur le mode 'toggle' sans latence.

31 juillet 2014

:target : pseudo-classe rafraîchie avec pushState()

En évoquant il y a trois jours ':target' et son manque d'harmonie avec une url re-formulée par "pushState()", se posait la question du problème sur IE 10 - Windows ne fait pas l'écran à la maison le week-end.
Le problème y est identique. Les solutions proposées alors fonctionnent bien sur IE 10 et 11, mais sans le déplacement dans l'historique - boutons "back" et "forward" via notamment le clavier.

Rafraîchir ':target' sans s'occuper du DOM

27 juillet 2014

:target : pseudo-classe à concilier avec pushState(),
et IE 8

Edit du 31/07/2014 : voir aussi :target : pseudo-classe rafraîchie avec pushState().

La pseudo-classe CSS 3 ':target' sélectionne l'élément du DOM pouvant correspondre à une ancre dans l'url. Une navigation interne à la page, d'ancre en ancre, se fait en général directement, et l'un des soucis serait alors de savoir si l'on veut tenir compte d'Internet Explorer 8.

Et IE 8

Il y a une réponse avec 'onhashchange' : La pseudo-classe ':target‘ : alternative pour IE 8.

"pushState()" ne rafraîchit pas ':target'

Dès que l'on rajoute une couche de liaison entre navigation interne et l'url de la page, une question épineuse se pose.

21 juin 2014

Outils couleurs : pour des contrastes suffisamment accessibles

Les WCAG 2 fournissent une formule pour établir le ratio entre deux couleurs. La formule est exprimable en JavaScript.

Il est ainsi possible de déterminer, dans un spectre de couleurs complémentaires à une couleur précise, laquelle lui sera la plus fortement contrastée. Dans l'algorithme, ce spectre est paramétrable sur trois teintes :
- code générique ;
- interface pour 4913 couleurs à partir de 3 complémentaires.

Il l'est tout aussi facilement sur cinq teintes : interface pour 4913 couleurs à partir de 5 complémentaires.

En laissant la notion de complémentaire pour élargir la sélection à un spectre élargi à toutes les nuances : un outil pour obtenir une couleur contrastée renforcée.

PS : ce formulaire est désormais riche de fonctionnalités ARIA
- "Accessible Rich Internet Applications".

PPS : essais systématiques sur www.equatorium.net/e1/declinaisons, dont couleurs-contrastes-5 qui manifeste qu'il n'y a pas de corrélation directement proportionnelle entre le ratio et la valeur de luminance L du système HSL.

26 mars 2014

Outil CSS : générer des pseudo-classes CSS ':nth-child()'

J'ai mis en ligne un générateur de pseudo-classes CSS "nth-child(in+o)" : Générer des pseudo-classes CSS ':nth-child()' \ Canopée / Equatorium.

Avec le projet de le compléter : avec une couche WAI-ARIA ; et avec des graphiques SVG - reste à voir si je saurais porter l'accessibilité dans le SVG.

Note janvier 2016 : en cours de refonte totale.

04 mars 2014

Interface : player-animateur d'une séquence d'images

Depuis plus d'un an, je n'ai pu trouver à continuer ce player, qui anime une séquence d'images, en y développant la synchronisation sonore - mise à jour 25 mai 14 : ni à en développer les indications temporelles, les raccourcis clavier etc. ~~ni à en repenser l'interaction (clic sur barre lecture en mode play ?)~~ :
Player-animateur d'une séquence d'images (2012).

Édit du 14 novembre 2015 : il fonctionne avec la barre de contrôle traditionnelle située sous le player, mais également avec la barre de scroll verticale.
Dépôt sur Github

Source (vidéo) des images :
Dessin animé : Un monde de logos !! - Nouveau logo - creads blog.

24 janvier 2014

JavaScript : condition ou opération mathématique

NB 141221 : utile avec la manipulation et conversion des types JavaScript
cf. mémo opérateurs JavaScript.

Pour l'efficacité du code, l'on peut vouloir éviter une condition par le recours à une clé ou un index appelant telle fonction :

19 janvier 2014

Outil javascript : url anti-cache en Ajax récursif

L'ajax récursif, utile pour accéder au code source d'une page, à ses données HTTP etc. doit tenir compte de la dernière version de la page sans s'en tenir au cache du navigateur. L'on pourrait lancer une requête avec la méthode classique pour forcer le rafraîchissement : le passage de query string. Le problème sur un CMS tel que Drupal, est le ralentissement considérable causé par ces paramètres supplémentaires d'url.

Une solution réside dans l'insertion d'un identifiant. Liant authentification, droits d'utilisateur et accès au contenu, la variation de cet identifiant devrait théoriquement, et je l'ai en pratique constaté, lancer la requête sans être arrêté par le cache.
Sur Internet Explorer cependant, et sans trop de surprise, il faut s'en tenir aux paramètres traditionnels.

var url = document.location.href;
ajax.open("GET",msie > 0 ? 
     url + ((/\?/).test(url) ? "&" : "?" ) + new Date().getTime() :
     url.replace(/\/{2}/,"//" + new Date().getTime() + "@"),
true);

Exemple dans un bookmarlet de récolte de données.

03 décembre 2013

Outil JavaScript : adapter l'encodage d'un Ajax récursif

La balise '<meta' ou à défaut, la propriété 'document.characterSet', permettent d'accéder à l'encodage d'une page web. Cependant, l'encodage réel du fichier source peut s'avèrer différent - d'où de possibles problèmes d'affichage - ou des soucis en cas d'Ajax "récursif".

Outil JavaScript : références non "parsées" du code et Ajax récursif

Dans le cadre de mon activité d'intégrateur HTML, j'ai eu à concevoir une réponse à cette question : comment accéder en JavaScript au code source d'origine d'une page web, avant son analyse par l'agent utilisateur ?

23 septembre 2013

Outil CSS : étanchéifier des éléments contenants

.ec:before {
    content: "\8";
    display: block;
    height: 0;
    text-indent: -4444px;
}
.ec:after {
    clear: both;
    content: " ";
    display: block;
}

Objectifs :

encadrer des flottants sans recourir à la propriété 'overflow' sur l'encadrant, ni à 'clear' sur l'élément qui suit ;
attribuer une marge supérieure à un élément (non flottant) sans incidence sur l'élément parent ;
avoir la possibilité de tenir compte le cas échéant de Safari 3 :) - testé sur Win 7 - et en oubliant ici IE 6 et 7.

19 août 2013

Outil JavaScript : détecter l'activation des styles pour améliorer l'accessibilité et optimiser les scripts

…
var detectionCSS = false;
function detecterCSS(){
 var b = document.getElementsByTagName("body")[0];
 var x1 = b.offsetWidth;
 b.style.width = x1 - 1 + "px";
 var x2 = b.offsetWidth;
 b.style.width = "";
 detectionCSS = x1 == x2 ? false : true;
}
</script>
</head>
<body>
<script>
detecterCSS();
</script>

Récemment écrit pour un site de Sanofi - mais en XHTML 1 :
=> présent dans l'en-tête via l'appel d'un fichier 'techno-abilities.js', qui contient aussi Modernizr et l'ajout d'une classe 'js' - afin, réciproquement, de détecter l'activation du JavaScript pour les CSS.

La variable 'detectionCSS' est ensuite sollicitée dans les scripts qui sont appelés à la fin de 'body'.
Exemple : définir une fonction vide pour un carousel avec styles désactivés.

18 août 2013

Note CSS : unités accessibles pour font-size

Cf. article de Matthieu Bué : Font-size, Responsive et Accessibilité : le Bon, la Brute et le Truand » Webdesign Friday (#wdfr)

Elément body réglé à cinq huitièmes (62,5%) de 16px (réglage agent par défaut) càd élément body réglé à 10px obtenu au 'reset' par :
body {font-size: 62.5%}

L'unité 'em' est préférable à l'unité 'px' quand on tient compte d'utilisateurs accoutumés au maniement de vieux IE ;
et formellement aussi, de référentiels d'accessibilité
(et du gadget A⁺)
avec l'inconvénient de calculs pour compenser les héritages.

CSS3 résout la question de l'emboîtement avec l'unité 'rem' ('r' pour "root")
NB : non encore personnellement testé

En tentant a priori 'rem' CSS3 avec compatibilité IE7-8 :
h2{font-size: 2.2em; font-size: 2.2rem;}
comment traiter théoriquement les niveaux intermédiaires ?
- si l'on y évite 'font-size', quelle utilité alors pour 'rem' ?
- sinon multiplication des calculs :
.divpourh2 {font-size: 1.1em;} h2 {font-size: 2em; font-size: 2.2rem;}
rendant de nouveau 'rem' superflu.

"Commentaires" le 4 mars 2014

1) Ce n'est pas une bonne idée de régler une font-size de base.
Eviter 62.5% car on ne sait pas de quoi in fine,
certains rares navigateurs n'adoptant pas 16 px par défaut 
- le 13 juin 2014 : la détection de '.css("font-size")'
par jQuery renvoie une valeur en pixels, 
qui est celle de ce réglage si l'élément s'affiche en '1em'.
Et surtout liberté de l'utilisateur d'adapter
ses possibilités de lecture via le paramétrage du navigateur.

2) Pour savoir de quoi sont 62,5%, il faudrait contrarier
d'éventuelles préférences utilisateur, avec
html {
 font-size: 16px;
}
NB : mais en ce cas autant imposer directement
html {
 font-size: 10px;
}
sans prendre la peine du 62.5

Faut-il contrôler le rendu à ce point ?

Sans doute vaut-il mieux :

- s'abstenir de définir 'font-size' pour html et pour body, 
et prendre la peine de calculer en em en prenant 
comme base probable 16px - avec, dans certaines zones au pixel près
(mentions légales ?), une zone intermédiaire à 10px,
pour avoir en-dessous de l'em décimalement précis

- dans des projets à trop forte contrainte graphique :
html {
 font-size: 10px;
}
"et basta"

Liens compatibilité

Fil d'une lecture :