Pourquoi tout ce temps ? Travail, flemme, perfectionnisme, mésestime, flemme, manque de confiance, talent graphique d’un poi chiche, flemme… Les raisons sont nombreuses et coïncident avec le manque d’articles pour ce blog.

Vous aurez sûrement remarqué que ça n’a pas grand-chose à voir avec ce qui était présenté dans le Teaser. Disons que mon goût s’est un peu affiné depuis et que j’en suis pour une fois relativement content. Même si dans deux semaines je voudrai en rechanger, oui.

Les nouveautés :

• Un thème plus simple, avec une meilleure largeur pour le contenu et moins de défilement.
• L’utilisation des dernières fonctions de WordPress génération 2 (donc les vignettes).
• Les « brèves courtes », le format dont j’ai promis qu’il aiderait à une écriture plus régulière. Même si comme vous l’avez vu, le « court » en est encore au stade expérimental.
• Des boutons de partage Facebook et Twitter. La base, pas plus, pas moins. Ce sont les deux réseaux que j’utilise et je n’ai aucune raison de faire plus. J’ai même des raisons pour ne pas le faire, voir plus bas.
• L’affichage de mon Gravatar (la photo en bas d’article) qui ouvre la porte aux rédacteurs invités, qui ne tarderont pas à arriver.

Pour les geeks

Le thème est codé en HTML5 avec des morceaux de CSS3 et une pincée de jQuery. Donc je devrais m’en sortir un peu mieux niveau sémantique et référencement et surtout être assez prêt pour la finalisation de la norme. Conséquence : les IE l’affichent très, très mal. Un vrai massacre surmonté d’un nag les invitant à changer pour un vrai navigateur. Oui, c’est l’attitude qu’on ne devrait jamais avoir mais pour le coup, ça défoule.

Vive IE6, vraiment.

En plus du thème, deux extensions ont changé, Lightbox 2 (que je conseillais pourtant avant) et Cleaner Gallery, incompatibles avec jQuery et remplacés par jQuery Colorbox. Mon nouvel amour.

Tant qu’on en est à la technique, l’invalidation W3C (que vous aurez testé en bon sadique) est due aux boutons de partage et surtout aux extensions. Donc à moins que je les recode… Vous devrez faire avec.

Les polices viennent de FontSquirrel et sont disponibles uniquement pour les navigateurs supportant le CSS3 (les IE en plus, ironiquement). Ces polices et les images ne sont pas vraiment optimisées pour le Web, je m’y attèlerai un peu plus tard.

Le parti pris de la page d’accueil composée d’images avec les infos au survol vient simplement du concept même d’Irregulier : un endroit où chaque publication est un petit événement en soi qui doit se différencier. Aussi, ils sont assez peu nombreux (moins de 20 depuis un an) et chacun assez longs, donc c’est surtout le moyen de les mettre en valeur sans effrayer le chaland qui voudrait passer 30 secondes. Il suffira qu’il clique pour que le piège de ma magnifique prose se referme sur lui comme un coquillage doigtovore. Intelligent et fourbe, tout à fait.

Facebook = Devil. Period.

J’ai déjà pas mal écrit à ce sujet sur ZDNet, mais je préfère le répéter ici : Open Graph est l’incarnation de ce que tout développeur Web un minimum scrupuleux appelle Satan.

En promettant monts et merveilles aux créateurs assez crédules, Facebook s’immisce partout sur le Web sur la foi d’un parc d’utilisateurs aux chiffres invérifiables. Les boutons « J’aime » et les connexions automatiques par Open Graph ouvriraient ainsi le moindre petit site ex-yougoslave ou crypto-cubain à 400 millions de comptes… Dont combien inactifs, ou jamais utilisés ?

D’autant que ce nouveau système s’accompagne de couacs dignes de débutants (à leur échelle hein). Owni se charge aussi, sadiquement, de nous rappeler ce que pensait Mark Zuckerberg des premiers Facebookeurs. Comment avoir confiance dans ces conditions ?

J’ai pourtant installé le lien pour le partage des articles sur le mur Facebook. Il ne m’engage à rien, ne me fournit aucune de vos informations (je n’aurai même pas de statistiques d’envois) et permet à mes papiers une bien meilleure visibilité sur vos fils d’information que tous les « Barbie aime Guide du lissage parfait – Cheveux.com » obtenus avec un bouton « J’aime ».

Facebook, même si j’y suis accro, me fait sincèrement peur. Entre toutes les mises en gardes (que ce soit du génial Jason Perlow ou de @zephoria) et les récaps du New York Times (en plus de tous les articles « Quittez ce site »), le climat est à la défiance et Open Graph est une arrivée de Zuckerberg avec des gros sabots boueux sur la moquette de la vie privée.

