WEEK2: PROJECT MANAGEMENT

ASSIGNMENTS:

 

  • Work through Git tutorials
  • Build a personal site in the class archive describing self and final project

WORKING WITH GIT

 

  • Previously I have not used version control system for documentation, so I started with tutorials to explore WHAT, WHY, and HOW of Git distributed version control system(VSC).
  • To start with I have downloaded Git from here: https://git-scm.com/downloads
  • For interface I have chosen Git bash to start working and understand fundamental functionality of  Git as I have referred such tutorials.

 

STEP 01: Open the Git in computer

  • Open Git bash or command or GUI for Git in your computer system

 

STEP 02: Generate SSH key

  • SSH (Secure Shell) is cryptographic network protocol, used by Gitlab to secure authentication of user on remote Gitlab server.
  • In order to generate SSH key we have to run command in Git bash :
  • ssh-keygen -t rsa -C "registered email address"
  • Git will ask for file path and to set password, if you don't want to specify either of those simply hit enter to move ahead.

 

STEP 03: Clone public SSH key

  • In the this step, we have to copy public SSH key which we will use in next step for verification
  • For this git command is cat ~/.ssh/id_rsa.pub | clip

 

STEP 04: Login to Gitlab account

  • To login first time follow the link provided by Academany IT. Where one can reset password and make profile. Explore options available on Gitlab account.

 

STEP 05: Add public SSH key to Gitlab account

 

  • For this one has to go in "Settings" menu of your Gitlab account, and click on "SSH key" tab from left option bar.
  • Paste SSH key in given box, and click on "Add key" green button.

 

STEP 06: Add Environmental variable in computer system

 

  • We have to create environmental variable by going in computer properties in order to add SSH manually in system. This is optional if your system does not have security issue.
  • System Properties - Advanced - Environmental variable - System variable New - Add Name and value as Gitlab repository link.

 

STEP 07: Git user configuration in Git bash

 

  • Here we have to provide our Gitlab registered name and email address. Command to do so are as below
  • git config --global user.name "USERNAME" and
  • git config --global user.email "EMAIL ID"

 

 

STEP 08: Clone Gitlab repository to local drive

 

  • To execute this, first copy Repository link from Gitlab account which can be found on your project home page.
  • After that run following git command to clone it locally
  • git clone "repository link which you have copied"

 

STEP 09: Locate local system files in Git

 

  • This is to ensure if we have modified location of git repository folder in your computer system. Git command are cd /"drive or folder name" and "ls" to list files in that folder.

 

 

STEP 10: Push the website to class archive

 

  • First of all we have to save our html file in local git repository folder, after that following git command should be executed.
  • git status  To check modification has reflected or not
  • git add --all  To add files on server
  • git commit -m "message" - Commit changes with message so that change can be found later when needed
  • git push - Push

DESIGNING PERSONAL WEBSITE

 

 

STEP 01: Sketching mock-up website

  • As per instructor’s suggestion and referring fab academy archive to study various student’s documentation, I have understood that my website is my notebook. The notebook which can help me as well to other students in future whenever one want to apply learning of Fab Academy course in practice.
  • So, first I have sketch of my how my website will look like, and how it can be more user friendly to access. Here is my first mockup sketch.

STEP 02: Selecting website design tool

  • In  project management class several website designing platform has been explained, as I did not have prior experience of website coding I chose to build my website with the help of Adobe Muse. Prior familiarity with adobe suits helped me to grasp and learn faster to design website on muse platform.
  • I have installed Adobe Muse 2015 in my windows system, it can be downloaded from Adobe Creative Cloud suits.

STEP 03: Referring tutorials

STEP 04: New site setup

  • As I have started Adobe Muse, to create new website one suppose to click on File → New site (Ctrl+N). And just that first window will ask about site page setup which you can also use as default to start with as it always can be changed later stage of development. But I prefer following specs to customize experience a bit.
  • Page width: 1080
  • Min. Height: 500
  • Columns: 12
  • Gutter: 16
  • I have changed page width 1080 so almost all high resolution screens have full width view. Secondly I chose 12 columns and 16 gutter (space between columns) so that I can have more editable control boxes.

STEP 05: Setting up Master and Home page

  • As you can see in screen shot here at first we have two default pages i.e. A-Master and Home.
  • Master page is standard page, items in this page will reflect on each page of our website, so this is the page where one can set main menu buttons, logos, copyright sign etc.
  • Home page is first page that appears when we open the website in browser, and that tells what website is about. Also it links various menus and allow user to go on particular section of information which he/she is looking for in website.

STEP 06: Design website structure

  • Next thing we have to do is to create structure of our website. And assign hyperlink for respective page buttons in home page to navigate same.

STEP 07: Add content in various pages

  • After that we have to add text and images of our website content. Its good if we can follow uniform pattern of text and image style throughout, so user can have good experience.

STEP 08: Export website from Adobe Muse to publish on class archive

  • In order to make our adobe website live on class archive page, first we have to export our website in html package. For this go to File → Export as HTML in Adobe Muse. Select folder where you want to save complete package of HTML data.
  • Next, copy this entire html folder in you local git repository, and push it from Git with command we learned above in Git Step 10.

STEP 09: Image positioning problem I have faced and how I resolved

  • When I have published my website in Git by HTML code,we have encountered problem that images were getting overlapped, with suggestion of Ohad I have looked into HTML code and its image positioning
  • I have found that my images has not specific fixed location, so its position tossing around as we change browser and its resolutions
  • So, after reading some articles and community help of Adobe, I finally chose to place(fill) my images in rectangle box. So I have followed these steps
  • Draw rectangle where I want to place my image - Go to Fill option - Add image - Scale to Fit (scale to fill), and pin it accordingly.
  • I have also tried to make seperate text box and image box for each image and text.

 

  • Once fixed these problems website worked fine. My original website muse files and html files can be found here

LEARNING CONCLUSION

  • Git is very good version control system which gives total control  overversion and keep track over project with files and data at one place.
  • Furthermore I have explored Grantt Project - A Project management tool in Machine design group work to complete task with proper roles,  responsibilities, timeliness and order. This work can be accessed here

Go to Week 3

Go to Weekly work page

2018 | Tanvir Khorajiya