Les langages du web HTML et CSS sont généralement structurés autour de concepts qui ont peu à voir avec la manière dont ils seront utilisés. Ce qui est normal après tout : les concepteurs ne sont généralement pas les auteurs. Il appartient à ces derniers de tâtonner un peu, beaucoup ou passionnément et d’en parler avec leurs voisins pour connaitre les bonnes pratiques du jour. Pour dire les choses autrement, les langages du web ne sont pas livrés avec «le» mode d’emploi. La plupart des tutoriels que l’on trouve sur le web reprennent généralement le découpage que l’on trouve dans les spécifications du W3C.

Si les spécifications sont très utiles pour comprendre la nature des ingrédients (balises HTML et propriétés CSS), elles ne nous disent pas grand chose sur la manière de les mettre en oeuvre pour réaliser un site web. S’il n’existe pas de recette toute faite, c’est certainement à cause des plats (les contenus) qui sont uniques.

Enfin, en même temps, on ne peut pas ne pas constater que les sites Web sont à 90% composés de :

• En-tête pour : logo, baseline, visuel, un ou plusieurs menus de navigation,
• Zone de contenu principale : texte, image, vidéo,
• Une, deux ou trois barre latérales (Sidebar) à droite, à gauche de la zone de contenu,
• Pied de page (Footer).

Depuis quelques temps, je réfléchis à la mise en place d’un plan de cours pour l’apprentissage du couple HTML & CSS. Dans l’idéal, cette formation devrait être :

1. Assimilable rapidement par les débutants qui n’ont jamais vu une balise HTML ou une règle CSS,
2. Convainquante pour inciter les créatifs à se pencher sur les notions d’intégration web,
3. Intéressante pour ceux qui utilisent ces langages dans leur vie professionnelle ou en amateur (dans le noble sens du terme).

La plupart des plans de cours sur le sujet séparent souvent l’étude du HTML des CSS. J’aimerais mettre en place une méthode globale s’inspirant (très librement) de la Programmation Orientée Objet (POO), en initialisant un super objet — le site web — englobant d’autres objets comme le header, la sidebar, les menus et les différentes zones de contenu que l’on trouve généralement dans un site internet ou sur un blog (titres, sous-titres, paragraphes, liste, etc.). A cet égard, HTML 5 permet d’aller dans ce sens avec les balises header, nav, article, aside, footer.

CSS et HTML sont dans un bateau…

Sans le HTML, les CSS ne servent à rien. Dans la pratique, on rencontre rarement HTML sans CSS. Au lieu d’aborder les deux langages de manière séquentielle, j’envisage de démarrer par la mise en place d’un vocabulaire de base qui fournirait les briques élémentaires nécessaires à la construction d’un site web. Cela pourrait s’effectuer en abordant les deux langages simultanément tout en ajoutant les notions d’ergonomie et d’accessibilité  : les bonnes manières s’apprennent dès le début.

Ces briques seraient composées de bouts de code, de module, de composés HTML & CSS «prêts à l’emploi» à expliquer aux apprenants par le biais d’exercices pratiques qui débuteraient le plus tôt possible dans la formation. L’apprenant serait ensuite invité à assembler ces briques pour construire une page web. Le formateur fournissant à cette occasion les indispensables conseils, trucs et astuces concernant l’apparence sur les différents navigateurs, l’utilisation des commentaires conditionnels, etc., selon le temps disponible.

Parmi les méthodes proposées dans les commentaires du billet d’Aymeric, nombreuses sont celles qui préconisent de partir du contenu pour commencer l’apprentissage de HTML. Je suis généralement le premier à prendre mon Stabilo ® pour baliser le contenu avant même de prendre une tablette graphique ou mon Notepad++. Toutefois, intégrer le balisage du contenu dans la formation peut s’avérer chronophage et ne pas trouver sa place dans le temps généralement impartie dans les centres de formation où un module de base dure rarement plus d’une semaine.

En outre, indépendamment du contenu, l’immense majorité des sites web partage les mêmes caractéristiques. On pourrait passer beaucoup de temps à lister tous les éléments constituant un site et faire des statistiques pour savoir si tel ou tel élément se retrouve le plus souvent dans le header, la sidebar ou le footer, etc. mais force est de constater qu’à ce niveau, un consensus se dégage : le logo, la baseline et le menu principal se retrouvent dans haut de la page tandis que les informations de contact et de copyright se situent plutôt en bas de la page !

On pourrait donc, dans le cadre d’une formation sur cinq jours,  fixer les idées autour des zones que l’on rencontre généralement sur les sites web ou les blogs :

1. un header (pour le logo, la baseline, la navigation principale et les liens d’évitement),
2. une zone de contenu…
3. … associée à une ou plusieurs barres latérales,
4. avec un footer (contact, crédits, copyright) pour finir.

Ce découpage mélange joyeusement l’analyse fonctionnelle et la présentation, mais présente l’avantage de fixer les idées sur des choses auxquelles les apprenants ont été confrontés, ce qui a son importance.

Pour aborder l’apprentissage des balises et la sémantique qui leur est associée, je propose de partir du logo qui peut être le premier niveau de la page d’accueil (ce n’est pas gravé dans le marbre, cf. 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO).  On pourra lui réserver la balise h1 avec un background pour l’image. On pourra masquer le texte d’une manière ou d’une autre.

Partant du principe qu’une zone de menu sera souvent composée avec une liste de liens, il me semble utile de proposer dès le début les méthodes généralement utilisées pour faire flotter les li, transformer les a en bloc, utiliser les images de fonds, etc.

Une zone de contenu secondaire est souvent représentée par une barre latérale placée à droite ou à gauche de la zone de contenu. Pourquoi ne pas introduire directement les notions de positionnement avec float et les positions relative et absolute ? Pour un débutant, ces notions ne sont pas plus difficiles à comprendre que le reste. Je me dis qu’elle seront peut-être même plus rapidement assimilées en les abordant dès le début, même si les notions de contexte de formatage ou de clearing ne sont pas très évidentes au premier abord.

Je reviendrais sur le sujet un peu plus tard selon vos retours. L’objectif est de remplir un programme de formation détaillé sur 5 jours permettant à des personnes ayant des pré-requis réduit au minimum de pouvoir créer une page web «classique».

Pour ne pas conclure

Ce billet est une ébauche que je compléterais au fur et à mesure de mes idées et de vos suggestions. Ce billet traine dans mes brouillons depuis que Aymeric a eu dès 2007 l’excellente idée de synthétiser les commentaires qui avaient suivis son billet sur le plan de formation idéal pour l’apprentissage du XHTML et des CSS que je vous invite à lire sans plus attendre.

Linkographie

• http://openweb.eu.org
• http://www.opquast.com
• http://www.w3schools.com
• http://fr.html.net/tutorials/html
• http://slaout.linux62.org/html_css/html.html
• http://www.elitwork.com/xhtml_tutoriel.html
• http://www.martiusweb.net/category/Tutoriaux/XHTML-CSS
• http://www.siteduzero.com
• http://css.mammouthland.net
• http://www.la-grange.net/w3c/html4.01/cover.html
• http://www.w3.org/TR/html5 et http://dev.w3.org/html5/spec-author-view/spec.html
• http://j-willette.developpez.com/tutoriels/html/les-bases-du-html
• http://reference.sitepoint.com
• http://htmldog.com

Articles sur le même sujet

• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Quelques notes autour du design fluide avec 3 colonnes du collectif Alsacréations
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours
• Quelques notes sur la balise h1 avec HTML5
• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire

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)

• 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 !

Articles sur le même sujet

• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le Petit Journal du Web — 09/2011
• WordPress de A à Z — E comme Extensions (les plugins)
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples
• 23 listes pour Webdesigners

Le calcul d’une grille de mise en page modulaire avec le nombre d’Or est une bonne occasion pour mettre en pratique le manifeste pour un interlignage minimum syndical et les cinq règles pour améliorer l’affichage de vos textes. L’objectif est de déterminer une taille de police de caractère et une largeur de colonnes d’après un interlignage «idéal». Après l’aperçu d’une méthode pour créer des gabarits destinés à l’imprimé, j’expliquerai comment utiliser l’interlignage pour concevoir des grilles adaptées à une résolution inférieure ou égale à 1 024 pixels de large. J’ai choisi un interlignage compatible avec le ratio du nombre d’Or typographique (1,5) et du nombre d’Or Classique (1,618). Toutefois, le concept de cette grille fonctionne très bien avec d’autres valeurs. J’ai mis des exemples de grilles réalisées avec Illustrator sous la forme d’un GIF animé (désolé).

Pour déterminer le pas d’une grille de mise en page pour le Web, on recherche souvent le meilleur rapport entre une largeur optimale (entre 900 et 1 000 pixels) et un nombre de colonnes divisible par deux, par trois et/ou par quatre. Les formats composés de 12 ou 24 colonnes répondent à ces critères (ce sont également des nombres hautement composés). On trouve aussi des grilles en 16 colonnes (nombre pratique). D’une manière générale, on privilégie les formats qui permettent des regroupements de colonnes variés.

Pour faire entrer ces colonnes dans une largeur donnée, on utilise la gouttière, l’espace séparant les colonnes, comme variable d’ajustement avec des valeurs allant de 10 à 30 pixels. Oui, vous avez bien lu : la gouttière, cet élément fondamental pour la respiration de toute grille de mise en page, n’est souvent que le rebut de calculs fastidieux !

Un gabarit de page pour l’imprimé

Pour définir une maquette de magazine destinée à l’impression, nous pouvons partir de la plus petite taille de caractère repérée dans les contenus (notes de bas de page, légendes, etc.) et augmenter la taille des textes en fonction des différents niveaux (notez que l’on peut aussi jouer sur la graisse, la couleur, le contraste, la casse ou un changement de fonte) :

• Notes de bas de page : 8 pt
• Légendes des photos : 10 pt
• Corps du texte : 12 pt
• Intertitres : 14 pt
• Rubriques  : 18 pt
• Titres de Chapitre : 21 pt
• Titre de l’ouvrage : 48 pt

En fonction du style et du public visé par la publication, nous déterminerons ensuite l’empagement à l’aide de tracés régulateurs pour obtenir des blancs tournants (les marges, pour faire simple), puis, pour chaque niveau, nous regarderons le nombre de caractères optimum qui nous donnera la largeur des colonnes, une des clés de la lisibilité et du confort de lecture.

