nyroBlog
Bannière NyroBlog, par FB
Image par FB - ?

Tag : Internet


Scriptaculous : Callbacks de l'effet Shake.

Comme j'ai oublié mes photos de ce week-end (à Beverly Hills), un petit poste programmation.

Je m'amuse avec Scriptaculous pour faire des retours d'informations intéressants aux utilisateurs. Durant mes tests, je me suis rendu compte que les callback que je donnai à l'effet Shake n'était jamais exécuter.

Un petit tour dans le fichier effects.js et je me rends compte que rien n'est fait pour le faire. En effet, l'effet Shake est simplement une combinaison de 6 effets Move les uns après les autres, dans des sens différents. Et les options de callback données à l'effet Shake ne sont pas retranscrit à chacun d'entre eux.

Qu'à cela ne tienne, voici le bout de code permettant de palier à ça (dont la modification de ce fameux effet) :

Effect.combinedOptions = function(options) {	
	var ret = {
		start:{},
		update:{},
		finish:{}
	};
	
	if (options.beforeStart)
		Object.extend(ret.start,{'beforeStart':options.beforeStart});
	
	if (options.beforeUpdate) {
		Object.extend(ret.start,{'beforeUpdate':options.beforeUpdate});
		Object.extend(ret.update,{'beforeUpdate':options.beforeUpdate});
		Object.extend(ret.finish,{'beforeUpdate':options.beforeUpdate});
	}
	if (options.afterUpdate) {
		Object.extend(ret.start,{'afterUpdate':options.afterUpdate});
		Object.extend(ret.update,{'afterUpdate':options.afterUpdate});
		Object.extend(ret.finish,{'afterUpdate':options.afterUpdate});
	}
	
	if (options.afterFinish)
		Object.extend(ret.finish,{'afterFinish':options.afterFinish});
	
	return ret;
}

Effect.Shake = function(element) {
  element = $(element);
  var options = Effect.combinedOptions(arguments[1] || {});
  var oldStyle = {
    top: element.getStyle('top'),
    left: element.getStyle('left') };
  return new Effect.Move(element, 
      Object.extend(options.start,{ x:  20, y: 0, duration: 0.05, afterFinishInternal: function(effect) {
    new Effect.Move(effect.element,
      Object.extend(options.update,{ x: -40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
    new Effect.Move(effect.element,
      Object.extend(options.update,{ x:  40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
    new Effect.Move(effect.element,
      Object.extend(options.update,{ x: -40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
    new Effect.Move(effect.element,
      Object.extend(options.update,{ x:  40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
    new Effect.Move(effect.element,
      Object.extend(options.finish,{ x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) {
        effect.element.undoPositioned().setStyle(oldStyle);
  }})) }})) }})) }})) }})) }}));
}

Le combinedOptions prendra donc en paramètre l'objet option de l'effet Shake pour en ressortir un autre, dans lequel on aura inséré les callback nécessaires selon si l'effet Move est au début, au milieu ou à la fin de l'effet Shake.

Et voilà, c'est tout bon maintenant.

A mon avis ce bug existe pour beaucoup d'autres effets de combinaisons, vous pouvez employer la même technique (et la combinedOptions pour les corriger). J'ai soumis le code sur le wiki de scriptaculous.

Je n'avais jamais testé auparavant Scriptaculous et prototype. C'est une nouvelle façon de voir le javascript et c'est tellement agréable de coder avec ces framework que je crois que je ne pourrai plus m'en passer, après seulement quelques jours d'utilisation...

Gallerie d'images automatique

Comme j'ai un peu de temps, je vous donne ici les sources du script que j'ai mis en place pour ma galerie d'images.

En fait, j'utilise JW Image Rotator pour le diaporama en flash. Ce player est génial et très bien documenté. On peut le faire communiquer avec du JavaScript très simplement. C'est donc ce que j'ai fait avec la liste déroulante qui va envoyer l'url de la playlist à recharger.

Pour gagner du temps et être vraiment simple à utiliser, j'ai décider de ne pas avoir d'administration et que le simple fait d'envoyer un nouveau dossier mettrait en ligne les photos. La liste déroulante est donc générée en PHP pour faire apparaitre tous les dossiers existants. Le script générant la playlist récupère juste la liste des fichiers du dossier demandé et ressort un fichier XML, au format souhaité.

Etant donné que j'ai hébergé ce script sur mon ftp de free, j'ai du changer un peu les fonctions de récupération des dossiers/images pour qu'il fonctionne. si vous êtes dans le même cas, utiliser fonc.free.php à la place de fonc.php et tout ira bien.

Enfin, j'ai mis en place un rss pour permettre aux gens de suivrent simplement l'actualité de mes photos. Il suffit simplement de créer un flux XML au format demandé et on a un beau fil RSS tout nouveau tout beau !

NB : Pour mettre en place ce script sur votre site, vous devrez sans doute modifier des petits trucs dans tous les fichiers. Faites un tour complet avant.

PHP : un système de cache très simple et efficace

Lorsqu'on doit lister des éléments provenant d'une base de données avec énormément de liaisons dans la requête, le traitement prend quelques secondes et le serveur en prend un coup à chaque affichage de page.

Pour palier à ça, il faut mettre en place un système de cache des pages de listing.

Un système de cache consiste en l'enregistrement de la page une fois totalement traitée (donc ce qu'on affiche, le code HTML final) puis à le ressortir lors de l'appel suivant de la même page. Bien sûr, dans tout bon système de cache, on peut spécifier la durée de vie de ce cache (1 heure par exemple) pour qu'il soit effacé au delà et remplacé par un nouveau.

