da scritch net works - Mot-clé - rss

Progressivement en ‹img /›

Da Scritch — 2014-06-10T09:18:00+02:00

Que faire quand on a trop d'images ou qu'elles sont trop lourdes pour les tuyaux d'internets ? Comment donner l'illusion qu'elles arrivent dans un délai raisonnable ? Jouer avec l'affichage plus tôt ou plus tard d'une image, bonne ou mauvaise idée ?
Webdev

Ce billet fait partie de la série en <img /> :

Histoires en <img />
Manuel en <img />
Ressources en <img />
Bricolages en <img />
Progressivement en <img />
Finesse en <img />
Propositions en <img /> / English version

Dites-moi, les jeunes, quelle est la vitesse de votre débit ? 12 Mbds ? 20 Mbds ? 500 Mbds ? Eh bien dites vous qu'il fut une époque où la vitesse moyenne de téléchargement plafonnait à 4,8 kbds ! À cette vitesse, cela voulait dire qu'un document de 100 ko mettait au mieux plus de 3 p☠♝☈➿ns de minutes à arriver en entier !

Internet, n'a pas toujours connu le haut-débit.
Des fois, les images sont chargées trop lentement alors on tente de les afficher prématurément. D'autres fois, on retarde exprès son chargement.

Ce dernier comportement peut se justifier, mais comporte de multiples erreurs.

Les images à chargement progressif

Donc, lors de sa préhistoire, le web n'arrivait à des débits de 1 Mbds que dans certains laboratoires, c'est à dire à moins de 10 mètres du serveur. La plupart du temps, quand on chargeait une image, ça se passait comme ça :

Image fortement accélérée : Parfois ça prenait plus d'une minute…
Source : voir plus bas

Certains formats de fichiers ont été spécialement conçus pour être transmis et affichés progressivement. Dans ce cas, l'algorithme de compression de l'image ne peut être optimum, mais cela permet un meilleur confort côté utilisateur si son modem est très lent.

À la haute époque dinosauriale des BBS, les serveurs qui se contactaient en RTC (donc par téléphone avec des modems qui allaient de 300 bauds à 4 kbds), un format a émergé en 1987, le GIF.
Le format GIF avait donc à la fois un excellent format de compression d'image pour l'époque (LZW) et un mode progressif d'affichage de l'image. Son principe était simple : au lieu d'enregistrer chaque ligne horizontale l'une après l'autre, on enregistre chaque ligne en en sautant 8, arrivé en bas de l'image, on repart du haut en prenant la ligne non-enregistrée suivante avec un pas deux fois plus fin. C'est un format entrelacé, dans un concept plus évolué que la télévision analogique qui alternait les lignes paires et impaires. L'idée étant de permettre d'avoir un aperçu (certes très pixelisé) global de l'image avant qu'elle ne soit complètement chargée.

Comme l'image ainsi enregistrée était plus lourde, eh bien on attendait moins longtemps. Logique.

Pour les logiciels clients qui pouvaient le gérer, nous obtenions un effet de stores vénitiens qui s'ouvraient progressivement. L'image complète se reconstituait en 4 “passes”.

Excellente recréation de l'effet avec le logo de la Wikipédia.
Source : Dominique Toussaint sur Wikimedia

À noter que le PNG possède aussi un mode entrelacé, un algorithme appelé “Adam7”, pour 7 passes :

Ce qui, dans les faits, donne un effet de mosaïque inverse :

Source : Le toujours excellent blog technique Coding Horror

Le format JPEG n'était pas prévu pour être un format de transmission bas débit, mais une fois qu'il fut supporté dans Netscape 1, il fut lui aussi doté d'un mode d'enregistrement progressif. Ce dernier tire parti du mode de compression par macroblocs, suivi d'un affinage par vaguelettes. Mais là encore, il se paie : le poids du document est sensiblement plus lourd.

L'affichage d'un JPEG enregistré en mode progressif.
Source : l'excellent article de Stoyan Stefanov sur le YUI-blog

Comme j'en ai déjà parlé dans un précédent chapitre de ce dossier, il se trouve que MSIE n'a jamais pris en compte l'affichage progressif d'une image. Et comme MSIE était devenu le navigateur dominant de l'ère proto-ADSL, enregistrer une image en mode progressif était devenu complètement contre-productif.

Cette solution du chargement progressif des images fut traité très différemment dans le cadre du son et de la vidéo, puisque lesdits types de documents sont techniquement conçus pour un décodage à la volée des données, au fur et à mesure de la temporalité du document, avec parfois une capacité à s'adapter à la vélocité de la transmission.
Vous ne m'avez pas compris ? Raaaah flûte !

