Concevoir un site statique

OAW 2024 – 23 octobre 2024

Daphné MATHELIER | daphne.mathelier@cnrs.fr

• Pôle Données et Humanités numériques (MSH Mondes)
• Correspondante de l’IR* Huma-Num
• Membre de l’atelier de la donnée de Nanterre (ADN)
• Co-coordinatrice du projet STRAD (Stratégies pour l’archivage durable)

Au menu du jour !

1. Qu’est-ce qu’un site web ?
2. Écrire pour le web : HTML et Markdown
3. Une solution de publication : GitHub/GitLab Pages

Avant de commencer

Le projet STRAD

• Acronyme : Stratégie pour l’archivage durable
• Projet porté par la MSH Mondes, au sein du pôle DHUNE
• Lauréat 2024 de l’appel à initiatives pour la transition environnementale (CNRS)
• Périmètre : Université Paris Nanterre & Université Paris 1 Panthéon-Sorbonne
  

L’ambition du projet est :

[d’]adopter une approche basée sur l’édition de sites web statiques et accompagner les anciens sites et bases de données de projets de recherche de la MSH Mondes dans leur transition vers des solutions statiques afin de faciliter leur maintenance et archivage, et de réduire leur empreinte environnementale.

La MSH Mondes et le pôle DHUNE

MSH Mondes : unité d’appui et de recherche interdisciplinaire en SHS

La MSH met à disposition de ses usagers des instruments et des services techniques et scientifiques de haut niveau, dans les domaines de l’archivage, des bibliothèques, de la gestion des données, de l’image animée ou fixe, des humanités numériques,
de l’édition, de l’ingénierie documentaire, de la microscopie et l’imagerie scientifique.

Pôle DHUNE : pôle Données et Humanités numériques de la MSH Mondes

Le pôle DHUNE apporte un appui aux communautés de recherche du périmètre de la MSH Mondes (UPN et UP1) sur le volet numérique de leurs activités et projets
et tout au long du cycle de vie de la donnée (gestion, traitement, ouverture...).

→ Relais locaux des infrastructures nationales (IR*) Huma-Num et Progedo

L’IR* Huma-Num

→ Infrastructure de recherche qui propose des services aux membres de l’enseignement supérieur et de la recherche pour les données en SHS

Missions

• Faciliter le « tournant numérique » de la recherche en SHS dans la production et la réutilisation de données numériques
• Proposer des services pour les données au juste niveau et au bon moment

Services

• Développés par Huma-Num : Isidore | Nakala | ShareDocs
• Additionnels : GitLab | Kanboard | Matomo | Mattermost
• Tiers hébergés : Heurist | Opentheso | Stylo | TXM | Voyant Tools

Pour en savoir plus : site web | documentation | portail HumanID

L’atelier de la donnée de Nanterre

→ Collectif et service d’appui dédié à la question des données

Il s’agit de mutualiser des ressources et compétences pour former, accompagner et soutenir tous ceux qui, au sein de notre communauté, sont amenés à se préoccuper de gestion des données de recherche et notamment les doctorant·es, chercheur·es et personnels d’appui.

Trois partenaires :

• Université Paris Nanterre, à travers son Service commun de la documentation (SCD) et la Direction de la recherche et des études doctorales (DRED)
• Maison des Sciences de l’Homme Mondes (MSH Mondes)
• Bibliothèque-archives-musée La contemporaine

Une adresse de contact : donnees-recherche@liste.parisnanterre.fr

Principales composantes du web

• URI (Uniform Resource Identifier) → identification
  • Identifier une ressource de manière permanente
• URL (Uniform Resource Locator) → localisation
  • Identifier une ressource du Web par son emplacement
  • Préciser le protocole internet pour la récupérer
• HTTP (HyperText Transfer Protocol) → relation
  • Permet l’échange de données sur le Web
• HTML (HyperText Markup Language) → langage de description
  • Permet d’organiser les contenus d’une page web
• CSS (Cascading Style Sheets) → langage de mise en forme
  • Permet de paramétrer l’apparence d’une page web

Pour en savoir plus : MOOC Comprendre le web

Un site web

• Ensemble de pages web organisées
• Document complexe contenant des éléments de navigation
• Objet éditorial (figé ou alimenté)

Plusieurs manières de créer un site web : à la main, avec un CMS (Content Management System) ou avec un générateur de site statique

Au départ tous les sites étaient statiques !

Mais les besoins se sont complexifiés et de nouvelles technologies sont apparues, comme les langages serveur (ex. PHP) et les CMS (ex. Wordpress)

→ Explosion des sites dynamiques, depuis les années 2000, notamment avec l’arrivée de Wordpress en 2003

Site web dynamique ou statique ?

Site web dynamique

Un site web dynamique est conçu pour offrir une expérience interactive et personnalisée aux utilisateurs. [... ] Un site dynamique génère du contenu en temps réel en fonction de divers facteurs tels que les interactions de l’utilisateur, l’heure de la visite, ou encore les données utilisateur spécifiques stockées dans des bases de données.

