From 27bfa0fd2d84108cef8466d2ac91dfcd7448ac40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Mon, 28 Oct 2024 16:11:38 +0100 Subject: [PATCH] chore(11ty): upgrade to v3 --- .eleventy.js | 27 +- docs/21e-seminaire-accessiweb/index.html | 8 +- docs/404.html | 2 +- docs/a-qui-parlent-vos-css/index.html | 2 +- docs/a-venir-ffeeeedd/index.html | 2 +- docs/a11y-css-version-deux/index.html | 10 +- docs/a11y-cssun-credo/index.html | 2 +- docs/accesslide-la-prise-en-main/index.html | 2 +- .../index.html | 8 +- docs/armony-altinier/index.html | 2 +- docs/atterrissage-reussi/index.html | 2 +- docs/avec-ou-sans-js/index.html | 10 +- docs/cache-cache-css/index.html | 4 +- docs/calculez/index.html | 2 +- .../index.html | 2 +- docs/clip-path-pourquoi-pas/index.html | 2 +- docs/css-experienceinherit/index.html | 2 +- docs/decouvrez-le-calcul-magique/index.html | 2 +- docs/dessine-moi-un-bouton/index.html | 6 +- docs/ethymologie-du-web/index.html | 2 +- docs/experience-de-typecast/index.html | 6 +- .../index.html | 2 +- docs/feed/index.xml | 226 +- .../index.html | 2 +- docs/html-comme-fondation/index.html | 4 +- .../index.html | 10 +- docs/index.html | 2 +- docs/javascript-and-jquery/index.html | 2 +- docs/journal/index.html | 2 +- docs/journal/page/10/index.html | 2 +- docs/journal/page/11/index.html | 2 +- docs/journal/page/12/index.html | 2 +- docs/journal/page/13/index.html | 2 +- docs/journal/page/14/index.html | 2 +- docs/journal/page/15/index.html | 2 +- docs/journal/page/2/index.html | 2 +- docs/journal/page/3/index.html | 2 +- docs/journal/page/4/index.html | 2 +- docs/journal/page/5/index.html | 2 +- docs/journal/page/6/index.html | 2 +- docs/journal/page/7/index.html | 2 +- docs/journal/page/8/index.html | 2 +- docs/journal/page/9/index.html | 2 +- docs/karl-groves/index.html | 2 +- docs/l-etat-des-champs/index.html | 4 +- docs/la-dette-technique/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../index.html | 8 +- docs/le-sens-de-la-semantique/index.html | 4 +- docs/le-soulignement-factice/index.html | 2 +- docs/le-web-en-kit/index.html | 2 +- docs/lecture-accessibilite-web/index.html | 2 +- .../index.html | 2 +- docs/lecture-webgrids/index.html | 8 +- docs/les-champs-images-casses/index.html | 6 +- docs/les-elements-remplaces/index.html | 4 +- "docs/les-nouveautes-d\312\274ie4/index.html" | 2 +- docs/les-sprites-negatifs/index.html | 2 +- docs/liens-devitement-persistants/index.html | 10 +- docs/marie-guillaumet/index.html | 2 +- docs/mentions-legales/index.html | 2 +- docs/mon-epopee-au-devquest/index.html | 12 +- docs/mutisme-relatif/index.html | 14 +- docs/nantescss/index.html | 2 +- docs/napoleon-bonaparte/index.html | 2 +- docs/navigation-aria-et-wordpress/index.html | 6 +- .../index.html | 2 +- docs/now/index.html | 2 +- docs/p-mendelson/index.html | 2 +- docs/paris-web-et-la-vie/index.html | 4 +- docs/politique-de-confidentialite/index.html | 4 +- .../index.html | 2 +- docs/que-se-passerait-il/index.html | 2 +- docs/reflexion-sur-sass/index.html | 2 +- .../index.html" | 2 +- docs/retour-de-paris-web/index.html | 2 +- docs/sass-commencez-par-les-deux-s/index.html | 6 +- docs/sass-compass-avance/index.html | 2 +- docs/sass-pour-les-webdesigners/index.html | 10 +- docs/semantique-de-l-interaction/index.html | 2 +- docs/swirl-in-style/index.html | 6 +- docs/travaux/index.html | 2 +- .../index.html | 2 +- docs/un-fichier-vide/index.html | 2 +- .../index.html | 2 +- docs/vitesse-precipitation/index.html | 2 +- docs/wordpress-3-5-est-mediaphobe/index.html | 2 +- docs/wp-tech-2014/index.html | 8 +- docs/wpmx-day/index.html | 6 +- package-lock.json | 1943 +++++++++-------- package.json | 13 +- 92 files changed, 1304 insertions(+), 1215 deletions(-) diff --git a/.eleventy.js b/.eleventy.js index 8965e8d5..d012762a 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,20 +1,19 @@ -const path = require("node:path"); +import path from 'node:path' // Globals: dates, strings -const { DateTime } = require('luxon') -const string = require('string') -const slugify = s => string(s).slugify().toString() +import { DateTime } from 'luxon' +import slugify from '@sindresorhus/slugify' // Markdown configuration -const markdownit = require("markdown-it") -const anchor = require("markdown-it-anchor") -const figure = require("markdown-it-image-figures") -const footnote = require("markdown-it-footnote") -const { imgSize } = require("@mdit/plugin-img-size") +import markdownit from 'markdown-it' +import anchor from 'markdown-it-anchor' +import figure from 'markdown-it-image-figures' +import footnote from 'markdown-it-footnote' +import { imgSize } from '@mdit/plugin-img-size' // 11ty plugins -const tocPlugin = require("eleventy-plugin-toc") -const rssPlugin = require("@11ty/eleventy-plugin-rss") -const syntaxHighlightPlugin = require("@11ty/eleventy-plugin-syntaxhighlight") +import tocPlugin from 'eleventy-plugin-toc' +import rssPlugin from '@11ty/eleventy-plugin-rss' +import syntaxHighlightPlugin from '@11ty/eleventy-plugin-syntaxhighlight' -module.exports = function (eleventyConfig) { +export default function (eleventyConfig) { // Shortcodes eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`) @@ -49,7 +48,7 @@ module.exports = function (eleventyConfig) { typographer: true, quotes: ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'], }) - .use(anchor, { slugify }) + .use(anchor, { slugify: s => slugify(s) }) .use(footnote) .use(figure, { figcaption: true, diff --git a/docs/21e-seminaire-accessiweb/index.html b/docs/21e-seminaire-accessiweb/index.html index 242d75f4..d9218056 100644 --- a/docs/21e-seminaire-accessiweb/index.html +++ b/docs/21e-seminaire-accessiweb/index.html @@ -8,7 +8,7 @@ - + @@ -58,7 +58,7 @@

Réservé jusqu’à pré

C’est donc une grande première, et moi qui lisait les comptes-rendus des précédents séminaires sur internet ait enfin pu y assister !

-

En tant qu’orateur

+

En tant qu’orateur

Le thème du séminaire était « Choisir et utiliser un CMS pour créer des contenus accessibles », organisé par Olivier Nourry.

Non seulement j’ai pu y assister, mais j’ai même été invité par Olivier à y faire une intervention autour de la même thématique que celle abordée lors du WP Tech au sujet des thèmes enfants dans WordPress (et leur utilisation dans une méthodologie de travail basée sur l’amélioration perpétuelle).

WordPress étant le CMS le plus utilisé au monde – et de loin – Olivier souhaitait mettre en avant une pratique concrète pour incorporer l’accessibilité à la production de sites WordPress. C’est avec plaisir que j’ai accepté le défi.

@@ -81,7 +81,7 @@

En tant que spectateur

Les sujets étaient extrêmement intéressants, et comme l’a évoqué Olivier pour conclure le séminaire : ce type de démarche n’a – à ma connaissance, comme à la sienne – jamais été mené en profondeur.

La comparaison de la prise en compte de l’accessibilité des différents acteurs de l’écosystème des CMS est tout à fait pertinente et totalement absent des comparatifs qu’on peut trouver ça et là.

La présentation des ATAG2 en des termes compréhensibles par un humain est également une performance, que peu de personnes pouvaient réaliser. Ayant déjà tenté l’aventure de lire et comprendre les ATAG2, j’ai été épaté par le travail produit par Jean-Pierre Villain et ait noirci de notes quatre ou cinq pages de mon carnet.

-

Ce n’est pas fini !

+

Ce n’est pas fini !

Comme Dominique Burger (président de BrailleNet) et Olivier Nourry l’ont annoncé, un livre blanc est en cours d’élaboration afin de diffuser le contenu de ce séminaire.

Une invitation est également lancée aux professionnels du web – qui utiliseraient couramment un CMS oublié de ce séminaire – de se plier à l’exercice d’évaluer l’accessibilité de leur outil préféré afin d’enrichir le comparatif.

Pour conclure, je suis réellement ravi d’avoir pu rencontrer, échanger, apprendre autant et je tiens à remercier chaleureusement l’association BrailleNet pour avoir permis que cet événement ait lieu, et Olivier Nourry de m’y avoir invité en tant qu’intervenant : j’en suis très honoré.

@@ -124,7 +124,7 @@

Ce n’est pas fini !

Sommaire

-
  1. En tant qu’orateur
  2. En tant que spectateur
  3. Ce n’est pas fini !
  4. Commentaires
+
  1. En tant qu’orateur
  2. En tant que spectateur
  3. Ce n’est pas fini !
  4. Commentaires
diff --git a/docs/404.html b/docs/404.html index b45aba6a..1022d32b 100644 --- a/docs/404.html +++ b/docs/404.html @@ -8,7 +8,7 @@ - + diff --git a/docs/a-qui-parlent-vos-css/index.html b/docs/a-qui-parlent-vos-css/index.html index 00fbd54c..e4ece023 100644 --- a/docs/a-qui-parlent-vos-css/index.html +++ b/docs/a-qui-parlent-vos-css/index.html @@ -8,7 +8,7 @@ - + diff --git a/docs/a-venir-ffeeeedd/index.html b/docs/a-venir-ffeeeedd/index.html index e1fd4858..5986acb5 100644 --- a/docs/a-venir-ffeeeedd/index.html +++ b/docs/a-venir-ffeeeedd/index.html @@ -8,7 +8,7 @@ - + diff --git a/docs/a11y-css-version-deux/index.html b/docs/a11y-css-version-deux/index.html index 4aa9f162..3ca9f81b 100644 --- a/docs/a11y-css-version-deux/index.html +++ b/docs/a11y-css-version-deux/index.html @@ -8,7 +8,7 @@ - + @@ -89,7 +89,7 @@

Désactivation de tests

Traduction

Pour celle-ci, je vais applaudir discrètement et vous renvoyer vers l’article écrit par Kitty (en anglais) qui détaille le fonctionnement de son système de traduction en Sass.

Oui, vous avez bien lu :désormais a11y.css est multilingue en demeurant écrit uniquement en Sass. Outre la portée accrue de façon incroyable suite au passage en anglais, l’exploit technique de Kitty est incroyable. J’en profite pour signaler la parution de son premier livre « CSS3 : pratique du design web » en vente aux éditions Eyrolles, que je vous recommande chaudement.[1]

-

Documentation & test

+

Documentation & test

Vous vous en doutez, le projet est devenu relativement complexe. Les solutions apportées par les différents contributeurs on tellement enrichi ce projet que même moi, je ne m’y retrouvais plus.

