Créer un site Web, vous n'y pensez pas !

paulinstitutionnel

Toute ma carrière s'est déroulée autour de la création et de l'utilisation de logiciels. Mais lorsque j'ai approché professionnellement les sites web, Joomla! n'existait pas encore.

Je m'y suis intéressé récemment, déjà retraité depuis quelques années, quand on m'a demandé de superviser la création du site web d'une association.

Vu le coût des prestations externes et les limites du budget, je me suis trouvé rapidement entraîné plus loin que prévu.

 L'information sur ce sujet étant par nature complexe et foisonnante, j'ai dû aussi y consacrer beaucoup  de temps, la principale difficulté étant de trouver des sources fiables.

J'ai rassemblé sur ce site les liens et les indications que j'aurais aimé trouver plus facilement quand j'ai commencé, sans prétention à l'exhaustivité.

Je n'ai rien à vous vendre, ni conseils ni produits.

J’espère simplement vous faire gagner du temps dans les premiers mois de votre prise en mains, puis fournir un portail vers la documentation et un aide mémoire pour les aspects que vous abordez rarement.

Si cet effort vous est utile, manifestez vous dans les commentaires ou inscrivez vous au site pour contribuer dans la partie"questions".

Si vous avez dû chercher hors des sentiers battus pour trouver une réponse, d'autres rencontrerons surement la même difficulté.

Mais à une recopie, préférez des liens commentés vers la ressource qui vous a été utile. Il est souvent utile de baguenauder aux alentours, quans on a trouvé une bonne source.

Sous le capot

Vous devez ignorer le contenu de cet article durant vos premiers mois avec Joomla!, et peut-être définitivement. Mais si un jour, vous éprouvez le besoin de vous intéresser à l'aspect "organique" (comment ça marche, par opposition à "fonctionnel", ce que ça fait) pour contrôler plus étroitement ce qui s'affiche dans vos pages, cette introduction pourrait vous être utile, sans prétendre remplacer le contenu des sites de documentation.

composants, views et layout.

Un composant fabrique ou gère du contenu.

Ce contenu peut être présenté de plusieurs manières différentes, par exemple le texte complet d'un article, le texte d'introduction ou la liste des articles d'une catégorie. A chacune de ces fonctions correspond en général un type de lien de menu et parfois un module.

Le type de lien de menu permet de fabriquer des liens vers des pages qui seront affichées dans la section principale de votre page; le module remplit la même fonction mais peut être positionné ailleurs que dans la section principale ou à l'intérieur d'un autre article.

Mais si vous lisez ceci vous savez déjà tout ça.

Les différentes fonctions d'un composant s'appellent des "views".

Pour afficher une vue, il faut lui appliquer un "layout", c'est à dire un programme PHP qui fabrique le code Html qui sera transmis au navigateur. Ce programme reçoit les paramétres calculés par le composant pour fabriquer ce code.

A une même vue peuvent correspondre plusieurs layouts, pour présenter suivant les besoins la même information sous des fprmats différents. Par exemple un layout pour afficher les informations fournies par la vue sous forme de liste et un autre pour les présenter sous forme de tableau.

Physiquement, tout cela se trouve dans l'arborescence de fichiers de votre site :

  • la racine contient un dossier "componants"
  • ce dossier contient un dossier pour chaque composant installé sur votre site
  • dans chaque dossier componant, vous trouverez un dossier "views"
  • dans ce dossier views, vous trouverez un dossier pour chacune des fonctions de votre composant
  • dans chacun de ces dossiers, vous trouverez un dossier "tmpl"
  • et dans ce dossier, enfin, les programmes .php correspondant aux différents layout pour cette vue : ceux dont les noms ne comportent pas de _ (underscore). Ceux qui comportent un _ sont associés par le préfixe (avant _) à un même layout et sont appelés par le programme sans underscore.

L'éxécution de ce dernier  programme produit la version par défaut de la page html de votre layout

Application

Le dossier /components/com_weblinks/views contient trois sous dossiers, chacun correspondant à un type de liens de menu proposé par le composant :

categories
liste des liens de toutes les catégories
category
liste des liens d'une catégorie
form
proposer un lien web

Chacun de ces dossiers contient un sous-dossier tmpl, qui pour les deux premiers contiennent un fichier default.php et pour le troisième un fichier edit.php

Template override  

Mais vous avez probablement installé un ou plusieurs template sur votre site, et ce sont eux qui ont le dernier mot en terme de présentation.

