HTeuMeuLeu

« Google Chrome : pourquoi je le déteste mais je continue à l’utiliser« . Excellente lecture sur des détails très précis et très pointilleux de l’interface de Chrome. Mais curieusement, pour la première fois pour ce genre d’article, la comparaison n’est pas faite avec Firefox ou Internet Explorer, mais avec Safari. L’occasion de rappeler le souci du détail d’Apple, impressionnant pour un navigateur sorti et pas mis à jour depuis 1 an. Au passage, j’ai aussi découvert l’existence de l’aperçu des onglets, à la exposé, dans Chrome.

Après Quake 2, Quake 3, et Rage, c’est au tour de la version shareware Doom de se voir porter de manière non officielle en version web en HTML5, avec l’utilisation de canvas et des balises audio.

A vous les joies du mode Nightmare dans les couloirs des stations spatiales de Doom. Pour les fillettes, vous pouvez même utiliser les cultissimes codes IDDQD (invincibilité) et IDKFA (toutes les armes).

C’est relativement fluide, même s’il reste quelques bugs. Malheureusement, la démo hébergée chez Mozilla ne tourne pour le moment que sur Firefox 4.

Après 3 semaines et plus d’une 10aine de participations, le concours pour gagner des exemplaires de « CSS avancées : vers HTML5 et CSS3 » et « CSS2 : Pratique du design web » est terminé. Je délibère tout seul dans mon coin, et j’annoncerais les résultats le mercredi 8 juin prochain. Merci à tous les participants et bonne chance à eux !

L’ordre d’écriture des propriétés en CSS n’a quasiment aucune importance. Du coup, ça relève en général de choix personnel, de l’ordre alphabétique ou d’un hasard total. Pourtant, quand on travaille en équipe, il est vite important d’établir quelques règles afin que tout le monde code de la même façon, sous peine de se retrouver avec un beau patchwork de styles. Voici l’ordre dans lequel je range mes propriétés CSS. Lire la suite de « L’ordre des propriétés CSS »

La question vient d’être posée il y a quelques instants sur par p0ulpe sur Twitter : vous êtes plutôt « margin-left:10px » ou « margin:0 0 0 10px » ? A ma grande surprise, la réponse qui l’a emporté « haut la main » est la première. Ca fait bien longtemps que je n’utilise plus que l’écriture raccourcie de la propriété « margin » en CSS, et voici pourquoi.

Premièrement, l’écriture raccourcie est bien meilleure pour la maintenance d’un site. Si on doit ajouter une marge sur un autre côté de sa balise, on n’a plus qu’à placer la bonne valeur au bon endroit. En utilisant la version longue, si on doit ajouter une nouvelle marge, on va soit être tenté d’utiliser à nouveau une version longue, ce qui va considérablement rallonger le code, ou alors (si on a un peu d’amour propre) on va modifier le code et perdre du temps à ré-écrire les marges avec l’écriture raccourcie de margin.

Deuxièmement, l’écriture raccourcie est, comme son nom l’indique, plus courte. Enfin, presque. C’est vrai pour la valeur bottom uniquement (on gagne 3 caractères \o/). On a une égalité pour les valeurs top et right. Mais on perds 1 caractère pour la valeur left.

margin-left:5px; /* 16 caractères */
margin:0 0 0 5px; /* 17 caractères */
margin-right:5px; /* 17 caractères */
margin:0 5px 0 0; /* 17 caractères */
margin-top:5px; /* 15 caractères */
margin:5px 0 0; /* 15 caractères */
margin-bottom:5px; /* 18 caractères */
margin:0 0 5px; /* 15 caractères */


C’est certes une optimisation minime, mais combinée à l’amélioration de la maintenance du site, c’est à mon avis 2 points importants qui vont faire la différence. La seule raison pour laquelle j’utilise « margin-left », c’est pour surcharger cette valeur uniquement.

La seule autre raison que je peux imaginer qui puisse pousser certains à utiliser systématiquement cette écriture, c’est la facilité de lecture pour un débutant. Très souvent, j’ai vu des intégrateurs novices lutter à se souvenir de l’ordre des valeurs de la propriété « margin ». Un bon moyen mnémotechnique pour se souvenir de l’ordre des valeurs et leurs côtés correspondant est de penser à une horloge. Les 4 valeurs de la propriété « margin » se lisent dans le sens des aiguilles d’une montre : top, right, bottom et left.

margin:12px 3px 6px 9px;

