Project Management

Individual assignment

Learning outcomes:

Have you:

Software Used

Student agreement

Download it here.

Useful Links

Making a Website


Useful remiders

I keep forgetting basic stuff on html editing so in order to make my life easier I will start by enumerating useful codes and location of stuff like my template page:

Html uses tags for each entry like a paragraph or a button so I enumerate the tags I will use the most while editing my pages:

ps: one should open the tag with <some tag inside here> and not forget to close the tag with </same tag inside here>

Research

To get an idea of what my site would look like I went to the 2016 Fab Academy Student Archives in order to have a look of what others have done and used the random student button.

After review of a few pages I found Yuji OKI's page wich led me to the Fab Academy Template by Massimo Menichinelli

Yuji OKI's page

Fab Academy Template by Massimo Menichinelli

Using Massimos's template


On github I cloned the repository for Massimo's template page to my hard drive. Then copied its contents to a directory with my name.


Editing


The code editor I chose to use are Sublime_text3 and Brackets.

About Sublime_text3:

Sublime is great for coding, diffing and merging two codes. I specially like to use the plugin "Sublimerge3", It let me compare 2 files and then merge portions of the code.

About Brackets:

Most of the time that's where I code HTML. The great feature Brackets have is to update in realtime what you code into the browser page. This way every single modification can be viewed without the need to refresh.

To install it on a MACOS I simply run the following terminal comands:

$ brew cask install sublime-text
$ brew cask install brackets

Brackets Snapshot

Customization of the template's CSS

CSS let you to style you HTML. This can be done in 3 ways: Inline, Internally and externally.

As the current template uses a an external method, and its a huge time saver, that's how I went with. In some places of my website, for lack of better understanding how CSS works I might have used inline styling.

The external style files are bootstrap.css and fabacademy.css. These files are referenced in the <head> section on the beginning of each HTML file.

So far I changed only a few settings in other to achieve the current settings and they are in the fabacademy.css file:

In the bootstrap.css I also did some changes as exemplified bellow:

As I had near 0 knowledge on HTML editing or CSS and to better understand HTML Prior to the above modifications I watched Massimo's lecture on HTML and CSS

Also used html references at w3schools.com

Website Folder Structure

Currentely the folder structure is quite simple and well need some cleanup.

Folder Structure:

current folder structure

Instaling ncdu and using it in order to check for big files


In order to save space in the server as well as have a faster loading website we need to constantly make sure we don't miss big uncompressed image and video files

  1. on a Linux terminal type:
    2. sudo apt install ncdu

  2. start ncdu on a linux terminal by typing:
    3. ncdu

    ncdu will open and with the up and down arrows and enter key you will be able to navigate your directories.

    Ncdu will classify the biggest files first and show the more hash tag characters "#" for the biggest folders or files.

    In this case the biggest file is a video file for my final project sketch


Compressing the biggest files


For the video file we will use ffmpeg

  1. Start by installing ffmpeg on a linux terminal:

    2. sudo apt install ffmpeg
  2. Next run ffmpeg on the big video file as per my example:
    3. ffmpeg -i input_video -vcodec libx264 -b:v 1000k -vf scale=-2:720 -an output_video.mp4

The code above should give you a 720p video without audio for more examples check Neil's ffmpeg cheatsheet


For the images you can use a software called Gimp and a plugin called bimp.

    I use a package managing software called Chocolatey in order to install some windows software.

    It works similarly to apt but for windows.

  1. On a windows administrative shell run:
    2. choco install gimp
  2. Then download bimp from its website and then install it so you can run it under gimp.
  3. After installation is finished run gimp and select the batch image Manipulation plugin

  4. In order to load a previous set or to save a new one you have to press the Add button then select the desired operation

  5. In my case since I had the set saved already I selected "load set"

  6. then select the set, in my case "readyforweb.bimp"

  7. In other to create or modify the behaviour of the plugin click on the add to add a process or click in one of the ones you have saved prior

  8. Inside the resize set I selected the options I wanted specifically the with to 800px

  9. than I went to the other process and opted for 75 compression ratio as well as convert the format to jpeg

  10. Than I selected all images I needed to convert at once and appliedthe changes

  11. next copy converted images to your folder if you did not specify it before.

Installing and using git


First I am using MacOS. With that in mind and with many possible terminal applications to be installed its useful to have Brew it helps with all installations one need to do on Terminal and desktop.

to install open terminal and run:

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

next install Cask it helps installing desktop app

$ brew tap caskroom/cask

next install Github desktop that will include Git as well

$ brew cask install github

Github Snapshot


Working with your Repository

Now that I have the website set locally its time to upload it to the Fabacademy repository.

To do that I will have to save my public ssh key into the Fabacademy's gitlab website it will let me access it using git without the need to type my password every time. After that its necessary to clone your repo to the local drive to start working on it.

