Week1 | Fab Academy 2016 | Katerina Labrou

Tasks.

Build your personal website.

Describe yourself and your final project.

The first week of the Fab Academy started with an introduction to the concepts and principles of the FabLabs and digital fabrication by Neil Gershenfeld as well as a good number of tools available for the creation of websites and the documentation of our projects. The goal was to use most of the tools and decide which suites our needs and is better to work with.

Principles and Practices.

Here are some extra notes I kept with the things that really stroke me during the first lecture.

Build your website

In order to learn how to build and share our website, we were shown several tools for communication and synchronization, web authoring, documentation and content management systems. We went through most of them so that we could decide on which one to chose.

I tried to work with Brackets and Atom. I ended up using Brackets because I found it easier for a beginner.

It was my first time to use a web authoring software. I think the most difficult part while trying to build your own website from scratch is to start.

One of the most interesting and challenging parts was also trying to write the css file [style.css].

The pages where being developed in parallel with the css script, as the content of the size was gradually increasing.

Here are some links to tutorials and other interesting stuff I found in the process of creating my web site...

Codecademy: HTML & CSS -- Really helpful tutorial on html and css.

html5-boilerplate -- A template to start from in order to build your website. The first thing I did was to go through it in order to understand the coding logic.

Css Reset-- While trying to understand the importance of "nomalizing" the browser settings.

Css-Tricks -- A website I used a lot while trying to decorate my website with in css.

It was quite difficult indeed to find a way to position the elements on my page.

Codepen -- A quick and easy tool to test your code. I used that several times, especially during going through tutorials.

html5 Doctor

Stackoverflow

Cross fading images

CSS Specificity: Things You Should Know

Google Fonts The link to fonts I used on my site.

At the same time, all of us were supposed to get familiar with the FabLab version for GitHub, GitLab, where we will have to push our work every week, in the class repository.

For the Homepage of my site,I used icons made by Freepik from www.flaticon.com and licensed by CC BY 3.0

Sharing the website // Git.

GitHub is a social repository for open-source projects, based on Git, a distributed version control system.

FabAcademy uses GitLab, an MIT licensed edition of GitHub.

In order to upload, share and revise our websites we will be using Git. In it, each one of us has its own private local repository and can merge changes into a main repository via different requests. I will use the GitBash prompt to execute my control commands.

I created my private directory on git.fabacademy.org, created a local repository on my computer and used an SSH key to set the connectivity with the virtual private server.

I had some trouble locating my git folder because I created it inside my ~\Documents\fablab_bcn_2016 folder. In order to settle the connection I had to move it to ~\Users\kat\fablab_bcn_2016.

More instructions on the process as well as a comparison between Git and Mercurial can be found here.

The basic commands to use while sharing a site version on GitLab are the following:

                        
                        ls = list folder content
                        cd = change directory
                            basic commands:
                            cd .. [go up]
                            cd /  [root]
                            cd ~  [home]
                        tab key = auto-completion (preconfigured on Windows)
                        
                        //after locating the master directory:
                        git pull        
                        git status
                        git add .
                        git commit -m "commit message using simple characters"
                        git push

Project Management.

Principles:

→ Make time schedule before starting.

→ Works tasks in parallel.

→ SPIRAL DEVELOPMENT : make a small version of the project, then go back to create a bigger one!

→ Make sure everything is working.

Thinking about the final project

While trying to cope with the hoards of information we face right from the first moment in class, I squeezed my mind to come up with an original idea for a final project and this is where I've gotten so far.

Practices and Principles, Project Management.

Notes

Tasks.