[Tuto] Contenu et Forme sous Joomla!

[size=150:2wwsl9ga]1- Introduction[/size]

J'ai mis un temps fou à clore ce tuto. Il risque d'ailleurs d'être un peu plus long que les autres tant dans son contenu à développer que dans les écarts qu'il faudra que je fasse. Bien sûr tout n'est pas à retenir et je ferai autant que possible des analogies et résumés.
*Ca part déjà mal, je ne suis pas bon commercial...*

Le but de ce tutoriel est de vous familiariser avec les termes que j'utiliserai pendant la revue du forme et de l'agencement du site. Pour reprendre l'analogie leitmotiv de ce tuto, je dirai qu'il est simple de demander une belle maison mais l'architecte doit savoir ce que vous entendez par là. Du coup il faut faire une concession et comprendre :

• les étapes de la création d'une maison
• les blocs la composant
• les diverses pièces disponibles
• l'agencement des pièces

Pourquoi le lire alors, vu que je me charge de l'architecture pour le moment ? Eh bien, tout comme Feurnard et Monthy3 à la suite des transferts ont été capables de comprendre le fonctionnement, les possibilités et les limitations du site, vous serez à même de me dire "cette fenêtre là est à revoir car les joints sont pas bons" plutôt que "il fait froid dans cette pièce". Et puis ça facilitera la tâche parfois voire accélerera les choses de parler la même langue !

En route !

Plan du tutoriel

Introduction

Architecture Joomla! : approfondissement

Récapitulatif de l'approfondissement

Le Contenu...

...et la Forme

Soyons concis !

[size=150:2wwsl9ga]2- Architecture Joomla! : approfondissement[/size]

Cette partie du tutoriel est optionnelle et si vous n'etes pas intéressés par le pourquoi du comment, vous pouvez ainsi passer de suite au point n°3. Néanmoins, sachez que vous avez dans cette partie l'explication de la séparation Forme/Contenu.

Voyons un peu plus en détail la structure du site. Une fois encore, pas besoin d'avoir fait polytech' pour comprendre ce qui va se dire ici... simplement quicquonque quelque peu versé dans le codage ou le webforme sera sûrement intéressé par la suite.

Joomla! utilise une architecture MVC
Il est essentiellement question d'expliquer en quoi la distinction forme/contenu, au delà du critère sémantique, existe.

*MVC ? Kesako ?*
Le MVC ou Modèle/Vue/Contrôleur est purement une -des meilleures- méthode d'architecture pour coder un site de la même façon qu'un livre a une architecture optimale -couverture, tranche, pub, titre, histoire, 4e de couverture-. Le MVC est donc le cheminement utilisé pour l'affichage de chaque page à chacun de vos clics sur le site. Passons directement à l'analogie, le pourquoi du comment n'est pas important.
Partons du principe qu'à chaque page que vous demandez à afficher, vous demandez à l'architecte de vous construire une maison.

L'architecte
C'est la feuille de code en chef. Ce fichier .php -généralement- ne fait pas plus d'une vingtaine de lignes. C'est surtout l'équivalent d'un videur de boîte : "Ce que tu me demandes je ne connais pas", "tu n'as pas le droit de demander ça". Quoiqu'il en soit la plupart du temps il est coulant et fait ce qu'on lui demande. Alors il appelle le Contrôleur qui sait comment faire -lui-.

Contrôleur
Pour simplifier, considérons qu'il y a un contrôleur pour chaque page : page d'accueil, livre d'or, article, profil, etc... Dès que l'architecte demande au contrôleur de s'activer, il fait... la seule chose qu'il sache faire : dans notre cas, le contrôleur "Page d'accueil" s'active et regarde ce qui lui faut pour construire sa maison, les options qui sont définies dans le back-end par exemple.

Puis il apelle les ouvriers dont il aura besoin... et uniquement ceux-ci. Inutile de demander au fabriquant de piscine de venir s'il n'y a pas à en fabriquer, hum ? Ses ouvriers ce sont les Modèles. Alors il donne les instructions à chaque ouvrier/modèle en fonction des options et de leurs compétences.

Modèles
Eux ils ont le savoir-faire, ils vont dans la base de données chercher les informations ou dans les fichiers parfois et rapportent au contrôleur leur butin ou des messages d'erreur.

Contrôleur
Notre contrôleur page d'accueil regarde alors le tas de parpaings, tuyaux et autres matières premières déposés en vrac mais étiquetés -ici ce sont nos textes, la liste des membres en ligne, les liens de menu, etc...- et demande alors aux artistes de se mettre en oeuvre : les Vues.

