Le Potlatch

Tutoriel : créez une FAQ accessible et facile à mettre à jour avec JQuery

2008-07-15T22:55:50+02:00

A l'heure de mettre en ligne une FAQ qui devra être mise à jour par un néophyte, je me suis posé la question suivante : comment concilier la souplesse de mise à jour avec le dynamisme de javascript ? Simple : créer le HTML d'abord, et laisser JQuery animer le tout.

Lorsqu'un site doit être mis à jour par un animateur de contenus dépourvu de compétences techniques en HTML ou Javascript, le développeur a généralement deux alternatives :

limiter les possibilités d'édition au strict minimum : pas d'effets, pas de pages dynamiques ; l'animateur va tout péter et appeler au secours après dix minutes d'utilisation. Résultat : en dehors des fonctionnalités techniques pointues, les pages éditables sont tristounes et statiques.
créer des outils d'édition sur mesure : interfaces de gestion de contenus, tables de bases de données bien structurées, plugins super élaborés, le tout en langage serveur (PHP, ASP, Ruby...) ; ainsi on s'assure par divers garde-fous que les données sont au format voulu. Le site gagne en dynamisme, mais en contrepartie d'une complexité accrue, tant côté développement qu'administration.

A l'heure de mettre en ligne une FAQ (Foire aux questions), je me suis posé la question suivante : comment concilier la souplesse de mise à jour avec le dynamisme de javascript ? Pour rappel, le fonctionnement classique d'une FAQ est le suivant : une liste de questions rangées par thème, un clic sur la question affichant immédiatement la réponse associée.

Je me suis donc mis en tête d'utiliser la puissance de JQuery et des sélecteurs pour réaliser ce travail. Voici comment procéder, en

1. Créer les balises

Partons d'une structure de pages simple, aisément déclinable : un titre principal (h1), des sections (h2), des questions (h3) et enfin des réponses (p). Il s'agit d'un code facile à produire et à éditer dans un éditeur Wysiwig (ex. TinyMCE). Nous n'allons pas créer une page HTML complète, puisque cette FAQ sera mise à jour par l'animateur de contenus. Le code pourra donc ressembler à ça :

<h1>FAQ de l'administrateur</h1>
<h2>Section 1 : Connexion</h2>

<h3>Comment puis-je m'inscrire ?</h3>
<p>L'inscription est gratuite et ouverte à tout le monde. Cliquez sur le lien "inscription" présent à droite du logo.</p>

<h3>Je suis inscrit, mais le site ne me reconnaît pas. Comment faire ?</h3>
<p>Cliquez sur "connexion" puis saisissez l'adresse e-mail ainsi que le mot de passe saisis lors de votre inscription. </p>

<h2>Section 2 : Publication</h2>

<h3>Comment publier un article</h3>
<p>Après vous être connecté, vous pourrez immédiatement proposer un article en cliquant sur "publier un article" dans le menu de gauche. Votre article sera relu par notre comité de rédaction qui décidera de le publier ou non.</p>

2. Un peu de mouvement avec jquery

Nous souhaitons maintenant que ce texte se comporte comme une FAQ. Nous voulons donc pour chaque question :

masquer/replier la réponse associée au chargement de la page
afficher la question comme un lien (par ex. bleu, souligné, avec un curseur en forme de pointeur)
lors d'un clic sur la question, basculer l'état du paragraphe qui suit : visible s'il était masqué, masqué s'il était visible.

JQuery rend cette manipulation extrèmement aisée. Voici le code nécessaire :

// On inclut le source JQuery (en head)
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>

<script type="text/javascript">
// On lance la boucle sur tous les H3
$('h3').each(function() {
    // On masque le paragraphe qui suit
    $(this).next('p').hide();
    // On copie le style des balises A
    var couleurLien = $('a').css("color");
    $(this).css({"text-decoration" : "underline", "color" : couleurLien, "cursor":"pointer"});
    // A chaque clic, on bascule l'état de l'élément P suivant
    $(this).click(function() {
        $(this).next('p').toggle();
    });
});
</script>

Et voilà ! Votre FAQ s'anime et réagit à chacun des clics. Il reste à choisir d'inclure le code en intégralité, ou le lier sous forme externe dans une balise SCRIPT directement à la fin du code source éditable (avec le risque que l'utilisateur l'efface) ou de le charger sur toutes les pages de votre site, en le déclenchant uniquement lorsqu'une condition est remplie (par exemple en fonction de l'url, ou encore en détectant la présence d'un ID d'élément particulier).