A source of info on how to do it is at the ssh help at gitlab, following is how I did it.

Step-by-step instructions:
  1. Since I previously had installed git I go ahead to the directory I want to work and create a ssh key with:
    2. ssh-keygen -t rsa -b 4096 -C "your_email@domain.com"

    This will generate the SSH key and the label of the key will be whatever you include inside the quotes

    Generating public/private rsa key pair.
Enter file in which to save the key (/Users/someone/.ssh/id_rsa):
  2. after a while a message will ask to either leave the location and name of the new SSH key as default or make a new one. I chose a new typing a location and a new file name.
    3. Enter file in which to save the key (/Users/someone/.ssh/id_rsa): /Users/someone/.ssh/id_rsafab
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /Users/someone/.ssh/id_rsafab.
Your public key has been saved in /Users/someone/.ssh/id_rsafab.pub.
The key fingerprint is:
SHA256:IheXdVbB4DChb7Lyo5nJPHhNyExDKAFw5kADUTMR7MU your_email@domain.com
The key's randomart image is:
+---[RSA 4096]----+
|XBX= .    =.++o. |
| =+oE .  + *  .  |
| ..o .. +   .    |
|  .   oo .       |
|    .+ooS o      |
|     o+..+       |
|     ..o.        |
|    .oo*o        |
|     .Bo..       |
+----[SHA256]-----+
  3. show your ssh key running 
    4. $ cat ~/.ssh/id_rsafab.pub
  4. next you can select the text on the screen that will look like this 
    5. ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAACAQDRdz+KsRwD2jgojGESZzVQNtFT0uWLGZAieKRNMy4ytav//ABgEB5eAWFTU/YfjQn2apnt+YgXC7aWfjk8Ta5/AQblQ2r/randomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekey+rEk6OvIq5F46sKZclXdCLFbj4b9CP5wlFVWm/vq/tgeEbc701587xVCSq/7Ssqv5GNbipbq8eGElKiM4J7h1xlEJmSb06uuqk7PswQjDhV2RFHTl6sNM45qJw30y9O3WkfddFmW5nQ8roP880ef0rvvWK51nvUpmm37rIrHa+rdFpPc9U0bRZ5BhYpp/wMnVHLmZB8W/9Wf2TN0TD/H1AWjvQ1O2EJxKn7GStVGUzopCcIwt+jEjcMZRC/pRZnvEjH30FAFv5F+kYQwmsKcNuZz+qLWF8D5sjVySHSdERLJ3Y7h4ObCJt0ll5+NJ7syf1S7gCotvT910Evorq1f2jb4l6Lt1gJz7uXA03va0HhaBGTKTB0mF7NRJusotyhGWncXgNTkZOkfFQ5Ps1xAcLRmB0uMt0/3MnS7ONu/TfJVuSqYqUuuUtz9hqbke4I4JsD+X7e1a4gAvsFK/nv6Usf0m8aQ== your_email@domain.com
  5. because my key is not default I need to let the SSH agent know where it is typing:
    6. $ eval $(ssh-agent -s)
Agent pid 9284

$ ssh-add ~/.ssh/id_rsafab
Identity added: /Users/someone/.ssh/id_rsafab (/Users/someone/.ssh/id_rsafab)
  6. Next is to load the public key to gitlab and copy your repo ssh key address, in case you do not know it. Go to gitlab.fabcloud.org
  7. Login with the fablabs.io
  8. Locate you lab and then your student name;
  9. There you can copy your repo ssh address by switching html to ssh.

  10. Next add your key to your user profile

  11. Now its time to clone you repo and start with the "mantra"... so with your prior copied ssh address type the following
    12. git clone git@gitlab.fabcloud.org:academany/fabacademy/2018/labs/yourlab/students/yourname.git
  12. Now that your repo is cloned locally you can either start editing you html right there or paste your already edited website or template in the directory created.
  13. Now the "MANTRA"
    14. git pull
git add --all
git commit -m yourmessagehere
git push

    this series of commands will make sure:

    1. first (git pull) you are updated with your origin
    2. second you add all new alteration to your local branch (git add--alls)
    3. third you committed all changes (git commit -m yourmessagehere)
    4. and last you sent the commits to your origin (git push)

Git and Bash Notes:

(notes here are to be added along the course as a cheatlist of git commands)

Creating a new Repo

I wanted to include instructions on how to create a new repo and upload it to github for future reference even it was not how I did

  1. First its necessary to be on the working directory and then make it a git directory with:
    2. git init
  2. next add all files to the local repo and stages them for commit
    3. git add .
  3. Next needs to be committed with:
    4. git commit -m "First commit"
  4. now create a new repository on github

  5. Then copy the remote repository address

  6. now add a remote with the copied address
    7. git remote add origin copied_adress_here
  7. Finally push everything with:
    8. git push -u origin master

    and its done

  8. Notes on git:
  9. Notes on ffmpeg: