CSS & Webdesign » Thème

9 ressources pour web designer

Bruno Bichet — Sat, 25 Feb 2012 18:04:51 +0000

Il ne se passe pas une journée sans qu’un ou plusieurs liens ne tombent dans ma veille technique et attirent mon attention. Ces liens se retrouvent généralement sur mon compte Diigo. En voici une sélection triée sur le volet qui comprend des informations sur les standards du web et le W3C, l’accessibilité des icônes créées avec font-face, des ressources pour donner des couleurs à vos sites, des tutoriels pour apprendre Javascript et les API’s de Google, etc.

Standards du W3C — Après un bref historique sur l’histoire du HTML et les travaux du W3C et du WHAT WG, la présentation aborde le niveau de prise en charge des propriétés et API’s HTML5 par les navigateurs. Une présentation simple, rapide et qui va à l’essentiel.
Accessibilité des icônes “@font-face” — Le côté séduisant des icônes créées avec la propriété font-face ne doit pas nous faire oublier de penser à leur accessibilité par les lecteurs d’écran. (cf. 11 vidéos pour comprendre l’accessibilité).
CSS Color Palette extractor — Extrait les couleurs d’une feuille de style CSS sous la frome d’une palette des couleurs et des niveaux de gris. Idée originale et pratique de @mauriz.
Google Developper — Le site de Google pour maitriser les API’s de Google : Google+, Android, Chrome, Google Maps, Google TV, le e-commerce, etc.
Learning JavaScript Design Patterns — Un cours complet sur les bonnes pratiques de développement avec Javascript et jQuery.
ColorHexa — Informations sur les couleurs et conversion vers les modèles Hexadecimal, Binaire, RVB, CMJN, TSL, CIE-Lab, etc. ColorHexa gère également les correspondances de couleur complémentaire, analogique, triadique ou monochromatique.
Microthemer — Un plugin pour personnaliser votre thème WordPress visuellement, sans connaissance technique particulière. Fonctionne pour les thèmes : Twenty Eleven, Twenty Ten, Thematic et Toolbox. Via @BoiteAWeb.
Typography Converter — Un outil de conversion de mesures typographiques parmi la myriade des convertisseurs disponibles sur unitconversion.org. Un must-have à garder sous la souris.
La timeline de la création numérique — Last but not least, voici une présentation rapide de mon nouveau projet pour tous les designers : web, print et au-delà.

Retrouvez-moi sur Twitter à travers mon compte @br1o, histoire de faire plus ample connaissance o/

Articles sur le même sujet

Le petit journal du web — WordPress, développement web, etc.

Bruno Bichet — Sun, 11 Dec 2011 11:46:10 +0000

Dans ce petit journal du web, je vous propose quelques liens qui ont retenu mon attention ces dernières semaines. Du côté de WordPress : optimisation de la base de données, des images, du cache, du nombre de requêtes dans les templates ; quelques diapositives issues du dernier WordCamp ; des explications sur le succès de WordPress face à ses concurrents ; un retour d’expérience sur la vente de thèmes WordPress ; et des fonctions utiles pour votre fichier functions.php. Du côté du développement web et du webdesign : une documentation interactive complète sur les API’s des langages du web (CSS, HTML, JavaScript, DOM & jQuery) ; un blog de qualité sur le développement web ; un tutoriel sur jQuery et un autre sur les fondamentaux de JavaScript ; et 18 outils gratuits pour faire des maquettes d’interface graphique. Et bien d’autres liens à garder sous la molette !

WordPress

Optimiser la base de données – Avec le temps, les performances de WordPress baissent à causes des modifications qui affectent la base de données. Pour retrouver un WordPress frais comme un gardon, sortez les gants et préparez-vous à faire le ménage.
Performances dans WordPress — Des conseils pour optimiser les images, l’inclusion des fichiers Javascript et CSS, la gestion du cache, le nombre de requêtes dans les templates, les appels aux API externes et le fichier .htaccess.
Vendre des thèmes WordPress — Présentation de Francis Chouquet à l’occasion de WordCamp Paris sur son retour d’expérience concernant la vente de thèmes WordPress à travers le site Peaxl.com.
Site de presse avec WordPress ? — Retours d’expériences de Lagazette.fr, un «gros» site qui tourne sous WordPress.
Hegemony of WordPress – Si Drupal et Joomla! n’ont (presque) rien à envier à WordPress, comment expliquer l’hégémonie de WordPress lorsqu’il s’agit du choix d’un CMS ?
10 Must Have Hacks For WordPress – Voici 10 fonctions à copier-coller dans votre fichier functions.php pour obtenir : des boucles personnalisées, une liste de billets en relation avec d’autres en fonction des tags qu’ils partagent, afficher les billets populaires dans la sidebar, afficher des publicités dans le flux RSS, ajouter un fil d’Ariane pour guider vos visiteurs, afficher une sidebar selon l’article affiché, etc.
Créer un thème de A à Z — Ce tutoriel écrit par @bbx est destiné aux graphistes et aux intégrateurs qui débutent dans WordPress. Néanmoins, une connaissance du HTML et des CSS est requise. Si vous le souhaitez, allez lire [son] autre tutoriel : CSS l’Art et la Science.

