You do the meth : tous les jeux de mots des génériques de Bob’s Burgers

Vous voyez dans le géné­rique des Simpsons le texte que Bart écrit depuis 25 saisons ? Dans Bob’s Burgers c’est pareil, il y a deux jeux de mot dans le décor, presque toujours nouveaux. Je me suis amusé à les extraire avec un petit script basé sur ffmpeg (et peu d’huile de coude pour capturer les photo­grammes ayant des time­code diffé­rents).

Il y a 126 photo­grammes pour 134 épisodes (de la S1 au milieu de la S8), ce qui fait 8 épisodes sans géné­rique.

VOIR LES IMAGES EN PLEIN ÉCRAN Lire la suite

Leçons ergonomiques et techniques d’un projet perso

Il y a quelques mois j’ai publié un outil pour calculer une addi­tion en terme de tickets resto (le post de l’époque est ici). Je sais, rien ne m’ar­rête. Voici une mise à jour, avec notam­ment des visuels plus travaillés, ainsi qu’un clavier sur mesure et toujours présent à l’écran.

Vous pouvez le charger ci-dessous en cliquant sur le screen­shot ou l’ou­vrir depuis votre ordi­phone préféré.

Pourquoi un thème sombre ?

Parce que c’est repo­sant pour les yeux, surtout quand l’arrière-plan est très présent, comme ici, et que mon télé­phone et son OS (Moto G et Android vanillé) sont déjà sombres.

Pourquoi un clavier sur mesure ?

Se limiter à ce que fournit l’OS oblige à utiliser :

  • sur iOS, un clavier pensé pour la saisie de numéros de télé­phone, donc pas top
  • Sur Windows Phone et Android, un clavier plus adapté, sans carac­tères inutiles et avec un sépa­ra­teur décimal. Malgré cela je n’aime pas trop leur dispo­si­tion (voir plus bas).

De plus, le clavier natif appa­rait à l’appui sur un champ. C’est bien dans une page complexe, mais ici il est plus perti­nent d’avoir une mise en page sans scroll, avec les champs fixes et le clavier toujours présent.

Enfin, pour utiliser le clavier numé­rique natif, il faut que l’élé­ment <input> soit de type number. Ca pose certaines contraintes, car l’API a été pensée pour un contrôle de vali­dité dyna­mique mais après coup : c’est seule­ment quand l’uti­li­sa­teur sort du champ que le champ signale l’er­reur, par exemple s’il a saisi des lettres au lieu de chiffre. Ca rend diffi­cile le contrôle a priori que je voulais, puis­qu’on n’a aucun accès program­ma­tique au texte inva­lide d’un champ (value devient vide). De plus, une valeur du genre « 10, » est consi­dérée comme inva­lide, alors qu’il faudrait qu’elle corres­ponde à un état « en cours de saisie », comme c’est le cas dans les bonnes biblio­thèques de gestion des masques de saisie.

Ajoutons qu’en fran­çais le sépa­ra­teur décimal correct est la virgule mais certains navi­ga­teurs (Firefox Mobile) ne le loca­lisent pas correc­te­ment.

C’est pas une mauvaise pratique de réinventer des comportements natifs ?

Totalement. C’était juste­ment instructif pour moi de voir le nombre de choses qu’il faut réim­plé­menter comme on peut. Le chemi­ne­ment a ressemblé à ça :

  1. Je ne voulais pas du clavier, alors qu’il appa­rait par défaut, un compor­te­ment théo­ri­que­ment non modi­fiable.
  2. Du coup, on triche en faisant perdre le focus à un champ dès qu’il le gagne.
  3. Du coup, il faut en garder en mémoire quel champ on a sélec­tionné. Un focus custom, quoi. Il faut égale­ment recréer un curseur et le placer au bon endroit.
  4. Ah merde, il faut calculer à la main la posi­tion du curseur.
  5. Et bien sûr ça oblige de bidouiller pour obtenir la largeur d’un carac­tère (l’unité ch aurait été parfaite mais Chrome ne la supporte pas). Donc l’outil ne marche qu’avec des polices à chasse fixe (mono­space).

Je vous passe les subtiles diffé­rences de compor­te­ment entre navi­ga­teurs, notam­ment dans la gestion des évène­ments focus et click. Bref, le tout marche mais n’est pas ultra robuste ni fran­che­ment réactif et le code est sans doute encore moins propre et modu­laire que la dernière fois.

