Ce billet est en quelques sortes une réaction suite à un article lu sur le célèbre blog Presse-Citron (qui date quand même d’il y a deux ans mais on me pose encore souvent la question …).

Lors de la conception de pages Web que ce soit pour votre site perso ou celui de votre entreprise, bien souvent, vous en avez marre de voir encore et toujours les même styles d’écritures « basiques » pour vos titres. D’ailleurs, je me trouve également dans ce cas.

Voulant donner une meilleure gueule à mes pages, j’ai donc commencé une longue recherche sur une façon qui pouvait conduire à de nouveaux styles pour mes titres. Je suis d’abord tombé sur l’option « titre en image » mais je dois avouer que l’idée de devoir ouvrir Photoshop à chaque fois que je crée une page m’a quelque peu effrayé.

J’ai donc continué à chercher et je suis tombé sur un petit script JavaScript/PHP très sympa : FaceLift.

La configuration et l’installation sont, de plus, très simple ! Pour le téléchargement, cela se passe du coté de son site officiel, sur la page Downloads.

- Configuration et installation.

Pour commencer, uploadez vos fichiers .TTF dans le dossier « fonts » du répertoire d’installation de FaceLift. Ensuite, ouvrez avec votre éditeur préféré le fichier config-flir.php.

Repérez l’endroit où sont déclarés les autres fichiers de fontes (vers la ligne 40 – 41), puis procédez de façon analogue pour ajouter vos polices :

<?php
$fonts['votre_police'] = 'votre_fichier_font.ttf';
?>

Ensuite, vous n’aurez qu’a spécifier « votre_police » dans la propriété font-family de votre CSS pour l’élément que vous souhaitez remplacer.

Ajoutez maintenant le script comme un script javascript classique dans les en-têtes de vos pages HTML puis, juste avant la fermeture de la balise body, lancez la procédure de remplacement :

Note : Pensez à remplacer /repertoire/dinstallation/facelift/ par le chemin vers le répertoire d’installation de FaceLift (où se trouve le fichier generate.php) ainsi que h2 par l’élément que vous souhaitez remplacer.

Voila ^^
Nico .

Un des principaux calvaire de tout webmaster en train de conçevoir son design est de trouver des jolis petits icônes pour illustrer les items des menus ou des titres …

Voici quelques outils qui vous faciliteront un peu la vie à ce niveau :

1. Les moteurs de recherche d’icônes

Nombreux sur les web, les Google des logos vous permettent de trouver en trois clics l’icône que vous recherchez en différent styles. Seul inconvenient, ces modules sont édités par nos amis anglophones, ainsi, vos critères seront à entrer …. en Anglais !

• http://www.iconfinder.net
• http://www.iconseeker.com
• http://www.iconlet.com
• http://www.iconlook.com

Un peu moins orienté Web, le moteur PngFactory peut également vous permettre de trouver quelques icônes, bien qu’il dispose d’une collection moins importante que les sites présentés ci-dessus.

2. Les collections « navigables »

Si vous ne savez pas exactement ce que vous recherchez (ou que vous ne savez pas le traduire dans la langue de Shakespeare …) vous pourrez toujours naviguer dans des collections en espérant trouver LA perle rare qui va transformer votre design en réelle oeuvre d’art.

Le moteur IconFinder permet de naviguer entre les 144 collections qu’il indexe, de lister ces collections pour enfin vous permettre de télécharger l’icône désiré sous forme de fichier PNG ou ICO.

Peut être un peu plus interessant pour les webmaster étant donné que nous sommes très limités par la taille des icônes, IconLet permet de sélectionner la taille dont vous disposez pour qu’il vous liste tous les icônes qui y correspondent.

Le site IconsPedia, quant à lui, vous présente un classement par thèmes et catégories afin de vous guider dans votre recherche. Les icônes sont cependant plus gros que dans les sets dédiés au Web (64 pixels par 64).

3. Quelques collections …

La célèbre collection, qu’il n’est même plus nécessaire de présenter, est la collection disponible sur le site Famfamfam.com. Cette collection à déjà fait le tour du web et a été utilisée par des sites relativement important (Air France notamment).

La dernière collection que j’ai découverte et que j’utilise presque à chaque fois que je souhaite insérer un icône est le set créé par PinkVoke. Un peu dans la même lignée que Famfamfam, on dispose ici d’une collection de plus de 1000 icônes pouvant être utilisé à toutes les sauces (grâce aux PSD fournis, permettant de les « combiner »).

Idéale pour toutes vos applications multi-lingue, cette collection créée par Famfamfam présente les drapeaux de 247 pays du monde. Les images sont nommées grâce au code ISO 3166-1 alpha-2 des noms des pays. Cela permet notamment d’automatiser certaines tâches, comme par exemple la création d’une liste de tous les pays, avec leur drapeau.

Voila qui pourra vous faciliter la très longue tâche qu’est la recherche d’icônes !

Nicolas.