Développement web

DocHub – Recherche instantanée dans la documentation des langages CSS, HTML, JavaScript, ainsi que du DOM et de jQuery. N’oubliez pas le compte Twitter @documenthub. Via @ThierryRoget du blog éclectique roget.biz.
Friendly Bit – Le blog du développement qui vous écoute ! Des articles de qualité sur le développement web moderne et comment bien l’utiliser.
jQfundamentals – Tutoriel complet sur jQuery (contenant de nombreux exemples d’illustration) écrit par Rebecca Murphey avec notamment les contributions de James Padolsey (@padolsey) et Paul Irish (@paul_irish) dont voici les 11 chapitres :
1. Welcome,
2. JavaScript Basics,
3. jQuery Basics,
4. jQuery Core,
5. Events,
6. Effects,
7. Ajax,
8. Plugins,
9. Performance Best Practices,
10. Code Organization,
11. Custom Events.
Syntaxe des classes JavaScript – Tutoriel pour les développeurs PHP qui se lancent dans un projet JavaScript dépassant le simple scripting. Par Jean-Pierre Vincent (@theystolemynick).
jQuery.Buzz() — Restez à l’écoute de jQuery avec des ressources quotidiennes en provenance de sources diverses ete variées. Le site est parfois long à répondre ; suivre le compte Twitter @jquerybuzz ou s’abonner aux flux RSS du site est peut-être préférable.
Maquettes d’interfaces graphiques – Liste commentée de 18 outils disponibles sur MacOS, Windows et Linux pour réaliser des maquettes d’interface graphique (mockup ou prototype de site web).

C’est cadeau (ou pas)

Cerise sur la praline, voici les deux cadeaux numériques que je me suis offert dernièrement en guise de pré-cadeaux de Nowel :

SMACSS (Scalable and Modular Architecture for CSS) — Guide en ligne (gratuit) ou aux formats PDF, ePub et mobi (pour $15, soit 11.58 petits euros) de Jonathan Snook pour apprendre comment structurer ses CSS pour allier souplesse et maintenance à mesure que vos projets et vos équipes grandissent. Via t37.net.
Design Professionalism – Le guide du designer pour reprendre le contrôle de votre métier. Qu’est-ce que le métier de webdesigner ? Comment s’y forme-t-on ? Que peut-on attendre de ce métier parfois fascinant et souvent ingrat ? Andy Rutledge répond à toutes nos interrogations existentielles.

C’est fini !

Pour avoir des nouvelles régulières de mes dernières trouvailles réticulaires, je vous invite à visiter mes liens sur Diigo ou Delicious en fonction de vos habitudes (les deux sites sont pratiquement nourris au même grain en même temps). N’hésitez pas à partager vos liens préférés dans les commentaires.

Articles sur le même sujet

Le Petit Journal du Web — 09/2011

Bruno Bichet — Tue, 27 Sep 2011 12:45:23 +0000

Le dernier Petit journal du web paru sur CSS & Webdesign remonte à loin. Pour me faire pardonner, voici les meilleurs liens sur lesquels j’ai trébuché au mois de septembre. Au menu : thème WordPress pour démarrer vos projets de site web ; tutoriel interactif pour apprendre les bases de la programmation en général et Javascript en particulier ; coins arrondis propres pour vos images ; mise en place un Content Delivery Network (CDN) pour améliorer les performances de vos pages web ; tutoriel plein de poésie pour apprendre les CSS ; menu déroulant dédié aux smartphones iPhone, Android, etc.

WordPress Basics — Actuellement en version 0.2.8.1, le Blank Theme Basics est accompagné du thème enfant Beyond Basics pour simplifier le thème parent, faciliter les mises à jour et vous donner une plus grande souplesse dans la mise en place du design de votre site internet.
Codecademy – Apprennez les bases de la programmation Javascript de manière interactive et pro-active. Via roget.biz
CSS3 Rounded Image With jQuery – Arrondir les angles des images proprement avec CSS3 et jQuery pour éviter les effets parfois disgrâcieux de border-radius appliqué directement sur la balise . Voir la démo.
CDN Media Server — Boostez les performances de vos sites avec un « media server ».
CSS : l’Art & la Science — Un parcours initiatique à l’intégration web rempli d’humour et de poésie, par bbxdesign.
Menu déroulant pour mobile — Tutoriel complet sur la mise en place d’un menu accessible adapté aux périphériques mobiles grâce aux Media Queries. Le tutoriel idéal à tester avec mon tout nouveau Samsung Galaxy SCL qui me change de mon Sony Ericsson old School ! Voir la démo.

