Chez Jérémie

Le marketing du choix des navigateurs

Jeremie — Tue, 23 Feb 2010 16:01:00 +0100

Je viens de lire l'article de Tristan Nitot sur le futur écran de choix des navigateurs qui sera prochainement accessible aux utilisateurs de Windows. Ce qui a particulièrement attiré mon attention, c'est la capture d'écran qui est affichée et qui présente les différentes accroches marketing que chaque constructeur va utiliser pour mettre en avant son navigateur. Elles sont particulièrement représentatives et je vous propose d'en faire une petite analyse rapide.

Les accroches qui seront présentées sur cet écran sont particulièrement importantes. En effet, ce sont elles qui vont principalement influer sur le choix de l'utilisateur. D'une part, elles doivent être raccord avec l'ensemble des communications du constructeur sur son produit afin que l'utilisateur qui a déjà eu connaissance d'un ou plusieurs navigateurs retrouve ses marques. D'autre part, elles doivent mettre en avant le ou les avantages concurrentiels clés de chaque navigateur pour les utilisateurs qui n'en ont jamais entendu parlé. L'objectif affiché étant de convaincre l'utilisateur de faire le choix de son navigateur en l'espace de quelques secondes !

Mozilla Firefox

Avec Firefox, surfez sur Internet en toute sécurité. Firefox est gratuit, profitez librement et pleinement du Web avec lui !

Les qualités mises en avant sont la sécurité, la gratuité et la liberté. La sécurité a toujours été un argument de vente majeur de Firefox auprès du grand public et c'est un argument qui porte. Néanmoins, c'est un argument à double tranchant qui peut se retourner contre Mozilla en cas de faille "zero day" ou d'un exploit visant particulièrement Firefox. La gratuité est elle aussi un argument fort, mais qui pose question. En effet, tous les navigateurs présentés sont gratuits (même si on peut discuter du sujet en ce qui concerne IE, du point de vue de l'utilisateur lambda, il est lui aussi gratuit), il ne s'agit donc pas d'un argument différenciant mais uniquement d'un argument opportuniste. Enfin, Mozilla met en avant les notions de liberté. C'est un argument éthique important, mais difficilement lisible hors contexte. En effet, dans quelle mesure les utilisateurs qui n'ont pas déjà fait le choix de Firefox se sentent-ils bridés ou restreints dans leur utilisation d'Internet en général et du Web en particulier ?

Sur la forme, l'accroche est rédigée en deux phrases qui reprennent deux fois le nom du produit. Cela peut s'interpréter comme une volonté de mettre en avant le produit, mais peut avoir un petit côté rabâchage et inutilement insistant. La première phrase est affirmative, soulignant particulièrement la sureté du produit et en faisant l'argument clé. La deuxième phrase est exclamative, ce qui lui donne un petit côté "cadeau bonus" et affadit légèrement les arguments mis en avant. Si cela se comprend pour la gratuité qui est un faux argument, c'est dommage pour la liberté qui est au centre de l'éthique de Mozilla. Sur ce dernier point, l'utilisation du qualificatif "pleinement" tente de redresser la barre pour redonner du poids à l'argument libertaire mais en prenant le risque de rendre le message plus compliqué à comprendre.

Ma conclusion : Même si les promesses client sont fortes, le message reste globalement flou et difficile à comprendre si l'on ne dispose pas du discours marketing complet à propos de Firefox. Malgré une volonté de toucher le grand public, cette accroche reste encore trop ciblée sur la périphérie de la communauté des utilisateurs de Firefox (certes importante) et ne portera véritablement que pour des personnes qui ont déjà entendu parlé du produit. Si la fondation Mozilla prévoit une grosse campagne de communication lors de l'arrivée de cet écran de choix, ça marchera. Sinon, l'efficacité du dispositif sera toute relative et ne devrait pas faire changer radicalement la part de marché de Firefox.

Google Chrome

Google Chrome. Un navigateur rapide, conçu pour tous.

Les qualités mises en avant sont la rapidité et l'universalité. La rapidité est effectivement l'argument majeur de vente de Chrome depuis son lancement. Au vu de la course aux performances que se livre les différents constructeurs, on peut légitimement se poser la question de savoir jusqu'à quand cet argument restera véritablement différenciant. Concernant l'universalité, il s'agit globalement d'un argument passe-partout sans réelle valeur ajoutée vis-à-vis du produit lui même mais qui s'adresse directement à l'utilisateur novice : "si c'est fait pour tous, alors moi aussi je devrais être capable de m'en servir". Néanmoins, au vu de la disruptivité de son interface, cet argument peut être discutable. Cela pourrait créer une certaine insatisfaction chez des utilisateurs habitués à IE et qui risquent d'avoir du mal à retrouver leurs habitudes.

