Hyperzine

*`¯´*.¸¸SuperVisual HyperZine¸¸.*`¯´*

A Zine out of all the screenshots we made during working & trying on our web extensions and various projects from SI26.

This is mostly a very structureless archiving/collecting book.

Sections

1. Introduction:
   • To be written, see plan below
2. Typography

• Inspector extensions, E-Mail editor, Declarative Companion View,  Felines Screenshots, hover translate, making extenstions, specific lens, storybook tiger poem, weird stuff, Emoji Autopsy,

1. Broken Websites/Elements

• degridify, Inspector extensions, making extenstions, specific lens, storybook tiger poem, fred, every new screenshot, ascii aesthetic swap

1. Shapes and Colors

• Inspector extensions, webby sprouts, Kandinsky-esque, degridify, Blackhole

1. Pictures of Screens, weird stuff,

• 3DS, 27 January First Web Extensions, Felines Screenshots,

Intro Text Draft

• little intro about the whole
• one sentence: what is the compend of the book?
• political dimension of a screenshot?
• what does it mean to take things away of this kind of environment?
• pedagogical material: e.g. show to ppl never did css stuff
• situatedness/zoology
• project also about organisation of collection
• the political dimensions of screenshots? keeping receipts? what does a screenshot show?

Cloud

https://cloud.nubo.coop/s/6oX4DCWjMLHsjxn?path=%2F

Pad with To Do's & decisions:

https://pad.xpub.nl/p/hyperzine

Jinja to generate Zine

generated html page

https://hub.xpub.nl/cerealbox/SI26/hyperzine/

wiki explanation:

Jinja

The scripts:

Stored in cerealbox/var/www/SI26/hyperzine

nano template.html
nano make_
python3 make_html_page.py

To activate Jinja:

source venv/bin
source venv/bin/activate

[you should see now (venv) xpub1@cereal-box:]

UPDATE INTO THE LAYOUT MAKING

I (kiara) think where I landed is the best I can achieve for now.

What I did

• add a script to the end of the template.html that checks for the height/width ratio of the images → disclaimer: there is a bug on some images that should be landscape but are not, idk why, if somebody has a solution feel free to adapt the script!
• add some very basic css to rotate the right images and put them full page

New structure of the folder
hyperzine
—— css
———— style.css [main stylesheet]
———— vars.css [variables, such as font-sizes, colours, page-dimensions]
———— interface.css [paged.js css, you don't have to touch it ever]
———— fonts.css [to call fonts, it's empty for now]
———— pages.css [to set the book's settings such as dimensions, margins, page numbers,...]
—— fonts [fonts folder, to fill]
—— images [image folder, to update with all the missing folders + new images]
—— js
———— paged.polyfill.js [paged.js, don't touch it]
———— reload-in-place.js [to prevent us from having to scroll all the way down if we're working on the end of the book]
—— make_html_page.py
—— template.html
—— index.html [reminder, we don't ever touch this file]
—— venv

Reminder of how to work with the files
open a terminal window and type

ssh cerealbox
cd /var/www/html/SI26/hyperzine
source venv/bin/activate

(optional but nice to be efficient ↓)
open a second terminal window

ssh cerealbox
cd /var/www/html/SI26/hyperzine
nano template.html

open a third terminal window and connect to cerealbox

cd /var/www/html/SI26/hyperzine
cd css
nano style.css

That way, you have 3 terminal windows open, the first one allows to relaunch the .py script everytime you make modifs in the template.html, the second one is the template, so you can modify it and press ctrl/cmd+s to save and never have to close nano, the third one is the css that you can also ctrl/cmd+s to save (doesn't require a relaunch of the script)

It basically looks like this :D

To preview the changes you use the url: https://hub.xpub.nl/cerealbox/SI26/hyperzine/