Altaïs Fo F r o m r a m t a i t on o à l u ti t lisa s t a i t on o de Joomla! 1

Transcription

1 Altaïs Formation à l utilisation de Joomla! 1

2 Qu est-ce que Joomla! Joomla! est la transcription phonétique d'un mot swahili qui signifie"tous ensemble", ou "en un tout". Joomla! est un système de gestion de contenu (Content Management system) créé par une communauté internationale de développeurs. Joomla! est un CMS Open Source distribué sous License GNU/GPL (gratuit) avec lequel vous pourrez mettre en ligne du contenu et mettre à disposition de vos visiteurs des services (forum, boutique en ligne, galerie photos,...), le tout sans connaissances particulières. 2

3 Logique de fonctionnement LefrontetBacksite: Le front est ce que l internaute voit. Le back est la modification des pages par le rédacteur. Je modifie le Back, le front est automatiquement mis à jour. L interface d administration: Toutes les modifications se font en temps réel dans l interface d administration accessible à partir d une connexion Internet et d un navigateur(de préférence Mozilla Firefox). 3

4 Schéma de fonctionnement de Joomla! 1/2 W.W.W. INTERNAUTE Ce que je publie est directement visible par l internaute REDACTEUR 4

5 Schéma de fonctionnement de Joomla! 2/2 Le site est hébergé chez votre hébergeur W.W.W. REDACTEUR Tous les articles sont rédigés directement sur la plateforme de votre hébergeur. La structure du site (Menu, archives ) est créée en temps réel sur la plateforme d administration. 5

6 La trousse à outils 1/1 De quoi avons-nous besoin? Mise à jour des articles : Une connexion Internet Mozilla Firefox(de préférence) ou Internet Explorer Gestion de la bibliothèque d images : VSO Image Resizer(redimensionnement des images) 6

7 L accès aux modifications 1/1 Adresse de modification globale (ajout d article, menu, composants spécifiques) : Adresse de modification pour 1 article déjà publié : 7

8 Les mots de passe à conserver LES MOTS DE PASSE A CONSERVER Serveur FTP : ftp.cluster003.ovh.net Login ou utilisateur : inelamlz Mot de passe : L9yyltLI Identifiant manager OVH Adresse : Client (Nic Handle) : be30225-ovh Mot de passe : lqbgqf6p 8

9 L utilisation de l interface 1. Afin de pouvoir se connecter à l administration, il faut impérativement s identifier sur le site Internet, celui-ci étant protégé avant sa mise en ligne, se connecter à : 2. Puis se connecter sur : Nom d utilisateur : altais Mot de passe : fi9t0tur 3. Chaque rédacteur est identifié au site grâce à un nom d utilisateur, et un mot de passe. Les bons «identifiants» et «mots de passe» saisis, dirigent le manager vers l accueil de l administration. 9

10 L utilisation de l interface d administration Paramétrages des différents menus Accès à la gestion des articles/sections/catégories /corbeille des articles Accès aux composants spécifiques (listes, agenda, formulaires ) Liste des rédacteurs connectés Permet de créer un nouvel article Paramétrage des nouveaux utilisateurs Gestion des sauvegardes 11

11 Généralités Joomla! Publier ou dépublier un article Modifier l ordre d affichage des articles, des menus Icônes d actions disponibles Le titre en bleu indique l action en cours Sélectionner un ou plusieurs articles, menus pour effectuer une action particulière Ne jamais utiliser Précédent ou suivant de votre navigateur, toujours utiliser les boutons situés en haut à droite. 12

12 Généralités Joomla! Généralités des icônes des actions disponibles en haut à droite, de l article, du menu en cours de création ou de modification : Le Filtre sert à effectuer des recherches. Il se situe obligatoirement audessus de la liste ouverte à gauche. Saisir les 1ères lettres du nom recherché puis cliquer sur Appliquer. La liste se modifie et affiche les éléments trouvés Cliquer sur Réinitialiser pour revenir à la liste complète. Prévisualiser l article en dehors du site. Enregistrer etfermer l article, menu en cours d utilisation Annule la création ou les modifications effectuées Enregistrer sansfermer l article, menu en cours d utilisation. 13

