J’adore cette boîte : design tout en simplicité, boîte beige carton naturel imprimé en noir qui fait ressortir la ligne et deux œillets sur le côté. Extrêmement simple, mais il n’en faut pas plus pour nous insuffler l’histoire et les référents de cette marque et des ses fameux souliers qui sont maintenant une légende.

Si le modèle culte Chuck Taylor All Star de Converse a été popularisé par son association au basketball, il est aujourd’hui symbole de différence, d’originalité, de marginalité et de créativité.

Chaussure mythique également utilisée comme canevas de création autant par les professionnels que par la communauté de la marque :

• Punk Your Chucks
• Design de Jeff Hamada pour (PRODUCT) RED
• Version pour les fans de Twilight

Sa réponse, même s’il ignorait le nom au moment de répondre, est d’utiliser l’extension qTranslate. Une fois l’extension installée, il ne vous suffit que d’internationaliser le thème de votre choix, une étape cruciale et simple… lorsqu’on connaît la procédure!

Repérer le contenu à traduire

Passez les fichiers de votre thème un par un, et quand vous tombez sur du texte à traduire, englobez celui devant être affiché dans la fonction _e(); et celui correspondant à un paramètre dans la fonction __();. Par exemple, le texte suivant :

<p class="center">Sorry, but you are looking for something that isn’t here.</p>

…devient…

<p class="center"><?php _e("Sorry, but you are looking for something that isn’t here.", "kubrick"); ?></p>

J’entends des gens me poser la question «Bon, c’est quoi l’idée de vénérer Stanley Kubrick dans ton exemple?!»

Sachez que «kubrick», utilisé ci-dessus comme nom de domaine, est le surnom de référence du thème activé par défaut sur WordPress depuis 2005. Dans un contexte de traduction, le nom de domaine permet d’identifier une série de chaînes de caractères afin de les regrouper pour les associer à un même fichier de traduction. Il est la clé qui permet l’association entre la phrase originale anglophone et sa version française.

Produire un fichier de traduction

Les habitués de WordPress connaissent bien le fichier fr_FR.mo. Il s’agit d’une version compilée du fichier de traduction de base pour la version française de WordPress. Encore aujourd’hui, il n’existe pas de distinction entre la France et le Canada au niveau de la traduction de WordPress, voilà pourquoi nous utiliserons l’identifiant français. La source du fichier se nomme fr_FR.po et se présente sous la forme d’un fichier texte. Voici un extrait de l’entête et d’une phrase traduite :

"Project-Id-Version: 1.6\n"
"Report-Msgid-Bugs-To: http://wordpress.org/tag/theme\n"
"POT-Creation-Date: 2009-05-18 17:54+0300\n"
"PO-Revision-Date: 2009-06-11 09:38+0100\n"
"Last-Translator: Amaury BALMER \n"
"Language-Team: French (France) \n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=n>1\n"
"X-Poedit-Language: French\n"
"X-Poedit-Country: FRANCE\n"
"X-Poedit-SourceCharset: utf-8\n"

#: index.php:36
msgid "Sorry, but you are looking for something that isn’t here."
msgstr "Désolé, mais vous cherchez quelque chose qui n’est pas ici."

Le dernier paragraphe est à répéter autant de fois que vous avez de phrases à traduire. La première ligne identifie l’endroit dans le fichier où se trouve la chaîne originale (à la ligne 36 du fichier index.php). Cette ligne est facultative, mais c’est une bonne pratique qui risque d’épargner beaucoup de temps autrement investi sur de la recherche. Vous aurez compris que la ligne du milieu représente la cible et que la dernière ligne représente le contenu devant remplacer cette cible.

Une fois le fichier de traduction complété, vous devez le compiler à l’aide d’un logiciel tel Poedit (disponible sur Windows, Mac et UNIX). Pour se faire, simplement ouvrir votre fichier fr_FR.po et sauvegarder votre fichier. Le logiciel compile celui-ci automatiquement, vous vous retrouverez donc avec un fichier fr_FR.mo prêt à être utilisé avec votre thème WordPress.

Déclarer le domaine dans functions.php

Une fois les fichiers fr_FR.mo et fr_FR.po (ce dernier est facultatif) transféré dans le répertoire de votre thème, vous devez modifier (ou produire) le fichier functions.php en y ajoutant la ligne suivante :

load_theme_textdomain("kubrick");

N’oubliez pas de remplacer le nom de domaine «kubrick» par celui-ci de votre choix (normalement, le surnom de votre thème). Celui-ci doit être le même que celui utilisé dans les fonctions _e(); et __(); que vous avez intégré à votre thème lors de la première étape.

Une fois ces trois étapes complétées, et si les fichiers produits ne sont pas corrompus (ou ne présentent pas d’incohérence), votre thème est maintenant internationalisé! Pour traduire celui-ci dans une nouvelle langue, vous n’avez qu’à compléter la seconde étape. Pourquoi ne pas produire une copie du fichier fr_FR.po en changeant son extension pour .pot (un standard) et vider ce dernier de son contenu français pour vos futurs besoins linguistiques?

