Exercise 02. Project Management

Assignement: Work through a git tutorial, build a personal site in the class archive describing you and your final project.

(work in progress)

Work through a git tutorial

Introduction

Working with git was new for me. I followed ideally this procedure (In my case, after many trials and tutorings from our instructor, Enrico Bassi, and my course's colleagues, two presentations on Jan 22nd and 27th, 2018 from Fiore Basile, and a conference from Neil Gershenfeld on Jan 24th, 2018 whom I thank all.

First procedures

1. I followed online at Opendot, Milan, Fiore Basile's presentation on Jan 22, 2018 about Version Control;
2. I started to read the Pro-Git book;
3. In my personal email, I got my personal "gitlab.fabcloud.org" address, I signed through FabLabs.io's website, where I created a profile, and I entered in my Opendot group of work, in "gitlab.fabcloud.org";
4. I downloaded Github for Windows;
5. I used the included application "Git Bash";
• I set up my local identity:

  $ git config --global user.name "Catherine Blanchard"
  $ git config —-global user.email "catherine.blanchardx@gmail.com"
  	

• I used "git init" to create my first git repo

  	  
  $ mkdir myproject
  $ git init
  Initialized empty Git repository in /Users/catherine/myproject/.git/
  

6. I generated a SSR key to establish a secure connection between my computer and GitLab. I entered in my personal page on "gitlab.fabcloud.org". I clicked under my picture in "Settings", then on the left side of the web page, I scrolled the left column, and found "SSH Keys". I clicked, and followed the instructions to generate one. I automatically archived the private and public ones in "C:\Users\Catherine\.ssh". I pasted the public one on the "User Settings > SSH Keys"'s page, and in the bottom of the page, I saw it registered.
7. On my main page in GitLab, in the left column, I clicked on "CI/CD" and added a ".gitlab-ci.yml" file to the root directory of my repository. It contains definitions of how my project should be built. Here a quick introduction to GitLab CI (Continuous Integration), in this quick start guide.

Build a personal site in the class archive describing you and your final project

Introduction

After so many years that people create websites, it is my turn. Before, I used to write on Blogspot or Wordpress, without really learning to code. I am grateful to this course. It is also an opportunity to think about who I am, what I am doing, and where I want to go in the next six months through the Fab Academy 2018 program.

Process

First, I downloaded the Fab Academy Template's zipped file built by Massimo Menichinelli in a file named Fab Academy 2018, then I extracted the compressed files and save them in a file named catherine-blanchard. Then, I downloaded the text editor Brackets, and opened this last file in Brackets, clicking on the right side of my mouse. I could see all the Fab Academy Template's files on the left column of the editor. So , I am ready to modify each file of my future website, save them, and see their previous aspect on my future website, clicking in File, and on Live Preview.

In the meantime, I learnt how to write a HTML/CSS page, thanks to the tutorial found on the website w3schools.com. It took me a long time to try, but i am quite happy of the result.

Here some examples of nested HTML elements, I wrote in the document exercice01.html for this web page: Exercise 01. Principles and Practices, presentations, introductions:

• HTLM Text Formatting: Bold text "Goals"
<b>Goals</b>
• HTML Paragraphs
<p>Goals</p>
• Ordered HTML List type="1": the list items are numbered with numbers (default)
<ol type="1">
• <li>Long-term goals</li>
• <li>Medium-term goals</li>
• <li>Short-term goals</li>
• </ol>
• Unordered HTML List. The CSS list-style-type property is used to define the style of the list item marker. We chose a circle as the list item marker
• <ul style="list-style-type:circle">
• <li>Co-facilitate relationships between Presencing Institute and FabFoundation;</li>
• <li>Co-facilitate in the evolution of the geografical area of Verona, Italy, as a Fab City.</li>
• </ul>
• HTML Links. In HTML, links are defined with the <a> tag. The href attribute specifies the destination address (https://www.presencing.org/#) of the link. The link text is the visible part (Presencing Institute). Clicking on the link text will send you to the specified address. Here below the link to Presencing Institute's web page.
<a href="https://www.presencing.org/#">Presencing Institute</a>
• HTML Images

HTML Images Syntax

"In HTML, images are defined with the <img> tag. The <img> tag is empty, it contains attributes only, and does not have a closing tag. The src attribute specifies the URL (web address) of the image: <img src="url">


The alt Attribute

The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). The value of the alt attribute should describe the image: In our example <img src="img/Nested_HTML_elements.png" alt="Nested HTML elements"> If a browser cannot find an image, it will display the value of the alt attribute: Example <img src="wrongname.gif" alt="Nested HTML elements"> Note: The alt attribute is required. A web page will not validate correctly without it."

Source: w3schools.com

<img src="img/Nested_HTML_elements.png" alt="Nested HTML elements" width="500" height="281">

Here an example of CSS text alignment element, I chose to set the text-align property to "justify"the text. Each line is stretched so that every line has equal width, and the left and right margins are straight: