Brouiller pour mieux montrer

Je suis entrain de développer un site interne à PriceMinister. J’ai envie de faire le site très sérieusement, en respectant tous les standards en vigueur, et l’intégré au maximum au navigateur.
J’ai décidé de le rendre très sérieux et épuré, avec une pointe de javascript pour apporter le fun et le confort d’usage.
Je suis parti sur une base WordPress qui apporte le confort d’usage pour ceux qui l’alimenterons, et j’ai pour l’occasion étendu mon plugin Identikit pour qu’il gère l’identité des articles et des catégories. Je publierai prochainement la v2 sur ce site.

Donc c’est une adaptation pour prototype.js d’un script de Johnvey qui est visible sur son site. Quand vous survolez les liens de son menu, le slogan change. J’aime beaucoup cette idée, je l’ai donc adapté pour servir ma démarche.

Je voulais un effet dans le genre pour afficher l’attribut title de toutes mes balises a. D’autres s’amusent à afficher cette donnée dans des infobulles, mais je trouve cette mode un peu indigeste. Cette méthode reste très discrète comme vous pouvez le voir dans la vidéo. Ainsi, quand l’utilisateur survole un lien, la div id="blog-description" se met à jour. Pour le moment il ne fonctionne que sous Firefox, mais je vais l’adapter pour qu’ils fonctionnent sur d’autres navigateurs. Voici la bête :

