Website Designing

TaskYou are required to produce a report outlining the planning and design of a website on the following topics: Let’s Cook Together – a cooking school for corporate team building events. The following requirements assessment item must be met. · Following the System Development Life Cycle (SDLC) you are required to plan and scope your project and provide a detailed report of your plan – see Topic 2 and associated readings. · You should discuss the objectives of the site, intended audience and user requirements. · Your plan must include the following multimedia elements – images, animation, video and audio. · A storyboard sequence is required for your site. · You will need to discuss content, layouts, colour schemes, font selections and the use and purpose of multimedia content (i.e. images, animation, video and audio) within your design. You will need to ensure that your site plan addresses usability and accessibility criteria.RationaleThis assessment task covers Topics 4 and 5 and has been designed to ensure that you are engaging with the subject content on a regular basis. More specifically it seeks to assess your ability to: · recognise the importance of content and instructional design;· demonstrate an awareness of multimedia design and documentation;distinguish between online multimedia development/prototyping, evaluation methodology and procedure.Marking criteriaAnalysis· Objectives of site· Audience· User/client requirements· Standards· Testing/evaluation methods8 marksVisual design· Discussion of colours, fonts, layouts· Storyboards for key screens5 marksMultimedia elements· Appropriateness and explanation of multimedia elements3 marksAccessibility· Discussion of importance and how you will address accessibility in your website.2 marksReferencing· sources in APA style2 marksTotal20 marks

ITC216_ITC589_week01.pptx

ITC216 & ITC589

Week 1 – Background to Multimedia

This week we will cover:

The evolution of the Internet, Internet standards organizations, and the difference between the Internet, intranets, and extranets.

The beginning of the World Wide Web, ethical use of information on the Web, Web Accessibility, and future Internet trends.

An introduction to Multimedia and the difference between online and offline Multimedia

Learning Outcomes

Everything that can be invented has been invented.

Charles H. Duell, Commissioner, U.S. Office of Patents, 1899

Famous predictions

I think there is a world market for maybe five computers.

IBM Chairman, Thomas Watson, 1943

Famous predictions

Computers in the future may have only 1,000 vacuum tubes and perhaps weigh only 1.5 tons.

Popular Mechanics, 1949

Famous predictions

There is no reason for any individual to have a computer in their home.

Ken Olson (President of Digital Equipment Corporation) at the convention of the World Future Society in Boston, 1977

Famous predictions

640K ought to be enough for anybody

Microsoft Chairman, Bill Gates, 1981

Famous predictions

Telecommunications

Some were sceptical :
‘The telephone is probably a good thing for the Americans, but here in London we have enough messenger boys.’

Some more visionary
‘The telephone is such an important invention… that there will come a time when every town and city will have one.’

In the beginning

When phone came along no technological parallel

Had a long development and large learning exp for society

When fax came along was not such a big deal cos it was just a diff way of doing the same thing

Internet on the other hand is a new way of doing a new thing and we still arent really sure what that thing is at the moment

Tel co’s see as future for comms

Pubs – future for pubs

Broadcasters talk about web TV and so on

Who knows what dir the net will take on in the future – who would have guessed back when tel was first invented we’d be where we were today?

Question

How long do you think the Internet has been around?

Internet

Interconnected network of computer networks

ARPAnet

Advanced Research Project Agency

1969 – four computers connected

NSFnet

National Science Foundation

Use of the Internet was originally limited to government, research and academic use

1991 Commercial ban lifted

Evolution of the Internet

Internet is everywhere – you cant watch TV or radio without ads encouraging you to visit their websites.

The Internet began as a network to connect computers to research facilities and universities and was started with 4 computers in 1969

Advanced research projects agency

National Science Foundation was developed and then connected to arpanet

From 4 in 1969

To 100,000 in 1989

In 1991 the ban on commercial activity was lifted and by the end of 1992 there were over 1 million hosts and by 2006 439 Million hosts

Reasons for
Internet Growth in the 1990s

Removal of the ban on commercial activity

Development of the World Wide Web by Tim Berners-Lee at CERN (1991)

Development of Mosaic, the first graphics-based web browser at NCSA – easier to use

Growth of Internet

Hobbes Internet Timeline

www.zakon.org/robert/internet/timeline
/

How many website were there in 1990?

(when I was in high school…)

How many website were there in 2000?

How many websites are there now? (approx)

Questions

Changes in telecommunications

Cheaper, increased reliability

Ability to transmit large quantities of data

Move from analogue to digital

More service providers

As a result

Computer networks, data communication became common

Use of computers for international telecommunications available to all

How did we get here

Notes

What do you think has driven Internet growth in the past 5 years?

Question

http://www.netvalley.com/intval1.html

http://vlib.iue.it/history/internet
/

A great video that explains the history of the Internet in 8 minutes:
www.youtube.com/watch?v=9hIQjrMHTv4

Some more history links

To continue more history – look at

Client/Server: An architecture that allows the distribution of computing tasks between/among two/more computing resources.

Client: The computer requesting a service

Server: The computer providing the requested service

The Client/Server (C/S) Model

Server – designed to address a client’s request

Client – any computer connected to a server within a network

A cluster of computers (called clients) connected to one or more servers to form a network

Allow authorized user to access any programs/application residing on the server

Client/Server Network

Client/Server Network (Cont’d)

Benefits

Centralized security control

Simpler network administration than peer-to-peer network

Centralized password

More scalable

Ideal for computers that are far apart

Drawbacks

Network failure – clients are helpless if server fails

Specialized staff are needed

Higher costs

Client requests a specific page

Server locates page and serves it up to client as a transaction

Pages identified by URL

Pages are bundled into packets for transmission

Uses Transmission Control Protocol/Internet Protocol (TCP/IP)

Internet Communication

Packet

Grouping of data for transmission on a network

Large messages are split into a series of packets for transmission

Protocol

A rule governing how communication should be conducted between two parties, two computers, or a sources and a destination

Internet Protocol

Set of rules used to pass packets

Information Transfer

Permanent Connection

Local Area Network (LAN)

Cable modem

Asynchronous digital subscriber (ADSL)

Dial-Up Connection

Online mode

Offline mode

Telecommunication
Infrastructure of the Internet

Intranet

A private network contained within an organization or business used to share information and resources among coworkers.

Access to the intranet is normally controlled by an authentication process which checks the user’s rights to access requested information

Extranet

A private network that securely shares part of an organization’s information or operations with external partners

Intranet & Extranets

When an intranet connects to the outside internet, usually a gateway or firewall protects the intranet from unauthorised access

Privacy and security are important issues – digital certificates, encryption of messages and VPN’s (virtual private networks) are some technologies used to provide security and privacy

The Internet Society

A professional organization that provides leadership in addressing issues related to the future of the Internet

IETF– Internet Engineering Task Force

RFC – Requests for Comments

IAB – Internet Architecture Board

Internet Standards & Coordination

IETF – protocol engineering and development part of Internet – development of new internet stand specifications

IAB – defining overall archtecture – provides guidance and direction to IETF

ICANN – The Internet Corporation for Assigned Numbers & Names

Non-profit organization

Main function is to coordinate the assignment of:

Internet domain names

IP address numbers

Protocol parameters

Protocol port numbers.

Internet Standards & Coordination

Individual networks and country transmission nets are independent

Control really only exists at a technical standards level

Does control host numbering and names to keep host addresses unique, like telephone numbers.

Packet Switching

Break messages into small pieces called packets

Route packets individually across network

The Internet

W3C – World Wide Web Consortium

Develops recommendations and prototype technologies related to the Web

Produces specifications, called Recommendations, in an effort to standardize web technologies

WAI – Web Accessibility Initiative

Web Standards
and the W3C Consortium

WAI – Web Accessibility Initiative

Develops recommendations for

web content developers,

web authoring tool developers,

developers of web browsers, and

developers of other user agents to facilitate use of the web by those with special needs.

WCAG

Web Content Accessibility Guidelines
http://www.w3.org/WAI/WCAG20/quickref/

Web
Accessibility

Section 508 of the Rehabilitation Act

requires that government agencies must give individuals with disabilities access to information technology that is comparable to the access available to others

Web
Accessibility

What is Multimedia

Combination of different media represented in digital form

Combination of different media is not new

Integration of media is natural

Multimedia

“any combination of two or more media, represented in digital form, sufficiently well integrated to be presented via a single interface, or manipulated by a single computer program.”

Chapman & Chapman, 2004.

“a multimedia system is a system that is interactive and uses more than one medium in an integrated way. The media are rich media and are stored media”

