HCI: Pebrero 2019

Huwebes, Pebrero 21, 2019

Laboratory Activity #10 - Fixed and Liquid Layouts

Fixed Layout
A fixed layout, or fixed-width layout, is just that: a layout in which the body of the page is set to a specific width. That width is typically controlled by a master “wrapper” <div> in which all content is contained. The width property of that <div> would be set in the style attribute or in a style sheet entry if the <div> was given an ID value such as “main” or “wrapper” (although the name is up to you).
When creating a fixed-width layout, the most important decision is determining the minimum screen resolution you want to accommodate. For many years, 800×600 has been the “lowest common denominator” for web designers, resulting in a typical fixed width of approximately 760 pixels. However, since 2007, the number of people using 800×600 screen resolution has been less than 8% (and is currently approximately 4%). Given that, many web designers consider 1024×768 the current minimum screen resolution, leading to fixed-width designs anywhere between 800 and 1000 pixels wide.

Liquid Layout

A liquid layout—also called a fluid layout—is one in which the body of the page does not use a specified width in pixels, although it might be enclosed in a master “wrapper” <div> that uses a percentage width. The idea behind the liquid layout is that it can be perfectly usable and still retain the overall design aesthetic even if the user has a very small or very wide screen.

#1 Website Evaluation
Look for two (2) websites, one with a fixed layout and the other one with a liquid layout.

#2 A basic HTML template with no styles applied to the <div> elements.

<html>
  <head>
    <title>Sample Layout</title>
    <link href="layout.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div id="header">HEADER</div>
    <div id="wrapper">
       <div id="content_area">CONTENT</div>
       <div id="left_side">LEFT SIDE</div>
       <div id="right_side">RIGHT SIDE</div>
    </div>
    <div id="footer">FOOTER</div>
  </body>
</html>

#3 A basic HTML template after adding some styles.

Add the following codes:

#header {
   float: left;
   width: 100%;
   background-color: #7152F4;
}

#footer {
   float: left;
   width: 100%;
   background-color: #7152F4;
}

#wrapper {
  float: left;
  padding-left: 200px;
  padding-right: 125px;
}

#left_side {
  position: relative;
  float: left;
  width: 200px;
  background-color: #52f471;
  right: 200px;
  margin-left: -100%;
}
#right_side {
  position: relative;
  float: left;
  width: 125px;
  background-color: #f452d5;
  margin-right: -125px;
}

#content_area {
  position: relative;
  float: left;
  background-color: #ffffff;
  width: 100%;
}

#4 A fixed-width/liquid hybrid layout.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Sample Layout</title>
    <link href="layout.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div id="header"><img src="acmewidgets.jpg" alt="ACME Widgets
       LLC"/></div>
    <div id="wrapper">
       <div id="content_area">
        <h1>Welcome to ACME Widgets!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nam tincidunt posuere malesuada. Suspendisse ac felis ac ante
        tincidunt ullamcorper. Nulla vitae ligula vitae mi rhoncus
        adipiscing. Etiam congue felis id ante semper at imperdiet
        massa tempor. Nullam hendrerit fermentum ligula, sit amet
        pellentesque purus faucibus in. Sed molestie lacus mauris,
        ultrices accumsan sem. Phasellus facilisis malesuada sem, nec
        ornare ipsum dictum consectetur. Nulla libero nisl,
        consectetur eget accumsan vel, interdum ut risus. Donec
        vitae enim vitae nulla feugiat dignissim ut sit amet odio.
        Nunc non enim id sem faucibus congue. Integer ac mi in justo
        euismod sodales. Aenean imperdiet vestibulum auctor. Sed         ullamcorper congue ipsum, eget vulputate sem scelerisque in.
        Donec ornare vestibulum congue. Etiam sapien nulla, rutrum
        mattis mattis ut, pellentesque eget augue. Proin nisl mauris,
        suscipit quis elementum ac, vestibulum quis lacus. Ut eget
        justo vitae urna varius sodales. </p>
       </div>
       <div id="left_side">
         <ul>
         <li><a href="#">Mission</a></li>
         <li><a href="#">History</a></li>
         <li><a href="#">Executive Team</a></li>
         <li><a href="#">Contact Us</a></li>
       </ul>
       </div>
       <div id="right_side"><strong>SPECIAL WIDGET DEAL!</strong><br/>
         Buy three widgets and get a fourth for free.<br/><br/>
         Act now!
       </div>
    </div>
    <div id="footer"> Copyright information usually goes here.</div>
  </body>
</html>

Listing 12.3 Full Style Sheet for Fixed/Liquid Hybrid Layout

