Sites collaboratifs pour collectivités locales et associations La société Médiagonale a mis au point un système de site internet spécialement adapté aux besoins des collectivités locales, en particulier des mairies, ou des associations. Pour ce type de sites, nous avons utilisé le logiciel Spip. Notre solution offre un grand nombre d avantages pour nos clients : Avantages économiques : o Une fois conçu et la charte graphique validée, aucune facturation pour la gestion quasi illimitée des contenus, celle ci étant réalisée par l administrateur du site (le client). Souplesse : Le site est collaboratif => les contenus peuvent être réalisés par des équipes sous la direction d un administrateur. Simplicité : malgré les importantes possibilités éditoriales : o Gestion des rubriques et sous rubriques o Possibilité d inclure des vidéos, des diaporamas, des formulaires de contact, des images, des documents joints aux articles. Sécurité : o dans la mesure où les administrateurs respectent nos conseils en matière de gestion des mots de passe, l accès aux contenu du site est sécurisé. o hébergé par nos soins, le site est entièrement sauvegardé chaque 24 heures. o en cas de désaccord commercial, le site peut être facilement géré par l un des nombreux prestataires web travaillant avec Spip. o SPIP étant un logiciel «Open Source», Mediagonale (ni personne d ailleurs) n a de propriété intellectuelle sur celui-ci qui est en exploitation libre ; donc, un site que nous réalisons sous SPIP, reste en exploitation libre sans limite dans le temps et quelle que soit la société qui héberge ou hébergera le site.seule la partie programmation spécifique de SPIP réalisée par Mediagonale (le dossier squelettes pour les initiés ) est propriété intellectuelle de Mediagonale, et à ce titre, ne peut être ni vendue, donnée ou modifiée sans son accord). Nombreux sont les grands sites qui utilisent la technologie SPIP. Citons : http://www.monde-diplomatique.fr http://www.actupparis.org/ etc. Et un nombre important de sites institutionnels et de collectivités locales, vous en trouverez une liste à l adresse : http://www.spip-contrib.net/sites-institutionnels-sous-spip Evidemment, la gestion des contenus se fait grâce à une interface privée dont l accès est protégé par mot de passe.
Pour illustrer ce tutorial, nous utiliserons une charte graphique existante qui pourra évidemment être différente pour chaque site réalisé avec le système. Organisation générale d un site macommune.com ou monassociation.org En Option Version Française Version Anglaise Version Allemande Rubrique 1 Rubrique 2 Sous Rubrique 1 Rubrique 3 Rubrique N Sous Rubrique 2 Sous Rubrique 3 Sous Rubrique N Article 1 Article 2 Article 3 Article N Le contenu est géré à la manière de la manière suivante, avec : Un administrateur général (qu on peut comparer au rédacteur en chef d un quotidien) et qui a la main mise sur tout le contenu du site Des administrateurs restreints => l administrateur général leur a confié la responsabilité d une ou de plusieurs rubriques. Des rédacteurs, qui proposent des pages web à la publication Outre le fait que les administrateurs sont aussi de fait, des rédacteurs, le statut d administrateur permet de publier en ligne leurs contenus, alors que les rédacteurs proposent des pages dans la partie privé du site, mais seul un administrateur peut décider de les faire apparaître dans la partie publique.
Accès à l interface publique. Pour s identifier, il suffit de se rendre dans le répertoire «ecrire» du site : Dans la barre d adresse de votre navigateur, à la racine du site, faire suivre l adresse de : /ecrire Exemple : http://monsite.com/ecrire et de s identifier avec login et mot de passe qui ont été remis par l administrateur du site : et on arrive à l interface privée : 1 Pour revenir à la racine de l interface 2 Navigation dans l interface (icône, comme d autres, redondante)
3 Permet de lister tous les contributeurs du site, Administrateurs et Rédacteurs, ici vous pourrez par exemple contacter l administrateur du site et lui laisser un message, par exemple, pour lui soumettre un article que vous avez rédigé afin qu il le publie. 4 Menu d aide SPIP 5 Pour revenir à la partie publique du site 6 Icônes de navigation 7 Nom du rédacteur ( le vôtre si vous vous connectez) 8 Icônes d affichage, seule l une d entre elle est importante, nous l expliciterons plus loin 9 Pour se déconnecter (il est conseillé de le faireapres chaque utilisation de l interface privée afin qu un autre utilisateur de votre ordinateur ne puisse pas intervenir sur le site 10 Le rédacteur (vous.) 11 Résumé du site 12 Cadre de navigation, a part le lien «Mots clés», les autres soient sont redondants, soit ils n ont pas été implémentés par les concepteurs du site 13 Rubriques à la racine du site D une manière générale, le statut de rédacteur ne permet pas de faire de grosses bêtises (seuls les administrateurs le peuvent ) sur le site, aussi, n hésitez pas à visiter les liens, normalement, au survol des icônes, une info-bulle explicative apparaît. Quelques Icônes importantes icône de navigation rapide (en 6 sur la page ) Ce lien permet une navigation rapide dans toutes les rubriques du site, et permet, en particulier, de se placer dans la rubrique dans laquelle on souhaite placer son article. A son survol apparaissent des liens vers toutes les rubriques :
icône de choix d interface (en 8 sur la page ) Ce lien, qui est en fait un bouton poussoir, permet de passer de l interface complète à l interface simplifier, c est l interface complète qu il faut choisir afin, en particulier, d avoir la possibilité d associer des «mots clés» aux articles. Les autres icônes en 8 peuvent être essayées, elles ont pour effet de modifier l aspect visuel de l interface graphique sans aucune influence sur son utilisation. Les Mots clés. Les mots clés ont été mis en place par les concepteurs du site et ne doivent en aucun cas être modifiés (possibilité seulement pour les administrateurs.). Associés aux articles (ou aux rubriques, pour les administrateurs), ils permettent d actionner des fonctionnalités comme : La signature d un article La mise en place d un formulaire de contact dans l article L insertion dans l article de : o Diaporama o D une vidéo Et d autres fonctionnalités que nous détaillerons dans la partie du didacticiel réservé aux administrateurs. Vous pouvez les visualisez en cliquant sur l icône en 12. Un court descriptif des mots clés apparaît.
Rédiger un article. En préambule : Un article se doit d être rédigé... il a : un titre des intertitres des paragraphes Pour en faciliter la lecture, il doit être aéré, éventuellement illustré. Afin de conserver une unité graphique à l ensemble du site, et ce, malgré les différents rédacteurs de contenus, les possibilités de mise en page sont volontairement limitées. Ainsi, quelque soit la page consultée, styles des caractères, leur couleur, leur taille etc..., tout cela ne peut être modifié que par les seuls concepteurs du site, et cette charte graphique, une fois validée, s applique à tout le site. Se placer dans la rubrique où on souhaite insérer l article Plusieurs solutions pour se placer dans la bonnes rubrique, ici, pour se placer dans la rubrique «Quelques promenades» et cliquer sur l icône : Ecrire un nouvel article
Pour bien rédiger un article, il convient de suivre cette chronologie: 1. écrire le texte brut, en séparant inter titres et paragraphes d'une ligne vide ( touche Entr sur votre clavier) 2. réaliser la mise en forme (mettre en gras, italique, styler les intertitres...) 3. illustrer l'article avec des photos 4. éventuellement y joindre un document à télécharger 5. éventuellement y associer un diaporama ou une vidéo
Présentation de l éditeur SPIP 1) Le titre de l article (obligatoire) C est le titre qui apparaîtra dans la navigation du site ; pour des raisons esthétiques, il doit être court afin qu il tienne dans une seule ligne dans les menus. 2) Le Sous-titre (facultatif) Il apparaîtra comme titre principal quand l article est affiché ; si le sous-titre n est pas renseigné, c est le titre (1) qui sera affiché 3) Onglet de navigation Permet de vérifier la rubrique dans laquelle l article est prévu ; on peut éventuellement en modifier l emplacement à partir de cet onglet. 4) Descriptif rapide Bien que facultatif, ce champ, s il est renseigné, n apparaît pas dans le site mais sera affiché dans le descriptif de la page lors d une recherche sur Google par exemple
5) Barre d outils de mise en forme (elle sera détaillée plus loin) 6) Corps de l article 7) URL de la vidéo associée ou titre du diaporama associé Rédaction du corps de l'article Deux solutions: Rédiger directement dans l'éditeur Partir d'un document texte existant, ou rédigé à l'avance dans un traitement de texte, mais il convient de veiller à ce que le document ne comporte aucune mise en forme, simplement des retours à la ligne, des lignes vierges pour délimiter paragraphes et inter-titres ; il suffit alors de faire un copier-coller du texte. C'est cette dernière méthode qui est à préconiser, elle permet de préparer son article tranquillement, hors connexion Mise en forme de l article : Afin de conserver une unité graphique à l ensemble ainsi de ne pas compliquer la rédaction dans le site, qui, rappelons le, est collaboratif, les possibilités de mise en forme sont volontairement réduites mais suffisantes pour donner le rythme nécessaire pour une lecture agréable des articles par les internautes. Les Paragraphes. Pour délimiter le texte en paragraphes, il suffit d insérer une ligne vide entre les parties du documents.
Italique, Gras, Inter-titres : D une manière générale, il convient de sélectionner avec la souris la partie du texte à mettre en forme (en italique par exemple) et de cliquer sur l icône correspondante => cela engendre la création de parenthèses spéciales qui seront interprétées par SPIP Liens hypertextes Les liens hypertextes permettent de rediriger les internautes sur une autre page web lorsqu il cliquent sur un groupe de mots de l article (généralement, ce groupe de mots est identifiable graphiquement : autre couleur, soulignement). Sous SPIP, sélectionner le groupe de mots, cliquer sur l icône «lien hypertexte» et renseigner le champ adresse du lien : Nota : il est possible, suivant le niveau de sécurité configuré sur le navigateur, qu un avertissement s affiche ; vous pouvez évidemment faire confiance à ce site
Deux types de liens : 1. Liens sur un autre site : Il suffit pour cela de recopier l adresse de la page souhaitée (sélectionner et copier le contenu la barre d adresse de votre navigateur) dans le champ prévu à cet effet 2. Liens à l intérieur du site En navigant dans l interface privée du site, il faut repérer le N identifiant l article sur lequel on souhaite faire pointer la navigation, et de renseigner le champ en indiquant simplement article 149 par exemple. Traits de séparation On peut créer visuellement une séparation à l intérieur d un article en tapant une série de plus de 4 tirets (tirets du 6) à la suite dans une ligne vierge. ------------------- (série de tirets) Guillemets et caractères particuliers : Toujours le même principe, on sélectionne le texte à entourer de guillemets, et on clique sur l icône correspondante. Nota 1 : l utilisation directe des quotes et doubles quotes est déconseillée dans un article, car, dans certaines conditions, cela peut entraîner des erreur d affichage du fait que ces signes sont des signes réservés de programmation que SPIP peut interpréter comme du code Nota 2 : L icône Notes n est pas implémentée, et ne doit pas être utilisée
Les listes : Les listes se composent en mettant chaque item en début de ligne précédé d un tiret suivi d un espace «- Item 1» D'autres possibilités d'édition (en particulier, pour la création de tableaux) sont expliquées dans l'aide en ligne de SPIP (cliquer sur le point d'interrogation) Une fois l'article mis en forme, ne pas oublier de l'enregistrer. Illustrer un article Préparer les images. Plusieurs formats informatiques d image sont acceptés sur le site : Le plus courant, le format classique des photos, le format JPEG est le plus utilisé par les rédacteurs. Pour information, les autres formats acceptés sont : o Le format PNG o Le format GIF Ces 2 derniers étant plutôt utilisés par les concepteurs de site pour les interfaces graphiques. Une fois que les images sont préparées (voir plus bas dans l article «A propos des images», que le rédacteur a réfléchi sur leur position dans l article, il suffit de les télécharger et de les placer. Si vous avez suivi la procédure décrite plus haut, l article est maintenant mis en forme ; dans l interface privée, il suffit de reprendre l article (cliquer sur l icône «Modifier l article»)
Télécharger et placer les images Parcourir son ordinateur et sélectionner l image souhaitée 1. Parcourir l ordinateur et choisir l image à télécharger 2. Télécharger l image : une fois téléchargée, une boite de dialogue apparaît 3. Renseigner le titre et la description de l image (ces informations seront utiles pour les malvoyants qui utilisent des logiciels lecteurs d écran, mais également pour le référencement dans les moteurs de recherche) 4. Enregistrer 5. Placer le curseur à l endroit de l article où on souhaite placer l image Pour une image centrée : placer le curseur sur une ligne vide, entre 2 paragraphes Pour une image à droite ou a gauche, placer le curseur avant la première lettre du paragraphe 6. Choisir le positionnement de l image en double cliquant sur left, center ou right. Quand on place une image à droite, le texte l habille par la gauche, et inversement pour une image à gauche. On recommence l opération pour chaque image à placer dans l article. Dans l éditeur, en mode rédaction, chaque image insérée est indiquée par son identifiant et son positionnement avec la syntaxe : <img144 center> Une fois l'article illustré, ne pas oublier de l'enregistrer.
A propos des images. Le but de ce didacticiel n est pas d apprendre le traitement des images. Une page Internet est une grille de texte sur laquelle on peut «accrocher» des médias : o Des images o Des sons o Des videos o Des animations. Si le texte n a pas un grand poids informatique, il en va tout différemment des médias, et il serait illusoire par exemple de vouloir visionner une vidéo à partir du web si l on ne dispose pas d une connexion à haut débit (câble, ADSL). Dans une moindre mesure, les images peuvent considérablement ralentir l affichage d une page web si on ne prend pas soin de les «retravailler» avant de les mettre en ligne, et cela pour plusieurs raisons : o Permettre un affichage des images même pour les internautes ne disposant pas de haut débit (c est le cas dans de nombreux villages) o Donner plus de liberté pour le placement des images à l intérieur d un article (une image trop grande ne peut être affichée que centrée dans l article) o Eviter au rédacteur des téléchargements longs (même en ADSL ) Pour exemple, la plupart des appareils photos numériques restituent des images d une qualité suffisante pour faire réaliser des tirages de grande dimension, et de ce fait, «pèsent» plusieurs Mo, alors qu un écran informatique n est de toutes façons pas capable de restituer cette qualité, et, en principe, une image illustrative dans une page Web ne devrait pas peser plus de 40 Ko, soit, souvent 100 fois moins que l image brute sortie de l appareil photo, et donc, 100 fois plus rapide à s afficher à l écran. Réduire le poids d une image Pour réduire le poids informatique d une image, on agit sur deux critères : 1. La taille de l image 2. Sa compression informatique Les concepteurs du site réduisent d autorité la taille des images à une dimension permettant son affichage dans l article, mais ne la compressent pas cette opération peut être réalisée très simplement grâce à des logiciels comme Photoshop ou Gimp.
Les autres fonctionnalités attachées aux articles. D'autres fonctionnalités peuvent être associées aux articles en particulier: o attacher un document proposé au téléchargement o signer un article o créer un formulaire permettant à l internaute de réagir à l article o illustrer l article avec une vidéo o illustrer l article avec un diaporama Attacher un document proposé au téléchargement ATTENTION! les documents joints à un article ne doivent pas être inséré dans l article (comme c est le cas des images d illustration des articles), mais simplement joints. Un document joint peut être de plusieurs nature, ce peut être, entre autres : o Un document PDF o Un document Word, ou Excel o Une image par exemple, une image de très grande dimension, proposée au téléchargement afin de permettre à l internaute d en faire réaliser un tirage papier o Et plein d autres Etant entendu bien sur que l internaute ne pourra les consulter qu à la condition que sa machine dispose des logiciels adéquats. Raison pour laquelle il est conseillé de se limiter à des documents de type standard La procédure : Dans l interface privée, aller sur l article, cliquer sur l icône modifier et télécharger le document dans la boite de dialogue prévu à cet effet. C est tout, ne pas insérer le document dans le corps de l article. Le document peut avoir un titre, et éventuellement une description. Il apparaîtra dans le site public symbolisé par le logo de son type, avec sa taille, éventuellement son titre et sa description (si les champs adéquats ont été renseignés) Ici, un document PDF proposé au téléchargement Nota : Veillez à ce que les pièces jointes ne soient pas infectées par un virus informatique
Les Mots clés Les mots clés ont été évoqués dans la partie de présentation de l interface privée. Leur utilisation sera nécessaire pour implémenter les fonctionnalités décrites ci-après. Pour les associer à un article, se mettre en interface complète (voir présentation de l interface privée), et sur l article concerné, déplier la boite de dialogue «Mots clés» en cliquant sur le petit triangle, puis les sélectionner en fonction du résultat souhaité. Plusieurs mots clés différents peuvent être associés à un même article. Signer un article, insérer un formulaire de contact Il suffit d associer à l article les 2 mots clés : o Signe (pour signer son article) o Réponse (pour insérer un formulaire de contact) Ci-dessous, l aspect du formulaire dans le site public
Illustrer l article par une vidéo En fait, il s agit de lien sur des vidéos hébergées soit sur : o Dailymotion.fr o Youtube.com Une fois sélectionnée la vidéo, on extrait son URL (et rien que l URL) à partir des informations trouvées sur le site ( l URL est du genre : http://www.dailymotion.com/swf/x5pqyb&related=1 pour une vidéo hébergée sur dailymotion) et de la recopier dans le champ prévu à cet effet tout en bas de l écran, en mode, modification d article. Puis, après avoir enregistré l article, on associe l un ou l autre des mots clés YouTube ou DailyMotion, selon les cas. Nota : On ne peut pas associer à la fois une vidéo et un diaporama au même article Illustrer l article par un diaporama Un diaporama peut comporter autant de photos que souhaité. Les photos doivent être préparées de préférence en mode paysage, toutes de la même dimension, au format 4/3 (format normal des appareils numériques) et redimensionnées sur une largeur de 500px environs (par logiciel, nous les ajusterons automatiquement à la bonne taille). Chaque image doit avoir un titre et un descriptif qui apparaîtrons dans le site public. Une fois ces éléments préparés, en mode modification d article : 1. Saisir le titre du diaporama dans le champ prévu à cet effet (voir plus haut) 2. Attacher chaque image du diaporama comme un document de l article (voir plus haut) 3. Puis, après avoir enregistré l article, on l associe au mot clé diaporama. Voici l aspect sur le site public :