Mode d`emploi du rédacteur - Groupe scolaire le Charr ard

Maintenir
Joomla
un
site
avec
Mode d'emploi
du
REDACTEUR
Temps de la présentation : 60 min.
Phaiboun THONG SOUM
Nombre de diapositives : 33
N°1
Objectifs de la formation
Etre capable de maintenir (créer / modifier) des
articles
1.
2.
3.
4.
5.
Qu'est-ce qu'un site internet
Que sont les pages web ?
Le CMS Joomla !
Rédaction des articles
Annexes
1.
2.
3.
4.
5.
Phaiboun THONG SOUM
Envoyer des images/photos
Agrandir/Réduire une image
Retoucher une image
Mises en forme complémentaires
Site personnalisable à volonté
N°2
1. Qu'est-ce qu'un site WEB
?
Ensemble de pages avec des liens (pages hyperliées)
Pages affichées dans un navigateur internet
Faire un site WEB, c'est :
Créer des pages web,
Transférer les pages sur un serveur WEB, chez un fournisseur
Afficher les pages à partir d'un nom de domaine réservé
La première page d'un site est appelée "la page d'accueil"
Un "Portail" est une porte d'entrée unique sur une multitude de
ressources et de services
Sites de plus en plus sophistiqués :
Phaiboun THONG SOUM
Pages dynamiques
Menus
Pages multi-cadres
Sites marchands
Images, animations, vidéo
Messagerie instantanée
Nouvelles fonctionnalités diverses (prise de contrôle à distance,
télésurveillance, communauté de ressource partagée pour diverses
recherches…)
N°3
2. Qu'est-ce
WEB ?
qu'une
page
C'est un contenu destiné à être affiché et donc consultable sur
le réseau Internet à l'aide d'un navigateur
Une page web est devenue une ressource constituée
d'assemblage de texte, d'images, de vidéos, d'animations, de
logiciels, etc.
On distingue :
Les pages statiques (contenu figé),
Les pages dynamiques (exemple : page de commande sur un
site commercial)
Les pages statiques sont générées de nombreuses manières :
Phaiboun THONG SOUM
Langages de programmation
Logiciels intégrés
Gestionnaires de contenus (CMS ou SGC)
…
N°4
3. Le CMS Joomla
1. Présentation
2. Les habilitations
3. Système hiérarchique documentaire
4. Publication des articles
Phaiboun THONG SOUM
N°5
3.1 Présentation de Joomla
Qu'est-ce qu'un CMS : Content Management System :
Phaiboun THONG SOUM
CMS = Système de Gestion de Contenu
Ils permettent à plusieurs individus de travailler sur
un même document ;
Ils fournissent une chaîne de publication (workflow)
offrant par exemple la possibilité de mettre en ligne
le contenu des documents ;
Ils permettent de séparer les opérations de gestion
de la forme et du contenu ;
Ils permettent de structurer le contenu (utilisation de
FAQ, de documents, de blogs, de forums de
discussion, etc.) ;
Certains SGC incluent la gestion de versions.
Ils offrent la possibilité de faire évoluer le site par
l'adjonction de divers modules : site très dynamique
N°6
3.1 Présentation de Joomla
Backend / Frontend :
Phaiboun THONG SOUM
le Backend est l’arrière-boutique de
votre site (l'interface d’administration),
N°7
3.1 Présentation de Joomla
Backend / Frontend
Phaiboun THONG SOUM
le frontend c’est la boutique, ce que voient les visiteurs.
N°8
3.1 Présentation de Joomla
Les avantages :
système gratuit
communauté active
évolution constante
gestion d'utilisateurs selon plusieurs niveaux
maintenance coopérative
Pour les rédacteurs : pas besoin d'avoir de connaissances pointues en
informatique ni d'avoir de configuration logicielle particulière
Pour l'administrateur :mises à jour directes, disponibilités de modules
gratuits, interface de gestion centralisée et puissante, gestion
d'utilisateur et de mailing
Quelques exemples de sites
Phaiboun THONG SOUM
ville de Cannes, Sébastien Loeb, Communauté agglomération
clermontoise, Porsche Brésil, Centre régional d'information des nations
unies, Air India Switzerland, Stade de France, Avis Nicaragua, Aids
Healthcare Foundation, La Croissanterie, Emmaus International,
Samuel L.Jackson, Paradiski (La Plagne-Les Arcs), TNS-Sofres
présendentielles 2007, Opéra de Rouen, Mitsubishi Vénézuela, Ordre
de Malte France, Syntec, Office de tourisme de Toulouse, Fédération
Française de Roller-skating, portail interministeriel d'information pour
l'éducation artistique et culturelle , M. Bricolage, Senheiser France,
Botanic, Le Robert, Auto-Journal, Françoise de Panafieu, Centre de
recherche de l'armée de l'air,
Club de tennis de table du charréard.
N°9
3.2 les niveaux d'accès :
Les habilitations
Phaiboun THONG SOUM
N°10
3.3 le système hiérarchique
documentaire
Structure à respecter par un exemple
Phaiboun THONG SOUM
N°11
3.3 le système hiérarchique
documentaire
Le respect de la structure permet une
maintenance aisée pour les rédacteurs
Phaiboun THONG SOUM
N°12
3.4 Publications des articles
Il s’agit de rendre visible ou non, sur le
frontend :
un lien dans un menu,
un module entier,
une section, une catégorie, un article.
Il
est par ailleurs possible de définir un
calendrier de publication, date à partir de
laquelle ou jusqu’à laquelle un article sera
publié.
Dans votre cas, effectué par l'administrateur
du site.
Phaiboun THONG SOUM
N°13
4 Rédaction des articles
1.
2.
3.
4.
5.
6.
7.
8.
Phaiboun THONG SOUM
Pré-requis
Modifier un article
Créer un article
insérer une photo/image dans un article
Insérer un album photo dans un article
Créer un menu
Retoucher une photo
Envoi de fichier
N°14
4.1 Pré-requis
Toute opération de maintenance sur les articles nécessite au préalable
de s’identifier sur la page d’accueil
Connexion et déconnexion s’effectuent sur la page d’accueil
Phaiboun THONG SOUM
N°15
4.1 Pré-requis
L'identification d'un membre reconnu comme étant un
rédacteur du site affiche un bloc de menu dédié aux
rédacteur : diverses options lui sont proposées
Phaiboun THONG SOUM
Votre profil : modifier son nom, son email de
contact, son nom de connexion, son mot de passe,
son éditeur
Proposer un lien web
vérifier vos articles : toute mauvaise fermeture
d'un article doit être réinitialisée par ce biais
Déposer vos photos : envoyer plusieurs photos
sur le serveur dans le but de publier une gallerie
ultérieurement
Administration du site : réservée à tout
administarteur
Déconnexion : toujours se déconnecter en
partant…
N°16
4.1 Modifier un article
Se positionner sur l’article à modifier
Phaiboun THONG SOUM
Icône pour la
modification :
N°17
4.1 Modifier un article
Edition de l’article pour modification
Bloc de texte introductif
Bloc de texte "principal« qui apparaît après
"Lire la suite…"
Gestion :
•onglet Images :permet d'insérer des
images dans l'article d'une manière
particulière
•onglet publication : défini les paramètres
de publication (auteur, calendrier de
publication de l'article, affichage en page
d'accueil, accès restreints à l’article…)
Phaiboun THONG SOUM
N°18
4.1 Modifier un article
L’éditeur de texte
• Enregistrement
• Application des modifications (sans
enregistrement)
• Annulation des modifications
Barre d’outils de mises en forme (style
Word)
•Titre de l’article
•Catégorie contenant l’article
Zone de saisie
Phaiboun THONG SOUM
N°19
4.2 Créer un article
Se positionner dans la section et la rubrique dans laquelle l'article s'insèrera
Liste déroulante pour choisir la catégorie
qui contiendra l’article
Phaiboun THONG SOUM
N°20
4.3 Créer un menu
La
création d'un nouveau menu ou
sous-menu est faite par l'administrateur
du site
une demande doit être envoyée à
l'administrateur (oralement ou par mail)
De même la création d'une nouvelle
rubrique est uniquement autorisée qu’à
à l'administrateur : en cas de besoin, lui
en formuler la demande.
Phaiboun THONG SOUM
N°21
4.5 Insérer une photo /
image
En
création ou en modification d'un article, se
positionner sur l'endroit où l'image doit être insérée
Dans la barre d'outil de l'éditeur, cliquer sur l'icône
d'insertion d'image
Affichage de la fenêtre "Gestionnaire d'images"
Ouverture d'une fenêtre de
recherche avec les propriétés de
l'image
Phaiboun THONG SOUM
N°22
4.5 Insérer une photo /
image
Les propriétés de l'image : le groupe "Image de l'article"
Phaiboun THONG SOUM
Description
Titre : c'est ce qui apparaît lorsque la souris est positionnée sur
l'image
Espace vertical / horizontal : c'est l'espace qui sera mis entre l'image
et le texte environnant
Aligner : permet de choisir le cadrage de l'image avec le texte de
l'article (l'illustration avec la photo de la fraise donne un aperçu du
mode d'alignement choisi)
Bordure : spécifie une bordure autour de l'image (épaisseur, couleur,
style).
N°23
4.5 Insérer une photo /
image
Sélectionner l'image à insérer : le groupe "Navigation" :
Le champ "Répertoire" est une liste déroulante de sélection rapide d'un
répertoire parmi tous ceux existants sous la "Base"
L'autre manière de choisir le répertoire est d'utiliser les cadres de
navigation situés en dessous
Cliquer sur une image provoque son aperçu rapide dans le cadre de
droite
Plusieurs actions sont possibles
Cliquer sur "Mettre à jour" pour terminer l'insertion
Créer un répertoire dans le
répertoire courant : A UTILISER
AVEC PRECAUTION
Envoyer une image ou photo de
votre PC dans le répertoire courant
du serveur : affichage d'une fenêtre
d'exploration pour la recherche de
l'image sur votre PC
Actions possible sur le fichier :
• renommer
• supprimer
• copier (bouton "coller" apparaît)
• couper (bouton "coller" apparaît)
• visualiser
Phaiboun THONG SOUM
N°24
4.5 Insérer une photo /
image
La fenêtre "Gestionnaire d'images" refermée, vous retournez sur l'article avec
l'image insérée à l'endroit du curseur
L'image peut paraître :
Trop grande : vous pouvez la redimensionner en vous plaçant sur un des coins de
l'image. Le curseur de la souris se transforme et vous pourrez réduire / agrandir
l'image
Mal placée : vous pouvez cliquer sur l'image. Le curseur de la souris change :
vous pouvez déplacer l'image. Attention aux effets de bord qu'il peut se
produire…
Redimensio
nnement de
l'image
depuis
l'article
Phaiboun THONG SOUM
N°25
4.6 Insérer un album photo
Au préalable, il faudra envoyer vos photos sur le serveur. ¨Pour cela, il est
préférable d'utiliser l'interface d'envoi de photos (voir annexe 5.1 – Envoyer des
images / photos)
Rédiger un nouvel article ou modifier un article existant
A l'endroit où doit se situer la galerie photo, entrer le texte : {gallery
repertoire=répertoire de vos images}
Exemple :
vous avez envoyé des photos dans photos/mgs_2008/anniversaire/octobre
Répertoire de vos images sera : mgs_2008/anniversaire/octobre
Résultat
Phaiboun THONG SOUM
N°26
5.1 Annexe - Envoyer des
images/photos
Dans le "Menu utilisateur", cliquer sur "Déposer des photos" :
SERVEUR : affichage du contenu du
répteroire et des sous-répertoires
Sur votre machine : Liste de toutes les
photos que vous avez sélectionnées pour
l'envoi sur le serveur
Pour ajouter des photos dans la file
d'attente
Supprimer une photo ajoutée par erreur
(en ayant pris soin de la sélectionner dans
la liste au préalable)
Envoyer toutes les photos dans la file
d'attente sur le serveur
Phaiboun THONG SOUM
N°27
5.2 Annexe – Agrandir / Réduire
des photos avec XnView
En règle général, une photo à afficher sur une page web doit avoir une taille <
200 Ko
Il est donc FORTEMENT conseillé de redimensionner les photos à envoyer sur le
serveur
A titre de comparaison, voici les tailles des photos que vous pouvez avoir :
Résolution
de la photo
(pixels)
Dimensions
taille
Taille photo
maxi en
développement
8 Mo
3600 x 2700
4,39 Mo
20 x 27 cm
4 Mo
2400 x 1800
2,40 Mo
20 x 27 cm
2 Mo
1600 x 1200
1,12 Mo
13 x 17 cm
1 Mo
1280 x 960
755 Ko
11,5 x 15 cm
0,3 Mo
640 x 480
211 Ko
6 x 9 cm
0,07 Mo
320 x 240
66 Ko
…
L'un des utilitaires gratuit permettant facilement de redimensionner par lot
des images est XnView (que l'on peut trouver sur www.telecharger.com).
Il existe une version "portable" de XnView qui évite d'installer le logiciel sur un
PC. Le logiciel pourra, dans ce cas, se trouver sur une clé USB.
Phaiboun THONG SOUM
N°28
5.2 Annexe Agrandir / Réduire une
photo avec XnView
Sélectionner les photos à redimensionner (multi-sélection : <CTRL+click gauche>)
Cliquer sur le menu "Outils - Convertir…"
Onglet "Général" :
Liste de votre sélection
Dans cette fenêtre, possibilité d'ajouter
également des photos ou un répertoire
entier
Spécification du répertoire de destination
des photos redimensionnées.
Bouton de lancement de l'action de
redimensionnement par lot
Phaiboun THONG SOUM
N°29
5.2 Annexe Agrandir / Réduire une
photo avec XnView
Onglet "Transformations" :
Choisir l'action "Redimensionner"
Sélectionner la méthode de redimensionnement (taille ou pourcentage)
Double-cliquer sur "Redimensionner"
Paramètres de l'action en cours à
effectuer (action en surbrillance dans la
fenêtre au-dessus)
Bouton de sélection de dimensions
prédéfinies
Phaiboun THONG SOUM
N°30
5.3 Annexe - Retoucher une
image avec Gimp
Comment rendre flou le visage d'un enfant sur une photo
Gimp est un logiciel gratuit (OpenSource) et téléchargeable sur www.telecharger.com.
Gimp existe également en version "portable".
Lancer Gimp, puis ouvrir l'image à retoucher (menu "Fichier – Ouvrir" ou touches <CTRL+O>)
Dans la boîte à outil :
Sélectionner "Outil de flou et de netteté" :
Sélectionner la forme de brosse voulue
Activer le bouton radio "Flou"
Positionner le taux à 100%
Barbouiller le visage à "flouter" jusqu'au degré recherché puis enregistrer l'image
Modification de la forme
de la brosse
Phaiboun THONG SOUM
Sélection du mode "Flou"
et du taux d'opacité
N°31
5.4 Annexe – Mises en
forme complémentaires
Les articles :
découpage d'un article en "chapitre"
pour aérer la présentation
cadrage des images à l'intérieur de
l'article
Les galleries photo
ajout d'un titre à la gallerie
ajout de nom aux photos
ajout de commentaire aux photos
Phaiboun THONG SOUM
N°32
5.5
Annexe
Site
personnalisable à volonté
Templates ou l’art de changer le look du site rapidement
Les modules, composants : des fonctionnalités, des
bouts d'applications nombreuses pour faire évoluer le
site :
sondages,
notations d'articles,
commentaires,
espace dédié aux membres,
forum …
Retoucher le code pour pousser encore plus loin les
besoins spécifiques qui peuvent évoluer…
Phaiboun THONG SOUM
N°33