David Boyle - Lab 4

David Boyle
D16124360

Lab 4
Part One:
Q2)
a) Problems Highlighted:

Index Page:

1. Meta tags are in the wrong place.
2. Height and Width were not allowed in the footer at that point.
3. Stray end tag 'head'.
4. Start tag 'body' seen but an element of the same type already open.
5. No space between attributes.
6. Missing quotations.
7. Stray start tag.

Services page:

1. Stray end tag 'head'.
2. Start tag 'body' seen but an element of the same type already open.
3. Text not allowed in element 'ul' in this context.

CSS Stylesheet:

1. Value Error : font-weight "bold" is not a font-weight value : "bold"
2. Value Error : text-decoration "underline" is not a color value : "underline"

b) Could you fix them:

For the index html, I was able to fix all problems except for 3 and 4.

For the service page, I was unable to fix the errors.

I was able to fix all the errors on the css stylesheet.

Q3)

I only have Google Chrome and Safari on my laptop but when I tested the code across both browsers, it worked fine on each occasion.

Part 2:
1) Web Development Tools:
a: Firefox
(i) Firebug - Firebug has a wide range of development tools making it one of the most used browser add ons for Firefox. It is also more user friendly than most web developer tools.
(ii) Web Developer - Web Developer is a useful add-on for Firefox because it has a lot of features that help make your web development easier and quicker.

b: Google Chrome
(i) CSSViewer - CSSViewer is a CSS property viewer that provides the essential CSS information that you need.
(ii)Ghostery - Ghostery is a Google Chrome add-on that can detect pixels, trackers, and all other embedded pieces of information on a website.

Part 3:
2) Visual Perception:
(i) In the first game I received a score of 1064, which gave me a brain age of 20.

(ii)In the second game I received a score of 15

(iii)This website would come in useful when developing a website because it shows that visual perception is clearly a significant factor in the usability of a website. You can see that the similarity and proximity of certain images and colours can have a profound effect on how the user might view a webpage, and ultimately how much a user will want to stay on that webpage.

3) Visual Memory:
i) I realise that I can remember the dots that are close to each other and in a similar pattern much easier than those that are spread out.

ii) I used the principles of similarity and proximity when playing this game in order to remember the groupings and patterns of the dots

iii) This exercise shows me that similarity and proximity is very important in design. When you have similar things grouped together, the user will find it easier to use the page.

4) Testing attention and working memory:
i) My attention turned out to be quite selective as I was only focused on the people bassing the ball and never noticed the gorilla walking across the screen.

ii)This video is relevant to human-computer interaction as it shows just how selective human observation can be.

David Boyle - Lab 3

David Boyle
d16124360

Lab 3
Q1)
Colspan is a cell variable which allows a single table cell to span the width of more than one column. It controls the properties and structure of individual columns in a table.  Eg:                                        
  <table border = "1">
  <tr>
  <td colspan = "2"> Age List</td>
  </tr>
  <tr>
  <td> David </td>
  <td> 23 </td>
  </tr>
  </table>

Rowspan allows a single table cell to span the width of more than one cell or row. It controls the properties and structure of individual rows in a table. Eg:

<table border = "1">
<tr>
<td rowspan ="2"></td>
<td> David </td>
<tr>
<td> 23 </td>
</tr>
</table>

Q3)
I found coding tables to be easier and quicker than when I was coding divs, however when it came to trying to code the height and the width of certain columns and rows in order to complete the exercise on page 49 I found it much more difficult than with divs. Tables do seem to be easier to read than divs, however I still prefer using divs for my layers.

Q4)
Similarities in US Health Websites: healthgrades.com | healthline.com | nih.gov

1. The first similarity that I found between these three websites was that they all used similar colours, predominantly an all white background with blue headlines. 
2. The second similarity I found was that each website uses a lot of pictures for there articles, giving each website a very boxlike look.
3. The third similarity I found was that all three of these sites were very responsive to screen size. Each website adapted accordingly to smaller screens making them very mobile friendly.
4. Finally, I noticed that each websites took on a flat design.

Q5)

Similarities in UK Health Websites: webmd.boots.com | patient.info

