2. Web Page Design and Web Site

2.1 Web Pages

· A Web page normally includes text (content of the page) that is mixed with "markup" tags for describing its structure, appearance, and function of the content.

· The HTML is a document-layout and hyperlink-specification language for encoding Web pages or documents, which may include text, image, and other supported media.

· The HTML defines syntax and placement of a WWW document for Web browser, such as Internet Explorer or Netscape, to identify the document elements of a Web page and display that page on the computer screen.

· The HTML syntax contains definitions of tags and attributes that allow the separation of the presentation and structure of a document and enable the creation of machine independent WWW documents.

· The basic syntax and semantics of HTML can be found at from the following sites:

http://www.w3.org/pub/WWW/TR/REC-htm132.html HTML 3.2

http://www.w3/org/TR/WD-html140/ HTML 4.0

http://www.w3.org/pub/WWW/TR/WD-frames Frames

http://developer.netscae.com/library/documentation/htmlguid/index Netscape

http://msdn.microsoft.com/workshop/author/newhtml Microsoft

http://www.w3.org/MarkUp/ XHTML

· Other sites (URLs) for Web references

http://developer.netscape.com/index (Developer Info Web site)

http://www.microsoft.com/windows/ie/default.htm (IE 6.1)

http://www.htmlhelp.com/ (Web Design Group)

http://www.stars.com/ (Web Developer's Virtual Library)

http://www.hwg.org/ (HTML Writer's Guide)

http://builder.com/ (CNET Web Solution Builder)

· And you may search the following sites for additional info

http://www.google.com

http://www.yahoo.com

http://www.excite.com

http://www.infoseek.com

http://www.alta-vista.com

2.2 Web Browsers

· Web clients for getting information from a Web server

· URL (Uniform Resource Locator)

· Protocol://Hostname/FolderName/FileName.html

· Web browser supported protocols:

HyperText Transfer Protocol: http://

For files on local drives, the 3rd slash replaced the host name: file:///

File Transfer Protocol: ftp://

For files on Gopher server: gopher://

Remote login to a specific host: telnet://

Connect to a Wide Area Information Server: wais://

To open a mail message window for email: mailto:

To connect to a newsgroup: news:

· Web Browsers can be downloaded through:

Netscape Navigator: http://home.netscape.com/download/

Microsoft Internet Explorer: http://www.microsoft.com/windows/ie/downloads/default.asp

Sun HotJava: http://java.sun.com/products/hotjava/

· Other Alternative Displays

WebTV http://www.webtv.net/

Hand-Held Devices -- palm-top computers, cellular phones, etc

2.3 Homepage and Web Pages

· What is a Web Page?

Each “Web Page” that we load from the Web is a single document, written in a language called HTML, that includes the text of its document, its structure and any links to other documents, images, and other media.

• Each Web site has a homepage normally saved as index.html, default.html, or welcome.html. From this page, many other HTML document pages are structured with a combination of the following organizations: hierarchy organization, linear organization, linear with alternative, and Web.

· Script languages can be inserted for creating interactive and dynamic Web pages.

• Frames format display may be used to allow a document window to be divided into rectangular regions, each associated with a separate HTML document.

2.4 Types of Web Sites

(Domain names and IP Addresses; Web hosting services)

• E-Commerce, E-Business (B2B, B2C)
• Intranet Sites (inside the firewall)
• Topic Sites
• Personal Sites
• Collaborative Work Site
• University/College Web sites

2.5 Web Page Design

• Analysis (Requirements and planning)
• Design (Content and layout)
• Development (Develop the page content)
• Test (Web pages, site)
• Publish and Update

Figure 2-1 Web Page Design Procedure

Analysis (Planning)

• Objectives:
• Commercial/Business applications
• Banking application
• Product sales/services
• Other

• Staffing and skills needed (multimedia authoring):
• Content writer
• Content architect
• Content integrator
• Sound artist
• Graphics artist
• Video animation specialist
• Interface designer
• Editor
• Technical support
• Production manager

• Other Staffs:
• Programmer (CGI, JAVA, etc)
• Database Analyst
• EDI Integrator (Electronic Data Interchange)
• Networking Experts
• Web master (HTML, JavaScript, etc)
• Computer specialist
• Web layer/Copyright specialist
• Web marketing/advising
• Media specialist for emerging media

• User:
• How many concurrent connections
• Type of users

• Web Hosting issues:
• Where, how much ($)

• Identify support:
• Technologies and resources

• Web page publishing tools:
• Page management
• Collecting feedback

Design (Content and Layout)

• Web Site/Page organization:
• Defining Home Page:
• Company Information (about Company, directions, mission and goal, success stories, professional articles, stock quotes, etc)
• Human Resource (personnel homepage, job listing, FAQs)

Interactivity (gather user info through forms, try-and-buy, relationship building, links)

• Product Information (fact sheets, new product announcement, benchmarks, trade show news, FAQs)
• Sales Information (sales office locations, key contacts, sales forms, shipment tracking, etc)
• Support (technical information, bug, hints, tips, white paper, FAQs)

Figure 2-2 Defining Web site and Homepage

o Hierarchy organization:

Linear organization

Linear with Alternative

Web (Multi-sites)

o Master Document (a uniform appearance for every page):

The background

Repeating images

