Posted by: mashuphowto | mars 30, 2008

La boîte à outils du codeur de site Web

WordPress

La boite à outils du codeur de site web

Editeurs de page web

Windows (et/ou multi-OS)

Eclipse

Eclipse est un environnement de développement intégré (IDE) lancé par IBM pour développer des application Java. Son architecture est développée autour de la notion de plugin, ce qui permet de l’utiliser pour le développement web où il remplacera sans peine un Dreamweaver ou un Notepad++ grâce notamment aux “plugins” suivants :
- WTP (Web Tools Platform) — Reconnait les formats HTML, CSS, JSP, JSF, javascript, XML, DTD, XSLT… (coloration syntaxique, auto-complétion, validation et aide à la saisie des fichiers XML par la DTD associée, etc.)
- Aptana — Mêmes fonctionnalités que WTP. L’auto-complétion des fichiers CSS donne la compatibilité (IE et Firefox) des différentes balises de style, Débugger Javascript
- ATF (Ajax Toolkit Framework) — Prise en compte du langage AJAX dans le développement web
- Amateras EclipseHTMLEditor — Reconnait les formats HTML, CSS, JSP, javascript, XML, DTD… avec un éditeur graphique de pages
- XMLBuddy — Plugin léger pour le format XML (validation des fichiers si DTD associée), DTD, XML SCHEMA, et XSLT
- X-Men — Editeur de fichiers XML (non maintenu depuis 2003)
- OxygenXML — Prise en charge du format XML, DTD, XML SCHEMA, et XSLT (avec un débugger de feuilles de style XSLT)
- EclipseTidy — Editeur de fichiers HTML et XML
- eZing Builder — Editeur WYSIWYG de pages web (HTML)
- Euromath 2 — Editeur WYSIWYG de fichiers XML permettant d’écrire des expressions mathématiques (un peu de la même manière qu’avec Latex)
- EclipseXSLT — Création Gestion avancée des fichiers XSLT, avec la coloration syntaxique, la possibilité de créer plusieurs configurations de style applicables à un même fichier XML, etc.
Retrouvez la liste complète des plugins Eclipse sous forme d’un PDF mis à jour par Benoît Courtine qui a aussi un blog.
Dreamweaver

Dreamweaver — Cet éditeur de pages web créé par Macromedia puis racheté par Adobe (certains prononcent Adobi - à l’anglo-saxonne - mais je préfère dire Adobeu. D’ailleurs ceux qui prononcent Adobi sont souvent les mêmes qui prononcent notepad++ comme plus plus au lieu de pleus pleus ^_^v).

La fonction chercher-remplacer plus que complète (il faudrait un tutoriel pour faire le tour de la question) et la gestion multi-sites avec le transfert FTP méritent à eux seuls l’achat du produit. L’aspect ouiziouigue du bidule est encore - dans la version CS3 - réservé aux gadgétophiles.

Le gros point noir de Dreamweaver est sa gestion fantaisiste du format UTF-8 qui nécessite un passage préalable dans un vrai éditeur comme Notepad++…
Notepad++

Notepad++ — Quand Dreamweaver m’ennuie, c’est vers Notepad++ que je me tourne, tant sa simplicité apparente est reposante. Il prend en charge la coloration syntaxique de pratiquement tous les langages et ses fonctions de “traitement” de textes sont impressionnantes (même si je n’en n’utilise pas le dixième).

Les plus : Notepad++ est capable de plier-déplier les blocs de code et possède un explorateur de fichier. De plus, utilisé conjointement avec FileZilla (en le spécifiant comme éditeur de texte distant, par exemple), vous avez une configuration légère pour trois fois rien

Les moins : l’auto-complétion des propriétés CSS n’est pas vraiment contextuelle (contrairement à Dreamweaver)
Nvu

Nvu — Prononcez N-view. A mi-chemin entre Dreamweaver et Notepad++, cet éditeur est la refonte du module d’édition HTML Composer de Mozilla. ~~Le logiciel est en version 1.0 depuis 2005 sans mise à jour depuis. A noter qu’il existe un tutoriel Nvu bien fait sur Framasoft.~~ Nvu est remplacé par KompoZer. Pour connaitre le pourquoi du comment, c’est sur Framasoft. (Merci burningHat).
KompoZer

KompoZer — Développé à partir de la version 1.0 de Nvu, ce logiciel reprend à son compte la gestion des plugins et des thème à la Gecko (Firefox), ce qui semble prometteur pour l’avenir. Des fondations de Nvu, KompoZer semble avoir gardé le goût de la non-simplicité pour la gestion des feuilles de style, notamment.

D’autres infos sur Nvu (valable pour KompoZer ?) sur geckozone.
Intype

Intype — Ce puissant éditeur de code est d’après p4bl0 l’équivalent de TextMate sur Windows. Encore en version Alpha, vous pourrez suivre l’évolution du développement de cet éditeur prometteur sur le blog.
HTML-Kit

HTML-Kit — J’ai une relation ambiguë avec ce logiciel : je l’installe aussi souvent que je le désinstalle à cause de son interface peu intuitive qui finit toujours par me gêner avant que je trouve mes marques. Mais c’est un très bon produit et je ne désespère pas de m’y adapter un jour !

Il est possible d’avoir HTML-Kit en français avec une présentation du logiciel en prime.
UltraEdit-32

