Principles and Practices - Project Management

1. Week assignment

Use subversion control to manage project and pull a personal site on local fablab server, and make proposal of final project.

2. Development Environment

I’m currently using a laptop running Linux Mint 18.1, based on Cinnamon desktop environment.

I use for text editing a highly customizable open source editor called atom, and for easier access to linux bash i use guake dropdown terminal.

3. Programming for Web

The main languages used for making web sites are HTML, CSS, JavaScript and PHP.
A brief intro to CMS and Bootstrap is present.
You can find more info on this on Wikipedia.

3.1 HTML

The HTML (HyperText Markup Language) is the basic language for the web.
The HTML elements are the main components of a web page: they are the elements rendered in your browser windows, and each one of them is identified by a tag (like <img> for display an image, <p> for displaying a paragraph...)

3.2 CSS

The CSS (Cascading Style Sheets) is a styling language: you can style here your HTML elements, separating the process of styling and creating the page: a modify in a CSS file modify all the HTML linked to it, allowing a faster development.

3.3 JavaScript

JavaScript is an interpreted high-level programming language used for web (and later on used for desktop-based programs); mainly is used for animations, transitions and effects in web pages.

3.4 PHP

PHP (PHP: Hypertext Preprocessor) is a server-side scripting language: it can be embedded in HTML pages to make non-static websites (like everything on the internet now).
The difference with JS is that code is run by the server, not by the page.
This language is not in the scope of the course assignment.

3.5 CMS

A CMS (Content Management System) is a software that provides useful tools that let people with little or no knowledge of web programming to make web sites.
The most used CMS system is WordPress, but it’s the most targeted by hackers attack, because it’s not so secure.

3.6 Bootstrap

Bootstrap is the framework I used for developing my course website.

This framework is designed mainly for responsive website, and it has included lot of classes and functions to speed up web development process.

4. Version control

Control versioning is a method to keep track of what you do while coding (everything from a simple site to a complex program).
You can, at every modify of the code(s), assign a number of revision with a comment, to see what, when, why and how you did that modify.

Using version control while developing (everything from a site to a complex application) is a life-saver.
If you do a big mistake, you can roll back to a previous state in any moment.
You can also make and merge branch.
The branch, just like what it is in a tree, is something different from the main project (the trunk): you (or your teammates that work with you) can develop a branch, then decide to join it in the trunk (by merging it) or to “cut” it (i.e a feature in that branch is not needed anymore).

4.1 Git

Git is a version control system for tracking changes in computer files and coordinating work on those files among multiple people.
An online implementation of Git is GitHub (for my personal projects I use a site called BitBucket), while Fab Academy uses GitLab.

4.1.1 Use

To use your FabLab Repo
  1. Register on fablab.io
  2. Sign in on git.fabacademy.org
  3. Generate SSH key

ssh-keygen -t rsa -C "GitLab" -b 4096

  4. Copy the output of

cat ~/.ssh/id_rsa.pub

  in git.fabacademy -> Profile -> SSH Keys

  5. Change file permission on key files (as sudo) and add ssh agent

                    chmod 600 .ssh/id_rsa.pub
                    chmod 600 .ssh/id_rsa
                    ssh-agent
                  

  6. Clone the lab repo

                    git clone git@git.fabacademy.org:fabacademy2017/fablabtoscana.git
                  

  7. Change dir in fablabtoscana

cd fablabtoscana

  8. Copy modified file and add them to git

add .

  9. Commit

git commit -m “comment”

  10. Push

git push origin master

4.2 Subversion

In my personal work experience I used subversion (SVN) for versioning control.
The main difference between Git and SVN is that with git you local commit your changes locally, and then you push them on the server.
With SVN there is no commit: you push the changes directly on the server.
A nice Windows SVN GUI is called TortoiseSVN

There are advantages and disadvantages on both of them: your SVN server can’t be reachable all the time (so you can’t push), but being the commits online you can’t lose data if your PC get broke down; Git, instead, let you commit your changes locally, but if your PC explodes before push you lose all the changes!

5. Final Project

You can find information on the final project here.

6. Site development

To make the website for this course, I used HTML5, CSS, a little JS and mainly the Bootstrap framework.
To highligth the code in the programming weeks, I used a nice plugin called highlitgh.js.
I’m writing the code by hand in Atom.
You can see all code by looking at page source in your browser, as it’s not minified.

The main site element are:
    - the main div containing all the site
    - the menu, made by a bootstrap navbar
    - the content, which has 3 columns, one with content and two used as a spacer; if you see this site in a smartphone, due to bootstrap responsive capabilities, they’ll tighten for better reading

7. References

Linux mint - http://www.linuxmint.com

Atom - http://atom.io

Guake - http://guake.org

Wikipedia - https://en.wikipedia.org

Bootstrap - http://getbootstrap.com

WordPress - http://wordpress.com

Git - https://git-scm.com/

GitHub - https://github.com/

GitLab - https://about.gitlab.com/

UDOO - http://www.udoo.org/

Highligth.js - https://highlightjs.org/