L'attribut lowsrc="https://dascritch.net/post/2014/06/10/"

Une autre solution fut proposée par les constructeurs de navigateurs, l'attribut lowsrc="". Oui, j'en ai déjà parlé dans le deuxième volet, mais il mérite d'être mieux expliqué ici.

Donc, je vous en rappelle le principe, une image est appelée comme suit :

<img lowsrc="preview.gif" src="image.jpg">

L'idée étant que le navigateur commence par charger preview.gif qui est une version monochrome de l'image normale et donc largement plus rapide à télécharger, une ombre théoriquement fugace qui ne persiste que les 4 minutes nécessaires pour récupérer tout les autres éléments de la page.
Cela demande forcément de traiter en avance l'image, puisque dans les années 1990s, vous n'aviez pratiquement pas de solution pour éditer une image côté serveur.

Si je reprends l'image du dessus, ça donne ça :

Aaaah, ce bon vieux Floyd-Steinberg. J'espère que tu m'excuseras de t'avoir trompé avec le true-color, qui, je sais, n'est qu'un mirage devant l'infinité des nuances de la vie… Oui, je t'ai aimé et je t'ai quitté…

À noter que l'apparition progressive de l'image pouvait avoir lieu selon certaines conditions passant de vaudou à black magic jusqu'au fatidique en fait, non, arrête : ça ne sert strictement à rien…

La troisième capture simulée n'est pas complète ?
Eh ben oui, forcément, comme il faut charger deux fois l'image, ça prend largement plus de temps pour l'afficher proprement au final. Or c'est justement cette double négociation qui peut prendre le plus de temps dans certains cas. Finalement, cet attribut a plus ralenti les navigateurs que donner une impression de rendu accéléré, il s'est montré contre-productif. lowsrc="" n'a d'ailleurs jamais été standardisé par le W3C, et a disparu dans les cendres d'une époque pré-CSS. Il a été oublié par tous les navigateurs qui l'avaient implémentés, à ma connaissance, Netscape, Opera et quelques navigateurs embarqués dans des feature phones.

Sauf quelque SEO-LOL qui me soutenait mordicus qu'il faut déclarer deux fois la même ressource <img lowsrc="image.jpg" src="image.jpg"> parce que « Ça donne plus d'importance à l'image pour les moteurs de recherche ». Si ! Si ! Il y croyait fermement. Facepalm dans sa tronche.

Lazy loading : Le chargement volontairement différé

Le lazy loading est une “mode” apparue en 2010. Elle consiste à ne pas laisser les navigateurs charger naturellement les images, mais attendre que l'endroit où l'image doit apparaître soit visible dans le viewport. Ce comportement est réalisé par une bibliothèque javascript. Une idée qui fonctionne pour les pages web qui ont une certaine longueur.

Attention : nous ne sommes pas dans le concept de scroll infini, où des portions complètes de contenus sont chargées au fur et à mesure qu'on descend dans la page. Ici, l'ensemble du texte, du layout, du DOM, des éléments du document sont chargées, SAUF les images, et donc il faut descendre pour que le chargement se déclenche.

Sincèrement, je trouve ce système extrêmement désagréable. Je prends par exemple un article que je commence à lire. Au bout d'une minute, souhaitant lire la suite, je scrolle avec ⇟ Page down, des espaces blancs apparaissent brusquement dans le texte, puis des images arrivent. Cela distrait le lecteur, et donne une forte impression de lenteur au site. T'avais pas le temps de tout charger alors que je lisais tes premiers paragraphes ? SRSLY

Flickr fait un infinite scroll totalement justifié, mais qui ressemble à ce dont je veux illustrer : une impression de lenteur.
Source : pool flickr de Sud Web 2014

Pourquoi Dirty Hacky va dégainer et tirer sans sommations ? Parce que la sémantique html de votre page est cassée, elle perd de son sens. Un peu comme si je mettais une passoire à un endroit, et que si je la regarde, au bout de 3 secondes, une casserole apparaît à sa place.

Les navigateurs chargent toutes les ressources sans chercher à voir s'il y en a immédiatement besoin. Oui, bravo, tu viens de définir exactement le principe d'intégrité d'un document. Mais peut-être ne sais-tu pas que le web est utilisé bien au-delà de ton navigateur web ?
Forcément, ignorer la sémantique casse beaucoup de fonctions normales du web :

