Ce site est bâti à partir d'une version v3.0p4 de GuppY, sur laquelle j'ai greffé des éléments empruntés aux versions suivantes, et que j'ai modifiée, selon un triple objectif :

• passage du code en XHTML et nettoyage
• transformation des tableaux en DIV
• extension de la CSS native : ajouts de styles et de classes

pour obtenir un GuppY fonctionnel mais plus propre, avec un code compacté et conforme. Le site est donc en XHTML qui valide. Les archives rendent compte de son élaboration graduelle. Les skins, présentées dans la garde-robe, sont essayables à partir de la boîte Infos site. Presque toutes sont en DIV ; normalement, toutes valident.

Le boudoir	Bon, alors je viens de suivre ton tutoriel pour mettre ...	(17.09.2006 - 12:17)
Le boudoir	Bonjour Isa,Je m'intéresse aujourd'hui au slidermaker ...	(17.09.2006 - 11:14)
Le garage	fgfgfgfg ...	(26.07.2006 - 13:41)
Le garage	dfdfdfdfdf ...	(26.07.2006 - 13:22)

Tous les billets sont listés ici et classés par titres et mois dans la boîte Archives.





Voici un diaporama très léger, légendé et automatique à intégrer n'importe où dans GuppY. Il suffit de :
- ajouter quelques lignes de javascript dans hpage.js.
- copier-coller le code généré et voilà !
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. J'ai procédé à quelques réaménagements sur le site.

Test : test

D'abord, j'ai découvert la fonction php urlencode(), qui permet de nettoyer les URL et de les formater proprement. Après l'avoir ajoutée au moteur de GuppY, je l'ai appliquée aux liens de la zone de téléchargement et du répertoire de signets ; j'ai ainsi rétabli la validation W3C de ces pages, que j'avais perdue à cause d'accents mal interprétés dans les URLs.

J'ai ensuite ajouté dans le pied de page des billets, des articles et des divers générateurs du site une icône permettant de bookmarker la page courante sur Del.icio.us, le service de publication et de partage de signets en ligne. J'en ai profité pour modifier les titres des billets, désormais cliquables.

Enfin, j'ai ajouté, dans la classe #footer de la CSS de l'actuelle skin, un effet d'opacité sur les icônes du pied de page. J'y ai associé un rollover en CSS, pour qu'au passage de la souris, l'opacité se dissipe et que l'icône survolée apparaisse clairement.

Voici le codelet CSS utilisé à cet effet :

#footer img {
filter : alpha(opacity=60);
-moz-opacity: 0.6;
}
#footer a:hover img {
filter : alpha(opacity=100);
-moz-opacity: 1.0;
}

Le premier code applique l'opacité sur toutes les images incluses dans la div #footer, tandis que le second applique une opacité nulle sur toutes ces mêmes images, survolées par le curseur.

Edit : IE ne reconnaissant pas l'attribut hover: appliqué à une image, l'effet de rollover n'est visible qu'avec FF. Edit (jeudi 6 avril) : grand merci à Alexandre, qui m'a proposé une solution habile, pour contourner le problème. J'ai actualisé le code CSS en conséquence.

Edit 2 : je viens de découvrir le superbe script smoothscroll.js de Kryogenix, qui permet de regagner le haut d'une page en la faisant doucement défiler, entre autres usages. J'ai donc installé le script sur le site : un clic sur la petite flèche, située en bas de chaque billet, permet de remonter la page. Je viens de faire une découverte bien pratique et je m'empresse de la partager, car elle vous sera sûrement très utile. Il s'agit du chat Gabbly, une sorte de chat universel, qui ne nécessite aucune installation.

Une greffe de chat à la demande

Imaginons la situation suivante : vous êtes GuppYste et vous voulez utiliser le générateur de galeries lightbox, mais vous rencontrez une difficulté avec un des champs à renseigner. Vous pourriez poser votre question dans le garage de Saute-Mouton ou sur le forum de FreeguppY, mais il faudra patienter et la procédure est un peu longue.

C'est là que Gabbly entre en jeu. Dans la barre d'adresse de votre site, ajoutez http://gabbly.com/ devant l'URL de la page que vous consultez. Si vous vous trouvez sur la page contenant le générateur de galeries lightbox, vous obtenez l'URL suivante : http://gabbly.com/http://www.saute-mouton.org/pages/genartgalerie.php et... un chat est apparu en surimpression sur la page !