Sur la forme le nom du produit est une phrase à lui seul (c'est une phrase nominale ), ce qui lui donne une force particulière. Il est là comme une évidence, il se suffit à lui même. Cette phrase sans verbe exclut toute notion de choix. Rapporté à la notion d'universalité qui conclut la deuxième phrase, le dispositif rédactionnel est un redoutable piège sémantique : Une évidence universelle induit le choix par sa seule force.

Ma conclusion : Les responsables marketing de Google ont su mettre en place une accroche extrêmement efficace qui annihile quasiment toute possibilité de choix. Néanmoins, l'évidence que représente Chrome se heurte à une certaine vacuité des arguments différenciant. Seul la rapidité est mise en avant. Ainsi, pour les personnes qui cherchent un navigateur rapide, l'efficacité de cette accroche sera à son paroxysme. Pour les autres utilisateurs, il faudra que les campagnes de promotions de Chrome aient réussi à porter pour que l'efficacité marketing du dispositif perdure au moment du choix. Attention également à la sur-agressivité lapidaire du positionnement marketing qui peut être contre productive au moment ou Google est chahuté sur sa supposé hégémonie sur Internet.

Apple Safari

Safari pour Windows d'Apple, le navigateur le plus novateur au monde.

La qualité mise en avant est l'innovation. On retrouve là un des arguments de vente traditionnel d'Apple qui cherche à se positionner sur de l'avant-gardisme haut de gamme. Étonnamment, c'est la seule qualité qui est vanté alors qu'Apple dispose d'autres arguments dans son discours marketing traditionnel comme la simplicité ou la convivialité.

Sur la forme, Apple tente d'être incisif en résumant en une phrase son accroche. Néanmoins, cette accroche se divise en deux parties. Une première partie qui est là pour affirmer la logique de la présence d'un produit Apple dans un environnement Windows et une deuxième partie qui, elle, s'axe clairement sur le produit et sa valeur ajoutée.

Ma conclusion : Apple se livre ici à un exercice de style difficile dans lequel il s'empêtre. D'une part, Apple est tellement lié au monde Mac qu'il se sent contraint de devoir justifier sa présence sur Windows en insistant assez lourdement et maladroitement sur le fait qu'il s'agit de Safari pour Windows réalisé par Apple. D'autre part, en perdant du temps avec cette explication, il est alors contraint à ne mettre en avant qu'un seul élément différenciant pour le produit faute de place. A bien des égards, un certain élitisme ("le plus [...] au monde") typique d'Apple transpire ici pour essayer de raccrocher son produit à la communauté des fans d'Apple... ce qui est toujours étonnant lorsqu'on s'adresse à des utilisateurs de Windows.

Microsoft Internet Explorer

Internet Explorer, conçu spécialement pour vous par Microsoft, est le navigateur le plus utilisé au monde.

Aucune qualité particulière n'est mise en avant ! En effet, Microsoft a décidé de miser sur deux cartes qui ne sont pas spécifiquement liées au produit lui-même : D'un coté la proximité avec l'utilisateur ("spécialement pour vous") et d'un autre coté l'adoption constatée du Navigateur ("le plus utilisé au monde")

Cette approche est une vaste fumisterie mais qui marche. En effet, il s'agit d'un adroit mélange de proximité avec l'utilisateur, de poids de la marque et d'éléments factuels lourds de sous-entendu : Si IE est le plus utilisé au monde c'est sans doute que c'est un excellent navigateur... après tout, il a été conçu spécialement pour vous. Alors franchement, pourquoi en changer ?

Microsoft réussit ici un tour de force digne des plus grands experts en marketing : vous vendre un produit en mettant cote à cote deux concepts radicalement opposés (l'individualisation du "pour vous" et l'adoption de masse du "le plus utilisé") qui entrent en résonance. Rien n'est dit sur une quelconque qualité du navigateur qu'il propose et pourtant, ça marche. Du strict point de vue des mécanismes de communication mis en jeu, il s'agit indubitablement de la meilleure accroche parmi les cinq qui sont vues ici.

Grosso modo, Apple et Microsoft se sont appuyés sur les mêmes mécanismes, mais ça ne pouvait marcher qu'avec Microsoft car ce type d'approche ne fonctionnera que parce que l'utilisateur adhère déjà aux produits de Microsoft (après tout, il utilise déjà Windows). A la différence des autres constructeurs, Microsoft est dans une logique de défense, cherchant à convaincre des utilisateurs déjà rompus à l'usage d'Internet Explorer de rester dans son giron.

Opera Browser

Le navigateur Web puissant et convivial. Essayez le seul navigateur doté de la technologie Turbo et boostez votre connexion Internet.

Les qualités mises en avant sont la puissance, la convivialité et la vitesse.

Sur la forme, Opera décompose son accroche en deux phrases. La première est générique et présente un argument différenciant fort : l'alliance de la puissance et de la convivialité. Le deuxième phrase, plus "commerciale", présente un sous-produit spécifique à Opera : la technologie Turbo. De manière assez troublante, Opera est le seul constructeur à ne pas mentionner le nom de son produit dans son accroche.

Ma conclusion : Cette accroche est sans doute la plus complexe à décrypter. En effet, d'un côté, elle se veut fortement différenciante avec des qualités fortes clairement mises en avant. D'un autre côté, la promotion d'une technologie spécifique ayant une influence sur la "connexion Internet" est difficile à comprendre. En effet, ce dernier point repositionne Opera vers les utilisateurs de connexion plus ou moins lentes. Quand on voit le taux de pénétration de l'ADSL en France, on peut se poser la question d'un tel positionnement sur les environnements de bureau. Ce positionnement prenant la part la plus importante du message, le bénéfice des deux premières qualités est fortement affadit et n'est plus convaincant. En outre, il est surprenant de voir le discours de prudence d'Opera ici qui encourage à essayer au lieu de convaincre à une adoption inconditionnelle. Cela aussi tend à faire baisser la force de l'accroche. Enfin, le fait de ne pas mentionner le nom de son navigateur est risqué. Certes, cela peut se comprendre dans la mesure où Opera n'a pas une marque forte ou un nom de produit emblématique à mettre en avant, mais dans ce contexte cela peut être gênant, l'utilisateur pouvant être amené à se demander de quoi on lui parle. Or, dans un contexte de prise de décision rapide (quelques secondes tout au plus) la moindre question superflue peut amener l'utilisateur à se rabattre sur un autre produit.

Et finalement, cela nous donne... ?

Chacune de ces accroches reflète assez bien les positions connues des différents constructeurs :

Microsoft défend ses positions ;
Google est extrêmement agressif et cherche à se positionner sur un marché de masse ;
Mozilla se positionne sur un mélange de préoccupations quotidiennes allié à des questions éthiques ;
Apple et Opera se positionnent sur leurs marchés de niche traditionnels sans vraiment chercher à élargir ceux-ci.

A bien des égards, on sent le professionnalisme des équipes marketing de Microsoft et Google qui savent parfaitement user des ficelles de la communication pour se positionner efficacement. Mozilla joue les challengers mais on sent encore le manque de maturité de la fondation sur les questions de marketing traditionnel. Enfin, Apple et Opera ne sont ici que pour "occuper le terrain" et ne semblent pas chercher une vraie confrontation sur le terrain des navigateurs de bureau, tous les deux se concentrant sur le marché du mobile.

En dernière analyse, mon pronostic est que c'est Chrome qui devrait le mieux s'en sortir ici.

Et vous, qu'est-ce que vous en pensez ?

La propriété CSS display: inline-block

Jeremie — Thu, 28 Jan 2010 14:00:00 +0100

La propriété CSS display reste sous-employée par les intégrateurs web. Ce n'est pas entièrement leur faute, les implémentations dans les navigateurs n'étant pas entièrement à la hauteur de la norme. Je reviens ici sur la valeur inline-block de cette propriété qui est désormais implémenté dans tous les navigateurs du marché et qui peut facilement nous aider à sortir de la sur-utilisation de la propriété float.

La propriété display permet d'indiquer explicitement le mode de rendu d'un élément HTML. Les valeurs les plus connues sont none, block et inline. Pourtant il y en a beaucoup d'autres et en particulier la valeur inline-block

`Block` et `inline`, les basiques

Chacune de ces valeurs va avoir une incidence sur la façon de rendre les éléments HTML ciblés. Malheureusement, les normes HTML 4.01 et CSS 2.1 sont assez floues sur ce que sont des éléments de type block ou inline et les futures normes HTML 5 et CSS 3 sont à peines plus loquaces sur le sujet. Pour mieux comprendre ce que sont ces types de rendu, je vous propose une caractérisation de ceux-ci selon mon expérience (c'est totalement empirique, et si vous pensez que j'ai omis des choses, n'hésitez pas à le signaler).

Les caractéristiques d'un élément de type `block` :

Les éléments de type block peuvent contenir à la fois d'autres éléments de type block, des éléments de type inline ou du texte¹.
Il est possible de fixer une largeur et une hauteur à ces éléments
Par défaut, la largeur d'un élément de type block est aussi grande que celle de son conteneur
Ils s'empilent naturellement les uns au-dessus des autres, dans l'ordre du flux HTML (Dans un flux de texte, ils passent à la ligne et forcent le retour à la ligne des éléments qui les suivent, les caractères invisibles présents avant et après sont ignorés)

Les caractéristiques d'un élément de type `inline` :

Les éléments de type inline ne peuvent contenir que d'autres éléments de type inline ou du texte
Il n'est pas possible de définir une largeur et une hauteur explicite pour ces éléments
Par défaut, leur largeur et leur hauteur dépendent du contenue de l'élément
Ils s'écoulent selon le flux du texte HTML

inline-block, un mélange des deux !

Avec cette valeur de la propriété display, vous allez avoir des éléments qui vont se comporter à la fois comme s'ils étaient de type block et de type inline. Concrètement, ça va donner les caractéristiques suivantes :

Les éléments de type inline-block peuvent contenir à la fois d'autres éléments de type block, des éléments de type inline ou du texte.
Il est possible de fixer une largeur est une hauteur à ces éléments
Par défaut, leurs largeurs et leurs hauteurs dépendent du contenu de l'élément
Ils s'écoulent selon le flux du texte HTML

Cela va avoir quelques conséquences :

La hauteur d'un élément de type inline-block va contrarier la hauteur des lignes de texte (même si vous l'avez fixée avec la propriété line-height) et donc potentiellement compromettre le rythme vertical de votre design.
Vous pouvez influer sur le positionnement de l'élément sur la ligne de base typographique en utilisant la propriété vertical-align.
Si une partie du contenu de l'élément doit passer à la ligne, c'est tout l'élément qui passera à la ligne

Implémentation de cette valeur dans les navigateurs

Le plus important à retenir, c'est que tous les navigateurs du marché implémentent la valeur inline-block pour la propriété display.

Attention tout de même à sont utilisation dans IE6 et IE7. En effet, l'implémentation de cette valeur est buggée sur ces deux navigateurs et ils ne supportent celle-ci que pour les éléments HTML qui sont nativement considérés de type inline par ces navigateurs. Cela à peu d'incidence pour peu qu'on y prenne garde. De toute façon, IE6 va bien finir par disparaitre et IE7 va rapidement être remplacé par IE8. D'ailleurs, IE8 est déjà le navigateur dominant de la gamme IE sur le marché des particuliers, il est donc plus que temps d'utiliser cette valeur de la propriété display.

Cas d'utilisations

Menu de navigation

L'usage de la propriété display:inline-block peut résoudre bon nombre des difficultés liées à l'usage de la propriété float. Néanmoins, il faut rester prudent.

Ce premier exemple reprend un balisage classique de menu sur une base de liste non-ordonnée. Cela fonctionne bien mais à deux conditions qui disqualifient presque l'usage de la valeur inline-block ici. Premièrement, dans la mesure où la balise LI est considérée nativement comme étant de type block, IE6 et IE7 ne géreront pas correctement l'usage de display. En outre, si vous voulez pouvoir contrôler l'espacement entre les onglets, vous devez accoler les balises LI dans le code HTML. En effet, les balises étant déclarées comme inline-block, elles vont suivre le flux de texte HTML ce qui veux dire que les espaces entre les balises sont affichés.

Ce deuxième exemple utilise un balisage plus simple (une succession de balises A) et utilise les spécificités qu'offre inline-block : centrage horizontal et vertical et utilisation des espaces typographiques. De fait, cette approche fonctionne parfaitement dans IE6 et IE7.

Nuage de tags

L'utilisation de inline-block sur un nuage de tags offre un monde de possibilités. Le fait de pouvoir donner explicitement une hauteur et une largeur ou de pouvoir spécifier des marges explicites aux éléments ouvre d'énormes portes aux graphistes. L'avantage le plus immédiat est d'éviter que des tags en plusieurs mots soient coupés par un retour à la ligne impromptu.

Titraille dépendante du contenu

Ce dernier exemple montre comment cette valeur permet de gagner en subtilité sur la gestion graphique des titres en permettant de créer simplement des effets liés à la taille du contenu plutôt qu'à la taille du contenant.

Aller plus loin

La propriété display a bien d'autres valeurs : certaines sont peu ou pas implémentées (la valeur compact), certaines sont partiellement implémentées et particulièrement difficiles à comprendre (la valeur run-in) et certaines sont largement implémentées mais peu ou pas utilisées (les valeurs table-* qui mériteraient un article à elles-seules... peut-être un jour si j'ai le temps ).

Pour en savoir plus sur le sujet, je vous renvoie vers ma bible du support des propriétés CSS : le site quirksmode.org et plus spécifiquement, sa section dédié à la propriété display.
Pour savoir comment contourner les limites des vieux navigateurs, je vous recommande l'excellent article de Florent Verschelde : Inline-block dans tous les navigateurs modernes ?
Pour une vue d'ensemble de la propriété display, il y a cette excellent tutoriel chez Alsacréations : Mise en page CSS avancée grace à la propriété display
En anglais : Robert Nyman, CSS display: inline-block: why it rocks, and why it sucks

