Utilité des rangées de contenu

De l'utilité des rangées de contenu.

Nous sommes dans notre espace d'administration.

Avec Automne, nous avons donc la possibilité de fabriquer très facilement des modèles de pages et nous allons nous servir pour le moment d'un exemple visuel en nous positionnant sur la page "Rangées" (de votre nouvelle installation) afin de voir comment elle est faite.

page_rangee

Nous  voyons apparaitre rouge qui nous rappelle que nous sommes en mode édition et un rectangle vert qui entoure le texte de ce qui est édité actuellement.
Il s'agit de l'espace client (il n'y en a qu'un dans cette page) et il ne contient qu'une autre rangée que nous pouvons ouvrir en cliquant sur l'icône (crayon) qui apparait quand on la survole en passant le pointeur de la souris dessus.

Notons que si il y avait d'autres rangées de contenu, nous les verrions, et qu'elles sont toutes indépendantes ce qui est bien pratique quand on comprend que si par exemple nous utilisions fréquemment le formatage d'une rangée (ou ce qu'il y a dedans), nous pourrions fabriquer un "modèle de rangée" et le réutiliser par la suite.

C'est d'ailleurs pour cela que vous trouvez un lien 'Modèle de rangée" dans votre menu admin de droite qui n'est rien d'autre qu'une "bibliothèque" de rangées comme nous avons une "bibliothèque" de modèles de page, et une Médiathèque dans laquelle sont rangés les images, sons ou autres médias que vous utilisez dans vos pages.

Il est utile de préciser ici que ces "rangées" sont en fait des blocs d'édition que vous allez empiler les uns sur les autres et que vous pourrez déplacer après à votre guise au sein du même espace client en "glissant disposant" comme c'est expliqué ici.

Si vous vouliez deux rangées cote à cote, vous créeriez dans le modèle de la page en cours un nouvel "espace" client et nous allons voir cela un peu plus loin.

Faites maintenant des test en intégrant une ou plusieurs rangées comme c'est expliqué dans la Partie 1 De ce tutoriel en utilisant les rangées à à disposition et comprenez l'utilité que vous allez tirer de cette bibliothèque de modèles de rangées de contenu préformatées.

Vous n'aurez plus besoin de surcharger vos pages avec des codes parfois pesants en gardant une homogénéité dans l'ergonomie de vos productions.

Vous allez pouvoir enregistrer vos propres formatages en fabriquant vous-même des modèles de rangées en cliquant sur l'outil Modèles/modèles de rangées/Nouveau et examiner avec attention avant de vous lancer l'onglet "définition XML" des autres rangées à votre disposition en cliquant sur "Modifier" après les avoir sélectionné une à une.
Nous étudieront dans un chapitre dédié le code à employer pour fabriquer des rangées et il est clair qu'une bonne connaissance en XHTML et XML est nécessaire mais pour les vrais débutants, encore une fois, sachons que l'observation et la déduction sont nos meilleures amies.

Je vous montre cela pour vous faire savoir que cela existe et, au fur et à mesure de ces pages nous comprendrons le fonctionnement et les secrets. Pour le moment, utilisons l'existant et revenons sur notre page "Rangées".

Il est fort possible que nous désirions avoir deux rangées cote à cote soit deux colonnes dans notre page (voire plus) ou même un espace occupant toute la largeur et deux colonnes en dessous.

Les modèles de page

Nous allons aborder le principe du modèle de page car c'est là que cela se passe.

Nous pourrions bien sûr n'avoir qu'un espace client, y intégrer une rangée et nous servir de cet espace pour créer l'espace éditorial de notre page avec nos moyens classiques puisque l'éditeur intégré nous permet cela.

Oui, mais quand vous voudrez modifier l'architecture d'une section il vous faudrait intervenir sur l'architecture de toute la page crée dans votre rangée et il serait plus judicieux de séparer les espaces.

Par exemple, une zone qui accueille un éditorial quotidiennement mis à jour, une zone pub, une zone liens et une autre zone qui accueillerait des entêtes d'articles et que vous voudriez modifier fréquemment en changeant son ergonomie ou sa présentation.

D'où cette idée de séparer par des "espaces client" notre page. On peut modifier le contenu d'un seul espace client sans avoir à toucher au reste.

Allons donc dans le modèle de notre page et penchons nous sur l'intérêt que représente ce système.

Regardons tout d'abord en cliquant sur "Propriétés" quel modèle utilise la page courante pour exister. Nous verrons que la page "Rangées" utilise le modèle "Intérieur Démo", que son identifiant est "26" (regardez la barre d'adresse de votre navigateur) et d'autres informations que nous détailleront au chapitre concerné.

Fermons cette fenêtre et allons maintenant dans Modèles/modèles de pages/intérieur Démo.

