CMPU4063 Lab 4

Lab 4

Part I – Coding a Fish Creek Website website

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

2. i.  a.  When I put my code through the HTML validator it resulted in the following errors: 'stray end tag (div)' x 2, and 'no space between attributes'. There was also a warning with a suggestion to add a language attribute in the head section. These can be seen in figure 1. 

2. i. b..I located the unnecessary end tags and removed them, added and language attribute to declare English as the language, and added a space between the attributes for the email link. I ran it through the validator again, and as seen in Figure 2 it came back clear.

Figure 1: errors with HTML code

Figure 2: no errors in HTML code

2. ii. a. When I put the CSS sheet through the CSS validator it resulted in the following errors: 'value error: font-family parse error', and 'parse error', as seen in Figure 3.

2. ii. b. Looking back at the CSS I had used a colon instead of a semi-colon for one style attribute which was causing a problem. I had also used 'font' instead of 'font-family' for another part. Once I fixed these I ran it through the validator again, and it came back clear, as in Figure 4.

Figure 3: errors with CSS

Figure 4. no errors with CSS

3. Test your code across all browsers

3. a. I tested the code on Microsoft Edge, Chrome, Firefox, and Internet Explorer. The code worked as it was supposed to across all browsers except for Internet Explorer, as seen in Figure 5; the left is correctly formatted and the right is incorrectly displayed on Internet Explorer.

3. b. I was able to fix this by renaming <nav> and <footer> to <div> and applying a class to each of them; .nav and .footer respectively. This made the format in Internet Explorer correct.

Figure 5: correct format vs incorrect format displayed by Internet Explorer

Part II – Web Development Tools

1. Research and describe two extensions/add-ons that could be helpful when developing a website for each of the following browsers:

1. a. Firefox:

1. a .i.Total Validator is an extension for Firefox that can be used to validate HTML and links on a web page, and also takes screenshots of the web page on different browsers, operating systems and devices to show how compatible the website is (Craig, 2019)

1. a. ii. Dummy Lipsum is an extension for Firefox that provides stand-in, meaningless text to fill sections with before the real text is added. This helps the designer to see what the overall layout of the webpage will look like before getting into the details and content of the page (Craig, 2019).

1. b. Chrome:

1. b. i. Sizzy is an extension for Chrome that allows for viewing and testing sites in multiple different viewports. The extension allows for different device types and different OS types, and is useful for making sure that a website will be properly formatted before launching it (Trounce, 2019)

1. b. ii. Checkbot is an extension for Chrome that helps with security, SEO optimisation, and the speed of a site. It will detect common errors present on the site such as broken links and duplicates and provide recommendations on how to improve the site's performance, which is very useful when designing a website (Trounce, 2019).

Part III – Perception & Attention

1. Visual Perception

1. a. i. http://freebrainagegames.com/blink.html

When I clicked play I did not have enough time to read the instructions to the left before the game started, but once I knew what I was supposed to do my timing went from 6-7 seconds to 2-3 seconds.

1. a. ii. http://www.blueorangegames.com/spotit/

I found this one more difficult to play as I kept getting distracted by the timer; I scored 17 one the first try and 25 on the second. I think the size variation between the items made it more difficult to spot a match.

1. b. https://www.scientificpsychic.com/graphics/index.html

The information on this website is applicable to web development as it shows how different patterns, colours, and animations can have an effect on the viewer. Some colour combinations may make it difficult for people to view the information or read text on a webpage. Flashing colours may have a negative effect on people suseptible to seizures, making the site dangerous and unusable. Certain patterns may make the page look distorted and hard to use too. It is important to take into account the viewer when it comes to web design and development, and the viewer may see things that are not there, or not see things that are there, simply due to these factors affecting the visualisation; this can either be something to avoid or take advantage of.

2. Visual memory

http://www.playkidsgames.com/games/patternMemory/patternMemory.htm

2. a. What does this game tell you about yourself?

It tells me that if I keep practicing I can find ways to improve. I had difficulty remembering patterns past level 9, then I realised that if I just stare at the centre of the dots, an immediate after-image on the blank tiles when they turn back around makes it easier to pick the correct ones, by giving me a few more seconds to see where they are.

2. b. Did you use the Gestalt principles during this game?

Yes, I found that I was grouping the dots together based on their location, and then remembering how many groups there were, rather than remembering the dots' locations independently.

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

It helps as it reinforces that Gestalt priciples are important for user experience when designing a web page. It is important that the user can interact easily and understand what they are supposed to see and interact with on a page, such as grouping interactions on a page together with a different colour or box around them to distinguish and separate them from the background or other sections. The design should be clear, easy to engage with, and be able to focus the user's attention to the relevant part of the page affectively.

3. Testing attention & working memory

3. a. How selective was your attention?

While I did count the correct number of passes, I also noticed the gorilla, so my attention was not very selective as I did not only focus on the ball, I was also noticing what was happening around it. This is probably because of eperience working in retail, where I have to focus on one customer and appear to be giving them my full attention, but also remain aware of everything else going on in the shop with staff and other customers.

3. b. How is this relevant to HCI?

Selective attention is relevant to human-computer interaction (HCI) as the design of a website otften dictates where a user will direct their attention. If one part of the page stands out due to a different colour scheme or layout, it will draw focus from the suer and will mean that other arts of the page will lose attention. This is important in web design as it allows the designer to design which information receives the most attention. It is also relevant to HCI as different people have different levels of selective attention, and different underlying factors behind the focus of their selective attention. It is important when designing a webpage to take into account the different reasons people may be visiting it, how easily they will ignore irrelevant information and how to make sure that they can find what they are looking for with minimal effort.

References:

Craig, W. (2019). Top 20 Essential Firefox Add-ons for Web Designers. Available: https://www.webfx.com/blog/web-design/top-20-essential-firefox-add-ons-web-designers/. Last accessed 17/10/2019.

Trounce, D. (2019). Top 10 Chrome Extensions and Tools for Web Designers. Available: https://www.online-tech-tips.com/cool-websites/top-10-chrome-extensions-and-tools-for-web-designers/. Last accessed 17/10/2019.