da scritch net works - Mot-clé - dotclear

Travaux d'été

Da Scritch — 2014-07-08T14:23:00+02:00

Profitons de ce temps superbement maussade pour refaire son site “pro”, et vous inonder à la rentrée avec plein de nouveaux articles techniques. Ça m'oblige à m'ouvrir, à apprendre de nouvelles langues et si visse pas sème, part à Belloume comme disais je ne sais plus qui…
Webdev

C'est comme ça.
Ça vous démange pendant un bail, mais vous êtes intimidés ou peu motivé. Et d'un coup, vous avez envie de refaire ce câblage électrique qui a eu chaud, de couper ce lierre en petites bûchettes, de refaire cette tuyauterie qui donnait des signes de faiblesses et de ressouder ces prises bourrées de faux-contacts à force de manips.

Moi, repeignant mon plafond et m'accrochant au pinceau. Selfie de 2006.

Ben c'est un peu ce qui m'arrive cet été.

Je refais mon site corporate

Le design actuel de dascritch.com date de 2011. Oui, il était déjà en responsive web design, mais de nouveaux éléments méritaient d'y être intégrés, notamment mes conférences et plus de textes explicatifs.
Et aussi d'être un poil plus habillé, même si les css ne sont toujours pas mon fort.

La différence, c'est que j'ai voulu le faire sur un serveur statique. L'actuel (backup de la page web) fonctionne sur dAgence, et utilise son moteur de pages, de sous-images et de news grâce à l'extension de feeds. Le code front est quasi-intégralement statique. Difficile de faire un code plus lisible à intégrer :

<section id="rea"> <h3>Quelques réalisations récentes :</h3> <T:Pages limit="5"> <article> <a href="https://dascritch.net/post/2014/07/08/{{T:PageText name="lien"}}"><img src="https://dascritch.net/post/2014/07/08/{{T:PageImage format="realisat"}}" alt="{{T:PageTitle}}"></a> <div> <h4>{{T:PageTitle}}</h4> {{T:PageText}} </div> </article> </T:Pages> </section>

Seulement, dAgence est en fin de vie, son code n'a pas bougé depuis 2 ans. Avec Nicolas Guilhou, j'y ai mis beaucoup de cœur, de travail et j'aurais beaucoup à écrire sur ce qu'on y a fait, mais je n'ai ni l'envie de le continuer, ni de l'ouvrir. Ce dernier point à cause d'un client qui m'a dégoûte et aussi la qualité de mon propre code en 2007.

J'ai alors pris une décision bizarre : Je me suis rendu compte que pratiquement personne n'a vu de code de ma part. Je suis très timide et j'ai pas eu l'occasion de travailler sur des projets open-sourcés. J'ai donc décidé d'utiliser mon github pour cette refactorisation. Accessoirement, cela facilite mon boulot quand je suis entre plusieurs machines.

Mais pourquoi faire simple ?

J'ai donc inversé le concept : le backend est statique, le frontend puisera ses données.

J'ai tenté une version AngularJS + Bootstrap volontairement pas codex, je l'avoue ;), une autre en ReactsJS + Foundation + Sass stupidement bloquée pour les raisons ci-dessous. Finalement, je suis reparti sur mon squelette, j'ai intégré le TinyTypo de la fabuleuse Romy “Tétue” Duhem-Verdière. J'en viens à la même conclusion que Paul Rouget et Maxime Thirouin : des fois, on va nettement plus vite sans s'encombrer de frameworks-couteau-suisse.

Et maintenant, ça marche comme je le voulais en MSIE9. Oui oui. Merci IE Net Renderer

Bon, par contre, le design RWD liquide avec 5 breakpoints de largeurs différents, je doute que ça soit une solution viable à terme ^^;

Je voulais faire des requêtes cross-sites, mais les mesures de sécurité prophylactiques (CSP + CORS) que je loue tant me posent des soucis en développement local ou en hébergement github.io. J'en ai donc profité pour écrire un parser pour récupérer mes derniers articles. Et plutôt que le faire en Javascript, en PHP ou même avec des regex via le shell, j'ai tenté de le faire en python pour sortir de ma zone de confort. Oui, le code est crade, mais il coupe la moutarde.

Normalement, je devrais déployer cette nouvelle version avant la fin du mois. Vous pouvez toujours commenter en bas ou ouvrir un ticket bug/suggestion sur github

Le truc rageant, c'est que quand tu termines ton site, tu tombes sur jsonresume.
Ah ben flute.

Le faux calme

Vous verrez moins d'articles techniques publiés cet été. Des articles comme les bug reports, la licence JSON, la balise <img />, les floating labels, les boutons de partage sociaux et d'autres peuvent demander de la recherche. J'ai décidé de prendre le temps là-dessus pour gaver vos listes d'articles à lire en urgence.

J'en profite aussi pour essayer différents projets qui justement vont me servir à écrire ces articles. Certains projets sont déjà consultables sur github pendant leur construction :

