HCI 201 Multimedia and the www. URL: Universal ... Pi

1
HCI 201 Multimedia and the www

• Multimedia The World Wide Web

winny
2
Review!
HCI 201 Multimedia and the www
winny
3
URL Universal Resource Locator
HCI 201 Multimedia and the www

• Four parts to each one (some parts optional)
• Protocol
• Domain name or server IP address
• Director(ies)
• File name

http//facweb.cs.depaul.edu/yqwang/index.htm
Protocol
Domain Name
Directory
File Name
winny
4
HTML Skeleton
HCI 201 Multimedia and the www

• lthtmlgt
• ltheadgt
• lttitlegtTitle of this web pagelt/titlegt
• lt/headgt
• ltbodygt
• Stuff you want to present on this page
• lt/bodygt
• lt/htmlgt

winny
5
The Flesh on an HTML document
HCI 201 Multimedia and the www

• Tags Contents Comments
• Comments
• lt!-- some explanation of your code --gt
• Contents ltbodygt
• - Text (included)
• - Multimedia obj pictures are linked

winny
6
Tools for the Web Designer
HCI 201 Multimedia and the www

• An editor
• Text editor
• Dreamweaver/FrontPage, etc
• A browser
• Not really necessary, but you want to test your
  work
• A connection to the Internet and access to a web
  server.

winny
7
Controlling page layout with tables
HCI 201 Multimedia and the www

• Separate pages into different sections
• - Create one table for the entire page.
• - Add content into cells
• Text
• Images
• Forms
• Tables

Link list
Company logo
Image

winny
8
Nesting Tables
HCI 201 Multimedia and the www
winny
9
Nesting Tables
HCI 201 Multimedia and the www
winny
10
Organization and Site Structure
HCI 201 Multimedia and the www

• Organizing your site carefully from the start can
  save you frustration and time later on
• Break down your site into categories and put
  related pages in the same folder

winny
11
Your local files structure
HCI 201 Multimedia and the www
Lab machine
winny
12
Your directory structure
HCI 201 Multimedia and the www
DePaul Student Server
public_html
lab machine
web folder
winny
13
Your directory structure
HCI 201 Multimedia and the www
your account (root)
mail
winny
14
HCI 201 Multimedia and the www

• Root
• Main Page
• Company Services
• Service A
• Service B
• Images
• Products
• Product A
• Product B
• Images
• ProductA.jpg
• ProductB.jpg
• About Us
• Company History
• Bios
• Images
• Contact
• Images
• Images

A More Elaborate Site
winny
15
Source File Management
HCI 201 Multimedia and the www

• You should ...
• Establish and follow file naming conventions
• Lowercase
• Underscore between words
• Keep a copy of all source files in your
  possession
• Don't rely on DePaul, your employer, or your ISP
  to keep your work

winny
16
Source File Management
HCI 201 Multimedia and the www

• You should ...
• Make a working copy of files before making
  sweeping changes, then use the working copy once
  you are sure everything works
• Create an archive of sources that you are not
  actively using, but may want to use sometime

winny
17
Error Checking
HCI 201 Multimedia and the www

• ALWAYS check and double-check the site for
  spelling and grammatical errors
• Make sure the images and links are all working
  properly (TEST!!!)
• Errors make a site appear to be unprofessional

winny
18
Troubleshooting
HCI 201 Multimedia and the www

• Make sure you refresh your browser if you have
  made a repair to the code and come back to look
  at it again

winny
19
HCI 201 Multimedia and the www

• Before you start it is important to determine
  what the site will look like and how it will be
  organized!

winny
20
Content matters most!
HCI 201 Multimedia and the www

• Prepare it as much as possible, as early as
  possible.
• What content already exists and what must be
  created?
• How often does the content change, or should it
  change?
• What resources are required to create and
  maintain the site?

winny
21
Content
HCI 201 Multimedia and the www

• Brainstorm ideas for your website!
• Organize the content into clear and intuitive
  categories.
• Whats the navigational structure roadmap?

