WEEK 1 – PRINCIPLES AND PRACTICES, PROJECT MANAGEMENT
Weekly assignment:
This week's assignment was about building a personal website and uploading it to the class archive
Building a personal web site
It was the very first time for me building a website, so I started browsing on the internet looking for some tutorial about how to do it. The most useful and clear I've found is www.w3schools.com, it contains a lot of informations about everything is required for web development.
HTML and CSS
As I've learned, to start a basic web page I needed to know at least HTML and CSS. To better understand what they are and how they work I've read a couple of documents I've found on the internet
HTML (hyper text markup language) is the standard markup language for creating web pages and web application (source: Wikipedia)
Practically it allows you to elaborate the semantic structure of a web page including in the document different contents like text, immages, links and others. And to do this you need to use tags and place them in the right position
CSS (Cascading Style Sheet), instead, let you describe the presentation (look and layout) of the document. It is used for adding graphic charateristics to an HTML (or other markup language) document.
The real power of these technologies is the possibility to use them together, giving much more refined outcomes than the only use of HTML could do. Moreover, the separation of document content and document presentation makes the job easier, especially for following modifications, because the same CSS file can be attributed to several HTML files.
The method I've used was to create an HTML file in wich I've placed the content of my web page: headings, paragraphs, bottons, text, etc. Later I've created a CSS file in wich I've defined the layout, making classes for any HTML element, and then I've embedded those classes in specific HTML coding stripes. In this way the same CSS setup can be used for different HTML files.
Bootstrap
Bootstrap is an easy and powerful framework for web development, it provides a set of stylesheet for HTML elements realized as CSS classes. Using Bootstrap greatly simplifies the job, because you don’t need to write the whole CSS code, but you can start from those provided (written by developers) and modify only what you want.
To manage HTML and CSS files and libraies I used Atom, an easy to use text editor wich is specifically made for coding. To build a wb page it's also possible to use the basic text editor any OS has embedded and name it with a .html extension, but I preferred to try something new to me
Above you can see an useful panel that allow a rapid access to your file and folders
Uploading my documentation to the class archive
Git and Version Control Systems (VCS)
Before these days I didn't know what a version control system was, so first of all I've looked for some information about it, and I've found this tutorial
What I've understood about it is that this system concern the management of changes in projects with more than one editor. VCS permit to revert a document to a previous version and keep track of every modification.
The VCS we are using for the Fab Academy is Git, supported by GitLab as repository manager.
To have access to the Fab Lab repository the first step was to get autenticated by creating a SSH (Secure Shell) key.
In this way only admitted users can load and handle contents.
To do this I first had to cerate an account on www.fablabs.io and then sign in on git.fabacademy.org. Later I needed to clone my Lab’s repository on my pc:
git clone git@git.fabacademy.org:fabacademy2017/fablabtoscana.git.
From now, I'm able to put all my changes in the local repository and when I've finished, I only have to “push” them to the Fab Lab server.
Pay attention!
Git is a distributed system, so lots of people can modify the repository. Before to “push” you need to synchronize local repository with the Git one using the command "pull". If you forget this passage you should see an error…
Here you can find a list of links I've consulted during this week:
Text editor: Atom