Reste à voir combien de colonnes entreront dans le format dont nous disposons. Dans la plupart des publications, les marges servent de variables d’ajustement ; dans les ouvrages de luxe, c’est le format de l’ouvrage qui peut évoluer pour préserver des blancs tournants généreux.

Une maquette pour le Web

J’ai cherché la meilleure approche pour concevoir une grille modulaire sans trop me soucier ni du nombre de colonnes ni de la largeur totale de l’empagement, dans les limites d’une résolution d’écran de 1 024 pixels de large.

Une grille de mise en page vraiment modulaire à laquelle ce GIF animé ne rend pas justice !

La pêche à l’interligne

Et si la seule constante indépassable n’était finalement rien d’autre que l’interlignage ? En effet, s’il y a bien une chose d’un peu scientifique dans le processus de lecture, c’est qu’un interlignage possédant un ratio de 1,5 à 1,6 par rapport à une taille de caractère comprise entre 12 et 16 pixels, possède un potentiel de lisibilité en béton.

Après quelques essais, une valeur de 21 pixels pour l’interlignage s’est imposée. Ce chiffre correspond à la fois au produit du nombre d’Or typographique par un corps de texte de 14 pixels (1,5 x 14 = 21) et au produit du nombre d’Or tout court par un corps de texte composé en 13 pixels (1,618 x 13 = 21,034), ce qui permet de faire face à la plupart des situations. Un corps de texte en dessous des 13 pixels n’est de toute manière pas très raisonnable !

Les colonnes, les colonnes !

Il suffit d’utiliser cette valeur pour la gouttière et d’en faire aussi la largeur des colonnes pour obtenir une grille composée uniquement de modules de 21 pixels de large. C’est donc la largeur totale qui devient la variable d’ajustement à la place de la gouttière, permettant à cette dernière d’être en harmonie avec l’interlignage et un regroupement plusieurs colonnes comme 42px + 21px ou 63px + 21px et ainsi de suite.

Ce mode de calcul autorise l’affichage de 48 colonnes totalisant 987 pixels (48 x 21) – 21 qui se centrent parfaitement dans un écran de 1024 pixels, ce qui est bien pratique. Ces 48 colonnes sont divisibles par 2, 3 ou 4 autorisant de multiples regroupements pour obtenir pas moins de 13 combinaisons : 24, 21, 18, 16, 14, 12, 9, 8, 7, 6, 4, 3 ou 2 colonnes. A noter que le nombre 48 fait partie des nombres hautement composés, comme 12 et 24.

On peut aussi retrancher une ou plusieurs colonnes de chaque côté pour obtenir une largeur réduite : 22 colonnes pour une largeur de 903 pixels (ok, 22 ne se divise bien que par 2, mais n’oublions pas que les mises en page asymétriques en ont sous le talon aiguille !) ; 20 colonnes pour une largeur de 819 pixels ; ou encore 18 colonnes pour 735 pixels au cas où vous auriez besoin de concevoir pour une résolution en 800 x 600.

Adaptez, il en restera toujours quelque chose

Si vous trouvez que les valeurs proposées sont trop contraignantes, n’hésitez pas à partir sur une base de 20, 18 ou même 16 pixels pour votre gouttière et votre interlignage, sachant que les valeurs (taille du caractère / interligne) 12/20, 13/20, 14/20 mais aussi 12/18,13/18 ou encore 11/16 permettent une lisibilité à l’épreuve des «séniors» pour peu que vous soyez attentifs aux contrastes ;)

Ne vous faites pas griller

Les grilles sont une aide précieuse pour élaborer un design cohérent et ne sont pas très difficiles à mettre en place pour peu que l’on prenne le temps de se poser des questions sur leur rôle. Le protocole HTTP est sans état : c’est la persistance des éléments récurrents des pages que vous liez entre elles qui crée la notion de site Web. Pour autant, il est important de ne pas se laisser enfermer dans une grille : c’est vous qui devez la mettre «au pas» et non le contraire. En d’autres termes, ne vous demandez pas ce que vous pouvez faire pour votre grille, mais demandez-vous plutôt ce qu’elle peut faire pour vous !

Articles en relation avec les grilles

1. Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)
2. Grilles de Mise en Page | typographie web et print
3. Grille de mise en page, « zoning » et gabarit avec Adobe InDesign
4. Les frameworks CSS sont le nouveau format A4
5. #WDFR — Imprimez votre grille pour dessiner vos croquis
6. #WDFR : les Framework CSS en ont pris «plein la grille» pendant le WDFriday
7. Gridulator calcule la grille de votre design web
8. EmChart — Convertir des pixels en EM
9. Frameworks CSS — Blueprint vs 960 Grid System
10. Framework CSS — Sémantique, maquette dynamique et autres notes
11. Quelques notes sur les grilles de mise en page
12. Grid — Gardez le contrôle sur votre design web
13. Afficher / masquer votre grille de base avec jQuery

Brouillons en cours sur le même sujet

• Adapter votre grille aux agents utilisateurs avec les « Media Queries »

Articles sur le même sujet

• Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)
• Grille de mise en page, « zoning » et gabarit avec Adobe InDesign
• #WDFR — Imprimez votre grille pour dessiner vos croquis
• Frameworks CSS — Blueprint vs 960 Grid System
• 36 frameworks CSS — Mettez une grille dans votre design

Il existe de nombreux sites pour apprendre les ficelles des référenceurs. Mais quoi de mieux qu’un bon guide SEO qui reprend les bases pour faire le point sur les différentes techniques ? Réponse : quatre bons guides ! J’ai fait mon Monsieur Plus en ajoutant quelques ressources qui pourraient s’avérer utiles si vous voulez faire le point sur les liens qui pointent vers votre site ou si vous désirez surveiller vos contenus et votre réputation sur le web.

Tutoriels SEO

• Tutoriel Référencement Black Hat — On parle beaucoup de référencement Black Hat, mais qu’est-ce exactement ? Oseox nous propose un tutoriel afin d’y voir plus clair sur ces techniques que la morale réprouve ce qui est parfait pour éviter du faire du Black Hat sans le savoir ;)
• Tutoriel Référencement White Hat – Maintenant que vous connaissez les techniques à ne pas mettre en oeuvre si vous voulez rester du bon côté de force, voici un tutoriel composé de près de 50 articles pour optimiser le référencement naturel de votre site ou de votre blog.
• Le guide des redirections pour le référencement — Si les liens sont le sang du web, les redirections en assure la fluidité. Ce tutoriel aborde les différents types de redirection : Meta Refresh, Javascript, redirection 301, 302. Complète idéalement l’initiation aux différents types de redirections.
• Guide référencement — Tutoriel SEO en 14 parties qui part de l’état des lieux des moteurs de recherche en France jusqu’aux mauvaises pratiques et pénalités en passant par l’analyse sémantique, l’optimisation on et off page.

Outils SEO

• 5 façons de connaître des sites qui pointent vers votre blog — Si lesBacklinks sont le résultat de l’optimisation de votre site (SEO), ils en sont également la matière première. Il est donc indispensable de savoir si des liens externes pointent vers vos pages et leur origine, le cas échéant.
• Using Excel for SEO – the Grand Collection of Tips — Saviez-vous que Excel pouvait être un formidable outil pour être productif en SEO ?
• 16 ressources pour surveiller vos contenus et votre e-réputation sur le Web — Dans le même esprit que les outils qui permettent de savoir qui fait des liens vers votre site, il est important de veiller sur vos contenus et votre réputation sur le Web.

Articles sur le même sujet

• J’ai référencé mon site sur plus de 400 moteurs de recherche et annuaires de liens, j’ai bon ?
• 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO
• Aperçu instantané de Google, Webdesign et référencement naturel
• Référencement de sites Web — Chassez le naturel, il revient au SEO !
• SEO — Optimiser le référencement de WordPress avec les descriptions de tags

Le design dans le navigateur est une technique de Webdesign qui fait l’impasse sur la maquette Photoshop. Derrière ce concept se trouve l’idée selon laquelle dans « Webdesign » il y a d’abord « Web » : pourquoi commencer le travail dans Photoshop pour refaire ensuite presque la même chose en HTML et en CSS ? Surtout quand la prise en charge progressive de CSS3 par les navigateurs récents autorise des effets graphiques qui nécessitaient autrefois de nombreuses images et un marquage HTML surnuméraire…

Travailler directement dans le navigateur est l’occasion de pratiquer l’amélioration progressive ou la dégradation gracieuse selon le côté où l’on se place. L’amélioration progressive est une méthode de conception centrée sur le contenu : les effets graphiques sont ajoutés dans un deuxième temps pour les navigateurs modernes. La dégradation gracieuse privilégie l’apparence : utilisation des dernières technologies en première intention et mise en place de fallbacks pour que la page reste fonctionnelle sur les configurations plus modestes. Opposées en apparence, ces deux approches sont souvent complémentaires dans la pratique.

Dans ce tutoriel, après avoir crayonné une esquisse de la page sur le papier et choisi une palette de couleur, nous passerons en revue les balises HTML5 utilisées dans cet exercice de style. Nous verrons comment obliger Internet Explorer à prendre en compte ces nouveaux éléments. Pour finir, nous ajouterons du « volume » à la page grâce à la magie de CSS3. La page se présentera sous son meilleur jour dans les dernières versions de Firefox, Chrome ou Opera, tout en restant totalement fonctionnelle et très proche visuellement de « l’original » dans Internet Explorer 6, 7 et 8 malgré l’absence des effets.

1. Baliser le contenu

Pour mettre en œuvre le principe de l’amélioration progressive, il est important de commencer par le contenu. L’idéal est de faire un découpage HTML du matériel fourni par le client qui soit indépendant de toute mise en forme. La mise en page en plusieurs colonnes s’effectuera en ajoutant des balises div aux endroits stratégiques. N’hésitez pas à ouvrir le fichier index.php dans votre navigateur et votre éditeur préféré pour avoir une vision globale du code et suivre les explications sur l’utilisation des nouvelles balises HTML5.

Il s’agit bien du degré zéro de l’amélioration progressive mais cette page est déjà fonctionnelle dans tous les agents utilisateurs ! Son affichage est garanti sur tous les périphériques affichant du HTML quelle que soit leur ancienneté ou leur résolution d’écran (même les lecteurs vocaux devraient s’y retrouver). Il s’agit véritablement de la matière première brute de fonderie qu’il faudra styler pour aboutir à quelque chose de plus flatteur visuellement.

2. Ébauche de la page

Une fois que vos contenus textes et images sont été correctement balisés avec les balises HTML appropriées, il est temps d’ouvrir votre bloc-note préféré pour griffonner l’allure générale de votre page web :

