La Case de l’Onc’ Tom n’avait presque pas changé de visage depuis son lancement en février 2005. L’été s’installe enfin dans notre vert pays et j’en profite donc pour donner un gros coup de balais. Exit donc le fond sombre, le jaune et le blanc, bienvenue au marron et au blanc cassé. Vous noterez également le léger changement de nom (il n’était presque pas respecté faut dire). On parlera désormais de La Case de l’Oncle Tom. Ne vous prenez pas la tête, c’est comme le livre (mais ça n’a rien à voir on est d’accord).
C’est en lisant un article sur l’intégration et la promotion des Microformats que j’ai réalisé à quel point cela pouvait bien s’intégrer dans un blog. J’avais déjà microformaté mon CV (hCalendar, hCard, hResume) mais pour d’autres raisons que je développerai, j’ai finalement cédé aux sirènes de la tentation.
Le thème
Le choix des couleurs n’est pas anodin. J’ai souhaité placer une teinte marron car depuis les travaux de mon appartement, je fais une fixation sur le bois. C’est beau, ça s’intègre avec tout (pierre, métal, ancien, récent) et c’est lié à la notion de nature. Ceux qui me connaissent savent à quel point la préservation de l’environnement fait partie de mon quotidien.
J’ai évité les couleurs primaires. Elles fatiguent les yeux et vous obligent à forcer du regard. Observez bien, le parcours du blog est reposant. Les teintes restent pâles et leur utilisation sépare les différentes parties de l’écran.
Ne cherchez pas le thème dont je me suis servi : j’ai tout repris à zéro. Mais je me suis inspiré de nombreuses ressources rendant (normalement) ce blog moderne et plus agréable à lire. J’ai volontairement supprimé tout « conduit » vertical. Ce blog s’adapte à la largeur de votre écran et reste allègrement lisible sur de petites résolutions.
Les Microformats
Comme je l’ai indiqué plus haut, le déclic est venu des Microformats. Concrètement, en agençant vos balises selon un format bien précis (et documenté), vos données sont structurées de sortes qu’elles sont exploitables rien qu’en existant.
Ce blog utilise les microformats XFN, hCard, hAtom, rel-tag et rel-home.
De ce fait, vous pouvez construire un flux Atom (du XML) uniquement en lisant le contenu de n’importe quelle page du blog. En l’état ça ne vous avance à rien mais des applications commencent à intégrer cette structuration des données … à commencer par Firefox 3. En parcourant une page, vous serez par exemple averti des tags utilisés et pourquoi pas rechercher des ressources similaires sur Flickr ou MySpace. Ou encore sauvegarder les coordonnées de contact de l’auteur d’un site.
Les Microformats en une phrase, c’est utiliser une sémantique permettant l’extraction du contenu de manière logique. Ce sont les balises META de l’Internet moderne..
Objectif professionnel
Cette refonte avait également un autre objectif : rendre mon blog lisible sans crainte par des professionnels intéressés par mon travail et mes compétences. Preuve qu’une bonne structuration des données est importante, j’ai ainsi adapté ma page professionnelle en 5 minutes aux couleurs du blog pour apporter une cohérence de navigation.
Ce blog s’est repositionné doucement vers sa forme actuelle, mélangeant sujets techniques et loisirs de la vie quotidienne. J’aime les jeux alors j’en parle. J’aime le développement Web alors j’en parle. C’est ma vitrine autant auprès de mes amis que de mes futurs employeurs.
Le mot de la fin
Et pour les nostalgiques qui débarqueront en ne sachant pas à quoi je fais référence :
- La Case de l’Oncle Tom : avant le 27 juillet 2007
- La Case de l’Oncle Tom : à partir du 27 juillet 2007
Voilà 
ce sont quelques heures de travail qui s’offrent à vous.
Commentaires
Chouette relooking!
Par contre ca fait bizarre les petits pictos mario avec les couleurs que tu as choisi.. pourquoi ne pas faire des icones assorties?
La première raison c’est que je suis une tanche dès qu’il faut faire de la créa graphique.
Et la deuxième c’était pour le côté décalé. Avec le recul ça peut choquer c’est vrai …
Je donne mon avis non pas d’un point de vue professionnel mais du coté utilisateur lambda, plutot bêta même!
Vive les chambres étudiants avec parquet, lambris sur les murs et plafonds! Enfin on va s’y habituer 
Perso j’étais habitué à l’ancienne version et ca fait vide sans la bande verticale de droite! Autre chose le bois j’en ai ma dose moi
Ca ne me dérange pas de changer les habitudes si c’est « mieux ». La barre latérale était complètement remplie. Honnêtement, scroller 5 fois pour la lire en entier ça n’a pas d’intérêt. Du coup ça a nettement réduit la hauteur des pages sans enlever l’essentiel.
J’ai oublié de préciser que j’ai déporté la liste des liens dans une page à part (merci les modèles de page WordPress) et que j’ai éclaté le tout en 2 « panneaux ». La barre latérale classique (à droite) et le pied de page (en bas) qui contient des informations pertinentes mais non-essentielles à la navigation du premier venu.
En étant en bas, on sait systèmatiquement où se trouvent ces informations : toujours en bas et pas à 1/4 ou 1/3 de hauteur.
Pour les oeufs j’ai hésité avec autre chose et je mettrai ce autre chose, plus discret et plus petit. Je suis trop accro à Yoshi’s Island :’(
Whaa ! Pas mal du tout ! J’adore le nouveau look, c’est frais et de bon goût, je suis fan !
Excellent ce nouveau design, j’adhère aux couleurs : effectivement le bois marié à des couleurs pâles rends la lecture plus agréable, presque poétique
(comme le parterre de fleurs d’un certain village dans Trusty Bell mais là je m’égare)
Très sympa Tom ce nouveau design, en revanche je trouve les hachures sur les commentaires pas très appropriés, c’est difficile de les lire les avec ca
J’ai corrigé 2-3 bricoles qui n’allaient pas (la validation des microformats qui ne passait pas, le fond hachuré dans les commentaires,l’icône de l’œuf en bas et les flux RSS manquants en entête).
Je suis en train de rédiger un petit article sur les microformats et peut-être que ça en intéresse de comprendre le fonctionnement du fondu sur les 3 liens en onglet en haut ?
ouep, ca m’intéresse
Salut Thomas,
Je me permet de te solliciter … pour la bonne cause!!!
Je travaille chez X-Prime sur Toulouse.
On vient de mettre en ligne le nouveau site de la fondation AIDES pour sa campagne de prévention contre le SIDA, dont le slogan est : « L’été, toutes les rencontres sont possible ».
C’est un site full-flash qui propose de confronter l’utilisateur à des situations – réelles – de transmission du virus.
Je me demandais si tu pouvais en parler sur ton blog. Ce serait un bon coup de pouce!
Je te donne l’adresse du site: http://www.touteslesrencontressontpossibles.com/
L’adresse de l’article sur notre blog: http://blog.x-prime.com/index.php/2007/07/24/403-aides-et-x-prime-pour-un-ete-tres-sexe
Et je vais abuser!!! On a aussi produit des bannières. Si tu le souhaites, je peux te les envoyer.
N’hésites pas à me contacter si tu as des questions.
Merci d’avance.
Bonne journée,
Guillaume
Egalement intéressé par l’explication du fondu sur les liens.
Ahhh c’est chaud et doux, j’aime beaucoup ( ^3^)
A bientôt \(^o^/)
@gcatusse : merci pour ta sollicitation seulement je ne pense pas y donner suite malgré tout le sérieux que je peux porter au SIDA.
Il y a un manque d’information doublé d’un tabou important (il n’y a qu’à voir les cours d’éducation sexuelle qu’on a eu … en quatrième) et en parler sur un blog dédié aux jeux vidéo, au développement Web et à la photo, je ne trouve pas ça « harmonieux ».
A y réfléchir, je me demande quelle est la meilleure façon d’en parler ? Avec les taux de pénétration des technologies modernes, pourquoi ne pas les utiliser au lieu de prendre les ados pour des gosses ? Ce qui me surprend limite dans l’animation c’est « viens on s’enfile sur la plage [mais avec une capote]« , « viens on s’enfile en boîte », « viens on s’enfile sous la douche » etc.
Je n’ai pas vu une seule trace du dépistage, gratuit et anonyme. Le site n’est actuellement utile que si on tombe dessus (qui va arriver sur un site full flash ? je doute que les jeunes cherchent « comment ne pas attraper le SIDA » mais plutôt « bon plan sur la plage ») et que si on se demande quand mettre une capote. Quand on se le demande c’est qu’on y pense déjà.
Pourquoi ne pas utiliser les MySpace & cie pour inviter les gens à se tester non pas sur le SIDA mais sur la bonne utilisation des pratiques sexuelles ?