<C²: webløg />

Courriel - email address

Avatar Denis

vendredi 12 septembre 2003
par Denis Boudreau

Pourquoi séparer présentation et contenu ?

Vous avez entendu cette expression si souvent sur le Web déjà que maintenant, elle ne représente plus rien pour vous. Faire une séparation distincte entre le contenu d'un document Web et sa présentation; bien sûr, mais à quoi bon ? Aux yeux de l'utilisateur moyen, les aspects de contenu et de présentation sont intrinsèquement liés dans un document (x)HTML. Comment peut-on les séparer et surtout, pourquoi aurions-nous besoin de le faire ?

Avec l'évolution progressive du HTML et une réorientation souhaitée vers un code à définition plus structurée, certains éléments HTML comme <font> ont été mis au banc de la norme (x)HTML par le Consortium W3 au profit d'une gestion parallèle, faite par CSS. Cette restructuration du code vise essentiellement à favoriser la co-habitation dichotomique de deux types de codes; structurel et présentationnel.

Le code de nature structurelle prend en charge ce que vous êtes en mesure de lire à l'écran, soit le texte, les images et autres formats issus des divers modules d'extension comme Flash ou encore, QuickTime. Le code de nature présentationnelle quant à lui, s'occupe de faire la mise en page de ce contenu, afin d'en assurer la charte graphique, le positionnement et la définition de l'identité visuelle sur la plateforme de diffusion (par exemple, l'écran d'ordinateur).

Pour des raisons que nous allons aborder à l'instant, il est tout à votre avantage de séparer au maximum ces deux types de code et de les laisser communiquer le moins possible entre eux.

Les documents HTML intègrent contenu et présentation dans un bloc de code "spaghetti" indissociable depuis des années. La volonté évolutive de rendre le Web attrayant se fit au détriment de la force initiale du HTML, qui était de simplement structurer sémantiquement l'information. Avec l'arrivée des navigateurs graphiques et l'ajout par les fabricants de navigateurs d'éléments HTML voués à la gestion d'aspects de présentation, le HTML s'est dénaturé pour devenir un langage d'affichage de contenus plutôt que de structure de contenus.

Devant le constat navrant des limites du HTML comme outil de gestion de l'apparence visuelle des fichiers et l'appauvrissement inquiétant du niveau d'accessibilité des contenus pour les agents utilisateurs alternatifs, le W3C prend la décision de nettoyer HTML des éléments de présentation et de créer un deuxième langage (les CSS) pour assurer la gestion de la présentation du document Web. Les avantages de cette séparation sont multiples :

  1. le document Web retrouve sa vraie richesse structurelle et sémantique ;
  2. le contenu peut être réutilisé facilement dans d'autres contextes ;
  3. le design d'un site devient comme un vêtement que l'on peut facilement changer ;
  4. les refontes de sites signifient souvent qu'un simple changement de feuille de style, sans modifications à apporter aux pages elles-mêmes ;
  5. les agents utilisateurs incapables d'interpréter la mise en page complexe peuvent tout de même interpréter le contenu sans le moindre heurt ;
  6. les fichiers sont considérablement allégés, permettant des téléchargements beaucoup plus rapides et des économies substantielles en terme de bande passante ;

Denis Boudreau | 2003.09.12 @ 16:56

Alors, qu'en pensez-vous ?

Voici ce que vous aviez à en dire... vos impressions, recueillies à vif.

2003.09.13 @ 06:41 par Pierre

Je suis évidemment d'accord avec tout ce que tu as écris, toutefois, j'ai toujours le même problème qui me chicote à chaque fois que je fais une nouvelle mise en page: je me retrouve presque toujours obliger d'intégrer du code pour faciliter la présentation. C'est souvent liés aux incapacités d'un fureteur particulier ou aux limites des CSS. On se retrouve donc avec du code qui deviendra obsolète si on change de mise en page et qui pourrait même devenir nuisible.