Site web statique

Un site web statique est constitué de pages dont le contenu ne change pas automatiquement. Chaque page est codée en HTML, CSS, et parfois JavaScript, et affiche la même information à tous les visiteurs, sans intégration de bases de données ou de contenu interactif qui change en fonction de l’utilisateur.

Source / Pour en savoir plus : Sites web statiques ou dynamiques : Quelle différence ?

Low tech

Terme qui est apparu dans les années 1970 pour désigner un concept et une philosophie de vie s’inscrivant dans une démarche minimaliste et écologique.

→ Solutions « basse technologie » (en opposition à la « high tech »)

Ensemble des technologies utiles, durables et économiques visant la sobriété énergétique et matérielle. (Hello Carbo)

Trois grands principes :

1. Utilité : réponse à un besoin réel et pertinent, usage agréable et autonome…
2. Accessibilité : coût abordable, facilité d’utilisation, normes partagées…
3. Durabilité : réutilisation, réparation, recyclage, faible niveau de dépendance…

Exemples de sites statiques

• Cours Hugo (R. Witz) (Hugo | Beautiful Hugo) code source | site
• Cours Python (P. Poulain, P. Fuchs) (MKDocs | Material) → code source | site web
• Documentation Huma-Num (MKDocs | Read the docs) → site web
• Journal of Open Source Software (Sphinx | Read the docs) → code source | site web
• MOOC Impacts environnementaux du numérique (INRIA) (MKDocs) → site web
• Présentation revealJS (K. Gautreau) (revealJS) → code source | site web
• Projet Revue 2.0 (Jekyll) → code source | site web
• Projet Rzine (Hugo) → code source | site web
• Programming Historian (revue) (Jekyll) → code source | site web
• Site personnel de Luc Didry (Framasoft) (Hugo) → code source | site web
• Tutoriel Markdown (A. Perret) (HTML | CSS | JS) → code source | site web

2 — Écrire pour le web

Le langage du web : HTML

HTML (HyperText Markup Language)

• Langage standardisé, spécifié par le W3C (World Wide Web Consortium)
• Souvent lié à une feuille de style CSS
  (langage de présentation des pages web)
• Tout contenu doit être dans un élément (balise) <element> Contenu </element>

Beaucoup de ressources pour apprendre !

• Exemple : w3schools

EXERCICE 1 : reproduire le même code dans l’éditeur w3schools.com

Une alternative pour l’écriture web : Markdown

Markdown est un langage de balisage léger facile à lire et à écrire
crée en 2004 par John Gruber (avec l’aide d’Aaron Swartz pour la syntaxe)

Philosophie de Markdown (selon son créateur) :

Un document formaté en Markdown doit pouvoir être publié tel quel, en texte brut, sans donner l’impression d’avoir été structuré par des balises ou des instructions de formatage.

La syntaxe Markdown est conçue dans un seul but : être utilisée comme format d'écriture pour le web.

Avantages :

• Simplicité : facile à apprendre, lire et écrire ; à copier, partager et conserver
• Portabilité : multiplateforme / support / programme ; document pivot convertissable
• Modernité : écriture numérique et académique ; minimalisme et sobriété numérique

Écrire en Markdown

Markdown	HTML	Rendu
# Titre 1	<h1>Titre1</h1>	Titre 1
*italique* ou _italique_	<em>italique</em>	italique
**gras**	<strong>gras<strong>	gras
***gras italique***	<strong><em>gras italique</em></strong>	gras italique
XIX^e^	XIX<sup>e</sup>	XIXe
H~2~O	H<sub>2</sub>O	H2O
[hyperlien](url)	<a href="url">hyperlien</a>	hyperlien
- Liste	<ul><li>Liste</li></ul>	- Liste
	<img src="image.jpg" alt="légende">

