SI28/Publication

This page documents the process we followed to create the final publication of Special Issue 28, and it will be included in the publication itself. Woooooo

General decisions

• The Projects SI 28 page will not be printed, and it will contain just brief intro and description of each project, with a link to the dedicated project page.
• If parts of other pages appear or are transcluded, avoid repetitions: do not print them. E.g. if there is a writing machine in a radio show, only write a short explanation and then transclude the page of the wiring machine within the noprint div.
• Links:
  • Do not write the full URL in the text unless we want it to be printed
  • Keep colour change
• Add here other decisions made

Workflow

As decided in the Prototyping class of the 2^nd December 2025:
Dirty wiki scraping based on full consensus while allowing anarchy!

1. Wiki page content

• Finish the content of all wiki pages you contributed to
• Edit source: Include what ought not be printed in <div class=noprint></div>
• Edit source: make sure the page is structured like the following:

<h1>TITLE</h1>
summary / short intro text
<div class=box>
  CONTENT
</div>

2. CSS Stylesheet

The wiki has 2 important types of CSS stylesheet

• 1x Amazine.css: The global stylesheet that is applied to the entire publication
  • Please do not edit this css!
• pagetitle.css: A stylesheet that only applies to the page with the same title, which overwrites the global css only inside of the .box class
  • This sheet is a template you can edit locally!
  • Check the Content subheading down below for which pages you're responsible to create and upload the PDF + CSS to sergio

Put ?action=render after the URL and download both.

Edit Footer

In the pagetitle.css template, on @page:left and @page:right you’ll find a comment on the code. Make sure to edit them! Only edit the content inside the quote.

@page:left

1. EDIT SECTION – Writing-Machines / Public-Event / Radio-Show
2. ADD COMMENT(optional) – you can customize the color of the text

@page:right

1. ADD RELATED PROJECT(optional)
2. EDIT SECTION – Writing-Machines / Public-Event / Radio-Show

.box class

The wiki page content is contained inside a div with a “box” class. You are free to change the CSS within this box class however please use the page-unique stylesheet. This way, all the pages will have a unified border but we still have creative freedom over the CSS within this box.

You can treat the .box class like you would the body.

Please also add .box in front of any other CSS you code, for example if you want to edit h3 within the box:

.box h3 {
  color: pink;
}

Feel free to ask a classmate for help!

Bash script for automation make-amazine.sh

1. create a local folder called amazine: mkdir amazine
2. move inside this folder: cd amazine
3. inside this folder, make a bash script with the name make-amazine.sh: nano make-amazine.sh
4. inside this script, change the wiki page links to the one you want to work with
5. create and edit your own CSS file: nano mypage.css
6. then run the bash script: bash make-amazine.sh
7. check if this generated a PDF!

# --------- CSS
# download Amazine.css from the wiki to my local folder
curl 'https://pzwiki.wdka.nl/mediadesign/Amazine.css?action=raw' -o Amazine.css

# --------- HTML
# (OPTIONAL) download local copy of the wiki page as HTML file
# curl 'https://pzwiki.wdka.nl/mediadesign/Writing_Machines%E2%80%93Protocols%E2%80%93Feedback?action=render' -o  specialissuepage.html
# wget -E -k -p -l 1 'https://pzwiki.wdka.nl/mediadesign/Writing_Machines%E2%80%93Protocols%E2%80%93Feedback?action=render'

# --------- PDF
# generate a PDF with weasyprint, for each of your wiki pages
weasyprint -s Amazine.css -s mypage.css 'https://pzwiki.wdka.nl/mediadesign/mypage?action=render' mypage.pdf

3. Upload to Sergio

See here how to upload to Sergio.

Please adhere to the file names listed below in Content

• Upload your PAGENAME.pdf inside /var/www/html/amazine/ in Sergio
• Upload your PAGENAME.css inside /var/www/html/amazine/styles/ in Sergio
• Mark these steps as finished in the #Content list below, by using the emojis!
• Finished! :D

Content

Important

Wikipage titles + File names: Title listed here should be used for wiki page + PDF + CSS file names, but replace the / with a _
Responsibility: Name in () is person responsible for the PDF and CSS.

Legend

🟡 = Content finished; 🟣 = CSS finished; 🟢 = Uploaded on Sergio.

---

• Colophon (Barbara) 🟣🟢
• Introduction (Lea)
• Content (Youjung) 🟡
• Writing-Machines
  • Writing-Machines/Arnhem (Phillip)
  • Writing-Machines/Beatles (Ema)
  • Writing-Machines/Death-Core-Writing-Machine (Ema)
  • Writing-Machines/Glyphica-Text-Machine (Lea) 🟡
  • Writing-Machines/Mud-Cell-Poem (Youjung) 🟡🟣🟢
  • Writing-Machines/Poetry-Generator (Youjung) 🟡
  • Writing-Machines/Reading-and-Interpreting-a-Dotmatrixs-Scoring (Robin)
  • Writing-Machines/Psychogeographic-Walking-Machine (Lea) 🟡
  • Writing-Machines/State-Machines (KIKI)
• Public-Event
  • Public-Event/A-story-in-a-story-in-a-story (Barbs) 🟡🟣🟢
  • Public-Event/Gesture-Machine (Valentin)
  • Public-Event/The-Metathinking-Metamachine (Tommi)
  • Public-Event/The-Calm-Machine (Sibyl)
  • Public-Event/Writing-Machine-Ensemble (Ema, Daan, Robin)
  • Public-Event/Water-Vessel-Dwelling-in-Temporality (Soda)
  • Public-Event/Marginalia (Luca) 🟡
  • Public-Event/The-Love-Machine (Phillip)
• Radio-Shows
  • Radio-Show/Week1 (Robin)
  • Radio-Show/Week2 (Daan)
  • Radio-Show/Week3 (Ema)
  • Radio-Show/Week4 (Soda)
  • Radio-Show/Week5 (Lea)
  • Radio-Show/Week6 (Daan) 🟡🟣🟢
  • Radio-Show/Week7 (Youjung) 🟡🟣🟢
  • Radio-Show/Week8 (Tommi)
• Glossary (Valentin)

Front + back cover design (Kiki)

CSS Tips&Tricks

Page break

in wikipage HTML, put an empty <div> on the spot you want a page break:

<div class=break></div>

in CSS:

.break {
  break-before: always;
}

High resolution images

To not have pixelated images, in your wikipage HTML, change image dimensions to something big like 940x940px. Then alter the img {} in CSS as you see fit.

Tip: If you want it to fill the page and not go over the border, use width: 100%;