En quoi la mise en page par tableaux est-elle stupide :

problématique définie, solutions offertes

Les tableaux HTML ont été créés pour une raison : présenter des données tabulaires. Mais l'apparition du border="0" rendit possible la création de grilles pour mettre en page images et textes. Bien que cette approche demeure prédominante pour concevoir des sites Web visuellement riches, le recours aux tableaux porte toutefois entrave à la construction d'un Web meilleur, plus accessible, flexible, et fonctionnel. Découvrez d'où provient le problème et apprenez des solutions permettant de créer des mises en page transitionnelles ou entièrement exemptes de tableaux HTML.

Courez chercher votre patron

Y a t-il quelques costards/cravates dans l'auditoire ? Vos patrons sont-ils ici à Seybold, mais actuellement à l'écoute d'une autre conférence ? Allez les chercher. Ce sont eux qui ont réellement besoin de savoir en quoi les standards Web peuvent faire économiser de l'argent à votre entreprise.

Survol : Qu'y gagnerai-je ?

Nous vous présenterons une méthodologie de conception qui :

• accélérera le téléchargement de vos pages ;
• réduira vos coûts d'hébergement ;
• rendra vos refontes plus efficaces et moins onéreuses ;
• vous aidera à maintenir une cohérence visuelle à travers tout vos sites ;
• accroîtra votre visibilité dans les moteurs de recherche ;
• rendra vos sites plus accessibles pour tous les visiteurs et les agents utilisateurs ;
• vous donnera un avantage compétitif (lire, sécurité d'emploi) alors que le monde se tournera vers les standards Web.

Nous discuterons également sur la mise en page par feuilles de styles en cascades (CSS) qui requiert une approche différente en termes de réflexion sur votre code et vos contenus par rapport à vos habitudes.

Les sites Web qui tuent : tableaux imbriqués et gifs transparents

Au tout début, l'Internet était principalement un médium utilisé par les universitaires, les chercheurs et les militaires pour échanger de l'information. Il ne fallut toutefois pas très longtemps pour que certains entrepreneurs visionnaires réalisent que ce nouveau médium était idéal pour vendre n'importe quoi allant des produits périssables à la nourriture pour chiens, en passant par les voitures usagées et les couvertures sportives.

Toutefois, comme c'est le cas pour n'importe quel médium dans ses premiers balbutiements, l'Internet naissant était esthétiquement ‘rudimentaire’ (et pas vraiment attrayant pour les visiteurs) jusqu'à ce que David Siegel publie son livre de référence, qui offrait de brillantes astuces pour contourner les limitations des navigateurs de l'époque et des spécifications du W3C aux environs de 1997. (On parle de Netscape 2 et 3, les copains.)

Ces astuces s'avérèrent si efficaces en fait qu'elle demeurent encore de nos jours les méthodes les plus répandues de mise en page.

Le problème avec les tableaux HTML

• Ils mélangent vos données de présentation à votre contenu.
  • Cela augmente inutilement la taille de fichiers de vos documents, puisque les utilisateurs doivent télécharger les données de présentation pour chaque page visitée.
  • La bande passante n'est pas gratuite.
• Cela contribue à rendre les refontes des sites existants et leurs contenus extrêmement lourds en terme de travail (en plus d'être onéreux).
• Rend également très difficile (et dispendieuse) la préservation d'une cohérence visuelle à travers tout un site.
• La mise en page basée sur des tableaux s'avère beaucoup moins accessible pour les utilisateurs aux prises avec des limitations physiques et les visiteurs utilisant des téléphones cellulaires pour accéder au Web.

Le Salut est à portée de main

Les navigateurs récents sont beaucoup plus aptes qu'ils ne l'étaient à afficher convenablement les standards Web, de sorte que nous n'avons plus à recourir à ces méthodes archaïques de nos jours.

Plutôt que d'imbriquer des tableaux les uns dans les autres et de remplir des cellules vides de fichiers GIF transparents destinés à caler la mise en page, nous pouvons utiliser du balisage beaucoup plus simple et des CSS pour concevoir de magnifiques sites Web qui se téléchargent plus rapidement, sont plus faciles à modifier et plus accessibles pour tous.

La solution : des CSS et du balisage structurel

En ayant recours à du balisage structurel dans nos documents HTML ainsi que des feuilles de style pour en gérer la mise en page, il est possible d'arriver à séparer le contenu des pages de la manière dont il est présenté.

Cela représente plusieurs avantages comparativement au recours aux tableaux...

Des refontes plus faciles et moins dispendieuses

En faisant disparaître le balisage de présentation de vos pages, les refontes de sites existants et de leurs contenus demandent beaucoup moins d'efforts (et sont beaucoup moins onéreuses). Pour changer la mise en page d'un site, vous n'avez qu'à modifier les feuilles de style ; vous n'avez pas du tout besoin d'éditer les pages de code elles-mêmes.

Par exemple, allez jeter un œil au CSS Zen Garden, ou au permuteur de style du site Web d'Eric Meyer. Pour en apprendre plus, consultez l'article Alternative Style de Paul Sowden.

La bande passante n'est pas gratuite

L'utilisation des standards Web permet de réduire la taille de fichiers de vos pages, puisque les utilisateurs n'ont plus à télécharger les données destinées à la présentation à chaque page visitée. Les feuilles de style qui en contrôlent la mise en page sont conservées en mémoire cache par le navigateur de l'utilisateur.

Des tailles de fichiers réduites signifient des téléchargements plus rapides et des économies en terme d'hébergement.

Hé, ces pages sont toutes semblables !

Utiliser les standards Web permet également de rendre extrêmement facile le maintien d'une cohérence visuelle à travers tout un site. Puisque toutes les pages reposent sur les mêmes fichiers CSS pour la mise en page, elles sont toutes présentées selon les mêmes spécifications.

Cela contribue à renforcer votre image de marque et à rendre votre site beaucoup plus convivial.

Écrire une fois, réutiliser partout, pour tous

Utiliser les standards Web rend nos pages beaucoup plus accessibles aux utilisateurs aux prises avec des limitations physiques ainsi qu'aux visiteurs utilisant des téléphones mobiles et des PDAs pour accéder au Web.

Les visiteurs utilisant des lecteurs d'écrans (ainsi que ceux disposant d'une connexion plus lente) n'ont plus à errer à travers d'innombrables cellules de tableaux et gifs transparents pour atteindre le contenu des pages.

En d'autres termes, séparer le contenu de la manière dont il est présenté rend celui-ci indépendant des appareils.

Google est aveugle

Parlant d'accessibilité, le fait de minimiser votre balisage et d'utiliser efficacement des éléments d'entêtes contribuera également à améliorer votre positionnement dans les moteurs de recherche.

Réduire le ratio de code par rapport au contenu, utiliser des mots-clés dans vos entêtes et remplacer tous ces titres en gifs par du véritable texte sont autant d'éléments qui contribueront à maximiser votre rendement et votre positionnement dans les moteurs de recherche.

Continuez d'utiliser des tableaux au besoin, mais n'en abusez pas

Cela permettra à vos clients (et patrons), qui sont bornés et déterminés à utiliser les navigateurs de version 4 jusqu'à leur mort, une idée assez juste de ce que le reste du monde peut voir sur le Web.

Un tableau d'allure plaisante

		Lorem ipsum dolor sit amet, consectetuer adipiscing elit.				Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
		Suscipit lobortis nisl ut aliquip ex ea commodo consequat.				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. • At vero eros et accumsan et iusto odio dignissim qui blandit • Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
		Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.				Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • Epsum factorial non deposit quid pro quo hic escorol. • Olypian quantels et gomilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.
		Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed. • Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. • Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore.

Jetons un œil sous le capot

		Le même résultat pourrait être atteint beaucoup plus simplement.				Devinez quelle est la quantité de code pour ce petit tableau ? 13.7k. Il y a 17 rangées et 9 colonnes dans ce truc. Et c'est sans compter tous ces gifs transparents !
		Il y a beaucoup trop de cellules de tableaux et d'images transparentes ici.				Et toutes les bordures en pointillés sont réalisées avec un attribut de background sur les cellules de tableaux, ce qui n'est pas conforme. • Un tableau imbriqué ? Quel intérêt ? • Pour créer une liste à puces ? Vous rigolez ?
		La même chose pourrait être accomplie avec 8 cellules et 4 règles CSS.				Sérieusement. 8 cellules de tableaux et 4 règles CSS. C'est tout ce dont on a besoin. • Oh non, un autre tableau qui se donne des airs de liste à puces ! • Suffit de baliser vos listes à puces comme des listes et de laisser les CSS faire le reste.
		Vous avez besoin d'une règle pour <table>, une pour <td>, une pour <ul> et une pour <li>.				C'est tout. Avec ça vous serez le roi. • C'est mieux que d'utiliser 8 autres cellules de tableaux pour simuler une liste à puces, ce qui est beaucoup moins accessible. • Excellent! La dernière fausse puce.

Le code qui présente la structure du tableau :

table{ margin:3px; padding:2px; border:solid 2px blue }

td{ padding:2px; border-style: solid; border-width: 1px; border-color:gray gray silver silver }

Voilà qui est mieux !

Et voici les règles CSS pour se débarasser de tout ce code excédentaire :

table{ border-bottom:1px dotted fuchsia; border-left:1px dotted fuchsia }

td{ padding:11px 20px 20px 11px; border-top:1px dotted fuchsia; border-right:1px dotted fuchsia }

ul { margin-top:10px; margin-bottom:10px; margin-left:0; padding-left:1em }

li{ margin-bottom:10px }

Récapitulatif sur le design transitionnel

Utilisez des marges et du remplissage au lieu des cellules de tableaux et des gifs transparents.

Utilisez des styles link et @import. Le premier pour les anciens navigateurs, le second pour les plus récents.

<link href="basic.css" rel="stylesheet" type="text/css">

<style type="text/css" media="screen"><!--
@import url(modern.css) screen;
--></style>

Exemples concrets :

• Santa Cruz Montessori School
• k10k
• Fox Searchlight Pictures

Mais attendez, il y a plus :

Pour obtenir plus d'information sur le design transitionnel, consultez le premier chapitre du bouquin Eric Meyer on CSS et l'ensemble de celui de Jeffrey Zeldman intitulé Designing with Web Standards.

Mise en page CSS : le futur est à nos portes

Les navigateurs utilisés par la vaste majorité des internautes aujourd'hui disposent d'un bon support CSS. Ils ont tous leurs petites imperfections, mais avec un peu d'expérience, elles deviennent facilement contournables.

Utiliser CSS est facile ; même pour un mec comme moi qui trouve que la plupart des JavaScripts ressemblent à d'horribles jurons.

if(links[x].length > 0);{
for (y=0; y<links[x].length; y++) {

Chaque règle CSS possède un sélecteur et une déclaration. La déclaration est composée d'une propriété et d'une valeur. Les propriétés qui évoquent deux mots sont séparées par un trait d'union.

body {margin:0; padding:0}

.related {float:right; width: 15em; margin-left:1em; margin-bottom:1em; color:blue}

#footer {color:gray; font-size:0.6em; line-height: 1.2em; background-color:white; margin:0}

Balisage structurel : coder sémantiquement, en fonction du besoin

Bien que travailler avec CSS soit simple, faire usage des CSS pour construire une mise en page requiert une approche assez différente de ce à quoi la plupart d'entre nous sommes habitués.

Plutôt que de penser au positionnement de chaque élément ("celui-ci va ici, celui-là va là") lorsque nous construisons un document ou une mise en page, il importe de plutôt réfléchir en terme de type d'information dans nos pages, ainsi qu'à la structure de cette information.

Nous attribuons au plus important titre de nos pages un élément <h1> ; aux sous-titres, un élément <h2>, et ainsi de suite. Les paragraphes, bien sûr, sont structurés à coups de <p>.

Cette approche se nomme balisage "structurel" ou balisage "sémantique".

Au lieu d'intégrer vos éléments de contenu dans des cellules de tableaux enveloppez-les dans des éléments div. Attribuez à chacun de vos éléments div un id ou un class qui décrit leur contenu ou leur fonctionnalité, plutôt que leur apparence.

Évitez le balisage de type "<b>ed and <br>eakfast"

Réfléchissez aux raisons pour lesquelles vous souhaiteriez qu'un objet apparaisse d'une certaine façon dans vos pages. Quelle en est la signification ? Votre balisage peut et devrait être porteur de sens, même pour une personne qui ne peut voir votre page. Un balisage sémantique rend les pages plus accessibles pour tous, incluant les moteurs de recherche.

Pourquoi souhaitez-vous attribuer de l'italique à un élément ? Est-ce pour y mettre de l'emphase, <em>, ou est-ce pour citer le titre d'un bouquin, <cite> ?

Si un élément doit être en caractères gras, il mérite probablement d'être balisé à l'aide de l'élément <strong>.

Si votre intention est de forcer un saut de ligne après un objet, il y a fort à parier que vous auriez tout intérêt à recourir à un élément d'entête pour baliser celui-ci. Si ce n'est pas le cas, l'objet en question dispose t-il d'un class qui est répété partout dans le site ? Si oui, optez plutôt pour une solution CSS visant à remplacer ces <br>.

.foo {display:block}

Pour en savoir plus, consultez Bed and BReakfast markup (B&BR) par Tantek Çelik.

Que sont réellement les barres de navigation ?

Pensez-y bien : votre navigation est en fait une liste non-ordonnée de liens.

Balisez-les donc dans un élément <ul>.

• lien1
• lien2
• lien3
• lien4
• lien5

Barre de navigation horizontale

Nous pouvons utiliser CSS pour contrôler comment ces listes sont présentées dans nos pages.

En utilisant display:inline, il est facile de créer des barres de navigation horizontales.

Voici le code utilisé pour cette barre de navigation :

#nav1{
margin-top:1em;
margin-bottom:0.5em;
}

#nav1 ul{
background-color:silver;
text-align:center;
margin-left:0;
padding-left:0;
border-bottom:1px solid gray
}

#nav1 li{
list-style-type:none;
padding:0.25em 1em;
border-left:1px solid white;
display: inline
}

