1

Copyright, 1999 © Quinotaur Design. All rights reserved.

Chapter Web Development

Angelique HigginsQuinotaur Designangie@quinotaur.com

2

Introduction

Creating and maintaining a professional website is not an easy task.

But…using the right tools and techniques will make your job simpler.

3

Overview

Step 1: Determine Audience & Purpose Choosing a Web Host Selecting Tools Web Design Essentials Tips and Tricks

4

Step 1

Who is your audience?– How will they access your website?

What is the purpose of your website?– What is your audience looking for?– What will you provide?

5

Who is Your Audience?

Are they members, CISAs or prospects? Do they have...?

– T1 lines or 14.4 modems– 14” monitors or 21” monitors?– Netscape 3.1 or Internet Explorer 5.0?– Do they surf at home, at work, or behind

firewalls?

Example: 80% ISACA members, most surf at work, many behind firewalls, average connection is 128k, average monitor is 17”.

Before You StartBefore You Start

6

What is the purpose of your site?

Is your audience looking for?– Info about ISACA– Educational events– Job listings– Chapter or industry

news– Networking

opportunities

Before You StartBefore You Start

Do you want the web site to...?– Attract new members– Advertise events– Provide information

or resources– Create a community

7

Choosing a Web Host

Traffic Allowance Space & Speed Support Using a Domain Optional Considerations

8

Traffic Allowance

To determine needs:– Check current log files– Guess your traffic

• Example: 200k website x 100 visitors a day x 30 days = 585 Mb/month

ISACA’s monthly statistics (approx.):– 8 GB data transfer– 275,000 page views– 20,000 unique hosts

Choosing a Web HostChoosing a Web Host

9

Space & Speed

Storage Space is not an issue for the average website. – May need extra space if providing PDFs or

other large documents. Connection

– The more bandwidth the better

Choosing a Web HostChoosing a Web Host

10

Support: Most Critical! How can you receive support? (e-mail,

phone, web, etc.) How fast do get help? Why kind of

assistance is offered? What are the guarantees and the

procedures if you are not satisfied? Do they take precautions? (daily backups,

monitoring, multiple connections)

Choosing a Web HostChoosing a Web Host

11

Using a Domain Cost is ~$70 for two years Many web hosts will register for you No ISACA Guidelines

– Examples:• www.isaca.org.au• www.isaca.bm• www.isaca-vancouver.org• www.sfisaca.org

Choosing a Web HostChoosing a Web Host

12

Optional Considerations

POP email accounts Access to raw log files or generated

reports CGI, SSI, databases, etc. E-Commerce: SSL, shopping cart,

CyberCash, etc. Chat, Real Audio, NetShow

Choosing a Web HostChoosing a Web Host

13

Where to Find Web Hosts

Virtual Domains Guides and

Directories Search engines Advertisements Associations Recommendations

Non-Virtual Domain Free hosts Local businesses or

organizations Local Internet

Service Provider

Example

Choosing a Web HostChoosing a Web Host

14

Pick Your Tools

HTML editors– Code: HomeSite (PC) or BBEdit (Mac)– WYSIWYG: Dreamweaver

Other Tools– FTP Program– Telnet– Image Editor

15

Web Design Essentials

Use clean code Design for different environments Provide clear navigation Optimize images

16

Use clean code

Clean code provides faster downloads, fewer errors, and improves problem-solving

Following HTML standards improves accessibility and also prevents errors

TIP Comments aid code navigation:

<!-- begin spacer column -->

Web Design EssentialsWeb Design Essentials

WYSIWYG editors can generate extra code

17

Design for different environments

Know your audience Design should work

at 640 x 480, 256 colors

Fast download

Example: ISACA: 93% use a 4.0 or higher version browser

ISACA's March 2000 Browser Statistics

IE 3.x1%

NN 3.x3%

IE 5.x40%

NC 4.x17%

Other3%

IE 4.x36%

IE 4.x NC 4.x IE 5.xIE 3.x NN 3.x Other

Web Design EssentialsWeb Design Essentials

18

Design for different environmentscontinued

Use 216 color web-safe palette Choose universal fonts and list

alternates Use stylesheets for easier maintenance Degrade gracefully Test it!

Web Design EssentialsWeb Design Essentials

19

Provide Clear Navigation

Three-clicks away from everything Always provide text links Reduce scrolling if possible Many small pages or 1 large page? Be consistent! Have people unfamiliar with your site test it Check for broken links and dead-ends

Web Design EssentialsWeb Design Essentials

20

Optimize Images

Do: Use GIFs for

graphics & JPEGs for photos

Provide alt text Specify H & W Save images at 72

dpi and < 216 colors

Try not to: Add unnecessary

images Use a background

image behind text Use images > 25k

Web Design EssentialsWeb Design Essentials

21

Tips and Tricks

Use tables and spacer GIF for page layout control

Place most important information at the top of the page

Use blockquote tag Use descriptive TITLE & META tags Less is more (1/3 of print content) Don’t repeat information, link to it

22

Tips and Tricks continued

Avoid: Frames (navigation, bookmarks,

maintenance) Unnecessary “bells & whistles”, i.e.

sound, animation, Java applets, counters, pop-up windows, etc.

23

Conclusion

Building and running a successful web site is much easier if you:Know your audience and purposeChoose your web host carefullyUse effective tools Follow web design essentials

24

Thank You!

Visit http://www.quinotaur.com/seminar.htm to visit web sites listed in notes and view related resources

25

Why pair Networks?

Traffic: 100Mb-4Gb per day

Storage: 30Mb and Speed: 4 DS-3’s Excellent support

forum & response time

Many extras

Recommended by:– HTML Writer’s Guild

members– Internet guides– Satisfied clients

(MMG) Largest independent

provider, in business since 1995

Choosing a Web Host: Choosing a Web Host: ExampleExample

26

Sample StylesheetIn file named master.css:<STYLE type="text/css"><!--.small { font-size: 13pt; }UL { list-style-type: square; }A:link { font-weight: bold; color: #8a213a; }H1, H2 { color: #8A213A; font-family: Verdana, Arial, Helvetica, sans-serif; }H1 { font-size: 21pt; }.highlight { background-color: #ffff33; }--></STYLE>

In the header of each page:

<link rel=“stylesheet” href=“master.css” type=“text/css”>

27

Sample Table Codewith Spacer GIF

<table width=“100%” border=“1” cellspacing=“1” cellpadding=“1”><tr valign=“top”>

<td rowspan=“2” width=“100”>Links</td><td rowspan=“2” width=“10”><img src=“spacer.gif” height=“1” width=“10” alt=“spacer”></td><td align=“center” valign=“middle”>Header</td>

</tr><tr>

<td align=“center”>Body Text</td></tr></table>

Links

Body Text

Header

Spacer column

28

Sample Title and META Tags

<html><head><title>USA ISACA Chapter Educational Events</title><meta name=“keywords” content=“education, seminar, training, IS audit, control, security, CPE”><meta name=“description” content=“A list of seminars offered by the Information Systems Audit and Control Association USA Chapter.”></head><body>