Sunday, 11 October 2015

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 

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

_________________________________________________________________________________

No comments:

Post a Comment