Lab 4

Part II - Coding a Fish Creek website

2.

The first error in my HTML code was: Named character reference was not terminated by a semicolon

This was due to me forgetting to put a semi-colon after using the space command, &nbsp, so I just added in these semi-colons which fixed the error.

The next error which occurred lots of times: Element br not allowed as child of element dl in this context

 This was due to me forgetting to close my <dl> tag

The last error remaining then was: Stray end tag body.

However I couldn't figure out the source of this after much trial and error.

In my CSS I just had a single parse error, due to having 2 closing braces instead of 1 on one of my lines.

3.

My website seems to appear the exact same across IE, Firefox and Chrome. Perhaps this is because I've been testing it in IE all along, which seems to be the most error prone.
 

Part II - Web Development Tools
Researching extensions/add-ons

Firefox
 - Firebug: This seems like an extremely useful add-on, which provides a text editor which allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. The layout tab in a window next to your html code looks especially useful.

- Web Developer: This places an extra toolbar on your browser with lots of options for web developers, such as being able to view and edit the CSS of a page within just one click. One very useful tool I found was outline block level elements which separates out all divs etc on the page for an easier look at the structure of the page from a development point of view.

Chrome
- DevTools: This is not actually an extension, but a set of tools built into Chrome which can be accessed in tools in the Chrome menu. This seems to be a pretty comprehensive set of tools for web development for viewing and editing HTML and CSS, debugging, and improving network performance.

- HTML Instant: This is a HTML editior with a split screen featuring the HTML code you are editing on the left, and the results of this code on the right. The great thing about this though is that the results of your code update in real time on the right tab so you can see the results of your code instantly. It also supports CSS and images from any website. I think i'll be using this extension quite a lot, as it seems the most intuitive to a beginner of all the ones I have looked at.

Part III - Perception & Attention

2. In the first link here, I found it quite tough to see the hidden shapes in a few of the images. I think this might indicate that having cluttered visuals on a webpage can be quite confusing to the human eye and make it hard to distinguish different parts of the website.

In the set of links related to Closure, I found that I was able to perceive quite quickly and easily what each image was even with lots of missing data. This shows that the human brain is quite perceptive of images even when not presented with the whole picture. This is perhaps why simple, flat UI design works so well, that even when presented with simplistic images with no textual information of what they represent, our brains are able to almost instantly figure out what the logo represents a lot of the time.


3. This game tells me that it is easy for the brain to memorise a pattern, rather than try other methods to try to memorise where each individual dot is. I got further in the game by just observing the entire pattern rather than trying to remember the positions of the dots line by line.
This exercise demonstrates what users are most perceptive of when it comes to viewing an image and so would help as a basic guideline of interaction design.


4. I had seen this video before, but the first time I was completely oblivious of the gorilla passing across the screen. I think that this shows when designing for HCI, you want the users focus to be on one thing at a time, as we find it hard to focus on more than one.

Lab 3

Part I – Reviewing this week’s lectures (record in blog)

Page Layout

1. <table> </table>
   <tr> </tr>
   <td> </td>
   <caption> </caption>

2. colspan is used to merge a number of columns
    rowspan is used to merge a number of rows

3.

CODE FOR FIRST TABLE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><META http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body>
<table border="1" align="center" width="80%">
  <tr>
     <td colspan="2" align="center">
  <h1>Banner</h1>
  </td>
  </tr>
  <tr>
     <td colspan="2" align="center">
  <h2>Navigation</h2>
  </td>
  </tr>
  <tr height = 600>
      <td width="80%" align="center"  valign="middle"><b>
   Main <br>
   Content</b></td>
      <td align="center" valign="middle"><b>Side<br>
   Bar</b></td>
  </tr>
</table>

CODE FOR SECOND TABLE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><META http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body>
<table border="1" align="center" width="80%">
  <tr>
     <td colspan="3" align="center">
  <h1>Banner</h1>
  </td>
  </tr>
  <tr height = 600>
      <td width="15%" align="center"  valign="middle"><b>
   Navigation</b></td>
   <td width="70%" align="center" valign="middle"><b>
   Content</b></td>
      <td align="center" valign="middle"><b>
   Content</b></td>
  </tr>
</table>




4. A metaphor is a set of user interface visuals, actions and procedures that exploit specific knowledge that users already have of other domains.

Examples
- The 'start' button on old versions of Windows is the natural place for someone with no prior knowledge of the OS to first click on. It is now a Windows button since Windows 7 but this would still be a type of metaphor as anyone who as used a Windows machine before will automatically go to the bottom left as a starting point.

- The 'x' button on browsers to close a page

- Folders on a computer are a straightforward metaphor for storing files

5.
a. Skeumorphism is when a recreated object has a design element that was structurally important in the original but no longer necessary. In UI design it helps the user understand the purpose of an application almost immediately, for example an email application having an envelope logo would immediately indicate to the user its purpose.