Barfield, 2004

“the combination of a variety of communication channels into a coordinated communicative experience for which an integrated cross-channel language of interpretation does not exist.”

Elsom-Cooke, 2001

“any combination of text, art, sound, animation, and video delivered to you by computer or other electronic or digitally manipulated means.”

Vaughn, 2004

Some definitions

www.animallogic.com

Multimedia – example

Is computer-based multimedia the next leap forward for human expression?

Want to encourage you to think

And form your own opinions

Not tell me what you think I want to hear

Small group – lecture / tutorial

Pose this question

“The implementation of multimedia capabilities in computers is just the latest episode in a long series: cave painting, hand-crafted manuscripts, the printing press, radio and television… These advances reflect the innate desire of man to create outlets for creative expression, to use technology and imagination to gain empowerment and freedom for ideas.”

Glenn Ochsenreiter, Director, Multimedia PC Council.

www.disney.com.au

pixyland.org/
peterpan
/

What do you think?

Applications

Education and training

Business

POS and ‘Kiosks’

Entertainment and gaming

Government and politics

Reference and data dissemination

Computer-mediated communications

Where do we use Multimedia?

As said before – mm is still relatively new and new developments are constantly changing the boundaries between what can be successfully achieved over the Internet, an intranet (a high speed, dedicated, private, local area network), and what is best left to the stand-alone computer with or without a CD-ROM.

Some of the areas where mm has already been used are:

“Interactivity empowers the end users of your project by letting them control the content and flow of information.”

Vaughn, 2004

Interaction

Pg 15 of chapman – diff view

Interactivity is a misnomer – altho we do and will continue to use the term in broad terms – when a computers role is to present choices and respond to them – it cannot be seen to be keeping up its end of the bargain. – chapman says the only true interaction can occur when another person is involved. Some games for example – only interaction with fellow players is when you try to kill them.

Vaughn

When you allow an end user to control what and when the elements are delivered.

Needs to be used approp – summers

Can be used to shape info to a users particular needs

It can be used persuasively – persuade users to take on a service on take on your info – con artists and salespeople alike know that if your goal is to get users to act in some way – then you can encourage that action by building a pattern of active agreement and involvement. Ethics is the only diff

“A picture is worth a thousand words” – but is it enough?

“Seeing is believing” – but experience brings understanding.

People learn or absorb information in different ways.

Why use Multimedia?

one or two words could make all the diff to clarifying a pic

Seeing something happen dynamically in a video, animation (even cartoon) or movie is often much more readily understood than reading or hearing the same concept.

Helps demonstrate subjects that require time, movement etc. to understand

* Supports different learning styles

* Adds interest to learning materials

* Supports those with special needs

Local

Hard drive

CD ROM

DVD

Online

Use Internet and WWW to interact with a remote application

Hybrid

Online and Local

Intranet multimedia application

Multimedia Delivery

Storage / speed

An extension of multimedia that utilises the Internet and WWW to access and deliver data and applications.

Can provide

Current information and data

24hr access

Global access

Cross platform delivery

Online Multimedia

Server and client software

Authoring software

Media size and data rate

Interaction required

Pre-loading and streaming

Synchronisation

Run-time environment

Online VS CD ROM

URLs not up to date

Information content not up to date

Over-done effects/graphics

Users can modify your designs in the browser – change text size, turn off images, turn off sound

Users have different platforms

Bandwidth limitations

Problems with Online Multimedia

Self explan

Exercise 1

Scenario: you are creating a website for the new tram line that is being currently built in Sydney.

What are the advantages and disadvantages of using online multimedia on this site?

What kinds of multimedia could be helpful to explain and promote this service?

Exercise 2

Scenario: You are researching the competition to help you create an interactive website for a cool new sunglasses.

Find 3 different competitor’s websites using Google

For each website you visit, write down the name of the site, its URL, and:

Describe each site in terms of its multimedia elements.

Discuss whether its multimedia content is appropriate and where additional media content might improve the site.

Think about some criteria you could use to rate the sites – how would you decide which website is the best?

Please purchase your textbook!

Think about which assignment topic you would like to choose.

Before next week

image1

image2

image3

image4

ITC216_ITC589_week02.pptx

ITC216 and ITC589

Week 2 – Topic 1

Accessibility

Information from
http://www.w3.org/WAI/

Testing

This week

What is Web Accessibility?

Web accessibility means that people with disabilities can use the Web.

More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.

Web accessibility also benefits others, including older people with changing abilities due to aging or people who are temporarily injured or ill.

People who are blind or have vision impairments can use appropriate equipment and software to gain access to banking services, online grocery shopping, and electronic documents in audio or large print form

People who are deaf or have hearing impairments could have more immediate access to captioning or transcription of audio material

Many people whose disability makes it difficult for them to handle or read paper pages can use a computer, for example with a modified keyboard or with voice control

Worldwide Web publications may provide an effective means of access for people whose disability makes it difficult for them to travel to or enter premises where the paper form of a document is available.

What is Web Accessibility?

Accessibility barriers

Millions of people have disabilities that affect their use of the Web.

Currently most Web sites and Web software have accessibility barriers that make it difficult or impossible for many people with disabilities to use the Web.

As more accessible Web sites and software become available, people with disabilities are able to use and contribute to the Web more effectively.

What are some conditions or disabilities that can affect computer/Internet use?

Question

Accessibility benefits everyone

Web accessibility also benefits people without disabilities.

For example, a key principle of Web accessibility is designing Web sites and software that are flexible to meet different user needs, preferences, and situations.

This flexibility also benefits people without disabilities in certain situations, such as people using a slow Internet connection, people with “temporary disabilities” such as a broken arm, and people with changing abilities due to aging.

As issued by the Australian Human Rights Commission under section 67(1)(k) of the Disability Discrimination Act 1992

Authorises the Commission to issue guidelines for the purpose of avoiding discrimination.

World Wide Web Access:
Disability Discrimination Act Advisory Notes

www.hreoc.gov.au/disability_rights/standards/WWW_3/www_3.html

Australian Requirements

The provision of information and online services through the Worldwide Web is a service covered by the DDA. Equal access for people with a disability in this area is required by the DDA where it can reasonably be provided.

This requirement applies to any individual or organisation developing a Worldwide Web page in Australia, or placing or maintaining a Web page on an Australian server.

Disability Discrimination Act 1992
(“the DDA”)

This includes pages developed or maintained for purposes relating to employment; education; provision of services including professional services, banking, insurance or financial services, entertainment or recreation, telecommunications services, public transport services, or government services; sale or rental of real estate; sport; activities of voluntary associations; or administration of Commonwealth laws or programs. All these are areas specifically covered by the DDA.

In addition to these specific areas, provision of any other information or other goods, services or facilities through the Internet is in itself a service, and as such, discrimination in the provision of this service is covered by the DDA. The DDA applies to services whether provided for payment or not.

Disability Discrimination Act 1992
(“the DDA”) cont.

The Web is an important resource:

Education

Employment

Government

Commerce

Health care

Recreation

Therefore it is essential that the Web provides equal access and equal opportunity to people with disabilities.

Why Web Accessibility is Important

The Australian Human Rights Commission believes that the Web Content Accessibility Guidelines that have been developed by the W3C Consortium provide the most comprehensive set of benchmarks for assessing the accessibility of websites, and represent current international best practice in accessible web design.

The WAI:

Develops

Strategies

Guidelines

Source materials

Resources

To make the Web accessible to people with disabilities

Welcomes

Participation from around the world

Volunteers to review, implement & promote guidelines

Dedicated participants in Working Groups

Web Accessibility Initiative – WAI

WCAG 2.0 is a stable, referencable technical standard.

It has 12 guidelines that are organized under 4 principles: perceivable, operable, understandable, and robust.

WCAG 2.0 is now the standard to be used for all new web content.

www.w3.org/WAI/intro/wcag.php

Web Content Accessibility Guidelines

The WCAG 2.0 applies to all Web content

Not specific to any one Web technology.

WCAG 2.0 is organized around four design principles for Web accessibility:

Content must be perceivable

Interface elements in the content must be operable

Content and controls must be understandable

Content must be robust enough

Each principle has guidelines

Each guideline has success criteria

WCAG 2.0

[Priority 1 or Level A]

A Web content developer must satisfy this checkpoint.

[Priority 2 or Level AA]

A Web content developer should satisfy this checkpoint.

[Priority 3 or Level AAA]

A Web content developer may address this checkpoint..

Priorities & Levels

Text Alternatives:

Guideline 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language

