2 Principes d'intégration

La version 3 est une évolution majeure de BackBuilder™. Cette version de BackBuilder™ fait apparaître un mode de publication innovant, les contenus flexibles.

Les contenus flexibles

Un site Internet est composé de plusieurs blocs, imbriqués les uns dans les autres. Les niveaux d'imbrication sont infinis. Chacun de ces blocs est représenté par un type de contenu.

Impact des contenus flexibles sur l'intégration

Les contenus flexibles ont un impact sur l'intégration. En effet, la CSS doit être pensée pour être évolutive.

Un type de contenu est identifié comme un élément à part entière. Il ne doit pas dépendre de son conteneur et doit pouvoir évoluer dans le site en toute autonomie. Aussi, le conteneur doit disposer d'une configuration CSS qui ne dépend pas de son parent. Si un type de contenu doit être présenté différemment suivant son conteneur, alors il est possible de surcharger la CSS afin de définir un style particulier à un conteneur.

En résumé, un type de contenu possédant des propriétés dépendant de son conteneur doit toujours être présenté correctement même s'il n'est pas dans le conteneur. Les styles attachés au conteneur ne sont que une "précision de contexte" apportée au style du type de contenu.

Dans l'exemple ci-dessous, le style de tableFocus1 ne doit pas dépendre de tdCol03 (sauf si l'affichage est différent dans tdCol03, mais un affichage par défaut doit alors être prévu).

Structure du site

Toutes les mises en page HTML sont isolées dans des templates (Smarty pour la version PHP, ASPX pour la version .NET). Les zones communes d'un site Internet sont stockées dans des fichiers spécifiques. Il est indispensable que chaque template soit au format HTML valide et puisse s'afficher sans appel d'un autre template. L'arche du site doit donc pouvoir être isolée proprement.

La découpe de la page en CSS est préférable et résout souvent d'elle-même une grande partie des difficultés. Cependant, dans le cas d'une découpe en tableau, il est important que le tableau commun soit le même pour les deux pages. Il est donc nécessaire de créer deux niveaux.

De manière générale, une bonne approche de l'intégration consiste à se demander si le template créé va pouvoir vivre indépendamment de son conteneur. Chaque bloc doit pouvoir être déplacé ou supprimé sans impact sur le site. Cette réflexion est vraie pour l'héritage des CSS ainsi que pour les découpes en tableaux.

Afin de faciliter les échanges avec les développeurs, nous préconisons également que les blocs soient encadrés par des commentaires. Cela permettra de simplifier l'identification des éléments et fixe les règles de découpages qui devront être suivies par les développeurs.

Autres conseils

Autres guidelines bloquantes si elles ne sont pas suivies :

• Les frames et les iframes sont difficilement administrables, elles sont donc déconseillées (utiliser plutôt une div avec un overflow)
• La CSS ne doit pas pointer vers une image contenant du texte (pour éviter les problèmes de traduction)

Quelques astuces qui facilitent la réutilisation des blocs dans un autre contexte :

• Utiliser au maximum les
  et au minimum les tableaux
• Ne pas fixer de largeur et de hauteur pour les blocs si ce n'est pas nécessaire

Quelques astuces non bloquantes mais qui simplifient la vie des développeurs :

• Mettre les styles généraux en haut de la CSS
• Rassembler les styles de la CSS par type de contenus les utilisant
• Commenter la CSS (indiquer le type de contenu concerné par un bloc de styles)
• Ne pas laisser dans la CSS des styles inutilisés
• Nommer les images temporaires (photos, vignettes...) en commençant par tmp_photo.jpg ou en les placant dans un dossier différent des images de la charte