Conception d’une Page Web

Cette page correspond à un retour d’expérience. Les solutions proposées fonctionnent, peut-être ne sont-elle pas les meilleures..

Pour écrire ces quelques pages j’ai dû répondre aux exigences suivantes :

• un code lisible (maintenable)
• Insertion de formules mathématiques
• Insertion de code avec coloration syntaxique
• Insertion de schémas avec animations

J’avais pensé initialement à une solution du type :
Conversion Latex –> html
Pour pouvoir en plus fournir un document papier/pdf bien agencé.
Les outils d’alors ne permettaient de ne faire que des choses très simples.
De plus on ne peut pas dire que le latex soit des plus lisibles.

Par rapport aux solutions proposées ci dessous, il existe bien entendu des logiciels plus complets - et complexes - (ex: django) pour créer des sites web.

Prérequis :

html-ccs

Markdown et dérivés

Markdown est un langage permettant d’écrire une page web de manière lisible, à la manière de l’écriture d’un mail.
La gestion de la conversion des titres, insertion d’images, listes en html est parfaite.

Pour des choses plus exotiques il est toujours possible d’insérer des lignes en html.

De mon côté j’utilise un dérivé de markdown qui est kramdown, qui permet de préciser à la volée une classe CCS.

Markdown Cheatsheet

Conversion kramdown –> html

Gestion d’un site web avec markdown

Numérotation des Titres

Dans le fichier .css :

Formules mathématiques avec Mathjax

https://www.mathjax.org/

Editer une formule latex en ligne :
www.codecogs.com/latex/eqneditor.php

Inclure dans le header de la page :

Insertion d’une formule Latex :

Insertion de code avec coloration syntaxique avec syntaxhighlighter

http://alexgorbatchev.com/SyntaxHighlighter/

Dans le Header de la page :

Insertion du code directement dans la page

Affichage de code contenu dans un fichier

Un projet informatique étant amené à évoluer, il est pénible d’avoir à modifier toutes ses pages html à chaque fois. Avec cette solution, un simple copié-collé de l’ensemble des fichiers du projet suffit à mettre à jour la page.

REMARQUE:

les ‘>’ et ‘<’ peuvent être problématiques dans une conversion html.
Mieux vaut les remplacer par &lt et &lg

Tous les fichiers .h, .c, (ajouter d’autres extensions au besoin) sont placés dans un répertoire code.
Les fichiers modifiés se retrouvent dans un répertoire code.txt avec le même nom.

Affichage du fichier dans la page :

Définition d’une nouvelle coloration syntaxique

Tous les codes ne sont pas présents dans syntax-highlighter. Il est possible d’en définir de nouveaux.
Il suffit de lister les mots-clé.
Par exemple pour le code VHDL :

./syntax_highlighter/scripts/shBrushVhdl.js

Insertion de schémas avec animations

Pour faire un schéma de manière générale, j’encourage l’utilisation d’inkscape

Pour insérer un schéma .svg simple :

Pour insérer un schéma avec animation :

Création d’un diaporama en html

A partir du fichier .html généré, on peut en faire un diaporama.
Par exemple avec dzslides :

https://github.com/paulrouget/dzslides