Week 01

Principles and Practices

First week was about warming up: setting up folders, coding a basic HTML5 website and sketching my final project

First Basic -baby- steps

This is my first time coding HTML5, so I started with a boilerplate code to afterwards reshape it and make it more complex. (Yes, I did learn what a boilerplate is and loved the comparison).

I downloaded and used Brackets as writing pad:


I saw there is a bunch of templates out ther ready to be reshaped and recoded partialle but I will use no template and improve my website as the Fab Lab moves on and as my final project evolves and requires.
So, back to the website: I first tried a basic structure and dive into text hierarchy, text styles, background colors in orther to get a pretty general idea of syntaxys and basic styling :



CSS Styles

I afterwords created a style.css page. Having txt and style in the same page is indeed messy.
I created and will use two css style files, one for the main page -or index- and one for every week.


Lots of tools were used, my favorite one is the universal selector:


Instead fo applying the same font-family -or anything- to every element in the style sheet you can use "*" to represent every element in the style you're coding. In my example: all texts will have Yantramanav as type.

Here are some more tips I found and want to share concerning styles and HTML5 in general:

First left: Do not forget to add ";" at the end of the value when coding css. Several times my style file worked partially and it was because I was missing a ";" at the end of the value.


Images

I still did not dive much into image styling. So far I've only fixed all images width to aprox 600px and center them in the webpage.

About units, WATCH OUT!: I found there's three possible unit types that can be used: pixels, percentae and ems. Pixels is by far the worst coince considering the size wont update accordingly when changing the device. Will try to avoid pixels even though it's the most intuitive unit measurement!

Another error I experienced when using links: if you wish to include a link in a paragraph make sure the link is contained inside the paragraph:



I first tryed this layout which had a non wanted result:



GIT

I dowloaded and used GIT as a version control system.

I created a user and a password in the GitFablab website, then paired my computer with my user in the website using SSHH Keys



I then found my user number in the corresponding fablab and cloned that folder to my computer -I had to clone the whole Fablab folder and not only mine since groups are divided per local Fablabs- En gros: I cloned the whole repository: montevideofablab.


Afterwords, I used "ls" and "cd" git commands to go over my computer folders from the git terminal


Once the setup was complete, what I did next is the procedure I will have to repeat everytime I want to upload my website according to what I worked on locally -in my computer-
There is basically five steps that can be summed up in five commands:

  1. git pull


  2. git status


  3. git add .

  4. git commit .git commit -m "comment"


  5. git push


BEFORE you type any of the former commands you need to make sure you're on your student # folder using the "ls" command. Mine is 355:



Git pull downloads all info from the website to your cloned file. Then git status lets you know what you just did and what's your current status. Git add will of course add all the new information you produced. Git commit is a required explenation of what you're doing, note the explenation goes between inverted commas. Finally Git push will upload all the information you added to the website

WARNING:

Since there's one repository per FabLab and not one per student you will have access to other studient's folder -only the ones that are in your fablab/repository, so: make sure you're in your student # folder whent going through the five steps formerly mentioned

You can check your location on Git using the ls command:


FINAL PROJECT

I have been tossing and turning arround several ideas. Will post only one of the for now since I don't want tol lose focus for next weeks. Chees (I'm quite a fan and the game has changed so much with technology and data processing). I thought about building a cheesboard that can calculate probability of winning in each move and that can show (eg: with light) the possible next moves a player has.

Some chess projects at MIT's cba do create chessboards which definitely help and serves a guide and glimpse of what has been done before.


...to be continued

Go backto the INDEXor to thefollowing WEEK?

Creative Commons License
Please respect license terms. More info here