Vue
Pour une fois ces artistes ne sont pas regardant sur la beauté de l'oeuvre demandée. Ce sont des peintres et des bricoleurs qui assemblent le tout en fonction du template -voilà enfin un mot qui évoque quelque chose de connu !- et joignent la feuille de style CSS :

• le sol, les murs, le toit au dessus -header, corps, pied de page-
• les murs de telle couleur, les tuiles sur le toit -polices, couleurs, textures-
• les portes et fenêtres à tel endroit -liens, modules de connexion-

Contrôleur
Puis le contrôleur rend la main à l'architecte qui affichera le résultat -grosso modo hum ? -.

*Bon il cause, il cause mais on voit pas où il veut en venir !*
Ca vient, ca vient...

Pourquoi tant de haine ?
Voilà, ceci c'est la méthode qu'utilise Joomla! pour construire une page web. Ce qui est important de retenir c'est que le forme est séparé du contenu et ces deux morceaux ne sont assemblés qu'à la fin sur votre navigateur. Pour exemple, d'un point de vue sémantique on évite d'utiliser le contenu (comme des sauts de lignes) pour créer la forme. On demande plutôt au forme de gérer les espaces entre paragraphes.

Ainsi par la suite vous pourrez de vous même faire la différence entre ce qui fait appel à la forme (agencement, couleur) et ce qui fait appel au contenu (présence ou non d'un module, nombre de lignes dans une liste, etc...) et que vous pouvez donc modifier vous même.

[size=150:2wwsl9ga]3- Récapitulatif de l'approfondissement[/size]

Un résumé ! Un résumé !
Voilà, je voulais juste être sûr que vous ayez ces distinctions et espère ne pas m'être trompé en devant expliquer dans les détails. Quoiqu'il en soit, s'il y a quelque chose à retenir ce sont les points ci-desssous :

Le contenu et la forme sont clairement séparés et gérés différement :
Le contenu c'est :

• les textes
• les commentaires
• les options
• etc...

La forme c'est :

• L'agencement global géré dans le back-end par des "niches".
• Le CSS (ou style) c'est la finition, le détail, couleurs et textures.

Ouf... j'espère que ça reste compréhensible.

Maintenant en y regardant de plus près, il est possible de distinguer correctement ce qui constitue le contenu ou la forme. Les parties suivantes se rapportent donc essentiellement à la façon dont est construit le site en détaillant les notions de contenu et de forme propres à ce CMS.

[size=150:2wwsl9ga]4- Le Contenu...[/size]

Le contenu est séparé en 2 -oui encore ! j'en entend qui râlent déjà- à savoir Modules et Composants. Ici on fera court, la différence est assez simple :

Composants
Un composant est ce qu'un visiteur recherche, le contenu même. Le composant c'est ce qui fait que la page est. Pour exemple nous avons, nous, des articles, des pages de profil, un composant de commentaires de textes, etc...
Ainsi les liens hypertextes existent essentiellement pour relier les composants entre eux. On passe de l'article de bienvenue au dernier texte publié puis à la page auteur de ce texte. On surfe sur internet pour ce type de contenu : les composants d'une page.

Pour l'instant sur le site n'existent que quelques composants et il y a peu de chances que d'autres voient le jour :

• Articles
• Commentaires de textes
• Commentaires auteurs-auteurs
• Community Builder -le gestionnaire de profils-
• Un gestionnaire de sondages
• Recherche interne
• etc... (moins importants pour le moment)

D'autres existent, histoire que vous vous fassiez une idée, comme un forum interne à Joomla! nommé Fireboard -que l'on a bien failli adopter lors de la migration-, des gestionnaires de téléchargements, etc... J'en garde sous le coude qui pourraient se révéler utiles par la suite.

Peut-être voyez vous déjà, les composants sont des gestionnaires, et à ce titre gèrent -tiens donc, j'aurai pas cru- du contenu. On peut en afficher plusieurs par page dans certains cas, par exemple dans le cas de commentaires auteur-auteur le composant est relié aux profils.

Modules
Un module est un satellite du composant. Il s'affiche en fonction du composant appellé et à ce titre, dans le back-end Joomla!, il est possible de définir à quels composants on rattache les modules. Ainsi quand on lit un article dans une catégorie donnée, un module des derniers ajouts est appelé ainsi que les mieux notés de cette catégorie, un module menu principal, un module de connexion/déconnexion, un module des membres en lignes, etc...

Un module est un panneau, qu'il soit d'affichage ou de direction, il n'est présent que pour donner une interactivité à la page, permettant de naviguer (liens) ou de s'informer (membres en ligne). Mais on définit surtout ce qui n'est pas nécessaire, ainsi lorsqu'on lit un texte, peu importe quel est le dernier membre connecté, on libère ainsi la place à un module d'articles en rapport, de derniers ajouts, mieux notés, etc...

Conclusion
On peut donc considérer que le visiteur serait capable de rester des heures sur un composant alors qu'il ne resterait pas plus d'une minute à regarder les modules, le temps de faire son choix vers sa destination (composant) par exemple.

En espérant que ce soit clair, voici ce qu'il faut retenir : on va sur une page pour voir le composant et on attribue la présence d'un module en fonction de ce composant. Par la suite, vous serez vous mêmes capables de faire une demande liée au site tout en stipulant quel type de modules, présent sur quelles pages et à quel endroit de la page.

Quels sont donc les possibilités en terme de forme alors ?

[size=150:2wwsl9ga]5- ...et la Forme[/size]
Ici encore nous ferons la distinction entre l'agencement et le style Joomla!.

Une distinction pour les Vues : Template et CSS

Nous avons vu comment on construisait la maison, voyons alors comment nous préparons les plans. Pas d'inquiétude, ce n'est pas un cours de CSS, PHP, ou HTML. Ici nous verrons comment ça se passe à partir du back-end, autrement dit avec une interface graphique et non en lignes de codes.
L'intérêt d'un CMS comme Joomla! c'est que l'on a -a priori- pas besoin d'être surdoué pour obtenir ce que l'on recherche. Si je passe du temps sur le template c'est que ça me plaît -et que l'on ne veut pas débourser un centime -.

A présent pour la suite, il est important de distinguer 2 choses qui composent les Vues (si vous avez lu la première partie) ou la forme :

Le template
Le template est comme une boîte à oeuf qui défini des emplacements occupables par les modules autour du composant. Lors de la création du template j'ai défini une douzaine d'emplacements particuliers autour du composant qui peuvent accueillir des modules.
Histoire d'être concis voici le schéma de notre template actuel :

Il suffit alors, dans le back-end Joomla! de dire "Je veux le module de connexion à l'emplacement 'top'et le menu bibliothèque à l'emplacement 'left' en première position".

Il vous est aussi possible de voir ce que cela donne par le biais de calques appliqués à notre page d'accueil. Le lien ci-dessous demande à Joomla! d'encadrer et de nommer les différentes positions définies dans le template sur une page du site. C'est une superposition du schéma ci-dessus à notre site en somme : www.les-chroniques.eg2.fr/index. ... chroniques .

Voyons en détail si vous le voulez bien ces différentes "niches".
Les restrictions que je leur ai appliqué ne relèvent que de la volonté d'avoir un design particulier.

• (Logo)* : Simple emplacement vide accueillant le logo.
• Top, Left, Right : Niches destinées à pouvoir accueillir plusieurs modules à la fois. Leur ordre est aussi défini dans le back-end Joomla!.
• user1 : destinée à accueillir le menu horizontal et la barre de recherche
• debug : comme son nom l'indique, c'est ici que Joomla! est sensé dire ce qui ne va pas (en mode 'debug')
• breadcrumb : 'miettes de pain' en anglais, destiné à accueillir le chemin de fer alias 'Accueil > Section > Catégorie > Article'
• user2, user3, user5, user6 : emplacements destinés à n'accueillir qu'un seul module
• (Composant(s))* : Joomla! reconnaît cet emplacement comme receptacle des composants demandés. Articles, Profil, etc...
• user4 : Emplacement prenant la largeur et affichant actuellement, sur la page d'accueil, les derniers messages du forum
• footer : Explicite, accueillant le bas de page

*Les niches entre parenthèses (Logo) et (Composant) ne peuvent pas accueillir de modules.

Si on fait le parrallèle avec la première partie, l'architecte appelle ainsi le composant article et le place au centre de la page, ajoute le logo et appelle les différents modules définis dans le back-end avant de les placer eux-aussis dans les emplacements qui leur sont attribués.

Que l'on se comprenne bien :

• Ces emplacements peuvent être vide : cf page d'accueil actuelle
• Un module peut être à l'emplacement A autour d'un article et à l'emplacement B autour du profil.
• Chaque emplacement peut potentiellement accueillir un nombre illimité de modules, mais le design n'étant pas prévu pour, il en souffrira.

Les feuilles de style ou CSS

Ici on donne dans la plus grande précision la mise en forme du texte brute : les couleurs, polices, espacements, tailles, effets graphiques, alignements, texture, liste à puce, etc... Le CSS c'est le coup de peinture final, le détail, la finition.
C'est la feuille de style qui dira que le module en position 'user4' prends toute la largeur alors qu'en 'right', par exemple, il ne fait que 198 pixels de large.

C'est vraiment du travail d'orfève qui doit se révéler valide sur la plupart des navigateurs, ce qui le rend difficile, parfois exténuant mais si passionnant ! -ouh, la je perds de l'objectivité... - Alors bien sûr pas besoin de recréer une feuille de style pour chaque nouvelle page, mais il est parfois nécessaire de faire certaines personnalisations en cas d'exceptions et autre.

Et bien plus encore...
L'intérêt de Joomla! réside aussi dans le fait qu'il est possible d'avoir plusieurs templates pour un même site -et plusieurs feuilles de style, bien sûr-. Il est ainsi possible de réorganiser le tout pour des pages spéciales et les assigner aux composants en spécifiant les templates à utiliser si c'est la page d'accueil, un article, etc...

[size=150:2wwsl9ga]6- Soyons concis ![/size]

Beaucoup de texte pour pas grand chose
Oui, j'ai mis beaucoup de temps à faire ce tuto tant il y a à dire et, paradoxalement, tant il faut rester succint. J'espère n'avoir pas été trop soporifique. On va quand même résumer le tout en grandes lignes (promis) :

• Contenu
  Quand on construit une page on paramètre le composant, on définit les modules qui s'y rattachent.
  Le contenu c'est un composant ou un module.
• Forme
  Puis on définit l'emplacement des modules autour du composant et on termine par la forme du tout, si elle doit sortir de l'ordinaire ou être corrigée.
  La forme c'est soit l'agencement général (template) ou le style (CSS).

Ainsi, lors de changements à venir sur le site, on se base sur le classement ci-dessous pour définir le besoin :

• Contenu
  • Module
    • Membres en ligne
    • Connexion
    • Menus
    • Nuage de tags
    • Derniers messages du forum
  • Composant
    • Articles
    • Commentaires de texte
    • Profils
    • Commentaires auteurs-auteurs
• Forme
  • Template
    • Emplacements de modules
    • Emplacement du composant
  • CSS
    • Mise en forme texte
    • Couleurs, textures
    • Finition de l'agencement au pixel près
    • etc...

Et à présent ?
- Eh bien il reste à faire... à réorganiser les modules déjà présents, par exemple, qui sont pour le moment attribués à toutes les pages sans distinction. Puis une fois fait, sûrement un léger relooking histoire de perdre cet effet "boîtes emboîtées", mettre en forme les textes -lettrines, justification, paragraphes- les listes de catégories, styliser les commentaires de textes et finalement Community Builder -qui fera l'objet d'un tuto à part, tout comme le composant publication y a eu droit- et tant d'autres...

- A ce sujet, je vais ouvrir un topic SAV pour toutes les demandes de remaniement que vous souhaitez. Ce topic permettra ainsi à ce que les membres impliqués dans le site puisse prendre en compte ces demandes et répondre en direct dès que les solutions sont appliquées/corrigées.

Le mot de la fin ?
Enfin !

Tu en es finalement venu à bout ?
Je sens venir avec le sujet "SAV" une occasion pour certain(e)s floodeur(z)s de s'en donner à coeur joie. J'y aurai moi-même quelques mots.

En attendant, assez instructif même si j'avoue m'en être tenu aux histoires de charpenterie (je touche du bois), au moins le vocabulaire sera vaguement plus ou moins le même désormais.

Les autres diront tout ce que je suis censé dire encore.

Oui et je te garantis que ça n'a pas été simple de le faire celui-là. Sans vantardise aucune, il est difficile d'expliquer à quelqu'un ce qui relève de l'acquis pour soi-même.
Quoiqu'il en soit, je doute que ce soit bien intelligible ou même un chef-d'oeuvre de littérature (tant de répétitions !).

Le SAV me servira surtout à relâcher le besoin que vous pourriez avoir de m'avoir sous la main : j'ai besoin de temps dans les mois à venir pour la recherche d'emploi.

Mais au moins il y aura eu un lecteur !

Lu aussi, rassure-toi ! Joli tuto, clair et organisé.

Mais je n'ai pour le moment rien à ajouter, si ce n'est bon courage dans ta recherche à venir

Merci Monthy3!

Je n'ai même pas expliqué que je suis actuellement en train de chercher à mettre à jour Commmunity Builder vers la dernière version (composant de profils). Une fois fait, je fait le petit tuto pour expliquer son fonctionnement (et là beaucoup de choses très très intéressantes à venir, vraiment) avant de lancer le SAV.
Et je crois qu'à la suite de ça... les idées devraient défiler. Vraiment.

C'est vrai que sans Krycek sous la main je me sens toute perdue moi o

Vivement le prochain petit tuto

Et bonne chance pour ta recherche d'emploi!!!!