Chaque nouvelle technologie voit arriver son lot de bonnes et mauvaises utilisations, et c’est particulièrement vrai sur le web. La dernière lubie en date qui m’agace particulièrement, c’est l’utilisation de Media Queries à tout va. Et ce qui m’a fait sortir de mes gonds, c’est cette liste de 20 sites « amazings » utilisant les Media Queries. Et surtout, c’est le récent tutoriel de l’habituellement excellent WebdesignerWall sur « Le Design Mobile et Adaptatif en CSS3 avec les Media Queries« . Allez-y, essayez leur démo. Attendez, prenez un sac à vomi avant.

Lire la suite de « Faut arrêter avec les Media Queries ! »

« 3 Dreams Of Black« , le clip en 3D super impressionnant présenté aux Google I/O est sorti cette nuit. Réalisé par Chris Milk et Aaron Koblin (et aussi l’aide de MrDoob),  la démo sert de support à la chanson du même nom du groupe ROME (collectif composé entre autres de Jack White des feu White Stripes, et Norah Jones). Mélangeant vidéo, animation traditionnelle et 3D, la démo utilise les dernières technologies du web (WebGL, HTML5 vidéo, Canvas, …). Pour rappel, les deux compères avaient déjà réalisé le clip/démo « The Wilderness Downtown » pour Arcade Fire l’année dernière.

Courrez donc vite expérimenter ce clip. Après ça, regardez le making-of et amusez-vous avec le Model Viewer des différents modèles et animations 3D utilisées dans la démo, ou les différents exemples d’effets en WebGL en bas de page. Enfin, vous pourrez utiliser l’éditeur 3D pour construire votre propre objet et l’ajouter à une galerie collective.

J’adore le doodle du jour. Et c’est assez intéressant de voir le sprite utilisé par Google pour faire l’animation (plutôt qu’un GIF animé ou une vidéo).

Pour information, c’est Ryan Woodward (auteur du sublime court métrage « Thought of you« ) qui est à l’origine de cette animation.

Oyé oyé, intégrateurs, intégratrices, webdesigners, euh… webdesigners. En partenariat avec l’éditeur Eyrolles, voici un tout premier concours sur HTeuMeuLeu vous permettant de gagner 2 exemplaires du livre « CSS avancées : Vers HTML5 et CSS3 » et 2 exemplaires du livre « CSS2 : Pratique du design web« , tous deux écrits par Raphaël Goetter (le monsieur d’Alsacreations).

Pour gagner, c’est très simple, il vous suffit de me faire rire (et je réponds tout de suite à votre question : non, être graphiste ne suffira pas). Plus précisément, vous allez devoir m’envoyer une image drôle concoctée par vos soins en rapport avec l’intégration HTML ou le web en général. Vous pouvez y inclure des textes, mais impérativement en français (les jeux de mots franglais pourris sont quand même autorisés). Vous pouvez prendre une photo de vous, faire un montage sous Photoshop avec des photos de chatons, ou utiliser un des memes suivants : Steve Jobs / Bill Gates, The situation room, Inception. Vous pouvez consulter La Galerie des Images Drôles pour les Intégrateurs pour inspiration.

Vous avez jusqu’au mardi 31 mai 23h59 pour m’envoyer votre image par e-mail (ou un lien vers votre image) à l’adresse concours@hteumeuleu.fr. Vous pouvez m’envoyer plusieurs participations, mais une seule sera retenue pour gagner. Passé cette date, je choisirais les 4 images qui m’auront le plus fait rire. Les auteurs des 2 premières gagneront 1 exemplaire du livre « CSS avancées : Vers HTML5 et CSS3 » (36€ chez Amazon). Les 2 suivants gagneront 1 exemplaire du livre « CSS2 : Pratique du design web« . Toutes les participations seront diffusées sur ce site après le concours.

C’est compris ? Alors, c’est parti !

BusinessInsider a déniché une superbe citation de Steve Jobs sur la différence entre un vice président et un concierge, et la différence de responsabilité.

Jobs raconte aux vice-présidents que si la poubelle de son bureau n’est pas vidée régulièrement, il demande au concierge quel est le problème. Le concierge peut raisonnablement répondre « Et bien, la serrure de la porte a été changée, et je n’ai pas trouvé une clé« .

Un agacement pour Steve Jobs, face à une excuse compréhensible d’un concierge qui n’a pas pu faire son travail. En tant que concierge, il a le droit d’avoir des excuses.
« Quand vous êtes concierge, les raisons sont importantes. […] Quelque part entre le concierge et le CEO, les raisons arrêtent d’être importantes. »

En d’autres mots, vous n’avez aucune excuse en cas d’échec. Vous êtes maintenant responsable de toutes les erreurs qui se produisent, et ce que vous dites n’a aucune importance.

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 ?