Principles & Practices; Project Management
I undergo my Fab Academy training at the Fab Lab of Amsterdam, which is part of the "Waag Society" (of which the logo can be seen as the icon of each of my sites pages) and where I met the rest of my work group before the first global lecture.
[All the tools, software and tutorials are explained in depth as a separate paragraph at the end of the page]
Our first lecture with Neil Gershenfeld was split in two parts: In the first half he introduced us to the driving concepts and ideology behind the Fab Academy and Fab Labs. In the second half he give us an overview and brief explanation of the tools for the completion of our (first) weekly assignment.
The assignments for the first week were:
I. Work through a git tutorial
II. Build a personal site in the class archive describing you and your final project
III. Plan and sketch a potential final project
Highlighted necessary tools:
>> Version control: Git & Git Lab
>> Web development: require a word processor
The day following the global lecture my workgroup received a local lecture by Ivo de Kler. He gave us an introduction to basic HTML & CSS using Sublime Text, a word processor. I had previously worked on building websites, having learned from sites like Codecademy, W3Schools, and a myriad of YouTube videos. I decided to settle for TextWrangler as word processor that I had been using for a longer period of time. He also taught us how to use Git, which was extremely important for me, as I had never worked with it. At first it was daunting; it's unusual to work through the Terminal, so I attempted to download and use Git Kraken, which is a Git GUI (Graphical User Interface) however I gave up on the idea pretty quickly seeing it was more complicated to set up then it was to learn how to use Git from the terminal. I also worked through the first section of the CodeCadmey tutorial on Git; this was very useful to understand the logic behind Git's function, however I did not complete it due to the fact it was either redundant with what Ivo had already thought us or it was outside the scope of what I need Git for (If I ever need more advanced use of Git I shall go back to it).
Git is the industry-standard version control for Web Developers.
A Git project is composed of three parts:
I. Working directory: where the work is done, created, edited, deleted and organized.
II. Staging area: where you list changes made and added files to working directory.
III. Repository: where Git permanently stores and saves the changes as different versions.
The repository in our case is managed by the Fab Lab of Amsterdam, which in turn is managed by a higher Fab Academy repository (I believe in Portugal for us). The access to the repository was complex, this process was mostly guided by Ivo during our lecture (fortunately, as I assume it would have taken a great deal of research to mange on my own).
The basics of Git can be distilled in 8 basic commands:
=> git status: inspects the contents of the working directory & staging area
=> git add: add files from the working directory to the staging area, so that changes are tracked
=> git diff: shows the difference between files the current working directory and the staging area
=> git commit: permanently stores file changes from the staging area in repository
=> git log: shows a list of all previous commits
=> git push: sends your changes to the global repository (Git Lab)
=> git pull: updates your saved repository with the most recent changes from others.
=> git init: create new Git Repository (useless for the Fab Academy but necessary outside the course)
Creating the site proved to be a challenge due to my obsession over form, taking me a while to get exactly the site I wanted and changing the design several times. However the most important element behind the creation of my sight was Dreamweaver. It made designing and visualizing my code easier, permitting me to view the results of changes directly, as well as apply them from the editor GUI. I also used thought of using Bootstrap as a CSS style sheet, however I opted for a simple pre-existing style sheet since Bootstrap was overwhelming. I then proceeded to build on that aforementioned template, which was lots of work, it required me adding several CSS classes as well as tweaking some of the already existing ones to fit my taste, therefore now the style sheet are rather different from the originals. I also added other outside CSS and HTML segments from the W3School examples. I built the sight with simplicity in mind: the logo of the Waag Society can be seen as my icon on the title of the page. The header of my page pridefully recites a phrase from the book "Artificial Intelligence a Modern Approach" 3rd edition by Russell & Norvig, which may be considered the fundamental text for anyone learning about Artificial Intelligence. Since my project will hopefully be robotics oriented this phrase holds a double meaning; the first about Machine Learning and second about the value of education, reflecting the goal of the Fab Academy. The "about me" page is integrated with my home page and tiny modules below the main image distribute the weeks, each linked to weeks' page. At the bottom of the page there is a button linking to the page of my final project.
The assignment regarding the final project is completed on the Final Project page.
[13 March 2016] => I have updated my site from the original; I present a home page with only the aforementioned quote from "Artificial Intelligence: A Modern Approach" and two links to my old "about me" (of which I changed the background and removed the quote and red header) and my final project, which remained mostly unchanged.
[29 March 2016] => Adding links to Niels lectures to "Our Nth Lecture" headers at the top of the pages. Plan to improve Final Project section
Explanation of my tools and why I use them:
>> Operating system: I use OS X, specifically El Captain. However I have access to Windows 7 Ultimate and Elementary OS Freya (a Linux distro) to juggle programs with different compatibilities.
>> Text Wrangler: Its lightweight, simple to install and use, its free and highly customizable. It can also be used with a great deal of programming languages. It does not have all the features that make it easier to code in sublime text, but sublime text is not free.
>> Codecademy: The vast variety of thought languages (HTML, CSS, Javascript, PHP, Ruby,etc.) makes it an invaluable resource to create a good interactive website, since it deals with both front and back end development, however since is interactive, it can be a bit slow for anyone who picks up coding quickly or knows how to code with more complex languages already, such as myself.
>> W3Schools: This is the holy grail of HTML, CSS and JavaScript problem solving. Listing virtually all html tags and how to use them, as well as examples of important websites features such as buttons and sliders, making designing your website a simple task. The speed and depth of what you learn is up reader and, making it my website of choice, and where I learned to do about 60% of my website design skills.
>>Google Docs & YouTube: I will use Google Docs and YouTube as <iframes> on my site as a means to add photos, pictures and videos which are not of high importance but are nice to show the details of my work or link to external videos which I watched or that are relevant to the current week. I am aware that Neil wants us to upload all of our work, but I will leave that to only the most essential files, since that will prevent me from going over my weekly MB limit, and also looks great.
>>Dreamweaver: Is a word processor from Adobe, it is not free however I am currently taking advantage of its.30-day trial. Its fantastic because it lets you see the result of your changes instantaneously and makes designing your website more graphical. However a solid coding background is required for editing the code to your liking and don't want to be stuck with boring pre-built templates, since most of the editor GUI is only useful to add text in paragraphs.