Attention, il s'agit de la définition générale (selon la norme CSS) de ce qu'est un élément de type block. Cela ne remet pas en cause les spécificités propres à HTML comme par exemple la balise P qui selon la norme HTML 4.01/ XHTML 1.0 est bien de type block mais ne peut pas contenir d'autres éléments de type block.

"Empowered" ta face !

Jeremie — Wed, 06 Jan 2010 20:00:00 +0100

Je viens de découvrir et de lire d'une traite le tome 1 de Empowered de Adam Warren. La version française est sortie cet été chez les éditions Bragelonne (sous le label Milady) et franchement... ça tue (oui, je suis légèrement enthousiaste là)!

Empowered est un ovni dans le mondes des Comics. Originalement publié par Dark Horse Comics au Etats-Unis, plutôt connu pour ses publications indépendantes à tendance sombre (Sin City et 300 de Franck Miller, HellBoy de Mike Mignola, etc.), ça ressemble à une blague. Ce sont de courtes histoires (3 à 10 pages maximum) qui racontent les déboires d'une super héroïne un peu nunuche et franchement pas douée. A première vue, ce n'est que prétexte pour dessiner une jolie blonde moulée dans une combinaison en latex qui se déchire au moindre prétexte et qui se retrouve en permanence attachée et bâillonnée façon bondage par le premier super vilain venu ! Certes, de ce point de vu là, on est pas déçus

Mais ce n'est pas seulement ça. Au fil des histoires, les personnages s'étoffent, et pour peu qu'on fasse l'effort d'une lecture au second degrés, on s'aperçoit que ce Comics est une satire de l'univers des super héros et du genre Comics en lui même, se moquant de la toute puissance des super héros et de la bêtise supposé des super vilain.

Graphiquement, le parti pris de publier la série sous forme de crayonnés aboutis change de l'encrage très léché et de la mise en couleur numérique traditionnel du genre. Mais la plus grosse transgression vient du genre narratif. Adam Warren ayant beaucoup travaillé sur l'adaptation de Mangas aux USA, il reprend leurs codes pour les mettre à la sauce Comics. Un vraie choc des cultures ou on se retrouve finalement à lire un Manga dessiné comme un Comics... ou l'inverse ! De quoi crier au scandale pour les aficionados de l'un ou l'autre genre.

A la fois drôle, intelligents, érotique, iconoclaste, beau, acide... c'est un mélange des genres extrêmement bien réussie, comme je les aimes. Vivement la sortis des autres tomes en français (5 tomes aux US au moment ou j'écris ces lignes)

Paris Web 2009 is on my mind

Jeremie — Thu, 10 Dec 2009 23:09:00 +0100

Paris Web 2009 s'est tenu les 8, 9 et 10 Octobre derniers. Pour tout ceux qui n'ont pas pu venir ou pour ceux qui n'ont pas pu assister à toutes les conférences (c'est à dire tout le monde puisqu'il y avait à chaque fois deux conférences simultanées), les vidéos sont en ligne sur DailyMotion. Enjoy Si vous voulez faire du rattrapage, il y a aussi les vidéos de l'édition 2008.

Les thèmes abordés sont extrêmement variés, de l'ultra technique au marketing pure, en conséquence je ne me risquerai pas à vous faire une recommandation de ce qu'il faut absolument voir. Je vais juste me contenter d'un peu d'auto-promo (ah ben oui hein)

Lors de cette édition, les organisateurs m'ont gentiment laisser discourir (merci à tout le staff qui à fait un travail de titan : bravo à vous). J'ai choisi d'aborder le sujet du Webdesign orienté business en essayant de montrer en quoi les contraintes des entreprises et des webdesigners peuvent êtres complémentaire et se nourrir les unes des autres. Voila le résultat :

Le Webdesign orienté business - Jeremie Patonnier

Ubuntu, 6 mois plus tard !

Jeremie — Fri, 20 Nov 2009 20:00:00 +0100

Il y a 6 mois, j'abandonnais Windows pour migrer sous Ubuntu non sans un certain enthousiasme. Je profite du décès de mon ordinateur de l'époque (4 ans de bons et loyaux services... RIP. J'ai cassé ma tirelire, son successeur est une bête de course de malade accompagné d'un petit satellite trop kawaï !) et de la sortie de Karmic Koala pour faire un petit état des lieux de cette nouvelle vie.

Le bon

C'est robuste

Ce qui est bien avec les distribution Linux quel qu'elles soient, c'est que c'est stable. Ça ne plante jamais et quand par hasard, un logiciel plante, il n'entraine pas le système dans sa chute... même pas l'ombre d'une vague instabilité. Un Linux, ça se redémarre tous les 36 du mois ! Bon en plus, il faut bien reconnaitre que de ce point de vue là, Canonical fait bien la police. Ubuntu est un tout cohérent, testé et éprouvé. Certaines mauvaises langues pourraient me trouver un brin trop enthousiaste, mais les fait sont là : 6 mois d'utilisation et pas un seul problème à l'usage.

