WordPress A à Z

Création de site WordPress de A à Z — B comme Basics

Je comptais terminer la série WordPress de A à Z avec la livraison d’un thème de base, mais il m’a semblé que livrer un thème minimaliste dès le début serait une meilleure idée. J’ai donc plongé plus profondément dans le Codex pour voir si l’eau était bonne. J’en ai profité pour organiser concrètement les éléments abordés dans WordPress de A à Z — A comme Allons-y ! : installer la dernière version de WordPress en français et HTML5 Boilerplate, puis ajouter les fonctionnalités du moteur de WordPress à l’aide du Codex. A l’issue de cet article, vous aurez donc un Blank Theme qui servira de support pour la suite des articles de cette série et de base pour de nouveaux thèmes WordPress. Dans cet article, j’ai choisi de détailler (parfois brièvement) l’ensemble des éléments composant Basics. D’autres articles viendront bientôt pour justifier certains choix ou expliciter certaines notions ; il reste encore pas mal de lettres dans l’alphabet après la lettre «B» 😉 Voici le sommaire complet des 26 articles de WordPress de A à Z. →

WordPress A à Z

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

«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. Voici le sommaire complet des 26 articles de WordPress de A à Z. →

Intégration web

Quelques notes sur les fonctions de l’intégrateur web et de l’intégratrice web

Parmi les nombreux intervenants dans la chaine de production des métiers de l’internet, l’intégrateur web est sans doute celui qui se cherche le plus. C’est le «vilain petit canard» de l’Open Space. Souvent coincé entre les graphistes et les développeurs web, il peut se sentir à l’étroit. Placé au bout de la chaine, de nombreuses erreurs de conception faites en amont lui tombent dessus, à commencer par les délais. Le retro-planning donne souvent l’impression d’avoir zappé le temps nécessaire à «l’intégration». Pourtant, l’intégrateur HTML & CSS est une ressource précieuse que toute entreprise sérieuse devrait valoriser. C’est le garant de la qualité globale du site mis en ligne, du respect de la charte graphique à l’expérience utilisateur en terme de performance d’affichage des pages. →

HTML & CSS

Définir le métier « intégrateur web » ou « intégratrice web »

Toujours en quête de concision et d’exhaustivité pour définir le métier d’intégrateur web — et puisque on n’est jamais mieux servi que par soi-même –, voici ma modeste contribution sous la forme d’une courte définition qui devrait prendre place prochainement dans une «fiche métier» consacrée à l’intégration HTML & CSS : →

Intégration web

Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3

Je viens de terminer le dernier livre de Raphaël Goetter intitulé CSS avancées. Vers HTML5 et CSS3 paru aux Editions Eyrolles mi-mars 2011 et préfacé par Daniel Glazman. Ce livre n’est pas une simple mise à jour de CSS2, pratique du design web paru en 2005 ; il s’agit d’une refonte totale avec une orientation «utilisateurs avancés». L’auteur commence par un état des lieux sur les standards du web et leur prise en charge par les principaux navigateurs : Internet Explorer (IE6, IE7, IE8, IE9), Firefox, Chrome, Safari et Opera. Le livre est ensuite divisé en trois parties : 1) tirer le meilleur de CSS, 2) HTML5 et CSS3 : l’innovation en marche, et 3) CSS et applications spécifiques. →

Conception de site web

CSS Sans Stress — Une formation intégrateur HTML & CSS

La plupart des formations dédiées à la création de sites web ressemble trop souvent encore aujourd’hui aux formations PAO d’hier où l’on apprenait à utiliser des logiciels sans rien connaitre des aspects «métier». A quoi bon connaitre les différentes manières de faire des colonnes dans Quark XPress ou InDesign et d’importer du texte et des images si l’on a aucune notion de mise en page et de typographie ?! C’est la même chose avec Dreameweaver ou votre éditeur HTML préféré. Les fondamentaux du graphisme et les principes de base de l’ergonomie doivent faire partie intégrante des projets de formation en Webdesign, sans quoi ils sont voués à l’échec. →

HTML & CSS

Css Sans Stress — Auto-formation HTML & CSS avec les Frameworks CSS

Les langages du web comme HTML et CSS sont structurés autour de concepts qui n’ont pas forcément de rapport avec la manière dont ils seront utilisés. Les concepteurs ne sont pas les auteurs ; il appartient à ces derniers de tâtonner puis d’en parler avec leurs voisins pour connaitre les bonnes pratiques du jour. Les spécifications sont très utiles pour comprendre la nature des balises HTML et des propriétés CSS mais ne suffisent pas pour réaliser un site Internet. Et pour cause : il n’existe pas de recette toute faite. Les ingrédients (les contenus) sont uniques et demandent un traitement graphique et un marquage HTML particulier. →

Applications autonomes

Minify — Accélérez l’affichage des pages en réduisant le nombre de requêtes HTTP

Minify est un script PHP5 dont l’objectif est d’aider les webmasters à atteindre un des objectifs les plus importants des règles de hautes performances pour les sites web proposées par Yahoo! : diminuer le nombre de requêtes HTTP. Pour y parvenir, Minify combine (concatène) les fichiers CSS ou Javascript. En prime, il supprime les commentaires et les espaces en trop. Minify se charge même de l’encodage gzip tout en envoyant les bons en-têtes (headers) au navigateur. →

HTML & CSS

Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »

Au menu de ce petit journal, je vous propose un pot-pourri de ce qui a retenu mon attention ces 30 derniers jours. La typographie sur le web avec Font-face et les différents formats de polices de caractère. Apprendre les bonnes pratiques en matière d’intégration HTML & CSS avec HTML5 Boilerplate. Choisir de mettre un reset CSS dans votre moteur ou une simple (mais complète) feuille de style de base. Approfondir CSS3 avec un tutoriel concret et utiliser les pseudo-classes `:before` et `:after` pour créer des ombres portées du plus bel effet. Mettre en place une feuille de style pour les périphériques mobiles et autres smartphones (iPad, iPhone ou Android). Avoir une liste d’outils pour vous aider à développer avec Internet Explorer (et IE6 en particulier). Et pour finir, reprendre les bases de Photoshop avec un tutoriel en 5 parties distinctes mais complémentaires. →

Ergonomie & Accessibilité

Une solution CSS accessible pour remplacer du texte HTML par une image

Dans l’article remplacer du texte HTML par une image avec CSS, j’ai listé un certains nombre de techniques efficaces permettant d’avoir un titre de niveau `h1` (par exemple) qui disparait de l’affichage au profit d’un visuel plus «sexy». Le but étant d’améliorer l’apparence du site et le référencement dans les moteurs de recherche. Toutefois, les solutions présentées n’offrent pas toujours une expérience utilisateur satisfaisante pour tous. Les utilisateurs de lecteurs d’écran comme Jaws ou NVDA risquent de ne pas y trouver leur compte. Certaines solutions sont «accessibles» uniquement lorsque les CSS sont désactivées et il faudra penser aux cas où les images sont absentes. →