Horizon, quand tu nous tiens…

Horizon, quand tu nous tiens…

Décidément, je crois que j’apprécie de plus en plus mon Horizon 🙂
Voici la dernière péloche… en attendant les suivantes puisque les vacances commencent !

Star Wars Identities

Star Wars Identities

Ce week-end, on profite d’être déjà en vacances, mais de ne pas être encore descendu retrouver les enfants (demain, on fête nos 7 ans de mariage, et les fête juste tous les deux !), on peut faire des choses qu’on a pas fait depuis quelque temps… et comme aujourd’hui, il se trouvait que Sarah était à Paris, je les ai laissées ensemble et j’ai filé direction Saint Denis pour aller visiter l’expo Star Wars Identities.

J’aime beaucoup Star Wars, sans en être un fan absolu… mais il faut avouer que je suis quand même plutôt geek donc que cette exposition avait quand même des chances de me plaire… malgré un prix relativement élevé… ça valait le coup d’essayer.

Et donc ? Oui, c’était vachtement chouette comme expo !

Bien sûr, j’ai pris quelques photos :

Pendant toute l’expo, on porte un bracelet et on se construit un personnage de Star Wars : race, nom, origines, caractère, ideaux… jusqu’au choix finale : allez-vous succomber au coté obscure de la force ou non ?
C’est plutôt rigolo et vraiment bien fait 🙂
Je vous présente donc le Sénateur Moko, Kaminoan natif de Coruscant :

Et sinon, je suis très fier de moi parce que y’avait plein, mais alors PLEIN, de trucs dans la boutique (forcèment) et je ne suis revenu qu’avec une petite figurine de Yoda. Pas mal, non ?

Ceci n’est pas une date

Ceci n’est pas une date

Un petit billet technique sur une problématique qui a tendance à m’agacer, quand elle est mal pensée (bonjour le PMU), les champs « date de naissance » des formulaires.

En gros, il existe 4 manières pour demander à quelqu’un sa date de naissance :

Je me propose d’essayer d’évaluer ces 4 manières de faire, dans un contexte à la fois desktop et mobile, sur des sites ou dans des apps.

Si vous êtes pressé, vous pouvez directement consulter ma conclusion !

 

Un champs de texte libre

C’est la méthode la plus simple et la plus basique :

<label for="DateDeNaissance">Date de  naissance</label>
<input type="text" id="DateDeNaissance">

Pour être le plus complet, on peut ajouter une aide éventuelle pour expliciter le format de date attendu :

<label for="DateDeNaissance">Date de  naissance</label>
<input type="text" id="DateDeNaissance" aria-describedby="DateDeNaissance_Aide">
<span class="aide" id="DateDeNaissance_Aide">JJ/MM/AAAA</span>

On peut aussi profiter des nouvelles propriétés HTML5 pour contrôler le format :

<label for="DateDeNaissance">Date de  naissance</label>
<input type="text" id="DateDeNaissance" aria-describedby="DateDeNaissance_Aide" pattern="\d{1,2}/\d{1,2}/\d{4}">
<span id="DateDeNaissance_Aide">JJ/MM/AAAA</span>

Résultat :

Maquette de formulaire utilisant un champs de texte libre
Ceci n’est pas une date, c’est un champs de texte libre
Voir la page

Exemple d’implémentation :

Formulaire d'authentification JOA
JOA
(pas de lien, le site est moche et bourré de popups *àlacon*)
Pas de soucis particuliers avec cette méthode, très classique, facile à rendre accessible mais aussi à utiliser, sur desktop comme sur mobile. Seul bémol : sur mobile, il faut opérer à de multiples changements de type de clavier pour saisir nombres et séparateurs.

 

Un champs de type date

<label for="DateDeNaissance">Date de  naissance</label>
<input type="date" name="DateDeNaissance">

Rien de particulier à rajouter pour être accessible, ça marche « Out of the box ». C’est d’ailleurs l’exemple choisi par moult blogs pour illustrer le nouveau type de champs date (notamment Alsacreation).

Résultat :

Maquettede formulaire utilisant un champs de type date
Ceci n’est pas une date, c’est un champs de type date
Voir la page

Exemple d’implémentation :

Inscription | pmu.fr
PMU
Formulaire d’inscription
C’est clairement, à mon sens, une solution peu ergonomique car, quand j’essaie de m’authentifier sur un site web, c’est bien plus compliqué de choisir ma date de naissance dans un sélecteur de date que de la saisir dans un champs texte, notamment sur téléphone et sur tablette.

 

3 champs de texte libres

Pas forcément la plus simple à manipuler pour être accessible ET ergonomique (3 champs = 3 labels) mais on peut s’en sortir :

  • avec quelques textes cachés mais restitués aux aides techniques
  • avec un peu d’ARIA pour expliciter les relations entre champs
