Archive for the ‘Web Dev.’ Category

Récupérer le favicon d’un site web automatiquement en PNG

Mardi, septembre 30th, 2008

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:
google-favicon

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:
favicon amazon Amazon.com
favicon google Google.fr
favicon mozilla Mozilla-europe.org
favicon wordpress 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: favicon site inexistant atzratzruaztuay.com

Ajaxload, générateur d’images de chargement pour AJAX

Dimanche, septembre 28th, 2008

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.

ajax-loader1 ajax-loader5 ajax-loader2 ajax-loader4

ajax-loader3

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

Tester son site web sur Safari/Webkit

Mercredi, juillet 23rd, 2008

Le site BrowsrCamp permet de générer automatiquement une capture d’écran de votre site web afin d’en connaître le rendu sur le navigateur Safari d’Apple.
La procédure est simple: entrez l’adresse de la page à tester, la largeur d’écran (de 800 à 1600 pixels) et le format de rendu jpeg ou png. Sous quelques secondes vous aurez le droit à une belle capture d’écran.

Si vous préférez plus d’interactivité et un rendu immédiat, ou tout simplement ne pas être dépendant d’un service web, vous pouvez installer le navigateur Midori (pour Gnome) qui utilise le même moteur de rendu Webkit que Safari, en attendant la future version “Webkit” du navigateur Epiphany.

Pour installer Midori sur Ubuntu:

sudo aptitude install midori

ou directement en cliquant sur ce lien: apt://midori

TimThumb, script php pour la génération de vignettes

Dimanche, juillet 13th, 2008

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…)

BarackSlideshow, un diaporama léger basé sur mootools

Jeudi, juillet 10th, 2008

BarackSlideshow est un élégant diaporama écrit en javascript et basé sur le framework Mootools (version 1.2).

Son interface est simple et jolie, les fondus de transition sont du plus bel effet et le curseur mobile donne l’impression d’être face à du flash. Sauf que tout est en html+css+javascript, et évidemment valide xhtml. Le code quant à lui est léger, et donc rapide à charger.

Son nom lui vient du fait qu’il est inspiré du slideshow présent en page d’accueil du site de Barack Obama.

Site web du script: Devthought - BarackSlideshow
Demo: BarackSlideshow demo
Source de l’article: BarackSlideshow - Lightweight Mootools Slideshow Script

Je me mets au web 2.0, le web social, grâce à Twitter

Jeudi, juillet 10th, 2008


Non, il ne faut pas rêver non-plus, mais quoi encore!
J’ai assez de mal à sociabiliser sur le net et encore plus à rentrer dans un comportement de troupeau de moutons virtuels, pour aller m’inscrire sur un service social du net et m’y faire de pseudo-amis…
J’avais déjà eu l’occasion de voir Twitter, et de penser que ça pouvait être pas mal pour des gens ayant la nécessité de vivre en troupeau, mais sans aucun intérêt pour moi.

Néanmoins, je suis revenu (en partie) sur mon avis à la lecture de quelques articles portant sur l’API Twitter.
Via son API, Twitter peut être utilisé pour d’autres finalités que celle d’écrire son petit bout de quotidien qui lui passe par la tête et de le montrer fièrement à ses contacts ou à des inconnus sur son blog.
Twitter peut devenir un outil d’automatisation au sein d’une application.

(more…)

Travailler sur son nouveau site web grâce à OpenDNS

Vendredi, juin 13th, 2008

J’utilise au quotidien les services OpenDNS pour les résolutions de noms de domaine, histoire de remplacer les serveurs DNS poussifs de mon FAI Neuf.
Les serveurs DNS de neuf sont souvent très lents et parfois indisponibles et on ne sait pas avec quelle logique ils sont gérés, ceux de Cegetel où j’étais avant la fusion Neuf/Cegetel étaient pire que tout et j’étais même obligé d’utiliser les DNS de mon cher FAI précédent Nerim.

Puis j’en suis venu à utiliser OpenDNS, qui franchement est plus rapide et plus fiable. Pas grand chose à faire, juste rajouter 208.67.222.222 et 208.67.220.220 dans la configuration serveur dns primaire et secondaire de la connexion internet de son ordinateur ou de son routeur. Je sais également que certains utilisent OpenDNS pour leur serveur dédié.

