Mickaël Floc'hlay

Quatrième TP d'Information Design

Mick — 2011-03-23T14:31:33Z

Les matches de l'équipe de France sont toujours l'occasion de m'entraîner à l'information design. Je pense en être arrivé à une étape décisive.

En attendant sa publication (il me reste 2, 3 trucs à régler concernant la license des polices utilisées pour les diffuser en font-face), voici quelques screenshots de l'état de la chose.

Le HTML

Le HTML est selon moi ok pour du web sémantique. Lors du dernier exercice, un commentateur Twitter m'avait répondu :

Ce n'est pas vraiment du web sémantique [...] Plutôt de la visu d'informations.

Ce sur quoi je ne suis pas d'accord à 100%. Je pense que le HTML sépare clairement mise en forme et contenu, et que le contenu est structuré de façon interprétable. Par contre, il est peut-être vrai que je n'utilise pas toutes les balises les plus précises, notamment celles introduites dans HTML5, mais toute aide sur ce point sera la bienvenue.

La feuille de style

Je parlais de la séparation contenu/style. Pour illustrer ce propos, voici le HTML tel qu'il est rendu dans Chrome quand la feuille de style n'est pas activée :

Maintenant, voici la même page HTML, toujours dans Chrome, cette fois avec la feuille de style activée :

Où sont passées les photos des joueurs dans cette seconde version ? J'y viens...

Interaction via popovers

Dans mon dernier post à ce sujet, je promettais d'améliorer le design de la page en terme d'interactivité. C'est le sujet sur lequel je me suis le plus penché lors de cette session.

Le prénom d'un joueur, sa photo, son club, son âge sont des informations de seconde importance dans mon exercice. En outre, le plupart des lecteurs potentiels de cette page les connaissent de toute façon. Il n'est donc pas nécessaire de les afficher par défaut, mais il est souhaitable de pouvoir y accéder facilement malgré tout.

J'ai donc choisi de proposer ces informations lors du survol du nom d'un joueur par la souris :

Le terme consacré pour ce genre de fenêtre volante est popover ou tooltip et voici les ressources qui m'ont aidé à le réaliser :

Bilan

Le gros-oeuvre est terminé sur cet exercice. Encore quelques retouches par ci, par là (réglage des questions des droits et des licenses, tests multi-navigateurs, tests sur iPhone/iPad, etc.) et je publierai tout ça sur le web. Stay tuned et n'hésitez pas à partager vos impressions dans les commentaires !

What fonts for iOS ?

Mick — 2011-02-23T10:57:32Z

Fonts are a major element of webdesign. And when you talk about webdesign nowadays, you can't just skip mobile devices. The problem is that iOS only comes with a limited numbers of fonts, and there is no way you can install new fonts on iOS devices. What can you do about that?

Fonts that are installed on iOS devices

First, you need to know what fonts are available with iOS. We are lucky, people already did that job and you can find fonts available for iOS at... iosfonts.com (notice that the iPad comes with more fonts than iPhone and iPod Touch)

Google can help

Then, you can use Google Font API service. It's easy to use and Google provide quite a number of cool fonts (the list is here).

That's what I used to update my online CV... that could not display Myriad Pro (the default font) on iOS devices :

Screenshot with Google Chrome before modification (font: Myriad Pro)

Screenshot with iPad before modification (font: Myriad Pro, unavailable on iOS devices)

Screenshot with Google Chrome and iPad after modification (font: Kreon, provided by Google Font API)

CSS3 and Images can help too

Quel logiciel de capture vidéo d'écran ?

Mick — 2011-02-16T16:49:23Z

Je suis actuellement à la recherche de logiciels de capture vidéo pour réaliser des tutoriels vidéos d'utilisation d'applications.

Après quelques minutes de recherche, j'en suis sorti avec la liste de logiciels suivants :

Screenium (23,99€ sur le Mac App Store)
Snapz Pro X (69$)
Screenflick (25$)
iShowU (29,95$)

Si vous connaissez d'autres options ou si vous avez une opinion sur lequel de ces logiciels est le meilleur, n'hésitez pas à en faire part dans les commentaires !

Piggy 1.1

Mick — 2011-02-12T14:54:32Z

Piggy est une application iPhone pour gérer ses comptes entre amis. La version 1.1 vient d'être mise à jour sur l'iTunes App Store.

Cette mise à jour prend en compte les nouveautés suivantes :

le design visuel a été revu
il est désormais possible de supprimer des notes, des contacts et des événements
toutefois, dans un souci d'intégrité des données de l'application, il n'est pas possible de supprimer un contact lorsqu'il a encore des notes qui lui sont attachées

