PRINCIPLES, PRACTICES AND PROJECT MANAGEMENT


Home About me

ASSIGNMENT


Work through a git tutorial and build a personal site in the class archive describing me and my final project.

GIT

Git is the version control system of choice for this project.

SETTING UP SSH KEY:

First, we need to generate an SSH key. On linux, the following command will do the job:

ssh-keygen -t rsa -C "myemail@foo.org"
  

Later, the generated key must be copied to the GIT platform.

cat ~/.ssh/id_rsa.pub
  

COMMANDS USED:

git config --global user.name "YOUR_USERNAME"
git config --global user.email "your_email_address@example.com"
git config --global user.name
git config --global user.email
git config --global --list
git checkout master
git clone foo@foo.git - used to make a local copy of the repository.
git add * - used to add files to commit.
git commit -m "message" - used to commit a change and comment.
git push origin master - used to push files to remote repository.
git pull origin master - used to pull changed files to lo a local repository.
git status - used to check which files have been changed since last commit.
  

UPLOADING FILES TO THE FAB ACADEMY ARCHIVE

The fab-academy archive is hosted in a private server in Git-Lab at the following address:

GitLab FabAcademy

Each of the fablabs around the world have a project page. In my case, the project page is from the Fab-Academy in Kamp-Lintfort, Germany.

Inside the Fab-Lab Kamp-Lintfort page, the folder 'students' contains a directory for each of the participants of the fab-academy in Kamp-Lintfort, Germany.

In order to have access to our repository, I proceeded to clone the repository as follows:

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

gitlab

Once cloned, my local computer and special hidden git files will keep tracks of changes done locally. As the repository is shared between all of the students in Kamp-Lintfort, it is necessary to pull contents before pushing anything to the repository. This is done as follows:

git pull origin master 
cd students/390
git add *
git commit -m "[+]week01.html"
git push origin master
  

Commands above, exemplify how I added my website to the Fab-Academy class archive. First, I pulled the contents from the remote repository to my local machine. Then I changed directory to my personal folder. Second, I added the modified files (in this case *, means that all files will be included in the commit.). Third, I commit with appropriate message and push contents from my local machine to remote repository in Git Lab.

COMMAND LINE


Lubuntu Linux Terminal is my command line tool of choice.

I will also use "bash on windows" in my home computer. I set up Lubuntu on my laptop as it is speedy and the battery efficiency is excellent.

My most commonly used commands in the linux terminal are the following:

less - allows to read file with forward and backward movements.
cat - sends contents to standard output.
cd - change directory.
cp - copy file.
ll - list contents of directory, including hidden files/folders.
pwd - print working directory
  

HTML TOOLS

VIM and emmet-vim plug-in is used to edit the HTML code of this personal website.

VIM provides easy navigation without a mouse, it is lightweight and with a steep learning curve but rewarding speed.

Emmet-vim is a useful plugin that provides shortcuts for typing html code. It allows for better productivity and less hassle writing html code snippets.

HTML tag writing is greatly simplified using emmet-vim keyboard shortcuts.

For instance, < p > < /p > tag can be automatically written by typing just p> in insert mode and the shortcut control + y + ,

Learning curve of emmet-vim is easy.

Further information and tutorial on emmet-vim plug-in can be found Here

HTML CODE

HTML is a mark-up language for documentation, it supports cascading style sheets (CSS) and Javascript.

I personally like websites that are speedy and simple, with easy to read/load and classic-style. I feel today's websites have become too cluttered and some, only work on modern computers.

HTML works by creating elements using angle brackets < > to designate tags with different functions.

The tags which I mostly used in this particular page are p, pre, img, a which, are paragraph, preformatted text, image and hyperlink tag, respectively.

The paragraph tag, as it explicitly says, will render text in the webpage. The preformatted text, is used to display text which needs to be displayed in a certain way without post-formatted features that html tags modify. For instance, pre-formatted text is used to display code and terminal commands in this site.

As for img, and a; they are tags useful for displaying images and hyperlinks.

I chose a minimalist approach for my website, the speedy load-times are a good compromise. I use simple HTML tags and CSS styling.

For the Fab Academy ASCII logo, I used an online generator.

<!DOCTYPE html>
<html>
<head>
    <title> Fab Academy 2017 </title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <tt>
    <div>
        <h1>Fab Academy 2017</h1>
	<h2>Cesar's documentation</h2>
        <hr>
        
        <p>
	    <a href="aboutme.html">About me</a>
        </p>
        
        <ul>
            <li> <a href="week01.html">Week 1 - Principles, practices and project management</a> </li>
            <li> <a href="week02.html">Week 2 - Computer-aided design</a> </li>
            <li> <a href="week03.html">Week 3 - Computer-controlled cutting</a> </li>
            <li> <a href="week04.html">Week 4 - Electronics production</a> </li>
            <li> <a href="week05.html">Week 5 - 3D scanning and printing</a> </li>
            <li> <a href="week06.html">Week 6 - Electronics design</a> </li>
            <li> <a href="week07.html">Week 7 - Computer-controlled machining</a> </li>
            <li> <a href="week08.html">Week 8 - Embedded programming</a> </li>
            <li> <a href="week09.html">Week 9 - Mechanical design</a> </li>
            <li> <a href="week10.html">Week 10 - Machine design</a> </li>
            <li> <a href="week11.html">Week 11 - Input devices</a> </li>
            <li> <a href="week12.html">Week 12 - Holiday</a> </li>
            <li> <a href="week13.html">Week 13 - Molding and casting</a> </li>
            <li> <a href="week14.html">Week 14 - Output devices</a> </li>
            <li> <a href="week15.html">Week 15 - Composites</a> </li>
            <li> <a href="week16.html">Week 16 - Networking and communication</a> </li>
            <li> <a href="week17.html">Week 17 - Interface and application programming</a> </li>
            <li> <a href="week18.html">Week 18 - Applications and implications</a> </li>
            <li> <a href="week19.html">Week 19 - Invention, intellectual property and income</a> </li>
            <li> <a href="week20.html">Final Project</a> </li>
    </div>
    </tt>
</body>
</html>
  

FINAL PROJECT


I decided to make an inspector robot, expandable if time allows. The main features are:

  1. Remotely controlled wheels and camera.
  2. WiFi connectivity.
  3. desirable: autodriving./collision detection
  4. desirable: 360 camera system.
  5. desirable: air pollution, humidity, temperature sensors.

concept

The sketch above, illustrate two concepts of the inspector robot I intend to build. The usual design will be with conventional rubber wheels; however, I am particularly interested in building tank treads.

If an inspector robot is to be used in industrial applications, the tank-treads will provide:

I would like the robot to have a camera dome with a rotating camera or several cameras capturing different angles.

As for the body, a possible expandable feature will be arms, which will not be implemented in this project but is an idea I would like to expand over the years..

A small prototype will be build first with a parametric design, easily fabbable and expandable.

TESTING MY WEBSITE


This website is written on lubuntu linux and routinely tested on chrome, firefox, opera and internet explorer. It best works in Chrome.

Webpage test, available at: https://www.webpagetest.org/ is also used.

My android phone is also used sporadically to test the site is working.

LESSONS LEARNED


I improved my knowledge of GIT and practiced some HTML coding.

RESOURCES


Formatting and indenting HTML - by Granneman
Google HTML and CSS style guide
Pocket HTML Tutorial
Mozilla CSS Guide ASCII Converter

The content of this page is licensed under Attribution-NonCommercial 4.0 International CC BY-NC 4.0. Any source code, if otherwise unspecified, is licensed under the MIT License