JOOMLA 1.5 avancé SUPPORT DE COURS + annexe

Transcription

1 JOOMLA 1.5 avancé SUPPORT DE COURS + annexe SOMMAIRE 1. LA GESTION DES MODULES... Page 2 2. MODIFICATION DE SON TEMPLATE... Page 6 3. LA CREATION DE DIAPORAMA... Page 9 4. LA CREATION DE SONDAGE... Page LA CREATION DE CATALOGUE... Page LE REFERENCEMENT... Page 12

2 1. LA GESTION DES MODULES Avant toute chose, revenons à la différenciation des différents objets dans Joomla : - Le module est un bloc que l on trouvera généralement autour du corps de la page web, par exemple le menu à gauche de l'article, - Le composant, c est une mini application qui gère le corps de la page, - Le plugin, c'est le code qui sera souvent rattaché à un composant pour permettre un meilleur fonctionnement. Les modules vont donc nous permettre de rajouter des éléments à divers emplacements de notre page afin d y ajouter des menus, sous-menus, sondages ou autres. Tout ce qui est en dehors de votre article (au centre de la page) sera donc un module. 1.1 Position des modules A droite, à gauche, en haut ou ailleurs, tout est possible à condition que le template que vous utiliserez prenne en charge ces positions. Pour identifier les positions de modules prises en charge par un template : Rendez-vous sur Vous y verrez votre site internet avec par dessus le squelette de ce dernier avec les différentes positions de modules disponibles. Par exemple left correspond à la colonne de gauche, la position right à la colonne de droite. Les positions user1 et user2 se situent le plus souvent au-dessus du corps de la page, donc au dessus de votre article. 1.2 Ajout de modules Afin d ajouter un nouvel emplacement de menu (bloc de menu) ou de sous-menus par exemple, il va falloir ajouter un nouveau module dans la gestion des modules :

3 Pour cela, rendez-vous sur Extensions > Gestion des modules puis cliquez sur le bouton «Nouveau» Vous aurez alors un large choix de modules dont «Menu», «Contact» et «Sondage» que nous verrons plus loin. Vous tomberez alors sur cette fenêtre où vous pourrez spécifier le nom du module, son lien avec un menu ou autre et sa position.