UltraEdit-32 — C’est un éditeur de code source qui supporte la plupart des langages (C++, PHP, HTML, VB Perl, Java). Il dispose aussi d’un module FTP et permet - comme Notepad++ d’enregistrer des macro-commandes pour les tâches répétitives.

Ce n’est pas un logiciel gratuit, mais la version UltraEdit-32 Professional Text Editor ne coûte que 34€, soit 12 fois moins que Dreamweaver CS3 !
Jedit

Jedit –C’est un éditeur écrit en Java, ce qui lui permet de fonctionner sous toutes les plate-formes.
Quanta Plus

Quanta Plus — Avec cet éditeur de texte, on sort un peu du développement web, puisqu’il permet également de créer des livrets de documentation, ce qui peut toujours être utile.
CSSED

CSSED — Cet éditeur de feuilles de style CSS nécessite l’installation de GTK+ Runtime Environment avec comme avantage de tourner sous Linux, Mac OSX et Windows !
E-Texte Editor

E Texte Editor — Toute la puissance de TextMate sur Windows (au point de laisser Mac OS X et switcher sur Windows ?).
PSPad

PSPad — Le meilleur pour la fin ? C’est bien possible car contrairement à HTML-Kit, son interface est très agréable et son intégration avec TopStyle Lite est très réussie. L’ensemble fournit un environnement de développement de pages web très complet et simple d’utilisation.

Parmis les petits plus appréciables : un générateur de faux-texte Lorem Ipsum et l’intégration de Google avec des options de recherche avancées, toujours utiles en plein travail.

A noter que la version Pro de TopStyle inclut un éditeur HTML.

Linux

Scribes

Scribes — C’est un éditeur pour Linux, puissant tout en restant simple et léger.
gedit

gedit — Il s’agit de l’éditeur de texte officiel pour l’environnement de bureau GNOME.
SciTE

SciTE — Cet éditeur de texte complet (coloration syntaxique, arbre de code dépliant, fonctions rechercher/remplacer) se distingue par l’exportation au format PDF, RTF ou HTML. Bien que disponible également pour Windows, SciTE gagne sa place dans la section Linux grâce à sa configuration par fichiers : pas de panique, Framasoft veille

Mac OS X 10.4+

TextMate

TextMate — L’éditeur manquant ? Sur Windows, en tout cas, c’est sûr
BBEdit

BBEdit — Si vous êtes Apple Addict.
TextWrangler

TextWrangler – Par le même éditeur de BBEdit dont il est une version allégée, cet éditeur autorise la manipulation de texte et l’administration de serveur Unix.
Smultron

Smultron — Conçu à la fois pour ne pas effrayer les débutants et satisfaire les utilisateurs avancés.
cssedit

cssedit — un très bon éditeur de CSS. Via 64K.
Coda

Coda — Encore un bien joli éditeur de texte et de CSS qui intègre un module de transfert FTP.

Javascript

240 plugins jQuery

Cette magnifique liste provient de Sastgroup.com, trouvé via taggle.org et bizetfamily

Validation de formulaires

Téléchargement de fichiers

Formulaires — Menu select, etc.

Formulaire de base, Champs texte, cases à cocher, etc.

Heure, date et sélectionneur de couleur

Plugins d’évaluation (rating)

Plugins de recherche

Editeurs en ligne

Audio, Vidéo, Flash, SVG, etc.

Photos — Images– Galleries

Google Map

Jeux

Tableaux, grilles etc.

Graphiques, présentation, etc.

Bordures, coins, fond (background)

Textes et liens

Afficher de l’aide (tooltips)

Menus, navigation

Accordéons, effets “slide” et “toggle”

Glisser-déposer (Drag and Drop)

XML — XSL — JSON — Feeds

Navigateurs (browsers)

Alert, Prompt, et fenêtres de confirmation (confirm)

CSS

DOM, Ajax et autres plugins jQuery

Ressources complémentaires pour jQuery

jQuery.com – le site officiel pour télécharger et pratiquement tout savoir sur cette biblothèque.
Liste des plugins sur jQuery.com — Environ 500 plugins classés par catégorie, par nom ou par date.
jQuery.info — le site francophone pour découvrir et utiliser jQuery avec de nombreux tutoriaux et plugins.
Visual jQuery — Affiche une la liste des fonctionnalités de jQuery sous forme d’un menu hiérarchique, par exemple : DOM > Attributes > addClass(class) > Description | Returns | Parameters | Example. S’arrête à la version 1.1.2 mais reste intéressant malgré tout.
Les intégristes — inauguration et introduction à jQuery : une page aussi amusante que didactique
Balylon-design — 3 étapes pour comprendre jQuery
jQuery à poil sur Youtube ? C’est possible

Autres frameworks Javascript

Plus de 50 bibliothèques javascript — Le billet date de novembre 2005, alors attendez-vous quand même à quelques pages 404.
Prototype — Le framework Javascript qui vise à faciliter le développement d’application web dynamique. Ajoutez-y une pincée de Moo.fx et/ou de Scriptaculous et c’est parti pour des effets en veux-tu en voilà !
The Yahoo! User Interface Library (YUI) — Cette bibliothèque comprend un jeu d’utilitaires et de contrôles écrits en Javascript pour concevoir des applications hautement interactives en utilisant le DOM, le DHTML et Ajax. Inclut également un framework CSS.
Ext JS — Cette librairie a débuté comme extension de YUI. Je vous invite à consulter les exemples pour vous faire une idée des fonctionnalités. (Merci à Frank Taillandier pour l’info).
Dojo Toolkit — Nous promet de grandes aventures pour 23 Ko seulement !
Mootools — Accompagné de Moo.fx, vos pages deviennent riches.
Mochikit — Avec Mochikit, le Javascript craint moins
qooXdoo — La nouvelle ère du développement web.

