Web and User Interface - Lab 4

Part I – Coding a Fish Creek Website

1. Alter your Fish Creek code (from previous labs) to use the following: 

a. Classes and ids 

b. Centring layers 

c. The position attribute 

d. The float attribute

(Completed in Notepad++)

2. Test your code with the HTML validator (http://validator.w3.org/ ) and the CSS validator (http://jigsaw.w3.org/css-validator/ ). 

a. What are the problems that are highlighted? 

HTML Validator (I had 4 x HTML pages on my Fish Creek website):

index.html = I got 6 errors and a warning. I was advised in the 'warning' to consider adding a 'lang' attribute to the html to declare what language the page is in. Most of the Errors were the same as each other and consisted of the message telling me that "Element dt not allowed as child of element body in this context". 

python.html = I got 1 error and a warning. They were the same error and warning as above mentioned in index.html. 

askthevet.html = I got 1 error and a warning. They were the same error and warning as above mentioned in index.html. 

services.html = I got 1 error and a warning. They were the same error and warning as above mentioned in index.html. 

CSS Validator (I had 1 x CSS page on my Fish Creek website):

styles.css = Four errors were found with my code. Value Error : font-size Parse Error font-size

All four of the errors were about parse errors. 

b. Were you able to fix them?

I was able to fix the errors in the HTML parts but the 'Parse errors' in the styles.css file seemed to be inconsequential so I left them in. 

3. Test your code across at least three browsers:

I tried my code on Google Chrome, Microsoft Edge and Safari. 

a. Were there any problems? 

I didn't encounter any problems across the three browsers.

b. If so, were you able to fix them?

There were thankfully no problems to fix. 

4. Try the following CSS game: http://flukeout.github.io/ 

a. What level did you get to? 

Level 8. 

b. What did you learn from the game??

It reminded me that 

. = class, and 

# = a unique id

Part II – Web Development Tools

1. Look at the “Developer Tools” in the Chrome Browser and answer the following: 

a. What does your page look like from a mobile perspective? 

The text looks very small in the mobile perspective, but otherwise everything is as expected. It looks a lot better on a desktop version though. 

b. What will you use this tool for when developing a website?

It's very useful for checking things easily, and switching between desktop and mobile versions. It's quite complicated however and could probably take some time to get used to. 'Computed', 'Layout' and 'Event Listeners' are quite prominent headings, but I'm not sure what they do exactly. 

2. Research and describe one other extension/add-on that could be helpful when developing a website for each of the following browsers: 

Extensions are a type of add-on that allow developers to increase or change the functionality of a browser type. After any extension is made, you need to publish it so that others can use it too. 

a. Firefox 

I found a description online of how to make an extension for Firefox that adds a red border to any pages loaded from "mozilla.org" or any of its subdomains. It contains a key that tells Firefox to load a script into Web pages whose URL matches a specific pattern. For the purposes of this extension, they're asking Firefox to load a script called borderify.js into all HTTP or HTTPS pages served from "mozilla.org" or any of its subdomains. This script is the one that adds the red border for the purposes of identifying which pages have come from where. 

b. Chrome

One of the best extensions a browser can have is an optional ad-blocker, but there are many of these in existence. Extensions can appear in different ways on Chrome. Some perform invisibly in the background and operate automatically, whereas others must be initiated by right-clicking a page and then choosing the extension name from a menu. If I were to describe an extension that would be helpful for users of Chrome I could suggest a little calculator that could be toggled from the favourites bar for example. This could be useful for accountants who need a quick calculator at hand always. 

Part III – Perception, Attention & Memory 

3. Visual perception (attention and memory) 

a. Play the following games - https://www.freebrainagegames.com/ 

i. Comment on how you did overall. 

I got to Level 9 and a brain age of 25 on the ball game. At the end of the second game my brain-age was increased to 54. After the anagram stage my brain-age went back down to 20. I did very badly in the the 'reactions pounce' stage where you had to click the flying shapes. In the end my brain age was calibrated at 34 and I am 31. 

ii. Comment on what strategies you used to get the best score you could.

I tried to be as agile as I could with my mouse to click the items at the right time. The 'reactions pounce' stage was too difficult though, and probably even difficult for a teenager who play video games. I'm not much of a gamer myself and never have been so my hand-eye coordination is probably not the best compared to others. The memory part of the game was easy enough until 8 balls began to be introduced. I soon lost count after after about 5 steps. 

4. Visual memory – play the following game: https://www.proprofs.com/games/pattern-memory/ 

i. Comment on how you did. 

I got to Level 15/20 and a score of 23,200. 

ii. Did you use the Gestalt principles (https://www.interactiondesign.org/literature/topics/gestalt-principles) during this game? 

I'm pretty sure I must have, yes. I would first try to remember where the individual tiles had appeared because I thought it would be easier to remember by pattern-memory where the larger clumps had been. As the game got harder though, this proved to be a guessing game by the time I got to where the larger clumps had been. 

iii. How can this exercise help you as an interaction designer?

As humans, we dislike uncertainty so when we are designing item order on a page, we need to cluster certain related items clearly to one area, and distinguish them from other unrelated items. A cardinal rule is to never confuse or delay users. Make everything understandable from a glance. 

5. Testing attention & working memory – do the following activity: http://www.sharpbrains.com/blog/2006/09/28/attention-and-working-memory/ 

i. How selective was your attention? 

I had seen this video before so I was expecting the gorilla. It's a good idea though. I seem to recall the first time I watched it I hadn't noticed the gorilla until the big reveal at the end. 

ii. How is this relevant to HCI?

This is relevant in that it shows just how consumed we can become by one task and can get lost to the bigger picture. Any website we create should never contain an element so baffling or confusing that it distracts the user from the goal they are trying to achieve by visiting your website. 

The End