1. The first thing I noticed when on these UK health sites was they weren't responsive to different screen sizes. Neither of them adapted to a smaller screen, thus making them less mobile friendly.
2. The second thing I noticed was that these websites also took on a flat design.
3. The third thing these websites have in common was that the navigational links were positioned horizontally across the top of the pages on both.
4. Finally I noticed that both UK websites were positioned centrally on the page, with the body of the page positioned the same distance in from both left and right sides of the screen. 

Q6)

Differences between US and UK Health Websites:

1. The first major difference I noticed between the US and UK sites was the responsiveness to screen size. The US sites were evidently much more responsive and mobile friendly than the UK sites
2. The colours of the US sites that I analysed all seemed to be very similar, with a white background and mostly blue headings, whereas the UK sites seem to differ amongst each other with one taking on a predominantly green look and the other taking on a more blue look.
3. The wireframing in the UK sites were all very similar, with the navigational links horizontally across the top and the positioning of each page being very similar. The US sites on the other hand are all very different from one another. Some have the navigational links across the top, some have them down the side, and other have them half way down the page.
4. The US sites also seem to use much more pictures on each of their links and articles whereas the UK sites don't seem to use half as many for their articles and links.

Q7)

Flat Design:

A flat design website is a type of interface design that focuses on flatter styling methods as apposed to more 3-dimensional styles. It is a minimalistic approach to web design. Some websites that use a flat design are Twitter and Reddit.

Skeuomorphism:

Skeuomorphism is a type of interface design that takes on a more realistic, 3-dimensional look to its websites. It attempts to make the items on the page resemble their physical counterparts. iBooks take on a skeuomorphic design.

     

David Boyle - Lab 2

David Boyle
D16124360

Lab 2 - Blog

Four uses for the meta tag:

1. They can be used to specify the author of the document.
2. The can be used for stating key words.
3. They are used to describing the page.
4. They can be used to specify character encoding for the document.

Meta tags used:

<head>

<header style = "width:100%; height: 20%; text-align: left;">

<h1>Fish Creek Animal Hospital</h1>

<meta charset="utf-8">

<meta name="author" content="David Boyle">

<meta name="keywords" content="HTML5, CSS>

<meta name="description" content="A webpage for Fish Creek Animal Hospital">

</header>

<head>

SEO guidelines I would employ when designing my own web page:

1. Using Meta Tags: The first SEO guideline I will employ when creating my website will be correctly using meta tags in my code so that the search engine can learn more about my page. By correctly using meta tags for the title and the description I can ensure that I will be optimising my webpage  so that it is relevant to searches.
2. URL's: The second SEO guideline I will employ when creating my website will be focusing on the page's URL. First I want to make sure that the URL is clean, descriptive and easily read. If it is not and contains unnecessary parameters, then it will likely confuse people and robots, making them less inclined to visit the webpage. Optimising my URL's by keeping them short and concise, and using keywords at the beginning will help search engines understand the page's relationship to the rest of the site.
3. Mobile Friendliness: Making sure my webpage is mobile friendly is a very important SEO guideline that I will follow. Mobile page speed is a huge part of this and can significantly dictate how many people will visit my site. Increasing mobile page speed can be done by minifying code, optimising image size, minimising ATF content, and various other ways.
4. Schema Markup: Schema markup gives the content of my page meaning, making it easily understood by search engines. When this happens, it is easier for the search engine to determine what my page is about and what it relates to, thus making it easier for the page to rank high amongst searches relative to my keywords.

David Boyle - Lab 1

David Boyle
D16124360

Article Observations:

10 Common Web Developer Mistakes:

• I find it interesting how creating a web page to fit a particular browser, for example google chrome, will often result in the quality of the web page dropping significantly when opened on a different browser, like internet explorer. I learned from reading this article that there are some tools, like free VM’s or site scanners, that are easily used to check how your page looks on different browsers.

• Do not fill you page up with too many images or make the source HTML markup to complex as this can slow down the processing speed of your page and sometimes cause errors. This can cause users to become impatient and even give up on the page altogether.

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

• Brainstorming in groups can be a very efficient way coming up with ideas. If you take time out to splint into different groups and discuss different aspects of what you are trying to achieve, a lot of the time you will have 3 or 4 main ideas instead of 10 or 15 rough ideas.

• Function over appearance. When building you prototype, functionality should always take preference over appearance. In the first stages of you prototype, tackling the way the site functions is the more important as you can come back and focus on the appearance at a later date.