De plus, chaque conseil est bonifié par un lien à un article qui explique la recommandation en détail.

The Do’s and Don’ts of Modern Web Design une bonne resource simple et rapide à digérer autant pour les débutants que les avancés en design web.

Ce qui caractérise un gâteau Flash

Quand on pense à Flash, il y a quelques éléments qui nous viennent en tête. N’en déplaise à Adobe, en voici quelques uns dans une liste non-exhaustive :

• Le moule (l’espace rectangulaire de la page) :
  Les sites en Flash nous ont habitué à un standard de taille fixe; un carré dans le milieu de la page où l’action se déroule. Le moule Flash place le contenu dans un carré sur une page web.
• Le glaçage (les animations) :
  Je pense que le glaçage figure au palmarès des raisons pour lesquelles on réalise des sites en Flash. On veut voir de l’animation, des transitions, des fondus, du 3D même; Flash permet ce genre de glaçage.
• Une familiarité rassurante (l’adresse unique) :
  Un gâteau, c’est rassurant. Tout le monde en reçoit à chacun de ses anniversaires. Souvent le même, notre préféré ou celui que notre mère faisait le mieux. En Flash, l’URL ne change jamais même si le contenu de la page change. Ce trait rassurant pour certain est souvent vu comme une faiblesse et une incohérence : si le contenu de la page change, on souhaiterait que l’adresse change aussi.

On peut débattre sur la validité de cette liste, mais ce sont les caractéristiques que nous avons tenté de reproduire dans notre gâteau HTML. Le gros avantage du gâteau HTML c’est qu’il offre aux utilisateurs une expérience gustative intéressante, peu importe les moyens technologiques dont ils disposent.

La recette

Ingrédients

Pas besoin de prendre des ingrédients alternatifs, ceux pour le gâteau HTML moderne suffisent amplement.

• La pâte à gâteau (CMS) :
  Bien que ça n’est pas d’impact direct sur l’affichage, une bonne pâte à gâteau est indispensable afin d’avoir de la consistance en vue des étapes du glaçage et des chandelles. Le CMS (ou gestionnaire de contenu) est la partie administrative d’un site qui en facilite sa gestion.
• La poudre à pâte (AJAX) :
  Bien que ce ne soit pas une technologie en soit, mais plus un concept (comme le Web 2.0), il mérite sa place dans nos ingrédients. Le AJAX (une combinaison de JavaScript Asynchrone et de XML) permet de transmettre des données au serveur sans nécessiter un rafraîchissement de la page.

Également

Outre les instruments de base, voici des éléments essentiels à la réussite de cette recette.

• Le moule (CSS) :
  Je sais, je sais, tous les gâteaux web utilisent le CSS, ce n’est pas une raison pour le laisser tomber. Le moule CSS est flexible et permet une variété de forme de gâteau infini. Attention toutefois, le moule peut se déformer dans les vieux fours… Le CSS (ou feuille de style) permet d’attribuer des caractéristiques visuelles aux éléments HTML.
• Les chandelles (jQuery) :
  Même si mes premières amours ont été avec YUI de Yahoo! pour les gâteaux corporatifs, j’utilise maintenant jQuery : moins de chandelles, plus de lumière! jQuery est une boîte à outils rassemblant un ensemble de fonctions visuelles de base.

Préparation

Assurez vous que le mélange à gâteau soit bien homogène. Ajoutez un soupçon de poudre à pâte. Ne mélangez pas trop une fois la poudre à pâte incorporer sinon le gâteau de lèvera pas. Faire cuire. Ajoutez le glaçage et les chandelles. Voilà!

Attention de ne pas trop mettre de chandelles. Il ne faut pas déformer le gâteau ou altérer le goût du glaçage.

Qu’est-ce que vous en pensez?

Si vous n’utilisez pas de 3D ou des fonctions avancées de modifications de photos, essayez ma recette et vous verrez que les 2 gâteaux, Flash ou HTML, auront le même goût pour l’usager. Un goût authentique, bien de chez nous, que l’utilisateur ait un téléphone intelligent ou un ordinateur souffrant d’un manque de mises à jour.

Évidement on ne fait pas 2 sortes de gâteau pour le plaisir. Simplement, la prochaine fois que vous voudrez faire un gâteau Flash, n’oubliez pas que le gâteau HTML peut aussi faire l’affaire.

Si vous voulez voir un exemple d’un site qui devait initialement être en Flash, mais qui a été conçu en HTML (entre autres pour des raisons de référencement), aller voir Sublim.

Une fois le code intégré, voici le message qui apparaît lorsque le système détecte l’utilisation d’IE6 :