En lisant cet article: Developing with OpenDNS, j’ai découvert encore un des avantages de OpenDNS: le “CacheCheck“.

Les caches des serveurs DNS se remettent à jour régulièrement en s’interrogeant les uns les autres, si bien que si une modification sur un nom de domaine est faite, celle-ci se propage au travers des différents serveurs DNS du monde pour refléter les changements effectués.
Cette propagation peut prendre un temps indéterminé allant de quelques instants à 48h, selon que l’on effectue la modification juste avant un rafraîchissement du cache ou pas et que la chaîne de propagation est plus ou moins longue jusqu’à votre serveur dns…
Et pendant ce temps (pouvant aller jusqu’à 48h), le développeur web qui vient de faire pointer son nom de domaine vers un nouvel hébergeur ou l’admin système ragent de ne pouvoir commencer à bosser sur son site et le tester immédiatement ou bien de tester la config de son serveur de mail…

Le CacheCheck de OpenDNS répond à ce problème et permet de demander un rafraîchissement immédiat des infos DNS pour un nom de domaine particulier. Ainsi si vous utilisez OpenDNS comme serveur dns pour votre connexion, le nouveau pointage dns de votre nom de domaine (nouveau ou pas) peut être mis à jour immédiatement et vous pouvez donc commencer à l’utiliser et travailler dessus sans latence.
Très pratique…

Lien: OpenDNS, CacheCheck
Source: Developing with OpenDNS | Scott Mallinson

SimpleXML chez 1and1

Mardi, juin 10th, 2008

Envie de manipuler un peu de XML facilement avec SimpleXML en php, mais vous êtes hébergé en mutualisé chez 1and1.fr et vos scripts refusent de fonctionner… des interdictions dans tous les sens, des fonctions non prises en charges, l’impression d’être attaché avec des menottes dans le dos?

Voici la petite procédure à suivre:

D’abord il est probable que votre hébergement soit encore en php4 par défaut alors que php5 est installé. Or SimpleXML est une composante de php5.
Pour activer le support de php5, placer un fichier .htaccess dans votre dossier (où à la racine de votre site) avec dedans:
AddType x-mapp-php5 .php
AddHandler x-mapp-php5 .php

Cela permet d’activer l’interpréteur php5 pour les fichiers php.

Puis on se rend compte que la fonction simplexml_load_file a été désactivée car “la directive allow_url_fopen est sur Off dans la configuration de PHP”.
C’est bien dommage car cette fonction est très efficace pour charger un fichier xml en tant qu’objet xml. La FAQ de 1and1 conseille plutôt d’utiliser la fonction fsockopen (toute bridée) et implicitement de passer par simplexml_load_string ensuite. Ils donnent même un exemple bien poussif pour utiliser fsockopen chez 1and1. Il n’en reste que cette solution est bien trop lente et surtout bien trop lourde (en testant leur solution, charger un fichier xml en objet est à vue d’oeil 50 fois plus lent que par simplexml_load_file).
On va donc faire fit de cette solution et activer la directive allow_url_fopen = On. Il suffit pour cela d’ajouter un fichier php.ini dans le répertoire où s’exécutent vos scripts en mettant dedans la ligne
allow_url_fopen = On

Ainsi il est possible de charger un fichier distant avec simplexml_load_file.

Recommandations:
- Veillez à bien sécuriser vos scripts afin que l’on ne puisse utiliser à votre insu cette fonctionnalité pour charger du contenu ou des scripts.
- Et puis veillez à optimiser vos scripts pour qu’ils soient efficaces et qu’ils consomment le moins de ressources possible afin de ne pas vous faire taper sur les doigts (coupure du site, mise sur un serveur poubelle) par 1and1.

googleDrive

Mercredi, avril 23rd, 2008

googleDrive est un petit projet expérimental qui n’a d’autre but que la faisabilité technique. Il s’agit d’un mash up de Google Maps avec du flash et du javascript permettant de conduire une petite voiture (à l’aide des flèches du clavier) dans les rues sur une carte générée par Google.
Vous pouvez, choisir votre carte en définissant la localité.

Lien: phatfusion : googleDrive

BarCamp Wordpress à Paris

Vendredi, avril 18th, 2008

Rencontres et ateliers autour de la plate-forme de publication Wordpress.
WordCamp se déroulera le 3 mai 2008, de 11H à 20h, à La Cantine (Paris 2e)