Pour le développement d’un site que j’ai en cours, j’ai dû intégrer directement les Gravatars aux membres postant des commentaires. J’ai été tout bonnement étonné de la simplicité à mettre en place en PHP. Tout ça est en complément de tous les plugins et intégration native sur les CMS et plateformes de blog (Drupal, Joomla, Dotclear ou Wordpress).

Pour rappel, un Gravatar (Globally Recognized Avatar) est une image qui vous suit sur tous les sites qui proposent leur intégration. Par exemple sur le blogs Wordpress, quand un commentaire est laché, l’adresse email est demandé et à partir de cet adresse email, Gravatar retourne l’avatar de l’utilisateur. C’est aussi simple que ça.

C’est parfaitement intégrable sur tous les sites. Aucune inscription n’est nécessaire !

Voici comment le mettre en place en PHP :

1
2
3
4
5
6

$email = "arnaud-k@machin.com"; // l'adresse email de l'utilisateur
$default = "http://www.machin.com/avatar-par-defaut.jpg"; // l'url de l'image à afficher par défaut si l'utilisateur n'a pas de Gravatar
$size = 40; // la taille pour l'affichage du gravatar (celui-ci sera carré)
 
// on construit ensuite l'url du Gravatar
$gravatar = "http://www.gravatar.com/avatar.php?gravatar_id=".md5( strtolower($email) )."&default=".urlencode($default)."&size=".$size;

Il n’y a plus qu’à afficher le Gravatar en html :

<img src="<?php echo $gravatar ?/>" alt="nom du membre" />

Pour ce premier « liens de la semaine », je te propose une petite sélection de tuto (souvent en anglais) pour Adobe Illustrator.

- Dessiner un texte fun et qui accroche l’oeil (avec divers effet tels que les reflets sur les lettres).

- Dessiner une peinture vectoriel, avec un effet d’aquarelle.

- Créer un effet lumineux et coloré.

Que du bon pour s’occuper pendant le week-end!

J’ai découvert cette galerie il y a peu. SpaceGallery (en anglais, créée par Eyecon) propose un bel effet de transition entre les photos. L’effet ressemble à l’effet utilisé par Mac dans le logiciel Time Machine.

voir la demo du plugin JQuery Space Gallery

Le fonctionnement est assez simple si on respecte bien deux ou trois consignes :

Tout d’abord il faut charger le fichier CSS nécessaire au plugin :

et quelques instructions css sont également nécessaires (mais qu’il faudra adapter à la dimension de vos images) :

#myGallery { /* bloc contenant la galerie */
	width: 800px;
	height: 650px;
}
#myGallery img {
	border: 2px solid #52697E;
}
a.loading {
	background: #fff url(../images/ajax_small.gif) no-repeat center;
}

Il faut ensuite charger JQuery et les fichiers JavaScript nécessaires au plugin. Il faut bien respecter l’ordre pour le chargement des fichiers :

<script src="jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="eye.js" type="text/javascript"><!--mce:1--></script>
<script src="utils.js" type="text/javascript"><!--mce:2--></script>
<script src="spacegallery.js" type="text/javascript"><!--mce:3--></script>

Ensuite dans ton fichier JavaScript insère le code suivant :

$(document).ready( function () {
   $('#myGallery').spacegallery({loadingClass: 'loading'});
});

Ce code initialise la galerie dans le bloc qui aura l’id ‘myGallery’. L’évènement .ready est la fonction de base de JQuery, elle permet l’exécution du script quand la page est complètement chargée.

Dans la page html4strict, on créé le bloc ‘myGallery’ dans lequel on insère les images que l’on souhaite afficher dans la galerie :

<div id="myGallery" class="spacegallery">
	<img src="photosExemples/2.jpg" alt="" />
	<img src="photosExemples/3.jpg" alt="" />
	<img src="photosExemples/4.jpg" alt="" />
	<img src="photosExemples/5.jpg" alt="" />
	<img src="photosExemples/6.jpg" alt="" />
	<img src="photosExemples/7.jpg" alt="" />
	<img src="photosExemples/8.jpg" alt="" />
	<img src="photosExemples/9.jpg" alt="" />
	<img src="photosExemples/10.jpg" alt="" /></div>

Le plugin est téléchargeable sur SpaceGallery, le .zip contient tous les fichiers nécessaires avec un exemple.