Un clic sur ce modèle, "Modifier" (nous n'allons rien modifier du tout mais seulement regarder) et nous remarquons qu'elle est autorisé sur le site "Démo" et, en cliquant sur l'onglet "Définition XHTML", apercevons le code avec lequel elle a été conçue.

D'ici, il nous est possible d'intervenir sur ce code pour changer la physionomie de la page en tant que telle et de son contenant dans sa globalité.

Sur un site classique, une page appelle le template du site et son contenu. Vous modifiez seulement ce contenu.
Automne permet pour chaque page de changer totalement non seulement son contenu, mais aussi le reste et tout cela est modifiable à loisir en quelques clics quand nous en avons l'habitude.

Nous voyons donc le code source de notre page et son architecture et surtout "les tags" qui appellent le contenu par exemple:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><atm-constant name="APPLICATION_LABEL" /> : <atm-title /></title>
<atm-css-tags files="/css/reset.css,/css/demo/common2.css,/css/demo/interieur2.css" media="all" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="/css/demo/ie6.css" media="all" />
<![endif]-->
<atm-css-tags files="/css/demo/print.css" media="print" />
<atm-meta-tags /

Où les tags appellent...

<atm-constant name="APPLICATION_LABEL" /> :
Permet d'appeler une constante, ici le nom de l'application

<atm-title /> : 
Recupére Le titre de la page que vous renseignez lors de sa création

atm-css-tags files ="" /> 
Les feuilles de syles (Cette syntaxe permet de compresser les feuilles de style fournies en paramètre )

 

<atm-js-tags files="" /> : 
Même chose que atm-css-tags mais pour les fichiers javascripts

atm-meta-tags : 
Les métatags

atm-linx : 
Les liens

Ces quelques exemples ne sont qu'un aperçu d'une liste que nous travaillerons le moment venu. 

Ce qui nous intéresse beaucoup en ce moment, c'est le tag atm-clientspace qui appelle les espaces clients qui vont donner des espaces dans lesquels nous pourrons intégrer nos rangées de contenu.

Nous comprenons mieux maintenant le fonctionnement d'Automne d'autant plus que tous les outils sont implémentés dans l'interface d'administration ce qui est bien agréable nous en conviendrons.
Du coup, nous pouvons maintenant construite notre première page (à nos couleurs) et nous pencher sur l'utilisation de la médiathèque.

La Médiathèque

Créons une page, intégrons une rangée (gardons la 200 Texte pour apprendre plus facilement) et supposons que nous voulions intégrer une image.

Vous aurez certainement remarqué que quand nous créons une page, il nous est proposé une case "Créer la page sans les rangées par défaut".
Cette option propose tout simplement les rangées intégrés dans les modèles de page déjà à disposition mais cela ne nous intéresse pas car nous voulons créer des pages à notre manière.
Créons donc notre propre rangée vide, ouvrons là (icône crayon) et agrandissons-là un peu à l'aide de ses poignées histoire d'y voir un peu plus clair.

L'éditeur est maintenant actif et apparait un outil "Module Automne" sur lequel nous allons cliquer ce qui aura pour effet d'ouvrir le module Médiathèque qui contient déjà pas mal de choses. Choisissons une image, sélectionnons-là en cliquant une fois dessus puis, sur la case OK . C'est bon, elle est déjà dans votre rangée exactement à l'endroit où vous vouliez la voir apparaitre.

Enregistrez votre rangée (en bas à droite) et faites attention de ne pas cliquer sur la petite croix rouge d'effacement car vous perdriez votre travail.

Votre image est là et, si vous cliquez dessus, elle va s'agrandir ("Ouvrir les images zoom dans une pop-up" doit être activé dans les paramètres Automne) et ce miracle se produit parce que quand vous intègrerez une image dans la médiathèque,(afin de l'utiliser ensuite) vous aurez bien soin de télécharger aussi une vignette.
Vous procèderez de même pour intégrer dans vos textes tous les médias que vous aurez préparé ainsi que les modules que vous voudrez utiliser.

Notez que vous pourrez de la même façon faire apparaitre un formulaire, une application ou tout autre module à partir du moment où vous aurez fabriqué la rangée destinée à l'afficher là où vous le trouverez judicieux.


Ajouter une contribution :

Les contributions servent à compléter la documentation en détaillant des points précis ou pour donner des exemples. Elles sont modérées et peuvent être supprimées sans préavis.
Pour poser des questions, merci d'employer le forum et pour rapporter un bug, le BugTracker est à votre disposition.








Vous pouvez employer les balises bbcode suivantes :
  • [code-xml] votre code ... [/code-xml] : Pour mettre en forme du code XML / XHTML
  • [code-php] votre code ... [/code-php] : Pour mettre en forme du code PHP
  • [code-js] votre code ... [/code-js] : Pour mettre en forme du code Javascript

Date de votre contribution : 24/03/2017   21:02:35

Haut