N'hésitez pas à faire vos remarques sur l'application dans les commentaires de ce post, ou directement sur l'App Store. Vous pouvez également demander de nouvelles fonctionnalités.

Cette application intègre une librairie statique "utilitaires" que je présenterai bientôt.

Troisième TP d'Information Design

Mick — 2011-02-09T12:40:44Z

Quelques mois après mon dernier exercice, je profite du match France-Brésil pour un nouveau TP.

Lors de l'exercice précédent, j'avais fabriqué une infographie de l'équipe de France à la main : à partir de mes données, j'avais ouvert mon Photoshop et fait le placement des joueurs à la main.

C'est joli mais ça manque d'intéraction possible. Aussi, le sujet de mon nouveau TP était : puis-je faire la même chose en HTML ?

Le HTML présente de nombreux avantages :
on peut y insérer du web sémantique
on peut y ajouter de l'interactivité

Aujourd'hui, je me suis principalement intéressé au web sémantique. Le résultat est le suivant (screenshot de Flickr) :

Moins joli, mais prometteur, je l'améliorerai d'un point de vue design et intéractivité lors du prochain match de l'équipe de France !

Je ne partage pas encore le HTML, car il n'est pas d'assez bonne qualité pour le moment, mais voici un screenshot du code source, afin de vous donner une idée du web sémantique que j'y ai introduit (là aussi, il peut être largement améliorée) :

Pour rappel de l'historique de la chose :
1er TP : tentative ratée d'information design
2nd TP : rendre lisible de l'information, résultat plus convaincant

iOS et keyboardType

Mick — 2011-02-03T10:01:32Z

Comme j'ai cherché une page qui ressemblerait à celle-ci et que je ne l'ai pas trouvée, voici ma compilation "à quoi ressemble tel type de clavier d'iOS selon la valeur de UIKeyboardType ?".

Bien sûr, ce travail est très limité :
je montre seulement les touches accessibles via la vue principale du clavier
je montre seulement la version iPhone en orientation portrait
je montre seulement les types de clavier non deprecated sur le SDK 4.2

Mais quand même, ça peut être utile.

(s'il existe une page similaire faisant davantage référence, n'hésitez pas à en faire part dans les commentaires)

UIKeyboardTypeDefault

Use the default keyboard for the current input method. Available in iOS 2.0 and later.

UIKeyboardTypeASCIICapable

Use a keyboard that displays standard ASCII characters.
Available in iOS 2.0 and later.

UIKeyboardTypeNumbersAndPunctuation

Use the numbers and punctuation keyboard.
Available in iOS 2.0 and later.

UIKeyboardTypeURL

Use a keyboard optimized for URL entry. This type features “.”, “/”, and “.com” prominently.
Available in iOS 2.0 and later.

UIKeyboardTypeNumberPad

Use a numeric keypad designed for PIN entry. This type features the numbers 0 through 9 prominently. This keyboard type does not support auto-capitalization.
Available in iOS 2.0 and later.

UIKeyboardTypePhonePad

Use a keypad designed for entering telephone numbers. This type features the numbers 0 through 9 and the “*” and “#” characters prominently. This keyboard type does not support auto-capitalization.
Available in iOS 2.0 and later.

UIKeyboardTypeNamePhonePad

Use a keypad designed for entering a person's name or phone number. This keyboard type does not support auto-capitalization.
Available in iOS 2.0 and later.

UIKeyboardTypeEmailAddress

Use a keyboard optimized for specifying email addresses. This type features the “@”, “.” and space characters prominently.
Available in iOS 2.0 and later.

UIKeyboardTypeDecimalPad

Use a keyboard with numbers and a decimal point.
Available in iOS 4.1 and later.

Le bilan du Morning Coffee

Mick — 2010-12-26T14:45:39Z

Incident

(via xkcd)

Comic Sans Criminal

Je suis un maniaque de la typographie, de la présentation d'information et de la forme en général. Si vous voulez me mettre hors de moi, montrez-moi simplement au choix :
une affiche faite sans ironie où figurent les petites images de la Clipart Gallery de Microsoft,
la même chose avec au moins 3 ou 4 polices d'écriture différentes
un slideshow PowerPoint avec des transitions en étoile, en volet ou que sais-je encore

Chez les web-designers, la même chose existe pour la police Comic Sans. L'un d'entre eux a réalisé ce site web, tout simplement génial : http://www.comicsanscriminal.com/