[niveau intermédiaire]

Lorsqu’on crée des CSS, il arrive qu’on s’y perde un peu entre les px bien pratiques, et les em tout aussi pratiques mais bien moins parlant….

Le site http://pxtoem.com/ propose de convertir des pixels en em.

[niveau: débutant]

Via Presse-Citron j’ai découvert le site View Like Us qui propose de voir à quoi ressemble un site web selon la résolution de l’écran, allant de l’iPhone à au 1920×1200, en passant par la Wii.

Rapide, gratuit et efficace.

[niveau: intermédiaire]

Linux est un système d’exploitation qui était réservé au geek, mais depuis plusieurs années les distributeurs font en sorte que cet OS soit plus facile à installer et à utiliser. Linux apparaît d’ailleurs de plus en plus comme une alternative à Windows.

Il y a donc plusieurs raisons qui pourraient vous pousser à installer Linux:
- tester pour voir à quoi ça ressemble
- regarder les applications disponibles
- comprendre comment il est configurable
- tester les navigateurs pour vos sites web

Pour entrer dans le monde merveilleux du Pingouin (qui en est la mascotte), vous avez principalement trois solutions:

1. l’installation pure et dure du système en parallèle de Windows, c’est-à-dire que vous choisissez l’un ou l’autre au démarrage de la machine
2. l’utilisation d’un LiveCD qui offre la possibilité de démarrer sur un CD (ou une clé USB) qui contient Linux et ainsi de le tester sans rien installer sur l’ordinateur
3. virtualiser Linux (à l’instar de ce que je vous ai montré l’autre fois pour tester les IE)

Je vais ici vous expliquer le dernier cas. En effet, je connais déjà bien Linux, et l’intérêt majeur pour moi de l’installer est de pouvoir tester Firefox, Epiphany, et autres navigateurs afin de m’assurer du design d’un site web.

Virtualiser Linux dans Windows est simple. Si la dernière fois nous avons utilisé VirtualPC c’est parce que Microsoft fournissait des images déjà prêtes pour leur logiciel. Mais cette fois-ci, nous allons plutôt utiliser VirtualBox. Pourquoi ? Parce que si vous installez Linux (et ici ce sera Ubuntu) dans VirtualPC, alors vous allez avoir une résolution d’écran de 800×600, ce qui n’est pas franchement pratique. Les démarches pour passer en une résolution supérieure sont compliquées et risquées, alors qu’avec VirtualBox il suffit de quelques commandes !

