Web Design, DreamWeaver, HTML, etc.

Snyder p89-115

Designing WebsitesTechnological RequirementsWeb Server & Infrastructure

or

Out-source Hosting

Technological Requirements

Web ServerComputer $500-50,000SoftwareMicrosoft $500+/yearApache (free, but expertise required)High Speed Internet ($50+/month)Dedicated/Static IP (extra $50/month)

Out-sourced Hosting$5 - $5000What are the criteria we should care

about?What are our real options?What do we still need?

Other Essential Requirements Still need a computer to develop web pages Still need software

Front Page Dreamweaver etc

Still need Internet Connect to reach off-site host

Still need a lot of expertise and knowledge

Expertise & KnowledgeWhat exactly do you need to knowWhere can you find itWhat about out-sourcing this?What kind of personnel do we need?

Web Design People Programmers/Developers

HTML, JavaScript, PHP, ASP, JSP Database Administrators

SQL, Oracle, SQL Server, ColdFusion, Content Management

Designers Photographers, Artists, Advertisers, Marketers

System Administrators Servers, Client Setup (FTP, etc)

Who else?

What will you learn in this class?A little bit about everything.But you can concentrate on your

interest area?MarketingDesign & AppearanceFunctionality & Back-end StuffHowever, Everyone will learn to be

DreamWeaver Experts.

Human-Computer Interfaces At its very root, an e-commerce website in an

interface between a human and a computer. Human-Computer Interfaces (HCI) is a well

studied object field. The best practices are highly intuitive, but

easy to forget. We are going to learn some of the basics

today.

Other Interfaces Is this door locked?

Operationally AttunedKnowing how a device or system works

is an aid to simplifying its use.

Operationally AttunedKnowing how web sites are designed,

implemented, and deployed... helps you use them more effectively (user

perspective) but it also helps you understand how a

business can use them more effectively (developer perspective)

Human-Computer InterfacesWhich one controls volume?

a. b.

Human-Computer InterfacesHow did you know?

a. b.

MnemonicsMnemonics are an aid to remembering

something.Examples: HOMES – Huron, Ontario,

Michigan, Erie, and Superior.Visual Mnemonics are powerful aids

Graphical User InterfacesDigital Metaphor for a real world device

or system

Basic MetaphorsButtons are so intuitive that 1-years

understand their use

What do you think this button does?

How did you know exactly?

Basic MetaphorsCalendars – the metaphor is almost

identical to the real world entity

Basic MetaphorsFile tabs are also intuitiveBut nowadays, who really uses a file

cabinet.The real world objects may become

extinct, but the metaphors live on.

Basic MetaphorsMenus are one metaphor that have

surpassed their real world counter parts

Web Based GUI’sThe Challenge: While its considered a

good practice to design GUI’s that model real world entities, there are trade-offs Complex GUI’s can be slow on the Web They can be difficult to implement with

HTML, JavaScript, etc. They can be difficult to maintain on rapidly

changing websites

Web-based GUI’sWebsites themselves have become

everyday, real world objects.Example: I read more content on the

web than I read from books.Don’t stick with a metaphor unless its

really more intuitive than the digital version.

What’s more intuitive? Clicking and

dragging a page

Selecting a page number

Web-based GUI trends What are the best practices in designing web

pages? Web pages for surveys Web pages for buying a product Web pages for browsing an online catalog

Great attention is spent on Simplicity Functionality Consistency Standardization

Designing a good e-commerce web page is much easier than you thinkOpen Source Web Page TemplatesStock ImagesWYSIWYG editorsDatabase tools