Un billet rapide pour avoir un petit retour sur ma nouvelle feuille de style. Je l'ai réalisé ce soir avec l'aide de la CSS de McChicken et pour le template, celui d'un blog wordpress : Black Minimalist. Il est fort probable que ma css ne soit pas compatible avec tout les navigateurs, il est trop tard pour que je teste, n'hésitez pas à me lister ce qui ne va pas chez vous, je corrigerais demain !

Je change totalement de sujet pour vous mettre à disposition un moyen de récupérer des flux RSS pour les blogs NoFrag plus complet. Actuellement, on a que le titre et la date de parution. J'ai donc voulu rajouter le contenu du billet et accessoirement le lien vers les commentaires. Je trouve ça beaucoup plus pratique.

Pour pouvoir lire un flux des blogs NF, entrez cette adresse dans votre agregateur préféré :

http://jeremyselier.com/apis/nofrag-rss/getRss.php?user=$USER$
ou $USER$ représente le pseudo de l'auteur du blog.

Bien entendu, si les administrateurs de NoFrag ne souhaitent pas que l'on puisse récuperer le contenu des billets via RSS, je retirerai ce passage de mon billet et j'enleverai les fichiers de mon serveur.

Précédemment sur ce blog:

La fonction "Vu/Non vu" n'est pas encore mise en place car je ne sais pas encore comment l'implémenter (des idées ?). La prochaine fois, j'expliquerais comment je récupère la liste des épisodes qui m'intéresse et le fonctionnement de mon widget en UWA. Et vous pourrez normalement commencer à beta-tester le widget pour m'aider à le debugger. Si vous avez des choses à me dire afin d'améliorer ce widget, n'hésitez pas !



Dans le billet précédent vous avez compris comment je récupérais la liste des séries. Je ne vais pas réexpliquer comment je récupère la liste des épisodes pour chaque série car le fonctionnement est identique. Cependant pour représenter la liste des épisodes d'une série, je formate mon document sous un format XML qui à cet aspect :

<?xml version='1.0' standalone='yes'?>
<episodes>
<show>
<title>Nom de la série</title>
<idshow>id epguides.com pour savoir l'url</idshow>
</show>

<episode number="numéro de l'épisode">
<season>numéro de la saison</season>
<date>date de diffusion de l'épisode</date>
<title>titre de l'épisode</title>
<url>url fiche tv.com</url>
</episode>

etc. etc. pour chaque épisode

</episodes>

Le fichier XML tient compte de la période demandée, c'est à dire que si on souhaite voir les épisodes des 7 prochains jours seulement, le fichier XML retournera seulement les épisodes à venir dans les 7 prochains jours.

Malheureusement avec un nombre conséquent de série suivie. Les performances ont vite chutée. J'ai donc mis en place un système de cache tout simple afin de ne pas refaire le parsing à chaque refresh. J'ai appliqué ce système de cache à la fois pour la récupération des séries et pour les épisodes. Le temps de refresh est paramétrable, j'ai pour l'instant fixé celui-ci à :

- refresh toutes les 5 heures pour récupérer la liste des séries existantes.
- refresh toutes les 2 heures pour récupérer la liste des épisodes.

Mais on sait que des nouvelles séries n'arrivent pas tous les jours, je pourrais pousser le système de refresh à une semaine, voire deux. Pour la liste des épisodes je pense qu'un refresh toutes les semaines sera suffisant aussi. J'aimerais avoir votre avis sur ce point donc n'hésitez pas à vous exprimez en commentaire.

Le widget est donc prêt en beta : rendez-vous à cette adresse pour le tester en standalone. Vous pouvez aussi directement l'ajouter à vos Netvibes/iGoogle respectif via les boutons en dessous du widget. Pour tester le tout sous Windows Live/Vista/Mac/Opera et iPhone/iPod Touch il faudra attendre un peu. N'hésitez pas à me soumettre vos idées ! La prochaine fois je détaillerai le code javascript UWA du widget en lui-même et ça sera probablement le dernier billet pour ce widget qui devrait être terminé.

Précédemment sur ce blog:

Nous avons donc deux types de données à récupérer :

- La liste des séries actuelles qui est disponible sur cette page : http://epguides.com/menu/current.shtml.
- La liste des épisodes pour une série : http://epguides.com/Lost/.

Le traitement des données se fera donc en PHP. J’expliquerai sur mon prochain billet comment je récupère ces données (terminé) et on se penchera sur le design du widget (en cours).



