Le Tutorial d'un Blog Collaboratif

Introduction de la première partie

2007-07-31T20:54:00.000+02:00

Ce document donne quelques conseils pour participer à la rédaction d’articles au sein d’un blog collaboratif, c’est à dire un (anti)blog organisé et écrit à plusieurs intervenants.

La participation à un blog collaboratif se fait à deux niveaux :

Le niveau ‘auteur’ qui permet la rédaction, la modification, la suppression, d’articles signés par une même personne. Ce niveau ne requiert aucune connaissance informatique.
Le niveau ‘administrateur’ qui autorise en plus toutes les opérations d’organisation des tâches et de gestion du blog : modification des paramètres de publication et d’apparence, ouverture des comptes collaborateurs, définition des autorisations, etc.

Cette première partie n’aborde que le niveau ‘auteur’ ou rédactionnel. En fonction des demandes je prolongerais ce tutoriel au niveau ‘administrateur’ pour détailler diverses possibilités du blog, la sécurisation des données, les trucs et astuces qui permettent de le rendre compatible avec l’objectif d’une revue internet périodique.

En premier lieu cette documentation sert de support aux auteurs de la publication du magazine internet nanoZine de la communauté FNR, aquariophiles spécialisés dans les petits aquariums récifaux, particulièrement les ‘nano récifs’. nanoZine c’est ici.

Le blog a été choisi par les initiateurs ‘historiques’ du ‘Zine pour sa capacité de partage des tâches, la possibilité d’une rédaction partagée entre différents auteurs, les échanges avec les lecteurs, la gratuité, l’absence de bandeaux publicitaires, … Ce choix, versus un site web classique, s’est avéré excellent et peu de modifications ont été apporté au modèle initial, bien que créé rapidement avec la première version de Blogger.

Le principe général consiste à avoir deux blogs : Un blog principal, visible par tous les internautes, résultat final de la rédaction. Un blog secondaire ou alternatif, qui sert de ‘brouillon’ aux auteurs avant la publication mensuelle. Le blog secondaire est en évolution permanente mais son effervescence reste caché des lecteurs alors que le blog officiel est publié mensuellement par un administrateur à partir des articles écrits et finalisés sur le blog alternatif. Cette technique possède de nombreux avantages par rapport au mode ‘brouillon’ proposé par Blogger, dont la possibilité de juger d’un article ‘en vue réelle’ par toute l’équipe de rédaction avant la parution officielle et aussi la sauvegarde des fichiers originaux sur un blog miroir. Les auteurs autorisés écrivent donc leurs articles sur le blog alternatif à l’adresse qui leur est communiquée au moment de leur inscription dans l’équipe de rédaction .

Pour résumer : Ce document décrit les quelques opérations nécessaires à la rédaction d’articles sur un blog collaboratif en prenant l’exemple de nanoZine hébergé sur Blogger. Si la plupart des conseils peuvent être reconduits pour un autre blog, des points de la procédure peuvent différer. Ces actions concernent la connexion, la mise en forme et autres points techniques. Le style d’écriture, etc. sont laissés à la discrétion des auteurs. Gardez à l’esprit que l’objectif est de réaliser un blog harmonieux écrit et géré à plusieurs et aucune compétence informatique n’est nécessaire pour être un excellent collaborateur.

Vous êtes conviés à poster vos questions & commentaires sur le blog ici :

Ouverture des droits

2007-07-31T19:51:00.002+02:00

La participation à la rédaction d’un blog, comme nanoZine par exemple, service Google hébergé par Blogger est conditionnée par la propriété d’un compte utilisateur puis d’un droit d’accès d’auteur au blog accordé par un administrateur. Cela nécessite donc deux ouvertures distinctes :

Le compte Google. Pour accéder à Blogger vous devez vous connecter par un identifiant Google, c’est à dire un compte de messagerie Gmail, point d’entrée aux différents services proposés par Google. Si vous souhaitez l’ouverture de ce compte, il suffit d’en faire la demande à un utilisateur enregistré. Vous serez ainsi détenteur d’un compte Google caractérisé par un identifiant : Adresse de messagerie Gmail et d’un mot de passe choisi par vous.
Une fois détenteur d’un compte Google vous communiquez votre identifiant de messagerie Gmail à un administrateur du blog. Vous conservez votre mot de passe secret. Si l’administrateur répond favorablement à votre demande vous recevez par mail une invitation sollicitant votre participation à la rédaction du blog. A la réception de cet email votre compte est ouvert et il est désormais possible de se connecter au blog avec les droits définis par l’administrateur à l’ouverture du compte (auteur ou administrateur). Eventuellement l’administrateur peut vous convier à collaborer à plusieurs blogs.