Attention cependant : la réponse à chaque question ne doit comporter qu'un seul paragraphe. Les éventuels sauts de ligne auront la forme de balises BR exclusivement.

Démonstration

Conclusion

On fait en toute simplicité un pas supplémentaire vers la séparation entre la forme et le contenu. De plus, cette méthode se dégradera grâcieusement sur les dispositifs ne disposant pas de Javascript. Seul bémol, l'impression de la FAQ nécessitera au préalable de dérouler l'intégralité des réponses. Une idée ?

Très fort : le spam éthique (à peine cynique)

2008-07-13T07:56:39+02:00

Un joli spam inédit s'est glissé dans mon antispam de blog ce matin. Il dit :

please, do not delete the given message. money obtained from spam will go to the help hungry to children ugandi

Soit en bon français :

S'il vous plait, ne détruisez pas ce message. L'argent obtenu par le spam servira à aider les enfants affamés en Ouganda.

Le plus drôle, c'est que le lien mène à un site porno amateur.

On connaissait les moteurs de recherche qui reversent l'argent publicitaire à des bonnes œuvres, le site d'achat qui leur reverse une commission, les clics pour sauver la forêt amazonienne. Maintenant on veut nous faire avaler le "spam éthique". Vous avez dit cynique ?

Vous voulez survivre ? Soyez un filtre.

2008-07-11T07:40:24+02:00

L'individu de demain, connecté, efficace, celui qui réussira dans la vie, est essentiellement un filtre. Une passoire de la noosphère, un tamis de la modernité, un entonnoir des temps postmodernes. Sa mission : créer de la rareté au milieu de l'abondance. A vous de jouer !

L'idée n'est pas neuve mais elle mérite d'être répétée, parce qu'elle va façonner notre monde dans les années à venir.

Nous sommes des filtres.

Alors que l'homme a longtemps vécu à l'échelon local, ignorant ce qui affectait le reste du monde, la révolution technologique nous bombarde d'un déluge de données incessant. Chaînes d'info en continu, cours des bourses mondiales en rotation 24/24h, alertes par e-mail et SMS, nouveaux produits révolutionnaires, nouveaux artistes éphémères, nouveaux concepts technologiques novateurs, ça n'arrête pas, c'est le progrès il paraît.

Un filtre au boulot

Cela vaut au boulot. Je vois sans cesse, sur les postes informatiques de mes collègues stressés, des boîtes de réception engorgées. Jadis, on comptait le nombre de messages : 100, 1000, 10000... Maintenant ce chiffre astronomique est devenu celui des e-mails non lus. 10, 100, 1000, 10000. Il y en a qui paniquent. Certains pètent un plomb, les neurones incapables de s'adapter à cette nouvelle abondance de l'information (souvenons-nous que nous sommes les mêmes, biologiquement, que Cro-Magnon dans sa caverne). Certains, dans un accès de folie, tirent la chasse, SUPPR, tout part, le bébé avec les eaux usées. Mais d'autres, bizarrement, on l'air de s'y faire. 1000, 10000, 100000, peu importe : ils vivent avec sérénité l'engorgement de leur boîte aux lettres. Ils continuent à gérer efficacement leurs affaires et sont appréciés par leur hiérarchie. Ils irritent, énervent les interlocuteurs qui ne trouvent pas de réponse, mais finalement ils avancent sans se laisser empêtrer dans la gangue de la surinformation.

Ces gens-là sont des filtres. Ils trient, éliminent, oublient les 99% d'informations non pertinentes qui nous engluent au quotidien. Ils avancent, libres, fluides, dans une pluie de météorites qui élimine plus d'un cadre de l'ancienne école.

Un filtre sur le Net

Cela vaut sur internet, dans la consommation de culture et de connaissances. Avec la démocratisation des moyens de création, tout le monde (c'est à dire n'importe qui) peut se prendre pour un créateur. Dans le principe, c'est sympa la démocratie, mais en pratique ça produit énormément de déchets ou de matériaux semi-finis (musique pas mixée, articles pas relus, logiciels sans utilisateurs...).