Si votre javascript ne se charge pas ou plante brusquement, les images n'apparaissent absolument pas ;
L'indexation de votre page par les moteurs de recherches risque de devenir incohérente voire fortement pénalisée ;
L'indexation des images par ces mêmes moteurs ne se fait plus ;
Cela gâche l'impression d'une page, puisque les images ne sont pas chargées par défaut, il faut faire défiler entièrement la page dans son navigateur avant, et encore… ;
En cassant le web sémantique, on casse aussi l'usage de services tiers comme les flux RSS, ou encore les lecteurs différés comme Wallabag ou Pocket puisque les images n'y apparaîtront jamais ;
Les avantages à venir des navigateurs, notamment un éventuel chargement intelligent des ressources selon leur position géométrique, ne sera jamais exploitable ;

Je me suis rendu compte que la plupart des sites qui utilisent de genre d'artifice ont du texte au kilomètre, suivi d'un nombre très conséquent d'images, le tout préfixé par un titre dans le genre « Les 500 images de clowns se cassant la gueule qui font rire » ce qui leur assure un fort trafic.
Après avoir longuement tortionné à l'épluche-légume une des personnes qui l'utilise (Oui, l'épluche-légume m'a semblé être l'outil le plus à même de faire comprendre la torture induite par ce genre de script à la con), j'ai enfin eu des raisons “valables” :

« Parce que j'ai une page trop lourde donc elle met trop de temps à se charger. » Déjà, enlève 50% de tes javascripts de pubs, tasse tes assets, optimise la compression de tes images et surtout simplifie au maximum ta maquette : elle est sûrement trop complexe ;
« Parce que mon serveur a beaucoup trop de traffic à encaisser. » Alors commence à investir dans un serveur auxiliaire, fait appel à un vrai CDN, voire commence à faire du load balancing au cas où ton serveur crashe ;
« Parce que je me fais sans cesse piquer mes images. » C'est le principe du web, même si tu bloques l'accès à “Voir le code source” ou à "Enregistrer l'image sous" par le menu contextuel, tu n'as aucune chance d'empêcher ni le Ctrl+U, ni le F12. Alors un wget des familles, n'en parlons pas. Peine perdue ;
Et enfin ce p'tit con qui est trop jeune pour avoir eu un modem 28kb de chez US Robotics, il me dit que « mais c'est trop génial, ça donne un effet totalement inédit… ».

C'est à ce moment-là qu'il a perdu d'une manière inédite ses dernières dents, dommage collatéral à cette enquête de terrain par votre serviteur. Dirty Hacky conclu l'interrogatoire avec sa phrase habituelle :
BANG ! BANG ! BANG !

Le chargement avec… une iframe ?!?

Ça, c'est tout récent, et c'est surtout le fait de Getty Images. Getty Images comporte le plus important fonds de photos historiques et un des plus importants en images d'illustrations, ce qu'on appelle improprement le libre de droit. En temps normal, l'usage de ce trésor est loué à prix d'or aux professionnels et l'achat d'art est un poste souvent négligé par des web-agencies d'amateurs. Getty a d'ailleurs une réputation agressive à pousser son copyright parfois très loin.

Depuis Mars dernier, Getty Images met gracieusement à disposition des blogueurs une partie de son catalogue d'image, mais avec d'importantes contreparties. Notamment l'insertion doit être fait avec <iframe></>. Avantage : le design est conservé, les crédits de l'image aussi et l'agence peut parfaitement tracer l'usage et l'audience de son catalogue. Et, oui, nous avons bien un chargement différé de ce contenu par rapport au reste du document, puisqu'une iframe est souvent chargé en tout dernier par rapport aux autres assets de la page.

#79989152 / gettyimages.com

Pour embarquer l'image précédente, voici le code source totalement overkill que Getty Image me propose d'insérer :
<div style="[…]"> <div style="[…]"> <iframe src="//embed.gettyimages.com/embed/79989152?[…]" width="594" height="482" scrolling="no" frameborder="0" style="[…]"></iframe> </div> <p style="[…]"></p> <div style="[…]"><a href="http://www.gettyimages.com/detail/79989152" target="_blank" style="[…]">#79989152</a> / <a href="http://www.gettyimages.com" target="_blank" style="[…]">gettyimages.com</a></div> </div>

Je me demande si je n'aurais pas dû prendre comme illustration l'image d'un garçon présentant une obésité morbide…

Là, c'est même pas moi qui va m'énerver, mais les constructeurs de navigateurs web, car une insertion d'<iframe></> est loin d'être gratuite en terme de consommation mémoire ; j'ai rapidement abordé ce sujet à propos des boutons de partage sur les réseaux sociaux. Alors imaginez quand une page en comporte une cinquantaine… L'abus d' <iframe></> est actuellement l'une des principales causes de crash de navigateurs.

Ce qui explique que vous voyez souvent cette erreur quand vous visitez certains sites.
Source de la capture : astucehebdo

Bientôt la fin ?

Dans le chapitre suivant, je parlerai enfin du problème qui m'a motivé à écrire ce dossier : le problème de l'affichage d'une image en fonction de la résolution de son support. Vous verrez qu'on va parler à la fois des formats ésotériques, d'un retour du lazy-loading et ce d'une proposition que Daniel ne peut pas refuser…

Petite discussion entre podcasteurs

Da Scritch — 2012-04-13T22:31:00+02:00

Ce qu'il y a en-dehors de l'enregistrement.
Radio

Malgré nos obligations personnelles qui nous laissent de moins en moins de temps, Le Supplément Week-End est toujours là, fidèle au poste depuis 2004, tous les Samedi à 12 h sur Radio <FMR>. Dès le début, il y eu cette complicité avec Ultimatom et Dusport (et Eigil, malgré son manque ;) de préparation). Au début, ce n'était qu'une émission d'une radio locale.
Mais dès la première émission, je bricolais le flux rss de mon blog pour en faire ce qui allait devenir par la suite un podcast. Comme dit mon ami Marc Olanié, je suis un « pourfendeur de xml mal siphoné ». Une fois la “norme” stabilisée, notre programme allait connaître une vie élargie au-delà de notre zone de radiation.

