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.

_________________________________________________________________________________

LAB 3

Part I:

1. What do the attributes, colspan and rowspan do when using tables? Provide examples.

Colspan  attributes defines the number of columns a cell should span.

<table border="1">

 <tr>

    <td colspan=“2”>
Birthday List</td>

</tr>

  <tr>

    <td>James</td>

    <td>11/08</td>

  </tr>

  <tr>

    <td>Karen</td>

    <td>4/17</td>

 </tr>

</table>

Rowspan attribute specifies the number of rows a cell should span.

<table border="1">

  <tr>

    <td rowspan=“2>

      <img src=“cake.gif”  alt=“cake”  height=“100” width=“100” /></td>

    <td>James</td>

  </tr>

  <tr>

     <td>11/08</td>

  </tr>

</table>

2. Do the exercises on Slide 37 of “Lecture 3 – Page Layout”. This code does not need to go in your blog.

3) How did you find coding tables? Outline positive or negative observations, 
providing examples. ?

Positive Observation: I observed coding table is an easy way to layout information on a page.

Negative Observation: One negative observation I notice was coding tables makes the size layout of the page really large. There was also a lot of repetitive code

<!DOCTYPE html> 

<html>

<head>

<meta charset="UTF-8">

<title>Table</title>

<body> 

<table style="width:100%">

  <tr>

    <td>Laide</td>

    <td>Yusuf</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Benson</td>

    <td>24</td>

  </tr>

</table>

</body>

</html>

Cognition

4) Browse some South African news websites (observing content, layout, colour, responsiveness …): http://www.onlinenewspapers.com/sa.htm . State four features that these websites have in common.

The below 4 sites was compared and the feature are listed out below;

·         The responsive time is very slow; User expects a normal webpage to load in 3 seconds or less

·         The 4 websites are not user friendly; There is no information available on it.

·         The contents are displayed in the same way

·         The page layouts is exactly same except color different.

http://www.africaonlinenews.com/

http://www.afronews24.com/

http://ww5.afrinewsnet.com/?gkwrf=http%3A%2F%2Fwww.onlinenewspapers.com%2Fsa.htm

http://africafocus.net/

5) Browse some USA news websites (observing content, layout, colour, responsiveness …): http://www.onlinenewspapers.com/Top50/Top50-CurrentUS.htm. State four features that these websites have in common.

·         The responsive time is very slow; User expects a normal webpage to load in 3 seconds or less

·         The 4 websites are not user friendly; too much information.

·         The contents displayed within the body is too long.

·         Difficult to navigate through

http://www.washingtontimes.com/

http://nypost.com/

http://www.wsj.com/news/us

6) How do South African news websites compare to USA news websites. Are there any major differences?

·         South African website is easy to navigate through compare to USA

·         USA website have too many information.

7) “Flat UI Design”, 

a)    What is the meaning of flat design? What website uses flat design?

Flat design is a type of minimalist design that emphasizes usability. Consumer audience has grown more accustomed to the world of technology. Users want simplicity and order in their digital lives. Flat design undoubtedly provides a more pleasant user experience.

Flat Design is commonly see in Mobile devices nowadays. Website that uses flat design include;

http://www.google.com/landing/now/ ; This website uses a card-like pop-up system to display information.

http://cienneny.com/ ;

http://dansmonsac.ca/

http://bellroy.com/

b)    What is the meaning of skeuomorphism? What website uses skeumorphism?

Skeuomorphism refers to a design principle in which design cues are taken from the physical world. Skeuomorphism ultimately curbed accessibility, creativity, and functionality. The purpose of the skeuomorphic aesthetic is to present the user with as much familiarity as possible in an attempt to heighten realism. The visual impression is that of a physical object, including perspective and the notion of movement.

Websites using skeuomorphism

Web 1.0 and Web 2.0 uses skeuomorphism before flat design was introduced.

Skeuomorphism websites gives users the impression that they know how these things work considering the experience with their analogues from real life. E.g

http://www.ideator.ca/

http://handytesten.usedtobe.no/

http://sickdesigner.com/

http://www.lamaddalena.pl/index-high.html

_________________________________________________________________________________

LAB 2

Part I: Uses of meta tags

1)         <meta charset="UTF-8">

character_set; Specifies the character encoding for the HTML document

2)         <meta name="keywords" content="HTML, CSS, JavaScript, Laide Yusuf, Blog">

Keyword; The above code define keywords for search engines:

3) <meta name="author" content="Laide Yusuf">

            The code define the author of a page

4)         <meta name="description" content="Laide Yusuf Blog">

The above code define the description on a webpage.

Part III: Search Engine Optimisation (SEO):

Based on the articles I have read, the below point will be employed when designing my websites

1) Make your site easier to navigate; Page navigation is a main thing we should consider when developing a web page, this is one of the first thing visitors notice. Easy navigation can help visitors quickly find the contents they want. The below points will be deployed when building my sites.

* Plan the navigation based on the website homepage

* Allow the possibility of a part of the URL being removed.

* Prepare two sitemaps; 1 for users and 1 for search engines.

                                                   

2) Page Loading time; Fast sites response can increase user satisfaction and can also improve the overall quality of the website. Slow loading time can have a slight impact on the page ranking, it can also affects the amounts of visitors that visits the webpage. I will deploy the below tips to boost the page speed.

* Optimize Database

* Test using Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights/)

* Use of Cache when available

* Use of Content Distribution Network to distribute the load of delivering content.

