Afficher les nouveautés du Café pédagogique

Webmestres, apportez l’information pédagogique quotidienne à vos visiteurs en insérant les titres de L’Expresso sur votre page Web !

Grâce à vous et au Café, vos visiteurs seront les premiers informés dans leur établissement.

N.B. L’Expresso est le flash quotidien d’information pédagogique du « Café pédagogique ».

1. L’image de l’Expresso

Pour afficher sur votre page une image au format Png récapitulant les titres de 270 pixels de large, insérez le code suivant :

<a href= »http://cafepedagogique.studio-thil.com/ »><img src= » http://cafepedagogique.studio-thil.com/lexpresso/Documents/expresso.png » border= »0″></a>

Chaque fois qu’un nouvel expresso est publié, dans les heures qui suivent, l’image est mise à jour, toujours à la même adresse.

2. L’Expresso par fil Rss

La page fournissant le fil Rss est accessible par le bouton « Rss » placé au bas des Expressos.

* Intégration dans une page web par javascript :

A. Dans ce premier exemple, le fil est affiché « tel quel » sur un autre site, sans prise en compte du Html fourni par notre canal :
http://www.retiarius.org/testrss1.php

Ce résultat s’obtient en insérant, entre les balises <body> et </body> du document, le code suivant :

<script language= »JavaScript » src= »http://feed2js.org//feed2js.php?src=http%3A%2F%2Fcafepedagogique.studio-thil.com%2Flexpresso%2F_layouts%2FCafe%2Flistfeed.aspx%3FList%3De5495305%252Df867%252D4780%252D8ffe%252Da9856971b077&amp;chan=y&amp;targ=y&amp;utf=y&amp;html=a » type= »text/javascript »></script>

<noscript>
<a href= »http://feed2js.org//feed2js.php?src=http%3A%2F%2Fcafepedagogique.studio-thil.com%2Flexpresso%2F_layouts%2FCafe%2Flistfeed.aspx%3FList%3De5495305%252Df867%252D4780%252D8ffe%252Da9856971b077&amp;chan=y&amp;targ=y&amp;utf=y&amp;html=y »>View RSS feed</a>
</noscript>

B. Les webmestres plus expérimentés pourront présenter cela comme dans l’exemple suivant, en ne prenant que le dernier Expresso en détail :
http://www.retiarius.org/testrss.php

Le code à insérer dans le corps de page est alors :

<script language= »JavaScript » src= »http://www.cafepedagogique.org/feed2js/feed2jsStyle.php?src=http://cafepedagogique.studio-thil.com/lexpresso/_layouts/Cafe/listfeed.aspx?List=e5495305%2Df867%2D4780%2D8ffe%2Da9856971b077″ type= »text/javascript »></script>

Mais il faut aussi inclure entre les balises <head> et </head> une déclaration de style, soit en l’occurrence :

<style>
.rss_box{ border: 1px solid #875439;background-color: #e9dbca;margin:0px;width:30%;color: #808080;overflow: hidden;padding: 0px;}
.rss_title a { background-color:#ffefce;font-family:arial;font-size:medium;font-style:oblique;font-weight:bolder;color:#000000;width :80%;text-align:justify;text-decoration:blink;margin-left:0px;padding:0px 0px 0px 10px;vertical-align: 50%;margin: 0px;}
.rss_title { background-color:#ffefce; font-family:arial; font-size:70%; font-weight:bolder; color:#dc1803; text-align:left; margin-left:0px; width:100%; text-decoration :none; padding:5px;}
a:link { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:105%; font-weight: bold; color:#e55f00; background-color:transparent; margin-top :0px; margin-left :0px; text-decoration :none; text-align: justify; text-justify: distribute;}
a:visited { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:105%; font-weight: bold; color:#e55f00; background-color:transparent; margin-top :0px; margin-left :0px; text-decoration :none; text-align: justify; text-justify: distribute;}
a:hover { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:105%; font-weight: bold; color:#dc1803;/*rouge-orangé*/ background-color:#ffefce; margin-top :0px; margin-left :0px; text-decoration :none; text-align: justify; text-justify: distribute;}
a:active { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:105%; font-weight: bold; color:#884da7;/*violet*/ background-color:transparent; margin-top :0px; margin-left :0px; text-decoration :none; text-align: justify; text-justify: distribute;}
.rss_items { font-size:72%; margin-left: 25px; margin-right:10px; margin-top :25px; margin-bottom :25px; text-decoration :none; text-align: justify; text-justify: distribute; font-family: Verdana, Arial, Helvetica, sans-serif; height: auto; list-style-position: inside; list-style-type: disc; left: 5px; line-height: 1.15em; text-indent: 0pt; padding: 0px;}
</style>

On pourra modifier ce style, et spécialement la taille de police, mais avec prudence pour le reste, car cette déclaration est compatible avec les principaux navigateurs.

* Intégration dans une page web par langage dynamique :

La plupart des systèmes de gestion de contenu (ou CMS) proposent des modules permettant au webmestre d’intégrer des canaux Rss sans toucher au code source, et donc sans avoir à maîtriser la programmation.

Lecteurs du Café : affichez les nouveautés du Café dans votre navigateur au démarrage sans changer votre page d’accueil !

Firefox et Internet Explorer 7 permettent de récupérer le contenu d’un canal Rss sans avoir à visiter préalablement le site concerné.

Voici des captures d’écran illustrant le résultat sous Firefox :

* La page du flux de l’Expresso :