During this week I created this website including my short bio, uploaded it to the Class archive utilizing Git and sketched my final project.
Jani Ylioja, our Fab Lab instructor, gave us a short introduction to GitHub and explained us the policies regarding the use of FabAcademy Gitlab account. He informed us that all members of our Fab Lab use the same repository. He strongly warned us to always check that we are not pushing big files to the repo. To shrink images size, I found in the Class Archive the
convert command. I have used this command to use adequate size of images in this page.
Next, I will describe the process to clone a repository from Fabacademy git repository and upload a Hello World! website.
ssh-keygen -t rsa -C "<myemailaddress>"This command generated the pair public / private key in the default folder: C:/Users/<myname>/.ssh/<keyname>
clip < C:/Users/<myname>/.ssh/<keyname>.pub
git clone <Fab Lab Oulu repository address>The repository was cloned in my local machine. It contained different folders, one for each student in Fab Lab Oulu.
git pull origin master
git add .
git commit -m "Initial commit"
git push origin master
I had some previous experience on webdesign. I decided to create a simple and responsive portfolio-like website. I did not wanted to start from scratch so the first thing I did was to search for an existing template in internet. In order to make my life easier, and at the same time have a nice looking website I decided to use a frontend framework. I opted for Bootstrap due to its simplicity. Hence I searched in Google the keywords bootstrap template free portfolio. I scanned a bit the results and start searching for templates in Start Bootstrap, Wrap boostrap and Bootstrapious. After a few comparison I chose the Creative Portfolio template from Bootstrapious. The template is shown in following figure
I am familiar with Sublime Text so, in order to practice with another editor, I chose Brackets. I heard the first time about it during Neil's lecture, and I wanted to give it a try. The big advantage of this editor is that it generates the HTML view dynamically, so you do not need to reload the browser everytime you make a change to the webpage.
In Sublime Text i used quite often Emmet plugin which permits writing quickier websites, thanks to several tools including autocomplete.
I had clear from beginning the structure of the site: the home page should contain a visual list of weekley classes. Clicking in one list element would access to the class information. I decided to create another static webpage with my bio and a third one to store the project information. The wireframe and the structure of each page is shown in following figures
A web structure can be divided in three different blocks:
I have structured the files in the website as follows. The index, project files, and each week's documentation are stored in the root folder of the website. Then css folder contains all the CSS style files while the js contains the script files. The img folder contains all the images of each week while the source folder contains weekly 3d and 2d models, code libraries and similar files. Finally the .git folder contains the local version of the Git repository.
Each page of the site is structured as follows:
h1header. Then the
h2header which id is process. The rest of the structure depends on each week's assignment. Usually h3 headers separate the main sections of the week. While h4 and h5 headers shown different subsections.
I used mainly the CSS files that came with the template I chose (Bootstrapious). However, to fit my needs I had to edit heavily the CSS files in order to show the site exactly as i want. I had to do major modifications in the sidebar and in the way images are presented in the main content. In addtion I had to create my own CSS style for the go-to-top button. I made the changes in a separate files named custom.css so I do not modify the default style.
You are seeing the result of the work right now.. I am not totally happy with it, so I will do some minor changes in the future, specially to improve the usability
I have also been struggling compressing the pictures to make them suitable for the web. To that end I am using GIMP and ImageMagick
convert line tool. I have been using more heavily since Exercise 3. The operations using that command that have been more useful for me are the following:
convert *.jpg -resize 800x600 -strip -quality 40 ../image_web/destination.jpg
convert *.png -resize 800x600 -strip -depth 8 -define png:compression-level=9 ../image_web/vynyl.png
convert origin.png -resize 800x600 -depth 8 -strip -define png:compression-filter=2 -define png:compression-level=9 -define png:compression-strategy=1 final.png
montage -geometry 400x300+10-30 screen1.png screen2.png out.png
This was one of the hardest part of the week. I decided to propose as a final project an automatic indoor irrigation system (mainly for home use). However, I am not totally sure that this is going to be my final proposal. I will decide in two or three weeks' time. The page dedicated to the final project will present all information regarding the project including sketches and the descriptions I made during this, and the following weeks.
During this week I built this website and got familirized with Fabacademy git environment. Actually, I had certain experience programming webpages and I am teaching GIT to first year students, so I did not find many difficulties
No big problems. Just setting up my Git in the different computers I use for work was the bigger mess (e.g. different operating systems)
I found difficulties to define the project. It is hard for me to have an idea of what I want to do since I do not have good skills in majority of the classes. It is difficult to estimate if a project is feasible or not.
I learnt how to use Brackets to create webpages. I also learnt useful Linux commands to resize images for the web as well as the
du command to identify big files before uploading to Git.