Thursday, 22 October 2015
Testing Code In Different Browsers
I opened my code in 'Chrome', 'Safari' and in 'Firefox'. Both browsers opened the code perfectly which to be honest I was not expecting. Maybe I am just a brilliant web developer .. That's a joke by the way.
Sunday, 11 October 2015
Selective Attention Test & HCI (Lab 4 , Part 3 , Question 4)
I recently watched a video entitled 'Selective Attention Test' by Daniel Simons and Christopher Chabris. The video is just over a minute in length. The video starts by showing a group of people with two basketballs. The viewers goal is to count the amount of times a pass is made by the group of people. So, I watched the video. Counted. 15 is the answer according to the video (I counted 17..). But then text comes up on the screen and asks, "Did you see the gorilla?". I did see the gorrilla in the video and I was asking myself "why is there a gorilla?". Probably explains why my count was 17 and not 15.
So to answer the question "how selective was my attention", I would like to think that my attention to detail is pretty okay. I noticed the gorilla and almost got the count right. But prehaps if the experiment was more complex, the outcome would have been different.
How is this relevent to Human Computer Interactions? Our goal as developers is to make programs, webpages, applications etc that the allow the user to navigator or opperate easily and efficiently. Creating a webpage that is so full of detail or is 'busy' may have a negative affect on your target user audience as the users are unable to decipher how to use your webpage. As deveoplers we must cater for this when designing for users.
Souces:
http://sharpbrains.com/blog/2006/09/28/attention-and-working-memory/
So to answer the question "how selective was my attention", I would like to think that my attention to detail is pretty okay. I noticed the gorilla and almost got the count right. But prehaps if the experiment was more complex, the outcome would have been different.
How is this relevent to Human Computer Interactions? Our goal as developers is to make programs, webpages, applications etc that the allow the user to navigator or opperate easily and efficiently. Creating a webpage that is so full of detail or is 'busy' may have a negative affect on your target user audience as the users are unable to decipher how to use your webpage. As deveoplers we must cater for this when designing for users.
Souces:
http://sharpbrains.com/blog/2006/09/28/attention-and-working-memory/
Saturday, 10 October 2015
Visual Perception Games Part 2 (Lab 4, Part 3, Question 3)
I just played a visual pattern game called "Pattern Memory". Dots flash on a screen in a particular pattern and then disappear. You have to then click the pattern back. My first score was 10 out of 20 levels which is okay I guess. Nothing to brag about but sure. Why this game is interesting is because one can use the Gestalt principles during the game. The Gestalt principles try to analyse how people organise visual elements in a group. One way you can apply this method is my 'Similarity'. We tend to look for dissimilar objects, they stand out to our eye when we preceive the image. This is anormally. A web designer can use this method to catch the users attention if say the designer wants to highlight a particular part of his/her webpage. Another method is 'Proximity' where the eye preceives several objects together as a group. This is a tactic that one can use well in the game linked below. A web designer could use this strategy to create interesting designs for their page as the user will interpret all the seperate objects as one unified image.
Sources:
http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm
http://www.playkidsgames.com/games/patternMemory/patternMemory.htm
Sources:
http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm
http://www.playkidsgames.com/games/patternMemory/patternMemory.htm
Games part 1 (Lab 4, Part 3, Question 2)
I played two games and did terrible. The first game was called visual blink. It estimated my brain age is 95. I am 22 just in case you were wondering. The second game I played was spot it. I played it once and my score was 15. I don't know if thats good or bad for a first go but sure.
If you want to check out these games you can play them here:
http://www.freebrainagegames.com/games/visual_blink.php
http://www.scientificpsychic.com/graphics/index.html
If you want to check out these games you can play them here:
http://www.freebrainagegames.com/games/visual_blink.php
http://www.scientificpsychic.com/graphics/index.html
Add-Ons When Developing for Certain Browsers Types (Lab 4 Question, Part 2, Question 1)
- Firefox
- I will use the extension "Classic Tool Buttons" to help make my webpage interface more user friendly as the layout will be more recognisable for most users.
- I will also use the add-on "NoScript Security Suite" to protect my site from clickjacking attacks.
- I shall use "Stylish" so I can have more customization features.
- Google Chrome
- I will use "Colorzilla" so I can have access to a variety of colours for my webpage.
- I will use "Perfect Pixel"to allow my webpage to be more visually appealling even to the pixel.
- I will apply the extension "Meta SEO Inspector" to allow me to inspect meta data found inside webpages.
- I will also use "Stylish" add - on for the same reasons as above.
Sources:
https://addons.mozilla.org/en-us/firefox/extensions/web-development/
https://chrome.google.com/webstore/category/ext/11-web-development
Validating my HTML & CSS (Lab 4, Part 1 , Question 2)
I suppose one of the difficult things about using HTML and CSS is how it presents errors. It does'nt! And that's the problem. I ran my index.html file through an online HTML validator and I was surprised to say the least. 18 errors in total listing from attribute errors to obselete tag errors. I thought my code was flawless. I was so wrong. It was a similar story when I ran the CSS validator. Not as many error at least but still errors or warnings. They all seemed to be 'phrase errors'. I went back to try to fix them or some at least. I was partically successful in fixing my HTML and CSS but according to the online validators, I still have some errors.
Sources:
https://jigsaw.w3.org/css-validator/validator
https://validator.w3.org/
Sources:
https://jigsaw.w3.org/css-validator/validator
https://validator.w3.org/
Flat Design & Skeuomorphism (Lab 3, Part 2, Question 7)
Flat design is a style of web design that became popular in recent years, (2012-ish), and is currently one of the most popular styles for designing a website. But what Flat design? It is the absence of 3 - dimensional visual effects in a website. According to the article "Flat Design: It's Origins, it's Problems and why Flat 2.0 Is Better for Web Users" by Kate Meyer, she describes flat design as a 'minimalist web-design'. Websites that use this type of web style are the likes of Facebook and Twitter. You can view some of the best flat designed websites here:
http://www.awwwards.com/websites/flat-design/
In contrast to this revolutionary , (if thats what you want to call it), flat design there exists a style that is it's opposite. This style is called Skeuomorphism or the use of 3 - dimensional icons and visual effects in a website. Many websites have used this style however this type of web design appears to be seen as a bit dated. You can view many examples of this style here: http://www.webdesignbooth.com/skeuomorphic-web-design/
Sources:
http://www.webdesignbooth.com/skeuomorphic-web-design/
http://www.awwwards.com/websites/flat-design/
http://www.webdesignerdepot.com/2013/12/infographic-flat-design-vs-skeuomorphism/
"Flat Design: It's Origins, it's Problems and why Flat 2.0 Is Better for Web Users" by Kate Meyer
http://www.awwwards.com/websites/flat-design/
In contrast to this revolutionary , (if thats what you want to call it), flat design there exists a style that is it's opposite. This style is called Skeuomorphism or the use of 3 - dimensional icons and visual effects in a website. Many websites have used this style however this type of web design appears to be seen as a bit dated. You can view many examples of this style here: http://www.webdesignbooth.com/skeuomorphic-web-design/
Sources:
http://www.webdesignbooth.com/skeuomorphic-web-design/
http://www.awwwards.com/websites/flat-design/
http://www.webdesignerdepot.com/2013/12/infographic-flat-design-vs-skeuomorphism/
"Flat Design: It's Origins, it's Problems and why Flat 2.0 Is Better for Web Users" by Kate Meyer
Monday, 5 October 2015
African and American Website Browse (Lab 3, Part 2, Question 4, 5, 6)
Common traits that I observed from some African websites are as follows:
1. White space is a common feature amongst the African websites. There appear to be gaps where there is no text, no images or adverts.
2. In terms of options for navigation, most of the sites are very limited in what they can do. I also noticed that sometimes I may click 'World News' or 'Home' and then I would be sent to some gambling site or dating site. Which brings me to my next point.
3. Security. The majority of the websites I tried to access either did not open or opened some 'dodgy' domain in which I had to specify what part of the site I had to access. And again, I was bombarded with adverts or dating sites.
4. In terms of content, I found that the majority of African news websites tended to focus more on African news and display very limited world news.
Common traits that I observed from some American websites are as follows:
1. I think the main similarity that the majority of American websites share is the sheer volume of information that is presented. Every square inch of the page is filled with text or photots. Its a tsunami of information!
2. In terms of colour, white seems to be the dominant background colour. The title bar usually seems to be a dark or striking colour such as red, blue or black (which makes sense).
3. The majority of the American sites appear to have very lengthy webpages ie the amount of lets all it 'scroll time' you spend on a page is very long.
4. The refresh rate and response rate for the American sites appears to be very high.
Difference:
The main difference that I observed when veiwing both the African and American websites was the contrast in which the information was presented. Americans websites throw information at you. You have no choice. The moment you click onto one of their websites you are bombarded by it. This is'nt necessarily a bad thing as some people would argue that that is their preferred way to view information. Comparing this to the African site where information is more spread and whitespace is present throughout. One other major difference was the presentation of information. Like I previously mentioned, Africans news websites had a tendency to display more national news then international. I n contrast I found that American websites tended to have a good balance between displaying their national and international news.
1. White space is a common feature amongst the African websites. There appear to be gaps where there is no text, no images or adverts.
2. In terms of options for navigation, most of the sites are very limited in what they can do. I also noticed that sometimes I may click 'World News' or 'Home' and then I would be sent to some gambling site or dating site. Which brings me to my next point.
3. Security. The majority of the websites I tried to access either did not open or opened some 'dodgy' domain in which I had to specify what part of the site I had to access. And again, I was bombarded with adverts or dating sites.
4. In terms of content, I found that the majority of African news websites tended to focus more on African news and display very limited world news.
Common traits that I observed from some American websites are as follows:
1. I think the main similarity that the majority of American websites share is the sheer volume of information that is presented. Every square inch of the page is filled with text or photots. Its a tsunami of information!
2. In terms of colour, white seems to be the dominant background colour. The title bar usually seems to be a dark or striking colour such as red, blue or black (which makes sense).
3. The majority of the American sites appear to have very lengthy webpages ie the amount of lets all it 'scroll time' you spend on a page is very long.
4. The refresh rate and response rate for the American sites appears to be very high.
Difference:
The main difference that I observed when veiwing both the African and American websites was the contrast in which the information was presented. Americans websites throw information at you. You have no choice. The moment you click onto one of their websites you are bombarded by it. This is'nt necessarily a bad thing as some people would argue that that is their preferred way to view information. Comparing this to the African site where information is more spread and whitespace is present throughout. One other major difference was the presentation of information. Like I previously mentioned, Africans news websites had a tendency to display more national news then international. I n contrast I found that American websites tended to have a good balance between displaying their national and international news.
Colspan & Rowspan (Lab 3, Part 1, Question 1, 3)
The attributes 'colspan' and 'rowspan' in HTML are used to merge a column or row of a table together.
Example:
<!DOCTYPE html>
<html>
<head>
<title> colspan & rowspan exmaple </title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td colspan="2">Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td rowspan="2">Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</table>
</body>
</html>
In general, I found coding with tables a bit difficult at the start. Positioning was hard and so was making the table the right dimensions you want. But, after a bit practice a few hours, I feel more confident using them. I think I will stick to <div>'s though.
Example:
<!DOCTYPE html>
<html>
<head>
<title> colspan & rowspan exmaple </title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td colspan="2">Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td rowspan="2">Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</table>
</body>
</html>
In general, I found coding with tables a bit difficult at the start. Positioning was hard and so was making the table the right dimensions you want. But, after a bit practice a few hours, I feel more confident using them. I think I will stick to <div>'s though.
Sunday, 4 October 2015
Testing Websites using Mobile Phone Validator & an Accessibility Validator (Lab 1 , Part 3, Question 4)
The two websites I will be testing are, http://edition.cnn.com/ and http://www.amazon.co.uk/. I will be using an online validator http://validator.w3.org/mobile/ for testing each website and how mobile-friendly they are.
First I will test the CNN page. According the the validator the page has a 0% cross plateform capability. Its problems include: Not using correct CSS syntax, the total size of the page exceeds 20kb, contains missing attributes and a whole lot more. I then tested the Amazon page. According to the validator, Amazon is 36% mobile-friendly however there are still problems which are very similar if not identical to the CNN page. They are not using correct CSS syntax, the total size of the page exceeds 20kb, contains missing attributes and 25% of the page contains white text.
I then used a second validator http://wave.webaim.org/, to test how accessible each site was. Again I tested the CNN website first. The validator returned 6 errors and 15 alerts. Some these problems are missing labels and again syntax errors. Applying the same test to the Amazon page the validator returned 47 errors and 168 alerts which I was surprised about to be honest. Errors included missing text, syntax errors and a whole lot more.
Sources:
http://wave.webaim.org/
First I will test the CNN page. According the the validator the page has a 0% cross plateform capability. Its problems include: Not using correct CSS syntax, the total size of the page exceeds 20kb, contains missing attributes and a whole lot more. I then tested the Amazon page. According to the validator, Amazon is 36% mobile-friendly however there are still problems which are very similar if not identical to the CNN page. They are not using correct CSS syntax, the total size of the page exceeds 20kb, contains missing attributes and 25% of the page contains white text.
I then used a second validator http://wave.webaim.org/, to test how accessible each site was. Again I tested the CNN website first. The validator returned 6 errors and 15 alerts. Some these problems are missing labels and again syntax errors. Applying the same test to the Amazon page the validator returned 47 errors and 168 alerts which I was surprised about to be honest. Errors included missing text, syntax errors and a whole lot more.
Sources:
http://wave.webaim.org/
I
Subscribe to:
Posts (Atom)