Irregulier

Parce qu’Irregulier me sert aussi beaucoup de pense-bête (me prouvant un peu plus à chaque article que je le suis), c’est au tour de mes activités webdesigneuses d’y passer. Voici donc une liste de ressources en ligne et d’outils installables qui vous aideront à créer un thème propre, accessible et compatible avec à peu près tout ce qui existe.

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 !