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:
The template that I used utilize Bootstrap, a framework to develop responsive websites (that is, websites that adapts to the screen size). It is based on a grid-based system of 12 columns, in which the column size is defined by the resolution of the screen in which the website is structured. Bootsrap includes HTML code snippets (e.g. widgets), javascript and CSS in order to achieve the responsiveness. Furthermore, it facilitates the construction of sites by the means of widgets which save a lot of developing time.
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:
h1
header. Then the navbar-header
and navbar-collapse
contains the code implementing of the breadcrumb to quickly access different sections of the site. It heavily use of javascript to scroll down gently the page to the desired content as well as to collapse and uncollapse the menus. After that the text inside the .lead div summarizes the week's tasks. Next, a hero shot ilustrating the work of the week is added in the title-img-container. After that, a an unordered list shows the different tasks that I performed (or not finished during the week). Finally, the week's process is explained under the h2
header 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.The index page has a slightly different structure. In this case I make heavy use of the downloaded template class named grid. This allows to present images and text in a grid structure, which adapts to the screen resolution. To that end it makes use of the javascript plugin named box-masonry. Each, week's link is inside a masonry-item and is composed by an image, linking to the weekly assignment, the name of the weekly assignment and as short description of it (that usually is the same as the lead element in the weekly pages.
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.
I did not have to modify the javascript code coming in the template. I just added one javascript library jquery.scroolTo, to make the breadcrumb work. In addition I created my own library custom.js to make the go-to-top button working. The libraries that were utilized are:
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.