Redesign

Ah, les vacances en famille… le repos, la plage, la piscine, le soleil, les filles, le redesign du blog. J’ai effectivement embarqué le portable pendant mes deux semaines de vacances en prévision du temps de merde que l’on s’est tapé durant tout l’été. Heureusement, c’était moins moche que le reste de l’été et ma semaine en Tunisie juste avant m’avait permis de travailler le bronzage.

Cela faisait longtemps que je pensais à un redesign de ce thème. De nombreux petits détails ne me plaisaient plus et l’envie d’utiliser HTML5 couplé avec quelques effets proposés par CSS3 devenait forte. Je pense que le résultat est plus lisible, plus propre.

Alors que l’ancienne version supportait encore vaguement IE6, j’ai décidé d’appliquer la même politique que Google, à savoir de ne supporter que les deux dernières versions (stables) des navigateurs principaux. J’applique ce même principe pour mon boulot. C’est véritablement une joie de ne plus être autant limité par la compatibilité avec de vieux navigateurs obsolètes. Le gain de temps est lui aussi appréciable.

Les nouveautés

Le titre du site change, passant d’une police perso transformée en image (que je trouvais de plus en plus laide) à du Verdana bien classique. Si vous êtes sous Chrome il y a de fortes chances pour que celle-ci soit aliasée. Après quelques tentatives infructueuses pour la lisser, je me suis résigné à accepter le fait que le moteur de rendu des polices de Chrome est moins beau que celui de Firefox.

Si vous aviez déjà été jusqu’à la section des commentaires d’un article, faites-y de nouveau un tour. Les commentaires n’était précédemment pas stylé du tout et il faut avouer que c’était bien moche. Je ne suis toujours pas satisfait du formulaire, il peut changer dans les jours ou semaines à venir. Je profite d’en parler pour mentionner que la notification mail lors de la publication d’un nouveau commentaire ne fonctionne pas. Il se peut que je mette un certain temps à vous répondre ou que je manque complètement votre message. J’étudie la cause du problème et m’en excuse.

Le menu a subit une petite réorganisation. Les dernières séries visionnées changent de place, on ne garde que le dernier tweet posté et tous les liens qui me sont relatifs apparaissent en icônes.

C’est dans le footer que se trouve maintenant mes derniers tweets et mes derniers épisodes vus ainsi que les articles les plus populaires et ceux intéressant à lire. Alors qu’avant le footer était presque inexistant celui-ci occupe une place importante. Là encore il y a un je ne sais quoi qui me perturbe, son apparence est peut-être vouée à changer.

Finalement, le code. En étudiant la source de la page on peut constater qu’il y a beaucoup moins de balises utilisées et celles présentes le sont de la manière la plus sémantique possible. Le design ne comporte plus qu’une seule image si l’on omet les icônes.
Pour la partie invisible (PHP), j’ai enfin séparé les fonctions des templates pour toutes les rassembler dans le functions.php de WordPress. Les derniers tweets et séries disposent d’un système de cache qui évite une nouvelle requête à leur API respective lors d’un nouvel affichage. Le thème est prêt pour l’internationalisation, qui sait…

Il y a de nombreux autres petits changement, je vous invite à les découvrir par vous même.

Je serai très heureux de lire vos critiques et remarques concernant cette nouvelle version.

WordPress hack : dernières activités Betaseries

Comme promis voici le code PHP permettant d’afficher vos dernières activités sur Betaseries.

Ca devrait pouvoir s’installer sur tout type de bloc où vous avez accès au code source, cependant il vous faut la version 5 de PHP.
Pour wordpress, il vous suffit d’éditer le fichier « sidebar.php » de votre thème actuel et de rajouter le code qui suit tout en haut de celui-ci.

<?php
function betaserie_type_action($string) {
	$explodedString = explode (" ", $string);
 
	if (in_array ("ajout&eacute;", $explodedString))	return "add";
	elseif (in_array ("regarder", $explodedString))	return "watch";
	else	return "archive";
}
 
function betaseries_parse_urls($string) {
	return preg_replace ("/\/planning\//", "http://betaseries.com/planning/", $string);
}
 
function betaseries_parse_feed() {
	$pseudo = "koskoz";
	$feed = "http://www.betaseries.com/rss/timeline/$pseudo";
 
	$dom = new DomDocument();
	$dom->load($feed);
	$titleList = $dom->getElementsByTagName("content");
 
	$imgUrl = get_bloginfo('template_url') . '/images/betaseries/';
 
	foreach ($titleList as $title) {
		echo '<p style="margin: 0 0 10px 0;">';
		echo '<img src="' . $imgUrl . betaserie_type_action ($title->nodeValue) . '.png">';
		echo betaseries_parse_urls ($title->nodeValue);
		echo '</p>';
	}
}
?>

Je compte bien entendu transformer ce hack en widget dans les jours à venir.

Pour l’utiliser, il suffit de modifier le pseudo dans la dernière fonction et de l’appeler tout bêtement :
<?php betaseries_parse_feed(); ?>

Nouveau bloc : « Dernières séries » et ajout de JavaScript

Si vous lisez cet article vous aurez forcément remarqué quelques modifications dans la sidebar.
En effet, celle-ci se voit adjoindre un nouveau bloc nommé « Dernières séries » qui affiche mes dernières actions réalisées sur Betaseries.

Suivant le même principe que le module twitter, ce feed est parsé non pas via SimpleXML mais en utilisant DomXML à cause d’un problème de CDATA avec SimpleXML (qui aurait pu se résoudre à un simple cast…).

Pour éviter de trop charger cette sidebar, le bloc apparait de base replié, il vous suffit de cliquer sur le titre de celui-ci pour le dérouler.
Le bloc de twitter subit l’effet inverse, en étant déplié mais repliable.

Il m’a juste fallut quelques lignes de JavaScript grâce à MooTools.

Dès que je trouve un endroit approprié pour héberger les sources, je les distribue.

Nouveau module : Derniers Tweets

Je tweet beaucoup plus que je ne blog, c’est un fait. Ce blog est plus lu que mon tweeter, c’est un autre fait.
Il m’est dont venu l’idée d’afficher mes derniers tweets ici, de manière à ce que les personnes qui ne me suivent pas sur tweeter soient quand même au fait de mes dernières activités.

J’ai tout d’abord succinctement cherché un widget pour réaliser cette tâche, mais problème, je n’ai pas gérer les widgets dans mon thème. N’ayant pas envie de le modifier pour le moment (oui, il me reste toujours la recherche à implémenter), je me suis tourné du côté des « hacks », c’est à dire des modifications du code déjà existant.
Après un rapide coup d’œil, pas grand chose me plaisait, j’ai donc préféré coder le module moi même.

Rien de bien compliqué ici, tout le code modifié se trouve dans le fichier « sidebar.php » et se base sur les feeds rss fournis par tweeter.
En gros, je récupère les 3 derniers tweets de mon feed, puis les parse à l’aide de SimpleXML, une librairie PHP incluse dans la version 5.
Une fois le feed parsé, il me faut parser les urls et les HashTags (#) ainsi que la date qui a un format assez particulier, puis c’est fini !

Je mettrai en ligne sous peu le code.

Vous aurez peut-être besoin de recharger votre cache (Ctrl + F5) pour appliquer la nouvelle CSS.