body {
  margin:0;
  padding:0;
  min-width: 525px;
}
#header {
  float: left;
  width:100%;
  background-color: #ffffff;
}
#footer {
  float: left;
  width:100%;
  background-color: #7152f4;
  font-size: 8pt;
  font-weight: bold;
  text-align: center;
  position: relative;
}
#wrapper {
  float: left;
  padding-left: 200px;
  padding-right: 125px;
  overflow: hidden;
}#left_side {
  position: relative;
  float: left;
  width: 200px;
  background-color: #52f471;
  right: 200px;
  margin-left: -100%;
  padding-bottom: 2000px;
  margin-bottom: -2000px;
}
#right_side {
  position: relative;
  float: left;
  width: 125px;
  background-color: #f452d5;
  margin-right: -125px;
  padding-bottom: 2000px;
  margin-bottom: -2000px;
}
#content_area {
  position: relative;
  float: left;
  background-color: #ffffff;
  width: 100%;
  padding-bottom: 2000px;
  margin-bottom: -2000px;
}
#left_side ul {
  list-style: none;
  margin: 12px 0px 0px 12px;
  padding: 0px;
}
#left_side li a:link, #nav li a:visited {
  font-size: 12pt;
  font-weight: bold;
  padding: 3px 0px 3px 3px;
  color: #000000;
  text-decoration: none;
  display: block;
}
#left_side li a:hover, #nav li a:active {
  font-size: 12pt;
  font-weight: bold;
  padding: 3px 0px 3px 3px;
  color: #ffffff;
  text-decoration: none;
  display: block;
}

#5 Revise your Activity #9 to a fixed-width/liquid hybrid layout.

Martes, Pebrero 12, 2019

Laboratory Activity #9

Create a page that will tell something about yourself (personal, interests/hobbies, dreams/aspirations/goals, travels, food trip, etc). Use also the picture to link to other pages about the related contents.

Place a menu in the image (something about yourself). Apply what you have learned in Activity #8

The menu should tell something about yourself and all the entries associated with the menu should be displayed on the same page only. The links on the pictures should be directed to other pages of your own choice.

Ex. HTML code in creating a navigation bar
<div class="image">
  <div class="container">
    <div class="topright">
      <a href="#home">Home</a>
      <a href="#hotpicks">Hot Picks</a>
      <a href="#items">Items</a>
      <a href="#about">About</a>
    </div>
  </div>
</div>

.image {
  /* The image used */
background-image: url("place the image filename here");

min-height: 380px;

  /* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;

  /* Needed to position the navbar */
position: relative;}

/* Position the navbar container inside the image */
.container {
position: absolute;
margin: 20px;
width: auto;}

/* The navbar */
.topright {
overflow: hidden;
background-color: #333;}

/* Navbar links */
.topright a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;}

.topright a:hover {
background-color: #ddd;
color: black;}

Huwebes, Pebrero 7, 2019

Lesson 6 - Guidelines, Principles, and Theories

Guidelines - are advice about good practices and cautions against dangers.

Principles - are strategies or rules to analyze and compare design alternatives.

Theories - are widely applicable frameworks to draw on during design and evaluation as well as to support communication and teaching.

Activity:
1. Select only 2 items and discuss:
a) standardize task sequences
b) using unique headings and links
c) use of radio buttons
d) use of thumbnails
2. How will you get users attention?
3. What is a first time user?
4. Give 3 interface design rules/principles you apply/follow. Elaborate on your answers.

Laboratory Activity #8 - Lists, Text, and Navigation using CSS

HTML List Refresher

There are three basic types of HTML lists. Each presents content in a slightly different way based on its type and the context:

• The ordered list is an indented list that displays numbers or letters before each list item. The ordered list is surrounded by <ol> and </ol> tags and list items are enclosed in the <li></li> tag pair. This list type is often used to display numbered steps or levels of content.

• The unordered list is an indented list that displays a bullet or other symbol before each list item. The unordered list is surrounded by <ul> and </ul> tags, and list items are enclosed in the <li></li> tag pair. This list type is often used to provide a visual cue to show that brief, yet specific, bits of information will follow.

• A definition list is often used to display terms and their meanings, thereby providing information hierarchy within the context of the list itself—much like the ordered list but without the numbering. The definition list is surrounded by <dl> and </dl> tags with <dt> and </dt> tags enclosing the term, and <dd> and </dd> tags enclosing the definitions.

Part A

#1

<html>
  <head>
    <title>List Test</title>
    <style type="text/css">
      ul {
         background-color: #6666ff;
         border: 1px solid #000000;
         width:100px;
      }
      li {
         background-color: #cccccc;
         border: 1px solid #ffff00;
      }
    </style>
  </head>

  <body>
    <h1>List Test</h1>
    <ul>
      <li>Item #1</li>
      <li>Item #2</li>
      <li>Item #3</li>
    </ul>
  </body>