Je sais bien qu'on ne vit pas dans un monde parfait mais ça m'agace quand même, surtout quand j'essaie de convaincre un intégrateur des bienfaits des standards et que je dois ensuite lui montrer comment faire des hacks...

Et pendant qu'on évangélise, il faudrait aussi penser aux concepteurs graphiques. J'en connais trois types:
- ceux qui n'y connaissent rien et qui font n'importe quoi;
- ceux qui ont compris comment fonctionne les tableaux;
- ceux qui connaissent à fond la technique et qui l'exploite.

Le premier type est une cause perdue ;-)
Le troisième type se débrouille très bien.
Par contre le deuxième type (la majorité, j'ai l'impression...) a du mal à s'adapter aux nouvelles contraintes (et libertés!) imposées par les CSS (on connaît tous de nombreux exemples de choses faciles à faire en tableaux et plutôt compliquer à reproduire en CSS).

Et une fois que les concepteurs auront compris les possibilités et les limites, que les fureteurs auront évolués, on pourra [peut-être] faire du code propre propre.

Haut retour au début de la page

2003.09.13 @ 10:42 par CYBERcodeur

Je réalise que j'ai oublié un autre aspect intéressant d'une séparation nette entre présentation et contenu; la simplification du code présenté dans le document Web qui permet une indexation plus efficace des pages dans les engins de recherche.

En efet, c'est très facile de comprendre pourquoi; si les pages conçues massivement avec les CSS permettent d'économiser près de 25 à 50 % de charge sur l'interprétation dans le navigateur par opposition au même document construit de HTML à la sauce des années 90, il devient beaucoup plus aisé d'identifier et de repérer les mots-clés qui permettront de faire ressortir la page dans les engins d'indexation lors de recherche précises.

Haut retour au début de la page

2003.09.13 @ 11:08 par CYBERcodeur

Pour répondre à ton commentaire Pierre, bien qu'il soit tout à fait vrai qu'à l'occasion, nous devions faire une petite entorse à nos bons principes, il n'en demeure pas moins que c'est toujours mieux de devoir enfreindre la règle une fois de temps en temps que de manière systématique, tout le temps.

L'habitude de NE PAS succomber à la classitis ou l'iditis (maladies chroniques qui obligent le développeur Web à encombrer ses documents de classes et d'id CSS pour tous les cas de figure) et de se référer dans la mesure du possible à une gestion externe des règles CSS permet de régler la très grande majorité des problèmes dont tu parles.

Et dans un cas ou nous devrions un jour reprendre le code d'un projet pour le sauver et l'exporter vers un autre habillage ou une autre plateforme de diffusion, le travail d'assainissement sera beaucoup moins laborieux qu'il ne l'eut été autrement. :)

La conception de sites Web reposant sur des méthodologies de travail normalisées n'est pas la panacée du tout problème Web... mais cela en règle bien 95% selon moi. En attendant de pouvoir faire mieux (ne visons rien de moins que 100%), ce qu'il faut comprendre AMHA, c'est l'amélioration potentielle et éventuellement complète que cette formule sous-tend.

Je ne pense pas qu'il y ait de réels irrécupérables; à terme, il n'y aura que des hypocrites. :)

Il y a bien sûr les bornés et autres nombrilistes qui nous entourent dans notre quotidien, mais l'important, c'est de démontrer par l'exemple que nous proposons la solution la plus optimisée, la plus efficace et la plus rentable. Tôt ou tard, ces irréductibles seront eux aussi réduits à l'illumination. Je n'ai encore jamais rencontré personne qui choisisse consciemment la solution la moins rentable et la moins efficace par principe de misérabilisme et de volontaire incompétence. Quand l'argent dicte la marche à suivre, même les moins réceptifs deviennent du coup coopératifs. En autant qu'ils sachent qu'une alternative existe à leurs méthodes de travail prouvées comme infructueuses.

Je ne suis pas sûr que la majorité se retrouve dans ta deuxième catégorie. J'aurais tendance à en repousser une bonne partie dans ta première. Néanmoins, une fois la graine du doute semée dans leurs esprits, c'est miraculeux de regarder les opinions évoluer et de voir progressivement ces mêmes irréductibles emprunter le chemin que l'on a soi-même parcouru quelque temps auparavant.

