Principles and practices

 

 

About me

Thumbnail Image 1

Hello World !!

  

I am a scientific assistant at Fab Lab Kamp-Lintfort Germany in the faculty of Communication and Environment at the University of Applied Sciences Rhine Waal. Originally from Colombia, I work in different areas of design, art and interaction. Having a background in Industrial Design, I complemented my studies in MFA Media Art and Design at Bauhaus University Weimar, working with the analysis of materials and surfaces and combining traditional techniques with new technologies. In 2013, I began the studies MA Surface and Textile Design at the school of art Berlin Weißensee, focusing on material research, which gave me the possibility to introduce textiles as a medium of communication.

For me, designing and making things is more than just my job, it is a philosophy. I have worked in the Fab Lab Kamp Lintfort from its beginning and, where I have also implemented a section for textiles. The Fab Lab is a wonderful space, that permits me to work with different techniques and materials combining not only the new processes in rapid prototype but also, the diverse experiences through the interaction of different communities. I feel very fortunate for having this experience in this creative place.

I am both consciously and unconsciously influenced by the traditional Colombian culture. Since I started my professional studies in Colombia, I have had a huge interest in integrating the work undertaken by the indigenous groups of the country. The use of local materials and manufacturing processes offer many possibilities to produce diverse ideas and products.Today, I have the possibility to integrate this tradition of materials and techniques with digital fabrication.

My interest and motivation is to continue the research in the field of embodiment interaction combining the expertise in architecture, design and rapid production in the area of smart textiles.

 

Web design

 

In the first step, I tried to find different ways to construct the website with different templates. After looking and trying with different templates and text editors, I wanted to get insight to the construction of the web pages in a way that I could modify and transform the web. Afterwards, I did some tutorials and introductions on different platforms. I used Dreamweaver and Bootstrap for building the layout of the website. After having Built the structure, I could easily edit it in Brackets. It is at the same time a helpful tool for visualizing and editing code. You can find some citations of the construction in Dreamweaver in the following link.

Thumbnail Image 1
Anatomy of a website

To display a web page, your Internet browser reads and interprets a special set of instructions. These instructions are written primarily in two languages: HTML and CSS.

Thumbnail Image 1
What is HTML?

Web pages display content and have an underlying structure defined by HTML. The content can include text, images, links, or even audio and video. Most HTML elements are written using opening <element> and closing </element> tags that tell the browser what type of content to display. The tags are written in a specific order to define the structure of the page. The example on the right shows three common HTML tags. <h1> specifies heading text, good for page titles <p> specifies paragraph text, good for body text <img> displays an image specified by a src (source file)

Thumbnail Image 1
What is CSS?

With HTML you've given a basic structure to your web page, but there's not much customization to the style or layout. Eventually you want to add colors, format text and images, and reposition elements on your page. CSS is a language that works with HTML to apply this style and formatting to your web page. Use CSS to find one or more HTML elements, and then provide additional instructions for what to do with that element (such as change its color or center it on the page). The example on the right shows how CSS is used to change the appearance of the three HTML elements. h1 The heading text is center-aligned. p The paragraph text is red, bold, and center-aligned. img The image is resized to 150px by 100px.

Thumbnail Image 1
Hierarchical distribution

I learned about the hierarchical distribution and I learned about constructing the layout i.e.: The distribution of the columns and rows.

Thumbnail Image 1
My distribution

I use a distribution of 12 columns All of those in the DIV (divisions) without sides menu. Depending of the importance or detail of the information. For example: I used 3 columns to describe the processes with photos .

Thumbnail Image 1
My Website !

After structuating my website I did some tutorials to build a responsive website.

You can find more references of making and editing the code of the website in the following link

 

GIT

 

Git is a free and open source distributed version of a control system designed to handle everything from small to very large projects with speed and efficiency.

  

Thumbnail Image 1
Local and Remote Repository

The principle of the Git and the repository is that we have the archive in different places, with enough data for a website.

Thumbnail Image 1
Status

1. Make your local data in your computer with your website. This is the workflow befor to pull the data between the local and remote server!.

Thumbnail Image 1
Navigation

Some usefull comans alo for Linux to navegate troutgh the Terminal

 

Thumbnail Image 1
 
Step by Step

2. Check the status of your repository using the command: git status.

3. Add your data with the command: git add. It means you will upload the data to the remote repository.

4. You have to commit the changes with the command: git commit -m. It means you will give a notice of the changes that you did.

5. When the commit is finished you can proceed to pull the data in the remote repository: git pull.

6. When the pull is done without problems you can push your data with the command: git push origin master

 

Graphics by Danielle Ingrassia 2016. 

Thumbnail Image 1
Merge Commands and History

It is recommended, that you work only in one computer for making the changes in the repository, otherwise you have to merge the data and it could create a conflict with the repository of the others students.

 

Thumbnail Image 1

 

 

Merge command: git merge [branch] Combines the specified branch’s history into the current branch

That’s it ! Frequent problems in mac platform: The mac operation system creates a default data “DS store” for each folder that you create, that you can not physically delete. You can erase this data with the command to ignore file: ~/.gitignore_global. Now make it global for all repositories git config --global core.excludesfile ~/.gitignore_global.