updates

1 year ago · 3f9b3b1390
parent 15b61d0c6e
commit 3f9b3b1390
12 changed files with 2264 additions and 1431 deletions
--- a/about.html
+++ b/about.html
@ -5,6 +5,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style_navigation.css">
    <link href="https://fonts.cdnfonts.com/css/fjord" rel="stylesheet">
    <link href="https://fonts.cdnfonts.com/css/notcouriersans" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Catamaran' rel='stylesheet'>
@ -24,18 +25,17 @@
 <body>
        <nav>
-                <a href="index.html"><button class="btn home">home</button></a>
+                <p class="navtitle">HOW TO MAKE A NOTEBOOK THAT...</p>
-                <button onclick="displayText()" class="btn infobutton">info</button>
+                        <a href="index.html"><button class="btn" id="home">home</button></a>
-                <a href="notebooks.html"><button class="btn print">printable version</button></a>
+                        <a href="notebooks.html"><button class="btn" id="print">printable version</button></a>
-                <a href="videos.html"><button class="btn mynotebooks"> my notebooks</button></a>
+                        <a href="videos.html"><button class="btn" id="mynotebooks"> my notebooks</button></a>
-                <a href="notebookgenerator.html"><button class="btn generator">notebooks generator</button></a>
+                        <a href="notebookgenerator.html"><button class="btn" id="generator">notebooks generator</button></a>
-                <a href="Paper_Notebooks_Thesis.pdf"><button class="btn pdf">thesis</button></a>
+        <a href="Paper_Notebooks_Thesis.pdf"><button class="btn" id="pdf">thesis</button></a>
-                <a href="https://pzwiki.wdka.nl/mediadesign/How_to_make_a_notebook_that"><button class="btn wiki">research</button></a>
+                        <a href="https://pzwiki.wdka.nl/mediadesign/How_to_make_a_notebook_that"><button class="btn" id="wiki">research</button></a>             
-                <a href="gallery.html"><button class="btn gallery">gallery</button></a>
+                        <a href="gallery.html"><button class="btn" id="gallery">gallery</button></a>
-                <a href="about.html"><button class="btn about">about</button></a>
+                        <a href="about.html"><button class="btn" id="about">about</button></a>
        </nav>
        <div id="textField" style="display: none;">
                <textarea name="lala" id="" cols="30" rows="10" style="display: block; margin-left:20px; position: absolute; font-family: 'NotCourierSans', Courier, sans-serif; border-color: #9594C4;;" >
                        A SORT OF INTRO LETTER
@ -89,9 +89,21 @@ under the terms of the Free Art License http://www.artlibre.org
        [EMMA PRATO, HOW TO MAKE A NOTEBOOK THAT...: FROM
        INDUSTRIAL MODEL TO TOOL OF EXPRESSION,
        published in June 2023, Rotterdam, NL]
        </textarea>
        </div>
        <div class="container">
        <div class="title">
        <h1 class="introtitle">"How to make a notebook that - from industrial model to tool of expression" is your personal guide to crafting a notebook that is made to support your individual learning needs, as well as an invitation to explore self-expression with an hands-on approach.</h1>
        </div>
        <button onclick="displayText()" class="btn" id="infobutton">info</button>
 <div class="center">
 <img src="pubblicità.jpg" style="width:500; position: relative; float: left; margin-left: 50px; margin-right: 20px;"></img>
 <h1 class="contact">emma prato <br>
--- a/gallery.html
+++ b/gallery.html
@ -5,6 +5,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style_navigation.css">
    <link href="https://fonts.cdnfonts.com/css/fjord" rel="stylesheet">
    <link href="https://fonts.cdnfonts.com/css/notcouriersans" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Catamaran' rel='stylesheet'>
@ -24,8 +25,8 @@
 <body>
        <nav>
                <p class="navtitle">HOW TO MAKE A NOTEBOOK THAT...</p>
                        <a href="index.html"><button class="btn home">home</button></a>
                <button onclick="displayText()" class="btn infobutton">info</button>
                        <a href="notebooks.html"><button class="btn print">printable version</button></a>
                        <a href="videos.html"><button class="btn mynotebooks"> my notebooks</button></a>
                        <a href="notebookgenerator.html"><button class="btn generator">notebooks generator</button></a>
@ -35,7 +36,6 @@
                        <a href="about.html"><button class="btn about">about</button></a>
        </nav>
        <div id="textField" style="display: none;">
                <textarea name="lala" id="" cols="30" rows="10" style="display: block; margin-left:20px; position: absolute; font-family: 'NotCourierSans', Courier, sans-serif; border-color: #9594C4;;" >
                        A SORT OF INTRO LETTER
@ -89,9 +89,19 @@ under the terms of the Free Art License http://www.artlibre.org
        [EMMA PRATO, HOW TO MAKE A NOTEBOOK THAT...: FROM
        INDUSTRIAL MODEL TO TOOL OF EXPRESSION,
        published in June 2023, Rotterdam, NL]
        </textarea>
        </div>
        <div class="container">
        <div class="title">
        <h1 class="introtitle">"How to make a notebook that - from industrial model to tool of expression" is your personal guide to crafting a notebook that is made to support your individual learning needs, as well as an invitation to explore self-expression with an hands-on approach.</h1>
        </div>
        <button onclick="displayText()" class="btn" id="infobutton">info</button>
 <div class="photogallery">