var Scrambler = Class.create();
Scrambler.prototype = {
    initialize: function() {
        this.cs = new Array("!","~","@","#","$","%","^","&","*","(","+","=","_","D","p","-","C","e");
        this.base = $('blog-description').innerHTML;
        this.timer = null;
        this.eid = 'blog-description';
        this.words = '';
        this.cnt = 0;
        $$('a').each( function(e) {
            if( e.getAttribute('title') != null ) {
                e.onmouseover = function() { myScrambler.scrambled( this.getAttribute('title') ); }
                e.onmouseout = function() { myScrambler.reset( this.base ); }
            }
        } );
    },
    scrambled: function(ph) {
        this.loops = 0;
        this.cnt = 0;
        this.words = ph.split(" ");
        for(var i=this.words.length-1; i; i--) this.loops = Math.max(this.loops, this.words[i].length);
        clearTimeout(this.timer);
        this.timer = setTimeout(this.m_scrPhrase, 45);
    },
    reset: function() {
        if(this.base != $('blog-description').innerHTML)
            this.scrambled(this.base);
    },
    m_scrPhrase: function() {
        var out = "";
        if(myScrambler.cnt++ >= this.loops) {
            clearTimeout(myScrambler.timer);
            out = myScrambler.phrase;
        } else {
            for(var i=0; i = ln) return wd;
        var out = wd.substring(0, po);
        var i = ln - po;
        do { out += this.cs[Math.floor(Math.random() * 20)]; } while(--i);
        return out;
    },
}
function initScrambler() { myScrambler = new Scrambler(); }
Event.observe(window, 'load', initScrambler, false);

Lightbox+

Anne se plaint de son site. Il n’est pas aussi simple que les espaces MSN. Elle aurait aimer que le script Lightbox soit encore plus coool. Soit, je vais le rendre plus cooool que Fonzy.

Le plugin que je propose créé automatiquement des groupes de diapositifs par billet, redimensionne la visionneuse à la taille de l’écran, et permet de changer d’image toutes les 10 secondes. Avec ce système souple, le blog de WordPress n’a pas de soucis à se faire. Il peut gérer ses images très simplement. Enfin, le lecteur n’a qu’à cliquer sur le petit bouton diaporama et se laisser naviguer entre les différentes photos.

Titres et descriptions

Anne aime triturer ses photos, elle passe des heures à réécrire les titres et descriptions (le plugin Tam Attachment permet de le faire très simplement). Seulement, les fonctionnements de Lightbox et de WordPress ne permettent pas de mettre à jour les billets automatiquement avec les nouvelles données éditoriales. Elle était obligée de réécrire ses textes dans ses billets.

C’est fait. J’ai écrit un petit bout de code pour que les attributs de ses liens et de ses images soient automatiquement mis à jour lors de l’affichage sur le site.

Les images sont plus grandes que l’écran

Le second défaut de Lightbox est qu’il ne redimensionne pas les images trop grandes pour les écrans. N’ayant pas de logiciels de manipulation d’image, Anne dépose directement sur son site les photographies originales de son appareil numérique.

Pour cela, j’ai complété le code du javascript pour qu’il redimensionne les images plus grandes que l’écran.

Diaporama

Dernière critique : pourquoi il n’y a pas de diaporama comme sur MSN space ? C’est vrai ça ! Pourquoi ? Bin j’ai encore adapté le code pour qu’il change automatiquement d’image toutes les 10 secondes. Maintenant il y a un petit bouton sur la visionneuse. En cliquant dessus, l’utilisateur active le diaporama.

Installation, Utilisation

Décompressez le répertoire dans votre répertoire des plugins. Puis, via l’interface d’administration, activez le plugin lightbox+. C’est tout ! Il n’y a pas d’autres boutons, d’autres paramètres, utilisez WordPress comme d’habitude. les différents scripts se chargent de formater vos images lors de l’affichage sur votre site.

Il n’y a plus d’excuse ! Testez !

Téléchargement lightbox-plus.zip

Version 0.1.2 du 25 octobre 2006

Corrections

  • 23/10/06 : Correction des urls
  • 25/10/06 : Correction du formatage des descriptions, et mise à jour de la « cartographie » sur le script

Comma-separated values

For de mon travail à PriceMinister, j’ai la chance de manipuler des pelles entières de fichiers dits csv. Ces fichiers sont directement édités de logiciels tiers qui proposent de faire des exportations dans ce format, et pourtant il ne savent pas le faire correctement. J’ai donc écrit un petit script qui rectifie une bouillie en un fichier propret.

Qu’est ce qu’un csv

C’est un fichier texte qui représente des données tabulaires. Chaque ligne représente un enregistrement. Chaque enregistrement est composé de champs délimité par un même caractère que l’on nomme le séparateur. Ce champ peut-être entouré de guillemets. Ainsi, si nous trouvons le séparateur entre ces guillemets, il sera interprété comme étant un caractère typographique. Enfin, les guillemets typographiques doivent à leur tour être doublés.

Le script

Excel, HomeBase, FileMaker… ne savent pas faire ce type de csv standard. C’est pourquoi j’ai écrit cette petite moulinette qui corrige le fichier source.

function csv_ise($string, $sep = ",") {
	for($cleanex = '', $tok = strtok($string, $sep); $tok !== false; $tok = strtok($sep) ) {
		if( $tok{0} == '"' ) {
			$tok = ($tok{strlen($tok)-1}=='"') ? substr($tok, 1, -1) : substr($tok, 1) .','.strtok('"'.$sep);
			$tok = preg_replace('`n`', '<br>', $tok);
		} 
		elseif( substr_count( $tok, '"') === 1 ) {
			$tok = $tok .','.strtok($sep);
		}
		$tok = preg_replace('`([^"]|^)("|\")([^"]|$)`', '$1""$3', $tok);
		$tok = '"'.$tok.'"';
		$tok = preg_replace('`(([nr])+)`', '"$2"', $tok);
		$cleanex .= $tok . $sep;
	}
	unset($string, $sep, $tok);
	return $cleanex;
}

Bon transfert de données !

L’Avatar

« Il est l’or Monsignor. » Mon billet n’est pas à confondre avec le rôle de Louis de Funès.

En cherchant un système d’avatar pour le PriceMister, je suis tombé sur la conception des Pavatars.

Un pavatar (Personal Avatar) est une image qui est hébergée sur votre site perso qui est utilisée par les sites qui font référence au contenu que vous mettez à disposition, en tant qu’utilisateur. Par exemple, si vous laissez un commentaire sur un blog qui requiert un avatar, c’est cette conception qui est utilisée ici.

Continue reading