En plus de la robustesse, la consommation mémoire du système après démarrage est ridicule (il faut bien avouer que de ce point de vue, l'absence d'anti-virus ça aide) ce qui fait qu'on est immédiatement productif une fois le système démarré. C'est d'autant plus appréciable que j'ai tendance à utiliser des applications lourdes ou demandeuses de ressources systèmes (Eclipse + Firefox avec beaucoup d'onglet ouvert + Lecteurs multimédia)

C'est fiable

Une très bonne choses avec Ubuntu (et Linux en général) c'est la gestion des utilisateurs. Vous pouvez installer toutes les saloperies du monde, il n'y a aucun chance que vous cassiez votre système par erreur. En effet, à chaque fois que vous faite quelque chose qui pourrait avoir un impact négatif sur votre machine, on vous demande systématiquement le mot de passe d'administration. Libre à vous de faire l'opération, mais au moins, vous le faîte toujours en connaissance de cause.

C'est tout de même sacrément agréable de savoir que vous pouvez utiliser votre ordinateur sans avoir l'angoisse de faire une erreur qui va mettre votre ordinateur en vrac. Idem pour ce qui touche au problème de Virus, l'exposition de Linux à ce type de menace étant ridicule en comparaison de Windows, vous avez un poids de moins sur vos épaules.

La sérénité à cout 0, moi je dit oui :D

C'est personnalisable

La grande force (et le grand défaut, attention, teaser, voir ci-après) des systèmes Linux, c'est la liberté de personnalisation laissé à l'utilisateur. Transformer vos petites taches routinières en script automatique est d'une simplicité déroutante... déroutante parce que ça marche et surtout ça marche sans problèmes ! Bien sur, vous pouvez faire cela à l'aide de script bash que vous aurez bricolés vous même mais même sans en arriver là, il est possible de trouver une floppé d'interface graphique pour vous aider sur tout et n'importe quoi.

En outre, la communauté Ubuntu francophone et franchement agréable. Documentation, forum, mailing-liste, "Install Party"... même si comme moi vous êtes un gros noob, on ne vous jette pas de cailloux, au contraire. Pour une entrée en douceur dans le monde Linux, c'est plutôt agréable et sa casse cette image de système pour hyper spécialiste. Mention spécial à la documentation du site Ubuntu-fr.org qui m'a plusieurs fois sortie de la panade lors de mes installations logiciel.

et le moins bon !

Jusque là, c'est que du bonheurs ! Ceci dit, il y a quand même deux gros points noirs qui m'agacent un petit peu.

Les gouts et les couleurs...

Autant le dire tout de suite, Ubuntu c'est moche mais ce n'est pas spécifique à Ubuntu (même si le choix orange, marron sale n'arrange rien). Ce que j'ai pu voir des autres distributions me permet de dire assez sereinement que les bureaux Linux (Gnome ou KDE) sont laids. J'aime pas, j'aime pas, j'aime pas. Ça manque de finesse, ça fait gros patapouf. Les choix typographique sont nuls, les formes sont grossières, les effets manques de subtilité. De ce point de vue là, on est très, très loin de ce qu'offre Windows 7 et Mac OS X. En termes de coolitude du look & feel : Windows 7 c'est cool ; Mac c'est cool ; Linux c'est naze !

D'aucun me diront que si je veux avoir un bureau comme Windows ou Mac, je peux. Effectivement Gnome est hautement customizable de ce point de vue là. Sauf que je n'ai pas envie de passer du temps là dessus. Si je fais le choix d'un système d'exploitation, ce n'est pas pour passer des mois à le personnaliser, mais pour faire tourner les logiciels dont j'ai besoin. L'OS, je ne le fais pas, je le consomme ! D'autant plus qu'après avoir hanté différents sites proposant des éléments pour personnaliser Gnome, je suis extrêmement déçu. Tout ce qui est proposé manque sérieusement de professionnalisme : soit le boulot est à moitié fait, soit ça ne répond qu'à des besoins très particuliers. Bref dans la quasi totalité des cas, il faut faire tout le boulot de finissions si on veut avoir un truc vaguement correcte.

Cette état de fait est d'autant plus étonnant que Linux dispose de tous les éléments techniques pour pouvoir être totalement à la pointe sur les interfaces de bureau (les premiers bureaux à supporter l'accélération 3D c'était sous Linux quand même... et le support natif de SVG par Gnome c'est énorme ça). A mon avis, on atteint là les limites du modèle de développement collaboratif. La création d'interfaces utilisateurs nouvelles ou disruptives ne peut pas être réalisée de manière collégiale. Il faut de véritables personnalités créatives pour proposer et mettre en œuvre des concepts forts. Mais tout le monde ne peut pas être Steve Jobs ! Il faut aussi avoir un certain courage, comme ce qu'à fait Mozilla quand deux illuminés (David Hyatt et Black Ross) ont décidés de trancher dans le vif de la suite Mozilla pour arriver à la simplicité (et à la réussite grand public) de Firefox.

Pour que Linux entre vraiment de plein pied sur le marché du grand public, il faut que cette dimension qui relève de la communication, du marketing et de l'adhésion à un produit soit mieux appréhendée par les assembleurs de distribution. L'interface utilisateur, ce n'est pas (que) une fonctionnalité, c'est (aussi) du ressenti. Canonical, Mandriva et les autres, vous avez toutes les cartes en main... yapluka !

L'enfer de l'installation logiciel

Assez paradoxalement, c'est très compliqué d'installer des logiciels sous Linux. Paradoxal car les utilisateurs de Linux sont les premiers à avoir popularisé la notion de dépôts de logicielles. En utilisant un dépôt, vous pouvez quasiment installer un logiciel en un clique sans avoir à vous soucier de rien. Dans la réalité, c'est en fait un peu plus compliqué que ça. Déjà, il faut faire le trie entre les dépôts officiels de la distribution que vous utilisez et les autres. En suite, il faut faire le trie entre les dépôts stable et instable. Quand vous êtes un utilisateur lambda, déjà là vous trouvez que c'est bien compliqué tout ça juste pour installer la dernière version de VLC (par exemple, c'est du vécu, vois ci-après).

En général, le problème des dépôts, c'est que vous n'y trouvez pas la dernière version du logiciel qui vous intéresse.Il y a toujours un écart, ce qui est plutôt normal puisqu'il faut le temps de mettre les dépôts à jours, ce qui est rarement immédiat. Pire ! Dans le cas des dépôts de Canonical, les applications accessibles dépendent de la version de votre OS... et comment je fais pour passer "officiellement" de Firefox 3.0 à Firefox 3.5 en ayant Ubuntu 9.04 ? Et ben tu te démerdes mon pépère. Personnellement, à un moment j'en ai eu ma claque des dépôts jamais à jours (ou qui ne proposent que des versions trop instables pour être exploitables) et j'ai décidé de reprendre mes vieilles habitudes issus de Windows : Aller sur le site de l'éditeur télécharger directement la dernière version... et la c'est le drame !

Les trois cas de figures suivant sont du vécus et montre bien la difficulté des installations logiciels sous Linux... ou non.

VLC
La version officielle par Canonical de VLC pour Ubuntu 9.04 est la version 9.x.y (j'ai plus le numéro de version exact sous la main là). La version 1.0 étant sortis cet été, je décide de migrer vers cette version. Sur le site officiel de VLC, il n'existe pas de version compilé de VLC 1.0 pour Ubuntu 9.04. On y parle d'une version possible via un dépôt PPA... je n'ai jamais rien compris aux dépôts PPA, et franchement, je n'ai même pas envie de savoir. Même pas un paquet DEB générique. Après de longue minutes de lecture fastidieuse, je repart dégouté sans mon logiciel : Ubuntu FAIL !

La même chose sous Windows : J'arrive sur le site, je télécharge l'installeur, je l'exécute... terminé mon logiciel est installé : Windows WIN !
Firefox
La version officielle par Canonical de Firefox pour Ubuntu 9.04 est la version 3.0.x. Firefox 3.5 étant aussi sortie cet été, je décide aussi de migrer. Cette fois, pas de problème sur le site de Mozilla, directement le lien de téléchargement... d'une archive Tar. Bon ok. Au moins, c'est compilé, c'est déjà ça. Sauf que cette fois, c'est l'installation qui est un cauchemars car il faut tout configurer à la main (surtout si vous voulez garder la structure arborescente des fichiers de profils proposée par Ubuntu). Heureusement, j'ai eu de la chance sur les dépendances des bibliothèques tiers (je n'ai pas eu à m'en soucier) et je n'ai mis qu'une petite heure pour finaliser mon installation en pestant beaucoup contre l'univers en général et Linux en particulier : Ubuntu FAIL !

La même chose sous Windows : J'arrive sur le site, je télécharge l'installeur, je l'exécute... terminé mon logiciel est installé : Windows WIN !
World of Goo
Pas de version officielle par Canonical. Il s'agit d'un jeu commercial "closed source" mais disponible en version Linux. J'arrive sur le site de l'éditeur, je paye mon logiciel, j'accède à la zone de téléchargement, je sélectionne le paquet DEB. Une fois le téléchargement terminé, je lance l'installation du paquet... terminé, mon jeu est installé : Linux WIN (et Windows idem)

Résultat des courses, Windows gagne 3 - 1 contre Linux sur l'installation logiciel. Je ne vais donc pas y aller par 4 chemins : je me fiche (presque) comme de l'an 40 qu'un logiciels soit ouvert ou fermer, gratuit ou payant ! Je veux juste ne pas avoir à me faire chier pour installer la dernière version de mes logiciels préférés et je suis près à payer pour ça. De ce point de vue, Linux est un énorme ratage (malgré une offre logiciel qui elle est énorme !). Je salut avec ferveur l'arrivé du "Software Center" sur Ubuntu 9.10, j'espère juste que Canonical fournira des logiciels à jours au moment ou ceux-ci sortiront, peu importe la version de Ubuntu que j'utilise.

Conclusion

Malgré les deux réserves que j'ai émis, je suis enchanté par Ubuntu et je n'envisage pas de changer de système (même si en ce moment je regarde ce qui se fait du coté de la distribution Linux Mint qui n'est jamais qu'un repackaging d'Ubuntu). Par contre, je ne me vois pas recommander Ubuntu (ou n'importe qu'elle autre distribution Linux de ma connaissance) à mes parents. En effet, même si Canonical fait des efforts conséquents pour rendre Linux accessible au grand public, on est bien loin d'un OS réellement convivial pour les gens qui se fichent totalement de ce qui ce passe sous le capot. De ce point de vue là, Apple et Microsoft ont plusieurs longueurs d'avance. Linux reste un OS d'ingénieurs fait pour des ingénieurs. Il manque une certaine "magie" nécessaire pour les non-initiés... le monde du libre cherche encore son Steve Jobs et malgré ses efforts, Mark Shuttleworth, et loin d'avoir sa stature et son charisme (mais peut être son ambition ).

Le modèle de boite flexible en CSS 3

Jeremie — Tue, 10 Nov 2009 12:13:00 +0100

La future norme CSS3 introduits plusieurs façons différentes d'appréhender la mise en page d'un document web. Il y a quelques temps, je vous ai parlé du module "Template Layout". Cette fois je vais vous présenter le module "Flexible Box Layout" qui est sans doute le plus prometteur de tous, d'autant plus qu'il commence déjà à être implémenté (non, pas dans IE, arrêtez de rêver !)

Un modèle de boite flexible

CSS3 introduit donc un nouveau modèle de boite en plus du modèle de boite traditionnel issu de CSS 1 et 2. Un modèle de boite flexible permet de déterminer la façon dont des boites sont distribuées au sein d'autres boites (horizontalement ou verticalement) et comment elles se répartissent l'espace disponible entre elles.

Pour ceux qui connaissent, ce modèle de boite est utilisé par XUL (le langage de définition d'interface des produits Mozilla). Des mécanismes similaires sont utilisés par de nombreux autres langages de description d'interface comme XAML ou GladeXML.

Pour résumer de manière un peu simpliste, le modèle de boite flexible est exactement ce qu'il vous faut si vous voulez réaliser des designs liquides (qui s'adaptent automatiquement à la taille de la fenêtre du navigateur) ou élastiques (qui s'adaptent à la taille de la police typographique de l'utilisateur)

Pour la suite de l'article, tous mes exemples se baseront sur le code HTML suivant :

<body>
    <div id="boite1">1</div>
    <div id="boite2">2</div>
    <div id="boite3">3</div>
</body>

Distribuer des boites, kézaco ?

Par défaut, le modèle de boite CSS traditionnel distribue les boites verticalement, les unes au dessous des autres selon l'ordre du flux HTML. Dans le cadre du modèle de boite flexible, on peut spécifier cela explicitement et même inverser l'ordre d'affichage des boites. Le passage au modèle de boite flexible se fait de manière explicite en utilisant la propriété display avec la valeur box (ou inline-box) sur une boite qui en contient d'autres.

Distribution horizontale ou verticale

La propriété box-orient permet de spécifier l'axe de distribution. Cette propriété prend plusieurs valeurs, mais les plus simple à comprendre sont vertical et horizontal. Les autres valeurs (inline-axis et block-axis) ont les mêmes effets, mais permettent en plus de jouer sur la ligne de base de l'alignement (les boites sont alors considérées comme des boites "en ligne").

body{
    display : box;
    box-orient : horizontal;
}

Distribution inversée

La propriété box-direction permet de spécifier l'ordre de disposition des boites. En effet, une fois que vous avez spécifier votre axe de distribution, les boites se disposent selon l'ordre du flux HTML, de haut en bas dans le cadre d'une distribution verticale et de gauche à droite dans le cas d'une distribution horizontale. En utilisant la valeur reverse, vous pouvez inverser l'ordre de disposition des boites par rapport à leur apparition dans le flux HTML. J'ignore ce que cela donnera au point de vue accessibilité, cependant dans la mesure ou ces déclarations sont explicites quand à l'ordre du flux à suivre (contrairement à ce qui se fait avec les techniques du modèle de boites CSS traditionnel), les navigateurs qui implémentent déjà ce modèle de boites arrivent sans trop de difficultés à gérer les mécanismes d'accessibilité de base (l'ordre des tabulations par exemple).

Méfiez-vous de cette propriété car elle influe sur le comportement d'autres propriétés et peut donc donner lieu à des résultats contre intuitif.

body{
    display : box;
    box-orient : vertical;
    box-direction : reverse;
}

Distribution explicite

La propriété box-ordinal-group permet de définir explicitement l'ordre de distribution des boites. Là on obtient l'ultime degrés de la personnalisation en pouvant définir soit même l'ordre de distribution des boites, quelque soit l'ordre des boites dans le flux HTML. Ces groupes sont définie par un nombre commençant à 1 (la valeur par défaut). Le modèle de boite va donc commencer par distribuer ces groupes puis ensuite les boites au seins d'un même groupe. La distribution se fait du plus petit (le groupe 1) au plus grand (le groupe 2). Il y a un petit flou dans la spécification (en tout cas je n'ai pas su la décrypter avec certitude) sur l'influence exacte de box-direction vis à vis du positionnement des groupes, donc attention si vous mélanger l'usage de box-ordinal-group et box-direction.

body{
    display : box;
    box-orient : vertical;
}

#boite1{
    box-ordinal-group : 2;
}

#boite2{
    box-ordinal-group : 2;
}

#boite3{
    box-ordinal-group : 1;
}

Et la flexibilité dans tout ça ?

Si déjà, pouvoir influer sur l'ordre du flux HTML est énorme, là ou ça devient vraiment fun c'est quand on commence à gérer l'espace disponible.

La taille des boites

Par défaut une boite n'est pas flexible. Elle n'est flexible que si elle à la propriété box-flex avec une valeur supérieur ou égal à 1.

Si une boite n'est pas flexible, elle prendra le maximum de place possible afin que sont contenu soit affiché sans débord (overflow). Ce maximum pouvant être fixé avec les propriétés width et height (ou leur version min-* et max-*).

Si une boite est déclarée flexible, sa taille va être calculée en fonction de 2 critères :

Les déclaration de taille explicites (width, height, min-* et max-*)
La taille du conteneur et l'espace restant.

De cette manière, si aucune des boites n'a de déclaration de taille explicite, elle auront toute une taille proportionnel à celle du conteneur. Cela se fera sur le principe suivant , la taille d'une boite est égale à la taille du conteneur multipliée par la valeur de la propriété box-flex de la boite divisée par la somme des valeurs des propriétés box-flex de toutes les boites incluse dans le conteneur.

Par contre, si une ou plusieurs boites ont une taille explicitement définie, la taille de toutes ses boites est cumulé et les boites flexibles se répartissent l'espace restant sur le principe précédent.

Ça à l'aire un peu compliqué comme ça, mais vous allez voir, avec quelques exemple, on comprend mieux.

Toutes les boites sont flexibles

Dans l'exemple ci-dessous, la boite 1 est deux fois plus grande que la boite 2 et la boite 2 à la même taille que la boite 3. Ça ressemble beaucoup à ce que l'on aurait obtenu si on avait utilisé des boites avec des largeurs exprimées en pourcentage. Il y a néanmoins une différence fondamental. Si vous rajoutez une boite, vous n'avez pas besoin de recalculer le pourcentage correspondant de chaque boite. Avec le modèle de boite flexible, à chaque fois que vous allez rajouter une boite, toute les autres se feront plus petites pour laisser de la place à la nouvelle sans intervention de votre part.

body{
    display : box;
    box-orient : horizontal;
}

#boite1{
    box-flex : 2;
}