--- a/index.html
+++ b/index.html
--- a/navigation.html
+++ b/navigation.html
@ -0,0 +1,113 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style_navigation.css">
    <link href="https://fonts.cdnfonts.com/css/fjord" rel="stylesheet">
    <link href="https://fonts.cdnfonts.com/css/notcouriersans" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Catamaran' rel='stylesheet'>
 <script>
        function displayText() {
        var x = document.getElementById("textField");
        if (x.style.display === "none") {
        x.style.display = "block";
        } else {
        x.style.display = "none";
        }
        }
 </script>
        <script>
        function displayImage() {
        var x = document.getElementById("legend");
        if (x.style.display === "none") {
        x.style.display = "block";
        } else {
        x.style.display = "none";
        }
        }
 </script>
 </head>
 <body>
 <nav>
        <p class="navtitle">HOW TO MAKE A NOTEBOOK THAT...</p>
                <a href="index.html"><button class="btn home">home</button></a>
                <a href="notebooks.html"><button class="btn print">printable version</button></a>
                <a href="videos.html"><button class="btn mynotebooks"> my notebooks</button></a>
                <a href="notebookgenerator.html"><button class="btn generator">notebooks generator</button></a>
 <a href="Paper_Notebooks_Thesis.pdf"><button class="btn pdf">thesis</button></a>
                <a href="https://pzwiki.wdka.nl/mediadesign/How_to_make_a_notebook_that"><button class="btn wiki">research</button></a>             
                <a href="gallery.html"><button class="btn gallery">gallery</button></a>
                <a href="about.html"><button class="btn about">about</button></a>
 </nav>
 <div id="textField" style="display: none;">
        <textarea id="textarea" cols="30" rows="10" style="display: block; margin-left:20px; position: absolute; font-family: 'NotCourierSans', Courier, sans-serif; border-color: #9594C4;;" >
                A SORT OF INTRO LETTER
 Dear soon-to-be-maker,
 I welcome you into the world of notebooks. The object you are now holding in your hands is the final result of a year-long research. I am Emma, a student of the Experimental Publishing Master course at Piet Zwart Institute in Rotterdam. During the second year of our studies, we are asked to work on a research project and to make it public in this specific context.
 The result of my research is a kick-starter kit, or a game, or a (note-)book, to start questioning and experimenting with the creation of notebooks. 
 My aim was to create an object that could be used, and not only consumed. Thus, I would like you, my reader, my user, to become a maker through the use of this kit. I hope you will enjoy the journey through my texts, my prototypes, my questions and my answers. I hope you will find your way in the practice of making notebooks and you will explore the feelings of creating your own tool.
 I made many different choices in the creation of this work, and I would like to share them with you. Therefore, if you are interested in knowing more, go on reading! 
                WHY DID I DO THIS?
 One of the main reasons I feel the urgency to discuss this topic is based on both my personal experience and the experiences of others during their growth. It revolves around the standardization of abilities, desires, and ways of living. Throughout our lives, we are expected to meet certain standards and conform to generalisations. However, these structures may be comfortable for some individuals while making others feel completely out of place.
 In general, in society, I don’t like that we are expected or used to be all the same, that expressing who we are is not part of daily life, but many times it’s a shaming process that has a lot of impact on growth and development of self. I believe that the rise of consumerism has contributed to this phenomenon. We have become accustomed to the idea that we can simply buy objects, disregarding whether they are tailored specifically for us or if they are designed in the same way for everyone else in the world. 
 I would like this research to be a sort of manifesto for a general context but using the notebook as a metaphor: Who are you? How does your brain work? How do your ideas come along? What are your needs from a tool that society provides in a standardised form?
 It is not only about making a notebook, it is how making a notebook will put you in the position of questioning who you are and the objects you use, why you use them and how something made by you for you could look and feel like.
                HOW THE (NOTE)BOOK IS MADE
 Initially, the goal was to create a kit for making notebooks that could be read, but also used to practically make notebooks. To do so, I used my existing collection of texts, conversations, images, thoughts. Making a multitude of prototypes throughout the research process helped shape the material concept of this (note-)book, intertwining practical prompts and inspirations with theoretical texts. I made these prototypes to be able to analyse them and write about them; on the other side, I needed the right notebooks to take notes and develop this project, supporting my thinking and learning needs.
 The first prototype worth mentioning is “the first notebook kit: An adjustable and editable notebook with included tape and papers for continuation” (find the analysis in the cards!). This notebook is directly inspired by the concept of index cards: they are cards used to store a small amount of content. Reading about them in history, I discovered that they are mainly used for two reasons: as a memory aid and to create new connections. I divided the texts into smaller cards, making editing choices and ensuring each card can stand alone. This prevents overwhelming the reader and allows for creating connections between the cards. In the moment the concept of modularity found me and grasped my interest, I created another prototype: the triad notebook. This prototype is composed of 3 rows (as the one you’re holding has 4), that can be browsed in different ways, helping to recreate connections between the different sections.
 Next to modularity, customizability was another essential aspect, as the core concept of the entire project. I want to acknowledge our individuality and the desire to interact with objects in our own way. To achieve this, the chosen spine lets you, the user, to take possession of the object and participate in its use and creation. The spine allows a 360 degrees rotation so that all the content in the rows can reconnect to the other rows. In addition, it enables experimenting with different notebooks structures; you could mix your own pages with the provided ones; you could get rid of all the pages I provided, and fill it in with yours. Or you could make new notebooks. In addition, the pages can become cards and can be used without the spine. Would they still be a (note-)book then? 
 Defining when a notebook ceases to be a notebook has been a question throughout this process. While this publication is printed, I hope that through these different considerations, at least for some, this could still be defined as a notebook.
 The content originates from my own reflections and the notes I took, both digital and handwritten. The latter were notes and now, after printing them out I wonder, are they still?
 Last but not least, to minimize paper waste the publication is printed on an A4 layout. Further information about paper size is provided inside this spread.
                HOW THE (NOTE)BOOK IS DESIGNED
 Through these last two years in the course, one of the main things we have been taught is to use alternative ways and tools to produce our publications. This is one of the reasons why I chose to develop a Python script for the purpose. But it doesn’t stop here. The script generates a different positioning for each card every time it is run. This deliberate randomness in the placement of the cards allows for a user-centric experience, where the order and arrangement are not predetermined. The script enables the generation of different PDFs for printing with each reload, ensuring that users encounter a distinct arrangement of cards every time the content is printed. This approach embraces modularity again, as the connections between cards can vary based on their specific positions. Whether one reads card A next to card B or card A next to card C, the experience will differ. The intention behind this is to offer an individual experience to each user, encouraging them to create their own unique connections. 
                WHY A PRINTED PUBLICATION IS IMPORTANT
 Apart from everything described above, for example the possibility to edit the order of the cards, or to manipulate the spine and transform the basic structure of the object, there are other reasons why a printed publication is necessary at this point.
 First, the choice() method, one of the Python functions used in the main script, selects a random element from a list. You know that it is choosing from a list of options, but what happens in the back, it’s not given to you. So, I wondered: what happens when you mirror digital interactions into a physical movement? When this concept is applied to the (note-)book in your hands, you become the one determining how you navigate through the rows of cards. You have control over the changes, appearances, and disappearances of content. While the specific content behind each card remains unknown, you can physically perceive the anticipation and surprise.
 Secondly, the act of turning the pages, the feeling of the paper are essential features that add a lot to the experience. Through this research, I have discovered the significance of reading and taking notes in physical form. What I found the most interesting is the impact and importance of the physical act of turning pages and the spatial layout of text: readers engage more, understand and remember more; the spatiality of a physical object facilitates a deeper interaction and comprehension of the materials. For further insights, refer to the excerpts from my thesis.
                THE METHODS USED
 The methods I used to feed this publication are multiple experiments and approaches I worked with between March 2022 and April 2023. The first one is my personal notebook process that consists in the creation of different prototypes to analyse and question my use of notebooks and to discover how to modify them to adjust them to my needs. The second method consists in having discussion groups to collect opinions through conversation and questions. The third one involves gathering and analysing the work of other users to understand how they approach the same process. The last method is the Collaborative Explorative Sessions (C.E.S.): the C.E.S. are a collaborative playground to experiment with a collection of exercises together with the workshop participants. I created the C.E.S. through the knowledge acquired in the process and specifically thanks to the first three methods included in the research, as well as inspired by Generative Design Research, which includes the end user in the design process (Sanders and Stappers, 2014). All these methods will not be discussed inside this publication, but related thoughts and opinions will be presented in some of the cards. In addition, the results of the research are published in my thesis, “Paper Notebooks: From an Industrial Model to a Tool of Expression” (2023), produced in the context of the graduation research from the Experimental Publishing (XPUB) Master course at the Piet Zwart Institute, Willem de Kooning Academy, Rotterdam University of Applied Sciences.
                COLOPHON&LICENSE
 Emma Prato
 June 2023
 design, texts, pictures: Emma Prato
 pictures of some of the CES prototypes: Ål Nik
 pictures of me unfolding the “notebook kit”: Michael Murtaugh
 paper: circle offset 170g /
 context natural 150gsm (insides);
 conqueror ivory 300gsm (cover);
 leftovers for introtext and back cardboard
 typefaces: catamaran by Pria Ravichandran,
 notcouriersans by Ludivine Loiseau and OSP
 downloaded from https://www.design-research.be/by-womxn/
 printed at: wdka, rotterdam
 copyleft: this work is free, you can copy, distribute and modify it
 under the terms of the Free Art License http://www.artlibre.org
 [EMMA PRATO, HOW TO MAKE A NOTEBOOK THAT...: FROM
 INDUSTRIAL MODEL TO TOOL OF EXPRESSION,
 published in June 2023, Rotterdam, NL]
 </textarea>
 </div>
 <div class="container">
 <div class="title">
 <h1 class="introtitle">"How to make a notebook that - from industrial model to tool of expression" is your personal guide to crafting a notebook that is made to support your individual learning needs, as well as an invitation to explore self-expression with an hands-on approach.</h1>
 </div>
 <button onclick="displayText()" class="btn" id="infobutton">info</button>
