FIRST WEEK
-Principles and practices, project management-
ASSIGMENT: design a web site so that we can share our projects with everyone.
before to start!
Before to start creating my web site I had to follow several steps that you can find in this web site from a student of Fab Academy
http://archive.fabacademy.org/archives/2016/fablabdigiscope/students/187/
1. FIRST step: designing with Ilustrator
First of all I draw in illustrator how I wanted my web site to be. The composition and organization of the elements. So then I would know exacly what i wanted to do in HTML language.
2. SECOND step: creating content with HTML
Once I have my design clear, I can start programing! To design the website I have used HTML language which means programing. To do so I have been checking some tutorials as I did never work with HTML. You can check it in the link below:To see the HTML window we need to write click in the INDEX and open it with some text editor, in my case I did it with Bloc de notas. The HTML looks like the following:
To start writing you need to see all your structure and detect what things are inside other things:
Lets put an example: In this case I have first a picture in the background and INSIDE IT it I have other things like the text and logo.
As you can see the cover picture is a big group and it contains other groups inside it.
So it is very important to have clear that there will be always things inside things.
If we look into my web site we can see how did I write all my departments and later I will go into other details. But now I just want you to detect all the big departments and subdepartments that are inside the main ones.
Lets see in detail the code:
Important things to take into account:
When we right a block we might start exacly the same way I started. Is very important to open close (<) and close them (>) after the block finishes. If not it will not work. Lets see an example:
The words we put inside the commas are tags that we create for those things that later we want to edit. In this way when we type (a tag) it will react on that specific tag in the CSS file that I will explain better later when I am goin to explain the edition part. So for now lets leave it appart.
To see the resoult of the content that we have generate in the HTML, we have to double click in the Index folder we where working in . An example is the following:
So we can see that is working but we miss making it beautiful. So lets go to the third step.
3 THIRD step:editing in the CSS
After having the content done I will edit my HTML text with another window called CSS. It is the windows where we will define the color, the size, the typography, etc. So everything related with asthetics. Remember that before I told you about the commas . So now every tag we have create before in the HTML we can edit it here. How to do it?
Once we have grate tags we are ready to edit. All the things we will edit have to go inside the {}. Lets see an example:
It is VERY IMPORTANT that you respect everything but give the values you want. You must never forget the (;) at the end of the order. In case you forget it will not react.Also the spaces and specific letters must be respected because if not it will also not react properly.
HOW DO WE WRITE THE CONTENT TO EDIT ?
Behind there are examples of my file about how did I write the commands in order to edit the text.
The images below are the CSS of my first and cover page.
The page you are in has also been written in an HTML. But to do so we have open a new index HTML file.Here you can see the HTML of this page you are reading:
4.LAST step: push the content on-line
To push the content online there are some specifics steps to take into account: you have to write down in the window of Git bash software:
1. git pull
2. git status
3. git add .
4. git commit -am “etiqueta”
5. git push
final project
For my final project I have in mind to make a book of diferent materials and manipulations for each machine. Thinking in to do different manipulations and parameters applyed in diferent materials. So like a library of materials. The idea is to share the parameters so that everybody interested can do it by himself.