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.

1,149
views

Published on


0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,149
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Server Monitoring Uptime http://uptime.arsdigita.com/uptime/about.tcl NetMechanic Server Check $ http://www.netmechanic.com/monitor.htm
  • Domain lookup Network Solutions (US) http://www.networksolutions.com/cgi-bin/whois/whois RIPE (Europe) http://www.ripe.net/cgi-bin/whois APNIC (Asia Pacific) http://whois.apnic.net/
  • Guides and Directories CNET’s Ultimate Web Host List http://www.webhostlist.com/ Web Host Directory http://webhostdir.com/ Host Investigator http://www.hostinvestigator.com/ HostSearch http://www.hostsearch.com/ Top Hosts http://www.tophosts.com/ WebHosters http://www.webhosters.com/ ISP Check http://www.ispcheck.com/ HostIndex http://www.hostindex.com Yahoo!’s List : http://dir.yahoo.com/Business_and_Economy/Business_to_Business/ Communications_and_Networking/Internet_and_World_Wide_Web/ Network_Service_Providers/Hosting/Web_Site_Hosting/ Free Hosting Providers GeoCities http://www.geocities.com Tripod http://www.tripod.com Angelfire http://www.angelfire.com
  • HTML Editors Allaire Homesite http://www.allaire.com/products/homesite/index.cfm BBEdit http://web.barebones.com/products/bbedit/bbedit.html Macromedia Dreamweaver http://www.macromedia.com/software/dreamweaver/ Other Tools Cute FTP http://www.cuteftp.com/ WS_FTP Pro http://www.wsftp.com Ewan Telnet http://www.zdnet.com/downloads/stories/info/0,,0006A4,.html
  • Web Standards HTML 4.0 Specification http://www.w3.org/TR/REC-html40/ The Web Standards Project http://www.webstandards.org/ Validation Tools W3C Validator http://validator.w3.org LinkExchange Site Inspector http://www.siteinspector.com/ CSE3510 HTML Validator http://www.htmlvalidator.com/ Note: HomeSite also has a built in customizable validator
  • Browsers Browsers.com http://www.browsers.com Download most browsers from one central location. BrowserWatch http://browserwatch.internet.com/ Provides up-to-date information on all browsers. Netscape Communicator http://www.netscape.com/computing/download/index.html?cp=hom07pbro Internet Explorer http://www.microsoft.com/windows/ie/default.htm Web TV Viewer http://developer.webtv.net/design/tools/viewer/Default.htm WebMonkey’s Browser Kit http://hotwired.lycos.com/webmonkey/browserkit/
  • Web Palette Cat 'n Moose Web Safe Color Finder http://www.catnmoose.com/wsc.shtml Enter a hex RGB code and find the nearest colors in the web-safe palette Tray Color http://hotfiles.zdnet.com/cgi-bin/texis/swlib/hotfiles/info.html?fcode=000DEU 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 http://www.microsoft.com/typography/web/fonts/fonts03.htm Example Code: <font family=“Arial, Helvetica, sans-serif”>Text</font> Stylesheets Webmonkey's Stylesheet Reference http://hotwired.lycos.com/webmonkey/stylesheets/reference/
  • Link Verification: Net Mechanic’s Link Check http://www.netmechanic.com/ Note: HomeSite also has a built in link checker Usability Resources: Jakob Nielson’s Usability Website http://www.useit.com User Interface Engineering http://world.std.com/~uieweb/
  • Image Creation and Optimization Tools Net Mechanic GIFBot http://www.netmechanic.com/accelerate.htm GIF Wizard http://www.gifwizard.com/ Debabelizer http://www.debabelizer.com/ Macromedia Fireworks http://www.macromedia.com/software/fireworks/ Adobe Photoshop http://www.adobe.com/prodindex/photoshop/main.html 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 http://www.hwg.org International Webmasters Association http://www.irwa.org/ Websites Builder.com http://www.builder.com/ WebMonkey http://www.hotwired.com/webmonkey/ Web Developer.com http://www.webdeveloper.com/
  • Pair Networks Pair Home http://www.pair.com Why Pair http://www.pair.com/pair/advantages.html ISPCheck Review http://www.ispcheck.com/g/certificate.asp?id=406023
  • 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:
          • www.isaca.org.au
          • www.isaca.bm
          • www.isaca-vancouver.org
          • www.sfisaca.org
      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 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: 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>