--- a/notebookgenerator.html
+++ b/notebookgenerator.html
@ -1,4 +1,4 @@
-
+<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
@ -6,6 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style_navigation.css">
    <link href="https://fonts.cdnfonts.com/css/fjord" rel="stylesheet">
    <link href="https://fonts.cdnfonts.com/css/notcouriersans" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Catamaran' rel='stylesheet'>
@ -22,9 +23,10 @@
 </script>
 </head>
 <body>
 <nav>
    <p class="navtitle">HOW TO MAKE A NOTEBOOK THAT...</p>
            <a href="index.html"><button class="btn home">home</button></a>
        <button onclick="displayText()" class="btn infobutton">info</button>
            <a href="notebooks.html"><button class="btn print">printable version</button></a>
            <a href="videos.html"><button class="btn mynotebooks"> my notebooks</button></a>
            <a href="notebookgenerator.html"><button class="btn generator">notebooks generator</button></a>
@ -35,7 +37,7 @@
 </nav>
 <div id="textField" style="display: none;">
-            <textarea name="lala" id="" cols="30" rows="10" style="display: block;position: absolute; font-family: 'NotCourierSans', Courier, sans-serif; border-color: #9594C4; margin-left:20px;" >
+    <textarea name="lala" id="" cols="30" rows="10" style="display: block; margin-left:20px; position: absolute; font-family: 'NotCourierSans', Courier, sans-serif; border-color: #9594C4;;" >
            A SORT OF INTRO LETTER
 Dear soon-to-be-maker,
 I welcome you into the world of notebooks. The object you are now holding in your hands is the final result of a year-long research. I am Emma, a student of the Experimental Publishing Master course at Piet Zwart Institute in Rotterdam. During the second year of our studies, we are asked to work on a research project and to make it public in this specific context.