<span id="DateDeNaissance">Date de  naissance</span>
<label for="JourDeNaissance" id="JourDeNaissance_label" class="text-hide">Jour</label>
<input type="number" id="JourDeNaissance" aria-labeledby="DateDeNaissance JourDeNaissance_label" placeholder="JJ">
<label for="MoisDeNaissance" id="MoisDeNaissance_label" class="text-hide">Mois</label>
<input type="number" id="MoisDeNaissance" aria-labeledby="DateDeNaissance MoisDeNaissance_label" placeholder="MM">
<label for="AnneeDeNaissance" id="AnneeDeNaissance_label" class="text-hide">Année</label>
<input type="number" id="AnneeDeNaissance" aria-labeledby="DateDeNaissance AnneeDeNaissance_label" placeholder="AAAA">

Résultat :

Maquette de formulaire utilisant 3 champs de texte libres
Ceci n’est pas une date, ce sont 3 champs de texte libres
Voir la page

Exemples d’implémentation :

Identification | pmu.fr
PMU
Formulaire d’inscription
Connexion - App LOTO
FDJ
Connexion à l’app
Pas de soucis particuliers avec cette méthode, un peu plus complexe cependant à mettre en œuvre que la méthode du champs de texte unique. Un avantage cependant lors d’une saisie avec un téléphone puisque on passera facilement d’un champs à l’autre sans se poser la question du séparateur à utiliser.

 

3 listes déroulantes

La mise en œuvre est assez similaire à celle de la solution précédente :

<span id="DateDeNaissance">Date de naissance</span>
<div class="Selects">
<label class="text-hide" id="JourDeNaissance_label" for="JourDeNaissance">Jour</label>
<select id="JourDeNaissance"><option>1</option>...<option>31</option></select>
<label class="text-hide" id="MoisDeNaissance_label" for="MoisDeNaissance">Mois</label>
<select id="MoisDeNaissance"><option>1</option>...<option>12</option></select>
<label class="text-hide" id="AnneeDeNaissance_label" for="AnneeDeNaissance">Année</label>
<select id="AnneeDeNaissance"><option>1940</option>...<option>1994</option></select>
</div>

Résultat :

Maquette de formulaire utilisant 3 listes déroulantes
Ceci n’est pas une date, ce sont 3 listes déroulantes
Voir la page

Exemples d’implémentation :

Authentification | fdj.fr
FDJ
Formulaire d’authentification
Connexion - App PMU
PMU
Connexion à l’app
C’est une solution que ne parait pas plus adaptée que la solution du champs date. Pire, elle n’est adaptée ni à la saisie au clavier, ni à la saisie sur téléphone ou sur tablette.
Mise à jour du 3 août 2014 : le PMU vient de mettre à jour son app, notamment pour modifier ces champs de saisie de la date de naissance ! Je ne devais pas être le seul à pester 😉 Maintenant, ce sont 3 champs de texte libres qui s’enchaînent et c’est bien mieux. Merci le PMU !

 

En conclusion : Restons simple

  • Champs texte unique : simple à mettre en œuvre, accessible, ergonomique
  • Champs date : simple à mettre en œuvre, accessible, peu ergonomique avec un clavier, pas ergonomique du tout avec un téléphone ou une tablette
  • 3 champs textes : un peu plus complexe à mettre en œuvre et à rendre accessible, ergonomique sur ordinateur et sur mobile
  • 3 listes déroulantes : également plus complexe à mettre en œuvre et à rendre accessible, pas ergonomique, quelque que soit le contexte
  • Les méthodes les plus ergonomiques, un champs texte unique et 3 champs textes, sont aussi les méthodes les plus simple à mettre en œuvre et à rendre accessible… alors pourquoi faire compliqué ? Globalement, je privilégierai la solution des 3 champs textes, visiblement la plus universelle.

    Si quelqu’un du PMU passe par ici… sachez que je vous maudit tous les dimanches de vos choix ergonomiques hasardeux !

    Pour finir, un petit lien vers un site du gouvernement britannique qui s’est posé la même question (et qui réponds sensiblement de la même manière) : Asking for a date of birth

Un week-end à Londres

Un week-end à Londres

St Pancras

Un petit week-end à Londres, ça fait toujours du bien. Une fois par an, c’est le minimum, non ?

J’y suis allé il y a peu et voici un petit retour et quelques bonnes adresses… testées et validées !

Manger

  • Serpentine Bar & Kitchen: Best Breakfast Ever

    Full English Breakfast
    Fan depuis lontemps des English Breakfast, quand j’ai lu ce un billet de Kreestal, forcément, j’ai eu envie d’essayer ce petit dèj’ anglais. Je valide ET le p’tit déj’, ET le lieu :).
    Hyde Park

  • Byron burger

    Là aussi, les bons burgers sont un peu mon péché mignon donc ça faisait un moment que je voulais tester ceux de Byron. Bon ben, là aussi, je valide ! Même que, depuis, j’ai pu re-tester et re-valider à Oxford.
    Bon, par contre, j’avais trop faim, j’ai mangé trop vite, toussa… alors j’ai pas pis de photos. Si vous voulez voir, vous pouvez aller lire le dernier billet de bulleine avec des jolies photos dedans.

  • Ben’s cookies

    English Cookies
    Ça fait déjà quelques années que, à chaque fois que je vais à Oxford, je déguste ces cookies, et j’en ramène… Hé bien, ils ne sont pas disponibles qu’à Oxford !