The company logo

Icons

Footer info

o Note Card (Story boards) Design Approach

§ Write each topic on a separate note card

§ Pin each note card to a board or spread them out on a table

§ Group and rank related information

§ Connect note cards with strings

o Static or Dynamic/Interactive page

o Images, graphics

o Links to other WWW documents

o Single page/Frame

o Email feedback to Webmaster

o Forms for gather user information: name, address, phone, Email, etc

Develop the page content (Development)

• Project management (communication, meeting, status monitoring, change request, change control, milestones)
• Build Web pages
• Graphics images
• Creating links and relationship between each topics

Test the Web Page

• Consider the other old version Web browsers
• Try it on various Web browsers
• Overall appearance
• Usability
• Readability
• Accuracy
• Restriction

Publish the pages (Implement and update)

• Web server (Platforms: LINUX, 2000/XP, Windows, Mac; Software: Apache, IIS, etc)
• Log In
• UNIX/LINUX directory structures (for storing files):
• Root: (bin, ect, users, tmp, lin)

• Pathname: (absolute, relative)
• Basic UNIX Commands:

cd

cp

ls [options] [names]

-a show all the files

mkdir [dirname]

more [filesnames(s)]

mv [source] [destination]

pg

passwd

pwd

rm

rmdir

• File Naming Convention
• HTML documents
• .htm (Window server)
• .html (UNIX server)
• Graphics
• jpg or jepg
• gif


• Uploading documents
• FTP
• Launch FTP program
• Locate the appropriate directory
• Specify the transfer mode
• Upload files to the server
• Disconnect

• Netscape Navigator and Internet Explorer browsers

• TELNET (remote login)

ls -l to view current permissions

Setup file permissions (chmod)

chmod -R go+rx * -- give read (r) and execute (x) to the group (g) and all other users (o)

2.6 Web Page Authoring Tools

· Notepad text editor -- Microsoft Windows

· Microsoft Word -- Microsoft Windows

· FrontPage -- Microsoft Windows

· Microsoft InterDev -- Microsoft Windows and Mac environments

· WebCT -- http://www.webct.com/

· DreamWeaver -- http://www.macromedia.com

· Adobe GoLive -- http://www.adobe.com

· Web design tools Web Site for Web Authoring Tools

2.7 Publishing Web Pages (HTTP Server)

• Install a computer and connected it to the Internet (TCP/IP protocol support, IP address, and domain name) and running a Web (HTTP) server
• The HTTP server takes the URL (Uniform Resource Locator, the web address) specified by the client's browser and translates it into a specific filename on the server's system
• Create a "www" or "public_html" directory for files
• Create documents from remote system on the Internet and upload files using FTP client or working on the same HTTP server systems in the target directory
• Some commonly used defaults are: index.html, Welcome.html, default.html
• Notice that Microsoft uses "htm" extension as default
• Set file and directory permissions
• Allows you to setup password access restrictions
• Validate the documents using web page validators

http://www.websitegarage.com/

2.8 Server Support Tools

• LiveWire from Netscape is an online development environment for Web site management and client-server application development. It uses JavaScript, Netscape's scripting language, to create server-based applications similar to CGI programs.
• Sun's Java Web server support a similar capability in Java
• Microsoft Internet Information Server (IIS) support Active Server Page for building dynamic documents
• UNIX HTTP servers support "Server-Side Include"

Supporting Sites:

Web Services:
http://www.microsoft.com/ntserver/techresources/webserv/default.asp

Active Server Pages:
http://msdn.microsoft.com/library/default.asp?url=/nhp/Default.asp?contentid=28000522

ASP.NET:

http://msdn.microsoft.com/library/default.asp?url=/nhp/Default.asp?contentid=28000440

Microsoft: VBScript, Jscript:
http://msdn.microsoft.com/scripting/default.htm

Server Side Includes:
http://hoohoo.ncsa.uiuc.edu/docs/tutorials/includes.html

Sun's Java Web Server:
http://jserv.javasoft.com/index.html

• Web server survey

http://www.netcraft.com/survey

Developer	July 2002	Percent	August 2002	Percent	Change
Apache	10811987	65.21	11001650	66.64	1.43
Microsoft	4176048	25.19	4074058	24.68	-0.51
iPlanet	214063	1.29	208968	1.27	-0.02
Zeus	183921	1.11	184143	1.12	0.01

· Hosting Companies with fastest increase in responding ip addresses

January - August 2002 (source - http://www.netcraft.com/survey/)

Hosting Company	January 2002	August 2002	Change
rackshack.net	5,485	10,329	88%
cybercon.com	8,607	12,373	44%
crystaltech.com	7,109	10,188	43%
interland.net	92,052	125,589	36%
dialtoneinternet.net	24,429	32,752	34%
sphere.ad.jp	8,173	10,771	32%
he.net	9,791	12,810	31%
rackspace.com	9,419	12,176	29%

Activities

1. Determine the resource needed for a Web site for the SUNXYZ Co., that sales PCs directly through the Web. The company has the following departments: PRODUCT SALES, TECHNICAL SUPPORT, ACCOUNTING, PERSONNALE, SHIPPING
2. Architect and organize the SUNXYZ Co., Web site by determining folders or directories for appropriate department. Creating the folders for the departments as listed above.