Web Design, DreamWeaver, HTML, etc. Snyder p89-115

Designing Websites  Technological Requirements  Web Server & Infrastructure or  Out-source Hosting

Technological Requirements Web Server  Computer $500-50,000  Software  Microsoft $500+/year  Apache (free, but expertise required)  High Speed Internet ($50+/month)  Dedicated/Static IP (extra $50/month)

Out-sourced Hosting  $5 - $5000  What 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 & Knowledge  What exactly do you need to know  Where can you find it  What 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?  Marketing  Design & Appearance  Functionality & Back-end Stuff  However, 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 Attuned  Knowing how a device or system works is an aid to simplifying its use.

Operationally Attuned  Knowing 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 Interfaces  Which one controls volume? a.b.

Human-Computer Interfaces  How did you know? a.b.

Mnemonics  Mnemonics are an aid to remembering something.  Examples: HOMES – Huron, Ontario, Michigan, Erie, and Superior.  Visual Mnemonics are powerful aids

Graphical User Interfaces  Digital Metaphor for a real world device or system

Basic Metaphors  Buttons are so intuitive that 1-years understand their use What do you think this button does? How did you know exactly?

Basic Metaphors  Calendars – the metaphor is almost identical to the real world entity

Basic Metaphors  File tabs are also intuitive  But nowadays, who really uses a file cabinet.  The real world objects may become extinct, but the metaphors live on.

Basic Metaphors  Menus are one metaphor that have surpassed their real world counter parts

Web Based GUI’s  The 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’s  Websites 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 think  Open Source Web Page Templates  Stock Images  WYSIWYG editors  Database tools