multimedia & the world wide web

Multimedia & The World Wide Web

HCI 201 Multimedia and the www

Review!

URL: Universal Resource Locator

• 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

HTML Skeleton

<title>Title of this web page</title>

</head>

<body>Stuff you want to present on this page

</body>

</html>

The Flesh on an HTML document

• Tags + Contents + Comments• Comments

• Contents <body>

- Text (included)- Multimedia obj & pictures are linked

Tools for the Web Designer

• 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.

Controlling page layout with tables

• Separate pages into different sections- Create one table for the entire page.

- Add content into cells:

TextImagesFormsTables…

Link list

Company logo

Nesting Tables

Organization and Site Structure

• 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

Your local files structure

Lab machine

Your folder

AssignmentsPic folderImages

Media folderpage1 page2 page3

animation

Homepage:Index.htm

Define site!

Your directory structure

lab machine

DePaul Student Server

public_html

web folder

Your directory structure

your account (root)

public_html

AssignmentsPic folderImages

Media folderpage1 page2 page3

animation

HomepageIndex.htm

Root Main Page Company Services

Service A Service B Images

Products Product A Product B Images

ProductA.jpgProductB.jpg

About Us Company History Bios Images

Contact Images

ImagesPhoto1.jpgLogo.gif

A More Elaborate Site

Source File Management

• 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

Source File Management

• 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

Error Checking

• 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

Troubleshooting

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

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

Content matters most!

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?

Content

Brainstorm ideas for your website!Organize the content into clear and intuitive

categories.What’s the navigational structure – roadmap?

Make the content readable

• 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

Content to prepare:

• Images – Logos – Products – Decorative – Navigational

• Information – Articles – News – Calendar of events – Contact names and numbers – Reference material

Page Design

– 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

Web Design

• 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.

Page content hierarchies

• Most important elements should be at the top/left of the page

• Consider monitor size/resolution• Left to right

Page Design– make decision

• 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

Direction

Color-> feeling, some samples:

Then, make decision:

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

Flowcharting

• 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

Design

• 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

Web Aesthetics

• 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

Navigation

• 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?

Navigation

• 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

multimedia & the world wide web

multimedia obj pictures

site structureorganizing

working copy of files

file managementyou

web server

content change

tableswinnyhci

source files

Documents

multimedia & the world wide web

hci 201 multimedia and the world wide web. the internet

multimedia and the world wide web hci 201 lecture notes #2b

i servizi di internet: il world wide web. · il world wide...

multimedia and the world wide web hci 201 lecture notes #1b

multimedia and the world wide web hci 201 lecture notes #5b

multimedia and the world wide web hci 201 lecture notes #9a

automatically determining semantics for world wide web...

multimedia and the world wide web hci 201 lecture notes #3b

is1811 multimedia development for internet applications...

12 - perancangan multimedia untuk world wide web

the htlm history hmtl basics. world wide web world wide...

1 world wide webcast paola catapano silvano de gennaro...

multimedia and the world wide web

multimedia and the world wide web hci 201 lecture notes #7a

multimedia and the world wide web hci 201 lecture notes #9b

automatically determining semantics for world wide web...

perancangan multimedia untuk world wide web pertemuan 21&22...

2900+ people world-wide 75 offices world-wide two offices

world-wide perspectives - cia.gov · title: world-wide...