#nav1 li:first-child{
border:none;
}

Barre de navigation verticale

Et voici le code pour celle-ci :

#nav2 {
background-color:silver;
border:solid 1px gray;
width: 8em
}

#nav2 ul{
list-style-type:none;
margin:0;
padding:0;
border:none
}

#nav2 li{
margin:0;
padding:0.25em 0.5em 0.25em 1em;
border-top:1px solid gray;
width: 100%;
display: block
}

html>body #nav2 li{
width: auto;
}

#nav2 li:first-child{
border:none
}

Pour plus d'information, consultez l'article de Mark Newhouse, Taming lists, sur A List Apart, et "Styling lists" sur le wiki de CSS-Discuss.

Situations dans lesquelles les tableaux sont plus adaptés que les CSS

Il y a un certain nombre de choses pour lesquelles les mises en page par tableaux demeurent mieux indiquées que celles par CSS.

Supposons que vous souhaitiez faire suivre une barre de navigation noire le long de votre contenu. Avec une mise en pages par tableaux, rien de plus simple; attribuez simplement un fond de couleur au <td> correspondant.

Il est possible d'accomplir la même chose en CSS, mais cela requiert une approche différente.

Si nous attribuons un fond de couleur à notre div de navigation, la couleur s'étendra jusqu'à la fin de son propre contenu. Comme le contenu occupe généralement plus d'espace que la navigation, cela en fait une solution insatisfaisante.