Vous allez trouver dans l'arborescence issue de la racine de votre site un dossier "templates" :

  • la racine contient un dossier "templates"
  • ce dossier contient un dossier pour chaque template installé sur votre site, qu'il soit actif ou non.
  • dans le dossier d'un template ouvrez le dossier html, il contient un sous dossier pour chaque composant
  • dans le dossier de chaque de chaque composant, vous retrouvez des sous-dossiers avec les mêmes noms que ceux du dossier views correspondant : ce sont eux qui contiennent les programmes .php, correspondant aux différents layouts du composant, qui sont exécutés lorsque ce template là est actif et que la vue est invoquée.

Modifications de styles.  

Si vous m'avez suivi jusque là, vous avez compris que ce sont ces programmes qu'il faut modifier si vous souhaitez changer le comportement de votre template.

Mais il est aussi possible, pour un composant pêu utilisé et un réalisateur de template préssé, que le layout que vous souhaitez modifier ne soit pas dans le dossier. Il faut alors copier le sous dossier du dossier views dans l'emplacement correspondant du dossier html, pour installer les layouts par défaut dans votre template. Vous pouvez ensuite modifier dans le dossier du template ce que vous souhaitez changer.

Par ce procédé, vous pouvez même créer un nouveau template ex-nihilo.

Mais les changements que vous souhaitez faire n'exigent pas forcément de modifier le code php. Votre dossier de template contient d'autres sous dossiers, qui trient les fichiers par nature :

css
fichiers .css feuilles de style de votre template
js
fichiers javascript, qui animent vos fichiers html
images
les images utilisées par votre temlate
fonts
les polices de caractéres

Pour ajouter des classes css s'appliquant à tout votre contenu, il suffit en principe d'ajouter un fichier mycss.css dans le dossier css du template

Si il n'est pas pris en compte, il va vous falloir aller inspecter index.php qui est la racine de votre template, config.php et config.xml qui lui disent quoi faire. En principe, ces fichiers invoquent la totalité du dossier css, sans préciser les fichiers, mais...

Donc si vous voulez créer une nouvelle classe pour les listes ,qui remplacera la puce standard par une image, vous allez devoir :

  • placer l'image dans le dossier "images" du template,
  • créer une feuille de style qui définit la classe et utilise une référence à l'image,
  • et placer ce fichier dans le dossier css.

Lorsqu'elle fonctionne, cette méthode a l'avantage de survivre à un upgrade du template.