Une bibliothèque javascript pour faire des ancres timecode dans les pages web incluant sonore ou vidéo, par exemple un podcast
Un jeu de programmation robotique sur une idée et avec Fabien Tregan,
Un addon Firefox pour les auteurs utilisant dotclear
Bricoler un peu pour me forcer à apprendre Dart, Python (c'est déjà parti), Ruby, Rust et Go
Écrire des composants web-components avec la fantabuleuse bibliothèque Bosonic de Maître Raphaël Rougeron & associates
Ré-implémenter en js, php, ruby et python avec tests uniformes le système de numéro de commande de dagence
Améliorer encore le thème de mon blog
Parler des implémentations des systèmes de login sur les sites webs, et du faux conflit UX/Sécurité
Reprendre après son long hiatus ma Psychanalyse du Clavier
Disséquer la navigation documentaire
Comparer BBCode-like et Wysiwyg HTML (je sais qu'il est très attendu, ce dossier)
IPv6 sans pleurer

Ça va m'occuper.

Pourquoi je porte un treillis customisé

Da Scritch — 2014-05-14T10:29:00+02:00

Quel sens a ce costume que j'arbore aux conférences sur le web, ce que signifient les badges et décorations et surtout… est-ce ridicule ou aide-t-il à porter un message ?
Gizmo

Je vous parlais hier de la puissance des autocollants sur les capots d'ordinateurs portables.
Reprenez cet article, remplacez sticker par badge et ordinateur par vêtement. Vous verrez, ça marche presque pareil ! La différence, c'est que vous pouvez ne pas les arborer en permanence, et donc correspondre plus à un contexte. Eh ben au dernier Paris Web, j'ai voulu aller plus loin : à la fois support de conférence, performance scénique et expression de compétences et de valeurs.
Et comme j'ai toujours été attiré par le concept de vêtement intelligent.

Aujourd'hui, je vous explique pourquoi j'assisterai à ce Sud Web en veste militaire “arrangée”.

Internet est en guerre

Contre des super-puissances militaires, contre des groupes terroristes, contre de très grandes entreprises, contre des partis politiques, contre des corporatismes inquiétants, contre des organisations mafieuses.

Je dois rappeler à mes confrères que nous sommes des victimes collatérales. Pourtant, nous avons la puissance de nous défendre. C'était l'idée que je voulais passer dans ma conférence au dernier Paris Web.

Or, je me disais que présenter une tête de zapatiste comme Jérémie Zimmermann ou des cravates de vendeur de caravane comme Benjamin Bayart soit raccord avec l'image que je souhaitais laisser, Je me voyais encore plus mal dans un cosplay mash-up des deux. En fait, je voulais plus répondre au concept de cyber warfare (guerre numérique), à CE genre de photo :

L'Amiral Michael S. Rogers, directeur de la NSA.
Source : la NSA elle-même, image libre de droit

J'ai donc eu l'idée de confectionner ce support de conférence bien particulier.
J'en avais fait le buzz, mais je n'étais pas très sûr de son impact, à savoir s'il allait bouffer mon discours, ou le ridiculiser. Mais il fallait le faire pour la France
Si j'étais encore intimidé de le porter dans le Très Saint Palais Brongniart, mes doutes se sont dissipés quand j'ai enfin croisé IRL Daniel Glazman : « Ah Xavier ! Enfin je te… Oh woah, tu claques ! »

Touché ! *

* en Français dans le texte

Les pistes

Un t-shirt, c'est bien beau, mais la place est limitée.

Anonyme arborant un t-shirt fortement revendicatif. À Paris Web, le fou.

En pratique, on ne voit qu'un seul t-shirt à la fois. On peut évidemment jouer sur la durée et le changement régulier de t-shirts, mais les personnes qui ne vous voient que rarement, et en général en hiver, auront moins d'informations sur vous par ce biais.

Le très élégant Thomas Parisot a une solution intelligente, mais dont je n'ai pas pensé à immortaliser : Notre très swinging londonien met ses badges sur la lanière de ses sacs. Ici, une photo issue du premier Sud Web où il arborait déjà sa bretelle à épinglettes.

J'ai un blouson Celio Sport en nylon, très léger qui avait la propriété de bien isoler de la pluie, de laisser passer la transpiration. Il se plie très bien dans un sac et se déplie sans être froissé . Il a un très chouette design et de faire encore plus cosmonaute quand j'ai collé un magnifique patch Firefox. Mais à force de le porter, il s'est usé. Je l'ai donc “retiré de la circulation”. Et le tissu (polyamide pour l'extérieur, coton pour la doublure) se marque très vite en portant des badges et des pin's. Malheureusement, il n'a jamais été ré-édité.

D'ailleurs, si quelqu'un a ce genre de patch Firefox ou autre, je suis preneur, sinon, il faudra que je le ^+X , ^+V en découpant et recousant. Pas génial.

Mes inspirations

Les romans cyberpunks de William Gibson, les médailles de vétéran de jeux vidéos, les uniformes des cyber-militaires du Pentagone et bien évidemment celles des haut-gradés de n'importe quelle dictature fascistes ou/et communistes.

Les palmes académiques revenant à ces hiérarques de la République Démocratique de Corée, dont les batailles gagnées vont jusqu'aux genoux.

À ce sujet, savez-vous ce qui peut vous coûter de ne pas porter un badge en Corée du Nord ?

Ingrédients

Pour ce qui est des matières premières, ce fut facile : j'avais depuis un bail ce treillis urban/hiver acheté dans un surplus militaire à vil prix. Costaud, épais, en coton, il est aussi juste assez rigide pour porter le poids des badges, et un peu chaud. Je le mets surtout pour rappeler à cette immonde radio de gauchos que je suis leur caution de droite.

Ici, avec le Präesident Diktator Generalovitch de Radio FMR, son Fondatorissime Philippe Frézières en 2006.

J'ai démonté deux claviers après les avoir violemment psychanalysés. Je comptais utiliser les touches comme médailles amovibles et mettre des messages rigolos. Mais vu le travail pour tout monter, j'ai préférer abandonner.

En farfouillant dans mon fourbi de pièces détachées à gauche après la caisse du chat, j'ai trouvé de la nappe IDE et de la barrette de RAM.
Une barrette de RAM par épaule risquait de faire trop long, et surtout, je n'avais qu'une seule barrette. On l'a coupé à la sauvage au Tetalab. Une barrette standard est composée de 8 puces. 8÷2 = 4, cela donne le grade de Commandant. Je les ai monté sur des nappes IDE, dont je montre le connecteur, la partie coupée est caché sous le col de la veste et ça tombe bien car la nappe a tendance à rester courbé si on l'a plié.

La plaque nominative est en fait une bête plaque de portier sérigraphiée chez le cordonnier. C'est propre, exactement aux dimensions de celles des généraux américains et le verso est autocollant.

Évidemment, les magnifiques skull-badges conçus par Snootlab pour l'édition 2012 du THSF devaient avoir une place de choix : la place des écussons sur les avant-bras. À mon grand malheur, j'ai malencontreusement grillé la programmation des puces, ce qui fait qu'il n'y a aucun effet dessus, ni le zombie tag-game, ni le mode démo. C'est vraiment dommage.

La plaque, les épaulettes et les écussons d'épaules sont montés sur scratch pour pouvoir passer la veste en machine sans bougner les décors, ou pour faire plus “discret” dans les transports en commun.
D'ailleurs, le fait d'avoir monter en scratch les épaulettes et écussons d'épaules permet d'envisager de les interchanger. Le fait de mettre aussi la plaque d'identité me permet de le louer à des comparses psychopathes.

Je souhaitais mettre en fourragère des nappes SATA, ou sinon en surcouture, mais elles vraiment trop peu souples. Un défaut de conception du standard : l'usage vestimentaire n'a pas été expressément prévu par leurs constructeurs et l'organisme de standardisation. Quel manque de clairvoyance…

Les badges en détails

J'ai dû, et je le fait encore, choisir très soigneusement dans ma collec' les badges qui me serviront de décoration. Là aussi, j'en avais un énorme stock, donc je privilégie ceux à double sens.

Description des badges actuellement arborés, de gauche à droite, de haut en bas :

« I'm a Firefox test pilot » : Je surfe souvent Firefox en Nightly, ainsi que d'autres applications. Et le renardeau en tenue d'aviateur très mignon est susceptible de faire craquer les filles ;
Watchmen : Parce que la BD d'Alan Moore et de Dave Gibbons est un monument de la littérature moderne, que je ne peux que saluer en tant que critique BD, et aussi parce que la question de Juvénal, « mais qui gardera ces gardiens ? » est malheureusement dans nos démocraties d'une actualité brûlante ;
Dotclear est un CMS open-source de très grande qualité de code et de sécurité. Et il se trouve que sa communauté et ses développeurs sont des amis très chers depuis 10 ans ;
Radio <FMR> est une radio associative indépendante d'esprit et de ton, ce qui est malheureusement devenu très rare. Et comme j'y officie depuis 20 ans, mon soutient est normal ;
« Git poule » car le jeu de mots me fait toujours rire, et qu'il est difficile de trouver un outil plus utile et léger, par opposition aux gros IDE/CVS monolithiques ;
Homo webus car c'est ma réelle condition dans une imaginaire classification de Linné ;
Neko ou plus exactement Nekomix qui est un fanzine délirant avec une équipe très vivace et qui vient de sortir son 9^ème numéro, parce que j'aime la bd indépendante qui n'est pas bloqué dans une chapelle de genre. Hélas, c'est le marchand de fripes que la plupart des gens connaissent :( ;
Sud Web, mon premier grand frisson dans la communauté du web. Que du bonheur ;
Firefox car pour la première fois, un logiciel open-source est devenu utilisable par n'importe qui, avec un bon esprit, et sans concessions après être revenu de très très loin.

Petit bristol et remerciements

Treillis de Netrunner.
Par Xavier Mouton-Dubosc (2013)

Treillis militaire allemand à motif urbain, composants informatiques et électroniques, badges, plaque de porte, scratch, colle néoprène, fil de couture, scotch.
Photographie d'exemple par Enflammée.

Réalisé en Septembre dernier afin d'être porté sur la scène de Paris Web 2013.
Inspiré et dédié à Costume Player, la seule émission de couture à la Télévision Française.
Jérémie Nicolle m'a conseillé sur la colle néoprène, Dusport m'a fourni la plaque sérigraphiée et Megami Yume a designé l'ensemble, dans un but archi intéressé : Porter ledit costume de pirate informatique à son mariage.

Dont acte.

Alors, chers amis et surtout ceux que je verrais ce week-end à Sud Web, montrez vos couleurs !

Refaire des commentaires avec floating labels

Da Scritch — 2014-03-11T08:53:00+01:00

Making of du remaquillage d'un champ de formulaire par un développeur web qui doute franchement de ses goûts. J'ai besoin de vos avis avant de le faire remonter dans DotClear.
Webdev

TL;DR ? Dépôt GitHub, la maquette hébergée sur GitHub et bien évidemment, vous pouvez l'utiliser dans cette page et donc participer au débat.
Ce projet de portage a été rendu public le 13 Novembre 2013, pour la sortie de Dotclear 2.6 et pour l'anniversaire de Kozlika. Annoncé sur le forum à la sortie du billet.

En général, je ne glose pas trop sur les développements que j'utilise pour mon blog. Je me suis rendu compte que par rapport à des confrères, j'étais très timide sur mes travaux. C'est une erreur. De même, j'aime bien prendre mon temps et réfléchir longuement sur des éléments d'interfaces.
C'est la vue de cette animation de Matt. D. Smith qui me donne envie de me croire webdesigner

Avouez que ce mockup est superbe, son animation hypnotique, promet des lendemains qui chantent, et qu'il est sexy comme une jeune femme aux yeux revolvers qui chevauche un fougueux cabriolet cheveux au vent.
Excusez-moi, je crois que je m'égare. Gare au Garou. Et garons-nous sur le bas-côté.

L'apparition de cette animation date d'un peu après une très forte remise en cause par Apple de son interface mobile iOS. En soit, il y a eu énormément de discussions passionnantes sur ce mockup, à commencer par son auteur qui s'en est expliqué sur son blog. Il y eu aussi de nombreux ports, mais la plupart travaillaient sur un usage peu modéré du javascript. Vous le verrez plus loin pourquoi je pense que ce n'est pas une solution idéale.

État des lieux

Je vais tenter d'appliquer ce principe de formulaire dans l'excellent thème Ductile pour Dotclear qui a la class de la simplicité, l'élégance du responsive, le style de la personnalisation et la french-touch de Kozlika.
Kozlika a fait un superbe travail de design, mais il faut néanmoins reconnaître que le code HTML du formulaire de commentaire de Dotclear n'a pas bougé depuis… 2005. Du moins, dans la version reprise en 2013 pour construire le thème actuel de mon blog.

Cliquez pour voir le code. Attention : Sur ce code originel, il y a prescription.

<form action="#pr" method="post" id="comment-form">

  <h3>Ajouter un commentaire</h3>
  <fieldset>

    <p class="field">
      <label for="c_name">Nom ou pseudo&nbsp;:</label>
      <input name="c_name" id="c_name" type="text" size="30" value="" />
    </p>

    <p class="field">
      <label for="c_mail">Adresse email&nbsp;:</label>
      <input name="c_mail" id="c_mail" type="text" size="30" value="" />
    </p>

    <p class="field">
      <label for="c_site">Site web (facultatif)&nbsp;:</label>
      <input name="c_site" id="c_site" type="text" size="30" value="" />
    </p>

    <!-- ici, un piège à spam -->
      
    <p class="field">
      <label for="c_content">Commentaire&nbsp;:</label>
      <textarea name="c_content" id="c_content" cols="35" rows="7"></textarea>
    </p>

    <p class="form-help">
      Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.
    </p>

  </fieldset>
  
  <fieldset>
    <p class="buttons">
      <input type="submit" class="preview" name="preview" value="prévisualiser" />
    </p>
  </fieldset>

</form>

Depuis, on a eu le brouillon WebForms2, son polyfill JS webforms2.js, son implémentation native dans Firefox puis Safari, l'arrivée de Chrome et l'implémentation native dans MSIE. Donc j'ai mis type="email/url", maxlenght="255" et surtout required là où ils étaient parfaitement justifié. Vivent les validations côté client.

Ensuite, j'ai transformé le bouton <input type="submit" /> en un réel <button type="submit"></>, tout en sortant le texte signifiant de la valeur où il n'a rien à faire. Là aussi, les obstacles étaient levés depuis un temps.

Bref, il étant temps de moderniser ce bout de code.

Damnation et implémentation

Je vais essayer de le faire le plus possible sans une once de javascript. Cela peut paraître contradictoire pour un développeur, mais à mon sens,

plus un code est simple, plus il est parfait ;
émuler ce que l'on peut faire en natif fait perdre du temps ;
être au plus proche des standards garanti la pérennité ;

Donc → Plus on revient vers un fonctionnement “naturel” du navigateur ou du serveur, plus on est sûr de la stabilité de ce que nous construisons.

Et surtout que l'Inspecteur Dirty Hacky ne me refasse pas le portrait

Le meilleur exemple que je puisse donner, c'est l'attribut placeholder="". Trop peu d'entre vous se souviennent du temps où l'on essayait de créer le comportement placeholder en javascript : Ça plantait, des fois ça merdait quand on cliquait pour mettre . Quand Apple a intégré placeholder dans le moteur Webkit pour l'application iTunes, on ne se doutait pas que nos calvaires allaient prendre fin.

Bref, il faut voir l'implémentation de ce design de formulaire comme un simple exercice, au même titre que je fais mes kata le matin avec mon kawa. Cette “futilité” doit vous rester en mémoire d'autant plus que depuis la première apparition de cette animation, il existe des bibliothèques javascript (!) qui feront ce boulot. Et qui feront dégainer Dirty Hacky, mais si vous pensez courir plus vite qu'un parseur .357 Magnum, vous pouvez tenter.

Premiers commits dans la Joie !

Toute animation sera en transitions CSS. Sur les plus petits éléments possibles avec le moins possible de repaint/reflow dans le viewport du navigateur afin de garder une belle fluidité d'animation. Parce que là aussi, l'optimisation et la beauté doit passer par l'optimisation des ressources clients.

Dans le mockup, les labels passent en bleu quand le champ a le focus. Une seule solution pour l'implémenter en CSS pur : dans le source html, renverser l'ordre les éléments <label></> et <input />.

Première mauvaise surprise : je ne connais aucun sélecteur css pour cibler un élement <input /> ou <textarea></> tant que son contenu est vide. La pseudo-classe :empty s'applique à la propriété DOM (el).innerHtml d'un élément, pas à sa valeur. Cibler en css l'attribut/valeur [value=""] ne sert à rien. J'ai dû le faire en JS. Bien évidemment, c'est juste une modification de classe, pilotant l'effet graphique en transitions css.

J'ai un autre souci : la pseudo-classe :invalid s'applique dès le chargement de page, hors je veux changer l'aspect que quand le champ a été changé.
Les pseudo-propriétés propriétaires :-moz-ui-invalid et :-moz-submit-invalid seraient parfaites, mais je veux que ça marche sur tous les navigateurs modernes d'un coup sans me prendre la tête et y revenir dessus dans 3 mois. N'oubliez jamais : les préfixes proprios, c'est pas pour mettre en production !

Donc, il me faut écrire un autre polyfill javascript qui mettra au formulaire la class modified. Ça tient en une dizaine de lignes, mais c'est frustrant.

var tagIfEmpty = '.field';
var markedNotEmpty = 'notEmpty';
var tagIfModified = 'form';
var markedModified = 'modified';

$(tagIfModified).on('change input',tagIfEmpty+' :input',function () {
	var $p = $(this).closest(tagIfEmpty);
	if (this.value!=='') {
		$p.addClass(markedNotEmpty);
	} else {
		$p.removeClass(markedNotEmpty);
	}
	$p.closest(tagIfModified).addClass(markedModified);
});

Oui, le code est ignoble. Et comble de l'insulte, comme j'utilise jQuery depuis un bail sur mon blog, je l'ai pas fait en javascript natif. Honte à Sapajou Hilare.

Bonus d'interface

Il m'a semblé cohérent de n'afficher le bouton d'envoi qu'une fois que le formulaire soit valide, donc quand les champs obligatoires soient remplis et les informations au bon format. Ce qui veut dire que si le site web n'est pas vide, mais que l'url n'est pas valide, le formulaire ne peut être soumis.

Il me manquait aussi un aspect visuel pour indiquer les champs invalides. Plutôt que mettre les champs en rouge, ce qui est trop agressif et impérieux, j'ai tenté avec un léger dégradé sur les champs invalides. C'est peut-être pas le meilleur choix puisque cela casse l'impression d'espace qu'amène les floating labels.

Un message d'information apparaît quand le focus est donné sur au <textarea></>. Ceux qui commentent régulièrement des blogs ont l'habitude d'avoir soit du BBCode, du Wiki, du MarkUp ou un jeu très restreint de balises HTML. J'estime que c'est inutile (j'en parlerais bientôt) et qu'écrire une adresse web a forcément comme intention de mettre un lien. C'était le comportement par défaut de Dotclear, que j'ai gardé.

Et enfin, quand le bouton de validation apparaît, un texte complémentaire indique si la publication est immédiate ou sujette à validation à priori.

Et voilà !

Vous pouvez tentez la maquette hébergée sur GitHub ou naviguer dans le commit de la version exposée pour ce billet, car je vous parie que l'an prochain, j'aurais complètement refait le vrai formulaire en bas. Ou voir la capture et le code dessous :

Cliquez pour voir le code. Attention : Sur ce code nouveau, il y a l'excuse de la nouveauté.

HTML :
<form action="#pr" method="post" id="comment-form">
  <h3>Ajouter un commentaire</h3>

  <fieldset id="comment-1stline">
    <p class="field">
      <input name="c_name" id="c_name" maxlength="255" required="required" type="text" placeholder="Nom ou pseudo&nbsp;:" />
      <label for="c_name">Nom ou pseudo&nbsp;:</label>
    </p>
    
    <p class="field" id="g_site">
      <input name="c_site" id="c_site" maxlength="255" type="url" placeholder="Site web (facultatif)&nbsp;:" />
      <label for="c_site">Site web (facultatif)&nbsp;:</label>
    </p>
  </fieldset>

  <fieldset id="comment-2ndline">
    <p class="field">
      <input name="c_mail" id="c_mail" maxlength="255" required="required" type="email" placeholder="Adresse e-mail&nbsp;:" />
      <label for="c_mail">Adresse e-mail&nbsp;:</label>
    </p>
    <!-- honeypot -->
  </fieldset>

  <fieldset id="comment-3rdline">
    <p class="field">
      <textarea name="c_content" id="c_content" required="required" placeholder="Commentaire&nbsp;:"></textarea>
      <label for="c_content">Commentaire&nbsp;:</label>
      <span class="form-help" id="form-help">Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.</span>
    </p>
  </fieldset>
  
  <fieldset id="comment-4thline">
    <p class="remember">
      <button class="preview" name="preview" id="preview" type="submit">prévisualiser</button>
      <label class="form-help" for="preview">(votre texte sera publié après validation)</label>
    </p>
  </fieldset>
</form>

CSS :
.field label {
  position: absolute;  
  top:0.8em;
  opacity : 0;
  transition-property: opacity top;
  transition-duration: 0.4s;  
}
.field.notEmpty label {
  top : 0;
  opacity : 1 ;
}

.field.notEmpty :active + label, .field.notEmpty :active + label {
  color : blue;
}

.field input, .field textarea, .field :active  {
  margin  : 0;
  outline : none;
  width : 95%;
  background : transparent;
  border : none;
  border-radius: 0px;
}

.field :invalid {
  border : none;
  box-shadow : none;
}

.modified .field :invalid {
  background-image: /* préfixes proprios */linear-gradient(top, #EEF 0%, #FFF 30%);
}

#comment-form p {
  position : relative; 
  margin : 0;
  padding : 1em 0 0;
  border-top : 1px solid #cce ;
}

#comment-1stline p  {
  border : none;
}

#comment-1stline #g_site {
  border-left : 1px solid #cce ;
}

