RaFab

Before taking my first class at the FABacademy, I was thinking about the importance of learning to create both for my personal development and to help those closest to me. It also took me a long time to come up with an idea for my final project as it had to be something stimulating and make the tasks more fun. In the elaboration of these topics I count on the advice of my instructors from the Fab lab Sedi-Cup-CT, along with the BOOTCAMP meetings on the web and the study of the contents offered in previous years on the web page https://fabacademy.org

After the first class received by the Fabacademy, my first job was the composition of my personal web page. In my profession I had never thought about developing a web page and consequently I had never practiced with programming and software for its development. To learn more about programming, I searched for information on the web.

The videos uploaded by FreeCodeCamp were of great help to me, where both the structure and the composition are described very well. The link that helped me the most was the following:

https://www.youtube.com/watch?v=XqFR2lqBYPs&t=8731s

But this was not my only source of learning, as I was using other easily accessible resources that were provided on the web.

As suggested in the course seen on youtube, and download the software the author was using in the video. The software used is Visual Studio Code , an open source software that can be installed on different operating systems. This was a point in favor to choose the software to use since I usually use different operating systems.

Visual Studio Code is a source code editor developed by Microsoft for Windows, Linux, macOS, and the Web. It includes support for debugging, integrated Git control (this is the best and not only, it can also be programmed for PCBs), syntax highlighting, smart code completion, snippets and code refactoring. It's also customizable (in my case I changed the colors, and it looks much better) so users can change the editor theme, keyboard shortcuts and preferences. It is free and open source,12 although the official download is under proprietary software and includes custom features by Microsoft.

A few historical details, Visual Studio Code was announced on April 29, 2015 by Microsoft at the 2015 Build conference. On November 18, 2015, Visual Studio Code was released under the MIT license and its source code was published on GitHub. On April 14, 2016, Visual Studio Code was released to the web.

I started by practicing step by step the development of a web page as described in the video. I must say that the video describes very well the composition of a web page, the video gives all the necessary clarifications to learn the key scripts. After the course, I made an outline of how I wanted my page to look like.

The next step was to search the web for a website that had a free repository of ready-made html pages that I could use and adapt to my intentions. To achieve the goal I remembered that one of my instructors had already used a repository for this purpose. So I began to search and find it in the information made available by Héctor Flores Aparicio and more specifically at https://html5up.net. Once I entered the page, I looked for the type and style closest to my idea, which was Future Imperfect, I leave the link below https://html5up.net/future-imperfect/download

Then I first studied its composition to learn the links between the HTML file and the CSS file and in the end I modified the code to make my personal page.

I was adapting each part of my page and inserting images that came from my own repositories or at most from the UPCT, leaving information about their source.

In the page that I created, I had to change some things to make it more adjusted to my requirements. In order to understand myself, I will give some examples.

First example: in the original main page the sections of the weeks were placed vertically, this is boring. I don't like pages where you have to download a lot to go to a site. For this purpose, through programming in html and CSS, I have incorporated the sections and in such a way it is easier to navigate my page.

HTML, lenguaje

But this is not all, it is also necessary to modify in css language, to complete, I will put the code that I have used in css.

CSS, lenguaje

The final effect will be the following:

Week 01: Principles and practices / Project management

The beginning. Making my web site. To learn html and git concepts. thinking about proyects.

Week 02: Computer Aided design

2D and 3D design. Images, convert raster to vector. Modeling and 3D animation.

Week 03: Computer controlled cutting

Clicking here you can see my work on laser cutters, vinyl and parametric drawing.

Second example: Another problem that he had to solve was how to insert photos that in themselves are not very important, but all together describe an interesting manufacturing process. To solve the problem I introduced a wheel that turns and shows me the process in a few seconds.

HTML, lenguaje

• <div class="content-all">
• <div class="content-carrousel">
• <figure><img src="images/week11/Montaje/1.jpeg" width="255"></figure>
• <figure><img src="images/week11/Montaje/2.jpeg" width="255"></figure>
• <figure><img src="images/week11/Montaje/3.jpeg" width="255"></figure>
• <figure><img src="images/week11/Montaje/4.jpeg" width="255"></figure>
• <figure><img src="images/week11/Montaje/5.jpeg" width="255"></figure>
• <figure><img src="images/week11/Montaje/6.jpeg" width="255"></figure>
• <figure><img src="images/week11/Montaje/7.jpeg" width="255"></figure>
• <figure><img src="images/week11/Montaje/8.jpeg" width="255"></figure>
• <figure><img src="images/week11/Montaje/9.jpeg" width="255"></figure>
• <figure><img src="images/week11/Montaje/10.jpeg" width="255"></figure>
• <figure><img src="images/week11/Montaje/11.jpeg" width="255"></figure>
• <figure><img src="images/week11/Montaje/12.jpeg" width="255"></figure>

css, lenguaje

• #content-all {
• display: flex;
• flex-direction: row;
• flex-wrap: wrap;
• }

• width: 210px;
• height: 230px;
• margin: auto;
• perspective: 1000px;
• position: relative;
• }>

• .content-carrousel{
• width: 84.05%;
• position: absolute;
• animation: rotar 25s infinite linear;
• transform-style: preserve-3d;
• }

• .content-carrousel figure{
• width: 100%;
• height: 100%;
• position: absolute;
• }

