Les CSS par l'exemple

Mox Folder — Thu, 10 Apr 2008 06:00:00 -0400

Dans mon entourage professionnel, des graphistes print totalement étrangers au design web me demandent régulièrement de leur expliquer brièvement comment créer des pages web, c'est quoi le HTML, etc. La question qui revient le plus souvent c'est de savoir si avec Dreamweaver on peut créer un site Internet sans connaitre le HTML. Là, ma réponse est systématiquement la même : Oubliez Dreamweaver !!!. En effet le logiciel de feu-Macromedia est devenu une telle usine à gaz, que si on veut apprendre à faire du web c'est sûrement pas par là qu'il faut commencer. Un graphiste pense souvent à tort que s'il maitriste Quark X-Press ou InDesign sur le bout des ongles, il peut donc se familiariser en quelques heures avec Dreamweaver et arriver à produire des page web.

Alors, oui il y arrivera sûrement avec un peu de détermination - après tout un logiciel reste un logiciel. Cependant je ne pense pas que ce soit la bonne solution.

Back to Basics

Comme pour tout, il faut revenir aux basics, on ne se met pas à résoudre des équations si on ne connaît pas les principes élémentaires d'algèbre. La plupart des graphistes print voudraient résoudre leur équation sans même apprendre à compter, la première vérité c'est qu'il ne veulent pas mettre les mains dans le cambouis... tellement habitués qu'ils sont au confort de leur interface WYSIWYG... alors que dans le fond il y a peu de différence entre une page Quark X-Press et un fichier HTML. La seconde vérité c'est que ÉNORMÉMENT de graphistes ont trop peu de méthodologie, genre les feuilles de style j'en ai entendu parler, je sais ce que c'est, je sais que c'est utile mais je m'en sers jamais, pire ... je ne sais pas m'en servir.

Parti de là, on comprend bien vite que parler à un ~~artiste~~ graphiste de balisage de texte ça va vite le barber. Pourtant, qu'on face de la PAO (avec X-Press ou InDesign), du traitement de texte (avec Word), ou encore qu'on face du HTML on fait tous du balisage de texte. Quand je slectionne un mot (au passage je vous rappelle des raccourcis bien pratiques ;o) et que je clique sur B pour le mettre en Bold je fais du balisage de texte, de même que lorsque j'enveloppe un mot d'une d'une balise <strong>.

CSS

Ce qu'il faut donc retenir de cette longue mais nécessaire introduction c'est qu'une page HTML n'est plus ni moins qu'un agencement d'éléments dans un page. Sur X-Press ou InDesign on agencera sa page par boites (box) alors qu'en HTML agencera sa page par balises. Dans les 2 cas on stylisera sa page grâce et des feuilles des style.

En HTML, les feuilles sont ce qu'on appelle CSS pour Cascading Style Sheet et ce qui est vraiment tripant par rapport à de la mise en page traditionnelle (traitement de texte ou PAO) c'est que c'est beaucoup plus puissant. Alors que dans les logiciels de mise en page traditionnels les feuilles de style n'agissent que sur le texte (ou presque). En HTML avec les CSS on peut paramétrer tous les éléments qui servent de balise, que ce soit un <DIV> (l'équivalent d'une boite) ou un <EM> (l'équivalent de l'italique - pour qui par exemple on peut attribuer un autre style que l'italique pour les esprits les plus tordus).

Bref tout ça c'est bien théorique, en fait plutôt que tout ce blabla j'aurais bien pu me contenter de ces derniers mots. Je vais donc conclure par un exemple des plus parlant, avec une représentation de diagrammes uniquement en CSS et HTML. Sur l'image ci dessous à gauche, la mise en page en HTML sans style, à droite la même mis en page HTML avec les styles appliqués.

Voir le code associé et toute l'explication sur le blog de l'auteur de cette démonstration.

Fine tuning

Mox Folder — Sun, 30 Sep 2007 20:38:00 -0400

J'ai procédé à quelques petites améliorations samedi. Tout d'abord j'ai modifié l'espacement entre les billets (ok personne verra la différence mais ça me perturbait), ensuite j'ai organisé l'affichage des tags en nuage (faut que je l'améliore en faisant un dégradé de couleurs comme si les tags les moins cités disparaissaient), puis enfin j'ai remis le badge Twitter... non pas que je sois un Twitter maniaque mais je trouve ça sympa de temps à autre pour y lâcher le truc du moment).

C'est tout pour le moment.

À noter que cette nuit Blog Bang est tombé en rade ce qui a eu pour effet de bloquer le chargement d'une partie du blog. Ça peut être très embêtant car selon comment les différentes partie du blog sont imbriquées les unes dans les autres, ça peux empêcher une partie ou la totalité du blog de se charger. Heureusement, dans le cas présent la bannière Blog Bang est situé dans en bas de page, donc fait partie des derniers éléments à charger (les navigateurs chargeant les éléments dans l'ordre de description de la page HTML). Si vous pouvez désactiver les CSS par exemple vous verrez l'ordre d'imbrication des éléments qui visuellement n'ont pas forcément la même imbrication une fois le blog mis en page avec les CSS.

Petit aparté sur Blog Bang : J'aime bien cette régie pub car, non seulement elle me permet d'afficher de la pub pour des films avec des extrait et/ou des bandes annonces mais en plus je peux choisir les film que je veux afficher. Ça reste dans le ton du blog et en accord avec mes gouts personnels, par exemple j'aurais pu choisir d'afficher Bee Movie, ce que je n'ai bien entendu pas fait ;o) Les films à l'affiche présentement, via Blog Bang sont : American Gangster, Knocked Up (très bon !), The Heartbreak Kid (le nouveau Farelly) et The Kingdom.

À propos de The Kingdom, je le vois mardi j'essaierai de vous dire ce que j'en pense dans la semaine qui s'annonce tendue... car je pars en vacances le week-end prochain et avec la rentrée des séries et l'actualité au boulot ça risque d'être une semaine assez sportive.

LE DEBUGGER's blog - Tag - HTML

Les CSS par l'exemple

Back to Basics

CSS

Fine tuning