</html>

<html>

  <head>
    <title>CSS Image Map Example</title>
    <style type="text/css">
    #theImg {
       width:500px;
       height:375px;
       background:url(tea_shipment.jpg) no-repeat;
       position:relative;
       border: 1px solid #000000;
    }
    #theImg ul {
       margin:0px;
       padding:0px;
       list-style:none;
    }
    #theImg a {
       position:absolute;
       text-indent: -1000em;
    }
    #theImg a:hover {
       border: 1px solid #ffffff;
    }
    #ss a {
       top:0px;
       left:5px;
       width:80px;
       height:225px;
    }
    #gn a {
       top:226px;
       left:15px;
       width:70px;
       height:110px;
    }
    #ib a {
       top:225px;
       left:85px;       width:60px;
       height:90px;
    }
    #iTEA1 a {
       top:100px;
       left:320px;
       width:178px;
       height:125px;
    }
    #iTEA2 a {
       top:225px;
       left:375px;
       width:123px;
       height:115px;
    }
    </style>
  </head>
  <body>
     <div id="theImg">
     <ul>
     <li id="ss"><a href="[some URL]"
         title="Sugarshots">Sugarshots</a></li>
     <li id="gn"><a href="[some URL]"
         title="Golden Needle">Golden Needle</a></li>
     <li id="ib"><a href="[some URL]"
         title="Irish Breakfast">Irish Breakfast</a></li>
     <li id="iTEA1"><a href="[some URL]"
         title="IngenuiTEA">IngenuiTEA</a></li>
     <li id="iTEA2"><a href="[some URL]"
         title="IngenuiTEA">IngenuiTEA</a></li>
     </ul>
   </div>
  </body>
</html>

Part B

<html>

  <head>
    <title>About Us</title>
    <style type="text/css">
      body {
         font: 12pt Verdana, Arial, Georgia, sans-serif;
      }
      #nav {
         width:150px;
         float:left;
         margin-top:12px;
         margin-right:18px;
      }
      #content {
         width:550px;
         float:left;
      }    </style>
  </head>

  <body>
    <div id="nav">
    <ul>
      <li><a href="#">Mission</a></li>
      <li><a href="#">History</a></li>
      <li><a href="#">Executive Team</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
    </div>
    <div id="content">
      <h1>About Us</h1>
      <p>On the introductory pages of main sections, it can be useful
      to repeat the secondary navigation and provide more context,
      such as:</p>
      <ul>
      <li><a href="#">Mission</a>: Learn more about our corporate
      mission and philanthropic efforts.</li>
      <li><a href="#">History</a>: Read about our corporate history
      and learn how we grew to become the largest widget maker
      in the country.</li>
      <li><a href="#">Executive Team</a>: Our team of executives makes
      the company run like a well-oiled machine (also useful for
      making widgets).</li>
      <li><a href="#">Contact Us</a>: Here you can find multiple
      methods for contacting us (and we really do care what you
      have to say).</li>
      </ul>
    </div>
  </body>
</html>

#4 Revise #3

Styling the Single-Level Vertical Navigation

#nav ul {
   list-style: none;
   margin: 12px 0px 0px 0px;;
   padding: 0px;
}

#nav li {
border-bottom: 1px solid #ffffff;
}

#nav li a:link, #nav li a:visited {
   font-size: 10pt;
   font-weight: bold;
   display: block;
   padding: 3px 0px 3px 3px;
   background-color: #628794;
   color: #ffffff;
}

#5 Revise #4

Mouse Hover

#nav li a:hover, #nav li a:active {
   font-size: 10pt;
   font-weight: bold;
   display: block;
   padding: 3px 0px 3px 3px;
   background-color: #6cac46;
   color: #000000;
}

#6 Multilevel Vertical Navigation

<ul>
  <li><a href="#">Mission</a></li>
  <li><a href="#">History</a></li>
  <li><a href="#">Executive Team</a>
     <ul>
     <li><a href="#">» CEO</a>
     <li><a href="#">» CFO</a>
     <li><a href="#">» COO</a>
     <li><a href="#">» Other Minions</a>
     </ul>
  </li>
  <li><a href="#">Contact Us</a></li>
</ul>

#7 Revise #6

