Your SlideShare is downloading. ×
Copyright, 1999 © Quinotaur Design. All rights reserved.
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Copyright, 1999 © Quinotaur Design. All rights reserved.


Published on

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • Server Monitoring Uptime NetMechanic Server Check $
  • Domain lookup Network Solutions (US) RIPE (Europe) APNIC (Asia Pacific)
  • Guides and Directories CNET’s Ultimate Web Host List Web Host Directory Host Investigator HostSearch Top Hosts WebHosters ISP Check HostIndex Yahoo!’s List : Communications_and_Networking/Internet_and_World_Wide_Web/ Network_Service_Providers/Hosting/Web_Site_Hosting/ Free Hosting Providers GeoCities Tripod Angelfire
  • HTML Editors Allaire Homesite BBEdit Macromedia Dreamweaver Other Tools Cute FTP WS_FTP Pro Ewan Telnet,,0006A4,.html
  • Web Standards HTML 4.0 Specification The Web Standards Project Validation Tools W3C Validator LinkExchange Site Inspector CSE3510 HTML Validator Note: HomeSite also has a built in customizable validator
  • Browsers Download most browsers from one central location. BrowserWatch Provides up-to-date information on all browsers. Netscape Communicator Internet Explorer Web TV Viewer WebMonkey’s Browser Kit
  • Web Palette Cat 'n Moose Web Safe Color Finder Enter a hex RGB code and find the nearest colors in the web-safe palette Tray Color Grab a color from anywhere on your screen and convert to Hex, Decimal, RGB, and HTML Fonts Microsoft’s list of fonts installed on different systems Example Code: <font family=“Arial, Helvetica, sans-serif”>Text</font> Stylesheets Webmonkey's Stylesheet Reference
  • Link Verification: Net Mechanic’s Link Check Note: HomeSite also has a built in link checker Usability Resources: Jakob Nielson’s Usability Website User Interface Engineering
  • Image Creation and Optimization Tools Net Mechanic GIFBot GIF Wizard Debabelizer Macromedia Fireworks Adobe Photoshop Sample Image Code <img src=“filename.gif” alt=“Alternate Text Describing Image” height=“100” width=“100” border=“0”>
  • Using a Spacer GIF Create a 1 pixel x 1 pixel transparent GIF (or colored in some cases). Use the image tag to stretch the image to the size you need. Example: <img src=“spacer.gif” height=“1” width=“20” alt=“spacer”>
  • Organizations HTML Writer’s Guild International Webmasters Association Websites WebMonkey Web
  • Pair Networks Pair Home Why Pair ISPCheck Review
  • Transcript

    • 1. Chapter Web Development Copyright, 1999 © Quinotaur Design. All rights reserved. Angelique Higgins Quinotaur Design [email_address]
    • 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 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
      • Do you want the web site to...?
        • Attract new members
        • Advertise events
        • Provide information or resources
        • Create a community
      Before You Start
    • 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 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 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 Host
    • 11. Using a Domain
      • Cost is ~$70 for two years
      • Many web hosts will register for you
      • No ISACA Guidelines
        • Examples:
      Choosing 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 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 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
      • WYSIWYG editors can generate extra code
      • TIP Comments aid code navigation: <!-- begin spacer column -->
      Web Design Essentials
    • 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
      Web Design Essentials
    • 18. Design for different environments continued
      • Use 216 color web-safe palette
      • Choose universal fonts and list alternates
      • Use stylesheets for easier maintenance
      • Degrade gracefully
      • Test it!
      Web 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 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 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 purpose
      • Choose your web host carefully
      • Use effective tools
      • Follow web design essentials
    • 24. Thank You! Visit 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: Example
    • 26. Sample Stylesheet In file named master.css: <STYLE type=&quot;text/css&quot;> <!-- .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 Code with 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>