01 | STATE OF THE ART | GITLAB ¶
WEEK 01 | This weeks evovled around getting familiar with the GitLab and Markdown platforms throug personalising our webpage with our work and inspiration.
STATE OF THE ART | REFERENCES¶
The references chosen as State of the Art for the coming 6 months, are based on artists and designers working with biomaterials, knitting, 3D printing and laser cutting. These references all have a strong connection to the natural world, either by aesthetics or by material. I would like to work within the field of biomaterials combined with different methods of manipulating the material to become a haptical surface. Like Quin Van Etten who through knitting makes surfaces by incorporating different seed capsules collected in her local environment. The way she combines nature with knitting to create these undulating shapes and surfaces is very inspiring. Another interesting designer in terms of designers is of course Iris Van Herpen who through layering, laser cutting and different types of printing creates these magical costumes. Eduardo Loreto works in a similar way, however he also works in biomaterials manipulating them with similar techniques. Another studio working with biomaterial is Natural Material Studio. A Copenhagen based design studio who explores different bio materials such as algae, beer waste and pine waste. Finally I am inspired by the 3D printed Apolex masks created by James T. Merry who is very inspired by the Icelandic wildlife. My aim for the next 6 months is to work within this field, exploring biomateriality and how it can be manipulated and interacted with.
01 | THE PRESENT IS A GIFT, RYTHMS OF NATURE, 2021, by Quin Van Etten
02 | THE PRESENT IS A GIFT, RYTHMS OF NATURE, 2021, by Quin Van Etten
03 | ROOTS OF REBITH, 2021, by Iris Van Herpen
04 | SYNTOPIA, 2018, by Iris Van Herpen
05 | A MATERIAL TRANSISTION, 2022, by Natural Materials Studio
06 | ALGER, 2020, by Natural Materials Studio
07 | HETEROTOPIA, 2022, by Eduardo Loreto
08 | HETEROTOPIA, 2022, by Eduardo Loreto
09 | APOLEX, 2022, by James T. Merry
10 | MOVING BACK, 1994, by Maria Blaisse
GOOD TO KNOW | GITLAB¶
ALWAYS commit to main branch when making changes. If you commit to new branch remember to merge it back to the main branch by clicking this icon and then merging the new branch to main branch. ALWAYS look through the template in gitlab, most of your questions about how to code stuff will be answered.
GOOD TO KNOW | TEXT¶
To understand the basics of manipulating the page this site will be a life saviour Basic syntax and for more info see Extended syntax. I found that the Gitlab handbook is more for setting up the coding, not for working in the coded frame we received from FabLab. Another tip, if you want to have the main text directly beneath a heading without a blank-line use Tab button along the line after the header.
HEADERS #H (Can only be used once on a page otherwise you will mess up the content table.)
##H
###H
BOLD **TEXT**
IALICS *TEXT*
LINE ENTER --- ENTER
TABLE | TEXT | TEXT |
|------|------|
| TEXT | TEXT |
INDENT
BLANC SPACE </br>
CODE ```
TEXT
````
LINK [NAME](LINK)
FONT SIZE <font size="8">Text</font>
GOOD TO KNOW | IMAGES¶
The upload of images is fairly simple, it is just important to know where you uploaded them and what format. I found that .svg is the best format, as it gives more sharp lines than .png and .jpg. The placement of the photos is the real struggle, I found that if you want to centre a photo you have to export it on a white background. I used Illustrator having a white background and exporting the whole selection as a .svg. However I later realised that there is a code for this:
IMAGE
IMAGE SIZE
 { width=400 align=right }
MULTIPLE IMAGES
{ width=300 align=left }
{ width=300 align=right }
FOLLOWED BY THIS CODE TO ARRANGE TEXT
<p style="clear: both;"></p>
<br/>
CENTER IMAGE
<figure markdown>
{ width=400 }
</figure>
CENTER IMAGE WITH CENTERED CAPTION
<figure markdown>
{ width=400 }
<figcaption>logosketches</figcaption>
</figure>
<figcaption> DEVOUR ME, photographed by [Carolina Sardal Jerhov](https://www.instagram.com/carolinafeolina/?hl=en)</figcaption>
IMAGE CAPTION NOT CENTERED
<font size="2">DEVOUR ME, 2018, photographed by [Carolina Sardal Jerhov](https://www.instagram.com/carolinafeolina/?hl=en) </font>
Remember to resize the images between 100-400 kb, this you can do in the preview program on the mac, or on the opensource program TinyPNG.
GOOD TO WORK | MAKING A LOGO¶
The logo was a tricky one, but very simple when you get your head around it. I started by sketching some examples, which I then photographed and exported into Photoshop and coducted the following steps:
Grayscale
Make background a layer
Remove white background using magic tool
Export png or psd
Thereafter I exported it into Illustrator and cunducted following steps:
Trace image
Black and white logo
Smooth the curves using the smooth tool
Expand
Ungroup
Select group and export selection to svg
This file should be uploaded directly inside the docs file, whereafter it is coded into the mkdocs.yml. The logo can also be implemented to be in the fan, by cangeing the icon: line to favicon
Theme:
favicon: Asset 1.svg
logo: Asset 1.svg
GOOD TO WORK | ICONS AND EMOJIS¶
Putting in emojis are also quite simple, just copy it from emoji and place it in the text. Icons form MkDocs is more complicate, as you have to link the icon library to you mkdocs.yml, this is done by the following code.
markdown_extensions:
- attr_list
- pymdownx.emoji:
emoji_index: !!python/name:materialx.emoji.twemoji
emoji_generator: !!python/name:materialx.emoji.to_svg
:material-source-branch:
GOOD TO KNOW | NAVIGATION TABS¶
You can code how the different navigation tabs should look. Here you work within the mkdocs.yml file. The different codings for manipulating this is found on the Material for MkDocs
This is the default setting
Theme:
features:
- navigation.tabs
To remove the right menúe bar add this line of code:
features:
- navigation.tabs
- toc.integrate
To keep the top bar when you scroll add this line of code:
features:
- navigation.tabs
- navigation.tabs.sticky
To expand the content:
features:
- navigation.tabs
- navigation.expand
GOOD TO KNOW | TABS¶
These help you organise your page and link to other pages. Note that there are three default settings the task, tip and bug if you try other icons this will go to the default mode of the task icon.
??? task "weekly assignment"
Check out the weekly assignment [here](http://fabricademy.fabcloud.io/handbook/assessment/criteria/#1-project-management-and-documentation) or login to your [NuEval](http://nueval.fabacademy.org) progress and evaluation page.
??? tip "about your images..delete the tip!!"
1. Remember to credit/reference all your images to their authors. Open source helps us create change faster together, but we all deserve recognition for what we make, design, think, develop.
2. remember to resize and optimize all your images. You will run out of space and the more data, the more servers, the more cooling systems and energy wasted :) make a choice at every image :)
This image is optimised in size with resolution 72 and passed through tinypng for final optimisation.
_**Remove tips when you don't need them anymore!**_
??? bug "get inspired!!!"
Check out and research alumni pages to betetr understand how to document and get inspired
* [Diane Wakim](https://class.textile-academy.org/2021/diane.wakim/) Le TextileLab Lyon 2020-21_
* [Petra Garaiová](https://class.textile-academy.org/2022/petra-garajova/) FabTextiles Barcelona 2021-22_
* [Loes Bogers](https://class.textile-academy.org/2020/loes.bogers/) TextileLab Amsterdam 2019-20_
* [Sara Alvarez](https://class.textile-academy.org/2021/sara_alvarez/) TextileLab Amsterdam 2020-21_
* [Olatz Pereda](https://class.textile-academy.org/2022/olatz-pereda/) Basque Design Center 2021-22_
_Add your fav alumni's pages as references_
weekly assignment
Check out the weekly assignment here or login to your NuEval progress and evaluation page.
about your images..delete the tip!!
-
Remember to credit/reference all your images to their authors. Open source helps us create change faster together, but we all deserve recognition for what we make, design, think, develop.
-
remember to resize and optimize all your images. You will run out of space and the more data, the more servers, the more cooling systems and energy wasted :) make a choice at every image :)
This image is optimised in size with resolution 72 and passed through tinypng for final optimisation. Remove tips when you don't need them anymore!
get inspired!!!
Check out and research alumni pages to betetr understand how to document and get inspired
- Diane Wakim Le TextileLab Lyon 2020-21_
- Petra Garaiová FabTextiles Barcelona 2021-22_
- Loes Bogers TextileLab Amsterdam 2019-20_
- Sara Alvarez TextileLab Amsterdam 2020-21_
- Olatz Pereda Basque Design Center 2021-22_
Add your fav alumni's pages as references
GOOD TO KNOW | TOOLS¶
Another way of organising links as a tool box:
!!! example ""
- [TinyPNG](https://tinypng.com/)
- [Markdown](https://squidfunk.github.io/mkdocs-material/)
- [Material theme](https://squidfunk.github.io/mkdocs-material/)
- [Google font](https://fonts.google.com/)
- [TinyPNG](https://tinypng.com/)
- [Markdown](https://squidfunk.github.io/mkdocs-material/)
- [Material theme](https://squidfunk.github.io/mkdocs-material/)
- [Google font](https://fonts.google.com/)
GOOD TO KNOW | VIDEO¶
VIMEO
<iframe src="https://player.vimeo.com/video/10048961" width="640" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
REFERENCEING
<p><a href="https://vimeo.com/10048961">Sound Waves</a> from <a href="https://vimeo.com/radarboy">George Gally (Radarboy)</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
Youtube
<iframe width="560" height="315" src="https://www.youtube.com/embed/jjNgJFemlC4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
GOOD TO KNOW | GIF¶
The best program to edit a film and make a gif of it is EZGIF but to display it from a platform it needs to be uploaded in GIPHY.
<iframe src="https://giphy.com/embed/U8w7evMx6d8nK8AMsI" width="345" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/U8w7evMx6d8nK8AMsI">via GIPHY</a></p>