Kidaubis vient de réaliser un superbe skin Transformers. Il avait déjà sorti de icônes de chaussure Nike et des icônes de sport magnifique.

Vous êtes sans doute au courant que le groupe travaillant sur le XHTML 2 va s’arrêter à la fin de l’année, pour notamment rejoindre le groupe du HTML 5. C’est moins laisser tomber quelque chose que se concentrer sur un seul standard.

Différence XHTML / HTML

La différence principale entre le XHTML et le HTML est la rigueur du code. Un document XHTML nécessite de n’inclure aucune erreur de syntaxe pour être bien rendu, alors qu’un document HTML peut se permettre de contenir certaines erreurs. Ca vient du moteur de rendu du navigateur qui gère les deux documents différemment. Ca ne veut pas dire qu’il faut être négligeant dans l’écriture du code pour autant. Mais c’est plus propre d’avoir à se tenir à une syntaxe rigoureuse.

Le HTML a l’avantage d’être davantage rétro-compatible. Les navigateurs plus anciens arrivent à mieux lire un document HTML récent qu’un document XHTML récent. Ca vient sans doute du côté « léger » de sa rigueur.

Concrètement, ça change quoi cette fin du XHTML 2 ?

A vrai dire, pas grand chose car c’est dans la logique des choses. Depuis quelques mois, le HTML 5 n’arrête pas de faire parler de lui. Les navigateurs commencent à bien l’implémenter (Safari 4, Opera et le tout récent Firefox 3.5). Et il a un gros potentiel. Pour en savoir plus, vous pouvez lire ma petite introduction au HTML 5.

Etant un adepte du XHTML 1.0 (pour des raisons de rigueur de code et pour éviter le Quirks Mode), je n’aurais pas à choisir entre le HTML 5 et le XHTML 2. Il n’y en aura plus qu’un. Et puis le HTML 5 aura aussi sa « version XML« . Donc je pourrais toujours imposer au document d’être totalement propre.

Je pense que cette fin du XHTML 2 est une bonne chose (même si ce n’est pas la fin du XHTML). Pas de casse-tête avec plusieurs standards à suivre, et un renforcement du HTML 5, ce qui va amener les navigateurs à être encore plus plongé dans le HTML 5 et va faciliter cette tâche.

On se rend compte à quel point les médias sociaux sont de dangereux vecteurs de propagande.

Je dis BD mais c’est avant tout une expérimentation très poussée de la pseudo-classe :hover, sans image, une sorte de labyrinthe typographique.

Amusez-vous.

Vous êtes designer et vous voulez monter un site, mais vous êtes une quiche en programmation, alors vous vous tournez vers un CMS (Content Management System pour les novices) pour gérer votre contenu. Vous hésitez entre Drupal, WordPress, Joomla (mauvais), Expression Engine, Movable Type, Spip…

Mais vous trouvez ça trop lourd. Vous voulez pas d’usine à gaz. Vous voulez un truc super basique. Il y a Pluxml qui est sympa, un CMS tout léger motorisé à l’XML. Mais CMS.txt c’est radical : 6kb pour un CMS.

Pour gérer le site, ça donne ça :

/* -------- Website -------- */

name: My Website Title
theme: awesome-blue
missing: 404.html
foo: bar

Si quelqu’un le teste, j’apprécierais un feedback dessus!

Si vous en avez marre d’attendre que le grand public mette à jour ses navigateurs pour pouvoir utiliser du HTML 5 et du CSS 3, vous pouvez utiliser Modernizr :

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Je testerai sans doute à la prochaine refonte du site, c’est à dire prochainement (?).

Pour ceux qui ne savent pas faire la différence entre un Socket 478 et un Socket mPGA478MT (haha, noob!), ce poster géant de Hardware PC est pour vous. Et pour moi donc.

Voici une version HD et la page de l’auteur.

Je le dis et je le répète : il faut arrêter de s’acharner à faire fonctionner parfaitement son site sous IE6. Chaque semaine, il y a un nouvel article qui prône cette idée, et c’est très bien.