<html>
  <head>
    <title>About Us</title>
    <style type="text/css">
      body {
         font: 12pt Verdana, Arial, Georgia, sans-serif;
      }
      #nav {
         width:150px;
         float:left;
         margin-top:12px;
         margin-right:18px;
      }
      #content {
         width:550px;
         float:left;
      }
      #nav a {         text-decoration: none;
      }
      #content a {
         text-decoration: none;
         font-weight: bold;
      }
      #nav ul {
         list-style: none;
         margin: 12px 0px 0px 0px;
         padding: 0px;
      }
      #nav ul li {
         border-bottom: 1px solid #ffffff;
      }
      #nav ul li a:link, #nav ul li a:visited {
         font-size: 10pt;
         font-weight: bold;
         display: block;
         padding: 3px 0px 3px 3px;
         background-color: #628794;
         color: #ffffff;
      }
      #nav ul li a:hover, #nav ul li a:active {
         font-size: 10pt;
         font-weight: bold;
         display: block;
         padding: 3px 0px 3px 3px;
         background-color: #c6a648;
         color: #000000;
      }
      #nav ul ul {
         margin: 0px;
         padding: 0px;
      }
      #nav ul ul li {
         border-bottom: none;
      }
      #nav ul ul li a:link, #nav ul ul li a:visited {
         font-size: 8pt;
         font-weight: bold;
         display: block;
         padding: 3px 0px 3px 18px;
         background-color: #628794;
         color: #ffffff;
      }
      #nav ul ul li a:hover, #nav ul ul li a:active {
         font-size: 8pt;
         font-weight: bold;
         display: block;
         padding: 3px 0px 3px 18px;
         background-color: #c6a648;         color: #000000;
      }
    </style>
  </head>

  <body>
    <div id="nav">
    <ul>
      <li><a href="#">Mission</a></li>
      <li><a href="#">History</a></li>
      <li><a href="#">Executive Team</a>
         <ul>
         <li><a href="#">» CEO</a></li>
         <li><a href="#">» CFO</a></li>
         <li><a href="#">» COO</a></li>
         <li><a href="#">» Other Minions</a></li>
         </ul>
      </li>
      <li><a href="#">Contact Us</a></li>
    </ul>
    </div>
    <div id="content">
      <h1>About Us</h1>
      <p>On the introductory pages of main sections, it can be useful
      to repeat the secondary navigation and provide more context,
      such as:</p>
      <ul>
      <li><a href="#">Mission</a>: Learn more about our corporate
      mission and philanthropic efforts.</li>
      <li><a href="#">History</a>: Read about our corporate history
      and learn how we grew to become the largest widget maker
      in the country.</li>
      <li><a href="#">Executive Team</a>: Our team of executives makes
      the company run like a well-oiled machine (also useful for
      making widgets).</li>
      <li><a href="#">Contact Us</a>: Here you can find multiple
      methods for contacting us (and we really do care what you
      have to say.</li>
      </ul>
    </div>
  </body>
</html>

Part C

#8 Creating Horizontal Navigation with CSS

<html>
  <head>
    <title>ACME Widgets LLC</title>    <style type="text/css">
      body {
         font: 12pt Verdana, Arial, Georgia, sans-serif;
      }
      #header {
         width: auto;
      }
      #logo {
         float:left;
      }
      #nav {
         float:left;
      }
      #nav ul {
         list-style: none;
         display: inline;
      }
      #nav li {
         display: inline;
      }
      #content {
         width: auto;
         float: left;
         clear: left;
      }
      #content a {
         text-decoration: none;
         font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="header">
       <div id="logo">
          <img src="acmewidgets.jpg" alt="ACME Widgets LLC" />
       </div>
       <div id="nav">
          <ul>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Support</a></li>
          <li><a href="#">Press</a></li>
          </ul>
       </div>
    </div>
    <div id="content">
       <p><strong>ACME Widgets LLC</strong> is the greatest widget-maker
       in all the land.</p>
       <p>Don't believe us? Read on...</p>
       <ul>
       <li><a href="#">About Us</a>: We are pretty great.</li>       <li><a href="#">Products</a>: Our products are the best.</li>
       <li><a href="#">Support</a>: It is unlikely you will need support,
       but we provide it anyway.</li>
       <li><a href="#">Press</a>: Read what others are saying (about how
       great we are).</li>
       </ul>
    </div>
  </body>
</html>

#9 Revise #8

#nav {
   float:left;
   margin: 85px 0px 0px 0px;
   width: 400px;
   background-color: #628794;
   border: 1px solid black;
}

#nav ul {
   margin: 0px;
   padding: 0px;
   list-style: none;
   display: inline;
}

#nav li {
display: inline;
line-height: 1.8em;
}

#nav ul li a:link, #nav ul li a:visited {
   font-size: 10pt;
   font-weight: bold;
   text-decoration: none;
   padding: 7px 10px 7px 10px;
   background-color: #628794;
   color: #ffffff;
}
#nav ul li a:hover, #nav ul li a:active {
   font-size: 10pt;
   font-weight: bold;
   text-decoration: none;
   padding: px 10px 7px 10px;
   background-color: #c6a648;
   color: #000000;
}