Hé, pas besoin de Moleskine, n'importe quel cahier "premier prix" fera l'affaire !

Pas besoin de trop détailler. Il faut seulement faire ressortir la structure générale du site : empagement, en-tête, pied de page, nombre et emplacement des colonnes pour les articles et les barres latérales. Cette esquisse sert surtout de point de repère pour éviter de se disperser dans le feu de l’action.

3. Choisir les couleurs

Adobe Kuler est un outil en ligne très complet et intuitif pour créer vos palettes de couleurs

Le succès d’un site web repose en grande partie sur l’harmonie des couleurs utilisées. L’application en ligne Kuler d’Adobe contient plusieurs milliers de palettes de couleurs modifiables de manière intuitive. Nous récupérerons les valeurs HEX (hexadécimale) et RGB (Red, Green, Blue) des couleurs que nous auront sélectionnées.

4. Squelette de page HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Une page HTML5...</title>
</head>
<body>
<p>...avec du contenu.</p>
</body>
</html>

En HTML5 le doctype s’écrit en bas de casse mais pour des raisons de compatibilité avec les anciennes conventions héritées de SGML (Standard Generalized Markup Language), il est recommandé d’écrire DOCTYPE en lettres capitales. La présence d’une DTD permet aux moteurs de rendu des navigateurs web d’afficher les pages dans un mode standard (Standard Complient Mode).

J’utilise l’IDE (Integrated Development Environment) Netbeans (Notepad++ est aussi un très bon choix) et le navigateur Firefox équipé de Firebug. Je teste ensuite les pages dans un maximum de navigateurs : Google Chrome, Opera, Safari, Internet Explorer 6, 7, 8 (9 Preview) mais aussi sur des périphériques mobiles à résolution d’écran limitée (téléphone portable, Netbooks, iPhone, etc.).

5. Préparer Internet Explorer pour HTML5

<!--[if lt IE 9]>
<script>
    // http://remysharp.com/2009/01/07/html5-enabling-script/
    /@cc_on'abbr article aside audio canvas details figcaption figure footer header hgroup mark menu meter nav output progress section summary time video'.replace(/\w+/g,function(n){document.createElement(n)})@/
</script>
<![endif]-->

6. Structure générale de la page

Rien de tel qu'un croquis réalisé avec Illustrator pour y voir plus clair ^__^v

Là où HTML 4.0.1 n’offrait grosso modo qu’une balise div générique pour « div-iser » nos pages web, HTML5 propose différents éléments permettant d’affiner la structure d’une page : header, hgroup, section, aside, nav, article, footer, etc. Malgré des intitulés apparemment sans ambiguïté, l’utilisation de ces nouvelles balises n’est pas toujours simple : la compréhension des contenus fournis par le client est plus importante que jamais, ce qui devrait booster la dimension littéraire de votre intégrateur web ;)

7. `header`

Il s’agit de l’introduction du site ou d’une section de la page. Ici, nous avons trois niveaux d’en-tête. Un header contient généralement un ou plusieurs niveaux de titre h1 – h6 ou un groupe de titres hgroup. Il peut également abriter un formulaire de recherche, un menu de navigation, le logo ou tout autre élément en rapport avec la page ou le site web dans son ensemble.

8. `footer`

C’est en quelque sorte la conclusion de l’introduction du site ou de la section de la page auquel il se rapporte. Selon le contexte, footer peut contenir le copyright pour l’ensemble du site ou la date de publication d’une note. Dans l’exemple, j’utilise footer (et header) au niveau du body, de div#container et de article. Cette balise n’est pas nécessairement située en fin de section : elle peut se trouver juste après la balise header. On pourra en effet vouloir regrouper visuellement toutes les informations relatives à un article.

9. `hgroup`

Cet élément a pour vocation de regrouper différents niveaux de titre à l’intérieur d’un élément header. Typiquement : le nom du site et sa Baseline ou un titre et un sous-titre. La subtilité de hgroup tient au concept d’Outline qui permet de souligner la structure d’une page (si hgroup contient un h1 et un h2, seul le premier niveau sera pris en compte par l’Outliner).

10. `article`

Tout contenu indépendant susceptible d’être syndiqué dans un flux Atom ou RSS comme une note, une entrée de blog, un article de journal ou même un Widget interactif (un système de chat, par exemple) peut être enveloppé avec article. Cette balise peut également être imbriquée dans un autre élément article dans le cadre de commentaires laissés par les utilisateurs.

11. `section`

Une section est une portion plus ou moins importante de contenu avec au moins un niveau de titre. Tout ce qui se trouve à l’intérieur de section devrait pouvoir être isolé du reste et fournir une information autonome. Pour faire simple, l’élément section ne devrait pas être utilisé : Pour l’application de styles CSS ou d’ancrage pour du Javascript (préférez l’élément div), Si les éléments article, aside ou nav sont plus appropriés, Si vous n’avez pas de titre à mettre – et non, le display: none n’est pas une option ;)

12. `nav`

C’est un élément plus ambiguë qu’il n’y parait. On a envie de l’utiliser pour envelopper toutes les balises ul et ol de la page dès lors que les liens qui s’y trouvent pointent vers le site, mais cette balise est avant tout destinée à la navigation principale ! Un site web peut comporter plusieurs systèmes de navigation comme la listes des pages, les catégories ou les tags. Si ces listes sont de bonnes candidates pour la balise nav, il faut garder à l’esprit le concept d’Outline : la balise nav se porte mieux accompagnée d’un niveau de titre, en l’absence duquel il est préférable d’utiliser une balise div.

13. `aside`

Cet élément regroupe les éléments tangentiellement reliés au contenu. Il peut être utilisé de deux manières : dans une balise article, il pourra regrouper la définition des termes employés, les notes additionnelles, etc. tandis qu’en dehors, il pourra servir de barre latérale (Sidebar) pour accueillir des éléments de navigation, une liste de liens (Blogroll) ou encore la présentation de l’auteur.

14. Appliquer un reset CSS

Les navigateurs possèdent chacun une feuille de style par défaut, une sorte de degré zéro du design pour styler les balises HTML : les listes présentent des puces et sont en retrait, les titres ont des tailles relatives à leur niveau hiérarchique, strong est en gras et em en italique… Le fichier global.css est là pour mettre les navigateurs au diapason. Il est composé d’une version modifiée du reset CSS d’Eric Meyer et d’une partie du fichier typography.css du framework CSS Blueprint.

Le fichier style.css est composé de la redéfinition des styles via la règle @import global.css et des règles CSS spécifiques à la page index.php ainsi qu’aux autres pages du site, le cas échéant.

15. Styler les balises `html` et `body`

html {
    background: #380707;
    color: #CBB388;
}
body {
    position: relative;
    width: 960px;
    margin: 6em auto;
    padding: 1.5em 9px;
    border: 1px solid #1F0404;
    background: #590B0B;
}

Les effets CSS3

16. Les ombres portées et les dégradés

body {
    /* Degrade /
    background: -moz-linear-gradient(-90deg,#590B0B,#1F0404);
    background: -webkit-gradient(linear, left top, left bottom, from(#590B0B), to(#1F0404));
    / Ombre portee */
    -webkit-box-shadow: #000 0px 0 16px -1px;
    -moz-box-shadow: #000 0px 0 16px -1px;
    box-shadow: #000 0px 0 16px -1px;
}

17. Textes ombrés

#brand h1 {
    text-shadow: rgba(0,0,0,0.7) 2px 3px,rgba(255,255,255,0.7) 0 -1px;
}

18. Coins arrondis

.roundies {
    -moz-border-radius: 5px; /* Firefox /
    -webkit-border-radius: 5px; /Safari, Chrome /
    -khtml-border-radius: 5px; / Linux /
    border-radius: 5px; / CSS3 */
}

19. Égaliser les colonnes avec Javascript

<script src="column.js"></script>
<script>
    var divs = new Array('articles','sidebar-1','sidebar-2');
</script>

Pour aller plus loin

• Amélioration progressive
• Make Your Mockup in Markup (Design dans le navigateur)
• Kuler (Adobe)
• Netbeans
• Notepad++
• Firefox
• Firebug
• Outliner
• Reset CSS
• Blueprint
• CSS3 Generator
• CSS Balanced Columns

Bon à savoir

Cet article a paru en mai 2010 dans le Hors-Série n°5 du magazine Web Design consacré à HTML5, CSS3 et jQuery. Lire Webdesign Magazine — un Hors-Série n°5 spécial HTML5, CSS3 et jQuery pour plus d’information. N’hésitez pas à vous manifester pour ajouter votre grain de sel, en particulier sur sur partie concernant l’utilisation des balises HTML5 header, hgroup, section, aside, nav, article, footer, etc., d’autant plus que des changements ont pu survenir dans les Drafts du W3C depuis la rédaction de l’article.

Articles sur le même sujet

• Super Formateur HTML & CSS bientôt dans la place ?
• Quelques notes — Programme de formation HTML & CSS
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• HTML5 Please — Fallback et Polyfills (ou pas)

Blueprint et 960 Grid System sont deux frameworks CSS que j’ai utilisés parmi les 25 que j’ai recensés et survolés dans Choisir un framework CSS. J’ai ainsi pu me faire une idée plus précise de leurs qualités respectives. Je ne me suis pas attardé sur les aspects typographiques — même s’ils ont leur importance : j’ai préféré faire l’analyse du système de grille de mise en page (grid.css et 960.css). Pourquoi comparer ces deux frameworks ? Tout simplement parce qu’ils proposent pratiquement les mêmes «fonctionnalités» avec quelques différences dans la mise en oeuvre. Après une rapide introduction sur Blueprint et 960 Grid System, vous trouverez dans la suite de cet article une comparaison et une explication de code.

Introduction

Les frameworks CSS ont été conçus pour accélérer le processus de prototypage d’un site web tout en étant utilisables en production. Ils proposent généralement plusieurs fichiers dédiés à une tâche spécifique : reset CSS, gestion de la typographie, système de grille, etc. Les exemples de code proposés dans cet article ont été parfois remaniés par rapport aux originaux pour garder une certaine lisibilité.

Blueprint — Raccourcir les temps de développement

Créé par Joshua Clayton, Blueprint est le plus connu. Il possède l’éco-système le plus riche : tutoriaux, implémentation dans des thèmes WordPress ou Drupal, générateurs de grilles, etc. Il propose en outre une gestion complète des éléments HTML (notamment les formulaires). A côté du fichier grid.css nous trouvons : reset.css, typography.css, ie.css et forms.css, ainsi que :

