Skip to content

1. State of the art, project management and documentation

The Fabricademy has started. Despite having prepared by reviewing past documents and videos, I was truly blown away. Alumni's works, discussions around future problem-solving, coexistence, and our careers after learning journey. thought-provoking. My horizons have undoubtedly expanded.

The video for the final projects were more than just a record; they were narrative, reflection of each student's own concept. Instead of putting technology and how-tos at the forefront, they showcased experiences. This class has pushed me to think deeper.

Assignment

Learning outcomes

  • Research skills: Learn the process and tools used to document course work
  • Design & process skills: Acquire the necessary skills to publish projects, documentation and share the results of each assignment

Student checklist

  • Build a documentation website describing you and your motivation for the textile-academy, including your previous work
  • Upload the documentation to your project page on class.textile-academy.org
  • Add references and research based on the topic of your interest
  • Learn how to upload images, videos, references and how to use Markdown and Gitlab
  • Learn about the fab lab processes, booking system, usage, machine demos, tools and safety rules
  • Customize your website and document how you did it (extra credit)

Research & Ideation

I looked at the alumni website:Jun Kawahara, RICO Kanthatham, Dinesh Kumar and more to see the important points for documents and how to deal with weekly assignments.
The lecture Visual documentation presentation was also useful for me. I'm always so busy with assignments that I can't get enough of the visuals in the document. However, for Fabricademy, I wanted to do my best as an easy-to-understand for others and a form of self-expression.

Tools

Visual Studio Code

For editing Markdown, I chose Visual Studio Code because I am familiar with it for programming. VScode has a useful preview function. On the tab of the markdown file, right click then select "Open Preview" from the menu,

But I found that the preview is different from the real site. Left below is the real site, and right is preview at VScode. It looks like VS code preview doesn't support layout specifications such as width. may need some plugin.

This is another example about preview. The left image below is preview at WebIDE and the right is real site. The markdown is using align left/right as follows, but not work at the WebIDE. Previw using mkdocs server is relatively accurate, so I will mainly use that from now on.

![](./images/home/Kamakura2.jpg){ width=450 align=left }
In 2019, I ....

![](./images/home/softRobo3.jpg){ width=450 align=right }
I was inspired ...

Gimp

I downloaded Gimp and used to adjust the design of my website. I've used Photoshop and Coreldraw before, but I've only used Gimp a little.

Filter

Applied Filters > Artistic > Catoon to my dog. Her original hair is soft, but now her hair is stiff and we can see strong determination in her eye! I'd like to update her eye to make it even more attractive during the journey.

Color adjustment

I love the original warm color, but I adjusted the colors to match the theme color to make the site design cool. If you check "split" in the menu, you can compare the original color and the adjusted one.

Inkscape

The pattern tool demo at the lecture was interesting. So I tried to design favicon using Fabricademy logo. Select the Fabricademy logo pattern in the window, then at the menu bar, select "Object > Pattern > Object to pattern". After that you can change the pattern using Node tool.
After playing around, I decided to use the following pattern as Favicon, and add the script in the mkdocs.yml file. 

  favicon: images/home/fc.jpg

Markdown

Table problem

I encountered a problem about table description. I used the sample code to make the weekly assignment table, but some texts didn't fit in the table space. First, I changed the width from 170 to 200, then worked for most texts. But " E-tectiles" of week05 wasn't fit like below.

The markdown is as follows. I tried to enter some spaces before and after "E-textiles".... 

|[![](./images/home/sample-image.jpg){ width=200 } E-textiles](./assignments/week05.md)|
I finally found that I deleted the tric character "." from the original sample code. It looks adjust spaces in the table.

|[![](./images/home/sample-image.jpg){ width=200 } . . . E-textiles](./assignments/week05.md)|

Video problem

I inserted some video at the Works part of top page. Vimeo and Youtube are inserted successfully. In case of youtube, it is necessary to use URL for embedding. Press "share" button under the video then select "embed code" to show the URL.

  • Youtube > OK 
    <iframe width="960" height="540" src="https://www.youtube.com/embed/8b2OP2M_YNc?si=a7X8P0UBytYzYaMK" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

  • Vimeo > ok 

    <iframe src="https://player.vimeo.com/video/165714374" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    However when I tried to insert the video of FabAcademy, it didn't work. It is visible at the site by mkdocs server, but not visibke at pushed one.

  • URL of FabAcademy > not visible 

    <iframe src="http://fabacademy.org/2019/labs/kamakura/students/kae-nagano/presentation.mp4" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    I tried to solve but finally I uploaded the video to Vimeo as follows. 
    <iframe src="https://player.vimeo.com/video/165714374" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>


My process

After my research and trials, I decided to design my website with the following process.

  • Markdown editor : Visual Studio Code
  • Image/Photo: Inkscape, Gimp
  • Image compression: Image Optim
  • Preview: mkdocs server

My Leaning Outcome

  • I have gained valuable insights into website design. I made a conscious effort to focus not only on content but also on layout and artistic expression.

  • Despite being an Adobe user in the past, I expanded my skill set by learning how to effectively utilize open-source tools like Gimp and Inkscape.

  • The importance of documentation became clear. I actively documented the challenges I encountered, with the intention of providing guidance to future students.