Aide aux rédacteurs du site saintelucebasket.free.fr Le 27/07/07

Aide aux rédacteurs du site saintelucebasket.free.fr Le 27/07/07 Index 1. Introduction... 2 2. Comment se connecter au site avec son nom et son mot de passe?... 3 3. Comment modifier mon mot de passe?... 5 4. Comment passer de l espace privé à l espace public... 7 5. Notion de rubrique / sous-rubrique... 8 6. Plan du site... 10 7. Ajouter mon premier article... 11 7.1. Résumé de l article... 16 8. Trucs et astuces pour mettre en forme un article... 17 8.1. Aller à la ligne... 17 8.2. Mise en italique... 17 8.3. Mise en gras... 18 8.4. Insertion d un intertitre... 18 8.5. Insertion d une «puce»... 18 8.6. Insertion de lignes numérotées... 19 8.7. Mise en couleur du texte... 19 8.8. Pour mettre une note en bas de page... 20 8.9. Pour faire un lien vers une autre page... 20 8.9.1. Lien vers un autre site... 20 8.9.2. Lien vers un autre article du site saintelucebasket.free.fr... 21 8.9.3. Lien vers une rubrique du site saintelucebasket.free.fr... 21 8.10. Insertion d une photo... 22 8.10.1. Mise à disposition de la photo sur internet... 22 8.10.2. Insertion de l image à l intérieur de l article :... 24 8.10.3. Insertion de l image en bas de l article (image jointe)... 26 8.11. Insertion d un document associé à un article... 27 8.11.1. Mise à disposition du document sur internet... 27 8.12. Insertion d un tableau à l intérieur d un article... 29 8.13. Modification de la date de publication d un article... 29 8.14. Notion de forum sur un article (échanges)... 30 9. Cas particulier de l article de la page d accueil (edito)... 32 10. Publication des articles de presse... 33 11. Gestion de l agenda... 37 12. Albums photos... 41 13. Ajout de brèves... 46 14. Ajout de liens vers des sites web... 50 15. Publication des plannings... 53

1. Introduction Ce document vise à vous aider et à administrer le site du Sainte Luce Basket et que de fait il soit plus vivant et plus à jour! Si vous suivez pas à pas cette documentation vous devriez pouvoir vous en sortir sans trop de problèmes. Le logiciel «spip» utilisé pour gérer le site est très puissant. Toutes les possibilités ne sont pas décrites dans ce document, on les découvrira au fur et à mesure Comme tout logiciel, il peut comporter des bugs. N hésitez pas à me les signaler. Il en va de même de ce document rédigé rapidement avant de partir en vacances!!! Bonne rédaction. Patrick

2. Comment se connecter au site avec son nom et son mot de passe? Dans le menu de gauche présent sur toutes les pages du site, cliquer sur «Espace privé» : Si c est la toute première fois que vous vous connectez au site, vous devez entrer votre login qui est l initial de votre prénom suivi de votre nom, ex : «vsaulnier», puis cliquer sur «Valider» ou appuyer sur la touche «Entrée» de votre clavier :

Donner ensuite votre «mot de passe», puis cliquer sur «Valider» ou appuyer sur la touche «Entrée» de votre clavier : Vous accédez alors à votre espace privé :

3. Comment modifier mon mot de passe? Pour modifier votre mot de passe, cliquer sur votre «pseudo», ex : «Vincent» : Cliquer ensuite sur «Modifier cet auteur», puis descendre en base la page et saisir par 2 fois votre nouveau mot de passe, puis cliquer sur «Enregistrer»

4. Comment passer de l espace privé à l espace public L espace «public» est le site tel que le voient les internautes. Une fois dans l espace privé, pour aller dans l espace public, cliquer sur «visiter en haut à doite» : Une fois dans l espace public, pour aller dans l espace privé, plusieurs solutions : ou

