Présentation de Runes
En hommage à nos ancêtres Celtes et Vikings.
Système de création de documents composites en HTML5 et de sites Web
Vous souhaitez transmettre des connaissances sur un sujet ou un domaine qui vous est cher sur une clé USB ou un site Web ?
Runes permet cette création sans connaissances techniques liées aux normes d'écriture HTML5 pour le Web, ni d'ergonomie.
Bon il faut quand même savoir se servir de la ligne de commande et ne pas avoir deux mains gauches mais l'effort est minime par rapport au résultat obtenu...
Philosophie KISS
Signifie faire le plus simple et léger possible... Voir article correspondant à cette façon de traiter les designs logiciels.
Cela représente des heures de design/développement, soyez-en conscient.
Le tout s'appuyant sur une bonne connaissance des techniques à maîtriser.
Des années en fait !
Licence
Je propose Runes en licence Creative Commons CC BY-NC-SA. Ce qui signifie que vous pouvez revisiter le code, le partager aux 3 conditions ci-après :
- BY - vous devez citer mon nom Didier Jordana
- NC - vous ne faîtes pas de pognon/fric avec !
- SA - vous donnez les mêmes droits aux autres...
Par ailleurs, je ne suis qu'un être humain, donc je peux me tromper.
Si je constate des erreurs/lacunes sur cet article, je le modifierai en conséquence.
Donc revenez ici de temps en temps.
Architecture technique
Représentée par un ensemble de scripts avec chacun une fonction dédiée à savoir :
- cog_all lance la construction de tous les articles (dossiers @xxx)
- cog_runes fabrique le code de la page HTML5 en s'appuyant sur
- cog_process pour le traitement des images incluses à l'article
- cog_base64webm inclusion d'une ou plusieures vidéos
- cog_index fabrique la page d'accueil index.html avec
- cog_links lit le fichier texte LINKS pour l'ordre des liens (menu hamburger)
- cog_webm (accessoire) transcodeur mp4-webm (voir article)
Les rendre exécutables par la commande chmod +x cog_*
Prérequis : installer le shell ash (dash) et le convertisseur markdown_py par la commande
sudo apt install ash python3-markdown
Règles d'écriture
Voir mon article à ce propos sur ce site. Chaque article, page HTML5 est contenu dans un dossier/répertoire dont le nom commence par @. Le nom après détermine le nom final de la page. Exemple :
@Dev-Runes donnera Dev-Runes.html
A l'intérieur de ce dossier se trouve votre rédactionnel article.md ainsi que les fichiers images, sons et vidéos éventuels...
Cas de la page d'accueil
Tous les fichiers sont contenus dans un dossier de nom @Index. A l'intérieur il faut créer un fichier texte de nom LINKS avec l'orde d'apparition des liens vers les pages qui sont gérés depuis le menu hamburger situé à droite et toujours visible même quand on scrolle... Sinon, même liberté de création qu'avec les pages normales.
Exemple pour mon site :
Apropos Now Blog Dev-Runes Dev-Choix_Linux Dev-KISS Dev-Boites_noires Dev-Style_CSS Dev-Moteur_Nemo Dev-Moteur_V8 Dev-Reverse_Proxy Dev-Transcode_WebM Doc-Holacratie HW-Raspberry_Pi5 Web-Logiciels_Web Web-Ecriture_articles Web-Images_libres
Lancement de l'automate Runes
Traitement de toutes les pages ./cog_all
Une fois que vous avez rempli le fichier LINKS dans le dossier @Index, création de la page d'accueil index.html ainsi que tous liens par la commande dans le terminal ./cog_index
L'automate s'occupe de toute la plomberie, toutes les pages sont placées dans le dossier WEB. Elles sont prêtes à être mises sur une clé USB ou transférées vers votre site Web.
Aspect final de la page
Il dépend de la feuille CSS simple.min.css , elle aussi incluse dans le fichier HTML5 de sortie. Voir, à ce propos, mon autre article justifiant le choix de cette feuille de style.
De plus, une feuille de style custom.css est présente si vous êtes doué pour les modifications CSS.
Pour obtenir un document composite, les différents constituants multimédias sont codés en base64 (codage en texte 7 bits comme pour les attachements emails/MIME). La norme HTML5 l'autorise.
On entend par constituant le document final, les images au format webp/jpg/png, les podcasts mp3, les vidéos webm et bien sûr le rédactionnel article.md codé en markdown .
Comme d'habitude, le code produit est le plus léger possible, nonobstant la taille des fichiers multimédias ! A ce propos les images incluses à l'article, au format webp en 720 pixels et 80% de qualité sont d'une qualité suffisante pour un affichage agréable.
Gestion des vidéos incluses
Runes ne prend en compte que les vidéos au format WebM
WebM est un format de fichier multimédia ouvert, principalement destiné à un usage sur le Web.
Après un test sur un fichier vidéo avec son de 50Mo on obtient un fichier webm de taille 3.8Mo soit une réduction de 13 fois avec un codec vp8 (vp9 compresse encore plus) ! Le temps de transcodage est long...
J'utilise l'excellent logiciel gstreamer pour cette conversion. Voir mon article sur le transcodage mp4 webm car la syntaxe est ardue.
Les vidéos apparaîssent en dernier dans le document final.
Même principe que pour les images, s'il y a un commentaire texte à mettre sous la vidéo, il sera nommé video.webm.md.
Idem pour un commentaire/podcast en mp3, nom video.webm.mp3.
Source des scripts
Quand un script commence par LOGIC=/home/ , il faut mettre l'arborescence sur votre machine où se situe votre dossier avec les scripts... exemple /home/utilisateur/runes
Tous les scripts sont dans cette archive runes.zip
A dézipper dans le dossier de votre choix (runes ?). Le plus simple étant de le mettre dans votre home directory. -> /home/utilisateur/runes
Dans ce dossier runes se trouvera tous les dossiers des articles ainsi que @Index et les scripts bien sûr.
A vous de vous exprimer sur votre art ! Namasté
Exemple de vidéo incluse
Ainsi qu'un commentaire et podcast sonore.
Reposant...