Articles sur le même sujet

Soyez « ♥ Basics »

Bruno Bichet — Thu, 09 Jun 2011 14:04:50 +0000

Le thème minimaliste WordPress ♥ Basics — initialement hébergé en sous-domaine de css4design.com –, bénéficie désormais d’un domaine et d’un blog dédiés. Pour le domaine, j’ai recyclé wp4design.com (commencé en français il y a quelques mois) dont le motto était : «WordPress je thème, le bonheur est dans le Codex». Avec le passage à l’anglais, le slogan est devenu : «Basics : A Hard Rock-solid Theme based on HTML5 Boilerplate For Those About to Rock with WordPress». J’ai traduit certains billets, tandis que d’autres ont rejoint css4design.com.

Le lancement d’un nouveau blog est à la fois excitant et angoissant. J’ai l’impression de repartir à zéro. Cet article fait le point sur les actions effectuées jusqu’ici pour faire connaitre ♥ Basics et le blog WordPress & Webdesign par la même occasion. A côté de la présentation du thème, le blog accueillera des articles courts concernant WordPress en général.

Devenez «Basics Supporter» !

Je mettrai à jour cet article régulièrement pour tenir le compte des actions futures. N’hésitez pas à parler de ♥ Basics sur votre blog. Vous apparaitrez d’une part à la fin de ce billet ; et d’autre part, je vous présenterai en tant que «Basics Supporter» dès que j’aurais pris connaissance de votre soutien :-)

Liste des actions

Mise en place du site http://wp4design.com

Télécharger Basics 0.2.4.1 (rubrique Jump!)
Tenir les lecteurs au courant de l’évolution du projet (rubrique News)
Expliquer le fonctionnement du thème (rubrique Tutorial)
Exemples de marquage HTML (rubrique Markup)

Promotion du blog sur les réseaux sociaux :

Ouverture du compte Twitter @wpbscs pour annoncer les billets parus sur le blog et les fonctionnalités ajoutées au fur et à mesure,
Lancement d’une discussion sur le groupe WordPress de linkedin.com,
Lancement d’une discussion sur le hub WordPress – Système de gestion de contenu open source sur Viadeo.com,
Publication des billets sur Scoop.it dans la thématique Webdesigner,
Publication du flux sur le profil Facebook Dotpress,

Bookmarks et Digg-like :

Communiqués de presse

http://dotpress.fr/basics-un-theme-wordpress-pour-les-createur-de-sites

Commentaires ciblés

Ils/elles ont cité Basics

Ils/elles ont testé Basics

http://www.pixeletcetera.com/

Inscription dans les annuaires de lien

http://www.el-annuaire.com/link-22154.html

N’hésitez pas à me suggérer d’autres actions pour percer dans la blogosphère anglo-saxonne.

Articles sur le même sujet

Duster — Nouveau thème WordPress HTML5 par Automattic

Bruno Bichet — Wed, 08 Jun 2011 17:09:43 +0000

Duster — A l’occasion de la sortie prochaine de WordPress 3.2, Automattic propose un nouveau thème par défaut pour remplacer Twenty Ten. Ce thème — déjà disponible au téléchargement — sera certainement amélioré pour tenir compte des fonctionnalités qui verront le jour avec la version 3.2. Contrairement à Twenty Ten, Duster utilise les nouvelles balises sémantiques HTML5. Pour ceux qui connaissent bien Twenty Ten et Toolbox, on peut dire que Duster est un savant mélange des deux. A tester sans tarder ! Via WordPress Francophone.

Articles sur le même sujet

WordPress Basics, mode d'emploi

Bruno Bichet — Tue, 07 Jun 2011 15:20:56 +0000

Après une discussion sur Twitter avec @agence_acs04 de l’agence ACS04 sur les améliorations à apporter au thème ♥ Basics, je me suis rendu compte que j’ai fait quelques erreurs de communication que je tiens à corriger. ♥ Basics est à l’origine un blank theme (une thème minimaliste) destiné aux développeurs et aux intégrateurs web. Il n’a pas vocation à être utilisé tel quel. L’organisation des fichiers est fait de telle sorte qu’il devrait être facile pour un intégrateur HTML & CSS connaissant WordPress d’adapter ce thème à ses besoins, en mettant les mains dans le code.

Par rapport au public visé, l’absence d’options pour choisir le nombre de colonnes, leur largeur, leur position, etc. est plus une fonctionnalité qu’un défaut. D’autres thèmes très bien faits, proposent ce genre de paramètres et le font très bien !

