Monday 14:30 – 18:30 & Tuesday 15:30 – 18:45 Summersemester 2026
For Inspo jans are.na -> various staged books
https://www.are.na/jnvncnt-dfk/various-staged-books
repro fotos of books/ creative staging
let's stay in touch there :)
Also please upload Rundgang pictures and share your repro pictures or pictures of your book in general here:
https://drive.google.com/drive/folders/1NjXUGM57YPKvHTo-X_V4gimfYsMqOu-5
working with sublime
html structure
html
<html lang="de">
html
<meta charset="UTF-8">
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
html
<title>HERE</title>
html
<link rel="stylesheet" href="/assets/css/fonts.css">
not so basic html
good-to-know
more to say
terminal
NICEST TUTORIAL
phones, computers, also satellites & routers access the internet
Link: what shape is the internet?
Problems:
Most underwater cables are owned by private tech companies; similar routes to colonialist sea trade;
–> companies deciding, where to prioritize their bandwidth
Most websites run on Amazon Web Services
–> provide cloud and computing power (many server farms)
5G (in comparison to 4G) transmits more information at a shorter distance, but also has limited range (can be blocked by trees)
–> more and more antennas needed
–> is unlimited growth in this system possible/sustainable?
BeReal Time: 16:32
because world is burning but it is also more fun
On the internet:
less control, same website can look different in different browsers (different html visuals)
tip for searching through a websites code for inspiration:
Use Inspector (Durchsuchen) and hover over elements of the website –> automatically highlights corresponding part of the code
If code says: canvas
–> custom coded block for website beyond standard html (more like an app)
Commercial websites have to have imprint/legal/colophon/Impressum
–> look for who made the website
Scrollytelling as interaction with website
Hosting through GitHub – A How To:
(or watch the video tutorial in the arena channel –> "This is my first website"))
(IMPORTANT: keep files organized and in one spot)
8. Find simple html structure and copy&paste into code editor
–> use https://www.w3schools.com/ for example
–> when using TextEdit (already installed on Apple devices), make sure you change to unformatted text
–> otherwise download code editor like Sublime or Visual Studio Code
9. Save as index.html into your GitHub folder
10. In GitHub for Desktop enter a comment (first commit; or something to remember, which changes you made) and press commit to main; then push changes
11. If done correctly: Go to Settings–>Pages and click on the link; your website should be live
(See also arena channel –> "This is my first website")
Homework is outlined at the bottom.
This is a sporadic trail of thoughts, notes and tasks.
All tasks done in class are outlined here (Linked)
Task 1 in class - (https://its-not-a-book.codeberg.page/itr-images/46073331/)
Downloading the InDesign file, ‘Coding as a playground’.
Create posters using the outlined styles within ‘Windows<Styles<Paragraph Styles’ and enabling hidden characters to play around with the pre-made styles, sizes and alignment. Using ‘columns breaks’ within Type<insert break character’ to help move text and spaces.
Playing around for half an hour, finding unexpected outcomes. Then upload onto the arena board here
Task 2 in class - (https://www.are.na/block/46073331)
CSS is the values of the styles - what the typeface of text will be, the sizes, the alignment...: h2,.small{
font-size: 1em; etc}
Some Random Notes:
There is an overall style (Body) outlining typeface: (< p >) is the smallest outlined basic style.
All the CSS sets are called classes.
Sans-serif in CSS: automatic sans-serif type.
(< i >) italic(< / i >)
Variations can be made in HTML: (< p class = "four_col” >) Applies to text within these brackets (< / p >)
This means the (< p >) class outlined in the CSS is combined with the ‘four_col’ class. To create the body text to be aligned into 4 columns.
This means you can edit the presets to suit your output in HTML, or you can create new classes in CSS.
17:45
Task 3: First feature to try to add.
Now it is getting interesting - web is interactive.
(< details >) add effects that you can apply to text (colour/columns) in CSS, and when placed in HTML, it creates a dropdown of the information within (< / details >)
(< summary >) Always Displayed text (< / summary >)
There will always be a way to open the script on a web page, which is the CSS of all websites. Through this, you can change the output of the page - the body text, turning the text red, size, etc,
You can change the design of websites.
Homework:
Finished class at 18.30.
*Some of the HTML I have been inputting on this arena is disappearing, so I have included brackets for it to sit and spaces to break the commands, and I hope Arena doesn't remove them. Eg, (< class >) xxxx (< / class >) should be without brackets or spaces in the code.
"Its Hard with digital design software to create mistakes and exploration. In comparison to InDesign, a very polished design software, this coding platform doesn’t do what you want it to do - it creates friction and unexpected outcomes, which can become inspiration. "
https://www.are.na/jnvncnt-dfk/its-not-a-book
-> Link for Arena
https://its-not-a-book.codeberg.page/
-> Link for ‘It’s not a book!’ Web
Homework : Play the ‘Learn markdown’ game , Print 6 sets of your design (details at the bottom)
*Page → Seiten
Double spread → Doppelseitig
*Alexander Kluge (Spector books)
We’ll have to receive a card that allows us to enter the lab, so we can print or use computers (We should go to Hammerbrook to pick up the cards)
For registration, we’ll receive a link.
170*240 (minimum 20 pages)
What we’ll gonna do : Perfect binding’ = Klebebindung
[Settings for exporting pdf]
General -> pages(not spread), page position : centered, paper size : A4
Marks and Bleeds -> crop marks , use document Bleed settings
[Druken settings]
Doppelseitig -> Ein (For vertical flipping)
Test print 1~4 pages before you fully print, so you can check if the settings are good. Print 6 sets of your design (categories) 1 for you, 1 for Jan, 4 exchange with others
some of the lab experience was enhanced for dramatic effect
“Psycho Analyse” Jan’s shirt reads in bright pink letters as he rushes the last students out of F153 so we could enter. A herd of srudents migrates from the CoLab into the cleared room skittering to find a seat that would accommodate our high standards. Mine for example has this feature of launching you forwards if sat down on the wrong way.
First our lovely lecturer reminds us of the markdown game, having forgotten to upload it last time. But we must beware, this mask of a game might be hiding a secret learning curve! Jan also tells us about the beautiful excursion he went on with his colleague Simon, the second ruler of the CoLab. As outcasts with MacBooks in a room full of enemies of the Apple tm, they bond and return from Nürnberg a little closer than before.
After this beautiful story, Jan explains how to name files correctly. Using my file as one of the negative examples, he points out not to use capitalized letters, no Umlaute such as ä,ö,ü as well as ß and no gaps. Quick hushes ping pong through the room followed by ten minutes of silence and the clacking of keyboards, as we change the names of our files. Some students even manage to connect Google Drive to their desktop, which is an option apparently.
After this quick intermission the real work begins: CSV files, a blessing and a curse. As we tread closer and closer to the uncharted territory of programming, the focus and tension in the room begin to rise. I take a sip of water and put on my jacket; time to get serious. After about five minutes of input, I finally realize that CSV files always seem to be tables, maybe I should’ve noticed that last week already.
Even the all-mighty, all-knowing Jan reaches his limits when Excel gets involved. After the search engine’s ai overview surprisingly fails to deliver a worthwhile solution, Tyler steps in to suggest new ideas. At least now Jan is able to multiply the triangle with the red exclamation mark. In the end everything works out and we reach the task of the day. After a quick break Leo catches Morten going through his laptop’s storage. Suspicious. But not as suspicious as Bennet sitting secluded on the side lines, after having to help everyone in last week’s session.
Slowly most students finally manage to get on the right track. At this point our limbs are weary and bones tired, but anytime a question turns up, the big blue orbs that are Jan’s eyes appear before you to kindly help out. Besides him, Ania is also crowded by us pestering, loitering greenhorns, answering any questions thrown her way.
The last lesson of the day is that we’re allowed to use our free will to open and close the windows of the room as we please, a liberation none of us had considered thus far.
And with some homework (playing the markdown game and coming up with a neat design concept for this lesson’s task), out talented and wonderful teacher sends us home.
How to structure information?
Latch Principle www.medium.com
Location / Alphabet / Time / Category/ Hierarchy
Markdown to style texts
Workshop Stiftung Katalogkunst
How to start – Order for CSV files ??
Verdana Typeface used by Ikea once for their catalog in 2010
Csv to combine files and create an automatic catalog “really tecky” -> video tutorial
Python -> Scraper, blocks_by.csv, @ so that adobe recognize it as an image
Never leave the outer edges the same.
Create Object und fonts
Duplicate and insert in offset
Under 11: small text need more space, large text it the opposite,
less distance / Laufweite
Option + arrows to change size and position, distance between type
Satzfeieinstellung / Justification – smaller looks better
U can remove letter with image “find what” - “change to”
“Show hidden characters”
Created merged documents
2. last option by object style options “fill frame proportionally”
Shift command point komma
Shift + command – text resized
Printed X doesn’t recognize empty pages: add text like small dott
Data merge fenster
Find the data here
Anja Groten Masters Program