Tuesday, 13 October 2015

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.
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.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://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.lamaddalena.pl/index-high.html

_________________________________________________________________________________

No comments:

Post a Comment