copyright, 1999 © quinotaur design. all rights reserved
TRANSCRIPT
![Page 1: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/1.jpg)
1
Copyright, 1999 © Quinotaur Design. All rights reserved.
Chapter Web Development
Angelique HigginsQuinotaur [email protected]
![Page 2: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/2.jpg)
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.
![Page 3: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/3.jpg)
3
Overview
Step 1: Determine Audience & Purpose Choosing a Web Host Selecting Tools Web Design Essentials Tips and Tricks
![Page 4: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/4.jpg)
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?
![Page 5: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/5.jpg)
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
![Page 6: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/6.jpg)
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
![Page 7: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/7.jpg)
7
Choosing a Web Host
Traffic Allowance Space & Speed Support Using a Domain Optional Considerations
![Page 8: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/8.jpg)
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
![Page 9: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/9.jpg)
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
![Page 10: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/10.jpg)
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
![Page 11: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/11.jpg)
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
![Page 12: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/12.jpg)
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
![Page 13: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/13.jpg)
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
![Page 14: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/14.jpg)
14
Pick Your Tools
HTML editors– Code: HomeSite (PC) or BBEdit (Mac)– WYSIWYG: Dreamweaver
Other Tools– FTP Program– Telnet– Image Editor
![Page 15: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/15.jpg)
15
Web Design Essentials
Use clean code Design for different environments Provide clear navigation Optimize images
![Page 16: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/16.jpg)
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
![Page 17: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/17.jpg)
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
![Page 18: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/18.jpg)
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
![Page 19: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/19.jpg)
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
![Page 20: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/20.jpg)
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
![Page 21: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/21.jpg)
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
![Page 22: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/22.jpg)
22
Tips and Tricks continued
Avoid: Frames (navigation, bookmarks,
maintenance) Unnecessary “bells & whistles”, i.e.
sound, animation, Java applets, counters, pop-up windows, etc.
![Page 23: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/23.jpg)
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
![Page 24: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/24.jpg)
24
Thank You!
Visit http://www.quinotaur.com/seminar.htm to visit web sites listed in notes and view related resources
![Page 25: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/25.jpg)
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
![Page 26: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/26.jpg)
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”>
![Page 27: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/27.jpg)
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
![Page 28: Copyright, 1999 © Quinotaur Design. All rights reserved](https://reader036.vdocument.in/reader036/viewer/2022062418/55563845d8b42a28608b4fcd/html5/thumbnails/28.jpg)
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>