You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
292 lines
10 KiB
HTML
292 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
<title>Testinggg</title>
|
|
<link rel="stylesheet" href="index.css" media="only screen" />
|
|
<link
|
|
rel="stylesheet"
|
|
media="only screen and (min-device-width : 1190px) and (max-device-width : 1440px)"
|
|
href="./laptop_s.css"
|
|
/>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class = "titletext">
|
|
<h1 class = "title">chatty, messy, sticky, <span id="tsss" class = "title">tsss</span>...</h1>
|
|
<h4>A diary from Habitat (Tredozio, IT), August 2022</h4>
|
|
</div>
|
|
|
|
|
|
<div class="diary">
|
|
<div class="part part1" >
|
|
<p>
|
|
"Yesterday I published something. Ah wait, not 'I', I mean 'we'. I
|
|
was with 11 other people and we made our own little book then bound
|
|
everything together. Pfff... it was not easy to bind all the
|
|
different pieces into one, because everyone made various contents
|
|
with different intentions. We were so chatty thus it was chaotic.
|
|
But we persistently and stubbornly stayed together. In the end, what
|
|
we created was a heavy-fat-ugly-cute book thingy."
|
|
</p>
|
|
</div>
|
|
|
|
<div class="part part2">
|
|
<img src="./img/book1_1024.png" />
|
|
</div>
|
|
|
|
<div class="part part3" >
|
|
<img src="./img/pancake.jpg" />
|
|
</div>
|
|
|
|
<div class="part part4">
|
|
<p>
|
|
"3, 2, 1, Yayyyy! We
|
|
cheered and celebrated our collaborative Buchimgae (Korean pancake)
|
|
cooking. Sharing one Buchimage altogether, we tore it into pieces.
|
|
It was GOOD. The pancake batter was a glue, as it hugged all the
|
|
ingredients. Looking back, cooking was also a glue, because we
|
|
became closer in the end. Tssss... the sizzle, the chatty and the
|
|
festive sounds still lingers in my ears..."
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class = "transition"><p>.</p><p>.</p><p>.</p></div>
|
|
|
|
<div class="cartoon">
|
|
<div class="cut cut1">
|
|
<div class="ani"><img src="./img/ex.jpg" /></div>
|
|
<div class="text">
|
|
<p>Rotterdam to Eindhoven, Eindhoven to Bologna, Bologna to Faenza, Faenza to Tredozio...<br>
|
|
Our journey from the Netherlands to Italy was made through winding roads.
|
|
|
|
It was orange evening that we arrived at Habitat.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cut cut2">
|
|
<div class="ani"><img src="./img/bibi_768.jpg" /></div>
|
|
<div class="text">
|
|
<p>
|
|
If we think of the word <i>publishing</i>, we're prone to be stuck
|
|
with an idea of working on some documents in Adobe applications,
|
|
then print, then glue.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="cut cut3">
|
|
<div class="ani"><img src="./img/wasp_1024.jpg" /></div>
|
|
<div class="text">
|
|
<p>BUT it could be more than this..</p>
|
|
<p>The forms of actions should be various...</p>
|
|
<p>All-together!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="intro intro1">
|
|
<h4>Collective book binding</h4>
|
|
<p>
|
|
<b>Procedure (step-by-step):</b><br />
|
|
a: Relay book binding (chae nami also chose tools)<br />
|
|
a-1) introduce what we're going to do; part one relay book binding
|
|
(10-15m)<br /><br />
|
|
|
|
Start from our title and unpack the (background) story of the workshop
|
|
idea. Let participants know that the workshop will recorded as
|
|
soundscape and ask if they're okay with it.
|
|
</p>
|
|
</div>
|
|
|
|
<div class = "cut cut3b">
|
|
<div class="ani"><img src = "./img/workshop_pic.jpg"></div>
|
|
<div class="text">
|
|
<p>
|
|
Hmmm indeed...we tend to 'bind' in the end of the book making.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class = "cut cut3c">
|
|
<div class="ani"><img src = "./img/taping-recording_1024.jpg"></div>
|
|
<div class="text">
|
|
<p>
|
|
Hmmm indeed...we tend to 'bind' in the end of the book making.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cut cut4">
|
|
<div class="ani"><img src="./img/binding-2_1024.jpg" /></div>
|
|
<div class="text">
|
|
<p>
|
|
Hmmm indeed...we tend to 'bind' in the end of the book making.<br />One
|
|
publication is born when every single different page gets glued
|
|
together. <span id="question">Oh wait, glue?</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cut cut5">
|
|
<div class="ani">
|
|
<img src="./img/binding_1024.jpg" />
|
|
</div>
|
|
<div class="text">
|
|
<p>
|
|
Can <span id="Buchimgae">Buchimgae</span
|
|
><span id="Buchimgaepic"> <img src="./img/buchimgae_s.png" /></span
|
|
><span id="expl">Buchimage is Korean pancake.</span> be a
|
|
publication, involving with the glue? When making the pancake, all
|
|
the different ingredients gets mingled and binded through the
|
|
batter!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cut cut6">
|
|
<div class="ani"><img src="./img/label_book_1024.jpg" /></div>
|
|
<div class="text">
|
|
<p>
|
|
Also in Korea, we share Buchimgae together! We don't usually have
|
|
one pancake per person. We tear the hot pancake together,using
|
|
chopsticks..! That's the unique beauty of Buchimgae.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="intro intro2">
|
|
<h4>Cooking Buchimgae (Korean pancake)</h4>
|
|
<p>
|
|
a-2) Play around with tools (15m)<br />
|
|
Before get into the binding session, participants have 15 minutes to
|
|
play around with the prepared tools. They can touch and use a few of
|
|
them and will have the sense of materiality. Participants sit around a
|
|
table and each of them has a specific role. (e.g. Person A cuts
|
|
papers, person B punches holes, person C tapes, person D folds, etc).
|
|
Through the relayed tasks, they will make collaborative
|
|
publication(s). During the session, they will share their t
|
|
</p>
|
|
</div>
|
|
|
|
<div class="cut cut7">
|
|
<div class="ani"><img src="./img/chae-explain_768.jpg" /></div>
|
|
<div class="text">
|
|
<p>
|
|
What if we create a moment of collective book binding?<br />We could
|
|
also host a small Buchimgae cooking session! In Korea we actually
|
|
say Buchimage one/two/three/.. page when counting the number of it.
|
|
Just like a book..! This could be another format of the (book)
|
|
binding.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cut cut8">
|
|
<div class="ani"><img src="./img/floor-tomato_768.jpg" /></div>
|
|
<div class="text">
|
|
<p>
|
|
Aha, everyone makes their own pages.<br />
|
|
Then bind them in a relay format?!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cut cut9">
|
|
<div class="ani"><img src="./img/buchimgae-making_1024.jpg" /></div>
|
|
<div class="text">
|
|
<p>
|
|
Maybe it would have been nicer if we have the participants to sit in
|
|
mixed composition.
|
|
</p>
|
|
<p>
|
|
Some participants were already close eacch other and mainly spoke in
|
|
Italian in their own group.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cut cut10">
|
|
<div class="ani"><img src="./img/compositing_768.jpg" /></div>
|
|
<div class="text">
|
|
<p>
|
|
Maybe it would have been nicer if we have the participants to sit in
|
|
mixed composition.
|
|
</p>
|
|
<p>
|
|
Some participants were already close eacch other and mainly spoke in
|
|
Italian in their own group.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cut cut11">
|
|
<div class="ani"><img src="./img/bibi-pancake_768.jpg" /></div>
|
|
<div class="text">
|
|
<p>
|
|
Maybe it would have been nicer if we have the participants to sit in
|
|
mixed composition.
|
|
</p>
|
|
<p>
|
|
Some participants were already close eacch other and mainly spoke in
|
|
Italian in their own group.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cut cut12">
|
|
<div class="ani"><img src="./img/lino-ilo_768.jpg" /></div>
|
|
<div class="text">
|
|
<p>
|
|
Maybe it would have been nicer if we have the participants to sit in
|
|
mixed composition.
|
|
</p>
|
|
<p>
|
|
Some participants were already close eacch other and mainly spoke in
|
|
Italian in their own group.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class = "cut cut13">
|
|
<div class = "ani"><img src = "./img/pongie-explaining_1024.jpg"></div>
|
|
<div class="text">
|
|
<p>
|
|
Maybe it would have been nicer if we have the participants to sit in
|
|
mixed composition.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class = "cut cut14">
|
|
<div class = "ani">
|
|
<img src = "./img/pongie-explaining_1024.jpg" id = "pongieexplain" />
|
|
<img src = "./img/i-have-great-idea_1024.jpg" id = "pongieidea" style = "display:none;">
|
|
</div>
|
|
|
|
<div class="text">
|
|
<p>
|
|
Maybe it would have been nicer if we have the participants to sit in
|
|
mixed composition.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class = "cut cut14">
|
|
<div class = "ani">
|
|
<img src = "./img/tearing-sharing_1024.jpg">
|
|
</div>
|
|
<div class="text">
|
|
<p>
|
|
Maybe it would have been nicer if we have the participants to sit in
|
|
mixed composition.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<script src="./app.js"></script>
|
|
</body>
|
|
</html>
|