Si vous consultez la liste des éléments, à moins d’être expert vous pouvez être à peu près sûr d’en découvrir un certain nombre. (Les plus fascinants pour moi ? <ruby> et kbd.)

Si on étend la liste à tous les éléments proposés pour ajout à la norme HTML, elle sera bien plus longue. Et cela soulève des débat passionnants : quel pattern mérite d’être un élément à part entière, ou juste un attribut d’un élément existant, ou juste un Composant Web fourni par une bibliothèque ?

Plus fondamentalement la question : quel sont les mots de base du langage qu’est le web ? Est-ce qu’un toaster est suffisamment commun et standardisé pour mériter un élément ? et un bloc de spoiler ? Comme tout langage, il faut partir des usages réels ; le groupe de travail OpenUI a d’ailleurs fait un travail impressionnant de recensement en ce sens. Mais il faut aussi ajouter une dose de prescription : y a-t-il vraiment besoin d’ajouter une mauvaise idée telle qu’un accordéon exclusif sous prétexte qu’on peut trouver quelques occurrences ? <⁠spoiler⁠> Pour moi, non <⁠/⁠spoiler⁠>.

Bref, voici un tour d’horizon, dans la lignée de mon précédent article orienté CSS.

Éléments récemment ajoutés dans les navigateurs modernes

Sauf erreur de ma part il y en a deux.

Recherche

Similaire à un élément <nav> mais pour un composant de recherche, l’élément <search> ajoute un point de repère à la page (landmark, utile notamment pour les technologies d’assistance), comme si on ajoutait role=search à un conteneur. À tester pour vérifier si c’est bien reconnu par les lecteurs d’écran, donc il faut mieux doublonner <search role="search"> comme pour main.

Popin

L’élément dialog permet d’afficher un panneau modal au sein d’une page, avec juste un peu de Javascript et de bons comportements par défaut (notamment la navigation au clavier). Exemple :

Dispo depuis longtemps sur Chrome, mais très lent d’adoption car il posait plein de problèmes d’accessibilité, dont la plupart ont été résolus.

Accordéon

Allez je triche et j’ajoute le pas tout jeune mais méconnu élément <details>, pratique pour ajouter un accordéon basique si vous n’avez pas besoin de personnalisation. Exemple :

Pas encore disponibles

Interrupteur (switch, toggle)

Il semble y avoir deux propositions différentes : l’une pour qu’un interrupteur soit un type particulier de case à cocher, l’autre pour créer un nouvel élément plus complet et personnalisable. Le cas d’usage étant de représenter des paramètres à prise d’effet instantanée, à l’opposé des cases à cocher d’un formulaire déclaratif.

<input type="checkbox" switch>

<!-- VERSUS -->

<switch>
  <track>
    <toggled></toggled>
    <untoggled></untoggled>
  </track>
  <thumb></thumb>
</switch>

Menu déroulant stylable

Il y avait une proposition pour créer un nouvel élément, indépendant du <select> actuel qui serait conservé pour des raisons de rétro-comptabilité : selectmenu ou selectlist.

Finalement la proposition parait être d’ajouter un attribut au <select> et qui ouvrirait plein de possibilités de personnalisation.

Portail

Permet d’embarquer une version non-interactive d’une page dans une autre page, typiquement pour afficher une prévisualisation de la page au clic sur un lien.

À ne pas confondre avec <fencedframe>, qui est en gros la version moderne et sécurisée du bon vieux iframe.

Autocomplétion

L’élément datalist étant très limité, laissez-moi vous présenter le futur potentiel élément <combobox>.

Modèle

Mentionnons aussi rapidement <model>, utilisé pour afficher des modèles 3D et standardiser certains comportements (interactivité, etc.). C’est la partie émergée d’une initiative plus large pour apporter la réalité virtuelle et augmentée sur le web.

Bonus : popover

Techniquement ce n’est pas un élément mais un attribut et une API mais Firefox vient de rejoindre les navigateurs compatibles et ça s’annonce sacrément utile. La fonctionnalité permet d’ajout un panneau non-modal en gérant finement le positionnement ainsi qu’en facilitant la gestion de la fermeture, de la navigation au clavier et du z-index.

On dirait que pas mal de techniques CSS ne sont pas assez connues de nombreux designers. Voici donc un compilation que j’alimenterai au cours du temps.

Je me suis limité à :

• Des techniques relativement simples, parce que l’implantation demande quelques lignes de CSS ou que c’est une amélioration locale et additive.
• Uniquement du CSS, donc pas de SVG, pas de polices variables, pas de variantes OpenType, pas de polices colorées
• Des effets visuels (pas de requêtes par conteneur)
• Des techniques bien supportées par les navigateurs modernes (_evergreen), ou en cours de généralisation.
• Et supportée par les appareils courants (donc pas de gamuts étendus).

Techniques possibles depuis un moment

Soulignement

text-decoration-skip-ink pour qu’une barre de soulignement évite les jambages du texte.
Par défaut (normalement).

Référence sur MDN

Images responsive

Avec l’attribut srcset ou l’élément <source>, on peut afficher des images différentes selon la largeur de la fenêtre.

<img
  srcset="elva-fairy-480w.jpg 480w,
					elva-fairy-800w.jpg 800w"
	sizes="(max-width: 600px) 480px,
				 800px"
	src="elva-fairy-800w.jpg"
	 />

Cas d’usage :

• Qualité variable des images : haute résolution sur grand écran et petite sur téléphone.
• Ce que certains appellent « direction artistique ». Disons un choix iconographique pour adapter l’image au contexte.

Dans l’exemple suivant, on zoome plus sur la personne en format vignette pour éviter qu’elle se retrouve minuscule .

Ou encore, ici la photo est croppée différemment sur les petits écrans.

Magnétisme au scroll

scroll-snap : enfin une manière de guider le mouvement de scroll, sans le prendre en otage et casser les habitudes et comportements natifs. A la fin d’un mouvement de scroll, la position d’un item dans une liste scrollable est ajustée.

Deux valeurs possibles :

• mandatory : probablement trop agressif
• proximity : préférable, le « magnétisme » se produira uniquement si la bordure de l’item est proche de la bordure du conteneur.

Voici une démo :

Traitement des images

On peut faire énormément de choses en terme de post-processing d’images. La terminologie est assez proche de celle de Photoshop : les filtres permettent de modifier une image et les modes de fusion spécifient l’interaction entre plusieurs couches. Avec mix-blend-mode, les couches sont plusieurs éléments HTML et avec background-blend-mode elles sont plusieurs background CSS dans un même élément.

On peut créer des effets très simples…

img {
  filter:
    grayscale(1)
    brightness(80%)
    contrast(150%)
    blur(2px);
}

… Ou plus complexes

See the Pen CSS Halftone Filter by Scott Vandehey (@spaceninja) on CodePen.

Masques

Clip-path,background-clip et mask permettent de masquer des parties d’un élément en suivant un tracé (clip) ou une image (mask)

See the Pen CSS Only image gallery by Temani Afif (@t_afif) on CodePen.

La syntaxe peut paraitre complexe, mais il existe des outils en ligne de génération de tracé.

clip-path:
	polygon(0 0, 100% 0, 100% 100%, calc(50% + 10px / 4) 100%,
  0 calc(50% - 10px / 4));

Techniques disponibles depuis peu

Équilibrer un titre

text-wrap: balance

See the Pen Animated comparison of balanced and unbalanced headlines by web.dev (@web-dot-dev) on CodePen.

Éviter les veuves

text-wrap: pretty

See the Pen text-wrap: pretty by web.dev (@web-dot-dev) on CodePen.

Césure des mots

Mais attention

See the Pen hyphens césure by Baptiste (@Saint_loup) on CodePen.

Techniques possibles un jour

Vraiment centrer le texte dans un bouton

text-box-trim permet de centrer le texte et les pictos dans un conteneur quelconque en supprimant l’espacement vertical généré et spécifique à chaque police de caractères. Ca arrivera pas tout de suite, mais on peut espérer. A ne pas confondondre avec margin-trim.

Transitions au scroll

Démo fonctionnelle sous Chrome, ou avec Firefox si flag activé (cf détails sur l’état du support) :

À ne pas confondre avec les transitions entre écrans. Et celles-ci requierent forcément du Javascript.

Effet de tuilage ou de maçonnerie

Voir aussi cet article récent par des devs de Safari, avec un intéressant débat sur « mais au fond, qu’est-ce qu’une grille de mise en page ».

Voici le résultat de quelques recherches et réflexions sur la question du texte justifié, car beaucoup de ressources en ligne à ce sujet sont très datées. En résumé : oui il faut continuer à ferrer à gauche le texte de labeur mais la question mérite d’être posée et mieux étudiée, surtout avec le support de la césure automatique sur les navigateurs. Retours et critiques bienvenus.

Peu d’études

Il y a très peu d’études empiriques spécifiques sur ce sujet. J’ai trouvé deux papiers de Ling & Van Schaik, vieux mais intéressants (résumés ici). Ils confirment que le texte aligné à gauche est plus lisible. Plus précisément :

• Le panel était composé de gens sans troubles de l’apprentissage (ou en tout cas pas plus que dans la population générale). On peut supposer que l’effet serait pire sur un panel de dyslexiques.
• Les gens préféraient spontanément le texte justifié même s’ils étaient plus efficaces avec du texte ferré à gauche (question d’habitude et d’aspect « rangé », j’imagine).

Je n’ai rien trouvé de sérieux sur la dyslexie, alors que c’est le coeur du sujet (il y a peut-être d’autres dys concernées mais je vais me concentrer sur la dyslexie pour pas parler dans le flou). Même les articles en apparence bien documentés reprennent des recommandations tirées d’autres articles pas plus étayés, si bien qu’on tourne vite en rond : les designers invoquent des universitaires qui invoquent des guides institutionnels qui invoquent des designers.

Si j’ai loupé des ressources intéressantes, dites-le moi.

Bref les choix typographiques ont un gros effet sur la capacité de lecture des dyslexiques, mais on nage à vue : entre la taille des caractères, la longueur des lignes, l’interlignage et l’alignement, qu’est-ce qui gêne le plus ?

Plus encore, il faudrait décorréler la question de la justification dans l’absolu de celle de son implémentation, qui est très mauvaise historiquement sur le web. Il n’y a pas d’études comparant la lisibilité d’un texte ferré à gauche à celle d’un texte correctement justifié. Au hasard en se basant sur une page imprimée et composée manuellement par un pro sous Indesign.

Mais au fait, pourquoi le ferrage à gauche ?

À ma connaissance, il y a deux arguments contre la justification : l’irrégularité des espaces et la difficulté à distinguer les lignes entre elles.

1. Espaces irrégulières

Ça fait varier la taille des espaces et donc perturbe les trajectoires oculaires. Celles-ci sont déjà rendues erratiques par la dyslexie, c’est justement un des gros symptomes. Voir cet article passionnant.

Voici deux graphiques (source) assez parlants comparant les trajectoires d’une personne non-dyslexique (à gauche) et dyslexique (à droite). Les lignes horizontales représentent une fixation sur un point, les lignes verticales représentent des mouvements en avant ou arrière dans le texte. Le graphique du bas est beaucoup plus irrégulier, avec des retours en arrière plus fréquents.

Mentionnons aussi que la justification peut créer des lézardes/rivières (enchainement vertical de larges espaces), mais c’est surtout notable avec un colonnage réduit.

Mais ces problèmes de mise en page sont largement réduits en coupant les mots. Cette fonctionnalité de césure est maintenant supportée en français par tous les navigateurs modernes et sur tous les OS.

On est d’accord que ce n’est pas parfait :

1. les espaces restent un peu irrégulières, les algorithmes « H&J » (hyphenation & justification) des navigateurs restant plus basiques que ceux des deux stars du domaine (InDesign et Latex).

2. La césure elle même est problématique. Elle complexifie la lecture et peut être gênante dans des contextes de basse vision (source).

Il est probable que les évolutions techniques réduisent le premier problème :

• Une spécification est à l’étude pour ajouter des paramètres CSS supplémentaires, semblables aux paramètres manuels que l’on trouve dans inDesign.
• Des expérimentations existent avec les polices variables pour jouer sur un critère supplémentaire : la largeur des caractères. On arrive à des variations d’espaces très faibles, tandis que l’ajustement des caractères est à peine remarquable. Le passage essentiel de la conférence est vers 20m40. Voir aussi cet article.
• Le créateur d’un site peut remplacer coté client l’algorithme du navigateur par un autre.

2. Le dentelage comme indice visuel

Second argument contre la justification : l’aspect « dentelé » des fins de ligne permet au lecteur de se repérer. Chaque petite différence de longueur constitue autant d’indices visuels pour enchainer les lignes sans se tromper ou hésiter.

Intuitivement ça me parait un bon argument. Cette fois-ci, ce n’est pas un problème d’implémentation ou de compromis, c’est inhérent à l’effet visuel.

J’aimerais juste avoir plus de détails : ce n’est pas un argument cité souvent, à quel point est-il avéré et compris ? Encore une fois, on nage à vue.

Résumé

On continue à aligner le texte par défaut – et on continuera, tant qu’il n’y aura pas de grosse évolution technique et qu’il n’y aura pas de preuve béton que la justification ne crée aucun problème.

Cela n’empêche pas de proposer aux lecteurs une option pour changer de style et activer la justification.

Cela n’empêche pas non plus de continuer à expérimenter. Les limites du web et des livres électroniques en matière de typographie par rapport à l’édition ne sont pas inéluctables.

Note sur le RGAA : il y a juste le critère (1.4.8) (AAA, non obligatoire donc) qui oblige à avoir le texte à gauche par défaut ou via option.

Bibliographie

• Individuals with dyslexia use a different visual sampling strategy to read text ➡️
  L. Franzen et al. ~ 2021 ~ PDF ~

  Résumé
• Impact of digital text variables on legibility for persons with dyslexia ➡️
  T. Krivec et al. ~ 2020 ~

  Résumé
• How to present more readable text for people with dyslexia ➡️
  L. Rello et al. ~ 2017 ~ PDF ~

  Résumé
• Reading disorders and dyslexia ➡️
  C. Hulme et al. ~ 2016 ~ PDF ~

  Résumé
• The influence of line spacing and text alignment on visual search of web pages ➡️
  
  
  J. Ling et al. ~
  2007
  ~
  

  Résumé
• The influence of font type and line length on visual search and information retrieval in web pages ➡️
  
  
  J. Ling et al. ~
  2006
  ~
  

  Résumé
• Do eye movements hold the key to dyslexia ? ➡️
  
  
  G. Pavlidis et al. ~
  1981
  ~
  

  Résumé
• Web accessibility and people with dyslexia | Proceedings of the International Cross-Disciplinary Conference on Web Accessibility ➡️
  

• Is it readable? What's the Evidence? : TechCommNZ ➡️

Une marotte des philosophes et autres théoriciens, c’est d’inventer un langage parfait et universel. Puisqu’il est doit être parfait, ce language s’abstrait souvent des écritures courantes et invente son propre système graphique.

Il y a le LoCos inventé par Yukio Ota, l’Isotype de Neurath, la sémantographie de Bliss… J’avais fait un petit fil à ce sujet.

De la danse…

Il y a aussi des langages pas universels et dédiés au mouvement. L’idée est beaucoup utilisée pour la danse. Dès le 17e siècle, on trouve des premiers systèmes basiques.

Au 18e siècle, la danse baroque d’inspiration française est une part importante de la vie sociale dans les cours européennes et plusieurs systèmes de notation apparaissent et deviennent populaires. Ils se font concurrence et cela va jusqu’au procès. Les plus connus sont ceux de Feuillet en France puis Tomlinson en Angleterre. Il semble que ces systèmes n’nont pas qu’un simple rôle de transcription. Etant donné leur popularité, ils influencent aussi les tendances. Leurs limites (notamment pour encoder autre chose que le mouvement des pieds) deviennent la limite des mouvements dansés.

Pour aller plus, vous pouvez lire cette page Wikipedia et cet article. Tufte y consacre aussi une page dans son célèbtre Envisioning Information (PDF, p. 27).

Au 20e siècle apparaissent des systèmes beaucoup plus complets. Il semble que les principaux soient la cinétographie de Laban et la choréologie de Benesh.

… À l’industrie

Au début du 20e, l’idée de codifier le mouvement est appliquée à un tout autre domaine : l’organisation scientifique du travail. Les époux Gilbreth créent un les therbligs, une liste de 18 symboles pour décrire toutes les actions effectués par un ouvrier. L’idée n’est pas d’encoder toute la subtilité des mouvements mais plutôt de normaliser et synthétiser les opérations élémentaires que doit réaliser un ouvrier sur son environnement, dans une optique d’amélioration de la productivité. Un pur produit du taylorisme.

Fidèle à l’esprit scientifique de l’époque, les Gilbreth ont une approche empirique, notamment en enregistrant les mouvements de travailleurs. Ils baptisent « chrono-cyclographes » ces photos à exposition longue où des petites lampes sont attachés aux membres.

Notons que l’influence des méthodes des Gilbreth se fait encore sentir aujourd’hui en facteur humain et en ergonomie, notamment dans l’usage de diagramme pour l’analyse de l’activité.

Et au-delà ?

On trouve quelques travaux récents, notamment pour faciliter la conception d’interfaces de reconnaissance gestuelle.

• Une taxonomie des mouvements de main en 3D
• Une ontologie (un système formel et compréhensible par un programme) pour les mouvements

EDIT : Ma technique utilisée ici est maintenant impossible (ou prohibitive) depuis l’énorme serrage de vis sur les API de Twitter par leur nouveau PDG (son nom m’échappe…).

EDIT 2 : J’ai développé Tweet To Toot pour republier des fils sur Mastodon à partir d’une archive. Ça a quelques limites par rapport à l’ancienne technique, mais aussi l’énorme avantage que les fils peuvent maintenant vivre sur une nouvelle plateforme.

Pour archiver des fils de votre compte, l’export fourni par Twitter ne suffit pas. Chaque tweet est isolé, sans les messages auquel il répond. Plus fondamentalement, la notion de « thread » n’existe pas dans l’API.