Non-text Content:

1.1.1 All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)Understanding Success Criterion 1.1.1

Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose.

Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content.

WCAG 2.0 examples of Level A

WCAG 2.0 – Quick reference

http://www.w3.org/WAI/WCAG20/quickref/

WCAG 2.0 Quick Reference List

1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

1.2 Time-based Media: Provide alternatives for time-based media.

1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout ) without losing information or structure.

1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

2.1 Keyboard Accessible: Make all functionality available from a keyboard.

2.2 Enough Time: Provide users enough time to read and use content.

2.3 Seizures: Do not design content in a way that is known to cause seizures.

2.4 Navigable: Provide ways to help users navigate, find content and determine where they are.

3.1 Readable: Make text content readable and understandable.

3.2 Predictable: Make Web pages appear and operate in predictable ways.

3.3 Input Assistance: Help users avoid and correct mistakes.

4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies.

Examine pages using graphical browsers

Use a graphical user interface (GUI) browser

Turn off images, and check for alternative text

Turn off the sound, and check for text equivalents.

Use browser controls to vary font-size

Test with different screen resolution, and check that horizontal scrolling is not required

Change the display colour to grey scale and check that the colour contrast is adequate.

Implementation – quick test

Without using the mouse, use the keyboard to navigate through the links and form controls on a page

Examine pages using specialized browsers

Use a voice browser or a text and examine

Is equivalent information available through the voice or text browser as is available through the GUI browser?

Is the information presented in a meaningful order if read serially?

Implementation – quick test

Evaluating accessibility early and throughout development can identify accessibility problems early when it is easier to address them.

Simple techniques can determine if a Web page meets some accessibility guidelines.

There are evaluation tools that help with evaluation.

However, knowledgeable human evaluation is required to determine if a site is accessible.

Evaluating the Accessibility of a Web Site

Images and animations: Use the alt attribute to describe the function of each visual.

Image maps. Use the client-side map and text for hotspots.

Multimedia. Provide captioning and transcripts of audio, and descriptions of video.

Hypertext links. Use text that makes sense when read out of context. For example, avoid “click here.”

Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.

10 Quick tips for improving accessibility

Graphs & charts. Summarize or use the longdesc attribute.

Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported.

Frames. Use the noframes element and meaningful titles.

Tables. Make line-by-line reading sensible. Summarize.

Check your work. Validate. Use tools, checklist, and guidelines at
http://www.w3.org/TR/WCAG

10 Quick tips for improving accessibility

www.webpagesthatsuck.com/worst-websites-of-2012.html

Now for a bit of fun

List as many accessibility problems as you can find on these sites:

www.medi-alert.com/

www.standrewsinthesquare.com

www.loreal.com.au

Exercise

Censorship

Authorship and ownership

Other Legal Issues

Obtaining rights

New works

Derivative works

“ There is a serious issue facing multimedia developers. Now that they have tools to creatively modify things, how much of someone else’s image, music, or video clip needs to be modified before ownership changes? This is up for grabs. There is a law called ‘fair use,’ which comes into play in a very limited way here. But I think there needs to be a law called ‘fair modification’”

Trip Hawkins, Chairman,

Electronic Arts

Derivative works

Australian Copyright Council

www.copyright.org.au

Information Sheets for:

Internet: copying from

Digital Agenda Amendments

Broadband Content

Music: copying MP3s, CDs and audio-cassettes

Videos & DVDs: copying

Australia’s Censorship System

http://libertus.net/censor/auscensor.html

Australia’s Internet Censorship System

http://libertus.net/censor/netcensor.html

Censorship

Developer ownership

Permission

Fair use

Public Domain

Trademarks

Plagiarism

Authorship / Ownership

Testing

Many IT systems and websites fail

Most fail as a result of inadequate testing. It is hard to get authors, programmers, managers, clients, etc. to realise just how much time and effort is needed for adequate testing in all the possible combinations of circumstances.

In addition, multimedia applications over the WWW need to be tested on all possible delivery platforms. This is often impossible so you must test:

on the targeted delivery platform

on as many platforms and as many variations of them as you can afford

in a planned and methodical way

keeping detailed records of your tests

Alpha testing is internal testing to confirm that your product works.

This includes unit testing, component testing, and system testing. During this time you will compress files, edit for misspelled words and unclear directions, broken links, and sync audio and video.

You will also test your product on the lowest common denominator machines to make sure download times are acceptable.

Devise clear testing procedures.

Study the effectiveness of design prototypes and acknowledge weaknesses.

Devise clear bug-reporting procedures and recheck corrected bugs systematically

Alpha testing

Check images and sounds as early as possible

Check

Graphic objects

Screen text – spelling, etc

Sound

Movies/videos

Hot spots/image maps

Unit testing

Test on as many hardware and OS platforms as possible

Test as many typical configurations as possible

Configuration testing

clicking anywhere on the screen

double-clicking as opposed to single-clicking

clicking outside the programs window to suspend it and then resuming.

running on all anticipated hardware configurations

changing the monitor’s resolution to see how colours display at lower resolution

Random testing

Real world trials

Best if devised and supervised by people not originally involved in the production of the site

The second phase of software testing in which a sampling of the intended audience tries the product out.

Beta testing can be considered “pre-release testing.”

Beta test versions of software can be distributed to curriculum specialists and teachers to give the program a “real-world” test.

Beta testing

Usability Testing

Usability testing of web sites is:

an essential element of quality assurance

a true test of how people actually use a web site

easy when you know how

A usability test is:

a series of individuals using a site under guidance from a facilitator

a test of whether outsiders can successfully use a web site

Usability Testing

Usability – allowing the user to manipulate the web’s sites feature to accomplish a particular goals. Three measures:

Effectiveness

The accuracy and completeness with which users complete a particular task

Efficiency

The resources expended in relation to the effectiveness of the user

Satisfaction

The comfort and acceptability of the web site to the user

Usability Testing

What are you testing?

With all tests you want to discover whether the user:

gets the point of the page(s)

understands the navigation system

can guess where to find things.

In a general test you want to know:

how do users interact with the web site you are testing?

what is difficult for people to do?

where do they get lost?

what makes sense to them?

what makes them feel distrustful or insecure?

what do they like and what do they hate?

In a specific test you might want to know, for example:

can the user accomplish a key task?

can the user find something specific?

Running the test

Users should be:

not have been involved with the web site in any way

completely new to the web site (so don’t ask the same person twice)

familiar with using the Web in general.

Prepare a script

Introduce yourself

Reassure, establish rapport: ‘Please think aloud, you cannot make mistakes, we are testing the site (not you).’

Clarify: purpose of test, confidentiality issues.

State task or tasks, e.g.: ‘What might you click on if you wanted to find out about a home loan?’

Allow users to try to accomplish the task in their own way.

End the test: say thank you, reply to previously unanswered questions, give payment or a gift if appropriate.

Running the test

Sit the user down and run through the first part of your script. Then turn on the computer and show the first web page you’re testing. Start the test.

Notice the user’s behaviour, and note every occasion the user:

hesitates, worries, or is forced to think

misunderstands something

gets frustrated or annoyed

gives up

You are only an observer. Watch the user do what comes naturally.

Don’t help.

Much of the time you’ll just be probing, and encouraging the user to say what they’re doing and thinking.

Use everyday language, not jargon.

Keep calm: you want the user to find faults! Don’t take it personally.

Write everything down.

Don’t interfere or ask leading questions.

Observation

Interview / verbal report

Thinking aloud

Questionnaire

Auto data-logging program

Software support

Data collection

After the test

Report on test

Write a 1-2 page report simply noting each problem the user found. Do it immediately while the test is fresh in your mind.

Optional: mark each problem as serious, less serious, or preference. (‘Preference’ means matters of opinion, such as whether the colours are nice. Preferences don’t affect usability.)

Recommend solutions only if you are required to do so. Clearly differentiate your recommendations from your observations.

Give your report to the appropriate person or group: e.g. the owner or web development team.

Links about usability testing

The following links provide details on what is and how to conduct a useability test. After reading these sites feel free to expand your knowledge of this area by finding more related resources.
An Australian Government site on usability testing :

www.finance.gov.au/publications/user-profiling-and-testing-toolkit/

Recommended procedures

www.webpagecontent.com/arc_archive/124/5/
Two useful usability test methods explained.

www.builderau.com.au/strategy/businessmanagement/soa/Usability-An-introduction/0,339028271,339189663,00.htm

Reading 1, Horton, S. (2006)

Reading 3, McCracken, D. (2004)

Chapter 11.7, Felke-Morris text