Nous allons d'abord nous pencher sur la récupération des séries actuelles. J'ai décidé (ce n'est pas forcement le meilleur choix, à vrai dire, il serait plus logique de récupérer cette liste avec un fichier XML, mais je voulais tester le getFeed de l'UWA) de récupérer la liste des séries en cours via un fichier RSS. Tout d'abord pour récupérer une page distante via mon serveur, je dois passer par un proxy. J'ai donc choisit de récupérer sur le net une classe PHP gérant déjà ça : Class_Http et Proxy de Troy Wolf.

La première étape est d'ouvrir la page distante en lecture :

$dataFile = fopen("http://domain.com/proxy.php?proxy_url=http://epguides.com/menu/current.shtml", "r");

Etant donné que je souhaite produire un fichier RSS au final, j'indique les informations nécessaires afin que mon navigateur comprenne bien qu'il lit un fichier RSS :

header('Content-type: application/rss+xml');

echo "<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?>
<rss version=\"2.0\" xmlns:atom=\"http://www.w3.org/2005/Atom\">
<channel>
<title>epguides.com - Current US TV Shows</title>
<description>Current US TV Shows from epguides.com RSS feed</description>
<language>en-us</language>
<ttl>60</ttl>
<link>http://domain.com</link>
<atom:link href=\"http://domain.com/getShows.php\" rel=\"self\" type=\"application/rss+xml\" />";

Une fois le début de fichier déclaré, on passe au listing d'items en soi. Je vais donc parcourir ma page html et récupérer les informations qui m'intéressent afin de les injecter dans mon flux RSS.

/** On vérifie l'ouverture du fichier **/
if ( $dataFile )
{
/** On indique que le parsing ne doit pas encore commencer **/
$parsing = false;

/** On lit le fichier jusqu'au bout **/
while (!feof($dataFile))
{
/** On récupère ligne par ligne **/
/** Exemple : <li><b><a href="../Lost/">Lost</a></b> [on hiatus] <span class='red'>returns Jan 31</span></li> **/
$buffer = fgets($dataFile, 4096);

/** Si le parsing est enclenché **/
if($parsing) {
/** On check la présence de "<li><b>" présentes avant chaque titre de série **/
if(stripos($buffer, '<li><b>')!== false) {

/** On récupère dans la ligne $buffer le contenu de <li><b> à la fin de la ligne **/
/** $tvshow = <li><b><a href="../Lost/">Lost</a></b> [on hiatus] <span class='red'>returns Jan 31</span></li> **/
$tvshow = strstr($buffer, '<li><b>');

/** Tableau des string à supprimer **/
$delete = array("<li><b><a href=\"../", "/\">");

/** On supprime <li><b><a href=\"../ de la ligne **/
$toprint = str_replace($delete[0], "", $tvshow);
/** On supprime /\"> de la ligne **/
$toprint = str_replace($delete[1], " - ", $toprint);

/** $toprint = Lost - Lost</a></b> [on hiatus] <span class='red'>returns Jan 31</span></li> **/

/** On récupère la position de </a></b> afin de récupérer seulement ce qui se trouve avant **/
/** Après exécution du substr $toprint = Lost - Lost **/
$pos = stripos($toprint, "</a></b>");
$toprint = substr($toprint, 0, $pos);

/** On génère l'item RSS avec : **/
/** - pour lien http://jeremyselier.com/apis/getEpisodes.php?show=Lost (id série pour epguides.com) qui me permet de récupérer la liste des épisodes **/
/** - pour titre Lost (ce qui se situe après " - ") **/
/** - pour lien guid (id unique) domain.com-Lost **/
/** - pour description l'id série d'epguides.com : Lost **/
echo "\n<item>\n\t<link>http://jeremyselier.com/apis/getEpisodes.php?show=".substr($toprint, 0, strpos($toprint, " - "))."</link>\n\t<title>".substr($toprint, strpos($toprint, " - ")+3)."</title>\n\t<guid>domain.com-".substr($toprint, 0, strpos($toprint, " - "))."</guid>\n\t<description>".substr($toprint, 0, strpos($toprint, " - "))."</description>\n</item>";
}
}

/** Lorsqu'on trouve la phrase 'Shortcuts to sections of this page:' on indique que le parsing peut commencer **/
if(stripos($buffer, 'Shortcuts to sections of this page:')!== false) $parsing = true;

}

echo "\n";

/** On ferme le fichier **/
fclose($dataFile);
}
else
{
die( "fopen failed" ) ;
}


Et voilà le résultat : getShows.php. Cela va me permettre, dans mon widget, de remplir un select qui contiendra toutes les séries actuelles. Le site étant fiable, si une série vient à être créée ou supprimée, il en sera de même automatiquement dans ma liste.