4 1.3 Afficher un module en fonction de la page visitée Cette fonctionnalité s'applique à n'importe quel type de module autonome. Dans la liste des modules du site vous noterez que chaque module a une valeur Tous, Variables ou Aucun dans la colonne page : Tous signifie que le module sera visible sur toutes les pages du site, Variables signifie que le module ne sera affiché que sur les pages activées par certains modules, Aucun signifie que le module ne sera jamais affiché, même s'il est publié! Vous pouvez décider d afficher un module sur toutes les pages ou de ne l afficher que sur certaines pages ; dans ce cas, comme l action qui déclenche l affichage d une page est l appui sur un item du menu, vous allez décider alors sur quels items du menu va s afficher ce module : Cochez la case Sélectionner le(les) élément(s) de menu depuis la liste, Sélectionnez le menu ou les menus concernés Vous pouvez faire une sélection multiple en maintenant la touche Crtl appuyée et en cliquant sur chacun des menus retenus. 1.4 Ordre des modules Si par exemple plusieurs modules sont publiés en position left, ils seront affichés l'un au-dessous de l'autre. Vous souhaiterez peut-être modifier l'ordre dans lequel ils seront affichés. Pour ce faire cliquez sur les petites flèches vertes (vers le bas ou vers le haut) afin de les réorganiser. 1.5 Activation/Désactivation des modules A partir de cet écran, vous pouvez voir si un module est publié : Le statut Activé (encore appelé publié dans l'ancienne version) d'un module est représenté par un signe vert

5 Le statut Désactivé (encore appelé non publié) est représenté par une croix rouge. Pour basculer du statut désactivé en statut activé, il suffit de cliquer sur la croix rouge en regard du module et inversement 2. MODIFICATION DE SON TEMPLATE Comme nous venons de le voir plus haut, c est le template qui va définir les positions disponibles pour y ajouter des modules dessus. Le choix de template est donc très important puisque certains ne permettent pas d avoir de modules à droite ou à gauche par exemple. Afin de modifier directement le template et ces couleurs nous allons devoir modifier son css. Mais le css c est quoi? Le langage CSS (Cascading Style Sheets) est utilisé pour définir l'aspect de votre site, comme par exemple la couleur du fond de la page, la couleur des liens ou le type de police. Plus concrètement, le CSS (ou feuille de style), c'est un petit fichier (exemple "style.css") dans lequel est défini l'aspect de votre site. Ce fichier seul permet de gérer les couleurs et polices de tout le site. Afin de ne pas alourdir ce support de cours, le cours sur le css se trouve en annexe de ce document. Afin de faciliter l accès et la modification du css, nous allons utiliser un additif de Firefox qui se nomme Firebug. Pour l installer, rendez-vous sur Google (ou tout autre moteur de recherche) et taper Firebug. Vous tomberez sur un page internet qui vous proposera d installer Firebug sur votre Firefox. Bien-sûr, vous devez utiliser le navigateur Firefox pour cette opération et pour la suite.

6 Une fois Firebug installé, une petite bestiole apparaîtra en bas à droite de votre navigateur! Pour l activer, il suffit de cliquer dessus. Sélectionnez à l aide de votre souris la flèche bleue, en haut à gauche de cette nouvelle fenêtre et inspecter l élément de votre choix sur votre page. Firebug vous indiquera dans la petite fenêtre de droite la ligne qu il vous faudra modifier si vous souhaiter changer la couleur d un lien par exemple. Télécharger à l aide de FileZilla le fichier en question et modifier la bonne ligne. Par exemple template.css se trouve dans FileZilla, dans le dossier «Template», puis dans le dossier du nom de votre template et dans le dossier «css». Une fois votre fichier modifié (dans un bloc note ou Word pad de préférence), télécharger le de nouveau, cette fois de votre ordinateur vers votre site avec FileZilla. 3. LA CREATION D UN DIAPORAMA Afin de créer un diaporama avec des transitions Flash, nous allons installer le composant MorfeoShow. Vous trouverez le composant à l adresse suivante : Télécharger le.zip et décompresser-le. Vous trouverez à l intérieur un composant et un plugin. Installer à l aide du menu Extensions / Installer-désinstaller tout d abord le composant puis le plugin. Veillez à ce que le plugin soit bien activé dans Extensions/Gestion des plugins. La première étape consiste à créer une galerie: dans "Composants > MorfeoShow", cliquez sur "Galeries", puis sur le bouton "Nouveau" en haut à droite.

7 Renseignez juste le champ "Titre" et la partie " Description Courte" galeries» avant de sauvegarder. Les différents choix de format de galeries : et «Choix du format de Classic : Affiche vos photos à l aide de vignettes, elles s ouvrent dans une fenêtre par-dessus votre page dès que l on clique dessus. Image rotator Flash : des enchainements en avec différents types de fondu et de volets, lecture automatique. Post Card Flash : enchainement de images par déplacement horizontal. Polaroid Flash : une photo sélectionnée passe en premier plan tandis qu'un double-clic l'affiche en grande taille (il est possible de déplacer les photos). Pour les suivants Flickr Classic Gallery, Flickr Postcard Gallery, Flickr Maps Gallery et Picasa Gallery, il faut disposer d un compte chez ces hébergeurs d'images. Il faudra alors ajouter des images à votre galerie en cliquant sur l'icône orange de la colonne "Transférer". A noter qu'il est inutile de transférer des images trop volumineuses car MorfeoShow les réduit automatiquement. En général 800x600 suffit amplement ce qui évitera des erreurs (temps de transfert, limitation mémoire) et vous fera gagner du temps lors des importations. 1. Pour le transfert de fichier unique, utilisez le bouton "Parcourir" pour sélectionner votre image, entrez un titre et remplissez éventuellement le champ "Description" avant de lancer le transfert en cliquant sur le bouton "Sauvegarder Image".

8 Une fois votre galerie créée et vos images téléchargées, il vous suffit de copier le texte du type {morfeo 1} et de le coller dans l article de votre choix. Rendez-vous sur cette page sur votre site internet pour visionner le résultat. 4. LA CREATION D UN SONDAGE Le composant Sondages accessible par le menu Composants>Sondage, permet de gérer les sondages effectués dans votre site. Création d'un sondage Le bouton icône Nouveau donne accès à la création d'un nouveau sondage. Remplissez dans le champ titre, la question que vous souhaitez poser aux visiteurs de votre site internet. Puis dans la partie droite du sondage, remplissez les différentes réponses possibles, puis sauver. Attention, les sondages sont publiés par défaut. Pour afficher un sondage, vous devez créer un module de type Sondages. Pour cela, rendez-vous dans Extensions/Gestion des modules puis cliquez sur Nouveau. Donnez-lui un titre puis attribuez-lui un sondage et enfin choisissez un emplacement à ce nouveau module. Tout comme n importe quel module, le sondage peut apparaître sur une ou plusieurs pages seulement. 5. CREATION DE CATALOGUE Le catalogue est une méthode différente pour créer vos produits si vous souhaitez les entrer dans une présentation par catégories par exemple ou les montrer sous forme de mini-boutique avec des liens Paypal. Pour utiliser un catalogue, il vous faut télécharger le composant DJ Catalog qui se trouve à l'adresse suivante : Vous y trouverez aussi le plugin de langue qui met le composant en français. Rendez-vous ensuite dans le gestionnaire d'installation, dans Extensions/Installer-désinstaller et importer le composant et le plugin.

9 Vérifiez que les différents plugins sont bien actifs et allez dans Composants pour y voir apparaître le Nouveau DJ Catalog. Une fois dans DJ Catalog, créez votre première catégorie et sauver. Puis créez votre premier produit de la sorte en cliquant sur Produit puis Nouveau : Remplissez le titre, la description, insérez votre photo en dessous ainsi qu'une image dans le champ «Ajout image» afin que le composant vous crée une vignette pour ce produit. Sauver et ajouter autant de produits que vous le désirez. Pour mettre en ligne votre nouveau catalogue sur votre site, il vous suffit de vous rendre dans Menu / Main-menu et de créer un nouveau menu qui ira vers le catalogue et non vers un article. Vous verrez ainsi un nouveau choix dans votre création de menu qui sera «DJ Catalog2».

10 Vous aurez ensuite le choix de faire un lien vers un article ou vers le catalogue entier, ou même vers un fabricant si vous en avez plusieurs dans votre catalogue. Remplissez le titre de ce nouveau menu et indiquez sur le côté droit dans «Paramètres basiques» si vous désirez montrer tout votre catalogue ou seulement une catégorie sur ce menu. Toutes les mises à jour faites dans votre catalogue seront automatiquement mises en ligne sur votre site. 5. LE REFERENCEMENT Google offre un outil gratuit pour le suivi de votre site internet : w.google.com/webmasters/tools?hl=fr ww Vous pouvez accéder à l'outil Google pour webmaster via votre compte Google.

11 Vous pourrez donc voir sur cette page les statistiques de votre site internet. Pensez à donner régulièrement à Google l'adresse de votre sitemap afin de lui permettre de connaître toutes les pages existantes sur votre site. Pour cela, rendez-vous sur le site Une fois votre sitemap généré, faîtes de même que pour le fichier de validation Google vu précédemment et transférez-le sur votre serveur à l'aide de Filezilla (aussi à la racine du site) Donnez le nom de votre fichier à Google de manière à obtenir une url du type Google va mettre quelques heures avant de valider votre sitemap. Pensez aussi à créer si cela n'est pas encore fait votre page professionnelle sur Facebook et de la mettre à jour régulièrement. Votre réseau est d'une importance capital pour vous permettre d'être référencer dans les moteurs de recherche. Veuillez donc à mettre régulièrement de nouveaux partenaires dans votre page Partenaires et demandez des liens de retour! Bonne continuation à tous.

12 Syntaxe : ANNEXE Comprendre le CSS (feuilles de style) balise1 { propriete: valeur; propriete: valeur; } balise2 { propriete: valeur; propriete: valeur; propriete: valeur; } Exemple : p { } color: blue; font-size: 18px; Mise en forme de la police h4 { font-family: verdana, sans-serif ; color: green ; font-style: italic ; background-color: #FFFFFF ; font-size: 16pt ; } "font-family" = la famille de polices Roman", Verdana ex :Georgia, "Courier New", "New Serif = Bodoni, Roman, Times, Georgia, "Times New Roman", Garamond,... Sans-serif = Arial, Helvetica, Verdana, Univers, "MS Trebuchet",... Cursive = Chancery, Script, Brush,...

13 Monospace = Courier, "MS Courier New", Lucida... "font-size" = la taille de police (ou corps) Un mot-clé parmi les suivants peut être appliqué à une police: xx-small x-small small medium large x-large xx-large ou Taille définie en points = {font-size: 12pt;} "font-style" = le style de police ex : normal, italic "font-weight" = l'étirement de police Mots-clés ou valeurs : Ces valeurs "100 à 900" représente la graisse de la police de caractères. Normal : Equivaut à la valeur "400" bold : Equivaut à la valeur "700" bolder : Graisse supérieure à celle assignée à une police, sans pouvoir dépasser la valeur "900". lighter : Graisse inférieure à celle assignée à une police, sans pouvoir descendre sous la valeur "100". "color" ou couleur du texte - nom de la couleur : white, black, blue... - valeur hexadécimale : #FFFFFF, #Fff33CC body { font-family; arial, verdana, sans-serif ; font-size:16pt ; background-color: #FFFFFF ; } h4 { color: green ; }

14 Couleur du fond de page body { background-color: #FFFFCC ; } Nuancier de couleur en ligne : Image dans un fond de page body { background-image: url("images/nom.jpg" } Background-attachment fixed L'image reste fixe à son emplacement lors du défilement de la page. repeat L'image d'arrière-plan se répète à la fois horizontalement et verticalement. no-repeat L'image d'arrière-plan n'est affichée qu'une seule fois. body { background-image: url("images/nom.gif") ; background-repeat: no-repeat ; background-attachment: fixed ; } Propriété de taille width : largeur height : hauteur border : bordure body { background-image: url('aimages/v143.jpg') ; background-repeat: no-repeat ; border: 1px solid # ;

15 width: 300px ; height: 200px ; } Propriété "Text-decoration" body, p { font-family: arial, verdana, sans-serif ; font-size: 10pt ; color: black ; background-color: #FFFFFF ; } {text-decoration: overline ; } line-through = barré underline = souligné none = soulignement annulé et valeur par défaut Propriété des liens a:link, liens qui n'ont pas été visités a:visited, liens visités. a:hover, change l'apparence du lien quand l'utilisateur désigne un élément avec le pointeur de sa souris body { font-family: arial, verdana, sans-serif ; font-size: 10pt ; color: black ; background-color: #FFFFFF ; text-align: justify ; } a:link { font-weight: bold ; color: black ; } a:visited {color :black ; } a:hover { color: red ; text-decoration: none ; }