#boite2{
    box-flex : 1;
}

#boite3{
    box-flex : 1;
}

Certaines boites ont une taille prédéfinie

Dans l'exemple ci-après, la boite 3, qui n'est pas flexible, fera 160px de large et il restera 240 px d'espace libre à distribuer entre la boite 1 et la boite 2, ce qui donnera une largeur de 160px pour la boite 1 (240px x 2/3) et 80px pour la boite 2 (240px x 1/3). Rien ne vous empêche de faire en sorte que la boite 3 soit également flexible. Dans ce cas, le comportement sur la taille de cette boite ressemble à l'application de la propriété CSS min-width.

body{
    display : box;
    box-orient : horizontal;
    width : 400px;
}

#boite1{
    box-flex : 2;
}

#boite2{
    box-flex : 1;
}

#boite3{
    width : 160px;
}

La gestion du débord

Dans la mesure, ou l'on peut mélanger des boites flexibles, des boites rigides et des boites flexibles avec des tailles prédéfinies, on peut se retrouver avec des boites dont la taille cumulé est supérieur ou inférieur à la taille de la boite qui les contient. Donc soit on a trop d'espace, soit on en a pas assez !

Il y a trop d'espace, qu'est-ce que j'en fait ?

L'espace surnuméraire va se répartir en suivant les règles imposées par les propriétés box-align et box-pack.

La propriété box-pack va gérer la répartition horizontal de l'espace et peut prendre 4 valeurs : start, end, justify et center :

start : les boites sont positionné à gauche et tout l'espace restant est positionné à droite ;
end : les boites sont positionné à droite et tout l'espace restant est positionné à gauche ;
justify : l'espace se répartis de manière équitable entre les boites ;
center : l'espace se répartis de manière équitable aux extrémités du conteneur.

La propriété box-align va gérer la répartition vertical de l'espace et peut prendre 5 valeurs : start, end, center, baseline et stretch :

start : Les boites s'alignent sur le bord haut du conteneur et l'espace restant est placé en dessous des boites ;
end : Les boites s'alignent sur le bord bas du conteneur et l'espace restant est placé au dessus des boites ;
center : les lignes médiane des boites s'alignent sur la ligne médiane du conteneur et l'espace restant se répartie équitablement au dessus et au dessous des boites ;
baseline : le bord bas des boites s'alignent sur la ligne de base typographique du conteneur (c'est une interprétation simplifié de la spécification, mais ça donne une idée du comportement)
stretch : Les boites sont étiré pour combler l'espace restant.

Attention à l'interprétation de ces deux propriétés. Elles sont fortement influencé par l'usage des propriétés box-orient et box-direction et peuvent donner lieu à des comportements contre-intuitifs (les comportements des valeur start et end peuvent être complètement inversés par exemple). J'espère que d'ici à la version final de la spécification, on aura plus d'éclaircissement (et d'exemple) sur ces interactions entre propriétés.

body{
    display : box;
    box-orient : horizontal;

    /* Le contenu de body est centré horizontalement */
    box-pack : center;
    /* et verticalement ... \o/ */
    box-align : center;

    width : 100%;
    height : 100%;
}

Il n'y a pas assez d'espace, comment est gérer le débord ?

Comme dans le modèle de boite traditionnel, c'est la propriété overflow qui permet de spécifier le mode de débord des éléments surnuméraire, pas de surprise à ce niveau là.

Néanmoins, là aussi il faut faire attention. En effet, l'usage des propriété box-orient et box-direction peut avoir des effets surprenant comme le fait de voir les élément déborder à droite plutôt qu'à gauche ou en haut plutôt qu'en bas. Prenez le temps d'expérimenter ça tranquillement avant de vous arracher les cheveux sur une mise en page complexe.

Enfin, cerise sur le gâteau, il est possible d'éviter un débord en privilégiant un affichage sur plusieurs lignes (ou colonnes en fonction de l'orientation) grâce à la propriété box-lines : multiple.

Et sinon, ça marche dans la vraie vie ?

