{"id":4773,"date":"2021-03-17T16:07:26","date_gmt":"2021-03-17T15:07:26","guid":{"rendered":"https:\/\/graphizm.fr\/greta\/?p=4773"},"modified":"2025-10-26T00:24:26","modified_gmt":"2025-10-25T22:24:26","slug":"modes-publication-web","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/fcs\/modes-publication-web\/","title":{"rendered":"Les modes de publication en ligne"},"content":{"rendered":"\n<p class=\"has-subtle-background-background-color has-background\">Dans ce cours vous allez <strong>inventorier et tester plusieurs modes de publication de contenus sur le Web<\/strong>. Il sera question de plateformes d&rsquo;\u00e9dition et de publication auto-h\u00e9berg\u00e9e, d&rsquo;\u00e9diteurs WYSIWYG, de langage et d&rsquo;\u00e9diteurs Markdown. Ce cours vous permettra d&rsquo;avoir un premier aper\u00e7u des formes de publication en ligne les plus simples.<\/p>\n\n\n\n<p>Pour tirer profit de ce cours, vous devez avoir suivi les cours intitul\u00e9s <a rel=\"noreferrer noopener\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/fonctionnement-web\/\" target=\"_blank\">Le fonctionnement du Web<\/a> et <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/greta\/fcs\/contenu-dossier-page-web\/\" target=\"_blank\">Contenu d&rsquo;un dossier de page Web<\/a>.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Sommaire<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #6b6b6b;color:#6b6b6b\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #6b6b6b;color:#6b6b6b\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/modes-publication-web\/#Utiliser_une_plateforme_dedition_en_ligne\" >Utiliser une plateforme d&rsquo;\u00e9dition en ligne<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/modes-publication-web\/#Utiliser_la_plateforme_Netboard\" >Utiliser la plateforme Netboard<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/modes-publication-web\/#Utiliser_Google_Sites\" >Utiliser Google Sites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/modes-publication-web\/#Autres_plateformes_de_publication_en_ligne\" >Autres plateformes de publication en ligne<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/modes-publication-web\/#Utiliser_un_editeur_WYSIWYG\" >Utiliser un \u00e9diteur WYSIWYG<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/modes-publication-web\/#Utiliser_des_editeurs_WYSIWYG_gratuits\" >Utiliser des \u00e9diteurs WYSIWYG gratuits<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/modes-publication-web\/#Utiliser_un_editeur_Markdown\" >Utiliser un \u00e9diteur Markdown<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/modes-publication-web\/#Autres_editeurs_Markdown\" >Autres \u00e9diteurs Markdown<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/modes-publication-web\/#La_personnalisation_des_pages_HTML_exportees\" >La personnalisation des pages HTML export\u00e9es<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/modes-publication-web\/#Utiliser_dautres_modes_de_publication_en_ligne\" >Utiliser d&rsquo;autres modes de publication en ligne<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/modes-publication-web\/#Utiliser_des_frameworks_CSS\" >Utiliser des frameworks CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/modes-publication-web\/#Utiliser_des_CMS_sans_base_de_donnees\" >Utiliser des CMS sans base de donn\u00e9es<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/modes-publication-web\/#Utiliser_des_CMS_classiques_et_des_plateformes_de_creation_de_sites\" >Utiliser des CMS classiques et des plateformes de cr\u00e9ation de sites<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utiliser_une_plateforme_dedition_en_ligne\"><\/span>Utiliser une plateforme d&rsquo;\u00e9dition en ligne<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Le moyen le plus simple de publier des contenus sur le Web est d&rsquo;utiliser les services cl\u00e9s en main de plateformes<\/strong> proposant \u00e0 la fois des outils d&rsquo;\u00e9dition intuitifs et un h\u00e9bergement automatique des contenus \u00e9dit\u00e9s. Je vous propose d&rsquo;en examiner deux plus attentivement&nbsp;: <strong>Netboard et Google Sites<\/strong>.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Ne vous illusionnez pas, <strong>il faut consacrer un peu de temps \u00e0 la prise en main de ces plateformes<\/strong>. Pour r\u00e9aliser des sites satisfaisants, il va vous falloir faire des essais, produire des contenus adapt\u00e9s, choisir des images, etc. <strong>Vous gagnerez un peu de temps en utilisant les mod\u00e8les propos\u00e9s<\/strong> sans chercher, dans un premier temps, \u00e0 les modifier.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utiliser_la_plateforme_Netboard\"><\/span>Utiliser la plateforme Netboard<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Netboard se pr\u00e9sente comme <strong>un outil en ligne gratuit et facile \u00e0 prendre en main pour collecter, organiser et partager tout contenu Web<\/strong>. Il s&rsquo;agit de publier ses textes, images, liens, vid\u00e9os, documents annexes, etc. sous forme de blocs d&rsquo;infos (fiches ou cartes) rang\u00e9s dans des onglets.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Un site Netboard complet d\u00e9taille<strong> le mode d&#8217;emploi de la plateforme<\/strong> : <a href=\"https:\/\/jmd85.netboard.me\/presentation\/?tab=132247\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/jmd85.netboard.me\/presentation\/?tab=132247<\/a><\/p>\n\n\n\n<p>\u279c Si vous souhaitez avoir un bon aper\u00e7u sur Netboard, je vous propose de <strong>visionner la vid\u00e9o ci-dessous<\/strong> \u2014 <em>un prof d&rsquo;anglais explique \u00e0 d&rsquo;autres profs comment utiliser Netboard<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Netboard, un mur virtuel collaboratif!\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/txlpK6cqICc?start=465&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Netboard peut donc servir \u00e0&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>regrouper et partager des collections de liens<\/strong> (veille informationelle)<\/li>\n\n\n\n<li><strong>organiser et structurer la pr\u00e9sentation de contenus p\u00e9dagogiques<\/strong> (en tant qu&rsquo;apprenant ou en tant qu&rsquo;enseignant)<\/li>\n\n\n\n<li><strong>regrouper en mode collaboratif des documents<\/strong> sur une th\u00e9matique <\/li>\n\n\n\n<li><strong>rassembler et partager une documentation<\/strong> sur un sujet pr\u00e9cis<\/li>\n\n\n\n<li><strong>maquetter un site Web en testant la r\u00e9partition des contenus<\/strong> sous diff\u00e9rents onglets<\/li>\n\n\n\n<li>etc.<\/li>\n<\/ul>\n\n\n\n<p>En utilisant des dispositions de contenus simplifi\u00e9es et des \u00ab\u00a0skins\u00a0\u00bb sobres, vous pouvez donner \u00e0 vos sites Netboard une apparence simple et fonctionnelle.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utiliser_Google_Sites\"><\/span>Utiliser Google Sites<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Google Sites permet de publier des contenus sous une forme visuelle tr\u00e8s diff\u00e9rente des sites Netboard. Le r\u00e9sultat s&rsquo;apparente davantage \u00e0 un site \u00ab\u00a0professionnel\u00a0\u00bb. Le revers de la m\u00e9daille est <strong>une multiplicit\u00e9 d&rsquo;options de personnalisation<\/strong> pouvant para\u00eetre complexes de prime abord.<\/p>\n\n\n\n<p>Il est n\u00e9cessaire d&rsquo;<strong>avoir bien pr\u00e9par\u00e9 son projet de publication en amont<\/strong> pour tirer parti de toutes les fonctionnalit\u00e9s propos\u00e9es. Google propose quelques mod\u00e8les \u00e0 personnaliser. <strong>N&rsquo;h\u00e9sitez pas \u00e0 utiliser ces mod\u00e8les<\/strong> pour mettre au point votre premier site.<\/p>\n\n\n\n<p>Vous trouverez <strong>une documentation d\u00e9taill\u00e9e sur <a rel=\"noreferrer noopener\" href=\"https:\/\/support.google.com\/sites\/answer\/6372878?hl=fr&amp;ref_topic=7184580\" target=\"_blank\">le centre d&rsquo;aide de Google<\/a><\/strong>. La vid\u00e9o ci-dessous montre la r\u00e9alisation d&rsquo;un site de quelques pages en une vingtaine de minutes, r\u00e9sum\u00e9es par l&rsquo;auteure (Lou) en 6 minutes 30. Lou est habitu\u00e9e \u00e0 la publication en ligne, l&rsquo;interface de Google Sites lui est familier. De plus, elle a pris le temps de produire plusieurs autres sites avec Google Sites avant d&rsquo;en faire la pr\u00e9sentation sur YouTube.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"\ud83c\udf10 [tuto] Cr\u00e9er un site avec la nouvelle version de #googlesites\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/uLiw4tpUkis?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>\u279c Google site m\u00e9riterait qu&rsquo;on lui consacre un cours entier. L&rsquo;essentiel \u00e0 retenir est qu&rsquo;<strong>il existe des moyens de publier des contenus en ligne sans avoir \u00e0 saisir une seule ligne de code<\/strong> ni \u00e0 transf\u00e9rer manuellement des fichiers sur un serveur distant.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Vous trouverez en ligne des tutoriels plus d\u00e9taill\u00e9s (attention de bien s\u00e9lectionner les articles les plus r\u00e9cents car l&rsquo;\u00e9diteur classique n&rsquo;est plus disponible depuis novembre 2020). Voici un exemple de <strong>tuto assez complet<\/strong> : <a href=\"https:\/\/fr.techtribune.net\/google\/google-sites-comment-utiliser-le-createur-de-site-web-de-google\/102077\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/fr.techtribune.net\/google\/google-sites-comment-utiliser-le-createur-de-site-web-de-google\/102077\/<\/a><br><br>D&rsquo;autres vid\u00e9os vous sont propos\u00e9es sur YouTube&nbsp;:<br>\u2022 <a href=\"https:\/\/www.youtube.com\/watch?v=N2hr8kelNdU\" target=\"_blank\" rel=\"noreferrer noopener\">Comment Utiliser Google Sites<\/a> (r\u00e9alis\u00e9e peut-\u00eatre avec une voix ia)<br>\u2022 <a href=\"https:\/\/www.youtube.com\/watch?v=IKEpJ0xwJe0\" target=\"_blank\" rel=\"noreferrer noopener\">Cooment faire un site internet avec Google Sites<\/a> (plus ancien mais avec une pr\u00e9sence plus cr\u00e9dible&#8230;)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Autres_plateformes_de_publication_en_ligne\"><\/span>Autres plateformes de publication en ligne<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Padlet<\/h4>\n\n\n\n<p>Padlet est une plateforme de <strong>publication de tableaux<\/strong> ou \u00ab\u00a0padlets\u00a0\u00bb \u00e0 usage initialement acad\u00e9mique. Au del\u00e0 de trois tableaux, le service est payant (la cr\u00e9ation de 20 tableaux revient \u00e0 environ 10 euros par mois). La prise en main de l&rsquo;outil est tr\u00e8s rapide.<\/p>\n\n\n\n<p>La diversit\u00e9 des mod\u00e8les de tableaux encourage une publication sous diverses formes.<\/p>\n\n\n\n<p><a href=\"https:\/\/padlet.com\/yvesgoguely\/sitePadlet\">https:\/\/padlet.com\/yvesgoguely\/sitePadlet<\/a> (mod\u00e8le personnalis\u00e9 de blog)<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Canva<\/h4>\n\n\n\n<p>Canva est une plateforme d&rsquo;\u00e9dition plurim\u00e9dia permettant de r\u00e9aliser de tr\u00e8s nombreux produits de communication. La platefome est utilisable gratuitement mais de nombreuses fonctions sont alors inaccessibles. L&rsquo;abonnement annuel se monte \u00e0 110 euros par an (9,17 euros par mois).<\/p>\n\n\n\n<p> Canva permet notamment de cr\u00e9er des site Web. Les sites Web de Canva se pr\u00e9sentent sous forme de site \u201conepage\u201d divis\u00e9s en section. De nombreux mod\u00e8les sont propos\u00e9s pour guider la mise en forme.<\/p>\n\n\n\n<p><a href=\"https:\/\/urls.fr\/OtrnTP\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/urls.fr\/OtrnTP<\/a> (mod\u00e8le de portfolio)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utiliser_un_editeur_WYSIWYG\"><\/span>Utiliser un \u00e9diteur WYSIWYG<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u00c0 partir du moment o\u00f9 vous envisagez de <strong>mettre en ligne vos contenus en utilisant les services d&rsquo;un h\u00e9bergeur<\/strong>, vous aurez \u00e0 produire des pages HTML. Il vous faudra ensuite transf\u00e9rer ces pages chez votre h\u00e9bergeur. <strong>Vous utiliserez pour cela un outil (nomm\u00e9 client FTP) tel que Filezilla<\/strong>. Voyez le cours consacr\u00e9 \u00e0 l&rsquo;<a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/greta\/fcs\/utiliser-filezilla\/\" target=\"_blank\">utilisation de Filezilla<\/a>.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">Nous reviendrons plus tard \u00e0 cette \u00e9tape incontournable et aux solutions alternatives qui permettent aux internautes de lire vos pages HTML via une adresse Web valide.<br>\u279c En attendant vous vous contenterez de <strong>lire vos pages HTML directement sur vos postes de travail<\/strong>, avec votre navigateur pr\u00e9f\u00e9r\u00e9.<\/p>\n\n\n\n<p>Pour produire une page HTML dot\u00e9 d&rsquo;un code source propre, <strong>il existe depuis de nombreuses ann\u00e9es des \u00e9diteurs dit WYSIWYG<\/strong> (<em>What You See Is What You Get<\/em> = Ce que vous voyez est ce que vous obtenez). Ces outils permettent de g\u00e9n\u00e9rer une page HTML en structurant et stylisant du texte par le biais de s\u00e9lections et de clics sur des boutons (\u00e0 la mani\u00e8re d&rsquo;un traitement de texte).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utiliser_des_editeurs_WYSIWYG_gratuits\"><\/span>Utiliser des \u00e9diteurs WYSIWYG gratuits<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Parmi les outils disponibles en ligne je vous propose de tester les outils suivants (faciles \u00e0 prendre en main)&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/html5-editor.net\" target=\"_blank\" rel=\"noreferrer noopener\">HTML5 Editor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.onetools.me\/fr\/html-editor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Editeur HTML de One Tools<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/editorhtmlonline.com\/fr\/\" target=\"_blank\" rel=\"noreferrer noopener\">Editor HTML Online<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wysiwyghtml.com\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/wysiwyghtml.com<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/iotools.cloud\/fr\/tool\/wysiwyg-html-editor\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/iotools.cloud\/fr\/tool\/wysiwyg-html-editor\/<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Ces \u00e9diteurs gratuits permettent de g\u00e9n\u00e9rer un code HTML propre mais ne disposent <strong>pas de fonction d&rsquo;exportation des contenus en HTML<\/strong>. Ces \u00e9diteurs ont utiles \u00e0 ceux qui doivent injecter du code HTML dans un syst\u00e8me prenant en charge la stylisation globale d&rsquo;un site ainsi que sa mise en ligne.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">Je propose donc d&rsquo;<strong>utiliser un \u00e9diteur Markdown<\/strong> puis d&rsquo;exporter le texte cod\u00e9 sous forme de fichier HTML stylis\u00e9.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utiliser_un_editeur_Markdown\"><\/span>Utiliser un \u00e9diteur Markdown<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Le langage Markdown est un <strong>langage de balisage l\u00e9ger<\/strong> permettant de structurer un texte avant de l&rsquo;exporter sous forme de page HTML, de fichier PDF, DOC, TXT, etc.<\/p>\n\n\n\n<p>Des \u00e9diteurs Mardown en ligne permettent de travailler rapidement \u00e0 l&rsquo;\u00e9laboration de pages Web simples et pr\u00e9sent\u00e9es sobrement. Voici \u00e0 quoi ressemble une mise en page effectu\u00e9e avec <a href=\"https:\/\/stackedit.io\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>stackedit.io<\/strong><\/a> :<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/langage-markdown-StackEdit.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"578\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/langage-markdown-StackEdit-1024x578.png\" alt=\"\" class=\"wp-image-4841\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/langage-markdown-StackEdit-1024x578.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/langage-markdown-StackEdit-600x338.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/langage-markdown-StackEdit-768x433.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/langage-markdown-StackEdit-1200x677.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/langage-markdown-StackEdit.png 1420w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>La page ci-dessus, export\u00e9e au format HTML (option page stylis\u00e9e avec sommaire \u2014 <em>HTML styled with TOC<\/em> ), s&rsquo;affiche dans une fen\u00eatre de navigation de la mani\u00e8re suivante&nbsp;:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/langage-markdown-toc.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"509\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/langage-markdown-toc-1024x509.jpg\" alt=\"\" class=\"wp-image-4842\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/langage-markdown-toc-1024x509.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/langage-markdown-toc-600x298.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/langage-markdown-toc-768x382.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/langage-markdown-toc-1200x596.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/langage-markdown-toc.jpg 1441w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Vous pouvez visualiser cette page en ligne en cliquant sur ce lien&nbsp;: <a rel=\"noreferrer noopener\" href=\"https:\/\/graphizm.fr\/fcs\/stackedit\/langage-markdown-toc.html\" target=\"_blank\">https:\/\/graphizm.fr\/fcs\/stackedit\/langage-markdown-toc.html<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Autres_editeurs_Markdown\"><\/span>Autres \u00e9diteurs Markdown<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Dans le document ci-dessus je mentionne l&rsquo;\u00e9diteur en ligne <a href=\"https:\/\/dillinger.io\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>dillinger.io<\/strong><\/a>. Dillinger, aussi facile \u00e0 prendre en main soit-il, exporte un code HTML beaucoup moins propre que StackEdit. Apr\u00e8s une remise en forme du code export\u00e9 depuis Dillinger, on se retrouve avec <strong>5600 lignes d&rsquo;instructions CSS<\/strong> et un nombre incalculable de classes (identifiants d&rsquo;\u00e9l\u00e9ments HTML). <strong>Ce constat met en valeur la sobri\u00e9t\u00e9 de <a href=\"https:\/\/stackedit.io\" target=\"_blank\" rel=\"noreferrer noopener\">StackEdit<\/a><\/strong>.<\/p>\n\n\n\n<p>Le document mentionne \u00e9galement <a href=\"https:\/\/typora.io\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Typora<\/strong><\/a>, un \u00e9diteur Markdown multiplateformes, hors ligne mais payant (Un peu plus de <strong>16 euros TTC<\/strong>). Il en existe plusieurs autres, gratuits, dont <strong><a href=\"https:\/\/macdown.uranusjr.com\" target=\"_blank\" rel=\"noreferrer noopener\">Macdown<\/a><\/strong> et <strong><a href=\"https:\/\/panwriter.com\" target=\"_blank\" rel=\"noreferrer noopener\">PanWriter<\/a><\/strong>, pour MacOs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"La_personnalisation_des_pages_HTML_exportees\"><\/span>La personnalisation des pages HTML export\u00e9es<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Une page HTML proprement cod\u00e9e structure le contenu r\u00e9dactionnel. <strong>StackEdit<\/strong> associe une stylisation simple au code HTML. Ainsi param\u00e9tr\u00e9e, Une page HTML export\u00e9e depuis StackEdit est transf\u00e9rable sur un serveur, pr\u00e9sentant un contenu lisible (identique \u00e0 ce qui \u00e9tait affich\u00e9 dans la fen\u00eatre de pr\u00e9visualisation de l&rsquo;\u00e9diteur).<\/p>\n\n\n\n<p><strong>La stylisation par d\u00e9faut de StackEdit peut \u00eatre modifi\u00e9e<\/strong> en utilisant une feuille de style dite \u201cclassless\u201d, en remplacement de la feuille de style propos\u00e9e par d\u00e9faut.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Cette op\u00e9ration n\u00e9cessite l&rsquo;usage d&rsquo;un \u00e9diteur de code, pour modifier le lien d&rsquo;appel de la feuille de style utilis\u00e9e, dans l&rsquo;ent\u00eate du code source de la page Web.<\/p>\n\n\n\n<p>Vous pouvez voir des stylisations \u201cclassless\u201d sur le site <a href=\"https:\/\/www.classlesscss.com\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>classlesscss.com<\/strong><\/a>. Plusieurs feuilles de style \u201cclassless\u201d \u00e9tant disponibles sur des serveurs (CDN), cela facilite la personnalisation des pages export\u00e9es depuis StackEdit.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">L&rsquo;utilisation de StackEdit et la personnalisation d&rsquo;une page HTML avec un \u00e9diteur de code sont d\u00e9taill\u00e9 dans les autres cours de la <a href=\"https:\/\/graphizm.fr\/greta\/index\/index-formation-fcs\/\">formation FCS niveau 1<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utiliser_dautres_modes_de_publication_en_ligne\"><\/span>Utiliser d&rsquo;autres modes de publication en ligne<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Je me contenterai de les mentionner, sans entrer dans les d\u00e9tails, car ils requi\u00e8rent des comp\u00e9tences plus avanc\u00e9es pour pouvoir \u00eatre utilis\u00e9es facilement. Ces comp\u00e9tences seront pour la plupart acquises au fil de la formation FCS (niveaux 2 et 3).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utiliser_des_frameworks_CSS\"><\/span>Utiliser des frameworks CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Un framework CSS est une bo\u00eete \u00e0 outils dans laquelle se trouvent des instructions de stylisation pr\u00eates \u00e0 l&#8217;emploi.<\/strong> Les frameworks CSS (nomm\u00e9s aussi kits CSS) font gagner beaucoup de temps lors de la conception de pages Web \u00e9l\u00e9gantes.<\/p>\n\n\n\n<p>Le framework CSS le plus souvent cit\u00e9 est <a href=\"http:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Bootstraap<\/strong><\/a>. Le framework <a href=\"https:\/\/www.w3schools.com\/w3css\/default.asp\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>w3.css<\/strong><\/a>, \u00e9tudi\u00e9 pendant la formation FCS, est un framework CSS utilis\u00e9 pour s&rsquo;initier au maniement de ce type de bo\u00eete \u00e0 outils.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utiliser_des_CMS_sans_base_de_donnees\"><\/span>Utiliser des CMS sans base de donn\u00e9es<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Un CMS sans base de donn\u00e9es (nomm\u00e9 aussi CMS flat-file) est un syst\u00e8me de gestion de contenus en ligne enregistrant les contenus du site dans des fichiers ind\u00e9pendants. Ils sont plus simples \u00e0 mettre en \u0153uvre, plus s\u00fbrs et plus faciles \u00e0 maintenir que les CMS avec base de donn\u00e9es.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">Pour en apprendre davantage sur le sujet, je vous invite \u00e0 consulter mes <a href=\"https:\/\/y-goguely.netboard.me\/publierenligne\/?tab=290322\" target=\"_blank\" rel=\"noreferrer noopener\">ressources mises en ligne sur Netboard<\/a>. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utiliser_des_CMS_classiques_et_des_plateformes_de_creation_de_sites\"><\/span>Utiliser des CMS classiques et des plateformes de cr\u00e9ation de sites<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Le CMS le plus populaire est de loin<\/strong> <a href=\"https:\/\/fr.wordpress.org\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>WordPress<\/strong><\/a><strong>.<\/strong> Viennent ensuite <a href=\"https:\/\/www.shopify.fr\/\" target=\"_blank\" rel=\"noreferrer noopener\">Shopify<\/a>, <a href=\"https:\/\/fr.wix.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Wix<\/a>, <a href=\"https:\/\/fr.squarespace.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Squarespace<\/a>, <a href=\"https:\/\/www.joomla.fr\/\" target=\"_blank\" rel=\"noreferrer noopener\">Joomla<\/a> et <a href=\"https:\/\/www.drupal.fr\/\" target=\"_blank\" rel=\"noreferrer noopener\">Drupal<\/a>.<\/p>\n\n\n\n<p>Parmi ceux-ci, <strong>Squarespace et Wix sont des plateformes de cr\u00e9ation de sites offrant un service complet<\/strong> alliant l&rsquo;usage du CMS \u00e0 l&rsquo;h\u00e9bergement du site en passant par la r\u00e9servation du nom de domaine.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/parts-marche-wordpress-2011-2025.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"571\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/parts-marche-wordpress-2011-2025-1024x571.png\" alt=\"\" class=\"wp-image-7242\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/parts-marche-wordpress-2011-2025-1024x571.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/parts-marche-wordpress-2011-2025-600x334.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/parts-marche-wordpress-2011-2025-768x428.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/parts-marche-wordpress-2011-2025-1200x669.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/03\/parts-marche-wordpress-2011-2025.png 1532w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Source&nbsp;: <a href=\"https:\/\/www.ionos.fr\/digitalguide\" target=\"_blank\" rel=\"noreferrer noopener\">kinsta.com<\/a><\/figcaption><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Dans ce cours vous allez inventorier et tester plusieurs modes de publication de contenus sur le Web. Il sera question de plateformes d&rsquo;\u00e9dition et de publication auto-h\u00e9berg\u00e9e, d&rsquo;\u00e9diteurs WYSIWYG, de langage et d&rsquo;\u00e9diteurs Markdown. Ce cours vous permettra d&rsquo;avoir un premier aper\u00e7u des formes de publication en ligne les plus simples. Pour tirer profit de [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,15],"tags":[],"class_list":["post-4773","post","type-post","status-publish","format-standard","hentry","category-fcs","category-fcs1-cours"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","twentytwenty-fullscreen":""},"post_excerpt_stackable_v2":"<p>Dans ce cours vous allez inventorier et tester plusieurs modes de publication de contenus sur le Web. Il sera question de plateformes d&rsquo;\u00e9dition et de publication auto-h\u00e9berg\u00e9e, d&rsquo;\u00e9diteurs WYSIWYG, de langage et d&rsquo;\u00e9diteurs Markdown. Ce cours vous permettra d&rsquo;avoir un premier aper\u00e7u des formes de publication en ligne les plus simples. Pour tirer profit de ce cours, vous devez avoir suivi les cours intitul\u00e9s Le fonctionnement du Web et Contenu d&rsquo;un dossier de page Web. Sommaire Toggle Utiliser une plateforme d&rsquo;\u00e9dition en ligneUtiliser la plateforme NetboardUtiliser Google SitesAutres plateformes de publication en ligneUtiliser un \u00e9diteur WYSIWYGUtiliser des \u00e9diteurs WYSIWYG gratuitsUtiliser\u2026<\/p>","category_list_v2":"<a href=\"https:\/\/graphizm.fr\/greta\/category\/fcs\/\" rel=\"category tag\">FCS<\/a>, <a href=\"https:\/\/graphizm.fr\/greta\/category\/fcs\/fcs1-cours\/\" rel=\"category tag\">FCS1-cours<\/a>","author_info_v2":{"name":"Yves Goguely","url":"https:\/\/graphizm.fr\/greta\/author\/formationsgreta\/"},"comments_num_v2":"0 commentaire","_links":{"self":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/4773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/comments?post=4773"}],"version-history":[{"count":62,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/4773\/revisions"}],"predecessor-version":[{"id":7426,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/4773\/revisions\/7426"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=4773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=4773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=4773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}