Une CSS universelle pour IE6

Que faire face à IE6 ?

  • s’embêter avec des hacks CSS ?
  • faire 2 versions du site ?
  • laisser les bugs partout ?
  • utiliser une CSS alternative ?
  • utiliser du JavaScript pour améliorer la compatibilité ?

IE6, c’est vieux, c’est lourd, c’est moche, c’est chiant. Ca prend du temps, pour pas grand chose, et pour de moins en moins de monde (20% grande moyenne à l’échelle mondiale).

Et puis le web, c’est pour le contenu avant tout. Au lieu d’avoir un site buggé de partout sur IE6, pourquoi ne pas offrir une CSS propre et claire ? C’est l’idée derrière Universal Internet Explorer 6 CSS.

css-universelle-ie6

Le XHTML 2 c’est fini. Le HTML 5 s’en trouve renforcé.

w3c_main

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.

CMS.txt : un CMS ultra-léger qui pèse 6kb

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.

cms.txt

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!

Un mockup Vista pour Firefox 3.7

mockup-vista-firefox-37

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.

Evolution d’un design d’appli iPhone

evolution-design-iphone

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.

A quoi me sert Firefox aujourd’hui ?

En surfant un peu sur le web (avec Chrome), je remarquais une fenêtre Firefox ouverte mais inutilisée. En l’ouvrant, je vis à quoi me servait véritablement Firefox.

En tout, 8 plugins que j’utilise +/- régulièrement :

  • Shareaholic pour partager des articles
  • Page Saver pour sauvegarder le screenshot d’une page entière
  • Adblock Plus pour bloquer toutes les pubs (même celles en fond d’un site)
  • Web Developer : le couteau suisse d’un développeur
  • Colorzilla pour trouver le code couleur de n’importe quel pixel de la page mais aussi obtenir la palette de couleur d’un site
  • Echofon (anciennement Twitterfox), l’excellent client Twitter pour Firefox
  • Firebug : le meilleur plugin jamais conçu pour un intégrateur.
  • XMarks pour synchroniser ses favoris sous Firefox

Et au beau milieu, une page web vide.

a-quoi-sert-firefox

Eh oui : Chrome s’ouvre aussi vite qu’un explorateur Windows. Et va aussi vite que Notepad++.

UPDATE : je m’explique dans les commentaires. 🙂

Récupérer sa clé de CD Windows XP avec Ubuntu

Un billet un peu à part pour simplement partager une astuce pour récupérer le CD Key de son installation Windows alors que vous êtes sous Ubuntu.

Comment j’en suis arrivé là ?

Un beau matin, mon Win XP ne démarre plus. J’ai même plus l’écran de chargement Windows. J’ai tenté une réinstall avec un CD de Win XP, rien n’y fait. Heureusement j’ai encore Ubuntu.

Différence ProductID / Product Key

J’ai envie de récupérer la clé de CD de mon Windows XP (officiel, acheté). Mais j’ai perdu mon CD. Et le registre Windows ne contient que l’ID du produit.
A partir de cet ID, il faut utiliser un logiciel spécial pour retrouver la clé du CD : Magical Jelly Bean Keyfinder.

Donc en gros : ProductID -> Magical Jelly Bean Keyfinder -> Clé du CD original

Le seul problème : Magical Jelly Bean ne fonctionne que sous Windows XP… et justement, ce dernier ne marche plus chez moi. Je peux utiliser Wine sous Ubuntu pour utiliser ce programme, mais il me faut le registre Windows de mon install foireuse d’abord…
Lire la suite

Empêcher la redimension des textarea dans Google Chrome

Si vous êtes vous aussi ennuyé de temps à autre par la possibilité dans Google Chrome de redimensionner les textarea à la guise de l’utilisateur (ce qui, en soit, est très bénéfique pour l’utilisateur parce qu’il a la main sur un élément de l’interface, mais qui, du point de vue du designer, peut amener à des aberrations graphiques), alors voici une astuce en CSS.

Avant

Textarea avec flèche

Après

Textarea sans la flèche

Code CSS

textarea{ resize:none;}

Refonte de Task This, site d’une appli iPhone

Vous connaissez tous ces sites d’appli iPhone ? Depuis 2 ans, c’est devenu une tendance, une catégorie à part dans les designs de site. Personnellement, je les trouve très créatifs, modernes et pertinents. Et je m’en inspire pas mal, comme par exemple dans cette liste de 40 sites d’appli. Malheureusement, je n’ai jamais eu l’occasion de bosser sur un tel site.

C’est pourquoi j’ai forcé le destin. En découvrant Task This, une appli française gratuite de gestion de taches, j’ai tout de suite eu envie de proposer mes services pour faire la refonte. Lire la suite

Introduction à WordPress 3 : custom post type et custom taxonomy

J’ai écrit un tutoriel complet pour réaliser un thème WordPress de A à Z.
Il est plus récent et parle aussi des Custom Post Type et Custom Taxonomy. Du coup, je vous invite à aller le lire.

WordPress vient d’annoncer une Release Candidate pour la version 3. J’ai pour ma part installé et mis en prod la version Beta 2 qui, ma foi, est très stable. Si vous comptez l’installer, allez-y! Les mises à jour se font comme les WP actuellement, c’est à dire automatiquement. Et le système de template pour les thèmes est identique donc vos thèmes marcheront sans souci! Le seul souci est qu’il n’y a pas de version française encore mais bon, c’est uniquement pour l’admin qui est vraiment très simple en anglais.

Nouveautés WordPress 3