Avec ceci, on gagne donc en ressource serveur (beaucoup moins de connexions vers le serveur MySQL) mais les pages affichées ne sont pas synchronisées à l'instant T, on a 1 heure maximum de décalage. Même si ce n'est pas énorme, ce peut être handicapant dans certains cas, il faut le garder à l'esprit.

Pour un site que j'ai mis en ligne samedi dernier, qui utilise jusqu'à 11 tables dans ses listings, j'ai dû mettre en place un tel système pour gagner en temps d'affichage. L'avantage est que les listings changent une ou deux fois par jour au grand maximum, pas du tout pour la plupart. Le temps du cache est donc pour l'instant d'une heure, mais il est possible que je le monte à 2 voir 3 heures.

Pour mettre en place un tel système, j'ai regardé s'il n'existait pas un bout de code ou une classe sous licence GPL prête à l'emploi. Après quelques googlisations, j'ai trouvé mon bonheur.

Un petit tour dans le code pour changer le dossier d'enregistrement du cache afin de le rendre inaccessible depuis le site, et pour voir comment il générait ses noms de cache.

Il utilise simplement l'URL de la page demandée, y ajoute tous les paramètres donnés en GET et en fait le MD5 (pour avoir toujours la même longueur de nom fichier et pas de problèmes avec des caractères spéciaux) et y donne l'extension .cache.

Le gros plus de cette classe, c'est qu'elle permet de mettre en cache la page PHP zone par zone. On peut ainsi imaginer une page avec une partie sans cache (le menu avec les infos de connexion par exemple), une partie avec un cache d'une heure (un listing qui change assez souvent) et une partie avec un cache d'une journée (un classement journalier par exemple).

De plus, si vous voulez forcer la reconstruction du cache, il suffit de mettre le paramètre rebuild en GET dans l'URL de la page.

Une classe à ajouter à votre librairie de toute urgence ! (et le site dans vos favoris...)


Modification de décembre 2010

Comme le fichier n'est plus accessible depuis le lien donné plus haut, voici le fichier que j'avais gardé dans mes archives.

Un ministère sur Skyblog ?

Et oui, c'est possible !

Fadela Amara, Secrétaire d'Etat à la politique de la Ville, a ouvert deux blogs.

Le premier est un "blog officiel qui s'adressera à l'ensemble de nos concitoyens pour les entendre sur la politique de la ville qui n'a pas vocation à s'adresser uniquement à une catégorie de population", a-t-elle indiqué. Le second, accueilli sur la plateforme skyblog.com de la radio musicale Skyrock - première radio des 13-24 ans - vise les jeunes. "Il faut que la jeunesse se sente partie prenante du plan banlieue. Ce sera une discussion en direct avec les jeunes des quartiers en difficulté. Je veux libérer cette parole-là."

Et à la vue de quelques commentaires, je plains les préposé à ce blog pour la validation des commentaires...
Quelques extraits :

Je mais un commentaire pour dire que moi la politique je ne mis interaissent pas trop sauf dernièrement lors des elections presidentielle mais je n'ai pas encore vraiment un opinion

Je m'y suiis déjà iinteressey , may iil ya bcp de priiviileges pr ley persOnnes agey , ke pr nOus ley jeunes... Ce que je tve nul' parce que je pense qu'On pOurraiit fayre bcp de chOz ! Pr ley "viieux" ey pr ley jeunes !!

Et encore tellement d'autres.

Tout pousse les jeunes qui arrivent sur ce blog à commenter : tutoiement, questionnement (dans le texte ou dans les vidéos). La plupart des billets ont une vidéo et deux phrases, le plus souvent des questions.

Sur les 12 billets actuels du blog, 11 ont été postés le 30 juillet à la suite, à partir de 19h20. Le dernier date du 31 juillet vers 12h30. A voir donc si de nouveaux billets vont arriver ou pas et si ce qui ressort des commentaires est vraiment prix en compte.

Source : Le monde informatique

Un peu de lightbox dans Dotclear

Si je poste moins en ce moment, c'est que je suis en pleine préparation de mon voyage à Los Angeles.

Beaucoup d'amis m'ont demander de tenir à jour ce blog, avec notemment un max de photos. J'ai donc décider d'installer un plugin sur mon dotclear pour que ce soit plus sympa à regarder.

Je me suis tourner vers une solution intégrant lightbox car je le trouve très bien, et son code est propre.

Le plugin que j'ai donc installé (et que je teste avec ce billet) et donc clikimage qui permet d'intégrer des images depuis son disque dur ou une url, avec création de vignettes ou non. L'affichage en grand peut se faire dans une popup HTML ou un light box.

Pour utiliser le lightbox, il vous faudra installer un autre plugin simplement nommé lightbox que vous trouverez ici.
NB : Une petite erreur s'est glissé dans ce plugin, pour affiche l'image de loading et l'image d'erreur. Pour la corrigé, il faut modifier le fichier dotclear/ecrire/tools/lightbox/js/lightbox.js aux lignes 62 et 63 pour rajouter un / devant les urls des images, et il n'y a plus de problèmes. (ou bien indiquer le chemin complet depuis la racine de votre site)

Voici le résultat avec quelques une de mes photos du 14 juillet, hébergés sur FlickR : 14 Juillet 01 14 Juillet 02 14 Juillet 03 14 Juillet 04 14 Juillet 05 14 Juillet 06 14 Juillet 07 14 Juillet 08 14 Juillet 09



Le résultat est très satisfaisant, non ?