Ressources pour webdesigner

750 liens pour webdesigner sur Webdevelopers Field Guide

Micro-bloguez, il en restera forcément quelque chose Merci à burningHat pour m’avoir fourni sur Jaiku cette formidable ressource qui contient à elle seule plus de 750 liens en relation avec le développement web ! dont voici le menu principal :

Encore des mines d’or pour la création de sites web :

WebAppers — Le chasseur de ressources OpenSource pour les développeurs web : des widgets et des scripts pour votre blog ou votre site web, des polices de caractère, des palettes de couleurs, des photographies, des frameworks, etc.
SmashingCoding — Plus de 40 sites d’images libres de droits.
13 effets lightbox en Javascript pour afficher des images, des vidéos, des pages html, etc. Contient également quelques plugins WordPress et Dotclear pour en simplifier l’installation.
Et plus à venir…

Firefox

Les extensions indispensables pour le webdesigner :

Web Developer — Véritable couteau suisse : vous avez la main sur l’ensemble des éléments de votre page web
Firebug — Si vous ne deviez qu’en choisir qu’une, Firebug vous permettra d’éditer et de modifier vos CSS à la volée, de visualiser le DOM et de débuguer vos scripts.
CSSViewer – Affiche les propriétés CSS calculées en affichant un cadre autour de l’élément pris en compte. Très pratique pour voir rapidement la structure d’une page tout en ayant les propriétés sous les yeux. Parfois agaçant à supprimer (F5 ou resélectionner l’utilitaire).
YSlow — Analyse vos pages web pour en connaitre les goulots d’étranglement, d’après les règles de performances de Yahoo!
ColorZilla — Sélectionne les couleurs sur votre écran. Possède en grand nombre d’options souvent méconnues pour retrouver vos couleurs dans l’historique ou afficher des palettes de couleurs très complètes.
FireShot — Faites des captures d’écran tout en annontant, recadrant la partie qui vous intéresse. Le screeshot peut être enregistré sur le disque dur ou copié pour consommation immédiate !
HTML Validator — indispensable pour s’assurer de la validité de votre page localement au regard des recommandations. Possibilité de choisir le mode de validation : Tidy ou OpenSP tout deux développés par le W3C. Tidy a l’avantage d’inclure les trois niveaux d’accessibilité définis par le WAI.

Les meilleures extensions Firefox pour le référencement ? Voici une liste fortement inspirée par celle de webrankinfo :

Tester vos pages web dans différents navigateurs

On n’a pas toujours l’occasion de pouvoir tester ses pages dans toutes les conditions. Voici quelques liens qui vous permettront de tester le design de votre site dans différents navigateurs. C’est rarement la panacée, mais très pratique pour voir si la mise en page résiste globalement à l’épreuve du feu…

Browsershots — Possibilité d’avoir une capture d’écran de votre page web sous Linux, Windows, Mac OS et BSD : environ 50 navigateurs toutes versions et plate-formes confondues vous attendent.Choix de la résolution, de la profondeur de couleur, activation ou non de Javascript ou Java ou encore Flash.Délais d’attente raisonnable selon l’heure et le nombre d’options activées. Traduit en français.
Scapture — Propose d’effectuer très rapidement des captures d’écran de vos pages Web sous Linux avec Firefox, Konqueror, Opera ou Dillo. Vous pouvez aussi vérifier l’affichage généré par les navigateurs en mode texte Lynx et Links.
BrowsrCamp — Permet de tester vos pages sous Safari pour Mac OS X. Possibilité d’avoir la main sur une machine Apple équipé de tous les navigateurs pour Mac. Payant, mais idéal pour tester tous les aspects d’une page web (Javascript, Ajax, Flash, DHTML), à partir de 3$.
NetRenderer – Vous permet de vérifier le rendu de vos pages web sur Internet Explorer 7, 6 ou 5.5, de manière très rapide. Il est possible de superposer les screenshot de IE7 sur IE6 en les mixant ou en en faisant la différence. Ce dernier mode est efficace pour visualiser rapidement les décalages des blocs.

Monitoring de sites web

94 outils pour monitorer son blog trouvés chez Christophe dont voici un échantillon :

SEOmoz Page Strength Tool — Le PageRank ne vous donne plus satisfaction ? Ce site se proposse un outil pour calculer la “puissance” de votre page en prenant plusieurs facteurs en considération : l’âge du domaine, le rank Alexa, le nombre de liens entrants d’après Technorati, le nombre de fois où votre site apparait dans del.icio.us, s’il est présent dans l’annuaire DMOZ ou Wikipedia et bien sûr le PageRank du domaine, mais aussi le nombre de liens pointant vers le domaine d’après yahoo! Site Explorer.
Meta Tag Analyzer — Comme son nom ne l’indique pas assez, se site vous donne la liste des mots-clés trouvés dans les liens et le nombre de fois où ils apparaissent ; les mots-clé présents dans les balises alt de vos images et ceux trouvés sur la page avec le nombre de fois où ils sont présents et leur densité par rapport aux autres.
IminR — Un outil de mesure d’audience web personnalisé, proposé par Stéphane Guerin aussi bien - sinon mieux - que Google Analytics : rapports personnalisés, parcours de votre site par les visiteurs, etc. A tester d’urgence !
HeatMap — Pour savoir quelles zones de votre sites sont les plus cliquées.

