H2V2 is out !

Non ce n’est pas une nouvelle mutation de la grippe,
mais vous attraperiez le virus H2V2 qu’on serait pas contre…

H2V2, le nouveau look d’HISTOIRE 2 est enfin là !
Après près de 2 ans de blogging, commencé sur les chapeaux de roues sans avoir depuis le début pris le temps de créer un cyber environnement qui nous ressemble, voici la nouvelle version de ce blog a qui l’on devait bien ça.

HISTOIRE 2 est mort, Vive HISTOIRE 2 !

Si le nom HISTOIRE 2 avait fait l’objet d’un brainstorming à l’époque, nous nous étions lancés dans l’univers des blogs sans savoir si nous allions accrocher bien longtemps. On avait donc pris un template tout prêt et bidouillé un header en 10 min…
On est encore là aujourd’hui complètement accro et bien décidé à continuer encore et encore (c’est que le début d’accord d’accord ;p) et depuis longtemps nous avions le projet d’habiller plus dignement notre espace virtuel d’expression.

La vie trépidante menée ces derniers mois, en grande partie à cause de/grâce à ce blog, ne nous a pas facilité la réalisation de ce souhait tant il a été difficile de trouver du temps.
Les fichiers en témoignent… depuis février dernier le nouveau logo créé attendait la suite, la charte graphique a enfin été bouclée au milieu de l’été et après il a fallu trouver le temps de programmer tout ça. M**** alors, ça fait 9 mois ! Isn’t ironic, don’t you think?
Après ces très nombreuses heures passées à peaufiner la bête, on avait un peu envie de tout expliquer…

• HISTOIRE 2 remonter aux origines

Revenons un peu dans le temps. Nous n’avons jamais expliqué comment on s’est mis à bloguer.
Benj a découvert la fameuse blogosphère par son boulot et a trouvé l’ambiance très sympa. Il m’en a parlé, et on a décidé de s’y lancer ensemble.
Mais bloguer ok, mais sur quoi? Et bien sur tout, parce qu’on n’aime pas se limiter.

Le blog devait donc signifier cette diversité et cette dualité, et si c’était 2 personnes derrière c’était aussi un couple. Et voici en exclusivité intersidérale le brainstorm d’il y a près de 2 ans.

Très amusant de revoir ça ^^.
On pourra dire «que de prise de tête juste pour un blog» mais je (ici BARBIE derrière le clavier) suis un peu psychopathe perfectionniste et j’apporte notamment une grande importance aux noms (symbolique, logique, toussa…).

Après consultation, on a donc opté pour HISTOIRE 2.
Derrière ce nom il y a «histoire» comme histoire d’amour, «2» pour le couple certes mais surtout pour le duo de personnalités derrière l’écran, et le tout «histoire 2» pour dire qu’on n’est pas là pour se prendre la tête.

Pas de bol, le nom de domaine était déjà pris mais on a tenu à garder ce nom et on a fait une version courte «H2» nettement plus connue désormais d’ailleurs que l’originale. Et si maintenant on est les «H2» et qu’on a tendance à répondre à la question «quel blog» par «h2-blog», j’avais envie de garder cette genèse et me suis amusée à l’utiliser un peu partout dans cette nouvelle version, juste histoire 2 ;p.

• HISTOIRE 2 nous ressembler

On avait évidemment envie de quelque chose de joli mais de peu envahissant visuellement pour laisser de la place au contenu, aux photos surtout. J’ai toujours été une amoureuse des images et maintenant que la photo a pris pas mal de place dans notre vraie vie c’était encore plus essentiel.
D’office on a donc voulu éviter tout graphisme type rayures ou autres en fond, et nous avons opté pour du blanc le noir étant délicat quand il y a du blabla à lire (et chacun sait qu’on est 2 grands bavards ^^).

Le challenge a été ensuite de trouver un terrain d’entente de manière à ce que ça nous plaise à tous les 2. On s’est fait un gros brainstorm savoir vers quoi on voulait aller.
Côté structure on est resté sur un format blog «standard» (on n’est pas fan des webzines) avec sidebar… assez proche de ce qui existait déjà finalement mais c’était le design qui allait faire la différence.
J’ai revu les largeurs des colonnes, la sidebar respirant plus pour mettre en valeur nos Blog It Express et la zone article plus étroite permettant plus d’harmonie entre le texte et les photos et vidéos (ce qui va nécessiter quelques ajustements dans les anciens articles mais bon).

Du côté inspiration graphique, Benj a été super cool et conclusion le style penche un peu plus vers quelque chose de féminin par ses courbes et sa délicatesse, mais j’ai fait en sorte d’éviter quoique ce soit de «meugnon» (surtout après un premier essai très cute que Benj a détesté et il a bien fait même si sur le coup j’ai pesté ^^).
Après «quelques» recherches j’ai enfin trouvé l’axe graphique, basé sur la ligne (j’ai un truc avec les lignes ^^). Par diverses manipulations et tentatives j’ai ensuite affiné le genre avec un côté papercut très léger.
Le reste est venu au fur et à mesure de l’inspiration et de nos besoins en «modules», un dernier détail a même été ajouté hier dans une des zones un peu spéciales de ce nouveau thème.

