User:Sevgi/Special Issue 26/Quilting p

This is a quilting extension project page started with Scratch.

TINAAAA surpriiiiiseeee, im bored at work so I added some things here!! Could you maybe link the awesoooomeeeee are.na block you have here somewhere, maybe like make another title called archival or process or idk up to you?

on it <3

scan books and upload to bootleg lib

Web extention
iframe local.storafe > app?/?>?? what do we dooo how do we do this

quilt! heheheheh, we should find a nice tutorial and set a date to experiment? we can use our hair straighteners as iron hehe

WHAT

We want to start by getting a good understanding of quilting. Plan is to make a small quilt and read Many Hands Make a Quilt: Short Histories of Radical Quilting by Jess Bailey. We couldn't find an online source for it so we bought it, we will scan and add it to the bootleg library.

A quilt is a record of time through scrapped fabrics and cloths. When they come together they make a visual archival of what has been worn and thrown out. Without the present to look back at it, it is not as meaningful. There should be an anchor in time to make a loopback insightful.

HOW

ARCHIVAL PROCESS

books:

https://hub.xpub.nl/bootleglibrary/book/996

links, refs, etc.

500 patch design contest - the * quilting * bee

A pixel trading club where people could build a colourful internet quilt and make new friends <3

manifesting for a future like this:

Podcast of Isabella Rosner : https://sewwhatpodcast.com/

some of our quilting extension browser screenshots (we went crazy with this and it was beautiful)

OG Web extension

https://pad.xpub.nl/p/sevgiandmartinaspad-scram

first quilt testing
web extension : look into the local storage thing....... ://////
maybe we can first develop a .css extension to see what can websites look like as quilts themselves. maybe put linguistics and story into the css like what properties could stitch together, what is the position they should take? what makes poetic sense to come together? Should a header <h1,h2,h3> be a horizontal solid line and text just become dots? (we could do this with the .js file Joseph showed us?) Anyway! much to think abo

10th February Prototyping session updates:

During this session with Dorianne, Sevgi and I explored the possibilities of using iframes to replicate a quilt effect on an html page. An iframe is an html element which loads into another HTML page, within it.
First we wanted to learn how iframes generally work, so we made a very simple 'quilt'. You can check it out here. This was great and ok, but we wanted to change how the iframe looks! We wanted to change the CSS elements of each iframe and remove text, leaving only shapes to form a pattern. Sevgi experimented a bit and found out that only pages under the same domain could be edited, which is a shame :(
We chatted with Dorianne about this issue and she explained that iframes are really impossible to edit, which made us sad but! Dorianne came up with a great idea to use dashed lines to replicate stitch work. She also told us of ways to use transparency to juxtapose iframes on each other. Dorianne also suggested to made different sized iframes, replicating the idea of up-cycling with patchwork - similarly to how CSS also presents certain limitations when designing for the web.

17th February:

We pulled the History web extension from the chrome extension lib examples and changed it to have frames instead of links.

function buildPopupDom(divName, data) {
  let popupDiv = document.getElementById(divName);

  let ul = document.createElement('ul');
  popupDiv.appendChild(ul);

  for (let i = 0, ie = data.length; i < ie; ++i) {
//this used to be 'a'
    let a = document.createElement('iframe');
//this used to be 'href'
    a.src = data[i];
    a.appendChild(document.createTextNode(data[i]));
    a.addEventListener('click', onAnchorClick);

    let li = document.createElement('li');
    li.appendChild(a);

    ul.appendChild(li);
  }
}

iframe code:

 <!DOCTYPE html> <html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" type="text/css" href="iframe.css" />
   <title>Martina Farrugia</title>
 </head>
 <body>
   <iframe
      src="https://pzwiki.wdka.nl/mediadesign/Main_Page"
      scrolling="no"
      title="Wiki"
    ></iframe>
   <iframe
      src="https://pzwiki.wdka.nl/mediadesign/Calendars:Networked_Media_Calendar"
      title="calender"
    ></iframe> 
<iframe
      src="https://pzwiki.wdka.nl/mediadesign/Main_Page"
      title="Wiki"
    ></iframe>
 </body>
</html>

*{
box-sizing: border-box;
} 
iframe {

 width: 300px;
 height: 300px;
 border: 5px dashed rgb(255, 0, 0);
 padding: -20em;
 background-color: aqua;
 color: aqua;
 mix-blend-mode: exclusion;
}

iframe.transparent {
opacity: 0.5;
}

body {
 background-color: rgb(17, 40, 253);
 row-gap: -3em;

}
iframe {

 width: 300px;
 height: 300px;
 border: 5px dashed rgb(255, 0, 0);
 padding: -20em;
 background-color: aqua;
 color: aqua;
 mix-blend-mode: exclusion;
}
iframe.transparent {
opacity: 0.5;
}
body {
 background-color: rgb(17, 40, 253);
 row-gap: -3em;
}