13 Logique des sections / catégories Section Ex : Section Jeunesse Catégorie 1 Ex : Catégorie Enfant : 0 à 13 ans Catégorie 2 Ex : Catégorie Enfant : 4 à 10 ans Ex : Catégorie Enfant : + de 10 ans Les articles se retrouvent classés dans une catégorie dépendant d une section. Utilité : 1. Classement et recherche des articles dans la liste de tous les articles 2. Organiser les articles en fonction des news 3. Autoriser des rédactions à n accéder qu à une section ou une catégorie d articles 14

14 Créer un article 1/2 Dans le panneau de contrôle, cliquer sur Créer un article Attention : un article doit être affecté à une section et une catégorie, préalablement créée. Il s agit d une arborescence de classement. Généralement, créer une section par menu et une catégorie (dont le nom est identique à la section). 15

15 Créer un article 2/2 Mettre un titre significatif à l article Cocher publié et afficher en page d accueil si c est le cas Choisir la section et la catégorie correspondante à l article Onglet pour modifier la couleur d un texte Séparateur horizontal Style prédéfinis des titres, Rédiger le texte des sous-titres, du corps Options : Indiquer la date de début et de fin de publication pour l internaute Insertion de Lire la suite, il se visualise par l apparition d un trait rouge à l endroit où se situait le curseur. 16

16 Import de texte provenant de Word Copier le texte provenant de Word Dans l article de Joomla! : 1 clic pour positionner le curseur à l emplacement du collage Et un clic sur l icône coller de Word Coller le texte dans la zone Cocher les deux cases Puis Cliquer sur OK 17

17 Insérer une image 1/4 Pour insérer une photo : Cliquer sur l icône Si la photo existe sur le serveur OVH, la sélectionner à partir de son dossier. Puis sur parcourir le serveur Pourcréerundossier,semettredansle dossier souhaité puis cliquer Nouveau Dossier, nommer et valider Pour charger uneimage du disquedur, se mettredansle bon dossier sur le serveur et cliquer sur parcourir, une fois l image sélectionnée, l image peut être redimensionnée puis cliquer sur upload 18

18 Insérer une image 2/4 Un clic sur Nouveau Dossier Saisir le nom du dossier : Puis OK. Le dossier est créé, L ouvrir Créons un dossier Images et insérons une image à l intérieur 19

19 Insérer une image 3/4 Ouvrir le dossier, cliquer sur parcourir Aller chercher l image sur votre ordinateur Cliquersur Ouvrir Puis choisir sa taille puis Upload Un clicsurla photo pour la sélectionner 20

20 Insérer une image 4/4 Choisir la position de l habillage de la photo par rapport au texte. En option : une bordure noire autour de la photo Un espacement entre la photo et le texte Légender la photo (Obligatoire en W3C et pour faciliter le référencement) 21

21 Mise en conformité des photos ½ Logiciel VSO Image Resizer Comment mettre une photo dans les bonnes dimensions : Une fois le logiciel VSO Image Resizerinstallé, faire un clic droit sur la photo ou les photos à redimensionner et choisir : VSO Image Resizer -> Cette fenêtre apparait : Choisir de modifier la largeur (si paysage) Ou la hauteur (si portrait) avec les paramètres préalablement vus Mettre le % qualité à 100% Puis choisir un dossier de stockage de l image. Cliquer sur OK pour Valider La nouvelle image à été crée au bon format. Renommer la photo si nécessaire 22

22 Mise en conformité des photos 2/2 Gestion des photos : Les impératifs : Taille des images : horizontal (en paysage) : largeur : 250 pixels Taille des images : vertical (en portrait) : largeur : 175 pixels 250 pixels Format d enregistrement : jpg Les noms d image ne doivent ni avoir d espace, ni d accent, ni ponctuation particulière hormis le ou _ Exemple : château de la Ferté doit s écrire : chateau_de_la_ferte.jpg ou chateau-de-la-ferte.jpg ou chateaudelaferte.jpg Exception : Les photos de l accueil font : Horizontal : 140 px 175 pixels Vertical : 100 px 23

23 Créer un lien vers un PDF 1/2 Sélectionner le mot à lier Puis un clic sur l icône lien Et sur Parcourir le serveur La création de dossiers, l upload et la sélection du fichier est identique aux photos sans redimenssionner Une fois le lien réalisé, cliquer sur l onglet destination Et choisir : ouvrir dans une autre fenêtre 24