En effet, je n’ai pas fait simple ni standard (et je n’ai pas simplifié la tâche de Benj ^^).
Une des petites particularités de ce template est d’avoir incorporé une «zone flexible» dans un endroit un peu pas évident : dans le header sous le logo le texte change selon les pages donnant des informations descriptives diverses, dont certaines font référence aux articles (et il parait que c’était pas évident, évident – mon mec est trop fort).

En haut c’est compliqué et en bas évidemment aussi (quand c’est trop simple c’est pas drôle hein) avec un footer qui rentre un peu dans la zone de la page principale et change selon si c’est un/des articles ou des pages diverses :p.
Je suis amoureuse de mon footer, qui résume «Toute l’histoire» (et le nom de notre blog est top pour les jeux de mots aussi z’avez vu – oui je fais un peu d’auto-satisfaction ^^) avec en nouveauté nos contacts web respectifs.
J’ai même poussé le truc jusqu’à faire une partie visible uniquement par nous, le logo H2 inversé étant un bouton «de l’autre côté du miroir» qui quand on est connecté à un autre aspect.

Mais revenons au header qu’on a voulu démonstratif : contrairement au précédent ce n’est plus un graphisme mais des photos de nous pour identifier immédiatement qui est derrière H2 qui est avant tout un espace à nous, pour nous, et pour les autres qui passe par là c’est clair au moins.
Et parce que «les H2» ne sont pas du genre à rester tranquilles, on a plusieurs versions de nous qui changent aléatoirement et qu’on compte bien enrichir régulièrement.

Et puisqu’on parle d’images, sous le header et en haut de la sidebar on retrouve 2 icônes pour accéder à notre flickr et à nos vidéos, et si à la base c’était des photos génériques Benj a trouvé le moyen de faire apparaitre la dernière photo et vidéo en aperçu histoire 2 voir quand il y a du neuf, j’adore \o/.

Pour le reste y’a des «Histoire 2» un peu partout côté titres de pages ou sections parce que ça change des phrases standards. Et puis on a ajouté une possibilité de partage d’article et des compléments au articles supplémentaires avec des articles aux hasard en plus des articles similaires déjà présents.
Côté A propos, j’ai enfin casé le H2 Zoo ^^. Et côté liens «blogroll», une page dédiée qui sera bientôt mise à jour avec en plus des blogs nos sites chouchous et quelques liens générés aléatoirement dans la sidebar.

Un dernier point, une nouvelle organisation : parce qu’on parle de tout mais que tout n’intéresse pas forcément tout le monde on a créé 3 catégories générales (avec très prochainement un flux rss dédié à chacune).
Si on généralise y’a une catégorie plutôt mec, une catégorie plutôt fille et une mixte mais les choses ne sont pas si simples parce que de nos jours les mecs aiment avoir des astuces shopping et on trouve des trucs hyper geek dans les sacs des filles.
Là aussi ça va demander une petite mise à jour des anciens articles mais on fera ça au fur et à mesure hein.

Voilà, j’ai assez parlé. Je rajouterai juste que je suis très contente d’avoir atterri dans cet univers qui nous entraine vers de toujours plus folles aventures. En cette heure halloweenesque (oui j’ai tenu à ce que cette nouvelle version sorte le 31 Octobre à l’heure où les portes vers les autres mondes sont ouverts ;p) j’invoque les esprits et les prie de faire en sorte que ça dure toujours ;p.

A Benj côté technique maintenant.

• HISTOIRE 2 technique

Anne-Laure ne m’a pas facilité la tâche en créant un design qui était à la fois compliqué à intégrer et compliqué à faire fonctionner donc j’ai évidement décidé de créer le thème from scratch…
Je suis parti de la bonne vieille page blanche (scary :s).
Pour ceux qui voudraient créer leur thème wordpress de A à Z, il vous faut évidement une bonne maitrise du XHTML mais également un minimum de connaissance en PHP, pour vous aider à la mise en place du thème je vous conseille l’excellent article de fran6art -> créer un thème de A à Z.

D’un point de vue technique j’ai décidé d’utiliser le moins de plugin possible histoire d’éviter les galères de compatibilité des plugins à chaque mise à jour wordpress.

Les seuls plugins que j’utilise sont donc :

- Askimet : pour éviter le spam dans les commentaires (si seulement il pouvait exister un plugin anti troll ça serait cool ^^)
- FeedBurner FeedSmith : qui permet de remplacer automatiquement le flux rss par le flux feedburner
- Google XML Sitemaps : qui permet de générer le sitemap pour Google et les autres moteurs
- Subscribe To Comments : qui vous permet recevoir des notifications par mail si il y a des nouveaux commentaires sur un article sur lequel vous avez commenté (je comprends pas que ça ne soit pas intégrer à wordpress d’ailleurs).
- WordPress Related Posts : qui permet d’afficher en dessous d’un article les articles qui sont potentiellement liés à cet article (basé sur les tags)

