1. State of the art, project management and documentation¶

Research & Ideation¶

This week, we worked on creating our website, where we will upload all documentation of our progress throughout FabriAcademy. I had previously taken the FabAcademy course, which gave me an initial introduction to GitLab, CSS, and HTML (HyperText Markup Language). However, this time, our instructors surprised us with a preset template that we needed to customize, and they also introduced us to Markdown, which I will discuss in more detail later.

The first step was to ensure we had access to the following platforms:

-Log in to our GitLab repository.
-Access Mattermost for internal communication.
-Enter Nueval for evaluations and progress tracking.

References & Inspiration¶

The webpage of Trinidad Gómez on the Fabricademy site documents her learning and projects within the 2021 Textile and Digital Fabrication program. Fabricademy is an academy that combines textile design, digital fabrication, and advanced technologies to explore new applications in fashion and textiles.

Tools¶

TinyPNG is an online tool for compressing PNG and JPEG images
Google Slides is an online presentation tool that is part of Google Workspace
Ezgif is a free online tool that allows you to create, edit, and convert GIF files.
Remove.bg page is an online tool that allows you to automatically remove the background from an image.
Canva is an online graphic design tool that allows users to easily create visual content such as presentations, social media posts, posters, cards, and more.

Documentation workflow¶

My workflow began with researching my classmates' websites, which allowed me to draw inspiration and understand different approaches. Then, I decided to create a space that represented me, choosing a blank canvas as the foundation. This way, as I incorporated content from each page, the design would start to fill with color and personality.

First Step: GitLab¶

GitLab is a software development platform that enables teams to collaborate efficiently throughout the entire project lifecycle, from planning to deployment and monitoring. It’s especially popular in projects that use version control, as it’s based on Git, a system that allows you to track and manage code changes effectively and securely.

The first step is to have an account on fab.ios (in case you don’t already have one) and set up a password. Here, I made my first mistake: I registered for the program with a new account instead of using the one I already had from my FabAcademy experience. This caused my project to split, and the changes were not being saved in the correct account. Fortunately, my instructors, Nubia and Julian, were very helpful. Julian guided me through the process of merging my accounts; I had to log into my previous account and add the new one to consolidate both.

Second Step: Mattermost¶

Mattermost is a communication and collaboration platform designed for teams and organizations. It functions as an alternative to messaging tools like Slack, but stands out for being open source, which allows users greater control over their data and the ability to customize the platform according to their needs.

I found this collaboration and communication platform very useful, as our main Fabricademy channel has rooms organized by each week. I used the "Week 1" room to address the issue I mentioned earlier. Additionally, this platform will be very helpful because posts are accessible to all participants, allowing us to see problems and solutions collectively and learn from each other's experiences.

Third Step: Nueval¶

In Nueval, we can view our progress as well as the feedback from our instructors. It’s important to keep a personal checklist so the instructor can track our progress clearly and organized, in addition to staying in communication with them and keeping them informed of our progress.

...

Fourth Step: Markdown¶

Markdown is a lightweight markup language that allows for quick and easy text formatting. It is widely used to create plain text documents that can be easily converted to HTML for web display. Markdown was created by John Gruber and Aaron Swartz with the goal of making documents easy to write and read in their original format, without complex tags.

Process¶

Once we verify access to these sites, we can start working in our GitLab, which is a code hosting and version management service. Markdown is a markup language that uses a simplified and discreet syntax, making it easy to create structured documents. Additionally, it allows us to edit our repository directly on the web.

Edit Template¶

A remote repository is a version of a code repository that is stored on an online server, accessible via the Internet. Unlike a local repository, which resides on a developer's machine, the remote repository allows multiple users to collaborate and work together on the same project from different locations.

To make these changes, I did it as follows:

describe what you see in this image

"Commit and push to main"¶

Is an action in version control, like in Git, that involves saving and sending code changes to the main branch of a remote repository.

Commit: This step saves the changes made to the code in the local repository, along with a message describing what was changed. Each commit is like a "snapshot" of the changes at that point in development.

Push: After making the commit, pushing sends these changes from the local repository to the remote repository (in this case, to the main branch on platforms like GitHub or GitLab), allowing other collaborators to view and access those changes.

So, "commit and push to main" means saving the changes to the code and then sending them to the main branch in the remote repository so they’re available to the whole team.

describe what you see in this image

"upload image"¶

Step 1: First, edit or design your images, then check that the image is less than 400KB; in my case, I reduced them on tinypng and edited them on Canva.

Step 2: Upload the Image to the Repository Prepare the image you want to add. Upload the imageto your Git repository (for example, on GitHub or GitLab): Go to the folder where you want to store the image (it can be a folder named images to keep the project organized). Upload the image by dragging it or using the "Upload file" option.

Step 3: Get the Image Path Once the image is uploaded, copy the URL or path of the image in your repository. This usually has the format https://myRepository.com/myProject/images/image.jpg if you’re using GitHub or GitLab.

describe what you see in this image

Step 4: Insert the Image in Markdown In Markdown, use the following syntax to insert the image:


  [describe what you see in this image](../images/week01/12.png){ width=700 align=center}

Other Markdown elements




  # Main Title
    ## Subtitle

    This is **bold text** and this is *italic text*.

    - List item
    - Another list item

    [Link to Google](https://www.google.com)

You can also create elements on other platforms and then embed them in your code, such as videos from YouTube or Vimeo. For example, I created a GIF in Giphy and embedded it on my main page.

describe what you see in this image