User:Sevgi/Special Issue 26/Quilting p: Difference between revisions
No edit summary |
|||
| Line 327: | Line 327: | ||
Quilt-> CSS | |||
=== | log ->(contextually) row | ||
log->(contextually) column | |||
pattern->(visually) grid | |||
CSS->Quilt | |||
fr->(measurement) Jelly Roll | |||
https://www.w3.org/TR/css3-grid-layout/#fr-unit | |||
''fr is : 'a fraction of the leftover space in the grid container''' | |||
''Jelly Roll is: a pre-measured(2,5 inch) strip for easier quilt making'' | |||
in css fr represents a flex measurement that has no pre-determined size and fills up the space left form other items placed in the gird whereas a Jelly Roll has to be pre-measured. | |||
=== Stripe/Jelly Roll Quilt === | |||
starter quilt, my first as well!!! | starter quilt, my first as well!!! | ||
I didn't know what jelly roll was I just started making stripes and panicking. It was fun. I improvised '''the quilting lines'''. I preferred to go rogue and make diamonds with the help of a duct tape. It went alright and at the end I messed up the binding but still loved how it turned out. | |||
Here is my digital example: | |||
[[File:Quilt2.png|left|frameless]] | |||
'''stitch in the ditch''' | |||
Revision as of 21:12, 1 March 2025
This is a quilting extension project page started with Scratch.
TINAAAA >> I am adding my process here so they're something new for Monday!! ill send you the things I made in a bit
on it <3
scan books and upload to bootleg lib
- Web extention(?)
- WEEKLY GOAL: each one of us make 2 patterns with frames, we start the css/quilting glossary
- VERY IMPORTANT: 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:
links, refs, etc.
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;
}
We found the Beastify extension and we want to compile the codes of this one and history extension together.
Beastify makes the entire web page into a tiny transparent square and replaces it with pics of a frog or a snake.
We also want to put buttons an option on the quilt page to translate stitches into css declarations.
Martina wants to make it so that there is a glossary with css and accompanying quilt type. Animated maybe?
Notes from Doriane:
some elements and declarations cannot be translated into textiles coming together,
allow things to not translate,
what are compositions that cannot be replicated outside of the web.
why is the transition arrow entail> I sit a graphical translation, association(?) word play[like the titanic :float:none thing...], ways of doing,
measurements and how does that work for web vs. textiles. Consider where the arrow points: web to textile or textile to web?
What's CORS?
what does CORS(cross origin requests) mean in textile and in stitching?
Could the iframe pattern repaeat to make a bigger pattern? WEEKLY GOAL:
WEEKLY GOAL:
3-4 pattern html pages,start of the translation table
border radius
L >from the alphabet quilt
https://rhizome.org/editorial/2020/may/13/curating-online-exhibitions-pt-1/
https://san-serriffe.com/product/cory-arcangel-and-stine-janvin-identity-pitches/
https://monoskop.org/images/9/91/Lialina_Olia_Espenschied_Dragan_eds_Digital_Folklore_2009.pdf
digital ->physical
Jacquard Machine being the root of computers
What next:
We think about the translation/transition from Digital to Physical, Textile to Patchwork, Quilting to CSS.
Quilting to CSS
Here the wherever the arrow points determines where do we stem from, what does it correspond to as CSS when we think about stitching?
Does it mean {margin:0,padding:0}-property- or does it mean{border:dashed red 1px}-graphical- margin?
Quilting acts as the material aspect of this table
| quilting | CSS |
|---|---|
| Cut fabric | --->Overflow:hidden(Arrow is Practical) |
Textile to Patchwork
Here textiles come together one way or another and become something bigger, something different, something colorful and something re-purposed, re-made.
Quilting is the process that makes the textiles come together.
| textile | patchwork |
|---|---|
| iframes | web ring |
Digital to Physical
What does it mean to translate something existing in a digital space into physicality or vice versa?
…popularize a conservative view on digital culture. When computers are continuously explained with cars, networks with highways, search engines with the human brain, even Email with classical postal service, the actual properties and possibilities of the computer are lost.[16]
| physical | digital |
|---|---|
| looms---> | computers |
| ^^^quilting | ←WEB↲ |
Log Cabin Quilt
log cabin is made with equally wide stripes which are then stitched together. First "log" will be laid horizontally, then stitched to a vertical one at the top. Then the process visually repeats down to bottom. When stitching first the centre square is done, then the surrounding logs will be added on. :
https://www.youtube.com/watch?v=pzncJHhkQow
When I was making the log quilt, I had a different sort of itiration of the log cabin in mind. Variation in log cabin happens often since it is a basic pattern. In the blog post there is an exmaple of Courthouse Steps which has a community variation here : variation 2
I first sketched the quilt:
Using this guide I tried to make the grid happen : https://css-tricks.com/snippets/css/complete-guide-grid/
Didn't happen and then I thought there is probably an app for this: https://cssgrid-generator.netlify.app/
(I used this but it didn't really work until I adjusted sizes.)
my log cabin:
Quilt-> CSS
log ->(contextually) row
log->(contextually) column
pattern->(visually) grid
CSS->Quilt
fr->(measurement) Jelly Roll
https://www.w3.org/TR/css3-grid-layout/#fr-unit
fr is : 'a fraction of the leftover space in the grid container'
Jelly Roll is: a pre-measured(2,5 inch) strip for easier quilt making
in css fr represents a flex measurement that has no pre-determined size and fills up the space left form other items placed in the gird whereas a Jelly Roll has to be pre-measured.
Stripe/Jelly Roll Quilt
starter quilt, my first as well!!!
I didn't know what jelly roll was I just started making stripes and panicking. It was fun. I improvised the quilting lines. I preferred to go rogue and make diamonds with the help of a duct tape. It went alright and at the end I messed up the binding but still loved how it turned out.
Here is my digital example:
stitch in the ditch