@media only screen and (em>max-width:479px) {
  #comment-1stline #g_site {
    border-top : 1px solid #cce ;
    border-left : none;
  }
}

@media only screen and (min-width:480px) {
  #comment-1stline .field {
    float : left;
    width : 49%;
  }
}

#comment-4thline p {
  padding-top : 0.5em;
}

#comment-4thline, .modified:invalid #comment-4thlin {
  opacity : 0;
  border-top : 1px solid #cce ;
  transition-property : opacity;
  transition-duration : 0.4s;  
}

.modified #comment-4thline, .modified:valid #comment-4thline {
  opacity : 1;
}

#form-help {
  display : block;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.4s;  
}

textarea:active ~ #form-help {
  opacity: 1;
}

#comment-form button {
  padding : 0.33em 0.66em;
  border: 1px solid rgb(104, 104, 103);
  color : rgb(238, 238, 238);
  font-size : 0.875em;
  font-weight : bold;
  text-align : center;
  text-shadow : 0px 1px 1px rgba(0, 0, 0, 0.3);
  box-shadow : 0px 1px 2px rgba(0, 0, 0, 0.2);
  background-image : /* préfixes proprios */linear-gradient(top , rgb(119, 119, 119) 0px, rgb(85, 85, 85) 100%);
}

Le débat reste ouvert

Brad Frost a sorti un excellent article critique : Il parle de soucis sur la sémantique, que j'ai tenté d'éviter autant que possible, mais surtout de problèmes d'utilisabilité. Tellement bien raisonné et empli de bon sens que j'avais des doutes à continuer. Notamment, elle oblige au placeholder de porter le même texte que le label, une redondance inutile. Seule la mise en production permet de trancher.

CSS Tricks propose une idée alternative qui enlève la redondance du texte de label, mais la version des labels flottants à droite réduit l'espace utile du champ d'entrée.

Mais surtout, j'ai besoin de votre avis. Vous, mes fidèles lecteurs, laissez un commentaire et dites-moi si vous préférez l'ancien au nouveau formulaire.

Le retour des boutons de partage

Da Scritch — 2014-02-25T09:09:00+01:00

Vous avez remarqué, depuis 15 jours, j'ai remis des boutons de partage vers des réseaux sociaux sur les billets de mon blog. Ce qui permet (presque) d'un clic de partager mes billets sur Twitter, Facebook et autres. Un retour mais avec une responsabilité.
Webdev

TL;DR : Faites au plus simple, revenez le plus possible au HTML de base. KISS !

J'ai réfléchi très longtemps à mettre des boutons de partage social sur mon blog. J'avais même mis en 2008 un script générique. Mais finalement, j'ai trouvé que c'était une sur-profusion bordélique. Il y avait un nombre délirant de services de partages de liens : Del.icio.us, ReddIt, BlogMarks, SeenThis, StumbleUpon… pour les plus connus, ce qui fait autant de badges à mettre. Et ceci, malgré le travail d'AddThis, cela bariolait le moindre billet au point de le confondre en bolidage à la Jacky's Touch.

J'ai tenté de ne présenter que ce qui est susceptible d'être utilisé par mes visiteurs. Je comptais utiliser le sélecteur css a:visited pour que les visiteurs ne voient que les sites sociaux qu'ils sont susceptibles de fréquenter. Ce qui fait que je ne l'ai jamais fait fut l'incertitude pour des raisons de sécurité sur la vie privée.

Et puisqu'on parle de privacy, un autre souci est le manque de discrétion des plateformes sociales invitées dans mon DOM tout propre : ils vous traquent, parfois d'une manière assez peu propre (je pense surtout à Facebook). Et pourtant…

…Ils sont de retour sur mon blog :

et ils vous permettent de partager ma prose.

Oui, mais… Pourquoi met-on des boutons de sites sociaux sur son blog ?

Pour lui faire gagner de la visibilité, pour que les gens qui trouvent un texte bien le partage très facilement à leurs e-amis. Bref, pour faire vivre votre texte et susciter un débat au dela de votre petite sphère.

Comme on dit dans les milieux chébrans : Faire monter ton Klout.
Ahem… Est-ce que cela signifie encore quelque chose, cette phrase ?

Il reste toujours la méthode ancestrale

Celle de copier l'url de la page, puis d'aller sur son réseau social favori, d'ouvrir une nouvelle entrée et de coller l'URL dans le corps du post. J'ai d'ailleurs amélioré ces fonctions grâce aux métas spécifiques et installé dans mon dotclear (Franck Paul a repris mon code dans son addon socialMeta).

Avouez qu'un lien avec une “card” dans Facebook,

ça a de la gueule.

Évidemment, il y a un os : nous sommes passé aux url “internationalisées”, il est courant de voir des accents dans les URL que les formulaires des réseaux sociaux tolèrent très mal. Ainsi les !, : ou les «, si courant dans mes titres de billets et donc dans leurs adresses, cassent immédiatement les liens dans Google+ et dans Facebook, puisqu'ils ne sont pas échappés (url_encodés) pour les codes écrits en vieux tromblons.
C'est le principal souci que rencontre mon coproducteur radio Thomas Berthelon avec mon blog quand il renvoie les billets d'émissions ou de chroniques de BD dans la page Facebook du Supplément Week-End. Et j'ai eu les mêmes problèmes sur la page G+ de l'émission.

C'est ce problème du copié-collé d'url internationalisés qui m'a motivé à remettre des boutons “sociaux”. Après des années d'attente, j'ai replongé quand j'ai vu le site We Use PGP le faire dans les contraintes qui me plaisait. Du coup, j'ai repris leurs icônes long shadow.

À noter que les navigateurs mobiles proposent souvent un service de partage de lien, natif et parfaitement fonctionnel. D'ailleurs, celui de Firefox Mobile sur Android est une pure tuerie, je m'en sers énormément.

On remarquera l'étoile pour mettre en favori, les deux modes de partage que j'utilise le plus (à savoir Pocket et Twitter) et l'entrée du sous-menu de partage traditionnel d'Android.

Il y a deux types de boutons sociaux

Il y a les boutons sociaux “riches”. C'est le type le plus courant et le plus utilisé. Techniquement, ce sont des bibliothèques javascript qui ont enrichit la page en cours. Ces boutons proposent même une petite vanité : indiquer le nombre de leurs membres qui ont partagé leur page. C'est à ça qu'on les reconnaît.

Et il y a ceux que j'utilise désormais. Plus primitifs, et pour cause :
Ces boutons sont de simples liens HTML traditionnels. Oui, un pur <a href="https://dascritch.net/post/2014/02/25/">, agrémenté d'un target="social" pour s'ouvrir dans un nouvel onglet.
Oooooui, vous pouvez nommer la cible, c'est largement mieux qu'utiliser des références comme "_blank" puisque vous donnez une richesse fonctionnelle, sachant que je vois peu de monde bookmarker une page vers deux réseaux à la fois. Et cela permet aussi à la page appelée de fermer son onglet. Vous pouvez vérifier en cliquant close the window avec le lien LinkedIn.
Avantage : pas d'appel à une bibliothèque javascript, donc pas de traçage à mon insu de mes visiteurs.

Autre avantage, il est plus discret, mais il n'est pas négligeable : chaque bouton social inséré par javascript crée un <iframe> sur la balise. Seulement, insérer un élément <iframe> peut entraîner une consommation mémoire déraisonnable pour un “bête” bouton. C'est d'ailleurs une source importante de lourdeur pénible des sites de journaux avec beaucoup de pubs, ou quand des flux de réseaux sociaux insèrent des vidéos.
Il y a aussi le nombre de requêtes, puisque chaque bouton social en javascript fait appel à sa bibliothèque hébergée. Donc une requête pour le javascript, une requête pour l'image qui le représente, parfois d'autres éléments. Par exemple, Twitter va charger de ses serveurs sa bibliothèque javascript (100 ko ???), une image et une info au format json.

Multipliez par le nombre de réseaux sociaux où vous voulez être partagé et… comme dit une personne à côté de moi, ça fait du monde au balcon.

Pourquoi les réseaux sociaux gardent le mode primitif ?

On est d'accord, le bouton en simple lien n'est ni très gracieux, ni rentable pour les réseaux sociaux. Parce que la version “riche” leur permet de vous tracer, donc de revendre vos intérêts “externes” aux annonceurs publicitaires. Alors pourquoi garder en fonction ce service ?

Pour une bête raison d'ingénierie progressive. On commence toujours par faire le service le plus simple possible avant de le complexifier. Dans ce cas, on commence par faire sur son propre service un formulaire HTML simple, propre. Après s'envisage le développement d'un javascript complexe que l'on pose sur d'autres sites dont il modifie le DOM pour ensuite faire des requêtes XHR.
Mais une fois que le prototype est mis en place, comme il est immédiatement utilisé un peu partout, il n'est en général pas retiré pour des raisons fonctionnelles, ou pour garder les sites qui s'en servent. Et puis retirer des fonctions ”avancées“ à de early adopters qui vous font une bonne com', ça peut se retourner contre vous.

