Suite de Tuto Pour Les Nuls en
http://doc.automne.ws/web/Documentation/460-tutoriel-pour-les-nuls.php* Récapitulatif Partie 1
* De l'utilité des rangées de contenue
* Les modèles de pages
* La médiathèque
* Application des styles
* Utilisateurs et "droits"
* Groupes d'utilisateursNous avons vu dans
la partie 1 de ce tutoriel que, si Automne est un CMS à la porté de n'importe quel webmaster qui par définitions a quelque bases techniques, son concept est très moderne et ne se laissera apprivoiser qu'avec de la patience et le sens de l'observation du moins si nous voulons mettre à profit son extraordinaire potentialité.
Petite précision du team des développeurs.
Citer:
Si l'interface du CMS est à la portée de n'importe qui avec un peu de pratique, la conception de modèles de page et de module demande quand même plus que quelques bases techniques. C'est pour cette raison que nous souhaitons proposer des modules et des modèles de pages prêt à l'emploi, cela permettra une adoption encore plus rapide.
Oui, Automne a été conçu pour simplifier la vie des gestionnaires de sites web et des développeurs webs, mais n'est pas non plus un outil magique qui permet d'avoir des sites de qualité sans connaissance des métiers du web. La qualité d'un site ne vient pas de l'outil utilisé mais d'une part de la manière dont il a été conçu et développé et d'autre par la qualité de ses contenus, il me paraissait important de le souligner.
En fait, si l'interface a été pensée au maximum pour aider l'administrateur à bien gérer son système (système d'aide interne), la maitrise de ce logiciel ne se fera qu'avec une bonne compréhension de son architecture et nous ne nous contenterons pas ici de "remplir des cases" mais aurons aussi la possibilité nous même de "fabriquer nos cases".
Nous pouvons aussi à volonté changer notre contenu, mais aussi le contenant, et appliquer un design différent à chaque rubrique, page, groupe de pages et sites complets en récupérant à volonté le style et le template à chaque fois que nous en auront besoin.
Nous fabriqueront donc des modèles de page qui chacun comportera un ou plusieurs espace d'édition (espace client) dans lesquels nous intègreront des rangées de contenu qui elles même accueilleront nos informations qu'elles soient du texte ou des applications que nous aurons fabriqué à notre besoin avec le module Polymod.
Nos modèles de pages, de rangées de contenu et modules d'applications sont stockés dans des "bibliothèques" toujours à porté de main, nous pourrons les modifier, les agrémenter à loisir, et surtout les réutiliser à volonté ce qui vous le constaterez plus tard est bien pratique.
Voyons un peu plus en détail l'utilisation de la chose et continuons notre exploration.
De l'utilité des rangées de contenue
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" afin de voir comment elle est faite.
Cliquons sur "Modifier" et voyons apparaitre un rectangle vert qui entoure la 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 verrons cela dans la rubrique concernée.
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.
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 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:
Citer:
<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.
Et, ce qui nous intéresse beaucoup en ce moment, 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.
Ce n'est pas plus compliqué que cela.
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.
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).
Citer:
La petite croix rouge sert à fermer l'éditeur en cours sans enregistrer.
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.
Travail pratique :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 "Fonctionnalités" (dans votre nouvelle installation) afin de voir comment elle est faite.
Quand vous travaillez une page, il va vous être utile de quitter le mode éditeur pour aller voir comment les pages intégrés dans la démonstration (site "Démo toujours dans votre installation toute neuve) sont conçues et c'est un vrai bazar de quitter, revenir, quitter, revenir jusqu'à ce que vous trouviez par vous même les astuces pour aller plus vite et sereinement.
En ce qui me concerne, je travaille avec deux explorateurs (Firefox et Google Chrome), connectés en même temps dans l'administration, ce qui me permet avec un de rester sur mon espace de travail et avec l'autre d'aller explorer les outils au fur et à mesure de mon apprentissage.
Il est à noter que votre rangée éditée, après l'avoir enregistré grâce à la petite icône de validation , vous pouvez voir son rendu en temps réel en cliquant sur l'item "Aperçu" dans votre menu du haut.
Regardons dans la barre d'adresse du navigateur l'URL de notre page en cours.
Elle se termine par un chiffre qui est le numéro unique de la page en cours (concept très important sur Automne), ce qui vous permettra de la retrouver en quelques secondes sans passer par l'explorateur d'arborescence des pages qui est le deuxième item en partant de gauche.
Autre truc, juste à droite de cet item, il y en a un autre (étoile), qui permet de mettre en favori vos pages préférées ce qui permet de les retrouver d'un clic en ouvrant l'item "Gestion de pages" dans le menu latéral rétractable.
Le travail dans les rangées terminé (et la rangée enregistrée), vous pouvez soit le "valider" et il sera en ligne immédiatement, soit le laisser dans l'état car il est enregistré dans un "brouillon" et sera disponible à tout moment. Pratique pour ne terminer un exercice que le lendemain.
Plus tard, quand vous confirez l'édition des pages de votre site à un ou des rédacteurs, ils ne pourront pas les valider directement mais les "soumettre à validation" selon les "droits" que vous leur donnerez mais nous étudierons cela dans un prochain chapitre.
Récapitulatif:Vous avez crée une ou plusieurs rangées sur votre page (numéro "24" pour la mienne) en y intégrant du texte ou des médias (ou modules) que vous aurez préalablement téléchargé dans votre médiathèque.
La conception de votre page se fait avec une ou plusieurs rangés dont certaines sont déjà en stock dans la bibliothèque de modèles où vous aurez la possibilité de créer vos propres modèles quand vous aurez compris l'utilité de ce système.
A ce propos, souvenez-vous bien "d'activer" un modèle nouvellement créé (de quelle sorte qu'il soit), sinon, vous ne pourriez l'utiliser et vous demanderiez d'où vient la panne.
Vous pourriez "désactiver" ces modèles plus tard si vous ne les utilisez que très rarement gagnant ainsi de l'espace et de la visibilité pour mieux les retrouver ensuite avec ou sans le moteur de recherche intégré à ce module particulier.
Notons que la désactivation d'un modèle n'a aucune incidence sur les pages l'utilisant déjà et est particulièrement utile quand on désire que nos rédacteurs n'y aient pas accès pour une raison ou pour une autre.
En ce qui concerne l'éditeur de texte intégré, sachons que nous pouvons à loisir ajouter ou retirer des outils grâce à la
"Gestion des barres d'outils de l'éditeur visuel (WYSIWYG)" que vous trouvez dans le panneau latéral dans la rubrique "Modèles".
Vous aurez la possibilité de personnaliser cette barre d'outils pour vous-même (administrateur) et pour chaque groupe d'utilisateurs, rédacteurs ou autres toujours selon les "droits" que vous leur accorderez.
Cela reste valable pour le gestion des modèles et la documentation d'Automne n'est pas avare d'enseignements à ce sujet (lien vers...).
http://doc.automne.ws/web/Documentation/57-gestion-des-groupes.phphttp://doc.automne.ws/web/Documentation/206-droits-d-administration.phpPour
la Médiathèque, il n'est pas besoin de longs discours et son utilisation est très intuitive.
D'ailleurs, le système vous prévient en cas d'erreur et vous n'aurez pas de problèmes avec ce module.
Les modèles de pages :Voilà la première épreuve qu'auront à subir les débutants assez peu à l'aise avec le célèbre trio XHTML/XML/CSS mais un peu de bon sens et quelques heures vous aideront ainsi que les participants aux forums qui vous aideront avec joie si vous ne leur demandez pas comment faire un copier/coller ou envoyer par mail une pièce jointe.
Je vais vous expliquer en bref comment cela fonctionne.
Tout le monde sait qu'une page web est constituée de code et fini le bon vieux HTML de papa. Nous nous sommes ici à la pointe du progrès (automne a été conçus pour l'avenir).
Sur un site classique, nous avons un template (habillage) et, outre le fait qu'il soit figé (sauf si nous sommes un champion du PHP), ce dernier reste le même d'un bout à l'autre du site.
Bien sûr, tout bon CMS propose plusieurs templates que le visiteur peut changer d'un seul clic, mais un template de série est toujours un template de série, et bien malin est celui qui veut personnaliser un habillage existant à ses couleurs surtout si il n'a besoin que de deux ou trois pages différentes (du modèle prédéfini) ou si il veut consacrer une section de son site à une thématique différente.
Imaginons que sur mon site, je vende des cercueils (gris, noir, sérieux) et sur une autre page des fraises (dominante rose).
Imaginons aussi que sur mon système (c'est le cas d'Automne), je veuille installer plusieurs sites avec un domaine et un thème totalement différent.
Hé bien ici, c'est tout à fait possible parce que les développeurs ont prévus cette option et on ne mets pas du contenu dans un site mais des habillages autour de notre contenu.
C'est pour cela qu'existe cette notion de "
modèle de page".
Bon, je fais ma page, qui est unique, et je la range dans ma bibliothèque "Modèle de page"
Je veux une autre page, alors, quand je la construit en cliquant tout simplement sur le bouton "Créer" de la page en cours, le système me demande avec quel modèle je veux la faire, si je veux intégrer ou non les rangées par défaut (qu'il y a déjà ou non dans les modèles de page existants) et il pousse l'amabilité de me dire dans quels sites existants ("Principal" et "Démo" dans notre cas) elle peut apparaitre. Je crée donc ma page avec un modèle existant. Il n'y a qu'à cliquer sur sa vignette.
Si plus tard je veux modifier cette page en lui donnant un nouveau template existant, il ira (le système) jusqu'à me dire quel modèle est compatible (ou non) avec ma création. C'est là que nous allons comprendre l'utilité et l'importance du fameux "espace client".
Une rangée va apparaitre sur ma page grâce à
un espace que je lui aurais emménagé au sein de mon code. C'est un peu comme si en html on créait un tableau ou un cadre voire une frame.
Mais Automne est bien plus simple et performant que cela.
A l'endroit du modèle de page où je vais faire apparaitre mon "espace client", je vais tout simplement insérer une balise nommée "tag"
Le tag <atm-clientspace /> Notons que je peux construire mon modèle de page chez moi avec mon éditeur de texte préféré (Notepad++ par exemple) ou tout simplement transformer un modèle existant (après bien sûr l'avoir dupliqué avec l'outil modèle/Modèle de page/ sélection d'un modèle et "Dupliquer") sans oublier évidement de déclarer mes nouvelles feuilles de style (que je téléchargerais obligatoirement dans le répertoire /CSS avec les autres existantes) et de bien renseigner le chemin des images en utilisant la méthodologie Automne de préférence car ce système est bien fait.
Si nous voulions deux rangées cote à cote, nous prévoirions deux espaces client pour les accueillir.
Nous éditerons en temps un tutoriel consacré à cette question et vous verrez que ce n'est pas si compliqué que cela le parait au premier abord et il y a dans la documentation une page très claire à ce sujet
http://doc.automne.ws/web/Documentation/170-les-espaces-clients.phpNotons pour terminer provisoirement ce chapitre qu'il est tout à fait possible d'utiliser des templates existants sur le Net pour autant
qu'ils soient valides W3C.
Conseil des développeurs :Citer:
Le mécanisme de création de modèles de page d'Automne repose sur les standards préconisés par le W3C, à savoir (X)HTML pour structurer ses informations, CSS pour les styles et la mise en page et Javascript pour ajouter des comportements. Sur ce point Automne ne diffère pas des autres CMS.
Jusqu'à présent nous n'avons pas encore adapté de thèmes pour Automne mais c'est quelque chose que nous sommes en train de mettre en place et qui fera l'objet d'un tutoriel.
Pour information, on trouve plein de modèles de pages XHTML/CSS en libre téléchargement qu'il te faudra ensuite d'adapter pour Automne. L'avantage c'est que nous pouvons personnaliser un minimum notre site web sans maîtriser totalement XHTML et CSS, qui comme toute technologie demandent pas mal de pratique avant d'acquérir un niveau suffisant pour créer des modèles. Surtout que la compatibilité entre les navigateurs peut-être parfois un vrai casse-tête.
http://www.oswd.org/http://www.freecsstemplates.org/css-templates/http://opensourcetemplates.org/http://cmstemplates.org/Je pense que commencer par adapter un modèle existant est déjà un bon challenge, qui permettra de se familiariser avec la syntaxe XML des balises spécifiques à Automne.
Citer:
Si comme moi, vous éditez vos modèles de page "au fichier" et non par la configuration.
Alors sachez que si vous ajoutez un ou plusieurs "espaces client" dans un modèle de page en éditant le fichier, (sans passer par l'outil pour x ou y raison)
vous devez enregistrer et régénérer la définition XML de ce modèle de page.
Ceci afin que le système prenne en compte l'ajout de ce ou ces nouveaux espaces client.
A suivre....----------------------------------------------------
Pour se documenter:Gestion des menus Automne.ws :
http://www.automne.ws/forum/viewtopic.php?f=2&t=585Automne sur wikipedia:
http://fr.wikipedia.org/wiki/Automne_CMS
Connexion
FAQ
Rechercher