Si vous êtes fatigué de fouiller dans les entrailles de votre site sans obtenir le résultat recherché, vous pouvez (ce qui n'est pas considéré comme une bonne pratique) introduire votre modif dans un fichier css éxistant de votre template , judicieusement choisi.

Mais si vous devez mettre à jour votre template, la modification sera écrasée par la mise à jour. Organisez vous en conséquence.

Le langage LESS pour parametrer la génération des fichiers CSS  

Les fichiers CSS peuvent être très redondants, et on peut souhaiter les paramétrer. On décrit alors les CSS en LESS. L'utilisateur fournit ses paramétres, et les fichiers LESS sont compilés pour fabriquer les véritables fichiers CSS

Supposons que votre template, que vous comptez réutiliser sur plusieurs sites tout en conservant un look spécifique à chaque site, prévoit deux couleurs complémentaires "primary" et "secondary" qui vont apparaître tout au long de vos CSS pour définir la couleur des boutons, les fonds des modules etc... de manière coordonnée.

Si vous utilisez LESS et si vous êtes prévoyants, vous allez définir deux variables @primary et @secondary que vous utiliserez dans la définition des couleurs à la place des valeurs absolues, dans chaque définition de style où elles sont invoquées.

Pour votre second site, il suffit de modifier une seule fois la valeur de ces deux variables, puis de recompiler votre fichier LESS pour obtenir un nouveau fichier CSS. La modification aura été propagée dans toutes les définitions de styles.

Pour corser un peu plus la sauce, supposons que pour accentuer la personnalisation, vous décidiez que sur un site les bordures de blocs auront des coins carrés alors que sur l'autre elles auront des coins arrondis. Encore pas mal de réécritures en perspectives.

En LESS vous allez prévoir un "mixin" (une forme d'abbreviation) pour définir une seule fois les propriétés des bordures de vos blocs.

Ce mixin sera invoqué par son nom chaque fois que vous voulez définir un format de bloc : box-content, box-note, box-info, box-hint, box-warning, box-intro etc...Pour appliquer la modification globalement, il vous suffira de modifier la définition et de recompiler votre fichier LESS pour fabriquer les fichiers CSS de votre second site.

La même méthode permet de fabriquer des "styles" différents d'un même template, pour différencier les sections d'un site, tout en conservant un aspect globalement homogène.

Je pense que vous avez saisi l'idée. Less permet aussi des conditions - guard- des fonctions, le paramétrage des mixins avec ou sans valeur par défaut etc.. Pour tous les détails voir :

lesscss.org

Les fabricants de templates utilisent de plus en plus cette technologie pour des raisons évidentes. Combiné avec une utilisation extensive de JavaScript, cela permet de proposer les fonctions à la mode : barre de menu bloquée, parallaxe, nombreux styles prédéfinis, le tout paramétrable de maniére trés détaillée au gout de l'utilisateur.

Mais si vous utilisez l'un de ces template, gardez bien en mémoire que les CSS ne constituent plus qu' un langage intermédiaire. A chaque modification du fichier source LESS les fichiers CSS seront écrasés. N'espérez donc pas y loger de modification permanente. Sauf si votre template est bien fait et que le dossier .css contiennent un fichier du genre "custom.css"; dans ce cas vous pouvez le remplacer par vos css qui neseront pas écrasés.

Et nous connaissons tous les limites de l'approche WYSIWYG pour les éditeurs. Tous ces paramétrages sont faits à partir de formulaires. Si le résultat n'est pas tout à fait ce que vous souhaitiez, ou si la modification a été mal transposée dans le code, il va vous falloir plonger, avec une couche de plus à traverser.

A ce stade je pense que vous avez saisi l'idée générale. Pour les vrais détails, il vous faudra consulter la documentation officielle sur docs.joomla.org

top

  • Aucun commentaire trouvé
Ajouter un commentaire

Mes extensions

  • Acepolls

    Ace Polls est un utilitaire très simple, gratuit et très frustre pour intégrer des sondages sur votre site.

  • AcyMailing

    Si vous voulez communiquer régulièrement avec vos utilisateurs, pour les informer des nouveautés de votre site par exemple, vous avez absolument besoin d' un outil. L'utilisation de l'envoi de mails en masse de Joomla! est utile, mais tout à fait insuffisante, même en utilisant l'insertion de champs CB pourpersonnaliser vos envois.

  • Admin Tools

    Comme son nom l'indique, AdminTools regroupe des utilitaires pour vous faciliter l'administration de votre site, et en particulier un firewall.

  • Akeeba backup

    Sauvegarder son site régulièrement, afin de pouvoir le restaurer en cas de difficulté, ou pour le déplacer sur un nouveau serveur, ou chez un autre hébergeur, est une précaution indispensable. Et Akkeeba Backup est la réponse, même si le sujet parait un peu intimidant.

  • Community builder

     

    La version gratuite de CB, COM_PROFILER, permet de gérer une galerie de profils avec avatars, champs personnalisés et listes et fournit une alternative au composant de connexion de Joomla!. La version payante permet de disposer d'un second composant, GroupJive pour constituer un site "social" à la facebook.

  • Easy Blog

    EasyBlog, comme le composant de gestion de contenu de Joomla! est un gestionnaire de blog. Mais, au prix de contraintes, il offre une grande facilité  pour créer rapidement et simplement des blogs mono ou multi-blogueurs. Le contenu peut être importé de Joomla! ou d'autres outils et tag cloud, menus, informations relatives aux auteurs, "related articles" se mettent en place automatiquement. Idéal à mon avis pour un intranet, afin de créer un blog pour chaque équipe, à moindre côut.

  • Easy Discuss

    Easy Discuss est un logiciel de gestion de Forum "moderne", qualifié par son éditeur de "gestionnaire de conversation". Mais derrière les différences de vocabulaire, on retrouve des fonctionnalités similaires à celles de Kunena, avec un look plus "cool".

  • Easy Social

    Easy Social est la plus récente production de Stackideas. C'est un gestionnaire de communauté avec des fonctions de gestion de profil, de partage d'informations à travers des journaux d'activité dont le contenu peut être réservé aux amis, et des applications qui permettent d'ajouter des fonctions.

  • JCE-Joomla! content editor

    L'éditeur TyniMCE, livré en standard est tout à fait adéquat. Mais JCE reste quand même une extension indispensable pour trois raisons :

    • son gestionnaire étendu de médias
    • la création de gabarits de page, et l'éditeur de code HTML
    • La possibilité de définir des profils d'utilisateurs.(backend)
  • JEvents

    JEvents propose une version gratuite complète, avec la gestion d'événements et les modules de calendrier, d'événements à venir etc... Il est tés bien noté dans sa catégorie dans le JED. Une extension payante permet en particulier d'enregistrer les participants inscrits à un événement à venir.

  • Jsitemap2

    Il est capital de disposer d'un plan de site, pour faciliter la visite du site tant aux humains qu'aux robots. Il existe des outils gratuits qui ne m'ont pas donné satisfaction. J'ai préféré un produit payant, mais de grande qualité. Ce produit fabrique une version HTML de la SiteMap pour les humains et une version XML pour les robots.

  • K2

    Comme on le comprend tout de suite en consultant les revues du JED, les avis sur K2 sont tranchés. Extension historique de Joomla! comme Community Builder ou Kunena, K2 qui vient se substituer au composant COM_CONTENT de Joomla!, s'est constitué une troupe d'habitués inconditionnels. Mais l'enrichissement des fonctions natives de Joomla avec la version 2.5 et plus encore la version 3.2, rend ce choix totalitaire de moins en moins évident pour les nouveaux venus.

  • Komento

    Komento, fourni par Stackideas, permet d'attacher des commentaires et en fait d'organiser une conversation, à chaque élément de votre site. J'ai testé l'intégration avec Joomla!, dont vous pouvez voir l'utilisation sous cet article, et avec Jevents, les deux fonctionnant très bien.

  • Kunena

    Kunena est le composant de forum "historique de Joomla!. C'est donc un outil complet, efficace et très stable. Il est utilisé dans de nombreux sites publics de toutes tailles.

  • My Joomla.com

    MyJoomla. com, comme son nom l'indique, n'est pas une extension mais un service. Ce site vous permet de programmer ou de déclencher manuellement des audits ou des sauvegardes sur tous vos sites, même si ils sont hébergés chez des hébergeurs différents.

  • Phoca Favicon

    La favicon est cette petite icône qui s'affiche dans la barre du navigateur de vos visiteurs pour identifier votre site. Cet utilitaire permet de la remplacer, au moins pour le frontend, sans (trop) de préparation. il suffit d'uploader une image carrée, de choisir le template vous souhaitez l'utiliser, et voila. 

  • Phoca Gallery

    Comme son nom l'indique Phoca Gallery est un composant qui permet d'afficher et de gérer des photos dans un site Joomla! Je l'ai initialement installé sur mon site perso pour permettre à chaque membre de la famille de gérer en frontend les photos qu'il souhaitait partager. Mais l'utilisation de GroupJive ou de EasySocial rend ce composant inutile pour cette fonction.

  • SEO Glossary

    Ce composant permet de créer un glossaire sur votre site : vous définissez des termes, et à la première occurrence de chaque terme du glossaire dans chaque page du site est associé un "tooltip" ou infobulle en français, qui contient la définition.

  • Widgetkit

    Comme son nom l'indique, widgetkit est un ensemble de "machins" : le couteau suisse de la mise en page ! Ce composant est fourni par Yootheme, qui fournit aussi des templates, pour les enrichir. RocketTheme semble fournir l'équivalent.

  • Yoorecipe

    Yoorecipe vous permet de gérer sur votre site vos recettes, vos menus et vos listes de course et de les imprimer. Plus pratique que les feuilles volantes. La gestion des recettes et des listes de courses est excellente. Celle des menus et des caractéristiques nutritionnelles est utilisable mais peut encore être améliorée.

  • Zoo.

    Zoo est classé dans la rubrique des catalogues, ou des CCK. En fait il s'agit d'un outil permettant de fabriquer et de gérer des contenus structurés. Des applications préfabriquées sont vendues avec le produit.

  • Acepolls
  • AcyMailing
  • Admin Tools
  • Akeeba backup
  • Community builder
  • Easy Blog
  • Easy Discuss
  • Easy Social
  • JCE-Joomla! content editor
  • JEvents
  • Jsitemap2
  • K2
  • Komento
  • Kunena
  • My Joomla.com
  • Phoca Favicon
  • Phoca Gallery
  • SEO Glossary
  • Widgetkit
  • Yoorecipe
  • Zoo.

Articles les plus consultés