Nous pourrions étendre un gif noir dans notre div de contenu, auquel nous attribuerions suffisamment de padding à gauche, mais si notre navigation s'avère occuper plus de place que notre contenu sur certaines pages, cela ne fonctionnera pas plus.

Une solution plus simple consisterait à attribuer une image de fond noire au <body> du document ; ce serait tout à fait fonctionnel jusqu'à ce que vous éprouviez le besoin de spécifier une autre image de fond à votre <body>.

Ou alors, nous pourrions envelopper notre contenu dans un autre div conteneur et y faire étendre l'image de fond, mais cela aurait pour effet d'ajouter du code non-sémantique à notre document.

Sans compter bien sûr que si vous souhaitez que la largeur de votre navigation soit fluide, recourir à une image de fond ne résoudra pas le problème.

Comme nous disions donc, il y a un certain nombre de choses pour lesquelles la construction d'une mise en page basée sur des tableaux s'avère plus efficace qu'une mise en page par CSS. Mais au final, c'est à vous de décider si l'excédent de code associé avec le recours aux tables pour des données de présentation plutôt que des données tabulaires en vaut la peine.

Passer des astuces de tableaux aux standards Web : la vue d'ensemble

Vous devez d'abord opter pour une stratégie de migration. Allez-vous faire migrer tout le site d'un seul coup, ou allez-vous plutôt y aller de manière progressive, une section à la fois ?