Penchons-nous maintenant sur le design du widget : Celui est assez basique, voici une liste de screenshots :



La fonction "Vu/Non vu" n'est pas encore mise en place car je ne sais pas encore comment l'implémenter (des idées ?). La prochaine fois, j'expliquerais comment je récupère la liste des épisodes qui m'intéresse et le fonctionnement de mon widget en UWA. Et vous pourrez normalement commencer à beta-tester le widget pour m'aider à le debugger. Si vous avez des choses à me dire afin d'améliorer ce widget, n'hésitez pas !

Précédemment sur ce blog :

Parmi tous les widgets que j'utilise, mon préféré est celui de ben, TV Series qui permet de consulter les prochains épisodes à venir des séries que l'on suit. Le souci ? Réalisé depuis la vieille API Netvibes, celui-ci n'est pas fait en UWA. Du coup ma copine ne peut pas le rajouter à son iGoogle, et moi je ne peux pas le rajouter à mon Vista. J'ai donc décidé de créer mon propre module qui fera probablement la même chose que celui de ben, sauf que le miens sera fait en UWA et offrira donc une portabilité intéressante.



Histoire de délimiter les choses et de ne pas partir n'importe comment, voici un très léger cahier des charges :

- Le widget TV Shows sera automatique. Une fois terminé il récupérera tout seul les nouvelles séries, et enlèvera tout seul les séries terminées/annulées/whatever.
- Il permettra d'ajouter un nombre infini de série à sa liste de suivi.
- L'utilisateur pourra décider d'afficher les séries à venir des 7 ou 15 prochains jours ainsi les 7 et 15 jours passés.
- L'utilisateur pourra supprimer des séries de sa liste (obviously).

Voilà pour les fonctionnalités de base (indispensable à mon gout). Et voici quelques fonctionnalités bonus :

Pour chaque série, vous pourrez :
- Marquer comme Vu (je ne sais pas comment gérer cette feature)
- Rechercher sur un moteur de recherche personnalisable via les préférences
- Consulter la ficher TV.com

Il est aussi probable qu'un clic sur le titre de l'épisode affiche son résumé TV.com (en anglais malheureusement, si vous savez ou trouver en français, pourquoi pas).

Voilà, le widget est maintenant défini. Le plus dur maintenant est de récupérer toutes les informations liées aux séries et de façon automatique. C'est à dire, quelle sont les séries actuellement en cours. Comment récupérer la liste des épisodes à venir d'une série avec leur date, numéro d'épisode etc. Pour cela, on n'a pas d'autres choix que de trouver un site de qualité qui met à jour constamment ses informations. TV.com est très complet mais totalement ingérable. J'ai donc mis de côté ce site pour récupérer les informations (cependant j'irais récupérer le résumé de l'épisode sur ce site). J'ai par contre trouvé le site epguides.com qui lui, est, complet et à jour très rapidement.

A partir de ce site, je peux donc consulter les séries en cours et pour chaque série, je peux avoir la liste des épisodes (et donc la liste des épisodes à venir pour ceux qui ont été annoncés). Malheureusement, aucun flux RSS n'est mis à disposition par le site epguides.com. Je vais donc devoir extraire les données qui m'intéressent.

Nous avons donc deux types de données à récupérer :

- La liste des séries actuelles qui est disponible sur cette page : http://epguides.com/menu/current.shtml.
- La liste des épisodes pour une série : http://epguides.com/Lost/.

Le traitement des données se fera donc en PHP. J’expliquerai sur mon prochain billet comment je récupère ces données (terminé) et on se penchera sur le design du widget (en cours). N’hésitez pas à me donner vos suggestions pour ce widget !

Tout d'abord au cas où vous ne connaîtriez pas Netvibes : Netvibes est un portail Web français personnalisable, représentatif de ce qu'on appelle le Web 2.0. Netvibes offre à ses utilisateurs un site web personnel constitué par des pages onglets. Ce site est, à toute fin pratique, un portail web individuel qui donne accès à une multitude de services. Chaque service se présente comme un bloc. La page d'accueil de ce site se décompose en modules, représentés graphiquement par des blocs (rectangles). Grâce à l'utilisation d'AJAX, l'utilisateur peut très simplement réorganiser sa page en déplaçant, supprimant ou ajoutant des blocs.