5. Notion de rubrique / sous-rubrique Le site est organisé en rubriques et sous-rubriques. On peut faire l analogie avec les dossiers et sous-dossiers d une arborescence de disque dur par exemple. Les rubriques apparaissent en haut à gauche du site : En positionnant la souris sur une rubrique, les sous-rubriques apparaissent et ainsi de suite : En cliquant sur une rubrique, sont affichés les sous-rubriques, les articles, les brèves, les liens internet :

En haut de la page est affiché le chemin de la page affichée, ici : «Accueil du site La vie du club». Les rubriques et sous-rubriques sont administrées dans l espace privé. Leur gestion n est pour l instant pas décrite dans ce document. Cela viendra plus tard. Attention, tant qu une rubrique ne comporte ni article, brève, lien elle n apparaît pas dans le menu du site!!!

6. Plan du site En cliquant dans le menu de gauche sur «plan du site», on obtient une page donnant toute la structure arborescente du site avec rubriques/sous-rubriques/articles :

7. Ajouter mon premier article Cela ne peut se faire que dans l espace privé et en étant identifié. Plusieurs solutions pour déclencher la création d un nouvel article : A partir de la page d accueil de l espace privé : ou Est proposé alors l écran suivant :

1 - Renseigner le titre de l article qui est obligatoire!! 2 Le site est organisé en rubriques et sous-rubriques Choisir dans quelle rubrique ou sous-rubrique apparaîtra l article. Un click sur la loupe, puis choix de la rubrique en double cliquant dessus, dans l exemple : /Infos pratiques / L équipe dirigeante / Saison 2007-2008. 3 - Descendre ensuite dans la page pour saisir le texte de l article Pour l instant, on ne rentre pas dans les détails de la mise en page. 4 enregistrer l article en cliquant en bas de la page sur «enregistrer» :

5 Votre article est enregistré. Un no lui est automatiquement affecté, dans notre exemple : 32. Votre article n est pas encore visible sur le site internet. Vous pouvez à tout instant le modifier en cliquant sur «modifier cet article».

Pour que votre article soit visible sur le site, il faut changer son statut pour le passer : - de l état «en cours de rédaction» à l état «publié en ligne», puis cliquer sur «Valider». Pour aller directement sur le site en visualisation de votre article, cliquer sur «Voir en ligne» :

Cela donne le résultat suivant : ATTENTION : si vous avez modifié un article et que vous ne voyez pas les modifications, cliquer en haut à droite sur «Recalculer cette page». Dans la page d accueil du site, l article apparaît en tête de liste en bas de la page comme article le plus récent. On verra un peu plus loin que l on peut modifier la date de parution d un article On voit que dans la page d accueil, c est le début de l article qui est affiché. Pour le visualiser dans son ensemble et dans son contexte de rubrique/sous-rubrique, il faut cliquer sur : «Lire la suite de l article».

7.1. Résumé de l article Par défaut, dans les articles récents ainsi que dans la recherche d article, sont affichés les premiers mots de l article sans aucune mise en forme. Il est possible d écrire le résumé de l article, c est la notion de «Descriptif rapide» que l on peut atteindre via «Modification d un article» : Cela donne ensuite dans la page d accueil du site, articles récents : A utiliser sans restriction!!!

8. Trucs et astuces pour mettre en forme un article L article que l on vient de rédiger ne comportait aucune mise en forme particulière. Cependant, on s aperçoit que le logiciel a transformé légèrement la présentation de l article en transformant les «- «que nous avions saisis en petites flêches ATTENTION : Ne vous fiez pas à l apparence de l article tel qu il apparaît dans l espace privé. Pour voir l apparence réelle de la mise en forme, visualisez le site dans la partie «publique». 8.1. Aller à la ligne Attention, par défaut si l on tape 2 lignes à suivre, les 2 lignes seront accolées en visualisation. Pour avoir effectivement 2 lignes distinctes, il faut sauter une ligne entre les deux ou faire commencer la deuxième ligne par le caractère «_» suivi d un espace, ex : Ligne1 Ligne 2 Ligne 1 Ligne 2 Ligne1 _ Ligne2 en affichage : Ligne1Ligne 2 -> en affichage : Ligne1 Ligne2 -> en affichage : Ligne1 Ligne2 8.2. Mise en italique Eclairer avec la souris le texte à mettre en italique, ex : Président. Puis cliquer sur l icône : Le texte à mettre en italique est automatiquement entouré de {}. C est normal, une fois enregistré, le mot «Président» apparaîtra effectivement en minuscule :