Il faut se tourner vers des outils externes.

Pour exporter un fil récent, on peut utiliser cet outil en ligne, très simple puisqu’il suffit d’entrer l’URL d’un tweet. Mais ne marche pas avec de vieux messages.

Avec un export officiel, on peut utiliser cet outil un peu compliqué ou celui-ci, plus simple. Tous deux créent un mini-site web avec l’intégralité des tweets, issus de fils ou non.

Il y a aussi cette expérimentation en ligne qui simule un navigateur scrollant Twitter pour générer un PDF, à des fins de notarisation et de preuve d’authenticité.

Et à ma connaissance, c’est tout. A cause des limites de l’API, il n’existe pas d’outils respectant les critères suivant :

1. Pas besoin de télécharger l’export officiel si le fil évolue ;
2. Marche avec des vieux threads ou des threads couvrant une longue période ;
3. Marche à partir du premier tweet d’un fil, pas uniquement le dernier ;

Du coup j’ai codé un truc. Bon c’est moins complet que les autres et ça respecte pas le troisième critère (impossible avec l’API), mais en gros vous lui donnez un token d’accès à l’API et une liste de threads (un titre et l’ID d’un tweet de départ) et ça recrache un fichier JSON avec en gros :

• Le contenu des tweets eux-même
• Le contenu des tweets cités, même d’autres auteurs, souvent indispensable à la compréhension d’un fil.
• Un aperçu des liens avec titre, image, etc.

Le script est pensé pour tourner régulièrement et alimenter mon blog. Si aucun nouveau tweet n’est détecté, il s’arrête et réutilise les anciennes données en cache.

Par ailleurs, mon blog génère automatiquement une page listant tous les fils et une page pour chacun d’entre eux.

La disparition de Flash entraine de gros risques de perdre tout un pan de l’histoire du web. Des initiatives se sont créées, comme cette archive de jeux vidéo. Il y a aussi ce projet d’émulation.

Il y a quelques temps, j’ai utilisé cette bibliothèque pour héberger et rendre accessible quelques classiques de l’animation en ligne qui ont bercé ma (post-) adolescence.

Entretemps, le projet a publié des extensions pour les principaux navigateurs. Si vous l’installez et arrivez à trouver une animation Flash basique et encore en ligne, vous devriez pouvoir ouvrir cette animation directement dans votre navigateur.

Vous voulez savoir si vos utilisateurs ont des petits ou des gros smartphones ? Des laptops ou des écrans externes ? La taille de la fenêtre de leur navigateur, indépendamment de l’écran ?

Utilisez ce carnet Observable que j’ai concocté.

Everything Everywhere All At Once est un film extraordinaire. Et comme j’ai une légère fascination pour les séries visuelles (exemples ici ou là), voici une mosaïque interdimensionnelle de toutes les Evelyn, l’héroïne jouée par Michelle Yeoh.

Et c’est tout.

Un retour sur mon expérience d’écrire un gros support de cours avec Reveal.js/Asciidoc et dans un éditeur de texte.

Récemment, j’ai donné un cours d’introduction au design UX. La question des diapos s’est tout de suite posée : rédiger et mettre en forme des dizaines de slides, importer texte et images de précédents supports… Même avec un template, c’est fastidieux. Et justement, je n’en avais pas sous la main.

J’ai donc pensé à Reveal.js, une bibliothèque permettant de générer des slides en HTML. Vous voyez la grande bannière sur leur page d’accueil ? Elle est interactive, c’est un exemple de slides.

L’intérêt de Reveal.js ?

• C’est du web : le résultat est un fichier HTML léger et lisible n’importe où. Pas de risques d’être prisonnier d’un format ou d’un logiciel particulier. Le code généré est potentiellement accessible à un lecteur d’écran (plus qu’un Google Slide en tout cas). La boite spécialisée Acess42 utilise un système comparable pour ses présentations.
• Des transitions classes entres slides, sans ressembler à un Prezi circa 2010.
• Une métaphore spatiale intéressante pour structurer le cours : on peut créer des groupes de slides qui vont défiler verticalement.
• Avec quelques plugins, une navigation puissante : table des matière automatique, recherche dans le texte, ou mode panorama.

