LAB 4

PART I

1)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?

There was no error in the css.

The HTML was giving out about the uses of <br>, that was used to go to the next line

b) Were you able to fix them?

Unfortunately, I was unable to fix this error. I tried using <p>, but it just create a space between the text as if it was starting a new paragraph.

2) Test your code across all browsers.

a) Were there any problem? Yes, My internet explorer was unable to display my image logo

b) If so, were you able to fix them? I enabled the block content and it worked.

PART II

1) a) Firefox Add-on

i) Firebug

Firebug is a well known free and open source web design powerful add-on tools, which integrates with firefox to facilitates inspecting, editing, live debugging and monitoring of a websites CSS, HTML, DOM, XHR, and JavaScript. It helps explore Document Object Model (DOM) to learn about the structure of the web page, it can help figure out what CSS styles affect certain elements, it can also help detecting errors quickly and monitor network activity. Firebug enables developer to play around with the HTML and CSS elements of the page in real-time. It is a useful tool for web security testing and web page performance analysis.

ii) SEO Doctor

Search engine optimization (SEO) Doctor is a free firefox add-on tools to audit a web page's onpage SEO optimization. The tool provides web developer with a score between 0 and 100% on how search engine friendly their page is based on the information in the Google Webmaster guidelines. The tool based the score on the Page Rank Flow, Web Analytics, Meta Description, Number of links, H2 Tag, H1 Tag, Page Indexable, SEO Friendly URLs, ALT Image Tag, Loading Time, Title Tag. It also highlights areas in the webpage that can help users optimize their web sites better e.g it can detects and warn user about pages that are not indexable by search engine using comprehensive tools based on SEO methodology.

b) Chrome Add -on

i) User-Agent Switcher

User-Agent Switcher is an extension for chrome which allows developers to change chrome's user agent to multiple browser such as, Internet Explorer 6 to 9, Firefox, Opera and safari. It is most useful when building a site that needs to work in multiple browsers, it gives a quick glance on how it will appear on a different platform.

ii) Web Developer

The Web Developer add-on is a powerful chrome extension which enables user to view and edit css, enable or disable popups, display image file sizes and clear session cookies. It also provides an extended functionality for filling or testing big forms, window resizer, validator etc. The wed developer tools aims to provide every piece of information users need from an existing website, provide efficient track down layout issues, set javasccript breakpoint and get insights for code optimization. The characteristics include;

* Inspecting the DOM and styles; Viewing a heading element in the DOM

* Evaluate some commands in the JavaScript Console.

* Debugging JavaScript

* Improving network performance

* Audits; The Audit panel can analyse a page responsiveness as it loads.

PART III – Perception & Attention

2) Visual perception           

a) Play the following two games and comment on how you did:

http://www.freebrainagegames.com/games/visual_blink.php

http://www.blueorangegames.com/spotit/  12

I did really terrible in the 2 games, this just prove how human can sometimes perceive images by not looking at it right. I was busy trying to match the images in my head with the one displayed on the screen. The way the images were laid out even made it harder to captured.

b) Visit the following link and comment on its applicability to web development:

http://www.scientificpsychic.com/graphics/index.html

In the link it shows that the eyes usually altered perception because the eyes combine adjacent colors. Human eyes digest and complete unfinished image, this could be due to trying to relate with an object we have seen in the past.

3)         Visual memory – play the following game: http://www.playkidsgames.com/games/patternMemory/patternMemory.htm

a)         What does this game tell you about yourself?

The games tells me that my visual memory is limited when trying to recognise a group of objects, I couln't memorise more positions without forgetting the old ones. My eyes were only focusing at one point at a time, I couldn't clearly see what was on the right or left corner of the eyes. This game has also thought me memory recognition depends on the human brain ability to captivate simple visual cues.

b)         Did you use the Gestalt principles during this game?

The proximity principle was mostly used, this applied when remebering the distances between objects. When they were placed closed to each other, they were perceived as a group rather than an individual objects. Similarity principle was also used as all objects looks the same and were perceived as a group, they occured in the shape. I also used continuity principle, where I was often looking to join some of the dots together into some kind of shape that is easy to remember.

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

This excercise has taught me, how we can apply Gestalt Principles on our website to make it more interaction, memorable and familiar to users. By applying this principle, could allow the website to appear more accessible to a wide variety of user types, and allows them to access information in the easiest way possible by giving it a clear structure.

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

a) How selective was your attention?

My attention was reasonable selective, I was too focused on the people wearing white t-shirts passing the ball around. I also anticipated the apperance of the gorrilla and managed to counts the passes 15 times.

b) How is this relevant to HCI?

Human-Computer Interface can be described as the point of communication between the human user and the computer. The excercise has prostrate how easily human can be distracted from achieving tasks, Developer should minimize the level of distractions on their website so not to overload users.

_________________________________________________________________________________