Peut-être que ceux qui censurent IE6 (et je fais encore partie) devraient favoriser plutôt une procédure du genre (qui n’a rien de sorcier, le secret étant derrière la fameuse condition commentée <!–[if lte IE 6]>) au lieu d’imposer le changement?

Pour implanter cette solution, copier-coller ledit code à l’endroit approprié sur votre site web. Je vous laisse soin de le traduire en français au besoin.

L’idée de ne pas avoir de navigation a primé dès le départ. Il fallait donc que toutes les sections du site apparaissent sur la première page. Après plusieurs configurations qui mettaient toujours en importance une section plus qu’une autres, c’est la configuration à quatre colonnes qui a été retenue, où tous les éléments sont aussi importants les uns que les autres.

Ces quatre colonnes peuvent rappeler les touches du clavier d’un piano et chacune d’elles reproduit une note représentée par une section du site. Ainsi, les colonnes deviennent des onglets lorsqu’on quitte la page principale.

Les mots-clés du projet étaient sobre, subtil, créatif, mélodique, moderne et dissonant. Ces adjectifs s’appliquent tous au design final.

Comme ces lettres, les sites web comportent des caractéristiques similaires. Ils présentent tous les mêmes éléments de base placés aux mêmes endroits : un logo en haut à gauche, un slogan quelque part pas trop loin du logo, un menu pour orienter les visiteurs, du contenu pour les inciter à rester et finalement, le pied de page qui n’est rien de plus que l’équivalent de la signature d’une lettre.

Il suffit de visiter n’importe quel site comme Wikipédia ou Facebook et on peut non seulement identifier tous ces éléments, mais également remarquer qu’ils sont aux mêmes endroits. Ils composent le squelette d’un site web.

Toutefois, comme un site web n’est pas un être vivant, la liberté totale est permise, mais il faut savoir l’utiliser à bon escient. Certaines situations permettent l’absence de certains éléments considérés comme essentiels. 

Craigslist, par exemple, n’est rien de plus qu’une grosse liste de villes et c’est clairement construit pour des gens qui savent pour quelles raisons ils sont là.

Certains sites vont plus loin en ne mettant presque aucun contenu. Le site de Bluebird, un nouveau client Twitter encore bêta, est un bon exemple. Au milieu de la page, on présente un œuf bleu éclos et sous l’œuf, se trouve le logo de la compagnie. Encore une fois, c’est un site fait pour les gens avertis.

Ensuite, il y a des sites comme celui de Skittles qui contiennent seulement une navigation.

Finalement, il y a des sites comme celui-ci sur lequel il n’y a presque rien. I made tea.

Chacun des sites web mentionnés ci-haut a des buts différents, mais bien précis et ils utilisent l’absence d’éléments de base pour atteindre leurs objectifs. De plus, ça rend tous ces sites mémorables. 

Visiteurs de sites web, je vous invite à remarquer tous ces éléments et leurs formes pour comprendre un site et ne pas vous perdre. 

Designers web, je vous invite à prendre conscience de l’existence de tous ces éléments et de penser a ce que leurs présence et absence peuvent ajouter ou enlever à votre travail.

En effet, l’homme responsable pour le design minimaliste caractéristique d’Apple semble éprouver un grand respect pour le designer allemand, pionnier d’une approche similaire chez Braun dans les années soixantes. La ressemblance entre certains produits de Braun et d’Apple vient corroborer cette hypothèse :

Le T3 de Braun, introduit en 1958 — Le iPod classique d’Apple, aujourd’hui

La calculatrice de Braun — L’application introduite par Apple avec l’iPhone en 2007

Le T1000 de Braun — Le Mac Pro d’Apple

D’autres exemples ont aussi été soulevés par Gizmodo.

Avant de crier au scandale, il faut d’abord s’avoir qu’il est courant de voir certains designers industriels s’inspirer de leurs prédécesseurs jusqu’à carrément recycler de vieilles idées. Dieter Rams lui-même à mentionné lors d’une entrevue que ce genre d’emprunts d’idées était à son avis la plus belle forme de flatterie qui soit.

Ces deux designers partagent une passion pour la simplicité et la convivialité que présentent leurs outils. Les concepts d’Ive respectent en tous points les 10 principes d’un bon design, tels qu’introduit par Ram lui-même à l’époque où il travaillait pour Braun :

1. Good design is innovative.
2. Good design makes a product useful.
3. Good design is aesthetic.
4. Good design helps us to understand a product.
5. Good design is unobtrusive.
6. Good design is honest.
7. Good design is durable.
8. Good design is consequent to the last detail.
9. Good design is concerned with the environment.
10. Good design is as little design as possible.

Ces règles devraient être appliquées autant que possible, non seulement en design industriel, mais sur tous design quel qui soit. Je pense qu’il serait pertinent de soumettre toute création à cette checklist avant de valider si un projet est accompli.

Et vous, quelle est votre source d’inspiration?