winny
22
Make the content readable
HCI 201 Multimedia and the www

• Good combinations for web page
• Bad combinations for web page

Blue on White
Yellow on Black
White on Gray
Red on Pink
Yellow on White
Blue on Purple
Red on Green
Green on Orange
winny
23
Content to prepare
HCI 201 Multimedia and the www

• Images
• Logos
• Products
• Decorative
• Navigational
• Information
• Articles
• News
• Calendar of events
• Contact names and numbers
• Reference material

winny
24
Page Design
HCI 201 Multimedia and the www

• Style What's the overall impression you're
  trying to create?
• Layout Will the page composition be conventional
  or unconventional? How will the different
  elements be arranged into visual groupings? How
  will the navigation options be presented?
• Words Which tone of voice is best for the site's
  purpose and audience?
• Page design ideas should first be sketched out on
  paper. Working out your ideas on paper allows you
  to quickly explore different design ideas

winny
25
Web Design
HCI 201 Multimedia and the www

• The heart of design is communication.
• The basic rule for any design is Form follows
  function.
• Design must support function to the fullest
  extent possible.
• Think of web site navigation.
• The coordination between form and function is
  invisible to the user when done well and
  painfully obvious when it is not.

winny
26
Page content hierarchies
HCI 201 Multimedia and the www

• Most important elements should be at the top/left
  of the page
• Consider monitor size/resolution
• Left to right

winny
27
Page Design make decision
HCI 201 Multimedia and the www

• Shape as a design Element
• Square/round/wavy?
• Choose a set of color palette
• Keep those decision consistency
• Visual design should reflect
• The purpose of the site
• The identity of the Web site sponsor
• And contribute to the site's usability

winny
28
HCI 201 Multimedia and the www
winny
29
Unity
HCI 201 Multimedia and the www
winny
30
Direction
HCI 201 Multimedia and the www
winny
31
Direction
HCI 201 Multimedia and the www
winny
32
Color-gt feeling, some samples
HCI 201 Multimedia and the www
winny
33
HCI 201 Multimedia and the www
winny
34
HCI 201 Multimedia and the www
winny
35
HCI 201 Multimedia and the www
winny
36
HCI 201 Multimedia and the www
winny
37
HCI 201 Multimedia and the www
winny
38
Then, make decision
HCI 201 Multimedia and the www

• Functionality
• Static pages
• Forms
• Commerce
• Multimedia
• Chat 
• Search
• Login
• Database-driven

winny
39
Flowcharting
HCI 201 Multimedia and the www

• Try arranging your content in different ways to
  find the best fit, should information be
• Presented alphabetically?
• Grouped into categories?
• Presented along a timeline?
• Sorted from simple to complex?
• Organized into a hierarchy? 
• With these things in mind, you can construct a
  flowchart showing the structure of the Web site
  as a whole
• A good flowchart of your site design shows
• -- How pages will be organized
• -- the paths between pages

winny
40
Design
HCI 201 Multimedia and the www

• Most people visit Websites to find information or
  to accomplish some task
• The content of the site should be organized in a
  way that is meaningful and useful to the intended
  audience
• Users need a logical structure so they know where
  they are and how they get there
• It is important to anticipate what the user will
  want to do, how he or she will use each section
  of the site, and in what order

winny
41
Web Aesthetics
HCI 201 Multimedia and the www

• Speed
• Do more with less
• Use images sparingly
• Select the most suitable image format
  (jpeg/gif/png)
• The more high-bandwidth media you use, the more
  you will limit your audience

winny
42
Navigation
HCI 201 Multimedia and the www

• Most people ask four basic questions when they
  are getting around (anything)..
• Where am I?
• Where can I go?
• How will I get there?
• How can I get back to where I once was?

winny
43
Navigation
HCI 201 Multimedia and the www

• Navigation that really works should...
• Be easily learned
• Remain consistent
• Provide feedback
• Appear in context
• Offer alternatives
• Communicate the site hierarchy
• Provide clear visual messages
• Be appropriate to the site's purpose
• Support users' goals and behaviors

winny