Icônes pour sites web

Silk Web Icons de FamFamFam — Souvent imité jamais égalé, le pack à télécharger d’urgence.
IconBase — Des milliers d’icônes pour tous les goût de très bonnes qualités et classées.
nerdbusiness — Pas moins de 5978 icônes de qualité pour agrémenter vos pages web. Petit coucou à Sonia de Webfruits en passant
WebsiteIcons — Environ 1000 icônes classées par thème : navigation, flèches (plus de 500), applications, hardware, CMS, calendrier, rechercher, compte, etc.
PIXELGIRL PRESENTS — Des centaines d’icônes proches du clip-art classées par thème.
Feed Icons — Tout ce qu’il faut savoir sur les icônes pour signaler vos flux RSS : téléchargement des icônes au format .psd de Photoshop ou .ai d’Illustrator ; exemples de style CSS pour les intégrer dans votre site ou votre blog et guide d’utilisation.
Svay — 46 icônes pour le web de bonne facture .
N.DESIGN Studio — Plus de 320 icône en 14×14 avec fond transparent tout spécialement conçues pour vos menus de navigation.
IconsPedia — Nombreuses icônes de qualité classées par thèmes. Un mauvais moment à passer avec la pub un peu envahissante à chaque changement de rubrique.
Dezignus — Des icônes sur pratiquement tous les thèmes. Dezignus est aussi une ressource intéressante pour tous ce qui se rapproche du design au sens large : brushes pour Photoshop, tutorials pour Illustrator, photographies aussi diverses qu’utiles, etc.
WebAppers — Des liens vers des milliers d’icônes très classes pour tous les usages.
Speckyboy — nous propose une liste de 40 ressources d’icônes libres de droits.
Hongkiat — la liste ultime d’icônes pour vos flux RSS.
Smashing Magazine — 35 sets d’icônes vraiment incroyables. Via fran6art.

Tutoriels ou tutoriaux webdesign

Webdesign tutoriaux — Plus de 1000 tutoriels pour Illustrator, Photoshop, PHP, XHTML et CSS, The Gimp, Dreamweaver, Fireworks, Flash.
Babylon Design — Plus de 100 ressources autour de Photoshop et du couple XHTML/CSS
ELITWORK — Nombreux tutoriels XHTML, référencement, Ajax, Webalizer, Microformats. Des informations pertinentes malgré un partis-pris en faveur des espaces de nommage XML au détriment des microformats, par exemple.
TUTMARKS.com — Un digg-like spécialisé dans les tutoriaux ? Vous en rêviez ? Mehdi l’a fait. Très nombreux tutos sur à peu près tout les sujets liés au web. Un flux RSS par statut des propositions (tutoriaux publiés, en attente) est disponible, ainsi que le flux de tous les tutoriels proposés
SmashingCoding — Plus de 60 tutoriels Web Design 2.0.

Inspiration, expiration…

Section inspirée (ça tombe bien) par e-likko :

typeish — Sélection serrée d’images inspirantes, provoquantes ou intoxicantes dans le domaine de la photographie, du design, des polices de caractère, de l’art, de la mode ou du packaging.
Kalle Gustafsson — Très belle photos de mode, beauté, magazine et voyage.
FFFFOUND! — Véritable mine d’or, ce site bookmark des milliers de visuels de toute sorte. Un bol d’air frais à inspirer régulièrement !
Et plus à venir…

WordPress

Plugins pour WordPress

Listes quasi-officielles

A tout seigneur tout honneur : voici une liste de plus de 400 plugins compatibles avec WordPress 2.3 disponible sur le codex.
La liste des plugins chez WordPress Francophone classés par thème.
Autre liste organisée par rubrique sur wp-plugin.

17 plugins AdSense pour WordPress

Cette liste concoctée par Aziz Haddad a été soigneusement annotée sur Mashable France

7 Plugins WordPress pour favoriser les commentaires

Trouvé grâce à legizz, la liste est abondamment commentée sur problogdesign

10 Plugins WordPress pour Twitter

Traduit vite fait d’après la liste de quickonlinetips aimablement fournie par legizz

Twitter Badge — Le code Javascript officiel pour afficher votre statut Twitter
The Twitter Updater — Ce plugin WordPress se charge de mettre à jour votre statut Twitter chaque fois que créez, publiez ou éditez un billet.
TwitThis –Permet à vos visiteurs d’envoyer facilement un tweet à propos de votre blog. Un click sur le bouton TwitThis tinyURLise la page en cours pour leur permettre d’envoyer ce raccourcis à leurs followers.
Twitter Tools — Ce plugin crée une passerelle entre votre compte Twitter et votre blog : affichez vos tweets sur votre blog et créez de nouveaux tweets depuis WordPress.
Twitter WordPress Sidebar Widget — Personnalise le nombre d’updates présent dans votre sidebar ainsi que les liens pointant sur chaque update sur Twitter.
Twitter Feed — Publie vos mises à jour sur votre compte Twitter. Connection à Twitterfeed avec votre identifiant OpenID, fournit l’adresse de votre flux RSS et la fréquence des mises à jours sur Twitter.
Twitt-Twoo — Petit plugin tout simple qui vous permet d’envoyer vos tweets depuis votre blog, le tout avec un brin d’Ajax pour faciliter le travail.
SimpleTwitter — Ce plugin vous permettra d’ajouter facilement vos messages Twitter dans votre template WordPress.
Twitter Sharts — Affichez vos updates où vous voulez dans vos billets ou vos pages WordPress.
RSS to Twitter — Ce script PHP nourrit Twitter avec votre flux RSS.