Problème : la rédaction reste très verbeuse. On doit écrire dans le fichier HTML directement et même en tirant parti du support de Markdown on se retrouve vite avec ce genre de charabia ^[1] :

    <section data-markdown>
      <script type="text/template">
        - Item de liste qui va apparaitre d'abord <!-- .element: class="fragment" data-fragment-index="2" -->
        - Item de liste qui va apparaitre ensuite <!-- .element: class="fragment" data-fragment-index="1" -->
      </script>
    </section>
    <section data-markdown>
      <script type="text/template">
      <!-- .slide: data-background="#ff0000" -->
        ## Tralala pouet pouet
        [Ceci est un lien](https://p.eertu.be/w/ebe5cf34-b30b-414f-90f6-789adb859d75)
      </script>
    </section>

Arrive Asciidoc. C’est un format un peu plus ancien que Markdown, et aussi un peu plus riche (donc complexe). Une extension permet de générer une présentation complète à partir d’un fichier. L’avantage est d’écrire dans un éditeur de texte, sans se soucier de mise en forme ni de détails techniques. Dans VS Code ça donne quelque chose ça :

Chaque titre est un slide. La hiérarchie de titres, signifiée par le nombre de =, permet de générer la table des matières à gauche et aussi de créer les rubriques « verticales » mentionnées plus haut. Globalement, c’est assez génial pour réfléchir à l’enchainement des idées et déplacer rapidement du contenu d’un endroit à l’autre.

Pour autant, après avoir écrit 375 diapos avec, est-ce que je recommande le machin ? Ca dépend pour qui. Si vous trouvez déjà Markdown compliqué ou que vous n’aimez pas bricoler avec plusieurs outils interconnectés, fuyez. Ou bien utiliser l’éditeur graphique vendu par le créateur de reveal.js.

Mais si vous êtes plus éditeur de texte que Powerpoint, plus texte qu’image, que l’idée d’ajuster le placement de dizaines de blocs vous hérisse et que vous aimez les slides minimalistes, testez donc.

Réinsistons sur les avantages de la portabilité :

• Mes supports sont présentement une simple page en ligne.
• J’ai pu les réviser sur mon téléphone.
• Exporter trois slides de consigne en une seule page imprimable m’a littéralement pris quelques clics.

Mais il faut aussi détailler certains inconvénients :

• Il y a une courbe d’apprentissage assez raide, que j’ai tenté d’alléger avec ce kit.
• Même avec un bon outillage, ce n’est pas du WYSIWYG. On n’est jamais à l’abri de faire une erreur de syntaxe.
• Des mises en page qui prendraient deux secondes dans un logiciel classique peuvent se révéler compliquées. Il faut ajouter quelques classes au slide pour servir de « hook » (cf. cet exemple), écrire du CSS et le rendre adaptable à du texte et des images de taille différentes. Le lien précédent montre quelques possibilités prédéfinies, mais elles restent limitées. J’imagine que créer un thème complet peut être un investissement rentable si on est un conférencier régulier.
• À long terme c’est pratique d’avoir toutes les médias dans un dossier, mais en attendant, intégrer une image à un slide est fastidieux puisque il faut l’enregistrer dans le bon dossier, insérez la balise image::nomDeFichier[], sans se tromper de nom. Alors qu’avec Powerpoint/Keynote/Slides je copie l’image dans le presse-papier et la colle dans le slide, sans jamais gérer de fichier. Mais un peu d’outillage améliore la situation.

Quand un post comprend une jolie image, je la spécifie comme « mise en avant » et elle se retrouve en vignette dans la page de liste. Que faire quand il n’y a pas d’image ? Laisser un vide ou avoir une image par défaut, toujours la même, ne serait pas très élégant. Pour obtenir des images variées mais avec une unité de style, la génération procédurale est l’approche parfaite. Elle permet de générer des formes en alliant une trame de base et des paramètres aléatoires. On va l’appliquer à une technique bien connue en histoire de l’art : le pavage d’un espace en le remplissant avec des carreaux de base.

Ici on utilise des motifs dits de Truchet, du nom du savant éponyme : Sébastien Truchet, ingénieur hydraulique, mathématicien, typographe… Rien que ça. Il est notamment à l’origine des eaux de Versaille, du premier point typographique et de Times News Roman, au moins partiellement et indirectement.

L’idée d’origine

Revenons à notre pavage. Chez Truchet, il y avait quatre carreaux de base :

Comme on le voit, c’est une variation toute bête autour d’un simple triangle. Mais avec ça, il obtenait déjà des formes variées, en les regroupant en bandes, en losange, ou en alternant noirs et blancs.

Chez bibi

Je reprends une idée de Cyril Harvey Smith : uniquement deux carrés, comprenant des quarts de cercle.

Si on ajoute de manière concentriques plusieurs arcs de cercle et des dégradés de couleur, c’est encore plus joli.

La trouvaille pour apporter du rythme, c’est l’absence de rupture : que quelque soit l’orientation des blocs, chaque arc est connecté à un arc voisin. Le tout forme un motif de labyrinthe, alors que le placement des blocs est purement aléatoire. La seule chose qui ne l’est pas, c’est la couleur de fond qu’on devine au centre des cercles.

Essayez vous-même : cliquez sur un carreau pour le faire pivoter et voir que ça ne rompt pas l’enchainement.

Autres exemples

Voici d’autres résultats très différents, obtenus uniquement en jouant sur quelques paramètres. Pour essayer vous-même, aller voir cet outil interactif. (À qui j’ai beaucoup emprunté, techniquement et visuellement). L’auteur ajoute en plus des paramètres pour délier chaque arc concentrique et ainsi créer un effet de « tressage » plus ou moins échevelé, suivant à quel point on pousse les paramètres twist et scramble.

Pour aller plus loin

Sur l’histoire des ornementations, voir cet article et cette galerie sur le livre La Grammaire de l’ornement, cette page sur le pavage et celle-ci sur les carreaux.

Pour une analyse psychologique de notre goût pour les motifs, voir le livre The sense of order : a study in the psychology of decorative art (accessible en ligne), par le grand historien de l’art Ernst Gombrich. Résumé grossier (j’en suis seulement à l’intro) : on aime un certain compromis entre ordre et chaos, car on est cognitivement câblé pour chercher des structures dans le monde changeant qui nous entoure.

Sur les affinités naturelles entre informatique, génération procédurale et motifs, voir le livre collectif 10 PRINT CHR$(205.5+RND(1)); : GOTO 10 (accessible en ligne). Oui c’est le titre. C’est une ligne de Basic générant un labyrinthe étonnamment semblable au motif originel de Smith plus haut.

Étant donné l’expressivité de ce genre de pavage, vous ne serez pas étonné d’apprendre que c’est un domaine d’exploration en mathématiques. Des pavés plus complexes sont même utilisés comme modèles de calcul. Après tout, l’informatique exotique est un genre en soi.

Au-delà du carré de base et du visuel du triangle, on peut utiliser bien des formes. Voici le travail d’un chercheur qui fait même des motifs en 3D. Voici aussi des exemples avec plus de degrés de symétrie, avec des motifs enchassés…. Et pourtant, il y a quelque chose de spécial avec le triangle : c’est le plus simple des polygones et pourtant il peut tout représenter. En image de synthèse, c’est une brique de base pour tout modéliser, au point que les polygones plus complets sont souvent convertis en triangles.

Quand on lit l’article où Smith introduit la variante que j’utilise, on s’aperçoit qu’il en parle à peine, négligement et toute à la fin. C’est ironique, vu la popularité de cette variante. L’article est plus général, c’est une méditation sur la notion de structure visuelle : comment elle nait de la composition de formes de simples, d’alternance de fond/figure, de changements de densité. Comment l’exploration visuelle de ces structures est intrinsèquement temporelle de. Le texte est dense, parfois incompréhensible et quasi-mystique. Extraits :

All tilings combine aspects of lines-of-progress and cyclical closures, but they differ in their relative emphasis on internal or boundary balance : pattern depends less upon the fit of any definable polygons with their immediate neighbors than upon the whole hierarchy of directions. The eye enjoys the alternating perception of boundaries that enclose or exclude or are themselves regions of which the inner structure is remembered and does not need further analysis.

[…]

The structure of matter devolves ultimately into the intimate coexistence of something like corpuscles of nothing and atoms of something, segregating through the accidents of history to yield regions differing in density intimately interwoven on different scales. The existence of the world as well as human perception and analysis of any part of it is a matter of the angular scale of resolution and of the time necessary for making comparison between the different parts. Both the stability of material structures and human perception of them involve the tracing of directions and terminations, the formation and the finding of closed boundaries surrounding regions of substructure, that may be similar or different in the density or shape and orientation of the parts. Without such variations and without time to compare remembrances of them, nothing can be experienced.

Détails techniques

Ce blog est statique : les pages sont crées à l’avance par un serveur Node qui tourne juste le temps de la génération, pas quand vous visitez le site. Lors de cette phase de compilation, les motifs de Truchet sont générées. Ceux de la section « Chez Bibi », eux, sont créés à la volée par votre navigateur. D’ailleurs ce ne sont pas des fichiers d’image mais des éléments <canvas>.

Dans les deux cas, le cœur du code est le même : truchet_core.ts. C’est tout l’intérêt d’utiliser Javascript pour le front et le back. D’ailleurs, pour pouvoir dessiner des pixels sur un <canvas>, il faut l’API Canvas. De base, Node ne sait pas ce que c’est : c’est une technologie de navigateur dont il n’a pas besoin. De même, il ne sait pas ce qu’est un élément <img> ou un click de souris. Pas grave, Canvas a été ré-implémenté pour Node.

Zotero est un logiciel de gestion documentaire, plutôt pensé pour le monde académique mais qui peut s’adapter à pas mal de types de documents et d’usages.

J’essaye d’y enregistrer et classer des papiers et articles de blog sur des sujets qui m’intéressent.

Zotero a une interface en ligne et si un profil est public, tout le monde peut consulter les listes établies par ce profil. Mais comment faire si je veux intégrer à un post que j’écris une liste spécifique (par exemple une combinaison de catégories et de tags), en appui d’un propos quelconque ? Il y a quelques plugins, notamment pour Wordpress, mais je suis sous Eleventy.

C’est là qu’intervient l’API de Zotero et ce client en Javascript qui facilite le dialogue avec celle-ci.

J’ai écrit un script, à invoquer simplement dans le corps d’un post avec un « shortcode » (un raccourci qui exécute un script), de la sorte :

{% zotero "collection", "tag 1", "tag 2", "tag n"  %}

… Et hop il me génère une liste d’articles avec le titre, l’URL source, le résumé et si disponible un PDF de l’article complet. Un exemple ici.

Potentiellement on pourrait remonter pas mal d’autres attributs, les formater comme dans une bibliographie universitaire… mais dieu merci je ne suis qu’un humble blogueur indépendant. :p

Détails techniques

Si ça peut vous inspirer, le code est ici.

• Utiliser un shortcode Nunjuncks dans un fichier de texte Markdown nécessite de spécifier markdownTemplateEngine: njk dans la config globale Eleventy.
• Ce shortcode appelle zotero.js, qui récupère de l’API les données et les transmet sous forme de tableau d’objets à zotero.njk, le bout de template qui se charge de génèrer le HTML.
• Le shortcode est asynchrone pour permettre les requêtes à l’API externe.
• On fait 3 salves de requêtes
  1. Comme l’API ne permet pas de requêter le contenu d’une collection par son nom, il faut d’abord requêter toutes les collections et trouver l’ID de la bonne collection.
  2. On requête ensuite les articles eux-même. Potentiellement ça nécessite un lot de requêtes, si le nombre d’articles dépasse les limites de l’API.
  3. Enfin on récupère les pièces jointes de chaque article pour en tirer l’URL directe d’un PDF. Zotero a l’air assez doué pour dénicher ce lien.

Une compilation d’articles, principalement académiques, sur le sujet du consentement dans le cadre du RGPD et du respect de la vie privée.

L’image de couverture est une vraie bande dessinée.

Généralités

• La forme des choix ➡️
  Résumé
• Privacy is a right to the appropriate flow of information. ➡️
  Résumé

Conception

• No cookie for you ➡️
  2020 ~

  Résumé
• Privacy transparency patterns ➡️
  J. Siljee et al. ~ 2015 ~

  Résumé
• Smashing Magazine Privacy UX: Better Cookie Consent Experiences ➡️
  Résumé
• Designing Friction For A Better User Experience ➡️
  Résumé
• Report: Deceived by design ➡️
  Résumé
• Dark Patterns.org ➡️
  Résumé
• Gauthier Roussilhe | A fundamental critique of seamless design ➡️
• How gambling apps are facilitating dangerous addiction ➡️
  Résumé
• Designing a product with mental health issues in mind ➡️
  Résumé
• Legal Design Patterns For Privacy ➡️
  PDF ~

Visualisation

• Picture superiority effect ➡️
  2020 ~

  Résumé
• Privacy Icons: A Risk-Based Approach to Visualisation of Data Processing ➡️
  Z. Efroni et al. ~ 2019 ~
• Disconnect: Privacy Icons ➡️
• Towards a Visual Vocabulary for Privacy Concepts ➡️
  V. Motti et al. ~ 2016 ~

  Résumé
• Standardizing privacy notices: an online study of the nutrition label approach ➡️
  P. Kelley et al. ~ 2010 ~

  Résumé
• A "nutrition label" for privacy ➡️
  P. Kelley et al. ~ 2009 ~ PDF ~

  Résumé
• Iconset für Datenschutzerklärungen ➡️
  . wetter et al. ~

  Résumé
• Appropriate Privacy Icons ➡️
  Résumé
• Privacy Dashboard ➡️
  Résumé
• Privacy Tool Lets Users Quickly Rank Websites on Privacy Policies ➡️
  Résumé
• Privacy Icons - MozillaWiki ➡️
• The Use of Privacy Icons and Standard Contract Terms for Generating Consumer Trust and Confidence in Digital Services ➡️

Théorie

• The Myth of the Privacy Paradox ➡️
  D. Solove et al. ~ 2020 ~

  Résumé
• The Pathologies of Digital Consent ➡️
  N. Richards et al. ~ 2019 ~

  Résumé
• A Design Space for Effective Privacy Notices ➡️
  F. Schaub et al. ~ 2015 ~ PDF ~
• Privacy as Trust: Sharing Personal Information in a Networked World ➡️
  A. Waldman et al. ~ 2014 ~

  Résumé
• Choosing Not to Choose ➡️
  C. Sunstein et al. ~ 2014 ~

  Résumé
• Notice and consent in a world of Big Data ➡️
  F. Cate et al. ~ 2013 ~

  Résumé
• On Notice: The Trouble with Notice and Consent ➡️
  S. Barocas et al. ~ 2009 ~

  Résumé
• Beyond informed consent ➡️
  Z. Bhutta et al. ~ 2004 ~ PDF ~

  Résumé

Études statistiques, psycho et comportementales

• Hyperbolic discounting ➡️
  2020 ~

  Résumé
• Only 9% of visitors give GDPR consent to be tracked ➡️
  M. Saric et al. ~

  Résumé
• Baromètre 2020 RGPD & Cookies : les premiers chiffres ➡️
  L. Cherpin et al. ~ 2020 ~ PDF ~

  Résumé
• Situational user consent for access to personal Information: Does purpose make any difference? ➡️
  N. Steinfeld et al. ~ 2020 ~

  Résumé
• Dark Patterns after the GDPR: Scraping Consent Pop-ups and Demonstrating their Influence ➡️
  M. Nouwens et al. ~ 2020 ~ PDF ~

  Résumé
• Multiple Purposes, Multiple Problems: A User Study of Consent Dialogs after GDPR ➡️
  D. Machuletz et al. ~ 2020 ~ PDF ~

  Résumé
• The ICO’s Cookie Consent Rate Dropped 90 Percent After Implementing its Own Best Practices ➡️
  2019 ~

  Résumé
• (Un)informed Consent: Studying GDPR Consent Notices in the Field ➡️
  C. Utz et al. ~ 2019 ~ PDF ~

  Résumé
• Does the GDPR Enhance Consumers’ Control over Personal Data? An Analysis from a Behavioural Perspective ➡️
  I. van Ooijen et al. ~ 2019 ~ PDF ~

  Résumé
• Gambling on Smartphones: A Study of a Potentially Addictive Behaviour in a Naturalistic Setting ➡️
  R. James et al. ~ 2019 ~

  Résumé
• Networked privacy: How teenagers negotiate context in social media ➡️
  A. Marwick et al. ~ 2014 ~

  Résumé
• L’UX est dynamique ! Comprendre la temporalité de l’UX ➡️
  2014 ~

  Résumé
• Choice without Awareness: Ethical and Policy Implications of Defaults ➡️
  N. Smith et al. ~ 2013 ~

  Résumé
• Consent for all: revealing the hidden complexity of terms and conditions ➡️
  E. Luger et al. ~ 2013 ~

  Résumé
• Why Johnny can't opt out: a usability evaluation of tools to limit online behavioral advertising ➡️
  P. Leon et al. ~ 2012 ~

  Résumé
• "What did I just sign?": On informed consent in China ➡️
  2009 ~

  Résumé
• Recommendations Implicit in Policy Defaults ➡️
  C. McKenzie et al. ~ 2006 ~

  Résumé
• Evocation of freedom and compliance: the but you are free of… technique ➡️
  N. Guéguen et al. ~ 2000 ~ PDF ~

  Résumé
• The unbearable lightness of user consent ➡️
• Over 90% of users consent to GDPR requests says Quantcast after enabling 1bn of them ➡️
  Résumé
• Risk Reduction Strategies on Facebook ➡️
• Dark Patterns at Scale: Findings from a Crawl of 11K Shopping Websites ➡️

Divers

• Should I Agree? Delegating Consent Decisions Beyond the Individual ➡️
  B. Nissen et al. ~ 2019 ~ PDF ~

  Résumé
• Against Notice Skepticism in Privacy (and Elsewhere) ➡️
  M. Calo et al. ~ 2012 ~
• ToS;DR - Terms of Service; Didn't Read ➡️

Panorama foutraque de ce que l’on appelle parfois la physicalisation de données : visualiser des données par un support physique non-numérique.

La dataviz en 3000 avant JC

On n’a pas attendu l’informatique pour représenter des données. Les premières traces de l’écriture c’est un peu ça : un jeton pour une vache, un deuxième pour une seconde vache. Les systèmes graphiques plus aboutis étaient utilisées avec des buts similaires, puisqu’on retrouve beaucoup d’inscription parlant de taille de troupeaux, d’aire de parcelles ou de volumes de récoltes. Parfois en utilisant à plein la spatialité de la surface, comme en témoignent ces deux tablettes babyloniennes : un problème de géométrie et le plan d’un grand bâtiment.

Ces exemples sont impresionnants parce qu’anciens, mais vous allez dire qu’ils restent assez classiques. Voici un autre spécimen qu’on cite souvent : les cartes utilisées par les marins des îles Marshall, dans l’océan Pacifique. Les îles y sont représentées notamment par des coquillages (en blanc) et les trajectoires aidées par la houle par les tiges. Chaque carte était idiosyncrasique dans la manière dont il fallait l’interpréter et surtout utilisée par son créateur.

Citons aussi les cartes tactiles des Inuits, sculptées dans du bois. Celle de gauche est une carte côtière et celle de droite représente une succession d’îles. Elle étaient apparemment plus utilisées comme support de récit qu’aide à la navigation.

Il y a plein de manières compréhensibles et mémorables d’encoder des informations dans des objets. Voici une longue compilation de ces « visualisations physiques de données », avec aussi pas mal d’expérimentations récentes. Sans rentrer dans un débat théorique ou une quête de définition, l’idée est en gros de ne pas utiliser l’écriture, ou de manière plus secondaire et auxiliaire.

3D

Si on saute aux XIX et XXe siècles, la création de modèles en relief est un cas d’utilisation relativement fréquent. En 1874, Maxwell illustra avec un modèle en plâtre les liens entre l’évolution de trois variable : volume, entropie et énergie.

Datant de 1913, cette carte montre le nombre de passagers transportés par le métro de Frankfort. La quantité était représenté par le nombre de lamelles de bois collées et empilées.

Datant des années 50, cette courbe montre l’évolution de la consommation d’électricité en Grande-Bretagne, suivant les heures de la journée, entre 1951 et 1954. Chaque jour est représenté par une feuille de carton et des poignées permettaient d’élargir le dispositif pour ajouter des feuilles.

Interactivité

Au début du XXe, le volume de données produites explose. Comment les récupérer, les manipuler et les visualiser facilement ?

Par exemple, comment présenter un enchainement de graphiques à un auditoire, quand on n’a même pas de rétroprojecteur ? C’est pas compliqué : créer une véritable bibliothèque de diapositives sous la forme de grands panneaux de bois imprimés et montés sur rail. J’en ai déjà parlé ici.

Autre exemple : ce système de fiches décrit dans un traité de 1914 (!) : Graphic methods for presenting facts. L’idée était d’utiliser plusieurs fiches représentant des graphiques et les mettre bout à bout horizontalement ou verticalement, pour comparer ou enchainer plusieurs années. Parler de « dashboard interactif », comme le fait l’article en lien, est sans doute exagéré, mais pour l’époque l’idée apportait sans doute un grand confort. Avoir des masses de données bien organisées, prêtes à l’emploi et lisibles facilite grandement l’analyse et la discussion, c’est un premier degré d’interactivité entre l’utilisateur et le système.

D’autant que le système était pensé de bout en bout. Il y avait des « méta-fiches » pour indexer le contenu et le retrouver facilement, la partie gauche était laissée vide si l’utilisateur voulait ajouter une annotation et chaque fiche avait un bleu (blueprint) pour la dupliquer et la partager facilement.

Ouvroir de dataviz potentielles

Finissons par un exercice sous contraintes intéressant : des « photoviz » qui utilisent des objets triviaux pour figurer des quantités et liés au thème de la donnée représentée. Garanti sans triche ni redimensionnement.

Source et autre exemple ici et là

Récap des principaux liens

• Un panorama complet de la question : histoire, enjeux, développements récents…
• Un inventaire de dataphys.
• Plein de posts dédié à Brinton, auteur du traité de 1914 évoqué et qui avait à l’époque déjà recensé pas mal d’exemples.

Pour recueillir une info personnelle auprès d’un particulier, il faut une raison. Vous pouvez le faire parce que vous avez son accord, parce que la loi vous y oblige, parce qu’elle est nécessaire pour lui fournir un service (pour lui livrer un produit vous avez besoin de son adresse)… Ces raisons sont au nombre de six, ce sont des bases légales, bien expliquées ici par la CNIL.

Il y a une base légale un peu particulière, c’est l’intérêt légitime.https ://www.cnil.fr/fr/les-bases-legales)

En gros, si une entreprise a un objectif commercial dont elle peut justifier le caractère précis et licite, que pour accomplir cet objectif elle a besoin d’une information, que ce besoin est proportionné et nécessaire (c’est-à-dire qu’elle ne peut pas faire autrement), alors elle peut recueillir cette information sans demander le consentement de l’utilisateur.

Détails ici, encore chez la CNIL

C’est un raisonnement utilisé dans les politiques de confidentialité d’un nombre important et, dirait-on, croissant de sites web. Je ne sais pas si les juristes attendaient d’y voir plus plus clair, mais j’ai l’impression que c’était un recours beaucoup moins fréquent juste après la mise en place du RGPD.

Par exemple chez Nestle Belgique, c’est une base légale invoquée dans chacune des lignes du tableau. La dernière colonne apporte quelques détails : « gagner en efficacité », déterminer les types de consommateurs pour les nouveaux produits et services", etc. Ce sont des choses banales et je ne vois pas ce qui justifie une base légale exceptionnelle.

Si seulement il y avait un moyen de rendre les notices de cookie encore plus imbuvables…

Première complication : il faut croiser cette base légale avec le principe d’opposition : le visiteur peut quand même s’opposer à cette récolte. Certains sites incluent même une case à cocher pour ça, sélectionnée par défaut. C’est tordu : l’intérêt légitime devient dans une espèce de consentement dédoublé, mais en opt-out et plus ou moins planqué. Dans les deux exemples ci-dessous, il est demandé pour chaque info si on consent au recueil ET si on s’y oppose. Bref, deux fois la même question, sous un angle techniquement différent.

C’est une conception totalement scolaire du droit où on imbrique chaque pièce sans souci de la logique d’ensemble, pour aboutir à une usine à gaz. On pourrait presque croire que c’est une forme de grève du zèle pour rendre ce genre de popin encore plus imbuvable.

Un bien sombre motif

Ces techniques peuvent passer du byzantin au total dark pattern . Par exemple chez Bloomberg vous avez deux choix si vous voulez refuser certains partages de données :

• Vue 2 : Cliquer sur le bouton « manage cookies », arriver sur une liste et tout refuser.

• Vue 1 : Cliquer sur le minuscule lien « right to object » dans le dernier paragraphe et arriver sur une liste d’infos quasi-identiques, cette fois cochées par défaut.

Donc on peut tout refuser, au titre du consentement, sans savoir si ça décoche les cases pour l’intérêt légitime, planquées derrière le lien. On suppose que non. D’ailleurs, la vue 1 a un bouton retour mais pas la vue 2 : si on a refusé certaines choses on ne peut pas aller voir la vue 1 pour voir si son choix a été respecté.

Une pratique de toute façon pas légale

On ne contourne pas le RGPD si facilement. Tout bêtement :

Les bases légales ne peuvent être cumulées pour une même finalité. Un même traitement de données peut poursuivre plusieurs finalités, c’est-à-dire plusieurs objectifs, et une base légale devra alors être définie pour chacune d’elles.

source

Une même donnée peut servir à plusieurs objectifs, mais chaque objectif doit être justifié légalement de manière distincte et spécifique. Donc tous les exemples de finasserie montrés sont de toute façon illicites. Notez que la confusion entretenue entre consentement et intérêt légitime fut un des motifs retenus par le conseil d’état pour coller 50M€ d’amende à Google.

Ce blog existe depuis fiou, 2012. Les sources sont même sur Github. Documentation et réflexions à venir.

Soyez patient pour le premier chargement, car l’hébergeur (Heroku version gratuite) éteint le serveur après 30 min d’inactivité.

C’est quoi ?

Une mosaïque des livres, jeux, films… que je « pratique », filtrables par année et catégorie. Un variateur permet de changer la taille des vignettes, pour avoir une vue panoramique ou au contraire très détaillée.

Mais pourquoi ?

Dématérialisation oblige, ma bibliothèque ou ce qui traine sur ma table basse (d’où le nom du bidule) ne sont plus guère représentatifs de mes pratiques culturelles. Je cherchais un joli palliatif.

Les données viennent de mon profil Sens Critique et sont mises à jour nuitamment. Malgré tous ses défauts, je ne connais pas d’autre site permettant de consigner des œuvres de médias variés et potentiellement françaises.

Et soyons francs, c’était l’occasion de bidouiller. Quelques remarques :

Fluidité

J’ai essayé d’avoir une grille avec le minimum de valeurs prédéfinies. Les gouttières, la taille des images et le nombre de colonnes dépendent de la taille de la fenêtre et de la valeur du zoom. C’est sans doute overkill et donne un CSS plein de valeurs magiques, m’enfin.

Détails :

• L’intensité de l’effet au survol est inversement proportionnelle à la taille de l’image.
• Les différences de ratio des affiches sont réglées à coup de object:cover-fit, sauf pour celles en paysage où on ajoute un effet de « letterbox » floutée. (J’ai d’ailleurs découvert que pas mal de jeux vidéo indés récents reviennent récemment au format paysage)
• Pour qu’au survol les images ne sortent pas du cadre, on change la transform-origin de celles positionnées en bordure de fenêtre.

Typescript

En tant qu’autodidacte habitué aux langages dynamiques et interprétés,iu j’ai trouvé ça génial. On résume Typescript à un surcroit de lourdeur très acceptable vu le gain de sûreté, pourtant j’ai trouvé son usage souvent plus fluide que Javascript, pas moins.

Un langage de programmation permet un dialogue avec la machine, c’est… un langage. La boucle d’interaction peut être très courte (comme avec une ligne de commande) ou très longue (insérer des cartes perforées et attendre la nuit pour voir le résultat). Avec Typescript, l’ordinateur est plus bavard, me parle en direct et m’a beaucoup facilité la prise en main de grosses bibliothèques.

Puppeteer

Les joies du scraping : il y a une info importante que, dans un contexte, on ne peut pas récupérer sur Sens Critique sans authentification. Du coup j’utilise Puppeteer, qui lance et contrôle automatiquement un navigateur entier. Bonjour, artillerie lourde et sur-ingénierie. En prod cette dépendance prend à elle les 2/3 du stockage.

C’est fascinant de lancer Puppeteer en mode graphique et de l’observer ouvrir une fenêtre, scroller et cliquer tout seul.

CDN

Un content delivery newtork, ai-je appris, n’est pas juste un serveur dédié et optimisé pour les images et vidéos. Les CDN modernes fournissent plein de services liés, parfois accessible simplement en ajoutant un paramètre à l’URL : génération à la demande de variantes d’une image (dimensions, format de fichier…), analyse intelligente (OCR, crop en se concentrant sur le contenu « intéressant », détection des visages…), et cetera.

Bref

Je vous passe plein de péripéties et de nouveautés (Heroku, Postgres…). J’ai fait des mauvais choix techniques, pas anticipé plein de trucs, dû changé d’orientation… Bref un vrai projet. (ノ°Д°）ノ︵ ┻━┻

Pour paraphraser Musset :

J’ai souffert souvent, je me suis trompé quelquefois, mais j’ai codé.

Les sources sont ici.

J’ai fait un minuteur, il est joli, il est cool.

Quoi qu’est-ce que c’est ?

C’est un minuteur. il décompte le temps. Enfin, pas tout le temps. Il compte le temps pendant un certain temps, que justement vous définissez, c’est le but. Il ne décompte pas le temps jusqu’à la fin des temps. Enfin, vous pouvez essayer de le régler à une valeur très très haute et attendre très très longtemps jusqu’à la mort thermique de l’univers, mais vous risquez d’attendre pour rien, ou de vous tromper dans votre estimation et de rater la fin à deux minutes près. Ce serait ballot.

Mais il est parfait pour minuter du collage de post-it.

• Il est pensé pour être bien visible, par exemple projeté en réunion ou en formation, pas sur téléphone ou dans un coin de votre écran.
• Les touches espace et entrée permettent de lancer et d’arrêter le minuteur.
• Si vous les acceptez, des notifications natives apparaitront à 50, 25, 10 et 0% du temps.
• D’après mes tests, il fonctionne même sans réseau.
• Via Chrome, il peut être installé en cliquant sur l’icône « plus » dans la barre d’adresse et apparaitra comme n’importe quelle application locale.

Pourquoi ?

• Ce n’est pas sans utilité.
• C’était l’occasion de s’initier à Vue.js.
• Comme il y a plusieurs manières de modifier le temps, c’est un bon exercice de conception technique pour la gestion des états.
• Il y aussi des choix de conception à faire sur des actions d’apparence anodines. Par exemple : faut-il autoriser l’ajout de minutes en cours de route, sans même faire pause ? Pour moi oui, c’est un cas d’usage en pleine formation. OK, mais alors l’action de remise à zéro doit-elle réinitialiser à la durée d’origine, ou à cette durée assortie des minutes ajoutées ? Plein de petites questions comme ça.

Détails techniques

App en Vue.js, avec vue-cli et le module cli-plugin-pwa qui se charge d’une bonne partie de la transformation en PWA.

Si vous voulez rire, le code est ici.

PWA : progressive web application. Un ensemble de technologies permettant d’enrichir une page web de fonctions réservées traditionnellement à des applications natives et locales. Notifications, fonctions hors-ligne, accès aux périphériques, etc,

Larry Tesler, décédé récemment, est associé à l’invention du copier-coller. De même qu’Engelbart a inventé bien plus que la souris, son influence est vaste : les premières interfaces graphique chez Xerox Parc et Apple, SmallTalk, le PDA Newton… Vice a fait un bon portrait de son parcours.

Comme avec Engelbart, ce qui est intéressant au-delà du catalogue de ses accomplissements, c’est de comprendre la vision qui les a motivé. En plus et comme souvent, Tesler est moins un inventeur solitaire que le synthétiseur d’une effervescence collective. Dans l’article je m’efforce de citer ses inspirations.

Mais commençons pas du concret.

Le génie du copier-coller

Les actions de couper, copier et coller font partie de ces idées omniprésentes qui ont pourtant été créées un jour. Les barres de défilement, l’auto-complétion… j’ai continué ici une liste d’inventions commencée par Dan Saffer.

Tesler a inventé en fait plusieurs choses.

1. Une sélection intuitive du texte

A l’époque, la crurseur était placé sous le caractère (ou derrière, en couleur inversée), ce qui introduisait de l’ambiguïté : si j’insère une lettre, va-t-elle être placée avant ou après le caractère sélectionné ?

NLS, le système d’Engelbart était plus avancé et utilisait une souris comme pointeur, mais n’avait pas de curseur permanent. La souris servait littéralement de pointeur, pour indiquer par exemple le début et à la fin d’une sélection de texte.

Larry Tesler (avec Peter Deutsch) inventa alors le curseur placé entre les caractères que l’on connait aujourd’hui.

2. Le remplacement des modes par le presse-papier et les menus

Se débarrasser des modes était le grand combat de Tesler. Qu’est-ce qu’un mode ? C’est un état global du système que l’utilisateur enclenche et qui permet ou interdit d’autres actions. Par exemple appuyer sur la touche VERR MAJ permet de taper des lettres capitales mais interdit les minuscules. Appuyer sur MAJ serait un quasi-mode (selon la terminologie de Jef Raskin) qui oblige à maintenir la touche pour rester actif.

Les éditeurs de texte étaient massivement modaux, c’est-à-dire qu’il y avait un mode pour naviguer, un pour insérer, un pour supprimer… La présence de modes complexifie les interactions (dans quel mode suis-je ? Comment en sortir ?) mais élargit la palette d’actions. Par exemple en mode Naviguer, chaque touche du clavier peut être un raccourci, ce qui permet des actions fines du genre « avancer de trois paragraphes ». L’éditeur Vim, encore populaire aujourd’hui, fonctionne essentiellement ainsi.

C’est aussi l’héritage d’une époque où les éditeurs de texte étaient conçus pour un télétype (c’est-à-dire concrètement une imprimante), pas pour un écran. On désignait une ligne, on faisait une modification et on imprimait le résultat en croisant les doigts pour ne avoir fait d’erreur. Dans un contexte aussi peu interactif, des modes étaient nécessaires.

Même NLS, le système d’Engelbart avec clavier et souris n’était pas plus simple. Voici la procédure pour déplacer du texte :

1. Touche M (pour Move)
2. Touche T (pour Text)
3. Pointer le début puis la fin du texte souhaité
4. Pointer la destination
5. Valider

Inspiré par Pentti Kanerva, Tesler abolit ces modes en inversant le modèle d’interaction : au lieu de désigner d’abord l’action (effacer) puis son objet (tel groupe de mot), on sélectionnait du texte puis on agissait dessus. Le clavier ne servait plus qu’à une chose, taper du texte. Les commandes ont d’abord été attribuées à des touches spéciales puis au menu déroulant « éditer », inventé juste après.

La complexité a été ainsi déplacée des modes au presse-papier : celui-ci stocke de l’information sans l’afficher à l’utilisateur, ce qui occasionne parfois des surprises. Mais globalement, copier et coller étant souvent concomitants, on a beaucoup gagné au change.

3. La métaphore de couper et coller

La dernière pièce du puzzle a été de rassembler le déplacement et la duplication. Suivant l’action précédente, coller peut couper ou bien copier. Cela n’allait pas de soit : encore aujourd’hui Mac OS permet de copier un fichier mais pas de le couper, car le déplacement est vu comme une action bien distincte. On a finalement trois actions réunies par une même métaphore, celle du papier.

La méthode Tesler

Quelle approche a suivi Tesler pour faire tout ça ?

1. Tester, tester et tester

Malgré ses fortes convictions (qui allaient jusqu’à avoir une plaque d’immatriculation anti-modale), Tesler n’a jamais succombé à l’illusion de connaitre les utilisateurs et a donc très tôt mené des tests.

My observations of secretaries learning to use the text editors of that era soon convinced me that my beloved computers were, in fact, unfriendly monsters, and that their sharpest fangs were the ever-present modes. The most common question asked by new users, at least as often as « How do I do this ?, » was « How do I get out of this mode ? »

The Smalltalk Environment, 1981

Before doing it he decided that he wanted to observe a user, and used a technique similar to his“guided fantasy.” He describes working with a secretary who had just started at PARC and was not yet influenced by the programs that were being used :I sat her down in front of a screen, and did what’s now called a“blank screen experiment.”

“Imagine that there is a page on the screen, and all you’ve got is this device that you can use to move a cursor around, and you can type,” I said. “You’ve got to make some changes to this document. How would you do it ?”I gave her a paper document with lots of markups on it for reference, and asked her to imagine that is was on the screen. She just designed it right there !“I would point there, and then I would hit a delete key,” she said.To insert, she would point first and then start typing. She’d never been contaminated by any computer programs before, so I wrote all this down, and I thought, “That sounds like a pretty good way to do it !”

p. 62, Bill Moggridge, Designing interactions. MIT press, 2007. Tout le chapitre est disponible ici

2. Prendre les problèmes à la racine

Ce qui m’impressionne, c’est sa capacité très tôt dans sa carrière à argumenter et théoriser ses choix. Dès 1981, son disours contre les modes est solide et construit. En 2010 il réalise ce schéma pour montrer qu’il faut moins d’étapes pour corriger une erreur avec une interface amodale. Voir ces enjeux nécessitait de s’abstraire du fonctionnel et de modéliser des interactions. Cela va plus loin que compter le nombre de clics et relève de la sémantique : les opérations de l’utilisateur sont composées de verbes et de noms, l’ordre nom-verbe est-il supérieur à l’ordre inverse, pourtant plus proche de l’anglais ? Les tests lui ont montré que oui.

A Personal History of Modeless Text Editing

3. La démocratisation contre l’avant-garde

L’opposition de Tesler à Engelbart fut parfois frontale et révèle une différence fondamentale dans leurs visions. Pour schématiser, le premier visait le grand public et le second des experts.

Engelbart développait un système ambitieux et complet pour inventer de nouvelles manières de travailler collaborativement et même de raisonner. Plusieurs ordinateurs étaient connectés entre eux et équipés d’un clavier, d’une souris à trois boutons et d’un clavier-accord. Ce dernier, à gauche sur la photo, résume bien la complexité de l’ensemble, puisque chaque combinaison de touches exécutait une action différente.

Douglas Engelbart démontrant son système

Il se préoccupait plus d’utilité que d’utilisabilité. Mettre des mois à apprendre à maitriser le système n’était pas vraiment un problème si ça valait le coup. A la fin l’utilisateur pouvait manipuler de grandes quantités d’informations, raisonner sur des problèmes complexes ou résoudre des défis scientifiques. Engelbart avait cette vision de l’ordinateur comme nouveau medium cognitif capable « d’accroitre notre intellect ».

Le problème est qu’il voulait créer un instrument merveilleux comme le violon alors que pas grand monde ne prendra le temps d’apprendre à jouer du violon, pour reprendre une formule d’Alan Kay cité par Bardini, p. 215)

Tesler, à l’inverse, voulait créer des logiciels simples à comprendre par le plus grand nombre :

[Avec un collègue] ils rédigèrent une note interne à Xerox décrivant ce qu’ils appelèrent IT, pour « Intuitive Typewriter » [machine à écrire intuitive]. Ils décidèrent que la facilité d’utilisation était importante, en réalisant que ce serait un « désaccord majeur avec Engelbart ».

p. 157, Bardini, Thierry (2000). Bootstrapping : Douglas Engelbart, Coevolution, and the Origins of Personal Computing. Stanford University Press.

Pour Engelbart, un nouveau medium appelait de nouvelles conventions, tant pis si cela rompait avec les habitudes. Pour Tesler c’était l’inverse :

Il fallait adapter l’interface à la manière dont les gens travaillent et pas utiliser l’interface pour les forcer à apprendre à travailler mieux et différemment.

Idem

Dès le début des années 70 est donc née cette opposition entre deux philosophies. Elle reste prégnante dans la conception de logiciels : élitisme ou démocratisation, puissance ou facilité, respect des habitudes ou nouveauté. Présentée ainsi, l’opposition tend à la caricature et il y a sans doute de la place pour tous les types de logiciel. D’aucuns ont cependant argué qu’une vision a écrasé l’autre et a tué dans l’œuf tout un champ d’outils exigeants et avancés.

Quoiqu’il en soit, voici quelques personnes qui chacun à leur manière tentent de combler ce fossé et de faire avancer le medium.

• Up and Down the Ladder of Abstraction, a Systematic Approach to Data Visualization
• How can we develop transformative tools for thought ?
• Casual creator, ou de la séparation artificielle entre créateur et consommateur

Références complémentaires

Computer History Museum, Oral History of Lawrence G. “Larry” Tesler

Une démonstration par Tesler de son éditeur de texte phare

Post-scriptum : où l’on retrouve Don Norman

J’évoque dans cet article les éditeurs de texte des années 70. Il s’avère que l’un d’entre eux fut longtemps l’éditeur par défaut d’Unix et fut durement critiqué dans un article de Don Norman : The truth about Unix : The user interface is horrid (PDF).

L’article date de 1981 et fut apparemment très populaire. C’est le premier d’un longue série de textes qu’il consacre à l’informatique.

Le Chant du loup suit l’épopée de l’équipage d’un sous-marin et de son “oreille d’or”, un analyste acoustique. Ce film est une mine d’or sur l’esprit humain et ses interactions avec la machine. Voici pêle-mêle ce que j’ai trouvé intéressant.

On y trouve beaucoup d’exemples des approches appelées facteur humain, c’est-à-dire en gros de la manière dont humains, technique et organisations sont intriqués dans des gros machins impénétrables appelés systèmes socio-techniques complexes.

C’est aussi une parfaite illustration de la cognition incarnée^[1], une nébuleuse de programmes de recherche qui postule, pour schématiser :

• Que l’esprit est inséparable du corps.
• Que nos représentations existent par et pour l’action. Notre vision ne doit pas être pensée comme la construction d’une image mais comme une activité d’exploration du monde par boucles incessantes entre gestes et perception.Deux références : un livre d’Alva Noe (PDF de résumé et un de Kevin O’Regan Même nos capacités plus abstraites peuvent être pensées comme orientées vers certaines pratiques comme la communication et l’argumentation.
• Qu’il n’y a pas de limite précise entre l’esprit, le corps et son environnement immédiat. Par exemple si je dessine des schémas pour m’aider et structurer ma pensée et que j’y reviens fréquemment dans un carnet de notes, c’est une manière d’externaliser ma mémoire et on peut même dire que ce carnet fait partie de mon esprit, de manière étendue.

Un équipage, plusieurs cerveaux, un seul esprit ?

Le Chant du loup m’a fait notamment penser aux travaux d’Edwin Hutchins. Ce chercheur a passé du temps sur des ponts de frégates et dans des cockpits d’avion pour étudier leur organisation. Son livre Cognition in the wild s’ouvre sur une longue description d’un navire ayant échappé de justesse à une grave collision.

Il explique que l’intelligence doit être vue comme un phénomène intrinsèquement collectif, surtout dans ces cas d’équipages travaillant dans un environnement codifié et soudés autour d’un objectif commun. Les informations circulent à toute vitesse, chacun a un rôle précis pour analyser une information ou effectuer une action, si bien que l’équipe fonctionne presque comme une seule entité. Ou disons au moins qu’il y a un continuum entre individu et collectif.

Outils cognitifs

Dans un environnement aussi avancé et précaire qu’un sous-marin, l’usage de l’écrit peut étonner, alors qu’il est partout.

Il y a d’abord la table de navigation, utilisée avec feutre effaçable, rapporteur et compas. Le navigateur y calcule des modifications de trajectoire pour les proposer au commandant, qui peut voir le résultat directement. Quelques exemples, tirés du Chant du loup et d’autres films.

Ce genre de réflexion effectuée directement sur papier a été qualifiée « d’action épistémique » (PDF) par Kirsch et Maglio, qui ont étudié le comportement de joueurs face à Tetris. Ces actions n’ont pas d’autre but que d’aider à la résolution de problème, par exemple pour vérifier si une pièce va s’adapter aux autres il est plus simple de la pivote à l’écran que dans sa tête.

Des zoids tout à fait mignons dessinés à la main en 1994

Admirez aussi le tableau lumineux, les feuillets suspendus et le rouleau de scotch pré-dévidé.

Cet usage du papier est aussi documenté dans les cockpits d’avion, voir ce papier (PDF) écrit par Nomura, Hutchins (encore lui) et Holder.

Papier… et papier-toilette

Dans À la poursuite d’Octobre rouge, on voit ce qui ressemble fort à un rouleau de papier-toilette à droite de l’écran. Pourquoi ?

Réponse : un analyste utilise un sonar passif, c’est-à-dire pas un sonar classique qui émet des sons pour détecter leur réverbération sur l’environnement. Il écoute, tout simplement. Et il regarde : le spectre sonore ci-dessous représente le temps en ordonnées et la direction en abscisses (parfois il s’agit de la fréquence). A l’époque, pour suivre une trace sonore il devait le faire à la main. Ou plutôt au feutre. D’où le rouleau qui permettait d’essuyer ces marques. Ma source.

Oreille d’or

La tâche principale d’une oreille d’or : moins écouter que classer. Comparer à une base de données de signaux connus. Ce bruit est-il biologique ? Marin, sous-marin ? Ami, ennemi ? Si le bruit ne rentre pas dans une case, il est bien embêté. Dans le film : c’est trop silencieux pour venir d’un bateau mais en même temps aucun sous-marin en activité n’a d’hélices à quatre pales. Il faut forcément une réponse, tu as littéralement cinq personnes sur le dos qui doivent décider d’une trajectoire.

L’oreille d’or a le trackball dans une main, le casque sur une seule oreille pendant les phases de veille et sur les deux pendant les phases d’analyse intense. Une seule oreille car il doit rester attentif à ce qu’il se passe sur le pont. Parole de spécialiste :

Pour la veille, on n’utilise effectivement qu’une seule oreille. En effet, un veilleur sonar ne doit pas être devant son écran pour uniquement tourner la boule de son curseur audio : il doit savoir ce qui se passe dans le CO, pourquoi on change de route par rapport à une force, savoir ce qu’on cherche en priorité, le secteur de la menace. Il n’y a pas vraiment d’oreille préférée : le veilleur sonar de coque écoutera plutôt avec l’oreille gauche, car la table traçante (là où sont prises les décisions par le pacha ou le chef de quart) est à sa droite, alors que le veilleur ALR, qui est de l’autre côté, laissera plutôt son oreille gauche libre. Après, par exemple pendant un transit, c’est à dire lorsqu’il n’y a pas vraiment d’activités, on choisit l’oreille suivant le confort. Ensuite, on mettra les deux écouteurs quand on veut se concentrer sur un contact qui nous pose par exemple des soucis de classif ou de comptage.

Source

Système socio-technique

Voici quelques interfaces montrées dans le film (probablement non-contractuelles). Mais c’est la partie émergée de l’iceberg. D’une certaine manière dans un sous-marin tout est interface entre l’être humain et des fonctions critiques. Tout est pensé pour aider les sous-mariniers à écouter et exécuter des ordres, à marcher, se tenir, ou respirer. Par exemple quand l’atmosphère est compromise, ils peuvent se brancher à intervalle régulier à des arrivées d’air.

Dans cet écosystème entièrement artificiel, tout a été conçu. L’équipage aussi : comment s’organiser, qui doit faire quoi à quel moment, le language codifié, tout a été réfléchi. Plutôt que l’histoire d’un humain réduit à un rouage dans la machine, le film nous montre un monde où l’opposition entre humain et système n’a pas de sens.

En bonus

Un jeu vidéo de cartographie sous-marine

Le canal Youtube d’un spécialiste, avec cette playlist sur d’analyse accoustique

5
Un reportage de Libération : Vingt-quatre heures dans un sous-marin

Photo : Olivier Monge pour Libération, à bord du sous marin nucléaire Casabianca à quai à Toulon. Toulon, le 9 aout 2018

Beaucoup de plugins Sketch pour l’import de contenu (Craft, Data Populator…) sont pensés pour des sources de données non modifiables (banque d’images, noms de pays…), ou pour des données complexes à synchroniser avec des maquettes graphiques abouties. Suivant les plugins, ça implique de renommer des calques, d’avoir un fichier de données en TXT voire en JSON… bref des procédures un peu lourdes.

Mon cas d’usage est beaucoup plus simple : le plus souvent, je veux rapidement copier-coller une liste de textes depuis un tableau ou un mail, les coller dans une suite de calques. Et c’est tout.

Qu’à cela ne tienne, j’ai créé un plugin pour Sketch.

Comment l’utiliser ?

Copiez une liste de texte, sélectionnez des calques ou des symboles, utilisez le menu « data » de Sketch et paf, chaque ligne de texte est collée dans un élément. Si le symbole comporte plusieurs surcharges (overrides), le plugin utilisera la première.

Même pour des cas plus complexes (par exemple peupler un tableau), je trouve plus simple de répéter cette méthode autant de fois qu’il y a de colonnes que, mettons, de s’embêter avec du JSON.

Comme d’habitude, rapports de bug et retours sont les bienvenus.