Last week’s reading:

Chapter One – Felke-Morris

Optional

Screen readers
www.webaim.org/articles/screenreader_testing/

Readings

Questions from Reading 3

How is program debugging similar to testing with a prototype?

What is the difference between formative and summative evaluation?

What is the difference between user-based and expert-based evaluation?

What is a test scenario? Where should you look for information to build test scenarios?

When testing with a paper prototype, how much of the website do you need to prototype?

What is thinking aloud? Why is it valuable during a user-based test?

What activities should the team carry out after the testing session?

image1

ITC216_ITC589_week03.pptx

Web Development & Design Foundations

ITC216 and ITC589 – Week 3

Identify the skills, functions, and job roles needed for a successful web development project

Describe the standard System Development Life Cycle

Apply the System Development Life Cycle to web development projects

Describe other common system development methodologies

Choose a domain name

Describe web hosting alternatives

Evaluate web hosting alternatives

Learning Objectives

Project Manager

Information Architect

Marketing Representative

Copy Writer & Editor

Content Manager

Graphic Designer

Database Administrator

Network Administrator

Web Developer

Skills and Functions Needed for a Successful Large-Scale Project

The skills and functions are essentially the same as on a large project

Each person may wear many “hats” and juggle their job roles

Example: The web developer may also be the graphic designer.

Some job roles may be outsourced

Most Common:
An external web site provider is used so there is less (if any) need for a Network Administrator.

Skills and Functions Needed for a Successful Small Project

Finding the right people to work on a project is crucial

Consider:

work experience

portfolio

formal education

industry certifications

Alternative:
Outsource all or portions of the project to a web design/development firm

Project Staffing Criteria

System Development Life Cycle

Problem Definition

Feasibility Study

Analysis

Design

Coding

Testing

Use

Multimedia Development LC

Problem Definition

Feasibility Study

Analysis

Design

Prototyping

Final authoring

Evaluation

Content creation

Testing

Production

The Development Process

Life cycle

1/3 of your time to be spent on each:

Problem definition, feasibility, analysis/design, prototyping

Final authoring, content creation, production

Testing and evaluation

Time allocation

Determine the intended audience

Determine the goals or mission of the web site

Short-term goals

Long-term goals

Develop measurable objectives such as:

Number of visitors

Percent of product sales

Main Job Roles Involved:

Client, Project Manager, Information Architect, Marketing Representative, Senior Web Developer

Web Development: Conceptualization

Determine the following:

information topics

functionality requirements (high-level)

Determine “what” a site will do – not “how” it will do it

environmental requirements

Content requirements

If a redesign, compare the old approach with the new approach

Review competitor’s sites

Estimate costs

Cost/Benefit analysis

Web Development: Analysis

Analysis

Client organisation’s mission

Applications objectives

Audience & audience level

Constraints

Requirement specifications

Delivery platform

All must be documented and approved

Analysis, Planning & Design

Clearly state the purpose of development. Is it:

To provide information

Educational

To gather information

Selling a product or range of products

Promotion of a company / a product

For communication (internal, external)

Analysis cont..

Planning – people, time & budget

Allocation of personnel and equipment resources

Scheduling the project (project timing)

Estimating: time, money and people

Establish and monitor a project budget (costing)

Identify and manage potential risks that could hinder the project

Planning

Determine the site organization

Prototype the design

Determine a page layout design

Document each page

Main Job Roles Involved:

Information Architect
or other Analyst,
Graphic Designer,
Senior Web Developer,
Content Manager,
Client, Project Manager,
Marketing Representative

Web Development: Design

Main Navigation Area

Software packages, languages, file formats

Naming conventions – data, files, variables

Layouts

Modules

Documentation

Specifying standards

Choose a web authoring tool

Organize your site files

Develop and individually test components

Add content

Main Job Roles Involved:

Project Manager, Senior Web Developer, Web Developer, Graphic Designer, Database Administrator, Content Manager

Web Development: Production

Test on different web browsers and browser versions

Test with different screen resolutions

Test using different bandwidths

Test from another location

Lots of testing!

Main Job Roles Involved:

Project Manager, Web Developer, Tester (sometimes web developer, sometimes Quality Assurance person), Client, Content Manager

Web Development: Testing

Automated Testing Tools and Validation

Automated Testing (Link checkers, etc.)

W3C XHTML and CSS validation tests

Usability Testing

Testing how actual web page visitors use a web site

Can be done at almost any stage of development

Early –use paper and sketches of pages

Design stage – use the prototype

Production & Testing phase – use actual pages

Web Development: Types of Testing

User or Client Testing

Client will test site before giving official approval for site launch

Approval & Launch

Obtain sign-off form or email from client

Upload files to web server

Create backup copies of files

MAKE SURE YOU TEST THE WEB SITE AGAIN!

Web Development: Approval & Launch

Contingency plans

Maintenance – the never-ending task…

Enhancements to site

Bug fixes to site

New areas to be added to site

A new opportunity or issue is identified and another loop through the development process begins.

Web Development: Maintenance

Re-visit the goals, objectives, and mission of the web site

Determine how closely they are being met

Develop a plan to better meet the goals, objectives and mission

Web Development: Evaluation

Establishes a Web presence for your business/ organization

New Business

choose domain name while selecting company name

Established Business

choose a domain name that relates to your established business presence

Domain Names

Describe your business

Be brief, if possible

Avoid hyphens

TLD (top level domain name)

.com, .net, .biz, .info and others

.org for non-profits

Brainstorm potential keywords

Avoid trademarked words or phrases

Know the territory (use Google to check competitors!)

Verify availability

Choosing a Domain Name

There are many domain name registrars, including

www.netregistry.com.au

www.melbourneit.com.au

http://godaddy.com

Visit Registrar, choose name, check availability, pay with credit card or Paypal

Registering a Domain Name

Some organisations administer a Web server in-house and host their own Web site.

Many companies use a Web host provider.

A good Web hosting service will provide a robust, reliable home for your web site.

A poor Web hosting service will be the source of problems and complaints.

Do not use free/cheap Web hosting for a commercial web site.

Web Hosting

Hosting Needs: Small to Medium Web Site

Virtual Hosting

The web host provider’s server is divided into a number of virtual domains and multiple web sites are set up on the same computer.

Consider:

Future growth and scalability of web host

Operating System

Types of server-side processing supported

Bandwidth of Internet connection

Both local and national web host providers

Guaranteed uptime – service level agreement (SLA)

Technical support

Types of Web Hosting(1)

Hosting Needs:
Large to Enterprise Web Site

Dedicated Web Server

Co-located Web Server

Consider:

National web host providers

Guaranteed uptime – service level agreement (SLA)

Bandwidth of Internet connection

Technical Support

Types of Web Hosting(2)

Dedicated Web Server

The exclusive use of a rented computer and connection to the Internet that is housed in the Web hosting company’s premises.

The server can usually be configured and operated remotely from the client company or you can pay the web host provider to administer it for you.

Dedicated Web Server

Co-Located Web Server

A computer that your organization has purchased and configured.

Your organization effectively rents space at the web host provider’s location.

Your server is kept and connected to the Internet at their location.

Your organization administers this computer.

Co-Located Web Server

See the Web Host Checklist (Table 10.1)

Choosing a Virtual Host

Operating System

Web Server Software

Bandwidth

Technical Support

Service Agreement

Disk Space

E-mail

Uploading Files

Canned Scripts

Scripting Support

Database Support

E-Commerce Packages

Scalability

Backups

Site Statistics

Domain Name

Price

For each of these projects describe the likely end-users:

A portfolio site for a filmmaker showcasing his projects

A portal for people living in a small country town to connect them to services in the area

An online technology magazine with the latest gadgets

A website about education options in Australia for overseas students

For each end-user described above, write down what kind of computer platform they would need and any limitations they might have.

Exercise 1

Exercise 2

Use the Web to access some of the sites which include multimedia features.

www.zeroonezero.com

www.sydneyfestival.org.au

www.acmi.net.au

www.edemberley.com

List what sorts of multimedia they have placed on their sites.

Describe what techniques they have used to present their products/services. This will give you an idea of what is possible with multimedia technology and may also show you some of the drawbacks.

Exercise 3

For each step in the Development Process, list the tasks that you think you will need to do to complete your assignment for ITC216/589

E.g. Analysis Stage – Find out client’s mission, client’s reason for website, research competitors website, etc.

Readings

Chapter 4 & 12 from textbook (Felke-Morris)

Reading 4

image1

image2

image3

image4

