Créer son site avec Joomla!

Installation

 Il faut au préalable:  Télécharger la dernière version de Joomla!  Disposer d’un serveur d’hébergement (OVH, 1&1, XAMPP en local)  Décompresser le contenu du fichier zip dans votre répertoire web (par exemple sous XAMPP dans htdocs/monsite)  Créer une base de données (par exemple sous XAMMP allez dans localhost/phpmyadmin section base de données>nouvelle base)  Avec tout ça, vous êtes prêts à installer et utiliser Joomla! pour créer votre site web en toute simplicité

Etape 1: langue + config principale

Etape 2: base de données

Etape 3: vue d’ensemble

Installation

Installation terminée

Etapes à faire avant de démarrer  Vous êtes techniquement prêts à utiliser Joomla! MAIS il y a quelques petites choses qu’il vaut mieux faire afin de faciliter votre travail  Autoriser les sous-menus dans votre menu principal défini par défaut)  Permettre de pré-visualiser les positions de vos modules sur votre site  Avoir un éditeur de texte nettement plus complet que celui donné par défaut  Nous allons donc faire quelques modifications d’ores et déjà sur notre site afin de procéder à ces trois changements

Autorisation des sous-menus  Vos menus peuvent avoir des sous-menus déroulants qui s’ouvrent lors du passage de la souris sur notre site. Par défaut ce n’est pas activé sur notre site.  Pour cela, il faut  Nous rendre dans Extensions > Gestion des modules  Cliquer sur Menu Principal  Mettre « Afficher tous les liens » sur Oui  Voilà maintenant vos sous-menus s’afficheront automatiquement

Autoriser la pré-visualisation des positions  Un site Joomla! est constitué de modules (ou blocs) posés sur votre page. Ces modules sont placés à des positions particulières dépendants de votre template (ou style graphique)  Il est tout à fait possible de déplacer ces modules aux positions que l’on veut, mais quand on ne connaît pas nos positions, ce n’est pas simple.  Pour remédier à ça, on peut autoriser la pré-visualisation des modules  Pour cela, il faut:  Se rendre dans Extensions > gestion des templates  Aller dans « paramètres » en haut à droite  Activer la pré-visualisation des modules  Voilà maintenant vos modules seront visibles

Autoriser la pré-visualisation des positions  Localhost/monsite/

Autoriser la pré-visualisation des positions  Localhost/monsite/ ?tp=1

Changer l’éditeur de texte  Par défaut l’éditeur de texte sous Joomla! est tinyMCE. C’est un bon éditeur WYSIWYG (What You See Is What You Get, comme Word par exemple) mais on peut trouver gratuitement nettement mieux  L’éditeur JCE (Joomla Content Editor)  Pour cela, il faut:  Télécharger le composant JCE et le plugin JCE mediabox sur le site web de l’éditeur (joomlacontenteditor.com)  Les installer sur notre site (Extensions > Gestion des Extensions)  Publier le plugin JCEMediabox (Extensions > Gestion des plugins)  Modifier l’éditeur de texte pour tous les utilisateurs (Système > Configuration)  Ca fait pas mal de choses à faire, mais le jeu en vaut la chandelle!

Installer JCE

Installer JCEMediaBox

Modifier l’éditeur de texte pour tous  Voilà vous avez maintenant un super éditeur de texte

Principe de Joomla!

Arborescence de notre site

 \administrator contient tous les outils pour administrer le site et, dans un sous répertoire \language vous trouvez les fichiers langues pour la partie administrateur  \components contient tous les composants du site  \images contient la plupart des images de votre site ; ce dossier comprend notamment le sous-dossier stories qui comprend toutes les images et photographies insérées dans vos articles et le sous répertoire banners qui contient les bannières. Il servira à personnaliser le site…  \installation contient la procédure d'installation Arborescence de notre site

 \language contient un sous répertoire par langue utilisée dans l’interface du site web : fr-FR pour le français, en-GB pour l'anglais  \logs contient les logs, c'est à dire les traces des différentes opérations réalisées sur votre site  \modules contient tous les modules Joomla! de votre site  \plugins contient tous les plugins Joomla! de votre site  \templates contient tous les éléments des templates pour gérer l’affichage des couleurs et des styles sur votre site (servira à personnaliser le site) Arborescence de notre site

Termes  FRONTEND : zone du site que les utilisateurs peuvent voir. Cela correspond à la “vitrine” de notre site  BACKEND : c’est l’espace d’administration, réservé uniquement aux membres du site pouvant l’administrer (articles, catégories, fichiers,…)  on y accède en rajoutant /administrator après notre nom de site