Donc, en ayant longuement pesé le pour et le contre, j'ai mis un temps monstre à utiliser la solution la plus ancienne et la plus évidente. Je sais, y'a pas de quoi en être fier…

Utiliser le rustique au lieu du “moderne” a quand même quelques inconvénients : Le design de ces formulaires fournis par les sites sociaux est prévu pour être lancé en popup, il donne un immense espace de solitude sur un très grand écran. Il y a aussi des soucis sur smartphones, puisque les applications n'interceptent pas forcément les liens. Donc on peut arriver sur une page avec son navigateur web où l'on est pas reconnu/connecté, au contraire de l'application.

Et par le fait que je les code en dur, il y a forcément des manques : pas de service Pocket, pas de paper.li ou autres. J'en ai qu'un nombre limité.

La troisième voie est encore plus intrusive

Il y a eu une autre méthode de “partage” plus récente : Sous-traiter la gestion des commentaires à des plateformes tierces comme Facebook ou Google+. Un peu à la manière de ce que fait Disqus. Mon ~~remplaça~~ ami Hadrien Lanneau le fait d'ailleurs sur son blog, et c'est plutôt efficace en terme de viralité mais aussi de lutte contre le spam.

Seulement cette viralité ne se limite qu'à un seul réseau social, puisque vous ne pourrez commenter qu'en étant membre de ce réseau. Ce qui est une limite inacceptable pour moi, de même que les atteintes à la vie privée de vos visiteurs est plus importante que pour les boutons “riches”.

Cette délégation pose un énorme problème de responsabilité et surtout de portabilité : Qu'arrive-t-il le jour où votre compte est suspendu, que le service est arrêté ou que vous souhaitez faire évoluer vos commentaires ?

Retours à la communauté Dotclear

La mise en place dans mon blog s'est faire en ajoutant du balisage template et html. Pour l'instant, il y a des manques dans le moteur du blog : il n'y a pas de paramètres par défaut pour url_encoder un titre ou une url dans Dotclear. Je pouvais le faire via un addon maison (c'est d'ailleurs actuellement le cas), mais l'effort pour ajouter un filtre encode_url="" aux templates de dotclear est relativement faible, et surtout pourrait aider beaucoup de gens.

Extrait du code source ajouté :

<a target="social" rel="nofollow" href="https://twitter.com/share?text={{tpl:EntryTitle encode_url="1"}}&url={{tpl:EntryURL encode_url="1"}}&via=dascritch"><img src="/themes/DSN13/img/twitter_icon.png" alt="Poster sur Twitter" /></a>

Reste un petit souci car visiblement les liens mailto: pour créer des e-mails demandent un encodage url plus strict, remplaçant les espaces par des %20 au lien de +.

Quitte à bricoler dans le source de Dotclear, j'ai ajouté un attribut ellipsis="" qui fonctionne avec l'attribut cut_string="". Pour ceux qui en veulent plus, ils y trouveront aussi les balises <tpl:IfHadEllipsis> et <tpl:IfNotHadEllipsis>, qui sont des adaptations du même genre à celles qui étaient dans le moteur de templates de dAgence.
C'est un minimum.

J'ai aussi un peu nettoyé le haut du blog

Il fallait scroller un petit peu trop à mon goût pour commencer à avoir son écran pleinement empli de “texte utile”.

Si vous ne comprenez pas l'obsession de mettre le contenu utile au plus haut dans une page web, sachez, chers SEO-LOL, que le dernier algo de Google apparu en février sanctionne ceux qui mettent trop de pubs avant le contenu utile. Et que les pages qui le mettent le plus proche du haut gagnent un bonus.

Bon, c'est pas exactement pour ça que je le fais, mais surtout que je me suis rendu compte que moins l'utilisateur voyait immédiatement le corps de l'article, moins il restait sur la page. Le rendu doit évidemment changer en fonction de la largeur du viewport puisque mon site est en Responsive Web Design.

Venez me causer pérennité à Paris-Web

Da Scritch — 2013-09-11T07:12:00+02:00

Autopromo. En plus de ma conférence de Jeudi, je tiendrais un atelier le Samedi. Viendriez-vous ?
Sortons

Les inscriptions aux ateliers sont ouvertes depuis ce Lundi. L'occasion pour vous rappeler que j'y tiendrais un “atelier”, puisqu'il s'agira de retours d'expériences, d'idées pour faire qu'un service web tienne dix années et plus. On a des cas célèbres de projets qui n'avaient pas prévu de tenir autant comme Spip, Wordpress, OS Commerce, Dotclear (tiens, dix ans justement), Craigslist ou Wikipédia ; certains tiennent le choc, d'autres auraient mérité de meilleures pratiques dès le début.

Mon atelier Construire pour le futur sera le Samedi 12 Octobre à 15h30 à l'EGS Management School (Paris, XI^ème) uniquement sur inscription préalable. Et si vous venez pas, je ne vous en voudrais pas : à la même heure Rudy Rigot et Jérémie Patonnier parleront RD à côté, y'aura de l'ARIA dans les composants, du redesign dans le navigateur,…
Ça me fait bizarre d'être au milieu de gens aussi pointus.

Ce que vous avez manqué cet été

Voici quelques unes de mes précédentes bafouilles dont nous aborderons peut être quelques ratures :

Ma plus belle histoire avec Dotclear

Da Scritch — 2013-08-13T07:57:00+02:00

Aujourd'hui, nous célébrons les 10 années d'un CMS… La moitié du temps d'existence du Web. Un quart de la mienne. Et Dotclear est toujours un vaillant Créateur de Multiples Sentiments.
Ma vie est une sitcom

Cela a été d'écrire dans mon blog, de le bricoler aussi, puis d'avoir des lecteurs.

Les premières heures de mon site, j'avais bricolé un petit logiciel. Peu pratique. Et en lisant Tristan Nitot et Daniel Glazmann, je découvre Dotclear. Je l'installe illico sur mon PC, et ce fut parti !

Sauf qu'être son propre hébergeur, cela veut dire son PC allumé 24/24, mais qu'est-ce que j'ai appris en administration. Et dès le premier piratage (un awstats foireux), l'humilité et la paranoïa. Depuis, je suis passé en colocation.

Vecteur de rencontres

Un jour, mon blog fut débordé par des spam-comments. En installant le plugin Spamplemousse, je me suis rendu compte d'une possibilité d'amélioration. J'ai conversé avec un de ses co-auteurs. Zeubeubeu vivant à Toulouse, nous nous sommes rencontrés, et nous avons souvent conversé. Mais pas forcément sur le code.

Si j'ai monté en podcast mon émission, c'est grâce au moteur de blog que j'utilise, ou plutôt que je maîtrise. Et le simple fait que j'ai pu toujours y garder l'ensemble des sonores, accessible à tous, est d'un confort incroyable : je n'ai pas à craindre qu'une bannière publicitaire impromptue vienne polluer mon contenu, ou que tout disparaisse en fonction d'un edit d'un quelconque fâcheux.

À force de s'entrelire, des blogueurs se sont donnés rendez-vous dans un restaurant. Ce fut ainsi, sur le modèle de sa contrepartie Parisienne, que fut lancé le Toulouse Carnet.

Et ce fut dès la deuxième édition qu'une blogueuse-lectrice s'approcha de moi. Enflammée et moi, l'histoire a duré 7 ans. Elle s'en fut, nous nous sommes séparés en bons termes, mais nos blogs sont restés.

Il y eu l'arrivée de ma chatte Poussière, il y eu des samedis de chats, et même des entrechats artistiques avec l'autre côté de la Terre.
Il y eu des BD, des tonnes de BD chroniquées, il y eu des rencontres, il y eu des instants magiques que j'ai voulu faire partager, et des moments de doutes où j'avais besoin de me confier, il y eu de chouettes découvertes, des partages et des lecteurs réguliers ou occasionnels qui m'ont remercié.
Il y eu des moments de rigolade, il y eu des coups de têtes, il y eu un engagement moral puis politique, il y eu des trolls et même des fâcheux qui croyaient me faire taire et qui se sont pris une leçon de Droit. Mon blog est toujours là, et il représente une facette de ma personnalité.

La joie du blogueur : écrire pour recevoir ses visiteurs

Alors voilà, j'aurais pu parler de la beauté technique de Dotclear face à d'autres CMS, ou même de sa boîte à outils Clearbricks, des applications que j'ai monté dessus, de sa communauté, de son coup de mou, et de l'incroyable élan que son équipe connaît depuis 15 jours.

Mais non, j'ai voulu justement parler de ce qu'il y a en dehors du code.

Je suis propriétaire de mes textes, de mes images, et je sais comment j'exploite les données de mon blog. Par-delà du code, Dotclear est une communauté et derrière, une association. L'idée reste non-commerciale.
Je dois bien des moments de ma vie à la communauté Dotclear.
Et elle a eu la politesse de ne pas la revendre.

Merci à vous

Merci à toi, lecteur.

Merci à toi, contributeur à Dotclear.
Merci à Olivier Meunier, Kozlika, Dsls, Pep, Open Time, JC Denis, JM Royer… et tous ceux que j'oublie.
Faudra qu'un jour je prenne le temps de reverser du code.

Lors de Paris-Web, le 12 octobre, je tiendrais un atelier intitulé Construire pour le futur. Et je viens de me rendre compte que j'avais même pas songé à l'exemple évident de Dotclear. Alors si vous venez à Paris-Web, que vous passez à mon atelier, et que vous participez à Dotclear, ça sera une occasion de se faire une photo souvenir à la fin ?
Bien évidemment, l'atelier est ouvert à tout autre CMS/framework/plateforme,… ou même si un jour, l'envie vous titille d'en construire un nouveau !

Quand un “pro” a cru descendre Dotclear…

Da Scritch — 2011-08-09T19:04:00+02:00

Vous prenez pas pour un expert, juste montrez-le.
Webdev

J'ai eu la chance de m'être mis à Dotclear dans une version 1.0, puis la 1.2. Et ensuite de passer très tôt ce site, en early adopter à une pré-version de la 2 en 2006/07. Une version de Dotclear en totale rupture avec les précédentes, suite à une ré-écriture complète des bibliothèques.
Puis mon site est resté tel quel plus de 4 ans sur la version beta 7, sans jamais avoir été pénétré. Ne faites jamais ça ! j'y testais aussi un plugin d'analyse d'attaque (qui d'ailleurs n'a jamais été mis à contribution par des tiers).

Parallèlement, pour mes activités professionnelles, je me suis longuement plongé dans d'autres CMS, notamment SPIP, Textpattern et Wordpress, en regardant attentivement le code source et celui pondu par la communauté.

En général, c'est en regardant ce que peut pondre la communauté d'un système de contenu open-source qu'on a envie de devenir un sale fasciste et de construire un CMS fermé. En général, car en fait, pas toujours.

Mais quand on compare deux produits totalement équivalents (ici, des moteurs de blogs, basés sur une architecture LAMP et distribués sous licence GPL), on a parfois droit à des arguments de choix surprenants…

Un troll apparaît

Au départ c'était presque drôle, surtout les arguments jetés sans avoir essayé.

Je ne sais ce qui l'a motivé.

Le besoin de se faire un nom et de montrer son expertise ?
Pour un SEO, je trouve ça très étonnant qu'on ne voit pas facilement comment le contacter pour travailler avec lui.

Le besoin de descendre gratuitement des technologies concurrentes de celles qui maîtrise ? Il vaut mieux affûter ses arguments, en être parfaitement sûr, car sinon, c'est la descente en flammes garantie.
Pour un SEO, acquérir une notoriété très négative n'est pas qu'un challenge, c'est un suicide professionnel.