@ -87,20 +89,31 @@
 [EMMA PRATO, HOW TO MAKE A NOTEBOOK THAT...: FROM
 INDUSTRIAL MODEL TO TOOL OF EXPRESSION,
 published in June 2023, Rotterdam, NL]
 </textarea>
 </div>
 <div class="container">
    <div class="title">
        <h1 class="titlegenerator">NOTEBOOK IDEAS GENERATOR: start making your situated notebooks now!</h1>
-<button class="btn reload" onClick="window.location.reload();">NEW NOTEBOOK IDEA</button>
+        <button onclick="displayText()" class="btn" id="infobutton">info</button>
        <button class="btn" id="reload" onClick="window.location.reload();">NEW NOTEBOOK IDEA</button>
    </div>
-<h1 class="titlegenerator">
+
 <h1 class="generator">
 <div class="center">
    <div id="results"></div>
 </h1>
 </div>
 </body>
--- a/notebooks.html
+++ b/notebooks.html
--- a/script.py
+++ b/script.py
@ -122,13 +122,14 @@ for page in range(number_pages):
 pages_string = "\n".join(pages)
 html_template = '''
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="style_print.css">
    <link href="https://fonts.cdnfonts.com/css/fjord" rel="stylesheet">
    <link href="https://fonts.cdnfonts.com/css/notcouriersans" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Catamaran' rel='stylesheet'>
@ -149,23 +150,14 @@ html_template = '''
 <body>
 <nav>
-
+        <p class="navtitle">HOW TO MAKE A NOTEBOOK THAT...</p>
                <a href="index.html"><button class="btn home">home</button></a>
-<button onclick="displayText()" class="btn infobutton">info</button>
+                <button class="btn print" onclick="window.print()">print</button>
 <button class="btn print" onclick="window.print()">print now!</button>
                <a href="videos.html"><button class="btn mynotebooks"> my notebooks</button></a>
                <a href="notebookgenerator.html"><button class="btn generator">notebooks generator</button></a>
 <a href="Paper_Notebooks_Thesis.pdf"><button class="btn pdf">thesis</button></a>
                <a href="https://pzwiki.wdka.nl/mediadesign/How_to_make_a_notebook_that"><button class="btn wiki">research</button></a>
                <a href="gallery.html"><button class="btn gallery">gallery</button></a>
                <a href="about.html"><button class="btn about">about</button></a>
 </nav>
 <div id="textField" style="display: none;">
-        <textarea name="lala" id="" cols="30" rows="10" style="display: block; margin-left:20px; position: absolute; font-family: 'NotCourierSans', Courier, sans-serif; border-color: #9594C4;;" >
+        <textarea id="textarea" cols="30" rows="10" style="display: block; margin-left:20px; position: absolute; font-family: 'NotCourierSans', Courier, sans-serif; border-color: #9594C4;;" >
                A SORT OF INTRO LETTER
 Dear soon-to-be-maker,
 I welcome you into the world of notebooks. The object you are now holding in your hands is the final result of a year-long research. I am Emma, a student of the Experimental Publishing Master course at Piet Zwart Institute in Rotterdam. During the second year of our studies, we are asked to work on a research project and to make it public in this specific context.
@ -217,12 +209,16 @@ under the terms of the Free Art License http://www.artlibre.org
 [EMMA PRATO, HOW TO MAKE A NOTEBOOK THAT...: FROM
 INDUSTRIAL MODEL TO TOOL OF EXPRESSION,
 published in June 2023, Rotterdam, NL]
 </textarea>
 </div>
 <button onclick="displayText()" class="btn" id="infobutton">info</button>
 <div class="cards">
 '''+pages_string+'''
 </div>
 </div>
 </body>
 </html>
@ -237,6 +233,7 @@ with open('notebooks.html', 'w') as out:
 #create index.html
 index_template = '''
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
@ -244,6 +241,7 @@ index_template = '''
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style_index.css">
        <link rel="stylesheet" href="style_navigation.css">
    <link href="https://fonts.cdnfonts.com/css/fjord" rel="stylesheet">
    <link href="https://fonts.cdnfonts.com/css/notcouriersans" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Catamaran' rel='stylesheet'>
@ -273,8 +271,8 @@ index_template = '''
 <body>
 <nav>
        <p class="navtitle">HOW TO MAKE A NOTEBOOK THAT...</p>
                <a href="index.html"><button class="btn home">home</button></a>
                <button onclick="displayText()" class="btn infobutton">info</button>
                <a href="notebooks.html"><button class="btn print">printable version</button></a>
                <a href="videos.html"><button class="btn mynotebooks"> my notebooks</button></a>
                <a href="notebookgenerator.html"><button class="btn generator">notebooks generator</button></a>
@ -284,27 +282,12 @@ index_template = '''
                <a href="about.html"><button class="btn about">about</button></a>
 </nav>
 <div class="title">
 <h1 class="introtitle">"How to make a notebook that - from industrial model to tool of expression" is your personal guide to crafting a notebook that is made to support your individual learning needs, as well as an invitation to explore self-expression with an hands-on approach.</h1>
 <button onclick="displayImage()" class="btn legend">legend</button>
 </div>
 <img src="legend-01.jpg" id="legend" style="display: none;" alt="">
 <div id="textField" style="display: none;">