8.3. Mise en gras Eclairer avec la souris le texte à mettre en italique, ex : Vincent Saulnier. Puis cliquer sur l icône : Le texte à mettre en gras est automatiquement entouré de {{}}. C est normal, une fois enregistré, les mots «Vincent Saulnier» apparaîtront effectivement en gras : 8.4. Insertion d un intertitre Eclairer avec la souris le texte à mettre en intertitre, ex : «L équipe dirigeante se compose de :». Puis cliquer sur l icône : Le texte à mettre en intertitre est automatiquement entouré de {{{}}}. C est normal, une fois enregistré, la phrase «L'équipe dirigeante se compose de :» apparaîtra effectivement en intertitre : 8.5. Insertion d une «puce» Déjà vu, il suffit de commencer une ligne par un tiret suivi d un espace pour qu en visualisation cela soit remplacé par une «puce» en forme de flèche.

8.6. Insertion de lignes numérotées Mettre un # après le tiret pour avoir une numérotation en 1,2 Mettre ## pour avoir un décalage et une numérotation en a,b, -# puce -# puce donnent : 8.7. Mise en couleur du texte Pour mettre en couleur une partie du texte, faire précéder le texte avec : [couleur] et le terminer avec [/couleur]. Ex : [rouge]texte en couleur rouge[/rouge] Les couleurs possibles sont : noir blanc rouge vert bleu jaune gris marron violet rose orange

Pour mettre en orange et en gras : [orange]{{texte en couleur orange et en gras}}[/orange] 8.8. Pour mettre une note en bas de page Eclairer avec la souris le texte à mettre en bas de page, ex : «exemple de note bas de page. Puis cliquer sur l icône : Le texte à mettre en note est automatiquement entouré de [[]]. C est normal, une fois enregistré, le texte apparaîtra effectivement en note de bas de page : 8.9. Pour faire un lien vers une autre page 8.9.1. Lien vers un autre site Sélectionner le texte sur lequel on cliquera pour être redirigé vers le site, ex : «lien vers google», cliquer sur l icône et entrer l adresse du site : http//www.google.com :

Cela donne en visualisation de l article : 8.9.2. Lien vers un autre article du site saintelucebasket.free.fr Mettre un crochet ouvert devant le texte. Faire suivre le texte de «->» puis du no de l article sur lequel le lien doit pointer. Ex : [exemple de lien vers article 3->3] Cela donne en visualisation de l article : 8.9.3. Lien vers une rubrique du site saintelucebasket.free.fr Mettre un crochet ouvert devant le texte. Faire suivre le texte de «->rub» puis du no de la rubrique sur laquelle le lien doit pointer. Ex : [exemple de lien vers rubrique 2->rub2] Cela donne en visualisation de l article :

8.10. Insertion d une photo ATTENTION : pensez à réduire la taille de vos photos avant de les publier sur internet. On ne devrait pas trouver de photos sur le site de taille supérieure à 150 Kilo octets. Par ailleurs, il faut publier vos photos au format JPG ou GIF (ex : maphoto.jpg ou ma photo.gif). Pour réduire la taille d une photo afin de la publier sur internet il existe une multitude d outils. En standard sous windows, vous disposez du logiciel paint qui se trouve dans les accessoires. Ouvrer la photo avec paint. Dans le menu «images», choisir «Etirer/Incliner». Dans «Horizontal» choisir le % de réduction par rapport à l original, ex : 10% Dans «Vertical» choisir le même % que pour Horizontal pour garder les proportions de la photo originale. Ensuite aller dans le menu «fichier» et choisir «enregistrez sous» afin de ne pas écraser la photo d origine. 8.10.1. Mise à disposition de la photo sur internet Cette 1 ère étape consiste à transférer la photo de votre ordinateur sur internet : Quand vous êtes en modification d un article, vous disposez en haut à gauche d une fenêtre «ajouter une image» : Cliquer sur parcourir et sélectionner la photo sur le disque de votre ordinateur :

Cliquer ensuite sur télécharger, et au bout de quelques instants, la photo va apparaître : Il faut repérer le no, juste en dessous de la photo. Dans notre exemple : img31

8.10.2. Insertion de l image à l intérieur de l article : Insérer dans l article la séquence suivante : <img31 center> pour avoir l image au centre. <img31 left> pour avoir l image cadrée à gauche. <img31 right> pour avoir l image cadrée à droite. Exemple avec : Cela donne :

REMARQUE : l image est toujours affichée en miniature (maximum de 150 x 150 pixels). Il est possible de rendre l image «cliquable» et ainsi afficher la photo à sa taille réelle. Pour cela au lieu de : <img31 center> on tapera : <doc31 center> Cela donnera : Et en cliquant sur la photo, elle sera affichée en taille réelle. Pour afficher une page, ex : google en cliquant sur une image, la syntaxe est la suivante : [<img31 center>->http://www.google.fr]

8.10.3. Insertion de l image en bas de l article (image jointe) On peut ajouter une ou plusieurs photos «cliquables» en bas d un article. Pour cela en mode modification de l article, choisir : Et procéder comme déjà vu pour mettre une photo à disposition sur internet. En affichage de l article, cela donne :

8.11. Insertion d un document associé à un article La taille d un article ne doit pas être trop grande ( pas plus de 2 pages). N hésitez pas à «attacher» des documents à vos articles, si possible des documents au format pdf (acrobat) qui sont lisibles par tout le monde (word, tout le monde n a pas la même version). Pour générez des documents word par exemple au format pdf, vous pouvez utiliser entre autres le logiciel gratuit : Cutpdf que vous pouvez télécharger à cette adresse : http://www.cutepdf.com/download/cutewriter.exe 8.11.1. Mise à disposition du document sur internet Cette 1 ère étape consiste à transférer le document de votre ordinateur sur internet : Quand vous êtes en modification d un article, vous disposez sur la gauche d une fenêtre «ajouter un document» : Cliquer sur parcourir et sélectionner le document sur le disque de votre ordinateur :

Cliquer ensuite sur télécharger, et au bout de quelques instants, le document est à disposition: Il est possible de donner un titre au document et une description qui apparaîtront en visualisation. Ne pas oublier d appuyer sur le bouton «enregistrer» en dessous de la description. Cela donne en visualisation de l article :

8.12. Insertion d un tableau à l intérieur d un article En modification d article, dans le texte, exemple : {{Nom}} {{Prénom}} {{Fonction}} Saulnier Vincent Président Saulnier Stéphanie Secrétaire Cela donnera en affichage : 8.13. Modification de la date de publication d un article Il peut être intéressant de modifier la date de publication d un article, cette date servant souvent de critère de tri dans l affichage (articles les plus récents, articles publiés dans une rubrique). Par exemple également pour les articles de presse, pour mettre la date de parution de l article dans la presse et non la date à laquelle on a publié sur le site Pour cela, aller dans l espace privé sur l article. Cliquer sur la petite flèche avant «date de publication en ligne». Vous pouvez alors modifier la date : Une fois la nouvelle date choisie, n oubliez pas de cliquer sur «Changer» qui apparaît à droite pour effectivement enregistrer la nouvelle date.

8.14. Notion de forum sur un article (échanges) Vous pouvez donner la possibilité aux internautes de réagir et de répondre à votre article. C est la notion de forum. Pour activer un forum sur un article, dans l espace privé, se positionner sur l article. Sur la gauche, cliquer sur la flèche devant «Forum et pétition». Puis choisir «modération à posteriori» puis cliquer sur «changer» pour enregistrer : Aller en visualisation de l article dans l espace public. Apparaît maintenant en bas de l article «Répondre à cet article» qui va permette aux internautes de répondre : Les réponses des internautes sont directement publiées. Il faut donc surveiller les forums et dans l espace privé, supprimer éventuellement les réponses qui ne respectent pas les règles d éthique Dans l espace public, les réponses les plus récentes des forums sont accessibles dans le menu sur la gauche :

9. Cas particulier de l article de la page d accueil (edito) L article qui s affiche sur la page d accueil du site est l article no 4 répertorié dans la rubrique «La vie du club». Son titre est : «Bienvenue sur le site du Sainte Luce Basket». C est un article comme les autres si ce n est qu il est repéré comme étant l édito. La date qui s affiche en haut à droite est la date de l article. Pour la modifier, il suffit de modifier la date de publication de l article (Voir dans chapitres précédents).

10. Publication des articles de presse Les articles de presse sont publiés dans la rubrique : Accueil du site La vie du club Articles de presse 2007 Pour ajouter un article de presse, aller dans l espace privé, dans la rubrique citée ci-dessus. Créer un nouvel article : 1 Dans le champ «Sur-titre», renseigner le nom du journal, ex : Presse-Océan 2 Dans le champ «Titre», renseigner le titre du journal, ex : Dernière chance de Sainte Luce et de St Herblain

3 Télécharger le document (image jpg la plupart du temps) : Dans «ajouter un document», cliquer sur parcourir. Choisir le document (.jpg) sur le disque de votre pc, cliquer sur «ouvrir». Cliquer ensuite sur «Télécharger».

4 Insérer le document dans l article Dans la partie «texte» de l article, insérer : <doc34 center> : ce texte apparaît sous la vignette de la photo sur la gauche. Il suffit de faire un copier/coller dans la partie texte (attention le no dans l exemple 34 change à chaque fois que l on insère une nouveau document) : 5 Enregistrer l article En cliquant sur «enregistrer en bas de la page». 6 Mettre l article en ligne Modifier le statut de l article pour le passer de «en cours de rédaction» à «publier en ligne» et cliquer sur le bouton «Valider» :

7 Modifier la date de l article pour qu elle soit celle de publication de l article dans la presse et non la date du jour : Cliquer sur la flèche à gauche de «Date de publication en ligne», entrer la nouvelle date et cliquer sur «changer» : Voila c est terminé, cliquer sur «voir en ligne» pour vérifier si tout est correct.

11. Gestion de l agenda Il est facile de gérer les événements. Ils apparaîtront à 2 endroits : En haut à droite dans «agenda» : Et également en cliquant à gauche dans le menu : Un événement dans l agenda est considéré comme un article. Il faut donc aller dans l espace privé et choisir la rubrique : «agenda» :

Cliquer sur «Ecrire un nouvel article». 1 Renseigner le titre 2 Renseigner le texte 3 Adjoindre éventuellement des photos et/ou des documents au même titre qu un article courant. 4 Enregistrer l article

5 Mettre à jour la date et l heure de l événement Pour cela il faut cliquer sur la flèche à gauche de «date de rédaction antérieure». Renseigner la date et heure de l événement et cliquer sur «changer» : 6 IMPORTANT : changer le statut de l article pour qu il soit visible en ligne en le passant de «en cours de rédaction» à «publier en ligne» puis cliquer sur «Valider» : Vérifier sur la partie publique :

En cliquant sur la ligne, détail de l événement :

12. Albums photos Il est facile d ajouter des albums de photos. Le système gère automatiquement l affichage des photos sous forme de «miniatures». ATTENTION : pensez à réduire la taille de vos photos avant de les publier sur internet. On ne devrait pas trouver de photos sur le site de taille supérieure à 150 Kilo octets. Par ailleurs, il faut publier vos photos au format JPG ou GIF (ex : maphoto.jpg ou ma photo.gif). Pour réduire la taille d une photo afin de la publier sur internet il existe une multitude d outils. En standard sous windows, vous disposez du logiciel paint qui se trouve dans les accessoires. Ouvrer la photo avec paint. Dans le menu «images», choisir «Etirer/Incliner». Dans «Horizontal» choisir le % de réduction par rapport à l original, ex : 10% Dans «Vertical» choisir le même % que pour Horizontal pour garder les proportions de la photo originale. Ensuite aller dans le menu «fichier» et choisir «enregistrez sous» afin de ne pas écraser la photo d origine. Les albums sont accessibles dans le site public via le menu de gauche «galerie» : Pour ajouter un nouvel album : Aller dans l espace privé dans la rubrique «Galerie» :

Cliquer sur «Ecrire un nouvel article». 1 Donner le titre de l article, qui sera le titre de l album. Ex : Membres du bureau

2 Télécharger une à une les images de l album : Dans la rubrique «Ajouter un document»,cliquer sur «Parcourir», choisir l image sur le disque de votre pc, cliquer sur «ouvrir» puis sur «télécharger» : L image est téléchargé et apparaît comme vignette. Ajout du titre du document et appuyer sur «enregistrer» :

Faire cela pour chaque photo, puis en final, enregistrer l article en bas de la page : Ne pas oublier de passer le statut à «publié en ligne» et de cliquer sur «Valider»

Vérifier l album sur le site public :

13. Ajout de brèves Comme le nom l indique, une brève est un article très court. Comme un article, une brève est enregistrée dans une rubrique/sous-rubrique. Les brèves apparaissent à plusieurs endroits dans le site : Sur la page d accueil, à droite : Les brèves y sont affichées de la plus récente à la plus ancienne. En cliquant sur le mot «Brèves» en blanc sur fond bleu/vert, on accède à toutes les brèves : La brève apparaît également lorsque l on accède la rubrique à laquelle elle est associée :

Pour créer une brève : Aller dans la partie privée du site, sur la rubrique dans laquelle vous voulez ajouter la brève :

Donner ensuite un titre, puis au maximum 2 à 3 lignes de texte, choisir «Oui brève validée» et finalement cliquer sur «Enregistrer» et votre brève est directement publiée. Cela donne en visualisation :

14. Ajout de liens vers des sites web Il est possible d ajouter des liens vers d autres sites. Comme les articles et les brèves, les liens sont enregistrés sous des rubriques du web. Ils apparaîtront à plusieurs endroits dans le site : Sur la page d accueil dans la partie droite : Dans les rubriques dans lesquelles on a associé des liens : Pour créer un lien, se positionner dans l espace privé sur la rubrique / sous-rubrique dans laquelle on veut ajouter le lien :

Cliquer sur «Référencer un site». Choisir ensuite de préférence : «Référencement automatisé d un site», puis indiquer l adresse du site. Dans l exemple on ajoute le site du Hand de Ste Luce : Puis cliquer sur «ajouter».

Le nom du site est automatiquement récupéré et proposé pour être publié. Choisir, ce site est «publié» et cliquer sur «valider». Le nouveau site apparaît en premier dans la liste des sites sur la page d accueil. Vous pouvez changer son ordre d apparition en changeant sa date de publication : Vous pouvez également enlever le descriptif qui n apporte pas grand-chose par rapport au titre!

15. Publication des plannings Les différents plannings sont regroupés dans la rubrique : La vie du club Planning Pour les modifier, aller dans l espace privé sur la rubrique en question. Pour ajouter un nouveau planning, aller en bas de la page : 1 S il existe déjà, penser à supprimer la version précédente : Pour cela, cliquer sur la petite flèche à gauche du document, puis en bas sur supprimer le document :

2 Ajouter le nouveau document : En bas de page, dans la partie «ajouter un document», cliquer sur «parcourir», puis choisir le document, «ouvrir» et enfin télécharger :

Le document est téléchargé, il faut maintenant en modifier le titre puis appuyer sur le bouton «enregistrer». ATTENTION : pensez dans le titre à mettre la date de publication car elle n apparaît pas sur le site public!! Vérifier sur le site public que tout est correct : Fin du document