Et c’est tout

Non j’ai en fait 2 autres plugins qui sont des widgets de la sidebar et que j’ai développé moi même (et oui monsieur) :

- H2 Blogit : qui permet de mixer mes blogit et ceux d’Anne-Laure en les triant par date
- H2 Random Links : qui permet d’afficher 5 liens (parmi tous les liens de notre blogroll) aléatoirement dans la sidebar avec un lien permettant de consulter toute la blogroll.

Ce dernier plugin, je l’ai développé après avoir lu l’excellent article de Romain sur Journal du blog.

Tout le reste est codé en dur dans le thème, à savoir :

- Photo du header aléatoire
- Formulaire de contact
- L’affichage des gravatars sur les articles, dans le header, et sur la page à propos
- L’affichage de la dernière photo Flickr et l’aperçu de notre dernière vidéo dailymotion dans la sidebar (c’est une de mes fonctions préférés :p)
- La possibilité de naviguer dans les archives par année/mois/articles
- L’affichage des sous-catégories en haut de la page lorsque l’on clique sur une catégorie principale (TECHNOLOGIQUE, ESTHETIQUE, SYMPATIQUE)
- Tous les liens dans le thème utilisent la fonction get_permalink($idPage) qui permet de récupérer les URL rewritées des pages
- Un style d’affichage différent dans les commentaires selon que ce soit le comment de moi ou Anne-Laure, un Ping, ou un de vos commentaires
- Le partage twitter et Facebook codé en dure à l’aide d’un simple lien
- l’intégration en dure de google Analytics dans le thème (le plugin que j’utilisais avant générait un bug dans les liens des commentaires)
- Et enfin le header qui m’a demandé pas mal de taff… Faire changer la partie sous le logo selon que ce soit la page d’accueil, un article, ou une page dédié n’est pas compliqué du tout, par contre afficher les informations relatives à un article dans le header était plus compliqué. En effet les fonctions permettant de récupérer les infos sur l’auteur, les catégories, les tags d’un article ne fonctionne que dans les Loop des wordpress… Hors le header est en dehors des loops… Mais qu’à cela ne tienne, un petit get_the_tags($post->ID); et un petit $curauth = get_userdata(intval( $post->post_author)); ont résolu le problème :p

Le dernier petit développement qui n’est pas terminé est la page de la blogroll…
Je suis entrain de travailler sur l’affichage des liens en ligne et en colonne avec affichage automatique du scrennshot du site.
Il me reste encore quelques petits ajustement mais ça ne devrait pas tarder à pointer le bout de son nez.
Et puisque vous le valez bien voici le lien de la page Blogroll en version beta : http://www.h2-blog.com/liens/?h2beta=1

Pour l’ensemble du thème j’ai essayé d’utiliser le moins d’image possible, les images les plus petites possible, et j’ai essayé de le rendre le plus compatible possible avec ce fucking IE6 (je vous en supplie foutez moi cette merde à la corbeille et passez sous Firefox ou chrome ou n’importe quoi …).

Les seuls choses qui bug sous IE 6 sont :

- l’image sous le logo rss qui est un png transparent (je la remplacerai prochainement pour corriger le problème)
- Le png transparent qui affiche une ombre sur les image flickr et dailymotion dans la sidebar. Pas de solution pour éviter ça et après tout vous n’avez qu’à pas utiliser IE6 :p
- Beaucoup plus embêtant : nous avons de nombreuses images de l’ancien thème qui sont trop large pour le nouveau thème (> 500px) du coup je masque la partie trop grande de l’image à l’aide d’un petit style css qui n’est malheureusement pas compatible IE6. Du coup si dans un article il y a une image de plus 500 px vous vous vous retrouver avec la sidebar sous l’article… Il y a des solutions qui permettrait de redimmensionner les images côté serveur mais ça ralentirait le site… Alors une fois de plus, vous n’avez qu’à plus utiliser IE6 :p

Reste à faire :

- Personnaliser la page de résultat de recherche
- Personnaliser la page de résultat lorsque vous cliquez sur un tag
- Terminer la page blogroll
- Mettre à jour notre blgoroll (euh si on se connait et que vous n’êtes pas dans la blogroll prévenez nous)
- Mettre les liens de notre blogroll dans des catégories (oui on aime beaucoup trop de gens :p)
- Utiliser le javascript pour charger Blogit express, flickr, dailymotion, et Mybloglog après que la page soit chargée en affichant un message de chargement. ça permettra d’accélérer le temps de chargement global de la page.
- Installer le plugin All in one SEO pour optimiser le référencement encore plus, notamment la personnalisation du titre des pages
- Plus 2 ou 3 autres petites optimisations.

Maintenant c’est à vous :

Si vous tombez sur un bug, un point à améliorer n’hésitez pas à nous le signaler.

Un petit mot pour la fin by me, BARBIE : on a conçue cette nouvelle version de manière à être intemporelle pour ne pas avoir à nous reprendre la tête de si tôt, mais si un jour elle nous sort par les yeux on re-travaillera tout ça. En attendant on est tout content \o/.