-        <textarea name="lala" id="" cols="30" rows="10" style="display: block; margin-left:20px; position: absolute; font-family: 'NotCourierSans', Courier, sans-serif; border-color: #9594C4;;" >
+        <textarea id="textarea" cols="30" rows="10" style="display: block; margin-left:20px; position: absolute; font-family: 'NotCourierSans', Courier, sans-serif; border-color: #9594C4;;" >
                A SORT OF INTRO LETTER
 Dear soon-to-be-maker,
-I welcome you into the world of notebooks. 
+I welcome you into the world of notebooks. The object you are now holding in your hands is the final result of a year-long research. I am Emma, a student of the Experimental Publishing Master course at Piet Zwart Institute in Rotterdam. During the second year of our studies, we are asked to work on a research project and to make it public in this specific context.
 The project you are now approaching is the final result of a year-long research. I am Emma, a student of the Experimental Publishing Master course at Piet Zwart Institute in Rotterdam. During the second year of our studies, we are asked to work on a research project and to make it public in this specific context.
 The result of my research is a kick-starter kit, or a game, or a (note-)book, to start questioning and experimenting with the creation of notebooks. 
 The kit takes a hybrid shape: it is both printed (and printable), both digital. 
 The website offers different features you can explore:
 A digital version of the cards; a printable version, coded to be ready to fit in an A4 sheet; a video showcase of the scrolling through the notebooks and the final publication; an online notebook’s ideas generator, where the GAME offered inside the printed publication is replicated with JavaScript.
 The website gives also access to a pdf of the thesis and to my wiki pages where more insights on the research are presented.
 Finally, a gallery of prototypes and a contact page.
 My aim was to create an object that could be used, and not only consumed. Thus, I would like you, my reader, my user, to become a maker through the use of this kit. I hope you will enjoy the journey through my texts, my prototypes, my questions and my answers. I hope you will find your way in the practice of making notebooks and you will explore the feelings of creating your own tool.
 I made many different choices in the creation of this work, and I would like to share them with you. Therefore, if you are interested in knowing more, go on reading! 
@ -356,10 +339,24 @@ published in June 2023, Rotterdam, NL]
 </textarea>
 </div>
 <div class="container">
 <div class="title">
 <h1 class="introtitle">"How to make a notebook that - from industrial model to tool of expression" is your personal guide to crafting a notebook that is made to support your individual learning needs, as well as an invitation to explore self-expression with an hands-on approach.</h1>
 </div>
 <button onclick="displayText()" class="btn" id="infobutton">info</button>
 <button onclick="displayImage()" class="btn legend" style="margin-bottom:30px;">legend</button>
 <img src="legend-01.jpg" id="legend" style="display: none;" alt="">
 <div class="cards">
 '''+pages_string+'''
 </div>
 </div>
 </body>
--- a/style.css
+++ b/style.css
@ -112,18 +112,6 @@ h4{
    white-space: pre;
  }
 p{
    margin: 0mm;
    line-height: 10.5pt;
    font-family: 'Catamaran Medium', sans-serif;
    font-weight: 400;
    font-size: 10pt;
    color: #393E41;
    padding: 0mm 5mm 0mm 5mm;
 }
 .tensteps{
    font-family: 'Catamaran Bold', sans-serif;
    font-weight: 800;
@ -168,36 +156,6 @@ p{
    width: 95mm;
 }
@media print {
    .body{
        -webkit-print-color-adjust: exact !important;   /* Chrome, Safari 6 – 15.3, Edge */               /* Firefox 48 – 96 */
        print-color-adjust: exact !important;  
        background-image: none;    
    }
    .page{
        -webkit-print-color-adjust: exact !important;   /* Chrome, Safari 6 – 15.3, Edge */
        print-color-adjust: exact !important;   
    }
    .overflowing-element {
        overflow: hidden;
      }
    nav{
        display: none !important;
    }
 }
@media screen { 
  .body{
@ -222,36 +180,78 @@ p{
        margin-bottom: 50px;
        text-align: right;
        top: 0;
-        background-image: url("finalCOVER.jpg");
+        height: 100px;
-        background-position: center;
+  
        background-repeat: no-repeat;
        background-size: cover;
    }
 .navtitle{
  font-size: 40px;
  font-family: 'Catamaran', sans-serif;
  color: #E2C044;
  float:left;
  transform: rotate(-5deg);
 }
 .navtitle:hover{
  color:#9594C4;
  transform: rotate(180deg);
 }
    .btn {
        background: white;
        display: inline-block;
        min-width: 50px;
        height: 50px;
        border-radius: 24px;
        padding: 0 10px;
        border: 1px solid currentColor;
        color: #9594c4;
        transition-duration: 0.7s;
        cursor: pointer;
    .btn {
      background-color:#9594C4;
      border: 0 solid #E5E7EB;
      box-sizing: border-box;
      color: #000000;
      display: flex;
      font-family: 'NotCourierSans', Courier, sans-serif;
      font-size: 1rem;
      font-weight: 700;
      justify-content: center;
      line-height: 1.75rem;
      padding: 0m;
      position: relative;
      text-align: center;
      text-decoration: none #000000 solid;
      text-decoration-thickness: auto;
      max-width: 460px;
      position: relative;
      cursor: pointer;
      transform: rotate(-2deg);
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      float: right;
    }
-    .btn:hover {
+    .btn:focus {
-        background-color: #9594c4;
+      outline: 0;
-        border-radius: 5px;
+    }
  .btn:after {
      content: '';
      position: absolute;
      border: 1px solid black;
      bottom: 4px;
      left: 4px;
      width: calc(100% - 1px);
      height: calc(100% - 1px);
    }
    .btn:hover:after {
      bottom: 2px;
      left: 2px;
      border: 1px solid #E2C044;
      color:#E2C044;
    }
    @media (min-width: 768px) {
      .btn {
        padding: .75rem 3rem;
        font-size: 1.25rem;
      }
    }
 }
@ -311,11 +311,25 @@ margin: 0 auto;
  }
  .titlegenerator{
-    padding-top: 20px;
+    padding-top: 0;
    padding-bottom: 50px;
    font-size: 35px;
    line-height: normal;
 }  
 .titlegenerator:hover{
 color:#E2C044;
 }
 .generator{
 font-size: 20px;
 line-height: normal;
 }
  .center{
    width: 100%;
    margin-top: 40px;
  }
@ -644,3 +658,23 @@ label{
 float:left;
 text-align: left;
 }
 .container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: fit-content; 
 }
 #reload{
  position: relative;
  z-index: 2;
 }
 #reload:hover{
  background-color: #c4007a;
  cursor: pointer;
 }