J’ai garni le fichier author.css avec une proposition de «Webdesign vite fait mal fait» pour que chacun puisse visualiser les fonctionnalités d’une part, et pour tester ♥ Basics en situation réelle, d’autre part. Chaque version est reflétée sur WordPress & Webdesign, ce qui permet d’éviter de gérer plusieurs versions en même temps.

Pour éviter les malentendus, j’utiliserai dans un proche avenir, un thème enfant sur wp4design.com, ce qui me permettra de supprimer mes CSS «perso» du fichier author.css tout en continuant à ne gérer qu’une version de ♥ Basics. J’en profiterai également pour tester sa capacité à supporter complètement les thèmes enfants.

Avant d’aller plus loin, j’attends les avis, suggestions des développeurs et des intégrateurs web qui auraient le temps d’installer ce thème. Pour ceux qui aimerait juste jeter un coup d’oeil sur les fichiers, il y a le dépôt SVN de WordPress.org où les fichiers de la version 0.2.4.1 sont accessibles :

→ http://themes.svn.wordpress.org/basics/0.2.4.1/

Mode d’emploi «express»

Voici la traduction du fichier readme.txt qui accompagne le thème ♥ Basics :

@package WordPress
@subpackage Basics
@author Bruno Bichet 
@version 0.2
@since Version 0.2
For Those About to Rock. Fire!

PREMIERE BOUCLE - FEATURED POST (home)
Le premier billet qui apparait sur la page d'accueil est un billet "sticky".
Si aucun billet n'a été qualifié de "sticky", le dernier billet publié prend la place.

SECOND LOOP - NEWS(home)
La second boucle sur la page d'accueil affiche les trois derniers billets
publiéS dans une catégorie spécifique.
Basics utilise la catégorie "non-classé" que vous pouvez renommer selon vos besoins.

LOGO
N'hésitez pas à remplacer le fichier logo.png situé dans le dossier /img par le vôtre ;)

NOTE
Basics n'est pas supposé être utilisé tel quel.
J'ai rempli le fichier author.css pour donner au thème un minimum de lisibilité.
Vous devriez supprimer tout le contenu de author.css pour donner votre propre style
à votre site. Toutefois, rien ne vous interdit d'utiliser
le thème par défaut comme point de départ si vous insistez ;)

Merci d'utiliser Basics.

We Salute You ;-)

Fonctionnalités principales

Basé sur l’organisation de HTML5 Boilerplate,
Sémantique HTML 5 (
,
,
,
, , , , etc.),
Fichier grid.css (en option) basé sur The Blue «940» Grid Simpler (le meilleur de Blueprint, The simpler Grid et 960.gs),
Système de CSS permettant de refléter certains styles CSS dans l’éditeurs WYSIWYG de WordPress,
Microformats,
Rôles ARIA,
Prêt pour l’internationalisation (version française déjà disponible),
Optimisations SEO,
Prêt pour les thèmes enfants,
Code (relativement) propre, via l’utilisation de fonctions simples, facilement modifiables,
Travail soigné (j’attends vos pistes d’améliorations).

→ Pour connaitre le détail des fonctionnalités ajoutées au fur et à mesure, je vous invite à consulter le fichier changelog.txt.

Tester WordPress ♥ Basics

→ Télécharger Basics 0.4.2.1

→ Version française de Basics 0.4.2.1 par Wolforg

Feedbacks

En ce qui concerne les retours d’utilisation, même si l’habillage actuelle est perfectible, ce n’est pas l’essentiel (je suis quand même partant pour améliorer mon fichier author.css). Je préfère que les personnes prêtes à tester Basics se concentrent sur :

L’organisation interne des fichiers de WordPress,
La sémantique HTML 5,
Les fonctions présentes dans functions.php,
Réduire le nombre de Warnings en mode debug,
Répondre à la charte d’utilisation du répertoire de thème WordPress (cf. notes d’un Themes Reviewer concernant Basics).

Articles sur le même sujet

Roots — Thème WordPress à base de HTML5 Boilerplate

Bruno Bichet — Tue, 07 Jun 2011 11:42:14 +0000

Roots — Ce thème fait la synthèse entre les templates de HTML5 Boilerplate et le thème Starkers HTML5. Il comprend également un framework CSS (960.gs ou Blueprint CSS) et inclut le microformat hNews pour donner encore plus de sens à votre site !

Parmi les plus : création automatique de contenu (oui, il est toujours fastidieux de créer des pages de tests) ; réécriture des URL pour les résultats de recherche ; la galerie utilise les balises HTML5 figure et figcaption ; ajout de réglages dans l’administration pour ajouter le code analytics, son compte Twitter, etc. (via @PierreTran)

→ Téléchargez Roots sur GitHub.

Articles sur le même sujet

