[0] Lancement sujet
Lien à mettre en réserve
Fichiers à télécharger
[01] Structure & CMS
CMS
Un système de gestion de contenu ou CMS (content management system) est un logiciel permettant de créer un site Internet, un blog ou encore un site de vente en ligne. Un CMS permet de travailler à plusieurs sur un même document, de séparer les opérations de gestion de la forme et du contenu, de structurer le contenu (FAQ, documents, blogs, forums, etc.) ou de hiérarchiser les utilisateurs et de leur attribuer des permissions (anonyme, administrateur, contributeur, etc.). Il fournit également une chaîne de publication (workflow) offrant la possibilité de préparer puis de mettre en ligne le contenu des documents. Certains SGC incluent la gestion des versions. Enfin, il est possible de gérer tout type de documents multimédias (bureautique, audio, vidéo...) et d'ajouter des fonctionnalités
Liste de CMS à mettre de côté au cas ou :
- processwire - Nécessite une base de donnée : Open Source
- kirby - FlatFile (pas de base de donnée). Licence payante 90€ par site.
Générateur de site statique
Un générateur de site statique, souvent abrégé SSG (en anglais : Static Site Generator), est un outil logiciel qui permet de créer des sites web composés de pages statiques, généralement au format HTML.
Contrairement aux systèmes de gestion de contenu (CMS) dynamiques, les générateurs de sites statiques produisent des fichiers HTML, CSS et JavaScript prêts à être servis directement par un serveur web, sans nécessiter de traitement côté serveur au moment de la requête.
Liste de générateur de site statique à mettre de côté au cas ou :
Lien à mettre en réserve
[02] Formats et markdown
Le markdown
Inventé par John Gruber au début des années 2000, Markdown est un langage sémantique qui permet d’écrire du HTML — Hyper Text Markup Language — avec un système de balisage bien plus léger. D’abord plébiscité par les développeurs pour rédiger leur documentation, cette syntaxe est désormais de plus en plus employée, notamment dans des applications numériques qui cherchent à se passer d’interfaces WYSIWYG — What You See Is What You Get : ce que l’on voit est ce que l’on obtient, fonctionnement des traitements de texte classiques. Pensé pour distinguer la structure sémantique et la mise en forme d’un document, et être très facilement transformable en HTML, Markdown devient le pivot de l’écriture numérique, rendant les fichiers sources tout autant lisibles par des humains, interopérables pour les machines ou résilients.
Antoine Fauchié - Markdown comme ...
Le markdown est une manière d'écrire permettant de rendre visible la structure sémantique du texte tel que la machine va l'interpréter. Il permet aussi d'éviter les utilisateur.ice.s de se tromper de style dans lorsqu'ielles écrivent du texte comme cela est possible avec des éditeurs comme TinyMCE ou CKEditor.
Fonctionnement avec markdownit.js
Côté HTML on charge les librairies permettant de faire parser le markdown en HTML.
<head>
<script src="js/markdown-it.js"></script>
<script src="js/markdown-it-footnote.min.js"></script>
</head>
Côté JS on va chercher le fichier avec le markdown, on le transforme en HTML et on le met dans la div voulu.
var DivDeReception = document.getElementById('laDivQuiVaAccueillirLeContenu')
var md = window.markdownit().use(window.markdownitFootnote);
var CheminVersMd = "assets/text.md";
async function RecupMd(URL) {
var RepDuServeur = await fetch(URL)
var DataMarkdown = await RepDuServeur.text()
return DataMarkdown
}
RecupMd(CheminVersMd).then(DataMarkdown => {
var ResultatDuParser = md.render(DataMarkdown);
DivDeReception.innerHTML = ResultatDuParser;
})
D'autres types de données
Le JSON
JSON (JavaScript Object Notation – Notation Objet issue de JavaScript) est un format léger d'échange de données. Il est facile à lire ou à écrire pour des humains. Il est aisément analysable ou générable par des machines.
Le CSV
Un fichier CSV (Comma-separated values) est un fichier texte dont le format spécifique permet d'enregistrer les données structurées sous forme de tableau.
SVG
Les Scalable Vector Graphics (SVG) sont un langage de balisage basé sur XML permettant de décrire des images vectorielles en deux dimensions.
Il s'agit donc d'un standard Web ouvert, basé sur du texte, pour décrire des images pouvant être affichées proprement à n'importe quelle taille et conçues pour fonctionner parfaitement avec d'autres standards du Web, notamment CSS, DOM, JavaScript et SMIL. SVG est, en substance, pour le graphisme ce que HTML est pour le texte.
Lien à mettre en réserve
Fichiers à télécharger
[03] Static site generator
11ty
Eleventy (11ty) est un générateur de site statique qui nécessite pour fonctionner d'utiliser node js.
Étapes
Ces premières étapes permettent d'initialiser le dossier de travail :
- Créer un dossier et à l'intérieur :
npm init -y - Installer 11ty dans le dossier :
npm install @11ty/eleventy - Mettre à jour le fichier
package.json:
"scripts": {
"start": "eleventy --serve",
"build": "eleventy"
},
Ici on va créer un fichier de configuration permettant d'ajouter des extensions à 11ty, de modifier le comportement du logiciel.
- Créer le fichier de configuration pour 11ty
.eleventy.js:
module.exports = async function(eleventyConfig){
const { EleventyHtmlBasePlugin } = await import("@11ty/eleventy");
eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
eleventyConfig.addPassthroughCopy('src/style');
eleventyConfig.addPassthroughCopy('src/assets');
return {
dir: {
input :"src",
output : "public"
}
}
}
module.exports.config = {
//pathPrefix: "Public/ESAD/11TY/testDG3/public/",
}
Toutes les étapes de configuration sont désormais opérationnelles. On peut maintenant s'attaquer à la construction de template (point emmet et njk color syntax).
- À la racine du dossier on crée un dossier src/ qui va contenir tout le contenu et dans ce dossier src/ un autre qui s'appelle _includes/ qui va contenir les templates.
- On crée ensuite le premier template dans _includes/ qui s'appelle
base.njkle nunjucks étant le langage de templating utilisé par 11ty. - Enfin pour ajouter des pages on ajouter des fichiers.md permettant de créer des pages.
Lien à mettre en réserve
[04] Web To print
Le Web To Print est une pratique permettant de mettre en page et produire des documents imprimables à l'aide des langages du web.
Paged.js
Paged.js is a free and open source JavaScript library that paginates content in the browser to create PDF output from any HTML content. This means you can design works for print (eg. books) using HTML and CSS.
Initialisation
Afin de faire fonctionner paged.js, il faut importer la librairie js et l'interface css qui permet de voir la mise en page.
Lien vers l'initialisation
Afin de faciliter les choses il est plus simple d'importer la librairie paged.polyfill.js à la fin du document.
L'interface CSS se charge au début du document dans le header du document.