• .content-carrousel:hover{animation-play-state: paused;}
• .content-carrousel figure:nth-child(1){transform: rotateY(0deg) translateZ(300px);}
• .content-carrousel figure:nth-child(2){transform: rotateY(32.7272deg) translateZ(300px);}
• .content-carrousel figure:nth-child(3){transform: rotateY(65.4544deg) translateZ(300px);}
• .content-carrousel figure:nth-child(4){transform: rotateY(98.1816deg) translateZ(300px);}
• .content-carrousel figure:nth-child(5){transform: rotateY(130.9088deg) translateZ(300px);}
• .content-carrousel figure:nth-child(6){transform: rotateY(163.6360deg) translateZ(300px);}
• .content-carrousel figure:nth-child(7){transform: rotateY(196.3632deg) translateZ(300px);}
• .content-carrousel figure:nth-child(8){transform: rotateY(229.0904deg) translateZ(300px);}
• .content-carrousel figure:nth-child(9){transform: rotateY(261.8176deg) translateZ(300px);}
• .content-carrousel figure:nth-child(10){transform: rotateY(294.5448deg) translateZ(300px);}
• .content-carrousel figure:nth-child(11){transform: rotateY(327.2720deg) translateZ(300px);}
• .content-carrousel figure:nth-child(12){transform: rotateY(360deg) translateZ(300px);}

• .content-carrousel img{
• width: 100%;
• transition: all 300ms;
• }

• .content-carrousel img:hover{transform: scale(1.5);transition: all 300ms;}
• @keyframes rotar{
• form{
• transform: rotateY(0deg);{
• }to{transform: rotateY(360deg);
• }
• }

• .fraction {
• display: inline-block;
• vertical-align: middle;
• margin: 0 0.2em 0.4ex;
• }text-align: center;
• }

• .fraction > span {
• display: block;
• padding-top: 0.15em;
• }
• .fraction span.fdn {border-top: thin solid black;}
• .fraction span.bar {display: none;}

1.2.8 END STRUCTURE

In the final scheme, visual impact has been prioritized over documentation of little interest or that is within reach of everything. I also made an outline as the cover image of my first week.

In this section the objective is to upload the documentation made so that it is visible on the web. It consists of three linked parts, on the one hand the choice of software that will allow us to upload the page to the web, the study of how the software works and the explanation of the steps I have followed to carry it out.

The chosen software is Gitlab. It is very useful for managing multitasking jobs, it allows knowing and recovering the changes that are being made in a document with thousands of lines where bad management could cause the loss of information.

Git is an open source version control system. It can be installed on different operating systems and can be downloaded from the following link https://git-scm.com/.

The operating concept of this software is really very simple, as soon as we open the console we have the opportunity to program Git so that it manages the files created through scripts.

The first step is to open the console using the git bash here command. After having opened the console we will move to the folder where the work is going to be done, this is possible through the same type of script that is used in the command console and we will achieve it with the “cd” command plus the address.

If we give the command "ls" it will give us a list of the documents in the folder. But it won't be until you type the "git init" command that a project will start.

The working concept is very simple, once we open the project we start working in the working directory to move to the staging area and definitely move it to the git directory like in the photo below.

To add the files to my workspace I will write the command "git add + name file" and to upload it to the repository we will use the command "git commit -m + version name".

The next step is to upload it to the server to make it visible. To perform this operation we will have to use the "git push" command.

After having carried out these first operations we will have to enter the user and the email so that gitlab recognizes who has made the changes and returns the date, time and version of the changes. we will use the command "git config --global user.name" and "git config --global user.email you@yourdomain.example.com".

To upload the page to the repository I will have to perform the following operations:

Generating a new SSH key

Checked for existing SSH keys

Adding your SSH key to the ssh-agent

Adding a new SSH key to your GitLab account

Clonning my repository GitLab. In the GIT BASH console, I first go to the location where I want to save the repository copy. And I use the command “cd”. I create a folder that I will call MyProjectFabAcademy. I use the command “mkdir”.

Now I will try to clone my repository to work locally. I go to my repository in GitLab. Click on clone with SSH and the address will be copied to the clipboard.

Create a folder in c: / where the local files of my web page will be. Open the folder location in GibBash

Open GitLab and clone with SSH

Copy it to GitBash. Right clip and paste

Enter personal password: xxxxxxx

Verify that the web page files have been copied to the local folder

The following steps are to copy the html page from the local folder to the GitLab website. Check that the local folder is less than 10 mb

Write the command "git status" to see the modified files and after I write "git pull" and after my personal password

I Write the command "git add ." to load changes

Now you have to upload it to the repository (git commit –m "comment: add the web page in html")s

and finally I write "git push", to finish uploading the files to the web

and finally I write "git push", to finish uploading the files to the web

In the final scheme, visual impact has been prioritized over documentation of little interest or that is within reach of everything. I also made an outline as the cover image of my first week.

This scheme intends to structure the scope by stages. In the smallest spiral we will have the predetermined minimum objective and in the largest one the top of the scope of the project.

Why did I choose this project?

I chose this project for several reasons. To begin with, my training as an architect has led me to study the great role that the Bauhaus plays in the training of architects from all over the world. Carrying out the Fabacademy is like walking those difficult paths full of learning by doing. Not only, I think that since ancient times, since the Romans, architects were trained in laboratories, today these laboratories are full of electronics and you have to learn to transmit.

How can fablabs contribute to architecture?/i>