20 février 2020

De la formation 2019 : les suites début 2020

Achevant en juin 2019 une formation de Développeur web et web mobile (DWWM) chez WebForce3, je pensais me remettre à D3.js. C'était sans compter sur l'offre faite par le centre de formation de rester en tant que stagiaire. J'ai eu la chance de me consacrer alors à un projet passionnant : une interface web de suivi financier.
Des données tabulaires, des calculs entre elles, une interface aux petits oignons (responsive, accessible, valide), du JavaScript "orienté objet" (exploité dans sa base prototypale), du back PHP, une persistance MySQL, des API…

C'est ce projet que j'ai soutenu pour obtenir le titre professionnel.

Avant de pouvoir, en décembre, ajouter au projet la couche de dataviz que je m'étais promise (D3, quand tu nous tiens…), j'ai intégré une formation faisant suite à DWWM : Concepteur développeur d'applications, chez Simplon (à la fois partenaire et concurrent de WebForce3).
Après PHP, une super immersion dans l'environnement Python. Avec toute l'exigence et le bénéfice d'une pédagogie axée sur l'autonomie et la solidarité.

Entre temps, Rosalie Debesse m'avait fait le grand plaisir de me demander, pour son travail de community manager chez WebForce3, d'allier communication et syntaxe CSS : .web{ top: 100%; }, ou code.experience{ background: gold; }

Du côté de Photoshop enfin, continuant un apprentissage du photomontage entrepris en juin 2018, j'ai repris la publication sur mon compte Instagram 'gaetlan'. En me promettant un montage par semaine.
Je sais le risque de telles promesses ; mais si je l'écris ici, avec beaucoup de chance ça n'aura pas été innocent.

8 juin 2019

2-3 ans après

Retour à D3.js, étant sur le point d'achever une formation full-stack - en complément de mon expérience front-end.

Dans le même temps, un bug que j'avais signalé sur Bugzilla en février 2017, concernant un problème de rendu SVG sur Firefox (rendu en lien avec la taille des caractères ; bug de priorité 3), a trouvé ces jours-ci une solution.

Edit du 8 septembre :
en stage chez WebForce3, d'où je sors en tant qu'étudiant, j'approfondis ma pratique du JavaScript (principalement natif) ainsi que mes compétences dans la réalisation d'une interface en lien avec des données.
Bref, une bonne partie de ce que j'apprécie en front-end, tout en plongeant dans les arcanes du back. Last but not least, l'ambiance y est des meilleures.

21 septembre 2016

Visualisations d'après le principe du "data join" de d3

Une interface avec des visualisations sur le principe "data join" :
démo des opérations de "join" - passant sur Firefox et Chrome Mac.
- version 1 au premier novembre.

Comment

Le bouton "join d3.js" en haut à gauche crée un jeu de données d'une longueur comprise entre 2 et 12. Ce jeu est relié à une liste HTML. En fonction de sa longueur, la liste est mise à jour, rallongée ou rétrécie…
Les data visualisations attenantes ont pour objectif d'illustrer les données quantitatives de ce processus.

Ces données concernent la sélection initiale, la liaison, l'update, la création d'éléments, les éléments déclassés et la sélection finale. Une partie des éléments déclassés est conservée et indiquée comme telle, l'autre est supprimée.

D3.js l'update dans le binding en v. 4 et autres notes

Évolution de l'update

Après liaison de données via .data(), l'ordre des instructions importe en version 3 pour mettre à jour des éléments pré-existants. Cette sélection est en effet enrichie de la création d'éléments via .enter(). L'update doit donc précéder .enter().
En version 4 désormais, la mise à jour devient autonome et n'est plus affectée par .enter(). Elle peut être effectuée en instruction finale.

Le traitement simultané des éléments mis à jour et créés se fait avec .merge() :

Dans la documentation : d3/CHANGES.md at master · d3/d3.
Exemple de merge.

Au sujet de .enter() et .exit()

13 août 2016

D3.js outils pour la version 4

Les différences entre la version 3 et la version 4 de d3 marquent une évolution importante. Outre la modularisation de la librairie, l'évolution du troisième paramètre des fonctions de callback, l'aplatissement des espaces de nom - cf. dans la présentation de Mike Bostock :
d3.scale.linear ↦ d3.scaleLinear
D'où quelques outils et tests - scripts passant sur Firefox Mac.

Terminaux avec les versions 3 et 4

Des interpréteurs d3.js en ligne :

montés grâce au JQuery Terminal Emulator Plugin, afin d'à la volée évaluer des instructions d3.

Adaptation de la version 3 à la version 4

Partant de la démonstration Chained Transitions dont le script fait une quarantaine de lignes, adaptation à la version 4.

5 août 2016

D3.js notes brèves

Notes brèves et pratiques pour d3.js :

3 août 2016

Last version of Chromium on Mountain Lion

According to my tests, version 51.0.2666.0 is the last version of Chromium for Mountain Lion, with "base position" 378843:
Index of chromium-browser-snapshots/Mac/378843/

I followed these steps: Download Chromium - The Chromium Projects
Note: we can find several "base positions" equivalent to the same version - so there are some upper "base position" for versions 51.0.2666.0 which are not Mountain Lion compatible (379000 for instance).

21 janvier 2016

Croiser des séries de données

De nouveau sur l'établi, une interface que j'avais réalisée en 2014 pour comparer des séries de données numériques.

Je propose de visualiser les ensembles de données communes : les intersections entre les séries, les intersections minimales et maximales, les données partagées sur l'ensemble ou sur une série, les données les plus représentées…
Ainsi que d'introduire ses propres données.

Croiser des séries de données sur Equatorium.

Edit du 11/02 : ce billet a été remanié depuis sa publication le 21 janvier 2016, l'interface ayant encore évolué depuis.
(Mais n'a pas encore été testée sur Internet Explorer 10+.)

Outre l'amélioration du design, une dynamisation de l'interface

7 janvier 2016

Promesses et récursivité : ordonnancer des promesses simultanées

Lorsqu'on lance un groupe de promesses simultanées avec la méthode Promise.all(), l'on peut lier une instruction finale à leur accomplissement. Quand certaines de ces promesses de base dépendent des autres pour atteindre des objectifs intermédiaires, comme la définition d'un objet intermédiaire, il faut en répéter certaines selon la façon dont l'ensemble se synchronise.
L'enjeu est alors de reprendre, en la prolongeant, l'enrichissant ou la raffinant, la promesse itérative ".all()" à laquelle vient se lier l'instruction finale.

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.

7 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.

4 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.