Ça, c'est au-delà de notre travail d'analyse critique, et c'est au-delà de mes prestations de réalisateur radio. C'est aussi en rapport avec mon activité professionnelle de développeur web.

En début de mois, Gnieark et Capucine, auditeurs occasionnels et podcasteurs relativement neufs sur la scène, m'ont demandé de participer à une discussion via Skype sur le principe du podcast.

C'est à ce moment-là, que quand on dit qu'on est un des plus vieux podcasts francophones toujours en activité, qu'on se prend comme un vertige... ahem.
Ah ouais, et en plus, ça fait presque 20 ans que je fais de la radio… Laissez-moi vieillir dans l'illusion d'une éternelle jeunesse, bande de galopins !

Donc, Gnieark et Capucine m'ont demandé de représenter l'équipe (Ultimatom et Dusport font d'autres choses après 23 h) et de débattre avec Gwilh de ce média particulier à internet.

Très vite, Gwilh fait remarquer, à très juste raison, qu'il y a la différence entre la radio de rattrapage (ce qu'est effectivement Le Supplément Week-End) et le podcast purement original et non-radiodiffusé. D'un autre côté, on s'est aussi très vite mis d'accord sur la différence entre le podcast purement audio et les productions vidéos.

L'émission dure une heure, mais je pense qu'elle devrait intéresser celles et ceux qui suivent l'émission que nous produisons chaque semaine. Et aussi vous intéresser sur l'expérience sonore que monte actuellement Enflammée avec ses Petits Déjeuners Clandestins dans le Datalawn Project, la matinale de Radio <FMR> et son programme bis L'Onde Miroir.

Alors milles mercis à Capucine et Gnieark, bonne écoute, et j'espère que cela va vous mener à écouter encore mieux la radio, ce média de l'imaginaire.

Et si Gnieark me l'autorise, je reprendrais son sonore sur mon blog.

Le Web a 20 ans

Da Scritch — 2011-08-07T11:20:00+02:00

Merci sir Tim Berners-Lee.
Webdev

Peu importe que le protocole hypertexte soit trop incomplet

Peu importe que http://, c'est finalement au moins un slash en trop

Peu importe que le sous-domaine www. soit ridicule, d'ailleurs il n'était même pas dans la première adresse

Peu importe que sur la palanquée de codes d'erreurs, certains n'ont plus été mis en pratique depuis 15 ans, et qu'il en manque plein

Peu importe que le langage html soit basé sur du sgml et pas sur T_eX

Peu importe que ledit html ne soit pas suffisamment formel

Peu importe que chaque implémenteur aie fait un peu ce qu'il veut

Peu importe que ce langage soit fondamentalement pas sécurisé

Peu importe que l'on aie dû séparer la forme du fond un peu tard

Peu importe que le W3C mette un temps astronomique à établir une règle

Peu importe les comités rebelles du W3C comme la IE-team de Microsoft ou le WHAT-WG

Peu importe que finalement le seul langage client soit javascript

Peu importe que les plug-ins aient pollué le principe

Peu importe qu'Apple aie décrété que servir un xml passe par un protocole imts:// qui n'existe que chez eux

Peu importe que la définition du DOM soit encore bien incomplète

