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://www.cafepedagogique.net/"><img src=" http://www.cafepedagogique.net/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
L'adresse du fil Rss est accessible par le bouton "Rss" placé au bas des pages de l'Expresso.
* 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%2Fwww.cafepedagogique.net%2Flexpresso%2F_layouts%2FCafe%2Flistfeed.aspx%3FList%3De5495305%252Df867%252D4780%252D8ffe%252Da9856971b077&chan=y&targ=y&utf=y&html=a" type="text/javascript"></script>
<noscript>
<a href="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fwww.cafepedagogique.net%2Flexpresso%2F_layouts%2FCafe%2Flistfeed.aspx%3FList%3De5495305%252Df867%252D4780%252D8ffe%252Da9856971b077&chan=y&targ=y&utf=y&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://www.cafepedagogique.net/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 :
* Le déroulant du menu supérieur après abonnement :
Pour toute question ou remarque : utilisez le lien "Nous contacter" ci-dessous.