ITC216_589_week04.pptx

Week 4

Basic Web Design

ITC216 and ITC589

Describe the most common types of Web site organization

Create clear, easy Web site navigation

Design user-friendly Web pages

Improve the readability of the text on your Web pages

Use graphics appropriately

Create accessible Web pages

Describe design principles

Describe Web page design techniques

Apply best practices of Web design

Learning Objectives

Highly variable

are capable of remarkable feats

can perceive and respond rapidly to external stimuli

solve complex problems

create masterpieces

We – Us – Human Beings

Highly variable and subject to

lapses of concentration

changes in moods

changes in motivation and emotion

have prejudices and fears

make errors and misjudgements

etc.

We – Us – Human Beings

Systems that are easy for the user to use, reduce error by applying psychology

We can use our understanding of the way people act and react in their environment

Human Element a Central Concern

Human-computer interaction is a cognitive activity, i.e. it involves the processing of information in the mind

Aim in multimedia design

to ensure this information processing activity is within the capabilities of the users’ mental processes

Provides knowledge about the range of user capabilities

Helps identify and explain the nature and causes of problems users encounter

Cognitive Psychology

Key Areas of Cognitive Psychology

Perception

Attention

Information Processing

Memory

Learning

Mental Models

Our environment has many hundred stimuli

We can attend to only one (or two) of them at any instant

We choose (or filter) which stimulus(i) to attend to

That is we have limited attention capabilities

This act of filtering is call Selective Attention

Attention

We construct a model of the external world that is an interaction between the seen environment and previously stored knowledge that allows us:

a more stable view of our world

to perceive our world as three- dimensional

to perceive three-dimensional objects in two-dimensional fields, eg. the computer screen, photos

Visual Perception

Two-dimensional

Can display information as:

text

graphics

animation

video

sound

or any combination of these

Visual Perception of the Computer Screen

Good Screen Design ensures

legible text

no screen flicker

distinction between foreground and background

uncluttered

meaningful content to the user

meaningful structure to the user

Visual Perception of the Computer Screen

Hierarchical

Linear

Random
(sometimes called Web Organization)

Web Site Organization (Navigational Structure)

A clearly defined home page

Navigation links to major site sections

Often used for commercial and corporate Web sites

Hierarchical Organization

Be careful that the organization is not too shallow.

Too many choices  a confusing and less usable web site

Information Chunking

“seven plus or minus two” principle

George A. Miller found that humans can store only five to nine chunks of information at a time in short-term memory

Try not to place more than nine major navigation links on a page

Hierarchical – Too Shallow

Hierarchical Too Deep

Be careful that the organization is not too deep.

This results in many “clicks” needed to drill down to the needed page.

User Interface “Three Click Rule”

A web page visitor should be able to get from any page on your site to any other page on your site with a maximum of three hyperlinks.

A series of pages that provide a tutorial, tour, or presentation.

Sequential viewing – some things need to be read in order, for example instructions or a recipe.

Linear
Organization

Random
Organization

Sometimes called “Web” Organization

Usually there is no clear path through the site

May be used with artistic or concept sites

Not typically used for commercial sites.

Make your site easy to navigate

Provide clearly labeled navigation in the same location on each page

Most common – across top or down left side

Can also provide “breadcrumb” navigation for complex sites

Types of Navigation

Graphics-based

Text-based

Interactive Navigation Technologies

Image Roll-overs

Flash

Fly-out or dropdown menus using scripting

Web Site Navigation Best Practices

Accessibility Tip

Provide plain text links in the page footer when the main navigation is non-text media such as images, Flash, or scripting.

Web Site Navigation
Best Practices

Use a Table of Contents (with links to other parts of the page) for long pages.

Consider breaking long pages in to multiple shorter pages using Linear Organization.

Large sites may benefit from a site map or site search feature

Web Site Navigation
Best Practices

Repetition

Repeat visual elements throughout design

Contrast

Add visual excitement and draw attention

Proximity

Group related items

Alignment

Align elements to create visual unity

Basic Design Principles

Design for your target audience

Appropriate reading level of text

Appropriate use of color

Appropriate use of animation

Web Page DesignTarget Audience

Use colors and animation that appeal to your target audience

Kids

Bright, colorful, animations, interactive

Young adults and older teens

Dark, often low contrast, mysterious, explore for themselves

Older people

Light backgrounds, clean colours, larger text

Everyone:

Good contrast between background and text

Easy to read

Avoid animation if it makes the page load too slowly

Web Page Design
Colors & Animation

Site visitor forms a first impression within the first 8 seconds

Colour is the most important design element in a Web site

Choose colours that are simple and not distracting

Choose colours that reflect your audience’s values and cultural preferences

Colour and Its Psychological Effects

Colour choice

Here is a really helpful site for choosing font colour/background colour:

www.webmasterorbit.com/compare-color-combinations.html

Major Colours and
Their Psychological Effects

Red
Red is the most emotionally intense colour. It is the colour of love but also anger and danger. It creates attention, but tends to overtake other colours on the page. Red jumps forward on the screen.

Blue
Blue is the colour of the sky and the ocean—peaceful and calming. It creates an optical impression that objects are farther away than they really are.

Green
Nature, health, optimism, good luck. Green is the colour of money and has strong associations with finance and economic stability. But it is a mixed bag. It is linked with envy, sickness, and decaying food. It does not do well in a global market.

Yellow
Cheerful sunny yellow is the first colour the eye processes. It is an attention-getter and represent optimism, hope, and precious metals. It tends to be overpowering in large areas.

Purple
Purple is a complex colour and is the hardest colour for the human eye to discriminate. It represents spirituality, mystery, intelligence, royalty, luxury, wealth, and sophistication.

Orange
Orange represents energy, balance, warmth, and vitality. It is a colour most hated by Americans. The colour is more liked by Europeans and South Americans.

Brown
Brown is the colour of earth and is quite abundant in nature. It represents reliability, comfort, and endurance. Men more than women tend to prefer brown over other colours. It can be considered dull and boring.

Gray
Intellect, futurism, modesty, sadness, old age. It is the easiest colour for the eye to view.

White
Purity and innocence, cleanliness, precision, sterility, but also death. It reproduces freshness and is quite popular at luxury Web sites. It gives the sense of being “pristine”

Black
Power, sophistication, death, mystery, fear, unhappiness, elegance. It signifies death and mourning in many Western cultures.

Major Colours and
Their Psychological Effects (Cont’d)

Web site colours take on different cultural hues

Use a colour that is acceptable to various cultures

Blue is the most globally accessible colour

Age, class, and gender differences

Web sites for young children favor brighter, more solid colours

Men (generally) are attracted to cooler colours like blue and green

Women often prefer warmer colours like orange and red

Colour and Individual Differences

Colour perception problems are widespread

Colour deficiency can occur in any population, economic class, or ethnic group.

Most colour-blind people have red-green perception deficiency

Any designer should be aware of the problem

Understand how colour deficiency works

Any text on any mixed-colour background is inviting trouble

Accessibility Tip: Many individuals are unable to distinguish between certain colors (especially red and green).

See
http://www.vischeck.com/showme.shtml

Colours for the Colour Blind

Web pages do NOT look the same in all the major browsers

http://browsershots.org/

Test with current and recent versions of:

Internet Explorer

Firefox, Mozilla

Opera

Mac versions of above

Safari for Mac

Design to look best in one browser (probably Internet Explorer) and degrade gracefully (look OK) in others

Web Page Design Browser Compatibility

Test at various screen resolutions

Most widely used:1280×1024, 1024×768 and 800×600 (older computers)

Design to look good at various screen resolutions

Centered page content

Set to either a fixed or percentage width

Web Page Design Screen Resolution

A sketch of blueprint of a Web page

http://gomockingbird.com

Shows the structure of the basic page elements, including:

Logo

Navigation

Content

Footer

Wireframe

Place the most important information “above the fold“ (top part of screen visible without scrolling).

Use adequate “white” or blank space

Use an interesting page layout

Web Page Design Page Layout(1)

This is fine, but a little boring. See the next slide for improvements in page layout.

Better

Web Page Design Page Layout(2)

Best

Columns make the page more interesting and it’s easier to read this way.

Columns of different widths interspersed with graphics and headings create the most interesting, easy to read page.

Ice Design

AKA rigid or fixed design

Fixed-width, usually at left margin

Jello Design

Page content typically centered

Often configured with a fixed or percentage width such as 80%

Liquid Design

Page expands to fill the browser at all resolutions.

Page Layout Design Techniques

Avoid long blocks of text