J’avais déjà mentionné lors de mon atelier au WP Tech mon intérêt pour la documentation ; c’est donc tout naturellement que j’ai cherché à documenter plus précisément a11y.css. Et de mon point de vue, il y a deux aspects très différents à documenter :

    @@ -135,12 +135,12 @@

    Hologram

    Et voilà ! Hologram génère un mini-site statique grâce à un jeu de ressources très simple. Il est ainsi possible de personnaliser l’entête, le pied-de-page et les ressources statiques pour aménager sa documentation à volonté. Magique 🙂

    Et puisque j’avais déjà créé une branche pour servir de présentation en ligne sur Github, j’ai ajouté ces nouveaux fichiers HTML afin d’en faire un véritable site de démonstration.

    Jetez un œil au site de démonstration d’a11y.css !

    -

    SassDoc

    +

    SassDoc

    Pour finir, l’architecture du projet s’étant alourdie d’options et de fonctionnalités, il fallait permettre aux utilisateurs de Sass de s’approprier plus facilement l’outil.

    Par chance, la majorité de ces enrichissements étaient l’œuvre de Kitty Giraudel, qui s’avère aussi être le créateur de SassDoc. La personne a tendance à faire des trucs un peu fou en Sass, et cet outil de documentation correspond à la perfection aux besoins d’une API Sass.

    Ni une ni deux, Kitty a mis en place SassDoc !

    Et voilà un projet complètement documenté.

    -

    Ce n’est pas fini !

    +

    Ce n’est pas fini !

    Il reste quelques sujets à avancer :

    • Mettre à niveau SassDoc pour utiliser la V2 ;
      • @@ -170,7 +170,7 @@

      Ce n’est pas fini !

      Sommaire

      -
      1. Corrections multiples
      2. Personnalisation
      3. Traduction
      4. Documentation & test
      5. Ce n’est pas fini !
      +
      1. Corrections multiples
      2. Personnalisation
      3. Traduction
      4. Documentation & test
      5. Ce n’est pas fini !
      diff --git a/docs/a11y-cssun-credo/index.html b/docs/a11y-cssun-credo/index.html index eb6a9cfa..3786e9d4 100644 --- a/docs/a11y-cssun-credo/index.html +++ b/docs/a11y-cssun-credo/index.html @@ -8,7 +8,7 @@ - + diff --git a/docs/accesslide-la-prise-en-main/index.html b/docs/accesslide-la-prise-en-main/index.html index 8506b2e8..e1e51d63 100644 --- a/docs/accesslide-la-prise-en-main/index.html +++ b/docs/accesslide-la-prise-en-main/index.html @@ -8,7 +8,7 @@ - + diff --git a/docs/ameliorer-les-images-dans-wordpress-avec-html5-et-aria/index.html b/docs/ameliorer-les-images-dans-wordpress-avec-html5-et-aria/index.html index d140230c..a8a1477f 100644 --- a/docs/ameliorer-les-images-dans-wordpress-avec-html5-et-aria/index.html +++ b/docs/ameliorer-les-images-dans-wordpress-avec-html5-et-aria/index.html @@ -8,7 +8,7 @@ - + @@ -58,7 +58,7 @@

      WordPress est un bon outi

      Pour commencer, il faut comprendre une problématique de base en terme d’accessibilité : la distinction entre les images décoratives et les images porteuses de sens. Pour comprendre cette distinction et son importance, je vous recommande vivement la lecture d’«Accessibilité web» par Armony Altinier. Comme souvent lorsque nous parlons d’accessibilité web, il s’agit de bon sens : une image porteuse de sens doit être restituée à tous les utilisateurs, tandis qu’une image décorative ne doit être montrée qu’aux utilisateurs disposant d’un affichage graphique complet.

      -

      Les limites de WordPress

      +

      Les limites de WordPress

      Tout le monde n’est pas sensible à ces questions, même s’il le faudrait : WordPress ne fait pas exception. Il donne cependant la possibilité à ses utilisateurs de servir des images de façon tout à fait correcte, en proposant de base pour tous les fichiers la capacité d’adjoindre un texte alternatif — ce qui remplit le critère principal des bonnes pratiques d’OpQuast et permet de satisfaire la plupart des critères de niveau Bronze d’Accessiweb.

      Pour autant WordPress ne va pas plus loin :

        @@ -103,7 +103,7 @@

        Les images porteuses de sens $output .= ’</figure>’; return $output; } -

        L’intervention détaillée

        +

        L’intervention détaillée

        La structure d’origine est conservée ; je détaille ce qui a été fait :

        • Une couche sémantique HTML5 est appliquée en lieu et place du balisage «neutre» précédent : figure et figcaption ;
          • @@ -140,7 +140,7 @@

          Mises à jour

          Sommaire

          -
          1. Les limites de WordPress
          2. Les images porteuses de sens
          3. L’intervention détaillée
          4. Mises à jour
          +
          1. Les limites de WordPress
          2. Les images porteuses de sens
          3. L’intervention détaillée
          4. Mises à jour
          diff --git a/docs/armony-altinier/index.html b/docs/armony-altinier/index.html index 5e93fd40..664581d9 100644 --- a/docs/armony-altinier/index.html +++ b/docs/armony-altinier/index.html @@ -8,7 +8,7 @@ - + diff --git a/docs/atterrissage-reussi/index.html b/docs/atterrissage-reussi/index.html index c588dc88..86f2ce45 100644 --- a/docs/atterrissage-reussi/index.html +++ b/docs/atterrissage-reussi/index.html @@ -8,7 +8,7 @@ - + diff --git a/docs/avec-ou-sans-js/index.html b/docs/avec-ou-sans-js/index.html index dd0f9fbb..b85f59a7 100644 --- a/docs/avec-ou-sans-js/index.html +++ b/docs/avec-ou-sans-js/index.html @@ -8,7 +8,7 @@ - + @@ -58,7 +58,7 @@

          J'arrive sur la page

          Vous avez déjà vécu ça, pas vrai ?

          -

          L’amélioration progressive

          +

          L’amélioration progressive

          Quand on cherche à bien faire ces interactions qui affichent et masquent un élément à l’aide de JavaScript, une des fondations est de s’assurer que le contenu soit accessible sans JavaScript. Ça fait partie intégrante de l’amélioration progressive, que je synthétise comme suit :

          1. le HTML est propre, lisible, cohérent, et permet d’accéder au contenu sans obstacle ;
            2. @@ -83,7 +83,7 @@

            La limite du JS

            Les styles à la rescousse

            La base du fonctionnement que je propose est l’astuce utilisée par Nicolas Hoffmann sur ses composants jQuery accessibles. Grosso modo, il effectue une transition sur max-height pour la partie animée, et sur visibility avec un délai pour masquer réellement le contenu.[1]

            J’aime beaucoup cette technique, dont le seul inconvénient — à mon avis — est d’animer max-height, ce qui nous oblige à utiliser un chiffre magique pour une hauteur maximum inatteignable.

            -

            L’état de base

            +

            L’état de base

            Voici l’état de base de ma navigation :

            [id="nav"] {
   transform: translate3d(-100%, 0, 0);
@@ -96,7 +96,7 @@ 
            L’état de base
            
 }

            Elle est décalée vers la gauche de la totalité de sa largeur, afin de sortir de l’écran ; et est masquée.

            Notez que nous avons un délai sur nos deux transitions. Pour le moment, seul celui sur visibility est important, puisqu’il permet de faire coïncider le changement de visibilité avec la durée de la transformation.

            -

            L’ouverture grâce à JS

            +

            L’ouverture grâce à JS

            Là, c’est tout bête. Le JS ajoute une classe .is-opened à la navigation, je m’en sers pour accrocher mes styles :

            
 .is-opened {
@@ -229,7 +229,7 @@ 
            Démonstration
            
 		
            
 			
            Sommaire
            
 			
            
-				
            1. L’amélioration progressive
            2. La limite du JS
            3. Les styles à la rescousse
            4. Démonstration
            5. Commentaires
            
+				
            1. L’amélioration progressive
            2. La limite du JS
            3. Les styles à la rescousse
            4. Démonstration
            5. Commentaires
            
 			
            
 		
            
 	
diff --git a/docs/cache-cache-css/index.html b/docs/cache-cache-css/index.html
index 2e8eb768..426fa445 100644
--- a/docs/cache-cache-css/index.html
+++ b/docs/cache-cache-css/index.html
@@ -8,7 +8,7 @@
 		
 		
 		
-		
+		
 		
 		
 		
@@ -115,7 +115,7 @@ 
            Code et traduction
            
 
            Version anglaise
            
 
            Kitty Giraudel m’a fait l’honneur de traduire cet article en anglais et le publier sur son blog. Merci !
            
 
            Modifications
            
-
            Les lecteurs d’écran sur mobile
            
+
            Les lecteurs d’écran sur mobile
            
 
            19 octobre 2016
            
 
            Ayant besoin de tests sur cette version pour vérifier qu’elle n’introduit pas de régressions, Johan Ramon m’a remonté un bug étrange sur VoiceOver. En creusant un peu avec Sylvain Pigeard, il nous est apparu que position: static posait problème lors de la prise de focus d’un lien ayant la classe .sr-only-focusable.
            
 
            Nous étions contents, lorsqu’en cherchant à avertir l’équipe de Bootstrap nous sommes tombés sur un ticket ouvert récemment qui implique également TalkBack. Patrick H. Lauke, en investiguant, a décelé de nombreuses incohérences dans la gestion du focus entre les diverses technologies d’assistance sur mobile. Il a ainsi ouvert des tickets un peu partout :
            
diff --git a/docs/calculez/index.html b/docs/calculez/index.html
index bd161766..6d6e10b5 100644
--- a/docs/calculez/index.html
+++ b/docs/calculez/index.html
@@ -8,7 +8,7 @@
 		
 		
 		
-		
+		
 		
 		
 		
diff --git a/docs/choisir-ses-couleurs-pour-le-web/index.html b/docs/choisir-ses-couleurs-pour-le-web/index.html
index 0fe93f0a..72836849 100644
--- a/docs/choisir-ses-couleurs-pour-le-web/index.html
+++ b/docs/choisir-ses-couleurs-pour-le-web/index.html
@@ -8,7 +8,7 @@
 		
 		
 		
-		
+		
 		
 		
 		
diff --git a/docs/clip-path-pourquoi-pas/index.html b/docs/clip-path-pourquoi-pas/index.html
index 601b1e5b..2868b7af 100644
--- a/docs/clip-path-pourquoi-pas/index.html
+++ b/docs/clip-path-pourquoi-pas/index.html
@@ -8,7 +8,7 @@
 		
 		
 		
-		
+		
 		
 		
 		
diff --git a/docs/css-experienceinherit/index.html b/docs/css-experienceinherit/index.html
index 3acc4147..836d6857 100644
--- a/docs/css-experienceinherit/index.html
+++ b/docs/css-experienceinherit/index.html
@@ -8,7 +8,7 @@
 		
 		
 		
-		
+		
 		
 		
 		
diff --git a/docs/decouvrez-le-calcul-magique/index.html b/docs/decouvrez-le-calcul-magique/index.html
index 44b68f0d..424d21a1 100644
--- a/docs/decouvrez-le-calcul-magique/index.html
+++ b/docs/decouvrez-le-calcul-magique/index.html
@@ -8,7 +8,7 @@
 		
 		
 		
-		
+		
 		
 		
 		
diff --git a/docs/dessine-moi-un-bouton/index.html b/docs/dessine-moi-un-bouton/index.html
index daaa9003..b2249924 100644
--- a/docs/dessine-moi-un-bouton/index.html
+++ b/docs/dessine-moi-un-bouton/index.html
@@ -8,7 +8,7 @@
 		
 		
 		
-		
+		
 		
 		
 		
@@ -60,7 +60,7 @@ 
            Dessine-moi un bouton
            
 
            Une espèce animale
            
 
            Il en existe de toute sorte : des grands, des petits, des noirs, des jaunes, des visuels et des textuels… Chaque bouton que vous pouvez imaginer existe certainement déjà quelque part.
            
 
            Pour caractériser un bouton, on dispose de multiples critères : sa palette de couleur, sa forme, son volume, sa réaction au survol, son contenu, sa cible… Et comme nous, il a des mensurations : sa taille et son poids. On pourrait s’amuser à rédiger un bestiaire des boutons, les classer par espèces et déterminer si certaines sont en voie d’extinction ou d’expansion – mais ce sera pour un autre jour.
            
-
            L’importance de l’environnement
            
+
            L’importance de l’environnement
            
 
            L’impact – et donc l’intérêt – d’un bouton dépend autant de lui que de son environnement. Ce dernier détermine l’espace disponible, la liberté de mouvements – mais c’est également de lui dont dépend le caractère du bouton : s’il est discret ou exubérant, calme ou agité, agressif ou doux comme un agneau…
            
 
            Le sens de la vie
            
 
            Pour certains, ce sera 42 ; pour tous les autres, il faudra se définir un rôle afin de donner un sens à sa vie. Les boutons ont également une raison d’être là – et c’est vous, son créateur, qui devez la lui fournir. Quelle est sa raison d’être ?
            
@@ -81,7 +81,7 @@ 
            La guerre des boutons
            
 		
            
 			
            Sommaire
            
 			
            
-				
            1. Une espèce animale
            2. L’importance de l’environnement
            3. Le sens de la vie
            4. La guerre des boutons
            
+				
            1. Une espèce animale
            2. L’importance de l’environnement
            3. Le sens de la vie
            4. La guerre des boutons
            
 			
            
 		
            
 	
diff --git a/docs/ethymologie-du-web/index.html b/docs/ethymologie-du-web/index.html
index 4f0bed48..f4696364 100644
--- a/docs/ethymologie-du-web/index.html
+++ b/docs/ethymologie-du-web/index.html
@@ -8,7 +8,7 @@
 		
 		
 		
-		
+		
 		
 		
 		
diff --git a/docs/experience-de-typecast/index.html b/docs/experience-de-typecast/index.html
index cb8d6429..6530d1fd 100644
--- a/docs/experience-de-typecast/index.html
+++ b/docs/experience-de-typecast/index.html
@@ -8,7 +8,7 @@
 		
 		
 		
-		
+		
 		
 		
 		
@@ -88,7 +88,7 @@ 
            Un résultat utile et prati

        Pour vous donner un aperçu du résultat, voici une portion de la charte obtenue lors de mon casting pour ffoodd :

        Exemple de charte générée par Typecast
        Exemple de charte générée par Typecast
        -

        L’outil idéal ?

        +

        L’outil idéal ?

        Vous l’aurez compris, j’ai été réellement convaincu — et satisfait — par cet outil. Cependant je ne me suis servi que de la version d’essai de 14 jours, gratuite. La version payante vous permet de gérer plusieurs projets, et il existe des partenariats avec certaines fonderies pour ajouter directement les typographies choisies à vos plans.

        Bien que l’outil soit génial, je n’ai pas pris d’abonnement car c’était un one-shot pour la refonte de ffoodd. À titre personnel ce n’est pas intéressant car je ne m’en servirais pas; à titre professionnel, très peu de clients acceptent d’acheter une typographie et je dois très souvent jouer avec des typographies websafe — ce qui fait perdre tout son intérêt à Typecast.[3]

        Cela étant dit, je recommande chaudement cet outil, qui, du point de vue du designer, est réellement riche et permet de se focaliser sur l’essentiel avant de se lancer dans la production d’une maquette complète.

        @@ -113,7 +113,7 @@

        L’outil idéal ?

        Sommaire

        -
        1. Présentation
        2. Qui dit casting dit choix
        3. Prise en main intuitive
        4. Un résultat utile et pratique
        5. L’outil idéal ?
        +
        1. Présentation
        2. Qui dit casting dit choix
        3. Prise en main intuitive
        4. Un résultat utile et pratique
        5. L’outil idéal ?
        diff --git a/docs/fabrice-flipo-michelle-dobree-et-marion-michot-la-face-cachee-du-numerique/index.html b/docs/fabrice-flipo-michelle-dobree-et-marion-michot-la-face-cachee-du-numerique/index.html index d15590b7..101cede6 100644 --- a/docs/fabrice-flipo-michelle-dobree-et-marion-michot-la-face-cachee-du-numerique/index.html +++ b/docs/fabrice-flipo-michelle-dobree-et-marion-michot-la-face-cachee-du-numerique/index.html @@ -8,7 +8,7 @@ - + diff --git a/docs/feed/index.xml b/docs/feed/index.xml index 0936b02b..fa52bb96 100644 --- a/docs/feed/index.xml +++ b/docs/feed/index.xml @@ -15,7 +15,7 @@ Accompagné de deux collègues nantaises, Céline Mérand et Charline Humeau — retenues avec leur <em>quickie</em> « <a href="https://www.devquest.fr/sessions/dedramatisons-l-accessibilite">Dédramatisons l’accessibilité</a> » — nous sommes partis à l’aventure à Niort.</p> <p>Je vous raconte cette épopée ?</p> <hr /> -<h2 id="le-folklore-du-devquest" tabindex="-1">Le folklore du devQuest</h2> +<h2 id="le-folklore-du-dev-quest" tabindex="-1">Le folklore du devQuest</h2> <p>Le devQuest se tenait <a href="https://www.vivre-a-niort.com/services-publics/les-equipements/parc-des-expositions/index.html">au Dôme du parc des expositions de Niort</a>, un lieu agréable et enchanteur grâce à sa disposition circulaire. Trois salles étaient occupées :</p> <ul> <li>La forge, la plus grande salle.</li> @@ -41,7 +41,7 @@ Accompagné de deux collègues nantaises, Céline Mérand et Charline Humeau — <p>Les organisateurs du devQuest ont souligné dans leur introduction le soutien qu’ils ont reçu des organisateurs du devFest Nantes, et cette conférence montrait bien la valeur inestimable de l’expérience partagée : 12 ans d’existence, d’une première édition confidentielle et artisanale à un événement gigantesque rassemblant des milliers de personnes.</p> <p>Ce retour d’expérience d’une équipe d’organisateurs est vraiment enrichissant, et je le partagerai dès que possible à nos camarades organisateurs de l’Atlantique Day chez Onepoint à Nantes, mais aussi à mes copains organisateurs de Paris Web. On peut toujours s’améliorer !</p> <hr /> -<h3 id="arretons-de-detester-nos-applications" tabindex="-1">Arrêtons de (dé)tester nos applications</h3> +<h3 id="arretons-de-de-tester-nos-applications" tabindex="-1">Arrêtons de (dé)tester nos applications</h3> <p><a href="https://github.com/luifr10">Louis Fredice Njako Molom</a> et <a href="https://github.com/stanlee974">Stanley Servical</a> ont mené un atelier sur la validation de cas d’utilisation centrés utilisateurs, articulés autour de la solution <a href="https://orange-opensource.github.io/uuv/">UUV</a> qu’ils éditent au sein de l’organisation GitHub Orange OpenSource.</p> <p>Je n’ai pas pu assister à cet atelier — étant moi-même sur scène au même moment — mais ils ont déjà mené cet atelier au dernier Devoxx et j’ai pu découvrir la solution UUV récemment. Cet outil s’appuie sur les standards actuels du test (Cucumber, Cypress ou Playwright — au choix ! — et aXe) et permet de rédiger ses cas de tests en langage naturel.</p> <p>Des dictionnaires dédiés à certains aspects (notamment l’accessibilité) et un assistant (une application Electron) permettent à n’importe quel intervenant sur un projet de rédiger un cas de test. C’est la promesse (tenue) et je trouve ça assez incroyable.</p> @@ -57,7 +57,7 @@ Accompagné de deux collègues nantaises, Céline Mérand et Charline Humeau — <p>Le seul bémol que j’apporterai est de restreindre le sujet, dès le titre, à Chrome… alors que toutes ces fonctionnalités existent dans Firefox ou Safari.</p> <p>Et je préfère Firefox !</p> <hr /> -<h3 id="dedramatisons-laccessibilite" tabindex="-1">Dédramatisons l’accessibilité</h3> +<h3 id="dedramatisons-l-accessibilite" tabindex="-1">Dédramatisons l’accessibilité</h3> <p><a href="https://www.linkedin.com/in/celine-merand/">Céline</a> et <a href="https://www.linkedin.com/in/charlinehumeau/">Charline</a> ont pu rejouer leur conférence, qui brosse un portrait de l’accessibilité web bien loin des clichés habituels : moche, compliqué, cher, etc. En vingt minutes, elles réussissent un véritable tour de force : sensibiliser au handicap, illustrer avec des situations concrètes, apporter des ressources théoriques et proposer des outils concrets pour mettre le pied à l’étrier.</p> <p>Et leur conférence sortait du lot : c’était la seule catégorisée UX / UI de toute la journée !</p> <hr /> @@ -71,7 +71,7 @@ Accompagné de deux collègues nantaises, Céline Mérand et Charline Humeau — <p>J’en repars en ayant glâné de nouvelles connaissances, découvert quelques personnes et passé un très bon moment.</p> <p>Bravo à l’équipe du devQuest, et merci à onepoint de nous permettre de partir en expédition pour des quêtes de ce genre !</p> - Tue, 18 Jun 2024 16:09:15 +0000 + Tue, 18 Jun 2024 16:09:15 GMT Gaël Poupard https://www.ffoodd.fr/mon-epopee-au-devquest/ 18 juin 2024 @@ -150,7 +150,7 @@ Accompagné de deux collègues nantaises, Céline Mérand et Charline Humeau — <p>Je crois que c’est le genre de choses qu’HTML permet : <code>&lt;details&gt;</code> et <code>&lt;summary&gt;</code> finiront par être implémentés et restitués de façon cohérente aux technologies d’assistance, rendant les enrichissements avec ARIA caduques. Le travail de Scott, du test très avancé aux articles de blogs et à l’ouverture de tickets de bug, est la voie à suivre. Les implémentations complètes dans les bibliothèques comme <a href="https://a11y-dialog.netlify.app/">a11y-dialog de Kitty Giraudel</a> permettent de gagner en maturité et de clarifier les attentes pour ces composants. Et avec l’augmentation des usages, les navigateurs et technologies d’assistance vont certainement reconsidérer leurs priorisations, dans des opérations comme Interop ou <a href="https://aria-at.w3.org/">ARIA-AT</a>.</p> <p>Alors utilisons, testons, et aidons les navigateurs et technologies d’assistance à supporter ces nouveaux éléments HTML !</p> - Thu, 22 Dec 2022 17:53:57 +0000 + Thu, 22 Dec 2022 17:53:57 GMT Gaël Poupard https://www.ffoodd.fr/html-comme-fondation/ 22 décembre 2022 @@ -162,7 +162,7 @@ Accompagné de deux collègues nantaises, Céline Mérand et Charline Humeau — <h2 id="le-souci" tabindex="-1">Le souci</h2> <p>Lorsque vous appliquez des styles à un champ invalide (en utilisant la pseudo-classe <code>:invalid</code>), ils seront donc appliqués dès le chargement de la page si ce champ est également affublé de l’attribut <code>required</code>. Dommage !</p> <p>C’est ce qui a conduit <a href="https://nota-bene.org/">Stéphane Deschamps</a> à ouvrir <a href="https://github.com/w3c/html/issues/1073">une issue sur le Github du W3C</a>.</p> -<h3 id="letat-indetermine" tabindex="-1">L’état indéterminé</h3> +<h3 id="l-etat-indetermine" tabindex="-1">L’état indéterminé</h3> <p>Quelques échanges plus tard, on évoque l’existence de l’état indéterminé pour les cases à cocher, boutons radios et barres de progression <a href="https://www.w3.org/TR/html5/disabled-elements.html#selector-indeterminate">dans la spécification HTML5</a> qui pourrait porter le statu quo sur l’invalidité de notre champ. Cet état est facile à cibler en CSS à l’aide de la pseudo-classe <code>:indeterminate</code>.</p> <h3 id="le-brouillon-du-module-4-des-selecteurs" tabindex="-1">Le brouillon du module 4 des sélecteurs</h3> <p>Dans <a href="https://drafts.csswg.org/selectors-4/#user-pseudos">le brouillon du module de niveau 4 des sélecteurs CSS</a>, une nouvelle pseudo-classe tente de résoudre ce problème : <code>:user-invalid</code>. Vous noterez par ailleurs que le paragraphe descriptif n’est pas à jour puisqu’il évoque la première dénomination de ce nouveau sélecteur, à savoir <code>:user-error</code>.</p> @@ -207,7 +207,7 @@ Et bonne nouvelle, <a href="https://caniuse.com/#feat=css-placeholder-sh </li> </ol> - Thu, 21 Dec 2017 15:09:15 +0000 + Thu, 21 Dec 2017 15:09:15 GMT Gaël Poupard https://www.ffoodd.fr/l-etat-des-champs/ 21 décembre 2017 @@ -245,7 +245,7 @@ OSEF !</p> </li> </ol> - Mon, 03 Apr 2017 15:35:56 +0000 + Mon, 03 Apr 2017 15:35:56 GMT Gaël Poupard https://www.ffoodd.fr/calculez/ 3 avril 2017 @@ -254,7 +254,7 @@ OSEF !</p> Avec ou sans JS ? https://www.ffoodd.fr/avec-ou-sans-js/ <p>Vous avez déjà vécu ça, pas vrai ?</p> -<h2 id="lamelioration-progressive" tabindex="-1">L’amélioration progressive</h2> +<h2 id="l-amelioration-progressive" tabindex="-1">L’amélioration progressive</h2> <p>Quand on cherche à bien faire ces interactions qui affichent et masquent un élément à l’aide de JavaScript, une des fondations est de <strong>s’assurer que le contenu soit accessible sans JavaScript</strong>. Ça fait partie intégrante de l’amélioration progressive, que je synthétise comme suit :</p> <ol> <li>le HTML est propre, lisible, cohérent, et permet d’<strong>accéder au contenu sans obstacle</strong> ;</li> @@ -279,7 +279,7 @@ document<span class="token punctuation">.</span>documentEl <h2 id="les-styles-a-la-rescousse" tabindex="-1">Les styles à la rescousse</h2> <p>La base du fonctionnement que je propose est l’astuce utilisée par <a href="https://www.nicolas-hoffmann.net/source/">Nicolas Hoffmann</a> sur <a href="https://a11y.nicolas-hoffmann.net/">ses composants jQuery accessibles</a>. <em>Grosso modo</em>, il effectue une transition sur <code>max-height</code> pour la partie animée, et sur <code>visibility</code> avec un délai pour <strong>masquer réellement</strong> le contenu.<sup class="footnote-ref"><a href="https://www.ffoodd.fr/avec-ou-sans-js/#fn1" id="fnref1">[1]</a></sup></p> <p>J’aime beaucoup cette technique, dont le seul inconvénient — à mon avis — est d’animer <code>max-height</code>, ce qui nous oblige à utiliser un <a href="https://www.ffoodd.fr/decouvrez-le-calcul-magique/">chiffre magique</a> pour une hauteur maximum inatteignable.</p> -<h3 id="letat-de-base" tabindex="-1">L’état de base</h3> +<h3 id="l-etat-de-base" tabindex="-1">L’état de base</h3> <p>Voici l’état de base de ma navigation :</p> <pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">[id="nav"]</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate3d</span><span class="token punctuation">(</span>-100%<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">;</span> @@ -292,7 +292,7 @@ document<span class="token punctuation">.</span>documentEl <span class="token punctuation">}</span></code></pre> <p>Elle est décalée vers la gauche de la totalité de sa largeur, afin de <strong>sortir de l’écran</strong> ; et est masquée.</p> <p>Notez que nous avons un délai sur nos deux transitions. Pour le moment, seul celui sur <code>visibility</code> est important, puisqu’il permet de faire coïncider le changement de visibilité avec la durée de la transformation.</p> -<h3 id="louverture-grace-a-js" tabindex="-1">L’ouverture grâce à JS</h3> +<h3 id="l-ouverture-grace-a-js" tabindex="-1">L’ouverture grâce à JS</h3> <p>Là, c’est tout bête. Le JS ajoute une classe <code>.is-opened</code> à la navigation, je m’en sers pour accrocher mes styles :</p> <pre class="language-css" tabindex="0"><code class="language-css"> <span class="token selector">.is-opened</span> <span class="token punctuation">{</span> @@ -330,7 +330,7 @@ document<span class="token punctuation">.</span>documentEl </li> </ol> - Fri, 03 Feb 2017 18:02:05 +0000 + Fri, 03 Feb 2017 18:02:05 GMT Gaël Poupard https://www.ffoodd.fr/avec-ou-sans-js/ 3 février 2017 @@ -411,7 +411,7 @@ document<span class="token punctuation">.</span>documentEl </li> </ol> - Thu, 08 Dec 2016 17:28:58 +0000 + Thu, 08 Dec 2016 17:28:58 GMT Gaël Poupard https://www.ffoodd.fr/les-nouveautes-d%CA%BCie4/ 8 décembre 2016 @@ -477,7 +477,7 @@ document<span class="token punctuation">.</span>documentEl <h3 id="version-anglaise" tabindex="-1">Version anglaise</h3> <p><a href="https://twitter.com/KittyGiraudel">Kitty Giraudel</a> m’a fait l’honneur de <a href="https://kittygiraudel.com/2016/10/13/css-hide-and-seek/">traduire cet article en anglais et le publier sur son blog</a>. Merci !</p> <h2 id="modifications" tabindex="-1">Modifications</h2> -<h3 id="les-lecteurs-decran-sur-mobile" tabindex="-1">Les lecteurs d’écran sur mobile</h3> +<h3 id="les-lecteurs-d-ecran-sur-mobile" tabindex="-1">Les lecteurs d’écran sur mobile</h3> <p>19 octobre 2016</p> <p>Ayant besoin de tests sur cette version pour vérifier qu’elle n’introduit pas de régressions, <a href="https://twitter.com/johan_ramon/status/788372720224526336">Johan Ramon m’a remonté un bug étrange sur VoiceOver</a>. En creusant un peu avec <a href="https://github.com/PigeardSylvain">Sylvain Pigeard</a>, il nous est apparu que <code>position: static</code> posait problème lors de la prise de focus d’un lien ayant la classe <code>.sr-only-focusable</code>.</p> <p>Nous étions contents, lorsqu’en cherchant à avertir l’équipe de Bootstrap nous sommes tombés sur <a href="https://github.com/twbs/bootstrap/issues/20732">un ticket ouvert récemment qui implique également TalkBack</a>. <a href="https://twitter.com/patrick_h_lauke">Patrick H. Lauke</a>, en investiguant, a décelé de nombreuses incohérences dans la gestion du focus entre les diverses technologies d’assistance sur mobile. Il a ainsi ouvert des tickets un peu partout :</p> @@ -497,7 +497,7 @@ document<span class="token punctuation">.</span>documentEl <p>18 janvier 2019</p> <p>De multiples problèmes de débordements ont été observés, notamment sur Chrome, lorsque les éléments masqués sont contenus dans un élément avec <code>overflow: auto;</code>. <a href="https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/84">Le problème est résolu dans Boosted</a> en ajoutant <code>margin: -1px;</code>.</p> - Thu, 13 Oct 2016 15:11:13 +0000 + Thu, 13 Oct 2016 15:11:13 GMT Gaël Poupard https://www.ffoodd.fr/cache-cache-css/ 13 octobre 2016 @@ -525,7 +525,7 @@ document<span class="token punctuation">.</span>documentEl <p>Cʼétait un moyen simple et efficace dʼéjecter du versant HTML ce qui avait trait à la présentation. Et ça, c’était bien. En effet le HTML doit être employé pour sa sémantique, <strong>le sens quʼil apporte au contenu quʼil balise</strong>. Car cʼest tout ce quʼest censé faire ce langage : décrire le contenu sur le plan sémantique.<br /> **<br /> Utiliser des propriétés de style dans le HTML revient à corrompre la sémantique** : le contenu ne sera plus marqué correctement et pourra donc être mal interprété. Et ça, cʼest mal.</p> -<h3 id="en-quoi-est-ce-contradictoire-avec-la-separation-fondforme" tabindex="-1">En quoi est-ce contradictoire avec la séparation fond/forme ?</h3> +<h3 id="en-quoi-est-ce-contradictoire-avec-la-separation-fond-forme" tabindex="-1">En quoi est-ce contradictoire avec la séparation fond/forme ?</h3> <p>Jʼai esquissé pourquoi il fallait éviter de mettre des informations de styles dans le HTML. Cʼétait pas trop compliqué.</p> <p>Cependant aujourdʼhui, cet argumentaire ressurgit pour justifier lʼutilisation de classes partout, tout le temps, dans nos CSS. On nous recommande de ne pas utiliser de sélecteurs dʼéléments ou dʼattributs — voire même dʼimbrications comme <code>ul &gt; li</code> — car elles induisent un lien trop fort avec le HTML et enfreigne donc ce concept de séparation du fond et de la forme.</p> <p>Précisons mon avis sur le sujet : <strong>ce principe ne vaut pas pour les CSS</strong>. Je poursuis sur ma lancée.</p> @@ -558,7 +558,7 @@ Utiliser des propriétés de style dans le HTML revient à corrompre la sémanti </li> </ol> - Fri, 24 Jun 2016 18:06:10 +0000 + Fri, 24 Jun 2016 18:06:10 GMT Gaël Poupard https://www.ffoodd.fr/le-sens-de-la-semantique/ 24 juin 2016 @@ -568,7 +568,7 @@ Utiliser des propriétés de style dans le HTML revient à corrompre la sémanti https://www.ffoodd.fr/nothing-is-obvious-to-the-uninformed/ <p>Nothing is obvious to the uninformed!</p> - Wed, 25 May 2016 16:28:56 +0000 + Wed, 25 May 2016 16:28:56 GMT Gaël Poupard https://www.ffoodd.fr/nothing-is-obvious-to-the-uninformed/ 25 mai 2016 @@ -581,7 +581,7 @@ Utiliser des propriétés de style dans le HTML revient à corrompre la sémanti <p>Lʼélément <code>img</code> est ce quʼon appelle <strong>un élément remplacé</strong>. Je vous conseille à ce propos la lecture de « <a href="https://la-cascade.ghost.io/quest-ce-quun-element-remplace/">Qu’est-ce qu’un élément remplacé ?</a> », traduction en français sur La Cascade de « <a href="https://demosthenes.info/blog/461/What-The-Heck-Is-A-Replaced-Element#">What The Heck Is A Replaced Element?</a> » écrit par <a href="https://twitter.com/dudleystorey">Dudley Storey</a>.</p> <p>Cela signifie que la balise nʼest fonctionnelle que si le contenu qui est censé le remplacer est présent. Pour la plupart des éléments remplacés, ça a peu dʼincidence puisque cʼest le système qui sʼen charge — cʼest notamment le cas des éléments de formulaire tels que <code>input</code>, <code>textarea</code> ou <code>select</code>.</p> <p>En revanche dʼautres éléments ont besoin quʼon leur dise par quoi ils vont être remplacés, et le système nʼintervient pas. Cʼest donc le cas des <code>img</code>. Ainsi, si malencontreusement la source est introuvable, lʼélément nʼest pas remplacé et peut alors supporter les pseudos-éléments. Voilà, vous savez tout.</p> -<h2 id="le-test-de-la-source-manquante-dans-a11ycss" tabindex="-1">Le test de la source manquante dans a11y.css</h2> +<h2 id="le-test-de-la-source-manquante-dans-a11y-css" tabindex="-1">Le test de la source manquante dans a11y.css</h2> <p>Comble de lʼironie, ça fait bientôt deux ans que jʼapplique <a href="https://ffoodd.github.io/a11y.css/errors.html#no-src">un test dans a11y.css pour vérifier que la source est mentionnée</a>.<sup class="footnote-ref"><a href="https://www.ffoodd.fr/les-champs-images-casses/#fn1" id="fnref1">[1]</a></sup></p> <p>Mais alors, se pourrait-il que cette astuce fonctionne également sur ce type de champ ? <strong>Et bien oui.</strong> Je vous ai préparé <a href="https://codepen.io/ffoodd/pen/vGJPLe">un codePen de démonstration avec le champ de type image</a>.</p> <p>Ce nʼest pas une révolution — et globalement personne ne sʼen servira — mais allez savoir.</p> @@ -591,7 +591,7 @@ Utiliser des propriétés de style dans le HTML revient à corrompre la sémanti </li> </ol> - Thu, 31 Mar 2016 12:27:00 +0000 + Thu, 31 Mar 2016 12:27:00 GMT Gaël Poupard https://www.ffoodd.fr/les-champs-images-casses/ 31 mars 2016 @@ -655,7 +655,7 @@ Utiliser des propriétés de style dans le HTML revient à corrompre la sémanti </li> </ol> - Wed, 30 Mar 2016 12:07:39 +0000 + Wed, 30 Mar 2016 12:07:39 GMT Gaël Poupard https://www.ffoodd.fr/a-qui-parlent-vos-css/ 30 mars 2016 @@ -675,7 +675,7 @@ Utiliser des propriétés de style dans le HTML revient à corrompre la sémanti </ol> <p>Je force le trait évidemment, mais je ne souhaite que vous inciter à filer le lire ! Ce livre est important, il devrait vous plaire et surtout vous servir.</p> - Fri, 19 Feb 2016 14:03:53 +0000 + Fri, 19 Feb 2016 14:03:53 GMT Gaël Poupard https://www.ffoodd.fr/la-dette-technique/ 19 février 2016 @@ -710,7 +710,7 @@ Utiliser des propriétés de style dans le HTML revient à corrompre la sémanti </li> </ol> - Fri, 12 Feb 2016 20:29:10 +0000 + Fri, 12 Feb 2016 20:29:10 GMT Gaël Poupard https://www.ffoodd.fr/un-fichier-vide/ 12 février 2016 @@ -720,7 +720,7 @@ Utiliser des propriétés de style dans le HTML revient à corrompre la sémanti https://www.ffoodd.fr/marie-guillaumet/ <p>Bien faire et laisser braire</p> - Fri, 12 Feb 2016 20:28:52 +0000 + Fri, 12 Feb 2016 20:28:52 GMT Gaël Poupard https://www.ffoodd.fr/marie-guillaumet/ 12 février 2016 @@ -778,7 +778,7 @@ Utiliser des propriétés de style dans le HTML revient à corrompre la sémanti <p>Alors voilà, il ne reste quʼà faire le premier pas. Et comme je suis un peu foufou, <a href="https://doodle.com/poll/7rv8ixe9tqc6kwdc">je vous propose des dates la semaine prochaine</a>, aux horaires dʼune pause déjeuner classique. Vous pouvez évidemment mʼindiquer ici-même où sur Twitter si vous avez dʼautres plages horaires de prédilection, ou si la semaine prochaine est un peu tôt pour vous.</p> <p>PS : pour le nom, jʼavais pensé à <strong>la Communauté des Spécialistes des Styles</strong>. Je sais, je ne suis pas réputé pour mon humour 😶</p> - Wed, 20 Jan 2016 14:59:51 +0000 + Wed, 20 Jan 2016 14:59:51 GMT Gaël Poupard https://www.ffoodd.fr/nantescss/ 20 janvier 2016 @@ -876,7 +876,7 @@ Utiliser des propriétés de style dans le HTML revient à corrompre la sémanti </li> </ol> - Thu, 03 Dec 2015 13:30:49 +0000 + Thu, 03 Dec 2015 13:30:49 GMT Gaël Poupard https://www.ffoodd.fr/reserve-d%CA%BCespace-pour-le-contenu/ 3 décembre 2015 @@ -929,7 +929,7 @@ Modernizr<span class="token punctuation">.</span><span </li> </ol> - Wed, 25 Nov 2015 16:06:44 +0000 + Wed, 25 Nov 2015 16:06:44 GMT Gaël Poupard https://www.ffoodd.fr/un-test-modernizr-pour-les-contrastes-eleves/ 25 novembre 2015 @@ -1072,7 +1072,7 @@ Modernizr<span class="token punctuation">.</span><span </li> </ol> - Fri, 20 Nov 2015 16:16:37 +0000 + Fri, 20 Nov 2015 16:16:37 GMT Gaël Poupard https://www.ffoodd.fr/le-soulignement-factice/ 20 novembre 2015 @@ -1090,7 +1090,7 @@ Modernizr<span class="token punctuation">.</span><span <p>Il prend pour exemple lʼélément <code>input</code> qui, <strong>même vide</strong>, aura des dimensions intrinsèques — car le navigateur remplace lʼélément par un objet avec des dimensions par défaut pré-déterminées.</p> <p>Cʼest très bien, mais ça nʼest pas tout à fait ça. En réalité <strong>cette définition est orientée</strong> vers la conclusion de lʼarticle, qui précise que les éléments remplacés ne peuvent pas se voir appliquer de contenu généré à lʼaide de pseudo-élément.</p> <p><strong>Figurez-vous que cʼest parfois possible.</strong> Il sʼagit dʼune simplification abusive.</p> -<h3 id="la-reference-de-sitepoint" tabindex="-1">La référence de SitePoint</h3> +<h3 id="la-reference-de-site-point" tabindex="-1">La référence de SitePoint</h3> <p>SitePoint propose <a href="https://reference.sitepoint.com/css/replacedelements">une définition un peu plus pointue (en anglais)</a> indiquant quʼun élément remplacé est un élément dont lʼapparence et les dimensions sont définies par une ressource externe. Les détails sont assez intéressants (notamment le dernier paragraphe sur le contexte <em>inline</em>) mais là encore cʼest <strong>en léger décalage avec la réalité</strong>.</p> <p>En revanche ce qui est amusant, cʼest que <strong>la définition réelle est cachée dans le troisième paragraphe</strong> : « Les éléments remplacés peuvent également avoir des pré-requis de mise en forme imposés par lʼélément, <strong>hors du contrôle du CSS</strong> ; par exemple, les contrôles de lʼinterface utilisateur rendus pour les éléments de formulaires ».</p> <p>En fait ils ne se contentent pas de pouvoir.</p> @@ -1117,7 +1117,7 @@ Modernizr<span class="token punctuation">.</span><span **<br /> Mais bon sang, quelle aventure pour un bête bouton qui ne veut pas se mettre en ligne !**</p> - Mon, 16 Nov 2015 20:16:54 +0000 + Mon, 16 Nov 2015 20:16:54 GMT Gaël Poupard https://www.ffoodd.fr/les-elements-remplaces/ 16 novembre 2015 @@ -1176,7 +1176,7 @@ Mais bon sang, quelle aventure pour un bête bouton qui ne veut pas se mettre en </li> </ol> - Fri, 30 Oct 2015 11:11:52 +0000 + Fri, 30 Oct 2015 11:11:52 GMT Gaël Poupard https://www.ffoodd.fr/le-web-en-kit/ 30 octobre 2015 @@ -1188,7 +1188,7 @@ Mais bon sang, quelle aventure pour un bête bouton qui ne veut pas se mettre en <h2 id="livres" tabindex="-1">Livres</h2> <h3 id="guide-pratique-de-choix-typographique" tabindex="-1">Guide pratique de choix typographique</h3> <p>Je lʼavais peut-être déjà mentionné, mais tant pis — jʼen suis fier : David Rault mʼa fait lʼhonneur de citer mon <a href="https://www.ffoodd.fr/guide-pratique-de-choix-typographique/">compte-rendu de lecture de son « Guide pratique de choix typographique »</a> sur la 4e de couverture de sa réédition. Cʼest un excellent livre, je vous le conseille vraiment ! Vous le trouverez sur <a href="https://www.adverbum.fr/guide-pratique-de-choix-typographique-rault-david-atelier-perrousseaux_ouvrage-perrousseaux_4yrc07ab75lc.html">le site des Ateliers Perrousseaux</a>.</p> -<h3 id="optimiser-son-referencement-wordpress" tabindex="-1">Optimiser son référencement WordPress</h3> +<h3 id="optimiser-son-referencement-word-press" tabindex="-1">Optimiser son référencement WordPress</h3> <p>Lʼouvrage de <a href="https://www.seomix.fr/">Daniel Roch</a> sʼest — comme attendu — bien vendu. Pour sa seconde édition, Daniel a eu la riche idée dʼinviter des camarades à étendre le contenu afin dʼaborder des sujets connexes tels que :</p> <ul> <li>la sécurité, par <a href="https://boiteaweb.fr/">Julio Potier</a> ;</li> @@ -1213,7 +1213,7 @@ Mais bon sang, quelle aventure pour un bête bouton qui ne veut pas se mettre en <p>Jʼai toujours une multitude de projets en tête, mais la plupart relèvent de la sphère privée. Pour lʼaspect métier, je poursuis mes travaux sur <a href="https://github.com/ffoodd/a11y.css">a11y.css</a> — même si ça sʼavère de plus en plus lent. Jʼai planifié deux nouvelles bornes, lʼune technique et lʼautre « identitaire » (graphisme, ligne éditoriale, réseaux sociaux…).</p> <p>Et jʼai toujours de nombreux articles en attente. Vous repassez bientôt ?</p> - Fri, 16 Oct 2015 11:22:50 +0000 + Fri, 16 Oct 2015 11:22:50 GMT Gaël Poupard https://www.ffoodd.fr/paris-web-et-la-vie/ 16 octobre 2015 @@ -1222,7 +1222,7 @@ Mais bon sang, quelle aventure pour un bête bouton qui ne veut pas se mettre en 21e séminaire AccessiWeb https://www.ffoodd.fr/21e-seminaire-accessiweb/ <p>C’est donc une grande première, et moi qui lisait les comptes-rendus des précédents séminaires sur internet ait enfin pu y assister !</p> -<h2 id="en-tant-quorateur" tabindex="-1">En tant qu’orateur</h2> +<h2 id="en-tant-qu-orateur" tabindex="-1">En tant qu’orateur</h2> <p>Le thème du séminaire était « <a href="https://inova.snv.jussieu.fr/evenements/colloques/colloques/index.php?c=87">Choisir et utiliser un CMS pour créer des contenus accessibles</a> », organisé par <a href="https://accessiblog.fr/">Olivier Nourry</a>.</p> <p>Non seulement j’ai pu y assister, mais j’ai même été invité par Olivier à y faire une intervention autour de la même thématique que celle abordée lors du <a href="https://2014.wptech.fr/">WP Tech</a> au sujet des <strong>thèmes enfants dans WordPress</strong> (et leur utilisation dans une méthodologie de travail basée sur l’amélioration perpétuelle).</p> <p>WordPress étant le CMS le plus utilisé au monde – et de loin – Olivier souhaitait mettre en avant une pratique concrète pour <strong>incorporer l’accessibilité à la production de sites WordPress</strong>. C’est avec plaisir que j’ai accepté le défi.</p> @@ -1245,12 +1245,12 @@ Mais bon sang, quelle aventure pour un bête bouton qui ne veut pas se mettre en <p>Les sujets étaient extrêmement intéressants, et comme l’a évoqué Olivier pour conclure le séminaire : ce type de démarche n’a – à ma connaissance, comme à la sienne – <strong>jamais</strong> été mené en profondeur.</p> <p>La comparaison de la prise en compte de l’accessibilité des différents acteurs de l’écosystème des CMS est tout à fait pertinente et <strong>totalement absent des comparatifs</strong> qu’on peut trouver ça et là.</p> <p>La présentation des ATAG2 en <strong>des termes compréhensibles par un humain</strong> est également une performance, que peu de personnes pouvaient réaliser. Ayant déjà tenté l’aventure de lire et comprendre les ATAG2, j’ai été épaté par le travail produit par Jean-Pierre Villain et ait noirci de notes quatre ou cinq pages de mon carnet.</p> -<h2 id="ce-nest-pas-fini" tabindex="-1">Ce n’est pas fini !</h2> +<h2 id="ce-n-est-pas-fini" tabindex="-1">Ce n’est pas fini !</h2> <p>Comme Dominique Burger (président de BrailleNet) et Olivier Nourry l’ont annoncé, <strong>un livre blanc est en cours d’élaboration</strong> afin de diffuser le contenu de ce séminaire.</p> <p><strong>Une invitation est également lancée aux professionnels du web – qui utiliseraient couramment un CMS oublié de ce séminaire – de se plier à l’exercice d’évaluer l’accessibilité de leur outil préféré afin d’enrichir le comparatif.</strong></p> <p>Pour conclure, je suis réellement ravi d’avoir pu <strong>rencontrer, échanger, apprendre</strong> autant et je tiens à remercier chaleureusement <strong>l’association BrailleNet</strong> pour avoir permis que cet événement ait lieu, et Olivier Nourry de m’y avoir invité en tant qu’intervenant : j’en suis très honoré.</p> - Wed, 15 Jul 2015 17:06:31 +0000 + Wed, 15 Jul 2015 17:06:31 GMT Gaël Poupard https://www.ffoodd.fr/21e-seminaire-accessiweb/ 15 juillet 2015 @@ -1274,12 +1274,12 @@ Mais bon sang, quelle aventure pour un bête bouton qui ne veut pas se mettre en <p>Les sujets étaient variés, et c’était extrêmement plaisant.</p> <p>La présentation de <a href="https://www.woothemes.com/woocommerce/">WooCommerce</a> par <a href="https://www.remicorson.com/">Rémi Corson</a> était très intéressante, j’ai découvert beaucoup de choses et ai été impressionné par la progression fulgurante de ce qui fut une simple extension il y a quelques années. De plus Rémi est un orateur expérimenté, très agréable à écouter !</p> <p>J’en cite une dernière pour ne pas m’éterniser, j’espère que les autres orateurs ne m’en voudront pas : « Faites rentrer votre éléphant dans une Smart™ — Bonnes pratiques sur mobiles » dont vous trouverez <a href="https://speakerdeck.com/inpixelitrust/faites-rentrer-votre-elephant-dans-une-smart-bonnes-pratiques-sur-mobiles">les slides sur Speakerdeck</a>. Présentée par <a href="https://www.inpixelitrust.fr/">Stéphanie Walter</a> et <a href="https://twitter.com/theystolemynick">Jean-Pierre Vincent</a>, cette présentation était rythmée, très dense, et extrêmement instructive. Jetez-y un œil !</p> -<h2 id="lorganisation" tabindex="-1">L’organisation</h2> +<h2 id="l-organisation" tabindex="-1">L’organisation</h2> <p>Pour l’histoire, le nom WPMX vient de l’association <a href="https://wpmx.org/">WordPress Meet &amp; eXchange</a>. Ce sont donc les membres de l’association qui ont organisé le WPMX Day, et je tiens à les remercier à nouveau ainsi qu’à les féliciter car ils ont fait un boulot incroyable ! Entre la gestion des orateurs qui arrivent qui part avion, qui par train, l’hébergement, la restauration, le flux des présentations alternées avec les spots publicitaires des sponsors, leur plan s’est déroulé sans accro. Chapeau !</p> <h2 id="a-la-prochaine" tabindex="-1">À la prochaine !</h2> <p>Et bien oui, car il y en aura une je l’espère. Vraiment la journée à Biarritz, dans un super hôtel, avec tout ces gens accentués (si, si, ils ont un accent) était vraiment chouette. Et je ne vous parle pas du samedi soir : dîner sur la plage avec Stéphanie, Jean-Pierre ainsi que <a href="https://www.graphikophil.com/">Philippe Gélas</a> et les organisateurs. C’était vraiment top, merci !</p> - Thu, 02 Jul 2015 18:42:39 +0000 + Thu, 02 Jul 2015 18:42:39 GMT Gaël Poupard https://www.ffoodd.fr/wpmx-day/ 2 juillet 2015 @@ -1376,7 +1376,7 @@ Mais bon sang, quelle aventure pour un bête bouton qui ne veut pas se mettre en <h2 id="epilogue" tabindex="-1">Épilogue</h2> <p>Il me reste un point important remonté par <a href="https://anysurfer.be/fr">Sophie Schuermans</a> concernant l’aspect responsive que j’ai un peu endommagé. Et je tiens également à remercier <a href="https://www.nicolas-hoffmann.net/source/">Nicolas Hoffmann</a> pour sa relecture attentive et ses conseils, ainsi qu’<a href="https://accessiblog.fr/">Olivier Nourry</a> pour son intérêt !</p> - Sun, 24 May 2015 13:06:51 +0000 + Sun, 24 May 2015 13:06:51 GMT Gaël Poupard https://www.ffoodd.fr/accesslide-la-prise-en-main/ 24 mai 2015 @@ -1418,7 +1418,7 @@ Mais bon sang, quelle aventure pour un bête bouton qui ne veut pas se mettre en <h2 id="un-avis" tabindex="-1">Un avis</h2> <p>Pour terminer, c’est une lecture intéressante pour quiconque est pris de curiosité pour ce domaine. <strong>Si les couleurs vous parlent, n’hésitez pas à vous procurer ce livre.</strong></p> - Tue, 07 Apr 2015 11:00:38 +0000 + Tue, 07 Apr 2015 11:00:38 GMT Gaël Poupard https://www.ffoodd.fr/choisir-ses-couleurs-pour-le-web/ 7 avril 2015 @@ -1462,7 +1462,7 @@ Mais bon sang, quelle aventure pour un bête bouton qui ne veut pas se mettre en <h2 id="les-supplements" tabindex="-1">Les suppléments</h2> <p>Depuis ce POC, j’ai découvert le travail de <a href="https://gasteroprod.com/">Nicolas Hoizey</a> sur <a href="https://github.com/nhoizey/esviji">esviji V2</a>, qui utilise <a href="https://github.com/nhoizey/esviji/blob/master/src/sass/_screen.scss">les ratios, les calculs et les unités de viewport</a> pour atteindre un degré d’adaptation aux écrans extraordinaire. Je vous conseille de garder un œil sur son projet, et surtout de parcourir <a href="https://gist.github.com/nhoizey/f31cf92114a376a23155">la feuille de styles générée</a> qui est remarquablement écrite !</p> - Mon, 30 Mar 2015 16:30:04 +0000 + Mon, 30 Mar 2015 16:30:04 GMT Gaël Poupard https://www.ffoodd.fr/decouvrez-le-calcul-magique/ 30 mars 2015 @@ -1475,18 +1475,18 @@ Mais bon sang, quelle aventure pour un bête bouton qui ne veut pas se mettre en <p>Brief books for people who make websites</p> </blockquote> <p>C’est pourquoi les livres abordant un langage particulier ne m’ont jamais réellement appris : concernant le HTML5 ou le CSS3, je connais les bases et ma veille régulière me permet de les entretenir. Cet ouvrage sur Sass ne déroge pas, je n’ai pas appris grand chose — malgré ça je vous recommande ce livre !</p> -<h2 id="a-labordage" tabindex="-1">À l’abordage</h2> +<h2 id="a-l-abordage" tabindex="-1">À l’abordage</h2> <p>Pour débuter, précisions que le livre a un objectif. Il ne se contente pas d’énumérer les fonctionnalités de Sass, mais vise plutôt à persuader les personnes réticentes ou intimidées par Sass qu’il n’y a aucun risque ni aucun investissement particulier à commencer à l’utiliser.</p> <p>En effet, il est toujours possible d’écrire son CSS normalement, <strong>sans rien changer à ses habitudes de travail établies</strong>. On peut cependant débuter gentiment par définir une variable et l’utiliser, ou jouer avec un mixin simple. Ça ne coûte rien, c’est facile à faire, bref : que du bonheur !</p> -<h2 id="a-lamericaine" tabindex="-1">À l’américaine</h2> +<h2 id="a-l-americaine" tabindex="-1">À l’américaine</h2> <p>On peut en dire ce qu’on veut, mais les auteurs de la collection sont des orateurs hors pair et des rédacteurs nés. La plupart ont apporté tellement d’idées à nos métiers, nos façons de les voir et nos méthodologies de travail qu’ils sont l’équivalent de prophètes, que tout le monde écoute attentivement.</p> <p>Dans cet ouvrage, Dan Cederholm (qui a déjà publié « <em>CSS3 pour les webdesigners</em> », dans la même collection) démontre une fois de plus sa capacité à expliquer clairement les points techniques, à établir une connivence avec le lecteur et à s’exprimer avec efficience. <strong>Tout ça rend ce livre extrêmement agréable à lire</strong>.</p> -<h2 id="a-lenvie" tabindex="-1">À l’envie</h2> +<h2 id="a-l-envie" tabindex="-1">À l’envie</h2> <p>Même si je n’ai pas appris grand chose, ce livre est un bon ouvrage, agréable à lire et que je conseille tout particulièrement aux personnes qu’on peut affubler de l’étiquette <em>webdesigner</em> et qui n’ont pas encore mis les mains dans le cambouis de Sass.</p> <p>Toutefois je place un léger bémol sur le fait que ce livre en VO a déjà deux ans, et que certaines recommandations de l’époque sont devenues désuètes. Je pense notamment à l’imbrication des sélecteurs pour refléter le DOM, qui est désormais considéré comme une mauvaise pratique à bien des égards.</p> <p>Étant donné le rapport qualité prix de cet ouvrage, <strong>je le recommande à tous les débutants en Sass, qu’ils soient étudiants ou professionnels aguerris</strong> !</p> - Mon, 23 Mar 2015 10:00:27 +0000 + Mon, 23 Mar 2015 10:00:27 GMT Gaël Poupard https://www.ffoodd.fr/sass-pour-les-webdesigners/ 23 mars 2015 @@ -1514,7 +1514,7 @@ Mais bon sang, quelle aventure pour un bête bouton qui ne veut pas se mettre en </li> </ol> - Mon, 09 Mar 2015 09:00:48 +0000 + Mon, 09 Mar 2015 09:00:48 GMT Gaël Poupard https://www.ffoodd.fr/javascript-and-jquery/ 9 mars 2015 @@ -1554,7 +1554,7 @@ Mais bon sang, quelle aventure pour un bête bouton qui ne veut pas se mettre en <h2 id="traduction" tabindex="-1">Traduction</h2> <p>Pour celle-ci, je vais applaudir discrètement et vous renvoyer vers <a href="https://kittygiraudel.com/2014/10/22/translation-system-in-sass/">l’article écrit par Kitty (en anglais)</a> qui détaille le fonctionnement de son <strong>système de traduction en Sass</strong>.</p> <p>Oui, vous avez bien lu :désormais a11y.css est multilingue en demeurant écrit uniquement en Sass. Outre la portée accrue de façon incroyable suite au passage en anglais, l’exploit technique de Kitty est incroyable. J’en profite pour signaler la parution de son premier livre « CSS3 : pratique du design web » <a href="https://www.eyrolles.com/Informatique/Livre/css3-9782212140231">en vente aux éditions Eyrolles</a>, que je vous recommande chaudement.<sup class="footnote-ref"><a href="https://www.ffoodd.fr/a11y-css-version-deux/#fn1" id="fnref1">[1]</a></sup></p> -<h2 id="documentation-test" tabindex="-1">Documentation &amp; test</h2> +<h2 id="documentation-and-test" tabindex="-1">Documentation &amp; test</h2> <p>Vous vous en doutez, le projet est devenu relativement complexe. Les solutions apportées par les différents contributeurs on tellement enrichi ce projet que même moi, je ne m’y retrouvais plus.</p> <p>J’avais déjà mentionné lors de <a href="https://www.ffoodd.fr/wp-tech-2014/" title="WP Tech 2014">mon atelier au WP Tech</a> mon <strong>intérêt pour la documentation</strong> ; c’est donc tout naturellement que j’ai cherché à documenter plus précisément a11y.css. Et de mon point de vue, il y a deux aspects très différents à documenter :</p> <ul> @@ -1600,12 +1600,12 @@ hologram</code></pre> <p><strong>Et voilà !</strong> Hologram génère un mini-site statique grâce à un jeu de ressources très simple. Il est ainsi possible de personnaliser l’entête, le pied-de-page et les ressources statiques pour aménager sa documentation à volonté. <strong>Magique</strong> 🙂</p> <p>Et puisque j’avais déjà créé une branche pour servir de présentation en ligne sur Github, j’ai ajouté ces nouveaux fichiers HTML afin d’en faire <strong>un véritable site de démonstration</strong>.</p> <p>Jetez un œil au <a href="https://ffoodd.github.io/a11y.css/">site de démonstration d’a11y.css</a> !</p> -<h3 id="sassdoc" tabindex="-1">SassDoc</h3> +<h3 id="sass-doc" tabindex="-1">SassDoc</h3> <p>Pour finir, l’architecture du projet s’étant alourdie d’options et de fonctionnalités, il fallait permettre aux utilisateurs de Sass de s’approprier plus facilement l’outil.</p> <p>Par chance, la majorité de ces enrichissements étaient l’œuvre de Kitty Giraudel, qui s’avère aussi être le créateur de <a href="https://sassdoc.com/">SassDoc</a>. La personne a tendance à faire des trucs un peu fou en Sass, et cet outil de documentation correspond à la perfection aux besoins d’une API Sass.</p> <p>Ni une ni deux, Kitty a mis en place SassDoc !</p> <p>Et voilà un projet <strong>complètement documenté</strong>.</p> -<h2 id="ce-nest-pas-fini" tabindex="-1">Ce n’est pas fini !</h2> +<h2 id="ce-n-est-pas-fini" tabindex="-1">Ce n’est pas fini !</h2> <p>Il reste quelques sujets à avancer :</p> <ul> <li>Mettre à niveau SassDoc pour utiliser la V2 ;</li> @@ -1623,7 +1623,7 @@ hologram</code></pre> </li> </ol> - Mon, 02 Mar 2015 20:45:32 +0000 + Mon, 02 Mar 2015 20:45:32 GMT Gaël Poupard https://www.ffoodd.fr/a11y-css-version-deux/ 2 mars 2015 @@ -1633,10 +1633,10 @@ hologram</code></pre> https://www.ffoodd.fr/wp-tech-2014/ <p>Car non, je ne vais pas vous en faire un compte-rendu : j’étais orateur, et ça me fait beaucoup de choses à raconter !</p> <h2 id="la-selection-des-sujets" tabindex="-1">La sélection des sujets</h2> -<h3 id="lorganisation-en-amont" tabindex="-1">L’organisation en amont</h3> +<h3 id="l-organisation-en-amont" tabindex="-1">L’organisation en amont</h3> <p>À l’instar de nombreux événements de ce type, les organisateurs ont lancé un appel à orateurs. La seule demande était une orientation technique du sujet, et Willy et Daniel avaient même offert des suggestions de sujets. Leur grande idée a été de sonder l’intérêt de leur public avant de se lancer dans l’organisation, et ils en ont profité pour demander si des sujets particuliers les intéressaient.</p> <p>Et j’aimerais à nouveau remercier <a href="https://twitter.com/willybahuaud">Willy</a> et <a href="https://twitter.com/rochdaniel">Daniel</a>, qui ont initié le mouvement, mais aussi <a href="https://twitter.com/ToOmOo44">Simon</a> et Stéphanie qui ont prêté main forte ainsi qu’<a href="https://twitter.com/manooweb">Emmanuel</a>. J’en oublie certainement, mais je suis vraiment heureux de vous avoir rencontrés à cette occasion, et ce fut incroyablement plaisant de sentir ce staff à l’écoute de son futur public.</p> -<h3 id="linvitation-au-voyage" tabindex="-1">L’invitation au voyage</h3> +<h3 id="l-invitation-au-voyage" tabindex="-1">L’invitation au voyage</h3> <p>J’ai évidemment été parmi les premiers à répondre à leur sondage. Parmi les sujets qui sortaient du lot, les thèmes enfants ont fait leur apparition. Pour une raison inconnue, Willy m’a proposé de participer en tant qu’orateur — sur un sujet de mon choix parmi les suggestions — et autant vous dire que, passée la joie procurée, le challenge m’a vite motivé. Les <strong>thèmes enfants</strong> m’ayant été indispensables dans mes projets WordPress depuis au moins trois ans, j’ai rédigé une proposition de sujet sur leur utilisation avancée.</p> <p>Et devinez quoi ?</p> <p><a href="https://2014.wptech.fr/session/framework-themes-enfants/">Il a été retenu</a>.</p> @@ -1645,7 +1645,7 @@ hologram</code></pre> <h3 id="la-differenciation" tabindex="-1">La différenciation</h3> <p>Le sujet des thèmes enfants est relativement connu, avec le biais dénoncé dans mon <em>synopsis</em> : les bonnes pratiques prônées par WordPress, qui sont loin d’être motivantes pour s’investir dans ce mécanisme génial. Je savais déjà que ma façon de faire tire ses origines à l’extérieur de l’écosystème WordPress : j’aime mon travail, et <strong>j’aime le faire bien</strong>.</p> <p>J’ai donc mis en valeur la <strong>qualité web</strong>, et comment les thèmes enfants couplés à de bonnes habitudes de travail permettent de gérer sans frais la qualité globale de nos productions.</p> -<h3 id="en-parlant-dhabitudes" tabindex="-1">En parlant d’habitudes</h3> +<h3 id="en-parlant-d-habitudes" tabindex="-1">En parlant d’habitudes</h3> <p>Mon cursus de communication visuelle m’aura enseigné de nombreuses façons de cultiver mes idées. Je suis donc parti, de façon assez ordinaire, sur une <strong>carte heuristique</strong> :</p> <figure><img src="https://www.ffoodd.fr/images/2014/12/carte-heuristique.jpg" alt="Carte heuristique" width="1024" height="574" loading="lazy" decoding="async" /><figcaption>Carte heuristique des concepts liés à l’utilisation de thèmes enfants dans WordPress</figcaption></figure> <p>Comme toute bonne carte heuristique, c’est touffu. Une fois les termes clés regroupés autour de thèmes principaux, j’ai formalisé et éclairci le tout en créant un simple tableau :</p> @@ -1664,7 +1664,7 @@ hologram</code></pre> <p>Puis j’ai eu la surprise de recevoir quelques retours agréables sur cet atelier, dès la fin de la journée puisque quelques personnes m’ont interrogé sur certaines pratiques concernant les thèmes enfants et la gestion de la qualité.</p> <p>C’était une chouette expérience, et j’en retiendrais vraiment la simplicité des échanges et les (pas suffisamment nombreuses) rencontres de la journée. <strong>Les prestations étaient toutes d’une très grande qualité, alors empressez-vous de regarder les vidéos dès leur mise en ligne !</strong></p> - Thu, 04 Dec 2014 22:08:44 +0000 + Thu, 04 Dec 2014 22:08:44 GMT Gaël Poupard https://www.ffoodd.fr/wp-tech-2014/ 4 décembre 2014 @@ -1674,7 +1674,7 @@ hologram</code></pre> https://www.ffoodd.fr/napoleon-bonaparte/ <p>N’attribuez jamais à la malveillance ce qui s’explique très bien par l’incompétence.</p> - Fri, 14 Nov 2014 22:55:32 +0000 + Fri, 14 Nov 2014 22:55:32 GMT Gaël Poupard https://www.ffoodd.fr/napoleon-bonaparte/ 14 novembre 2014 @@ -1724,7 +1724,7 @@ hologram</code></pre> <p><strong>J’en profite pour féliciter le staff qui a encore fait des merveilles, et qui se défonce tellement pour apporter à nous autres passionnés du web un événement humain et de grande qualité.</strong></p> <p>Parmi les autres choses que je partagerai, les notes que j’ai prises lors des différentes conférences seront bientôt scannées et retranscrites sur le blog ! Un joli chantier en perspective mais ça me tient à cœur de montrer ce que j’ai pu saisir au vol 🙂</p> - Thu, 30 Oct 2014 00:41:28 +0000 + Thu, 30 Oct 2014 24:41:28 GMT Gaël Poupard https://www.ffoodd.fr/retour-de-paris-web/ 29 octobre 2014 @@ -1734,7 +1734,7 @@ hologram</code></pre> https://www.ffoodd.fr/fabrice-flipo-michelle-dobree-et-marion-michot-la-face-cachee-du-numerique/ <p>On ne peut attendre d’un outil qu’il modifie les comportements.</p> - Fri, 23 May 2014 21:34:21 +0000 + Fri, 23 May 2014 21:34:21 GMT Gaël Poupard https://www.ffoodd.fr/fabrice-flipo-michelle-dobree-et-marion-michot-la-face-cachee-du-numerique/ 23 mai 2014 @@ -1764,23 +1764,23 @@ hologram</code></pre> <li>certaines évolutions que j’ajoutais au thème enfant dépendait plutôt du « territoire des extensions » dans WordPress ;</li> <li>mes procédures d’optimisation et de personnalisation des styles étaient lourdes et redondantes.</li> </ul> -<h3 id="ffeeeeddextensions" tabindex="-1">ffeeeedd–extensions</h3> +<h3 id="ffeeeedd-extensions" tabindex="-1">ffeeeedd–extensions</h3> <p>Ce qui m’a naturellement conduit à développer une <a href="https://github.com/ffoodd/ffeeeedd--extensions">flotille d’extensions</a> afin de déporter certaines fonctionnalités vers des extensions, et d’en créer de nouvelles qui n’alourdiront pas inutilement le thème.</p> -<h3 id="ffeeeeddsass" tabindex="-1">ffeeeedd–sass</h3> +<h3 id="ffeeeedd-sass" tabindex="-1">ffeeeedd–sass</h3> <p>Dans le même temps, j’ai complètement revu ma façon de travailler et me suis lentement mis à utiliser Sass, puis quelques portions de Compass. Je dis bien lentement puisque, <a href="https://www.ffoodd.fr/sass-commencez-par-les-deux-s/" title="Sass : commencez par les deux « S »">comme je l’ai fait remarquer dans un article</a> il y a quelques temps, j’ai tout fait pour éviter les pièges inhérents à ce type d’outils. Me faire gagner du temps, oui —  mais sans perdre la qualité de mon travail.</p> <p>J’abouti à <a href="https://github.com/ffoodd/ffeeeedd--sass">ffeeeedd–sass</a>, un thème enfant dont les styles s’appuient sur Sass, et ai utilisé PrePros pour homogénéiser facilement le traitement des scripts et des styles lors de leurs optimisations.</p> -<h3 id="ffeeeeddracine" tabindex="-1">ffeeeedd–racine</h3> +<h3 id="ffeeeedd-racine" tabindex="-1">ffeeeedd–racine</h3> <p>Et pour parachever ce travail, un répertoire <a href="https://github.com/ffoodd/ffeeeedd--racine">ffeeeedd–racine</a> me permet de définir une configuration optimale de mon installation avec quelques légères modifications seulement.</p> -<h3 id="a11ycss" tabindex="-1">a11y.css</h3> +<h3 id="a11y-css" tabindex="-1">a11y.css</h3> <p>Évidemment le thème enfant basé sur Sass embarque une version à jour de mon <a href="https://github.com/ffoodd/a11y.css">a11y.css</a> — qui est à mon sens ma plus belle réussite pour 2013. Ce projet a fédéré quelques personnes, m’a permis d’apprendre énormément de choses sur l’accessibilité en m’astreignant à lire plusieurs référentiels en entier, et j’ai fait de belles rencontres en en discutant.</p> <p>Voilà ce qui m’a occupé la majeure partie de l’année 2013. Et le meilleur cas pratique que vous pourrez rencontrer pour l’ensemble de ce travail est le site que vous lisez actuellement.</p> <p>Et il se pourrait que vous entendiez à nouveau parler de tout ça avant la fin 2014 🙂</p> -<h2 id="lavenir" tabindex="-1">L’avenir</h2> +<h2 id="l-avenir" tabindex="-1">L’avenir</h2> <p>Honnêtement, je vais travailler. Beaucoup. Mon nouvel emploi va me demander beaucoup de temps, de lectures et de recherches pour mener ce travail de front !</p> <p>Mais parmi les choses dont je suis sûr, c’est que je vais aller à Paris Web cette année encore mais aussi assister au tout frais <a href="https://twitter.com/WPTechNantes">WPTech</a> qui va naître à Nantes fin 2014 — grâce à l’initiative de <a href="https://www.wabeo.fr/">Willy Bahuaud</a> et <a href="https://www.seomix.fr/">Daniel Roch</a>.</p> <p>Alors, on se voit quand pour discuter de tout ça ?</p> - Sat, 17 May 2014 13:59:35 +0000 + Sat, 17 May 2014 13:59:35 GMT Gaël Poupard https://www.ffoodd.fr/mutisme-relatif/ 17 mai 2014 @@ -1889,7 +1889,7 @@ hologram</code></pre> </li> </ol> - Tue, 11 Mar 2014 16:44:26 +0000 + Tue, 11 Mar 2014 16:44:26 GMT Gaël Poupard https://www.ffoodd.fr/clip-path-pourquoi-pas/ 11 mars 2014 @@ -1899,7 +1899,7 @@ hologram</code></pre> https://www.ffoodd.fr/reflexion-sur-sass/ <p>Un outil est fait pour faciliter le travail — pas pour en améliorer la qualité.</p> - Mon, 10 Mar 2014 13:00:58 +0000 + Mon, 10 Mar 2014 13:00:58 GMT Gaël Poupard https://www.ffoodd.fr/reflexion-sur-sass/ 10 mars 2014 @@ -1983,7 +1983,7 @@ hologram</code></pre> </li> </ol> - Thu, 27 Feb 2014 16:56:32 +0000 + Thu, 27 Feb 2014 16:56:32 GMT Gaël Poupard https://www.ffoodd.fr/traversee-en-solitaire-de-la-qualite-web/ 27 février 2014 @@ -2039,7 +2039,7 @@ hologram</code></pre> </li> </ol> - Wed, 04 Dec 2013 17:43:09 +0000 + Wed, 04 Dec 2013 17:43:09 GMT Gaël Poupard https://www.ffoodd.fr/a11y-cssun-credo/ 4 décembre 2013 @@ -2067,7 +2067,7 @@ hologram</code></pre> <h2 id="une-simplification-vraiment" tabindex="-1">Une simplification, vraiment ?</h2> <p>Je suis encore en phase de découverte et pourtant me voilà sur ma faim : beaucoup de choses sont considérablement simplifiées, mais je garde l’impression que la complexité « d’avant » est simplement déportée vers les fonctionnalités dynamiques .<sup class="footnote-ref"><a href="https://www.ffoodd.fr/sass-commencez-par-les-deux-s/#fn4" id="fnref4">[4]</a></sup></p> <p>La distance « cognitive » entre les fonctions/mixins et leur contexte d’utilisation, ainsi que la séparation des feuilles de styles en fragments .<sup class="footnote-ref"><a href="https://www.ffoodd.fr/sass-commencez-par-les-deux-s/#fn5" id="fnref5">[5]</a></sup></p> -<h2 id="sass-nest-quun-outil" tabindex="-1">Sass n’est qu’un outil</h2> +<h2 id="sass-n-est-qu-un-outil" tabindex="-1">Sass n’est qu’un outil</h2> <p>Vous connaissez le dicton :</p> <blockquote> <p>Il n’y a pas de mauvais outil, il n’y a que de mauvais ouvriers.</p> @@ -2088,7 +2088,7 @@ hologram</code></pre> </li> </ol> - Thu, 28 Nov 2013 15:26:04 +0000 + Thu, 28 Nov 2013 15:26:04 GMT Gaël Poupard https://www.ffoodd.fr/sass-commencez-par-les-deux-s/ 28 novembre 2013 @@ -2136,7 +2136,7 @@ hologram</code></pre> </li> </ol> - Wed, 20 Nov 2013 18:17:48 +0000 + Wed, 20 Nov 2013 18:17:48 GMT Gaël Poupard https://www.ffoodd.fr/sass-compass-avance/ 20 novembre 2013 @@ -2145,7 +2145,7 @@ hologram</code></pre> [caption] avec html5 et aria https://www.ffoodd.fr/ameliorer-les-images-dans-wordpress-avec-html5-et-aria/ <p>Pour commencer, il faut comprendre une problématique de base en terme d’accessibilité : la distinction entre <strong>les images décoratives</strong> et <strong>les images porteuses de sens</strong>. Pour comprendre cette distinction et son importance, je vous recommande vivement la lecture d’<a href="https://www.ffoodd.fr/lecture-accessibilite-web/" title="Accessibilité web"><em>«Accessibilité web»</em></a> par <a href="https://www.armonyaltinier.fr/" title="Le site d’Armony Altinier (nouvelle fenêtre)">Armony Altinier</a>. Comme souvent lorsque nous parlons d’<strong>accessibilité web</strong>, il s’agit de bon sens : une image porteuse de sens doit être restituée à tous les utilisateurs, tandis qu’une image décorative ne doit être montrée qu’aux utilisateurs disposant d’un affichage graphique complet.</p> -<h2 id="les-limites-de-wordpress" tabindex="-1">Les limites de WordPress</h2> +<h2 id="les-limites-de-word-press" tabindex="-1">Les limites de WordPress</h2> <p>Tout le monde n’est pas sensible à ces questions, même s’il le faudrait : WordPress ne fait pas exception. Il donne cependant la possibilité à ses utilisateurs de servir des images de façon tout à fait correcte, en proposant de base pour tous les fichiers la capacité d’adjoindre un texte alternatif — ce qui remplit le critère principal des <a href="https://checklists.opquast.com/fr/" title="Les checklists Opquast (nouvelle fenêtre)">bonnes pratiques d’OpQuast</a> et permet de satisfaire la plupart des critères de niveau Bronze d’Accessiweb.</p> <p>Pour autant WordPress ne va pas plus loin :</p> <ul> @@ -2190,7 +2190,7 @@ hologram</code></pre> <span class="token variable">$output</span> <span class="token operator">.=</span> ’<span class="token operator">&lt;</span><span class="token operator">/</span>figure<span class="token operator">></span>’<span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token variable">$output</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre> -<h2 id="lintervention-detaillee" tabindex="-1">L’intervention détaillée</h2> +<h2 id="l-intervention-detaillee" tabindex="-1">L’intervention détaillée</h2> <p>La structure d’origine est conservée ; je détaille ce qui a été fait :</p> <ul> <li>Une couche sémantique HTML5 est appliquée en lieu et place du balisage «neutre» précédent : <code>figure</code> et <code>figcaption</code> ;</li> @@ -2215,7 +2215,7 @@ hologram</code></pre> </li> </ol> - Tue, 12 Nov 2013 17:32:51 +0000 + Tue, 12 Nov 2013 17:32:51 GMT Gaël Poupard https://www.ffoodd.fr/ameliorer-les-images-dans-wordpress-avec-html5-et-aria/ 12 novembre 2013 @@ -2225,7 +2225,7 @@ hologram</code></pre> https://www.ffoodd.fr/karl-groves/ <p>If it <strong>looks</strong> the same, it should <strong>act</strong> the same.</p> - Sun, 10 Nov 2013 20:22:24 +0000 + Sun, 10 Nov 2013 20:22:24 GMT Gaël Poupard https://www.ffoodd.fr/karl-groves/ 10 novembre 2013 @@ -2248,7 +2248,7 @@ hologram</code></pre> <p>Vous l’aurez compris, la lecture de ce livre m’a beaucoup plue : moins pointu que les best-sellers du genre, il est <strong>agréable et convivial</strong>.</p> <p>Je le recommande chaudement !</p> - Sat, 09 Nov 2013 17:50:57 +0000 + Sat, 09 Nov 2013 17:50:57 GMT Gaël Poupard https://www.ffoodd.fr/guide-pratique-de-choix-typographique/ 9 novembre 2013 @@ -2291,7 +2291,7 @@ hologram</code></pre> </li> </ol> - Mon, 04 Nov 2013 18:32:27 +0000 + Mon, 04 Nov 2013 18:32:27 GMT Gaël Poupard https://www.ffoodd.fr/ethymologie-du-web/ 4 novembre 2013 @@ -2308,7 +2308,7 @@ hologram</code></pre> <h2 id="un-veritable-guide" tabindex="-1">Un véritable guide</h2> <p>Vous l’aurez compris, cet ouvrage est complet et concis. Son système de fiche permet de naviguer dans le livre selon ses centres d’intérêts, et l’érige également en guide pratique : une nouvelle demande concernant les contenus vous rend perplexe ? <strong>Jetez un œil à ce livre.</strong></p> - Tue, 22 Oct 2013 14:30:49 +0000 + Tue, 22 Oct 2013 14:30:49 GMT Gaël Poupard https://www.ffoodd.fr/la-strategie-de-contenu-en-pratique/ 22 octobre 2013 @@ -2325,7 +2325,7 @@ hologram</code></pre> <li><strong>aria-hidden à true :</strong> cet attribut permet de taire un élément dans les lecteurs d’écrans. La logique est la même que précédemment, à ceci près qu’on prendra soin de laisser le lien dont la vocalisation sera la plus pertinente : dans le cas d’une boucle WordPress, le lien présent dans les titres est idéal.</li> </ul> <p>En appliquant cette technique correctement, on divise par deux ou trois le nombre de liens à parcourir dans une liste d’articles. Vos utilisateurs vous remercieront 🙂 .</p> -<h2 id="les-liens-devitement" tabindex="-1">Les liens d’évitement</h2> +<h2 id="les-liens-d-evitement" tabindex="-1">Les liens d’évitement</h2> <p>Je ne reviendrais pas sur les bases de cette technique, qui est plus que documentée sur le web.<sup class="footnote-ref"><a href="https://www.ffoodd.fr/liens-devitement-persistants/#fn1" id="fnref1">[1]</a></sup></p> <ul> <li>La persistance des liens d’évitement après leur première prise de focus</li> @@ -2333,7 +2333,7 @@ hologram</code></pre> </ul> <p>Concernant le second point, je ne l’ai pas encore implémenté sur ffoodd.fr pour la seule raison que je dois trouver un signifiant visuel cohérent avec mon design, mais ça ne saurait tarder 🙂 .</p> <p>Cependant la persistance des liens m’a particulièrement intéressé, car c’est un point que je trouve réellement bénéfique pour le confort d’utilisation. Même si je ne me sers de la tabulation que pour tester mes intégrations, il m’a toujours semblé désagréable de « perdre » ces liens.</p> -<h2 id="la-persistance-des-liens-devitement" tabindex="-1">La persistance des liens d’évitement</h2> +<h2 id="la-persistance-des-liens-d-evitement" tabindex="-1">La persistance des liens d’évitement</h2> <p>En recherchant plus d’informations sur cette technique, je suis tombé sur le blog de la société Atalan pour laquelle travaille Johan – et sur <a href="https://blog.atalan.fr/des-liens-devitement-astucieux/" title="Article sur les liens d’évitement astucieux (nouvelle fenêtre)">un article dédié au sujet</a>. Des ressources très intéressantes sont données, cependant toutes sont basées sur jQuery pour ajouter une classe aux liens après leur première prise de focus. <strong>Dommage, je n’utilise pas jQuery sur ffoodd.fr.</strong></p> <p>Voici donc le bout de code correspondant, en vanilla javascript :</p> <pre class="language-javascript" tabindex="0"><code class="language-javascript"> @@ -2361,14 +2361,14 @@ window<span class="token punctuation">.</span><span cla element<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> -<h2 id="la-qualite-de-lexperience" tabindex="-1">La qualité de l’expérience</h2> +<h2 id="la-qualite-de-l-experience" tabindex="-1">La qualité de l’expérience</h2> <p>Ce sont certes des détails, mais ces détails améliorent le confort de navigation et rendent un site agréable : l’internaute appréciera cette expérience, et reviendra (pour peu que vos contenus soient à la hauteur).</p> <ol class="footnotes-list small mt2 pt2 pb2"> <li id="fn1" class="footnote-item"><p>Un article de Jean-Pierre Villain sur Alsacréations - il date de 2006 et est toujours (presque) d’actualités : https://www.alsacreations.com/tuto/lire/572-Les-liens-d-evitement.htm <a href="https://www.ffoodd.fr/liens-devitement-persistants/#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> - Wed, 16 Oct 2013 17:56:40 +0000 + Wed, 16 Oct 2013 17:56:40 GMT Gaël Poupard https://www.ffoodd.fr/liens-devitement-persistants/ 16 octobre 2013 @@ -2390,7 +2390,7 @@ window<span class="token punctuation">.</span><span cla <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">></span></span></code></pre> <p>Vous connaissiez sans doute déjà le rôle « navigation », qui identifie la zone majeure du contenu destinée à la navigation. Les autres rôle et attributs sont explicites, et on en saisit facilement l’intérêt sur cet extrait de code. Voyons maintenant comment obtenir ce résultat avec WordPress.</p> -<h2 id="wordpress-et-le-walker-dedie-a-la-navigation" tabindex="-1">WordPress et le Walker dédié à la navigation</h2> +<h2 id="word-press-et-le-walker-dedie-a-la-navigation" tabindex="-1">WordPress et le Walker dédié à la navigation</h2> <p>Ce sympathique walker se nomme <strong>Walker_Nav_Menu</strong>. Je l’avais rencontré la première fois en farfouillant dans le code de [Reverie](https://themefortress.com/reverie/ « Reverie .fr/blog/construire-walker-wordpress/ « Construire un walker WordPress (nouvelle fenêtre) » = un starter theme pour WordPress (nouvelle fenêtre) »), sans en saisir l’intérêt à l’époque. Puis mes compétences et réflexions évoluant avec le temps, lorsque je le recroisais sur le blog de <a href="https://twitter.com/willybahuaud" title="Willy Bahuaud sur Twitter (nouvelle fenêtre)">Willy Bahuaud</a> dans <a href="https://wabeo/">son article présentant les walkers</a>, j’en saisis rapidement l’intérêt et me mit en tête de m’en servir sur mon thème ffeeeedd.</p> <p>Je vous recommande chaudement de lire l’article de Willy sur le sujet, qui est une entrée en matière extrêmement intéressante.</p> <h2 id="les-mains-dans-le-code" tabindex="-1">Les mains dans le code</h2> @@ -2454,7 +2454,7 @@ window<span class="token punctuation">.</span><span cla <p>Bien qu’ayant déjà appliqué ce comportement sur des boîtes à onglets notamment, j’aimerais parvenir à le faire sur ma navigation sans passer par du javascript. J’ai cherché des pistes pour utiliser le walker (qui à priori devrait être capable de repérer l’item actif) mais sans résultat pour le moment, donc <strong>n’hésitez pas à commenter l’article ou à me contacter par mail si vous avez la moindre piste à me suggérer</strong> (voire même la solution, hein :D).</p> <p>De plus, un comportement (en javascript à priori) est également à prévoir pour les sous-menu, qui pourront s’avérer plus complexes à gérer ‐ bien qu’ARIA soit très complète sur ce sujet.</p> - Wed, 09 Oct 2013 15:31:19 +0000 + Wed, 09 Oct 2013 15:31:19 GMT Gaël Poupard https://www.ffoodd.fr/navigation-aria-et-wordpress/ 9 octobre 2013 @@ -2493,7 +2493,7 @@ Vérifiez la lisibilité, le rendu et la beauté puis partagez un prototype fonc </ul> <p>Pour vous donner un aperçu du résultat, voici une portion de la charte obtenue lors de mon casting pour ffoodd :</p> <figure><img src="https://www.ffoodd.fr/images/2013/10/typecast.jpg" alt="Exemple de charte générée par Typecast" loading="lazy" decoding="async" /><figcaption>Exemple de charte générée par Typecast</figcaption></figure> -<h2 id="loutil-ideal" tabindex="-1">L’outil idéal ?</h2> +<h2 id="l-outil-ideal" tabindex="-1">L’outil idéal ?</h2> <p>Vous l’aurez compris, j’ai été réellement convaincu — et satisfait — par cet outil. Cependant je ne me suis servi que de la version d’essai de 14 jours, gratuite. La version payante vous permet de gérer plusieurs projets, et il existe des partenariats avec certaines fonderies pour ajouter directement les typographies choisies à vos plans.</p> <p>Bien que l’outil soit génial, je n’ai pas pris d’abonnement car c’était un one-shot pour la refonte de ffoodd. À titre personnel ce n’est pas intéressant car je ne m’en servirais pas; à titre professionnel, très peu de clients acceptent d’acheter une typographie et je dois très souvent jouer avec des typographies websafe — ce qui fait perdre tout son intérêt à Typecast.<sup class="footnote-ref"><a href="https://www.ffoodd.fr/experience-de-typecast/#fn3" id="fnref3">[3]</a></sup></p> <p><strong>Cela étant dit, je recommande chaudement cet outil, qui, du point de vue du designer, est réellement riche et permet de se focaliser sur l’essentiel avant de se lancer dans la production d’une maquette complète.</strong></p> @@ -2506,7 +2506,7 @@ Vérifiez la lisibilité, le rendu et la beauté puis partagez un prototype fonc </li> </ol> - Mon, 07 Oct 2013 18:18:18 +0000 + Mon, 07 Oct 2013 18:18:18 GMT Gaël Poupard https://www.ffoodd.fr/experience-de-typecast/ 7 octobre 2013 @@ -2516,7 +2516,7 @@ Vérifiez la lisibilité, le rendu et la beauté puis partagez un prototype fonc https://www.ffoodd.fr/armony-altinier/ <p>Est-ce que ça peut pénaliser quelqu’un ?</p> - Fri, 04 Oct 2013 15:12:34 +0000 + Fri, 04 Oct 2013 15:12:34 GMT Gaël Poupard https://www.ffoodd.fr/armony-altinier/ 4 octobre 2013 @@ -2551,7 +2551,7 @@ Vérifiez la lisibilité, le rendu et la beauté puis partagez un prototype fonc </li> </ol> - Fri, 04 Oct 2013 14:42:39 +0000 + Fri, 04 Oct 2013 14:42:39 GMT Gaël Poupard https://www.ffoodd.fr/lecture-accessibilite-web/ 4 octobre 2013 @@ -2561,7 +2561,7 @@ Vérifiez la lisibilité, le rendu et la beauté puis partagez un prototype fonc https://www.ffoodd.fr/p-mendelson/ <p>Il vaut mieux savoir tout chercher que chercher à tout savoir.</p> - Thu, 03 Oct 2013 12:50:26 +0000 + Thu, 03 Oct 2013 12:50:26 GMT Gaël Poupard https://www.ffoodd.fr/p-mendelson/ 3 octobre 2013 @@ -2589,7 +2589,7 @@ Vérifiez la lisibilité, le rendu et la beauté puis partagez un prototype fonc </li> </ol> - Wed, 02 Oct 2013 14:33:43 +0000 + Wed, 02 Oct 2013 14:33:43 GMT Gaël Poupard https://www.ffoodd.fr/atterrissage-reussi/ 2 octobre 2013 @@ -2630,7 +2630,7 @@ Vérifiez la lisibilité, le rendu et la beauté puis partagez un prototype fonc <p>Cependant, force m’est de constater que si j’avais été confronté à ces problématiques, je serais probablement arrivé à ces mêmes résultats. Les autres livres que je lis ne me font pas cet effet et me donnent véritablement l’impression d’apprendre.</p> <p><strong>Dommage.</strong></p> - Fri, 23 Aug 2013 15:01:21 +0000 + Fri, 23 Aug 2013 15:01:21 GMT Gaël Poupard https://www.ffoodd.fr/lecture-strategie-contenu-mobile/ 23 août 2013 @@ -2639,14 +2639,14 @@ Vérifiez la lisibilité, le rendu et la beauté puis partagez un prototype fonc IE9 sur WP7 et @font-face : je t’aime, moi non plus. https://www.ffoodd.fr/ie9-sur-wp7-et-font-face-je-taime-moi-non-plus/ <p><strong>Cependant, je dois également avouer que certaines choses me surprendront toujours : c’est le cas du support de <code>@font-face</code> sur Windows Phone 7.</strong> </p> -<h2 id="un-jour-jai-fait-un-test" tabindex="-1">Un jour, j’ai fait un test</h2> +<h2 id="un-jour-j-ai-fait-un-test" tabindex="-1">Un jour, j’ai fait un test</h2> <p>Raphaël Goetter a annoncé aujourd’hui la refonte de son site principal, <a href="https://goetter.fr/" title="Le site de Raphaël Goetter (nouvelle fenêtre)">goetter.fr</a>, sur <a href="https://blog.goetter.fr/post/56263951583/faites-un-site-web-perso" title="Article sur la refonte de goetter.fr (nouvelle fenêtre)">son blog</a>. Étant donné que nous avions discuté quelques jours auparavant de ligatures <a href="https://twitter.com/ffoodd_fr/status/357798486227435520" title="Discussion au sujet des ligatures sur Twitter (nouvelle fenêtre)">sur Twitter</a>, j’ai lâché un commentaire au sujet de cette nouveauté sur le site de M. Goetter. Cependant sa réponse m’a légèrement surpris, puisque je ne m’attendais pas à ce qu’il doive se séparer de cet ornement sur mobile – pour d’excellentes raisons au demeurant.</p> <p>Pris de curiosité, j’ai alors décidé d’y jeter un œil sur mon smartphone : un Lumia 800 tournant sur Windows Phone 7.10, et Internet Explorer 9. Outre l’absence de la typographie <em>«Calendas Plus»</em>, j’ai constaté que la typographie générée sur <a href="https://icomoon.io/" title="Icomoon (nouvelle fenêtre)">Icomoon</a> pour gérer les icônes était également absente.</p> <p>Je remonte ce problème ni une ni deux à l’auteur, qui est dans l’impossibilité de tester lui-même. Je décide donc de le faire, en commençant par regarder mon propre site – je ne disposais pas encore de ce téléphone lorsque cette version est apparue : sans appel, <a href="https://www.ffoodd.fr/la-schizophrenie-semantique-dun-logo/">mon logo basé sur <code>@font-face</code></a> n’apparaît pas non plus.</p> -<h2 id="un-doute-mhabite" tabindex="-1">Un doute m’habite</h2> +<h2 id="un-doute-m-habite" tabindex="-1">Un doute m’habite</h2> <p>Dès lors je sens poindre l’éventualité de l’absence de support de @font-face… Je fais donc le tour de plusieurs sites réalisés au sein de l’<a href="https://www.1-ter-net.com/" title="Création de site internet à Nantes (nouvelle fenêtre)">agence 1-ter-net</a> et utilisant <code>@font-face</code>. La encore, aucun doute possible : <code>@font-face</code> ne fonctionne sur aucun d’entre eux.</p> <p>Au cas ou, j’emprunte le smartphone d’une collègue, lui aussi sur Windows Phone 7. C’est le drame.</p> -<h2 id="google-ma-repondu" tabindex="-1">Google m’a répondu !</h2> +<h2 id="google-m-a-repondu" tabindex="-1">Google m’a répondu !</h2> <p>Je vous laisse le soin de parcourir les résultats les plus intéressants :</p> <ul> <li><a href="https://blogs.msdn.com/b/thebeebs/archive/2011/12/14/font-face-isn-t-working-on-ie9-inside-of-windows-phone-7.aspx" title="Font-Face isn’t working on IE9 inside of Windows Phone 7 (nouvelle fenêtre)">Font-Face isn’t working on IE9 inside of Windows Phone 7</a></li> @@ -2658,7 +2658,7 @@ Vérifiez la lisibilité, le rendu et la beauté puis partagez un prototype fonc <p>Si quelqu’un connait un moyen de cibler uniquement IE9 sur Windows Phone 7, je suis preneur ! De plus, je n’ai aucun moyen de tester IE sur Windows Phone 8 pour le moment, je ne saurais donc préciser si ce problème existe toujours dans les versions les plus récentes.</p> <p><strong>Edit :</strong> La nuit portant conseil, l’astuce dans le cas d’une icon-font semble finalement «simple». Il s’agira de les baser sur des caractères unicodes ayant un intérêt ( par exemple, ☎ ). Cependant, cette astuce n’est possible que lorsqu’on a le choix des glyphes utilisés comme support – ce qui, je crois, est le cas dans IcoMoon – et de disposer d’un caractère unicode signifiant.</p> - Wed, 24 Jul 2013 19:16:35 +0000 + Wed, 24 Jul 2013 19:16:35 GMT Gaël Poupard https://www.ffoodd.fr/ie9-sur-wp7-et-font-face-je-taime-moi-non-plus/ 24 juillet 2013 @@ -2681,7 +2681,7 @@ Vérifiez la lisibilité, le rendu et la beauté puis partagez un prototype fonc <p>Le même constat m’amène à penser qu’<strong>à l’avenir, les chefs de projets</strong> dans les structures comme l’<a href="https://www.1-ter-net.com/" title="Création de site internet à Nantes (nouvelle fenêtre)">agence 1-ter-net</a> – dans laquelle je travaille – <strong>seront issus de l’intégration</strong>.</p> <p>À condition de retenir [cette leçon d’humilité](https://www.lesintegristes.net/2013/03/19/integration-web-humilite/ « « L’intégration web, cette leçon d’humilité » par Marie Guillaumet sur Les Intégristes (nouvelle fenêtre) »), et de faire du bon travail.</p> - Thu, 04 Jul 2013 12:33:38 +0000 + Thu, 04 Jul 2013 12:33:38 GMT Gaël Poupard https://www.ffoodd.fr/pourquoi-lintegration-web-est-le-coeur-dun-projet/ 4 juillet 2013 @@ -2723,7 +2723,7 @@ Veuillez réessayer plus tard. »</p> <p>Je suppose qu’il s’agit d’un entête http ou d’un type MIME incorrect qui nuit à la bonne compréhension du fichier par le serveur, sans toutefois en être sûr. Étant donné que j’avais jusqu’à présent l’habitude d’ajouter le .htaccess à la fin du développement, je me contenterais désormais de l’ajouter <strong>dès le début du projet</strong>.</p> <p><strong>De plus, il s’agit d’une bonne pratique nécessaire à la <a href="https://www.ffoodd.fr/tag/qualite-web/" title="Qualité web">qualité d’un site web</a> : il est donc indispensable de disposer d’un fichier .htaccess efficace.</strong></p> - Wed, 16 Jan 2013 12:23:48 +0000 + Wed, 16 Jan 2013 12:23:48 GMT Gaël Poupard https://www.ffoodd.fr/wordpress-3-5-est-mediaphobe/ 16 janvier 2013 @@ -2754,7 +2754,7 @@ Veuillez réessayer plus tard. »</p> <p><strong>Un jour viendra ou j’ouvrirais ce travail aux critiques, afin d’améliorer autant que possible le produit final.</strong></p> <p>Mais pour le moment, c’est uniquement mon excuse pour n’avoir pas écrit plus en 2012 et <strong>une bonne résolution pour 2013</strong> !</p> - Tue, 08 Jan 2013 15:15:11 +0000 + Tue, 08 Jan 2013 15:15:11 GMT Gaël Poupard https://www.ffoodd.fr/a-venir-ffeeeedd/ 8 janvier 2013 @@ -2762,10 +2762,10 @@ Veuillez réessayer plus tard. »</p> Le bien & le mal pour l’intégrateur web https://www.ffoodd.fr/le-bien-le-mal-pour-lintegrateur-web/ - <h2 id="il-y-a-de-bonnes-de-mauvaises-solutions" tabindex="-1">Il y a de bonnes &amp; de mauvaises solutions</h2> + <h2 id="il-y-a-de-bonnes-and-de-mauvaises-solutions" tabindex="-1">Il y a de bonnes &amp; de mauvaises solutions</h2> <p>Une bonne idée le <em>jour J</em> peut être une mauvaise idée le <em>D day</em>. Au commencement de ffoodd, je voulais un fond simple mais avec un peu d’impact : j’ai donc choisi le motif très simple mais contrasté que vous avez sous les yeux. À l’époque, je rêvais de tester les dégradés radiaux en css – et j’étais persuadé de pouvoir réaliser mon motif à l’aide de cette technique. Ni une, ni deux : je le fais. Je tartine les préfixes navigateurs et la syntaxe non préfixée, et nous voilà partis. <strong>À bien y réfléchir, c’était ma première erreur.</strong></p> <p>Comme je suis méticuleux, je vérifie tout ça sur nos navigateurs adorés – et ô joie ! – Firefox freeze en voyant ça. Je me contente alors de retirer la ligne préfixée concernée, et tant pis pour lui : il aura un aplat. <strong>À bien y réfléchir, c’était le premier avertissement.</strong></p> -<h2 id="pardonnez-moi-mon-pere-car-jai-peche" tabindex="-1">Pardonnez-moi mon père car j’ai péché</h2> +<h2 id="pardonnez-moi-mon-pere-car-j-ai-peche" tabindex="-1">Pardonnez-moi mon père car j’ai péché</h2> <p>Firefox 16 est apparu, apportant des nouveautés dont : le support des dégradés sans préfixe. Firefox a donc compris ma déclaration background-image, et ô miracle ! <strong>Il freeze toujours, une vraie salade.</strong></p> <p>Je reprends alors mon code, et me demande : <strong>pourquoi diantre avoir utilisé un dégradé pour faire ça ?</strong></p> <ul> @@ -2784,7 +2784,7 @@ Veuillez réessayer plus tard. »</p> <p>Ça n’est certes pas grand chose, mais cette erreur de parcours témoigne de mon évolution dans ce métier. C’était une mauvaise idée d’appliquer ce motif en css pur, mais 18 mois plus tard, quand j’ai vu ce bout de code, j’ai su trouver <strong>la meilleure solution</strong>.</p> <p>Je continue <a href="https://www.ffoodd.fr/css-experienceinherit/" title="css {    expérience:inherit; }">mon amélioration perpétuelle</a>.</p> - Tue, 13 Nov 2012 15:40:08 +0000 + Tue, 13 Nov 2012 15:40:08 GMT Gaël Poupard https://www.ffoodd.fr/le-bien-le-mal-pour-lintegrateur-web/ 13 novembre 2012 @@ -2792,9 +2792,9 @@ Veuillez réessayer plus tard. »</p> Webgrids https://www.ffoodd.fr/lecture-webgrids/ - <h2 id="ladret" tabindex="-1">L’adret</h2> + <h2 id="l-adret" tabindex="-1">L’adret</h2> <p>Ma formation en communication visuelle m’a enseigné les règles typographiques, de mise en page, l’histoire de l’imprimerie et les différents mouvements qui ont heurté l’histoire du graphisme et de l’impression.</p> -<h2 id="lubac" tabindex="-1">L’ubac</h2> +<h2 id="l-ubac" tabindex="-1">L’ubac</h2> <p>Mon expérience professionnelle dans le web m’a éduqué aux contraintes spécifiques du support : affichage sur écran divers et variés, dans des navigateurs qui sont également pléthore.</p> <h2 id="un-livre-tres-instructif" tabindex="-1">Un livre très instructif</h2> <p>Dès la première page, la connaissance nous submerge :</p> @@ -2805,7 +2805,7 @@ Veuillez réessayer plus tard. »</p> <p><strong>Ce livre permet d’atteindre le sommet, ce point si compliqué à atteindre mais bel et bien le seul ou se rejoignent l’ubac et l’adret. Réconciliez le web et la mise en page avancée, lisez ce livre !</strong></p> <p>À noter : un autre excellent ouvrage est disponible dans la même collection aux Ateliers Perrousseaux : <a href="https://www.google.fr/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=1&amp;ved=0CCgQFjAA&amp;url=http%3A%2F%2Fwww.adverbum.fr%2Ftypo--web-foutoyet-aurelien-atelier-perrousseaux_ouvrage-perrousseaux_4kd262gul963.html&amp;ei=a2qaUPyeA8zJ0AWTuIBo&amp;usg=AFQjCNHTBxoRhkz_blvdiieipO2aKwgNmQ&amp;sig2=2EEx_g_E2KITmKdRn-4bmA"><strong>Typo &amp; web</strong></a>. Je vous le recommande chaudement – et il fera peut-être l’objet d’un article similaire dans le futur.</p> - Wed, 07 Nov 2012 19:00:55 +0000 + Wed, 07 Nov 2012 19:00:55 GMT Gaël Poupard https://www.ffoodd.fr/lecture-webgrids/ 7 novembre 2012 @@ -2837,7 +2837,7 @@ Veuillez réessayer plus tard. »</p> <p>La même erreur semble se répéter, simplement parce que les nouveaux arrivants — dont je fais partie — n’ont pas appris leur leçon d’histoire. Nous devons continuer à apprendre et enseigner : les bonnes pratiques ne vont pas de soi, elles s’apprennent et se découvrent au détour d’un blog. Rédiger un code source valide et réaliser une intégration de qualité en font partie et ne sont que les premières étapes.</p> <p>Je pratique l’<strong>amélioration perpétuelle</strong> —pas progressive, perpétuelle.</p> - Wed, 18 Jul 2012 17:32:46 +0000 + Wed, 18 Jul 2012 17:32:46 GMT Gaël Poupard https://www.ffoodd.fr/css-experienceinherit/ 18 juillet 2012 @@ -2889,7 +2889,7 @@ Accessibilité :</p> </ol> <p>À titre personnel, je n’ai utilisé cette technique que sur un projet, particulièrement contraignant en terme de performances et d’accessibilité – mais je compte l’étendre à d’autres projets. Correctement utilisée, elle peut permettre une <strong>optimisation massive d’une iconographie riche</strong> – mais simple.</p> - Thu, 21 Jun 2012 12:48:38 +0000 + Thu, 21 Jun 2012 12:48:38 GMT Gaël Poupard https://www.ffoodd.fr/les-sprites-negatifs/ 21 juin 2012 @@ -2924,7 +2924,7 @@ window.onload = init; <h2 id="contrepartie" tabindex="-1">Contrepartie</h2> <p>J’ai remarqué un <strong>problème de compatibilité avec IE8 et Safari</strong>, tandis que les autres navigateurs appliquent parfaitement ce code. Ce n’est qu’un demi-problème puisque de toute façon, IE8 ne comprend pas les transitions. C’est un peu plus gênant pour Safari, mais je n’ai pas encore trouvé l’astuce : si quelqu’un en connaît une ou en trouve une, je suis preneur !!</p> - Fri, 18 May 2012 17:02:06 +0000 + Fri, 18 May 2012 17:02:06 GMT Gaël Poupard https://www.ffoodd.fr/vitesse-precipitation/ 18 mai 2012 @@ -2986,7 +2986,7 @@ De mon côté, j’ai beaucoup apprécié l’élégance et la légèreté de la </ol> <p>Le principal inconvénient est le <strong>support d’IE8</strong> : il ne reconnaît que les fichiers .eot dans @font-face, ce qui nous force à ajouter un fichier .eot difficile à convertir en Base64. Mais si vous pouvez m’y aider, je suis tout ouï !</p> - Fri, 11 May 2012 19:19:25 +0000 + Fri, 11 May 2012 19:19:25 GMT Gaël Poupard https://www.ffoodd.fr/la-schizophrenie-semantique-dun-logo/ 11 mai 2012 @@ -3000,7 +3000,7 @@ De mon côté, j’ai beaucoup apprécié l’élégance et la légèreté de la <p>Personnellement, j’ai fait le calcul : je peux faire cette demande à <strong>493</strong> personnes distinctes. Si chacune des neuf personnes de mon agence atteint ce même chiffre; nous serons déjà à 4437 personnes.</p> <p>Ne pensez-vous pas que ça puisse suffire à changer les statistiques ?</p> - Thu, 01 Sep 2011 18:21:45 +0000 + Thu, 01 Sep 2011 18:21:45 GMT Gaël Poupard https://www.ffoodd.fr/que-se-passerait-il/ 1 septembre 2011 @@ -3038,7 +3038,7 @@ De mon côté, j’ai beaucoup apprécié l’élégance et la légèreté de la <li><a href="https://www.abookapart.com/products/designing-for-emotion"><strong>Designing for emotion</strong> par Aaron Walter</a></li> </ul> - Sat, 05 Mar 2011 12:52:36 +0000 + Sat, 05 Mar 2011 12:52:36 GMT Gaël Poupard https://www.ffoodd.fr/semantique-de-l-interaction/ 5 mars 2011 @@ -3050,7 +3050,7 @@ De mon côté, j’ai beaucoup apprécié l’élégance et la légèreté de la <h2 id="une-espece-animale" tabindex="-1">Une espèce animale</h2> <p>Il en existe de toute sorte : des grands, des petits, des noirs, des jaunes, des visuels et des textuels… Chaque bouton que vous pouvez imaginer existe certainement déjà quelque part.</p> <p>Pour caractériser un bouton, on dispose de multiples critères : sa palette de couleur, sa forme, son volume, sa réaction au survol, son contenu, sa cible… Et comme nous, il a des mensurations : sa taille et son poids. On pourrait s’amuser à rédiger un <strong>bestiaire des boutons</strong>, les classer par espèces et déterminer si certaines sont en voie d’extinction ou d’expansion – mais ce sera pour un autre jour.</p> -<h2 id="limportance-de-lenvironnement" tabindex="-1">L’importance de l’environnement</h2> +<h2 id="l-importance-de-l-environnement" tabindex="-1">L’importance de l’environnement</h2> <p>L’impact – et donc l’intérêt – d’un bouton dépend autant de lui que de son environnement. Ce dernier détermine l’espace disponible, la liberté de mouvements – mais c’est également de lui dont dépend le caractère du bouton : s’il est discret ou exubérant, calme ou agité, agressif ou doux comme un agneau…</p> <h2 id="le-sens-de-la-vie" tabindex="-1">Le sens de la vie</h2> <p>Pour certains, ce sera 42 ; pour tous les autres, il faudra se définir un rôle afin de donner un sens à sa vie. Les boutons ont également une raison d’être là – et c’est vous, son créateur, qui devez la lui fournir. Quelle est sa raison d’être ?</p> @@ -3059,7 +3059,7 @@ De mon côté, j’ai beaucoup apprécié l’élégance et la légèreté de la <p>Un bouton doit être une solution, pas un problème : s’il n’est pas utilisé avec modération il perd sa valeur d’appel à action. Car s’il y a de l’action partout, vous faites un feu d’artifice, pas un site web.</p> <p>Un site internet est un véritable microcosme, et la plupart des lois de la nature y sont applicables. <strong>Y compris l’évolution.</strong></p> - Sun, 31 Oct 2010 19:54:49 +0000 + Sun, 31 Oct 2010 19:54:49 GMT Gaël Poupard https://www.ffoodd.fr/swirl-in-style/ 31 octobre 2010 @@ -3071,7 +3071,7 @@ De mon côté, j’ai beaucoup apprécié l’élégance et la légèreté de la <h2 id="une-espece-animale" tabindex="-1">Une espèce animale</h2> <p>Il en existe de toute sorte : des grands, des petits, des noirs, des jaunes, des visuels et des textuels… Chaque bouton que vous pouvez imaginer existe certainement déjà quelque part.</p> <p>Pour caractériser un bouton, on dispose de multiples critères : sa palette de couleur, sa forme, son volume, sa réaction au survol, son contenu, sa cible… Et comme nous, il a des mensurations : sa taille et son poids. On pourrait s’amuser à rédiger un <strong>bestiaire des boutons</strong>, les classer par espèces et déterminer si certaines sont en voie d’extinction ou d’expansion – mais ce sera pour un autre jour.</p> -<h2 id="limportance-de-lenvironnement" tabindex="-1">L’importance de l’environnement</h2> +<h2 id="l-importance-de-l-environnement" tabindex="-1">L’importance de l’environnement</h2> <p>L’impact – et donc l’intérêt – d’un bouton dépend autant de lui que de son environnement. Ce dernier détermine l’espace disponible, la liberté de mouvements – mais c’est également de lui dont dépend le caractère du bouton : s’il est discret ou exubérant, calme ou agité, agressif ou doux comme un agneau…</p> <h2 id="le-sens-de-la-vie" tabindex="-1">Le sens de la vie</h2> <p>Pour certains, ce sera 42 ; pour tous les autres, il faudra se définir un rôle afin de donner un sens à sa vie. Les boutons ont également une raison d’être là – et c’est vous, son créateur, qui devez la lui fournir. Quelle est sa raison d’être ?</p> @@ -3080,7 +3080,7 @@ De mon côté, j’ai beaucoup apprécié l’élégance et la légèreté de la <p>Un bouton doit être une solution, pas un problème : s’il n’est pas utilisé avec modération il perd sa valeur d’appel à action. Car s’il y a de l’action partout, vous faites un feu d’artifice, pas un site web.</p> <p>Un site internet est un véritable microcosme, et la plupart des lois de la nature y sont applicables. <strong>Y compris l’évolution.</strong></p> - Sun, 31 Oct 2010 19:54:49 +0000 + Sun, 31 Oct 2010 19:54:49 GMT Gaël Poupard https://www.ffoodd.fr/dessine-moi-un-bouton/ 31 octobre 2010 diff --git a/docs/guide-pratique-de-choix-typographique/index.html b/docs/guide-pratique-de-choix-typographique/index.html index c8364646..90d56e81 100644 --- a/docs/guide-pratique-de-choix-typographique/index.html +++ b/docs/guide-pratique-de-choix-typographique/index.html @@ -8,7 +8,7 @@ - + diff --git a/docs/html-comme-fondation/index.html b/docs/html-comme-fondation/index.html index f7eed94a..4c03e01b 100644 --- a/docs/html-comme-fondation/index.html +++ b/docs/html-comme-fondation/index.html @@ -8,7 +8,7 @@ - + @@ -138,7 +138,7 @@

        Conclusion