Oui, Gecko et Webkit implémente tous les deux une version expérimental de ce modèle de boite (les propriétés sont respectivement préfixées par -moz- et par -webkit- et leur comportement n'est pas garanti). Ce qui signifie que Firefox, Safari, Chrome et les autres navigateurs utilisant ces moteurs de rendu sont capables de s'en servir (à priori depuis un certain temps déjà, Firefox 3.0 et Safari 3 supportant déjà cette fonctionnalité). Si vous avez le bon gout d'utiliser un de ces navigateurs moderne, voici une petite démo en ligne du modèle de boite flexible.

Pour les autres, voila comment devrait s'afficher l'exemple précédent :

Conclusion

Si vous n'avez que faire de Internet Explorer, vous pouvez d'ors et déjà commencer à utiliser cette méthode pour gérer vos mises en page. Attention tout de même. Il s'agit de la première itération d'un "Working Draft" du W3C. Il va donc nécessairement y avoir des changements. Ceci dit, les implémentation de Gecko et de Webkit sont extrêmement cohérente et aboutis donc, si changement il y a, ils ne devraient pas être trop important.

Ce modèle de boite permet de résoudre simplement des problèmes assez récurrent de web design (gestion des formulaires, placement des pieds de page, centrage vertical, dissociation du flux rendu et du flux HTML, etc.). Je vous encourage vivement à vous familiariser avec car il pourrait bien faire partie de notre quotidien de Webdesigner assez rapidement (si Microsoft décide de l'implémenter, ça peut arriver très vite).

Les implémentations disponibles sont déjà suffisamment complètes pour faire beaucoup de choses. Néanmoins, la collision entre le modèle de boite traditionnel et le modèle de boite flexible n'est pas encore très claire (par exemple, impossible d'utiliser la propriété position : relative avec une propriété left ou top sur un élément ayant la propriété box-ordinal-group). Cela va s'affiner, mais ne vous étonnez pas si vos réflexes habituels sont un peu mis à mal. Autre point un peu délicat, l'interaction entre les différentes propriétés spécifiques à ce modèle de boite peuvent parfois donner lieux à des résultats franchement déroutant. Ça vous rappellera sans doute l'époque ou vous avez découvert les boites flottantes

A lire également sur le sujet

Shawn J. Goff : CSS3 Flexible Box Layout Module
CSS3.info : Introducing the flexible box layout module
W3C : Flexible Box Layout Module

Rendre une application AJAX bookmarquable

Jeremie — Thu, 22 Oct 2009 11:39:00 +0200

Parmi les reproches communément adressés aux applications AJAX on retrouve un grief assez récurrent : l'impossibilité d'utiliser les favoris. Dans cet article, je vais vous expliquer comment gérer les favoris (en anglais "bookmarks" d'où l'horrible néologisme du titre) avec une application utilisant AJAX. C'est beaucoup plus simple qu'il n'y paraît.

Beaucoup d'architecture

Avant même de penser à coder, il va falloir commencer par se poser un certain nombre de questions de nature architecturales. En effet, l'utilisation d'AJAX "pervertit" l'usage normal que l'on peut avoir d'un navigateur. Traditionnellement, un navigateur charge des documents (on parle aussi de ressources) identifiés par leur URL via le protocole HTTP le plus souvent. Le navigateur permet de passer d'un document à l'autre (via des liens hypertexte) ou éventuellement de modifier le document (via des formulaires) et d'en charger l'intégralité de la version modifiée. AJAX distord ce fonctionnement. Avec cette technique, le navigateur charge un seul document et va en modifier certaines parties en fonction des actions de l'utilisateur.

Entre ces deux approches, les mécanismes techniques mis en œuvre sont fondamentalement les mêmes, mais c'est leur mise à disposition à destination de l'utilisateur qui diffère. D'un côté, l'utilisateur accède à N documents et de l'autre, il accède à un seul document qui se modifie en permanence. C'est sur ce dernier point que réside la difficulté liée aux favoris : ce que l'on met en favoris, c'est l'URL d'une ressource !

La notion de contexte

HTTP se caractérise par une absence de contexte. C'est cette spécificité qui permet de mettre en favori n'importe quelle URL. En effet, sur cette base, une URL pointera en théorie toujours sur le document que l'on a vu. Le problème si vous mettez en favori une application AJAX, c'est que vous ne mettrez en favori que l'état initial du document, et pas l'état dans lequel se trouve votre document au moment où vous enregistrez votre favori.

Donc, comme on le voit, AJAX créée un document avec un contexte : l'état dans lequel il est à un instant T. Et ça, les navigateurs web ne savent pas le gérer nativement.

Une application AJAX a donc deux problèmes à résoudre :

L'application doit disposer d'un mécanisme permettant de définir le contexte courant du document et l'exploiter le cas échéant.
Les navigateurs ne savent mettre en favoris que des URLs

Cela signifie donc que pour rendre un application AJAX bookmarquable, le contexte du document doit être stocké dans l'URL. Or, comment modifier une URL sans recharger le document (ce qui ferait perdre tout le bénéfice d'AJAX) ?

La structure d'une URL

La structure des URLs va nous aider à voir où l'on peut stocker des paramètres de contexte. De manière simplifiée, une URL est structurée comme suit :

Le protocole : En général HTTP dès que l'on est dans un cadre Web.
Le domaine : Il est de la forme sous-domaine.domaine.extension. Il permet d'identifier la machine à qui on va demander le document qui nous intéresse.
L'emplacement du document : Il est de la forme /dossier/sous-dossier/fichier
Les paramètre de requête : Ils sont de la forme ?paramètre1=valeur1&paramètreN=valeurN. Ces paramètres peuvent influer sur la nature profonde d'un document ou sur son contenu.
Une éventuelle ancre nommée : Elle est de la forme #mon-ancre. Elle a pour vocation de cibler un élément identifié dans le document et, le cas échéant de positionner cette partie du document dans la zone visible de la fenêtre du navigateur.

Assez instinctivement, on serait tenté de positionner nos informations de contexte en tant que paramètre de requête. Effectivement, si on met en favori une URL avec des paramètres permettant de connaitre le contexte, on aura bien l'effet attendu. Malheureusement, si vous modifiez les paramètres de requête de l'URL, un navigateur va envoyer une requête HTTP et recharger la page, ce qui va à l'encontre de ce que l'on veut puisqu'on est en AJAX.

La gestion des URL par les navigateurs

De manière générale, toute modification de l'URL du navigateur conduit le navigateur à lancer une requête HTTP afin d'obtenir la dernière version du document correspondant. C'est aussi vrai pour les paramètres de requête. Après tout, si on modifie les paramètres, il faut bien que celle-ci soit relancée afin que le serveur puisse fournir le document correspondant.

Il y a néanmoins une exception à cette règle : la modification de l'ancre nommée.En effet, pour le navigateur, l'ancre nommée représente un élément présent dans le document courant et qu'il faut atteindre. En conséquence, on ne change pas de ressource (contrairement à une modification des paramètres de requête), mais on cherche à atteindre un point de la ressource courante il n'est donc pas nécessaire de lancer une nouvelle requête HTTP, au contraire, ce serait contre productif.

Alléluia, c'est donc là que se situe le salut du développeur d'application AJAX : utiliser l'ancre nommée pour stocker le contexte de son application dans l'URL.

Oui mais...

Il y a contexte et contexte. On pourrait philosopher pendant des heures et des heures sur ce détournement des ancres nommées dans un contexte AJAX. D'un point de vue extrêmement prosaïque, c'est la seule solution qui marche si on veut pouvoir utiliser les favoris du navigateur. Par contre, ce n'est pas parce que ça marche qu'il faut faire tout et n'importe quoi. Placer l'intégralité d'un contexte applicatif à cet endroit n'est pas pertinent et potentiellement dangereux pour votre application : un utilisateur peut modifier cet élément de lui-même, on ne peut donc pas lui faire confiance. Ainsi, si vous placez un ensemble de variables en clair à cet endroit, vous vous exposez à des risques d'attaque de votre application. Il existe des tas de façons de stocker les données du contexte applicatif, que ce soit localement (les mécanismes "Session Storage" ou "Local Storage" de HTML 5 ou leur succédané des divers frameworks Javascript) ou sur un serveur distant (beaucoup plus sûr architecturalement parlant, mais plus problématique pour gérer la notion de "offline"). N'utilisez les ancres nommées que pour stocker un identifiant du contexte applicatif. Vous en retirerez des avantages pour vous et pour vos utilisateurs :

Pour vous : vous pouvez renforcer facilement la sécurité de vos applications tout en pouvant enrichir votre contexte applicatif sans changer vos mécanismes de gestion des URL.
Pour votre utilisateur : son URL reste lisible (voire compréhensible si vous gérez bien vos identifiants de contexte) et relativement légère sans exposer ses données.

Un peu de code

Maintenant que nous avons vu les bases théoriques, comment mettre ça concrètement en œuvre ?

window.location est mon ami

Vous faites de l'AJAX, donc vous faites du Javascript, et si vous faites du Javascript, vous avez accès à l'objet window.location. Cet objet vous donne accès à l'URL courante du navigateur et vous permet de la modifier.

Lire l'URL courante : var URL = window.location.href

Lire l'ancre nommée (elle commencera par le caractère #) : var ANCRE = window.location.hash

Modifier l'ancre nommé :

/* Récupération du contexte actuel */
var AncreOLD = window.location.hash;

/* Récupération de l'URL courante */
var URL = window.location.href;

/* On supprime l'ancienne ancre de l'URL */
URL = URL.substring(0, URL.length - AncreOLD.length);

/* On créée une nouvelle ancre */
var AncreNEW = Math.round(Math.random()*1000);

/* On met à jour l'URL dans la barre d'adresse du navigateur */
window.location.replace(URL + '#' + AncreNEW);

Le petit script ci-avant vous montre les étapes clés de la modification de l'URL du navigateur. A vous de l'adapter à votre propre contexte applicatif, mais basiquement, tout est là.

Et voila !