Principe de Joomla!  Joomla! est un CMS (Content Management System) qui est coupé en 2 parties  La gestion du contenu (catégories/articles/médias)  L’accès au contenu (menus)  Il existe d’autres aspects sur Joomla!  Les templates  Les modules  Les plugins  …  Mais techniquement le principal de votre site dépend des 2 premiers éléments  On doit d’abord créer les catégories et articles, mais on ne pourra les voir que grâce aux menus

Administration de Joomla!

Le backend de notre site

 La barre de menus vous permettra de naviguer facilement dans la console d’administration  La page d'accueil comprend le Panneau d'administration avec des raccourcis vers les fonctions les plus courantes ; ces fonctions sont aussi accessibles à partir de la barre de menus  A droite de cette page d'accueil, vous trouvez un certain nombre d'informations génériques (utilisateurs connectés, derniers articles publiés, articles populaires) classées par onglet Le panneau d’administration

 Toutes les pages de la partie administration ont la même structure :  Tout en haut la barre de menus,  En dessous, une barre d'infos avec le nom de la fonction utilisée – Gestion des articles dans l’exemple ci dessus - et les boutons de commande associés à cette fonction.  Ensuite, généralement, un ensemble de filtres pour n’afficher qu’une partie des articles. Le panneau d’administration

 Chaque bouton est constitué d’un icône avec un libellé à l’intérieur; les boutons placés dans la barre d’infos dépendent de la fonction utilisée  Mais il y a des règles de base  Avec un outil comme Joomla!, vous ne pouvez pas utiliser les boutons Page Suivante et Page précédente dans votre navigateur lorsque vous faites la mise à jour de votre site ! Il y a une base de données à gérer derrière …  Donc, un seul mot d'ordre : utilisez les boutons Sauver / Annuler lorsque vous effectuez une modification sur votre site (modification de la configuration générale, de la configuration d’un composant, création d’une catégorie, d’un article…) Le panneau d’administration

Quand on est sûr de son action… alors on clique sur le bouton Enregistrer et Fermer Quand on est presque sûr mais que l’on veut vérifier quand même. On clique sur le bouton Enregistrer, si cette facilité nous est offerte. Quand on n’est pas sûr de ce que l’on a fait ou alors que l’on est perdu, il faut cliquer sur le bouton Fermer mais pas mais pas sur le bouton Page Précédente de votre navigateur ! Le panneau d’administration

 Dans le menu de l’interface d’administration, choisissons dans le menu Système l’option Configuration Exemple : configuration générale

Administration de Joomla! Les catégories

 Elles servent à classer nos articles  On pourrait les comparer aux dossiers sur notre ordinateur Rubrique1 Article 1Article 2 Rubrique 2 Article 3

Les catégories

Ajouter une catégorie

 Points importants:  Titre: titre de votre catégorie  Statut: publié ou non  Parent: si on a une sous-catégorie, il faut définir sa catégorie parente (exemple: un menu best of est une sous catégorie d’un menu)

Ajouter une catégorie  On peut également:  Ajouter un descriptif à notre catégorie  Gérer les autorisations d’accès à notre catégorie  Gérer les mots-clés de notre catégorie  Lui assigner une image descriptive

Administration de Joomla! Les articles

 Un article est une unité de contenu. Il comprend généralement du texte, des images et des liens ; il a un auteur, une date de publication et tout un tas de paramètres qui seront décrits plus loin.  Un article est placé dans une catégorie, elle-même peut faire partie d’une catégorie. Mais il existe des articles non catégorisés.  Ils peuvent être affichés seuls ou en liste ou en blog, à partir d’un lien de menu  Les articles constituent la base de vos pages  Toutes vos pages (ou presque) sont des articles  Ils sont rangés par catégorie, et sont accessibles via les menus de votre site  L’écriture des articles se fait de 2 manières  L’éditeur WYSIWYG intégré à Joomla!  Directement en HTML depuis l’éditeur

 Soit depuis la barre de menu  Soit depuis le panneau de configuration général Ajouter un article

 Parties importantes:  Le titre de votre article  Son contenu  La catégorie à laquelle il appartient  Autres paramètres  Publié ou non  Langues  Droit d’accès

Ajouter un article  Il est possible de gérer plusieurs parties lors de la création/modification d’un article  Contenu : contenu de votre article: ce qui apparaît à l’écran, la catégorie, le statut, le fait qu’il soit publié en page d’accueil, les droits d’accès  Publication : dates de publications (temporaires), les règles SEO  Images et liens : image d’intro de l’article et paramètres, liens de redirection  Paramètres de l’article : on en reparlera plus tard  Droits sur l’article : permet de définir pour chaque groupe les droits qu’il aura sur l’article