La majorité ne le feront peut-être jamais (par manque de vision, d'intérêt ou de compréhension), mais ceux qui le feront s'assureront une place de choix dans la conception Web de demain qui laissera tôt ou tard les autres derrière. On appelle ça l'élimination naturelle. Combien de développeurs Web qui ne connaissaient que le HTML 3.2 il y a 5 ou 6 ans et qui ont fait le choix de ne pas évoluer travaillent encore dans le domaine aujourd'hui ? De ceux qui s'accrochent encore, il en restera combien demain ? Notre survie en tant qu'informaticiens passe par la formation et le renouvellement de nos connaissances. Penser autrement, c'est jouer à l'autruche. C'est un suicide professionnel.

On jour mon vieux, on fera du code propre, propre, je te le garantis... et si tout va comme je le souhaite, on pourra peut-être même en faire ensemble. ;)

Haut retour au début de la page

2003.09.13 @ 12:11 par Bleizig

Un autre point important dans la separation contenu/contenant, prenons le contexte d'une entreprise produisant des sites dynamiques assez consequents. Si le code html structurel + dynamique(jsp, php, asp ...) + html de presentation + script client se trouvent tous dans le meme fichier, ca devient une galere monstrueuse:
- le designer et le codeur de script dynamiques ne peuvent pas bosser au meme moment sur le meme fichier (ou alors il faut se taper des 'merge' toujours couteux en temps)
- le designer va essayer de bidouiller le code dynamique (et le plus souvent mettre sa zone) et vice versa. Par experience, je prefere que le designer reste loin de mon code et je suis sur qu'il n'en pense pas moins de moi et de sa mise en page.

Haut retour au début de la page

2004.02.18 @ 17:48 par Olivier Delemar