Pourquoi cette disposition de clavier ?

Vu qu’on est dans la saisie de monnaie je me suis rapproché de la conven­tion des calcu­lettes, avec le 9 en haut à droite. En plus, la progres­sion des chiffres du bas vers le haut suit le mouve­ment de la main ou du doigt propre au mobile.

Un bidule optimisé pour la main mais codé avec les pieds

EDIT : Infos plus récentes ici.

S’il y a bien un moment où je n’ai pas envie d’uti­liser mes faibles capa­cités de calcul mental, mais plutôt un arte­fact cognitif adapté (en fran­çais : dégainer une calcu­lette), c’est quand il s’agit de payer en tickets restau­rant. Étant toujours à la recherche d’oc­ca­sions concrètes d’ap­prendre à programmer, j’ai donc bricolé un petit outil qui affiche le nombre de tickets à donner et le reste en liquide.

Le bidule est pensé pour une utili­sa­tion sur petit écran et une saisie au pouce. J’ai essayé de rendre le formu­laire dyna­mique, pour empê­cher la saisie de lettres ou des montants mal formatés. C’est un parti pris ergo­no­mique (blocage versus message d’er­reur), mais c’est égale­ment instructif de voir à quel point le déve­lop­pe­ment de web app peut être CHIANT si on tombe sur la mauvais combi­naison de cas – en l’oc­cur­rence, combiner un contrôle à la saisie et un clavier adapté à la saisie numé­rique sur mobile. Par exemple, l’outil bloque la saisie d’une seconde virgule après « 1,01 », mais après « 1, » ou « 1,00 ».

Avertissement : on parle d’un truc opti­misé pour la main mais codé avec les pieds. Donc pas de support de Safari <9 ni d’Internet Explorer (et tempo­rai­re­ment de Firefox sur Android, grrr). et un code d’une qualité très rela­tive.

C’est ici.

Screenshot_2016-01-03-00-05-00

Meta Axure : un outil de maquettage créé avec un outil de maquettage

Vous voyez les gens qui recréent un ordi­na­teur dans Minecraft ? Si vous ne voyez pas, voici une intro et un exemple en vidéo ici.

J’ai fait un truc du même genre, en beau­coup plus modeste : un outil de maquet­tage réalisé grâce à un outil de maquet­tage. Pour être honnête, il s’agit plutôt d’un outil de zoning très primitif. Il permet de placer des rectangles, de les redi­men­sionner, de les effacer, de les renommer et de les mettre à l’avant-plan ou à l’arrière-plan.

Il est testable en ligne à cette adresse et le fichier source est ici (il n’est pas du tout docu­menté et néces­site Axure 8).

Meta Axure

Le flat design de la Grèce antique à nos jours

Le 04 décembre, j’ai donné une présen­ta­tion à Lille dans le cadre du quatrième Welsh Design, qui m’a genti­ment donné l’op­por­tu­nité de parler de mes lubies.

L’angle est très proche de cet article sur l’éter­nelle querelle du mini­ma­lisme, mais le contenu est large­ment remanié. A l’ori­gine, il y a ma frus­tra­tion face au débat du flat design, débat néces­saire mais manquant à mon sens cruel­le­ment de recul. D’une part, j’ai voulu apporter quelques repères histo­riques, montrer que l’op­po­si­tion entre le chargé et le sobre ne date pas d’hier. D’autre part, j’ai tenté de distin­guer des concepts diffé­rents mais souvent confondus, car ayant tous à voir avec l’his­to­ri­cité du design et de la tech­nique : skeuo­mor­phisme, méta­phore, signe, kitsch et ce que j’ai appelé « exap­ta­tion », faute d’une meilleure traduc­tion pour repur­po­sing.

Vu les limites de temps et de mes capa­cités oratoires, le contenu était un peu ambi­tieux, mais enfin voilà les diapo­si­tives vague­ment anno­tées de la présen­ta­tion. (Je tente un lecteur de PDF embarqué, dites-moi si ça déconne.)

Vu les limites de temps et de mes capa­cités oratoires, le contenu était un peu ambi­tieux, mais enfin les diapo­si­tives vague­ment anno­tées de la présen­ta­tion sont dispo­nibles ici.