Use bullet points

Use headings and subheadings

Use short paragraphs

Text Design Best Practices

Use common fonts:

Arial, Verdana, Times New Roman

Use appropriate text size:

medium, 1em, 16px, 12 pt, 100%

Use strong contrast between text colour & background colour

Use columns instead of wide areas of horizontal text (like a newspaper).

Text Design “Easy to Read” Text

Bold text as needed

Avoid “click here”

Hyperlink key words or phrases, not entire sentences

Separate text with “white space” or empty space.

Chek yur spellin (Check your spelling)

Text Design “Easy to Read” Text

Be careful with large graphics!

May take too long to download

Use the alt attribute to supply descriptive alternate text

Be sure your message gets across even if images are not displayed.

Use animation only if it makes the page more effective and also provide a text description.

Build clear navigation aids

Graphic Design Best Practices

Web Content Accessibility Guidelines 2.0
WCAG 2.0

http://www.w3.org/TR/WCAG20/Overview

http://
www.w3.org/WAI/WCAG20/quickref

Based on Four Principles (POUR)

Perceivable
Content must be Perceivable

Operable
Interface components in the content must be Operable

Understandable
Content and controls must be Understandable

Robust.
Content should be Robust enough to work with current and future user agents, including assistive technologies

Short article to read:
www.smartplanet.com/blog/bulletin/disabled-americans-demand-digital-versions-of-wheelchair-ramps/15838

Designing for Accessibility

Table 4.1 in your Textbook (pg 92)

Page Layout

Browser Compatibility

Navigation

Color and Graphics

Multimedia

Content Presentation

Functionality

Accessibility

Online version available here:
http://
terrymorris.net/bestpractices

Hint: you can use this for your blog entries…

Web Design Best Practices Checklist

Exercise 1

List the four basic principles of design.

View the home page of CSU (
www.csu.edu.au) and describe how each principle has been applied.

Have a look at:
www.csu.edu.au/special/brand/?utm_source=brand&utm_medium=homepage&utm_campaign=promo

This explains how the new “branding” was designed and has some great information about design principles used.

Exercise 2

Using your Assignment topic (Healthy Habits, Mystery Machine, etc.) find 3 logos for similar companies using Google.

Paste them into a Word document and underneath discuss in 1 paragraph the colours and fonts used. If any shapes/pictures are used in the logo, include them in your discussion.

Exercise 3

Using your Assignment topic (Healthy Habits, Mystery Machine, etc) think about the colours that will be suitable for your topic and target audience.

What words, letters, or images could be used in the logo?

You can sketch on paper or try to design with shapes in Word.

This site helps you to find colours that look good together:
http://colorschemedesigner.com/

Exercise 4

View your Assignment 1 chosen web site

Maximize and resize the browser window.

Decide whether the site uses ice, jello, or liquid design.

Adjust the screen resolution on your monitor
(Start > Control Panel > Display > Settings) to a different resolution than you normally use.

Does the site look similar or very different?

Readings for this week

Word Documents in Week 4 folder – Design Phase and Analysis Phase.

Chapter 4 – from Felke Textbook

Reading 5 – from readings book

image1

image2

image3

image4

image5

image6

image7

image8

image9

image10

image11

ITC216_589_week05.pptx

Online Multimedia

Week 5

HTML5 and CSS Basics

HTML5:

HTML5 syntax, tags, and document type definitions

The anatomy of a web page

Formatting the body of a web page

Formatting the text on a web page

Physical and logical style tags

Special Characters

Connecting Web pages using hyperlinks

Learning Objectives

Cascading Style Sheets (CSS):

Describe the evolution of style sheets
from print media to the Web

List advantages of using Cascading Style Sheets

Use color on Web pages

Create style sheets that configure common color and text properties

Apply inline styles

Use embedded style sheets

Create CSS class and id selectors

Learning Objectives

Evolution of HTML

Markup Languages

SGML – Standard Generalized Markup Language

A standard for specifying a markup language or tag set

HTML – Hypertext Markup Language

The set of markup symbols or codes placed in a file intended for display on a web browser.

Element or tag – individual markup code

Attribute – modifies the purpose of a tag

Markup Languages

XML – eXtensible Markup Language

A text-based language designed to describe, deliver, and exchange structured information.

It is not intended to replace HTML –
it is intended to extend the power of HTML by separating data from presentation.

Markup Languages

XHTML – eXtensible Hypertext Markup Language

Developed by the W3C as the reformulation of HTML 4.0 as an application of XML.

It combines the formatting strengths of HTML 4.0 and the data structure and extensibility strengths of XML.

Markup Languages

HTML 5

The next version of HTML 4 and XHTML 1

Currently in draft status – will be finalized in 2014

Incorporates features of both HTML and XHTML

Adds new elements

Eliminates some elements

Intended to be backward compatible

http://www.w3.org/html/

Each individual markup code is referred to as an element or tag.

Each tag has a purpose.

Tags are enclosed in angle brackets, “<" and ">” symbols.

Most tags come in pairs; an opening tag and a closing tag.

E.g. …

HTML Elements

Your First HTML5 Web Page

Page Title Goes Here

… body text and more HTML tags go here …

Anatomy of a
HTML5 Web Page

DTD – describes the markup language syntax

HTML tag – contains the web page document

Head tag – contains the head section.
The head section contains information that describes the web page document

Title tag – Text displays in title bar of window

Meta tag – describes the character encoding

Body tag – contains the body section

The body section contains the text and elements that display in the browser viewport.

W3C Recommendation:
Use a Document Type Definition to identify the type of markup language used in a web page.

XHTML Document Type Definition (DTD)

XHTML 1.0 Transitional

This is the least strict specification for XHTML 1.0. It allows the use of both Cascading Style Sheets and traditional formatting instructions such as fonts. We will use this DTD in this text

XHTML 1.0 Strict

Requires exclusive use of Cascading Style Sheets. We will not use this.

XHTML 1.0 Frameset

Required for pages using XHTML frames. We will use not use this.

XHTML 1.0 Transitional DTD

For HTML5 this DTD definition is replaced by :

XHTML First Web Page

XHTML

an opening tag

…. page info goes here

a closing tag

HTML5 Alternative

an opening tag

…. page info goes here

a closing tag

Head Section
Contains information that describes the web page document

…head section info goes here

Body Section
Contains text and elements that display in the Web page document

…body section info goes here

Head & Body Sections

The Heading Element

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

The Paragraph Element

tag

Paragraph element

…paragraph goes here…

Groups sentences and sections of text together.

Configures a blank line above and below the paragraph

Align attribute

deprecated in XHTML

obsolete in HTML5

The Line Break Element

tag

Line Break element

Stand-alone tag

Called a void element in HTML5

…text goes here
This starts on a new line….

Causes the next element or text to display on a new line

The Horizontal Rule Element

tag

Horizontal Rule element

Stand-alone tag

Configures a horizontal line on the page

In HTML5, it should be used to indicate a thematic break at the paragraph level

The Blockquote Element

Blockquote element

Indents a block of text for special emphasis

…text goes here…

20

Phrase Elements

Indicate the context and meaning of the text

Display inline with the text

Common Logical Style Tags

To cause text to “stand out” from surrounding text. Usually bold.
This is important

To cause text to be emphasized in relation to other text on the page. Usually italics.

Please note

21

XHTML List Basics

Unordered List

Description List (XHTML Definition List)

Ordered List

22

Unordered List

Displays information with bullet points

Unordered List Element

Contains the unordered list

List Item Element

Contains an item in the list

23

Unordered List Example

TCP

IP

HTTP

FTP

24

Ordered List Example

Apply to school

Register for course

Pay tuition

Attend course

25

New name for HTML5

This element was called a Definition List in previous versions of HTML and XHTML.

Uses:

Display a list of terms and descriptions

Display a list of FAQ and answers

The Description List element

tag
Contains the definition list

The dt Element

tag
Contains a term or name
Configures a line break above and below the text

The dd Element

tag
Contains a definition or description
Indents the text

Description List

26

Description List Example

IP

Internet Protocol

TCP

Transmission Control Protocol

27

Display special characters such as quotes, copyright symbol, etc.

Character Code

© ©

< < > >

& &

Special Entity Characters

28

The div element

Purpose:

Configure a specially formatted division or area of a web page

Generally used in page layout

There is a line break before and after the division.

Can contain other block display and inline display elements

29

29

Writing Valid HTML

Check your code for syntax errors

Benefit:

Valid code 
more consistent browser display

W3C XHTML Validation Tool

http://validator.w3.org