Identifiez les pages et les sections qui bénéficieraient le plus de cette conversion. Les pages d'accueil, les pages de promotion de produits et autres pages de ce type sont un excellent point de départ.

Identifiez les types de contenus ou d'information de votre site globalement :

• Information sur les produits ;
• Information sur les tarifs ;
• Information sur la société ;
• Portfolio ;
• Services offerts ;
• Informations aux investisseurs ;
• Panier d'achat ;
• Forums pour les utilisateurs ;
• Et ainsi de suite.

Fragmentez vos pages

Lorsque vous avez identifié les différents types de contenus sur votre site, il est temps de passer à une analyse de division logique des contenus pour les pages existantes.

• Navigation principale ;
• Sous-navigation ;
• Entête et pied de page ;
• Contenu ;
• Information contextuelle ;
• autre.

Analysez la structure de vos tableaux pour y identifier les imbrications, les images transparentes et les cellules de bordure (notre but est de remplacer tout ça par des éléments div ou une structure par tableaux beaucoup moins lourde).

Jetez un coup d'oeil à votre balisage

Lorsque l'analyse de vos pages est terminée, il est temps d'ouvrir le capot du site et de s'attarder sur le code lui-même pour y repérer tout le balisage de présentation pouvant être remplacé par du balisage structurel.