Une fois le compte créé, vous pourrez accéder au blog par l’intermédiaire de votre page d’accueil Google regroupant vos différents éléments : Blogger bien sûr, mais aussi Gmail (messagerie et espace de stockage de 1 Go), Agenda, Documents et tableur, Picasa (partage d’images), Google maps, etc. Ces services sont gratuits mais aucune sécurité n’est donnée quant à la perte ou confidentialité des données stockées. Consultez les conditions d’utilisations de ces divers services. Vous devez avoir également une stratégie de sauvegarde individuelle ou globale des articles publiés.

Note pour les membres FNR : FNR forum aquariophile des nano-récifs utilise différents services Google pour le partage des données dans la ‘communauté du nano’ :

Blogger pour le magazine mensuel nanoZine,
Documents et tableur pour les rencontres et échanges de boutures [projet Graines de récif],
Agenda pour la planification des évènements,
Maps pour la géo localisation des membres,
Picasa pour les concours photos,
Google vidéo pour le partage de petits films, etc.

Avoir un compte Gmail permet l’accès individuel au partage de ces différents documents.

Connexion au blog

2007-07-31T19:51:00.001+02:00

Une fois les droits d’accès acquis vous pouvez participer immédiatement à la rédaction.

Avec votre browser Internet connectez-vous au site : https://www.blogger.com/start?hl=fr
Sur la page d’accueil du site Blogger entrez votre adresse d’identifiant xxx@gmail.com et votre mot de passe secret.
Appuyez sur le bouton CONNEXION

Si vous être bien autorisé par un administrateur, vous accédez à votre ‘tableau de bord’ qui liste les blogs auxquels vous pouvez participer, vous permettant d’en créer de nouveaux et surtout d’ajouter un nouveau message au blog collaboratif ‘secondaire’ :

Nota : Lorsque vos droits sont limités au niveau ‘auteur’ vous n’avez pas accès aux menus ‘Paramètres’ et ‘Mise en page’ qui sont réservés au niveau administrateur.

Le blog secondaire reste ici ‘secret’, son adresse n’est connue que de l’équipe de rédaction pour préserver la surprise d’un nouveau numéro proposé chaque mois.

Le lien ‘Nouveau message’ permet de créer un nouvel article et le lien ‘Messages’ permet à l’auteur d’éditer les articles anciens et de leurs apporter des modifications.

Nota : Un administrateur peut éditer tous les messages écrits et intervenir dans leurs contenus alors qu’un auteur ne peut modifier que ses propres messages.

Il suffit de cliquer sur le lien ‘Nouveau message’ pour passer en mode création.

Publier un message

2007-07-31T19:50:00.000+02:00

En mode édition (création ou modification d’un message), l’apparence de Blogger devient celle d’un éditeur de texte et d’aperçu HTML :

Un peu de discipline ! Alors qu’avec un blog personnel vous êtes libre de tous les choix, contenus et mise en page, sur un blog collaboratif il est nécessaire d’organiser les messages et d’avoir une disposition identique entre auteurs afin d’offrir aux lecteurs un ensemble homogène avec des repères facilitant la lecture. Il est préférable de se plier à quelques règles, ou plutôt convenances, de mise en forme des articles, habitudes qui pourront évoluer en fonctions des petites améliorations apportées par chaque intervenant.

Choix du titre Vous êtes libre de choisir celui qui vous plaît mais ce choix n’est pas anodin car le titre sert au lecteur à retrouver l’article, le classer. Il est donc préférable de bien résumer le contenu par un titre composé de quelques mots clés.
Écrire le corps du texte Il est tout à fait possible d’écrire le texte directement sous le blog, cependant je conseille de préparer l’article avec l’aide d’un traitement de texte (MSWord / Open Office) pour bénéficier des multiples facilités : Sauvegarde, correction orthographique et grammaticale, etc. Mais SANS TENIR COMPTE DE LA MISE EN FORME. En effet, utiliser la mise en forme du traitement de texte n’est pas une bonne option. Le transfert du contenu se fait au format HTML et celui généré par un traitement de texte est très ‘lourd’ et surtout fort différent d’une machine à l’autre, d’un auteur à l’autre. Ce code est donc très difficile à maintenir. C’est une règle contraignante mais aussi importante : Pour avoir un blog homogène il faut se passer de la mise en forme des traitements de texte ou logiciels de mise en page avancés et n’utiliser que celui proposé par le blog.
Copie du texte sur le blog Une fois le texte de l’article écrit il reste à le placer sur le blog. Pour cela il suffit de faire un copier-coller du texte de votre logiciel de traitement de texte vers le blog.