Vrac de plugins pour WordPress

La liste de PapyGeek est très bien commentée.
F-WPPlugins list: les 14 plugins WordPress les plus utilisés dans la blogosphère francophone, chez fran6art
La bonne liste de calyptratus où j’ai trouvé le plugin pour afficher la liste des plugins actifs sur votre blog.
Encore une liste intéressante chez Marin Gatellier.
La liste de plugin de l’éclaireur pour stimuler WordPress.
Installez PluginMeter de ZeFranck, et participez à la constitution d’une liste de l’ensemble des plugins installés dans le monde en temps réel !
Et pour finir, voici la section plugin du forum WordPress francophone.
59 plugins pour wordpress — liste de plugin avec une brève description en français, via weezonaute.

Thèmes pour WordPress

SmashingMagazine — 100 thèmes gratuits de qualité pour WordPress, ainsi que 83 jolis thèmes que vous avez probablement manqués, et pour finir, 10 thèmes très frais et élégant au service de la lisibilité de votre contenu. Via DyBlog et blomig ;).
Et plus à venir…

No Comments yet...

Publié dans web 2.0

Posted by: mashuphowto | mars 26, 2008

Pipes, JSON and code for your website

<html>
<head>
<title>Cycling from L’Equipe</title>
<body>

Although there’s still quite a bit going on with Yahoo Pipes, interest in the gee-whiz user interface seems to be waning around the blogosphere. While the drag-and-drop interface is cool, I think one of the more useful and interesting features of Yahoo Pipes is its ability to export data as JSON data.

Yahoo makes all of its data — including Pipes feeds data — available as JSON. JSON — Javascript Object Notation — is just data presented as Javascript code. That means you can write Javascript to work directly on the data without any XMLHttpRequest objects to open, get and parse. And because Yahoo provides a nifty callback mechanism, you don’t run into the cross domain security issues that plague Ajax developers — everything runs on the client and Yahoo Pipes enables some truly interesting mashup possibilities that go way beyond the “aggregate 200 feeds and filter on my keywords and pull in some Flickr photos” examples that dominate most blog discussion on Yahoo Pipes.

Code for your site

The most frequently asked question I see on the Pipes discussion boards seems to be “How to I put Pipes feeds on my website?” Here are code examples showing how you can pull data from a Pipes JSON feed and display it automatically on any web page.
Get the JSON feed data. Here’s the code to do that. Replace “PipeID” with the feed you’re interested in. Be sure to retain “_render=json&_callback=pipeCallback”. More about the callback parameter later. Make sure this script is someplace it will be executed when the HTML page loads.
Write some CSS. To keep my example simple, I’ll use <div> to put things where I want to go. Because this is a callback function, you can’t just use document.write because you don’t know where the text will actually end up unless you use CSS to place the text. You can define this however you want, but in my sample code I’ll use a CSS ID called “leftside” and define a left sidebar

Create the callback function.The <HEAD> section of the HTML page is as good a place as any to put this code.

Some explanation. The function pipeCallback is called by the JSON method that you loaded in Step (1) above. Note that the name of the function matches the _callback parameter you used in calling the first script. obj is the JSON object with one or more members. I’ll describe the members in the next step. You can modify this function to change how the link text looks and where the text is placed, but in this example the Title will be a link to the URL of the original article, and the description is also displayed. In real life, you may want to limit the number of items that are actually displayed.

Arrays and fields. obj.count is the number of members that are in the object. obj.value.items is an array of the members. These members may have different elements depending on how the Pipe was constructed — you’ll need to look at the actual JSON data to see what’s specifically available — but typical RSS feed things will be there, including

obj.value.items[x].title — the title of the article.

obj.value.items[x].description — the text or summary of the article.

obj.value.items[x].link — the URL to the original article.

obj.value.items[x].pubDate — the publication date of the article.

No Comments yet...

Publié dans yahoo pipes

Posted by: mashuphowto | mars 26, 2008

DZone Snippets - Random Flickr Photo

<?php

// Displays a single random photo from recent flickr photos with a given tag.
// Original code stolen from many sources including http://www.thebishop.net/geodog/archives/2004/09/29/fun_hacking_with_flickr_making_a_homemade_flickr_tag_badge_with_magpierss.html and http://prwdot.org/archives/002468.html

// USER CONFIGURATION SECTION

    // MagpieRSS Configuration
    // This is an example based on my system;
    // you will need to customize it for your system
    // and your preferences. You can remove it entirely
    // if you have done it elsewhere
    // refer to http://magpierss.sourceforge.net/
    require_once(’/var/www/magpierss-0.61/rss_fetch.inc‘);
    error_reporting(E_ERROR);
    define(MAGPIE_CACHE_ON, true);
    define(MAGPIE_CACHE_DIR, ‘/var/www/magpie_cache‘);
    define(MAGPIE_CACHE_AGE, 300);
    define(MAGPIE_CACHE_FRESH_ONLY, false);
    define(MAGPIE_DETECT_ENCODING, true);
    define(MAGPIE_DEBUG, 0);
    define(MAGPIE_FETCH_TIME_OUT, 15);
    define(MAGPIE_USE_GZIP, true);

    // flickr configuration
    // How many photos you want to display
    $num_photos = 2; // for some reason it doesn‘t like 1
    $tag = ‘Paris‘;
    // URL for the flickr feed you want to use
    $flickr_feed_url =‘http://www.flickr.com/services/feeds/photos_public.gne?tags=’.$tag.‘&format=rss_200‘;