• Des «utilitaires» comme la mise en place de bordures entre les colonnes,
• Des plugins permettent d’affiner la gestion des boutons, de la typographie, des icônes de liens, ou encore de modifier le sens de lecture pour les langues qui s’écrivent de droite à gauche,
• Un modèle de page (template) au format .psd est disponible pour faciliter la mise en place des maquettes,
• Blueprint est disponible sur Github.

960 Grid System (ou 960.gs) — Fluidifier le flux de production

Créé par Nathan Smith, 960 Grid System propose également un reset.css, une gestion minimale (mais suffisante pour commencer) de la typographie avec text.css et le système de grille avec 960.css ou 960_24_col.css. Il n’y a pas de fichier ie.css.

Même si l’éco-système est un peu moins riche que Blueprint, il propose l’essentiel :

• Fichiers de démonstration,
• Le générateur de grille offre le choix entre un design liquide ou fixe (pourcentage ou fixe),
• Fichier PDF à imprimer pour dessiner des maquettes,
• Nombreux modèles de page pour Expression Engine, Fireworks, Flash, Illustrator, Indesign, Inskape, Omnigraffle, Photoshop et Visio,
• 960 Grid System est disponible sur Github.

Chacun des deux frameworks existe en plusieurs largeurs (950px, 960px) avec un nombre de colonnes allant de 12, 16 ou 24. Toutefois, les nombreux générateurs de grilles vous permettront de déterminer : largeur, nombre de colonnes et gouttière adaptés à vos besoins.

Fonctionnalités principales des frameworks CSS

Largeur et centrage du site web

Les deux frameworks proposent la même chose :

.container { width: 942px; margin: 0 auto; } // Blueprint

.container_16 { margin-left: auto; margin-right: auto;     width: 960px; } // 960.gs

En ce qui concerne le nombre de colonnes et la largeur des gouttières, je trouve Blueprint un peu radin avec ses 10px là où 960 Grid System offre généreusement le double, soit 20px d’espace entre les colonnes.

Le seul endroit où les 10px de gouttière sont intéressants, c’est dans la version en 24 colonnes, ce qui permet d’utiliser une colonne entière (30px) pour séparer des groupes de colonnes à certains endroits et garder l’espacement de 10px pour rapprocher des contenus possédant un corps de texte plus petit et/ou répartis sur un plus faible nombre de colonnes.

Dans les exemples qui suivent, j’ai utilisé la grille que j’ai conçu lors du redesign de ce blog : 16 colonnes de 42px séparées par une gouttière de 18px pour une largeur totale de 942px.

Créer des colonnes et des gouttières

La création des colonnes pour le placement des contenus est l’élément fondamental d’un système de grille. Blueprint et 960 Grid System procèdent de manières différentes :

Blueprint

.column, .span-1, .span-2, etc. {
    float: left;
    margin-right: 18px;
}
.span-1 { width: 42px; }
.last { margin-right: 0; }

960 Grid System

.grid_1,.grid_2, etc. {
    display:inline;
    float: left;
    position: relative;
    margin-left: 9px;
    margin-right: 9px;
}
.container_16 .grid_1 { width:42px; }
.alpha { margin-left: 0; }
.omega { margin-right: 0; }

.last but not .least

Dans le cas de Blueprint, il faut ajouter une classe pour le dernier bloc afin d’annuler la marge de 18px avec .last { margin-right: 0; }. Quant à 960.gs, ce n’est pas la peine puisque les marges sont réparties de chaque côté. Là où ça se corse, c’est quand on a besoin d’imbriquer des colonnes.

Chez Blueprint, seule la classe .last est nécessaire pour chaque dernier bloc, tandis que 960.gs nécessite deux classes pour annuler les deux moitiés de marges : .alpha { margin-left: 0; } et .omega { margin-right: 0; }. Ca va sans dire mais mieux en le disant : on a pratiquement toujours besoin d’imbriquer des colonnes à un moment ou un autre.

.column ?

Cette classe peut servir à placer des blocs sans être obligé de leur donner une largeur. J’avoue m’en servir assez peu.

display: inline et position: relative ?

960 Grid System ajoute deux propriétés. La première (display: inline) sert à circonvenir un bug d’IE6 qui à tendance à doubler les marges lorsque des éléments flottent du même côté qu’un margin. position:  relative sert à positionner les blocs indépendamment de leur position dans le code HTML (voir plus bas).

Créer des colonnes vides avant et/ou après le contenu

Dans une maquette web, toutes les positions ne sont pas occupées par du contenu et il est bon que le site respire. Pour cela on pourra aérer toutes ces colonnes en créant du vide avant ou après. C’est là qu’interviennent les classes .prefix_1 et suffix_1 de 960.gs ou .prepend-1 et append-1 de Blueprint. Les deux frameworks ont opté pour un padding-left pour les premiers et un padding-right pour les seconds pour « remplir » les blancs afin de conserver une largeur égale à la largeur de votre .container.

Positionner des blocs à l’écran indépendamment de leur position dans le code

La position des éléments dans le code est souvent tributaire de la manière dont on veut les afficher à l’écran. Si vous désirez modifier la position de votre sidebar par rapport au contenu sans modifier l’ordre des blocs dans votre code HTML, il suffira d’utiliser les classes suivantes :

960 Grid System

.container_16 .push_1 { left:60px; }
.container_16 .pull_1 { left:-60px; }

Blueprint

.push-1 { margin: 0 -60px 1.5em 60px; }
.push-1, .push-2, etc. { float: right; position: relative; }
.pull-1 { margin-left: -60px; }
.pull-1, .pull-1, etc. { float: left; position: relative; }

Rétablir le flux HTML après l’utilisation des flottants

Pour rétablir votre flux HTML après les float: left, il existe plusieurs techniques dont j’ai déjà longuement parler dans les articles Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire et Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?

Les deux frameworks proposent un jeu de classes CSS qui devrait vous permettre de voir venir. Pour info, voici la technique utilisée par 960.gs :

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}
/ The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem./
* html .clearfix,
*:first-child+html .clearfix {
    zoom: 1;
}

.clear { clear:both; }

Conclusion

Il y a de bonnes idées dans les deux frameworks. Je ne suis pas fan de la gestion des marges de part et d’autre des colonnes de 960.gs : je préfére la simplicité de Blueprint. En revanche, je préfère les classes .push et .pull de 960 Grid System qui sont bien plus concises que celles de Blueprint. Pour finir, je trouve que le .clear de 960 Grid System mérite d’être renommé en .clear-hide pour pouvoir ajouter un clear: both simple mais toujours très pratique. Bref, il faut composer son propre framework CSS en piochant les bonnes idées à droite et à gauche.. Stay tuned!

Autres notes sur les frameworks CSS et le design par grille de mise en page

Framework CSS — Sémantique, maquette dynamique et autres notes

Les frameworks CSS ont fait couler beaucoup de pixels : d’un côté, ils proposent une méthode à l’épreuve des balles pour placer les blocs sur sur la page en tenant compte des contraintes cross-browser ; de l’autre, ils ajoutent des classes CSS superflues dans le code HTML pour la présentation des contenus, ce qui n’est pas jugé «sémantique» par les farouches défenseurs d’une séparation entre le fond et la forme. [...]

Quelques notes sur les grilles de mise en page

A mesure que les techniques des langages du web l’ont permis, des designers web talentueux ont travaillé à l’élaboration d’environnement de travail permettant de mettre en place des systèmes de grille adaptés aux contraintes de la création de pages web. Contrairement à l’imprimé où le langage de description de pagePostscript d’Abode est un standard, il n’existe pas sur le web de dispositif « officiel » pour créer des colonnes à l’épreuve des différences de rendu entre les agents utilisateurs (les navigateurs). [...]

Grid Design — Quelques notes sur l’intérêt des grilles de mise en page

La popularité des frameworks CSS s’accompagne d’une interrogation légitime sur le bien-fondé d’utiliser une grille pour le placement des éléments du design. Comme je l’ai déjà évoqué dansFramework CSS — mettez vos grilles au pas ! je m’interroge sur l’intérêt de travailler sans grille et je soupçonne leurs détracteurs de jeter le bébé avec l’eau du bain. Le problème vient sans doute du terme grille lui-même. Peu gratifiant, il évoque la prison, la clôture, la répétition, l’uniformité… Bref, tout le contraire des aspirations du créatif qui refuse de brider sa créativité sur l’autel d’une vision mécaniste du processus créatif [...]

Boks — Éditeur visuel de grilles CSS pour Blueprint, etc.

Boks est un éditeur de grille CSS développé avec Air (utilisable sur Windows, Mac et Linux) qui fournit une interface visuelle pour travailler avec le framework CSS Blueprint. Les frameworks sont souvent très utiles mais le paramétrage d’un pas de grille personnalisé peut s’avérer fastidieux. Outre la configuration du nombre de colonnes, de la largeur de la page et de la valeur de la gouttière,Boks permet de configurer la grille verticale en déterminant les valeurs des principales balises HTML [...]

Framework CSS sémantique ? Comment je vois les choses

Je reviens vers vous sur la question des frameworks CSS suite à la lecture de A Reflexion About Semantic Grids qui défend grosso modo le point de vue selon lequel les frameworks ne sont pas sémantiques et incitent à marcher sur la tête en bousculant le flux de production web. [...]

24 frameworks CSS — Mettez une grille (ou pas) dans votre site web

Il existe de nombreuses raisons pour ne pas utiliser de frameworks CSS lors de la phase de conception ou d’intégration de votre site web : le poids, l’intrusion des classes CSS dans le code HTML qui devient la règle pour placer le moindre bloc de contenu, le fait que de nombreuses règles ne sont pas utilisées, etc. Pour ma part, j’aime bien tester les frameworks qui tombent à portée de souris, et je n’hésite pas à faire des expériences d’hybridation : rien de tel qu’un bout de reset CSS d’Eric Meyer avec la feuille de style de typogridphy, le tout mis en forme avec la robustesse de Blueprint. [...]

BIC, framework CSS orienté couleur et typographie

BIC est un meta framework CSS basé d’une part sur le reset CSS d’Eric Meyer pour la remise aux valeurs par défaut des éléments HTML (clean.css) et le framework 960.gs pour la partie grille de mise en page (layout.css), et d’autre part sur de bonnes idées en ce qui concerne le traitement de la typographie et de la couleur (typography.css et color.css). [...]

Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web