à voir

  • Science Museum

    Je n’avais encore jamais été au musée des sciences, et c’était les derniers jours pour aller voir une expo de Martin Parr donc forcément, c’était la bonne occasion.
    Science Museum
    Je dois dire que j’ai beaucoup aimé l’expo photo (mais avec Martin Parr, c’était couru d’avance) mais que j’ai été un peu déçu par le musée. Laurence l’appelle « le musée du WTF accroché au plafond »©hellgy et c’est vraiment ça, du WTF ! Je m’attendais à quelque chose proche de la Cité des sciences ou du Palais de la découverte mais c’est finalement plus proche du Musée des Arts et Métiers. Pas mal, mais pas ce que j’attendais.
    Science Museum

  • The Shard

    The Shard
    Je suis fan des hauteurs mais j’ai une chérie qui n’aime pas ça, du coup, c’est pas toujours facile… mais ça vous dit combien j’attendais cette visite de The Shard. Lors de notre dernière visite de Londres, on l’avait vu presque fini et ce gratte-ciel m’avait déjà impressionné, donc ce fut une sacré expérience que de pouvoir y monter.
    Vue de The Shard
    C’est un poil cher, mais ça vaut vraiment le coups ! J’ai d’ailleurs pris pas mal d’Horizons de là-haut, je vous laisse les découvrir :
    The Shard
    View from The Shard
    View from The Shard
    View from The Shard

  • Ballade au bord de la Tamise

    Tower Bridge
    The Shard n’ouvre pas très tôt… mais c’était l’occasion de profiter de ces si beaux quais de la Tamise en attendant, et c’était une très bonne idée car ils étaient alors presque déserts.
    Hay's Galleria
    Tower Bridge

  • M&M’s World

    M&M's World
    J’y avait déjà été l’an dernier (voir , et et j’avais trouvé le lieu hallucinant (en plus d’y avoir trouvé un mug gigantesque, parfait pour le grand buveur de café que je suis). Bref, il fallait y retourner pour ramener, de nouveau, quelques M&M’s mais aussi quelques goodies !

  • Forbidden Planet

    L’an dernier, j’avais ramené, entre autres, une figurine Sheldon de The Big Bang Theory, cette année j’ai ramené des tas de goodies Doctor Who et des cadeaux geeks idéaux pour l’anniversaire de ma soeur 🙂

  • CA4RA

    J’allais oublier CA4RA (C’est du japonais : カシラ donc le 4 se prononce « shi », ce qui donne « KA SHI LA ») ! THE boutique où on est obligés d’aller à chaque voyages à Londres ! Ma chérie en est folle depuis notre voyage au Japon (déjà là-bas, on a du visiter ceux de Tokyo mais aussi d’Osaka, de Kyoto et d’Hiroshima…). Donc petite visite, comme d’habitude à Old Street pour acheter quelques casquettes… et cette fois, j’en ai même trouvée une pour moi 🙂

    Précisons que le quartier lui même est assez peu touristique mais vaut pourtant bien la visite si vous aimez le Street art.

Une nouvelle péloche d’Horizon développée… ça faisait longtemps !

Une nouvelle péloche d’Horizon développée… ça faisait longtemps !

Je reviens de 2 escapades en Angleterre, 2 jours à Londres et 3 jours à Oxford. J’en ai profité pour ressortir mon Horizon et je dois dire que j’en suis bien content 🙂

Voici une petite sélection…

Londres

Hyde Park

Hyde Park

Hay’s Galleria

Hay's Galleria

Tower Bridge

Tower Bridge

The Shard View

J’ai vraiment adoré monté en haut de « The Shard ». Un poil cher mais ça vallait vraiment le coup !
View from The Shard
View from The Shard
View from The Shard

Oxford

Radcliffe Camera

Du bas :
Radcliffe Camera
Du haut (de St Mary)
Radcliffe Camera

Christ Church College

Christ Church

Pour voir toutes les photos, c’est sur mon Flickr !

Smashing Conference (Oxford ’14)

Un petit résumé de la Smashing Conf qui a eu lieu la semaine dernière à Oxford et à laquelle j’ai eu le bonheur d’assister.

Ce que j’en retiens : il serait peut être temps

  • de se pencher plus sérieusement sur Flexbox (la pres de @zomigi est juste impressionnante de clarté)
  • d’envisager svg pour les illustrations (vs les icons fonts qui n’ont pas encore dit leur dernier mot)
  • de penser « responsive« , « maintenable« , « performance« …

Le plus dur reste encore et toujours :

  • de voir ce que propose maintenant les outils de marché… ça donne envie.
  • de se projeter et d’utiliser ces techniques… alors que notre impératif reste une bonne restitution sous IE8 🙁

Place au Storify :