Strange Black Hole

Lotus F1 Team

Fabrice Coutant — 2012-02-27T13:41:49Z

Réalisation des sites institutionnels et extranet media de la saison 2012. Réalisation des sites institutionnels et extranet media de la saison 2012. - Réalisations / Spip, Ubuntu, Cherokee, Hébergement, Web, Javascript, php, HTML5, PouipouiDesign.net

Spip :: Filtre |image_optimiser

Fabrice Coutant — 2012-01-12T14:05:53Z

Dans ce Hack nous allons voir comment créer un filtre pour Spip afin d'optimiser nos images Jpeg et Png. Cette optimisation est nécessaire si vous souhaitez améliorer les performances d'affichage de votre site et si vous voulez obtenir un bon score avec "Page Speed" de Google.

Notre filtre va utiliser 2 utilitaires préconisés par Google, jpegoptim et optipng.

Pour les installer (Linux/Ubuntu) :

sudo apt-get install jpegoptim optipng

Dans le dossier squelettes de votre Spip ouvrez le fichier mes_fonctions.php ou créez-le s'il n'existe pas puis ajoutez le code suivant :

/**
* Filtre d'optimisation des jpeg et png
*/
function image_optimiser($img)
{

if (strlen($img)==0) return false;
$source = trim(extraire_attribut($img, 'src'));
if (strlen($source) < 1)
{
$source = $img;
$img = "$source' />";
}
// les protocoles web prennent au moins 3 lettres
if (preg_match(';^(\w{3,7}://);', $source)){
include_spip('inc/distant');
$fichier = _DIR_RACINE . copie_locale($source);
if (!$fichier) return "";
}
else
{
// enlever le timestamp eventuel
$source=preg_replace(',[?][0-9]+$,','',$source);
$fichier = $source;
}
$terminaison_dest = "";
if (preg_match(",\.(gif|jpe?g|png)($|[?]),i", $fichier, $regs)) {
$terminaison = strtolower($regs[1]);
$terminaison_dest = $terminaison;
if ($terminaison == "gif") $terminaison_dest = "png";
}
// c'est ici que selon l'extention de l'image
// nous alons utiliser soit jpegoptim, soit optipng
// pour optimiser nos images
if ($terminaison == "jpg")
{
passthru("jpegoptim ".$fichier." > /dev/null");
}

if ($terminaison == "png")
{
passthru("optipng ".$fichier." > /dev/null");
}

return $img;
}

Télécharger

Toute la première partie très inspirée des filtres existants de Spip a pour fonction de récupérer le chemin vers le fichier image. Puis, nous appliquons l'optimisation avec l'utilitaire correspondant à chaque type de fichier.

Pour utiliser notre filtre dans un squelette :