Peu importe que la gestion des noms de domaine ne soit qu'une planche à billets

Peu importe que la confidentialité des données par SSL soit aussi une planche à billets

Peu importe que les spammeurs, les maffieux, les gouvernements et les FAI corrompent les contenus

Peu importe qu'on aie oublié que le port 80 peut servir à autre chose

Peu importe qu'on aie oublié que le html serve à bien d'autres applications que les navigateurs

Joyeux anniversaire, World Wide Web.

Badges

Da Scritch — 2011-01-19T20:23:00+01:00

Je n'ai pas fait mon service militaire, donc ça ne peut que me rappeler mes années boy-scout, mais voici mes décorations HTML5 certifiées norme W3C.
Webdev

HTML5 est le mot hyper-hype en ce moment. Faut dire qu'on oublie qu'en plus de la sémantique HTML, il intègre aussi CSS3, ECMA script 5, DOM level 3 SVG, les micro-formats, etc... Et, il est important de le noter, on ne parle que des technologies côté navigateur (clients), pour les serveurs webs, je parle d'autres langues (Apache, PHP, Bash, expressions régulières, bases de données,...) .
Donc selon la classification du W3C accompagnant le nouveau logo du HTML5, voici mes compétences supposées dans la matière :

C'est totalement partial, il y a un manque très important qui me tient à coeur (le volet sécurité client, qui il est vrai n'est pas encore standardisé) et mon niveau varie fortement selon les compétences. Je dois reconnaitre qu'une expérience récente m'a rendu particulièrement humble. En plus d'être en indépendant, je développe dAgence, une application d'hébergement (avec Nicolas Guilhou et Kairn) dont le backoffice est conçu pour être totalement HTML5 depuis 2 ans à l'origine...

