ChristopherRobbins PhpWiki - Web Building Workshop

The Web Design Workshop will be an InsituTraining project a la TepFlashClass , this time using the MediaCentreWebsite as the fodder. Each student will be given one page as homework. note: this will be a workshop, getting a basic feel for the material by editing a template I have created. It is a good beginner's course because the students will not be required to write their own code from scratch, but will become familiar with it by learning to manipulate exisitng code.

Here is a website created by one participant for the Insititue of Education after the workshop, who had no web experience prior to the workshop.

1st Class: Tuesday 4 March: 12-1

Chris: bring 40 Questionaires

Introduction

Explain what we will cover
- Content from the user's perspective
- Information Architecture
- Interface Design
- XHTML
- CSS
- FTP/ upload
Explain the workshop idea: will use tips and techniques gleaned from Web Design industry
Divide into Groups

Content:

approaching your information from the user's perspective
may seem obvious to you, but the hard part is making it obvious to the user
Run the following tasks through Multimedia Unit as an example:
- WebContentQuestionaire
1. WHO ARE YOUR USERS?
2. WHAT DO THEY NEED FROM YOU?
3. HOW CAN YOU SHOW THEM THAT YOU HAVE WHAT THEY NEED?
Useful to create several typical characters that define the spectrum of your users, and continually test your site through these people (do this for the Multimedia Unit )

Assignment

Each group is given a different Department, and they must run through the WebContentQuestionaire with that department, as well as create their typical characters. This info must be typed out at a computer and worded so that I can understand it. Make sure each team fully understands what is expected

2nd Class: Thursday 6 March: 12-1

Chris: bring index cards

Review Content Session (10 mins)

Look at teams' assigments/ questionaires

InformationArchitecture (30 mins)

Organizing your info logically
Divide all the info into categories: do this with Multimedia department
Given a set of categories and a piece of info, users should be able to figure out which category each piece of info goes: try this for real on Multimedia info -- just grab someone from the building. Also use some of the typical characters
Card trick: write the different categories on cards and organize them into "buckets": Do this with the Multimedia Unit
Build a sitemap for Multimedia once you've got it all together

Assignment (start in class for 20 mins)

For the next class, each group must have a document tree or site-map for their section written down. Run through with each team to be sure they understand what is expected.

3rd Class: Tuesday 11 March: 12-1

Chris: bring markers and paper

Review Sitemaps (10 mins)

Navigation Design/ Interface Design (30 mins)

3 basic ways people access information within a website:
1. Search function: Snipers
2. Navigation/Categories: Punchers
3. In-text/contextual: Impulse buyers
Functions should be grouped: color block navigation, main content, advertising, etc: these colors should remain consistent from page to page. Do this with Multimedia.

Assignment (start in class 20 mins)

Groups should break their content into a layout and color code it.

Follow-up

MediaCentreSitemap
Structuring the Interface
- The basic idea is to break your entire set of information into categories for navigation, and then to break the information on each page into structural categories. The most important point is that the Interface Design should evolve from the structure of your content. In other words, we don't just create a pretty interface and then try to fit our content into it. Rather, we divide our content and navigation into a logical and consistent structure, and then design the interface based on this structure.
- For instance, we have decided that we can divide our pages into the following categories:
  - Title bar (breadcrumbs + search)
  - Navigation (Video, Audio, etc...)
  - Subnavigation (Services, Training, Contact us...)
  - Content (Welcome to the web site for the...)