Dans la série des thèmes WordPress minimalistes voilà The Ideal Website 1.1proposé par Information Architect (iA). L’équilibre graphique de ce thème provient essentiellement de l’application de la suite de Fibonacci — qui fournit des rapports très proches du nombre d’or — aux différentes proportions des éléments du design. Le résultat est ce que j’ai vu de mieux en matière de mise en page pour un blog. [...]

Frameworks CSS + Reset CSS : design from scratch

L’article fait ainsi le point sur la notion de framework CSS, ses avantages et ses inconvénients, décrit les frameworks les plus populaires et termine par une série de liens commentés à propos des Reset CSS et des styles de base. [...]

Framework CSS — mettez vos grilles au pas !

Grosso modo, tout le monde reconnait que oui, les frameworks c’est de la balle mais que non, ça n’est pas toujours possible car les éléments du design, du .psd, de la charte graphique, etc. n’entrent pas forcément dans une grille horizontale. [...]

Articles sur le même sujet

• Frameworks CSS — Fusion entre « Blueprint », « 960 Grid System » et « The Simpler Grid »
• Sélecteur CSS de frère adjacent (Dirty Grids Done Dirt Cheap)
• Calculer une grille de mise en page « typo » avec le nombre d’Or
• Framework CSS — Sémantique, maquette dynamique et autres notes
• 36 frameworks CSS — Mettez une grille dans votre design

Les hacks CSS sont une utilisation peu conventionnelle des sélecteurs CSS pour s’adresser à un ou plusieurs navigateurs quand on doit servir une propriété ou une valeur CSS spécifique à un ou plusieurs navigateurs. Si IE6 fait la fine bouche devant sa soupe de balises, il peut être intéressant de lui servir le même plat mais dans une assiette différente (la comparaison est bancale). Ces hacks s’utilisent souvent pour cibler des versions spécifiques d’Internet Explorer (généralement IE6 et IE7). Toutefois, il en existe pour Firefox, Opéra, Safari, iPhone, etc. Par ailleurs, je n’utilise pas ces hacks CSS dans ma feuille de style principale, mais uniquement dans une CSS réservée à IE via les commentaires conditionnels.

Comment utiliser les hacks CSS ?

Dans l’article Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels, j’utilisais un commentaire conditionnel pour cibler les versions inférieures ou égales à IE7. Toutefois, IE9 est sur les rails et il est temps de le prendre en compte, d’autant plus que Microsoft veut en faire un champion des standards du web en terme de rendu CSS3 et HTML5.

L’idée derrière la feuille de style unique pour IE est de ne pas augmenter inutilement le nombre de requêtes pour charger une CSS pour chaque version d’Internet Explorer. En attendant de voir ce que nous réserve IE9, j’ai décidé de cibler les versions inférieures ou égales à IE8 en espérant que IE9 tienne ses promesses et en attendant de voir s’il va continuer à gérer les commentaires conditionnels (auquel cas nous pourrions cibler les version inférieures à IE9).

Cibler les versions <= à IE8

<!--[if lte IE 8]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen,projection" />
<![endif]-->

Note : il existe une forme de commentaires conditionnels qui permet de cibler tous les navigateurs sauf Internet Explorer : <!--[if !IE]> <!--> IE Windows ne lira pas ça <!--> <![endif]-->

Dans cette feuille de style ie.css, si IE6 (et seulement lui) ne se comporte pas comme prévu devant #header { margin-top: 0; }, il suffira d’y ajouter * html #header { margin-top: -5px; } pour régler le problème. Si le problème concerne IE6 et IE7 et que IE8 se comporte de manière standard (c’est à dire que la règle située dans style.css suffit), il faudra utiliser les hacks de la manière suivante :

* html #search .submit { margin-top: -10px; } // IE6
*+html #search .submit { margin-top: -14px; } // IE7

#search .submit { margin-top: -7px; }         //Toutes les versions d'IE
* html #search .submit { margin-top: -10px; } // Surcharge pour IE6 seulement
*+html #search .submit { margin-top: -14px; } // Surcharge pour IE7 seulement

Mettez vos frameworks CSS à jour

Les frameworks CSS proposent souvent une feuille de style spécifique à Internet Explorer. Le plus souvent, le hack utilisé pour cibler IE7 est de la forme html>body qui n’est pas pris en charge par IE6. Or, si l’on cible les versions <= à IE8, ce hack est obsolète puisqu’il est compris par IE8. Pour y remédier, j’utilise *+html qui n’est compris que par IE7.

Ainsi, dans le fichier ie.css de Blueprint, il sera nécessaire de modifier la ligne html>body p code { white-space: normal; } par +html p code { *white-space: normal; } pour éviter que IE8 ne s’emmêle les pinceaux ;)

24 hacks CSS à consommer avec modération

Cette liste de 22 contournements a été compilée par Paul Irish. Elle présente le double intérêt de la quasi-exhausitivité et de distinguer les hacks jouant sur les sélecteurs de ceux qui concernent les attributs.

Hacks sur les sélecteurs

1. IE6 et inférieurs

   * html .test  { color: red }

2. IE7

   *:first-child+html .test { color: red }

3. IE7, Firefox, Safari, Opera

   html>body .test { color: red }

4. IE8, Firefox, Safari, Opera (Tout sauf IE 6,7)

   html>/**/body .test { color: red }

5. Opera 9.27 et inférieurs, Safari 2

   html:first-child .test { color: red }

6. Safari 2 — 3

   html[xmlns*=""] body:last-child .test { color: red }

7. safari 3+, Chrome 1+, Opera9+, Firefox 3.5+

   body:nth-of-type(1) .test { color: red }

8. Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+

   body:first-of-type .test { color: red }

9. Safaris 3+, Chrome1+

      @media screen and (-webkit-min-device-pixel-ratio:0) {
               .test  { color: red }
       }

10. iPhone / Webkit mobile

       @media screen and (max-device-width: 480px) {
                .test { color: red }
        }

11. Safari 2 — 3.1

    html[xmlns*=""]:root .test  { color: red }

12. Safari 2 — 3.1, Opera 9.25

    *|html[xmlns*=""] .test { color: red }