3) Use of Meta Description; uses of clear description meta tags can give a site an advantage in search engine results pages. It can also increase the click-through rates. Google might also use them as a snippets for a webpage. Below points will be considered when creating a website.

* metadescription should be less than 156 characters.

* I will see it as a conversion factor, which might help in getting a searchers attention

4) The structure of URLs; The URL of a page is an important factor to be considered when building a web page. Using a short URL can increase the search ranking positions, it can also benefit of serving as a link from a visitor forum, blogs or other online venues. I will consider the below points when creating a webpage

* Have a semantically correct URL

* Exclude dynamic parameters when possible e.g (id)

* Try to match the URL to titles of the page


_________________________________________________________________________________

LAB 1

PART I

Useful Links:

1) Blog is laide.yusuf.blogspot.com

2) Twitter account is @cutielaide

3) Articles Observations:

a. Turning Design Ideas into Reality: Brainstorming, Wireframing, Prototyping.

•           According to Brad Frost, "you may find the seed of an idea in the least likely of places" in this regard even though Wireframing can be a tidiuos work, it is proven that it does not require any special tools and a non-designer can be part of a team providing there is a strong leader that can coordinate the team.

•           The article highlighted that "the goal of a prototype is to simulate the interaction between a user and the interface" meaning prototyping is a great way to demonstrate a design to the end user. UI elements such as clickable buttons simulates interaction and ensure user have understanding of how the design works.

b. 10 Common Web Developer Mistakes.

•           One of the mistakes that was highlighted in this article is about testing with different browser. J. Michael Palermo IV explains that it is not practical to test your site in every browser but it is a good approach to have a regular interval of checking on your sites will appear.

•           The article also suggests, developer should avoid uses of old elements when other current / modern Hyperlink Text Markup Language (HTML) would be more appropriate. By implementing the modern HTML, developer can minimize the error level, and can also improve the possibility of sites being more compatible across multiple browsers and platforms.

4) a) Term/Technology from Article 1: Wireframing

Twitter Search Results:

i) Wireframe generalized mockup that represents the layouts of a website. Speckyboy discuss some points on what should be considered and taken into consideration that will make wireframing worth it:

·         Don’t be clingy, keep an opened mind

·         Gauge your time

·         Find your own flow

·         Your mind is a terrible thing to waste

v  Wireframing.(2014) [Online] Available from https://twitter.com/wireframing

v  Speckyboy (2014) To Wireframe or Not to Wireframe? [Online] Available from http://speckyboy.com/2014/01/29/wireframe-wireframe/

ii) Term/Technology from Article 2: jQuery

jQuery; According to jQuerry.com, It’s a fast, cross-platform and feature  rich java script library. jQuery simplifies java script programming that is designed for HTML scripting. It works across multiple browser with a combination of versatility and extensibility. It is easy to learn, good for creating animation and event handling.

v  JQuery [Online] Available from https://twitter.com/jquery

v  jQuery – What is jQuery? [Online] Available from http://jquery.com/

4) b) Follow three people that could provide you with information during this module. Who are they? Why did you choose them?

·         @Lockeddown_ : John Locke is a Web Consultant and developer from Sacramento, CA. I choose to follow him due to his insights view on the golden rule for developing a good web sites.

·         @_ercicelliott: Eric is a wed developer  and I choose to follow him because of his perspectives on javascript in html.

·         @loige: Luciano Mammino is a CTO web developer and I choose to follow him on his perspectives on php and nodejs.

PART III 

1) Analyze the following websites with regard to a user with a visual impairment.

·         https://www.blogger.com/ ;

Blogger.com; Blogger enchant some positive aspects for visually impaired users. Users who are in this category can benefits from the good contrasting color that was used on this webpage with the background colour being white and text in black. Although user with low vision may need the assistance of a hardware or software magnifier to enlarge some text. The keyboard shortcuts (e.g Tab Button) was also possessed on the webpage whereby a user can use the tab key to navigate to the item that needs to be selected, and then presses the Enter key which eliminates the need of moving the mouse cursor to click.

·         http://edition.cnn.com/

CNN.com; Cnn avoided uses of very thin fonts and made use of the bold text which added readability on low-contrast items. The clear fonts used with the good contrasting color makes the content easy to read and can improve accessibility features. However the way the images were displayed next to each other might cause visual confusion to a visual impairment user.

·         http://www.amazon.co.uk/

Amazon.co.uk; the website consists few positives: Like the use of the colors contrast; White writing on black background and black writing on white background. The pictured used are really cleared but can be that they are cluttered and can cause mix-up. The use of scrolling images and writing can also be a negative.

4) Analyse the CNN and AMAZON websites using this validator 

http://validator.w3.org/mobile/

a) How mobile friendly are they? Amazon was rated 36% while CNN was at 0%. In my opinion, neither of the 2 sites are 100% mobile friendly.

b) What are the problems? The CSS style sheet is not syntactically valid CSS, the length property uses an absolute unit, either the height or width attribute is missing.

c) Could you find a website that rates higher than 60%? http://www.aib.ie/. AIB rates 66%.

5) Analyse the the CNN and AMAZON websites using this tool http://wave.webaim.org/

a) How accessible are they? Both websites contains lots of errors, however Amazon generates less error compare to CNN.

b) What are the problems? Missing field sets, long alternative text, missing first level heading.

c) Are there similar problems in both? They both have contrast error, missing alternative text, document language missing, missing from label etc

_________________________________________________________________________________