Dynamiser son site web grâce aux flux RSS

Web et réseaux sociaux pour valoriser entreprises et services7ème Symposium HEG

Jeudi 18 novembre 2010

Dynamiser votre site webgrâce aux

flux RSS

Atelier pratiqueanimé par Raphaël Grolimund

.

Vous avez le droit de réutiliser le contenu de ce document pour autant que cela nesoit pas à des fins commerciales et à condition que les documents dérivés soientégalement mis sous licence CC-BY-NC-SA. Dans tous les cas, mon nom doit êtrementionné. Pour de plus amples informations sur la licence, référez-vous au lien indiquédans la mention légale ci-dessous.

Raphaël Grolimund

sa/3.0/ or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco,California, 94105, USA.

Web et réseaux sociaux pour valoriser entreprises et services7ème Symposium HEG

Jeudi 18 novembre 2010

Dynamiser votre site webgrâce aux

flux RSS

Atelier pratiqueanimé par Raphaël Grolimund

.

Vous avez le droit de réutiliser le contenu de ce document pour autant que cela nesoit pas à des fins commerciales et à condition que les documents dérivés soientégalement mis sous licence CC-BY-SA. Dans tous les cas, mon nom doit être mentionné.Pour de plus amples informations sur la licence, référez-vous au lien indiqué dans lamention légale ci-dessous.

Raphaël Grolimund

sa/3.0/ or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco,California, 94105, USA.

SommaireSommaire

Introduction.........................................................................................................................................................................2

Travaux pratiques...............................................................................................................................................................3

1. S'inscrire........................................................................................................................................................................7

2. Créer un flux RSS........................................................................................................................................................8

3. Ajouter du contenu................................................................................................................................................10

4. Publier son flux.........................................................................................................................................................13

5. Signaler son flux.......................................................................................................................................................14

6. Gérer son flux...........................................................................................................................................................16

7. Mettre un flux sur son site....................................................................................................................................20

Annexe A : combien ça coûte ?...................................................................................................................................23

Annexe B : le code pas à pas........................................................................................................................................25

7ème Symposium HEG - atelier flux RSS - RG < 1 >

IntroductionIntroductionCréer, mettre à jour et publier son premier flux est une opération pour laquelle il faut compter uneheure et demi environ pour un groupe d'une douzaine de personnes débutantes. Aujourd'hui, nous avons 45 minutes.C'est ainsi qu'aujourd'hui, au lieu d'apprendre à créer un flux RSS à la main, en codant en XML, vousallez utiliser Rapidfeeds, un outil en ligne et gratuit. Une déclinaison payante existe. Elle offre plus defonctionnalités. Dans ce document, seules les fonctionnalités gratuites sont abordées.

Ce tutoriel couvre aspects différents de la publication d'un flux RSS.Les points 2 à 4 couvre la création d'un flux RSS à l'aide de Rapidfeeds.Les points 5 à 7 traite de sa mise à disposition sur un site web (toujours à l'aide Rapidfeeds).

L'annexe A présente les différents packages (fonctionnalités et coût) que propose Rapidfeeds pourses services FeedManager et MySite.L'annexe B fournit le code généré à chaque étape de la création du flux (points 2 et 3). Vous pourrezainsi refaire à la main ce que vous avez fait à l'aide de Rapidfeeds. Ou simplement de savoir ce queRapidfeeds a codé pour vous.

Ce document est prévu pour être utilisé ainsi. Le tutoriel débute à la page 7. Il vous présente la marche à suivre générale et les optionssupplémentaires qui sont à votre disposition.Les pages 3-6 vous fournissent les informations à inscrire dans les différents champs pour le TPd'aujourd'hui. Vous êtes évidemment libre d'adapter ces informations, si vous le souhaitez.

< 2 > 7ème Symposium HEG - atelier flux RSS - RG