13. Safari — Chrome

    .test { [color: #000000; }

14. Tout sauf IE6 — 8

    :root *> .test { color: red  }

15. IE7

    *+html .test { color: red }

16. Uniquement Firefox. 1+

    .test,  x:-moz-any-link  { color: red }

17. Firefox 3.0+

    .test,  x:-moz-any-link, x:default  { color: red }

Hacks sur les attributs

1. IE6

   .test { _color: blue }

2. IE6, IE7

   .test { *color: blue /* or #color: blue */ }

3. Tout sauf IE6

   .test { color/**/: blue }

4. IE6, IE7, IE8

   .test { color: blue\9 }

5. IE7, IE8

   .test { color/*\**/: blue\9 }

6. IE6, IE7 — fonctionne comme !important

   .test { color: blue !ie } /* la chaine après ! peut être n'importe quoi */

7. IE8

   .test { color: #0000FF\0; }

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• HTML5 et CSS pour l'intégrateur web
• Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels
• Tester un site dans plusieurs navigateurs (mais surtout dans IE6 avec Vista)
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)

Drupal est un outil hors pair qui permet à ses utilisateurs de créer rapidement des sites internet complexes et sur-mesure et répondre ainsi aux cahiers des charges des clients les plus exigeants. Dans le monde des CMS Drupal fait partie des poids lourds. Sa réputation d’usine à gaz peut freiner les plus motivés, d’autant plus que son installation réserve parfois des surprises. Si vous avez l’habitude d’utiliser WordPress, vous risquez de ne plus retrouver votre confort habituel. Chez Drupal tout est affaire de modules et il faut en installer quelques-uns pour se sentir comme à la maison. 

Ma connaissance de Drupal est proche de zéro : j’ai abordé cet article sous l’angle de celui qui a l’habitude d’utiliser WordPress au quotidien. Il ne s’agit pas d’un comparatif entre Drupal et WordPress : les deux CMS présentent des différences dans leur mode de fonctionnement dont vous aurez un bon aperçu en lisant l’excellent billet Drupal et WordPress : deux logiques proches, mais différentes de Marie-Aude.

Amadouer Drupal

La première chose à faire est de télécharger la dernière version stable de Drupal et de décompresser l’archive pour la copier sur votre serveur. Pour information, j’utilise un hébergement mutualisé chez PHPNET qui semble posséder les pré-requis nécessaires, ce qui peut ne pas être le cas partout.

Saisissez l’adresse de votre site web et suivez les étapes de l’installateur automatique. En ce qui me concerne, l’assistant s’est arrêté à l’étape de la saisie des informations permettant la connexion à la base de données MySQL. A ce niveau, deux problèmes au moins sont susceptibles de survenir (et sont comme par hasard survenus) :

1. Un caractère spécial dans le mot de passe peut empêcher la connexion à la base de données. Méfiez-vous donc des caractères : / @ + ( ) ? = & car vous risquez de ne pas aller très loin. Des caractères d’échappement sont prévus, mais sait-on jamais.

2. Il semble que l’installation automatique soit comme les antiobiotiques et qu’il soit nécessaire d’écrire en dur les éléments pour la connexion avec la base de données : nom de la base, nom d’utilisateur, mot de passe et nom du serveur dans le fichier /sites/default/default.settings.php qu’il faudra renommer en settings.php. Saisissez à nouveau ces informations dans l’assistant pour passer à l’étape suivante.

   Notes : Il ne faut pas simplement renommer le fichier. Il faut créer un fichier settings.php à côté du dossier default.settings.php soit en dupliquant et renommant ce dernier, soit en créant un fichier vide nommé settings.php

Lire Installation de Drupal.

Drupal, au pied !

Une fois que vous aurez posé la souris dans le menu Administer, la palanquée d’options et de paramètres disponibles vous fera prendre  conscience du potentiel de Drupal. N’ayez pas peur et suivez le guide pour avoir un Drupal fonctionnel à votre service plutôt que l’inverse !

Vous aurez besoin d’installer de nombreux modules parfois dépendants d’autres modules. C’est le prix à payer pour… la modularité. Et oui, la force de Drupal est d’être entièrement composé de modules ; les éléments de base du moteur ne sont finalement que des modules obligatoires.

L’installation de ces modules s’effectue en suivant généralement les étapes suivantes :

• Téléchargez et décompressez le module,
• Faites glisser le dossier du module vers le dossier modules de votre installation,
• Activez le modules et ses sous-modules éventuels dans le dossier Administrer › Construction du site › Modules,
• Personnalisez les paramètres dans Administrer › Configuration du site › Votre_Module.

Notes : Les pages permettant d’installer les modules sont assez peu friendly. Toutefois, les explications sont concises et claires ; les dépendances entre les modules sont bien indiquées et sont d’ailleurs rappelées dans la page permettant d’activer les modules. Les dépendances peuvent même s’activer automatiquement lorsqu’elles se trouvent toutes dans le dossier modules. C’est assez bien fait.

Des URLs propres

Tout se passe bien ? Ok, passons à la suite. Une des premières choses que je fais lorsque j’installe un CMS, c’est de jeter un oeil sur les paramètres permettant d’avoir des URL’s propres (sans le point d’interrogation). Dans Drupal, ça se passe dans Administer › Site configuration › Clean URLs.

La case Disabled est cochée et si tout va bien vous pourrez cliquer sur Enabled. Si ce n’est pas le cas, ouvrez le fichier .htaccess à la racine de votre installation et supprimez le commentaire # devant la ligne # RewriteBase / (ligne 107 vers la fin du document). L’adresse http://votresite.fr/?q=admin/settings/clean-urls se transforme alors en http://votresite.fr/admin/settings/clean-urls.

Drupal en français

Pour avoir Drupal en français, rendez-vous sur la page de téléchargement et choisissez votre traduction. Contrairement à WordPress où un seul fichier est nécessaire pour la traduction de l’interface d’administration, vous verrez qu’il faut ajouter pas moins de 44 fichiers de traduction répartis dans 77 dossiers.

Heureusement, il suffit de faire glisser les dossiers décompressés aux emplacements adéquats sur votre serveur pour qu’ils fusionnent avec ceux qui sont déjà là (si vous travaillez sur Windows, prenez garde de ne pas remplacer les dossiers).

Assurez-vous ensuite que les modules Locales et Content Translation sont activés dans Administer › Modules. Allez ensuite dans Administer › Site Configuration › Languages et cliquez sur l’onglet Add Language et choisissez French dans le menu déroulant. Validez et sélectionnez French par défaut. Enregistrez la configuration et voilà ! Drupal est en français.

Lire Drupal 6 : comment installer la langue française.

Un éditeur WYSIWYG

Une fois Drupal en français, il est temps de passer à la rédaction des contenus. Dans Drupal, l’éditeur pour rédiger les pages ou les billets est livré en deux parfums :

1. Filtered HTML :  les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement. Les tags HTML autorisés sont limités à  <a>, <em>, <strong>, <cite>, <code>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>. Les lignes et les paragraphes vont à la ligne automatiquement.
2. Full HTML : les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement. Les lignes et les paragraphes vont à la ligne automatiquement. Tous les tags HTML sont autorisés.

Notes : vous verrez plus tard qu’il est possible d’associer un éditeur selon les droits accordés aux utilisateurs de Drupal. Vous pourrez ainsi réserver la version Full HTML de l’éditeur aux administrateurs du site et la version Filtered HTML aux autres contributeurs. Point positif, le champs d’édition peut se scinder en deux pour créer un résumé ou un chapô.

Installer un nouvel éditeur visuel

Malgré tout, cet éditeur est un peu rustique comparé à ce que l’on a l’habitude de voir sur WordPress. Pour avoir un éditeur digne de ce nom, il faut installer WYSIWYG API qui gère l’installation d’autres éditeurs comme TinyMCE ou FCKEditor, bien plus conviviaux. Et si vous en profitiez pour utiliser BBComposer ?

Notes : arrivés là, vous avez certainement eu l’occasion de voir la richesse des options disponibles dans Drupal. L’édition des articles ne fait pas exception et on commence déjà à voir des différences significatives avec WordPress. Notamment en ce qui concerne les paramètres du menu qui permettent de donner un titre plus court pour faire apparaitre l’article dans un menu. Il est même possible de choisir le poids de l’entrée du menu pour préciser son emplacement.

Dès que le module wysiwyg est décompressé, faites-le glisser dans le répertoire modules de votre installation Drupal et activez-le dans Administrer › Construction du site › Modules › User Interface › Wysiwyg.

Cliquez ensuite dans Administrer et sur Par module (à côté de Par tâche) pour installer ou choisir un éditeur visuel à votre convenance. Vous avez le choix entre 9 éditeurs côté client :

1. jWYSIWYG
2. FCKeditor
3. markItUp
4. NicEdit
5. openWYSIWYG
6. TinyMCE
7. Whizzywig
8. WYMeditor
9. YUI editor

Notes : si vous installez FCKeditor, faites attention à ne pas télécharger la nouvelle version CKEditor 3.1, qui ne semble pas encore compatible avec le module wysiwyg. Descendez plus bas dans la page et choisissez FCKeditor 2.6.5. Ou dirigez-vous vers TinyMCE. Notez toutefois que si l’éditeur CKeditor n’est pas pris en charge directement par le module Wysiwyg, il est tout de même disponible comme module indépendant.

J’ai voulu installer openWYSIWYG, mais la version de démonstration m’indique que mon navigateur (Google Chrome) n’est pas pris en charge. C’est balot qu’un projet open source ne prenne pas en charge un produit basé lui aussi sur de l’open source :/

Une fois l’archive décompressée, créez le répertoire /sites/all/libraries et copiez le dossier tinymce. Lorsque vous cliquerez sur Administrer › Configuration du site › Wysiwyg, vous aurez la possibilité d’associer TinyMCE au format d’entrée Filtered HTML ou Full HTML (ou les deux). Comme vous le devinez sans doute, il est bien entendu possible d’associer un éditeur visuel différent par format d’entrée. Il suffit de répéter les étapes précédentes pour comparer TinyMCE avec FCKeditor, par exemple, qui dispose d’une interface en français, ce qui n’est pas négligeableNotez que si l’éditeur CKeditor (nouvelle version de FCKeditor) n’est pas pris en charge directement par le module Wysiwyg, il est tout de même disponible en tant que module indépendant..

Modifier les préférences de tinyMCE ou FCKeditor

Le point fort de Drupal dans sa gestion des éditeurs wysiwyg, c’est sa capacité de pouvoir associer un éditeur différent selon les contributeurs en fonction de leurs besoins ou des restrictions que vous voudrez leur imposer, ou de modifier les préférences d’un même éditeur visuel selon les contributeurs pour affiner encore plus la gestion des droits.

Pour cela, retournez dans le module wysiwyg et modifiez le format d’entrée pour accéder aux options Paramètrage de base, Boutons et plugins, Apparence de l’éditeur, Nettoyage et sortie et CSS. Notez que seuls les boutons cochés seront activés au final ; ils ne s’ajoutent pas à ceux qui sont définis par défaut, mais constituent en quelque sorte un nouveau package. En gros, il manque une case Tout sélectionner ;)

Voir Install FCKeditor Using WYSIWYG API.

Insérer des images dans Drupal, mission impossible ?

Quand on a l’habitude de WordPress, il semble tout naturel de télécharger une image depuis le web ou à partir de son poste de travail pour l’afficher où bon nous semble dans un article. C’est encore plus vrai depuis WordPress 2.9 qui autorise quelques traitements sympathiques sur les images.

Dans Drupal, c’est comment dire… Bref, c’est pas évident. La documentation précise bien qu’il est possible d’insérer une image dans un contenu via FTP puis d’utiliser la balise HTML img, mais quelque chose me dit que ça ne va pas plaire à tout le monde. Heureusement, il existe plusieurs solutions pour y remédier (ou pas).

Module Image (Bof)

Le pitch : le module Image permet aux utilisateurs ayant les permissions adéquates d’uploader des images dans Drupal, de les afficher individuellement en page d’accueil, de les insérer dans un article ou encore de les grouper dans une galerie et de créer automatiquement des miniatures de différentes tailles.

Faites glisser Image dans le dossier modules de votre installation et activez-le dans Administrer › Construction du site › Modules puis Image. Vous remarquerez à cette occasion que Drupal installe automatiquement les fichiers de langue pour les modules qui en possèdent. Frambi-framboise sur le gâteau, le module Image crée pour nous les répertoires /sites/default/files/images et /sites/default/files/images/temp.

Malheureusement, tout ne fonctionne pas comme sur des roulettes : le tableau de bord indique que Image Import et ImageMagick advanced options ne sont pas configurés correctement. Pour le premier, le message précise que le répertoire d’import n’a pas été configuré et pour le second, qu’il n’a pas été installé correctement.

Pour spécifier le répertoire d’import, je vais donc dans Administrer › Configuration du site › Images et dans le doute j’indique/home/temporaire/upload. Pour ImageMagick je me contente de le désactiver dans Administrer › Configuration du site › Boite à outils image. En attendant de voir si tout est OK au niveau de mon hébergement je me contenterai de la librairie GD.

Bref, après toutes ces péripéties j’ai toujours bien envie d’afficher une image. Or, il semble que ce module ne fait qu’ajouter un type de contenu Image à côté des Pages et des Story. Ce qui ne correspond pas vraiment à mes besoins (Je n’exclus pas, bien évidemment, le fait d’être passé à côté de quelque chose d’essentiel). Mais au moins avons-nous déjà la possibilité d’uploader des images dans Drupal, ce qui n’est pas rien ;)

ImageField (Bof)

Dépendant des modules CCK et FileField, ImageField fournit un uploader dans la lignée du module Image vu plus haut. Des modules complémentaires permettent de générer des miniatures, de saisir des méta-données en plus des traditionnels alt et title, de recadrer les images ou encore de télécharger des images par lot.

Une fois que vous aurez copié ces modules, vous vous apercevrez que CCK est un gros morceau : il bénéficie d’un menu pour ses dépendances dans la liste des modules. Ne sachant pas encore de quoi j’aurais exactement besoin, j’ai tout coché. Mais impossible d’activer le module FileField à cause de l’absence du module getID3 (gestions des informations contenus dans les fichiers audios). Dans le doute, je l’installe. Un message d’erreur m’avertit que je n’ai pas installé la bibliothèque getID3 dans le dossier sites/all/libraries/getid3/.

Mais nous ne somme pas au bout de nos peines car à la lecture de la documentation de ImageField, il semble nécessaire d’installer les modules ImageCache et ImageAPI qui n’était nécessaire que pour la version 5.x de Drupal…