Le besoin de convaincre sa clientèle ?
Quand le projet présenté pouvait se contenter d'un CMS, j'expliquais mes choix par des arguments raisonnés, et aisément vérifiables. Mais je préfère ne pas m'avancer dans un domaine technique qui n'est pas le mien. Être professionnel, c'est surtout reconnaitre ses limites, ce qu'on ne sait pas faire, ce qui rend justement vos connaissances plus techniques qu'à-peu-près-esques.
Pour un SEO, la question est complexe car il est censé maîtriser layout HTML, rédactionnel, accessibilité et un minimum d'algorithmie. Il y en a que je respecte car ils connaissent tout ça, et il y a ceux dont je devine la tartufferie en moins de trois phrases. Ce sont malheureusement ces derniers qui font le plus de dégâts chez les clients, ce qui jurent encore en P.R. en 2011, en spam-commentaires, en textes cachés, en liens hors-contextes. Pour notre “ami”, le doute n'a pas eu le temps de s'installer.

Mais un SEO se doit surtout d'attirer de la génération de texte, et sur son blog, les commentaires ne sont validés qu'a posteriori. Pourquoi avoir tant besoin de contrôler les retours du public ?

La réalité des choses

Car, manque de bol pour cet “expert”, son incompétence et son absence de regard critique se font démentir par la réalité des choses. Eh oui, le problème d'internet, c'est qu'il ne s'éteint jamais, et que meilleur que vous peut juger votre essai.

Allez, prenons un stylo rouge :

Techniquement, les deux sont des moteurs de blogs. On ne peut pas leur demander n'importe quoi
Sur machines équivalentes, Dotclear et Wordpress sont kif-kif en temps d'exécution PHP sur les opérations standards si leurs caches sont mis. Ce qui est normal car le nombre de fonctions sollicitées est à ce moment-là très restreint.
Dans la réalité du backoffice, Dotclear 2 a été conçu avec des classes PHP5. Wordpress voulait rester compatible PHP4, et a un très long travail d'adaptation à faire. Cela se paie lourdement en termes de performances sur certaines actions, mais aussi sur la mise à jour de certains plugins et thèmes. Pourquoi les thèmes ? Réponse plus bas.
En performances SQL, Dotclear poutre littéralement Wordpress par construction. Y'a pas photo. Cela est dû aux paramétrages propres de la base SQL, Dotclear imposant une version nettement plus récente du moteur de requêtes. Il peut d'ailleurs encore y gagner.
Dotclear n'impose pas d'utiliser MySQL, mais peut aussi se servir PostgreSQL (ce qui est le cas sur ce serveur) ou SQLite (ce qui va me sauver la vie la semaine prochaine si un administrateur serveur ne réagit pas assez vite).
PostgreSQL est considéré comme nettement plus pro, robuste et performant par des administrateurs convaincus, dont ceux avec qui je coloue ce serveur. Pour des raisons évidentes de survie de mon propre blog, je m’abstiendrais de répondre à ce troll. Non, je plaisante, en fait, j'ai pas encore fait de tests sérieux sur le sujet
SQLite utilise non pas un moteur de requêtes en services, mais un bête fichier de données. En performance, il est nettement moins rapide sur de grosses bases, mais sa consommation mémoire fait des merveilles. Un tel moteur est utilisé par exemple dans Firefox, Thunderbird, plein d'OS mobiles (Symbian, iOS, Android),… On peut imaginer qu'avec les nouvelles fonctions serveur web de PHP5.4, on puisse mettre un Dotclear se passant d'Apache dans un engin embarqué. Genre mobile Android ou box ADSL.
Dans la construction des templates, Wordpress est nettement moins fiable que Dotclear en terme de sécurité, devant tout gérer par inclusion de code PHP. Pas bien.
C'est la principale raison qui fait que les hébergeurs de blogs Wordpress ne proposent pas de customiser son blog, ou qu'une foultitude de thèmes Wordpress ne passeront pas l'étape PHP5.
Par défaut, Wordpress autorise les inclusions PHP, Dotclear non (les deux sont inversables : l'hébergeur wordpress.com interdit le PHP, et on peut inclure du PHP dans un thème Dotclear). Mais proposer un CMS à templates, cela veut dire ne pas faire le travail à moitié, on doit pouvoir complètement travailler en balises de templates, quitte à étendre le langage par des extensions.
Dotclear a proposé bien avant Wordpress un déploiement simplifié ainsi qu'une mise-à-jour en un clic.
En terme de développement de plugin, j'ai converti un dev Wordpress : il trouve que la création de plugin dans Dotclear est nettement plus intuitive et hiérarchisé. Il est pas le seul à m'avoir dit ça. J'ai testé : je ne veux plus coder pour Wordpress, en partie pour ses limitations de compatibilité PHP4.
Si Wordpress est plus souvent mis à jour que Dotclear, c'est que tout simplement, il est beaucoup moins bien abouti en terme de sécurité et rigueur de code. Qui plus est, il doit encore migrer sur une gestion native des classes PHP5, sans parler des plugins. Je sais, j'ai regardé le code des deux.
L'écosystème Wordpress des extensions gratuites est un nid à virus. Quand ce n'est pas la sécurité totalement défaillante de certains plugins, dû à un manque de rigueur dans l'écriture des primitives.
Et là, c'est marrant, une entreprise commerciale aura moins tendance à mettre en garde qu'une association.
La majorité a toujours raison : TF1 a le JT le plus informatif, Windows XP est le système d'exploitation le plus sûr et IE6 a été le plus génial navigateur au monde. Proverbe de commerciaux : 100 milliards de mouches ne peuvent avoir tord en manière de gastronomie.
L'argument du nombre n'est pas un bon argument.
Le blog de ce “spécialiste SEO” est hébergé chez Blogger. C'est dire son expertise en gestion serveur et sa propre confiance en Wordpress…

Je ne peux même pas mettre un 2/20, car il a oublié de mettre son nom ou un contact d'une manière visible.

Puisque tu aimes les trolls, celui-ci est cadeau :

@xylpho — Wordpress c'est un CMS ? Oo
@zeubeubeu — ouais Comment Merder un Site :)
@xylpho — 'tain je vais continuer à pas m'en servir :D
@zeubeubeu — tu veux dire : Continuer à pas M'en Servir :p
@xylpho — houle, mes respectueuses sur celui-là. Chapeau bas.

Mais Dotclear a aussi des points négatifs

Tout travail critique se doit d'une honnêteté intellectuelle.

L'interface de Dotclear serait moins évidente que Wordpress. Je dirais plutôt « moins engageante » pour quelqu'un plus habitué à SPIP ou Wordpress. Néanmoins, un sérieux travail d'ergonomie est en cours, et même si je ne le suis pas, je pense que les personnes qui sont dessus sont suffisamment reconnues dans le secteur pour que les prochaines versions ne souffrent plus que d'une comparaison de mauvaise foi.
Nativement, Dotclear ne sait pas gérer des sous-formats d'images autrement que dans un canevas carré, en crop ou en réduction. Largeur et/ou hauteur maximales sont le même paramètre, donc valeur unique. Qui plus est, cette partie précise du framework à la base de Dotclear 2 (aka Clearbricks) manque sérieusement de hookers pour réussir proprement un plugin qui étend ça. Je me suis encore frotté à cette situation en Avril dernier, et la solution est de suspendre les mises-à-jour de Dotclear en un clic.
Dotclear 2 a un péché de jeunesse dans son aspect public, hérité de la version 1 : Il est impossible de changer le balisage de la plupart des widgets, ces éléments qui sont regroupés dans les sidebars côté public. Je le sais d'autant plus que c'est ce problème qui m'obligeait à intervenir lourdement dans le code de mon blog, et donc m'empêchant une mise-à-jour. On est provisoirement bloqué à des séquences <h2> + <div> pas réellement significatives, mais c'était la pratique imposée en 2005 par les SEO “experts” de l'époque.
Pan dans leur gueule. Again.
La communauté Dotclear n'est pas immense. Qui plus est, elle est surtout Francophone plutôt qu'Anglophone, et en France, pour faire pro, il faut lire l'Américain.
Néanmoins, cette taille semblant modeste est un petit avantage : Grand nombre de plugins et de thèmes gratuits pour Wordpress (en chiffres absolus, une forte majorité) sont tout simplement vérolées, virussées, des chevaux de Troie en puissance.
Si ce genre d'incident arrivait, il serait vite pointé sur les sites officiels. N'étant pas rattachée à une entreprise, Dotclear, àmha, n'hésitera pas à dénoncer les sites suspects, malandrins et autres, sans risquer de procès.

Moralité : Chacun choisira en fonction de ce qu'il maîtrise le mieux, mais surtout de ce qui est objectivement le plus indiqué.
Voyez par vous-même : téléchargez Wordpress et/ou Dotclear et essayez.
De toutes façons les contenus (billets, commentaires, arbo) sont rapidement exportables de l'un vers l'autre.

Autres comparatifs dignes d'intérêt (non-lus pour rédiger cet article en totale indépendance) :

Un point clair qui a cinq ans

Da Scritch — 2008-08-14T18:45:00+02:00

Puisqu'on en fête les 5 ans, que la version 2 finale vient de sortir et qu'il motorise une bonne partie de mon site...
Webdev

Et surtout à l'appel de Pep pour fêter les 5 années de ce fabuleux système de blog, je vais dire pourquoi mon choix s'est porté plus sur Dotclear, que sur... Wordpress par exemple. À ce sujet, et sans animosité aucune, je tiens à remercier Anthony en tant que dev de plugs WP pour m'avoir donner les précisions qui me manquaient.

Alors, qu'est-ce qui me plait dans cet obscur CMS conçu par des petits frenchies ? Actuellement, c'est :

Le support intégré du podcasting. Aux débuts de ce format, quand mon émission n'était disponible qu'en format ogg vorbis, je faisais mon flux podcast à la main. Ça veut dire écrire son document RSS/Xml a la mano. Puis, il y eu l'excellent script de Triptik pour Dotclear 1. Désormais, Dotclear 2 le supporte en natif. Et vous êtes plusieurs milliers à écouter régulièrement le Supplément Week-End.
La compréhension du besoin de souplesse en XML. Au-delà du XHTML, il y a aussi le même flux RSS qui est modifiable en template ! Ce qui veut dire que j'ai pu intégrer mes icônes de catégories, de tags, changer le format de date pour mes usages internes sans changer une ligne de code mais juste en touchant un document qui sert de formulaire, comme si c'était un document XHTML d'un thème... tout ceci n'aurait jamais été envisageable sans l'extrême souplesse et puissance des briques posées par Olivier. J'en respecte d'autant plus le travail que je code mon propre toolkit, et que j'en suis à des années-lumières d'une telle maitrise.
Cette souplesse est indispensable, notamment à l'aube des microformats.
La navigation documentaire. Alors que certains se secouent la nouille sur “pourquoi faut-il préférer le tiret à l'underscore dans les URL” (de par mon expérience, je n'en suis absolument pas convaincu, surtout que maintenant, on parle d'“IRI”), Dotclear propose une navigation documentaire. Firefox ne le supporte plus depuis Phoenix 0.8 (une extension le rétablit incomplètement), mais iCab le lit encore. Quel intérêt ? Il l'est surtout pour les navigateurs limités (braille, lecteurs vocaux,...) et donc... pour les moteurs de recherche. Ceux-ci importent largement plus que votre typographie dans vos IRI ou les pages “Plan de site” voire les listes de liens pour les spiders.
Et dire que certains de mes clients ne le comprennent pas.
Le support d'autres systèmes de bases de données que le sempiternel MySQL. Ça peut paraitre surprenant, mais quand mon environnement de développement tenait sur clé usb, avoir une base en SqLite le temps de faire quelques réglages était largement plus pratique que lancer un service MySql spécifique. De même, certains hébergeurs préfèrent du PostgreSQL pour sa robustesse et sa tenue en charge.