Est-ce qu’un site doit apparaître exactement pareil sous chaque navigateur ?

Pour ceux qui ne le sauraient pas encore : la réponse est non.

Notez l’adverbe « exactement ». Parce que d’un côté, il faut que l’utilisateur puisse reconnaître un site, quel que soit le navigateur utilisé. Mais des différences (plus ou moins) légères dans le graphisme sont non seulement tolérées mais parfaitement admises. Ne pas avoir de coins arrondis (par CSS ou PNG), de dégradés complexes (par PNG), des ombres portées… sous IE6 n’est pas un problème.

C’est surtout qu’un utilisateur d’IE6 ne verra aucune dégradation dans sa version vu qu’il ne verra pas la « bonne version »!

Et puis d’abord, tout le monde n’a pas toutes les polices utilisées sur un site (Arial inexistant sous Linux ?), donc il y a déjà obligatoirement des différences, et des grosses différences : la typographie c’est au moins la moitié du design.
Lire la suite

Si vous êtes sous Vista et que vous comptez upgradez prochainement à la version 3.7 de Firefox (qui ne le ferais pas ?), vous risque de tomber sur ce joli thème Firefox.

Super classe quand même ce trailer de Tron Legacy qui sortira en 2010. Et Daft Punk pour la BO.

Même si le HTML 5 est encore un joli bordel, des développeurs s’en donnent à coeur joie pour trouver des fonctionnalités très intéressantes, comme ce Drag & Drop en HTML 5 et JS.

Hop, un nouveau moteur de recherche d’images. Spezify cherche des images, du texte et des vidéos dans Amazon, Yahoo, Twitter, eBay, MSN et Flickr. Pas de Google, tiens.

Le plus intéressant, c’est la mise en forme des résultats, une sorte de plan infini ou l’on peut naviguer facilement et qui mélange tous les types d’infos (image, texte, vidéo).

Davantage pour leur sémantique que pour leur pouvoir en SEO, il est intéressant et pratique d’utiliser les balises HTML suivantes. Elles permettent de donner du sens au contenu d’un site, ou plutôt à son code.
Lire la suite

Après Mario Kart en JavaScript, voici Wolfenstein 3D en JavaScript. C’est fluide, même sous Firefox. C’est dire la qualité du code!

Quoi de mieux qu’un plan pour se balader dans une ville touristique ? Un plan en 3D intéractif de Paris pour iPhone bien sûr!

The Longest Way 1.0, c’est l’histoire d’un allemand qui veut arriver à pied par la Chine. Il part de Chine pour arriver en Allemagne. Au final, après 1 an et 4646km parcourus, il s’arrête et délivre cette superbe vidéo, rythmée et drôle. Et oui, ça rappelle beaucoup l’autre vidéo..

The Longest Way 1.0 – one year walk/beard grow time lapse from Christoph Rehage on Vimeo.

Après avoir annoncé l’absence de LAN et la présence de DRM pour Starcraft 2, Blizzard sort cette magnifique bande-annonce. Une manière de détourner l’attention ? En tout cas, ils peuvent se reconvertir dans l’animation cinématographique sans problème.

James Padolsey a réalisé un plugin jQuery pour aisément générer du code HTML : Satisfy that selector. Pratique lorsqu’on veut réaliser un template HTML rapidement. C’est surtout très pratique pour le modifier très rapidement.

Imaginons que je vais créer une liste avec 10 éléments et des liens dedans, je fais :

jQuery('ul li:5 a[innerHTML="link"]').satisfy();

Puis je me dis que je veux 20 éléments et avec un span dans les liens. Au lieu de faire du copier-coller ou du search & replace, j’ai juste à faire :

jQuery('ul li:20 a span[innerHTML="link"]').satisfy();

Un plugin qu’il est pratique! Je vous conseille de vous abonner à son blog car il est très bon.