Ajouter une image d’en-tête à un article  Dans le cas d’affichage d’articles de type blog, il peut être sympathique de mettre une image d’en-tête pour lister nos articles

 Pour cela il faut travailler en plusieurs étapes:  Ajouter un lien « lire la suite » dans vos articles  Créer une image d’en-tête pour chacun d’entre eux  Faire un lien de type blog dans vos menus (on le verra plus tard)  Ajouter un lien « lire la suite »  Pour cela, rien de très compliqué  Il faut ouvrir votre article en édition, positionner le curseur à l’endroit où on veut afficher le lien et cliquer sur le bouton associé (sous la partie édition de l’article) Ajouter une image d’en-tête à un article

 Créer une image d’en-tête pour un article  Il faut au préalable créer une image et la configurer sur un éditeur d’image (ex: gérer la largeur de l’image)  1- on copie cette image sur notre serveur  Contenu > Gestion des médias > Transférer  2- on se positionne sur notre article à éditer dans l’onglet « Images et liens »  3- on sélectionne notre image comme image d’intro et on la place

Les images et les articles  Avec l’installation de JCE et de JCE Mediabox, il est possible d’ajouter des effets sur nos images dans les articles, comme par exemple une ouverture de type popup.  Pour cela rien de très compliqué  On va ajouter une image dans notre article  Une fois que notre image est ajoutée, on va ajouter un lien de type popup sur celle-ci  On clique sur l’image pour la sélectionner  On clique sur le bouton « lien hypertexte »  On choisit l’URL de l’image qu’on veut mettre dans la popup (soit la même soit une image de plus grande taille)  On sélectionne le type de popup (d’abord il faut cliquer sur l’onglet popups puis sélectionner JCE Mediabox popup)

Administration de Joomla! Les menus

 Dans l’état actuel, on a créé le fond de notre site, c’est-à-dire toute la partie contenu (catégories, articles)  Cependant si nous regardons notre site, rien n’a changé, et la raison est simple  Avec Joomla! Il faut distinguer contenu de visualisation. Il faut donc créer pour tout ce que nous voulons visualiser des liens à mettre dans des menus  Par défaut un menu existe déjà dans Joomla!, le menu principal  Les liens peuvent être de différents types classés dans des catégories, principalement:  Articles > article  Articles > liste des articles d’une catagorie  Articles > blog d‘une catégorie  Fiches de contact > Contact  Liens divers > URL externe