• Pour l'amour de tout ce qui est pur et bon, débarrassez-vous des éléments <font> et des gifs transparents !
• De même, jetez aux ordures les éléments <b> et <br>.
• Débarrassez-vous du balisage de présentation pour les tableaux (bgcolor, background, et tout le reste).
• Remplacez le code CSS purement présentationnel (des trucs du genre <span class="entete">) avec un balisage structurel ou sémantique plus approprié. (Tantek Çelik couvre ce point plus en profondeur dans un billet intitulé A Touch of Class.)

Changez le balisage de présentation par du balisage structurel

Vous pouvez recourir à une option de repérage et remplacement automatique (et les expressions regulières), mais l'approche la plus simple consiste encore à visualiser vos pages dans un navigateur et copier-coller le contenu de vos textes dans votre éditeur HTML.

Soyez sensibles à la structure de votre document ! Un simple remplacement des <b> par des <strong> est insuffisant.

Quel est l'entête le plus important ? Attribuez-lui un élément <h1>. Marquez les sous-éléments d'entêtes avec des <h2>, <h3> et ainsi de suite. Balisez vos paragraphes avec des balises <p>. Construisez votre navigation avec une liste non-ordonnée.

Choisissez un DOCTYPE et utilisez-le. (Nous vous recommandons le XHTML transitionnel, à moins que vous ne soyez un pur et dur, auquel cas nous vous incitons à y aller à fond la caisse avec XHTML strict.)

Divisez votre page en divs logiques

Placez votre navigation principale dans un div avec un id nommé navPrinc, votre navigation secondaire dans un div avec un id ou un class navSecond. Placez votre pied de page dans un <div id="basPage"> et enveloppez votre contenu dans un <div id="zoneContenu">.

Ça a peut-être l'air de n'importe quoi pour le moment, mais dès que vous commencerez à ajouter des règles à votre feuille de style, le tout prendra rapidement forme.

Il est grand temps d'écrire vos CSS

Commencez par donner une bordure à chaque div. Par exemple, div {border:1px dotted gray; padding:.5em}. Cela vous permettra de bien voir où ceux-ci débutent et prennent fin. Vous pourrez aussi voir si certains éléments sont imbriqués les uns dans les autres.

Écrivez vos CSS pour les sélecteurs d'éléments en premier lieu (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, etc.)

Utilisez autant que possible des sélecteurs contextuels ou descendants afin d'optimiser votre code au maximum. Par exemple, #navSecond li{border:1px solid black; padding:.5em; display: inline} affectera seulement les items de liste inclus dans votre div nommé navSecond.