Sous le logiciel de traitement de texte (MSWORD) sélectionner tout le contenu [CTRL-A]
Copier le texte sélectionné dans le presse papier [CTRL-C]
Sur le blog, en mode création de message (écran précédent) basculer en mode ‘Modifier le code HTML’. Dans ce mode le texte est copié en mode ‘brut’ sans aucun attribut de mise en forme. Si vous restez en mode ‘Rédiger’ le texte conservera la mise en forme et le résultat ne sera pas celui demandé.
Cliquer dans la zone édition et ‘coller’ le contenu du presse papier [CTRL-V]. Normalement le texte apparaît dans la zone d’édition. Si ce n’est pas le cas, recommencez l’opération de ‘copier-coller’.

Mettre en forme le texte Pour cela il faut passer en mode ‘Rédiger’. La palette d’outils de Blogger permet les mises en forme de base.

Définitions des outils, de gauche à droite :
- Choix de la police 'sauf cas particulier, ne changez pas le paramètre par défaut)
- Taille de la police de caractère
- Sélection en mode 'gras'
- Sélection en mode italique
- Choix de la couleur du texte
- Insertion d'un lien http:// ou mailto:
- Format du paragraphe à gauche
- Format du paragraphe centré
- Format du paragraphe à droite
- Format du paragraphe justifié
- Insertion liste numérotée
- Insertion liste à puces (tabulation change le niveau hiérarchique)
- Mode citation
- Vérificateur orthographique
- Insertion d'une image (voir le chapitre suivant concernant ce mode)
- Suppression de la mise en forme de la sélection

Il faut se restreindre au minimum pour rester homogène avec les autres articles. La police de caractère utilisée par défaut n’est pas changée. Les titres sont simplement passés en ‘gras’ et le premier niveau en taille supérieure à la normale, les légendes d’images en taille inférieure.

Les couleurs des titres restent dans la palette du modèle (vert/bleu pour celui de nanoZine). Inspirez-vous des messages publiés. Il faut rester sobre, aller à l’essentiel et ne pas surcharger la mise en page, reprenez que les titres principaux et quelques points de important.

Les couleurs du modèle nanoZine :

TITRE 1 Vert Passage à la police de taille supérieure + Gras
TITRE 2 Bleu Police taille normale + Gras
TITRE 3 Rose Police taille normale

Remarque : Sous l’éditeur la couleur de fond de la zone de saisie est blanche alors que la couleur de fond du blog est différente, dans le cas du modèle nanoZine le fond est noir. Il faut donc imaginer l’effet produit par une couleur de police dans le contexte définitif. Il est intéressant de publier, ou de vérifier dans l’aperçu l’effet produit.
Les points importants du texte de l’article sont marqués en caractères gras, les légendes en italique sans attributs de couleurs.
L’outil ‘puces et numéros’ est assez utile, il permet d’ordonner les éléments d’une liste sur plusieurs niveaux.
Dans la plupart des cas les paragraphes peuvent être formatés en ‘justifié’ (c’est le cas ici). Pour faire cela il suffit de sélectionner l’ensemble du texte (CTRL-A) et de cliquer sur la puce ‘justifié’ de la mise en forme des paragraphes.

Une fonction manque : Annulation de la dernière action (Undo ou CTRL-Z), en cas de mauvaise manipulation il est impossible de revenir en arrière. L'outil gomme ne supprime que la mise en forme de la sélection. Alors prudence et faites des sauvegardes (publications) très régulièrement !

Note spéciale pour les auteurs de nanoZine : Les variétés animales sont classées et nommés selon le genre et l’espèce. Lorsqu’une espèce est citée le genre commence par une majuscule, l’espèce non. Les deux sont formatés en police italique par exemple : Lysmata amboinensis. Le genre d’une espèce non identifiée est suivi de sp. Lorsque l’on cite d’une manière générale toutes les espèces du genre, le nom de genre est alors suivi de spp. Même si cela vous semble contraignant, il est important de respecter ce formalisme de taxonomie.

Ajouter une image

2007-07-31T19:48:00.000+02:00

Insérer une image dans un partie du texte est essentiel, c’est malheureusement une opération un peu compliquée sous Blogger. Tout d’abord il est préférable de passer (ou rester) en mode ‘Rédiger’, l’aperçu HTML rendant encore plus délicat l’exercice.

