Sur IMDB, LE site référence en matière de cinéma, les utilisateurs peuvent noter les films sur une échelle de 0 à 10. Le classement des meilleurs films est particulièrement figé depuis longtemps, Le Parrain dominant éternellement les débats. Mais depuis peu, le classement a chamboulé :

Je veux bien croire que The Dark Knight est un bon film, mais de là à être considéré comme le meilleur film de tous les temps… Ca me conforte dans l’idée qu’il faut savoir prendre beaucoup de recul avant de valider l’avis que l’on a d’une oeuvre. Les critiques élaborées dans la foulée d’une découverte sont les plus dangereuses et les moins pertinentes.

Si vous voulez mener un sondage mais qu’il vous manque les instruments pour le faire, utilisez Poll Everywhere. Ce site permet de créer facilement un sondage (à choix multiple ou à entrée libre) où le public vote en envoyant sa réponse par sms à un numéro fourni par le sondage. L’intérêt de cette application est sa facilité de réalisation car elle utilise une technologie grandement répandue, et sa très grande portabilité. Le seul petit point noir est le coût engendré par l’envoi d’un sms, coût supporté par les sondés. Mis à part ça, Poll Everywhere me semble bien pratique.

Prenez des objets de souvenirs (carte postale, porte-clé, jouet…), allez sur place et prenez en photo l’objet face à l’original et vous obtenez un slideshow drôlement dépaysant.

Vous voulez vous défouler rapidement,gratuitement et simplement ? Choisissez un pseudo et c’est tout! Votre perso est généré selon les lettres de votre pseudo et le combat commence juste après. Défiez donc bbxwarrior!

Je suis un grand fan de la barre de recherche Firefox.

Très pratique et très simple d’accès (Ctrl+K), elle permet de gagner beaucoup de temps. Bon nombre de sites proposent d’installer le module de recherche pour leur site. C’est d’ailleurs une des premières choses que je vérifie lorsque je découvre un nouveau site. Non seulement c’est bénéfique pour l’utilisateur mais ça permet au site en question de fidéliser l’internaute en lui facilitant l’accès.

Malheureusement, tous les sites ne proposent pas ce module de recherche.
Lire la suite

xkcd

bLaugh

Geek And Poke

Dilbert

Abstruse Goose

garfield minus garfield

Dinosaur Comics

Geeky Comic

Un sondage pour les acteurs du web (développeurs, web designers, graphistes…) proposé par l’excellent A List Apart : Survey 2008

Vous pouvez d’ailleurs consulter les résultats du sondage 2007 (dont j’apprécie particulièrement la mise en forme).

Si vous devez lire des textes extrêmement longs mais que vous manquez de temps, essayez donc cette mini-application : spreeder

Il s’agit d’une application de lecture rapide. En gros, elle fait défiler à la suite et au même endroit les mots du texte que vous avez à lire. Elle espace les mots dans le temps plutôt que dans l’espace. L’utilité ? Eviter la subvocalisation (imaginer le son d’un mot sans le prononcer), ainsi « on ne prononce pas mentalement les mots qu’on lit, mais on appréhende directement le sens de groupes de mots ou phrases ».

Le but est de comprendre le texte sans le lire « vraiment » en entier. Bien sûr, je déconseille d’utiliser cette application pour des romans ou des textes trop techniques. Mais par exemple, pour lire un article Wikipedia (j’adore faire ça), c’est très pratique. Il y a encore et toujours un temps d’adaptation, pour s’entraîner à ce rythme effrené (mais réglable).

Pour ceux qui comptent l’utiliser, sachez qu’il existe un Bookmarklet pour l’application. Ainsi, il suffira de sélectionner du texte et de cliquer sur le lien dans vos favoris, et ça lancera automatiquement l’appli avec le texte sélectionné. J’ai l’impression que ce genre de raccourci se démocratise et c’est loin d’être une mauvaise chose.

Prenez un produit A (Windows Vista).
Rassemblez des gens qui n’ont jamais utilisé le produit mais en ont beaucoup entendu parler (en mal).
Observez les réactions sur le produit A.

Présentez le successeur du produit A : le produit B (Windows Mojave).
Testez ce produit B sur les gens.
Observez les réactions sur le produit B.

