Tous les articles

Les intégristes, le thème !

Par Pierre Bertet

RSSistes de tous horizons, venez donc faire un tour sur le blog, car le nouveau thème des intégristes est en ligne et il nous plaît beaucoup !

En plus d’une superbe identité spécialement réalisée pour nous par Monsieur Grégoire, ce fut également l’occasion de nous amuser un peu : HTML 5 bien sûr, une CSS universelle pour se débarrasser de pépé et utiliser l’ensemble des sélecteurs CSS 2 (enfin !), ou encore l’API Yahoo Weather pour tenter de détecter le temps qu’il fait chez vous. Nous avons également utilisé une grille horizontale comme il se doit, mais également une grille verticale. L’accessibilité n’est pas en reste : l’intégralité du site fonctionne au clavier, avec ou sans Javascript.

La publication a été réorganisée en deux thématiques : les articles, que vous connaissez déjà, et les notes. Plus courtes que les articles, sans titres, leur principal objectif est de nous permettre de publier de petites informations, en vous proposant de réagir dans les commentaires.

Voici le détail des nouveautés qui accompagnent cette nouvelle identité.

Apparition des « notes »

L’organisation du blog a été légèrement revue : nous proposons désormais une page de présentation, parce que c’est quand même plus poli.

La veille des intégristes est toujours présente, seule sa présentation a changé. Cette page regroupe les différents liens qui nous passent sous les yeux, provenant de différentes sources : Google Reader, Delicious, Diigo.

L’autre nouveauté est la partie « notes », qui nous permettra de publier de courtes informations, rapidement. Nous pourrons y publier des questions, dont chacune sera un nouveau défi pour l’humanité : Vaut-il mieux mettre un attribut title sur un lien plutôt que sur l’image qu’il contient ? Peut-on obtenir une place au paradis si l’on n’utilise pas Textmate ?

HTML 5

Pour le passage à HTML 5, deux ressources furent principalement utilisées : l’indispensable spécification HTML 5, et le blog HTML5 Doctor. L’utilisation de certains éléments d’HTML 5 a soulevé beaucoup de questions, aussi n’hésitez pas à nous indiquer vos remarques à propos de leur pertinence.

Une CSS Universelle pour Internet Explorer 6

Internet Explorer 6 a bien vécu, et nous pensons qu’il est temps de lui offrir un repos bien mérité. C’est pourquoi nous avons pris la décision de proposer à ses utilisateurs une feuille de style universelle, qui affiche un style minimaliste, presque par défaut, sur l’ensemble du blog. Ainsi débarrassés de ce vieux farceur, nous avons pu profiter de toute la richesse des sélecteurs CSS 2, plus de 10 ans après leur recommandation par le W3C. Pas mal non ?

La grille verticale

En plus de la grille horizontale, un grille verticale a été utilisée pour ce thème. Vous pouvez la voir en cliquant sur ce bouton (un clic sur la grille permet de la masquer) : Afficher la grille. Pour tester la grille sur d’autres pages du blog, faites simplement glisser le lien dans votre barre de favoris.
Ainsi, le texte de la colonne de gauche est toujours aligné sur celui de la colonne de droite. Le tout apporte un rythme vertical très intéressant, mais les différences d’interprétation entre les navigateurs nous ont posé de nombreuses difficultés pour y parvenir. Nous sommes très heureux du résultat final, un je-ne-sais-quoi qui rend l’ensemble plus agréable pour la lecture.

La météo : Yahoo Weather API

Quelle est la fonctionnalité numéro 1 que doit proposer tout thème de blog qui se respecte ? La météo bien sûr !
D’accord, ce n’est pas à ce point nécessaire, mais on s’est dit que ce serait rigolo, hahaha ! Le système fonctionne de la manière suivante : lors de votre première connexion sur le blog, votre heure locale sera détectée à l’aide de Yahoo GeoPlanet API. S’il est tard, le thème s’affichera simplement en mode nuit. S’il fait jour, une autre requête sera envoyée à Yahoo Weather API, pour tenter de détecter le temps qu’il fait chez vous.
Et parce qu’il faut laisser un peu de place à Météo France dans le domaine, nous avons simplifié les 48 types de conditions de Yahoo Weather pour obtenir 5 modes. Vous pouvez également régler le thème sur le mode que vous préférez, à l’aide du module « Météo » présent dans la colonne de droite.

Alors alors ?

Nous sommes impatients de découvrir votre avis dans les commentaires : que pensez-vous de l’esthétique et de la structure de ce nouveau thème ?

Les intégristes vous souhaitent de joyeuses fêtes, pouet !

Article rédigé par , publié le dans la catégorie Les intégristes. Vous pouvez suivre les commentaires de cet article en utilisant le flux RSS dédié. Les commentaires sont fermés sur cet article.

23 commentaires

Flux RSS des commentaires de cet article

Sympathique :-)

Faites juste attention aux URLS des dernières notes qui dépassent de la colonne de droite (sous Chrome en tout cas)

Longue vie aux intégristes !

Le 22 Déc. 2009 à 12h03 par Sillusion

Bonjour, j’utilise IE6 et votre site semble ne pas … non je déconne.

Bravo

Le 22 Déc. 2009 à 14h53 par Vincent Voyer

Pauvre IE6, le pousser comme ça dans une maison de retraite… c’est lâche!