Pour ceux qui trouvent le logo W3C moche (des goûts, des #rrggbbaa), ils peuvent en ricaner en faisant d'excellentes parodies.

Pour la petite histoire, et ce que je ne raconte pas dans mon profil LinkedIn, mon premier badge de boyscout, c'était “cuisinier”. Là aussi, maintenant, j'ai de quoi être humble...

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 coulisses du site en Septembre

Da Scritch — 2007-10-05T23:33:00+02:00

Making of, réjouissance, collection de spammeurs Français et objectif débile du mois.
Webdev

Objectif débile du mois

Le site d'info satirique The Register avait posé la question « So, what's the first rule of Reg Club ? ». Et un lecteur a proposé :

Thou shalt not quote Wikipedia and expect to be taken seriously.

Putain, les mecs de El Reg placent vraiment la barre très haut... OK, même pour moi qui adore mettre des liens absolument partout, pari relevé : Je ne citerai pas la Wikipédia en ce mois d'Octobre.
Hard core. Gasp.

Making of de Septembre

Allongement de la une du site, On cite les titres de7 billets (au lieu de 5). Bizarrement, la longueur varie presque pas.
Ajout d'icône de catégorie, et explicitement des tags dans le flux RSS. répétition de la description dans le contenu. Indirectement, ça permet de voir dans les logs d'Apache qui lit les flux et d'où...
Différentiation de mes commentaires par dc2. M'en a fallu du temps.
Un seul flux RSS était censé être indexé, le but étant d'éviter que les RSS de commentaires apparaissent dans les résultats de requêtes. Mais rel="nofollow" ne suffit pas (alors est-ce utile ?), il a fallu filtrer aussi dans robots.txt.
Modification de la structure du champ commentaire, hélas en cassant la construction proposée par Vric. Extention automatique de la zone texte en fonction de l'écriture. Toujours pas de capcha (ouf !).
Modifications dans le balisage des Flash, suite à la rédaction d'un billet à ce sujet
Modifications des liens relatifs documentaires
Modifications des bulles d'infos concernant les contextes de page (plier/déplier, lightbox,...)

Les soupirs de soulagement

Le futur de Firefox 3 et de Javascript
Microsoft consent à installer MSIE7, même sur des Windows piratés. On peut considérer que MSIE6 a moins besoin de pourrir le code d'un site perso.
Microsoft prolonge la vie de XP. Vista a trop refroidi les pros. Hélas, mes amis qui ne jurent que par la Fenêtre (et Clippy) devront y passer un jour.

Spammeurs Français du mois

Ils m'ont écrit à une adresse qui n'était accessible que par une collecte strictement illégale, ce qui est techniquement un spam caractérisé. La désinscription semble aussi douteuse que l'inscription forcée. Les entreprises suivantes sont donc totalement hors-la-loi en France, et ne sont sûrement pas dignes de bonne foi :

Entreprise/Site	Origine du spam	Technique	Sites publiés, complices	Activité supposée
Skibed.com	mailflip7.edt02.net (82.138.77.199)	Edatis (spammeur avéré)	leadmailing3.com , 80.245.41.17	Location
"Karine SEBAG" (rout.lcp-prod@laposte.net)	9 telecom (86.71.129.183)	Mail édité dans Word (Office 2003 non enregistré), logiciel de spam maison, obfuscation de l'adresse d'origine	vualatele.biz , lcproduction.eu	Vidéos amateurs
Sexy-rencontres (champ-reduit.com)	smtp.cachet.fr (90.40.199.233)	Site suspect (c'est quoi ce formulaire ?) Obfuscation de l'adresse retour (@yahoo.com)	easyrencontre.com	Racolage
infos@cdmultimedia.fr	cdmultimedia.fr (62.161.36.106)	Eudora		Duplication (légale ?) de vidéo
"Adomos" (edouard@marketmail.eu)	mailflip9.edt02.net (82.138.77.201)	Edatis (spammeur avéré)		Manipulations financières douteuses
"Audrey PAGENEL" (stim.ventes@laposte.net)	9 télécom (86.67.224.253)	Adobe GoLive 9, obfuscation de l'adresse d'origine	cine-cheque.fr (récidiviste) , stop-mails.info , vualatele.biz	Achat de coupons
newsletter@lereso.fr	mail.ecipfinance.fr (62.193.248.100)	PHPMailer, phplist	lereso.fr , JC Berbach , ecipfinance.fr	Cosmétiques
Sexy-boutique (champ-reduit.com)	smtp.cachet.fr (90.40.6.54)	Site suspect, obfuscation de l'adresse retour (@yahoo.com)	sexy-megastore.com	Racolage
Unibet (champ-reduit.com)	smtp.cachet.fr (90.33.159.141)	Site suspect, obfuscation de l'adresse retour (@yahoo.com)
andrea-95@cegetel.net	Cegetel (86.75.23.183)	GOTO Software Sarbacane, obfuscation de l'adresse retour (@yahoo.fr)	les-plaisirs.com	Racolage
"FMC via Travelbed" (emilie@travelbed.fr)	mailflip25.edt02.net (82.138.77.217)	Edatis (spammeur avéré)	edt02.net	Prêts usuriers
"BOLLINI PARTNERS" (maila.bus@laposte.net)	9 telecom (86.67.224.106)	Obfuscation de l'adresse d'origine	exploragent.fr	Revente d'un fichier de mail probablement illégal

Honnêtement, je doute de l'efficacité de Signal Spam. Certains ont déjà été plusieurs fois signalé depuis l'ouverture de ce service, il n'y a eu aucun effet.

Se moquer de TF1 soit...

Da Scritch — 2007-05-21T13:24:00+00:00

....mais Radio France a un site 0.5, et c'est peu de le dire !
Entendu

bon, voilà, j'étais alléché par cet article du Monde daté de samedi : « La grande et la petite histoire de TF1 revisitées avec sérieux et ironie ».

Donc forcément, je fonce sur franceinter.fr pour écouter l'émission. À cette heure-là du Samedi soir, aucune chance que je l'écoute, j'étais agressé dans mon édredon par deux filles à poils. Après avoir erré dans une liste alphabétique, je tombe sur la rubrique de l'émission.

Sur la page dédiée (fort bien fournie en documentation et malheureusement totalement éphémère), on me propose de télécharger l'émission qui m'intéresse en REAL MEDIA !
Plus incompatible et inaudible comme format audio, on fait pas mieux, à part le µ-law... et encore.
Et à côté, Radio France a le cynisme de me proposer du podcast. Ben ça tombe TRÈS bien, parce que c'est du mp3 qui va le mieux dans mes baladeurs.

Donc le g33k, il clique sur le flux, il repère dans le source le tag <enclosure> et... hop ! 43'35" de sonore, 40Mo en mp3 (l'utilisateur normal profitera de ma recherche pour faire clic droit sur le lien, puis “enregistrer sous...”)

Faut vraiment être c+n pour encore proposer du realmédia en 2007, c'est tellement web 0.5... Si c'est pour écouter en ligne, y'a dewplayer.

Ah oui, à l'écoute, c'est absolument poilant, et pour le plaisir...

Planète Pataphysique

Da Scritch — 2006-04-11T12:46:00+00:00

Au fil de la Garonne, d'une ville où si tu ne sautes pas, t'es pas du coin, de sa vie quotidienne qu'on vous invite à lire par plusieurs facettes.
Ma vie est une sitcom

Depuis 4 jours, mon modeste blog qui fait partie de mon putain de mégalo de site personnel vient d'être repris par une planète. Une “Planète”, c'est un aggrégateur de flux rss de weblogs sur une thématique bien particulière, qui trie tout ça par ordre chronologique et présente ça en une page web. Par exemple, la mienne qui regroupe des linuxiens et des webdev avec leurs blogs et leurs liens du jours, ou encore d'autres plus techniques ou prestigieux.
Le nom vient de Planet Planet, un logiciel serveur qui fait ça, mais toutes les planètes sur le web ne sont pas basées sur lui.

Donc, le site Pataphysique.net regroupe des blogs non pas en fonctions de leurs centre d'intérêts (quoique), mais du fait qu'ils sont œuvres de Toulousaings. Mais attention, des blogs de qualitay, écrits en bon Français... En clair, des blogs qui se lisent souvent comment de vrais journaux personnels, parfois des romans, qui font rêver, saliver, donnent envie de sortir, mettre la main à la pâte... Pas des $k4bl0g$ 2 K-rtonpat ke lol ti compran keud mdr écrits en SMS parce que faut pas pousser j'ai rien à dire alors faut pas en plus que j'ai besoin d'être compris(e) par les autres.

Inconvénients de cette planète : Pas de flux rss synthétique (ni sur le mien, d'ailleurs), des messages repliés par défaut, l'absence d'une liste des blogs liés et surtout du rafraîchissement des messages. Il arrive effectivement que je corrige mes posts après coups, soit pour l'orthographe, le style, ajouter des liens ou des images... Ben vous aurez les premières versions.

Mais bon, je suis invité, je vais pas casser la baraque parce que ça tourne sûrement beaucoup plus rond que ma propre planète. En plus, son mainteneur a le bon goût d'avoir tenté de regrouper les différents tags de chacun sous les mêmes mots clés, comme la cuisine, les sorties (sur Toulouse, bien sûr), la photo, les lectures...

Alors je salue ici mes nouveaux lecteurs et les autres satellites qui orbitent autour :

Tételle (C Com Si) qui m'a capturé
Christophe Cavaillès
Nono
Vermicel
Bill & Marie
Jacques Danyels
Civetta (La Clé des Champs)
Et tout ceux que j'oublie, mais en l'absence de liste, faut pas m'en blâmer...

Pis si l'humeur me prendra, peut être que j'en ferais passer quelques uns au micro.

And don't forget : Take care of the only one we have.

Fini de rire...

Da Scritch — 2005-08-21T23:44:00+00:00

On est en concurence
Radio

Puisque « Supplément Week-End » est officiellement sélectionnée pour Les Podcast d'Or de la langue Française.

Je ne vous demande pas de voter pour nous puisqu'il y a un jury, mais d'écouter les autres inscrits. Avec 41 participants, la bataille va être féroce ! Après avoir fait votre petit tour, vous pourrez nous dire ce que vous avez découvert [P-) et seulement nous écrire (en commentaire) pourquoi vous nous préférez... ou pas !

Encore merci aux organisateurs ! Les Podcast d'Or sont recommandés par des Influenceurs.

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.

Del.icio.us via rss

Da Scritch — 2004-11-25T00:36:00+00:00

Plutôt que par DeliciousMethod qui a pas mal d'incovénients. Watch out: Bad french posting ! (It could interest someone via google...)
Webdev

For whom it may concern, here is my new code for having del.icio.us favorites into your pages, as I did.

It uses an rss library (here : magpierss) instead of Matthews Dusty's domxml classes whose problems are :

uses web app were there was no use for just getting
is not cache and del.icio.us' bandwitdh friendly
ask you to put you password on you .php page (BAAAAAAD)
asks a LOT of dependencies (xmldom, curl, ... ), not very good about security or hosting

my code can catch hreflang in the suggested maneer by Joshua down there (even if [fr] was more lisible because at the beginning of our tags... but he is working on it !). It is a little bit more sophisticated instead of my planet composer, but still modifiable by php novices.

I would like in near future finishing my xbel parser, and find out a solution for the favicon caching of firefox :( le malheur des uns, etc...)

So... here it is. Yes, the code is awful. And again, EXCUSE MY BAD FRENCH !

<?php require_once('rss_fetch.inc');// appel à magpierss if ($_flux = fetch_rss('http://del.icio.us/rss/dascritch')) { echo '<ul>'; foreach($_flux->items as $item) { $_sub=explode(' ',$item['dc']['subject']); $hreflang=''; $tags=array(); foreach($_sub as $_tag) { if (strstr($_tag,'lang:')) { // nous avons un tag linguistique $hreflang.=($hreflang===''?'':'|').substr($_tag,5); } else { // tag normal array_push($tags,$_tag); } } echo "<li><b><a href=\"{$item['link']}\"".($hreflang===''?'':" hreflang=\"$hreflang\"").">{$item['title']}</a></b><br />{$item['description']}<br />"; echo "<small style=\"cursor:help\" title=\"{$post['time']}\">"; foreach ($tags as $tag) { echo ": : <a href=\"http://del.icio.us/dascritch/$tag\">$tag</a> "; } echo " : :</small><br /> </li> "; } echo '</ul>'; } else { echo "oops !!!! we had a problem..."; } ?>

From: me
To: Joshua Schachter

Hello.

i like to use del.icio.us because it permits me to "blog" indirectly even at work. I want to redesign completely the page dascritch.ath.cx/liens-delicious.php in my website (moving from your webapp to rss, more server friendly for you, easely cachable and more simple to share code for friends). I decided to use keywords for indicating the site language;, and parsing it (later) to put it in a special <A> parameter (named hreflang, it is puting [en] in my website with small css strick).

I found out that the most simple was to put them between [ ]
Example : [en] for english , [fr] for french.
but for multiple langages (as in www.ruskeys.net both english and russian), I saw other blog using hreflang using pipe for separating : [en|ru].

but if i enter : [en|ru] design histoire musique tech, del.icio.us will put [en design histoire musique ru] tech. Same problem if i use a coma [en,ru]

Is it obiviously a bug ?

Response from: Joshua Schachter

Hi!

Unfortunately, the spec for hreflang appears to allow only one language: w3.org/TR/REC-html40/struct/links.html#adef-hreflang

Anyway, I have taken out the "|" and "," splitters.

I recommend you use multiple tags like: lang:en lang:ru

I will be adding support for foreign language delicious soon, using this method!

Appel à tests pour mobiles

Da Scritch — 2004-09-02T20:59:00+00:00

Test-drive pour ActuaBD version mobile. Effet de bord : mon ancien site mobile est de retour. Tapez directement http://dascritch.net dans votre navigateur mobile.
Webdev

J'avais déjà pesté sur le fil RSS bordélique qu'envoie SPIP, mais je tenais à mettre très vite au point une version mobile d'ActuaBD basée sur les différentes rubriques d'infos. Le programme m'aura demandé 1h à être au point (soit les 30 premières minutes du Columbo loupées). Le site qui l'entoure est basée sur une vieille version de mon système infomania+lisibiliti. Faut dire aussi qu'un site pour téléphones mobiles est tout sauf conforme exactement à certaines règles, mais il y a suffisamment de points communs entre le cHTML et wxhtml pour pouvoir en un seul code arriver à quelque chose de potable. Les seules parties dynamiques concernent la feuille de style pour l'émulation et la gestion des emoji. S'il fonctionne bien pour la plupart des rendus listés après, j'aurais besoin de quelques retours :

I-Mode Europe et Japon
Vodaphone KK (ex J-Sky)
Nokia (Symbian) series 60
Symbian non Nokia (Sony-Ericsson, Siemens,...)
Ezweb et wap OpenWave
Wap acceptant le xhtml
Palm OS
Opera mobile (le renvoi ne se fait pas, j'ai besoin de données sur les UA et les accepted mime, entrer par http://dascritch.net/i )
Minimo
pourrielware (MSIE mobile edition)

Normalement, les accentuations ne devraient pas passer correctement sur les mobiles coréens et japonais, les touches directes uniquement sur I-mode, Nokia et Opera. Mais je serais ravi d'avoir du retour. Merci de préciser les modèles et les UA (dans les outils, "que suis-je"). Il est très probable que je rajoute vite le système de cookie virtuel pour choisir proprement son mode de rendu
À noter que la page peut très bien s'utiliser pour Firefox : mettez la page en favori, et cochez "ouvrir en panneau latéral". Point important : le fil n'est renouvelé que toutes les heures pour ménager ActuaBD.com et privilégier le temps de réponse de la page. C'est le cas pour tous les résumés (même celui en une de mon propre blog !).

En mettant cette page au point, j'ai remis en plus de mon toolkit, tout mon ancien site mobile mais aucun contenu n'est actualisé (ni le blog, ni les galeries photos, ni les liens). Ils restent consultables, mais datent largement. Je ferais le ménage au fur et à mesure, mais mon site perso web (normal) prime.

Vela... vela... enjoy !