Puis dites que le produit B est en fait le produit A : l’expérience Mojave par Microsoft.

Très intéressant de constater qu’on s’approprie très facilement l’opinion des autres au lieu de s’en créer une nous-mêmes. Et comme le dit le blog Vista :

There really is a gap between perception and reality.

J’ai découvert Vista parce qu’il est installé sur ma machine au travail. Après la période « Whaaa c’est beau », j’ai eu quelques problèmes au niveau configuration. Mis à part ça, il est plus stable que mon Windows XP à la maison et j’apprécie fortement l’interface (notamment celle de la fenêtre d’exploration). En tout cas, mon expérience est bien plus agréable que celle que je redoutais en lisant les réactions à sa sortie. Je suis évidemment une cible de cette « Expérience Mojave ».

N’ayant actuellement pas internet chez moi mais voulant tout de même finir mon futur thème WordPress, j’ai cherché à obtenir une version complète et transportable du Codex WordPress. J’ai finalement trouvé par hasard ce guide complet des template tags de WP.

En désactivant le JavaScript (merci Web Developer), on obtient la même page avec tous les blocs entièrement déroulé. Ensuite, un screenshot de la page entière (merci Pearl Crescent) permet d’obtenir tout le codex WordPress en une seule image.

Une collection très fournie de logos de métro du monde entier, qu’il s’agisse du logo du système ou de l’entreprise exploitante.

Via Logo Design Love

Si vous suivez ce blog depuis quelques temps, vous aurez remarqué que j’aime changer de thème WordPress assez fréquemment. Non seulement, je m’ennuie en général assez vite d’un nouveau design mais le thème en lui-même n’est pas bien construit. D’un côté, j’aime varier l’aspect purement graphique de mon site et je construis par conséquent le thème derrière. Mais ce dernier est rarement optimisé. Par exemple, le dernier contenait uniquement un fichier index.php (mis à part les fichiers d’inclusion du type header,footer, comments…). Vous aviez donc la même page selon que vous naviguiez sur la page d’accueil, la page d’un post ou la page des archives. Une grossière erreur d’ergonomie.

Les précédents thèmes

• bbxcloud
  Mon tout premier thème. Du bleu, du vert, du blanc, et des nuages. Il me fallait apprendre à créer un thème WordPress et à créer une structure de blog. Elle s’avérait au final très bancale.
  
• bbxland
  Trois colonnes, et un paysage en guise de header. Ajout d’une 3ème couleur (l’orange) et de plusieurs plugins. Et déjà aucune différenciation entre page d’accueil, page de post, page d’archives…
  
• bbxrevision
  Il tient son nom du site où j’avais vu ce type « d’étiquettes » sur le côté. J’ai gardé le système à 3 colonnes en allégeant relativement celle de gauche. Toujours pas de différenciation (home,post,archives…)
  

Le nouveau thème : bbxhudson

Mon objectif était avant tout de réaliser un thème long terme, que je ne modifierais pas dans quelques mois. Il fallait donc qu’il soit déjà très fonctionnel.

Différenciation

Chaque type de page a sa structure personnelle :

• la page d’accueil est en 2 colonnes (avec à droite les infos générales du blog)
• arrivé sur la page d’un seul post, cette colonne de droite obtient les infos du post ainsi que les commentaires, pour gagner en hauteur
• les pages d’archives (en parcourant une catégorie) ont un titre, une description de la catégorie ainsi qu’une liste des posts sous forme de mosaïque
• la page bdbx, pour son contenu particulier, utilisera une mosaïque d’images
• la page de tags est identique à celle des archives, avec pour différence la présence d’un nuage de tags en haut, pour faciliter la navigation
• une page 404 fait son apparition, en espérant que vous n’ayez pas à tomber dessus

Design élastique en css

Le plus grand challenge a été de réaliser ce thème avec un design élastique. Il n’est pas fixe (largeur définie en pixels), ni fluide (largeurqui s’adapte à la taille de la fenêtre). Il est élastique : la largeur des blocs dépend de la taille du texte, car définie en em. Il est rare de voir ce genre de design parce qu’il est plus compliqué à mettre en place que les autres. Parmi les sites qui l’utilisent, il faut citer l’excellent SimpleBits, le très typographique site de Jon Tan ou bien l’incontournable blog de Fred Cavazza.

