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

Open Search Document

Tiens tiens tiens, IE7 et Firefox 2 sortent au même moment. Et ces deux navigateurs supportent l’Open Search Document.

Késako ?

C’est un standard xml qui permet d’ajouter des moteurs de recherches sur ces deux navigateurs. La document est accessible sur le site dédié www.opensearch.org.

Donc comme ça ne mange pas de pain, j’ai écrit le plugin qui le fait bien :)

Installation

  1. Téléchargez le document osd.phps, et renommez le en osd.php ;
  2. déposez le dans votre répertoire des plugins ;
  3. puis via votre interface d’administration, activez-le
  4. enfin, rechargez vos liens permanents ;
  5. voilà !

Maintenant, quand un utilisateur de Firefox ira sur votre site, il aura la possibilité d’installer votre moteur de recherche. Si vous souhaitez afficher la petite image qui accompagne le moteur de recherche, mettez à la racine de votre site soit une favicon.ico, soit une favicon.png. Mais je vous rappelle que j’ai écrit un plugin qui permet de créer ce fameux favicon :)

Pour IE7, je ne peux pas tester (Mac User). Je vous fait confiance pour me remonter vos remarque concernant ce navigateur.

Téléchargement osd.zip

Version en perpétuelle évolution

Un peu d’absurde dans un monde de scripts

Avec le niveau niveau de complexification des scripts, des fois je passe du temps à essayer de comprendre comment pense la machine. Mais elle ne pense pas, elle en fait qu’exécuter des scripts qu’un groupe à écrit. La machine à sa propre logique, et des fois ses voix sont impénétrables.

Comme le seigneur, elle a sa langue propre, qui à un certain niveau de complexification, que même C3PO mettrait du temps à comprendre. Le plus étonnant reste quand son langage est incompréhensible. Ses non-sens prêtent à sourire.

Mise à jour de la SMC

Mac, c’est cool. Il propose fréquemment des mises à jour pour que son système soit toujours meilleurs, toujours plus performants. Le dernier en date est la mise à jour de la SMC vers la 1.1. Je ne savais même pas que mon système avec une SMV. késako ? J’apprends sur le site d’Apple que le SMC (Contrôleur de gestion du système) est une puce située sur la carte logique, qui contrôle toutes les fonctions d’alimentation de votre ordinateur. Si votre ordinateur a des problèmes d’alimentation, la réinitialisation du SMC peut les résoudre.

Trop bien ! Je le mets à jour.

Le programme interne de la SMC de votre ordinateur est à jour à la version 1.1 de MÀJ du programme interne de la SMC du MacBook

Me voilà rassuré ! Le message de confirmation de la bonne installation me confirme bien que le programme interne de la SMC de votre ordinateur est à jour à la version 1.1 de MÀJ du programme interne de la SMC du MacBook.

Maintenant que mon ordinateur gère mieux l’alimentation, est-ce que la nouvelle priorité d’Apple est le support de la langue française ?

Conjugaisons nos efforts

Utilisant Microsoft Word, je rédigeais des recommandations internes. Beaucoup de notions de l’application PriceMinister sont en anglais, car les traduire en français n’aurait plus de sens. Donc, dans mes spécifications en français, je tape le mot « spacename ». Word m’affiche une petite vague sous ce mot, cela pour me proposer une autre orthographe : sphacélâmes.
Sphacélâmes
Curieux, j’ai cherché la définition de ce mot. Première certitude, ce mot n’est pas dans l’édition 2005 du Petit Robert, mais sphacèle l’est. Je poursuis donc mes recherches sur la toile. Voici mes observations.

Sphacèle
nom masculin, tissu nécrosé en voie d’élimination
Sphacéler
verbe transitif, provoquer un sphacèle
Présent
sphacèle
sphacèles
sphacèle
sphacélons
sphacélez
sphacèlent
Imparfait
sphacélais
sphacélais
sphacélait
sphacélions
sphacéliez
sphacélaient
Passé simple
sphacélai
sphacélas
sphacéla
sphacélâmes
sphacélâtes
sphacélèrent
Futur simple
sphacélerai
sphacéleras
sphacélera
sphacélerons
sphacélerez
sphacéleront
Passé composé
ai sphacélé
as sphacélé
a sphacélé
avons sphacélé
avez sphacélé
ont sphacélé
Plus-que-parfait
avais sphacélé
avais sphacélé
avait sphacélé
avions sphacélé
aviez sphacélé
avaient sphacélé
Passé antérieur
eus sphacélé
eus sphacélé
eut sphacélé
eûmes sphacélé
eûtes sphacélé
eurent sphacélé
Futur antérieur
aurai sphacélé
auras sphacélé
aura sphacélé
aurons sphacélé
aurez sphacélé
auront sphacélé

Sphacélâmes serait donc la déclinaison à la première personne du pluriel du passé simple de l’indicatif. Mais qui sur Terre irait utilisé ce verbe à la 1ère personne du pluriel comme du singulier ? De qui plus est au passé-simple ? Est-ce que les cellules biologiques ont une conscience au point d’avoir des conversations entre-elles dans un langage précieux ?

  • Mon cher globule blanc ! qu’eussiez vous fait dans la soirée du vendredi ?
  • Comme à inaccoutumé, avec les cousins nous sphacélâmes entre deux parties de mitose

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 !