PrePostPrint - User contributions [en]

User:Ailepet/Web design notes

2025-07-20T16:39:43Z

Ailepet: /* Workflows and tools */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://hypermedia.systems/book/contents/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
See https://www.arthurperret.fr/blog/2025-06-13-le-futur-de-l-edition-scientifique-est-au-format-texte.html

Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/ (using [https://lodel.hypotheses.org Lodel] and [[wikipedia:Text_Encoding_Initiative|TEI]])
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using [https://rmarkdown.rstudio.com/ R Markdown] and probably https://github.com/rstudio/tufte)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and styling ==
https://www.arthurperret.fr/blog/2020-05-22-ecrire-et-editer.html

https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

https://en.wikipedia.org/wiki/Separation_of_content_and_presentation

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). When using a a bare-bones digital writing tool, Markdown allows to add a minimal amount of semantics and hypertext.

Styling can either be made at the same time as writing, or in a later phase

=== Start from Markdown (always?) ===
See Data flowchart below

https://johnmacfarlane.net/beyond-markdown.html > https://github.com/jgm/djot

=== Styling as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
https://www.arthurperret.fr/blog/2023-04-03-le-bon-outil.html

We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://lodel.hypotheses.org/ Lodel]
* [https://scenari.org/ Scenari]
* [https://rust-lang.github.io/mdBook/ mdBook]
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://codeberg.org/ukrudt.net/lichen-markdown Lichen-Markdown]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

==== Converters ====

* [https://flathub.org/apps/garden.jamie.Morphosis Morphosis]

== Diagrams ==

Markdown-first data flow: [https://www.mermaidchart.com/raw/1a1d10c5-a8a2-4b3f-9c9b-7348f60f96a2?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/
* https://toolkit.wellgedacht.org/doku.php?id=start

User:Ailepet/Web design notes

2025-06-26T18:46:13Z

Ailepet:

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://hypermedia.systems/book/contents/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
See https://www.arthurperret.fr/blog/2025-06-13-le-futur-de-l-edition-scientifique-est-au-format-texte.html

Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/ (using [https://lodel.hypotheses.org Lodel] and [[wikipedia:Text_Encoding_Initiative|TEI]])
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using [https://rmarkdown.rstudio.com/ R Markdown] and probably https://github.com/rstudio/tufte)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and styling ==
https://www.arthurperret.fr/blog/2020-05-22-ecrire-et-editer.html

https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

https://en.wikipedia.org/wiki/Separation_of_content_and_presentation

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). When using a a bare-bones digital writing tool, Markdown allows to add a minimal amount of semantics and hypertext.

Styling can either be made at the same time as writing, or in a later phase

=== Start from Markdown (always?) ===
See Data flowchart below

https://johnmacfarlane.net/beyond-markdown.html > https://github.com/jgm/djot

=== Styling as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://lodel.hypotheses.org/ Lodel]
* [https://scenari.org/ Scenari]
* [https://rust-lang.github.io/mdBook/ mdBook]
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://codeberg.org/ukrudt.net/lichen-markdown Lichen-Markdown]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

==== Converters ====

* [https://flathub.org/apps/garden.jamie.Morphosis Morphosis]

== Diagrams ==

Markdown-first data flow: [https://www.mermaidchart.com/raw/1a1d10c5-a8a2-4b3f-9c9b-7348f60f96a2?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/
* https://toolkit.wellgedacht.org/doku.php?id=start

User:Ailepet/Web design notes

2025-06-22T20:13:28Z

Ailepet: /* Static websites as academic essays */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://hypermedia.systems/book/contents/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
See https://www.arthurperret.fr/blog/2025-06-13-le-futur-de-l-edition-scientifique-est-au-format-texte.html

Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/ (using [https://lodel.hypotheses.org Lodel] and [[wikipedia:Text_Encoding_Initiative|TEI]])
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using [https://rmarkdown.rstudio.com/ R Markdown] and probably https://github.com/rstudio/tufte)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and styling ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

https://en.wikipedia.org/wiki/Separation_of_content_and_presentation

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). When using a a bare-bones digital writing tool, Markdown allows to add a minimal amount of semantics and hypertext.

Styling can either be made at the same time as writing, or in a later phase

=== Start from Markdown (always?) ===
See Data flowchart below

https://johnmacfarlane.net/beyond-markdown.html > https://github.com/jgm/djot

=== Styling as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://lodel.hypotheses.org/ Lodel]
* [https://scenari.org/ Scenari]
* [https://rust-lang.github.io/mdBook/ mdBook]
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://codeberg.org/ukrudt.net/lichen-markdown Lichen-Markdown]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

==== Converters ====

* [https://flathub.org/apps/garden.jamie.Morphosis Morphosis]

== Diagrams ==

Markdown-first data flow: [https://www.mermaidchart.com/raw/1a1d10c5-a8a2-4b3f-9c9b-7348f60f96a2?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/
* https://toolkit.wellgedacht.org/doku.php?id=start

User:Ailepet/Web design notes

2025-06-22T19:37:30Z

Ailepet: /* To sort */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://hypermedia.systems/book/contents/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/ (using [https://lodel.hypotheses.org Lodel] and [[wikipedia:Text_Encoding_Initiative|TEI]])
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using [https://rmarkdown.rstudio.com/ R Markdown] and probably https://github.com/rstudio/tufte)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and styling ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

https://en.wikipedia.org/wiki/Separation_of_content_and_presentation

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). When using a a bare-bones digital writing tool, Markdown allows to add a minimal amount of semantics and hypertext.

Styling can either be made at the same time as writing, or in a later phase

=== Start from Markdown (always?) ===
See Data flowchart below

https://johnmacfarlane.net/beyond-markdown.html > https://github.com/jgm/djot

=== Styling as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://lodel.hypotheses.org/ Lodel]
* [https://scenari.org/ Scenari]
* [https://rust-lang.github.io/mdBook/ mdBook]
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://codeberg.org/ukrudt.net/lichen-markdown Lichen-Markdown]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

==== Converters ====

* [https://flathub.org/apps/garden.jamie.Morphosis Morphosis]

== Diagrams ==

Markdown-first data flow: [https://www.mermaidchart.com/raw/1a1d10c5-a8a2-4b3f-9c9b-7348f60f96a2?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/
* https://toolkit.wellgedacht.org/doku.php?id=start

User:Ailepet/Web design notes

2025-05-14T18:18:13Z

Ailepet: /* Static site generators */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://hypermedia.systems/book/contents/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/ (using [https://lodel.hypotheses.org Lodel] and [[wikipedia:Text_Encoding_Initiative|TEI]])
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using [https://rmarkdown.rstudio.com/ R Markdown] and probably https://github.com/rstudio/tufte)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and styling ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

https://en.wikipedia.org/wiki/Separation_of_content_and_presentation

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). When using a a bare-bones digital writing tool, Markdown allows to add a minimal amount of semantics and hypertext.

Styling can either be made at the same time as writing, or in a later phase

=== Start from Markdown (always?) ===
See Data flowchart below

https://johnmacfarlane.net/beyond-markdown.html > https://github.com/jgm/djot

=== Styling as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://lodel.hypotheses.org/ Lodel]
* [https://scenari.org/ Scenari]
* [https://rust-lang.github.io/mdBook/ mdBook]
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://codeberg.org/ukrudt.net/lichen-markdown Lichen-Markdown]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

==== Converters ====

* [https://flathub.org/apps/garden.jamie.Morphosis Morphosis]

== Diagrams ==

Markdown-first data flow: [https://www.mermaidchart.com/raw/1a1d10c5-a8a2-4b3f-9c9b-7348f60f96a2?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-13T08:57:36Z

Ailepet: /* Distinguishing between writing and editing */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://hypermedia.systems/book/contents/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/ (using [https://lodel.hypotheses.org Lodel] and [[wikipedia:Text_Encoding_Initiative|TEI]])
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using [https://rmarkdown.rstudio.com/ R Markdown] and probably https://github.com/rstudio/tufte)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and styling ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

https://en.wikipedia.org/wiki/Separation_of_content_and_presentation

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). When using a a bare-bones digital writing tool, Markdown allows to add a minimal amount of semantics and hypertext.

Styling can either be made at the same time as writing, or in a later phase

=== Start from Markdown (always?) ===
See Data flowchart below

https://johnmacfarlane.net/beyond-markdown.html > https://github.com/jgm/djot

=== Styling as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://lodel.hypotheses.org/ Lodel]
* [https://scenari.org/ Scenari]
* [https://rust-lang.github.io/mdBook/ mdBook]
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

==== Converters ====

* [https://flathub.org/apps/garden.jamie.Morphosis Morphosis]

== Diagrams ==

Markdown-first data flow: [https://www.mermaidchart.com/raw/1a1d10c5-a8a2-4b3f-9c9b-7348f60f96a2?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-12T08:42:39Z

Ailepet: /* Static websites as digital books */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://hypermedia.systems/book/contents/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/ (using [https://lodel.hypotheses.org Lodel] and [[wikipedia:Text_Encoding_Initiative|TEI]])
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using [https://rmarkdown.rstudio.com/ R Markdown] and probably https://github.com/rstudio/tufte)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). When using a a bare-bones digital writing tool, Markdown allows to add a minimal amount of semantics and hypertext.

Editing can either be made at the same time as writing, or in a later phase

=== Start from Markdown (always?) ===
See Data flowchart below

https://johnmacfarlane.net/beyond-markdown.html > https://github.com/jgm/djot

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://lodel.hypotheses.org/ Lodel]
* [https://scenari.org/ Scenari]
* [https://rust-lang.github.io/mdBook/ mdBook]
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

==== Converters ====

* [https://flathub.org/apps/garden.jamie.Morphosis Morphosis]

== Diagrams ==

Markdown-first data flow: [https://www.mermaidchart.com/raw/1a1d10c5-a8a2-4b3f-9c9b-7348f60f96a2?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet

2025-05-12T08:42:21Z

Ailepet:

Hello!

* [https://laurent.pointecouteau.com My personal website]
* Drafts : [[User:Ailepet/Web design notes]]

User:Ailepet/Web design notes

2025-05-11T14:49:37Z

Ailepet: /* Mutable tools */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/ (using [https://lodel.hypotheses.org Lodel] and [[wikipedia:Text_Encoding_Initiative|TEI]])
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using [https://rmarkdown.rstudio.com/ R Markdown] and probably https://github.com/rstudio/tufte)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). When using a a bare-bones digital writing tool, Markdown allows to add a minimal amount of semantics and hypertext.

Editing can either be made at the same time as writing, or in a later phase

=== Start from Markdown (always?) ===
See Data flowchart below

https://johnmacfarlane.net/beyond-markdown.html > https://github.com/jgm/djot

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://lodel.hypotheses.org/ Lodel]
* [https://scenari.org/ Scenari]
* [https://rust-lang.github.io/mdBook/ mdBook]
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

==== Converters ====

* [https://flathub.org/apps/garden.jamie.Morphosis Morphosis]

== Diagrams ==

Markdown-first data flow: [https://www.mermaidchart.com/raw/1a1d10c5-a8a2-4b3f-9c9b-7348f60f96a2?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-11T13:37:18Z

Ailepet: /* Static websites as academic essays */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/ (using [https://lodel.hypotheses.org Lodel] and [[wikipedia:Text_Encoding_Initiative|TEI]])
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using [https://rmarkdown.rstudio.com/ R Markdown] and probably https://github.com/rstudio/tufte)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). When using a a bare-bones digital writing tool, Markdown allows to add a minimal amount of semantics and hypertext.

Editing can either be made at the same time as writing, or in a later phase

=== Start from Markdown (always?) ===
See Data flowchart below

https://johnmacfarlane.net/beyond-markdown.html > https://github.com/jgm/djot

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://lodel.hypotheses.org/ Lodel]
* [https://scenari.org/ Scenari]
* [https://rust-lang.github.io/mdBook/ mdBook]
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Markdown-first data flow: [https://www.mermaidchart.com/raw/1a1d10c5-a8a2-4b3f-9c9b-7348f60f96a2?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-11T13:31:13Z

Ailepet: /* All-in-one (or most-in-one) tools */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). When using a a bare-bones digital writing tool, Markdown allows to add a minimal amount of semantics and hypertext.

Editing can either be made at the same time as writing, or in a later phase

=== Start from Markdown (always?) ===
See Data flowchart below

https://johnmacfarlane.net/beyond-markdown.html > https://github.com/jgm/djot

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://lodel.hypotheses.org/ Lodel]
* [https://scenari.org/ Scenari]
* [https://rust-lang.github.io/mdBook/ mdBook]
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Markdown-first data flow: [https://www.mermaidchart.com/raw/1a1d10c5-a8a2-4b3f-9c9b-7348f60f96a2?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-11T13:07:19Z

Ailepet: /* All-in-one (or most-in-one) tools */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). When using a a bare-bones digital writing tool, Markdown allows to add a minimal amount of semantics and hypertext.

Editing can either be made at the same time as writing, or in a later phase

=== Start from Markdown (always?) ===
See Data flowchart below

https://johnmacfarlane.net/beyond-markdown.html > https://github.com/jgm/djot

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://lodel.hypotheses.org/ Lodel]
* [https://rust-lang.github.io/mdBook/ mdBook]
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Markdown-first data flow: [https://www.mermaidchart.com/raw/1a1d10c5-a8a2-4b3f-9c9b-7348f60f96a2?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-10T10:22:54Z

Ailepet: /* Diagrams */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). When using a a bare-bones digital writing tool, Markdown allows to add a minimal amount of semantics and hypertext.

Editing can either be made at the same time as writing, or in a later phase

=== Start from Markdown (always?) ===
See Data flowchart below

https://johnmacfarlane.net/beyond-markdown.html > https://github.com/jgm/djot

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://rust-lang.github.io/mdBook/ mdBook]
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Markdown-first data flow: [https://www.mermaidchart.com/raw/1a1d10c5-a8a2-4b3f-9c9b-7348f60f96a2?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-10T09:52:18Z

Ailepet: /* Start from Markdown (always?) */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). When using a a bare-bones digital writing tool, Markdown allows to add a minimal amount of semantics and hypertext.

Editing can either be made at the same time as writing, or in a later phase

=== Start from Markdown (always?) ===
See Data flowcharts below

https://johnmacfarlane.net/beyond-markdown.html > https://github.com/jgm/djot

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://rust-lang.github.io/mdBook/ mdBook]
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

Markdown-first data flow: [https://www.mermaidchart.com/raw/1a1d10c5-a8a2-4b3f-9c9b-7348f60f96a2?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-10T09:43:45Z

Ailepet: /* Start from Markdown (always?) */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). When using a a bare-bones digital writing tool, Markdown allows to add a minimal amount of semantics and hypertext.

Editing can either be made at the same time as writing, or in a later phase

=== Start from Markdown (always?) ===
See Data flowcharts below

https://johnmacfarlane.net/beyond-markdown.html

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://rust-lang.github.io/mdBook/ mdBook]
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

Markdown-first data flow: [https://www.mermaidchart.com/raw/1a1d10c5-a8a2-4b3f-9c9b-7348f60f96a2?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-10T09:34:08Z

Ailepet: /* Start from Markdown (always?) */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). When using a a bare-bones digital writing tool, Markdown allows to add a minimal amount of semantics and hypertext.

Editing can either be made at the same time as writing, or in a later phase

=== Start from Markdown (always?) ===
See Data flowcharts below

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://rust-lang.github.io/mdBook/ mdBook]
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

Markdown-first data flow: [https://www.mermaidchart.com/raw/1a1d10c5-a8a2-4b3f-9c9b-7348f60f96a2?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-10T08:54:01Z

Ailepet: /* Diagrams */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). When using a a bare-bones digital writing tool, Markdown allows to add a minimal amount of semantics and hypertext.

Editing can either be made at the same time as writing, or in a later phase

=== Start from Markdown (always?) ===
See Data graph below

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://rust-lang.github.io/mdBook/ mdBook]
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

Markdown-first data flow: [https://www.mermaidchart.com/raw/1a1d10c5-a8a2-4b3f-9c9b-7348f60f96a2?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-10T08:13:36Z

Ailepet:

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). When using a a bare-bones digital writing tool, Markdown allows to add a minimal amount of semantics and hypertext.

Editing can either be made at the same time as writing, or in a later phase

=== Start from Markdown (always?) ===
See Data graph below

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://rust-lang.github.io/mdBook/ mdBook]
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-09T23:59:49Z

Ailepet: /* Distinguishing between writing and editing */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). When using a a bare-bones digital writing tool, Markdown allows to add a minimal amount of semantics and hypertext.

Editing can either be made at the same time as writing, or in a later phase

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://rust-lang.github.io/mdBook/ mdBook]
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-09T23:50:45Z

Ailepet:

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). Markdown allows to add a minimal amount of semantics and hypertext in a bare-bones digital writing tool.

Editing can either be made at the same time as writing, or in a later phase

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://rust-lang.github.io/mdBook/ mdBook]
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-09T23:48:23Z

Ailepet: /* Diagrams */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). Markdown allows to add a minimal amount of semantics and hypertext in a bare-bones digital writing tool.

Editing can either be made at the same time as writing, or in a later phase

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

Tools interactions: todo

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-09T23:47:40Z

Ailepet: /* General purpose */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). Markdown allows to add a minimal amount of semantics and hypertext in a bare-bones digital writing tool.

Editing can either be made at the same time as writing, or in a later phase

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* [https://notepad-plus-plus.org/ Notepad++]

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-09T23:46:43Z

Ailepet: /* All-in-one (or most-in-one) tools */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). Markdown allows to add a minimal amount of semantics and hypertext in a bare-bones digital writing tool.

Editing can either be made at the same time as writing, or in a later phase

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://docs.racket-lang.org/pollen/ Pollen]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* Notepad++

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-09T23:44:53Z

Ailepet: /* All-in-one (or most-in-one) tools */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). Markdown allows to add a minimal amount of semantics and hypertext in a bare-bones digital writing tool.

Editing can either be made at the same time as writing, or in a later phase

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* Notepad++

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-09T23:44:43Z

Ailepet: /* All-in-one (or most-in-one) tools */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). Markdown allows to add a minimal amount of semantics and hypertext in a bare-bones digital writing tool.

Editing can either be made at the same time as writing, or in a later phase

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://www.libreoffice.org/ LibreOffice] Writer
* [https://codeberg.org/abrupt/gabarit-abrupt Gabarit Abrüpt]

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* Notepad++

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-09T23:42:18Z

Ailepet: /* All-in-one (or most-in-one) tools */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). Markdown allows to add a minimal amount of semantics and hypertext in a bare-bones digital writing tool.

Editing can either be made at the same time as writing, or in a later phase

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")
* [https://www.libreoffice.org/ LibreOffice] Writer

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* Notepad++

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-09T23:39:22Z

Ailepet:

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). Markdown allows to add a minimal amount of semantics and hypertext in a bare-bones digital writing tool.

Editing can either be made at the same time as writing, or in a later phase

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* Notepad++

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* [https://esadpyrenees.github.io/PageTypeToPrint/ PageTypeToPrint]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-09T23:27:15Z

Ailepet: /* All-in-one (or most-in-one) tools */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). Markdown allows to add a minimal amount of semantics and hypertext in a bare-bones digital writing tool.

Editing can either be made at the same time as writing, or in a later phase

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app] ("Focus on your text and let Typst take care of layout and formatting")

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* Notepad++

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-09T23:26:43Z

Ailepet: /* All-in-one (or most-in-one) tools */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). Markdown allows to add a minimal amount of semantics and hypertext in a bare-bones digital writing tool.

Editing can either be made at the same time as writing, or in a later phase

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr] ("From Idea to Publication")
* [https://typst.app/ typst.app]

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* Notepad++

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-09T23:24:58Z

Ailepet: /* To sort */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as [https://deuxfleurs.fr/ Deuxfleurs] or [https://neocities.org/ Neocities] or [https://assistance.free.fr/articles/620 free.fr] (or countless others)
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). Markdown allows to add a minimal amount of semantics and hypertext in a bare-bones digital writing tool.

Editing can either be made at the same time as writing, or in a later phase

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr]
* [https://typst.app/ typst.app]

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* Notepad++

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]
* https://filiph.net/text/the-revenge-of-server-side-includes.html

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

== To sort ==

* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-09T23:19:06Z

Ailepet: /* To sort */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file.
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). Markdown allows to add a minimal amount of semantics and hypertext in a bare-bones digital writing tool.

Editing can either be made at the same time as writing, or in a later phase

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr]
* [https://typst.app/ typst.app]

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* Notepad++

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

== To sort ==

* https://filiph.net/text/the-revenge-of-server-side-includes.html
* https://deuxfleurs.fr/
* https://radicalweb.design/ressources/

User:Ailepet/Web design notes

2025-05-09T23:14:51Z

Ailepet: /* Static site generators */

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file.
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). Markdown allows to add a minimal amount of semantics and hypertext in a bare-bones digital writing tool.

Editing can either be made at the same time as writing, or in a later phase

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr]
* [https://typst.app/ typst.app]

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* Notepad++

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* [https://www.mkdocs.org/ MkDocs]
* [https://gohugo.io/ Hugo]

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

== To sort ==

* https://filiph.net/text/the-revenge-of-server-side-includes.html
* https://deuxfleurs.fr/
* [https://radicalweb.design/ressources/cli/ https://radicalweb.design/]

User:Ailepet/Web design notes

2025-05-09T23:13:13Z

Ailepet:

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

== The three main families of read-only digital text ==
Text is usually read in one of the 2 following mediums:

* on paper: books, zines...
* through a screen:
** either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
** or by downloading a self-containing file: PDF, epub
Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be ''read'' rather than ''edited'', both paper and screen mediums could be adressed through one of three categories of digital text files:

* files made to be printed into paper; e.g. '''PDF'''
* files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. '''ePub'''
* files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. '''HTML/CSS'''

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

== From the web to the print ==

=== Kinds of websites ===
We can roughly sort websites on an axis:

* on one side, '''static websites''', in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file.
* going slightly further to the other side, there are '''multimedia websites'''. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
* keeping going further to the other side, there are '''blogs, forums and social websites'''. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see [https://indieweb.org/ IndieWeb]). They need an active internet connection and dynamic server-side content generation to work.
* all the way to the other side, there are the fully '''interactive websites.''' Those can be bona fide apps. They require the most computational power on the user's device.
Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

=== Static websites as digital books ===
"Digital books should be the best books we’ve ever had" (Matthew Butterick, [https://docs.racket-lang.org/pollen/ "Pollen: the book is a program"])

Some examples:

* https://livres.louvre.fr/
* https://famicom.party/book/
* https://practicaltypography.com/
* https://mislav.github.io/diveintohtml5/

=== Static websites as academic essays ===
Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

* Open science platforms:
** https://shs.cairn.info/
** https://journals.openedition.org/
* Individual web pages:
** https://joelgombin.github.io/makingof.html (using https://edwardtufte.github.io/tufte-css/)
** https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

== Distinguishing between writing and editing ==
https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). Markdown allows to add a minimal amount of semantics and hypertext in a bare-bones digital writing tool.

Editing can either be made at the same time as writing, or in a later phase

=== Editing as an option? ===
"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, [https://smolweb.org/guidelines.html "Guidelines for a smolweb"])

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, [https://practicaltypography.com/why-theres-no-e-book-or-pdf.html "Why there's no e-book or PDF" (Practical Typography)])

== Workflows and tools ==
We will focus on opensource tools only, with a preference for local-first

=== All-in-one (or most-in-one) tools ===

* [https://www.zettlr.com/ Zettlr]
* [https://typst.app/ typst.app]

=== Mutable tools ===

==== Text editors ====

===== Collaborative =====

* [https://hedgedoc.org/ HedgeDoc] ([https://community.hedgedoc.org/t/public-instances/282 public instances])

===== Individual =====

====== General purpose ======

* [https://flathub.org/apps/org.gnome.TextEditor Text Editor] (GNOME) / [https://flathub.org/apps/org.kde.kwrite KWrite] (Plasma) / [https://flathub.org/apps/org.xfce.mousepad Mousepad]
* Notepad++

====== Markdown-focused ======

* [https://flathub.org/apps/org.gnome.gitlab.somas.Apostrophe Apostrophe] (GNOME) / [https://flathub.org/apps/org.kde.ghostwriter ghostwriter] (Plasma)

==== Static site generators ====

* MkDocs
* Hugo

== Diagrams ==

Data flow: [https://www.mermaidchart.com/raw/2d5bb9d6-1fb5-42b6-8751-f1c50545faaa?theme=light&version=v0.1&format=svg raw SVG]

== To sort ==

* https://filiph.net/text/the-revenge-of-server-side-includes.html
* https://deuxfleurs.fr/
* [https://radicalweb.design/ressources/cli/ https://radicalweb.design/]

User:Ailepet/Web design notes

2025-05-09T22:57:01Z

Ailepet: /* Static websites as academic essays */

User:Ailepet/Web design notes

2025-05-09T22:47:49Z

Ailepet: /* From the web to the print */

User:Ailepet/Web design notes

2025-05-09T22:46:49Z

Ailepet: /* To sort */

User:Ailepet/Web design notes

2025-05-09T22:45:14Z

Ailepet: /* Distinguishing between writing and editing */

User:Ailepet/Web design notes

2025-05-09T22:38:52Z

Ailepet: /* Static websites as digital books */

User:Ailepet/Web design notes

2025-05-09T22:36:14Z

Ailepet: /* The three main families of read-only digital text */

User:Ailepet/Web design notes

2025-05-09T22:35:45Z

Ailepet: /* The three main families of read-only digital text */

User:Ailepet/Web design notes

2025-05-09T22:35:18Z

Ailepet: /* The three main families of read-only digital text */

User:Ailepet/Web design notes

2025-05-09T22:30:49Z

Ailepet: /* Kinds of websites */

User:Ailepet/Web design notes

2025-05-09T22:30:28Z

Ailepet: /* Kinds of websites */

User:Ailepet/Web design notes

2025-05-09T22:27:17Z

Ailepet: /* Kinds of websites */

User:Ailepet/Web design notes

2025-05-09T22:24:35Z

Ailepet: /* The three main families of read-only digital text */

User:Ailepet/Web design notes

2025-05-09T22:24:00Z

Ailepet: /* The three main families of read-only digital text */

User:Ailepet/Web design notes

2025-05-09T22:23:39Z

Ailepet: /* The three main families of read-only digital text */

User:Ailepet/Web design notes

2025-05-09T22:18:43Z

Ailepet: /* Kinds of websites */

User:Ailepet/Web design notes

2025-05-09T22:17:50Z

Ailepet: /* Kinds of websites */

User:Ailepet/Web design notes

2025-05-09T22:15:08Z

Ailepet: /* Kinds of websites */