A quoi ça sert ?

En modifiant la taille du texte (Ctrl+molette vers le haut ou le bas), les blocs s’adaptent à la taille du texte. Ca permet à ceux qui veulent agrandir le texte de le faire tout en gardant une structure correcte. On a l’impression que c’est un véritable zoom, mais il n’en est rien. Cette méthode marche même sous Internet Explorer.

J’aurais pu refaire un design fixe, comme d’habitude. Mais j’ai profité ce nouveau thème pour apprendre à utiliser les em. Je l’ai fait en lisant (et relisant) cet excellent post : The Incredible Em & Elastic Layouts with CSS.

Vertical Rhythm

En supplément de l’utilisation des em pour la typographie et pour la largeur des blocs, je me suis intéressé à adopter une structure verticale, que l’on appelle en anglais vertical motion (ou vertical rhythm).

Vertical space is metered in a different way [to horizontal space]. You must choose not only the overall measure – the depth of the column or page – but also a basic rhythmical unit. This unit is the leading, which is the distance from one baseline to the next.

Que ce soit les titres, les paragraphes, les listes, les citations… tous ces éléments ont une hauteur multiple de 24. Cela se voit surtout sur la page d’un seul post, où il y a 2 colonnes.

Il y a donc pas mal de changements dans ce dernier thème. J’en ai profité pour mettre à jour mon tutoriel de menu 100% css et je compte prochainement rajouter un theme switcher, ainsi qu’un footer (à l’occasion 😉 ).

Parmi les moteurs de recherche spécialisés qui foisonnent sur le web, en voici un qui peut intéresser les web designers : Pdfgeni.com

C’est un moteur de recherche de pdf. Il permet notamment de trouver des E-books (l’équivalent d’un livre en ligne). Il est par conséquent très facile de trouver des documents concernant un domaine particulier. Même si il peut chercher dans n’importe quel domaine, Pdfgeni s’avère très pratique pour fournir des pdf concernant le web. Par exemple on peut chercher :

• « css » et on tombe notamment sur le Guide des css dans les mails de Campaign Monitor ou un Mémo css
• « actionscript » pour trouver ActionScript standards (par Adobe) ou un Guide de référence AS
• « interface » et tomber sur un Interface Design Guidelines (de 2001 mais très pertinent encore aujourd’hui) ou How To Develop An Effective GUI Standard illustré

Ce ne sont ici que 3 exemples pour trouver de très bons documents. Libre à vous de chercher dans d’autres domaines que le web!

Des étudiants de Washington ont développé une technologie qui permet d’améliorer considérablement la qualité des vidéos en leur associant des photos de la même scène. L’amélioration de la qualité est extraordinaire.

Il est alors possible d’utiliser des techniques habituellement réservées à la photographie : retouche d’image, exposition, effets « Photoshop »… et surtout faire disparaitre un objet de la scène ! Allez voir ce projet génial : Video Enhancement.

Si vous comptez développer une application pour iPhone et que vous voulez créer des ébauches de l’interface, utilisez donc ce PSD de l’interface de l’iPhone. Quasiment tout y est : boutons, clavier, liste déroulante, barre de progression, liste alphabétique… et bien sûr, l’iPhone lui-même avec plusieurs écrans déjà prédéfinis.

C’est très pratique car on se rend compte au pixel près de l’espace dont l’on dispose. Par exemple, si l’on décide de faire afficher le clavier, quel espace reste-t-il pour l’application ?

Non seulement, ce psd est complet, il est aussi graphiquement très proche de la réalité, et le fait que la plupart des éléments soient en vectoriel est un plus non négligeable. Gardez bien ce lien dans vos favoris car le psd sera régulièrement mis à jour par leurs auteurs.

Le site du New York Times qui regorge de graphiques intéractifs de grande qualité, propose ici une vue panoramique depuis le plongeoir du Water Cube de Beijing 2008. Elle est commentée par Thomas Finchum, un plongeur américain.

D’autres graphiques sur les JO sont disponibles :

• une carte des médailles selon les pays
• un agenda des épreuves
• les différentes torches olympiques
• la description détaillée du record de Bolt aux 100m