Contrairement aux habitudes prises sur les forums, il est inutile de passer par un hébergeur d’images comme Hiboox, Imageshark, Mesimages, etc. Blogger dispose d’un espace d’hébergement de 1 Go/blog pour le stockage des images dans leur format natif.

La source de l’image à placer sur le blog peut être :

Soit sur un serveur internet (adresse http - URL Web), il s’agit dans ce cas d’une image publique,

Soit être locale à votre ordinateur, c’est le cas d’une image privée doit être chargée dans l’espace de stockage du blog.

Dans ce second cas il peut être nécessaire de ‘préparer’ l’image avant le transfert. En effet, la taille de l’image doit rester raisonnable pour ne pas allonger démesurément le temps de communication entre votre ordinateur et le serveur qui héberge le blog et aussi pour ne pas saturer l’espace de stockage commun. Vous devez utiliser un logiciel de traitement des images pour redimensionner celle-ci, par exemple au format 800x600 pixels. L’image doit être enregistrée au format JPEG.

L’ajout de l’image commence par un clic de souris sur le bouton ‘Insertion d’image’ de la barre d’outils, une fenêtre spéciale dédiée au transfert d’image est alors ouverte:

En fonction de la source vous indiquez le chemin de l’image : local ou internet. Pour le chemin local le bouton parcourir permet d’explorer votre ordinateur. Dans le cas d’une image internet il suffit de copier l’adresse http dans la case URL.
Choix de la mise en page. La meilleure solution, valable quelque sois la définition de l’écran de l’internaute, consiste à utiliser le mode CENTRER et la taille MOYEN. En effet les images peuvent se décaler par rapport au texte en fonction de la résolution de l’écran ; Choisir ce mode simplifie beaucoup la mise en page. C’est toujours le même principe : Faire simple, image centrée, taille standard, contribue à rendre le blog homogène entre les différents articles. La largeur de l’image en taille ‘MOYEN’ est de 320 pixels, c’est donc une image miniature que l’on voit avec le texte sur le blog et non pas l’image d’origine. L’image est automatiquement redimensionnée par Blogger selon le format choisi petit, moyen ou grand. Une fois la miniature sur le blog, l’image native reste disponible dans sa taille d’origine par un ‘clic de souris’ sur la miniature. C’est en effet un lien vers l’espace de stockage du blog.
Vous commencer le transfert en cliquant sur le bouton ENVOYER UNE IMAGE.
Le transfert se fait sans autre intervention de votre part. Cette première étape est donc assez simple. A la fin du transfert, et cela peut prendre quelques minutes, vous êtes averti et invité à cliquer sur le bouton TERMINE.
Le transfert terminé, l’image est placée en haut du corps de texte de l’article et non pas insérée au point du curseur ! Il faut donc déplacer l’image pour la placer à l’endroit voulu. La meilleure solution consiste à :
- Sélectionner l’image par un clic de souris sur celle-ci,
- Couper l’image (CTRL-X)
- Placer le curseur à l’endroit désiré et cliquer avec la souris sur ce point,
- Coller l’image (CTRL-V), celle-ci apparait alors au bon endroit.
Il faut répéter cette opération de déplacement pour chacune des images insérées. Avec l’expérience cela va heureusement assez vite. Il est aussi possible de la sélectionner en maintenant le clic droit et de la faire ‘glisser’ progressivement avec la souris mais cela est assez long même s’il est rassurant de ne pas perdre de vue l’image.

Nota : Une image placée sur internet peut être utilisée à votre insu, bien que cela soit illégal aucune garantie ne peut être donnée contre une utilisation abusive. Aussi la réduction du format permet de préserver le droit à l’image de son propriétaire s’il l’estime nécessaire. A l’inverse lorsque vous utilisez une image collectée sur internet, même si l’image est publique, il est normal de demander l’autorisation de son exploitation à son auteur, de citer la source de l’iconographie dans l’article (à défaut l’adresse URL), et d’utiliser le mode de transfert par image provenant du Web.

Exemple d’insertion d’image dans l’éditeur :

Le code 'source' en mode Modifier le code HTML :

Et le résultat après publication : édito nanoZine numéro 16 !

Renseigner l’article

2007-07-31T19:47:00.000+02:00

Le lecteur doit pouvoir identifier l’auteur de l’article, il est aussi intéressant d’apporter les renseignements utiles pour situer celui-ci rapidement. Ainsi pour nanoZine chaque article comporte au début du texte les renseignements suivants (formatés en Titre2) :

Rubrique : Vivant | Technique | Matériel | Astuces | ...
Auteur : Pseudo ou nom (un lien mailto:adresse_de_messagerie peut être ajouté)
Niveau : Débutant | Avancé | Tous

