Introduction aux pages et modèles

Diaango intégre CMS sophistiqué qui permet de créer des pages et modèles de pages. Dans cet article nous aborderons quelques points clés afin de vous aider à créer et gérer vos propres pages.

Sommaire :

1. les modèles
2. les pages 
3. les blocs de mise en page 
4. l'heritage et surcharge de contenu
5. les emplacements de contenu
6. les composants de contenu de page
7. les composants CMS
8. les feuilles de style CSS
9. les métadonnées
10. les scripts 

Modèle: 

Un modèle de page est une page abstraite qui permet de définir une mise en page commune. Le modèle est constitué d'une ou plusieurs blocs de mise en page destiné à contenir des composants. Les modèles peuvent hériter d'autres modèles et redéfinir les blocs d'emplacements de leurs parents en surchargeant celles-ci.

En général les blocs contenus communs et transverses sont :

1. Les menus de navigation
2. Les pieds de page
3. Les messages erreurs
4. Les messages d'accueil
5. Les message promotionnels
6. Etc. 

Ainsi les modèles facilitent la réutilisation et  permettent de définir du contenu commun à un seul endroit.

Exemple de structure d'un modèle page :

1. Un bloc menu destiné à la navigation
2. Un bloc haut de page pour afficher des bannières
3. Un bloc au milieu qui contient le corps de la page
4. Un bloc en bas qui sert de pied de page qui contient souvent des liens de navigation

Les pages utilisant le modèle ci-dessus auront une mise en page automatique avec les 4 blocs du modèle, Il ne reste qu'a personnaliser et/ou surcharger les blocs qu'on ne souhaite pas afficher dans la page. 

Après la création de votre site diaango fournit les modèles suivants :

1. MasterPageTemplate : modèle principal avec les emplacement de mise en page ci-dessous 
   1. errorsContent : pour les messages d'erreurs
   2. middleContent : pour le contenu du milieu
   3. cookieContent : pour les cookies et les politique de confidentialité
   4. footerContent : pour le contenu bas
   5. analyticsContent : pour les scripts et tag de statistique et d'analyse
2. DefaultPageTemplate : Modèle par défaut qui hérite du modèle  MasterPageTemplate et définit les emplacements contenu ci-dessous
   1. navigationbartop
   2. navbar
   3. headerContent
   4. breadcrumb
   5. middleContent
3. ProfilePageTemplate : il herite à son tour du modèle DefaultPageTemplate, il permet d'afficher les informations d'un utilisateur et définit les emplacements ci-dessous :
4. LandingPageTemplate : il herite à son tour du modèle DefaultPageTemplate, il permet d'afficher une page de type Landing, définit les emplacements ci-dessous : 
   1. testimonialsContent :
   2. contactContent :

Pages : 

Une page est constitué aussi d'un ensemble de blocs de mise en page. Ces blocs peuvent être définit directement au niveau de la page ou être hérités lorsque que la page utilise un modèle. En général les menus de navigation, les pieds de page proviennent de la mise en page d'un modèle.

Pour remplacer les blocs hérités, il faudra les surcharger en créer un nouvel bloc de mise en page au niveau de la page et en utilisant le même identifiant de mise en page. L'identifiant de mise en page est une chaine de cararactères alphanumérique qui permet d'identifier un emplacement dans une page ou un modèle. 

Voici par exemple  les identifiants de mise en page définit par le  modèle MasterPageTemplate :

1. errorsContent : pour les messages d'erreurs
2. middleContent : pour le contenu du milieu
3. cookieContent : pour les cookies et les politique de confidentialité
4. footerContent : pour le contenu bas
5. analyticsContent : pour les scripts et tag de statistique et d'analyse

Les types de pages :

Diaango propose plusieurs types de pages, chaque type page a des propriétes spécifiques et est adapté à un certain usage.

1. Page de contenu
2. Page de backoffice

Bloc de mise en page 

