Badger est une usine automatique de production de badges, utilisant pipes.yahoo.com, le fil RSS de votre choix et un peu de programmation n'utilisant 'rien-que-du-Net'. Ce qui sort en bas de la page ne sera juste que quelques lignes de HTML, prêtes à être collées à l'intérieur de la page de votre choix. Une fois dedans, Yahoo! Pipes et le fil que vous avez choisi font tout le boulot ; vos lecteurs verront les contenus actuels du fil, tout comme si vous les aviez saisis dans la ligne. Et parce que c'est libre de tout proxy et mis en cache par Pipes, ni votre site ni le site possédé par l'auteur du fil RSS ne verra quelque augmentation significative de bande passante.
Choses à Faire et à Noter
- Pour commencer, penchez vous sur le Badger dans un fenêtre ou un onglet séparé, ainsi vous pourrez faire des allers et retours entre ici et là-bas. Quand Badger sort pour la première fois, vous pourriez voir le fil actuel du réseau des développeurs de Yahoo! dans un badge noir et blanc très ennuyeux.
- Passez votre souris dans la boîte à couleurs et vous devriez voir l'échantillon de couleur -- celui sur la gauche -- changer de couleurs. Une fois que vous en avez sélectionné un, cliquez sur un des liens sous 'Apply Current Color'. Vous devriez voir un changement instantané dans votre badge.
- Pour basculer le titre, la page d'accueil, l'URL du fil ou le badge, saisissez cela dans le blanc approprié et cliquez sur Badgifiez !
- Fini ? Copiez le code source et collez-le dans le document HTML de votre choix.
Détails....
- Laissez svp le message "prenez ce code pour votre page" tout seul. Cela renverra vos lecteurs sur la page de Kent, avec le badge que vous avez créé tout pré-rempli et prêt à être modifié. Ceci sera commode quand vous voudrez faire des changements ; cela aidera aussi à partager Badger.
- Plusieurs badges par page fonctionnent bien, parce que Badger crée une ID au hasard pour chacun des ensembles de CSS et scripts. SVP, prenez soin de suivre les instructions dans votre source HTML ; la CSS a besoin de monter dans le header de votre document, la structure a besoin d'aller là où vous voulez placer le badge, et le JavaScript a besoin d'aller aussi proche que possible de la balise fermante BODY. (Si vous avez juste besoin de faire un badge unique, copier l'ensemble et le coller dans un bloc monolithique devrait bien fonctionner.) La 'font-family' correspondra à ce que vous utilisez à l'intérieur de votre page. Je ne l'ai pas incluse dans l'éditeur ; il y a déjà un nombre déjà suffisamment paralysant de choix à faire.
- Si vous utilisez CSS pour couvrir les formats de toutes les listes de définitions (DLs) et/ou des listes non triées (ULs) vous pourriez rencontrer des problèmes. Regardez le source de cette page pour voir ce que j'ai fait des miens.
Comment ça Marche ?
J'ai réglé une pipe qui prend n'importe quel fil RSS et le fait tourner directement. Je requête un rendu JSON avec un rappel dans ma page en utilisant _render=json et _callback=KENTBREW.badger.pingFeed. Quand le fil s'affiche, il est saisi directement à partir de Pipes et inséré à l'intérieur du document. (Si vous voyez un badge vide, rechargez la page ; Pipes est encore un peu chancelant.) Ceci fonctionnera pour n'importe quel fil ; pas besoin de cloner la pipe ou autrement jouez avec elle.
Comme je le précisais dans un précédent billet à propos de la recherche Technorati, Yahoo! Pipes est ridiculement facile à implémenter et utiliser, et annonce une ère où n'importe quel fil et tous les fils RSS seront mashable sans le besoin d'un proxy.
Dit de façon plus ennuyeuse pour être clair : le fait que Pipes renverra les résultats dans JSON emballé dans le renvoi de votre choix, n'importe quel fil RSS est désormais mashable en utilisant des technologies 'rien-que-du-Net : Javascript, CSS et un peu de HTML. Une fois que la page se charge, le serveur intermédiaire (ma page dans ce cas) ne rencontre plus de coût supplémentaire de bande passante pour héberger le fil. Tout arrive directement de Pipes, qui à son tour saisit son information à partir de la source de votre choix.
Amusez, vous et svp faites-moi savoir comment ça marche.
![[page faite avec CityDesk]](../../Images/MadeWithCityDesk.gif){kind=small}