Grande variété d’éditeurs Markdown (à télécharger, en ligne, intégré dans d'autres outils..)

Un éditeur en ligne : HedgeDoc

→ Outil de prise de notes collaborative simultanée

Instance test officielle : https://demo.hedgedoc.org
Instance gouv.fr : https://pad.numerique.gouv.fr

Principales fonctionnalités :

–  Espaces de travail : lecture, écriture, les deux
–  Thèmes : jour ou nuit
–  Barre d’aide à la rédaction (et bouton aide)
–  Aperçu des personnes connectées
–  Gestion fine des permissions
–  Historique des versions
–  Page de visualisation partageable
–  Mode présentation (avec reveal.js)
–  Exports en MD et HTML

Découvrir Markdown

EXERCICE 2 : tutoriel interactif du CommonMark (traduction d’Arthur Perret)

3 — Une solution de publication : GitHub/GitLab Pages

Le protocole Git

→ Protocole d’échange, de synchronisation et de versionnement de fichiers textes

• Créé en 2005 par Linus Torvalds, le créateur de Linux
• Très utile pour garder un historique complet des modifications apportées
  et pour le travail collaboratif et simultané
• Fichiers synchronisés en ligne, dans des éditeurs de texte (ex. Atom ou VS Code)
  ou des logiciels de versionnement (ex. GitHub Desktop)

Quels fichiers ?

• Des codes sources (ex. au format R ou PY)
• Des fichiers de documentation ou de description (ex. au format HTML, MD, IPYNB)
• Stockage possible des autres types de fichiers (mais sans versionnement)

Les plateformes Git

Git ≠ GitHub/GitLab/Framagit :
→ plateformes collaboratives de gestion de projet et de partage de codes basées sur le protocole Git

• Depuis 2019, instance GitLab d’Huma-Num accessible à partir du portail HumanId

Trois niveaux de visibilité des contenus :

• Public
• Public avec authentification
• Privé (accès uniquement aux membres du projet)

Regroupement possible de plusieurs projets au sein d’un groupe (ou d’une organisation)

Partager vos fichiers de documentation sur GitLab ou GitHub

Fichier « Lisez-moi » (readme) :

• Généralement à la racine du projet
• Informations générales sur le projet, notamment les objectifs et la méthodologie
• Explications sur l’organisation du répertoire (repository)

Fichier « Licence » : informations sur la licence utilisée

Tickets (issues) :

• Permettent de faire remonter des bugs, des questions, des retours d’expérience, etc.
• S’affichent sous forme de liste, tableau ou jalons
• Outil pour la collaboration et la gestion de projet

Répertoire de documentation (wiki) : documentation interne au sein d’un groupe/projet

Créer un site web avec la fonctionnalité Pages

GitLab Pages (ou GitHub Pages) : fonctionnalité qui permet de générer et de publier, gratuitement et en continu, un site statique associé à un répertoire GitLab (ou GitHub) et hébergé sur les serveurs de GitLab (ou GitHub) – en France pour l’instance Huma-Num

Avantages

• Gain de temps et de ressources
• Nombre de sites hébergés non limité (avec GitLab)
• Adapté aux sites minimalistes ou principalement textuels

Fonctionnement

• Alimentation du site avec des fichiers textes md ou html
• Gestion des sauvegardes/versions avec GitLab ou GitHub (impératif)
• Publication avec des générateurs de site statique (facultatif)

Les générateurs de site statiques

= outil qui permet de créer des sites web composés de pages statiques, généralement au format HTML (ou MD)

Fonctionnement (Wikipédia)

1. Création du contenu – L’utilisateur crée le contenu du site, souvent dans un langage de balisage léger comme Markdown.
2. Design des pages – Des modèles sont créés pour définir l’architecture et la mise en page du site, par exemple avec des feuilles de style CSS.
3. Configuration – L’utilisateur configure les paramètres du site, tels que les métadonnées et la structure de navigation.
4. Génération – Le générateur compile le contenu, les modèles et la configuration pour produire des fichiers HTML statiques.
5. Déploiement – Les fichiers générés sont téléchargés sur un serveur web ou une plateforme d’hébergement.

Place à la pratique !

EXERCICE 3 : créer son premier site statique
→ Deux possibilités : avec GitLab Pages ou GitHub Pages

Avec le GitLab d’Huma-Num

1.  Dans GitLab, créer un nouveau projet,
      à partir d’un modèle, par ex.Pages/Plain HTML

2.  Compléter les informations :

–  Nom du projet
–  Diminutif (slug) dans l’adresse URL
–  Description du projet
–  Niveau de visibilité public

3.  Une fois le répertoire créé, ajouter le fichier       qui constituera votre site web :

–  Télécharger le fichier HTML modèle.
–  Dans le dossier Public du projet créé,
    cliquer sur le fichier index.html.
–  Cliquer sur Remplacer et téléverser le modèle.

4.  Modifier le fichier HTML à votre guise.

5.  Attendre que GitLab exécute le pipeline
      et génére votre site.

Une fois le pipeline terminé, accéder à votre site via l’URL basée sur le modèle suivant :
[nom-utilisateur].gitpages.huma-num.fr/[nom-projet]

Avec GitHub

1.  Dans GitHub, créer un nouveau répertoire vide
(+puis New repository)

2.  Compléter les informations :

– Nom du projet (Repository name)
– Description du projet
– Niveau de visibilité public (obligatoire)

3.  Une fois le répertoire créé, ajouter le fichier
      qui constituera votre site web :

–  Télécharger le fichier HTML modèle
–  Téléverser le modèle
–  Remplacer son titre pour index.html

4.  Déployer le site de votre dépôt :

–  Dans Réglages (Settings), cliquer sur Pages et choisir
    GitHub Actions comme source de déploiement.

–  Selon la nature des fichiers déposés, choisir l’action
    (workflow) correspondante, ici Static HTML.

–  Valider la création du pipeline (static.yml)
     en cliquant sur Commit changes.

5.  Laisser GitHub exécuter le pipeline et génèrer le site.

Une fois le pipeline terminé, accéder au site :

– Via l’URLhttps://[username].gitlab.io/[project-name]
– En cliquant sur le résultat dans Deployments (à droite)