HTeuMeuLeu

Vous savez pourquoi c’est toujours propre chez un référenceur ?
Parce qu’il a passé la SERP hier.

Histoire de détendre un peu l’atmosphère, j’ai décidé d’ouvrir une galerie d’images drôles pour les intégrateurs. Si vous me suivez assidûment sur Twitter, vous aurez sans doute déjà tout vu. Sinon, c’est l’occasion de rigoler un coup avec une sélection personnelle d’images liées à l’intégration ou au développement web amassées un peu partout sur le net. Je viendrais compléter cette galerie au fil du temps, mais n’hésitez pas à me contacter (par Twitter ou par mail) si vous avez des suggestions. Enjoy !

Il y a deux semaines, Julien de Marie&Julien relançait le débat sur l’intégration au pixel près, et se demandait pourquoi les sites web ne s’affichait pas pareil partout, avec toute l’arrogance et la suffisance qu’un graphiste peut avoir quand il parle du travail réalisé sur ses précieuses maquettes. A travers son article bien rédigé et bien construit, il prétend qu’à la fameuse question « Est-ce que les sites web doivent être identiques sur tous les navigateurs ? », la réponse devrait être oui. Forcément, en tant qu’intégrateur, ça me donne envie de vomir, et voici donc une tentative de réponse. Lire la suite de « Le Pixel Perfect »

Profitant du MIX11, Microsoft a annoncé et rendu disponible une première version d’Internet Explorer 10 en « Platform Preview ». Au programme, pleins de trucs chouettes en HTML5 et CSS3 (Grid Layout, dégradés, transitions, transformations 3D, etc…). Mais surtout, dans son annonce, Microsoft en profite pour lâcher un bon gros troll.

La seule expérience native du Web et d’HTML5 aujourd’hui est sur Windows 7 avec IE9.
Microsoft, maître dans l’art du troll depuis 1975

Les interfaces graphiques sont pour les vraies personnes, et la seule autre interface qui compte ce sont les API, pour les développeurs. Parler de « vraies personnes » comme ça me rappelle le film Reservoir Dogs, après la scène du braquage de la banque, où Mr Pink et Mr White se retrouvent dans un garage, et racontent comment ils se sont échappés. Et Mr Pink demande :
« – Et toi, t’as tué du monde ?
– Juste des flics.
– Pas de vraies personnes ?
– Non, juste des flics. »
Soyons honnêtes, les développeurs ne sont pas des vraies personnes, quand on parle d’interfaces graphiques.
John Gruber, The Gap Theory of UI Design (à 4’30 »)

Tellement vrai.

J’adore CSS3. Chaque jour, j’en découvre un peu plus, et chaque jour, je suis surpris par de nouvelles utilisations intelligentes et un peu détournées des propriétés. Je suis retombé récemment sur cet article expliquant comment simuler un effet de flou gaussien sur du texte. Avant de passer aux explications, regardez un peu ce que ça donne appliqué sur cette page.

Voir une démo du flou en CSS3

Je suis sympa, vous pouvez recliquer sur le même lien pour désactiver le flou. Maintenant, pour arriver à ça, il vous suffit tout simplement dans votre CSS de mettre la couleur de vos textes en transparent, et d’appliquer une ombre sur le texte à l’aide de la propriété text-shadow. Pour appliquer cet effet à toutes vos balises <p>, vous pouvez ainsi écrire le code suivant.

p
{
color:transparent;
text-shadow:0 0 5px #333;
}

Vous pouvez régler les 4 valeurs de la propriété text-shadow selon vos besoins. Elles correspondent dans l’ordre à la position horizontale de l’ombre, la position verticale de l’ombre, la taille/floutage de l’ombre, et la couleur de l’ombre.

Comme d’habitude, cette propriété n’est supportée par aucune version d’Internet Explorer (même pas IE9, non non). Vous pouvez donc ajouter les lignes suivantes.

filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)";

En bonus, vous pouvez créer une transition CSS3 pour donner un effet de flou progressif pour les navigateurs WebKit et Firefox 4 en ajoutant les déclarations suivantes dans votre règle CSS de floutage.

-webkit-transition: all 2s ease-in;
-moz-transition: all 2s ease-in;