9 thèmes WordPress HTML5 pour créateurs de thèmes

Bruno Bichet — Wed, 25 May 2011 09:14:58 +0000

De nombreux thèmes WordPress utilisent les nouvelles balises associées à la sémantique HTML 5. Voici une sélection de thèmes plus ou moins minimalistes qui devrait prendre place dans le dossier «themes» de votre installation WordPress. J’ai privilégié ceux qui pouvaient servir de base pour des développements plus personnels. Comme on n’est jamais mieux servi que par soi-même, j’ai pris la liberté de placer mon thème Basics en première position ;-)

WordPress Basics — Ensemble robuste (bien qu’en version bêta) de dossiers et de fichiers basés sur HTML5 Boilerplate et Toolbox. Mise en place des rôles ARIA (landmarks), des microformats (hCard, hAtom) et de la sémantique associée à HTML 5 quand cela faisait sens. ♥ Basics est un Blank Theme qui doit être prêt à accueillir tout type de contenus et/ou être facilement modifiable pour s’adapter à vos besoins en créant des thèmes enfants ou en dupliquant les fichiers après en avoir modifié le marquage HTML.
Toolbox — Thème WordPress HTML5 sémantique pour les artistes des CSS. Avec son jeu de Templates complet, cette boite à outils est un point de départ quasi parfait pour vos développements. Lire Toolbox — Un thème WordPress HTML5 par Automattic.
HTML5-Reset-Wordpress-Theme — Thème bâti sur les fondations de HTML5Reset.org avec des gros morceaux de HTML5 Boilerplate.
TwentyTenFive — Reprend le thème par défaut de WordPress 3 TwentyTen à la lettre à la sauce HTML5. Thème réalisé dans le cadre d’une collaboration entre Richard Shepherd et Smashing Magazine. Ce thème a fait l’objet d’un tutoriel complet sur la transformation de TwentyTen en TwentyTenFive. Voir le thème sur GitHub.
H5 Template Theme — La particularité de H5 est d’utiliser le moins de balises HTML possible en étant le plus sémantique possible : pas de div, de span ou de d’identifiants ! Encore un excellent thème pour progresser dans le minimaliste ;) Voir et télécharger H5 (ainsi que beaucoup d’autres thèmes). Ce thème a servi de base pour HTML5-Reset-Wordpress-Theme.
Starkers HTML5 — Encore un très bon point de départ pour démarrer un thème WordPress HTML5.
Temple Gate — Très beau thème HTML5 inspiré par les temples japonais. Temple Gate a été conçu avec l’accessibilité en ligne de mire : Section 508 et WAI-WCAG 2.0. Voir les nombreuses fonctionnalités de Temple Gate (lien de téléchargement dans l’article).
Thematic-html5boilerplate — Mélange de Thematic et de HTML5 Boilerplate. Reprend les fonctionnalités apparues dans TwentyTen (Images, Background, Widgets, etc.) ainsi que celles proposées par Thematic (contrôle des maquettes et du logo, etc.). Propose une foultitude de bonnes idées, notamment en ce qui concerne le SEO dans WordPress. Un peu trop complexe à mon goût.
Roots — Synthèse entre HTML5 Boilerplate, Starkers HTML5. A tester ! (Roots sur GitHub.)

PS : ce billet a initialement été publié sur WordPress & Webdesign où il a fait les frais (comme beaucoup d’autres) du passage à l’anglais. Merci de votre compréhension.

Articles sur le même sujet

WordPress de A à Z — A comme Allons-y ! (on s'organise)

Bruno Bichet — Tue, 12 Apr 2011 11:51:01 +0000

«A comme Allons-y !» est le premier billet d’une série d’articles sur la création d’un site internet avec WordPress que j’ai commencé avec Créer son site web avec WordPress de A à Z… avec le Codex. Il existe plusieurs approches pour mettre en place un site WordPress : modifier un thème existant ; ajouter les fonctions WP dans un gabarit HTML résultant de la découpe d’une maquette Photoshop ; ou créer les pages web directement dans le navigateur. Excepté pour le premier cas, on peut partir d’une feuille blanche, reprendre les éléments du projet précédent ou partir sur un thème minimaliste que l’on aura choisi avec soin.

Méthodes de conception : choisissez votre parfum

Il existe probablement autant de méthodes qu’il y a d’intégrateur WordPress. Voici un aperçu des principales techniques que j’ai eu l’occasion de rencontrer.

1. Modifier un thème WordPress

Partir d’un thème existant est une pratique qui semble assez répandue. La personnalisation d’un site réalisé de cette manière consiste le plus souvent à :

Trouver un thème qui se rapproche le plus des besoins.
Changer les couleurs du thème en ajoutant une feuille de style CSS après les autres, puis jouer sur la cascade pour «bypasser» les déclarations précédentes.
Repérer les identifiants des éléments qui serviront de réceptacle pour les images de fond que l’on aura créés ou piochées sur le web pour l’occasion.
Ne pas oublier de changer l’auteur du thème par son patronyme, bien entendu ^^

Si vous tenez absolument partir sur un thème WordPress existant, TwentyTen est votre ami ;-)

