WEEK 1

1. Project Management

Assignment : work through a git tutorial. build a personal site in the class archive describing you and your final project

2.1 work through a git tutorial

I have started learning Git with the help of my instructors Lola and Álvaro (Sedicupct), we follow each step of the Git tutorial

Download Git for windows, Install everything by default

Open GitBash

User ID (git config –-global user.name “your_username”)

Email ID (git config -–global user.email “your_email”)

Check if I have any SSH key created (cat~/.ssh/id_rsa.pub)

Generate my SSH key (ssh-keygen -t rsa -C "$your_email")

Create the key in the default directory

Create a key and repeat it: xxxxxx

Generate the ssh key (cat ~/.ssh/id_rsa.pub)

Copy the GitBash key

Paste the key into my GitLab space (paste the key with "ctrl v" in Key)

Press "Add Key" to confirm the key

Create a folder in c: / where the local files of my web page will be. Open the folder location in GibBash

Open GitLab and clone with SSH

Copy it to GitBash. Right clip and paste

Enter personal password: xxxxxxx

Verify that the web page files have been copied to the local folder

The following steps are to copy the html page from the local folder to the GitLab website. Check that the local folder is less than 10 mb

Access the local folder "gustavo-salcedo" in GitBash

Write the command "git status" to see the modified files

"git pull" to refresh and load the latest copy from the repository

Put the personal password: xxxxxxxx

Include all files. "Git add ."

Now you have to upload it to the repository (git commit –m "comment: add the web page in html")

Upload with "git push"

Refresh the page in Gitlab and Delete gitlab-ci.yml file (delete)

Create new gitlab-ci.yml file in HTML format

Click on "comming done"

To finish you have to refresh the web page in the browser with "control + update"

2.2 Build my personal site

I have no knowledge of creating web pages. I initially thought of using the Markdown template but my instructors Lola and Álvaro (Sedicupct) recommended that I learn HTML, so I started with the html tutorials:

• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
• https://hostingcanada.org/html-cheat-sheet/#basic-elements
• https://websarrolladores.com/lenguajes/html5/manual-html5/html/estructura-global

For code programming use the ATOM editor . I created my first web page with basic HTML5 commands.

The web design is basic and it would take me too long to get a standard layout, so I took Neil advice and am going to download an HTML template as a starting point for my personal page. https://html5up.net/ . I have observed that Adrian Torres (FabLab León) has used the Phantom template with very good results, so I will follow the same scheme.

I have decided to change ATOM for the BRAKETS editor since it is a simpler editor and allows me to visualize the changes of the web page in real time.

The template is made up of ".html" files. I have modified the index.html to include the assigments for each week.

Use the generic.html file to create the "about me.html", "contact.html", StudentAgreemen and "Finalproject.html".

The file "elements.html" has editing formats like titles, texts, buttons, lists and columns of images that I have used to customize the other html files.

To manage the size and dimensions of my images I will use the Gimp2.8 software .Gimp is used to transform to .jpg format and reduce the storage size.

Open the image file in Gimp, then select (Image - Scale Image). Resize image (Width = 800 px)

To export the image, select (File - Export as ...), lower the image quality between 70-80)