TA-DAM ! A vous la gloire avec ce magnifique effet de flou. Pour un exemple d’utilisation concret, l’auteur initial de cet effet proposait un exemple de floutage du texte derrière une lightbox. Ou sinon vous pouvez activer l’effet de flou sur cette page, et essayer de rédiger un commentaire sans faire de fautes.

La dernière information du jour concerne les ventes de la Motorola Xoom. Hier, nous vous indiquions que les analystes étaient pessimistes. Seulement, même lorsque des entreprises sortent des chiffres excellents, le marché en attend toujours plus. C’est pourquoi cette information était à prendre avec des pincettes. Mais aujourd’hui la Deutsche Bank estime qu’il n’y aurait eu que 100 000 tablettes vendues depuis la fin février. Une réaction serait de s’alarmer, mais après tout, est-ce vraiment utile ?

FrAndroid, La motorola Xoom ne se serait vendue qu’à 100 000 exemplaires. Et alors ?

Les plus grands analystes et blogueurs high-tech avaient prédis qu‘Apple vendrait entre 1 et 9 millions d’iPad la première année. Apple en a vendu 14 millions. L’iPad 2 s’est vendu à 1 million d’exemplaires en un week-end. Si je travaillais chez Motorola, j’aurais toutes les raisons de m’alarmer.

Le marché des tablettes n’est pas celui des téléphones. Si quelqu’un veut prendre Apple à son propre jeu, il va déjà falloir commencer par proposer une tablette moins cher. La Xoom coûte 599€. L’iPad 2 (32 Go) coûte 591€ (et Apple liquide ses iPad 1 pour 491€). Pourquoi un consommateur lambda irais payer plus cher une tablette autre que l’iPad qui bénéficie d’une publicité incroyable ?

Vous en avez marre de ces applications qui vous empêchent de regarder tranquillement de la pub ? Heureusement, Apple a pensé à vous et sort l’application iAd Gallery pour iPhone et iPad pour visionner les meilleures pubs réalisées pour iAd, la régie d’annonces publicitaires d’Apple. L’application n’est disponible que pour les US. Car pour rappel, les publicités iAd ne sont disponibles que pour les annonceurs Américains, avec un budget minimum de 500 000$.

Apparemment, je ne suis pas le seul à trouver que Microsoft joue sur des clichés un peu douteux pour faire la promo d’IE9. Asa Dotzler, responsable de Firefox chez Mozilla, pointe du doigt ce t-shirt distribué par Microsoft pour la sortie d’IE9 il y a quelques semaines.

Pour Microsoft, en 2011, l’illustration de « rapide » c’est une fusée. OK. Pour Microsoft, en 2011, la représentation de « beau », c’est une stripteaseuse. Euh. Les mecs. Peut-être plutôt une fleur ? Un paysage ? Non ?

Forcément, comme on est sur Internet, ce pauvre Asa s’est fait insulté de tous les noms par des internautes fanboys/pervers/misogynes. Heureusement, un de ses collègues de chez Mozilla, Jono, est venu à son secours dans un article en anglais intitulé « Comment osez-vous critiquer une publicité évidemment sexiste ?« . Extrait :

Tous ces mecs débarquent de nulle part dans les commentaires pour défendre agressivement le t-shirt, nient qu’il y a un problème, et reprochent à Asa d’être « politiquement correct » ou « trop sensible ». Beaucoup sont extrêmement violents à propos de ça. Ils ont ce comportement du genre « Comment osez vous montrer ça du doigt ». Ils sont presque profondément blessés que Asa choisisse de critiquer un visuel utilisé à des fins marketing.

E-XA-CTE-MENT les réactions que j’ai reçues sur mon article sur la sortie d’IE9.

Dans la continuité de son annonce de vendredi visant à améliorer la performance de ses add-ons, Mozilla a publié une page avec les 50 add-ons qui ralentissent le plus le démarrage de Firefox.

Voilà une démarche très très hypocrite de la part de Mozilla, après avoir vanté pendant des années la grandeur de sa communauté et mis en avant ces mêmes add-ons. Je n’imagine même pas le scandale que ça provoquerait si Google ou Apple diffusait une liste des pires applications mobiles sur leurs plate-formes respectives.

Il est difficile de faire comprendre quelque chose à quelqu’un, quand son salaire dépend du fait qu’il ne le comprenne pas.

Upton Sinclair, écrivain et politique Américain (1935)

J’ai lu cette citation il y a quelques semaines sur l’excellent Daring Fireball. Ca m’a rappelé pourquoi il peut être difficile d’expliquer à un développeur Flash que Flash est train de mourir, ou à un développeur Android qu’Android est loin d’être une plate-forme ouverte.

Vendredi dernier (le 1er avril), Mozilla a très sérieusement posté un article présentant sa volonté d’améliorer les performances des add-ons développés par la communauté.

En moyenne, chaque add-on que vous installez ajoute environ 10% de temps de chargement au lancement de Firefox. Pour certains utilisateurs, ce ne sont que quelques millisecondes, et pour d’autres ça peut être une demi seconde; tout dépends du matériel et logiciels de chacun. Beaucoup d’add-ons ajoutent moins de 10%, mais malheureusement, il y a quelques add-ons qui ajoutent plus. Mais basé sur nos données de performance, installer 10 add-ons doublera le temps de démarrage de Firefox.

J’ai compté, j’ai 7 add-ons de Firefox activés en permanence. A 10% de temps supplémentaire par add-on, ça suffit en théorie pour doubler le temps de chargement du navigateur. En pratique, sur mon Macbook Pro (de 2010), j’ai plutôt l’impression que le chargement de Firefox approche de la minute que de quelques secondes.

C’est plutôt drôle de voir qu’une des plus grandes « forces » de Firefox, mise en avant depuis le tout début, se trouve aussi être sa plus grande faiblesse.

J’adore Reddit. Dans la rubrique IAmA (« Je suis un… »), des internautes célèbres ou ayant une particularité intéressante proposent de répondre aux questions des Redditeurs. Cette semaine, ce sont 3 membres de l’équipe de développement de Google Chrome qui se sont prêtés au jeu, et ça donne des questions/réponses intéressantes, drôles, et humaines. Vous trouverez donc ci-dessous un petit condensé sélectionné et traduit par mes soins des réponses de Jeff Chang (product manager), Glen Murphy (user interface designer) et Peter Kasting (software engineer). Si vous voulez tout lire en anglais, direction Reddit.

Lire les questions/réponses avec l’équipe de Google

Il y a 2 ans, pour la sortie d’Internet Explorer 8, Microsoft s’était associé avec Speed Rabbit Pizza pour faire une pizza spéciale « IE8 Explorer » (« Internet Explorer 8 Explorer » ???). Microsoft étant très attaché à son image de marque, on se doutait que l’opération allait être renouvelée pour le lancement il y a 2 semaines d’Internet Explorer 9. Ah, attendez, on me fait signe que non. La pizza « IE8 Explorer » est toujours en vente chez Speed Rabbit Pizza. Et moi qui pensais que le seul intérêt d’IE pour Microsoft était commercial… Ceci dit, ce sera toujours surement un plus grand succès que la pizza IE6.

« Ensemble, créons des liens » est le slogan de Transpole, la société de transport lilloise. Vu que le métro tombe en panne quasiment tous les jours, je suppose que c’est du nofollow.

La semaine dernière, j’ai mis à jour la présentation des commentaires de ce blog en affichant en plus un avatar. Ça fait joli, et ça me permet surtout de reconnaître tout de suite les gens que je connais ou que je suis sur Twitter. Pour faire ça, WordPress est bien fait puisqu’il inclut par défaut le système de Gravatar. Le principe est simple : vous créez un compte chez Gravatar, vous configurez une ou plusieurs adresses e-mails et y associez un avatar. Ensuite, les sites qui le souhaitent iront chercher automatiquement votre avatar pour l’afficher. Par défaut, on peut afficher une image pour les gens qui n’ont pas de compte chez Gravatar. C’est sympa, sauf que ça peut faire vite répétitif si plusieurs de vos lecteurs n’utilisent pas le système. Du coup, j’ai fait une petite fonction PHP qui va retourner une image aléatoirement.  Voici un petit tutoriel tout simple pour faire ça. Lire la suite du tutoriel

Comme prévu, Microsoft a sorti officiellement Internet Explorer 9 cette nuit. Pour l’occasion, ils n’ont pas hésité à sortir les gros moyens et à utiliser les plus gros clichés ethniques pour vanter son navigateur.

La sortie d’un nouveau navigateur devrait toujours être source de fête pour les intégrateurs, et pourtant je n’en vois aucun porter de chapeau pointu les fesses à l’air sur la photocopieuse. Quasiment 2 ans jour pour jour après la sortie d’IE8, cette nouvelle version fait couler beaucoup d’encre (ou pas), mais pas forcément pour les bonnes raisons. Lire pourquoi IE9 c’est de la merde

Aujourd’hui, c’est la sortie officielle d’Internet Explorer 9. Vous vous en doutez, la presse spécialisée et grand public ne parle que de ça et tout le monde a les yeux rivés sur Microsoft… Attendez… Quoi… Non… Depuis quelques jours, ce n’est pas Microsoft mais Mozilla, essentiellement en la personne de Tristan Nitot (fondateur de Mozilla Europe), qui monopolise tous les médias. Le nouvel obs, Clubic, 20minutes, Silicon.fr, Ecrans.fr/Liberation et même France Culture.

Vu que ça risque de ne pas se calmer les prochaines semaines d’ici la sortie de Firefox 4, je propose d’utiliser le hash #fxpartout – ou #firefoxpartout ou #nitotpartout – sur Twitter (en souvenir de vous savez qui).

Katamari Damacy est un jeu japonais totalement déjanté dans lequel vous contrôlez un petit prince de l’univers dont le but est de faire des grosses boules (des « Katamari« ). Chaque partie démarre avec une petite boule que vous faites roulez et sur laquelle viennent se scotcher les objets sur lesquels vous roulez. Plus vous ramassez d’objets, plus votre boule grossit, et plus vous pouvez ramasser de nouveaux objets. Un super jeu, avec un univers très coloré et très drôle, avec un premier opus sorti sur Playstation 2 en 2004 et une dernière version sortie sur iPhone en 2008.

Si je vous raconte tout ça, c’est parce qu’une petite équipe de développeurs à recréé le concept du jeu en HTML5, dans un bookmarklet appelable depuis n’importe quelle page web. Ca s’appelle Katamari Hack (http://www.kathack.com/), et c’est une magnifique démo de ce que peut faire HTML5, et plus précisémment Canvas et les transformations CSS3. Même si ça rame un petit peu sur des grosses pages (genre… ici). Pour l’essayer, vous pouvez cliquez sur l’image ci-dessus. N’oubliez pas d’activer la musique pour retrouver l’ambiance du jeu original. Naaa-na-na-na-na-na-na-na, na-na-na-na-na-naaaaah !

La semaine dernière, Google a mis à jour sa page 404. « Hein quoi ? Google a une page 404 ? » Avec plusieurs milliards de pages vues par jour, il y a forcément bien un moment où un petit pourcentage d’internaute se retrouve face à une URL obsolète. La page en elle même est déjà assez rigolote, avec le langage technique commenté en gris clair « 404. Ca c’est une erreur ». Mais surtout, comme souvent avec Google, le code source de la page est un petit bijou d’optimisation d’intégration.

Voici une petite liste non exhaustive des pratiques de Google permettant d’avoir une page super optimisée et totalement standard :

• Doctype HTML5, carrément plus courte que les anciennes Doctype
• Pas de quotes autour des attributs dans les balises
• Styles compressés en une ligne dans une balise <style>
• Image du robot encodée en Base64 directement dans les styles
• Lien et image débutant par « // », relatifs au protocole de l’URL, permettant d’accéder à la page en HTTP ou HTTPS
• Pas de <head>, pas de <body>
• Pas de fermeture des balises <p>

En temps normal, ça ferait vomir plus d’un intégrateur pour l’intégration d’un site. Ce serait aussi un peu risqué pour la compatibilité entre navigateurs avec un design plus complexe. Mais pour une page aussi simple, et en particulier pour une 404, tous ces choix d’intégration sont on ne peut plus pertinent. Bien joué, Google, bien joué.