--- a/style_index.css
+++ b/style_index.css
@ -1,10 +1,23 @@
 body{   
-    margin: 0;
+
    margin: 0 auto;
    display: block;
 }
 .container {
    margin: 0 auto;
    width: 100%;
    max-width: 960px; 
 } 
  @media (max-width: 768px) {
    .container {
      max-width: 90%; 
    }
  }
 .card {
    float: left;
    width: calc(200mm / 7.5 ); /* Adjusted width to fit 2 cards per row with margins */
@ -34,7 +47,8 @@ body{
 }
 .cards{
-    padding: 60px 320px 0px 200px
+    padding-top:50px;
    margin-top: 150px;
 }
@ -44,6 +58,7 @@ body{
 }
 /*game */ 
 h1{
@ -61,10 +76,21 @@ h1{
 }
 .introtitle{
-    font-size: 30px;
+    font-size: 20px;
    padding: 15px 30px 0 30px;
    margin-bottom: 10px;
 }
 .introtitle:hover{
    color:#E2C044
 }
 .introtexts{
    font-size: 20px;
    font-family: 'Catamaran', sans-serif;
 }
 /* thesis quotes */ 
 h2{
    font-family: 'Catamaran Bold', sans-serif;
@ -214,12 +240,6 @@ p{
            } 
      nav {
        position: relative;
        top: 0;
@ -230,15 +250,28 @@ p{
        margin-bottom: 50px;
        text-align: right;
        top: 0;
-        background-image: url("finalCOVER.jpg");
+        height: 100px;
-        background-position: center;
+    }
        background-repeat: no-repeat;
        background-size: cover;
 .navtitle{
    font-size: 40px;
    font-family: 'Catamaran', sans-serif;
    color: #E2C044;
    float:left;
    transform: rotate(-5deg);
 }
 .navtitle:hover{
    color:#9594C4;
    transform: rotate(185deg);
 }
-    .btn {
+#infobutton{
    float: left;
    color:#E2C044;
 }
   /* .btn {
        background: white;
        display: inline-block;
        min-width: 50px;
@ -258,22 +291,59 @@ p{
        border-radius: 5px;
-      }
+      } */
      /* CSS */
      .btn {
        background-color:#9594C4;
        border: 0 solid #E5E7EB;
        box-sizing: border-box;
        color: #000000;
        display: flex;
        font-family: 'NotCourierSans', Courier, sans-serif;
        font-size: 1rem;
        font-weight: 700;
        justify-content: center;
        line-height: 1.75rem;
        padding: 0m;
        position: relative;
        text-align: center;
        text-decoration: none #000000 solid;
        text-decoration-thickness: auto;
        max-width: 460px;
        position: relative;
        cursor: pointer;
        transform: rotate(-2deg);
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        float: right;
        margin-right: 5px;
        margin-bottom: 5px;
      }
-
+      .btn:focus {
-
+        outline: 0;
-    
+      }
-  
+    .btn:after {
-.zoom{
+        content: '';
-    transform: scale(5);
+        position: absolute;
-    transition: all 0.5s ease-in;
+        border: 1px solid black;
        bottom: 4px;
        left: 4px;
        width: calc(100% - 1px);
        height: calc(100% - 1px);
        cursor: pointer;
      }
      .btn:hover:after {
        bottom: 2px;
        left: 2px;
        color:#E2C044;
        cursor: pointer;
      }
      #legend{
        width: 20%;
        position: absolute;
@ -283,14 +353,37 @@ p{
    .legend{
      color:#E2C044;
-margin-top:20px;
+      margin-top: 30px;
          }
    .legend:hover {
            background-color:#E2C044;
-        padding: 20px 60px 20px 60px;
+            cursor: pointer;
            color:#E2C044;
          }
      @media (min-width: 768px) {
        .btn {
          padding: .75rem 3rem;
          font-size: 1.25rem;
        }
      }
 }
 .zoom{
    transform: scale(5);
    transition: all 0.5s ease-in;
 }
      .title{
        margin-top: 100px;
--- a/style_navigation.css
+++ b/style_navigation.css
@ -0,0 +1,196 @@
@media screen {
 body{   
    margin: 0 auto;
    display: block;
 }
 .container {
    margin: 0 auto;
    width: 100%;
    max-width: 960px; 
 } 
  @media (max-width: 768px) {
    .container {
      max-width: 90%; 
    }
  }
 .introtitle{
    font-size: 20px;
    padding: 15px 30px 0 30px;
    margin-bottom: 10px;
 }
 .introtitle:hover{
    color:#E2C044
 }
 .introtexts{
    font-size: 20px;
    font-family: 'Catamaran', sans-serif;
 }
 nav {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;
        padding: 24px;
        margin-bottom: 50px;
        text-align: right;
        top: 0;
        height: 100px;
    }
 .navtitle{
    font-size: 40px;
    font-family: 'Catamaran', sans-serif;
    color: #E2C044;
    float:left;
    transform: rotate(-5deg);
 }
 .navtitle:hover{
    color:#9594C4;
    transform: rotate(-180deg);
 }
 .btn {
        background-color:#9594C4;
        border: 0 solid #E5E7EB;
        box-sizing: border-box;
        color: #000000;
        display: flex;
        font-family: 'NotCourierSans', Courier, sans-serif;
        font-size: 1rem;
        font-weight: 700;
        justify-content: center;
        line-height: 1.75rem;
        padding: 0m;
        position: relative;
        text-align: center;
        text-decoration: none #000000 solid;
        text-decoration-thickness: auto;
        max-width: 460px;
        position: relative;
        cursor: pointer;
        transform: rotate(-2deg);
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        float: right;
        padding: .75rem 3rem;
        font-size: 1.25rem;
        flex-basis: calc(33.33% - 10px);
        margin-right: 5px;
        margin-bottom: 5px;
      }
      .nav .btn:nth-child(5) {
        margin-right: 0;
      }
      .btn:focus {
        outline: 0;
      }
    .btn:after {
        content: '';
        position: absolute;
        border: 1px solid black;
        bottom: 4px;
        left: 4px;
        width: calc(100% - 1px);
        height: calc(100% - 1px);
        cursor: pointer;
      }
      .btn:hover:after {
        bottom: 2px;
        left: 2px;
        border: 1px solid #E2C044;
        color:#E2C044;
        cursor: pointer;
      }
      @media (min-width: 768px) {
        .btn {
          padding: .75rem 3rem;
          font-size: 1.25rem;
        }
      }
      #infobutton{
        float: left;
        color:#E2C044;
      }
      #infobutton:hover {
      background-color: #E2C044;
      cursor: pointer;
      }
      .legend{
      color:#E2C044;
      margin-top: 30px;
          }
      .legend:hover {
            background-color:#E2C044;
            cursor: pointer;
            color:#E2C044;
          }
 p {
  margin: 0mm;
  font-family: 'Catamaran Medium', sans-serif;
  font-weight: 400;
 } 
      .title{
        margin-top: 100px;
        width: 100%;
        padding: 10px;
        text-align: center;
      }
      #textField{
        position: relative;
      }
      textarea {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
      }
    }
--- a/style_print.css
+++ b/style_print.css
@ -0,0 +1,348 @@
 body{   
    margin: 0;
    display: block;
 }
 .container {
  margin: 0 auto;
  width: 100%;
  max-width: 960px; 
 } 
@media (max-width: 768px) {
  .container {
    max-width: 90%; 
  }
 }
 .page {
        height: 287mm;
        width: 200mm;
        margin: 0 auto;
        padding: 5mm;
 }
 .card {
    float: left;
    width: calc(200mm / 2 ); /* Adjusted width to fit 2 cards per row with margins */
    height: calc(287mm / 4 ) ; /* Adjusted height to fit 4 rows per page with margins */
    /*border: 1px solid black;*/
    box-sizing: border-box; /* Includes the border in the width and height calculation */
    overflow: hidden;   
 }
 .card.image{
    width: calc(200mm / 2); /* Adjusted width to fit 2 cards per row with margins */
    height: calc(287mm / 4);
    padding: 0;
    margin: 0;
    box-sizing: border-box; /* Includes the border in the width and height calculation */
    overflow: hidden;   
 }
 .card.text{
    padding: 5mm; 
    box-sizing: border-box; /* Includes the border in the width and height calculation */
    overflow: hidden;   
 }
 /*game */ 
 h1{
    font-size: 12pt;
    font-family: 'NotCourierSans Bold', Courier, monospace;
    color: #c4007a;
    font-weight: 600;
    padding-left: 5mm;
    padding-right: 5mm;
    text-align: center;
    padding-top: 50px;
    overflow: hidden;     
    margin: 0mm;
    margin-bottom: 5pt;
    line-height: 14pt;
    overflow-wrap: break-word;
 }
 /* thesis quotes */ 
 h2{
    font-family: 'Catamaran Bold', sans-serif;
    font-weight: 1000;
    font-size: 12pt;
    color: #a6dbf0;   
    margin: 0mm;
    margin-bottom: 5pt;
    line-height: 14pt;
    padding: 0mm 5mm 0mm 5mm;
 }
 /* alternative materials*/ 
 h3 {    
    font-family: 'Catamaran Bold', sans-serif;
    font-weight: 1000;
    font-size: 12pt;
    color: #E2C044;
    margin: 0mm;
    margin-bottom: 5pt;
    line-height: 14pt;
    padding: 0mm 5mm 0mm 5mm;
 }
 /* wiki*/ 
 h4{
    font-family: 'NotCourierSans Bold',Courier, sans-serif;
    font-weight: 800;
    font-size: 12pt;
    color: #9594C4;
    line-height:normal;
    padding-left: 10mm;
    margin: 1mm;
    padding: 0mm 5mm 0mm 5mm;
 }
 .h4::after {
    content: ":";
    white-space: pre;
  }
  .a4::after {
    content: "\A";
    white-space: pre;
  }
 p{
    margin: 0mm;
    line-height: 10.5pt;
    font-family: 'Catamaran Medium', sans-serif;
    font-weight: 400;
    font-size: 10pt;
    color: #393E41;
    padding: 0mm 5mm 0mm 5mm;
 }
 .tensteps{
    font-family: 'Catamaran Bold', sans-serif;
    font-weight: 800;
    font-size: 12pt;
    color: #b4d194;
    line-height: 16pt;
    padding-top: 100px;
    padding-left: 5mm;
    text-align: center;
    display: inline-block;
    align-self: flex-end;
 }
 .image_titles {
    /*width: 105mm;*/
    text-align: center;
    margin-top: 63mm;
    margin-left: 9mm;
    font-family: 'NotCourierSans',Courier, sans-serif;
    font-size: 12pt;
    /*text-shadow: -1px 2px #393e41;*/
    color:black;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #9594c49e;
 }
 .game{
    object-fit:cover;
    width: 95mm;
 }
@media print {
    .body{
        -webkit-print-color-adjust: exact !important;   /* Chrome, Safari 6 – 15.3, Edge */               /* Firefox 48 – 96 */
        print-color-adjust: exact !important;  
        background-image: none;    
    }
    .page{
        -webkit-print-color-adjust: exact !important;   /* Chrome, Safari 6 – 15.3, Edge */
        print-color-adjust: exact !important;   
    }
    .overflowing-element {
        overflow: hidden;
      }
    nav{
        display: none !important;
    }
 #infobutton{
  display:none;
 }
 }
@media screen { 
  .body{
    background-image: url("background_videos.png");
    background-size: cover;
  }
        .page{
            border: 1px solid #9594c4;
            margin-bottom: 5px;
        }
 .cards{
  margin-top: 200px;
 }
      nav {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;
        padding: 24px;
        margin-bottom: 50px;
        text-align: right;
        top: 0;
        height: 100px;
    }
 .navtitle{
  font-size: 40px;
  font-family: 'Catamaran', sans-serif;
  color: #E2C044;
  float:left;
  transform: rotate(-5deg);
 }
 .navtitle:hover{
  color:#9594C4;
  transform: rotate(180deg);
 }
 nav p{
  margin: 0mm;
  font-family: 'Catamaran Medium', sans-serif;
  font-weight: 400;
  line-height: normal;
  padding: 0;
 }
    .btn {
      background-color:#9594C4;
      border: 0 solid #E5E7EB;
      box-sizing: border-box;
      color: #000000;
      display: flex;
      font-family: 'NotCourierSans', Courier, sans-serif;
      font-size: 1rem;
      font-weight: 700;
      justify-content: center;
      line-height: 1.75rem;
      padding: 0m;
      position: relative;
      text-align: center;
      text-decoration: none #000000 solid;
      text-decoration-thickness: auto;
      max-width: 460px;
      position: relative;
      cursor: pointer;
      transform: rotate(-2deg);
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      float: right;
      margin-right: 5px;
      margin-bottom: 5px;
    }
    .btn:focus {
      outline: 0;
    }
  .btn:after {
      content: '';
      position: absolute;
      border: 1px solid black;
      bottom: 4px;
      left: 4px;
      width: calc(100% - 1px);
      height: calc(100% - 1px);
    }
    .btn:hover:after {
      bottom: 2px;
      left: 2px;
      border: 1px solid #E2C044;
      color:#E2C044;
    }
    @media (min-width: 768px) {
      .btn {
        padding: .75rem 3rem;
        font-size: 1.25rem;
      }
    }
 #infobutton{
    float: left;
    color:#E2C044;
 }
 #textField{
  position: relative;
 }
 textarea {
  position: absolute;
  z-index: 2;
 }
 }