Une fois ImageCache installé, mis à jour et assimilé dans les grandes lignes (les plus pressés regarderont directement la vidéo Maintainable Image Gallery), vous pourrez vous rendre sur Administrer › Construction du site › ImageCache pour voir les possibilités du module. J’ai également installé le module Views qui de toutes façons fait partie des incontournables de Drupal (pendant que vous y êtes, installez également le module d’aide avancé pour Views).

Une fois que vous aurez terminé le tutoriel Imagefield – how to set up and make a basic view vous aurez plus ou moins la même chose qu’avec le module Image présenté plus haut…

Lire Préparer Drupal pour la manipulation d’images.

IMCE (Yeah!)

Le module IMCE permet d’uploader des fichiers et des images avec la gestion des répertoires distants en prime. Le tout compatible avec FCKeditor, TinyMCE et WYMEditor. Pour éviter certaines incompatibilités entre les éditeurs et/ou certains modules, il est préférable de passer par le module IMCE Wysiwyg bridge qui facilite l’intégration du module IMCE dans les éditeurs visuels TinyMCE et FCKeditor pour le moment.

Pour éviter de tout mélanger, je vous conseille de désactiver le module Image installé précédemment et d’installer IMCE et IMCE Wysiwyg bridge puis de jeter un oeil sur les options de IMCE dans Administrer › Configuration du site › IMCE.

Pour accéder à ce qui nous intéresse, une dernière étape est nécessaire : cocher la case IMCE dans la liste des boutons et plugins de l’éditeur visuel TinyMCE dans Administrer › Configuration du site › Wysiwyg !

Faites la même chose pour FCKeditor pendant que vous y êtes, histoire de passer rapidement d’un éditeur visuel à l’autre. L’idéal étant de créer deux nouveaux formats d’entrée en plus de Filtered HTML et de Full HTML pour leur associer nos deux éditeurs visuels nouvellement installés.

Le résultat de nos manipulations prend la forme d’une icône Browse ou d’un bouton Parcourir le Serveur juste à droite du champs URL de l’image (quand on a cliqué sur l’icône Insérer/modifier l’image). Un clic sur ce bouton affiche enfin la boite de dialogue qui permet d’uploader, de générer les miniatures et d’envoyer le tout à l’éditeur qui se chargera d’afficher l’image dans l’article, enfin !

Notez que le module IMCE est également disponible pour le module CKeditor.

Ca ne marche toujours pas ?

Que l’image s’affiche correctement dans l’éditeur ne signifie pas qu’elle s’affichera dans votre article une fois publié… La raison est que même si vous spécifiez un éditeur visuel comme FCKeditor, le comportement par défaut est de filtrer les balises HTML à la manière de Filtered HTML. Pour y remédier, rendez-vous dans Administrer › Configuration du site › Formats d’entrée et décochez la case filtre HTML.

Drupal 7 (Yeah?)

La prochaine version de Drupal devrait gérer nativement les images avec des champs Image pouvant être ajoutés aux contenus et auxquels peuvent être attachés des effets tels que le redimensionnement, le recadrage, etc. Cette version est actuellement en Alpha1.

Notes : cette prochaine mouture de Drupal marquera un tournant dans l’ergonomie du CMS qui devrait avoir été amélioré de manière significative par rapport à la version 6.15 que je teste actuellement.

En attendant la suite des tribulations d’un WordPressien en Drupalie…

Malgré la longueur de ce billet, l’installation de Drupal est moins compliquée qu’il n’y parait. Les problèmes que j’ai rencontrés vous seront sans doute épargnés. L’installation des différents modules prend du temps et de nombreux aller-retours sont nécessaires pour installer, activer ou modifier les paramètres.

Les critiques concernant l’ergonomie perfectible de Drupal (qui va être radicalement modifiée avec l’arrivée de la version 7) sont sans doute un moindre mal au regard des possibilités. Et puis, entre nous, si vous trouvez que Drupal est trop riche, c’est peut-être que WordPress ou votre CMS préféré suffit à votre bonheur ^_^

Toutefois, la saisie et la mise en forme de textes et d’images sont le coeur et la raison d’être de tout CMS et l’absence d’un éditeur visuel intégrant images, son, vidéos, etc. se fait cruellement sentir. D’autant plus que les solutions proposées par la communauté Drupal n’offrent pas le même confort d’utilisation que ce qu’on trouve dans WordPress 2.9 où le module d’upload et d’édition d’image est une petite merveille. Mais la version 7 pointe son nez et tout ces inconvénients ne seront sans doute qu’un mauvais souvenir ;)

Quelques liens

• Drupalfr
• Kolossaldrupal
• Biboo
• Drupalistic
• Learn By The Drop

Articles sur le même sujet

• BBComposer — l’éditeur HTML à consommer sur place ou à emporter
• Le petit journal du web — WordPress, développement web, etc.
• PHPCrossRef — Bibliothèques de référence pour projets PHP Open source
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples
• Markdown on Save — L’ami HTML de Markdown pour WordPress

Je raffole des petites fonctions ou les scripts PHP tout simples qui en ont sous la botte. A l’aide de deux tableaux Array PHP nous choisirons les balises div à afficher dans notre page web et dans quel ordre afin de modifier la structure de notre document sans toucher au code HTML. Pour ce faire, il suffira de remplir les string qui vont bien dans l’Array.

Les strings dans l’Array (oui, oui, je sais… ^_^v)

Tout commence par la déclaration des deux Array. Ces tableaux pourront se trouver dans un fichier distinct à inclure avec <?php include 'mon_fichier.php' ?> :

• $displayDiv — contient les éléments (div) à afficher,
• $orderDiv — permet d’ordonner les éléments en question.

    <?php
        $displayDiv = array(
            'sidebar',
            'content'
        );
        $orderDiv = array(
            '0'=>'sidebar',
            '1'=>'content'
        );
    ?>

Une boucle for et quelques if.

1. Une boucle for englobe l’ensemble du document pour incrémenter la variable $i en fonction du nombre d’éléments contenu dans le tableau $orderDiv,

2. Nous vérifions pour chaque élément div concerné :

   • sa présence et son numéro d’ordre dans le tableau $orderDiv,
   • sa présence dans le tableau $displayDiv.

     
     <?php for($i=0;$i<=count($orderDiv);$i++) { ?>
     <?php
         if($orderDiv[$i]=='sidebar' && in_array("sidebar",$displayDiv)) {
     ?>
         <div id="sidebar">
                 <p>Contenu de la sidebar</p>
         </div>
     <?php } ?>
     <?php
         if($orderDiv[$i]=='content' && in_array("content",$displayDiv)) {
     ?>
         <div id="content">
             <p>Contenu du contenu</p>
         </div>
     <?php } ?>
     <?php } ?>
     

