Présentation – Concevoir un site statique

Formation proposée dans le cadre de la semaine du libre accès de l’Université Paris Nanterre.

Le support au format PDF est disponible sur Nakala

Plan

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

1 — Qu’est-ce qu’un site web ?

Internet et web

Internet = réseau informatique mondial

Réseau mondial de télécommunication reliant entre eux des ordinateurs ou des réseaux locaux et permettant l’acheminement de données numérisées de toutes sortes (messages électroniques, textes, images, sons, etc.). (CNRTL)

Web = une application d’Internet (parmi d’autres)

Le web est un système de pages reliées par des hyperliens, qui contiennent des informations et des ressources variées. Internet est le réseau informatique sur lequel le web repose.
(Numerama)

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…

Source : https://fr.wikipedia.org/wiki/Low-tech

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 de structuration du web
• 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

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

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)

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.

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.