--- a/videos.html
+++ b/videos.html
@ -6,6 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style_navigation.css">
    <link href="https://fonts.cdnfonts.com/css/fjord" rel="stylesheet">
    <link href="https://fonts.cdnfonts.com/css/notcouriersans" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Catamaran' rel='stylesheet'>
@ -25,8 +26,8 @@
 <body>
        <nav>
                <p class="navtitle">HOW TO MAKE A NOTEBOOK THAT...</p>
                        <a href="index.html"><button class="btn home">home</button></a>
                <button onclick="displayText()" class="btn infobutton">info</button>
                        <a href="notebooks.html"><button class="btn print">printable version</button></a>
                        <a href="videos.html"><button class="btn mynotebooks"> my notebooks</button></a>
                        <a href="notebookgenerator.html"><button class="btn generator">notebooks generator</button></a>
@ -36,9 +37,8 @@
                        <a href="about.html"><button class="btn about">about</button></a>
        </nav>
        <div id="textField" style="display: none;">
-        <textarea name="lala" id="" cols="30" rows="10" style="display: block; margin-left:20px; margin-top: 400px; position: absolute; font-family: 'NotCourierSans', Courier, sans-serif; border-color: #9594C4;;" >
+                <textarea name="lala" id="" cols="30" rows="10" style="display: block; margin-left:20px; position: absolute; font-family: 'NotCourierSans', Courier, sans-serif; border-color: #9594C4;;" >
                        A SORT OF INTRO LETTER
        Dear soon-to-be-maker,
        I welcome you into the world of notebooks. The object you are now holding in your hands is the final result of a year-long research. I am Emma, a student of the Experimental Publishing Master course at Piet Zwart Institute in Rotterdam. During the second year of our studies, we are asked to work on a research project and to make it public in this specific context.
@ -90,8 +90,21 @@ under the terms of the Free Art License http://www.artlibre.org
        [EMMA PRATO, HOW TO MAKE A NOTEBOOK THAT...: FROM
        INDUSTRIAL MODEL TO TOOL OF EXPRESSION,
        published in June 2023, Rotterdam, NL]
        </textarea>
        </div>
        <div class="container">
        <div class="title">
        <h1 class="introtitle">"How to make a notebook that - from industrial model to tool of expression" is your personal guide to crafting a notebook that is made to support your individual learning needs, as well as an invitation to explore self-expression with an hands-on approach.</h1>
        </div>
        <button onclick="displayText()" class="btn" id="infobutton">info</button>
 <div class="grid-row reverse video-gallery">
        <input type="radio" value="1" name="video-list" id="video-1" checked="checked" /><label for="video-1">My first notebook - first half</label>
        <input type="radio" value="2" name="video-list" id="video-2" /><label for="video-2">My first notebook - second half</label>