[(#REM)
Appliquer à une image d'un thème par exemple
][(#CHEMIN{vers/mon/image}|balise_img|image_optimiser)]

Télécharger

[(#REM)
Appliquer à un Logo
][(#LOGO_ARTICLE|image_optimiser)]

Télécharger

Ce petit filtre est très basique et il peut bien sur être largement améliorer avec notamment la prise en compte d'arguments permettant de passer des paramètres aux utilitaires jpegoptim et optipng.

Renault Sport F1

Fabrice Coutant — 2012-01-10T19:50:20Z

Réalisation des sites institutionnels et extranet media de la saison 2011. Réalisation des sites institutionnels et extranet media de la saison 2011. - Réalisations / Spip, Ubuntu, Cherokee, Hébergement, HTML, Javascript, php, PouipouiDesign.net

Retour aux sources.

Fabrice Coutant — 2011-08-27T10:18:58Z

Après avoir roulé des années en Combi Tôlé de 74 et en Buggy LM1 la vie à fait que nous avons du nous en séparer et rouler en Kangoo... je sais c'est moche... étant venu à bout du marsupial, il était plus que temps de revenir aux sources...

C'est en mars de cette année que nous avons contacté Vintage Autohaus avec un cahier des charges relativement simple : Nous recherchions un Combi 68/79 Delux, en bon état mais pas un "show car", pouvant nous transporter en famille en toute fiabilité, posé au sol par le FrenshSlammer, avec un set de jantes "Sprint Star" et un échappement CSP Python.

Après plusieurs échanges de mails avec K-Rot le "boss" de Vintage et plusieurs propositions, notre choix s'est porté sur un modèle de 71, sierra yellow et avec le marquage d'une société sur les flancs. Ce bus présentait quelques cabosses à divers endroits mais avait un charme fou ! de plus, il venait d'arriver à La Forge chez Vintage Autohaus et était donc disponible de suite. L'affaire fut donc faite et les travaux de modifications planifiés.

L'attente à été longue et nous avions hâte de prendre possession de notre gros bébé. Nous pouvions cependant suivre les évolutions sur le blog de Vintage Autohaus. Ainsi nous avons eu droit à la dépose du moteur pour révision complète, au passage au Karsher du compartiment moteur, à la repose du moteur, à la dépose du train avant puis au montage d'un ensemble FrenshSlammer qui va bien flambant neuf, à la dépose du train arrière et à la pose de lames réglables FrenshSlammer, à l'usinage des tambours pour un parfait ajustement des adaptateurs de roues, au réglage du magnifique "Stance", puis changement du par brise qui était fendu, et démontage remontage réglage de la porte latérale... bref, nous commencions sérieusement à baver devant notre écran et nous attendions tous les soirs avec impatience la mise à jour du blog pour suivre l'état d'avancement.

Le grand jour est arrivé et nous nous apprêtions à organiser le voyage vers Cuzorn soit presque 600 bornes quand K-Rot nous annonce au tel que comme il monte avec sont équipe à Chimay et que du coup ils vont passer juste à coté de chez nous, il nous propose de convoyer le bus jusqu'à notre porte !! il est vraiment énorme ce K-Rot ! bref, quelques jours plus tard six bus dont le notre stationnaient dans notre rue (et comme un blaireau j'ai même pas fait une photo).

Encore merci à K-Rot et à son équipe pour le travail fait qui est absolument irréprochable. Le bus est magnifique !!

(crédit photo : VintageAutohaus)

Parlons Glou, Glou...

Fabrice Coutant — 2011-08-22T11:24:09Z

Le premier graphique donne notre consommation moyenne, tandis que celui du dessous retrace l'historique de consommation pour chaque plein (ces données sont mises à jour lors de chaque passage à la pompe). - janitorial.myoldvw.net

Fiche Technique

Fabrice Coutant — 2011-08-22T09:29:31Z

Infos générales
Origine	USA, importé par Vintage Autohaus
Année	1971
Modèle	Deluxe
Peinture	Sierra Yellow entièrement d'origine
Train avant	Le train avant et fusées décalées FrenchSlammer*
Train arrière	Lames réglables FrenchSlammer*
Amortisseurs	GAZ A JUST*
Jantes	BBT Sprint Star en 5,5/15 chromées ET 34
Pneus av	165/50/15
Pneus ar	185/65/15
*le combi a été FrenchSlammerisé par Vintage Autohaus

Moteur / Boite
Cylindrée	1835 cm3
Arbre à cames	???*
Vilebrequin	???*
Culbuteurs	???*
Alimentation	Double Kadron de 40
Allumage	009 avec module Pertronix Ignitor II
Échappement	CSP Python inox
Boite de vitesse	Cox 8:33 avec kit d'adaptation Vintage Autohaus
*le moteur ayant été préparé aux US par l'ancien proprio je n'ai pas encore tout le détail de l'assemblage...

SPIP TextMate Bundle : 20022011

Fabrice Coutant — 2011-02-24T10:10:47Z

J'inaugure ici une nouvelle rubrique afin de distribuer plus simplement mon Bundle SPIP pour TextMate.

La version actuelle du Bundle apporte les Snippets suivant :

En mode HTML/Squelettes :

La Balise #CHEMIN
inclure
boucle complète
boucle simple
mots
commentaires

En PHP :

Chemin
langue
formulaire

Exemples d'utilisations HTML :

Sans sélection, en saisissant chemin+tab le Bundle produit :

#CHEMIN{}

En sélectionnant par exemple img/toto.png puis ctrl+shif+s choix 1, le Bundle produit :

#CHEMIN{img/toto.png}

Pour inclure un squelette on fait inclure+tab et le Bundle produit :

En sélectionnant un mot quelconque par exemple "maboucle" puis ctrl+shift+s choix 3, le Bundle produit :


 * une seule fois avant
 
 * pour chaque élément
 
 * une seule fois après
 
 * afficher ceci s'il n'y a pas de résultat

Je vous laisse découvrir le reste ;)

Télécharger :

Merci de vos retours.

Le Cellier de Dionysos

Fabrice Coutant — 2010-10-04T15:26:37Z

Réalisation du site de commerce en ligne. Cette jeune société est spécialisée dans la vente en ligne de vins de Bourgogne. Ils souhaitaient un site sobre et évolutif. Le site habillé par Pouipouidesign.net est propulsé par le couple Magento / Spip. L'intégration de Spip dans Magento à nécessité le développement d'un "plugin" pour Magento qui sera bientôt disponible sur Magento Connect (faut encore que je fasse le (...) - Réalisations / Spip, HTML, Javascript, php, Magento, PouipouiDesign.net

Biolab Disaster un jeu en HTML5

Fabrice Coutant — 2010-09-14T10:10:04Z

Dominic Szablewski nous a concocté un petit jeu fort sympathique qui a la particularité d'être entièrement réalisé en HTML5 et Javascript. Les balises canvas et audio sont misent à contribution et c'est un moteur de jeu "Impact Game Engine" entièrement développé en Javascript par Dominic Szablewski qui anime l'ensemble. Ce Jeu ne comporte que peu de niveaux car au départ il ne s'agit "que" d'un démonstrateur pour son "Impact Game Engine" qu'il devrait rendre disponible prochainement accompagné de son éditeur de niveau. On attend la suite avec impatience.

Le jeu est disponible ici : Biolab Disaster

Il vous faudra par contre les navigateurs suivants au minimum :

Opera 10.61 : Parfait
Safari 5.0 (Mac) : Parfait
Firefox 4 Beta 3 : Parfait
Firefox 3.6 : Pas de son ; lent
Chrome 7 : Pas de son
IE 9 Preview : Pas de son ; lent

La vidéo suivante présente Biolab Disaster et son moteur Impact Game Engine :

Biolab Disaster - HTML5 Game from Dominic Szablewski on Vimeo.

Spip :: Filtre |qr_code

Fabrice Coutant — 2010-09-13T19:13:31Z

Dans le Hack n°1 je vous proposais de générer un QR Code avec l'url de la page en cours via une requête en Javascript. Cette approche simple à mettre en œuvre avait quand même le problème de faire une nouvelle requête au web service de Google à chaque affichage de la page, ce qui peut être pénalisant en cas de non réponse ou de latence. De plus le Javascript était obligatoire pour que cela fonctionne.

L'approche de ce nouveau Hack est basée sur la création d'un filtre pour Spip. Ce filtre pourra être appliqué à divers éléments et plus seulement à l'url de la page. De plus, ce filtre va gérer un cache et ne fera une requête au web service qu'en cas de besoin, c'est à dire que quand l'image du QR Code sera retournée par le web service elle sera stockée en cache dans le répertoire /local et ne sera regénérée quand cas de modification du contenu du QR Code ou en cas de purge du cache.

Le code ci-dessous est à placer dans le fichier mes_fonctions.php à la racine de votre squelette. Si ce fichier n'existe pas créez-le.

/**
* Filtre pour générer un QRCode à partir d'un texte
*/
function qr_code ( $txt, $dim=200 )
{
// S'il existe pas on crée le répertoire qui va accueillir nos QRCodes
if ( !is_dir( _DIR_VAR."cache-qrcode/" ) )
{
if ( !mkdir ( _DIR_VAR."cache-qrcode/", 0777 ) )
{
spip_log( "impossible de creer le repertoire", "qrcode" );
}
}

// l'url du service web de Google qui va bien
$url = 'http://chart.apis.google.com/chart';
// On colle dans un tableau les arguments pour la requète
$args = array( "cht"=>"qr",
"chs"=>$dim . "x" . $dim,
"chl"=>urlencode($txt)
);
// On crée le context pour la requète
$context = stream_context_create( array(
'http' => array(
'method' => 'POST',
'content' => http_build_query($args)
)
)
);
// Ici on va générer un nom et un chemin pour notre fichier final
$hash = md5(serialize($txt));
$fichier = _DIR_VAR."cache-qrcode/qrcode-$hash.png";
// Si notre fichier n'existe pas on requète le service et on crée le fichier
if ( !is_file( $fichier ) ){
file_put_contents( $fichier, file_get_contents( $url, false, $context ) );
}

// On retourne un tag image avec la source qui va bien
return "$fichier' alt='' width='$dim' height='$dim' />";
}

Télécharger

Pour utiliser notre filtre dans un squelette rien de bien compliqué :

[(#URL_ARTICLE|url_absolue|qr_code)]

Par défaut la taille du QR Code est de 200px de coté mais on peut également la lui imposer :

[(#URL_ARTICLE|url_absolue|qr_code{100})]

Pour plus d'information sur comment utiliser les QR Code et comment formater les informations que vous allez y stocker, vous pouvez consulter cette documentation BarcodeContents.

Voila, à vous de jouer.

Cherokee :: 6 règles pour Spiper en paix

Fabrice Coutant — 2010-09-12T18:10:46Z

Ce Hack va nous permettre de configurer les règles nécessaires dans Cherokee pour accueillir une installation de Spip dans de bonnes conditions.

Après avoir configuré le vhost qui va bien dans Cherokee (voir la documentation) et installé votre instance de Spip (ne pas tenir compte du message final) nous avons besoin de configurer six règles pour pouvoir Spiper en paix...

Donc, dans la console d'administration de Cherokee, sélectionnez le vhost précédemment créé puis activez l'onglet "Behavior" et cliquez sur "Rule Management".

La première règle à configurer est celle par défaut et nous allons l'utiliser pour toutes les réécritures ce qui entre autre va nous permettre d'activer les URL propres dans Spip.

Match: default
 Handler: redirection
 Type: internal
 Regular Expression: ^(rubrique|article|breve|mot|auteur|site)(\d+)(\.html)?$
 Substitution: spip.php?page=$1&id_$1=$2
 Type: internal
 Regular Expression: ^([1-9][0-9]*)$
 Substitution: spip.php?action=redirect&type=article&id=$1
 Type: internal
 Regular Expression: ^[^\.]+(\.html)?$
 Substitution: spip.php?url_propre=$1
 Type: internal
 Regular Expression: /(robots\.txt|favicon\.ico|sitemap\.xml)?$
 Substitution: spip.php?page=$1
 Type: internal
 Regular Expression: /(\d+)$
 Substitution: spip.php?action=redirect&id=$1&type=article
 Type: internal
 Regular Expression: ^/$
 Substitution: spip.php
 Type: internal
 Regular Expression: ^/\?(.*)$
 Substitution: spip.php?$1
 Type: internal
 Regular Expression: ^/ecrire/\?(.*)$
 Substitution: /ecrire/index.php?$1
 Type: internal
 Regular Expression: ^/ecrire/$
 Substitution: /ecrire/index.php
 Type: internal
 Regular Expression: ^/ecrire$
 Substitution: /ecrire/index.php
 Type: internal
 Regular Expression: ^([^\.]+)(\.html)?\?(.*)$
 Substitution: spip.php?url_propre=$1&$3
 Encoding: 
 Gzip support: allow
 Deflate support: allow

La deuxième règle va gérer l'accès aux fichiers et répertoires de notre installation de Spip

match: File Exists
 match any file: Enabled
 Use I/O Cache: Enabled
 Only match files: Enabled
 If dir, check index files: Enabled
 Handler: List & Send
 Use I/O cache: Enabled
 Allow symbolic links: Allow
 Encoding:
 GZip support: Allow
 Deflate support: Allow

La troisième règle va interdire l'accès aux répertoires /config et /tmp de Spip

Match: Directory
 Web Directory: /config
 or
 Web Directory: /tmp
 Handler: HTTP Error
 HTTP Error: 403 Forbidden

La quatrième règle va interdire l'accès aux répertoires .svn (utile si vous avez installé Spip via SVN et/ou si vous gérez vos Squelettes avec SVN)

Match: Regular Expression
 Regular Expression: /(.*/)?\.svn
 Handler: HTTP Error
 HTTP Error: 403 Forbidden

La cinquième règle va gérer tout se qui se trouve dans les répertoires /IMG et /local en mode statique.

Match: Directory
 Web Directory: /IMG
 or
 Web Directory: /local
 Handler: Static Content
 Use I/O cache: Enabled
 Encoding:
 GZip support: Allow
 Deflate support: Allow

La sixième règle va configurer php

Match: Extensions
 Extensions: php
 Check local file: Check
 Handler: FastCGI
 Error handler: Enabled
 Check file: Enabled
 Pass Request Headers: Enabled
 Balancer: Round Robin
 Encoding:
 GZip support: Allow
 Deflate support: Allow
 Time:
 Timeout: 30

Voila, notre vhost est configuré. Reste à cliquer sur "Save" (tout en haut à droite) et à procéder à un "redémarrage gracieux" pour activer notre configuration.

Spip

Fabrice Coutant — 2010-09-10T10:01:55Z

Sqlite

Fabrice Coutant — 2010-09-10T09:57:38Z

Cherokee powered

Fabrice Coutant — 2010-09-10T09:55:28Z

Ubuntu server

Fabrice Coutant — 2010-09-10T09:52:46Z

Spip :: Filtre |image_base64

Fabrice Coutant — 2010-09-10T09:23:01Z

Le filtre que le vous propose ici va nous permettre d'encoder les images en base64 et ainsi de pouvoir les intégrer directement en ligne dans le code HTML de notre page. Et là, vous allez me dire : mais pourquoi faire que Diable ? et je vais vous répondre : bah, pour limiter le nombre de requêtes HTTP et optimiser un peu les accès serveur pardi !!

Notez que cette technique est aussi très avantageuse pour les images présentes en CSS, mais nous verrons cela dans un autre Hack ;)

Ouvrez donc le fichier mes_fonctions.php à la racine du répertoire de votre squelette (au besoin créez le fichier) puis copiez coller le code ci-dessous.

/**
* Ce filtre transforme une image en Base64 pour intégration
* directe dans le html afin de limiter le nombre de requètes
*/
function image_base64($img){
if($img){
// Détection du user-agent histoire de savoir à quel navigo on a affaire
$userAgent = strtolower($_SERVER['HTTP_USER_AGENT']);
// On check si on est pas en présence d'une version antérieure à IE8
if (preg_match("#(msie)[/ ]?([0-9.]*)#", $userAgent, $match))
{
// Version antérieure à 8
if($match[2] < 8)
{
$msie = true;
}
}
// Si c'est pas un Dynobrowser on applique le filtre
if ( $msie != true )
{
// extraction de l'url de limage
$src = extraire_attribut($img, "src");
// on fait un peu de ménage
$src = preg_replace("#\?[0-9]*#", "", $src);
// lecture du fichier en mode binaire
$bin = fread(fopen($src, "r"), filesize($src));

// Retourne le type de contenu au format MIME
$mime = mime_content_type($src);

// Passage de l'image en base64 et préparation du nouveau src
$src = "data:".$mime.";base64," . base64_encode($bin);
// Enfin on remplace le src par notre version en base64
$img = inserer_attribut($img,"src",$src);
}
}
return $img;

}

Télécharger

Le filtre agit de la façon suivante :
il commence par vérifier l'identité du navigateur du client, car les versions d'Internet Explorer antérieures à la 8 ne gèrent pas les images en base64 et dans ce cas le filtre ne fait rien.
Sinon, il récupère le chemin de l'image et applique l'encodage puis modifie l'attribut src de notre balise image avec la chaine encodée en base64.

Réservez ce filtre pour les images de tailles modestes. Sur ce site par exemple, les logos d'articles ainsi que les images du pied de page sont encodées.

Spip :: Google Chrome Frame

Fabrice Coutant — 2010-09-09T18:35:58Z

Dans ce Hack nous allons voir comment intégrer la prise en compte de Google Chrome Frame dans un site Spip.

Pour mémoire Google Chrome Frame est un plugin pour Internet Explorer qui intègre le moteur de rendu de Google Chrome, soit Webkit (à la sauce Google). Ceci permet donc pour un utilisateur qui souhaite garder son IE (on a tous nos problèmes...) de pouvoir bénéficier des dernières avancées du web telles que HTML5, CSS3 et moteur Javascript ultra rapide, ainsi qu'au développeur de pouvoir proposer ces mêmes technologies sans avoir à se soucier de la compatibilité avec IE.

Ce plugin quand il est installé ne prend la main sur le rendu d'une page que si celle-ci le lui demande. Sinon, c'est toujours le moteur d'IE qui fait les rendus.

Pour pouvoir activer Google Chrome Frame il y a principalement 2 méthodes :

Ajouter une balise meta dans le head de votre site.

Ou configurer Apache (ne pas oublier d'activer les modules mod_setenvif et mod_headers).

mod_setenvif.c>
mod_headers.c>
BrowserMatch chromeframe gcf
Header append X-UA-Compatible "chrome=1" env=gcf
>
>

Télécharger

Ces 2 méthodes ne font que demander le rendu via GCF (Google Chrome Frame) mais si il n'est pas installé, rien ne se passe. Google propose au développeurs de sites d'inclure un script Javascript en charge de détecter la présence de GCF et qui affiche dans une fenêtre modale la page d'installation (voir la doc)

La méthode que je vous propose maintenant est basée sur la deuxième. C'est à dire que c'est via les entêtes HTTP que nous allons passer l'info. Par contre nous ne serons pas dépendant d'Apache puisque nous allons utiliser la fonction header() de PHP et nous allons gagner en souplesse sur la détection du plugin.

Donc ouvrez le fichier mes_options.php qui se trouve dans le répertoire config/ de votre Spip (au besoin créez ce fichier) et ajoutez-y les lignes ci-dessous :

// Détection du user-agent histoire de savoir à quel navigo on a affaire
$userAgent = strtolower($_SERVER['HTTP_USER_AGENT']);
// Si c'est Internet Explorer
if (preg_match("#(msie)[/ ]?([0-9.]*)#", $userAgent, $match))
{
// Version antérieure à 9
if($match[2] < 9)
{
// On demande dans les entêtes HTTP que le rendu soit
// fait par Google Chrome Frame s'il est disponible
header('X-UA-Compatible: chrome=1');

// Si on trouve pas de trace de GCF
if(!preg_match("/chromeframe/i",$userAgent))
{
// On initialise une variable que nous pourrons tester
// dans un squelette pour afficher un message d'avertissement
// et suggerer l'installation de GCF
$_GET['chromeframe_msg'] = "oui";

}

}
}

Télécharger

Le but de ce code est de détecter l'agent utilisateur. Si c'est IE on récupère la version. Si la version est inférieure à 9 (on espère ne plus avoir besoin de ce hack avec IE9) on cherche également une trace de GCF. En effet si GCF est installé il modifie l'agent utilisateur en ajoutant "chromeframe" dedans. Si pas de trace de GCF on crée $_GET['chromeframe_msg'] = "oui" que l'on pourra utiliser dans un squelette.

Voyons justement un exemple d'utilisation que nous pourrions coller dans le squelette sommaire.html :

[(#ENV{chromeframe_msg}|oui)

Ce site est compatible avec Google Chrome Frame

]

Si votre visiteur utilise IE sans GCF il verra le message. Sinon, rien et le code ne sera même pas ajouté.

Voici un autre exemple utilisant le plugin mediabox pour Spip :

[(#ENV{chromeframe_msg}|oui)

Ce site est compatible avec Google Chrome Frame

]

Ici, un lien s'affichera et son clique fera surgir une fenêtre modale présentant la page d'installation de GCF.
Par ce biais on peut également afficher un article expliquant par le détail pourquoi IE c'est le mal et proposer au visiteur l'installation au choix de GCF, Chrome, Firefox ou Opera...

Spip :: Filtre |fortune

Fabrice Coutant — 2010-09-02T12:10:23Z

Le petit filtre que je vous propose ici ne vous fera pas faire fortune mais par contre il va vous permettre d'afficher simplement une citation tirée au hasard d'un simple fichier texte.
Les "Fortunes" sont en fait des petites phrases ou citations que l'on trouve dans des gâteaux appelés "Fortunes Cookies" distribués à la fin des repas dans certains restaurants Asiatiques.

Donc, pour ce Hack il vous faudra rédiger un fichier texte dont chaque ligne représente une citation. Vous pouvez également vous procurer facilement sur le net ce type de fichier. Télécharger ce fichier dans une rubrique dédiée via l'interface privé de Spip puis nommez ce document comme vous voulez mais nommez-le.

Ouvrez le fichier mes_fonctions.php se trouvant dans votre dossier squelettes (au besoin créez ce fichier) puis collez cette fonction :

function fortunes ($doc)
{
// le document est passé en argument du filtre et transformé en tableau
// dont chaque ligne représente une entrée
$doc = file($doc);
// ici on retourne un index aléatoire du tableau
$ligne = mt_rand(0,count($doc));
// on récupère la valeur correspondante
$fortune = $doc[$ligne];
// ce qui suit permet de mettre en correspondance l'encodage
// du fichier texte avec celui du site Spip
$charset = $GLOBALS['meta']['charset'];
include_spip('inc/charset');
if ( $charset == 'utf-8' AND !is_utf8($fortune))
{
$fortune = importer_charset($fortune, $charset);
}
// enfin, on retourne notre citation
return $fortune;
}

Télécharger

Maintenant nous allons écrire une boucle dans un squelette à l'emplacement souhaité pour afficher une citation issue de notre fichier texte.

Ma citation qui va bien

(DOCUMENTS){extension IN txt}{titre=fortunes}>
[

(#URL_DOCUMENT|fortunes)

]
>

Télécharger

Notez qu'il faut ici modifier le critère titre de notre boucle avec le nom que vous avez donné au document. Le filtre s'applique à la balise #URL_DOCUMENT.

Spip :: Filtre |tweet pour compte Twitter syndiqué

Fabrice Coutant — 2010-08-31T13:15:53Z

L'objectif de ce Hack est de transformer les liens, les @utilisateurs et les #hashtags présents dans un flux Twitter en liens cliquables.

Nous partirons du principe que vous avez syndiqué le flux RSS de votre compte Twitter via l'interface d'administration de Spip.

Nous allons créer un filtre que nous nommerons "tweet". Pour ce faire vous devrez éditer le fichier mes_fonctions.php se trouvant à la racine de votre dossier squelettes. Si ce fichier n'existe pas, créez-le. Ouvrez donc ce fichier et saisissez la fonction suivante :

/**
* Filtre permettant de transformer les urls, @users et les #hashtags d'un flux twitter
*/
function tweet($txt)
{
// on cherche les urls et on les remplace par des urls actives
$url = '/http([s]?):\/\/([^\ \)$]*)/';
$url_link = 'http$1://$2';
$txt = preg_replace($url,$url_link,$txt);

// on cherche les @users et on remplace par un lien vers le profil correspondant
$user = '/@([a-zA-Z0-9_]*)/';
$user_link = '@$1';
$txt = preg_replace($user,$user_link,$txt);

// on cherche les #hashtags et on les remplace par un lien de recherche vers ce hashtag
$tag = '/#([a-zA-Z0-9_]*)/';
$tag_link = '#$1';
$txt = preg_replace($tag,$tag_link,$txt);

return $txt;
}

Télécharger

Comme vous pouvez le constater ce filtre va rechercher les chaines représentants une url et les remplacer par un lien cliquable vers la dite url, puis il va rechercher les chaines représentants les noms d'utilisateurs de type @utilisateur puis les remplacer par un lien direct vers le profil de l'utilisateur en question et enfin pour finir il va transformer tous les hashtags trouvés en lien de recherche correspondante sur Twitter. Bref, une lame, trois effets !

Pour utiliser ce filtre rien de bien compliqué nous allons écrire une boucle :

Tweets

(SYNDIC_ARTICLES)

{id_syndic=1}

{par date}

{inverse}

{0,5}

Le [(#DATE|affdate)]: [(#DESCRIPTIF|tweet)]

Télécharger

Remplacez le id_syndic par celui correspondant au votre. Le filtre que nous venons de créer s'applique sur la balise #DESCRIPTIF

Bonjour monde !!

Fabrice Coutant — 2010-08-23T20:40:44Z

Ubuntu, Cherokee, Sqlite et Spip. Soyons fous !!

Depuis un moment que je tournais autour du sujet j'ai enfin pris le temps de me faire une installation de Spip un peu différente.

Quelques détails sur l'architecture en place :

2 parts chez Gandi
Ubuntu 8.04 server LTS (je ferais un upgrade quand j'aurais le temps...)
Cherokee 1.0.8
Sqlite3
Spip 2.1 avec son squelette de base pour l'instant.

Comme vous pouvez le remarquer Apache2 cède sa place à Cherokee et Mysql5 à Sqlite3...

Les fichiers .htaccess n'étant pas géré par Cherokee, j'ai saisi via l'interface d'admin de celui-ci les règles nécessaires pour verrouiller l'accès à certains répertoires, en servir d'autres en mode statique et enfin gérer la ré-écriture des urls pour pouvoir activer "propres", "propres2", etc...
la saisie de ces règles n'est pas très compliqué mais pour simplifier d'avantage j'ai commencé l'écriture d'un Wizard pour Cherokee que j'espère pouvoir diffuser prochainement.

la suite au prochain épisode...

CMS et sites à fort trafic : parlons chiffres !

Fabrice Coutant — 2010-07-19T16:24:00Z

Après le flop du lancement de notre nouveau site national France.fr (basé sur Drupal), Cedric fait un point sur la tenue en charge des différentes solutions de CMS populaires du moment...

C'est à lire sur http://www.spip-blog.net

GMAIL active les signatures HTML

Fabrice Coutant — 2010-07-06T23:07:00Z

Aujourd'hui Google active pour son service de messagerie GMAIL une fonctionnalité depuis longtemps demandée dans les différentes listes, forums, et autres news groups du net, la signature HTML !! Aussi étrange que cela puisse paraitre cette fonctionnalité était absente du service en standard. Certain avaient contourné le problème via des scripts Greasemonkey ou encore via des extensions diverses et variées de leur navigateur.

Ainsi apparait dans vos paramètres une interface d'édition "Riche" vous permettant de créer votre signature en y insérant couleurs, images, liens, mise en forme et autres...

Google ne faisant pas les choses à moitié active dans la foulé la gestion des signatures associées à votre adresse d'expédition. Si comme moi vous avez plusieurs adresses mail configurées dans votre compte Gmail il vous reste donc a créer une signature différente pour chacune d'entre elles.

Enjoy !

Javascript :: Un QR Code sur mon blog

Fabrice Coutant — 2010-06-21T04:20:00Z

Un QR Code est un code à barre en deux dimensions. Il a été créé par une société japonaise Denso Wave Inc. et est très populaire dans de nombreux pays. On commence à voir apparaitre ce type de code sur les affiches, les vitrines, des produits divers, etc,...

Le QR Code permet de stocker 4296 caractères alphanumériques. Vous pouvez donc transformer en QR Code une URL, une carte de visite, un numéro de téléphone, un poème, bref n'importe quoi qui ressemble à du texte. Un QR Code peut être lu avec son mobile via une petite application, certains mobiles intégrant d'origine la lecture des QR Codes. Une photo et hop, on est redirigé sur le site web de l'annonceur, ou la carte de visite d'une personne vient automatiquement compléter son carnet d'adresse.

Google propose via une API "Google Image Charts" de générer vos QR Code de façon très simple. Je vous propose ici d'intégrer via un peu de Javascript un QR Code dans vos pages. Ce QR Code ne contiendra que l'URL de la page en cours, libre à vous d'adapter. Je sais ça sert pas à grand chose mais bon, c'est pour illustrer le propos.

Télécharger

Il ne vous reste qu'a copier/coller ce bout de code sur vos pages à l'endroit ou vous souhaitez voir apparaitre le QR Code.

RGraph : librairie pour faire des graphiques HTML5

Fabrice Coutant — 2010-05-04T08:29:00Z

RGraph est une nouvelle librairie Javascript qui a la particularité d'utiliser le tag canvas de HTML5 pour créer tous les graphiques nécessaires pour présenter vos données. Ainsi, histogrammes, courbes, camembert, nuage de points, diagramme de Gantt, radar, etc,... sont disponibles. l'intérêt de cette librairie est que les graphiques sont générés coté client ce qui a pour effet de diminuer le traitement coté serveur et d'alléger la bande passante (pas d'images).

Nous sommes ici très proche de l'équivalent en Flash à la différence que seules les fonctions natives du navigateur sont utilisées (pas de plugin gourmand). L'ensemble des navigateurs modernes sont compatibles avec RGraph, cependant dans le cas de IE,... il faudra passer par google-chrome-frame (un plugin du coup) en attendant IE9.
Les mobiles embarquant Gecko ou Webkit n'ont donc pas besoin d'un plugin Flash pour afficher des graphiques...

L'utilisation de RGraph est libre et gratuite dans un cadre personnel et il faudra payer environ 55€ pour une utilisation commerciale.

http://www.rgraph.net

Spip TextMate Bundle

Fabrice Coutant — 2010-04-13T07:35:00Z

Étant utilisateur de l'excellent TextMate (éditeur du monde Mac) et faisant de plus en plus de Spip, j'ai commencé à me faire un "Bundle" pour me simplifier les tâches répétitives. Pour l'instant il permet d'écrire rapidement des boucles simples ou complètes, de faire des inclusions de noisettes et encore deux ou trois petites choses aussi bien dans les fichiers de squelettes que dans les fichiers php.

Je ferais évoluer ce "Bundle" au gré de mes besoins ou à la demande.

Téléchargement : Spip TextMate Bundle
SVN : tm-spip-bundle

Spip 2.1 est sorti

Fabrice Coutant — 2010-04-11T06:00:00Z

Le CMS au Polatouche vient de sortir dans sa version 2.1

Principales améliorations (communiqué officiel) : plus rapide :

* meilleure gestion des accès disque * cache sur les chemins calculés * améliorations et extension du serveur SQL virtuel plus sécurisée :

* sha256 sur les mots de passe et actions * vérification du fonctionnement des .htaccess * détection automatique des mises à jour de SPIP

plus belle :

* intégration (comme extension) du plugin « porte-plume » qui améliore grandement l'édition des champs texte et offre une prévisualisation en cours d'édition * interface graphique par défaut plus légère et élégante * possibilité de définir des thèmes graphiques (comme par exemple avec le plugin « themes_interface_privee ») * meilleure gestion de la taille des champs texte (agrandissement conditionnel) * gestion (configurable et désactivable) de la transparence PNG24 sous MSIE6 sur le site public * retour des liens « modifier cet article » et « proposer cet article » lors de l'édition des articles * nouvelle interface de gestion des plugins * remodelage des procédures de sauvegarde/restauration * possibilité de créer des URL accentuées en définissant _TRANSLITTERER_URL à « false » (attention à la configuration du serveur)

plus à jour :

* compatibilité PHP 5.3 * intégration de la bibliothèque jQuery 1.4.2 * intégration de la bibliothèque pclzip 2.8.2

plus svelte :

* premières mises en extensions de fonctionnalités du core : compresseur (js, css, html), porte-plume (barre d'outils), filtres images et couleurs (traitement d'image), safehtml (sécurisation des forums et pétitions), support pour vieux navigateurs * gestion d'un nouveau répertoire (extensions/) pour y placer ces plugins actifs dès l'installation et non désactivables

plus extensible :

* apparition de nouveaux points d'entrée pour les plugins * remodelage de la gestion des plugins (et répertoire spécifique pour leur gestion : ecrire/plugins) * les plugins peuvent être installés dans un ou des répertoire(s) supplémentaires si définis par la constante _DIR_PLUGINS_SUPP (facilte leur usage en cas de mutualisation) * possibilité d'étendre l'aide en ligne pour y intégrer des sections personnalisées et gestion automatique de ses traductions

plus structurée :

* mise en oeuvre d'une API d'authentification * amélioration de l'interface LDAP * refonte de l'API de notification * homogénéisation des balises #LOGO_ : les paramètres sont désormais passés entre accolades et disparition des « doubles pipes » (#LOGO_xxx||filtre (écriture obsolète mais toutefois encore fonctionnelle) * apparition de nouvelles balises et fonctions : #BOUTON_ACTION, |balise_img, |couleur_luminance (similaire à |couleur_saturation, mais agissant sur l'intensité lumineuse de la couleur) * possibilité pour les balises dynamiques (de type #FORMULAIRE_) de manipuler à l'exécution des valeurs qui ne sont connues que durant la compilation

plus facile à débugger :

* amélioration du débuggueur désormais capable d'indiquer la ligne fautive dans un squelette * le débuggueur informe désormais sur l'endroit précis de l'éventuelle mauvaise utilisation des balises dynamiques * API du débuggueur plus fonctionnelle (possibilités d'appel et de personnalisations accrues) * amélioration du mode inclure (?var_mode=inclure) affichant les différentes inclusions (intégration avec le plugin Skeleditor permettant de surcharger et d'éditer facilement en ligne des squelettes) * possibilité de surcharger la fonction spip_log()

plus geek :

* le compilateur offre une meilleure séparation entre le phraseur et l'arbre d'abstraction, permettant de créer de nouvelles syntaxes (pour les courageux) * réapparition d'un décompilateur complet et paramétrable offrant la possibilité de créer et d'expérimenter de nouvelles syntaxes

Plus d'infos et téléchargement sur http://www.spip.net

GP2 Series

Fabrice Coutant — 2010-03-26T20:14:00Z

Réalisation du site web et d'un module de remonté d'information en temps réel lors des courses.

Site réalisé sous Spip en collaboration avec

Le module de live timings utilise APE-PROJECT

Voir en ligne : www.gp2series.com

Race Renault F1 Team

Fabrice Coutant — 2010-03-26T20:02:00Z

Réalisation du site dédié aux courses de la saison 2010. Site réalisé sous Spip en collaboration avec PYRAT.net Artisan de la toile Apsulis POUIPOUIDESIGN - Réalisations / Spip, Ubuntu, Hébergement, HTML, Javascript, php, PouipouiDesign.net, Pyrat.net, Apsulis

My Renault F1 Team

Fabrice Coutant — 2010-02-26T19:54:00Z

Réalisation du site communautaire de la saison 2010 basé sur la plateforme Ning et d'un plugin pour Spip en charge d'alimenter en news. Site communautaire de Renault F1 Team basé sur Ning très fortement remanié. Mon plugin Spip2Ning est utilisé pour alimenter les billets de blog. - Réalisations / Spip, HTML, Javascript, Ning, php, PouipouiDesign.net

Renault F1 Team

Fabrice Coutant — 2010-02-10T19:44:00Z

Réalisation du site institutionnel pour la saison 2010. Site réalisé sous Spip en collaboration avec PYRAT.net Artisan de la toile Apsulis POUIPOUIDESIGN - Réalisations / Spip, Ubuntu, Hébergement, HTML, Javascript, php, PouipouiDesign.net, Pyrat.net, Apsulis

Extranet GP2 Series

Fabrice Coutant — 2010-01-26T20:09:00Z

Réalisation d'un extranet réservé à la presse. Site réalisé sous Spip en collaboration avec PYRAT.net Artisan de la toile Apsulis POUIPOUIDESIGN - Réalisations / Spip, Ubuntu, Hébergement, HTML, Javascript, php, PouipouiDesign.net

Chrome OS, Chrome OS et XUL OS alors !!

Fabrice Coutant — 2009-11-20T19:42:00Z

A l'heure ou Google présente sont Chrome OS et que la Mozilla Foundation annonce qu'un Firefox OS n'est pas à l'ordre du jour, j'ai une furieuse envie de ressortir de mes cartons un vieux projet (2ans)...

Voici le résultat d'une version preAlpha d'un XUL OS, autrement dit d'un système d'exploitation basé sur un Linux très léger et dont l'interface graphique et le bureau est entièrement réalisée avec XULRUNNER. Ce projet date de 2007 et était un "proof of concept". La machine de test était sur base MINI ITX VIA EDEN 800 et le système bootait en moins de 20s. Avec les progrès réalisés depuis : JIT, canvas, svg, html5, etc... ça laisse songeur sur les possibilités.

Spip2Ning :: pour poster dans un réseau NING

Fabrice Coutant — 2009-11-04T19:11:00Z

Réalisation d'un plugin permettant d'alimenter un réseau Ning avec le CMS Spip

Pour des raisons pratiques il peut être nécessaire de n'avoir qu'un seul Back-Office pour centraliser et pour diffuser l'information. Ainsi, on peut par exemple alimenter un site institutionnel, un blog, un site mobile mais aussi mettre à jour son statut Facebook et/ou Twitter avec un bon CMS assisté des bons plugins.

Dans mon cas, étant utilisateur de SPIP (ok pas encore sur ce blog, mais j'y travail) et ayant également besoin d'animer un réseau social basé sur NING il fallait que je trouve une solution pour faire communiquer les deux. Afin de faire les choses correctement et pour qu'éventuellement ça puisse servir à d'autres, je me suis donc décider à écrire un plugin pour SPIP. Ne connaissant pas le mécanisme des plugins de SPIP j'ai potassé un peu la doc et décortiqué quelques plugins existants.

Finalement, c'est le plugin Microblog qui de par son fonctionnement m'a le plus inspiré.

Une des difficultés est que NING a, il y a peu désactivé son API au profit de son implémentation d'Opensocial permettant de créer des applications compatibles avec plusieurs plateformes. Opensocial c'est bien mais c'est pas exactement ce que je voulais faire. Bref, dans mon cas il me faut donc analyser les requêtes de NING et les recréer via cURL dans mon plugin.

Fonctionnalités attendues

A terme ce plugin devrait offrir les fonctionnalités suivantes :

Créer un billet dans NING à partir de la publication d'un article dans SPIP.
Modifier un billet dans NING lors de la modification de l'article correspondant dans SPIP.
Supprimer un billet dans NING lors de la suppression de l'article correspondant dans SPIP.

Dans un second temps et de façon optionnelle :

Créer une entrée de forum dans NING à partir de la publication d'un article dans SPIP.
Modifier une entrée de forum dans NING lors de la modification de l'article correspondant dans SPIP.
Supprimer une entrée de forum dans NING lors de la suppression de l'article correspondant dans SPIP.

Et dans un troisième temps :

Mise à jour du statut à partir de l'interface privée de SPIP.

Voir en ligne : http://code.google.com/p/spip2ning/

Extranet Renault F1 Team

Fabrice Coutant — 2009-10-26T19:36:00Z

Réalisation d'un extranet à destination des journalistes. Site réalisé sous Spip en collaboration avec PYRAT.net Artisan de la toile Apsulis POUIPOUIDESIGN - Réalisations / Spip, Ubuntu, Hébergement, HTML, Javascript, php, PouipouiDesign.net, Apsulis

Engine-Lab change de peau

Fabrice Coutant — 2009-07-15T18:00:00Z

Refonte graphique et fonctionnelle du site de commerce en ligne. Le template du site d'Engine-Lab adopte une nouvelle charte plus clair et plus en correspondance avec l'esprit de la marque. Le site est maintenant accessible aux anglophones. C'est toujours le mariage de Magento et de Spip qui assure la motorisation du site. - Réalisations / Spip, HTML, Web, Javascript, php, Magento

Romain Grosjean saison 2009

Fabrice Coutant — 2009-05-13T20:28:00Z

Réalisation du site de la saison 2009 du pilote Romain Grosjean. "Nouveau site officiel de Romain Grosjean, Pilote d'essai ING Renault F1 Team. Vous y trouverez toutes les actualités sur une saison 2009 qui s'annonce riche en émotions : GP2 Series, ING Renault F1 Team, une double casquette des plus intéressantes. Au menu, nombreuses actus les week end de course, photos, résultats complets et accès presse et média." Le site est basé sur spip 2 et utilise quelques API Google via Zend GDATA. Les (...) - Réalisations / Spip, Ubuntu, Hébergement, HTML, Web, Javascript, php

IMC / IMG Calculator

Fabrice Coutant — 2009-04-01T20:20:00Z

Si comme moi vous devez surveiller votre santé et plus particulièrement votre poids, voici un petit outil simple d'emploi pour calculer votre "Indice de Masse Corporelle" ainsi que votre "Indice de Masse Grasse" qui à eux deux sont bien plus important que votre simple poids.

J'ai développé ce petit outil avec l'API OpenSocial v0.7 vous pouvez donc l'insérer simplement sur vos pages de sites compatibles.

L'URL de ce gadget : IMC / IMG Calculator (copier/coller dans le champ correspondant sur votre site)

Pour iGoogle : (OpenSocial v0.7 n'étant pas encore complètement implémenté sur iGoogle, ce gadget ne fonctionne pour l'instant que dans le "SandBox" de iGoogle. )

Claire Péricard conteuse

Fabrice Coutant — 2009-04-01T20:01:00Z

Réalisation du site web. Claire est conteuse. Elle souhaitait mettre en place un site web pour faire partager son art du conte. Ainsi elle y explique par le détail son parcourt et nous fait découvrir son répertoire. Le site est motorisé par Spip. - Réalisations / Spip, Ubuntu, Hébergement, HTML, Web, Javascript, php

Engine-Lab marque Française de VTT

Fabrice Coutant — 2008-10-14T19:40:00Z

Réalisation du site de commerce en ligne. Après un mois intense voici enfin la première version du site d'Engine-Lab nouvelle marque Française de VTT. La marque ainsi que le site on été lancés ce week-end au Roc d'Azur (une très grosse manifestation autour du VTT). Il reste encore beaucoup de travail à faire pour que le site soit vraiment pleinement fonctionnel. La prise de commande n'est pas encore active mais cela ne devrait plus trop (...) - Réalisations / Spip, HTML, Web, Javascript, php, Magento

Sign-It :: Ubiquity et signature HTML pour Gmail et autres.

Fabrice Coutant — 2008-10-01T11:36:00Z

Je cherchais depuis un petit moment le moyen d'insérer une signature HTML dans mes messages Gmail. Cette possibilité n'étant pas offerte par Google je me suis donc mis à chercher sur le net une solution qui pourrait me convenir. Il existe principalement trois options possibles. Les "Bookmarklets", les extensions Firefox ou les scripts "Greasemonkey" déclinés de différentes façons. Finalement, après divers essais je n'étais pas spécialement emballé. Étant grand utilisateur d'"Ubiquity" cette "expérience" sortie tout droit des labos de Mozilla je me suis demandé si la réalisation d'une commande spécifique ne serait pas la solution à mon problème...

Le résultat de cette réflexion du jour étant fonctionnel et relativement simple à utiliser j'ai donc décidé de le partager.

Pour que cela fonctionne il vous faudra installer Firefox (mais bon là, c'est quand même un minimum), l'extension "Ubiquity", passer quelques minutes à lire et à comprendre les tuto d'Ubiquity (vous verrez c'est magique). Après c'est pas très compliqué. Réalisez dans un éditeur de votre choix votre signature HTML, les images devront être hébergées sur le net. Rendez-vous sur le minisite http://www.strangeblackhole.com/sign-it/. Copiez, collez votre code HTML dans la zone réservée à cette effet, cliquez sur "Get it !!" puis sur le bouton "Subscribe" qui devrait apparaitre en haut à droite de la fenêtre. Suivez la procédure...

Un fois installé vous pouvez rédiger un nouveau message via Gmail et quand vous le souhaitez pour insérer votre signature, faite la commande qui va bien pour lancer "Ubiquity" puis saisissez sign-it et validez. Votre signature est automatiquement insérée.

J'ai essayé de faire un Screencast pour vous montrer comment ça marche. C'est pas du G.Lucas mais bon...

Vous verrez que l'utilisation d'"Ubiquity" est très simple et rapide et que très vite vous ne pourrez plus vous en passer.

Voir en ligne : http://www.strangeblackhole.com/sign-it