Le 22 Déc. 2009 à 20h47 par Guillaume Richard

Oui, superbe ! Joli redesign, aux détails soignés, dans un habillage graphique à la fois sobre et de caractère. J’aime beaucoup et ça me rend impatiente du prochain billet, pour avoir le plaisir de revenir ici :-)

Le 28 Déc. 2009 à 20h58 par tetue

J’aime beaucoup la gestion de la météo. C’est pas très utile mais c’est un plus appréciable. Il ne manque plus que la gestion d’une image pour chaque grande ville, avec la tour eiffeil pour Paris, Notre Dame de la Garde pour Marseille, …

Le 29 Déc. 2009 à 16h53 par Nicolas Chevallier

Pousser IE6 à la maison de retraite, parfait. Mais personne n’a une solution pour le foutre dans la fosse directement. Histoire de s’en débarrasser une bonne fois pour toute!

Sinon le design est parfait. La corrélation entre chaque élément est optimale. À en pleurer!

Le 18 Jan. 2010 à 22h50 par MrThieu

Je ne connaissais pas le site avant qu’il change, et je ne peux donc pas dire si c’est mieux ou pas, mais ce qui est sûr c’est que je le trouve plaisant : couleurs harmonieuses, rien qui ne soit agressif pour les yeux, parfaitement lisible, et une illustration pour l’en-tête que j’aime beaucoup aussi. Pourquoi ces bonshommes avec de grosses lunettes ? Peut-être aurai-je la question en lisant ce qui a été publié précédemment ?
J’aime bien aussi l’ombre interne dans le champ de saisie. Tout est fait très finement. En résumé, bravo !

Le 25 Jan. 2010 à 21h12 par domeliko

Excellent thème :)

Dommage qu’il neige ce matin et que ça ne transparaisse pas dans le bandeau, la faute aux prévisions j’imagine :(

Le 01 Fév. 2010 à 10h36 par bertrand

Bonjour,

je ne connaissais pas le site avant ce thème, d’ailleurs je viens de le découvrir suite à un tweet qui vous classe parmi les meilleurs site faits en HTML5.

Avant de passer aux éloges, je vous avoue que je trouvais ça triste, que les sites Anglophones et/ou Russes nous dépassaient et nous laissaient trop derrière quand il s’agit du design de sites.

ben alors toutes mes félicitations, je trouve ce site formidable, autant pour le contenu que pour le Design qui est très très attrayant, très sobre et simpliste et celui qui s’est occupé des dispositions des blocks est un vrai génie.(et puis les boutton comme celui là où y a écrit Publier le commentaire, ben j’arrive pas à le cliquer par ce que je sais ce qui vient après, on va me rediriger et je le referais plus :P)

Bon je crois que ça suffit pour aujourd’hui, trop d’éloges c’est pas bien au fait.

Bonne journée.

Le 02 Mar. 2010 à 16h35 par Abderrahmane TJ

Décidément, je ne me lasse pas de ce site, dont j’appréciais déjà les billets, et sur lequel je reviens maintenant rien que pour avoir le plaisir d’apprécier le redesign. J’en ai même écrit un billet de groupie.

Le 02 Avr. 2010 à 16h30 par tetue

Bonjour et merci pour tous vos excellents articles !!

Je suis en train de refaire mon site en HTML5 et je me pose une question. Quel élément correspond le mieux au logo ?

Jusqu’à présent, je le structurais avec un . En effet, le logo (ou titre du site) ne correspond pas au h1 de la page en cours mais au title.

J’ai vu 2 manières de l’appréhender : le mettre en et commencer les titres de la page au … ce que je ne trouve pas logique. Ou bien, comme vous, le mettre en et commencer les titres de la page au aussi. Ce qui me gêne, (flagrant avec l’outliner), c’est que le titre du site et le titre d’une page ont le même niveau, la même sémantique.

Merci pour vos éclaircissements

Le 01 Sep. 2010 à 19h59 par Carine

@Kreestal,

Bien vu Marie :-) pourtant, on est plutôt fans De l’album Oxygen – au passage je te conseille « Part IV ».

(*re-malaise*)

Le 11 Sep. 2010 à 02h21 par Eric Le Bihan

Bonjour et merci pour tous vos excellents articles !!

Je suis en train de refaire mon site en HTML5 et je me pose une question. Quel élément correspond le mieux au logo ?

Jusqu’à présent, je le structurais avec l’élément « p ». En effet, le logo (ou titre du site) ne correspond pas pour moi au h1 de la page en cours.

J’ai vu 2 manières de l’appréhender : le mettre en « h1 » et commencer les titres de la page au « h2 » ce que je ne trouve pas logique. Ou bien, comme vous, le mettre en « h1 » et commencer aussi les titres de la page en « h1 ». Ce qui me gêne, (flagrant avec l’outliner), c’est que le titre du site et le titre d’une page ont le même niveau, la même sémantique.

Merci pour vos éclaircissements

Le 13 Sep. 2010 à 09h28 par Carine

@ Carine Pour ma part, je mets le logo des sites (avec l’attribut alt qui va bien évidemment) en h1 sur la page d’accueil, dans un span, un div ou un p sur les autres pages, le h1 y étant réservé au véritable titre des autres pages…

Le 15 Avr. 2011 à 18h21 par deor

Les commentaires sont fermés sur cet article.