Guide de l`utilisateur – CMS

 Votre partenaire d’affaires privilégié Guide de l’utilisateur – CMS
1 2 Navigation dans le CMS ................................................................................................................. 2 1.1 Menu principal ......................................................................................................................................... 2 1.2 Modules – tableau .................................................................................................................................. 3 1.3 Modules – formulaire .............................................................................................................................. 5 1.4 Navigation dans le site Web en mode édition .................................................................................... 6 Utilisation de l’éditeur de texte HTML ........................................................................................... 7 2.1 3 Fonctionnalités générales ...................................................................................................................... 7 2.1.1 Plein écran ....................................................................................................................................... 7 2.1.2 Copier-coller .................................................................................................................................... 7 2.1.3 Nettoyage du code .......................................................................................................................... 8 2.1.4 Clic droit (menu contextuel) ........................................................................................................... 8 2.1.5 Mode HTML ..................................................................................................................................... 8 2.1.6 Aide ................................................................................................................................................... 8 2.2 Texte et mise en page ............................................................................................................................ 9 2.3 Liens hypertextes .................................................................................................................................... 9 2.4 Photos ..................................................................................................................................................... 10 2.4.1 Téléverser (upload) ...................................................................................................................... 11 2.4.2 Redimensionner ............................................................................................................................ 12 2.4.3 Insérer et modifier ......................................................................................................................... 12 2.5 Fichiers téléchargeables ...................................................................................................................... 13 2.6 Intégration (YouTube, Google Maps et Facebook) ......................................................................... 13 2.7 Médias (vidéo et audio) ........................................................................................................................ 14 2.8 Tableau, styles et modèles .................................................................................................................. 14 Quelques modules ........................................................................................................................ 15 3.1 Nouvelles ................................................................................................................................................ 15 3.2 Album photos ......................................................................................................................................... 15 3.3 Utilisateurs ............................................................................................................................................. 16 3.4 Exemples de modules possibles ........................................................................................................ 16 145A, avenue de Port‐Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765‐4636 ‐ www.solutioninfomedia.com Votre paartenaire d’affaires privilégié 1
Naviga
ation dans le CMS
Pour acccéder au système de gestiion de conten
nu de votre ssite Web, ou
u en anglais content ma
anagement syystem (CMS), il vous sufffit d’aller sur votre site Web W et d’ajouter « /cms »
» à votre domaine d
(ex.. : www.dom
maine.com/cm
ms). Cela vo
ous mènera à la page d’authentiffication. Entrrez y le no
om ot de passe qu
ui vous ont étté fournis. Vo
ous d’utilisatteur et le mo
pouvez revenir au site Web en cliquant sur le lien sous la ous boîte d’aauthentificatiion. Une fois correctement identifié, vo
serez red
dirigé vers le menu princip
pal. Notez qu’il est impo
ortant de quiitter le CMS avec le boutton Quittter en haut à droite, une fois vos activitéss de modificattion complétéées. C’est unee question dee sécurité phyysique sur vottre poste de ttravail. 1.1
Menu principa
al
m
princip
pal variera d’un site Web à l’autre selo
on les modules utilisés paar le site. Less modules Le menu sont des tableau
ux servant à la gestion (ajout, modificcation, suppreession) des différentes d
do
onnées du site Web. Vous vverrez en détaail les modulees dans les seections 1.2, 1.3 et 3. Pou
ur la navigatio
on dans le m
menu principal, il vous sufffit de choisir le module daans lequel vo
ous voulez M
fairee des changgements ou encore d’uttiliser la fonction Modification des pages, qui vous permettra de modifier les co
ontenus des d
différentes paages de votree site Web en
n naviguant ssur celui‐ci (voiir la section 1.4 pour plus d
de détails). 145A, avenu
ue de Port‐Royyal, Bonaventu
ure (Québec) G0C 1E0 Sans frais : 1 888 765‐46
636 ‐ www.solutioninfomed
dia.com Guide de l’utilisateur – CMS Nottez la présence du bouton
n mod
difications co
omplétées. 1.2
Quitterr en haut à droite; d
il est important dee l’utiliser un
ne fois vos Modules – tab
bleau
us les modules du CMS ont la mêmee interface de d navigation
n. Les colonn
nes du tableeau et les Tou
possibilités de fo
onctionnalitéss varient selo
on les besoinss de chaque m
module. Obseervez la dispo
osition des élém
ments dans l’image suivan
nte. En p
premier lieu, remarquez, een haut à droite, le bouton
n de retour au
u menu principal Encore en haut àà droite, se trouve le bouto
on pour quittter le CMS n’im
mporte quelle
e interface san
ns problème. . . Vous pouvvez le faire dee Ensuite, sous cettte ligne bleu
ue, à droite, sse trouve un sous‐menu, q
qui contient q
quelques lien
ns que l’on uve aussi dan
ns le menu principal. Ce so
ous‐menu varie en trou
foncction du mod
dule en cours.. Au‐dessus du taableau de do
onnées, se trouve le titre du dule. En dessous du titre, à droite, se trrouvent des o
outils mod
de tri et de reccherche. Nottez que ce n’est n
pas tous les 3 Votre paartenaire d’affairres privilégié Guide de l’utilisateur – CMS mod
dules qui on
nt ces outils. Pour le filtrre de tri, il suffit de séleectionner un
ne valeur dan
ns la liste déro
oulante pourr que le tableau n’affiche plus que des d lignes ayyant cette prropriété. Dan
ns l’image d’exxemple, on vo
oit le filtre dee tri avec la co
olonne « Typee » du tableau
u. Pou
ur ce qui est de la recherrche , il suffit s
d’entreer une série de caractères et de cliqu
uer sur les jum
melles. La recherche sera lancée dans la ou les colonnes spéciffiées devant la zone de teexte de la rech
herche. Dans l’image d’exeemple, la rech
herche se fera dans la colo
onne « Titre »
» (Titre :). Le tableau t
prése
ente chacunee des lignes d’enregistrem
ment conten
nues dans la base de don
nnées. Les colo
onnes avec des titres reprrésentent les champs du fformulaire, m
mais ce ne sont pas nécessairement tous les champs du formulairre que l’on vo
oit dans le tab
bleau. Avec lee filtre, la rech
herche et la p
pagination dan
ns le bas du taableau, vous p
pouvez naviguer dans celu
ui‐ci et trouveer l’enregistreement pour leequel vous vou
ulez faire dess modifications. Les colon
nnes peuventt être de diffférents types : texte, datte, image, « Oui/Non », « M
Mémo ». Pourr les « Oui/No
on » qui sont des cases à ccocher dans lee formulaire, le « Oui » on » (décocheer), par . Ce C sont les mêmes m
icônes pour les (coccher) est représenté par et le « No
colo
onnes « Mém
mo », qui sontt des éditeurss de texte HTM
ML; le crocheet indique qu’’on a entré du contenu dan
ns l’éditeur. Pou
ur modifier un enregistrem
ment (une liggne), il suffit d
de cliquer sur le crayon au bout àà droite de la ligne. Cela mènera m
au formulaire de modification
n rempli avecc les donnéees de l’enreggistrement ur plus de déttails sur le forrmulaire de m
modification, vvoir la section
n 1.3). séleectionné (pou
Pou
ur supprimer un enregistrrement (une ligne), il sufffit de cliquerr sur le aau bout à drroite de la ligne désirée et d
de confirmer.. Notez que cet enregistrement ne pourra plus être récupéré. Pou
ur ajouter un enregistrem
ment, il suffit de cliquer sur Ajoute
er en bas à gaauche du tab
bleau. Cela vou
us mènera au
u formulaire d’ajout, qui sera vide et prêt à être rempli (pourr plus de déttails sur le form
mulaire d’ajou
ut, voir la secction 1.3). Pou
ur changer l’o
ordre de tri des d enregistrrements, cliquez sur Ordre en bass à gauche du tableau. Celaa mènera à un tableau aveec les titres d
des enregistreements. Il sufffit de les ord
donner selon vos désirs en lles sélectionn
nant avec la souris et en les déplaçantt avec les flèches vertes, vers le haut ou le bas. En
Unee fois vos manipulations complétées,, enregistrer avec nregistrer en bas. Notez que vous pou
uvez sélection
nner plusieurs lignes à la ffois et les déplacer en blo
oc. Vous pouvvez égalemen
nt annuler avec Annule
er pour reven
nir en arrière.. Lorssqu’il y a plussieurs enregisstrements dan
ns le tableau, vous aurez p
peut‐être besoin de la pagination pou
ur pouvoir tou
us les consulter. La paginattion se trouvee dans le pied
d de page du tableau. La p
partie de gaucche indique lee nombre d’eenregistremen
nts visibles su
ur le total. La partie de dro
oite 4 Votre paartenaire d’affairres privilégié Guide de l’utilisateur – CMS permet de naviguer entre les différentes pages du tableau. 1.3
Modules – formulaire
Voici un exemple de formulaire en mode modification. Dans ce cas, c’est un module de nouvelles. Notez que le formulaire d’ajout est identique, mais vide d’information. Dans le formulaire, on trouve plusieurs types de champs. Voici quelques précisions pour quelques‐uns d’entre eux. 5 Votre partenaire d’affaires privilégié Guide de l’utilisateur – CMS Le champ c
Date est accompagné d’un calendrier de séélection. Vou
us pouvez ain
nsi sélectionner la date vou
ulue dans le calendrier c
nt écrire man
nuellement laa date, mais il est très . Vous pouvvez égalemen
imp
portant de le ffaire dans le b
bon format, ssoit année‐mo
ois‐jour (ex. : 2011‐06‐28). Pou
ur les champss Photo et Fiichier, vous aurez a
une zone de texte avec a
un boutton Parcourirr... Il vous sufffit de cliquer sur ce bouto
on; la fenêtre qui apparaîtrra vous perm
mettra de parccourir votre o
ordinateur pou
ur sélectionne
er l’image ou le fichier quee vous désirezz lier à cet en
nregistrementt. Si vous êtess en mode mod
dification et q
qu’il y avait d
déjà une imagge ou un fich
hier d’inséré, alors vous au
urez la possib
bilité de le retirer avec la case à cocherr Effacer l’image (ou le fichier). Vous avez également la possib
bilité de le rem
mplacer avec le bouton Parrcourir… Pou
ur les champss d’édition dee texte HTML, un outil trrès complet et e simple d’u
utilisation vou
us permet touttes les possib
bilités d’ajoutt et de modiffication des contenus Web
b. Pour plus d
de détails surr cet outil, consultez la section 2. Unee fois vos modifications ou
u ajouts comp
plétés, enregistrez avec également annuler avec 1.4
Enregistre
er en bas. Vous pouvez Annuler pou
ur revenir au ttableau des eenregistremen
nts. Nav
vigation dans le site Web
W en mode édition
Aveec le lien du m
menu principal (ou des so
ous‐menus) Modification des pagges, vous sereez redirigé verss le site Web en mode mo
odification. Vous pouvez aalors modifierr le contenu d
de toutes voss pages en navviguant normaalement danss votre site W
Web. 6 Votre paartenaire d’affairres privilégié Guide de l’utilisateur – CMS En ttout temps, vvous pouvez rrevenir au CM
MS avec le bo
outon au‐d
dessus de l’éd
diteur de textte HTML. Re
etourner au m
menu princip
pal, qui est Unee fois vos modifications efffectuées, sau
uvegardez‐less avec le boutton directement en bas dee l’éditeur de ttexte HTML, Enregisttrer. Si vous n
n’enregistrez pas, aucune modification
n ne sera sau
uvegardée. Don
nc, pour annu
uler les modifications d’une page non saauvegardée, cchangez simp
plement de paage. Vou
us pouvez visualiser vos m
modifications sans qu’elless ne soient saauvegardées avec le bouton du bas Prévisionne
er. Une autrre fenêtre s’’ouvrira sur la page en cours, avec les modificaations qui vien
nnent d’être ffaites en mod
de normal (non édition). C
Cela permet d
de voir le résultat avec less styles du site Web appliq
qués. Si votrre navigateurr vous demaande une confirmation pour p
ouvrir laa fenêtre, séleectionnez Tou
ujours autorisser pour ce siite. 2
Utilisation de l’éd
diteur de texte HTML
L
2.1
Fo
onctionnalittés générale
es
Vo
oici un aperçu
u des boutonss des fonction
nnalités de l’ééditeur de texxte HTML. Daans la présentte section, no
ous décrironss certaines de d ses fonctio
onnalités les plus utiles. Notez que les l autres so
ont toutes fonctionnelles; nous vous in
nvitons à placer votre currseur sur le bouton b
ou à utiliser l’aidee avvoir de l’inform
mation sur cees boutons et les essayer.
pour 2.1.1
Plein écran
n
Il est beauco
oup plus facile et agréablle de travailleer dans l’éditteur de textee HTML en mode m
plein écran. Utilisez le bouton
n (ou la touche t
F12) pour passer en mode pleein écran. Un
ne fois en mode plein écran, réalisez vos traavaux. Pour revenir à l’’interface staandard (pour pouvoir sauvegarderr, par exemplee), cliquez de nouveau surr le bouton 2.1.2
(ou appuyeez sur F12). Copier-coller
une opération que l’on La fonction ccopier‐coller d’un documeent Microsoftt Word, par eexemple, est u
a souvent à faire pour laa publication en ligne d’in
nformation. Il faut savoir que l’éditeur de texte on semblable à un docum
ment Word, mais m génère en fait du HTML présente l’informaation de faço
ode permettant d’afficher du texte dan
ns les navigatteurs internet. Lorsque code HTML, qui est le co
d’un documeent de type W
Word ou d’unee page HTML de n’importee quel site l’on fait un ccopier‐coller d
7 Votre paartenaire d’affairres privilégié Guide de l’utilisateur – CMS Web, des balises (tags) de code HTML seront également copiées. Cela permet d’avoir les mêmes styles de police d’écriture. Par contre, dans notre outil, pour l’uniformité du site Web, vous n’avez pas à vous soucier de la mise en forme du texte. Un style par défaut sera appliqué à tous les contenus. Donc, ces balises de stylisation sont indésirables et peuvent nuire à l’affichage (la page pourrait simplement ne pas apparaître). Pour éviter cela, faites toujours le copier‐coller avec le bouton Coller du texte simple. Il vous suffit de copier d’abord le contenu désiré de n’importe quel document, puis de revenir au CMS, de placer le curseur dans l’éditeur de texte à l’endroit désiré, puis de cliquer sur le bouton . Par la suite, vérifiez la mise en page : il est possible que des sauts de ligne non désirés aient apparu. Supprimez‐les tout simplement et ajoutez de nouveau les gras et italiques désirés. Travailler en mode plein écran vous facilitera la tâche. 2.1.3
Nettoyage du code
Tel qu’expliqué dans la section « 2.1.2 Copier‐coller », il se peut qu’à la suite d’un copier‐coller mal réalisé ou sans le bouton Coller du texte simple, vous vous retrouviez avec des balises de stylisation indésirables. Vous pourrez alors utiliser le bouton Nettoyer le code et ainsi supprimer toutes les balises HTML. Attention, car cette opération s’appliquera à toute la page et non seulement à vos derniers copier‐coller. Vous risquez donc d’éliminer les mises en page réalisées précédemment avec l’éditeur. 2.1.4
Clic droit (menu contextuel)
Dans l’éditeur, vous pouvez utiliser un clic droit sur tous les objets pour modifier leurs propriétés et leur appliquer des styles particuliers, que ce soit une image, une vidéo, du texte, etc. Le menu vous présente des raccourcis des fonctionnalités de l’éditeur, mais également un bouton Propriétés pour aller plus loin dans les modifications de l’objet sélectionné. Vous pouvez aussi faire un clic gauche sur les balises HTML présentées dans le bas de l’éditeur (ex. : Table). Voyez la section 2.8 sur les styles pour plus d’information. 2.1.5
Mode HTML
Vous avez en tout temps la possibilité de consulter le code HTML de vos contenus avec le bouton HTML dans le bas de l’éditeur. Il suffit de cliquer sur Normal par la suite pour revenir en mode design. 2.1.6
Aide
Avec le bouton Aide, vous trouverez une brève description des boutons de l’éditeur de texte. Notez que les descriptions sont disponibles en anglais seulement et que les boutons ne présentent pas tous une description. 8 Votre partenaire d’affaires privilégié Guide de l’utilisateur – CMS 2.2
Texte et mise en page
Tout d’abord, il faut savoir que, dans notre outil, pour l’uniformité du site Web, vous n’avez pas à vous soucier de la mise en forme du texte. Un style par défaut est appliqué à tous les contenus. Vous pouvez quand même styliser vos affichages à votre guise; le site vous appartient, après tout. D’ailleurs, nous vous recommandons d’utiliser le Gras, l’Italique et le Souligné comme il vous plaît, afin de mettre en évidence des sous‐titres ou de mettre l’accent sur certains éléments. Ces fonctionnalités s’utilisent exactement comme dans n’importe quel éditeur de texte standard (voir l’image ci‐dessous). Toujours sur la deuxième ligne de boutons de l’éditeur de texte HTML (ci‐dessus), vous trouverez une panoplie de fonctionnalités que l’on trouve également dans tout éditeur de texte. Utilisez‐les à votre guise pour créer votre mise en page, que ce soit pour modifier les couleurs, l’alignement, les listes à puces, les retraits, les exposants, les majuscules, etc. Le bouton de la gomme à effacer vous aidera à supprimer ces mises en page, le cas échéant : sélectionnez d’abord votre texte, puis cliquez sur la gomme à effacer. La dernière ligne de boutons de l’éditeur de texte HTML (voir l’image ci‐dessus) contient des listes déroulantes et vous permettra également de modifier la mise en page, en changeant la police et la taille du texte. N’oubliez pas que la police est appliquée par défaut sur tout le site Web. Si vous la modifiez, cela enlèvera l’uniformité du site, et le résultat sera peu professionnel. La liste déroulante avec le libellé Paragraphe vous permettra d’appliquer des balises HTML prédéfinies telles que h1, h2, etc. Cette fonction peut être utile pour créer des sous‐titres avec En‐
tête 1, ce qui créera une balise h1, par exemple. 2.3
Liens hypertextes
Pour créer un lien hypertexte, sélectionnez le texte désiré, puis cliquez sur le bouton Insérer un lien. Ce bouton se trouve sur la troisième ligne de boutons, servant à l’insertion d’objets, dont les liens hypertextes. Une fois la fenêtre apparue, entrez dans le champ URL le lien hypertexte vers lequel vous voulez diriger l’utilisateur. Vous pouvez créer 9 Votre partenaire d’affaires privilégié Guide de l’utilisateur – CMS toute sorte de liens, que ce soit mailto pour les courriels ou http:// pour les pages Web; la liste déroulante Type vous aidera à le spécifier. Notez qu’elle sera sélectionnée automatiquement selon l’entrée dans le champ URL. IMPORTANT : Il faut préfixer le domaine par http:// dans le champ URL, lorsque vous créez des liens vers un site Web externe au vôtre. Dans ce cas, utilisez la liste déroulante Cible en choisissant Nouvelle fenêtre, cela ouvrira une nouvelle fenêtre du navigateur Web et ainsi les utilisateurs demeureront tout de même sur votre site Web. Si vous faites un lien à l’interne sur votre site Web, pour pouvez simplement indiquer la page à partir de la racine du domaine de vote site Web (la barre oblique indique la racine, soit www.votredomaine.com; ex. : /?page=2 ou /nouvelle.aspx). Dans ce cas, vous n’avez pas à spécifier la cible, puisque vous voulez demeurer dans la même fenêtre. Pour tester vos liens avant la sauvegarde, cliquez dans le bas de l’éditeur sur Prévisionner, puis cliquez sur le lien; vous verrez alors le résultat. Cliquez ensuite sur Normal dans le bas de l’éditeur pour revenir en mode modification. Pour modifier un lien, placez votre curseur sur le texte du lien (il n’est pas nécessaire de le sélectionner), puis cliquez sur Insérer un lien. Pour retirer un lien, placez de nouveau votre curseur, puis cliquez sur la chaîne brisée Enlever un lien. Notez que, dans la fenêtre d’insertion de liens hypertextes, une multitude d’options de configuration vous permettra de personnaliser ce lien, mais rien n’est obligatoire ou nécessaire pour le bon fonctionnement d’un lien. 2.4
Photos
Dans la présente section, vous apprendrez à manipuler vos photos pour les insérer dans vos contenus. Ci‐après, vous verrez l’interface d’insertion de photos présentée après un clic sur le bouton Insérer une image. Le bouton Insérer une image (Galerie) vous permettra quant à lui de visualiser et d’insérer rapidement les images, mais sans la possibilité de les téléverser (upload), de les redimensionner et de les modifier. Les sous‐sections suivantes présentent plus en détail l’interface d’insertion d’images. 10 Votre partenaire d’affaires privilégié Guide de l’utilisateur – CMS 2.4.1
Téléverser (upload)
Pour envoyer une image de votre ordinateur vers le serveur Web et ainsi pouvoir l’insérer dans vos contenus, utilisez le bouton Téléchargement de la partie du bas à droite (voir l’image ci‐
dessus). Une fenêtre d’exploration de votre poste s’ouvrira, et vous pourrez alors sélectionner l’image désirée. Vos photos doivent avoir une taille maximale de 1,17 Mo (soit 1200 Ko). Pour les redimensionner sur votre poste, nous vous conseillons d’utiliser le logiciel Microsoft Office Picture Manager. Pour l’ouvrir, faite un clic droit sur votre photo dans Windows, faites un clic gauche sur Ouvrir avec et sélectionnez Microsoft Office Picture Manager. Dans le menu du haut du logiciel, cliquez sur Image, puis sélectionnez Redimensionner... Diminuez le pourcentage, puis faites OK jusqu’à ce que l’image soit de taille inférieure à 1200 Ko. Lorsque vous sélectionnez une image de bonne dimension dans l’explorateur de votre poste, cliquez sur Ouvrir et l’image sera envoyée sur votre site Web. Le téléversement peut prendre 11 Votre partenaire d’affaires privilégié Guide de l’utilisateur – CMS quelques secondes ou minutes, selon la vitesse de votre connexion et la taille de l’image. Ensuite, l’image apparaît dans la colonne de gauche avec son nom de fichier. 2.4.2
Redimensionner
Dans la section 2.4.1 sur le téléversement, il a été expliqué que vous pouvez redimensionner vos photos sur votre poste pour qu’elles ne soient pas trop volumineuses à envoyer. Une fois les photos envoyées, elles auront une taille maximale de 750 px de largeur, ce qui est une grosse photo pour une page Web. Vous avez alors le choix entre deux types de redimension : 1. Vous pouvez redimensionner l’image au niveau du HTML seulement, ainsi elle apparaîtra selon vos dimensions désirées. Par contre, il faut faire attention, car l’image sera envoyée au visiteur de votre site Web selon sa dimension originale sur le serveur. Donc, une photo de 1200 Ko peut prendre quelques secondes à s’afficher sur un site Web même si elle s’affiche en très petit. Pour réaliser ce type de redimension, utilisez, dans la section du bas à gauche, les champs Largeur et Hauteur, qui représentent la dimension de l’image en pixels. Ce mode est utile dans le cas d’une petite redimension, qui aura peu d’incidence sur la taille de l’image. 2. Recommandé : Pour une redimension complète de l’image et de sa taille, utilisez le bouton en haut à droite Vignette auto. Cela vous permettra de créer une nouvelle image avec votre taille spécifiée. La nouvelle image apparaîtra dans la colonne de gauche avec le même nom que l’ancienne, mais avec le préfixe t__. Ainsi, l’image sera plus petite à l’affichage, mais également à l’envoi au visiteur de votre site, ce qui améliorera grandement la vitesse de navigation sur votre site Web. 2.4.3
Insérer et modifier
Pour insérer une image, il suffit simplement de la sélectionner dans la colonne de gauche; une prévisualisation apparaîtra alors à droite. Puis, cliquez sur Insérer, en bas à droite. Avant l’insertion, vous pouvez configurer l’insertion de l’image, par exemple, en lui attribuant un Alignement. Cela placera la photo dans le corps d’un texte selon l’alignement indiqué, soit à gauche, à droite ou au centre. Avec cet alignement, vous pouvez spécifier le nombre de pixels d’espacement entre le texte et l’image avec les champs Espacement, soit Horizontal et Vertical (ex. : 10). Vous pouvez aussi ajouter un encadré autour de votre photo avec la propriété Taille des bordures, qui indique la taille en pixels, et Border color, qui indique la couleur. Par défaut, la taille doit être à 0. Vous pouvez également indiquer le Texte alternatif et la Description de l’image, qui apparaîtront si le navigateur ne peut afficher l’image ou lorsque l’utilisateur placera son curseur sur l’image. Cela aide également à l’indexation par les moteurs de recherche (ex. : Photo du chalet Gaspésie). 12 Votre partenaire d’affaires privilégié Guide de l’utilisateur – CMS De plus, il est possible de modifier vos photos, un peu comme dans Paint de Windows, directement dans cette interface avec le bouton en haut à droite Image Editor. Finalement, vous pouvez toujours revenir à cette interface après l’insertion en faisant un clic droit sur l’image puis en sélectionnant Propriétés (voir « 2.1.4 Clic droit (menu contextuel) »). 2.5
Fichiers téléchargeables
Vous pouvez également insérer des fichiers de type PDF, DOC, XLS, etc. dans vos contenus que le visiteur pourra télécharger. Pour cela, utilisez le bouton Insérer un fichier téléchargeable. Vous remarquerez que l’interface ressemble grandement à celle d’insertion d’images de la section « 2.4 Photos ». Encore une fois, pour envoyer vos fichiers sur le serveur, utilisez le bouton Téléchargement. Cette fois‐ci, la taille maximale des documents est de 9,77 Mo. Une fois le fichier téléchargé sur le serveur, sélectionnez le document désiré dans la colonne de gauche et utilisez le champ Titre pour indiquer le texte sur lequel il y aura le lien vers le fichier. Finalement, cliquez sur le bouton Insérer, cela insérera le lien dans le contenu où était placé le curseur. 2.6
Intégration (YouTube, Google Maps et Facebook)
Avec le bouton Embed a YouTube video, vous pouvez insérer des contenus d’intégration d’autres sites Web de type I‐frame (image intra), non seulement des vidéos YouTube, mais également des cartes Google Maps ou des boutons J’aime de Facebook. Il vous suffit de copier‐coller le code I‐frame . Voici récupéré sur le site Web de l’élément désiré dans l’interface ouverte par le bouton comment récupérer ces codes selon les trois plug‐in (modules d’extension) les plus populaires : YouTube Allez à la page de la vidéo YouTube que vous désirez intégrer dans votre page Web. Sous la vidéo, cliquez sur Partager, puis sur Intégrer, et copiez le code qui débute par <iframe. Collez‐le dans l’interface du bouton . Google Maps Dans la page de la carte Google Maps que vous désirez intégrer à votre site Web, cliquez sur la chaîne en haut à droite au‐dessus de la carte. Une petite fenêtre apparaîtra. Vous pouvez copier directement le code de la deuxième ligne qui commence par <iframe ou cliquer sur le lien Personnaliser et prévisualiser la carte intégrée. Nous vous recommandons cette dernière option, qui permet de voir le résultat final. Vous pouvez ainsi ajuster les dimensions, mais également le zoom et les styles de la carte. Collez ensuite le code dans l’interface du bouton . Facebook Allez à la page http://developers.facebook.com/docs/reference/plugins/like‐box. Entrez l’URL de votre site Facebook; ce doit être une page Facebook et non un profil personnel (ex. : http://www.facebook.com/#!/pages/Mus%C3%A9e‐Acadien‐du‐Qu%C3%A9bec/205929912758086). 13 Votre partenaire d’affaires privilégié Guide de l’utilisateur – CMS Configurez le plug‐in selon vos goûts, puis cliquez sur le bouton Get Code. Copiez ensuite le deuxième code qui débute par <iframe et collez‐le dans l’interface du bouton . Autres Vous trouverez ce genre de code I‐frame dans plusieurs sites, par exemple un plug‐in de météo sur le site Web de MétéoMédia (http://www.meteomedia.com/weather_centre/wcwxbutton). 2.7
Médias (vidéo et audio)
Comme dans le cas des images et des fichiers téléchargeables, vous pouvez insérer du contenu média tel que des vidéos (.avi, .mpeg) ou des fichiers audio (.mp3, .wma). Utilisez pour cela le bouton Média. Encore une fois, l’interface ressemble grandement à celle d’insertion d’images de la section « 2.4 Photos ». Pour envoyer vos fichiers sur le serveur, utilisez le bouton Téléchargement. Cette fois‐ci, la taille maximale des documents est de 9,77 Mo. Une fois le fichier téléchargé sur le serveur, sélectionnez‐le dans la colonne de gauche, puis cliquez sur le bouton Insérer, cela insérera le lecteur média dans le contenu où était placé le curseur. 2.8
Tableau, styles et modèles
Tableau Il est très pratique pour la mise en page de créer des tableaux. Pour ce faire, cliquez sur le bouton Insérer/Modifier un tableau, et sélectionnez les cellules voulues pour votre tableau. Vous pouvez également utiliser le lien dans la petite fenêtre ouverte par ce bouton, l’Assistant tableau, pour créer votre tableau avec plus de propriétés. Une fois le tableau inséré, vous pouvez revenir à l’interface des propriétés du tableau en faisant un clic droit lorsque le tableau est sélectionné, puis en cliquant sur Propriétés. Vous pouvez également faire un clic gauche sur la balise Table située en bas de l’éditeur de texte, si votre curseur est à l’intérieur du tableau. Comme propriétés du tableau dans les onglets Tableau et Général de l’interface, vous pouvez indiquer l’espacement entre le texte des cellules et les bordures avec le champ Cell padding. Vous pouvez également indiquer la largeur du tableau en pixels (faites attention de ne pas dépasser la zone de contenu de votre site Web). Vous pouvez aussi centrer le tableau avec l’alignement et personnaliser toutes les couleurs de fond ou de bordures du tableau. Dans l’onglet Constructeur de style, vous pouvez aller encore plus loin dans la personnalisation de votre tableau en colorant indépendamment chaque bordure, par exemple. La troisième ligne de boutons des fonctionnalités de l’éditeur de texte HTML vous permettra de manipuler facilement votre tableau. Vous pouvez par exemple créer des colonnes de texte ou des tableaux de prix. 14 Votre partenaire d’affaires privilégié Guide de l’utilisateur – CMS Styyles Po
our créer des styles avanccés sur du texxte, utilisez lee clic gauchee sur les balises en bas dee l’éditeur, telles que <p> ou <span>. Pour créer une balise spa
an (étendue) sur du textee, sélectionneez le texte n réglé. Dans le menu ouvvert par le déésiré, cliquez sur la liste dééroulante Styyle, puis sélectionnez Non
clic gauche sur la balise Spa
an dans le baas de l’éditeu
ur, utilisez Styyles ou Proprriétés pour pleinement on du texte. peersonnaliser laa présentatio
Modèles Vo
ous pouvez également é
créer des mod
dèles HTML que q vous pou
urrez facilem
ment intégrer dans vos co
ontenus par laa suite. Avec le bouton Modèles, vvous pouvez envoyer des pages HTML (.html ou .httm) que vouss aurez crééees avec votre éditeur HTM
ML préféré tel que Dreamweaver ou Frront Page. Vo
ous pourrez par p la suite insérer ces co
ontenus autaant de fois que vous le voulez. On utilise entre au
utres ce procé
édé pour créeer des exemples de tableau
ux de tarificattion préconçu
us. Po
our l’instant, cette opération n’est pass fonctionnellle en Internet Explorer 9. Nous vous cconseillons do
onc d’utiliser Mozilla Fireffox pour pro
ofiter de cette fonctionnaalité. Une pro
ochaine misee à jour la rendra possible
e en Internet EExplorer 9. 3
Quelqu
ues modules
3.1
Nou
uvelles
Avec le module m
Nouvvelles, vous pouvez ajou
uter, modifier ou supprim
mer les nouvelles qui app
paraissent surr votre site Web. W
Pour l’u
utilisation de l’interface, référez‐vous aux a sections 1.2 et 1.3 sur les modules. Dan
ns ce module, les nouvellees inactives d
demeurent daans la base dee données, m
mais ne s’afficchent plus sur le site Web. La descriptio
on courte s’affiche dans laa page de prrésentation de toutes les nouvelles, maiis pas la description détaillée. Les cham
mps Titre et D
Description co
ourte sont ob
bligatoires. L’utilisateur pou
urra voir la ve
ersion pleinee grandeur dee la photo en
n cliquant deessus dans laa page de détails de la nou
uvelle. 3.2
Alb
bum photos
s
Le module
e Album phottos permet dee gérer les ph
hotos des diffférents album
ms. Les photoss inactives dem
meurent danss la base de d
données, maiss ne s’affichent plus sur lee site Web. Lee champ Titre
e n’est pas obliigatoire. Vous pouvez insérer autant de d photos qu
ue vous le déésirez. Les ph
hotos inséréees dans ce form
mulaire seron
nt redimensio
onnées sur le serveur avan
nt d’être envo
oyées au visitteur de votre site Web, ce q
qui optimise la vitesse d’afffichage de vo
otre site Web
b. Pou
ur plus d’info
ormation sur l’utilisation
n de l’interfaace, référez‐vvous aux seections 1.2 et e 1.3 sur les m
modules. 15 Votre paartenaire d’affairres privilégié Guide de l’utilisateur – CMS 3.3
Utillisateurs
Vous avezz la possibilitéé, avec le mod
dule Utilisate
eurs, de gérerr (ajouter, mo
odifier ou sup
pprimer) les ccomptes d’uttilisateurs qui peuvent se cconnecter au CMS. Vou
us pouvez entrer le nom complet c
de la personne, son nom d’utilisateur et son s mot de passe p
(ces deu
ux derniers so
ont utilisés pour p
se conneecter dans l’iinterface de connexion; voir v la section
n 1). Vous pou
uvez également paramétreer les permisssions de chacun des différeents utilisateu
urs. Un utilisaateur peut avoir seulement accès à l’albu
um photos, par exemple.
En mode modifiication, le mo
ot de passe n’apparaît paas dans le ch
hamp, ne le remplissez pas si vous désirez conserve
er le même. Entrez le nouvveau et sauveegardez‐le pou
ur le changerr. Atte
ention : Votre
e nom d’utilissateur et votrre mot de passse ne doiven
nt pas conten
nir d’apostrop
phes ou de caraactères spéciaaux. 3.4
Exe
emples de modules
m
po
ossibles
Spectacles, Tâches, Projetts de construcction, Fichiers, Visuel, A
Avis travaux een cours, Bières (ou produits), Pages,, etc. pendent de vo
otre réalité prrofessionnellee et de vos beesoins. Contaactez‐nous po
our plus Les modules dép
nformation au
u www.solutio
oninfomedia..com. d’in
16 Votre paartenaire d’affairres privilégié