Mais la vraie raison, c'est son support utilisateur très important. Principalement parce qu'il n'est pas lié à une entreprise, quoique l'employeur de son concepteur l'empoie pour ses clients, mais contrairement à d'autres, n'y lie pas ses utilisateurs.

Nan. Efface.
La vraie raison, c'est qu'une très large partie des développeurs sont Français, et j'ai de très bons contacts avec certains d'entre eux.

D'ailleurs, Zbb<, tu as écrit quelque chose à ce sujet ?

Les spammeurs ont tué mes trackbacks

Da Scritch — 2007-10-07T16:22:00+02:00

Gloire et chute des rétroliens. Analyse d'une attaque de spams qui polluent un très bon outil de bloging.
Webdev

Les rétroliens (en VO : trackback) sont des IRI [NB1] très spéciales, qui ne se visitent pas avec un navigateur, mais sont des interfaces de dialogues entre deux serveurs web, plus exactement entre deux moteurs de blogs. En clair, quand quelqu'un écrit un billet pour son blog “A”, mais veut signaler à un autre blog, “B”, que “A” a écrit un billet qui fait référence à ce que “B” a écrit dans un billet de son blog, “A” demande à son gestionnaire de blog d'envoyer un ping sur l'adresse de rétrolien attaché au billet “B”.
Si quelqu'un réagirait dans son blog à mon billet, vous aurez écrit plus bas (en-dessous des commentaires) une référence à sa réaction dans le chapitre « La discussion continue ailleurs ».
Les trackbacks ne sont pas gérés par une norme, mais un consensus entre développeurs de plateformes/systèmes de blogs. Le système fut créé par SixApart, qui en reste la référence.

Système pratique et automatisés, les rétroliens devinrent très populaires dans les systèmes de blog.
Trop.
Ils n'avaient aucune sécurité (une simple requête POST avec une IRI quelconque suffisait), aucune confirmation... Il n'a pas fallut longtemps pour que leur début de popularité fut exploité par les spammeurs. Contrairement aux commentaires où la parade fut d'installer des capcha (vous savez les trucs illisibles à décoder qui rejettent votre commentaire trois fois sur quatre et qui parient sur l'insistance du lecteur), aucun test de Turing [NB2] ne pouvait fonctionner sur cette interface dont le principe est que justement deux machines parlent entre elles.

Nous en sommes arrivés là parce que certains font de la publicité, c'est à dire qu'ils touchent gratuitement du fric en vous polluant, se croient la raison d'être d'Internet, et créent des techniques purement maffieuses (et ça existe aussi en France !) allant du piratage jusqu'à l'extorsion de fonds...

Lors du redesign de mon site, j'ai profité du complet changement d'infrastructure pour passer à la nouvelle génération du moteur de ma blog zone. Aka Dotclear2. Et j'ai rouvert mes rétroliens, si longtemps maintenus en position fermés.
J'ai tenu trois semaines.

J'ai dû à regret à nouveau les fermer. Dommage, car faisant de la chronique de BD sur ce blog, ils permettaient de rapidement lier deux chroniques d'une même série ou d'un même auteur . Ou aussi d'écrire des articles à rallonge avec plein de liens vers de précédents billets, et de rétrolier ceux-ci.
Par contre, je dois reconnaître que Dotclear2 a une excellent suite de filtres sur les commentaires, qui ne laisse une chance qu'aux spammeurs manuels. Aucun faux négatif, mais hélas quelques faux positifs. C'est l'existence de ces derniers qui m'empêchent de laisser inonder la corbeille de récupération par d'innombrables rétroliens pollueurs.

On se souvient toujours de son premier cadavre

Il y a 48h, en surveillant mes logs Apache en direct [NB3], j'ai décrété que toutes les attaques de rétroliens étaient suffisamment calmés sur mon site pour tenter une petite expérience : j'ai intentionnellement rouvert [NB4] ce canal à spam, pour connaître comment ces salopards font leur marché.

Ça n'a pas duré, les robots maffieux ne respectent même pas les Dimanche après-midi. Voici la première trace gluante du retour des trackback-spams
Sa trace dans les logs Apache :

IP	Date	Méthode	Adresse	User Agent
64.202.165.201	7 Oct. à 15:55:28	POST HTTP/1.0	/blog.php/trackback/1156	"TrackBack/1.02"

Oui, le spammeur a suffisamment d'humour pour utiliser un UA bien voyant, aussi improbable que celui de MSIE (ce dernier, comme tout autre navigateur ne peux faire de rétrolien, ça n'est pas son rôle)). J'ai aussi vu des cas où des script-kiddies sont tellement mauvais qu'il sont incapable de faire une requête HTTP correct pour être compréhensible.

Étonnement, le moteur Dc2 a vu autre chose :

Je n'ai relevé aucun trafic IP dans mes logs Apache venant de l'adresse IP 208.109.78.121. On a donc une probable erreur propre à Dc2, ou à un spoofing quelconque d'IP. Visiblement, la DcTeam() à quelque chose à faire à cet endroit.

Passe passe passe le luminole

Intéressons-nous maintenant aux trafics menant à la page ciblée :