La première chose à faire est donc de télécharger VirtualBox (j’utilise dans cet exemple la version « VirtualBox 2.2.2 for Windows hosts »). Ensuite, il vous faut télécharger une distribution Linux. Il en existe des centaines de versions… Plusieurs sites essaient de vous guider, comme Comment ça marche. Pour notre cas pratique nous prendrons Ubuntu qui est l’une des plus utilisées.
Il vous faut récupérer l’image ISO d’Ubuntu (à l’heure où j’écris ces lignes le fichier est ftp://ftp.crihan.fr/releases/9.04/ubuntu-9.04-desktop-i386.iso).

Une fois téléchargé, ouvrez VirtualBox (que vous aurez déjà installé). Cliquez sur « Nouveau » :

Pour le nom inscrivez « Ubuntu », et pour système d’exploitation prenez « Linux » et la version « Ubuntu » :

Continuez avec les options par défaut.

Une fois fini vous devriez avoir cela :

Maintenant cliquez sur « Lancer » afin d’activer l’assistant de premier lancement. Celui-ci vous demande ce que vous voulez installer. Choisissez « Disque Optique » et « Fichier Image » en sélectionnant le fichier iso que vous avez téléchargé précédemment (« ubuntu-9.04-desktop-i386.iso ») ;

L’écran d’installation d’Ubuntu va démarrer. Vous n’avez plus qu’à choisir « Français » (avec les flèches) puis de prendre « Installer Ubuntu » :

Laissez les options par défaut proposées. Après plusieurs clics et quelques minutes vous vous retrouvez sous Ubuntu ! Malheureusement vous remarquez que vous êtes en résolution 800×600… Voilà un problème de résolution d’écran qui est simple à régler.

Tout d’abord, vérifiez que vous n’avez aucune image CD chargée. Pour cela, votre bureau Ubuntu doit être vide de toute icône. Si vous voyez une icône en forme de CD avec un nom qui commence par Ubuntu, alors faites un clic droit dessus puis « Ejecter ». Une fois fait, sortez de la machine virtuelle (en appuyant sur la touche « Ctrl » de votre clavier, mais celle qui se trouve à droite), puis aller dans Périphériques > Installer les Additions invité… :

Devrait alors apparaitre une icône avec un CD sur le bureau :

(si ce n’est pas le cas, allez dans Machine > Redémarrage pour redémarrer la machine virtuelle)

Maintenant, dans Ubuntu, allez dans Applications > Accessoires > Terminal. Une fenêtre au fond blanc s’ouvre. Vous allez y taper les commandes suivants :
sudo su
/* entrez votre password défini durant l'installation */
cd /media/cdrom0
./VBoxLinuxAdditions-x86.run
Après quoi le système vous indique qu’il doit redémarrer. Ce qui doit donner :

Pour redémarrer, allez dans Machine > Redémarrage. Une fois le boot terminé, vous verrez Ubuntu avec une résolution d’écran équivalente à la vôtre !

Vous n’avez plus qu’à lancer Firefox pour découvrir le rendu de votre site, et vous pouvez installer d’autres navigateurs pour les tester.

[niveau: intermédiaire]

Si vous n’êtes pas un webdesigner professionnel, vous vous demandez sans doute quelles polices de caractères sont utilisables sur le Web. Peut-on utiliser une fonte personnalisée? Quelles sont les principales familles de fontes génériques?

C’est ainsi qu’est introduit le billet d’Alsacreation qui vous explique parfaitement les polices disponibles pour la plupart des navigateurs.

Dans cet excellent billet, l’auteur nous propose plusieurs polices de caractères:

/* Polices à empattements (serif) */
font-family: Times, "Times New Roman", "Liberation Serif", FreeSerif, serif;
font-family: Georgia, "DejaVu Serif", Norasi, serif;

/* Polices sans empattements (sans-serif) */
font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
font-family: Tahoma, Geneva, Kalimati, sans-serif;
font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
font-family: Impact, "Arial Black", sans-serif;

/* Polices à chasse fixe (monospace) */
font-family: Courier, "Courier New", FreeMono, "Liberation Mono", monospace;
font-family: Monaco, "DejaVu Sans Mono", "Lucida Console", "Andale Mono", monospace;

Enfin vous pouvez retrouver un tableau très bien fait chez Dustin sur « Web safe and common fonts ».

[niveau: expert]

Je vous ai déjà expliqué comment tester votre site sur IE6, IE7 et IE8, et maintenant je vous propose un émulateur pour voir le rendu de votre site sur Opera Mini. Pour cela il suffit d’aller sur http://www.opera.com/mini/demo/ qui offre une applet Java pour tester la version mobile du navigateur.

A noter que je n’ai réussi à voir l’émulateur qu’avec le navigateur Opera…

[niveau: expert]

OpenWeb propose un excellent article nommé « Compatibilité multi-navigateurs des polices de caractères » où ils y expliquent les unités et les valeurs à utiliser pour dimensionner la taille des caractères de façon homogène sur le plus grand nombre possible de navigateurs Web.

Pour résumer, il est conseillé de ne pas utiliser une unité absolue (comme le ‘px’, le ‘pt’, le ‘cm’, etc). Evitez donc de noter dans votre style CSS quelque chose comme:

body { font-size: 15px; } /* défini la taille par défaut de tout le texte */

A cela, préférez des unités relatives, et en l'occurrence l'utilisation de 'em' et de '%'.
Il suffit de définir la taille du texte par défaut en '%' au niveau du body, et d'utiliser 'em' au niveau du reste de vos conteneurs.

Mais comment savoir l'équivalent entre le % et le 'px' ? Pour cela OpenWeb nous propose un tableau d'équivalence :

Ainsi, notre CSS donnera :

body { font-size: 96%; } /* équivaut à 15px */

Grâce à cette méthode, votre texte s'adaptera très bien quelque soit le navigateur et la taille de l'écran de vos lecteurs.

[niveau: expert]

Je vous invite à lire ce billet consacré à « comment réaliser un bon formulaire HTML » qui donne de vrais bons conseils sur cet exercice plus compliqué qu’il n’y parait.

(via Alsacréations)

[niveau: intermédiaire-expert]

Quand on crée un site Internet, il faut toujours s’assurer que le rendu est correct. L’exercice devient complexe lorsque l’on souhaite que tout fonctionne pour les différentes versions d’Internet Explorer. Vous n’êtes pas sans censés savoir que, en particulier IE6, les Internet Explorer sont une catastrophe et qu’il faut utiliser des astuces pour rendre ses sites web d’aussi bonne facture sur les autres navigateurs que sur les IE!

Comme il n’est pas possible d’installer plusieurs IE sur une même machine (ou alors en faisant preuves d’astuces plus ou moins réussies), il existe une solution beaucoup plus simple : installer des machines virtuelles faites exprès par Microsoft et qui embarquent différentes versions d’IE !

Pour cela, il suffit d’installer Virtual PC (gratuit). Ensuite, il faut se rendre sur cette page dédiée où on vous propose :
- Windows XP SP3 avec IE6
- Windows XP SP3 avec IE7
- Windows XP SP3 avec IE8
- Windows Vista avec IE7

Vous remarquez que ces images de Windows ont une durée de vie. Une fois la date expirée, vous devrez retourner sur le site pour télécharger une nouvelle image.

Pour installer une machine virtuelle, c’est rapide et simple. Lancez le .exe de l’image Windows téléchargée, et choisissez où vous désirez extraire votre disque dur virtuel. Puis lancez Virtual PC. Une console apparait alors dans laquelle vous cliquez sur « Nouveau ».
Un assistant s’ouvre. Sélectionnez la première option (« Créer un ordinateur virtuel »). Donnez un nom à l’ordinateur (par exemple « IE6 XPSP3″). Ensuite choisissez une configuration par défaut (ici « Windows XP »). A l’étape suivante vous pouvez modifier la quantité de mémoire (pour XP je mets 256Mo au lieu des 128Mo proposés).
Enfin, à l’étape suivante, utilisez un disque existant, et en l’occurrence celui que vous avez extrait du fichier téléchargé précédemment (dans mon exemple « XP SP3 with IE6 2008-Dec.vhd »).
Et voilà !

La console de Virtual PC vous offre alors Windows XP avec IE6. Cliquez sur Démarrer, et Windows va se lancer dans une nouvelle fenêtre. Vous n’aurez plus qu’à ouvrir IE6 et à vous balader sur votre site web pour considérer votre rendu.