TwentyTen, le thème WordPress par défaut depuis la version 3

La première et dernière fois que j’ai utilisé cette méthode remonte à juin 2006 lors du lancement de ce blogzine. C’est dire tout le bien que je pense de cette méthode : les résultats sont rarement personnalisés. Ce genre de prestations est au web ce que la cuisine rapide est à la gastronomie : un mal parfois nécessaire… à éviter au maximum. Toutefois, cela permet de fournir rapidement un site web clés en main pour un client pressé ou avec un tout petit budget.

→ Si vous êtes souvent dans cette configuration, je vous invite à lire la partie du Codex intitulée Using Themes.

2. Intégrer WordPress dans un gabarit HTML

Cette méthode suppose que vous avez créé (ou que l’on vous a fourni) un ou plusieurs gabarits Photoshop. Après la découpe du fichier image, vous avez réalisé l’intégration HTML & CSS. Vous obtenez généralement une page d’accueil et une page pour afficher le billet seul. A partir de ces deux gabarits, vous déclinerez les autres contextes d’affichage.

Cette méthode transforme un simple intégrateur web en intégrateur WordPress et lui ouvre un hublot sur la partie développement PHP. J’ai coutume de dire que WordPress, c’est le pote développeur toujours prêt à donner un coup de main. Bon, j’exagère, il est souvent utile d’avoir de vrais potes développeurs quand même ;-)

Une fois finalisé, ce template Illustrator devrait faire un bon exemple d’intégration WordPress ! cf. Super Formateur HTML & CSS bientôt dans la place ?

Ex. de mise en scène du logo de ma prochaine activité de formateur web

→ Nous avons là, une méthode de travail éprouvée qui suit le flux de production habituel ce qui présente un intérêt certain en terme de contrôle qualité.

3. Créer un site WordPress dans le navigateur

Cette méthode fait l’impasse sur la partie maquette Photoshop comme préalable à l’intégration. Ce qui ne signifie pas que je délaisse mes outils de dessins préférés. Je les utilise pendant ou après la phase de mise en place de la structure du site. Cette méthode est un peu plus brouillonne que la précédente, mais permet de tester des nouveaux concepts, ce qu’il est déconseillé de faire lorsqu’on travaille pour un client. Je l’utilise plutôt pour mes projets perso.

L’article Conception dans le navigateur avec HTML5 & CSS3 explique comment utiliser HTML5 et CSS3 pour faire du web design dans Firefox ou Google Chrome !

Une esquisse rapide et hop ! on peut faire du webdesign dans le navigateur

Commençons à travailler

Maintenant que nous avons brièvement évoqué les différents moyens dont nous disposons pour aborder la création d’un site avec WordPress, nous pouvons commencer à mettre les mains dans le cambouis

WordPress Boilerplate

Jusqu’à il y a peu, j’avais l’habitude de partir d’une ossature, issue des derniers projets. Puis, je me suis laissé tenté par HTML5 Boilerplate comme point de départ pour aboutir à un fichier index.php en HTML5 comprenant l’ensemble d’un blog de base : en-tête, contenu principal, barre latérale, pied de page, etc. avec quelques boucles de base, deux ou trois zones de menus et autant de zone de widgets.

Thème Toolbox

Je suis ensuite tombé sur le thème Toolbox. C’est probablement un des meilleurs thèmes minimalistes pour WordPress. Il m’a séduit par sa ressemblance conceptuelle avec le thème Sandbox. Le fait qu’il soit créé par Automattic y est peut-être pour quelque chose. C’est en tout cas un très bon point de départ si vous n’aimez pas être dérangé par les fioritures inutiles qui détournent votre attention : il vaut mieux se concentrer sur son travail que sur celui des autres ;)

Organiser son plan de travail

Une fois que j’ai obtenu le bon mix entre Toolbox et HTML5 boilerplate (de nombreux thèmes WordPress en HTML5 sont basés sur HTML5 Boilerplate et/ou sur Twenty Ten) et que l’arborescence des différents dossiers est opérationnelle, je crée un dossier «Grenier» dans lequel je déplace tous les fichiers du thème à l’exception de index.php, de style.css et de functions.php pour maitriser les différents contextes d’affichage.

Ainsi, je peux adapter index.php à mon projet puis le dupliquer en single.php en allant piocher dans le «Grenier» — le cas échéant — les fonctions du core de WordPress dont j’ai besoin à chaque fois. A moduler évidemment selon le nombre et la complexité des modifications : il peut être judicieux de n’ajouter que quelques balises aux fichiers d’origines du thème plutôt que dupliquer le fichier index.php !