Testez dans un maximum de navigateurs et demandez à vos amis de tester dans les leurs.

Exemples de sites élaborés avec CSS

• CSS Zen Garden
• Adobe Studio
• Wired News
• ESPN
• Quark
• Inc.com
• PGA Open Championship
• phish.com
• CSS Edge

Lisez tout sur la question !

Il est évidemment impossible de couvrir tout ce qu'il y aurait à dire au sujet du design par CSS en moins d'une heure. C'est pourquoi ces bouquins peuvent vous aider à maîtriser les standards Web de manière à produire des sites qui seront plus légers, plus propres et plus rapides.

• Eric Meyer on CSS: Mastering the Language of Web Design; Eric Meyer; New Riders; 2002
• Designing with Web Standards; Jeffrey Zeldman; New Riders; 2003
• Cascading Style Sheets: Separating Content from Presentation; Owen Briggs, Steven Champeon, Eric Costello, et Matt Patterson; glasshaus; 2002
• SAMS Teach Yourself CSS in 24 Hours; Kynn Bartlett; SAMS; 2002
• Cascading Style Sheets: Designing for the Web; Hakon Wium Lee et Bert Bos; Addison-Wesley Pub Co; 1999
• Cascading Style Sheets: The Definitive Guide; Eric Meyer; O'Reilly & Associates; 2000

Qui a du temps à perdre avec le papier ? Donnnez-moi des ressources en ligne !

CSS-Discuss

• mailing list: Très active et utile.
• Wiki: "Entre autres choses, le wiki sert de mémoire collective à long terme aux participants de la liste." Vous voulez donner à Internet Explorer pour Windows quelque chose qu'il est en mesure de comprendre mais offrir toute la gomme aux "vrais" navigateurs ? Vous trouverez comment y parvenir (et bien plus encore) ici.
• Archives: Vous êtes bloqués sur un problème de CSS ? Ne vous en faites pas, quelqu'un, quelque part a déjà vécu ce même problème (et a trouvé de l'aide pour le régler). Fouillez ces réponses ici.

zeldman.com The Daily Report: Un contenu perspicace, provocateur, bien écrit et des liens utiles servis quotidiennement.

A List Apart Pour ceux qui construisent les sites Web.

• Taming lists, Mark Newhouse. Information incontournable pour vous aider à coder sémantiquement.
• CSS: Going to Print, Eric Meyer. Vous n'aurez plus jamais à coder une version optimisée pour l'impression.
• Alternative Style: Working With Alternate Style Sheets, Paul Sowden. Laissez à vos visiteurs le soin de décider comment ils doivent visualiser vos pages.
• Using XHTML and CSS for an effective Search Engine Optimization Campaign, Brandon Olejniczak. Le balisage structurel vous aidera également à obtenir un meilleur positionnement dans les moteurs de recherche.

The Web Standards project Bénissez ces gens.

CSS: A guide for the unglued Un condensé de liens extra.

CSS Layout Techniques: for Fun and Profit Mises en page CSS disponibles pour réutilisation dans vos projets par Eric Costello. Également des ressources et des didacticiels.

Real World Style Mises en page CSS, trucs, astuces et techniques, offert par Mark Newhouse.

The Business Benefits of Web Standards De bonnes nouvelles pour les gestionnaires modernes. Le gospel des standards Web, dans un langage qu'un MBA peut comprendre et apprécier.

OpenWeb Site pédagogique destiné aux développeurs Web confirmés, les décideurs d'entreprise, mais aussi les débutants. OpenWeb regroupe plusieurs dizaines d'articles et tutoriels permettant de progresser dans la compréhension et l'utilisation des standards, dont XHTML valide, CSS et le DOM.

Pompage Traduction en français de certains articles importants des revues faisant autorité dans la communauté du web design anglo-saxonne.

Liste de discussion Pompeurs Cette liste offre un espace pour réagir aux article parus sur Pompage.net et discuter de tout sujet touchant à la publication sur le web : CSS, (X)HTML, PHP, JavaScript, Apache, ASP, DOM, graphisme, utilisabilité, accessibilité, architecture de l'information, standards... et tout le reste.

Merci. Des questions ?