Lab 4

Part II - Coding a Fish Creek website

2.

The first error in my HTML code was: Named character reference was not terminated by a semicolon

This was due to me forgetting to put a semi-colon after using the space command, &nbsp, so I just added in these semi-colons which fixed the error.

The next error which occurred lots of times: Element br not allowed as child of element dl in this context

 This was due to me forgetting to close my <dl> tag

The last error remaining then was: Stray end tag body.

However I couldn't figure out the source of this after much trial and error.

In my CSS I just had a single parse error, due to having 2 closing braces instead of 1 on one of my lines.

3.

My website seems to appear the exact same across IE, Firefox and Chrome. Perhaps this is because I've been testing it in IE all along, which seems to be the most error prone.
 

Part II - Web Development Tools
Researching extensions/add-ons

Firefox
 - Firebug: This seems like an extremely useful add-on, which provides a text editor which allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. The layout tab in a window next to your html code looks especially useful.

- Web Developer: This places an extra toolbar on your browser with lots of options for web developers, such as being able to view and edit the CSS of a page within just one click. One very useful tool I found was outline block level elements which separates out all divs etc on the page for an easier look at the structure of the page from a development point of view.

Chrome
- DevTools: This is not actually an extension, but a set of tools built into Chrome which can be accessed in tools in the Chrome menu. This seems to be a pretty comprehensive set of tools for web development for viewing and editing HTML and CSS, debugging, and improving network performance.

- HTML Instant: This is a HTML editior with a split screen featuring the HTML code you are editing on the left, and the results of this code on the right. The great thing about this though is that the results of your code update in real time on the right tab so you can see the results of your code instantly. It also supports CSS and images from any website. I think i'll be using this extension quite a lot, as it seems the most intuitive to a beginner of all the ones I have looked at.

Part III - Perception & Attention

2. In the first link here, I found it quite tough to see the hidden shapes in a few of the images. I think this might indicate that having cluttered visuals on a webpage can be quite confusing to the human eye and make it hard to distinguish different parts of the website.

In the set of links related to Closure, I found that I was able to perceive quite quickly and easily what each image was even with lots of missing data. This shows that the human brain is quite perceptive of images even when not presented with the whole picture. This is perhaps why simple, flat UI design works so well, that even when presented with simplistic images with no textual information of what they represent, our brains are able to almost instantly figure out what the logo represents a lot of the time.


3. This game tells me that it is easy for the brain to memorise a pattern, rather than try other methods to try to memorise where each individual dot is. I got further in the game by just observing the entire pattern rather than trying to remember the positions of the dots line by line.
This exercise demonstrates what users are most perceptive of when it comes to viewing an image and so would help as a basic guideline of interaction design.


4. I had seen this video before, but the first time I was completely oblivious of the gorilla passing across the screen. I think that this shows when designing for HCI, you want the users focus to be on one thing at a time, as we find it hard to focus on more than one.