Chapter Web Development Copyright, 1999 © Quinotaur Design. All rights reserved. Angelique Higgins Quinotaur Design [email...
Introduction <ul><li>Creating and maintaining a professional website is  not  an easy task. </li></ul><ul><li>But… using t...
Overview <ul><li>Step 1: Determine Audience & Purpose </li></ul><ul><li>Choosing a Web Host </li></ul><ul><li>Selecting To...
Step 1 <ul><li>Who is your  audience? </li></ul><ul><ul><li>How will they access your website? </li></ul></ul><ul><li>What...
Who is Your Audience? <ul><li>Are they members, CISAs or prospects? </li></ul><ul><li>Do they have...? </li></ul><ul><ul><...
What is the purpose of your site? <ul><li>Is your audience looking for? </li></ul><ul><ul><li>Info about ISACA </li></ul><...
Choosing a Web Host <ul><li>Traffic Allowance </li></ul><ul><li>Space & Speed </li></ul><ul><li>Support </li></ul><ul><li>...
Traffic Allowance <ul><li>To determine needs: </li></ul><ul><ul><li>Check current log files </li></ul></ul><ul><ul><li>Gue...
Space & Speed <ul><li>Storage Space is not an issue for the average website.  </li></ul><ul><ul><li>May need extra space i...
Support: Most Critical! <ul><li>How can you receive support? (e-mail, phone, web, etc.) </li></ul><ul><li>How fast do get ...
Using a Domain <ul><li>Cost is ~$70 for two years </li></ul><ul><li>Many web hosts will register for you </li></ul><ul><li...
Optional Considerations <ul><li>POP email accounts </li></ul><ul><li>Access to raw log files or generated reports </li></u...
Where to Find Web Hosts <ul><li>Virtual Domains </li></ul><ul><li>Guides and Directories </li></ul><ul><li>Search engines ...
Pick Your Tools <ul><li>HTML editors </li></ul><ul><ul><li>Code: HomeSite (PC) or BBEdit (Mac) </li></ul></ul><ul><ul><li>...
Web Design Essentials <ul><li>Use clean code </li></ul><ul><li>Design for different environments </li></ul><ul><li>Provide...
Use clean code <ul><li>Clean code provides faster downloads, fewer errors, and improves problem-solving </li></ul><ul><li>...
Design for different environments <ul><li>Know your audience </li></ul><ul><li>Design should work at 640 x 480, 256 colors...
Design for different environments continued <ul><li>Use 216 color web-safe palette </li></ul><ul><li>Choose universal font...
Provide Clear Navigation <ul><li>Three-clicks away from everything </li></ul><ul><li>Always provide text links </li></ul><...
Optimize Images <ul><li>Do: </li></ul><ul><li>Use GIFs for graphics & JPEGs for photos </li></ul><ul><li>Provide alt text ...
Tips and Tricks <ul><li>Use  tables and spacer GIF  for page layout control </li></ul><ul><li>Place most important informa...
Tips and Tricks  continued <ul><li>Avoid: </li></ul><ul><li>Frames (navigation, bookmarks, maintenance) </li></ul><ul><li>...
Conclusion <ul><li>Building and running a successful web site is much easier if you: </li></ul><ul><li>Know your audience ...
Thank You! Visit http://www.quinotaur.com/seminar.htm to visit web sites listed in notes and view related resources
Why pair Networks? <ul><li>Traffic: 100Mb-4Gb per day </li></ul><ul><li>Storage: 30Mb and   </li></ul><ul><li>Speed: 4 DS...
Sample Stylesheet In file named master.css: <STYLE type=&quot;text/css&quot;> <!-- .small { font-size: 13pt; } UL { list-s...
Sample Table Code with Spacer GIF <ul><li><table width=“100%” border=“1” cellspacing=“1” cellpadding=“1”> </li></ul><ul><l...
Sample Title and META Tags <html> <head> <title>USA ISACA Chapter Educational Events</title> <meta name=“keywords” content...
Upcoming SlideShare
Loading in …5
×

Copyright, 1999 © Quinotaur Design. All rights reserved.

11,133 views

Published on

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

No Downloads
Views
Total views
11,133
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

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 &apos;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: &lt;font family=“Arial, Helvetica, sans-serif”&gt;Text&lt;/font&gt; Stylesheets Webmonkey&apos;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 &lt;img src=“filename.gif” alt=“Alternate Text Describing Image” height=“100” width=“100” border=“0”&gt;
  • 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: &lt;img src=“spacer.gif” height=“1” width=“20” alt=“spacer”&gt;
  • 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
  • Copyright, 1999 © Quinotaur Design. All rights reserved.

    1. 1. Chapter Web Development Copyright, 1999 © Quinotaur Design. All rights reserved. Angelique Higgins Quinotaur Design [email_address]
    2. 2. Introduction <ul><li>Creating and maintaining a professional website is not an easy task. </li></ul><ul><li>But… using the right tools and techniques will make your job simpler. </li></ul>
    3. 3. Overview <ul><li>Step 1: Determine Audience & Purpose </li></ul><ul><li>Choosing a Web Host </li></ul><ul><li>Selecting Tools </li></ul><ul><li>Web Design Essentials </li></ul><ul><li>Tips and Tricks </li></ul>
    4. 4. Step 1 <ul><li>Who is your audience? </li></ul><ul><ul><li>How will they access your website? </li></ul></ul><ul><li>What is the purpose of your website? </li></ul><ul><ul><li>What is your audience looking for? </li></ul></ul><ul><ul><li>What will you provide? </li></ul></ul>
    5. 5. Who is Your Audience? <ul><li>Are they members, CISAs or prospects? </li></ul><ul><li>Do they have...? </li></ul><ul><ul><li>T1 lines or 14.4 modems </li></ul></ul><ul><ul><li>14” monitors or 21” monitors? </li></ul></ul><ul><ul><li>Netscape 3.1 or Internet Explorer 5.0? </li></ul></ul><ul><ul><li>Do they surf at home, at work, or behind firewalls? </li></ul></ul><ul><ul><li>Example: 80% ISACA members, most surf at work, many behind firewalls, average connection is 128k, average monitor is 17”. </li></ul></ul>Before You Start
    6. 6. What is the purpose of your site? <ul><li>Is your audience looking for? </li></ul><ul><ul><li>Info about ISACA </li></ul></ul><ul><ul><li>Educational events </li></ul></ul><ul><ul><li>Job listings </li></ul></ul><ul><ul><li>Chapter or industry news </li></ul></ul><ul><ul><li>Networking opportunities </li></ul></ul><ul><li>Do you want the web site to...? </li></ul><ul><ul><li>Attract new members </li></ul></ul><ul><ul><li>Advertise events </li></ul></ul><ul><ul><li>Provide information or resources </li></ul></ul><ul><ul><li>Create a community </li></ul></ul>Before You Start
    7. 7. Choosing a Web Host <ul><li>Traffic Allowance </li></ul><ul><li>Space & Speed </li></ul><ul><li>Support </li></ul><ul><li>Using a Domain </li></ul><ul><li>Optional Considerations </li></ul>
    8. 8. Traffic Allowance <ul><li>To determine needs: </li></ul><ul><ul><li>Check current log files </li></ul></ul><ul><ul><li>Guess your traffic </li></ul></ul><ul><ul><ul><li>Example: 200k website x 100 visitors a day x 30 days = 585 Mb/month </li></ul></ul></ul><ul><li>ISACA’s monthly statistics (approx.): </li></ul><ul><ul><li>8 GB data transfer </li></ul></ul><ul><ul><li>275,000 page views </li></ul></ul><ul><ul><li>20,000 unique hosts </li></ul></ul>Choosing a Web Host
    9. 9. Space & Speed <ul><li>Storage Space is not an issue for the average website. </li></ul><ul><ul><li>May need extra space if providing PDFs or other large documents. </li></ul></ul><ul><li>Connection </li></ul><ul><ul><li>The more bandwidth the better </li></ul></ul>Choosing a Web Host
    10. 10. Support: Most Critical! <ul><li>How can you receive support? (e-mail, phone, web, etc.) </li></ul><ul><li>How fast do get help? Why kind of assistance is offered? </li></ul><ul><li>What are the guarantees and the procedures if you are not satisfied? </li></ul><ul><li>Do they take precautions? (daily backups, monitoring, multiple connections) </li></ul>Choosing a Web Host
    11. 11. Using a Domain <ul><li>Cost is ~$70 for two years </li></ul><ul><li>Many web hosts will register for you </li></ul><ul><li>No ISACA Guidelines </li></ul><ul><ul><li>Examples: </li></ul></ul><ul><ul><ul><li>www.isaca.org.au </li></ul></ul></ul><ul><ul><ul><li>www.isaca.bm </li></ul></ul></ul><ul><ul><ul><li>www.isaca-vancouver.org </li></ul></ul></ul><ul><ul><ul><li>www.sfisaca.org </li></ul></ul></ul>Choosing a Web Host
    12. 12. Optional Considerations <ul><li>POP email accounts </li></ul><ul><li>Access to raw log files or generated reports </li></ul><ul><li>CGI, SSI, databases, etc. </li></ul><ul><li>E-Commerce: SSL, shopping cart, CyberCash, etc. </li></ul><ul><li>Chat, Real Audio, NetShow </li></ul>Choosing a Web Host
    13. 13. Where to Find Web Hosts <ul><li>Virtual Domains </li></ul><ul><li>Guides and Directories </li></ul><ul><li>Search engines </li></ul><ul><li>Advertisements </li></ul><ul><li>Associations </li></ul><ul><li>Recommendations </li></ul><ul><li>Non-Virtual Domain </li></ul><ul><li>Free hosts </li></ul><ul><li>Local businesses or organizations </li></ul><ul><li>Local Internet Service Provider </li></ul><ul><li>Example </li></ul>Choosing a Web Host
    14. 14. Pick Your Tools <ul><li>HTML editors </li></ul><ul><ul><li>Code: HomeSite (PC) or BBEdit (Mac) </li></ul></ul><ul><ul><li>WYSIWYG: Dreamweaver </li></ul></ul><ul><li>Other Tools </li></ul><ul><ul><li>FTP Program </li></ul></ul><ul><ul><li>Telnet </li></ul></ul><ul><ul><li>Image Editor </li></ul></ul>
    15. 15. Web Design Essentials <ul><li>Use clean code </li></ul><ul><li>Design for different environments </li></ul><ul><li>Provide clear navigation </li></ul><ul><li>Optimize images </li></ul>
    16. 16. Use clean code <ul><li>Clean code provides faster downloads, fewer errors, and improves problem-solving </li></ul><ul><li>Following HTML standards improves accessibility and also prevents errors </li></ul><ul><li>WYSIWYG editors can generate extra code </li></ul><ul><li>TIP Comments aid code navigation: <!-- begin spacer column --> </li></ul>Web Design Essentials
    17. 17. Design for different environments <ul><li>Know your audience </li></ul><ul><li>Design should work at 640 x 480, 256 colors </li></ul><ul><li>Fast download </li></ul><ul><ul><li>Example: ISACA: 93% use a 4.0 or higher version browser </li></ul></ul>Web Design Essentials
    18. 18. Design for different environments continued <ul><li>Use 216 color web-safe palette </li></ul><ul><li>Choose universal fonts and list alternates </li></ul><ul><li>Use stylesheets for easier maintenance </li></ul><ul><li>Degrade gracefully </li></ul><ul><li>Test it! </li></ul>Web Design Essentials
    19. 19. Provide Clear Navigation <ul><li>Three-clicks away from everything </li></ul><ul><li>Always provide text links </li></ul><ul><li>Reduce scrolling if possible </li></ul><ul><li>Many small pages or 1 large page? </li></ul><ul><li>Be consistent! </li></ul><ul><li>Have people unfamiliar with your site test it </li></ul><ul><li>Check for broken links and dead-ends </li></ul>Web Design Essentials
    20. 20. Optimize Images <ul><li>Do: </li></ul><ul><li>Use GIFs for graphics & JPEGs for photos </li></ul><ul><li>Provide alt text </li></ul><ul><li>Specify H & W </li></ul><ul><li>Save images at 72 dpi and < 216 colors </li></ul><ul><li>Try not to: </li></ul><ul><li>Add unnecessary images </li></ul><ul><li>Use a background image behind text </li></ul><ul><li>Use images > 25k </li></ul>Web Design Essentials
    21. 21. Tips and Tricks <ul><li>Use tables and spacer GIF for page layout control </li></ul><ul><li>Place most important information at the top of the page </li></ul><ul><li>Use blockquote tag </li></ul><ul><li>Use descriptive TITLE & META tags </li></ul><ul><li>Less is more (1/3 of print content) </li></ul><ul><li>Don’t repeat information, link to it </li></ul>
    22. 22. Tips and Tricks continued <ul><li>Avoid: </li></ul><ul><li>Frames (navigation, bookmarks, maintenance) </li></ul><ul><li>Unnecessary “bells & whistles”, i.e. sound, animation, Java applets, counters, pop-up windows, etc. </li></ul>
    23. 23. Conclusion <ul><li>Building and running a successful web site is much easier if you: </li></ul><ul><li>Know your audience and purpose </li></ul><ul><li>Choose your web host carefully </li></ul><ul><li>Use effective tools </li></ul><ul><li>Follow web design essentials </li></ul>
    24. 24. Thank You! Visit http://www.quinotaur.com/seminar.htm to visit web sites listed in notes and view related resources
    25. 25. Why pair Networks? <ul><li>Traffic: 100Mb-4Gb per day </li></ul><ul><li>Storage: 30Mb and  </li></ul><ul><li>Speed: 4 DS-3’s </li></ul><ul><li>Excellent support forum & response time </li></ul><ul><li>Many extras </li></ul><ul><li>Recommended by: </li></ul><ul><ul><li>HTML Writer’s Guild members </li></ul></ul><ul><ul><li>Internet guides </li></ul></ul><ul><ul><li>Satisfied clients (MMG) </li></ul></ul><ul><li>Largest independent provider, in business since 1995 </li></ul>Choosing a Web Host: Example
    26. 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. 27. Sample Table Code with Spacer GIF <ul><li><table width=“100%” border=“1” cellspacing=“1” cellpadding=“1”> </li></ul><ul><li><tr valign=“top”> </li></ul><ul><ul><li><td rowspan=“2” width=“100”>Links</td> </li></ul></ul><ul><ul><li><td rowspan=“2” width=“10”> <img src=“spacer.gif” height=“1” width=“10” alt=“spacer”> </li></ul></ul><ul><ul><li></td> </li></ul></ul><ul><ul><li><td align=“center” valign=“middle”>Header</td> </li></ul></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><ul><li><td align=“center”>Body Text</td> </li></ul></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>Links Body Text Header Spacer column
    28. 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>

    ×