b. Flat design advantages
- Ease of use
- Fast load times
- Modern appearance
- Efficient responsive design

c. Flat design disadvantages
- Lacks personality
- Can be unclear what is clickable
- Boring design
- Difficult to execute well

Lab 1

Part I – Beginning Web Development

1. Blog set up at this address (http://markscanlonwebdev.blogspot.ie/)

2. Twitter handle for course created: @markscanlon265

3. The Internet Society was created "to promote the open development, evolution and use of the            Internet for the benefit of all people throughout the world".
  
    Membership to W3C is available to all organisations and individuals

W3C Technology searched for on twitter

Web Architecture
Article posted by @xoriant states that due to increased mobile use and access to information and technologies, web architecture that seemed up to date at the start of the decade is already being pushed to the brink.

Semantic Web
An article posted by @semanticweb discusses the trade-off in personal data being published online to help with faster and more relevant search results and data for others, and the risk of phishing attacks and even a traveler's patterns to figure out when they won't be at home.

Web of Devices
In a tweet by @richardengel he posts a video of 'honeypot' tests to test the likelihood of being hacked while traveling in Russia, where 3 of his devices are hacked within 24 hours.

Useful Twitter accounts to follow for DT265

- @sitepointdotcom is an online resource for web designers and developers, with web news, tips etc. related to web development.
- @netmag A magazine for web designers and developers
- @phpizer Resources about PHP, MySQL, Apache, Design and Ergonomics

Programming Languages (Wikipedia Data)

C++ and Python have the most regularly updated articles of the last 2 years, with Java close behind. COBOL and Haskell have much fewer updates.

Assuming a wikipedia article doesn't have a stub at the top indicating that the article is missing information or references, a good indication of the quality of an article is the number of references at the bottom of the page in comparison to the length of the article. The articles for these programming languages are all well cited. Another method of researching the quality of the article is to read the discussion in the "talk" tab.

A way to view vandalism on wikipedia is to go to revision history and look at the rating on each revision. Revisions with hugely negative rating will usually be due to vandalism with an explanation of what the vandal modified beside it. The Java, C++ and COBOL seem to be the most vandalized, with Python having very little vandalism and Haskell almost none.

The most common titles in these articles are 'History', 'Criticism' and 'Features'. There are also 'References', 'External Links' and 'Further Reading' which appear in most wikipedia articles.

The articles for Haskell and Python appear to have changed the most, mainly due to the original pages containing very little content. The articles for Java, C++ and COBOL have also changed a great deal, but had a decent amount of content to begin with.

-------------------------------------------------

Part III - Analysing the UI

WebMD
The home page here is a little too cluttered for an ageing user, with not much distinction between different content on the page. The font used is also quite small with no easy option of magnifying. However I think the menus at the top and the symptom checker are quite simple for an ageing user to use.

Book Depository
I think this is a good website for ageing users, simple layout with everything just a click away and very clear distinction between different sections such as 'Our Top Picks' etc.

Wired
While this is a good website with regard to font sizes and simplicity, I think the menu bar could be more obvious and the search bar could also be easily overlooked. Inside the menus it could take a couple more clicks to find an article that you're looking for. There is lots of scrolling on the home page.

--------------------

http://www.premierleague.com/ is a website that would have a target demographic of young males, but the navigation is clear and simple, with lots of information a single click away, including links to every team's websites and links for match tickets.

----------------------

From the questionnaire:

For WebMD, I gave positive feedback for most of the questions asked, apart from minimizing the users memory load.

Again for BookDepository, I generally gave positive feedback in the categories given.

Similarly for Wired, it has gotten me to think that all 3 websites are actually quite well designed and should be pretty clear to use for any user.

----------------------

WebMD scored 0% for mobile compatibility so I am assuming that it is riddled with errors when viewed on mobile. BookDepository scored the same. The same for Wired.

google.com scores 69% but even this has a single 'severe' error

----------------------

All 3 websites seem to have lots of problems according to wave.webaim.org, with webMD having 290 contrast errors which seems like a lot, and could be a problem for ageing users. BookDepository seems to fare best with just 4 errors and no HTML problems

Lab 2

All possible tags in head section of web page

<title></title>

This stores the title of the webpage which will be displayed in the browser toolbar

---------------------------

<base href="http://www.dit.ie" target="_blank">

This specifies the base url for all relative urls on the page

 ---------------------------

<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
< /style>

Inside this tag you define the style of the webpage. In the above example the background of the webpage is set to yellow and any paragraphs inside the body, the text will be blue.

---------------------------

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

The meta tag is used to provide metadata about the HTML document, such as metadata that can be used by browsers or search engines. The above example contains keywords for a search engine.

----------------------------------

Four SEO Guidelines

1. I will try to include in my title some terms that may be used to search for the website

2. Try to provide a relevant and concise description of the site in the metadata description

3. Create unique title tags for each page

4. Use easy to understand URLs

For the Animal Creek website I would change the titles for each page so google is aware that they are separate pages.