XHTML
- We will use the <div> tag to structure our HTML as above.
- all tags must be between carrots and be balanced: e.g. <tag>Content</tag>
- <html> opens The HTML document
- <head> opens the HEAD
- <title> goes in the HEAD, and gives the title that goes at the top of the browser, e.g. <title>Welcome to USP Media Centre</title>
- </title> closes the TITLE
- </head> closes the HEAD
- <body> opens the BODY, where the guts of the document goes
- <p> starts a new PARAGRAPH: e.g. <p>Stuff we will see in the paragraph.</p>
- </p> closes the PARAGRAPH
- <br /> Gives a one-line BREAK. It is a self-closing tag: e.g. by putting the slash / in the tag after a space like this: <br />, we can balance it without a closing </br>. Only certain tags can self-close
- <div> is used to group your information e.g. <div id="navigation">...
- </body> closes the BODY
- </html> closes the HTML document
- Example used in class: Open up a text editor (programs>accesories>Notepad) and save your document as "index.html". Once you have finished coding the page, open upa browser, choose file>open, and open up the "index.html" page you just created

<html>
<head>
<title>Introduction to basic XHTML</title>
</head>
<body>
<div id="titlebar">USP/Media Center/ Video</div>

<div id="navigation">
Video
<br />Audio
<br />USPNet
<br />Photography
<br />Graphics
<br />Multimedia
<br />Workshop
</div>

<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. </div>

</body>
</html>

4th Class: Thursday 13 March: 12-1

Hands-on Session/ Consistency

We will spend the entire session working on the teams' sections, ensuring that they are all up to the same level, reviewing them for consistency, and culling
Explain that normally pages would not be created in isolation of each other
This casual case-study (800kb PDF!) I wrote after a workshop between IDEO and Multex Investor Europe may be helpful, as it shows the thinking behind changes to a UK website serving several countries and languages. Keep in mind it was written for web-people.

Code covered in class

<a href>
<div> vs. <span> and <id> vs. <class> example:show how this can be applied to nav and subnav links; code it with the class
<em> and <strong>, and why it is better than <i> and <b>: rant against the <font> tag et al.
comment:  closes it. This hides the writing from the computer. Sueful for making notes t ourselves without messing up the code

Code written in class:

<html>
<head>
<title>USP Video Unit</title>
</head>
<body>

<div id="nav">
<a href="video_services.html" class="subnav">Services</a>
</div>

</body>
</html>

Assignment

Teams must have full text by next week, on a disk.

5th Class: Tuesday 18 March

XHTML

WebClassXhtmlChapter
Complete Navigation with nav and subnav

CSS

WebClassStyleChapter