Terms:

Term: "Wireframing"

http://conversionxl.com/wireframes/ 

I discovered that wireframes are the blueprints that define how a web page is layed out, what content is on it, and how it functions. There are certain tools that can be used to create a wireframe like Indesign or Balsamiq.

Term: "Forking Code"

http://whatis.techtarget.com/

The term "Forking Code" refers to when you take the source code from other software with an open source program and then use this in order to develop a brand new program.

Who I followed on Twitter:

CoderDojo @Coderdojo:
I followed CoderDojo because it is a page that posts links informing new learners how to code, hack, and develop games, apps, and websites.

Web Design Ledger @webdesignledger:
The Web Design Ledger page is a page written by web designers for web designers that frequently updates its page with different web designing and computer tutorials.

Web Designer Depot @Designerdepot:
The web designer depot also blogs about tutorials but it also keeps you up to date with popular we design trends.

Website Analysis:

Sports Direct: 

The sports direct website seemed to almost have too much going on in the opening page. It reminded me of Windows 8. The slides at the top of the page also move very quickly which might not gove a user with visual impairments the chance to see what it is they are advertising.

The Irish Times:

Similar to the sports direct website, the opening page of the Irish Times website has an awful lot going on. There are too many small scattered articles that go the whole way down a very long page. The right side of the page is crammed with more news, videos, podcasts and pictures. Everything on this page has been minimised in order to fit everything on to it. This would make it very difficult for someone with a visual impairment to find exactly what they are looking for.

Codecademy:

The opening page for codecademy.com is much more simplistic and minimal than the previous two websites analysed. Everything on this site is well structured and marked making it much easier to understand. However the colours used on the webpage may make it difficult for someone with a visual impairment to read the print on the page.

Questionnaire: 

The questionnaire did provide some varying results to my original analysis of these websites. Firstly, it pointed out whether the websites had help options or not for the users. Another aspect that the questionnaire brought light to was whether or not the websites spoke the users language.

Mobile Validator:

Sports Direct:

When run through the mobile validator, the Sports Direct websites received a 0% overall rating, meaning it is not mobile friendly at all. Overall there were 29 reported errors, with 3 critical errors. Some of the problems reported are:

• It relies heavily on web standards.
• It has severe HTTP errors. 
• The size of the documents markup exceeded 10 kilobytes
• The total size of the page which was 2MB exceeds 20 kilobytes.

Irish Times:

When run through the mobile validator, the Irish Times websites also received a 0% overall rating. Overall it had 32 reported errors, with 5 critical errors. Some of the main errors are:

• There are more than 20 embedded external resources.
• The CSS style sheet is not syntactically valid CSS.
• More the a quarter of the page characters are whitespace or comments.

Codecademy:

When run through the mobile validator, Codecademy received an overall rating of 5%. Overall it had 20 reported errors, with only 1 critical error.. Some of the main reported errors are:

• The document contains a frame, frameset or iframe element.
• The certificate does not match the requested URI.
• The size of the document markup exceeds 10kb.

One website I found that, when put through the mobile validator received a rating that exceeded 50% was Instagram.com. Instagram received an overall rating of 75% and had no reported critical errors.

Analyses through Webaim.org:

Sports Direct:

When put through webaim.org, the sports direct website came out with a calamity of errors, 203 in total. Showing that the website is not very accessible at all. Some of the main problems with the site are:

• There are 181 cases where the image alternative text was not present
• 14 cases of links that contained no text
• 8 instances of two nearby images containing the same alternative text

The Irish Times:

When put through webaim.org, the Irish Times site proved to also have a multitude of errors, although nowhere near as many as the Sports Direct site. However, it still proved to have limited accessibility. Some of it main problems are:

• There are 12 cases of a form label being present, however not containing any content.
• 29 cases of images having very long alternative texts.
• There where also 3 instances of a link containing no text

Codecademy:

Codecademy also proved to have limited accessibility, however it is not a limited as the previous two websites. Some of codecademys main problems included:

• 6 cases of a form control not having a corresponding label.
• 10 empty links.
• 5 cases where a heading level was skipped.

Both Sport Direct and Codecademy made the error of not having image alternative text present on their webpages. All three sites had cases where a form control did not have have a corresponding label.