The assigngment for this week had two parts. First we had to plan and sketch a potential final project. Then we needed to build a personal site in the class archive describing ourselves and our final project. We were advised to look examples in an archive from a past course. We also needed to try, but not necessarily master, several web development software tools. This included HTML editors, picture file size compression tools, and Mercurial to upload the results for the world to see.
Before the first Fab Academy virtual class meeting, I needed to install and test video conferencing software on my computer so that I could participate. I decided to use a free app called Cisco Jabber - http://www.ciscojabbervideo.com. I first installed it on my Windows 7 desktop computer. This computer doesn't have a camera but I just planned to watch the first week anyways. The software appeared to install fine but when I tested it I found I was not able to receive any video or audio for the MIT MCU. I have been randomly receiving Cisco Codec pop-up windows on my computer ever since.
So I decided to install Cisco Jabber on my laptop computer. It installed easily and worked without problems. As a bonus, this laptop has a built in web cam so I can send and receive video. I also set up a Logitech wireless H600 for the audio. Now all I have to do is remember to follow the rules of group video conferencing etiquette.
Fab Academy uses a website version control software called Mercurial. This software allows the hundred or more students and instructors involved with Fab academy to edit the same global archive. This software keeps track of who makes changes to the archive and makes backups of all changes, etc..
I again started by installing Mercurial on my Windows 7 desktop computer. I choose to install TortoiseHg – http://tortoisehg.bitbucket.org which is GUI interface for Mercurial - http://mercurial.selenic.com/downloads/ . That way I could use the GUI or the command prompt interfaces. After installing the software I had to reboot before the Mercurial command prompts would work. I read the suggested Mercurial tutorials and looked for information on the windows versions. My problem was related to the .ssh keys. There seemed to be many different versions and each was configured differently.
I decided to stop trying to fight Fab “standards” and install Ubuntu. I knew that I would need it soon anyways. Since I was already using the laptop for more than a year, I first had to spend a couple of hours backing up files and making an image of the hard drive. If something went wrong while repartitioning the hard drive or installing Ubuntu, I could not risk losing the information that was already on the laptop. I installed a dual boot system with both 64-bit Windows 7 and 64-bit Ubuntu v12.04 LTS. The OS installation went smoothly.
I followed Anna Kaziunas France’s excellent tutorial on Installing Mercurial on Ubuntu found at http://fabacademy.org/archives/2014/tutorials/mercurial_install_ubuntu.html. The only problems I had with going through the tutorial was in Step 4: Setting the port it is ambiguous if the config file should go in the ~/.ssh directory or the ~/.ssh/keys directory. I think it works in either. However, in Step 5: Clone the archive I received the error “Failed to add the host to the list of known hosts.” Francisco suggested changing the permissions on the ~/.ssh directory with the command sudo chmod 777 -R ~/.ssh/ which solved the problem.
The next day I helped Chris install Mercurial on a Mac OSX computer. We had the same problems that I encountered with Ubuntu when following Anna’s Installing Mercurial Mac tutorial. I also found an additional typo in Step 3: Permissions for the Private Key -- The commands sudo chmod 600 ~/.ssh/as220Keys/academy and sudo chmod 644 ~/.ssh/as220Keys/academy.pub should be sudo chmod 600 ~/.ssh/keys/academy and sudo chmod 644 ~/.ssh/keys/academy.pub
I tested Mercurial by making a small change to my webpage index.html file and going through the basic workflow:
Following the basic rules:
During our first lecture, Neil talked briefly about project management. It didn't take more than a couple of long days to be convinced that I will not have the time to do everything that I want/need to do this semester. I will need to firmly prioritize my goals and come back to work on things only if I get the opportunity. For example, I really wanted to learn to do things using both Windows and Ubuntu. I want to have the flexibility and portability to use either. However, time will not permit this so I will focus on Ubuntu.
Due to time constraints, I also have to constantly remind myself to “Keep it simple, stupid.” For example, I could make an elaborate website, but I would rather focus my time each week on the assignments and the content.
One of our assignments for the first week was to create a website to use to document and share our ongoing Fab Academy progress and observations. I started out as suggested by looking at webpages that students created for a previous MAS.863/4.140 How To Make (almost) Anything course. My first observation was that these students were talented, creative, imaginative, artistic, and had far more time to spend making websites than I did. Looking at the HTML source code for these example pages it surprised me that even some of the basic looking pages used advanced java, scripts, etc. My guess is that many of the students used apps like Dreamweaver to create their websites.
Once I had an idea what I wanted my website to look like, I started experimented with several suggested packages for website editing and development. I looked at LibreOffice, SeaMonkey, Dreamweaver, CorelDraw, Microsoft Word, Google Chrome, and FireFox. I have created websites in the past using GUI development software. I decided to manually use HTML codes to program my webpages for Fab Academy. I like the ability to create/edit web entries anywhere using any operating system and not needing special software.
I spent a lot of time reverse engineering examples and by trial-and-error. The best resource I found for information on HTML and CSS is http://www.w3schools.com/html/. I enter and edit the HTML code using a simple plain text editor like Notepad. Since I use relative link references instead of absolute references, I can test my code locally using Internet Explorer, Google Chrome, and Firefox. In several cases, during my research I would find that the HTML code approach I was taking was replaced by CCS alternative method. So I implemented those changes as possible to try to make the code as compatible as possible.
HTML code (on the left) and resulting webpage (on the right)
Another thing that I spent way more time doing this week than I expected to was converting pictures for use on the web. To reduce bandwidth and storage use, we need to use reasonable size picture files. This means cropping, converting, resampling, and compressing pictures to reduce size, resolution, color depth, etc.. I researched and experimented with several software applications in both Ubuntu and Windows environments. I am currently using a commercial product called Corel Photo-Paint because it is readily available on several computers I use. If I do not need to crop the picture, I have several other options.
I decided on a default picture resolution of 500 x 375 with medium compression. This seems to give a nice balance of small file size, decent picture size, and picture quality. In some cases, this does not work. For example, with the html screen capture picture, I had to change the settings since as you can see below, the default settings made the html code text unreadable.
