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

2 years ago
<!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
2 years ago
rel="stylesheet"
media="only screen and (min-device-width : 1190px) and (max-device-width : 1440px)"
href="./laptop_s.css"
/>
2 years ago
</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>
2 years ago
<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>
2 years ago
<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>
2 years ago
</div>
<script src="./app.js"></script>
2 years ago
</body>
</html>