Créer son blog - Pour les débutantsSur ce site : créez votre blog en 5 minutes et publiez, échangez !2021-09-16T13:34:03+02:00Académie de Versaillesurn:md5:671e46fe7e5c5df2a8ca7402e4e0dda8DotclearInsérer des images dans un billeturn:md5:fae420bc7a02016a5652bb99da3a81ef2016-05-10T09:31:00+02:002016-09-07T16:38:15+02:00Martin GibonPour les débutants<p><em><strong>Avec les traitements de texte, on a pris l'habitude de copier/coller des images dans nos textes sans trop se poser de questions. Cette manière de faire reste possible avec les billets d'un blog. Elle pose cependant certaines contraintes légales et techniques qu'il faut avoir en tête. Voici quelques règles et astuces pour gérer facilement les images dans les billets de son blog.</strong></em></p> <p>Il existe trois méthodes pour insérer une image dans un billet:</p>
<ul>
<li><strong>Insérer une image depuis la médiathèque</strong>. C'est la technique la plus propre et la plus employée. Elle vous permet d'insérer vos propres images téléchargées depuis votre ordinateur.</li>
<li><strong>Insérer une image provenant d'un autre site Internet</strong>. Cette autre solution fonctionne mais vous dépendez du site source. Si l'image en est supprimée, alors elle disparait aussi sur votre billet. Attention à l'affichage avec les images trop grandes.</li>
<li><strong>Copier/coller une image depuis un autre site Internet</strong>. Cette technique est comparable à la précédente.</li>
</ul>
<p>Dans les trois cas, vous devez respecter le<strong> Droit d'auteur</strong> lié à cette image et faire attention<strong> au poids et à la taille</strong> de cette image.</p>
<h3>Importer une image dans la médiathèque</h3>
<p><strong>Les images doivent avoir une résolution de 72 dpi, une largeur ou une hauteur raisonnable (environ 1000 pixels au maximum) et un poids optimisé (ne dépassant pas les 300 ko pour les grandes images).</strong> Si ce n'est pas le cas, voir le billet <a class="ref-post" href="http://blog.ac-versailles.fr/index.php/post/Modifier-la-taille-ou-le-poids-d-une-image-avec-Photofiltre">Modifier la taille ou le poids d'une image avec Photofiltre.</a></p>
<p>Pour accéder à la médiathèque sur la page d'accueil de la console, cliquez sur cette icône:</p>
<p><img alt="Mediatheque2.PNG" class="media" src="http://blog.ac-versailles.fr/default/public/default/Billets_MAJ_2016/Mediatheque2.PNG" /></p>
<p>Ou dans le menu latéral, cliquez sur l'onglet <em>Médiathèque </em>:</p>
<p><img alt="Mediatheque.PNG" class="media" src="http://blog.ac-versailles.fr/default/public/default/Billets_MAJ_2016/Mediatheque.PNG" /></p>
<p><strong>Importer des images :</strong> Pour télécharger une image, il suffit d'utiliser le menu <em>Ajouter un fichier</em>.</p>
<figure style="float: left; margin: 0 1em 1em 0;"><img alt="[object Object]" class="media" height="218" src="http://blog.ac-versailles.fr/default/public/.importer-un-media_m.png" width="413" />
<figcaption> </figcaption>
</figure>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>Ce menu permet de télécharger plusieurs images à la fois. Une fois les images sélectionnées, cliquez sur<em><strong> Envoyer</strong></em>. Une barre de progression indique que le téléchargement s'est déroulé jusqu'au bout.</p>
<p><img alt="image_envoyee.PNG" class="media" src="http://blog.ac-versailles.fr/default/public/default/Billets_MAJ_2016/.image_envoyee_m.png" /></p>
<h3>Insérer une image de la médiathèque dans un billet</h3>
<p>Pour Insérer une image dans un billet, positionnez-vous à l'endroit où vous souhaitez insérer l'image et cliquez sur l'icône <strong><em>Sélecteur de média</em></strong>.</p>
<p><img alt="Selecteur_de_media.PNG" class="media" src="http://blog.ac-versailles.fr/default/public/default/Billets_MAJ_2016/Selecteur_de_media.PNG" /></p>
<p>Une seconde fenêtre s'ouvre. Allez dans le répertoire contenant votre image et sélectionnez la. Un menu vous permet de régler <strong>sa taille et sa position dans la zone de texte</strong> du billet.</p>
<p><img alt="options_insertion_image.PNG" class="media" src="http://blog.ac-versailles.fr/default/public/default/Billets_MAJ_2016/.options_insertion_image_m.png" /></p>
<p>Par défaut, votre image apparaît encadrée<strong> d'une zone grise et d'une légende</strong>. Vous pouvez supprimer cette zone grise et la légende. Pour cela, cliquez sur votre image et faites la glisser à un autre endroit. Cliquez ensuite sur la zone grise et supprimez la. Vous pouvez ensuite repositionner votre image au bon endroit.</p>
<h3>Insérer une image externe dans un billet</h3>
<p>Si vous souhaitez insérer une image provenant d'un autre site Internet, vous pouvez utiliser l'outil<em><strong> Image externe</strong></em>. Cliquez sur cette icône:</p>
<p><img alt="Image_externe.PNG" class="media" src="http://blog.ac-versailles.fr/default/public/default/Billets_MAJ_2016/Image_externe.PNG" /></p>
<p>Une fenêtre très simple s'ouvre. Copiez/collez l'adresse de l'image dans cette fenêtre. <strong>Attention !</strong> C'est l'adresse de l'image qu'il faut indiquer et non l'adresse de la page contenant la page. Pour connaître la bonne adresse, faites un clic droit sur l'image et cliquez ensuite sur <em><strong>Copier l'adresse de l'image</strong></em>.</p>
<p>Une fois l'image insérée dans votre page, vous pouvez encore la déplacer ou réduire sa taille en cliquant sur l'un des angles. Ainsi, la proportion <em>horizontal/vertical</em> sera conservée. N'oubliez pas de citer l'auteur et la source de l'image. Privilégiez les images libres de droit ou demandez une autorisation d'utilisation au site source ou au propriétaire de l'image.</p>
<h3>Finalement le copier/coller, ça marche ?</h3>
<p>Oui. depuis un autre site, cela revient au même que d'utiliser la fonction <em><strong>Image externe</strong></em>.</p>
<p>Attention! Il est fortement déconseillé de copier/coller une image depuis un document texte. Cela pose de gros problème au niveau de la base de données du blog.</p>Modifier très simplement l'apparence de votre blogurn:md5:143f93257ec3894a9571eadb0e70a31e2016-04-15T08:31:00+02:002016-05-18T15:52:07+02:00Johan PustochPour les débutants<p><em><strong>La plateforme académique permet de modifier l'apparence de votre blog en quelques clics. Pas la peine d'être graphiste pour que votre blog soit plus attrayant. Il vous faut simplement choisir parmi les 76 thèmes disponibles.</strong></em></p> <h3>Aller dans le menu <em>Apparence du blog</em></h3>
<p>Pour accéder au menu des thèmes, deux solutions :</p>
<p>1) sur la page d'accueil de la console d'édition, <strong>cliquez sur cette icône</strong>:</p>
<p><img alt="apparnce_1.PNG" class="media" src="http://blog.ac-versailles.fr/default/public/default/Billets_MAJ_2016/apparnce_1.PNG" /></p>
<p>2) dans le menu latéral, allez dans <strong><em>Mes favoris</em></strong> (en haut à gauche) puis cliquez sur <strong><em>Apparence du blog</em></strong>:</p>
<h3><img alt="Apparence2.PNG" class="media" src="http://blog.ac-versailles.fr/default/public/default/Billets_MAJ_2016/Apparence2.PNG" /></h3>
<h3>Sélectionnez un thème</h3>
<p><img alt="Liste_des_themes.PNG" class="media" height="333" src="http://blog.ac-versailles.fr/default/public/default/Billets_MAJ_2016/Liste_des_themes.PNG" width="829" /></p>
<p>Le premier thème est celui utilisé actuellement. Pour en appliquer un autre, <strong>choisissez le thème </strong>qui vous plaît dans la liste, puis cliquer sur:</p>
<p><img alt="utilisez.PNG" class="media" src="http://blog.ac-versailles.fr/default/public/default/Billets_MAJ_2016/utilisez.PNG" /></p>
<p>...Et c'est terminé. Vous avez modifié votre thème.</p>
<p>Pour voir le résultat, utilisez le lien tout en haut dans la console : <strong><em>Aller sur le site</em></strong>.</p>
<p><img alt="aller_sur_site.PNG" class="media" src="http://blog.ac-versailles.fr/default/public/default/Billets_MAJ_2016/aller_sur_site.PNG" /></p>
<p>Conseil : pour ouvrir cette nouvelle page, faites un clic droit sur le lien puis choisissez "<strong><em>Ouvrir le lien dans un nouvel onglet</em></strong>". Cela vous permet de faire des allers-retours entre la console d'administration du blog et la version visible par le public. Vous pouvez ainsi voir le résultat de vos modifications et comparer les différents thèmes "en direct". N'oubliez pas de rafraîchir la page à chaque modification (raccourci F5).</p>
<h3>Trois grandes catégories de thèmes</h3>
<p>Ce n'est pas forcément facile de se retrouver dans cette liste de thèmes. Voici donc trois grandes catégories dans lesquels on peut les classer.</p>
<p><strong>Les thèmes <em>responsives</em> :</strong> il s'agit d'une nouveauté depuis la mise à jour de la plateforme en mars 2016. Certains thèmes sont prévus pour s'adapter à la taille de l'écran. Il changera de forme ou de taille de police suivant qu'on consulte le site à l'aide d'un smartphone, d'une tablette ou d'un ordinateur de bureau. Ce type de thème est évidemment à privilégier.</p>
<p><strong>Liste des thèmes <em>responsives </em>:</strong><em> Berlin, dcBootstrap, dcChristmas, Ductile et Ductile Focus, Dust To Dawn, Fjalla, Grayscale et Simple Grayscale, dcBootstrap, Tablet theme, Time Flies, Terra Firma, zh2 et zh2-dark, Tabloid.</em></p>
<p><strong>Les Thèmes modifiables </strong>: lorsque l'un de ces thèmes est sélectionné, un bouton comme celui-ci apparaît :</p>
<p><img alt="Personnaliser.PNG" class="media" src="http://blog.ac-versailles.fr/default/public/default/Billets_MAJ_2016/Personnaliser.PNG" /></p>
<p>Vous pouvez modifier la taille, la couleur des polices et des fonds, changer la bannière etc. Ce n'est pas très compliqué. Il suffit de faire des essais. Certains thèmes sont <em>responsives</em> ("adaptatifs") et modifiables.</p>
<p><strong>Liste des thèmes modifiables :</strong><em> Blogjournal, Blowup, Custom theme (en css), Freshy v2 aussi un peu.</em><br />
<strong>Liste des thèmes modifiables et responsives :</strong> <em>Ductile, Ductile focus.</em></p>
<p><strong>Les autres thèmes</strong>: il s'agit des thèmes les plus anciens, les plus nombreux et les plus simples. Ils continuent cependant à bien fonctionner. S'ils vous plaisent, n'hésitez pas à vous en servir !!!</p>
<p> </p>Le billet : tout ce qu'il faut savoir sur l'écriture blogurn:md5:618f8e119aba84287cea629fbf294bb42016-04-15T08:31:00+02:002016-05-18T16:13:06+02:00Johan PustochPour les débutants<p><strong><em>Le blog est un outil libre. Aucune règle d'écriture n'est imposée. Mais n'oubliez pas que les internautes qui parcourent votre blog ne sont pas forcément disposés à vous lire. Surtout si vos billets sont des blocs de mille lignes ne contenant aucune image. Voici donc quelques règles de base venues du journalisme. Vous pouvez vous en inspirer afin d'attirer les lecteurs et leur donner envie de vous lire jusqu'au bout.</em></strong></p> <figure style="float: right; margin: 0 0 1em 1em;"><img alt="ecriture_web.jpg" class="media" src="http://blog.ac-versailles.fr/default/public/default/js/.ecriture_web_m.jpg" />
<figcaption> </figcaption>
</figure>
<h3>Tout commence par un titre</h3>
<p>Le titre est la première information lue. Elle doit correspondre au plus prés au contenu du billet. Un seul mot ne suffit pas. Il faut être plus précis. Inspirez vous des titres d’articles de presse. Vous trouverez deux grandes catégories :</p>
<p>-<strong> Les titres informatifs</strong> comme dans le journal <em>Le Monde</em>. Un style neutre, simple est synthétique. Le titre de ce billet est informatif.</p>
<p>- <strong>Les titres incitatifs</strong>, habituels au <em>Canard Enchaîné</em> ou au <em>Parisien</em>. Le titre de ce paragraphe est incitatif.</p>
<h3>Ensuite vient le Chapô</h3>
<figure style="float: left; margin: 0 1em 1em 0;"><img alt="Extrait.PNG" class="media" src="http://blog.ac-versailles.fr/default/public/default/Billets_MAJ_2016/Extrait.PNG" /></figure>
<p>Le chapô ou chapeau, c'est le résumé du billet. Dans l'interface de rédaction des blogs, cela s'appelle<strong> l'extrait</strong>. Il est très utile : Suivant l'habillage de votre blog, seul cet extrait peut apparaître sur la page d’accueil. Il faut donc l'écrire avec le plus grand soin pour qu'il donne envie de lire l'article tout en étant le plus précis possible sur le contenu de celui-ci.</p>
<h3>L'écriture des paragraphes</h3>
<p>Vous devez structurer votre pensée. Les paragraphes doivent se suivre de manière logique. Utilisez par exemple <strong>un plan en entonnoir</strong> en donnant les informations les plus importantes au début puis en précisant les détails à la fin. Utilisez <strong>une phrase d'accroche</strong> au début du premier paragraphe. Elle donne le ton de votre article.</p>
<p>Votre écriture doit rester simple:<strong> des phrases courtes ne contenant qu'une idée</strong>. Expliquez le vocabulaire complexe que vous employez. Essayez de conjuguer vos verbes au même temps d'un bout à l'autre du billet. Limitez l'usage des parenthèses.</p>
<p>Lorsque vous allez à la ligne en utilisant <strong>la touche </strong><em><strong>Entrée</strong></em>, un écart apparait entre votre nouvelle phrase et les précédentes. Utilisez cette information visuelle de manière cohérente: je passe à la ligne lorsque je change de sujet et pas avant.</p>
<h3>Les intertitres, les effets typographiques (le gras et l'italique)</h3>
<p>La lecture sur écran est encore moins linéaire que sur papier. Il faut donc donner des repères au lecteur afin qu'il puisse aller directement à l'information contenue dans la page qui l'intéresse. Utilisez pour cela les intertitres et les effets typographiques.</p>
<p>Au début de chaque paragraphe, il est possible d'insérer <strong>un intertitre</strong>. Pour faire facilement des intertitres, utilisez la liste des formats. C'est le menu déroulant en haut à gauche du traitement de texte: </p>
<figure style="display: inline-block;margin:0 .5em .5em 0;padding: 0.5em;">
<figcaption> </figcaption>
<img alt="format.PNG" class="media" src="http://blog.ac-versailles.fr/default/public/default/Billets_MAJ_2016/format.PNG" /></figure>
<p>Dans ce menu déroulant, vous trouverez une liste de titres hiérarchisés de 1 à 6. Pour cet article, j'ai utilisé <em>Titre 2</em> pour tous mes intertitres. Ainsi, tous vos intertitres auront la même taille, la même police et la même couleur dans tous vos billets.</p>
<p>Pour faire ressortir des éléments particuliers dans les paragraphes, utilisez les effets typographiques:<strong> le gras</strong> pour un élément clé,<strong> <em>l'italique</em></strong> pour une citation courte. Utilisez avec parcimonie<strong> les majuscules</strong>, la majuscule, C'EST LE CRI DU WEB !!! Évitez d'utiliser <u><strong>le souligné</strong></u>. Déjà peu fréquent dans les livres et les périodiques, il est presque absent du web. En effet, le souligné est généralement réservé aux liens hypertexte.</p>
<p>La nouvelle version du traitement de texte permet de faire varier la couleur des polices et de l'arrière plan du texte (surligné). Option plébiscitée par de nombreux collègues, elle a été ajoutée. L'usage de la couleur comme celui des effets typographiques, des sauts de ligne ou des intertitres doit être cohérent au sein des articles et entre chaque billet du blog. Au risque de perdre vos lecteurs... Si votre blog est une production collective, elle doit être collective jusqu'au bout: l'équipe doit se concerter sur l'emploi de toutes ces options afin de rendre la charte graphique du blog homogène.</p>
<h3>Images, vidéos, liens hypertextes et autres</h3>
<p><strong>L'emploi d'images est indispensable</strong>. Les illustrations égayent votre page et attirent l' œil du lecteur. Inutile de fabriquer des œuvres d'art. L'illustration de cette page a été faite en deux minutes à l'aide d'un téléphone. Pour l'utilisation des images, référez-vous à cet article: <a class="ref-post" href="http://blog.ac-versailles.fr/index.php/post/Images-traitement-integration">Insérer des images dans un billet</a> Encore mieux que les images: <strong>les vidéos, les quiz, les animations et autres médias</strong> provenant d'autres sites Internet. Ces médias utilisent <strong>le format Oembed</strong>. Pour mieux comprendre comment cela fonctionne, réfèrerez vous à ce billet:<span style="background-color:#FFFF00;"> </span><a class="ref-post" href="http://blog.ac-versailles.fr/index.php/post/Integrer-des-medias">Intégrer des médias</a>. Si vous fabriquez vos propres sons ou vidéos, cantonnez-vous à des formats courts. Le site <a href="http://www.24hdansuneredaction.com/">24 heures dans une rédaction</a> conseille de se limiter à<strong> une minute de son ou trois minutes de vidéos</strong> pour des illustrations d'articles. Enfin, <strong>les liens hypertexte</strong> permettent au lecteur d'aller à la source de vos informations ou de prolonger ses recherches sur les sites que vous lui suggérez. C'est l'essence même du web. Inutile pour autant d'en abuser. Pour fabriquer un lien hypertexte, c'est très simple. Copiez l'adresse du site vers lequel vous souhaitez envoyer le lecteur, sélectionnez ensuite dans votre billet le texte que vous souhaitez transformer en lien hypertexte. Cliquez enfin sur l'icône ci dessous et collez l'adresse copiée dans la fenêtre qui s'ouvre dans le champs <em>URL du lien</em>.</p>
<figure style="display: inline-block;margin:0 .5em .5em 0;padding: 0.5em;">
<figcaption><img alt="hypertexte.PNG" class="media" src="http://blog.ac-versailles.fr/default/public/default/Billets_MAJ_2016/hypertexte.PNG" /></figcaption>
</figure>
<h3>Pour aller plus loin</h3>
<p>Si vous souhaitez perfectionner votre écriture en ligne en vous inspirant du journalisme, il est vivement conseillé de parcourir l'excellent site<a href="http://www.24hdansuneredaction.com/"> 24 heures dans une rédaction</a> et en particulier ces trois articles:</p>
<ul>
<li><a href="http://www.24hdansuneredaction.com/web/4-lecriture-web-cest-quoi/">L'écriture web, c'est quoi?</a></li>
<li><a href="http://www.24hdansuneredaction.com/web/9-les-grands-principes-decriture/">Les grands principes d'écriture</a></li>
<li><a href="http://www.24hdansuneredaction.com/web/8-les-grands-principes-de-lecture/">Les grands principes de lecture</a></li>
</ul>
<p>24 heures dans une rédaction est un projet construit par <a href="http://www.cfi.fr/">Canal France International</a> et <a href="http://esj-lille.fr/">L'Ecole Supérieure de Journalisme de Lille</a>. Il est destiné aux étudiants en journalisme et aux professionnels souhaitant se perfectionner.</p>
<h3>Besoin de formation?</h3>
<p>L'académie de Versailles propose deux formations destinées aux blogs <strong>pour les enseignants du second degré</strong>:</p>
<ul>
<li><strong>Créer, animer un journal d'information en ligne</strong>. Orienté éducation aux médias et publication, ce stage de trois jours vous apprend à rédiger des articles, recadrer des images, fabriquer une bannière, insérer des vidéos et à configurer votre blog en vue d'en faire un journal scolaire.</li>
<li><strong>Créer, animer un site web ou un blog en équipe</strong>. Orienté technique, ce stage de trois jours présente les outils de publication en ligne les plus répandus dans notre académie: SPIP pour les sites web d'établissement et Dotclear, la plateforme de blogs académique. La plus grande partie du stage est consacrée à SPIP mais la logique de publication est identique avec Dotclear.</li>
</ul>
<p>Retrouvez ces formations sur <a href="https://bv.ac-versailles.fr/ipaf/">IPAF</a>.</p>
<p> </p>
<p> </p>
<p> </p>