Création d’un menu

 Ils peuvent faire le lien vers:  des articles précis  des catégories (ou articles d’une catégorie)  des liens externes (utiles pour les sous-menus entre-autre)  rien, ils seront alors de simples séparateurs (utiles pour les sous-menus également) Ajouter des éléments de menus

 Fiches de Contact  Liste des catégories de fiches de contact : affiche la liste des catégories de contact  Liste des fiches de contact d’une catégorie : affiche la liste des contacts contenus dans une catégorie de contacts dans le composant Contacts (menu Composants / Contacts)  Contact : permet d’insérer un lien vers l’un des contacts que vous aurez paramétrés dans le composant Contacts (menu Composants / Contacts)  Contacts en vedette : affiche la liste des contacts sélectionnés comme favoris  Recherche et Recherche avancée  Formulaire de recherche : affiche un formulaire de recherche avancée personnalisable Les types de liens

 Articles  Articles archivés : affiche la liste des articles archivés  Article : fait un lien direct vers un article, qu’il soit catégorisé ou non. L’article sera affiché dans son intégralité (texte d’introduction + texte principal en cas de lien Lire la suite)  Liste de toutes les catégories : affiche la liste de toutes les catégories d’articles  Blog d’une catégorie : permet d’afficher le texte d’introduction de tous les articles d’une catégorie. Les articles sont affichés en blocs les uns au dessous des autres comme dans un blog.  Liste des articles d’une catégorie : permet d’afficher les articles appartenant à une catégorie.  Blog des articles en vedette : affiche les articles qui ont été mis en vedette en mode blog (blocs répartis dans des colonnes). Généralement utilisé pour la page d’accueil.  Créer un article : permet aux utilisateurs de rédiger et de soumettre des articles dans une catégorie de contenu donnée de votre site; l’article devra être publié par un utilisateur ayant accès au backend Les types de liens

 Utilisateurs  Connexion : affiche le formulaire de connexion  Profil de l’utilisateur : affiche les infos de l’utilisateur  Modification du profil : affiche le formulaire d’édition des infos d’un utilisateur  Enregistrement : affiche le formulaire d’enregistrement d’un nouvel utilisateur.  Rappel de l’identifiant : affiche le formulaire pour retrouver son identifiant.  Réinitialisation du mot de passe : affiche le formulaire pour retrouver son mot de passe  Liens divers  URL externe : permet d’afficher une page extérieure au site (ou # pour rien)  Alias de lien de menu : crée un lien vers un élément de menu existant  Séparateur : crée un élément sans lien Les types de liens

Faire un lien de menu  Etapes pour un lien sur un article  Cliquer sur menu > menu principal  Cliquer sur nouveau  Mettre un titre de lien de menu (ce qui apparaît sur le menu)  Cliquer que type de lien de menu  Choisir Articles > Article  Sélectionner l’article à mettre en lien  Enregistrer

Faire un lien de menu  Etapes pour un lien sur une liste d’articles d’une catégorie  Cliquer sur menu > menu principal  Cliquer sur nouveau  Mettre un titre de lien de menu (ce qui apparaît sur le menu)  Cliquer que type de lien de menu  Choisir Articles > Liste des articles d’une catégorie  Sélectionner la catégorie dont on veut la liste d’articles  Enregistrer

Faire un lien de menu  Etapes pour un lien sur un blog d’une catégorie  Cliquer sur menu > menu principal  Cliquer sur nouveau  Mettre un titre de lien de menu (ce qui apparaît sur le menu)  Cliquer que type de lien de menu  Choisir Articles > Blog d’une catégorie  Sélectionner la catégorie dont on veut le blog d’articles  Enregistrer

Administration de Joomla! Les contacts

 Les éléments de la page contact ne sont pas gérés par un article mais par un composant qui est accessible par l’onglet «Composants»  Il est conçu pour créer un annuaire de contacts avec pour chacun la possibilité d’afficher :  des coordonnées complètes,  une image  un formulaire de contact par mail  des informations complémentaires  C’est ce composant qu’on utilise généralement pour créer une page contact sur un site simple : dans le premier cas, on fait un lien vers une catégorie, dans le second, vers un contact. Gestion de la page « contact »

 Pour ajouter un contact, il faut:  Aller dans Composants > Fiches de contact > Fiche de contact  Cliquer sur « Nouveau»  Renseigner les champs souhaités dans le panneau «Détails du contact» à droite  Lier le contact à un utilisateur (à créer au préalable)  Facultatif :  Déterminer les informations à afficher ou non dans le panneau «Options d’affichage» à droite  Déterminer si le formulaire doit être affiché ou non dans le panneau «Formulaire de contact» et ses options  Personnaliser les informations supplémentaires dans le champ «Autres informations» à gauche  Enregistrer Gestion de la page « contact »

 Faire un lien de menu  Cliquer sur menu > menu principal  Cliquer sur nouveau  Mettre un titre de lien de menu (ce qui apparaît sur le menu)  Cliquer que type de lien de menu  Choisir Fiches de contact > Contact  Sélectionner le contact  Enregistrer

Administration de Joomla! Les extensions sympathiques

 Quelques extensions qui font un bel effet dans votre site  Slideshow CK (une bannière défilante)  OT Client Logos Scroller (une bannière constituée d’une suite d’images en carousel)  Phoca maps (un gestionnaire google maps gérant les trajets)  Sigplus (un gestionnaire d’images à placer dans les articles)  Visitors counter (un compteur de visites)  Et pleins d’autres encore…

Les modules sympathiques  Installation  Aller dans Extensions > extension manager  Uploader l’archive zip de notre module

Les modules sympathiques  Activer le module  Aller dans module manager  Cliquer sur le nom de notre module  Mettre le statut sur publié  L’assigner aux pages voulues (assignation des menus)  Choisir une position sur notre template  Choisir de montrer ou cacher le titre du module (que l’on peut changer)  Paramétrer le module  Il faut pour cela regarder toutes les possibilités qu’offre votre module

Les composants sympathiques  Installation  Aller dans Extensions > extension manager  Uploader l’archive zip de notre module

Les composants sympathiques  Gérer notre composant  Les composants installés sont présents dans le menu Composant de votre site  Exemple de phoca maps:  Permet de faire des plans d’accès sur votre site  Comment faire?  1- créer une map  2- créer un marqueur  3- créer un lien de menu phoca maps

Les composants sympathiques  Exemple de phoca maps  1- créer une map  Aller sur Composant > Phoca maps > Control panel  Cliquer sur maps  Cliquer sur nouveau  Remplir les données (le titre sera utile car c’est lui qui sera utilisé pour votre plan d’accès)

Les composants sympathiques  Exemple de phoca maps  2- créer un marqueur  Aller sur Composant > Phoca maps > Control panel  Cliquer sur markers  Cliquer sur nouveau  Remplir les données  Sélectionner la map à laquelle il sera raccroché

Les composants sympathiques  Exemple de phoca maps  3- créer un lien de menu  Aller sur votre menu (par ex menus > menu princpal  Cliquer sur Nouveau (ajouter un lien de menu)  Mettre un titre (ex: plan d’accès)  Choisir le type de lien de menu (Phoca maps > map view)  Sélectionner la map à montrer  Enregistrer  Il est possible d’avoir plusieurs marqueurs sur une page

Les composants sympathiques  Exemple de phoca maps  Résultat   On peut tracer des itinéraires vers chacun de nos marqueurs

A vous de jouer maintenant!