Alors on a inventé les blogueurs-chroniqueurs. Ceux qui filtrent à votre place. Le bon blogueur passe la majeure partie de son temps à trier de la merde. Il regarde des vidéos de merde, écoute des musiques de merde, teste des logiciels Web 2.0 de merde, lit des articles de merde. Histoire de, parfois, dénicher une perle. Contrairement au mauvais blogueur qui cherche à faire du chiffre en sortant le maximum de merdes, le bon blogueur épargnera à ses lecteurs toute la merde qu'il bouffe à longueur de journée.

Le problème c'est qu'avec Internet et les réseaux sociaux l'activité de "filtre" est devenue un loisir aussi répandu que la production elle même ; tout le monde veut être un filtre et, du coup, la notion de filtre est devenue un fourre-tout absolu. On a donc des millions de blogueurs de merde qui critiquent des millions de productions de merde et tout ça contribue à augmenter le niveau des océans informationnels mais perturbe encore plus la recherche de productions de qualité. Retour à la case départ.

Mais alors, que faire ?

Quelle conclusion doit-on tirer de cela ? Ben que le travail ne se fera pas à votre place. Qu'il vous revient, en tant que lecteur, leader d'opinion, camarade, de filtrer, refiltrer, retrier avant de partager autour de vous. Encore plus fin, encore plus exigeant, encore plus intransigeant sur la qualité de la soupe. Ne sortir que ce qui est vraiment au dessus de la masse.

A vous d'exercer votre liberté, de démontrer votre agilité. Comment ? Par exemple en vous imposant de faire bien quand tout le monde fait beaucoup. De résister à la facilité du copier-coller. De toujours vous demander qu'est-ce qu'il restera de votre contribution à l'édifice bordélique de la connaissance humaine. Je ne dis pas que c'est facile, ni que j'y parviens moi-même : c'est un idéal vers lequel notre vie devrait tendre.

Et dans le doute, plutôt que de parler pour ne rien dire, mieux vaudrait qu'on se taise. Ce que je vais faire. Zouip.

Stats du blog en juin : 11000 visiteurs, 36000 pages vues, et... 11,19 dollars de recettes publicitaires

2008-07-05T16:52:11+02:00

Après deux ans et demie d'existence, petit point sur les statistiques de fréquentation de mon blog. Je pense que cela pourra donner un ordre d'idées aux blogueurs débutants ou calmer les ardeurs de ceux qui voudraient faire fortune sur le Web. Au passage, j'ai enfin découvert qui lisait mon blog... surprise.

Chiffres de fréquentation pour le mois de Juin 2008

Visiteurs uniques : 11773
Visiteurs par jour : 380
Pages vues : 36604
Pages vues par visiteur : 3.1

Ces chiffres ne tiennent pas compte des robots Google, Yahoo et autres identifiés.

Ces chiffres sont modestes mais pas ridicules. Je suis loin des 30000 visites quotidiennes d'un Presse-Citron, mais je consacre aussi beaucoup moins de temps à mon blog. Je publie à un rythme très faible (un article par semaine), donc j'estime que le ratio est assez bon.

Pages les plus vues

Les pages les plus fréquentées (le nombre de lectures concerne uniquement le mois de juin) :

Tendances Web 2007 : 60 palettes de couleur élégantes pour vos sites Web : 925 lectures
Planète Bosphore : 921 lectures
10 fonctions PHP-MySQL que j'utilise tous les jours : 657 lectures
Antispam pour les commentaires de blog : un Captcha sans images : 650 lectures
Tutoriel PHP : pourquoi passer au développement orienté objet ? : 549 lectures
La pompe moderne : Brassens chante Daft Punk : 515 lectures
7 pratiques Javascript qui changent la vie : 479 lectures
Erreurs 404 : faites la chasse aux pages perdues : 475 lectures
Tutorial MySQL : alléger des requêtes successives avec CREATE TEMPORARY TABLE : 445 lectures
Des tableaux de données simples, standards et lisibles en CSS et PHP : 415 lectures

Le constat est sans appel : 9 des pages les plus visitées sur 10 sont des articles de fond des sujets techniques (PHP, Photoshop, Javascript...). Petite exception pour La Pompe Moderne, découverte musicale qui a vraiment eu du succès, contre toute attente. Il semble donc que le public du site soit attiré en priorité par ce type d'articles, bien renseignés, utilitaires, plutôt que par mes divagations philosophiques ou des bétises qui ne font rire que moi (Carla Bruni nue, par exemple, n'est qu'en 12ème position malgré un titre accrocheur, et m'a valu un commentaire plutôt désagréable). J'essaierai d'en tirer des enseignements à l'avenir...