?><?php
    // Fetch the feed
    $flickr = fetch_rss( $flickr_feed_url );
    if ($flickr) {
        $flickr_title = $flickr->channel["title"];
        $flickr_link = $flickr->channel["link"];
?>

<!– Display the title and link to the feed –>

<?php
    // Pick some random photos
        $random_photos = array_rand($flickr->items,$num_photos);
        foreach ( $random_photos as $random_photo ) {
            $description = explode(”\n\n”,$flickr->items[$random_photo]["description"]);
?>

<!– Display the given photo –>

<?php echo ereg_replace(‘<img src=(.*) width=(.*)>’, ‘<img src=\\1 width=”150px“/>’, $description[1]);
die();?> // ok we‘ve got our first photo - lets exit

<?php
}
} else {
?>

<!– Display an error message if things didn‘t work –>
<p>An error occurred in the MagpieRSS parser:</p><p><?php echo magpie_error(); ?></p>

<?php
}
?>

No Comments yet...

Publié dans flickr

Posted by: mashuphowto | mars 24, 2008

How to add flickr images using Json

A tutorial for those wanting to create mushups but are new/unfamiliar with JSON, this short tutorial will explain what it is, where it’s used and most importantly how to use it within a page. It should also act as a nice API, Web 2.0 and mashup primer.

Pre tutorial ramble

For a while now I’ve been wanting to do tutorials to get people started with playing with data on the internet. The term mashup is much better than what I used to call data aggregation & syndication. It involves using the internet to collect a bunch of information and represent it in a new and exiting way.

This tutorial assumes that you have at least a little JavaScript knowledge but not alot. If you’ve worked with XML it will help you to realise why JSON is so darn good.

JSON (JavaScript Object Notation)

To those of you who are already familiar with working with XML and in particular those of you who are familiar with the XHR object will already understand the frustrations or retrieving and parsing XML. Enter JSON

JSON is a lightweight (not heavyweight) data exchange type thing. It’s similar to XML in that you use it to send data to and from servers. The difference (from XML) is that it doesn’t have pointy brackets and it’s really easy to use with JavaScript (not that XML is hard, it’s just easier).

It (JSON) is also now being served up by many of the Internet’s coolest Web APIs/Services which are the cornerstone of the mashup scene.

JSON is made up of objects containing name value pairs in curly braces.

{string:value} eg {”wheels”:”chrome”}

we can see use this right away in JavaScript

var car = {"wheels":"chrome"}; alert(car.wheels); // alerts chrome