24 Créer un lien vers un et vers une page interne du site 2/2 Pour insérer un lien vers un Changer le type de lien par . Ensuite compléter telle une création d un dans une messagerie courante. Créer un lien interne (vers un article existant) : Cliquer sur l icône Insérer un lien vers un autre article Ecrire les 1 ères lettres de l articles et une liste d article commençant de la même façon apparaît Choisir l article souhaité et cliquer sur Ok 25

25 Modifier les menus 1/3 Pour y accéder cliquer sur la barre de menus, dans rubrique Menu Il faut modifier le menu_haut, ( menu_haut_2, menu_gauche, menu_gauche_2) 26

26 Modifier les menus 2/3 Les menus et sous-menus apparaissent avec leur hiérarchie. Un clic sur l icone masque ou affiche le menu, l ascenseur permet de modifier l ordre 27

27 Modifier les menus 3/3 Pour modifier le nom d un menu ou sous-menu existant, cliquer dessus Puis changer le nom Cliquer sur sauver La position dans le menu peut être choisi en cliquant sur le nouveau menu Haut = nouveau menu Choisir un menu existant pour le placer en sous-menu Attention : Si vous sélectionnez un sous-menu, le menu sera positionné en sous-sous menu 28

28 Créer un nouveau menu 1/1 Préambule : L article à intégrer dans le menu doit être préalablement crée. Choisir le menu dans lequel l intégrer et cliquer sur nouveau (voir modifier un menu 1/3) Cliquer sur Article Cliquer sur sauver, le menu est actif Affiche tous les articles de la catégorie sous forme de page d accueil. Affiche tous les articles sous forme de listes. Seuls les titres apparaissent sous forme de tableau Nommer le menu Le lier à un article Et choisir sa position Position Haut = nouveau menu Menu existant = sous-menu Voir le détail des affichages en liste et en blog à la page suivante 29

29 Présentation en liste ou en blog 1/1 Les listes et blogs peuvent être affectés à une catégorie comme à une section Sélectionner la catégorie/section Les articles affiliés à la catégorie/section s afficheront soit en liste soit en blog dans le menu paramétrer. Principal : Affiche X articles sur toute la largeur Intro : Affiche X intros d articles Colonnes : Affiche X colonnes Liens : Affiche X liens vers les articles 30

30 Présentation en liste ou en blog 2/2 Présentation en liste Cliquer sur le titre de l article et l article apparaît dans une nouvelle page du site Internet. Présentation en blog L article peut s afficher complètement, insérer des Lire la suite pour ne pas encombrer la page. Cliquer sur Lire la suite et l article apparaît dans une nouvelle page du site Internet. 31

31 Modifier directement les pages en ligne 1/2 Se connecter avec ses identifiants et mots de passe à l adresse (une fois le nouveau site mis en ligne) : Ouvrir la page à modifier et cliquer sur l icône de modification : 32

32 Modifier directement les pages en ligne 2/2 Effectuer les modifications à l aide du traitement de textes en ligne, puis cliquer sur enregistrer, la page est à jour. 33

33 Rappel éléments importants 1/1 Déverrouillé Attention un article verrouillé peut être un article en cours de modification, dans ce cas s assurer que l auteur n est pas en ligne en cliquant sur accueil et en regardant dans le panneau de droite sur l onglet connectés Puis aller dans le menu Outil et cliquer sur Validation générale 34

34 Sauvegarder le site 1/1 1 ère étape Sélectionner le composant Akeeba Backup Cliquer sur sauvegarder. Lorsque la sauvegarde est en cours d exécution, vous ne devez pas fermer la page. 2ème étape Télécharger les sauvegardes sur un support physique : Sélectionner la sauvegarde et cliquer sur télécharger 35

35 Nous contacter Société ALTAÏS Immeuble le Lafayette 7, Rue Vieille Levée ORLEANS 8 rue Honoré de Balzac TOURS Tél : Fax : Tél : Contact technique : Jean-François TOUREL jftourel@altais.fr Alexandre RABOTTIN arabottin@altais.fr Contact administratif : Cindy PUARD cpuard@altais.fr 36