Recettes publicitaires

En termes de recettes publicitaires et d'affiliation, j'arrive à 11,19 $ en cumulant divers programmes dont je tairai le nom (je suis en train d'en changer, on verra si ça évolue). Ce qui, avec le cours de l'euro, recouvre grosso modo le coût d'hébergement de mes divers sites : jeu rigolo , musique en MP3 écoutable gratuitement, outil de gestion des flux RSS et autre générateur de mots-clés.

J'ai lu (je ne sais plus où hélas) qu'un blogueur avec un nombre de visites comparable au mien gagnait 40 euros par mois en publicités. Je veux bien connaître ses recettes parce que, malgré mes optimisations, je plafonne à 15 dollars (10 euros) les mois fastes. Quand je vois que certains commencent à vivre de leur blog, je me dis que j'ai loupé un épisode. Heureusement, j'ai un vrai travail pour nourrir ma famille.

Sources de trafic

Google, toujours Google : 65% du trafic
Fairedelor
Scoopeo
images.google.fr
webdesign-tutoriaux.com
joliespages.com
AOL, Live Search, Yahoo...

De toute évidence, le référencement de mon blog est presque exclusivement basé sur des annuaires, listes de liens et du référencement manuel. Je n'arrive pas à créer du linkbaiting, c'est à dire des contenus qui soient repris, cités, linkés depuis d'autres sites. Pas de réseau de "copains", pas de sites partenaires. Un manque évident !

Mots clés

Voici les mots-clés les plus tapés pour arriver sur le site :

la pompe moderne
erreur 404
couleur web
icones libres
php objet
ma musique
fonction php
palettes de couleurs
css tableau
carla bruni

Conclusion

La chose est entendue : je m'adresse surtout à des spécialistes des nouvelles technologies. Je ne gagnerai pas d'argent : tant mieux si j'évite d'en perdre. Je n'arriverai pas à accélérer mon rythme de publication, et je ne chercherai pas/plus à publier des trucs débiles juste pour créer du trafic. Il me reste donc à augmenter la qualité de mes articles, à essayer de fidéliser mes lecteurs, leur arracher des commentaires, et échanger avec d'autres blogueurs que j'estime. Je n'ai pas du tout consacré le temps qu'il fallait pour la création et l'entretien d'un réseau de "copains" blogueurs. Echange de liens, de contenus, billets en réponse à... Il y a du boulot de ce côté, si je ne veux pas finir autiste !

Bref, je vais augmenter la qualité, pas la quantité.

Video : des ouvriers qui en prennent plein la tronche

2008-06-29T17:32:04+02:00

Je sais pas d'où ça sort, mais je suis tombé sur ce truc complètement débile :

Attention c'est un peu long à charger...

Est-ce que c'est un fake ? Un snuff movie antédiluvien ? Une création artistique surréaliste ? Une vidéo syndicale datant du Front Populaire et dénonçant le patronat. Mystère. En tout cas c'est hyper hypnotique et complètement fascinant.

Nouveau design enrichi : le Potlatch prend le large

2008-06-28T13:16:55+02:00

Billet rapide pour fêter la nouvelle version du Potlatch. Nouveau design sur 3 colonnes, pour mettre plus de choses et s'adapter à l'agrandissement des écrans. Le logo est plus pro et de discrets effets de transparence donnent de la profondeur - sauf sur Internet Explorer 5 qui en restera à des aplats grisâtres : il faut savoir tourner la page des technologies dépassées.

Il y aura sans doute pas mal d'ajustements et d'ajustements dans les prochains jours. Ta panta rei, ouden menei

10 choses que les femmes attendent des hommes d'aujourd'hui

2008-06-22T16:20:20+02:00

L'homme moderne a échappé à l'esclavage, a bâti des démocraties et croit avoir maîtrisé la nature.

La femme moderne, elle aussi, a tenté sa libération. Mais au lieu de s'alléger, elle a ajouté à son fardeau d'antan (être une bonne mère, une bonne maîtresse de maison, une bonne économe) des obligations typiques des hommes (réussir professionnellement, atteindre l'orgasme, savoir bricoler). Du coup elle se venge. Et renvoie à l'homme une bonne partie de la pression sociale qui pesait sur elle.

L'homme idéal doit donc être ambisexe aujourd'hui. Aussi à l'aise avec les attributs virils qu'avec ceux de la féminité. Subtil et puissant. Attentionné et décidé. Impressionnant et respectueux. La question, c'est : sommes-nous à la hauteur ?

L'homme moderne a échappé à l'esclavage, a bâti des démocraties et croit avoir maîtrisé la nature.

L'homme idéal doit donc être ambisexe aujourd'hui. Aussi à l'aise avec les attributs virils qu'avec ceux de la féminité. Subtil et puissant. Attentionné et décidé. Impressionnant et respectueux. La question, c'est : sommes-nous à la hauteur ?

Prince charmant d'aujourd'hui, tu dois :

Savoir écouter les problèmes professionnels de ta dulcinée, dédramatiser les situations, et toujours approuver ses choix, comme le ferait une copine (mais reconnaître que ces problèmes pas graves sont très sérieux)
Ne jamais faire étalage de ta force pour la dominer (mais porter les courses et les valises sans la ramener)
Etre un amant délicat et sensuel (mais capable de prendre le dessus avec une virilité taurine)
Bricoler, conduire, prendre des décisions, tout faire mieux que les maris de ses copines (mais sans rentrer dans une compétition puérile entre mecs)
Faire la vaisselle, la lessive, le repassage, sortir les poubelles, changer les couches (mais c'est elle qui donne les ordres, tu n'y comprends rien)
Gagner beaucoup d'argent dans ton travail (mais rentrer tôt et être disponible pour elle et les enfants)
La laisser sortir voir des amies et faire du shopping comme toutes les femmes (mais évite les soirées foot-bière-copains comme tous les hommes, c'est trop cliché)
La faire rire, la faire rêver lorsqu'elle est obnubilée par ses soucis (sauf les jours où elle a beaucoup de soucis, auquel cas elle t'accusera de ne penser qu'à t'amuser)
Lui parler de ses défauts en toute franchise, sans paternalisme (mais SURTOUT toujours répondre "oui" lorsqu'elle demande si elle a maigri)

Mais... il n'y en a que neuf !

Eh oui, je vous laisse le soin de me proposer le dixième. Je garderai la meilleure idée. Au boulot !

Mur de flux RSS : vos photos classées par date

2008-06-18T17:49:22+02:00

On avance, on avance. Sur votre mur de flux RSS, vous pouvez désormais afficher les photos classées par jour. Vous pouvez ainsi voir en un clin d'oeil ce qui a changé depuis votre dernier passage.

Petit truc : les flux de Flickr marchent très bien.

Mon mur de flux

Votre mur de flux

Découvrez le mur de flux RSS pour voir vos photoblogs en images

2008-06-13T16:39:45+02:00

Je vous présente mon dernier projet personnel, un agrégateur de flux RSS photo. Alors que la plupart des lecteurs RSS (Google Reader et autres Technorati) vous présenteront les informations sous forme de longs discours, le Mur de Flux va puiser dans vos flux RSS/Atom pour n'en garder que les images. Il les affichera alors une mosaïque de flux visuels.

Vous pouvez vous inscrire pour créer votre propre liste de flux qui sera consultable par d'autres internautes.

Le projet est en bêta, donc signalez-moi les bugs, flux incompatibles et autres remarques d'ordre général.

Le Mur de flux du Potlatch

Red bull, burn : des boissons qui en ont

2008-06-01T12:54:25+02:00

Les boissons énergisantes sont à l'honneur avec l'imbroglio médiatique autour de l'importation du Red Bull contenant de la taurine en France.

Dans le métro, c'est Burn qui s'affiche en grand format, avec une mise en scène très virile (très kéké en fait, avec les flammèches sur fond noir qui ne dépareilleraient pas sur une Fuego à quatre pots tunée à mort).

Pour un français, l'appellation de ces boissons n'est pas neutre : prononcez BURNE et RAIDES BOULES, ça veut bien dire ce que ça veut dire.

Il n'y a pas de hasard en publicité. Cette heureuse ambivalence verbale n'aura pas échappé aux responsables de la com' de ces marques. S'ils n'ont rien fait pour le changer, c'est que ce complément subliminal de signification correspond réellement à leur message.

Vous pensiez que c'était pour vous réveiller ? Non, c'est pour vous transformer en homme. Merci le marketing.