Pour afficher un élément, mettez-le dans le tableau $displayDiv. Pour modifier l’ordre d’affichage des éléments (pour placer #sidebar après #content, par exemple), changez l’ordre des éléments dans le tableau $orderDiv.

Voici la proposition de Josselin qui permet d’optimiser le code présenté plus haut :

    $orderDiv = array(
        '0' => 'sidebar',
        '1' => 'content'
    );
   ksort( $orderDiv ); // Trie le tableau suivant les clefs,
   // la boucle suivante les affichera alors dans l'ordre
   foreach ( $orderDiv as $nameDiv ) {
        include( $nameDiv . '.php' );
    }

Cette méthode implique donc d’avoir une page HTML pour chaque div portant le même nom que cette div pour mieux séparer le code PHP de la structure HTML, soit sidebar.php et content.php dans notre cas.

Stay tuned and mind the gap!

Articles sur le même sujet

• Des feuilles de style CSS dynamiques avec PHP
• Quelques lignes de PHP pour protéger la SERP-diversité
• Menu HTML et CSS, sliding doors et item current en PHP
• Adriana K, Google et balises meta dans DotClear
• Quelques notes — Programme de formation HTML & CSS

Le format PNG autorise jusqu’à 256 niveaux de transparence qui ne sont pas pris en charge par Internet Explorer 6. La dégradation grâcieuse n’étant pas toujours possible, je me suis rafraichis la mémoire sur les différentes manières d’utiliser le filtre AlphaImageLoader. J’ai fini par tomber sur une solution globale pour gérer cette transparence même en présence d’un background-repeat ou d’un background-position ! (Cet article est en quelque sorte la suite de Opacité CSS et effet de trame avec GIF/PNG transparent.)

Le format PNG

Le PNG est format d’enregistrement d’image destiné à remplacer le format GIF dans sa version 8 bits. La version 24 bits en RVBa — qui comprend plus de 16 millions de couleurs — autorise jusqu’à 256 niveaux de transparence très utiles en webdesign pour superposer deux images dont celle du dessus laisse transparaitre celle du dessous.

Malheureusement, IE6 ne comprend rien à ces différents niveaux de transparence : il faut ruser, c’est usant. Certains préconisent la dégradation grâcieuse : utiliser la transparence dans les navigateurs qui la prennent en charge et servir autre chose au dernier de la classe : un PNG 8 bits avec une seule couleur de transparence, fusionner les deux images censées se superposer, voire même utiliser une image légèrement différente.

Après tout, les visiteurs ne sont pas toujours des développeurs web utilisant plusieurs versions de navigateurs pour traquer la moindre différence de rendu. Si vous pouvez vous le permettre, foncez ! Dans le cas contraire, il faudra recourir à des solutions plus ou moins fonctionnelles selon que l’image en question se trouve placée en background d’un élément (une div, par exemple) ou dans une balise img. Si votre image transparente est placée sur un fond uni, il reste la possible de modifier l’image par voie logicielle :

Modifier le chunk (segment) bKGD des png

Un image au format PNG est composée de différents segments (chunks) dont le fameux bKGD qui spécifie une couleur de fond par défaut. A noter que les agents utilisateurs (navigateurs, logiciels, etc.) ne sont pas tenus de respecter cette couleur et peuvent en utiliser une autre. Dans IE6, cette couleur se rapproche d’un gris-vert tirant sur le turquoise…

Certains logiciels comme TweakPNG permettent de modifier la valeur de bKGD. Si vous disposez d’un fond de couleur uni, il suffit d’y mettre la couleur du fond sur laquelle est placé votre image contenant des zones transparentes.

Dans le cas contraire, les filtres Microsoft sont nos amis :

Le filtre `AlphaImageLoader` de Microsoft

Internet Explorer (depuis la version 5.5) inclut un mécanisme de filtres propriétaires filter dont AlphaImageLoader qui gère la transparence des png 24 bits. L’utilisation du filtre diffère selon que l’image est appelé via la balise img ou en tant que background d’un autre élément.

Appliqué sur une balise `img`

Applique le filtre sur les images dont la classe CSS est .img_png à l’intérieur d’une feuille de style réservée à IE6 avec les commentaires conditionnels. Il suffit de renseigner la source de monImageTransparente.png dans la variable src :

.img_png {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pix/monImageTransparente.png', sizingMethod='image');
}

Appliqué sur une image en `background`

Pour les navigateurs tenant compte de la transparence, vous aurez la règle CSS :

.div_png {
    width: 100px;
    height: 150px;
    background: url(../pix/monImageTransparente.png) no-repeat;
}

.div_png {
    width: 100px;
    height: 150px;
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pix/monImageTransparente.png', sizingMethod='scale');
}

• image – Réduit ou élargit le bloc pour correspondre aux dimensions de l’image (valeur par défaut),
• scale – Etire l’image aux dimensions du bloc,
• crop — Rogne l’image pour qu’elle tienne dans le bloc.

Quelques contraintes

1. La source de l’image doit être relative au document HTML qui l’affiche et non à la feuille de style CSS qui la réclame. De sorte qu’une image se trouvant dans un dossier images appelée dans un fichier CSS se trouvant dans un dossier css ne devra plus se trouver sur le chemin ../pix/monImageTransparente.png mais sur pix/monImageTransparente.png.

2. Les liens contenus dans un élément HTML possédant une images de fond transparente ne sont plus cliquables, les champs input ne sont plus accessibles et le texte n’est plus sélectionnable. Une manière générale d’y remédier est d’ajouter une déclaration du type :

   
   .div_png a,
   .div_png input {
       position: relative;
       z-index: 1;
   }
   

   Pour plus d’information sur cette question, lire le fil de discussion paru sur le forum d’Alsacréations et la synthèse rédigée par Frank Galey.

3. Il n’est pas possible d’utiliser les propriétés background-repeat et background-position avec une image PNG transparente en background.

4. Il est difficile d’utiliser des événements de style rollover pour permuter des images de fond au passage de la souris.

Passez-moi l’expression !

C’est assez contraignant. Heureusement, le web est rempli de gens de bonnes volonté qui se sont retroussé les manches pour nous offrir des solutions sur un plateau. Voyez plutôt :

* html img,
* html .png {
    position:relative;
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

Le * html est là uniquement pour cibler IE6. Vous pourrez donc vous en passer si vous utilisez une feuille de style dédiée à ce navigateur. Ne fonctionne pas si Javascript est désactivé. Nécessite une image transparente de 1px de côté (transparent.gif).

Note : il sera peut-être nécessaire d’ajouter un z-index: 1; pour éviter les problèmes de liens, d’éléments de formulaire ou de sélection de texte évoqués plus haut.

Une solution globale avec iepngfix

Il existe de nombreux scripts permettant d’automatiser avec plus ou moins de bonheur cette gestion de la transparence des images PNG. Ils mettent tous en oeuvre le filtre AlphaImageLoader soit dans un fichier Javascript, soit dans un fichier HTC. Parmi tous les scripts existants, j’ai retenu iepngfix de TwinHelix que m’a conseillé Oncle Tom sur Twitter.

Ce composant HTC gère la plupart des contraintes énoncées plus haut, y compris l’absence de prise en compte de background-repeat et background-position dans iepngfix version 2.0 Alpha 3.

Le script est très simple à utiliser :

1. Copiez les fichiers *iepngfix.htc* and *blank.gif* dans le dossier de votre site web,

2. Copiez la déclaration CSS suivante dans votre feuille de style ou votre fichier HTML :

       img, div {
           behavior: url(iepngfix.htc);
       }
   

   Vous pouvez placer dans ce sélecteur CSS toutes les balises HTML, les identifiants ou les classes pour lesquels vous désirer activer la gestion de la transparence des PNG. Séparez-les simplement par une virgule.

3. N’oubliez pas que le chemin vers les fichiers *iepngfix.htc* et *blank.gif* est relatif au document HTML et non à la feuille de style CSS.

4. Si votre site est composé de sous-dossier, n’hésitez pas à ouvrir le fichier *iepngfix.htc* dans un éditeur de texte pour modifier la variable `blankImg` afin de la faire pointer vers votre pixel transparent. Par exemple : `IEPNGFix.blankImg = ‘/images/blank.gif’;`

   Cette fois encore, le chemin doit être relatif au document HTML. Si vous désirez activer la prise en charge des propriétés *background-repeat* et *background-position* assurez-vous d’inclure le fichier Javascript *iepngfix_tilebg.js* dans votre document HTML :

   <script src="iepngfix_tilebg.js" type="text/javascript"></script>
   

5. Dans certains cas, il sera nécessaire d’envoyer le bon type MIME à Internet Explorer 6. L’auteur du script a prévu un fichier *iepngfix.php* qui inclut le fichier *iepngfix.htc* tout en renvoyant le type MIME `text/x-component` associé aux fichiers `.htc` :

       img, div, a, input {
           behavior: url(/css/resources/iepngfix.php);
       }
   

6. Pour améliorer les performances, soyez le plus sélectif possible : préférez un `#img_header` ou un `.img_png` à l’utilisation de la balise `img` seule, sauf bien sûr si toutes vos images ont besoin du script !

7. Il se peut que le fond gris-vert apparaisse brièvement lors du chargement de l’image. Si vous ne voulez pas ce comportement (notamment sur les grandes images), vous n’aurez qu’à revenir à une utilisation « manuelle » du filtre *AlphaImageLoader* comme indiqué dans la première partie.

   N’hésitez pas à consulter le fichier *iepngfix.html* présent dans l’archive *.zip* qui apporte une palanquée d’informations, de trucs et d’astuces pour utiliser le script et remédier aux problèmes d’utilisation.

Une nouvelle solution globale avec DD_belatedPNG

DD_belatedPNG semble faire l’unanimité autour de lui pour sa légèreté et son efficacité, y compris lorsqu’on l’utilise avec background-position ou background-repeat. Le script s’utilise très simplement :

<!--[if IE 6]>
    <script src="DD_belatedPNG.js"></script>
    <script>
        DD_belatedPNG.fix('.png_bg');
    </script>
<![endif]-->

<script type="text/javascript">
// <![CDATA[
             DD_belatedPNG.fix('.example1, .example2, img');
// ]]></script>

Conclusion

Ce sujet semble inépuisable, ce qui n’est pas mon cas. Je laisse cet article en version bêta pendant quelques temps histoire de laisser décanter le sujet : il serait étonnant que des erreurs ou inexactitudes ne se soient pas glissées sous le tapis de souris ;)

Ressources externes

Généralités sur le format PNG

Gérer la transparence du PNG par voie logicielle

Ce logiciel permet d’accéder aux informations contenues dans un fichier PNG dont notamment le chunk (segment) bKGD pour modifier la couleur de fond sur laquelle s’applique la transparence (un fond gris/vert/turquoise par défaut dans ie6). Vous trouvez quelques explications concernant son utilisation sur

Logiciel très pratique et simple d’emploi pour améliorer la compression des images au format PNG. Il suffit de faire glisser les images que vous voulez améliorer et le PngOptimizer s’occupe du reste. Possède quelques options pour manipuler les chunks ou garder une version de l’image d’origine.

C’est peu connu, mais les spécifications du format PNG 8 bits autorisent plusieurs couleurs dans le segment Alpha, ce qui permet de spécifier plusieurs couleurs transparentes en utilisant un logiciel approprié comme Fireworks. Voilà une bonne technique pour s’autoriser une dégradation grâcieuse des images transparentes sous Internet Explorer 6 !

Un peu hors-sujet par rapport à la transparence des PNG, je signale l’existence d’un plugin pour Photoshop qui permet d’optimiser le poids des images PNG : le plugin installé par défaut dans Photoshop ne rend pas vraiment justice aux possibilités de compression de ce format.

Quelques scripts

Version 1.0 et version 2.0 Alpha 3 du script iepngfix. Gère les background-repeat et background-position dans la version Alpha à l’aide d’un fichier Javascript supplémentaire.

Ce script est proposé par Yves Van Goethem. Nombreuses options disponibles réservées à un public averti ;)

Fichier Javascript gérant la plupart des pièges posés par l’application du filtre AlphaImageLoader.

Avec Unit PNG Fix pas besoin de définir des classes ou de cibler vos éléments. Fonctionne avec les balises img ou sur les background-image. Très léger. Merci à 13sportif pour le lien.

Expression Javascript permettant de gérer la transparence des PNG en img ou en background

Script très léger et pratique. S’applique à toutes les images PNG de votre document. Toutefois, certaines images restent en mode téléchargement alors quelles sont bien affichées, ce qui peut donner l’impression au visiteur que quelque chose ne tourne pas rond sur le site. Malgré tout, ce script vieillissant peut encore rendre quelques services : il m’a rappellé l’existence de l’attribut defer="defer" de la balise script qui permet de différer le chargement (ou l’application) du script en question. Voir cet article très complet sur l’analyse de defer.

Propose une version modifiée du script précédent pour les champs de formulaires `

`

Encore un Javascript à se mettre sous la souris ! Crée une balise div dans laquelle est affichée l’image traitée par le filtre DirectX :

Plus ou moins la même chose avec un composant HTC.

Une solution originale en PHP.

Autres ressources sur la transparence des PNG

La blonde propose avec pédagogie un récapitulatif des différentes méthodes pour gérer cette transparence sur 256 niveaux.

Présente de nombreuses solutions et contournement pour afficher les images transparentes.

La FAQ du forum Alsacréations sur comment obtenir la transparence des PNG avec Internet Explorer 6

Tutoriel pour pallier les effets secondaires du filtre AlphaImageLoader en cas de positionnement absolu.

Mise en garde d’Eric Daspet sur l’utilisation des filtres : Si vous l’utilisez pour une petite icône de présentation qui apparaît vingt fois dans votre page, c’est vingt exécutions du filtres qui sont faites. À chaque exécution du filtre le rendu est bloqué, en attente. Sur Yahoo! Search en retirant AlphaImageLoader de la feuille CSS c’est jusqu’à 100ms qu’ils ont gagné (information donnée par Stoyan Stefanov sur sa dernière présentation).

Article très instructif sur la transparences du format PNG et l’application de AlphaImageLoader

Articles sur le même sujet

• Trucs et astuces CSS
• Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9)
• Opacité CSS et effet de trame avec GIF/PNG transparent
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• CSS & Navigateurs — 10 problèmes de compatibilité récurrents