Oui, oui, ce n'est pas plus compliqué que ça. Avec ce que vous avez vu là, vous êtes capable de rendre vos applications AJAX bookmarquable. Ceci dit, maintenant, il vous reste à faire le plus compliqué : gérer votre contexte au niveau applicatif. Sur ce point, chaque application a ses spécificités et ses besoins. N'hésitez pas à aller voir ce qu'ont fait d'autres développeurs à ce sujet. La première chose à regarder c'est ce qu'offrent les framework Javascript pour gérer cela nativement. Ensuite, si vous en avez le courage, vous pouvez aller voir ce que font des gens comme Google (Gmail, Reader et Wave sont extrêmement instructifs à cet égard... mais c'est horriblement touffu !).

Un gros merci au deux bisounours d'amour que sont Virginie et Stéphane pour le sauvetage orthographique de ce billet

La préséance des sélecteurs CSS

Jeremie — Wed, 26 Aug 2009 20:00:00 +0200

Comment savoir quelle règle CSS va s'appliquer à un éléments, en particulier quand deux règles entre en conflit ? Pour déterminer cela, les sélecteurs CSS on un poids et une priorité qui va permettre aux navigateurs de calculer la préséance des règles à appliquer. Voyons un peu comment ça ce passe.

Avant de se plonger des les arcanes de la méthode de calculs, revenons à quelques petites considérations pratiques, bien utiles dans la vie quotidienne du développeur web :

Plus vous ciblez précisément l'élément à styliser, plus il y a de chance que ce soit ce style qui s'applique à cet élément.
Firebug est votre ami : lorsque vous sélectionnez un élément dans la vue HTML de Firebug, celui-ci vous montre les styles CSS qui s'y appliquent par ordre d'importance.

Voila pour la vraie vie, maintenant voyons comment ça marche de manière un peu plus savante.

Pour les anglophone puriste, sachez que tout est décris dans la norme CSS 2.1, à cet endroit là très précisément : http://www.w3.org/TR/CSS2/cascade.html#specificity Je vais essayer de vous en faire une retranscription humainement compréhensible.

Priorité et poids !

En CSS, certains sélecteurs sont considérés comme plus prioritaire que d'autre. Concrètement, peu importe le nombre de sélecteurs, certain passerons avant les autres et détermineront donc la règle qui va s'appliquer. La priorité des sélecteurs CSS est la suivante (du plus important au moins important) :

Une déclaration de style "en ligne" (dans le code HTML avec l'attribut style) est toujours prioritaire sur tout le reste (c'est tout de même un cas un peu particulier, j'y reviendrai plus loin)
Le sélecteur d'identifiant #
Les sélecteurs faisant référence à des attributs d'éléments HTML (sélecteurs de classe . et d'attribut []) et les pseudo classes
Le nom des éléments (p, div, strong, etc.) et les pseudo éléments

Si vous êtes attentif, vous aurez remarqué que je n'ai pas parlé des sélecteurs d'enfant, de frère ou de parent ni du sélecteur générique *, c'est normal, ils ne comptent pour rien. Ils n'ont aucune priorité et ils n'ont aucun poids... bref, il ne permettent pas de déterminer une quelconque priorité d'application des règles CSS.

Ainsi, si pour un même élément vous avez une règle de sélection qui utilise le sélecteur #, et une autre qui utilise 50 sélecteurs de classe, c'est la règle avec le sélecteur # qui s'appliquera d'abord. Par exemple, imaginons le cas suivant :

<p id="content" class="alert">Ceci est un message important que je veux afficher en rouge !</p>

Si vous utilisez les règles ci-après, le texte apparaitra en vert (la règle #content est prioritaire sur la règle .alert) :

#content{
    color : #0C0;
}

.alert{
    color : #900;
}

Par contre, avec les règles de sélection suivantes, le texte du paragraphe apparaitra bien en rouge (la règle .alert est prioritaire sur la règle p) :

p{
    color : #0C0;
}

.alert{
    color : #900;
}

C'est seulement quand vous avez des sélecteurs de même priorité dans votre règle de sélection qu'il va falloir calculer le poids de cette règle de sélection. Pour faire simple, c'est la règles qui à le plus de sélecteur de la plus haute priorité qui s'applique.

Une notation pour comprendre

Pour matérialiser cette double notion de priorité (préséance absolue) et de poids (préséance par le nombre), le W3C propose une notation à 4 nombres : "a, b, c, d" ou a représente le nombre de sélecteurs de la plus haute priorité (la déclaration de style en ligne) et d le nombre de sélecteurs de la plus basse priorité (les noms d'élément et les pseudo éléments).

En utilisant cette notation, on peut donc immédiatement voir quel est le style qui va s'appliquer à un élément. Par exemple, si on reprend notre exemple précédent, voila ce que ça donnera :

0, 1, 0, 0 : #content {...}
0, 0, 1, 0 : .alert {...}
0, 0, 0, 1 : p {...}

Vous me direz que sur un exemple aussi simple, c'est s'embêter pour rien. Je ne vous contredirais pas. Mais ça prend du sens quand on commence à avoir des règles un peu plus complexe comme celles-ci :

0,1,0,1 : p#content {...}
0,1,0,0 : #content {...}
0,0,2,1 : p:not(:last-child()) {...}
0,0,1,2 : h1 + p.alert {...} Notez que le sélecteur + n'est ni compté ni comptable
0,0,1,1 : p[id="content"] {...} Notez que la sélection d'ID par ce biais est moins prioritaire qu'avec le sélecteur #
0,0,1,0 : .alert {...}
0,0,0,2 : body > p {...} Notez que le sélecteur > n'est ni compté ni comptable
0,0,0,1 : p {...}

Et la cascade dans tout ça ?

Ben oui, CSS ça veut dire : "Cascading Style Sheets", autrement dit "feuilles de style en cascade". Si je vous ai bien seriné avec la méthode de calcul de la préséance des règles de style, il faut savoir que celle-ci s'inscrit dans le cadre plus général de la "cascade" qui est définie comme suit :

On vérifie que des règles sont applicables au type de média concerné (vérification de la porté de la règle @media)
On définie un premier niveau de préséance en fonction de l'origine de la règle :
1. Les feuilles de style de l'utilisateur avec la règle !important sont toujours appliqués prioritairement sur tout le reste
2. Les feuilles de style de l'auteur avec la règle !important viennent en suite.
3. Les feuilles de style de l'auteur sans la règle !important
4. Les feuilles de style de l'utilisateur sans la règle !important
5. Les style définie par défaut par le navigateur quand rien d'autre ne s'est appliqué
On calcul la préséance des règles au sein de chaque origine comme vu ci-dessus
Si enfin, pour une même origine donnée, deux règles ont la même préséance, c'est la dernière déclarée (la plus basse dans le code source) qui s'applique.

Dans la plus part des cas, en temps que webdesigner, vous vous situerez quasiment exclusivement dans le cas d'un calcul de préséance sur une feuille de style auteur et vous vous soucierez finalement assez peu de la cascade, mais c'est toujours bon de s'en souvenir, surtout quand un client viens vous dire "oui-mais-ça-marche-pas-chez-moi".

Un petit exemple pour bien comprendre le rôle de la cascade. Si vous définissez la règle #content (préséance 0,1,0,0) dans votre feuille de style auteur et que l'utilisateur définie dans sa propre feuille de style la règle p (préséance 0,0,0,1), c'est bien votre style qui va s'appliquer. Néanmoins, si l'utilisateur rajoute le mot clé !important dans sa règle p, alors ces celle-ci qui s'appliquera, même si la préséance propre à votre règle est plus élevé. La cascade prend le pas sur la préséance.

Un petit mot sur les styles en ligne

L'utilisation de l'attribut HTML style est très problématique. Au delà des questions de séparation fond/forme et de la maintenabilité du code HTML, cet attribut est compliqué à gérer. En effet, si vous relisez ce que j'ai écrit sur la cascade, ou se situe cet attribut en terme d'origine pour déterminer sa préséance ? Je n'ai rien trouvé ni dans la norme CSS ni dans la norme HTML qui détermine explicitement cette origine. Néanmoins, quelques test confirme l'intuition que l'on pourrait avoir, les styles en ligne appartiennent à la 3ème origine : "les feuilles de style de l'auteur sans la règle !important".

Cela veux dire qu'il est possible de surcharger un style en ligne en faisant usage de la règle !important. Ceci étant, je vous encourage vivement à éviter ce genre de recours "de la dernière chance" car cela rendra votre code vraiment très difficile à maintenir.

Voila, avec toute ses informations, vous ne devriez pas avoir de problèmes à comprendre pourquoi vos styles ne sont pas pris en compte alors que vous êtes pourtant sur d'avoir tout bien fait comme il faut... parfois, juste en comptant un peu, on s'en sort

Un peu de lecture ailleurs

La communauté Dotclear se structure

Jeremie — Sat, 15 Aug 2009 16:13:00 +0200

J'utilise Dotclear depuis plusieurs mois maintenant, et je constate qu'au delà de la qualité du produit, il est soutenu par une communauté active et efficasse.

Si Olivier Meunier a su créer un moteur de blog particulièrement bon et efficace, la pérennité d'un projet open-source dépend grandement de la communauté qui s'investit dans le projet (parallèlement, la pérennité d'un projet close-source dépend de la robustesse de l'entreprise qui le gère).

Conscient de cela, Olivier a laissé son produit à la communauté et cela commence à devenir intéressant.

Deux sites de références

La communauté des utilisateurs de Dotclear s'est rassemblée autour de deux principaux sites Internet ;

http://fr.dotclear.org/
C'est le site de référence, là ou on peut télécharger Dotclear, trouver la documentation officielle (sous forme d'un Wiki) et trouver du support (sous forme d'un forum)
http://dotaddict.org/
Complément du site précédent, celui-ci est le point de centralisation des ressources tiers pour Dotclear : les thèmes et les plugins

Fédérer les développeurs

Ces deux sites sont un bon point de départ, mais ce n'est pas encore suffisant. Ainsi, avant son "départ" du projet (Il a laissé le lead du projet à ses comparses), Olivier à mis en œuvre le Dotclear Lab : http://lab.dotclear.org

L'idée sous-jacente est de fédérer un sous-ensemble de la communauté Dotclear : les développeurs. Par ce biais, tous ceux qui veulent contribuer à Dotclear, que ce soit en participant au cœur du moteur ou en développant des plugins ou des thème, trouvent de l'aide et des outils (Dépot SVN, Bug traker, liste de diffusion, etc.) pour faire grandir le projet.

Structurer les ressources

Vous trouvez que c'est déjà bien structuré tout ça ? Et bien la nouvelle équipe en charge du lead du projet a décidé de franchir une étape supplémentaire. Afin de rendre le projet définitivement pérenne, ils ont décidé de donner une structure juridique au projet en réunissant les participants au sein d'une association.

Cette nouvelle étape du projet lui donne une nouvelle dimension. En effet, en remettant le projet Dotclear aux mains d'une personne morale, ils structurent la gouvernance du projet et garantissent que les moyens nécessaires au projet ne seront pas tributaire d'une personne physique. En claire, cela donne au projet les moyens de garantir le financement des infrastructures nécessaires au projet (serveurs SVN, hébergements des sites web, etc), celles-ci ne reposant plus sur les moyens d'une seule personne, mais sur ceux de la communauté.

Cela donne également une voie "officielle" au projet, lui permettant de fédérer plus facilement les actions de promotion et de communication autour du projet à destination d'acteurs plus institutionnels (et donc potentiellement fournisseurs de moyens financiers et/ou techniques).

Est-ce qu'il manque encore quelque chose ?

Désormais, tout le monde peut contribuer au projet, que ce soit en utilisant simplement Dotclear, en contribuant au code ou via une contribution financière.

De mon point de vue, il ne manque plus qu'une seul chose au projet Dotclear pour que celui-ci rentre dans la cours des grands projets open-source : de la communication et de la visibilité. En effet, si Dotclear est un bon produit, il manque encore de publicité et de marketing pour lui donner l'essor qu'il mérite.

Bravo à toute l'équipe et bonne continuation à Dotclear.

L'art de la Ratatouille

Jeremie — Tue, 04 Aug 2009 23:16:00 +0200

La Ratatouille est un plat provençal à base de légumes. Trop souvent, les cuisiniers en herbes se contantent d'empiler les légumes dans un fait-tout ce qui se solde généralement par une bouillie insipide. Halte au massacre. L'amateurisme va à l'encontre du noble art de la Ratatouille.

Pour préparer une bonne Ratatouille (notez le R majuscule à Ratatouille), il vous faut avant toute chose un assortiment de légumes provençal : courgettes, aubergines, tomates, poivrons (je les préfère rouges) et oignons. Si vous aimez ça, vous pouvez aussi prévoir quelques gousses d'ail.

Le principal secret de ce plat réside dans une double cuissons des légumes : une première cuisson individuelle, puis une cuisson commune.

La première cuisson

Cette cuisson est là pour donner de la couleur et du corps aux légumes. Après la préparation de chacun des légumes, réservez-les dans le fait-tout qui servira à les cuire ensemble.

Les oignons

Épluchez et hachez vos oignons en fines tranches. Faite les fondre à la poêle à feu doux avec un filet d'huile d'olive jusqu'à ce qu'ils deviennent souples et légèrement dorés.

Les courgettes

Coupez les en gros dés d'environ 1,5 cm de côté. Faites les revenir très rapidement à la poêle avec un peu d'huile d'olive sur un feu très vif pour les dorer sans les cuire à cœur.

Les aubergines

Faites de grosse lamelles d'environ 1cm d'épaisseur pour environ 2 cm de large et 4 à 6 cm de long. Faites les légèrement griller à sec à la poêle.

Les tomates

Pelez, épépinez et coupez les tomates en gros quartiers. Pour les peler facilement, ébouillantez les pendant 30 secondes à 1 minute puis plongez les immédiatement dans un bain d'eau glacée (pensez à utiliser de la vaisselle en inox pour ça, la vaisselle en verre supporte mal ce genre d'exercice). La peau se décoléra alors toute seule.

Les poivrons

Pelez les poivrons, épépinez-les et coupez-les en lamelles. Pour les peler, vous pouvez utiliser la même technique que pour les tomates. Néanmoins, vous pouvez aussi leur donner un petit goût fumé en les "brulant". Cela consiste à bruler la peau en posant le poivron sur une plaque très chaude ou en le passant à la salamandre.

L'ail

Séparez les gousses d'ail de la tête, mais laissez leur leur peau. Passez les gousses d'ail un petit quart d'heure au four a 180. Elles ne doivent surtout pas brunir.

La deuxième cuisson

C'est cette cuissons qui va donner son moelleux au plat et révéler les saveurs.

L'assaisonnement

Normalement, là, tous vos légumes sont dans votre fait-tout. Ajoutez-y thym et romarin à votre goût, du gros sel, une pointe de couteau de piment de Cayenne et si vous le souhaitez, quelques olives noires dénoyautées. Utilisez les olives avec parcimonie car leur goût est très prononcé, et il ne doit pas écraser le goût subtil des légumes.

La cuisson

Mélangez le tout, couvrez et laissez compoter 1 heure à feu très doux sans mélanger. Surveillez bien que ça n'accroche pas. Le temps de cuisson ici n'est pas une science exacte. Goutez régulièrement, à l'instant ou les courgette perdent leur croquant, stoppez la cuisson car sinon, vous aurez une compote de légumes provençal, mais pas une Ratatouille.

Le piège à éviter : l'amertume

La Ratatouille est un plat qui peut facilement devenir amer si l'on y prend pas garde voici quelques conseils pour éviter cet écueil :

Utiliser des légumes frais.
Si vous utilisez des légumes qui ont un peu trainé au fond de votre frigo, pelez les, la peau des légumes et souvent la première partie à concentrer l'amertume.
Si vous ne pelez pas vos légumes (ce que je recommande pour une saveur plus riche) lavez-les à grande eau.
Ne laissez pas vos légumes s'oxyder.
C'est particulièrement vraie pour les courgettes et les aubergines. Cuisez-les immédiatement après les avoir coupés.
Si vous mettez du romarin ne mettez que les feuilles. Le bois de romarin est très concentré en tanins, qu'il vaut mieux éviter dans un plat aux saveurs aussi délicatement équilibrées.
Faite attention aux olives.
Rajouter des olives dans la ratatouille lui donne de la profondeur, mais les olives sont naturellement très amères. Il vous en faut donc de première qualité, sans aucune amertume et en mettre très peu, presque comme s'il s'agissait d'un condiment.
Ne faite pas bruler l'ail.
Il n'y a rien de plus amer que l'ail brulé, fait-y extrêmement attention !

Service et accompagnement

Si votre Ratatouille fait partie de votre plat principal, servez là chaude aussi tôt la cuisson terminée.

Une bonne ratatouille peu également se servir glacée (3 à 6°C au sortir du frigo). Elle fait alors une excellente entrée pour un déjeuné d'été ou un encas idéal avec une tranche de caillette froide et de grandes tartines de pain de blanc.

Viande

Comme viande d'accompagnement, orientez vous plutôt vers une viande blanche. Les viandes rouges peuvent avoir des saveurs trop marquées qui risque de masquer un peu le goût de la Ratatouille. Un rôti de porc ou un filet mignon sont idéals.

Poisson

Si vous préférez le poisson, orientez vous vers des poissons blanc aux saveurs subtiles comme le cabillot ou les filet de rouget. Évitez par contre les poissons au goût trop marqué comme les sardines, le maquereau ou le saumon.

Végétarien

Enfin, la Ratatouille peut faire un excellent plat végétarien en l'accompagnant d'un riz basmati pour lui donner du corps et en la saupoudrant d'un peu de levure pour garantir un apport protéiné.

Bonne dégustation

Chez Jérémie

Le marketing du choix des navigateurs

Mozilla Firefox

Google Chrome

Apple Safari

Microsoft Internet Explorer

Opera Browser

Et finalement, cela nous donne... ?

La propriété CSS display: inline-block

Block et inline, les basiques

Les caractéristiques d'un élément de type block :

Les caractéristiques d'un élément de type inline :

inline-block, un mélange des deux !

Implémentation de cette valeur dans les navigateurs

Cas d'utilisations

Menu de navigation

Nuage de tags

Titraille dépendante du contenu

Aller plus loin

"Empowered" ta face !

Paris Web 2009 is on my mind

Ubuntu, 6 mois plus tard !

Le bon

C'est robuste

C'est fiable

C'est personnalisable

et le moins bon !

Les gouts et les couleurs...

L'enfer de l'installation logiciel

Conclusion

Le modèle de boite flexible en CSS 3

Un modèle de boite flexible

Distribuer des boites, kézaco ?

Distribution horizontale ou verticale

Distribution inversée

Distribution explicite

Et la flexibilité dans tout ça ?

La taille des boites

Toutes les boites sont flexibles

Certaines boites ont une taille prédéfinie

La gestion du débord

Il y a trop d'espace, qu'est-ce que j'en fait ?

Il n'y a pas assez d'espace, comment est gérer le débord ?

Et sinon, ça marche dans la vraie vie ?

Conclusion

A lire également sur le sujet

Rendre une application AJAX bookmarquable

Beaucoup d'architecture

La notion de contexte

La structure d'une URL

La gestion des URL par les navigateurs

Oui mais...

Un peu de code

window.location est mon ami

Et voila !

La préséance des sélecteurs CSS

Priorité et poids !

Une notation pour comprendre

Et la cascade dans tout ça ?

Un petit mot sur les styles en ligne

Un peu de lecture ailleurs

La communauté Dotclear se structure

Deux sites de références

Fédérer les développeurs

Structurer les ressources

Est-ce qu'il manque encore quelque chose ?

L'art de la Ratatouille

La première cuisson

Les oignons

Les courgettes

Les aubergines

Les tomates

Les poivrons

L'ail

La deuxième cuisson

L'assaisonnement

La cuisson

Le piège à éviter : l'amertume

Service et accompagnement

Viande

`Block` et `inline`, les basiques

Les caractéristiques d'un élément de type `block` :

Les caractéristiques d'un élément de type `inline` :