Galipe

Le favicon c’est ce petit icône que récupère votre navigateur pour l’afficher dans la barre d’adresse, l’onglet ou les favoris:

Il est en général au format ICO (icône pour windows) et très rarement en GIF ou PNG, bien que les navigateurs standards (comme Firefox, Safari ou Opera) savent gérer ces formats.

Google propose un service automatique de conversion de cet icône au format PNG. Très pratique donc pour les webmasters afin d’afficher automatiquement dans leurs scripts l’icône d’un site web, pour agrémenter leurs liens hypertextes par exemple.

Il suffit d’appeler dans votre code HTML l’image avec l’url suivante:
http://www.google.com/s2/favicons?domain=nomdedomaine.extension
exemple:
<img src="http://www.google.com/s2/favicons?domain=amazon.com" />

Voici quelques illustrations:
Amazon.com
Google.fr
Mozilla-europe.org
Wordpress.com

Et si Google ne peut pas récupérer de favicon car le site n’existe pas ou n’a pas de favicon, un petit globe est alors affiché.

Exemple: atzratzruaztuay.com

Voici un truc tout bête, certes pas nouveau, mais qui rend bien service.
Lorsque dans un script je fais un appel asynchrone pour rapatrier ou mettre à jour des données ou du contenu dans un page web (heu, oui… on appelle ça vulgairement AJAX), j’ai parfois besoin de mettre une petite image qui bouge pour signifier à l’utilisateur qu’il se passe quelque chose en arrière plan. On appelle cela un pre-loader.
Le problème c’est que fabriquer soi-même ce genre d’images est un peu une perte de temps. Et il faut parfois adapter cette image à la charte et aux couleurs du site, donc n’en utiliser qu’une seule pour tous vos projets ne résout pas le problème.
Aussi le site Ajaxload se propose de vous générer ce genre d’images facilement.

Au programme: une interface ultra simple à utiliser, le choix parmi 36 modèles de pre-loader, le choix de la couleur à donner à votre image, ainsi que celle du fond via une palette de couleur (ou code Hexadécimal) ou même en fond transparent.

Note: C’est une info une peu vieillotte (je sais et je m’en fous!), mais comme j’ai parfois besoin de ce site web et que je le paume toujours dans les méandres de mes bookmarks, en faire une note ici me permettra d’avoir une façon de plus de le retrouver, tout en faisant partager l’info.

Lien: Ajaxload - Ajax loading gif generator

Il y a peu de temps Uggy présentait OptiPNG dans son billet OptiPNG - Optimisation des fichiers PNG , un outil qui “permet facilement d’optimiser la taille d’un fichier PNG sans perte de qualité”.

Sitôt testé, sitôt adopté.! Cet outil est à la fois d’une simplicité et d’une efficacité bien pratique au quotidien surtout si l’on publie ses images sur le web. Le gain en stockage et en bande passante est au final et sur le long terme non-négligeable et toujours bon à prendre.

Bref c’est un outil que je vais utiliser au quotidien. Étant plutôt flémard de nature (dans le sens où cela ne me dérange pas de fournir un effort ponctuel complexe si cela me facilite la vie au quotidien), j’ai donc créé une action pour Nautilus afin de ne pas avoir à taper la commande et le chemin du fichier dans le terminal à chaque fois.
La voici donc en partage: Action OptiPNG sur GrumZ.net

(more…)

TimThumb est un petit script php bien pratique qui permet de retailler à la volée des images.
Cela permet notamment de faire des vignettes (thubnails) assez facilement.
Il supporte les images de type jpeg, gif et png, il fonctionne avec GD Lib et php à partir de la version 4.3.

Concrètement comme fonctionne-t-il?
Tout simplement en lieu et place de l’appel à votre balise image habituelle sur votre site ou dans votre application php
<img src="monimage.jpg" />
remplacez par
<img src="/scripts/timthumb.php?src=monimage.jpg&h=150&w=150&zc=1" />
h pour la hauteur désirée, w pour la largeur désirée et z 1 si vous souhaitez utiliser le zoom, 0 sinon.

TimThumb ira automatiquement lire le fichier image, le retailler aux dimensions voulues et mettre le fichier en cache (afin de ne pas refaire le même traitement à chaque fois) puis afficher votre fichier. Tout cela de façon transparente.

(more…)