Avant la rédaction de votre premier article, étudiez bien le formalisme des articles déjà publiés.

Nota : Dans un blog collaboratif chacun des articles est publié sous la responsabilité de son auteur, il est ainsi justifié de signer. Alors qu'un travail de relecture est effectué pour un magazine papier, ce n’est pas nécessairement le cas de l’équipe rédactionnelle du blogzine.

Mise en forme avancée

2007-07-31T19:15:00.000+02:00

Blogger, en mode ‘Modifier le code HTML’ autorise les possibilités offertes par ce langage et aussi l’insertion de scripts (Java par exemple). Il faut cependant une bonne maîtrise pour ‘coder dans le texte’ sans le support apporté par des logiciels spécialisés comme Dreamweaver. Il est intéressant d'avoir quelques rudiments de HTML pour contourner les petits tracas dus à la rusticité de l’éditeur mais cela n’est pas indispensable.

Il faut reconnaître que Blogger ne comporte que peu de limitations ce qui est assez remarquable et qu’une solution de contournement en cas de problèmes est généralement possible.

Décrire les possibilités du langage HTML sort du cadre de ce tutoriel mais voici, à titre d’exemple : Comment encadrer un texte pour un néophyte. Un encart est effectivement une ressource abondamment utilisée dans la publication d’articles et il est intéressant de connaître l’astuce :

Passer en mode ‘Modifier le code HTML’
Repérer le texte et avant le texte à encadrer copier les balises d’ouvertures suivantes :

<table align="center" border="1" cellpadding="10" width="95%"> <tbody><tr><td>
Après le texte à encadrer copier les balises de fins suivantes :

</td ></tr ></tbody ></table >

La zone encadrée peut contenir texte et images mais il faut impérativement placer les balises de fermeture après la fin d’une zone de description d’image, ou plus simplement après un texte, pour éviter tout problème lors de la lecture du code HTML.

Un exemple sur nanoZine : Les systèmes récifaux naturels

Cette technique permet aussi la création de tableaux.
Voici le code HTML d'un tableau de 3 lignes et de 5 colonnes :

Après l'entête <TABLE> et <TBODY> vue précédemment, chaque ligne est identifiée par la commande <TR>. Chaque colonne est identifiée par la commande <TD> (ou <TH>; dans le cas de la premiere ligne si on souhaite la marquer par un titre de colonne).

Il est conseillé de supprimer les sauts de ligne pour éviter qu'il soient également placés dans le tableau. Ceux-ci ont été ajoutés pour faciliter la lecture et la compréhension de la structure du tableau.

Voici le résultat affiché par le browser :

COL 1	COL 2	COL 3	COL 4	COL 5
1	2	3	4	5
A	B	C	D	E

Autre exemple l’insertion d’une vidéo hébergée sur un serveur spécialisé. Ici également il suffit ‘d’entrer dans le code HTML’ pour placer la vidéo au sein de l’article. Dans cet exemple l’image est hébergée avec Google vidéo :

Il est nécessaire d’entrer l’adresse http du serveur hébergeant le film et éventuellement ajuster la hauteur (height :) ainsi que la largeur (width :) de l’image en pixels.

Il faut également noter que le modèle du blog est basé sur une feuille de style CSS et qu’une utilisation avancée bénéficie de la connaissance de ce modèle. A charge aux administrateurs du blog de communiquer le code source du modèle aux auteurs le demandant et aptes à l’exploiter.

Pour info : Vue de la vidéo (merci à Richard Parisot) :

Il reste à tester le résultat en publiant le message blog après avoir recopier la chaîne de caractères de vérification (anti-spam). Comme le travail s’effectue sur un blog ‘caché’ il n’y a aucun inconvénient à publier le message. Je conseille de vérifier le résultat avec Internet Explorer et Modzilla Firefox qui sont les principaux browsers Internet utilisés.

Derniers conseils pour votre rédaction

Essayez d’écrire des phrases courtes, sans double sens, faciles à lire et à comprendre.
Relisez-vous à voix haute.
Limitez l’emploi des acronymes et des mots complexes. Si cela est cependant nécessaire donnez-en le sens très simplement.
Vérifiez l’orthographe.

Fin de la première partie

J’espère avoir éclairci les quelques points nécessaires pour participer en tant que rédacteur à un blog collaboratif, maintenant… à vous de jouer !

JLC (Jean-louis Cuquemelle)

Plus d’info ? : Contact

PS : Votez pour la suite (menu latéral en haut à droite)