Vous disposez de trois modes pour afficher le chat : un mini-chat dans une popup DHTML, un panneau latéral droite vertical ou encore un panneau horizontal inférieur :


Envoyez maintenant l'adresse de cette page à quelques amis GuppYstes et retrouvez-vous tous sur le chat greffé sur le générateur pour discuter et vous entraider ! Pratique, non ?

Fonctionnalités à l'usage des webmasters

On peut même raffiner : en effet, le webmaster peut anticiper et inscrire, à la fin d'une page, un message contenant un lien pointant sur l'URL de la page sur laquelle le chat est greffé, du genre :

Retrouvez-vous sur le chat de ce générateur pour en discuter !

Notez que le chat s'adapte universellement, de sorte que chaque page d'un site peut avoir sa propre fenêtre de chat, indépendante de celle d'une autre page. En outre, chaque chat dispose du fil RSS de ses transcripts, qui se présente sous cette forme.

Enfin, cherry on the cake, vous pouvez également insérer un chat sur votre site, dans une iframe. Aucune installation n'est requise : cliquez sur l'onglet "embed" du site de Gabbly, définissez la taille de l'iframe et copiez-collez le code généré à l'endroit où vous voulez intégrer un chat.

Notule guppystique

Si votre site tourne avec GuppY, vous ne pourrez utiliser le chat qu'en désactivant la fonction antiframe de GuppY :

• Ouvrez le fichier inc/hpage.js, après en avoir fait une sauvegarde.
• Effacez les lignes suivantes, situées au début du fichier :
  
  

  if (window!=top) {
    top.location=window.location;
  }

  
  
• Sauvegardez la modification et envoyez le nouveau fichier par FTP dans inc/

Aujourd'hui, pendant un cours avec ma terrible classe de 5ème :

Dan : M'dam' !
Moi : Oui, Dan...
Dan : Euh... J'ai perdu mon ongle.
Moi : Quoi ? Qu'est-ce que tu racontes encore ?
Dan : V'nez voir, mon ongle est tombé. J'ai plus que du doigt...

(Il faut savoir qu'il y a quelques semaines, Dan a eu les doigts broyés dans la porte des toilettes des filles du collège, tandis qu'il s'y amusait de façon douteuse.)

Moi : Ah non, je ne viens pas voir... Ecoute, ramasse ton ongle et mets-le dans ta trousse. Tu le donneras à ta famille d'accueil en rentrant ce soir, hein ?
Dan : Oui, mais je sais pas où il est tombé.
Moi : Bon, écoute, c'est pas grave, il repoussera ! Finis donc ton exercice !...

J'ai cru que j'allais tourner de l'oeil. Aurais-je manqué de coeur ? J'ai mis à profit du temps dont je ne dispose pas en réalité (sic) pour commencer à adapter mes générateurs de galeries avec un code en DIV / CSS. Les résultats de mes premiers tests sont visibles sur cette page (voici la même, mais sans les colonnes latérales, en affichage élargi).

Je rencontre un léger problème de centrage des galeries. A tout le moins, le code des galeries sera plus léger et plus modulable, si j'arrive à faire ce que je veux avec les générateurs. Cela faisait un moment que je travaillais sur ce générateur de galeries d'images - à vrai dire, depuis que j'ai découvert l'extraordinaire script lightbox.js de Lokesh Dhakar - mais j'ai eu bien du mal à en venir à bout !

Lightbox.js est un javascript qui permet d'afficher, en surimpression sur la page, une image agrandie à partir d'un clic sur sa vignette. L'effet produit est très élégant et permet de se passer des traditionnelles et encombrantes popups propres aux galeries d'images. En outre, le script se dégrade gracieusement sur les vieux navigateurs et dans le cas où le javascript est désactivé. Bref, après plus de 15 heures de brainstorming intensif, j'ai réussi à mettre au point une version bêta.

Démonstrations

Voici donc un exemple de mini-galerie, insérée dans un billet et créée très simplement avec ce nouveau générateur (en version bêta ; utilisez-le à vos risques et périls) :


Notez que l'effet d'agrandissement est beaucoup plus joli avec FF qu'avec IE, as usual
Edit [2.04.2006] : ceci est corrigé dans la dernière version du script, qui n'utilise plus d'image de fond, mais les filtres d'opacité.

Les galeries générées peuvent également être insérées dans un article [démonstration ici].

En outre, un second générateur permet de créer des galeries similaires, exploitant le même script, mais basées sur le modèle sample.php et entreposables dans le dossier pages/ de GuppY sous forme de pages externes [démonstration ici]. Toutefois, il faut que j'adapte ce générateur à la version 4.5.12 de GuppY, car les pages qu'il produit actuellement ne fonctionnent qu'avec les versions 3.04 de GuppY...

Précisions importantes

Je dois d'abord préciser que les miniatures ne sont pas de vraies miniatures : en fait, il s'agit des images affichées à une taille très réduite (et paramétrable). Il serait sans doute intéressant d'utiliser la librairie GD2 qui automatise la création de vraies miniatures, pour réduire le poids de la planche de vignettes et accélérer son chargement. Mais, d'une part, je ne sais pas manipuler cette librairie et, d'autre part, je voulais, dans un souci de simplicité, réduire les manipulations au minimum. De fait, après avoir uploadé les 5 3 fichiers indiqués (manipulation à ne faire qu'une seule fois), il suffit de créer un sous-dossier d'images dans le dossier img/ de GuppY, de générer le code avec l'un des générateurs et de le coller pour obtenir une galerie fonctionnelle et élégante.

