Mon nouveau Jardin Intérieur - Partie 2 Technique
Aussi simple qu'un stylo et du papier avec Markdown
Cette partie concerne la mise en œuvre technique de mon petit Jardin Intérieur sur Cronhill.de avec des fichiers Markdown construits simplement.
Dans la première partie, j'ai essayé d'expliquer comment on peut comprendre un Mind Garden ou Jardin Intérieur. Quelles métaphores sont disponibles pour une meilleure compréhension ? Quel est l'avantage d'un Jardin Intérieur pour moi personnellement, comment peut-il m'aider ?
D'un point de vue technique, quelques exigences de base étaient essentielles :
- pas de structures de dossiers
- pas d'éléments orphelins non liés
- tous les éléments sont liés
Anne-Laure Le Cunff mentionne les principes suivants pour semer des idées futures dans le Jardin Intérieur (Lien dans les notes de bas de page) :
- Collecter
- Liens
- Créer
Wenn Du Dir ein vollständiges Bild über meine Gedanken zum Jardin Intérieur machen möchtest, lies vielleicht zuerst mein erstes Essay darüber: Mein neuer Jardin Intérieur auf Cronhill.de.
Si vous voulez avoir une idée complète de ce que je pense du Jardin Intérieur, vous pouvez d'abord lire mon premier essai sur le sujet : Mon nouveau Jardin Intérieur sur Cronhill.de. Je n'ai malheureusement pas le temps de faire fonctionner le Jardin en trois langues, pour cela je vous demande sincèrement votre compréhension. Vous pouvez trouver mon Jardin Intérieur dansla partie allemande du site ou ici.
La technologie
Aussi simple qu'un stylo et du papier
Je développe des sites web depuis 1998, soit 23 ans maintenant. J'ai commencé à mon premier emploi en tant que concepteur et développeur web avec Microsoft Frontpage (sic !), puis j'ai continué avec Dreamweaver de Macromedia, y compris la possibilité ajoutée plus tard d'utiliser des modèles. Notre entreprise a ensuite acheté une licence Imperia. En plus de cela, j'ai travaillé avec les versions 1 à 5 de Drupal, puis beaucoup avec Wordpress, lorsqu'il s'agissait encore d'un outil de gestion de blog et de contenu, avant qu'il ne devienne un eierlegende Wollmilchsau. Depuis de nombreuses années, je travaille pour mes clients avec MODX, qui, à mes yeux, possède le moteur de modèles le plus simple et le plus direct, permettant la conversion la plus rapide des maquettes HTML 5 en modèles. De cette façon, j'ai acquis une grande expérience de la CMS au fil du temps.
Cronhill.de fonctionne également avec MODX. En raison de mes exigences élevées, les modèles sont devenus assez compliqués. Il y a la possibilité de répéter certains blocs, je peux travailler avec des marginales, inclure des informations supplémentaires, il y a un modèle pour le code, un pour le contenu avec de nombreuses images. C'est assez complexe maintenant.
Das alles wollte ich jetzt nicht.
Je ne voulais pas de tout ça maintenant.
Je voulais que ce soit plus simple. Je ne voulais pas de modèles de saisie complexes, mais un format simple dans lequel je puisse écrire facilement. Si vous observez un peu comme moi vos collègues et les tendances des développeurs, vous remarquerez deux ou trois tendances différentes :
- la tendance est aux sites web simples et linéaires, sans animations ni cloches ni sifflets, dont le code source HTML 5 est entièrement sémantique, élégant et rapide à charger.
- Wordpress est de plus en plus utilisé par des personnes qui ne comprennent plus la technologie de template de wordpress. Wordpress lui-même contient désormais toutes les finesses techniques pour concevoir soi-même un site sans aucune connaissance - avec des conséquences parfois flagrantes sur la quantité de données consommées
- il y a de plus en plus d'outils performants sur le web qui rendent les utilisateurs finaux complètement indépendants de leurs propres compétences techniques
Je n'aime plus développer des modèles Wordpress. Une solution basée sur MODX était également hors de question, car comme dans de nombreux autres CMS, les options de saisie du contenu sont toujours limitées à une fenêtre de formulaire. Je n'ai pas aimé ça.
Markdown
En raison des différents wikis que je coédite et de l'engouement pour les générateurs de sites statiques comme 11ty et d'autres, j'ai décidé de chercher un système de gestion de contenu (CMS) qui me permette d'utiliser des fichiers Markdown comme base du site web.
Qu'est-ce que le format Markdown ?
Markdown est un langage de balisage simplifié pour les documents texte développé en 2004 par le blogueur et développeur d'interface utilisateur américain John Gruber et le programmeur, auteur et activiste Aaron Swartz. L'objectif était de rendre facilement lisible le code qui n'avait pas encore été converti en XHTML. Un logiciel de conversion convertit la syntaxe en XHTML ou HTML 5 avant de la publier sur le Web.
Les signes de ponctuation sont principalement utilisés pour marquer le texte. Voici un ou deux exemples de la simplicité du balisage du texte :
<em> = Emphasis - l'accent est simplement marqué par deux *astérisques* (asteriks).
<strong> = l'accentuation forte est marquée par 4 **asteriks**.
Les rubriques sont simplement dotées d'une double croix ou d'un tiret imaginé en fonction du niveau.
# Überschrift 1
## Überschrift 2
### Überschrift 3
Vous pouvez trouver plus d'options de formatage sur le site web du projet daringfireball.net. Il existe une très bonne feuille de route sur Github.
Le grand avantage du format Markdown est que le flux d'écriture n'est que très peu interrompu et qu'une grande lisibilité est maintenue. Comme j'écris tous mes textes avec iA Writer et non avec Word depuis longtemps, la plupart des balises Markdown m'étaient déjà connues.
Bien entendu, vous pouvez également utiliser le HTML 5 normal dans les fichiers Markdown, ce qui est utile, par exemple, si vous voulez marquer les liens externes (par exemple avec l'attribut target).
Pico CMS
Trouver le bon CMS
J'ai cherché pendant un certain temps jusqu'à ce que je trouve un CMS qui me permette de travailler uniquement avec des fichiers Markdown. Ce CMS est Pico 2.1. Il est étonnamment rapide à installer et tout aussi rapide à configurer. Aussi simple qu'un stylo et du papier.
Outre l'affichage du contenu avec Markdown, Pico CMS définit la configuration des métadonnées avec YAML. YAML est également un langage source simplifié. L'acronyme récursif signifiait initialement "Yet Another Markup Language" (autre langage de balisage), mais a ensuite été remplacé par "YAML Ain't Markup Language".
Un en-tête typique peut ressembler à ceci :
--- Title: Bienvenue Description: Cette description sera placée dans la balise meta description. Author: Joe Bloggs Date: 2001-04-25 Robots: noindex,nofollow Template: index ---
Mirco Lang des Tutonautes a écritun bon tutoriel (en anglais) pour l'installation de Pico CMS, que je me contente de lier ici (il n'y a pas besoin de contenu redondant sur le net). Mais aussiles instructions en anglais de Pico CMS sont très faciles à comprendre et à mettre en œuvre.
J'ai décidé de continuer la mise en page de base de Cronhill.de, concernant l'en-tête de la page. Le Jardin est maintenant intégré dans les autres éléments du menu, une navigation horizontale entre les pages devrait toujours être possible.
La présentation du contenu nous ramène - à mon avis - agréablement aux débuts du WWW : une présentation de texte linéaire facile à lire et sans artifices. J'attache bien sûr une grande importance à la lisibilité, les lignes sont donc naturellement limitées en longueur, et j'ai mis en forme toutes les balises textuelles que j'utilise classiquement dans mes textes. Les liens externes sont toujours signalés par un symbole.
Édition simple
Transfert de fichiers et édition avec Notepad++
Fidèle à mes principes d'édition simple, je ne voulais absolument pas d'une méthode d'édition et de publication compliquée et encombrante. Écrivez localement, puis ouvrez le programme FTP, connectez-vous au serveur, puis téléchargez.
Pas question !
Un bon ami m'a alors fait savoir que Notepad++ avait la capacité de transférer lui-même des données par FTP vers des serveurs. Et donc je l'ai fait maintenant.
Tout d'abord, vous devez activer l'extension FTP dans les extensions de notepad++ et ensuite vous devez configurer votre connexion avec vos données FTP dans la fenêtre qui apparaît dans la colonne de droite. Si vous y saisissez le chemin direct vers vos fichiers, la fenêtre ressemblera à la mienne lorsque vous vous connecterez. (voir ci-dessus)
En double-cliquant sur un fichier, celui-ci s'ouvre et vous pouvez le modifier directement dans l'éditeur. Dès que vous aurez enregistré le fichier, il sera téléchargé et mis à jour.
Vous pouvez créer de nouveaux fichiers par un clic droit dans la zone blanche. Comme il n'y a pas de modèle ici, vous devez copier l'en-tête YAML d'un autre fichier, le coller et le modifier.
[ADDENDUM, 4 JUILLET 2021]
Notepad++ est un peu dépassé, dit-il. Une version plus agréable et plus à jour serait Visual Studio Code avec l'extension SFTP/FTP, écrit @lennybacon sur Twitter. Merci beaucoup. Je vais certainement y jeter un coup d'oeil.
Caractéristiques spéciales
Dernière mise à jour / Tags
Vous pouvez également créer vos propres champs dans l'en-tête de votre fichier Markdown. C'est ce que j'ai fait avec la valeur "changed". Ici, je peux spécifier une date pour la dernière modification.
Il existe une page séparée où toutes les pages sont affichées triées par la date de la dernière modification.
Le code de modèle pour cela est :
- {% for page in pages("", depth=3)|sort_by([ 'meta', 'Changed' ])|reverse if not page.hidden %}
- {{ page.meta.Changed|date("Y/m/d") }} {{ page.title }} {% endfor %}
Alternative
Tiddly Wiki
Anne-Laure Le Cunff a démontré une alternative pour Ness Labs qui est basée sur TiddlyWiki. Tiddlywiki se définit comme un carnet de notes non linéaire permettant de capturer, d'organiser et de partager des informations complexes. Il peut être utilisé pour rédiger des listes de tâches, mais aussi pour écrire un essai ou une histoire.
Ce qui est spécial à propos de TiddlyWiki : Toutes les informations sont affichées dans un seul fichier. Les contenus sont affichés ou masqués avec Javascript. L'avantage est à mon avis aussi l'inconvénient de la méthode. De nombreuses données doivent être téléchargées pour appeler de grands TiddlyWiki, qui peuvent ne pas être lus du tout. Cela ne me semble pas très efficace.
D'un autre côté, j'aime le fait qu'il soit possible pour les profanes de la technique de mettre en place une telle page avec les instructions de TiddlyWiki et Nesslabs.
Voici la page de TiddlyWiki et voici le manuel de Nesslabs. Vous trouverez ici d'autres méthodes techniques.
Si vous souhaitez approfondir ce sujet, je vous recommande également cet aperçudes autres projets Mind Garden sur la page de Ness Labs.
Changements
2021.06.28 - Ajout d'un lien vers l'aide-mémoire Markdown sur Github
tl, dr;
Wie kann ich mit Pico CMS und einfachen Markdown-Dateien einen kleinen Mind Garden, einen Jardin Intérieur bauen.
Commentaires (0)