Le blog sur les blogs du CCFD-Terre Solidaire - GuidesPrésentation de la plateforme de blogs du CCFD-Terre Solidaire, notifications techniques, aide en ligne, nouveautés...2020-11-06T15:48:49+00:00urn:md5:e5a4c617646e86d2174d565c8b0fc588DotclearComment bien (dé-)formater son texte pour interneturn:md5:f17211f0432f75b4d982fe715e1e7de32015-01-14T09:51:00+01:002015-01-14T09:55:11+01:00f.motteauGuides <p>Les personnes amenées à publier du contenu sur le web passent en général par un logiciel de traitement de texte tel que Word ou Writer pour la phase de rédaction, avant d'insérer le contenu sur les blogs. Ces logiciels sont familiers, plus conviviaux, et surtout ils permettent de sauvegarder régulièrement (voire de récupérer l'état du document en cas de coupure de courant intempestive...).</p>
<p>Cependant ces outils peuvent être la source de mauvaises surprises au moment du « coller ». En effet, pour définir la mise en forme du texte (police, taille, couleur…), ils insèrent dans le texte des informations absconses, invisibles dans la plupart des contextes mais qui peuvent, lors de l'insertion dans une page internet (et sous certaines conditions un peu techniques), apparaître et polluer la lecture, l'apparence de la page mais également son référencement...</p>
<p>Ainsi il a été constaté dernièrement que certains billets issus des blogs, lors de leur remontée sur le site principal, faisaient apparaître des informations de mise en forme issues de l'éditeur de texte qui avait été utilisé par les rédacteurs. Le problème ne se présentait pas sur les pages des blogs mais uniquement sur le site principal, et était donc impossible à détecter pour les rédacteurs.</p>
<h2>La solution : rajouter le filtre d'un éditeur de texte « simpliste » </h2>
<p>Rédiger son contenu sur un éditeur de texte évolué (Word, Writer…) est indispensable. Il faut donc, avant de faire le fameux Ctrl+C / Ctrl+V vers Dotclear, ajouter une étape qui supprimera toutes les informations de formatage invisibles ajoutées par votre éditeur.</p>
<p>Le moyen le plus rapide consiste à commencer par copier votre contenu dans un « éditeur basique », comme Bloc-Note pour Windows, Gedit pour Linux, TextEdit pour MacOS. Une fois votre texte collé dans cet éditeur, vous pouvez sereinement le « re-copier-coller » (à partir de l'éditeur basique) dans l'éditeur de texte de Dotclear, toutes les informations issues de l'éditeur évolué auront disparu. Cela implique que la mise en forme de votre texte doit impérativement être réalisée en utilisant l'éditeur de Dotclear et non votre éditeur préféré.</p>
<h2>Et les images ?</h2>
<p>De la même façon, les images dans les documents Word / Writer sont entourées de beaucoup d'informations de formatage susceptibles de polluer le contenu lors de la copie dans Dotclear. Il est donc nécessaire de passer par la procédure décrite dans le <a href="https://blog.ccfd-terresolidaire.org/admin/public/guide-blogs.pdf" hreflang="fr" title="Guide d'utilisation des blogs en PDF">guide d'utilisation des blogs</a>. </p>
<p>En résumé, si vous rédigez vos posts sous un éditeur de texte classique, pensez à toujours déformater votre texte en le collant sous Bloc-Note / Gedit / TextEdit avant de le coller sur Dotclear !</p>
<p>Bonne rédaction !</p>Nouvelle fonctionnalité sur les blogs : l'agendaurn:md5:cf7264a0cfab8bf072a4a899e8a493462014-09-09T12:25:00+02:002014-09-10T16:48:46+02:00f.motteauGuides <p>En fin de semaine nous ouvrirons sur tous les blogs la fonctionnalité agenda. Elle vous permettra de gérer des événements de n'importe quelle durée, éventuellement liés à des billets classiques, et pouvant être géolocalisés. Vous verrez donc apparaître dans la barre latérale droite des blogs un petit calendrier mensuel mettant en évidence les jours où un événement a été ajouté.</p>
<p>Tout comme les billets, chaque événement a sa page. L'internaute peut arriver sur la page d'un événement soit en cliquant sur le calendrier, soit via la page d'un billet lié à un événement. Sur ces pages, si les informations géographiques ont été renseignées, une carte Google Map indiquera le lieu de l'événement.</p>
<p>Toutes les informations pour s'y retrouver sont détaillées <a href="http://blog.ccfd-terresolidaire.org/admin/public/doc-agenda.pdf">ici</a> !</p>Comment ajouter une vidéo dans vos billetsurn:md5:b089fad7baf15afeea320d6cf2aabb932013-10-15T13:52:00+01:002013-10-15T13:52:00+01:00WebmasterGuides <p><strong>Mise à jour (15/10/2013) : suite à des mises à jour du moteur de blog (Dotclear), ce guide n'était plus à jour. Voici donc une méthode simplifiée, unique, qui devrait tout le temps fonctionner.</strong></p>
<p><img src="https://blog.ccfd-terresolidaire.org/admin/public/.vid2_m.jpg" alt="Vidéo" style="display:block; margin:0 auto;" title="Vidéo, nov. 2010" /></p>
<p><strong>Vous souhaitez mettre une vidéo hébergée sur Dailymotion ou Youtube (ou autres) dans un de vos billets? Voici comment faire.</strong></p>
<p>Rendez-vous d'abord sur la page de la vidéo, <a href="http://vimeo.com/37364473">celle-ci par exemple</a>. (Au passage, j'en profite pour vous signaler l'existence <a href="http://vimeo.com/ccfdterresolidaire/">du compte Vimeo du CCFD</a>, où vous pouvez trouver des vidéos de nos campagnes, de nos partenaires, etc...)</p>
<p>Dans une autre fenêtre, ouvrez l'administration du blog et créez un nouveau billet qui va accueillir votre vidéo.</p>
<p>Point important : avant de saisir quoi que ce soit dans votre billet, choisissez le format de texte <em>wiki</em> :</p>
<p><img src="https://blog.ccfd-terresolidaire.org/admin/public/.format_m.jpg" alt="Formats d'édition de billet" style="display:block; margin:0 auto;" title="Formats d'édition de billet, nov. 2010" /></p>
<p>Le premier mode, <strong>le xhtml</strong> , peut-être le plus intuitif, est celui auquel vous êtes probablement le plus habitué : il affiche le formatage du texte dès que vous l'appliquez (vous voyez donc le texte en gras, quand vous cliquez sur le bouton gras).</p>
<p>Le second mode, <strong>wiki</strong>, est peut-être moins intuitif, mais il est plus propre et l'insertion de vidéo y est plus aisée. Quand vous y formatez le texte, vous ne voyez pas directement les différentes mises en formes, mais des balises qui vous paraîtront peut-être un peu surprenantes. Par exemple, au lieu de voir <strong>du texte en gras</strong>, vous verrez _du texte en gras_. Le résultat est le même pour les visiteurs de votre blog.</p>
<p>Attention : une fois le mode wiki sélectionné, ne changez pas de mode pour revenir au xhtml.</p>
<p>Préparez tout d'abord l'emplacement de votre vidéo dans votre billet en tapant ces deux lignes:</p>
<blockquote><p>///html</p></blockquote>
<blockquote><p>///</p></blockquote>
<p>Vous allez ensuite récupérer le code d'insertion de la vidéo sur la plateforme de vidéo (Viméo, Dailymotion, Youtube, la plupart du temps).</p>
<p>Que ce soit sur Dailymotion ou Youtube, il vous est proposé un code à copier/coller pour afficher la vidéo ailleurs. Ce code peut s'appeler <em>code d'intégration</em> ou <em>Embed Code</em> dans la langue de Shakespeare... A l'heure de l'écriture de ce billet, il faut cliquer sur un bouton <em>Intégrer</em> sur Youtube pour obtenir ce code. Les différentes plateformes de vidéo proposent maintenant des codes pour personnaliser le lecteur vidéo (la taille de la vidéo, les couleurs des boutons, etc). Les sites de vidéo modifient souvent leurs interfaces et les fonctionnalités, mais le principe reste de toute façon le même... Pour Vimeo, il faut appuyer sur le bouton "Share" sur la vidéo puis choisir le code appelé "embed" (qui signifie donc "intégrer").</p>
<blockquote><p><iframe src="//player.vimeo.com/video/37364473?byline=0" width="705" height="397" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/37364473">Christian, bénévole au CCFD-Terre Solidaire, présente Bouge Ta Planète</a> from <a href="http://vimeo.com/ccfdterresolidaire">CCFD-TerreSolidaire</a> on <a href="https://vimeo.com">Vimeo</a>.</p></p></blockquote>
<p>Cela peut paraître un peu barbare, certes, mais ne vous en préoccupez pas. Vous aurez juste à le coller sans y toucher. Collez-le donc entre ///html et /// que vous avez tapé précédemment. Vous obtenez ça:</p>
<blockquote><p>///html</p></blockquote>
<blockquote><p><iframe src="//player.vimeo.com/video/37364473?byline=0" width="705" height="397" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/37364473">Christian, bénévole au CCFD-Terre Solidaire, présente Bouge Ta Planète</a> from <a href="http://vimeo.com/ccfdterresolidaire">CCFD-TerreSolidaire</a> on <a href="https://vimeo.com">Vimeo</a>.</p></p></blockquote>
<blockquote><p>///</p></blockquote>
<p>Et c'est tout.</p>
<p>La vidéo est insérée et vous n'aurez - normalement - pas de mauvaise surprise. Enregistrez votre billet normalement.</p>
<p>C'est terminé, voilà le résultat :</p>
<iframe src="//player.vimeo.com/video/37364473?byline=0" width="705" height="397" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/37364473">Christian, bénévole au CCFD-Terre Solidaire, présente Bouge Ta Planète</a> from <a href="http://vimeo.com/ccfdterresolidaire">CCFD-TerreSolidaire</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
Un livret pour prendre en main votre blogurn:md5:cb6015b8c4e10705839ecceea47a93c32013-06-04T15:23:00+01:002013-06-04T15:23:00+01:00WebmasterGuides <p><a hreflang="fr" href="https://blog.ccfd-terresolidaire.org/old/bfc/post/2013/05/21/La-formation-blog-des-b%C3%A9n%C3%A9voles-!">la dernière formation régionale qui a été organisée, en Bourgogne-Franche-Conté</a>, un livret a été distribué aux participant-e-s qui complète de manière très utile <a hreflang="fr" href="https://blog.ccfd-terresolidaire.org/admin/post/2011/09/30/Guide-d-utilisation-de-la-plateforme">le guide déjà diffusé par nos soins</a>. Il me semble utile de vous le proposer : très graphique, il conviendra peut-être mieux à certaines personnes. N'hésitez-donc pas à le consulter et à le distribuer pour la prise en main de votre blog.</p>
Voici le lien pour le télécharger:<br />
<p><a hreflang="fr" href="https://blog.ccfd-terresolidaire.org/admin/public/Livret_explicatif.pdf">Livret explicatif pour la prise en main des blogs</a><a hreflang="fr" href="https://blog.ccfd-terresolidaire.org/admin/public/Livret_explicatif.pdf">Livret explicatif pour la prise en main des blogs</a></p>
<p>Bonne lecture et un grand merci à Anabelle et Emilie pour ce livret et pour l'organisation de la formation!</p>Comment proposer un document en téléchargement avec une vignette?urn:md5:2bc025b46fc0a37082b8da2f8677a40b2012-02-28T09:07:00+00:002012-02-28T10:02:27+00:00WebmasterGuides <p>La question revenant souvent, voici un petit guide pour vous expliquer, pas à pas, comment proposer un document (par exemple une affiche au format pdf) gràce à un lien sur une image (par exemple une vignette de la miniature de l'affiche ou de la première page d'un document). Par défaut, les documents sont proposés en lien textuel simple, mais cela ne suffit manifestement pas à vos envies de créations. Néanmoins, gardez bien en tête qu'il faut commencer par maitriser les manipulations de base avant de vous lancer dans des choses plus compliquées. <a href="https://blog.ccfd-terresolidaire.org/admin/post/2011/09/30/Guide-d-utilisation-de-la-plateforme">Le guide d'utilisation de la plateforme</a> est là pour ça ;)</p>
<p><strong>NB: si ce que vous voulez proposer en téléchargement n'est pas un document pdf ou word, mais une image, alors, pas besoin de faire tout ça, insérez une image normalement, comme dans le guide. Et à la dernière étape, choisissez "en tant que lien vers l'image originale" (c'est utile tout particulièrement si votre image provient directement d'un appareil photo numérique et est donc très lourde).</strong></p>
<p><img title="Capture_du_2012-02-28_11_10_12.png, fév. 2012" style="margin: 0 auto; display: block;" alt="Capture_du_2012-02-28_11_10_12.png" src="https://blog.ccfd-terresolidaire.org/admin/public/Capture_du_2012-02-28_11_10_12.png" /></p>
<h2>Insérer l'image qui va servir pour le lien</h2>
<p>Il vous faut d'abord insérer l'image tout à fait normalement. La "machine" ne pouvant pas deviner quelle image vous voulez mettre, il vous faut donc d'abord préparer cette image. Soit elle existe déjà, soit vous allez devoir la créer.</p>
<p>Voyons ici un cas fréquent avec comme exemple <a href="http://ccfd-terresolidaire.org/careme/2012/img/dp_careme2012.pdf">le pdf du dossier de presse du carême 2012</a> pour lequel on va commencer par récupérer la couverture. Il y a des moyens plus "pro" de le faire, nous allons plutôt voir le plus simple.</p>
<p>Commencez par ouvrir normalement votre document. Arrangez la fenêtre pour afficher la page de couverture en entier. Faites une capture d'écran. Pour ce faire, utilisez la touche nommée "<em>Impr écran</em>" qui doit se trouver quelque part en haut à droite sur votre clavier (dans la majorité des cas).</p>
<p><img title="Impr. écran, fév. 2012" style="margin: 0 auto; display: block;" alt="Impr. écran" src="https://blog.ccfd-terresolidaire.org/admin/public/print.jpg" />Quand vous appuyez dessus, il ne se passe rien de visible. C'est normal. Ce que vous voyez à l'écran a été copié. Il ne vous reste plus qu'à coller ceci dans un éditeur d'image. Si vous êtes sur Windows, il y a Paint (pas génial), mais vous pouvez <a href="http://gimp-win.sourceforge.net/stable.html">installer GIMP</a>, qui est un équivalent libre du célèbre (et coûteux) logiciel de retouche d'image Photoshop.</p>
<p>Ouvrez donc votre logiciel de graphisme préféré puis collez votre capture d'écran (sous certains, il vous faudra au préalable créer une nouvelle image vide pour coller dedans, d'autres logiciels vous proposent de "coller comme nouvelle image" directement).</p>
<p><img title="Capture_du_2012-02-28_10_11_33.png, fév. 2012" style="margin: 0 auto; display: block;" alt="Capture_du_2012-02-28_10_11_33.png" src="https://blog.ccfd-terresolidaire.org/admin/public/.Capture_du_2012-02-28_10_11_33_m.jpg" /></p>
<p>Découpez seulement la couverture et réduisez l'image à la taille que vous voulez afficher. Dans l'exemple, j'ai réduit l'image à 200 pixels de largeur:</p>
<p><img title="Capture_du_2012-02-28_10_14_29.png, fév. 2012" style="margin: 0 auto; display: block;" alt="Capture_du_2012-02-28_10_14_29.png" src="https://blog.ccfd-terresolidaire.org/admin/public/.Capture_du_2012-02-28_10_14_29_m.jpg" /> Maintenant, enregistrer votre nouvelle image et insérer la normalement dans votre billet :<img title="couv.png, fév. 2012" style="margin: 0 auto; display: block;" alt="couv.png" src="https://blog.ccfd-terresolidaire.org/admin/public/couv.png" /></p>
<h2>Créez un lien sur cette image vers votre document</h2>
<p>A partir de maintenant, il va falloir ruser un peu par rapport au fonctionnement normal. Il va vous falloir récupérer l'URL (l'adresse, donc) de votre document pdf et insérer un lien vers cette URL sur votre image.</p>
<p>Commencez par charger normalement votre document dans le Gestionnaire de média. Sauvegardez votre billet. Et ouvrez le gestionnaire de médias (à gauche dans le menu "blog").</p>
<p>Comme d'habitude, passez par le bloc "ajouter des fichiers", choisissez votre document, "cliquez sur envoyer".</p>
<p>Cliquez ensuite sur votre document. S'affiche alors les détails du fichier, et en particulier, ce que vous recherchez: <strong>l'URL du fichier</strong>.</p>
<p><img title="Capture_du_2012-02-28_10_42_19.png, fév. 2012" style="margin: 0 auto; display: block;" alt="Capture_du_2012-02-28_10_42_19.png" src="https://blog.ccfd-terresolidaire.org/admin/public/.Capture_du_2012-02-28_10_42_19_m.jpg" /></p>
<p>Copiez cette URL.</p>
<p>Ensuite retournez dans votre billet.</p>
<p>Cliquez sur l'image (NB: il faut bien que l'image soit sélectionnée : un cadre apparaît).</p>
<p><img title="Capture_du_2012-02-28_10_44_44.png, fév. 2012" style="margin: 0 auto; display: block;" alt="Capture_du_2012-02-28_10_44_44.png" src="https://blog.ccfd-terresolidaire.org/admin/public/.Capture_du_2012-02-28_10_44_44_m.jpg" /></p>
<p>Ensuite cliquez sur le bouton "Lien" de la barre d'outil.</p>
<p><img title="lien.jpg, fév. 2012" style="margin: 0 auto; display: block;" alt="lien.jpg" src="https://blog.ccfd-terresolidaire.org/admin/public/lien.jpg" />Dans la fenêtre qui s'ouvre, collez l'URL de votre fichier. Puis cliquez sur insérer.</p>
<p><img title="Capture_du_2012-02-28_10_48_51.png, fév. 2012" style="margin: 0 auto; display: block;" alt="Capture_du_2012-02-28_10_48_51.png" src="https://blog.ccfd-terresolidaire.org/admin/public/Capture_du_2012-02-28_10_48_51.png" />Enregistrez votre billet.</p>
<p>Voilà le résultat.</p>
<p><a href="https://blog.ccfd-terresolidaire.org/admin/public/dp_careme2012.pdf"><img title="couv.png, fév. 2012" style="margin: 0 auto; display: block;" alt="couv.png" src="https://blog.ccfd-terresolidaire.org/admin/public/couv.png" /></a></p>Guide d'utilisation de la plateformeurn:md5:6681b9dcd9fd12122f89e250bdad2e0c2011-09-30T10:40:00+01:002011-09-30T10:40:00+01:00WebmasterGuides <p><img src="https://blog.ccfd-terresolidaire.org/admin/public/.guide_s.jpg" alt="Guide" style="display:block; margin:0 auto;" title="Guide, sept. 2011" /></p>
<p><strong>Vous l'attendiez, il est sorti! C'est le guide d'utilisation des blogs que nous vous avions promis...</strong></p>
<p>Ce n'est qu'une première ébauche et nous attendons avec impatience vos retours sur ce guide, qui servira de support aux formations. Si des passages ne sont pas suffisamment clairs, s'il manque des choses, n'hésitez pas à nous le dire et nous l'améliorerons.</p>
<p>Au sommaire:</p>
<ul>
<li>Qu'est-ce qu'un blog ?</li>
<li>Comment trouver les blogs du CCFD-Terre Solidaire ? (normalement, si vous êtes ici, c'est que ce chapitre ne vous concerne pas ;) )</li>
<li>Comment se présente votre blog ?</li>
<li>Comment alimenter et mettre à jour le blog ?</li>
<li>Comment écrire un billet ?</li>
<li>Comment ajouter une image dans un billet ?</li>
<li>Utilisateurs et droits</li>
<li>Comment utiliser les catégories et les tags ?</li>
<li>Exemple de l'utilisation des catégories sur un blog régional</li>
<li>Quelques considérations éditoriales et légales</li>
</ul>
<p>Plusieurs choses ne sont pas encore décidées et ne sont donc pas précisées dans ce guide, mais il sera régulièrement mis à jour...</p>
<p>Bonne lecture !</p>
<p>J'ai failli oublier, pour télécharger le guide, c'est là:</p>
<p><a href="https://blog.ccfd-terresolidaire.org/admin/public/guide-blogs.pdf">Guide de l'utilisation des blogs<img src="https://blog.ccfd-terresolidaire.org/admin/public/.pdf_t.jpg" alt="PDF" style="display:block; margin:0 auto;" title="PDF, sept. 2011" /></a></p>Le nouvel habillage "50 ans" pour les blogs est prêturn:md5:b6c05bb1ed323d171e53d7d12d74ecae2010-11-22T10:31:00+00:002011-01-24T15:44:28+00:00WebmasterGuides Chose promise, chose due : le thème pour les 50 ans est prêt. Et d'ailleurs, si vous lisez ces lignes, vous le constaterez.<br /><img title="Thème 50 ans pour les blogs du CCFD-Terre Solidaire, nov. 2010" style="margin: 0 auto; display: block;" alt="Thème 50 ans pour les blogs du CCFD-Terre Solidaire" src="https://blog.ccfd-terresolidaire.org/admin/public/.theme50_m.jpg" /><br /><br />Le design est une adaptation de <a hreflang="fr" href="http://www.melozik.com/pages/Magazeen-Dotclear-2">ce thème</a> (lui même adapté de Magazeen par<a href="http://www.smashingmagazine.com/" hreflang="en"> SmashingMagazine</a> & <a href="http://www.wefunction.com/">WeFunction </a>) mis aux couleurs des 50 ans. Voilà pour ce qui est des crédits.<br /><br />Il y aura probablement des choses à caler et j'aurais besoin pour ça de vos retours : n'hésitez donc pas à m'en faire part par email ou dans les commentaires.<br /><br />Passons maintenant à ce qui vous intéresse probablement plus.<br /><br /><h3>Comment installer ce thème?</h3>
Quand vous vous connectez à l'espace d'administration de votre blog, vous devez voir un petit bouton qui ressemble à ça :<br /><img title="Apparence du blog, nov. 2010" style="margin: 0 auto; display: block;" alt="Apparence du blog" src="https://blog.ccfd-terresolidaire.org/admin/public/app.jpg" />Cliquez dessus et vous aurez alors accès aux différents thèmes disponibles pour le blog. Cliquez sur le thème des 50 ans puis, sur la droite, cliquez sur "Utilisez ce thème" :<br /><img title="Utiliser ce thème, nov. 2010" style="margin: 0 auto; display: block;" alt="Utiliser ce thème" src="https://blog.ccfd-terresolidaire.org/admin/public/utiliser.jpg" />C'est terminé, votre blog est maintenant aux couleurs du cinquantenaire du CCFD-Terre Solidaire !<br />(si la modification ne s'affiche pas instantanément, rechargez simplement la page dans votre navigateur)<br /><br />