<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>week_01 Project Management</title>
<meta name="description" content="Your Description Here">
<meta name="keywords" content="FabLab Taipei,FabLab,Zihao Lin,FabLab SCU">
<meta name="author" content="Lin Zihao">
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css">
<!-- Slider
================================================== -->
<link href="css/owl.carousel.css" rel="stylesheet" media="screen">
<link href="css/owl.theme.css" rel="stylesheet" media="screen">
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation
==========================================-->
<nav id="tf-menu" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Lin Zihao</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html" class="page-scroll">Home</a></li>
<li><a href="Final Project.html" class="page-scroll">Final Project</a></li>
<li><a href="#tf-testimonials" class="page-scroll">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Home Page
==========================================-->
<div id="tf-home" class="text-center">
<div class="overlay">
<div class="content">
<h1><strong><span class="color">week_01</span></strong></h1>
<p class="lead"><strong>Project Management</strong></p>
<a href="#tf-services" class="fa fa-angle-down page-scroll"></a>
</div>
</div>
</div>
<!-- Services Section
==========================================-->
<div id="tf-services">
<div class="container">
<div class="text-center">
<div class="section-title center" >
<h2><strong>Objectives</strong></h2>
<div class="line">
<hr>
</div>
</div>
</div>
<ul class="about-list" class="pull-left">
<li>
<span class="fa fa-dot-circle-o"></span>
<strong>1)</strong> - <em>Understand the basic process and basic technology of website development, APP development, WeChat development, server development and embedded development.</em>
</li>
<li>
<span class="fa fa-dot-circle-o"></span>
<strong>2)</strong> - <em>Possess knowledge of the requirements of website development regulations and technical rules.</em>
</li>
</ul>
<br />
<div class="text-center">
<div class="section-title center" >
<h2><strong>Assignments</strong></h2>
<div class="line">
<hr>
</div>
</div>
</div>
<ul class="about-list">
<li>
<span class="fa fa-dot-circle-o"></span>
<strong>1)</strong> - <em>Build a personal site describing you and your final project.</em>
</li>
<li>
<span class="fa fa-dot-circle-o"></span>
<strong>2)</strong> - <em>Upload it to the class archive.</em>
</li>
<li>
<span class="fa fa-dot-circle-o"></span>
<strong>3)</strong> - <em>Work through a git tutorial.</em>
</li>
</ul>
<br />
<div class="text-center">
<div class="section-title center" >
<h2><strong>Project Management</strong></h2>
<div class="line">
<hr>
</div>
</div>
</div>
<p>In this week, Prof. Neil told us to focus on project management techniques. Project management is the application of processes, methods, skills, knowledge and experience to achieve specific project objectives according to the project acceptance criteria within agreed parameters. Project management has final deliverables that are constrained to a finite timescale and budget. Why do I need this technology? because of the fast-paced nature of the Fabacdemy programme. I must to apply this technique over the course of the next 20 weeks, and especially during the final project development period.</p>
<img src="img/week_01/Picture22.jpg" class="img-responsive" alt="...">
<br />
<div class="text-center">
<div class="section-title center" >
<h2><strong>Gitlab</strong></h2>
<div class="line">
<hr>
</div>
</div>
</div>
<div class="text-center">
<div class="section-title center" >
<h4>Generality</h4>
</div>
</div>
<p>Git is a free and open source. And, it is a distributed version control system, which enables me to work locally but also push my changes to other servers, after that I can clone the files to local storage. So, I can work on any computers and it's easy to track back.I learn git from <a href="https://git-scm.com/book/en/v2">this tutorial</a>. </p>
<div class="text-center">
<div class="section-title center" >
<h4>Basic commands</h4>
</div>
</div>
<p>
Sets the author name and email address respectively to be used with your commits.<br />
<code>git config –global user.name “[name]”</code><br />
<code>git config –global user.email “[email address]”</code><br />
Used to start a new repository.<br />
<code>git init [repository name]</code><br />
Used to obtain a repository from an existing URL.<br />
<code>git clone [url]</code><br />
Adds a file to the staging area.<br />
<code>git add [file]</code><br />
Adds one or more to the staging area.<br />
<code>git add *</code><br />
Records or snapshots the file permanently in the version history.<br />
<code>git commit -m “[ Type in the commit message]”</code><br />
Commits any files you’ve added with the git add command and also commits any files you’ve changed since then.<br />
<code>git commit -a</code><br />
Shows the file differences which are not yet staged.<br />
<code>git diff</code><br />
Shows the differences between the files in the staging area and the latest version present.<br />
<code>git diff –staged</code><br />
Shows the differences between the files in the staging area and the latest version present.<br />
<code>git diff [first branch] [second branch]</code><br />
Unstages the file, but it preserves the file contents.<br />
<code>git reset [file]</code><br />
Undoes all the commits after the specified commit and preserves the changes locally.<br />
<code>git reset [commit]</code><br />
Discards all history and goes back to the specified commit.<br />
<code>git reset –hard [commit]</code><br />
Lists all the files that have to be committed.<br />
<code>git status</code><br />
Deletes the file from your working directory and stages the deletion.<br />
<code>git rm [file]</code><br />
Used to list the version history for the current branch.<br />
<code>git log</code><br />
Lists version history for a file, including the renaming of files.<br />
<code>git log –follow[file]</code><br />
Shows the metadata and content changes of the specified commit.<br />
<code>git show [commit]</code><br />
Used to give tags to the specified commit.<br />
<code>git tag [commitID]</code><br />
Lists all the local branches in the current repository.<br />
<code>git branch</code><br />
Creates a new branch.<br />
<code>git branch [branch name]</code><br />
deletes the feature branch.<br />
<code>git branch -d [branch name]</code><br />
Used to switch from one branch to another.<br />
<code>git checkout [branch name]</code><br />
Creates a new branch and also switches to it.<br />
<code>git checkout -b [branch name]</code><br />
Merges the specified branch’s history into the current branch.<br />
<code>git merge [branch name]</code><br />
Used to connect your local repository to the remote server.<br />
<code>git remote add [variable name] [Remote Server Link]</code><br />
Sends the committed changes of master branch to your remote repository.<br />
<code>git push [variable name] master</code><br />
Sends the branch commits to your remote repository.<br />
<code>git push [variable name] [branch]</code><br />
Pushes all branches to your remote repository.<br />
<code>git push –all [variable name]</code><br />
Deletes a branch on your remote repository.<br />
<code>git push [variable name] :[branch name]</code><br />
Fetches and merges changes on the remote server to your working directory.<br />
<code>git pull [Repository Link]</code><br />
Temporarily stores all the modified tracked files.<br />
<code>git stash save</code><br />
Restores the most recently stashed files.<br />
<code>git stash pop</code><br />
Lists all stashed changesets.<br />
<code>git stash list</code><br />
Discards the most recently stashed changeset.<br />
<code>git stash drop</code><br />
</p>
<div class="text-center">
<div class="section-title center" >
<h2><strong>Clone the Repository</strong></h2>
<div class="line">
<hr>
</div>
</div>
</div>
<p>For Fab Academy 2020, we will store our learning website in the <a href="http://git.fabacademy.org/">Gitlab</a>, and use the git to control the version.</p>
<div class="text-center">
<div class="section-title center" >
<h4>Install the Git and add the SSH key in the gitlab.</h4>
</div>
</div>
<p>① Sign up <a href="https://www.fablabs.io/">FabLabs.io</a> using certain email address linzihao@scsuspark.com, Then login git.fabacademy.org with fablabs.io account.</p>
<img src="img/week_01/Picture01.jpg" class="img-responsive" alt="...">
<p>② Download and Install the Git software in the <a href="http://git.fabacademy.org/">Git website</a>.</p>
<img src="img/week_01/Picture02.jpg" class="img-responsive" alt="...">
<p>③ You can find the Git CMD, GIT GUI and GIT Bash after install the Git software.</p>
<img src="img/week_01/Picture03.jpg" class="img-responsive" alt="...">
<p>④ Run the Git Bash and check the version.</p>
<img src="img/week_01/Picture04.jpg" class="img-responsive" alt="...">
<p>⑤ The first thing I should do when I install Git is to set my user name and email address. This is important because every Git commit uses this information, and it’s immutably baked into the commits my start creating.</p>
<p><code>Git config --global user.name “Dark”</code><br />
<code>Git config --global user.email “linzihao@scuspark.com”</code></p>
<img src="img/week_01/Picture05.jpg" class="img-responsive" alt="...">
<p>⑥ Enter command to generate the SSH key in the command line.</p>
<p><code>ssh-keygen -t rsa -C “linzihao@scuspark.com”</code></p>
<img src="img/week_01/Picture06.jpg" class="img-responsive" alt="...">
<p>⑦ Check the SSH key type this command.</p>
<p><code>cat~/.ssh/id_rsa.pub</code></p>
<img src="img/week_01/Picture07.jpg" class="img-responsive" alt="...">
<p>⑧ Paste you computer’s publish SSH key to the form.</p>
<img src="img/week_01/Picture08.jpg" class="img-responsive" alt="...">
<p>⑨ Find and open your SSH keys in your GitLab.</p>
<img src="img/week_01/Picture09.jpg" class="img-responsive" alt="...">
<div class="text-center">
<div class="section-title center" >
<h4>Clone your repository</h4>
</div>
</div>
<p>① New a project of website file on computer.</p>
<p>② Input command in the Git Bash.</p>
<p>
<code>cd d:</code><br />
<code>cd Information/Scuspark/Fablab/</code><br />
<code>mkdir Webpage</code><br />
<code>cd Webpage</code>
</p>
<img src="img/week_01/Picture10.jpg" class="img-responsive" alt="...">
<p>③ Clone remote repository.</p>
<p><code>git clone git@gitlab.fabcloud.org:acdemany/fabacademy/2020/labs/taipei/students/zihao-lin.git</code></p>
<p>In this part, i encountered the problem! I was facing an authentication problem,where I was not getting permission to concenct with my repository.</p>
<img src="img/week_01/Picture20.jpg" class="img-responsive" alt="...">
<p>After the <code>$ ssh -T git@gitlab.fabcloud.org</code> troubleshooting method, I suspected that there was an issue with my ssh key.</p>
<img src="img/week_01/Picture21.jpg" class="img-responsive" alt="...">
<img src="img/week_01/Picture11.jpg" class="img-responsive" alt="...">
<img src="img/week_01/Picture12.jpg" class="img-responsive" alt="...">
<div class="text-center">
<div class="section-title center" >
<h2><strong>How to build the website</strong></h2>
<div class="line">
<hr>
</div>
</div>
</div>
<p>In this week, the first thing i did was understand the basics of HTML. So, I used this <a href="https://www.runoob.com/html/html-intro.html" >websit</a> to learn HTML and CSS.</p>
<div class="text-center">
<div class="section-title center" >
<h4>Overview of HTML</h4>
</div>
</div>
<p>HTML is the standard markup language for creating Web pages. It stands for Hyper Text Markup Language and describes the structure of Web pages using markup. HTML elements are the building blocks of HTML pages and represented by tags. HTML tags label pieces of content such as "heading", "paragraph", "table", and so on. Browsers do not display the HTML tags, but use them to render the content of the page.</p>
<div class="text-center">
<div class="section-title center" >
<h4>HTML page structure</h4>
</div>
</div>
<p>Below is a visualization of an HTML page structure:</p>
<img src="img/week_01/Picture13.jpg" class="img-responsive" alt="...">
<div class="text-center">
<div class="section-title center" >
<h4>Overview of CSS</h4>
</div>
</div>
<p>CSS is a language that describes the style of an HTML document. It describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. External stylesheets are stored in CSS files.</p>
<div class="text-center">
<div class="section-title center" >
<h4>Three Ways to Insert CSS</h4>
</div>
</div>
<p>There are three ways of inserting a style sheet: External CSS\ Internal CSS\ Inline CSS.</p>
<div class="text-center">
<div class="section-title center" >
<h4>Build the website</h4>
</div>
</div>
<p>Use the <a href="https://www.themezy.com/free-website-templates/167-spirit8-service-agency-responsive-bootstrap-template">spirit8</a> template in the <a href="https://www.themezy.com/free-website-templates">themezy</a> to quickly build up my learning website. All the web template are free. Down the files and unzip all files to Webpage folder, the template only include the main page, so use the Atom to manage the website and create the all pages of project.</p>
<img src="img/week_01/Picture14.jpg" class="img-responsive" alt="...">
</div>
</div>
<!-- Testimonials Section
==========================================-->
<div id="tf-testimonials" class="text-center">
<div class="overlay">
<div class="container">
<div class="section-title center">
<div class="section-title center">
<h2><strong>contact Me</strong></h2>
<div class="line">
<hr>
</div>
<div class="clearfix"></div>
<small><em>
Address: No.10, Kehua street, Wuhou District, Chengdu, Sichuan Province, China<br />
TEL: (028) 85406538 (+86)18981085882<br />
E-mail: linzihao@scuspark.com<br />
QQ: 386866966
</em></small>
</div>
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Message</label>
<textarea class="form-control" rows="3"></textarea>
</div>
<button type="submit" class="btn tf-btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</div>
<nav id="footer">
<div class="container">
<div class="pull-left fnav">
<p>Science Park of Sichuan University Co.Ltd. All rights reserved. © 2020. Designed by Lin Zihao</p>
</div>
<div class="pull-right fnav">
<ul class="footer-social">
<li><a href="https://www.facebook.com/zihao.lin.7399"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
</ul>
</div>
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.1.11.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/SmoothScroll.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script src="js/owl.carousel.js"></script>
<!-- Javascripts
================================================== -->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>