→ Cette méthode permet de se concentrer sur l’essentiel et d’éviter de surcharger le thème avec des fichiers et des fonctions inutiles. Elle offre un bon compromis entre le fait de ne pas réinventer la roue à chaque projet tout en étant très flexible.

Note : j’ai pris l’habitude d’utiliser le minimum de fichier pour gérer les différents contextes d’affichage. Toutefois, la hiérarchie des Templates nous suggère que l’existence de tous les contextes d’affichage pourrait avoir un impact sur les performances, vu que WordPress vérifie d’abord toute la chaine des fichiers possibles avant de se rabattre sur index.php. A ce niveau, les gains ou les pertes de performances sont-elles significatives ?

Organiser les feuilles de style

Comme je conserve l’arborescence de HTML5 Boilerplate pour faciliter les mises à jour, j’ai deux fichiers style.css : celui du thème Toolbox dans /montheme/style.css et celui de H5BP dans /montheme/css/style.css. Je déplace donc une partie du deuxième dans le premier dans lesque je place les styles « Auteur » et les déclarations qui suivent pour respecter l’ordre des éléments préconisés par le Template H5BP.

Les autres feuille de style CSS dont j’ai besoin restent dans /montheme/css/ et sont importées dans montheme/style.css. La question des performances due aux requêtes HTTP des multiples fichiers est réglé en fin du projet, généralement via le script PHP Minify ou son équivalent disponible dans W3 Total Cache. Si vous n’aimez ni l’un ni l’autre, vous avez toujours la possibilité de faire des copiés-collés de vos fichiers CSS dans le fichier style.css principal, c’est toujours marrant ;-)

En bref

Pas beaucoup de Codex dans cette première partie qui sert surtout à planter le décors. Le Codex viendra en son temps. En attendant, nous somme prêts à intégrer notre maquette dans une environnement stable et évolutif à la fois : de projets en projets, il suffira de vérifier HTML5 Boilerplate ou Toolbox ont été mis à jour pour bénéficier d’un environnement à la pointe des dernières technologies et des bonnes pratique de développement, autant en ce qui concerne le web en général que WordPress en particulier. En effet, un thème comme Toolbox est susceptible de refléter les avancés de WordPress d’une manière générale

Articles sur le même sujet

Créer son site web avec WordPress de A à Z… avec le Codex

Bruno Bichet — Fri, 18 Mar 2011 13:49:25 +0000

La saga Créer son site web avec WordPress de A à Z… avec le Codex — et quelques ressources supplémentaires, ne boudons pas notre plaisir –, débutera avec «A, comme : Allons-y !» et se terminera avec «Z, comme Z’ai fini !». Cet article est un prologue, un galop d’essai, qui me permets de présenter rapidement les ressources essentielles concernant WordPress. Lors de la création d’un site (ou d’un blog, soyons fou !) avec WordPress, il m’arrive souvent de chercher des informations en dehors du Codex. Or, sept fois sur dix, le Codex propose la même chose, souvent en mieux. C’est une véritable mine d’information qu’il est profitable de consulter en première intention avant d’aller voir ailleurs si le code est plus vert. A ce propos, de nombreuses ressources ne font que reprendre le Codex avec plus ou moins de bonheur, alors autant puiser la connaissance directement à la source.

Le bonheur est dans le Codex ?

Les exemples de codes disponibles dans le Codex répondent généralement à une majorité de besoins et il suffit souvent de les copier-coller pour obtenir un résultat satisfaisant. Pour aller plus loin, il suffira de vous rendre sur les forums de WordPress pour poser vos questions. Les réponses y sont généralement très pointues si vous prenez la peine de bien poser vos questions ;-)

Les liens contenus dans ce billet pointent vers la version anglaise du Codex. Il existe néanmoins une version française, plus ou moins complète et à jour (ce qui explique ma préférence pour la version originale). J’imagine aussi que la majorité des intégrateurs et des développeurs WordPress ont les compétences nécessaires dans la langue de ~~Richard Stallman~~ William Shakespeare pour se débrouiller ;-)

N’hésitez pas à vous rendre sur WordPress-fr, la communauté francophone du CMS WordPress. Ne ratez pas le blog qui présente les dernières actualités autour de WordPress et faites le tour de la planète WordPress avec une sélection des articles publiés par des blogueurs amoureux de WordPress.

Qu’est-ce qu’un thème WordPress ?

Faire un site avec WordPress revient à faire un thème WordPress. On peut faire un thème totalement fonctionnel avec deux fichiers seulement : index.php et style.css.

→ Using Themes explique rapidement ce qu’est un thème WordPress.

style.css

Le moteur de WordPress attend que votre feuille de style comporte deux ou trois lignes précisant quelques informations. Elles permettront de retrouver votre thème dans les options du panneau d’administration de votre site. Les tags permettent par ailleurs de qualifier votre thème dans le moteur de recherche de thème en donnant des renseignements sur la couleur, le nombre de colonnes, etc., ainsi que sur les fonctionnalités intégrées :

Post Thumbnails (vignettes miniatures)
Navigation Menus (menus de navigation)
Widgets
Post Formats (format de billet)
Custom Backgrounds (fonds de page personnalisés)
Custom Headers (Image d’en-tête personnalisée)
Editor Style (style pour l’édition des billets)
Automatic Feed Links

Voici le code permettant à votre CSS style.css d’être reconnue :

/*
Theme Name: WTF
Theme URI: http://css.4design.tl/wtf/
Description: WordPress Theme Framework
Author: Bibi
Author URI: http://css.4design.tl/a-propos/
Version: 0.1
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post
*/

En dehors de l’administration du site pour le choix du thème, il est possible de récupérer ces informations d’en-tête de fichiers. Pour afficher le nom de l’intégrateur et son site web, on peut utiliser la fonction get_theme_data() :

index.php

Ce fichier contient les appels de fonction du moteur de WordPress et les boucles PHP permettant d’afficher les contenus. Ce seul fichier peut gérer tout les contextes d’affichage (archives, recherche, page d’erreur, etc.). Dans la terminologie de WordPress, ces appels de fonctions s’appellent des Template tags, autrement dit, des marqueurs de modèles. Rien de très compliqué, il suffit de se laisser guider par le Codex.

Par exemple, pour afficher le nom du site et sa description, on fera appel à la fonction bloginfo() :

Comprendre la hiérarchie des templates

Si le fichier index.php vu plus haut peut afficher tous les contextes d’affichage (accueil, pages, article seul, catégories, tags, etc.), il est possible de créer autant de fichiers que de contexte pour personnaliser vos templates. Ainsi, si une page.php existe, elle sera utilisée à la place de index.php, c’est la même chose pour tag.php, search.php, category.php, etc.

Ce diagramme montre quel modèle de fichier est appelé pour générer une page en fonction de la hiérarchie des différents modèles.

La hiérarchie des templates dans WordPress. Cliquez pour agrandir l'image.

A Chaque fichier PHP correspond une fonction permettant de tester si l’on se trouve dans un contexte d’affichage ou non. Par exemple, en utilisant uniquement le fichier index.php, on peut mettre un marquage HTML différent pour le contexte des catégories avec is_category() ; des pages avec is_page(), dans une page affichant l’article complet avec is_single(), etc.

→ Lire la page consacrée aux tag conditionnels.

The Loop (1)

Le coeur de WordPress est consitué par la boucle (The Loop). Il s’agit d’un ensemble de fonction qui collecte les variables nécessaires à l’affichage des informations comme le titre de l’article, la date de publication, l’auteur, le contenu du billet lui-même et tout un tas d’autres choses dont l’énumération serait bien fastidieuse.

Exemple minimal de boucle :

→ Lire The Loop.

(1) Les titres auxquels vous avez échappé jusque là : Danse avec les loops ; She got the loop, Loop, y es tu ? T’en loop pas une… ;-)

Les marqueurs de modèle (Template Tags)

Il s’agit des variables ramenées par la boucle. Leur utilisation est très simple : il suffit par exemple d’appeller <?php the_title(); ?> pour afficher le titre du billet. De nombreux marqueurs comme the_title() doivent être utilisés à l’intérieur de la boucle tandis que d’autres sont plus génériques et peuvent servir à afficher la barre latérale de votre site, comme get_sidebar() si le coeur vous en dit.

→ Lire Template Tags.

WordPress & Webdesign

J’en profite également pour attirer votre attention sur mon petit blog WordPress & Webdesign (WP 4 Design) où vous trouverez des nouvelles de WordPress sur le même principe que Javascript et Webdesign (JS 4 Design) : des articles brefs mais courts.

Voici en avant-première une ébauche de logo pour l’en-tête de WP 4 Design. N’hésitez pas à me dire ce que vous en pensez. OK, c’est un peu plus qu’une ébauche, mais rien de définitif, surtout en ce qui concerne les couleurs.

Ebauche de logo pour WordPress & Webdesign

Comme d’habitude, j’ai commencé par le commencement, c’est-à-dire le contenu avant de réfléchir à son organisation. En attendant d’avoir pris un rythme de croisière pour mettre en place un design digne de ce nom, j’ai installé Toolbox. C’est un thème minimaliste HTML5 créé par Auttomatic croisé avec HTML5 boilerplate.