IP	Date	User Agent déclaré
208.68.136.5	30 Sept. à 17:56:21	FAST MetaWeb Crawler (helpdesk at fastsearch dot com)"
66.249.65.108	1er Oct. à 3:59:37	Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"
74.6.24.19	1er Oct. à 16:07:06	Mozilla/5.0 (compatible; Yahoo! Slurp; http://help.yahoo.com/help/us/ysearch/slurp)"
66.249.65.108	2 Oct. à 10:25:22	Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"
66.249.65.108	3 Oct. à 13:40:48	Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"
208.70.24.233	4 Oct. à 4:56:39	Mozilla/5.0 (compatible; archive.org_bot/1.13.1x +http://crawler.archive.org)"
74.6.24.143	4 Oct. à 12:29:13	Mozilla/5.0 (compatible; Yahoo! Slurp; http://help.yahoo.com/help/us/ysearch/slurp)"
66.249.65.108	4 Oct. à 13:27:25	Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"
24.68.74.198	4 Oct. à 23:27:08	Mozilla/5.0 (compatible; SkreemRBot +http://skreemr.com)"
66.249.65.108	5 Oct. à 21:57:31	Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"
66.249.65.108	7 Oct. à 4:09:52	Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"

Comme vous pouvez le constater, seuls des spiders [NB5] sont venus visiter cette page depuis la réouverture des rétroliens. Ce qui me permet d'arriver à ces déductions :

Trop peu de gens s'intéressent à cet excellente BD qu'est « Jack B. Quick, enfant prodige », qui plus est très bien traduite par François Peneaud, confrère d'ActuaBD
Trop peu de gens lisent mes chroniques BD, et encore moins mes archives de chroniques
Les spammeurs utilisent exclusivement les moteurs de recherche, ou camouflent leurs spiders de manière à ce qu'ils semblent légitimes
Les spammeurs utilisent des IRI de rétroliens récoltés depuis une belle lurette, et continuent à taper aveuglement dans ces adresses.

« Bon sang... Mais c'est bien sûr ! »

La moralité, c'est que les spammeurs ne perdent pas du temps à vérifier régulièrement la disponibilité de l'IRI de rétrolien d'un billet. Bien sûr, ils le font un minimum, d'où la diminution du trafic d'attaque qui met au moins un mois à décroître pour devenir quasi-nul.
À cet effet, je retenterais l'expérience dans un mois.

J'attends l'adaptation du plugin TrackbackTimeOut sur Dotclear2 (dans la génération Dc1.2, il y avait par exemple SpamTimeOut) pour les réactiver. Car dans mon étude (en fait, je m'y attendais), il se montre totalement pertinent : L'IRI de Trackback ne reste valable que pendant un temps limité, typiquement 5 minutes [NB6].
5 Minutes, le temps pour le Commissaire Raymond Souplex d'expliquer pourquoi Monsieur Michu est coupable. 5 minutes, c'est une éternité pour le programme de trackback légitime du blog “A” de signaler au blob “B“ que j'ai ici un billet qui a un rapport avec ton texte. 5 minutes, c'est un temps vraiment trop court entre deux visites de spider pour que l'IRI soit exploitable par un méchant vendeur de pharmacopée au service d'Al-Qaeda.

Et les messages pourris ne viennent pas encombrer la corbeille de récupération, celle où atterrissent parfois les messages de Thomas parce que quelqu'un utilise la même adresse IP que lui avec un MS-Windows totalement vérolé.

Nota Bene afin de faire semblant d'avoir tout compris à ce billet :

↑ IRI : IRI-ra bien, qui IRI ses URL... j'explique pourquoi ici
↑ test de Turing : Alan Turing est l'un des très grands théoriciens de l'informatique, hélas mort trop jeune. Le test qui porte son nom doit permettre de différencier si votre interlocuteur est un humain, ou une machine qui a le droit de mentir, tricher, se tromper,...
Tiens, en ce moment, vous pouvez tenter de savoir ce qu'un ordinateur pense du France/All Blacks d'hier soir, pour rire.
↑ Lire les logs Apache : Pour des raisons de lisibilité, j'ai bien évidemment mis en forme ces logs cités dans ce billet pour que vous puissiez les comprendre. Le tail -f access.log est typiquement un sport de geek, à peu près aussi palpitant que de compter les graines en suspension dans de la confiture de fraise maison.
↑ intentionnellement rouvert : Les informaticiens appellent ça un “honeypot”, je préfère le terme policier de “dragnet”, parce que j'adore regarder cette série, et qu'on est effectivement dans un travail de planque, de filature et de serrage arme au poing.
↑ spiders : Les spiders, aussi appelés crawlers sont des bots conçus pour alimenter les moteurs de recherche. Ces araignées cherchent les liens entre différentes pages, parcourant ainsi le web, la toile.
Dans mon tableau, on y voit celui de Google, de Yahoo, de Skeemr (un moteur de recherche de mp3), de FastSearch (une solution commerciale de recherche) et celui d'archive.org qui n'est pas un moteur de recherche, mais un archiveur.
↑ 5 minutes : Techniquement, cela veut dire qu'il faut désactiver ou modifier dans Dc2 le moteur de cache de templates pour qu'une telle solution puisse marcher sans problème.

Question de commentaire

Da Scritch — 2006-04-27T22:09:00+00:00

Teasing ! Et désormais, mes commentaires ne se cachent plus.
Webdev

Vous l'avez remarqué si vous me lisez ailleurs que sur le site web lui-même, depuis (tôt) ce matin, les commentaires ne sont plus masqués par défaut. Fallait savoir qu'il faut cliquer pour afficher le formulaire. L'idée de base, c'était de cacher dynamiquement le superflu (j'en parlerais prochainement car la technique y est intéressante). Une fausse bonne idée, car ceux qui survolent mon site ne voient jamais ces fonctions. Donc finalement, je le retire.

En fait, c'est le fruit d'une longue et intéressante réflexion de Vric (très bon pote qui officie actuellement sur cuk.ch), sur comment les commentaires doivent être architecturés. Car pour ça, non seulement vaut mieux avoir un power-user qui a bien compris des notions de base d'ergonomie, mais si en plus il est architecte, là, on s'incline avec respect...

En fait, cela fait parti d'un très vaste mail sur l'ensemble de l'ergonomie du prochain design de son site perso. Paraît que l'actuel est un poil trop bleu ^o^, et puis le fait qu'il soit en largeur fixe, donc même pas d'un design élastique ni même liquide n'est pas agréable sur les très grands écrans... Mais bon, place à la voix du Maître, le mail est particulièrement long, et concerne des détails du futur design qu'il a vu mais que je ne veux pas dévoiler trop tôt. Néanmoins, ses remarques sur le formulaire de commentaire est particulièrement utile, et pas qu'à moi :

De : Vric

Si je n'avais pas vu la zone concernée affichée par défaut dans iCab, j'aurais cru à un bug de design au lieu de deviner qu'il faut cliquer sur “Ajouter un commentaire”, car ça ne ressemble pas à un bouton mais au titre de l'article, qui lui n'est pas un bouton.

Soit on affiche par défaut, soit on met un bouton. Mais un bouton doit ressembler à un bouton, ou se trouver au même endroit que d'autres contrôles similaires, ou se repérer au 1er coup d'œil.

Or le rapport avec le fonctionnement de la colonne de navigation n'est pas évident quand la fenêtre est large et que les triangles de “Ajouter un commentaire” se trouvent donc super loin, ou plus simplement qu'on n'a pas encore essayé la colonne de navigation.

D'ailleurs, quelle est la pertinence de donner à la saisie de commentaire un statut que le reste de la maquette dédie à la navigation?

Ou alors, faire pareil avec le reste : par cohérence, permettre de replier trackbacks et commentaires, voire aussi l'article.

Ce qui dévoile le vrai problème: replier pourrait éventuellement, peut-être, va savoir, plaire à quelques geeks, mais ça augmente surtout le risque que d'autres ratent des trucs sans le savoir.

Donc la zone de saisie de commentaire :
soit on la voit par défaut (et on ne la masque que si on a compris qu'on pouvait),
soit le bouton qui la montre est évident,
soit TOUT est repliable, y compris le titre du blog et autres machins statiques, ce qui ne serait pas une si mauvaise idée sur un blog de geek.

Mais alors j'irais plus loin : si on laisse le lecteur choisir ce qu'il voit, alors on doit aussi optimiser vraiment la surface verticale pour ce qu'il veut voir, et donc virer tout ce qui est statique hors de la zone de lecture, soit en le repliant, soit ici vers la colonne statique :

les parties à lire, éventuellement repliables, sur toute la hauteur de la fenêtre (article, commentaires, trackbacks)
tout les trucs statiques, éventuellement repliables, dans la colonne de nav (titre du blog, nav, logo, options, copyright, etc.)
hybridations possibles: si tu veux garder la maquette avec des parties statiques haute et basse (ce qui me fait chier mais tout le monde le fait donc tu as bien le droit), leur repliage devrait se faire horizontalement vers la zone statique, ce qui est bêtement compliqué mais pas hors sujet sur ce site.

[...]

La disposition des champs de la zone commentaire est faible comme toujours. J'ai décrit il y a longtemps à Xylpho des dispositions à la fois plus intuitives et beaucoup plus optimales que ce que tout le monde fait.

Mais sympas les coins arrondis dans moz et le fond selon focus (tiens, encore une limitation d'iCab).

[...]

Remarques sur la zone “Ajouter un commentaire” :

Les 2-points aux noms des champs seraient superflus si la disposition était logique.

Le titre du champ commentaire est superflu si on le place mieux.

Le petit champ de commentaire est chiant sans Omniweb (note pour Xavier : Omniweb permet d'ouvrir tout champ de saisie comme fenêtre à taille et police libres, justement parce que la plupart des sites font chier).

Or les autres éléments gâchent plein de place verticale. Donc mettre le champ de commentaire à côté des autres éléments sur toute leur hauteur et l'élastiquer en largeur.

Mettre l'avertissement « Le code HTML dans le commentaire » en tout petit et/ou en gris pour éviter qu'on le lise plus d'une fois (réduire visiblité et lisibilité ; si on se demande on fait l'effort de lire, si on sait déjà on n'est pas agressé à chaque fois par du texte inutile).

--- plus intuitif et confortable (sens de lecture et position des boutons) --- (plus besoin d'aucun 2-points, idéal et optimal, je vais mettre un copyright dessus)

J'ai d'autres idées de fignolage, mais elles relèvent de l'implémentation, alors je vais pas faire cadeau de tout, hein ;-)

Pas de panique, Vric, j'ai pris de très bonnes notes, et après quelques tests, oui, ça marche laaaaargement.

Ah oui, je suis noyé de (tentative) de spams toutes les 10 secondes. Soit je bannis certains mots ou séquences qui pourraient être utilisés en commentaire de manière légitime, soit je coupe les trackbacks. J'ai choisi la dernière option, trop peu utilisée.

J'aimerais être l'Inspecteur Harry...

Da Scritch — 2005-12-05T21:36:00+00:00

... de l'internet et émasculer, brûler vif, terroriser tous ces spammeurs. C'est pas ma faute si ça passe en ce moment sur RTL9 mais ça donne franchement des envies de violence pure.
Webdev

Ce petit billet très rapide pour dire que je suis noyé sous une avalanche de spam de commentaires et rétroliens... Ça fait plusieurs dizaines, et c'est pas pratique à supprimer un à un.

Donc si vous postez, désolé du léger retard, mais je devrais valider à la main.

Je remercie ZeuBeuBeu (tiens ? Un toulousaing...) et Biou pour leur Spamplemousse que, j'espère, va enfin me détendre...

Et si Internet était enfin géré par une instance de l'ONU (comme l'ITU), il serait sûrement plus simple de mettre hors d'état de nuire ces criminels qui bouffent notre bande passante et nos nuits blanches.

De toutes façons, l'Inspecteur Harry, c'est l'idole des nabots adulescents qui roulent en cadillac rose.

Mon blog, cet autre moi.

Da Scritch — 2005-10-19T21:59:00+00:00

Pour une fois je ne parle pas technique, mais de l'implication sociale du weblog, et comment les relations personnelles ont changés avec le web. Pas de panique ! J'ai juste rassemblé de simples constatations et y réfléchir vaut largement une place dans ma rubrique webdev...
Webdev

...Car créer son blog, c'est aussi créer son labo pour expérimenter des techniques, un lieu idéal pour un showcase ou pour y exposer son savoir-faire (en Français dans le texte), et dans le cas d'une partie de mon lectorat, sa science du développement serveur web. Blog... Weblog... Journal personnel exposé sur internet... Donc...

Moi vouloir blog moi...

...mais plus savoir pourquoi. Hem.

D'abord il y a le succès du blog. Comme le souligne Gia dans le sien (l'article qui m'a motivé à écrire cette nuit un article que je rumine depuis des années), il est littéralement énorme... et son audience parfaitement incalculable. Un effet boule de neige, entraîné par le mimétisme, l'effet de mode, voire l'absurde commande commerciale qui oublie sa réalité : la spontanéité.

Mais si le blog n'est à la base qu'une mise en forme des sites persos, il va au-delà puisqu'il induit une réelle communauté. La meilleure preuve, c'est que les premiers blogs et les plus connus sont des blogs ... collaboratifs comme le vénérable /. et BoingBoing. Des fanzines constitués uniquement de liens avec une déclaration éditoriale, une opinion du contributeur.

Le blog fait àmha partie d'un nouveau système de liens sociaux qui ne peuvent exister que par la diffusion “universelle” du net à la fois dans l'espace et le temps. Une réelle évolution de la recherche d'information sur le web, basée sur la communauté plutôt que les automates de collectes/synthèses et autres systèmes experts. Au lieu de se fier à des moteurs de recherche de plus en plus pollués par les cybersquatteurs et les polluposteurs, les utilisateurs avertis du net commencent à se tourner vers ces espaces sociétaux thématiques. C'est un peu du co-sanguinisme, mais on y trouve un conseil, une suggestion adaptée à ses goûts. C'est une réponse à une demande, une initiative personnelle face à une vacuité constatée : Le besoin profond d'empathie. Votre ordinateur est désormais un réseau, d'autres individus peuvent apparaître à l'écran.

Ont ainsi grandi avec Internet et l'hypertexte des espaces collaboratifs qui apportent leur contribution à une “communauté” supposée où le lecteur peut devenir acteur : le logiciel libre (linux, Firefox, Open Office, Apache, php, etc...), le magazine, la critique à plusieurs mains, l'encyclopédie, l'annuaire collaboratif, le marque-page en vrac, l'exposition, les licences artistiques libres, l'état de l'art. Par le fait que le site ne soit pas motivé financièrement mais qu'il nous en coûte d'en faire un et d'initiative privée (des rigolos me soufflent “citoyen” à gauche...), ces espaces commencent à être reconnu face à des entreprises parfaitement établies car son contenu éditorial n'est pas susceptible d'évoluer pour des motifs d'audience... Qui est au contraire un très gros souci en cas de forte fréquentation, à moins d'avoir un hébergeur très tolérant ou d'être très fortuné. Comme disait Pierre Desproges, une vedette est une « personne qui travaille dur toute sa vie pour être connue, et qui porte ensuite de grosses lunettes noires pour ne pas être reconnue » (in Dictionnaire superflu à l'usage de l'élite et des biens nantis).

Votre blog comportera forcément des liens. Pas que vers chez les copaings, mais aussi vers vos lectures favorites, vos maîtres à penser que vous vénérez à chaque ouverture de votre aggrégateur. Annoncer ses sources, c'est déjà blogguer.

Première dilemme : s'installer

Si les premiers espaces personnels devaient être conçus à la main dans ses rouages, il existe heureusement des systèmes clés en mains, comme Dotclear, mais aussi des hébergeurs spécialisés comme 20six, Blogger etc etc etc. Tout la difficulté de la mise en œuvre, c'est le choix fondamental. Faut-il gérer techniquement son propre blog ou se reposer sur un service spécialisé qui fait tout sauf le remplir à votre place ?

Le choix le moins facile, c'est tout à la pogne. Les joies de découvrir que son hébergeur n'accepte pas toutes les fonctions PHP, les trous de sécurité, la gestion d'une base de données, les modifications impromptues. Que le CMS choisi n'a pas toutes les fonctionnalités prévues, qu'il a de sérieux bugs ou une base utilisateur principalement germanophone... Mais administrer son site, c'est aussi le maintenir techniquement à jour, les correctifs de tous les scripts installés, donc se tenir continuellement au jus. Un travail digne du tonneau des Danaïdes, mais c'est là où l'on montre sa maîtrise technique dans une totale liberté. Si vous êtes très fier de votre bébé, vous êtes carrément libre de mettre de la pub pour faire croire que vous êtes un vrai pro.

Celui qui pose apparemment le moins de soucis, c'est d'avoir son blog publié sur un site commercial. Mais on est vite limité par l'absence de liberté sur les scripts, la mise en forme, ses limites ou parfois la présence de bannières publicitaires. Pourtant, le réel écueil c'est la responsabilité éditoriale. Votre prestataire peut très bien décider de dépublier vos billets, de les édulcorer ou de supprimer votre compte, soit parce qu'ils portent atteinte juridiquement, qu'ils présentent un risque juridique, financier, légal pour l'hébergeur... ou d'autres moins avouables (ai-je dit “msn spaces” ou “yahoo geocities” ?).

La réponse est dans votre angoisse technique.

Deuxième dilemme : vertige de la page blanche

C'est pas le plus petit. C'est celui qui vous hantera toute la vie de votre site et au-delà (web.archive.org me fait parfois honte, hem brrrr...)... Quel l'intérêt de publier son blog ? Pourquoi montrer son éventuelle vacuité ? S'exposer sur le web est un risque, celui de se faire juger pour ses idées, mais aussi pour son style.

L'immense majorité des blogs sont chiants. Je n'ai pas d'autres termes. Il utilisent le langage sms, sont mal écrits, bourrés de fautes jusqu'à l'illisible. Du gâchis de bande passante. Quand Dew démonte les Skyblogs®, la marque attaquée n'est juste qu'un des représentants de ces sites totalement vides, inintéressants ou au contenu plus que suspect.
Car la dérive est rapide vers une encyclopédie de la théorie des races ou un annuaire de sites pédophiles... Cela revient à la responsabilité de l'hébergeur ou du FAI, mais cela entraîne aussi une autre question : celle des responsabilités juridiques et des libertés d'expressions selon les pays. Mais on s'égare. La règle universelle est celle de l'éthique et de la sincérité. Oui, on a des valeurs, mais si on est pas naturel dessus, elles paraîtront bien fades. C'est pas la peine de vouloir écrire comme un w@rl0dz, un scarla de lieuban ou tro sms c krémnt otist (°.°); . lol.

Faut-il créer un contenu ultra-spécifique, comme un podcast consacré à la cuisine maison ? Épingler les totalement crétins du web ? Parler de sa vie, tout simplement parce qu'elle est formidable comme celle d'un Boulet ou d'une Mitternacht ?
Mon propre site mélange tout : mes textes et mes enregistrements radio, mais aussi ma petite vie, des photos de mon chat et mon cv. C'est affligeant, mais personne s'en est plaint. Comme je fais de la radio depuis 1992, j'ai déjà mes réponses et elles ne me suffisent toujours pas.

Troisième dilemme : la Peste et le Choléra

Dernier souci, et non des moindres de ces espaces ouverts, ce sont les profiteurs très mals intentionnés. Car un blog est un site web ouvert 24/24h, 7/7j, et la possibilité de commenter ou de rétrolier lui permet à la fois de vivre sans votre présence continue, mais aussi de se faire tuer. Comme infection, il n'y a pas que les vers spécialisés dans certaines failles ou les attaques brutes de mots de passe. Ainsi la création de faux blogs qui polluent le principe, mais surtout chez soi de faux commentaires ou de faux rétroliens qui deviennent difficile de juguler. Ces pollueurs dégazent leurs merdes dans votre blog, sans le souci du risque d'illisibilité ou juridique de son propriétaire (puisque votre responsabilité éditoriale est engagée malgré tout). Ce sont des squatteurs, les mêmes qui inondent vos mails. Pire que tout, ceux qui se croient spirituels. Ainsi Wikipédia France a été taggué en clamant que ~~Podémus~~ était « l'annuaire francophone des podcasts ».

Une publicité déplorable sur le principe et tout à fait mensongère car ledit site commercial n'était ni premier, ni référent dans son secteur (il était encore en tests au moment de cet affichage sauvage). Supposons qu'il s'agisse d'une maladresse... Mais imaginez les dégâts que feraient une cascade de ce genre de méthodes tout à fait lamentables. D'entrepreneurs sans foi ni loi qui profitent d'une notoriété dûment acquise et d'une mise en ligne gratuite. Le découragement des bénévoles, la consommation des ressources, la destruction du bien accumulé. C'est pour ça que la “communauté” des bloggeurs réagit avec violence contre ces débordements. Ouvrir un weblog, ou participer à un site collaboratif, c'est aussi réfléchir sur ses limites, sur la liberté d'expression, et l'obligation d'y faire le ménage. C'est un engagement. Le même que participer à une radio associative.

Da Scritch, envoyé spécial, en direct de son clavier.

Dotclear a deux ans !

Da Scritch — 2005-08-13T00:00:00+00:00

Le CMS star de la communauté francophone des bloggueurs webdesigners et devs sous LAMP fait aujourd'hui ses deux ans. Rien compris ? normal.
Webdev

Notes de direct pour l'émission « Supplément Week-End » du Samedi 13 Août 2005.

C'est l'histoire de mon site perso. Une marotte, que j'entretiens depuis 1997. Dessus y'a ma photo, mon cv, les liens vers des amis et les chroniques de mes émissions. C'était dur de maintenir tout ça, donc j'avais mon propre système de mise-en-page. CMS comme on dit pour faire “staïle”. C'est lourd, ça marche pas toujours, c'est très contraignant. Et une mode est apparue, celle de parler de soi, de son point de vue, d'être soit un égocentrique, soit un journaliste à son échelle sur le net (comme les radios associatives). C'est le fameux phénomène des weblogs, journaux persos sur le net. Les blogs sont devenus si populaires qu'ils ont créé une industrie. Ils s'occupent de tout pour vous, vous n'avez qu'à fournir gratos vos idées, elles leur rapporteront via la pub.

Plutôt que créer un skyblog ou autres MSN spaces, j'ai voulu une solution indépendante, autonome, qui me laisse libre de gérer mon serveur comme je l'entend, le modifier n'importe comment, et ne me censure pas. J'ai mis 5 ans pour créer mon site, à écrire mes propres logiciels. Au moins 6 versions différentes qui sont toutes parties à la poubelle. Surtout que je voulais correspondre aux règles de l'art, édictées par le W3C. Et un jour, je me suis décidé à utiliser le même outil que mes lectures favorites. Dotclear, un petit programme sans prétention, mais fonctionnel, extensible et bien foutu, écrit par un Français, mais surtout dans l'esprit du logiciel libre, comme Linux, Firefox ou Open Office. Un logiciel très technique, qui demande une bonne maîtrise de l'informatique. L'effet de bord, c'est que les gens qui se l'installent en bavent, savent se tenir, sont motivé pour l'utiliser et parlent un vrai Français. pas de la kikoo lol attitude, écrire en sms novlangue, ça vous passe quand vous arrivez plus à vous relire deux ans après. Ça oblige à soigner son écriture, à créer son style, à bricoler en PHP CSS Javascript HTaccess huile de coude, à en donner toujours plus. Et à faire partager en plus de ses pensées ses améliorations à la communauté du logiciel libre.

Aujourd'hui, c'est les deux ans de Dotclear.

Merci Olivier Meunier. Et encore bravo.

Ah oui, tous les liens qui suivent, ce sont des blogs motorisés par Dotclear, qui font la fête à leur constructeur. Si vous voulez le votre, glânez des astuces sur le Petit Dotclear Illustré et farfouillez dans mes liens. Si vous voulez en savoir plus sur Olivier, sachez qu'il fait de belles photos. Et comme on s'était donné le mot, moi j'ai choisi celle-ci, pour sa lumière surnaturelle

Merci à Kozlika et Artis-tic pour m'avoir invité au complot. Eh oui, vous ne rêvez pas, c'est mon 200ème billet et c'est exprès [P-)

Podcastons

Da Scritch — 2005-06-29T22:07:00+00:00

Eh voilà, “Supplément Week-End” cède à la mode !
Radio

J'ai grillé Microsoft : J'avais des flux RSS largement avant que MS-Win Longhorn les annonce. Et avant que Microsoft n'annonce leur suppression pour cause de faille de sécurité, j'y rajoute le podcasting ! En plus d'avoir le résumé de mes billets, vous pouvez désormais charger l'émission correspondante pour l'écouter dans votre baladeur. C'est pas génial ? Eh oui ! « Nous vivons une époque moderne » où vous pouvez déguster la radio quand vous voulez. En l'occurence, pas besoin d'attendre la diffusion

Le flux podcast est issu du RSS 2.0 généré par le script de Triptik pour Dotclear. Afin de satisfaire tout le monde, les fichiers enclosure sont en MP3. Mais dans une qualité dégradée, malgré un poids supérieur (débit 64kb, mono) au Ogg Vorbis, afin d'alléger la bande-passante et de satisfaire ceux qui ont un débit pas forcément décoiffant. Comment ça, je trolle ? Ben le format Ogg Vorbis est largement meilleur à faible débit, j'y peux rien ! Le Ogg Vorbis restera sur le site à titre d'archivage, les mp3 ne resteront que le temps de rotation du flux rss, au plus 2 mois.
La première émission dispo est celle du 4 Juin, la qualité sera meilleure pour celle de Samedi prochain. Je ferais aussi en sorte de raccourcir le délai de disponibilité sur le site.

La licence de ce programme ne peut être libre à cause de la programmation musicale (et j'en suis le premier désolé). À noter que l'accord SACEM conclu lors du congrès du CNRA couvre les radios associatives sur un diffusion simulcast en direct. La présence des enregistrements sur mon site, même d'un programme radiophonique que je produits, est pour l'instant “entre deux eaux”...

Ah oui, pour vos remarques, c'est ici.

Déplacer son blog

Da Scritch — 2005-04-24T23:45:00+00:00

Suite à mon passage à un hébergeur en coloc', comment j'ai changé l'URL de mon blog. En complément du un billet du “petit dotclear enchantier” dont le traitement est incomplet.
Webdev

Merci à la talentueuse rédactrice du “Petit Dotclear Enchantier” qui m'a donné la force de ce coming-out, ceci est la publication d'un mail initialement pour mes amis.

Mon problème : faire comprendre à Google et aux utilisateurs de rss que j'ai déplacé l'url de mon site de http://dascritch.ath.cx en http://dascritch.net, passant parla même de mon pc à côté de mon lit à un prestataire de service.

J'ai rouvert mon ancien site, avec un serveur apache à poil, sans interpréteur php (ni cgi-bin qui m'avait troué mon pc chez moi avec un LMZ, oui, me suis fait piraté mon pc comme un con à cause d'un vieux awstat oublié dans une arbo mal patchée... Comme quoi, Marc, ça arrive même aux “consciencieux”...)

Dans la racine de son répertoire web, .htaccess

<FilesMatch "[^rss.php]">
Redirect 301 / http://dascritch.net/
</FilesMatch>

un petit regex qui redirige définitivement (code 301*) toute requête vers le nouveau site. Sauf pour les fichiers "rss.php"

dans un répertoire dotclear vierge, fichier .htaccess

AddType text/xml .php

donnera automatiquement un "bon" mime-type de rss (çui là n'est pas le bon,mais ça semble convenir) en servant un fichier texte qui ne sera pas interprété). Et l'accompagnant, à la même url que l'ancien fil rss, le fichier invitant à une redirection :

<?xml version="1.0" encoding="UTF-8" ?>
<rdf:RDF
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
  xmlns:admin="http://webns.net/mvcb/"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns="http://purl.org/rss/1.0/">

<channel rdf:about="http://www.dascritch.net/blog.php/">
  <title>da scritch blog zone</title>
  <description><![CDATA[]]></description>
  <link>http://www.dascritch.net/blog.php/</link>
  <dc:language>fr</dc:language>
  <dc:creator></dc:creator>
  <dc:rights></dc:rights>
  <dc:date>2006-04-10T22:20:53+00:00</dc:date>
  <admin:generatorAgent rdf:resource="http://www.dotclear.net/" />

  <sy:updatePeriod>daily</sy:updatePeriod>
  <sy:updateFrequency>1</sy:updateFrequency>
  <sy:updateBase>2006-04-10T22:20:53+00:00</sy:updateBase>

  <items>
  <rdf:Seq>
    <rdf:li rdf:resource="http://www.dascritch.net/" />
  </rdf:Seq>
  </items>
</channel>

<item rdf:about="http://www.dascritch.net/">
  <title>L'URL DU SITE A CHANGÉ</title>
  <link>http://www.dascritch.net/</link>
  <dc:date>2006-04-11T22:20:53+00:00</dc:date>
  <dc:language>fr</dc:language>
  <dc:creator>Da Scritch</dc:creator>
  <dc:subject></dc:subject>
  <description>Rendez-vous désormais sur www.dascritch.net.
Et mettez à jours vos fils rss !</description>
  <content:encoded><![CDATA[<p><a href="http://dascritch.net/">Rendez-vous
désormais sur www.dascritch.net. Et mettez à jour vos fils rss !</a></p>
]]></content:encoded>
</item>
</rdf:RDF>

Une seule entrée, datée de dans un an (à indiquer trois fois, format ISO 8601 recommandé par le W3C) pour qu'il soit toujours en tête des classements chronologiques des aggrégateurs, indiquant bien quelle est la nouvelle adresse. Radical : En trois jours, les 9 agents qui n'avaient toujours pas changés d'adresse sont sur le nouveau site. (À ce sujet, ceux qui comme moi ont un aggrégateur en ligne, si on faisait comme les spidder, à savoir mettre une url dans le User Agent des requêtes ?)

Voilà, normalement, c'est blindé et ça devrait marcher. le site .ath.cx est sur un serveur en ip flottante. Essayez http://dascritch.ath.cx puis http://dascritch.ath.cx/dotclear/rss.php. pour les “vrais” utilisateurs du net sous unix, à essayer avec la commande curl -i http://adresse, ce qui donne l'entête http en prime.

* Le redirect standard (code 302) n'entraîne pas une màj de Google. À ce jour, Google est le seul à ne pas parser mon site, s'arrêtant à la racine et au robots.txt sans réelle explication... frustrant.