Même s’il utilise OAuth (aussi utilisé par Twitter) et s’appelle « Open », c’est un mastodonte Web 3.0 fermé, propriétaire et surtout hautement commercial sous couvert de « rapprocher les gens ». Avantage : cette double casquette « technologie et idée à la pointe » et « modèle propriétaire » devrait favoriser l’émergence d’une concurrence libre et décentraliser. Vivement d’ailleurs que 6d se professionnalise.

Voilà donc pourquoi je n’intégrerai pas Open Graph et surtout pourquoi je vais sûrement assez vite être amené à limiter mes activités Facebook pour me concentrer sur Twitter, jusqu’à ce que lui aussi me fasse peur. Au suivant.

Je ne garantis pas que vos résultats soient de bon goût. Non, surtout pas avec toi…

C’est juste une liste de liens utiles, rien de prétentieux, rien d’exhaustif. De rien.

Création du thème (avant de passer à WordPress)

Partons de la base que vous travaillez comme moi : créer une page HTML pour chaque scénario (page d’accueil, affichage d’un article, affichage des résultats de recherche (par mots clés ou par calendrier), page d’erreur…) qui sera adaptée à WordPress.

Le meilleur texte pour une page en création, ce n’est pas du Rimbaud mais du latin, à savoir le Lorem Ipsum (voir le générateur en milieu de page, anglais). Les avantages ? Vous n’avez pas envie de le lire et la structure des phrases est très proche du français.

Pour bien écrire votre code CSS, rien de mieux que les 15 conseils de NetTuts+ pour produire une gelée lisible (en anglais).

Pour s’assurer que le site est un minimum accessible, en clair que vous respectez quelques règles de base, voici les 10 pires crimes de l’usabilité, listés par Line25 (en anglais).

Le plus simple pour s’y retrouver dans un site web, c’est le Fil d’Ariane. Voici un petit guide des bonnes pratiques quand on en crée un (anglais).

Marre des limites en typographie web ? Tentez les font-face dans vos feuilles CSS. Nice Web Type vous aide (anglais) dans cette démarche.

Quelques conseils de bon sens :

• Dans votre code HTML, n’oubliez pas de bien indenter vos sous-parties (ajouter du retrait).
• Dans le code, toujours, séparez bien les parties entête, corps, barre de côté et pied de page. Par plusieurs sauts de ligne s’il le faut. Chacune correspondra à un fichier distinct dans le thème WordPress.
• Pas de Comic Sans. Sinon je viens vous tuer.
• La navigation, c’est à gauche. Pas ailleurs.

Adaptation à WordPress (partie code)

Et c’est parti pour la partie lourde du travail.

Le top du top est toujours le tutoriel de Fran6art sur la création d’un thème WordPress. Pour tout ce que vous devrez intégrer de basique, vous ne pouvez lire mieux.

Ceci étant, le WordPress Codex (anglais) est une autre ressource indispensable. Voire plus indispensable que le premier. Vous y trouverez absolument tous les codes et conseils nécessaires à des intégrations plus avancées.

La page listant tous les Template tags (ce qui permet d’appeler les fonctions WordPress dans votre HTML) est obligatoire.

Sur le même site, la liste des codes CSS générés par WordPress (comme les alignements et légendes) est à intégrer impérativement dans votre feuille de style CSS. Sinon ? Sinon la plupart des fonctions de l’éditeur visuel d’articles ne fonctionneront pas. C’est tout.

De très bons conseils pour l’optimisation de votre WordPress, c’est cadeau.

Dans le plus dispensable

L’intérêt d’un blog collaboratif, c’est d’en promouvoir les auteurs. Line25 vous explique comment créer une section Auteur (anglais) dans vos pages, avec les Template tags.

Du côté des commentaires, vous avez trois solutions : garder celui de base, reprendre l’un des nombreux modèles existants ou créer le vôtre. Vu que la troisième est la plus intéressante (notamment pour l’imbrication comme sur Irregulier), NetTuts+ dévoile tous les secrets du système de commentaires (anglais).

Autant pour les articles que les commentaires, les Gravatar se sont très vite imposés comme la solution universelle pour avoir un avatar (image personnalisée qui apparaît à côté d’un message, liée à votre adresse email) sur WordPress. Le codex WordPress vous explique comment intégrer ces Gravatar (anglais), très simplement.

Les champs personnalisés dans les articles WordPress peuvent tout permettre avec un peu d’imagination. Comme attribuer une « vignette » à chaque article, qui s’affichera à sa place sur la page d’accueil par exemple. Tutorial9 vous explique comment ajouter des vignettes avec ces champs personnalisés. Il semblerait que ça devienne une fonction par défaut dans WordPress 2.9, à vous de voir.

Vous voulez intégrer un flux RSS externe (Twitter par exemple) en ayant un contrôle total sur le code et la mise en page ? WebRankInfo vous donne les clés pour y parvenir.

Cinq extensions qui vont bien