Dans les nouveautés, il y a :

  • choisir son login et son mot de passe : au lieu d’avoir « admin » et un mot de passe généré automatiquement, on peut les choisir soi-même.
  • un nouveau thème par défaut, bourré de nouvelles fonctions et qu’on va customiser dans ce tutoriel
  • custom background : un outil dans l’admin pour pouvoir choisir un fond pour le site. Si vous développez des thèmes vous même, ça vous est inutile.
  • Multi-sites! En fait, WordPress et WordPress µ ont fusionné : il est donc possible avec 1 seule installation WP de mettre en place autant de blogs différents que l’on veut. Par exemple : css.bbxdesign.com pour un blog de CSS, inspiration.bbxdesign.com pour un blog d’inspiration etc.
  • Custom Post Types
  • Custom Taxonomies

Je vais développer ces 2 derniers points car ils sont les plus intéressants.
Lire la suite

The whole idea of your computer is going away

Paul Graham, qui avait créé la première application web en 1995, en décrivait il y a 10 ans la prolifération inévitable, leur développement itératif, la liberté du langage utilisé, le coût marginal insignifiant, la simplicité de départ. Une vision de GDocs, RoR et Microsoft, sans erreur aucune.

Script Photoshop : calques vers JPG Web

Vous connaissez sans doute l’excellent outil Photoshop pour « Exporter les calques dans les fichiers » : chaque calque est exporté individuellement et son nom est celui du fichier exporté.

Le seul souci : ce sont des JPG « normaux », c’est à dire non optimisés pour le Web (Fichier -> Enregistrer pour le Web).

Ce script, en utilisant l’option « JPG SFW », regroupe les deux qualités : l’automatisation du processus d’exportation et la qualité optimale pour le Web. Vous économisez ainsi 90% d’espace : je suis moi-même passé de 3Mo d’images à 320Ko.

The Restart Page

La nouvelle blague de bureau à faire en plein écran : un reboot de l’OS de votre choix (Windows ou Mac).

Dropbox : le chaînon manquant

Depuis 2009, j’utilise intensément ma Dropbox. J’ai rapidement souscrit à un abonnement 50 Go avec « unlimited undo history ». Est-ce que ça vaut le coût ? Oh oui. C’est le prix d’une conscience tranquille et d’une simplicité d’utilisation imbattable. Et même si Steve Jobs disait de Dropbox « It’s a feature, not a company« , il a quand même essayé de le racheter pour $800 millions

Dropbox, c’est le « Versioning pour les noobs ». Voire, pour les méga-noobs. Son succès vient du côté « seamless integration » : pour l’utilisateur, une Dropbox c’est qu’un simple dossier comme les autres sur le PC local. Mais avec 2 pouvoirs incroyables…

Lire la suite

Clear pour iPhone : une to-do list géniale

Je ne peux m’empêcher de regarder en boucle la démo de Clear, la to-do list la plus simple pour iOs.

Sparrow – Get mail done

J’aimerais dépasser les 10 mails par jour juste pour utiliser Sparrow. (J’suis encore loin avec mes 4,6).

Et puis surtout : si GMail me force finalement à passer à leur nouveau « design » (ce qui ne saurait tarder), je risque de définitivement déserter la web app.

Soluto : diagnostic PC

Soluto me dit que mon vieux Win XP boot en 1:52 min. Le grand vainqueur ? Dropbox qui met 30 sec à démarrer.

OmniFocus : ça marche ?

J’arrête pas de lire des louanges vis-à-vis de OmniFocus, cette solution logicielle qui permettrait de s’organiser au sein d’une entreprise. Mais à 63€ l’appli Mac et 16€ l’appli iPhone, ça fait cher la solution GTD exclusivement Mac/iOS.

Windows 8 : un nouveau logo, mais…

Microsoft a dévoilé le processus de création de son nouveau logo. Un résultat logique mais peu convaincant je trouve.

J’ai 2 choses à dire :

  1. Connaissez-vous les îles Shetland ?
  2. Ce nouveau logo n’était-il pas prévisible ?

Ubuntu pour Android

Ce qui devait arriver, arriva : votre PC dans votre mobile, qui s’adapte à l’input qu’on lui fournit.

Dropbox + Markdown = un blog avec Calepin

J’adore Dropbox. J’adore Markdown.
Si je voulais créer un nouveau blog, je me tournerais bien vers Calepin.

Comment ça marche ?

  1. Liez votre compte Dropbox à Calepin
  2. Créez des fichiers texte en Markdown dans votre Dropbox
  3. Publiez

Si jamais un outil identique mais self-hosted sort, prévenez-moi. [1. C’est possible de le faire avec Jekyll et un script, ou bien avec Second Crack directement, mais il faudrait un serveur dédié, que je n’ai pas.]

L’appli iPhone Clear s’est vendue à 350 000 exemplaires en 9 jours

J’en fais partie.

Ubuntu + WiFi = problème permanent

Je viens d’installer Ubuntu (en dual boot) sur mon laptop. Souci : la connexion internet en WiFi tombe systématiquement au bout de 2 minutes. Et je ne suis pas le seul.

Pourtant :

  • le signal WiFi est à 100%
  • le même laptop sous Windows reste parfaitement connecté au WiFi (et à internet)
  • mon iPad aussi

J’ai essayé de changer le gestionnaire de connexion (wicd) ainsi que de pilote de carte WiFi (propriétaire au lieu de celui par défaut). J’ai même désactivé la gestion d’alimentation de le carte WiFi (qui désactivait cette dernière !). Sans résultat.
C’est fou de voir un OS incapable de s’occuper d’une fonctionnalité primordiale en 2012 !

Si quelqu’un a une solution, qu’il me contacte ou m’envoie un tweet. Il gagnera un retweet. Ou un Dr Pepper.

Windows Desktop UI Concept

Un exceptionnel (visual) design minimaliste, basé sur Metro et Zune.

Windows 8 Consumer Preview en téléchargement

Je reste très sceptique quant à la fusion des OS Desktop et Tablet.