Additional HTML5 Validation Tool

http://html5.validator.nu

30

The Anchor Element

The anchor element

Specifies a hyperlink reference (href) to a file

Text between the and is displayed on the web page.

Contact Us

href Attribute

Indicates the file name or URL
Web page document, photo, pdf, etc.

31

31

More on Hyperlinks

Absolute link

Link to other websites

Google

Relative link

Link to pages on your own site

Relative to the current page

Home

32

32

More on
Relative Linking

Shampoo

(page in the same folder)

Home

(page in folder one level above)

Dog Bathing

(up one folder and down into “services” folder)

33

33

Opening a Link
in a New Browser Window

The target attribute on the anchor element opens a link in a new browser window or new browser tab.

Yahoo!

34

34

Email Hyperlinks

Automatically launch the default mail program configured for the browser

If no browser default is configured, a message is displayed

me@hotmail.com

35

35

Linking to Fragment Identifiers

A link to a part of a web page

Also called named fragments, fragment ids

Two components:

The element that identifies the named fragment of a Web page. This requires the id attribute.

…..

2. The anchor tag that links to the named fragment of a Web page. This uses the href attribute.
Back to Top

36

Note the use of the # in the anchor tag!

36

Skip to Content

37

Cascading Style Sheets (CSS)

Overview of
Cascading Style Sheets (CSS)

See what is possible with CSS:

Visit
http://www.csszengarden.com

Style Sheets

used for years in Desktop Publishing

apply typographical styles and spacing to printed media

CSS

provides the functionality of style sheets (and much more) for web developers

a flexible, cross-platform, standards-based language developed by the W3C.

39

39

CSS
Advantages

Greater typography and page layout control

Style is separate from structure

Styles can be stored in a separate document and linked to from the web page

Potentially smaller documents

Easier site maintenance

40

40

Types of Cascading Style Sheets

Inline Styles

Embedded Styles

External Styles

Imported Styles

41

41

Description of the Types of
Cascading Style Sheets

Inline Styles

Configured in the body of the web page

Use the style attribute of an HTML tag

Apply only to the specific element

Embedded Styles

Configured in the head section of a web page.

Use the HTML

48

CSS Embedded Styles

The body selector sets the global style rules for the entire page.

These global rules are overridden for

and

elements by the h1 and h2 style rules.

49

External Style Sheets - 1

CSS style rules are contained in a text file separate from the XHTML documents.

The External Style Sheet text file:

extension ".css"

contains only style rules

does not contain any HTML tags

50

50

body {background-color: #E6E6FA;

color: #000000;

font-family: Arial, sans-serif;

font-size: 90%; }