Vous avez un MacBook Air. Il est très fin et très léger, et donc très facilement transportable. Mais, comme tout portable, la batterie n’est pas assez autonome pour pouvoir se passer du chargeur. Résultat : le volume de transport augmente.

Min-Kyu Choi, un designer sud-coréen étudiant à Londres, a imaginé et réalisé une solution très pratique : le Folding Plug System.

Je vous conseille de regarder la vidéo explicative.

Le processus de création de l’interface d’une application peut passer par de nombreuses itérations. Même si au départ, le résultat était selon moi déjà très satisfaisant, il ne l’était a priori pas pour tout le monde. La vidéo Convert Design Evolution présente l’évolution de l’appli Convert par les excellents tap tap tap (le site est superbe, les applis aussi).

Convert Design Evolution from tap tap tap on Vimeo.

J’en avais marre de mon ancien fond iPhone, trop sombre à la longue. Je me suis dit « Allons-y à fond les couleurs! ». Le résultat me plaisait sur mon écran de PC mais le résultat sur iPhone m’a déçu. Peut-être un problème de qualité d’image (je l’ai récupérée en me l’envoyant sur GMail).

Comment vous faites pour installer un fond d’écran iPhone à partir d’un fichier ?

Fan de typographie ? Vous voulez en savoir davantage sur vos polices préférées ? Qui a réalisé cette police ? Quelle est son histoire ? Son designer ? Et quel est le vocabulaire pour les typos ? Autant de questions auxquelles essaye de répondre le très joli site Typedia.
Lire la suite

La firme suédoise IKEA, connue pour son pragmatisme et sa communication, va changer la police de son catalogue :  elle passe de Futura à Verdana.

Verdana, une police pour les écrans

Même si la typographie ne se résume pas au choix d’une police, il faut savoir que Verdana est une police réalisée pour être lisible sur petits écrans (vous testerez l’Arial en 9px bold, puis le Verdana, y a pas photo). Donc, elle est avant tout faite pour le web et pas le print.

Où est l’originalité ?

Tout internaute quasiment connaît Verdana, ou l’a déjà vue du moins. Quelle idée de l’utiliser comme vecteur de la marque ? Parce que le catalogue IKEA, tout le monde le connaît aussi (car présent dans chaque table basse française…).

Et puis, je sais pas mais je suis très fan de la police remplacée : Futura.

Si vous voulez, il y a même une pétition disponible.

A force de faire des thèmes WordPress, je commence UN PEU à comprendre comment ça marche. Et là, y a une énigme que j’ai enfin résolue (enfin, j’ai lu la solution chez quelqu’un d’autre).

Dans le thème Kubrick (le thème par défaut de WP, qui se fait un peu vieux d’ailleurs), y a ce fichier : comments-popup.php. Mais que fait-il ? A priori, c’est une popup… des commentaires. Ok. Mais ça apparaît quand ? Comment ? Où est-ce qu’on l’active ?

Comment l’activer ?

J’ai lu la solution chez Playworkplay : le comments popup s’active par un script à mettre dans le <head>. Il est présent dans le thème « classic » d’ailleurs.

<?php //comments_popup_script(); // off by default ?>

Par défaut, il est désactivé. Faut juste virer les deux slash (//) du début.

Il fait quoi au juste ?

Maintenant, en cliquant sur un lien du style « 1 commentaire », au lieu d’aller à l’ancre des commentaires dans la page du post, ça ouvre une popup avec les commentaires.

Je clique sur le lien…

… et ça affiche la popup

C’est bien ou pas ?

Je dirais NON. D’abord, c’est pas beau. Puis c’est pas du tout pratique pour l’utilisateur. Puis ça sort les commentaires du contexte de l’article. Puis c’est une popup au départ donc déjà…

Pas étonnant que le thème Kubrick ne l’utilise pas et qu’aucun blog WordPress ne l’utilise (si vous en trouvez un, dites-le moi, j’irai pas voir).

Bref, ce post est juste là pour clarifier les choses.