Le plus populaire des wiki obtient sa propre application iPhone pour naviguer encore plus facilement à travers ses millions d’articles : Wikipanion.

Même si le site est évidemment accessible via le browser de l’iPhone, cette application améliore considérablement la navigation (auto-completion notamment) et la lisibilité (mise en page adaptée au support).

Une femme dénommée Hiroko Yoda voulait rejoindre cette joyeuse communauté de Facebook. Mais voilà : la Force l’en a empêchée (un peu comme elle m’a détruit tout sens graphique pour l’image ci-dessus).

A quand Chewbecca banni par MySpace ?

Phelps a survolé les derniers JO. 8 épreuves, 8 médailles d’Or. Tout le monde le sait. Mais si vous n’avez pas pu vous réveiller à l’heure pour vivre tous ces moments, voici quelques morceaux choisis.

Incroyable victoire

Ralenti Phelps

Photo finish de Phelps et Cavic

C’est la plus courte des 8 victoires. Il est impossible sur la vidéo de voir comment Phelps gagne. La photo finish n’en dit pas plus en réalité. Mais ce ralenti image par image donne des indices.

Le fair-play de Phelps

Suite à cette victoire surprenante, Phelps a fait preuve d’un fair-play extraordinaire.

Victoire face aux Français

Vous l’avez sans doute (mal) vécu : c’était la victoire des Etats-Unis face à la France aux 4x100m Nage libre. La victoire s’est acquise dans les 15 derniers mètres. La tension était à son comble, et Phelps a laissé explosé sa joie.

Il peut enfin rentrer chez lui.

Au programme cette fois-ci, un super telephone Samsung, un gateau intergalactique, un tres beau Linux, une aventureuse page 404 et le manuel du Red Ring Of Death.

Deballage du Samsung Omnia

Gateau Millenium Falcon

Dans la culture geek, je demande les gourmands artistiques. Il y a eu des gateaux Mario ou Portal, voici le cake Millenium Falcon.

Interpid Ibex : un mockup d’Ubuntu

Une version tres classe d’un bureau Ubuntu, plutot destinee aux Mac users. C’est pour l’instant un simple design, purement graphique.

Le parcours 404

Vous etes perdu ? Ce parcours 404 vous aidera a retrouver votre chemin.

Manuel du Red Ring Of Death X360

Le Red Ring Of Death possede son propre mode d’emploi : que faire lorsque votre X360 vous lache ?

PS : vous l’aurez remarque, il n’y a pas d’accent dans ce post parce que je suis sur un clavier qwerty. J’ai cherche, en vain, un « convertisseur » qwerty/azerty en ligne, qui permettrait de « traduire » l’action de mes touches. Je n’en ai pas trouve parce que c’est en general une question de hardware, mais si vous connaissez une solution software, je suis preneur, par simple curiosite (autre qu’en passant par l’OS car ce dernier ne m’a pas aide du tout).

Par l’ami Bouctoubou, j’ai découvert un jeu très surprenant : JavaScript Rock Star. Ce qui est surprenant, ce n’est pas le gameplay mais plutot la technologie utilisée. La jouabilité est encore à revoir mais c’est néanmoins ludique. Utilisez les touches A,S,D,F et G pour taper respectivement les « notes » rouge, orange, jaune, verte et bleue. Une prouesse est d’avoir parfaitement synchronisé la vidéo Youtube au jeu. Une belle pub pour jQuery.

En parcourant le net, je tombe souvent sur des phrases très intéressantes, qu’elles proviennent d’un site, d’un article, ou d’un commentaire. Mais « blogger » dessus semble peu approprié car une seule phrase ne peut pas fournir un article. Je pense néanmoins qu’il faut le partager et c’est pour ça que j’ai décidé de lancer sous forme de micro-blog le site Words On Design.

Utilisant comme moteur Asaph (le même que pour Alt-Tab), Words On Design sont des extraits de blogs ou de discussions qui concernent le web design. L’essentiel du site réside dans ces phrases, dans leur contenu, et dans leur contexte (accessible en cliquant dessus). C’est pourquoi le flux rss est aussi (voire plus) important que le site en lui-même.

Words On Design (dont le nom provient de « Joel On Software ») intéressera je l’espère tous les web designers parmi vous.

Une petite partie de Quake 3 à midi ?