
Publié le Mardi 06 Janvier 2009, Modifié le Mardi 06 Janvier 2009
Le montage HTML est la base d'un site web, il est souvent appelé squelette du site car c'est lui qui soutient les différentes parties du site auquel on apporte un habillage (css).
L'objet de ce billet n'est pas d'expliquer comment faire un bon montage, nous supposons ici que le montage effectué est de très bonne qualité (léger, accessible). Le but de ce billet est d'indiquer quelques astuces qui vous permettront de gagner un temps précieux lors du développement et même parfois des performances.
Prenons le cas d'un site avec un header, une colonne de droite et une partie centrale.
L'habitude va vous pousser à réaliser un montage reprenant dans l'ordre:
1°) le header
2°) la partie centrale
3°) la colonne de droite
4°) le footer
Ensuite, quand vous passez à l'intégration sous ezpublish, vous allez certainement définir un cache-block pour le header puis un cache-block pour la colonne de droite alors qu'il est certainement possible que les caches expirent de la même façon pour ces deux blocs.
Les possibilités CSS vous permettent de definir pour le même affichage dans le html:
1°) le header
2°) la colonne de droite
3°) la partie centrale
4°) le footer
Ainsi, vous pouvez utiliser un seul cache-block groupant les blocs 1 et 2 (nested cache block)
Au final, on gagne 1 requête (si mode cluster) pour chaque page appelée ce qui est loin d'être négligeable.
Un cas classique souvent rencontré: l'intégration d'un formulaire. Au lieu de surcharger tous les templates attribute_view_gui, attribute_edit_gui à cause d'un style appliqué, cela ne coute rien d'appliquer un nom de style déjà employé par défaut dans les templates attribute_view_gui, attribute_edit_gui (ex de class="box", "halfbox") et peut faire gagner du temps.
Très fréquent également, on applique souvent des styles à des élements de structures et on oublie souvent que ces derniers vont aussi être appliqués dans le contenu des RTE (balises ul, li, p, h1,h2,h3,b,... )ce qui casse complètement le rendu du RTE en front-office et bien souvent cela engendre des modifications importantes du css.