Travaux pratiquesTravaux pratiquesVoici les instructions pour la création, la mise à jour et la publication sur votre site de votre premierflux RSS. Suivez ce document pas à pas en y incluant les informations fournies ci-dessous!

Utilisez Mozilla Firefox pour ces travaux pratiques! Le site web factice dont vous allez vous servirpour ces travaux pratiques ne supporte pas Internet Explorer.

S'inscrireL'inscription est déjà faite. Référez-vous aux informations données par oral pour vous connecter.

Créer un fluxTitre Les dernières nouvelles de Mon entreprise (ajoutez votre nom)Lien http://www.monentreprise.chDescription Nouveaux produits, nouveaux services, événements, etc. Tout ce dont vous avez

besoin se trouve ici.Si vous le souhaitez, ajoutez d'autres informations.

Ajouter du contenu1er articleTitre 7ème Symposium HEGLien http://www.hesge.ch/heg/la-heg/symposiumDescription Le 18 novembre 2010, sur le campus de Battelle (Genève), se tient le 7e

Symposium HEG sur le web et les réseaux sociaux pour valoriser entreprises etservices. Rencontrez-nous là-bas!

Si vous le souhaitez, ajoutez d'autres informations.

2e articleTitre Nouveau partenariatLien http://www.monentreprise.ch/partenariatDescription Le nouveau partenariat que nous avons conclu avec iTechServices va nous

permettre d'étendre notre offre dans le domaine du web mobile.Si vous le souhaitez, ajoutez d'autres informations.

3e articleTitre Mon entreprise s'agranditLien http://www.monentreprise.ch/succursalesDescription Une nouvelle succursale a ouvert la semaine dernière, à Berne. Elle comptera à

court terme 40 collaborateurs.Si vous le souhaitez, ajoutez d'autres informations.

Publier son fluxUne fois que Rapidfeeds vous indique l'url de votre flux, il est publié. Vous pouvez vous y abonnerpour voir ce que vos visiteurs verront.


Pour cela, utilisez votre lecteur de flux habituel ou le compte Google Reader suivant:

Google Reader http://reader.google.come-mail formations.bib.epfl (pas besoin de mettre l'adresse en entier)mot de passe 18.11.2010

Copiez l'adresse de votre flux, cliquez sur le bouton Ajouter un abonnement et coller-la!Validez avec le bouton Ajouter et vous êtes abonné à votre flux.

Signaler son fluxOuvrez le dossier intitulé Web qui se trouve sur le bureau. Ouvrez le fichier index.php avec le Bloc-notes (clic-droit – Ouvrir avec).Copiez le code auto-discovery que Rapidfeeds vous fournit et coller-le dans index.php, juste après labalise <head> (attention! pas </head>). Enregistrez la modification et fermez le fichier!

Pour télécharger index.php sur le serveur (de sorte que la modification que vous venez de faire soitaccessible à tout le monde), allez dans FileZilla. Si vous n'avez rien dans la fenêtre de droite, cliquezsur le bouton Connexion rapide pour vous reconnecter.

> Allez dans Symposium et ouvrez le dossier qui porte votre nom.


Dans la fenêtre de gauche, cliquez sur index.php et déplacez-le dans la fenêtre de droite. Sinécessaire, acceptez lorsqu'on vous demande si vous voulez remplacer le fichier.

Rendez-vous ensuite à l'adresse suivante pour voir le résultat:

http://www.rss-at-home.ch/Symposium/VOTRE_NOM/index.phpVous devriez obtenir un résultat comme celui-là:

Mettre un flux sur son sitePassez par le service MySite de Rapidfeeds. Ajoutez votre flux et configurez-le ainsi en passant parPre-Designed Templates.

Cliquez ensuite sur Get code (en haut à droite) et choisissez PHP comme langage de programmation.Copiez le code!Ouvrez à nouveau index.php (dans le dossier Web) avec le Bloc-notes (clic-droit – Ouvrir avec).Collez le code juste en-dessous de la ligne:

Enregistrez la modification et fermez le fichier!

Pour téléchargez index.php sur le serveur, retournez dans FileZilla.Dans la fenêtre de droite, ouvrez le dossier qui porte votre nom1 (si ce n'est déjà fait).Dans la fenêtre de gauche, cliquez sur index.php et déplacez-le dans la fenêtre de droite. Sinécessaire, acceptez lorsqu'on vous demande si vous voulez remplacer le fichier.

1 Voir capture d'écran juste au-dessus (Mettre un flux sur son site).


1.1. S'inscrireS'inscrireL'inscription à ce service est gratuite et rapide.

> Donnez vos nom, prénom et e-mail, choisissez un mot de passe et copiez lecode Captcha.

> Pour vous connecter: e-mail et mot de passe.

Si vous avez déjà créé un flux RSS et que vous souhaitez le récupérer, importez-le!

> menu FeedManager – onglet Import Feed et entrez l'adresse du flux


2.2. Créer un flux RSSCréer un flux RSSSi vous n'avez pas encore de flux RSS, vous allez commencer par en créer un.

> menu FeedManager – onglet FeedManager Home

Cliquez sur Add Feed Now!

> Donnez un titre à votre flux, indiquez le lien vers votre site web et donnez unebrève description des informations que vous allez mettre dans votre flux.

Vous avez la possibilité de définir une image pour représenter votre flux (le logo de votre entreprise,par exemple), en indiquant le lien où on peut la trouver.


> menu FeedManager – Configure – Advanced – onglet Add Image

Vous pouvez aussi préciser la langue de votre flux, qui en détient les droits (copyright), qui estresponsable du contenu (managing editor) et qui est responsable de la maintenance technique(webmaster).

> menu FeedManager – Configure – Advanced – onglet Optionals

Lorsque c'est fait, cliquez sur le bouton Create New Feed!Votre flux est créé mais il est vide. Vous allez maintenant y ajouter des informations.


3.3. Ajouter du contenuAjouter du contenuLa mise à jour d'un flux RSS se fait par l'ajout d'un nouvel article (item en anglais).

> Donnez un titre à votre premier article, donnez un lien où les informationscomplètes sont présentes et donnez une brève description.

Vous avez aussi la possibilité de définir l'heure de publication de l'article.

> menu FeedManager – Add Item(s) – Advanced – onglet Schedule Item


Vous pouvez ajouter un fichier multimédia (lien vers un fichier audio, images et son, vidéo ou PDF).

> menu FeedManager – Add Item(s) – Advanced – onglet Add Podcast

Podcast

Un flux RSS est un podcast si et seulement s'il contient une balise enclosure avec un lien vers unfichier multimédia.Communément, les fichiers audio sont au format MP3 (.mp3) ou Apple Lossless Audio (.m4a) et lesfichiers vidéos au format MPEG-4 (.mp4), iTunes Video (.m4v) ou Apple Quicktime (.mov).Les fichiers iTunes Video sont les seuls à pouvoir prendre en charge les podcasts images et son (detype présentation). Ce type de podcast s'appelle podcast enrichi.


Vous pouvez ajouter le nom de l'auteur 2, la catégorie de l'article et le lien pour les commentaires3.

> menu FeedManager – Add Item(s) – Advanced – onglet Optionals

Lorsque c'est fait, cliquez sur le bouton Add Item. Vous pouvez ajouter un autre article.

2 Pratique lorsqu'il y a plusieurs personnes qui alimentent le flux.3 Fonctionnalité très utilisées par les blogs.


4.4. Publier son fluxPublier son fluxVotre flux est automatiquement publié à l'adresse qui vous est indiquée.

Rendez-vous à l'adresse indiquée pour vous en rendre compte.Ci-dessous, le résultat dans Firefox 3.6.

À partir de là, vous n'avez plus qu'à mettre à jour votre flux lorsque vous avez des informations àdiffuser.


5.5. Signaler son fluxSignaler son fluxPublier un flux, c'est bien. Mais si les gens le trouve, c'est encore mieux. Voici quelques trucs quirendront votre flux plus visible pour les visiteurs de votre site.

Le plus important est de faire apparaître l'icône RSS dans la barre d'adresse du navigateur4. Cemécanisme s'appelle auto-discovery.Rapidfeeds vous fournit le code à inclure dans le code source de toutes vos pages web. Un simplecopier-coller suffit.

> menu FeedManager – Publish Feed – rubrique Auto-Discover Code

Prévoyez aussi de mettre une icône RSS dans le corps des pages qui contiennent un flux RSS. Làencore, le code vous est fournit par Rapidfeeds.

> menu FeedManager – Publish Feed – rubrique RSS Standard Icons

4 Seul Internet Explorer n'ajoute pas l'icône RSS dans la barre d'adresse (mais juste en-dessous).


Les rubriques Add to Web Aggregators et Add to MySite permettent de proposer aux internautes lapossibilité de s'abonner au flux en un seul clic.La rubrique Feed Validator permet d'afficher un logo qui prouve que votre flux RSS est valide.Ces fonctionnalités étant secondaires, elles ne sont pas détaillées ici.


6.6. Gérer son fluxGérer son fluxLa gestion de votre flux se fait depuis l'accueil du FeedManager.

> menu FeedManager – onglet FeedManager Home

Vous pouvez gérer la configuration de votre flux (Configure), le supprimer (Delete) et le publier(Publish).Les fonctions Ping et Track sont réservées aux comptes payants (voir Annexe?).Voici les éléments que vous pouvez paramétrer.

Vous pouvez mettre à jour les données de votre flux (titre, lien vers votre site web et description).

> menu FeedManager – Configure – rubrique Update Channel

Vous avez la possibilité de paramétrer la façon dont le contenu est structuré.


> menu FeedManager – Configure – rubrique Publish Settings

Vous pouvez aussi modifier les paramètres de publication (limiter le nombre d'article quiapparaissent le flux).

> menu FeedManager – Configure – rubrique Item Settings

Les rubriques Branded Feed URL et Auto Tweet sont réservées aux membres payants. Elles ne sontpas détaillées ici.

Si vous diffusez des podcasts, vous pouvez configurer votre flux pour que l'iTunes Store lereconnaisse et puisse l'intégrer à son répertoire de podcasts.


> menu FeedManager – Configure – rubrique iTunes

Si vous souhaitez mettre le contenu de votre flux sous licence Creative Commons, vous pouvez lefaire très facilement.

> menu FeedManager – Configure – rubrique Creative Commons

Finalement, vous pouvez aussi protéger l'accès à votre flux avec un mot de passe.


> menu FeedManager – Configure – rubrique Password Protect


7.7. Mettre un flux sur son siteMettre un flux sur son siteEncore une fois, créer un flux RSS, ça ne sert à rien s'il n'est pas diffuser. Pour le diffuser, il y a plusieursmanières de le faire. Parmi elles, il y a les widgets. Un widget est une mini-application web qui affichele contenu d'un site web sur un autre. Rapidfeeds offre la possibilité de créer des widgets.

> menu MySite – onglet MySite Home

Cliquez sur Add Feed to MySite et copiez l'adresse de votre flux.

> menu MySite – onglet Add New Feed

Cliquez sur le bouton Add to MySite.

Cliquez sur le bouton Continue >>.


Choisissez le style (Flavor) et la couleur (Color) de votre widget. L'aperçu (Preview) se met à jourdirectement.

Pour personnaliser davantage votre widget, cliquez sur le bouton << Advanced Settings. Vouspouvez définir combien d'articles le widget doit afficher et dans quel ordre.

> menu MySite – Configure – rubrique Settings

Vous pouvez aller plus loin et choisir la largeur du widget (en pixels), d'afficher la description, leformat de la date de publication, si les fichiers multimédia sont affichés, choisir d'accepter le HTML,de quelle façon s'ouvrent les liens contenus dans le flux et d'ajouter des boutons pour s'inscrire àvotre flux directement depuis le widget.

> menu MySite – Configure – rubrique Pre-Designed Templates


La rubrique Custom Template est réservée aux membres payants.

Finalement, il ne reste plus qu'à obtenir le code à inclure dans votre site web.

> bouton Save Settings & Get Code – Select Language: PHPOU> Get code (en haut à droite) – Select Language: PHP


Annexe A : combien ça coûte ?Annexe A : combien ça coûte ?Complétement gratuit pendant les 5 ans de la phase de développement, Rapidfeeds est passé à unmodèle Freemium depuis le 1er juillet 2010. Les 2 services, FeedManager et MySite, sont séparés.

Le service FeedManager se décline en 4 modèles, décrits ci-dessous.Un compte gratuit inclut le droit à un flux RSS et les fonctionnalités vue dans ce document. Lescomptes Basic, Pro et Entreprise ajoutent chacun des flux et des fonctionnalités supplémentaires àdes tarifs progressifs. Les comptes payants sont basés sur un modèle d'abonnement.

> menu FeedManager – onglet Billing

L'accès aux fonctionnalités avancées de MySite sont soumises à un abonnement différent de celuisouscrit pour le service FeedManager. Vous pouvez choisir l'un, l'autre ou les deux, selon vos besoins.


> menu MySite – onglet Billing


Annexe B : le code pas à pasAnnexe B : le code pas à pasSi vous êtes partis de zéro, voici le code qui est généré, étape par étape, sans que vous ayez à le fairevous-mêmes, de la création du flux à l'ajout de contenu.

ConventionConvention<balise_ouvrante attribut="valeur"></balise_fermante>

Création du flux (titre, lien et description)

<?xml version="1.0" encoding="iso‐8859‐1"?><?xml‐stylesheet type="text/xsl" href="http://feeds.rapidfeeds.com/style/style3.xml"?><?xml‐stylesheet type="text/css" href="http://feeds.rapidfeeds.com/style/style3.css"?><rss version="2.0" xmlns:blogChannel="http://backend.userland.com/blogChannelModule"> <channel> <title>Les dernières nouvelles de Mon entreprise</title> <link>http://feeds.rapidfeeds.com/?fid4ct=40340</link> <atom:link xmlns:atom="http://www.w3.org/2005/Atom" rel="via" href="feeds.rapidfeeds.com/40340/"

type="application/rss+xml"></atom:link> <atom:link xmlns:atom="http://www.w3.org/2005/Atom" rel="self" href="http://feeds.rapidfeeds.com/40340/"

type="application/rss+xml" /> <description> <![CDATA[Nouveaux produits, nouveaux services, événements, etc. Tout ce dont vous avez besoin se trouve ici.]]> </description> <pubDate>Wed, 03 Nov 2010 05:48:37 EDT</pubDate> <docs>http://backend.userland.com/rss</docs> <generator>Rapidfeeds v0.1 ‐‐ http://www.rapidfeeds.com</generator> </channel></rss>


Création du flux (image du flux)



type="application/rss+xml" /> <description> <![CDATA[Nouveaux produits, nouveaux services, événements, etc. Tout ce dont vous avez besoin se trouve ici.]]> </description> <pubDate>Wed, 03 Nov 2010 05:48:37 EDT</pubDate> <docs>http://backend.userland.com/rss</docs> <generator>Rapidfeeds v0.1 ‐‐ http://www.rapidfeeds.com</generator> <image> <url>http://www.monentreprise.ch/images/logo.png</url> <title>Les dernières nouvelles de Mon entreprise</title> <link>http://feeds.rapidfeeds.com/?fid4ct=40340</link> </image> </channel></rss>


Création du flux (langue, copyright, responsabilités éditoriale et technique)



type="application/rss+xml" /> <description> <![CDATA[Nouveaux produits, nouveaux services, événements, etc. Tout ce dont vous avez besoin se trouve ici.]]> </description> <pubDate>Wed, 03 Nov 2010 05:48:37 EDT</pubDate> <docs>http://backend.userland.com/rss</docs> <generator>Rapidfeeds v0.1 ‐‐ http://www.rapidfeeds.com</generator> <copyright>Mon entreprise SA</copyright> <managingEditor>[email protected]</managingEditor> <language>fr‐ch</language> <webMaster>[email protected]</webMaster> <image> <url>http://www.monentreprise.ch/images/logo.png</url> <title>Les dernières nouvelles de Mon entreprise</title> <link>http://feeds.rapidfeeds.com/?fid4ct=40340</link> </image> </channel></rss>


Ajout de contenu (titre, lien et description)



type="application/rss+xml" /> <description> <![CDATA[Nouveaux produits, nouveaux services, événements, etc. Tout ce dont vous avez besoin se trouve ici.]]> </description> <pubDate>Wed, 03 Nov 2010 05:48:37 EDT</pubDate> <docs>http://backend.userland.com/rss</docs> <generator>Rapidfeeds v0.1 ‐‐ http://www.rapidfeeds.com</generator> <copyright>Mon entreprise SA</copyright> <managingEditor>[email protected]</managingEditor> <language>fr‐ch</language> <webMaster>[email protected]</webMaster> <image> <url>http://www.monentreprise.ch/images/logo.png</url> <title>Les dernières nouvelles de Mon entreprise</title> <link>http://feeds.rapidfeeds.com/?fid4ct=40340</link> </image> <item> <title>7ème Symposium HEG</title> <description>Le 18 novembre 2010, sur le campus de Battelle (Genève), se tient le 7e Symposium HEG sur le web et les réseaux sociaux pour

valoriser entreprises et services. Rencontrez‐nous là‐bas! </description> <link>http://feeds.rapidfeeds.com/?iid4ct=5641803</link> <guid isPermaLink="true">http://feeds.rapidfeeds.com/?iid4ct=5641803</guid> <pubDate>Wed, 03 Nov 2010 06:28:00 EDT</pubDate> </item> </channel></rss>


Ajout de contenu (réglage de la date de publication)




valoriser entreprises et services. Rencontrez‐nous là‐bas! </description> <link>http://feeds.rapidfeeds.com/?iid4ct=5641803</link> <guid isPermaLink="true">http://feeds.rapidfeeds.com/?iid4ct=5641803</guid> <pubDate>Wed, 03 Nov 2010 06:28:00 EDT</pubDate> </item> </channel></rss>


Ajout de contenu (podcast)




valoriser entreprises et services. Rencontrez‐nous là‐bas! </description> <link>http://feeds.rapidfeeds.com/?iid4ct=5641803</link> <guid isPermaLink="true">http://feeds.rapidfeeds.com/?iid4ct=5641803</guid> <enclosure url="http://www.hesge.ch/heg/doc/programme.pdf" length="4040" type="text/html"/> <pubDate>Wed, 03 Nov 2010 06:28:00 EDT</pubDate> </item> </channel></rss>


Ajout de contenu (auteur de l'article, ...)




valoriser entreprises et services. Rencontrez‐nous là‐bas! </description> <link>http://feeds.rapidfeeds.com/?iid4ct=5641803</link> <author>[email protected]</author> <guid isPermaLink="true">http://feeds.rapidfeeds.com/?iid4ct=5641803</guid> <enclosure url="http://www.hesge.ch/heg/doc/programme.pdf" length="4040" type="text/html"/> <pubDate>Wed, 03 Nov 2010 06:28:00 EDT</pubDate> </item> </channel></rss>


Dynamiser son site web grâce aux flux RSS

Technology

Transcript of Dynamiser son site web grâce aux flux RSS