Je dois également préciser que, pour fonctionner, cette galerie nécessite l'insertion de 2 lignes de codes dans le fichier inc/hpage.inc de GuppY. Pour le reste, le code est totalement indépendant des fichiers-source de GuppY.

Les utilisateurs avancés peuvent insérer des commentaires sur les images, soit sur toutes, soit sur une partie d'entre elles seulement. Toutefois, il faut intervenir manuellement sur le code généré et cela suppose donc une familiarité minimale avec le code HTML. Il suffit de localiser les attributs title des images dans le code généré et de remplir cet attribut avec la légende, comme ceci :

<a rel="lightbox" href="img/test/test7.jpg" title="Et hop un commentaire ici !"><img src="img/test/test7.jpg" width="100" height="75" alt="Agrandir l'image" /></a>

Par ailleurs, je dois avouer qu'actuellement les galeries générées reposent sur une structure tabulaire, ce qui n'est guère orthodoxe... La prochaine version devrait évoluer vers une mise en page en DIV floatées, assorties d'un traitement en CSS.

Last, but not least, j'ajoute que le code généré est propre et passe avec succès l'épreuve redoutée de la validation W3C.

Nouvelle version

Evidemment, je viens de m'apercevoir qu'il y a deux jours que Lokesh Dhakar a sorti la version 2.01 de lightbox.js, dont vous pourrez admirer une démonstration bluffante sur cette page. Cela dit, la mise en place du script devient plus lourde, puisque l'auteur utilise deux librairies Ajax très à la mode, à savoir Prototype.js et script.aculo.us. Ces librairies permettent de créer des effets d'animations impressionnants, comme le montre la démo, mais les ajouter dans GuppY risque d'augmenter considérablement le nombre de javascripts que chaque page doit supporter, d'une part, et d'autre part, d'alourdir le poids des pages. Aussi vais-je m'en tenir pour le moment à la version 1, en empruntant quelques corrections à la version 2.

J'ai ainsi modifié la feuille de style lightbox.css en m'inspirant des changements apportés dans la version 2.01. Désormais, les images de fond, overlay.png et blank.gif ne sont plus nécessaires. L'effet de superposition est ainsi plus léger et aussi joli avec IE qu'avec FF.

Enfin, Vanix a signalé un couic se produisant avec IE, mais pas avec FF : en effet, les menus déroulants (exemple : celui de ma boîte de recherche) "trouent" les images agrandies et le "voile sombre". J'ai pensé qu'il s'agissait d'une histoire de z-index à régler dans la CSS, mais mes essais se sont révélés inconcluants. Je poursuis néanmoins les recherches...

Edit [14h43] : Vanix a trouvé une parade pour corriger cet ultime couic des menus déroulants. J'ai mis à jour le fichier lightbox.js en conséquence.

Road map

Dans un premier temps, j'aimerais mettre à jour le générateur de galeries externes, pour les utilisateurs de la dernière version 4.5 de GuppY.

Ensuite, je souhaiterais remplacer la présentation tabulaire, un peu lourde, par une présentation en DIV floatées.

Enfin, je m'apprête à contacter Nicolas, pour voir s'il ne pourrait pas inclure ce script en option dans le dernier plugin de diaporama qu'il est en train de développer. Ce plugin a l'avantage de générer des miniatures des images classées par catégories et cela permettrait d'accélérer le chargement des pages et d'automatiser la création de galeries thématiques.