Of course the value can be lots of things it can be a string (”") as above or a number (123), another object({}), an array([]), a bool (true|false) or even null. This allows nesting in much the same way as XML does.

However, unlike XML it avoids all those DOM parsing functions such as getElementById(), and getELementByTagName().

JSON with an object nested in an object example
var car = {"wheels":{"front":"chrome", "back":"steel"}}; alert(car.wheels.front); //alerts chrome alert(car.wheels.back); // alerts steel /*equivalent XML <wheels> <front>chrome</front> <back>steel</back> </wheels> */

Before I get onto using JSON in a real life situation let me show you one more thing.

We can assign our JSON data by using a function call, then parse the info within the function like this

function parseTheJSON(car){ alert(car.wheels.front); //alerts chrome } parseTheJSON({”wheels”:{”front”:”chrome”, “back”:”steel”}});

So we created the function and it receives the JSON data and alerts the message chrome. yay. At last now were ready to start making use of this JSON stuff.

Using JSON & flickr

Flickr has a nice little web service at the back of it. Actually it has a few but the one were interested in is the public photos feed which is free to use and you don’t even need to register.

To use it we simply need the service url

http://api.flickr.com/services/feeds/photos_public.gne

By it’s self this url will return an atom feed (XML) of photos recently added to flickr. Try it in your browser and you’ll see.

This is all fair and well, but we want JSON and more that that we want my pics (or yours).

It’s easy enough though the documentation tells us there are a few options so after a quick glance at the documentation we modify our url to include a query string that includes my ID (you’ll find this in the url of any user. it’s the bit with an @ sign in it) and we want to specify that we want JSON. So now it looks like this.

http://api.flickr.com/services/feeds/photos_public.gne?id=7780044@N06&format=json

Go ahead and try that in your browser and you’ll see some wild JSON.

Did you notice anything else. “Yes oh wise HWG” I hear you say “it’s all in a handy function called jsonFlickrFeed()”.

That’s right its all in a nice function so all that left to do is get it in the page and then write the jsonFlickrFeed() function that will parse it.

If your old school you could fake a proxy and do this with an XHR object then eval() it like this
car = eval( "(" + strippedResponseText + ")" );
but that is old school. They stuck that function in there for a purpose. We simply use the script tags src to the donkey work.

<script> function jsonFlickrFeed(fr) { for (var i = 0; i < fr.items.length;i++) { document.write(’<img src=”‘ + fr.items[i].media.m + ‘”>’); } } </script> <script src=”http://api.flickr.com/services/feeds/photos_public.gne?id=7780044@N06&format=json” mce_src=”http://api.flickr.com/services/feeds/photos_public.gne?id=7780044@N06&format=json”> </script>
You should note a few things here.

firstly my code boxes aren’t wide enough for massively long URLs.

Secondly I set up a function, the returned JSON called it, The function then parsed it stepping through each photo and very badly unsemantically output my photos.

Hopefully this enough to get you started with JSON.

Cheers

No Comments yet...

Publié dans flickr

Posted by: mashuphowto | mars 24, 2008

Services Flickr

Documentation API Fils Vos clés API

Format de réponse PHP en série

PHP est doté d’un format de structure de données intégré et en série, utilisant les fonctions serialize() et unserialize().

Pour renvoyer une réponse API au format PHP en série, envoyez un paramètre “format” dans la requête avec la valeur “php_serial“.

La structure de données renvoyée correspond aux structures de réponses JSON - consultez la documentation JSON pour plus de détails.

Pour exécuter une requête très simple en PHP 5, votre code peut être le suivant :

#
# créer l’URL API à appeler
#

$params = array(
‘api_key’ => ‘81e7e11aeac57ac668609d316f6388ce’,
‘method’ => ‘flickr.photos.getInfo’,
‘photo_id’ => ‘251875545′,
‘format’ => ‘php_serial’,
);$encoded_params = array();

foreach ($params as $k => $v){

$encoded_params[] = urlencode($k).’=’.urlencode($v);
}

#
# appeler l’API et décoder la réponse
#

$url = “http://api.flickr.com/services/rest/?”.implode(’&’, $encoded_params);

$rsp = file_get_contents($url);

$rsp_obj = unserialize($rsp);

#
# afficher le titre de la photo (ou une erreur en cas d’échec)
#

if ($rsp_obj['stat'] == ‘ok’){

$photo_title = $rsp_obj['photo']['title']['_content'];

echo “Le titre est $photo_title !”;
}else{

echo “Échec de l’appel !”;

Exemples

Cliquez ici pour consulter une réponse PHP en série de réussite.

Cliquez ici pour consulter une réponse PHP en série d’échec.

Exemple de Flickr REST Call :

http://api.flickr.com/services/rest/?method=flickr.photos.search&user_id=81559972@N00&per_page=5&api_key=25f136aee2f23291097789fb5dc13931

renvoie :

<?xml version=”1.0″ encoding=”utf-8″ ?>

- <rsp stat=”ok“>

- <photos page=”1“ pages=”1274“ perpage=”5“ total=”6367“>

</photos>

</rsp>

Appel à Callback Function ainsi

</SCRIPT>

function myCallbackFunction(data) {

alert(”I received ” + data.photos.photo.length +” photos”);

}

Note the jsoncallback parameter in the src attribute. This results in JavaScript similar to:

myCallbackFunction({”photos”:{”page”:1, “pages”:489, “perpage”:1, “total”:”489?, “photo”:[{”id”:”1352049918?, “owner”:”44153025@N00?, “secret”:”5636009306?, “server”:”1111?, “farm”:2, “title”:”The Liffey Panorama”, “ispublic”:1, “isfriend”:0, “isfamily”:0}]}, “stat”:”ok”});

being called.

Appel Flickr, renvoie PHP :

http://api.flickr.com/services/feeds/photos_public.gne?id=81559972@N00&format=php

donne ceci,

<?php
$feed = array(
  ’title’  => “Photos de phploveme”,
  ’url’  => “http://www.flickr.com/photos/phploveme/“,
  ’description’ => “”,
  ’pub_date’ => “1206181724″,
  ’image’  => “http://farm1.static.flickr.com/184/buddyicons/81559972@N00.jpg?1202655161#81559972@N00“,
  ’items’  => array(
   array(
    ’title’  => “wallpaper-1280×1024-007″,
    ’url’  => “http://www.flickr.com/photos/phploveme/2351134611/“,
    ’description’ => “<p><a href=\”http://www.flickr.com/people/phploveme/\”>phploveme</a> a posté une photo :</p>\n<p><a href=\”http://www.flickr.com/photos/phploveme/2351134611/\” title=\”wallpaper-1280×1024-007\”><img src=\”http://farm3.static.flickr.com/2098/2351134611_f6c1c02db5_m.jpg\” width=\”240\” height=\”192\” alt=\”wallpaper-1280×1024-007\” /></a></p>\n\n”,
    ’date’  => “1206181724″,
    ’guid’  => “/photo/2351134611″,
    ’author_name’ => “phploveme”,
    ’author_url’ => “http://www.flickr.com/people/phploveme/“,
   ),
   array(
    ’title’  => “lambconcept11280″,
    ’url’  => “http://www.flickr.com/photos/phploveme/2351133895/“,
    ’description’ => “<p><a href=\”http://www.flickr.com/people/phploveme/\”>phploveme</a> a posté une photo :</p>\n<p><a href=\”http://www.flickr.com/photos/phploveme/2351133895/\” title=\”lambconcept11280\”><img src=\”http://farm3.static.flickr.com/2134/2351133895_71ee7c6017_m.jpg\” width=\”240\” height=\”192\” alt=\”lambconcept11280\” /></a></p>\n\n”,
    ’date’  => “1206181683″,
    ’guid’  => “/photo/2351133895″,
    ’author_name’ => “phploveme”,
    ’author_url’ => “http://www.flickr.com/people/phploveme/“,
   ),
   array(
    ’title’  => “cube31024″,
    ’url’  => “http://www.flickr.com/photos/phploveme/2351133629/“,
    ’description’ => “<p><a href=\”http://www.flickr.com/people/phploveme/\”>phploveme</a> a posté une photo :</p>\n<p><a href=\”http://www.flickr.com/photos/phploveme/2351133629/\” title=\”cube31024\”><img src=\”http://farm3.static.flickr.com/2174/2351133629_649558f362_m.jpg\” width=\”240\” height=\”180\” alt=\”cube31024\” /></a></p>\n\n”,
    ’date’  => “1206181669″,
    ’guid’  => “/photo/2351133629″,
    ’author_name’ => “phploveme”,
    ’author_url’ => “http://www.flickr.com/people/phploveme/“,
   ),
  ),
);
?>

L’appel suivant, renvoie un flux RSS

http://api.flickr.com/services/feeds/photoset.gne?set=72157603872128854&nsid=14568674@N08&lang=en-us

La page Html suivante, affiche dynamiquement les dernières photos uploadées :

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html lang=”en”>
<head>
<title>JSONP Flickr Feed Test</title>
</head>
<body>
<script type=”text/javascript”>
  function flickrFeed( json ) {
   var photos = document.getElementById( ‘photos’ );
   photos.innerHTML = ”;

   var items = json.items;
   for( var i = 0, n = items.length; i < n; ++i ) {
    var item = items[i];
    var div = document.createElement( ‘div’ );
    div.innerHTML = [
     '<div style="margin:4px; float:left">',
      '<a href="', item.link, '" title="', item.title, '">',
       '<img src="', item.media.m, '" border="0" />',
      '</a>',
     '</div>'
    ].join(”);
    photos.appendChild( div );
   }
  }

  function loadJson( url ) {
   var script = document.createElement( ’script’ );
   script.type = ‘text/javascript’;
   script.src = url;
   document.getElementsByTagName(’head’)[0].appendChild( script );
  }
</script>

<button onclick=”loadJson( ‘http://www.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=flickrFeed’ )”>
Load Photos
</button>

http://mg.to/test/flickr/jsonp/dynamic.html

No Comments yet...

Publié dans flickr

Posted by: mashuphowto | mars 24, 2008

Json for jQuery

Michael Geary | Wed, 2006-01-25 00:10

La boite à outils du codeur de site web

Editeurs de page web

Windows (et/ou multi-OS)

Eclipse

Dreamweaver

Notepad++

Nvu

KompoZer

Intype

HTML-Kit

UltraEdit-32

Jedit

Quanta Plus

CSSED

E-Texte Editor

PSPad

Linux

Scribes

gedit

SciTE

Mac OS X 10.4+

TextMate

BBEdit

TextWrangler

Smultron

cssedit

Coda

Javascript

240 plugins jQuery

Validation de formulaires

Téléchargement de fichiers

Formulaires — Menu select, etc.

Formulaire de base, Champs texte, cases à cocher, etc.

Heure, date et sélectionneur de couleur

Plugins d’évaluation (rating)

Plugins de recherche

Editeurs en ligne

Audio, Vidéo, Flash, SVG, etc.

Photos — Images– Galleries

Google Map

Jeux

Tableaux, grilles etc.

Graphiques, présentation, etc.

Bordures, coins, fond (background)

Textes et liens

Afficher de l’aide (tooltips)

Menus, navigation

Accordéons, effets “slide” et “toggle”

Glisser-déposer (Drag and Drop)

XML — XSL — JSON — Feeds

Navigateurs (browsers)

Alert, Prompt, et fenêtres de confirmation (confirm)

CSS

DOM, Ajax et autres plugins jQuery

Ressources complémentaires pour jQuery

Autres frameworks Javascript

Ressources pour webdesigner

750 liens pour webdesigner sur Webdevelopers Field Guide

Encore des mines d’or pour la création de sites web :

Firefox

Tester vos pages web dans différents navigateurs

Monitoring de sites web

Icônes pour sites web

Tutoriels ou tutoriaux webdesign

Inspiration, expiration…

WordPress

Plugins pour WordPress

Listes quasi-officielles

17 plugins AdSense pour WordPress

7 Plugins WordPress pour favoriser les commentaires

10 Plugins WordPress pour Twitter

Vrac de plugins pour WordPress

Thèmes pour WordPress

Code for your site

Pre tutorial ramble

JSON (JavaScript Object Notation)

Using JSON & flickr

Format de réponse PHP en série

# # créer l’URL API à appeler #

$params = array( ‘api_key’ => ‘81e7e11aeac57ac668609d316f6388ce’, ‘method’ => ‘flickr.photos.getInfo’, ‘photo_id’ => ‘251875545′, ‘format’ => ‘php_serial’, );$encoded_params = array();

#
# créer l’URL API à appeler
#

$params = array(
‘api_key’ => ‘81e7e11aeac57ac668609d316f6388ce’,
‘method’ => ‘flickr.photos.getInfo’,
‘photo_id’ => ‘251875545′,
‘format’ => ‘php_serial’,
);$encoded_params = array();

$encoded_params[] = urlencode($k).’=’.urlencode($v);
}

#
# appeler l’API et décoder la réponse
#

#
# afficher le titre de la photo (ou une erreur en cas d’échec)
#

echo “Le titre est $photo_title !”;
}else{