Guide d`utilisation de la plateforme de blog / site Eklablog

Guide d'utilisation
de la plateforme de blog / site Eklablog (mai 2009)
Eklablog vous permet de créer gratuitement et sans publicités un blog / site*,
hébergement compris.
Le service proposé par Eklablog repose sur la technologie Ajax. Une fois votre blog
créé, vous pouvez l'administrer directement depuis celui-ci, vous n'avez pas à passer par un
panneau d'administration distinct. Par exemple, pour modifier un article déjà en ligne, il suffit de
cliquer sur l'icône d'édition en haut à droite de l'article, pour faire apparaître une fenêtre de style
traitement de texte.
*Eklablog vous permet de créer un blog, ou un site, ou les deux (vous pouvez en effet choisir une solution
mixte : avec des pages statiques comme pour un site classique, et avec un blog composé d'articles classés
par catégories et apparaissant dans l'ordre chronologique).
Avant de créer votre propre site / blog avec Eklablog, rendez-vous sur son site de
démonstration : vous pourrez alors vous faire la main en gérant un site / blog temporaire et tester
ainsi le service fourni par Eklablog dans toutes ses fonctionnalités :
http://demo.eklablog.com/
Imaginons le scénario suivant : vous souhaitez créer le site / blog de l'Ecole maternelle
et élémentaire Paul Ochon. Vous désirez mettre en place une partie “site” composée de pages
statiques regroupées dans un menu (une page pour présenter le personnel de l'école, une autre
pour fournir des renseignements administratifs, une autre pour présenter les projets pédagogique
et éducatif de votre établissement ...), ainsi qu'une partie “blog” regroupant les articles classés par
catégories (celles-ci correspondant aux classes présentes dans votre école).
L'école Paul Ochon est de taille modeste, elle compte en effet trois classes (une pour chaque cycle
de l'école primaire). Chaque classe sera responsable de la rédaction des articles correspondant à
sa catégorie.
Procédons par ordre : avant de procéder à la “décoration” de votre site, il faut définir son
architecture (que vais-je mettre dans mon site, quelles fonctionnalités va-t-il proposer à ses
visiteurs ... ?). Il faut également effectuer quelques paramétrages qui aideront à l'identification de
votre site et à son référencement. C'est plus que nécessaire pour lui faire une petite place sur la
Toile.
Voici une proposition de “progression” pour mettre en place votre site :
➔ paramétrages ;
➔ définition du “fond” ;
➔ définition de la “forme”.
Procédons donc tout d'abord aux paramétrages. Vous avez tapé l'adresse suivante
dans votre navigateur : http://demo.eklablog.com/
1
Vous êtes désormais sur la page d'accueil du site de démonstration d'Eklablog :
Le site est composé des éléments suivants :
● l'entête (avec le nom du site et un slogan),
● le / les bloc(s) modules (ici à gauche, un deuxième bloc pouvant apparaître à droite),
● la zone articles / pages.
Une barre d'outil en haut de la page est présente en permanence :
Positionnez le pointeur de votre souris sur “Gestion”, un menu déroulant s'affiche, descendez le
pointeur de souris sur “Configuration” :
Le panneau de configuration s'affiche :
2
Renseignez les éléments suivants :
➔
➔
➔
Titre du blog : Ecole Paul Ochon
Slogan : Ecole maternelle et élémentaire - 123, rue Tabaga 76541 OUTUVEUX
Description* : Bienvenue sur le site de l'école Paul Ochon !
Mots clés* : école, Paul Ochon, maternelle, élémentaire
➔
➔ * Ces champs serviront aux moteurs de recherche pour référencer votre site.
➔ Page d'accueil : elle apparaît au visiteur qui arrive sur votre site,
➔
elle est choisie parmi les
pages créées (pages statiques ou articles de blogs) ; videz le champ pour l'instant, nous
créerons une page d'accueil de votre site ultérieurement.
Mot de passe : renseignez un mot de passe si vous souhaitez limiter l'accès à votre site
aux seuls détenteurs de ce mot de passe. Sinon, laissez ce champ vide.
Cliquez sur “Enregistrer” puis sur la croix noire en haut à droite de la fenêtre de configuration.
Votre site est paramétré instantanément :
Votre site compte déjà plusieurs modules placés dans la colonne de gauche : “Présentation”,
“Calendrier”, “Shoutbox”, “Liens”, “Statistiques” (compteurs de visites). Vous pouvez garder ces
modules, les éliminer, en ajouter d'autres. Pour plus de clarté, nous n'allons garder que les
modules “Liens” et “Statistiques”. Nous allons ensuite créer un menu dans lequel figureront les
3
pages statiques de votre site (accueil, renseignements administratifs, projets ...).
Pour supprimer le module “Présentation”, positionnez le pointeur de votre souris en haut à droite
du module, un crayon et un sens interdit apparaissent, cliquez sur le sens interdit :
L'info-bulle “Supprimer” s'est affichée ; cette fenêtre de confirmation apparaît, cliquez sur “OK” :
Le module “Présentation” a disparu. Procédez de même pour supprimer les modules “Calendrier”
et “Shoutbox”.
Créons désormais le menu des pages statiques : positionnez le pointeur de la souris sur “Menus”,
faites-le descendre sur “Ajouter un module” puis cliquez :
Plusieurs propositions s'affichent, sélectionnez d'un clic le module “Liens vers les rubriques” :
4
Remplacez le titre de module proposé (“Rubriques”) par “Menu”, cliquez sur “OK” :
Le module “Menu” apparaît en bas de la colonne de gauche, sous le module “Statistiques” :
Un peu de ménage s'impose : le lien "Accueil" qu'il contient ne mène pas vers la page d'accueil de
votre site, mais vers une rubrique d'articles intitulée elle aussi "Accueil" (Eklablog est avant tout
une plate-forme de blogs). Nous allons supprimer ce lien qui porte à confusion, puis créer une
véritable page d'accueil accessible depuis le menu, page d'accueil à laquelle accèderont les
visiteurs quand il taperont l'adresse de votre site dans leur navigateur.
Placez le pointeur de votre souris en haut à droite du module "Menu", le petit crayon et le sens
interdit d'affichent, cliquez sur le petit crayon pour éditer le menu :
Cliquez sur le chaînon placé derrière le petit crayon, devant le lien "Accueil" :
5
Cliquez sur "Supprimer" puis sur "Enregistrer", le lien "Accueil" a disparu :
Créons à présent une véritable page d'accueil pour votre site. Pour cela, positionnez le pointeur de
votre souris sur "Rubriques" dans la barre d'outils. Le menu déroulant apparaît, cliquez sur "Ajouter
une rubrique" :
Choississez alors de créer une "Page simple" :
Nommez-la "Accueil" puis cliquez sur "OK" ; une fenêtre de type traitement de texte s'ouvre,
utilisez-la pour compléter votre page d'accueil :
6
Pour ajouter une photo de votre école par exemple, cliquez sur cette icône :
Vous pouvez alors sélectionner votre photo :
➔ depuis votre disque dur, une clé usb ... ;
➔ ou même insérer une photo hébergée sur un autre site.
N'oubliez pas de cliquer sur "Enregistrer" pour que les modifications soient effectives. Ce message
apparaît, en effet la page "Accueil" n'est pas encore visible sur votre site :
Suivons ces indications. Cliquez sur le petit crayon du module "Menu", puis sur "Ajouter un lien" ;
ouvrez le menu déroulant " - Choisissez le rubrique - ", et sélectionnez "Accueil" sous "Pages
simples" (surtout pas sous "Rubriques d'articles" !) :
Cliquez sur "Enregistrer le lien" puis sur "Enregistrer". La page "Accueil" apparaît désormais dans
7
le module "Menu", cliquez sur "Accueil" pour accéder à l'accueil de votre site.
Ce module "Menu" se trouve dans le bas de votre site, il serait mieux placé sous l'entête. Il faut
donc modifier l'ordre des modules dans la colonne de gauche. Dans la barre d'outils, cliquez sur
"Menu" puis sur "Gérer les menus", pour obtenir ceci :
Cette fenêtre schématise la colonne de gauche de votre site. Par un glisser-déplacer, mettez le
module "Menu" sur le module "Liens". Vous obtenez cet ordre : "Menu", "Liens", "Statistique".
Pensez-à enregistrer. Votre menu est maintenant en haut de la colonne de gauche. Il faut
désormais que cette page d'accueil apparaissent quand l'adresse de votre site est tapée dans un
navigateur. Dans la barre d'outils cliquez sur "Gestion" puis "Configuration" :
Ouvrez le menu déroulant sous "Page d'accueil", cliquez sur "Accueil" sous "Pages simples",
pensez à enregistrer.
Tout comme vous venez de créer une page "Accueil" dans le menu, amusez-vous en créant par
exemples une page "Renseignements administratifs", une page "Visite guidée" ...
Le nombre de pages statiques qu'il est possible de créer est illimité (attention cependant aux
menus surchargés). Il est aussi possible de créer des liens entre ces pages, en copiant l''url d'une
page et en lui donnant le statut de lien dans une autre.
8
Consacrons-nous à présent à la partie "Blog" de votre site. Un blog est un ensemble d'articles mis
en ligne au jour le jour, articles apparaissant du plus rescent au plus ancien. Ces articles sont
classés par catégories. Ce classement permet de les retrouver plus rapidement, de n'en lire qu'une
partie ... Intitulons notre blog "Vie de l'école", trois catégories le composeront : "Cycle 1", "Cycle 2"
et "Cycle 3". Ce blog constitue un module qui doit donc apparaître dans la colonne de gauche.
Procédure : "Barre d'outils" – "Menus" – "Ajouter un module" – "Liens vers rubriques".
Remplacez le titre de module proposé ("Rubriques") par "Vie de l'école", cliquez sur "OK" :
Ce module "Vie de l'école" apparaît sous le module "Statistiques". Placez-le sous le module
"Menu" par glisser-déplacer (Procédure : "Barre d'outils" – "Menus" – "Gérer les menus").
Suivez cette procédure pour créer les rubriques du blog "Vie de l'école" :
Procédure : "Rubriques" – "Ajouter une rubrique" – "Rubrique d'articles"
Nommez la rubrique d'articles "Cycle 1", cliquez sur "OK" :
Le message qui était apparu lors de la création de la page d'accueil apparaît de nouveau :
Répétons la procédure de toute à l'heure en l'appliquant au module "Vie de l'école" ; pointez la
souris sur le crayon en haut à droite :
9
Cliquez sur "Ajouter un lien" puis sélectionnez la rubrique d'articles "Cycle 1" :
Cliquez sur "Enregister le lien" puis sur "Enregistrer" : la rubrique d'articles "Cycle 1" apparaît à
présent dans le module vie de l'école, et sous l'entête du site s'affiche ceci :
Prenez votre plume et lancez-vous dans la rédaction du premier article de votre blog !
Commencez par donner un titre à votre article, cliquez sur "OK" :
Rédiger votre article grâce à la fenêtre-traitement de texte (identique à celle utilisée pour rédiger
une page) : le nombre de photos et de vidéos est illimité, les fichiers ne devant pas dépasser 10
mo. Cliquez sur "Publier" pour mettre en ligne votre article. Voilà le résultat :
10
Votre site propose pour l'instant une seule rubrique d'articles (la rubrique "Cycle 1"). Procédez
comme tout à l'heure pour créer les rubriques "Cycle 2" et "Cycle 3".
(Procédure : "Rubriques" – "Ajouter une rubrique" – "Rubrique d'articles".)
Consacrons nous à présent au module "Liens". Il comporte déjà deux liens, pré-intallés par
Eklablog. Nous allons les retirer (l'un mène vers Eklablog, l'autre vers un site de jeux en ligne).
Cliquez sur le crayon en haut à droite du module, vous obtenez cette fenêtre :
Vous pouvez renommer le module en changeant son titre si vous le désirez. Pour supprimer les
deux liens, cliquez sur le crayon situé à leur gauche, puis sur "Supprimer" :
11
Le lien a disparu. Pour créer un lien, il faut cliquer sur "Ajouter un lien" dans la fenêtre d'édition du
module, renseigner les champs "Titre" et "Adresse" ( http:// ... ), puis cliquer sur "Enregistrer le
lien".
Faisons un point : vous avez découvert quelques modules proposés par Eklablog ("Statistiques",
"Liens", menu classique pour pages statiques, menu de catégories d'articles de blog), il en existe
beaucoup d'autres. Pour découvrir ces modules, suivez cette procédure :
Procédure : "Modules" – "Ajouter un module".
Cette fenêtre apparaît :
En positionnant le pointeur de votre souris sur les points d'interrogation placés à la droite du nom
du module, vous faites apparaître une info-bulles décrivant le dit module. Installons par exemple le
module "Recherche" : pour cela, cliquez dessus, cette fenêtre s'ouvre alors :
Vous constatez qu'il est possible de renommer le module avec un titre de son choix. Cliquez sur
"OK", le module s'installe immédiatement dans la colonne de gauche de votre site.
Il ne sera pas présenté ici tous les modules disponibles, à vous de les tester, puis de faire votre
choix, certains sont sûrement inadaptés pour un site d'école primaire.
L'architecture de votre site est désormais en place, bravo ! Il est temps de s'occuper de son "look".
12
Ce "look", on pourrait également l'appeler "thème" ou "charte graphique". Le site de démonstration
d'Eklablog sur lequel vous vous entraînez est proposé avec le thème "Eclaircie". Eklablog propose
plusieurs thèmes, découvrons-les.
Procédure : "Gestion" – "Thème" – "Choisir un thème".
(Nous apprendrons plus loin à modifier un thème.)
Une fenêtre avec menu déroulant s'affiche, elle présente les différents thèmes disponibles. Faitesles défiler avec l'ascenseur, cliquez par exemple sur le thème "Tree" puis sur "Enregistrer".
13
Votre site vient de changer de thème, voilà le résultat :
Eklablog offre un choix limité de thèmes, comparativement avec d'autres plate-formes de blogs. En
revanche, ces thèmes sont facilement et amplement paramétrables. On peut même les modifier
presque intégralement. Prenons comme point de départ le thème "Soleil gris" :
Procédure : "Gestion" – "Thème" – "Choisir un thème" – "Soleil gris" – "Enregistrer". Votre site a
encore changé de peau, avec un thème épuré sur lequel tous les réglages sont possibles :
1
3
Fond de la
fenêtre
5
2
4
Plusieurs éléments composent les thèmes d'Eklablog, ces éléments sont communs à tous ces
thèmes. Les modules sont ici placés dans une unique colonne, à gauche du site. Il est possible de
14
créer une deuxième colonne à droite pour alléger la colonne initiale. Créer une deuxième colonne
implique la réduction de la taille des pages du site.
Faisons le tour du propriétaire :
➔
➔
➔
➔
➔
Elément 1 : fond de la fenêtre (on peut le modifier en changeant le "papier-peint*" ou en
changeant de couleur, on peut aussi le faire disparaître en augmentant la largeur des
colonnes et des pages).
Elément 2 : fond de la page (il se trouve derrière tous les éléments du site, comme le fond
de la fenêtre on peut le modifier en changeant de papier-peint ou de couleur).
Elément 3 : en-tête (là se trouvent le titre et le slogan du site ; une photo peut faire office de
fond de l'en-tête, il est possible d'effacer le titre pour le remplacer par une bannière ...).
Elément 4 : pied de page (il affiche le nom du site et un lien vers l'hébergeur, on peut le
modifier de la même façon que l'entête).
Elément 5 : menu 1 (c'est la colonne qui contient les modules du site – si le site comprend
une deuxième colonne, celle-ci contituera l'élément 6, soit le menu 2 ; ce menu peut varier
en largeur, en couleur ...).
*Papier-peint : c'est une image dont le motif se répète pour couvrir tout ou partie d'un élement d'un
site, ou l'intégralité de ce site. Exemple de papier peint :
Voici deux sites proposant un large choix de papier-peints :
GRSites – Absolut Background
Remarque : pour intégrer un papier-peint à votre site, il faut d'abord l'enregistrer sur votre disque
dur, une clé usb, ...
Vous pourrez modifier votre thème élément par élément, ou de façon globale : en effet, certains
paramètres peuvent s'appliquer à plusieurs élements (par exemple le choix des polices de
caractères). L'aspect graphique d'un site compte autant que son contenu : il ne doit pas fatiguer ou
agresser les yeux, le site doit être lisible, faire preuve de personnalité et d'originalité. Si l'on s'y sent
bien, on aura plaisir à le visiter régulièrement.
Pour modifier le thème installé sur votre site, suivez cette procédure :
Procédure : "Gestion" – "Thème" – "Modifier le thème". Vous ouvrez ainsi le panneau de
"Personnalisation du thème" :
15
Commençons par modifier le papier-peint du site.
Procédure : "Format du blog" – "Fond". Ceci s'affiche :
Si vous souhaitez un simple fond de couleur, décochez l'option "Image", puis cliquez sur la pipette
pour ouvrir la palette de couleur et faire votre choix. Si vous préférez installer un papier-peint
présent sur votre disque dur, décochez l'option "Couleur", cochez l'autre option, puis cliquez sur
"Parcourir" pour sélectionner le papier peint. Adoptez ces réglages :
16
Nous allons maintenant modifier les polices de caractères du site.
Procédure : "Format du blog" – "Textes & Liens". Vous obtenez ceci :
Changeons donc la police, la taille des caractères, leur style, la couleurs des liens (un lien peut se
déclencher à partir d'un mot ou d'une image ; quand il s'agit d'un mot, la couleur de ce dernier
diffère de celle des autres mots présents sur le site), et celle des liens survolés (quand le pointeur
de la souris passe au-dessus d'un lien-mot, ce dernier change automatiquement de couleur, pour
plus de visibilité), choisissons l'alignement des paragraphes ...
Et voilà le travail ! :
17
On remarquera que ces réglages n'ont aucunement modifié l'entête. De même, les titres des
modules n'ont pas changé de couleur, ainsi que le nom de la page fixe "Accueil".
Suivez cette procédure :
Procédure : "En-tête (header)" – "Format". Tout comme pour le fond de la fenêtre du site, vous
pouvez mettre en arrière plan de votre site un papier-peint ou un fond de couleur, pour obtenir par
exemple :
Vous pouvez aussi augmenter ou réduire la taille de l'en-tête en jouant sur les pixels :
Modifions à présent le fond de la page (à ne pas confondre avec le fond de la fenêtre).
Procédure : "Format du blog" – "Fond" – "Fond de la page". Décochez l'option "Couleur", cochez
l'option "Image", choisissez un papier peint sur votre disque dur. Vous constatez que ce papierpeint n'apparaît pas sous la page et sous les modules. En effet :
Pour que le papier-peint apparaisse sous ces élements du site, il faut rendre ces derniers
transparents ; ne doivent donc leur être asscociés aucune image ou fond de couleur.
Procédure : "Menu 1" – "Format". Décochez les options "Couleur" et "Image". Faites de même
après avoir suivi la procédure "Contenu" – "Format". Vous obtenez ceci :
18
Il est également possible de modifier la zone de titre des modules :
Pour changer la largeur de la page, optez pour "Format du blog" puis "Page", et modifiez ici :
On peut conclure ce tutoriel en disant qu'il possible de paramétrer les thèmes d'Eklablog presque à
l'infini. De nombreux autres réglages n'ont pas été présentés ici, il faudrait écrire un (petit) livre
pour tout dire sur Eklablog ! Néanmoins, cette plate-forme de blog est accessible à tout débutant,
je suis sûr que par vos explorations, vos essais sur le site de démonstration, Eklablog vous
permettra de créer un véritable site. J'espère que ce petit guide vous sera utile pour vos premiers
pas dans le monde passionnant des webmasters !
Sébastien Delsinne – Mai 2009
19