Un bloc de mise en page est un section dans une page ou un modèle, il est identifié par un identifiant de position nominatif qui est une chaine de caractères alphanumérique.

Exemple : menu, footer, header.

Une modèle peut définir un ou plus blocs de mise en page : 

1. errorsContent : pour les messages d'erreurs
2. middleContent : pour le contenu du milieu
3. cookieContent : pour les cookies et les politique de confidentialité
4. footerContent : pour le contenu bas
5. analyticsContent : pour les scripts et tag de statistique et d'analyse

Un page peut  également définir ses propres blocs de mise en page, lorsqu'un page définit un bloc de mise en page avec le même identifiant de position de celui d'un bloc hérité d'un modèle, la mise en page du modèle sera alors surchargé et remplacé.

Héritage et surcharge de contenu :

L'héritage permet de simplifier la réutilisation des contenus qui sont définis dans les modèles, Ces contenus hérités peuvent être surcharger grâce à l'identifiant de position (Layout Position).

Ainsi une page de contenu est la somme des mises en page de l'ensemble des modèles dont elle hérite le contenu. 

Les emplacements de contenu

Les emplacements de contenu sont des blocs de contenu qui sont affectés à un bloc de mise en page, Ils existent deux types d'emplacement de contenus :

1. les emplacements de contenus affectés au modèle.
2. les emplacements de contenus affectés au page.

Dans la structure d'une page, les emplacements de contenu servent à contenir des composants spécifiques appelés composants d'emplacement de contenu.  

Les composants d'emplacements de contenus

Un composant d'emplacement de contenu permet de contenir un composant CMS. Il est affecté obligatoirement à un emplacement de contenu, qui a son tour est affecté à un bloc de mise en page.

Les composants CMS

Un composant est une brique fonctionnelle qui permet d'ajouter un contenu HTML dans une page web. par exemple une section, un titre, un paragraphe, une image, etc. Il est  personnalisable avec les feuilles de style CSS et réagit aux évènements HTML. comme les clics, le chargement, etc. 

Les feuilles de style et CSS

la feuille de style (CSS) est un ensemble d'attributs qui permettent de définir l'apparence et la présentation d'une page, d'un composant et tout autre contenu personnalisable. L'éditeur diaango supporte une liste exhaustive des propriétés de style HTML 5.  

Les métadonnées

Une métadonnée est une information que vous devez ajouter au code HTML de vos pages Web. Les métadonnées permettent de communiquer des informations techniques cachées dans votre page à d'autres système comme par exemple :

• les crawlers des moteurs de recherche sur leur contenu pour le réferencement de contenu (SEO).
• autres outils qui ont besoin de récupérer une information technique sur votre site afin de valider une association ou une intégration ad hoc (facebook, twitter)

Une métadonnées est constituée de deux informations :

• une clé : identifiant la metadonnée
• une valeur : contenu de la metadonnée

Exemple de métadonnées :

• meta-title qui, comme son nom l'indique, donne des informations sur le titre de la page,
• meta-description qui résume en 2 lignes la page en question
• og:title
• og:image
• og:urlt
• witter:description
• twitter:image
• twitter:card
• twitter:title

Note : Les utilisateurs ne peuvent pas voir les métadonnées présentes sur votre page. 

Scripts 

Diaango vous permet d'ajouter des scripts javascript dans vos pages et modèles de page, ces scripts permettent notamment d'ajouter un comportement dynamique à vos pages et composants, les scripts définit dans un modèle sont hérités par les pages qui utilisent ce modèle. Consulter la rubrique Script et métadonnées pour plus d'informations.

Conclusion  

Avec diaango, vous avez tous ce dont vous avez besoin pour créer des pages web dynamiques, ajouter des métadonnées et des scripts, pour aller plus loin consulter les articles dédiés à la gestion des pages et modèles.

• Ajouter un nouveau modèle
• Ajouter une page