250 likes | 373 Vues
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)
E N D
Web Design, DreamWeaver, HTML, etc. Snyder p89-115
Designing Websites • Technological Requirements • Web Server & Infrastructureor • 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.
Clicking and dragging a page Selecting a page number What’s more intuitive?
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