Voilà pour la définition de Netvibes selon Wikipedia. Maintenant que vous y voyez un peu plus clair, je vais vous parler de l'UWA. L'UWA, pour Universal Widget API (titre pompeux je vous l'accorde), est donc une interface de programmation (API pour Application Programming Interface). Les widgets conçus avec fonctionnent non-seulement sur Netvibes, mais également d'autres plates-formes, parmi lesquelles iGoogle, Apple Dashboard, Opera, Windows Live et Windows Vista... Et c'est là tout l'intérêt de l'UWA. On conçoit un widget qui, par la suite, tournera sur toutes les plates-formes du genre (iPod Touch et iPhone compris).

J'utilisais au début iGoogle étant friand des services de google (docs/reader/notebook principalement). Je ne me rappelle plus vraiment comment je suis passé à Netvibes. Ce que je sais, c'est que j'y suis toujours, sûrement pour la variété des widgets et la rapidité du site. J'ai toujours trouvé les widgets qui m'intéressaient jusque là. Mais dernièrement, j'ai voulu ajouter un widget tout simple qui me permettrait d'afficher un compte à rebours suivant une date donnée. J'ai bien sur trouvé quelques widgets fonctionnant selon mes désirs mais l'affichage trop complexe ne me satisfaisait pas. Devant la simplicité du widget à concevoir je me suis lancé dans la réalisation de mon tout premier module pour Netvibes.

Bien sur, il a fallu bien potassé la maigre documentation fournit par Netvibes et pas mal creuser du coté du forum. Une fois assimilé dans les grandes lignes le fonctionnement de l'UWA - voici un PDF résumant bien les fonctions principales - je me suis lancé un peu à l'arrache. Au final ça donne ça (lien direct), et vous il suffit d'afficher la source pour voir la totalité du code source :



On ne peut pas dire que cela soit un très gros module. Ce n'est pas non plus très compliqué. Il faut d'abord inclure deux lignes, en gros, la librairie UWA et sa feuille de style :

<script type="text/javascript" src="http://www.netvibes.com/js/UWA/load.js.php?env=Standalone"></script>
<link rel="stylesheet" type="text/css" href="http://www.netvibes.com/themes/uwa/style.css" />

Une partie <widget:preferences> qui définie littéralement les préférences du widget. Ici :

<widget:preferences>
<preference name="title" type="text" label="Title"
defaultValue="Name of your countdown" />
<preference name="month" type="range" label="Month"
defaultValue="1" step="1" min="1" max="12" />
<preference name="day" type="range" label="Day"
defaultValue="1" step="1" min="1" max="31" />
<preference name="year" type="range" label="Year"
defaultValue="2007" step="1" min="2007" max="2100" />
<preference name="hour" type="range" label="Hour"
defaultValue="0" step="1" min="0" max="23" />
<preference name="minute" type="range" label="Minute"
defaultValue="0" step="1" min="0" max="59" />
</widget:preferences>

Puis un code javascript :

function countdown() { ... }

widget.onLoad = function() {

var title = widget.getValue('title');

widget.setTitle(title);

widget.setPeriodical('updateTime', countdown, 1000);
}

Tout con. Je vous avais prévenu. Je récupère le titre de l'événement dans les préférences et l'insère pour titre de mon widget. Puis j'indique au widget de lancer toutes les secondes la fonction countdown. Je vous passe les détails sur celle-ci. Elles récupèrent les préférences du widget puis calcul les jours, heures, minutes et secondes restantes avant l'événement. Une fois le temps calculé, on insère dynamiquement le texte dans le widget à l'aide de :
widget.setBody('<div class="countdown">'+nb_jour+ ':'+nb_heure+':'+nb_mois+':'+nb_secondes+'</div>');
Et voilà, on a un widget qui tourne sur toutes les plates-formes. Avouez que ça n'a pas l'air très compliqué ? Le plus dur étant de trouver les bonnes fonctions (ici setPeriodical) étant donné que leur doc est... vide.

Parmi tous les widgets que j'utilise, mon préféré est celui de ben, TV Series qui permet de consulter les prochains épisodes à venir des séries que l'on suit. Le souci ? Réalisé depuis la vieille API Netvibes, celui-ci n'est pas fait en UWA. Du coup ma copine ne peut pas le rajouter à son iGoogle, et moi je ne peux pas le rajouter à mon Vista. J'ai donc décidé de créer mon propre module qui fera probablement la même chose que celui de ben, sauf que le miens sera fait en UWA et offrira donc une portabilité intéressante.

Dans mon prochain billet j'aborderais plus en détails la conception de ce module que j'ai décidé d'appeler TV Shows (oui je tape dans l'original).

Edit : Tags autorisés : [ b] [ /b], [ i] [ /i], [ u] [ /u], [ code] [ /code] : On m'aurait menti ?