Show how a separate CSS document can affect the XHTML's look
- id (#) verse class (.)
  - (#nav)
  - (.nav)
  - (.subnav)
  - (#content)
  - text-color, font-size, (#RRGGBB), padding, margin;
- Linking the external CSS
  - In the <head>: <link rel="stylesheet" href="styles.css" type="text/css" media="all" />

CODE

<html>
<head>
<title>Welcome to the Multimedia Unit</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="all" />

</head>
<body>

<div id="nav">
<a href="video.html" class="nav">Video</a>
<br /><a href="audio.html" class="nav">Audio</a>
<br /><a href="uspnet.html" class="nav">USPNet</a>
<br /><a href="photo.html" class="nav">Photography</a>
<br /><a href="graphics.html" class="nav">Graphics</a>
<br /><a href="mm.html" class="nav">Multimedia</a>
<br /><a href="mm_services.html" class="subnav">Services</a>
<br /><a href="mm_training.html" class="subnav">Training</a>
<br /><a href="mm_contact.html" class="subnav">Contact</a>
<br /><a href="projection.html" class="nav">Projection</a>
</div>

<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. </div>

</body>
</html>

Notice the

in the head of the document.

Then we open up a new text file and save it as "styles.css". It should look like this:

|#nav {
font-family:futura, arial, sans-serif;
font-weight:bold;
}

.subnav {
padding-left:30px;
font-weight:normal;
}

.nav {
padding-left:0;
}

When you view your html file in Internet Explorer or a renother recent browser you should see the changes.

KEY POINTS TO REMEMBER:

(#) is for id
(*) is for class
don't forget the space BEFORE the slash in a self-closing tag, i.e. <br SPACE /> <br />

Assignment

''Collect images for next week, 72dpi, .jpg or .gif
get FULL TEXT

6th Class Thursday 20 March

Complete the Template

<div id="titlebar">
<form>
<input>
border

HTML Written Today

<html>
<head>
<title>Welcome to the Multimedia Unit</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="all" />
</head>
<body>

<div id="titlebar">
USP/ Media Centre/ Multimedia Unit
<form>
Search:
<input type="text" />
<input type="submit" value="GO!" />
</form>
</div>

<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
</div>

</body>
</html>

Hexadecimal Colors

1. RRGGBB
Visibone Color Lab

More CSS

This is the CSS we used in the workshop

|#titlebar {
background-color:#0000FF;
border-bottom: 10px solid #FF0000;
color: #00FF00;
}

7th Class: Tuesday 25 March

Applying CSS to generic "built-in" tags

h1 h2 h3 h4
a:hover
a:link
a:visited
body
em
strong

8th Class Thursday 27 March

FTP

download and use an FTP program to upload our content to the web
You can find a list of FTP software at Google Directories: FTP Clients

Testing

Validation
- CSS Validator
- XHTML Validator
- WAI Validator (Web Accesibility Conformance)
UsabilityTesting
- 14 Usability Heuristics
- Target tasks:
  - Lecturer wants to book a room with projector
  - Lecturer wants to get a class videotaped
  - Lecturer wants to use USPNet
  - Lecturer needs a book-cover designed
  - Student wants help with using the internet
  - Lecturer wants to put class nots online
  - Student wants to learn HTML
Browser quirks
Hiding CSS from browsers with @import;
- Explain the "Cascading" part of Cascading Style Sheets: inheritance
- @import url(css2.css);
- internal CSS: <style type="text/css">

Images

72dpi
gif and jpg

Going Further

Show some examples of work that is a bit different
Show resources for teaching ourselves more about Web Building

WorkshopEvaluation

Code used in Class

The simple <html> tag I had given you in the first HTML session needs to be coded differently to validate as acceptable code according to W3C standards.

So, in order to validate, you'll have to take out your opening <html> tag and replace it with this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

This code tells the browser which language the document is using, and gives it a link that tells it how the language works.

You'll also have to add this <meta> tag somewhere in the <head> section:

That code tells the computer the character set of the code. Like, english characters, chinese, arabic, etc.

So, in summary, your HTML document should look like this. I have bolded the new code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Welcome to the Multimedia Unit</title> <link rel="stylesheet" href="styles.css" type="text/css" media="all" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> </head> <body>

<div id="titlebar"> USP/ Media Centre/ Multimedia Unit <form> Search: <input type="text" /> <input type="submit" value="GO!" /> </form> </div>

<div id="nav"> <a href="video.html" class="nav">Video</a> <br /><a href="audio.html" class="nav">Audio</a> <br /><a href="uspnet.html" class="nav">USPNet</a> <br /><a href="photo.html" class="nav">Photography</a> <br /><a href="graphics.html" class="nav">Graphics</a> <br /><a href="mm.html" class="nav">Multimedia</a> <br /><a href="mm_services.html" class="subnav">Services</a> <br /><a href="mm_training.html" class="subnav">Training</a> <br /><a href="mm_contact.html" class="subnav">Contact</a> <br /><a href="projection.html" class="nav">Projection</a> </div>

<div id="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. </div>

</body> </html>

Certificate

Final Project

The final project is optional for wokrshop participants. However, it is a necessary part of the assessment required to receive a certificate of completion. In other words, if you want a certificiate, and some more hands-on web-building experience, you need to complete the final project. This project involves handing in your fully-completed web page according to certain specifications. If you are interested in completing the final project towards your certificate, email mailto robbins_c@usp.ac.fj and I will send you the instructions. Otherwise, you can find detailed instructions at WebBuildingFinalProject.

Assessment Criteria

Participant must demonstrate knowledge of the most basic concepts behind:

web building process
usability
information-architecture
navigation design
html
css
ftp
web color

and the ability to apply and develop these concepts on an actual web page. I will assess this in a simple 30 minute interview conducted after reviewing your web page.