Ah ! Coder propre, séparer le contenu de la forme, forcer les navigateurs à respecter une norme... Voilà des quêtes pour lesquelles je serais prêt à tout abandonner, sauf mon bâton de pèlerin, pour porter la bonne parole au Monde renégat.
Je me souviens encore avec émotion de ce jour où, jeune thésard et fervent adepte de Gopher, je me suis précipité dans le bureau d'un ami pour lui montrer NCSA Mosaic. 'Ça, c'est une révolution' lui ais-je dit en substance, 'tu vas voir que ça va révolutionner Internet !'. Pensez donc : on pouvait même publier des images en ligne ! Plus besoin de les télécharger pour les ouvrir ensuite avec un logiciel de visualisation. Un monde nouveau se profilait devant mes yeux, un monde de communication pas seulement réservé aux scientifiques dont j'étais alors.
Hélas, Netscape et Microsoft n'ont pas mis longtemps à casser mon rêve. Le dernier projet de site WEB auquel j'ai participé - c'était il y a deux ans - fut un véritable cauchemar. On a fini, à mon désespoir, par coder pour Internet Explorer 5.5 PC uniquement, et installer un serveur Citrix pour que nos clients sous Mac puissent utiliser ce navigateur despote. Et encore, cette application 3 tiers (passée depuis à 5 ou 6 tiers !) ressemble plus, côté client, à une collection de javascripts comme on peut en trouver à foison sur la toile.
Cette dernière expérience m'a laissé une telle amertume que j'étais fermement décidé à laisser tomber le monde du WEB. Et puis...
Et puis récemment, un ami m'a mis à contribution pour créer un CMS permettant à son client de mettre à jour au jour le jour un site WEB à vocation communicante. Avant tout, j'ai voulu prendre un peu la température, savoir où en était l'HTML. Et là, ce fut la révélation !
Tombant par hasard sur l'article de Bill Merikallio et Adam Pratt, mon surf m'a conduit dans le fabuleux CSS Zen Garden, puis ici, et de là chez la charmante rédac'chef de Pompage... La vérité était - pour une fois - là, et pas ailleurs. Le vent apportait une douce rumeur de beauté et de normalisation, tout en balayant les navigateurs égocentriques. Je connaissais maintenant la voie qu'il allait me falloir suivre : XHTML et CSS seraient mes deux testaments.
J'avais même commencé, prosélyte enthousiaste, à tenter de convertir le graphiste qui me donne la réplique dans la nouvelle aventure que je mène, ainsi que mon compagnon de galère avec lequel j'avais codé l'immonde plat de nouilles deux ans auparavant. Puis je me suis mis à l'ouvrage, rajeuni de 10 ans. Et c'est alors que le doute m'est tombé dessus comme sur un séminariste qui toucherait du doigt la misère du Monde : CSS2 n'est pas complet. Il comporte même des lacunes parfaitement inconcevables, pour reprendre l'expression chère au Vizzini de 'Princess Bride'.
Laissez moi vous présenter deux exemples :
- Il est impossible de positionner 2 colonnes de texte côte à côte, à l'horizontale. Tout ce que j'ai trouvé sur le Net comme solution à ce problème revient à placer le 2ème bloc (un <div>) à une position donnée sur la page qui tienne compte de la largeur du premier. Ce n'est pas ce que j'appelle placer un bloc à la droite d'un autre. Je ne veux même pas savoir la largeur du premier bloc ! C'est une immonde bidouille. J'accepte de bidouiller pour pallier aux déficiences de certains navigateurs, mais pas pour suppléer à celles d'une norme.
- Il est impossible de centrer verticalement un texte dans un bloc qui ne soit pas une cellule de tableau ! Incroyable ! Je me trouve obligé d'utiliser trois tags (<table>, <tr> et <td>, plus leur trois tags fermant) pour centrer un texte verticalement. Encore une fois, je ne veux, et surtout ne peux pas savoir la hauteur du texte.
Chers, très chers CYBERcodeurs, ramenez moi sur le droit chemin, dites moi que je me trompe, que j'ai mal compris. Dites moi que le W3C m'aime et que je suis son enfant. Ne laissez pas la brebis égarée que je suis pourrir plus longtemps dans les cellules de l'ignoble <Table>.

Amen.

Olivier Delemar

Haut retour au début de la page

2004.02.18 @ 18:17 par Bleizig

lol ... joli commentaire.

Pour ton premier problème, la solution existe à l'aide des float. Regarde le site du consortium (www.w3.org), un très bon tutorial se trouve aussi ici: http://openweb.eu.org/art...

Pour ce qui est du deuxième, je n'ai jamais, à mon grand désespoir, trouvé de solution générale ... seulement des bidouilles au cas par cas.

En espérant avoir pu t'apporter quelques éléments de réponse ...

Haut retour au début de la page

2004.02.18 @ 20:07 par CYBERcodeur

Bonjour Olivier, touché par ton témoignage, je me permets de te pointer dans cette direction :

http://thenoodleincident....

Tu trouveras toute une série de combines sous cette page collectrice pour faire joujou avec CSS et vraiment abuser du positionnement avec les feuilles de style :

http://thenoodleincident....

Il est clair que tu es passé par une série de déceptions avec les tehcnologies, mais si ça peut te rassurer, tu es loin d'être seul à avoir été dégoûté par les courbettes qui devaient être faites à l'époque.

Heureusement (et c'est ce qui fait en sorte que personnellement, je suis encore dans le domaine), les choses évoluent et les courbettes sont de moins en moins nécessaires.

Mais effectivement, à ma connaissance, pour le reste de tes questions, il n'y a aucun support standardisé et étendu, que des bidouilles plus ou moins efficaces (du moins pour l'instant). Il y a peut-être ceci, mais c'est encore du patentage :

http://www.wpdfd.com/edit...

En espérant que ça peut aider et au plaisir de te revoir ici ! :)

Haut retour au début de la page

Les commentaires et trackbacks sont désormais fermés. Pour toute remarque, vous pouvez toujours nous contacter.

Pisteur (Trackback)