h2 { color: #003366; }

.nav { font-size: 120%;

font-weight: bold; }

External Style Sheets - 2

Multiple web pages can associate with the same external style sheet file.

51

site.css

index.html

clients.html

about.html

Etc…

51

The Element

A self-contained tag

Placed in the header section

Purpose: associates the external style sheet file with the web page.

Example:

52

52

Using an
External Style Sheet

To associate with the external style sheet called color.css, place the following code in the head section:

body { background-color: #0000FF;

color: #FFFFFF;

}

External Style Sheet color.css

53

image1

image2

image3

image4

image5

image6

image7

image8

image9

image10

image11

image12

image13

Analysis_Phase
Analysis phase - know about the project
It is essential to know what you are trying to do before attempting to design the solution. Most often, applications are developed for a client in another organisation. In order to know what it is you are trying to do you must agree on the following:

· The client organisation's mission statement.

· The application's mission - that is:

· What does the client wants the product to do?

· Who are the end users of the product?

· What platform will it serve?

· Will the user be entertained, educated, informed, (misinformed), or persuaded?

Client organisation's mission

You must first ascertain the client organisation's mission statement. This is a brief (one paragraph) statement of what the aims of the organisation are (but not for you to advertise the company here!). Your application should help the organisation to achieve these aims. If not, there is no point to our work. The organisation's mission statement is different to the application's mission.

The application's mission/ objectives

You must agree with the client on what the product will do and why the client wants the product. Will it save time, reduce costs, sell a product? If you develop a Web site for an organisation, you need to define the uses of the site here. Some of the possible uses for a Web site include:

· providing information,

· gathering information,

· educational purposes,

· communication,

· public relations,

· customer supports,

· sales of products,

· internal communication, etc.

The use of Web multimedia is endless, you need to define the goal (objective) of your application clearly and design you application to meet these objectives. Once you have defined your objectives, you can determine the type of application required to meet these objectives.

The application's audience and audience level

The end users of the application are almost as important as the client. In consultation with the client you must define who the end users of the application are. It is essential to know the audience you are addressing. It would be ridiculous, for example, to set up a multimedia kiosk application for visitors to the country from Korea and have all the text and narratives in English. (Such mistakes have been made in the past but hopefully are becoming less prevalent.) Will the audience be expert users of a particular range of equipment or will they be relative newcomers to computing? What ranges of equipment are they likely to be using when accessing this application? You need to identify the following demographic parameters and state it clearly in your planning documentation. Other factors need to be considered if they are related to your application design, these include:

· age - different things appeal to different age groups;

· education - what can you expect them to know and understand;

· computer literacy - the level of their computer skills;

· attitudes and prejudices - for example, different religious backgrounds may change the whole way you present information;

· subject matter's knowledge - technical jargon may be quite appropriate;

· generic skills - how much background do you have to give in addition to the subject matter;

· nationality - colours have different meanings in different societies;

· language - you may need to provide different versions in several languages;

· dialects - Australian English is different to American English; and

· disabilities - for example, the visually or hearing impaired need to be considered when planning the overall design.

Constraints and delivery platform

There maybe some constraints already known to you, such as technology constraints (audience's platform, server type, etc), legal constraints (include copyright, censorship, privacy matter), ethical (materials to be used), and costs (money, time, people). All those constraints need to be considered and stated in your design and planning documentation. It is critical to know the base standard of equipment that your audience will be expected to have in order to access your application. The information you present must be in a format compatible with the computers they will use and be capable of being delivered using the transmission medium you select.

The user requirements specification

As mentioned above, all good methodologies insist that applications are documented. This is an ongoing process with each major phase ending with a document noting what has been agreed, or completed. The end of the analysis phase should be a written requirements specification. A requirements specification is the conclusion of all the above considerations. It is used to outline the project, as the guide to the programmers for design, development, testing and upgrading, and can be used to resolve any dispute that arise.

The planning of people, time and budget allocation

This process attempts to address the following issues. It may vary from project to project:

· Allocation of personnel and equipment resources: who and what will be involved in design, programming, testing and deployment of the project?

· Scheduling the project (project timing): how much time each major activity requires? How much time for completion of the task? What are the critical dependencies between time, activities and tasks?

· Estimating: time, money and people. When estimating the cost, be sure you include the hidden costs of administration and management.

· Establish and monitor a project budget (costing): most projects have a limited budget. If not monitored closely, projects costs can quickly exceed the estimated budget..

· Identify and manage potential risks that could hinder the project: what can go wrong and how can those problems be prevented or managed to have a minimal impact.

Design_Phase
The Design Phase - how you are going to do it
Design your application
The design phase includes:

· content design,

· instructional design,

· structure design,

· page design,

· flowcharting,

· storyboarding,

· interactivity design,

· design of file management, file transportation and file storage, etc.

These design issues will be expanded in following sections. When preparing the design and planning documentation, these design issues need to be included with clear section headings. The format of the document is less important when compared to its content and clarity.
This phase should start with a high-level design or the architecture planned for your application. This part of documentation is an overview of how you intend to meet the requirement specifications developed in the previous analysis phase. It will include diagrams and text to specify the following:

· overall structure of the application;

· typical screen and/or frame layouts;

· the time-line for the application;

· navigational controls and interactivity;

· the content and format of information that will form the message; and

· the platform and transmission medium.

Content and instructional design
You should have a general idea of what will be included in the application, even at the early stage of development. The design of content involves many experts from different fields (especially from the client side). To have a detailed list of all the files to be used is not necessary and hardly possible at this stage. Nevertheless, you should have a plan covering what type of files are needed, how you will obtain them, the likely formats, what preparation and editing tasks are required, copyright and licence agreements, etc.
A multimedia application is designed and developed for a specific purpose. You should keep the intended purpose in your mind during the course of your application development. You need to pretend to be the users and ask others to test your design concept and re-think again to ensure every media element and every interaction step is necessary. In your design and planning documentation, you may have to state the reasons for certain a designed task. It is important to understand that we are developing an application to deliver the information, not just to display the technology.

Overall structure and flowcharting
The structure and flowcharting will show the major modules (pages) of the application and how the modules (pages) are to be linked together. This can be represented in many different ways - for example, Data Flow Diagrams, State Transition Diagrams, Structure Charts, Screen Hierarchy Diagrams, Flow Charts, etc.

When making your own designs, use the information gathered during the analysis phase to help you write down the major chunks to be presented on the screen/stage. Always try several different possible designs in outline first before going into detail. Fit the pieces together in different ways and select the optimum way to meet your client's needs. Identify both the major pieces of data and the procedural steps that will have to be taken to process that data.
For each part of the main structure define the:

· goal of this page or this component of the movie;

· tasks the user will perform in this page;

· content needed for each page.

· Screen layouts

Sketch screen layouts on grid paper or make a dummy screen using a computer package and print them out as a screen dump to show all the screens of each main type so that everyone knows what they will be working within. For example, show where the corporate logo will go and how big it will be if it is to appear on every screen/page. It is important to ensure that the layout fits the screen the users will be using and has room for all the components required, such as, control buttons, error messages, icons, titles, labels, etc. Always check that text is large enough to be read and that "hot" areas are big enough for all hands and device types that are trying to select inside their boundaries.
Any system works better if it uses standard and consistent approaches. Control buttons with the same function should be in the same place on every screen that uses them. Similar functions should work the same way on every screen.

Timelines and Storyboards
Provide a diagram to show the time-line involved for the whole movie and, if necessary, for any part that is critically time-dependent. This involves drawing a simple diagram that shows time varying along the x-axis and above that various lines showing when different segments of media data will be displayed and how long they will be shown - for example, the opening (or splash) screen displays for 10 seconds followed by a narration of 25 seconds that introduces a video that needs two minutes to display in its entirety but starts 3 seconds before the narration ends.
In traditional film, television and multimedia design this may be done with a "storyboard" that lists a scene-by-scene description in the order in which the final film will appear. Some designers will make a rough sketch of each scene and summarise the action to take place. The content or scenes may be prepared in a totally different order of course, but in the final production movie they will be put together in the time order defined in the storyboard or time-line. The movie will be a simple linear movie, a collection of scenes that will always be in the same order, even if flashbacks are used, because there is no user interaction except to rewind the finished product in total. In Web page design, such storyboard presents the layout of each page. Since gridded papers are often used for drawing storyboard, storyboard is also called 'design grid'.
In interactive multimedia applications, the order of scenes in any one "performance" may not be fixed, but the principle is still the same. You must show how the various segments are linked in the order they will appear in the finished product. On the time-line you should show major points or time zones at which the user may jump forward or back to other parts of the application and whether this will be allowed anywhere in the scene or just at certain points.
Later you may expand the storyboard to develop a detailed "script" that lists all the narration and text in one place. (Not to be confused with a program script which lists the instructions given to the computer and its software to control how the application works.). This storyboard script places the text and narration in time order. Into this you can insert place markers for the video clips, audio files, animation sequences, graphics files and narration files as they occur in the time-line. Usually it is best to write separate scripts for all but the simplest of such complex features such as animated movies and video.

Interface, navigation and Interactivity
It is important for the end user to feel that they are always in control of the application. The look and feel of the user interface, which encompasses the screen layout and the controls provided on it, will often determine whether the user feels confident with the application or not. It is equally important for the client that the application only allows the user to do the things that they want the end user to do. These features must be specified.
User centred design of navigation controls allow the user to move at will through the application. This is an important part of interactivity. However, there are other features that may be provided, like being able to turn the volume down, replay selected parts only of a movie, change the colour palette, and input data, which allow the user to change the presentation of your application. Taken a stage further if you wish to allow it, user interaction could even cause a change to the story in a movie or change the behaviour of character in the story. The limits of what the application will allow must be defined in your design specification.
Three very important points to remember are:

· the user interface should be as intuitive as possible to the end user,

· interface should allow for user's error,

· makes use of aural feedback sparingly.

Delivery Platform and Delivery Media
The target platform or platforms - that is, the range of equipment the user might have available to them to access you application - must be specified. Parameters that you should define for each of the platforms you will allow include:

· CPU - for example, PC or Macintosh or Silicon Graphics, etc. and the particular model;

· operating system - for example, WINDOWS NT, MAC OS 7 or Unix;

· device interfaces and drivers - for example, SVGA for the monitor, 16-bit sound card;

· memory - how much must be free for the application to use;

· monitor size and colour depth - for example, 14 inch and 256 colours;

· drives - for example, 4x standard speed CD, HDD with 100MB free; and

· delivery medium- e.g. modem with Internet access or Broadband access

File management and transport medium
When planning your multimedia application, it is important to know where you will store your files (the media files to be used, temp. file generated from the development, different versions of file, and different versions of application) and how you want to control the access. It is also important to work out the file naming convention (how to name a certain type of file, how to differentiate different version of file, the file extension, etc).
Multimedia applications may be delivered in a number of different ways other than CD or Web. In fact, it might be appropriate to use more than one of the available transport media or to drop the use of it altogether in order to overcome some of the current limitations of the Web. You should be aware of what is available from other media for just this reason. Possible transport media currently in general use are:

· Hard disk

· CD-ROM

· DVD

· Videotape

· Kiosk - as in supermarket sales videos

· Corporate network - Intranet

· Internet/WWW

The technical specification
The technical specification or design document combines structure, screens, scripts, time-lines, navigation design, user interface, content, etc, into one document with which everyone can identify and work. It provides the main outline for the project and is the document from which the prototype or working model and then the final production will be made.

Now review your technical specification
It is a good time to review your technical specification now. You will review it and other parts of the application many times before the project is finished. This does not mean that you will change it each time you review it. You are checking to see if it does need to change. The earlier a fault is discovered, the faster, easier and cheaper it is to correct. Check it against the client's original ideas, their corporate mission statement and the particular mission of the application as defined in your functional specification. If it does not "gel", change the technical specification until it does "gel" before you start to make anything.

ITC216_589_week05_storyboarding.ppt

Storyboarding
Week 5

*

Overall structure and flowcharting
The structure and flowcharting will show the major modules (pages) of the application and how the modules (pages) are to be linked together.
This can be represented in many different ways - for example, Data Flow Diagrams, State Transition Diagrams, Structure Charts, Screen Hierarchy Diagrams, Flow Charts, etc.

*

A simple flowchart (sitemap)

*

Another Style of Sitemap

*

How to create a sitemap
When making your own designs, use the information gathered during the analysis phase to help you write down the major chunks to be presented on the screen/stage.
Always try several different possible designs in outline first before going into detail. Fit the pieces together in different ways and select the optimum way to meet your client's needs.
For each part of the main structure define the
goal of this page or this component of the movie
tasks the user will perform in this page
content needed for each page

*

Screen layouts
Sketch screen layouts on grid paper or make a dummy screen using a computer package and print them out as a screen dump to show all the screens of each main type so that everyone knows what they will be working within.
For example, show where the corporate logo will go and how big it will be if it is to appear on every screen/page. It is important to ensure that the layout fits the screen the users will be using and has room for all the components required, such as, control buttons, error messages, icons, titles, labels, etc.

*

Screen layouts
Always check that text is large enough to be read and that "hot" areas are big enough to click on (and for icons such as the hand to fit inside)
Any system works better if it uses standard and consistent approaches. Control buttons with the same function should be in the same place on every screen that uses them. Similar functions should work the same way on every screen.

*

Storyboards
In traditional film, television and multimedia design this may be done with a "storyboard" that lists a scene-by-scene description in the order in which the final film will appear.
Some designers will make a rough sketch of each scene and summarise the action to take place
The content or scenes may be prepared in a totally different order of course, but in the final production movie they will be put together in the time order defined in the storyboard or time-line.
In Web page design, such a storyboard presents the layout/content of each page.

*

Screen Layout example

*

Storyboard example

*

Storyboards
In interactive multimedia applications, the order of scenes in any one "performance" may not be fixed, but the principle is still the same.
You must show how the various segments are linked in the order they will appear in the finished product.
Later you may expand the storyboard to develop a detailed "script" that lists all the narration and text in one place.

*

Turn in your highest-quality paper
Get a qualified writer to help you with

“ Website Designing ”
Get high-quality paper
Guarantee! All work is written by expert writers!

Calculate the price

Academic level

Type of assignment

Deadline

Pages

Total:

$0.00

Still stressed from student homework?

Get quality assistance from academic writers!

Order now