eCommerce Technologies Design & Development for the Web MIS Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D.

Student Objectives Discuss basic guidelines for web page and website design Summarize the primary XHTML elements involved in web page development Organize and reorganize websites using FrontPage Demonstrate excellence in understanding course concepts (so far) on Quiz #1Quiz #1

Web Design (not “Development”) Note “web” refers here to site and/or page Basic principles to consider Nonlinear presentation Limited page length Simple, obvious navigation Small graphics files Visual appeal

Web Development Recall the traditional SDLC (systems development life cycle): Start by identifying user requirements Design a solution Construct, test, and implement solution Monitor and maintain Web design (actually, development) model is based upon the SDLC

Web Development Model Phase 2: Design and Development Phase 3: Web Site Testing Phase 1: Front- and Back-End Analyses

Phase 1: Front/Back End Analyses Needs assessment What kind of business (strategy, revenue model,...) Target customers; consider book retailer versus toy store (ASU... ?) Evaluation of hardware/software (and other aspects of resource system) Users: bandwidth, user agents,... Determine tools needed to build/provide website and deliver product or service involved  Imaging and editing software (Flash?)  Development environment (e.g., VStudio)  Trial versions available, but beware Consider technology trends; recall Moore’s Law Cost/benefit analysis Costs: hardware/software, strategy development, web development/outsourcing, site management/maintenance Benefits: faster/better service, customer loyalty, better CRM, flexibility, lower inventory,...

Phase 2: Design and Development Home and content pages Text fonts, styles and color Horizontal lines and tables Hyperlinks and navigation buttons links Frames and forms Graphic arts and images

Phase 3: Web Site Testing Local-host testing Test on developer’s computer Server-side testing Test between server and developer's computer Client-side testing Test with various configurations and browsers at different places and times

FrontPage: A Web Development and Management Tool FrontPage makes web page creation easy WYSIWYG editing Design and build at same time But professional developers still need to be able to work at the HTML level Probably most helpful, however, is the help FrontPage provides with site management Let’s go through an example...

Some XHTML Go behind the scenes at Suzy Student’s website In FrontPage, Open the start page (default.htm) Click on HTML tab at bottom of page Look at the tags/elements involved At first, may be overwhelming Not really all that bad, however

XHTML Elements A web document is a collection of XHTML elements Note that XHTML is essentially HTML XML compliant Reformulation of HTML, but with stricter rules Two types of elements Standard Empty Each element Has  Opening tag and closing tag is standard  Self closing tag if otherwise May have attributes specified Also: XHTML entities

Some Important XHTML Tags & Elements html body head title meta h1 p img a em strong style

The Document Hierarchy Root element contains two other elements Head element Body element The head element contains Title Script Meta Style The body element contains the document content Elements  Structural  Descriptive Content

Organizing/Reorganizing Your Site Specifications All graphics and similar object files should be in images folder All web pages for each exercise should be in individual respective folders Only one web page should be in root folder If needed, create folders Procedure  Click on root web, then: File | New | Folder  Name appropriately Do this for Exercise 1 (personal) and Exercise 2 (conference) Drag/upload files to respective folders Create start page for each folder other than images Create homepage for root web New page Name, etc Links to exercises

Summary of Objectives Discuss basic guidelines for web page and website design Summarize the primary XHTML elements involved in web page development Organize and reorganize websites using FrontPage

For Next Time Note: should be checking daily Re-read Chapter 2 Reorganize website Create homepage Put exercises into folder, each with default page and appropriate folder title (e.g., Conference)  Exercise 1  Exercise 2 Look at elements/tags used in Exercise 2 and read about them in Appendix Due 1/27 (work on it) and 1/29 (complete it) Review eCommerce models (e.g., Laudon & Laudon text)

Appendix

Website Organization default.htm (home page for website) \images LogoASU.gif (ASU logo) bkgdcoba.gif (background logo) working_.gif (man working image) \exercises \conference index.htm schedule.htm registration.htm \personal myhomepage.html myspreadsheet.html mypresentation.html