Pour savoir qui regarde votre site, en venant d’où et savoir combien de temps ils restent, la meilleure solution est WordPress.com Stats, nécessitant un compte WordPress.com. Il vous affiche quotidiennement sous forme de diagrammes toutes les statistiques de visite de votre blog, et c’est beau.

Google XML Sitemaps Generator génère automatiquement un plan de site à destination des moteurs de recherche, au cas où les permaliens de vos billets ne suffisent pas.

WordPress Video Plugin vous aide à intégrer en toute simplicité des vidéo à partir de sites comme Youtube ou Dailymotion. Bien plus simple et propre que l’intégration en brut des lecteurs exportables.

Lightbox 2 est le porte-étendard des lightbox, ces boites flottantes en javascript qui permettent d’afficher les contenus (souvent des images) dans une boîte flottante au-dessus de vos pages.

Cleaner Gallery rend ces lightboxs complètement compatibles avec les galeries générées par WordPress.

Comme sur l’iPhone, vous avez une extension pour chacun de vos besoins, direction le dépôt officiel des extensions pour trouver votre bonheur.

Adaptation à WordPress (partie logicielle)

Côté code et intégration, je suis un accro à Dreamweaver. Si l’idée d’utiliser un logiciel Adobe vous répugne, pensez à Notepad++.

Le mieux pour créer un thème WordPress, c’est de le tester en direct. Le mieux pour tester en direct, c’est tester en local. C’est là que Wamp (pour Windows, en anglais) intervient : il crée un serveur Apache sur votre ordinateur, en prenant le dossier C:\wamp\www comme racine de http://localhost. Le top.

Oui, cette partie était courte.

Deux sources d’inspiration

Deux thèmes inspiratoires pour deux niveaux : le premier pour une création très propre, la seconde pour exploiter certains aspects avancés de WordPress.

Première source d’inspiration, le très connu iNove. C’est un bon exemple d’intégration intelligente des fonctions WordPress, donnant un code lisible et efficace. Du côté du CSS, quelques petites astuces comme les icônes en un seul fichier image exploitent quelques bonnes pratiques.

La seconde est Panorama (le thème actuel de ce blog), qui permet de comprendre la création d’un système de commentaires imbriqués, la possibilité de fonds aléatoires, d’un nuage de tags ou encore l’ajout d’un menu d’options (propre, toujours) dans le Tableau de bord.

Voilou.

Vérification et compatibilité (plus généralement)

Encore une partie un peu longue, même si pas trop. Quand même.

Le propre de tout bon développeur web, c’est de vouloir être en accord avec les standards du W3C. C’est pour cela que le validateur de balises du W3C (HTML) et le validateur de feuilles CSS du même W3C sont vos deux marques-pages favoris à partir de ce moment.

Sur la même note, les autres outils du W3C vous permettent de vérifier vos liens et flux RSS.

Web Accessibility Evaluation Tool (Wave, anglais), lui, vous aide à établir si votre site est accessible ou non, en clair si rien ne peut obstruer la lecture de votre site pour de vieux navigateurs, des personnes déficientes ou encore les moteurs de recherche. Que ce soit vos liens, la structuration de vos unités d’information (titres, contenus) ou éléments javascript, il vous aidera à remarquer ce qui cloche dans votre travail.

L’analyseur d’images de Juicy Studio s’occupe enfin de vérifier vos images : sont-elles bien insérées ? Ont-elles toutes un texte alternatif ? Ça et bien plus évalué en quelques secondes, pour vos beaux yeux, en page par page et très jaune malheureusement.

Du côté des extensions Firefox, je ne peux que vous conseiller Firebug. Ce petit insecte affiche sous la page le code HTML, modifiable en direct avec quelques outils d’évaluation bienvenus. Un bonheur.

Sur le même Firefox, Web Developer est une barre d’outils qui se charge d’inspecter l’accessibilité de votre site, notamment en désactivant le javascript, le CSS, les images, en réduisant la fenêtre à des tailles personnalisables ou en donnant des informations sur les blocs dans vos pages. Une mine de fonctions indispensable.

Les navigateurs

Pour tous les flemmards, la liste des principaux navigateurs qu’utilisent vos visiteurs. Pour les mobiles et smartphones, c’est à vous de voir !

IETester passe votre site au moulin des moteurs d’Internet Explorer 6, 7, 8 et l’actuel installé chez vous. Vous n’avez plus d’excuse pour vos codes javascript capricieux.

Mozilla Firefox est le concurrent phare, et pas pour rien. Un indispensable pour votre développement.

Google Chrome est en pleine prise de vitesse, c’est bien. Ce qui est mieux est qu’il utilise presque exactement le même moteur que Safari, Webkit. un site qui s’affiche bien avec l’un s’affichera de la même manière sur l’autre.

Opera reste toujours minoritaire mais attestera le mieux de votre respect des standards. Mieux le site se comportera avec Opera, plus il sera pérenne.

Voilà, c’est fini !