Comp 140 - Reference material

References

Listed below are just a few of the useful web sites addressing many web design & construction topics.

Please help update the list. If you find a useful link, please e-mail me the URL and a description.

HTML general

• The source of HTML specifications W3 Consortium home page
• An organization for professional HTML writers HTML Writer's Guild
• A simple HTML tutorial from w3 Introduction to HTML
• HTML tutorial from w3schools w3schools
• List of "dangerous words" to use as hypertext links http://www.quut.com/berlin/ht/writing/words.html
• Confirm the "correctness" of your HTML with a validator validator.w3.org

HTML forms

• W3C forms specification http://www.w3.org/TR/REC-html40/interact/forms.html
• Forms online help and reference http://www.htmlhelp.com/reference/wilbur/block/form.html
• Online forms tutorial from W3schools http://www.w3schools.com/html/html_forms.asp
• Using forms tutorial from echoecho http://echoecho.com/htmlforms.htm
• Guidelines for accessible online forms http://www.websemantics.co.uk/tutorials/accessible_forms/
• Guidelines for HTML usage http://www.digital-web.com/articles/markup_as_craft/

Flash

• Adobe's Flash www.flash.com
• A great Flash resource site, lots of goodies plus tutorials www.flashkit.com
• Flash resources www.flashmagazine.com
• Generate javascript button code for Flash www.flash-db.com/PopUp/
• Guide and tips to using Flash, PHP http://www.kirupa.com/developer/
• Online, in depth tutorial http://www.devhelper.net/training/corefiles/online/flash5/index.htm

[Top]

DHTML links

• Nice use of DHTML and lots of links to other resources www.bratta.com/dhtml/index.asp
• Links to other DHTML sites plus some articles www.dhtml-zone.com/
• Nice assortment of free DHTML scripts and components www.dynamicdrive.com/
• Many scripts and other assorted goodies www.webreference.com/dhtml/
• Introduction to DHTML www.wdvl.com/Quadzilla/DHTML/
• Adding the JavaScript TreeView control http://gethelp.devx.com/techtips/dhtml_pro/10min/10min0702/td072602-1.asp

[Top]

CSS links

• CSS good coding habits http://www.communitymx.com/content/article.cfm?cid=FAF76&print=true
• CSS reference and help http://www.w3schools.com/css/default.asp
• CSS source page http://www.w3.org/Style/CSS/
• CSS discussion site with useful links and how-toshttp://css-discuss.incutio.com/?page=FrontPage
• Examples of CSS sites http://www.csszengarden.com
• How to structure large CSS files http://friendlybit.com/css/how-to-structure-large-css-files/
• Using CSS to make three floating columns on a page http://www.glish.com/css/2.asp
• Examples of CSS display inline and block modes http://www.quirksmode.org/css/display.html
• Ten CSS tricks from evolt.org http://evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369/
• SitePoint CSS anthology of help http://www.sitepoint.com/article/css-anthology-tips-tricks-1/2
• Rounded corner div boxes http://www.html.it/articoli/niftycube/index.html
• Centering images vertically and horizontally http://www.brunildo.org/test/img_center.html
• 53 CSS techniques you cannot live without http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
• Why CSS renders differently on browsershttp://www.search-this.com/2007/03/12/no-margin-for-error/
• Float property tutorial http://css.maxdesign.com.au/floatutorial/index.htm
• HTML and CSS Table Border Style Wizard link
• Using CSS to define curved left and right margins for text link

[Top]

JavaScript links

• Plenty of cut and paste examples. Free scripts javascript.internet.com/
• Articles and discussion groups javascriptweenie.com/
• Tutorials and free scripts www.javascript.com/
• Beginner's Guide to JavaScript www.javascriptguide.com/
• A compendium of Java, JavaScript, ActiveX, and others www.jars.com
• Samples of navigation scripts javascript.about.com/cs/navigationscripts
• More samples of navigation scripts www.cgiexpo.com/categories/navigation.html/
• Good description of DOM http://www.quirksmode.org/dom/intro.html
• Detect which browser is loading your page http://www.quirksmode.org/js/detect.html
• 55 Best jQuery Carousel Plug-ins article

[Top]

HCI Sites

• HCI bibliography online http://www.hcibib.org/
• Apple's Human Computer Interface Guidelines http://devworld.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html/
• IBM Ease of Use web site http://www-03.ibm.com/easy/page/561
• Usability Professionals Association http://www.upassoc.org/
• Microsoft MSDN articles on good user interfaces http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnhfact/html/hfactor8_2.asp
• Ranking of common screen resolutions for March 2009 http://www.thecounter.com/stats/2009/March/res.php
• HCI handbook http://www.isrc.umbc.edu/HCIHandbook/
• Usability Firsthttp://www.usabilityfirst.com/intro/index.txl
• Better to design menus deep or broad? http://www.humanfactors.com/downloads/apr032.htm
• User Friendly Humourhttp://www.userfriendly.org/static/
• Coding Horror - When Developers create the UI http://www.codinghorror.com/blog/archives/000734.html
• Origin of the OK button http://folklore.org/StoryView.py?&story=Do_It.txt

[Top]

Java Sites

• A large collection of categorized Java applets http://www.developer.com/java/
• Another collection of categorized Java applets which are also rated www.javaboutique.internet.com
• An excellent applet resource Java.sun.com/applets
• A compendium of Java, JavaScript, ActiveX, and others www.jars.com

[Top]

Lab tools

• Text editor - free - Notepad++ http://notepad-plus.sourceforge.net/uk/site.htm
• Text editor - trial - TextPad http://www.textpad.com/
• Web site dev - free - Nvu http://www.nvu.com
• Adobe Flash - trial http://www.adobe.com/downloads/
• Adobe Dreamweaver - trial http://www.adobe.com/downloads/
• Browser - free - Internet Explorer http://www.microsoft.com/
• Browser - free - Firefox http://www.mozilla.com/
• Browser - free - Opera http://www.opera.com/
• Browser - free - Netscape http://browser.netscape.com/ns8/
• Adobe PDF viewer - free http://www.adobe.com/products/acrobat/readstep2.html
• Image manipulation - free - GIMP http://www.gimp.org/

[Top]

PHP Sites

• PHP source http://www.php.net
• PHP tools and resources http://www.php-tools.net/site.php
• Developer's shed - guide for advanced PHP programmers http://www.devshed.com/c/b/PHP#/
• Learn PHP, WAP http://www.phpbuilder.com/columns/mike20010118.php3
• PHP tutorial http://www.beginnersphp.co.uk/tutorials.php
• List of RSS feeds for PHP http://www.beginnersphp.co.uk/moreover1.php
• Feedback form using cookies http://www.zend.com/zend/tut/feedback.php

[Top]

General Graphics

• Free graphics, animations, backgrounds, buttons www.theclipartsite.com/
• Nice colour chart (thanks to Dan Malmgren for link) http://www.zspc.com/color/index-e.html
• What is JPEG? http://www.faqs.org/faqs/jpeg-faq/part1/
• How does JPEG work? http://blogs.msdn.com/b/devdev/archive/2006/04/12/575384.aspx
• Google's WebP aiming to push out JPEG and PNG format http://googlecode.blogspot.com/2011/11/lossless-and-transparency-encoding-in.html

[Top]

Blog

• Blog platform for professional bloggers www.movabletype.org/
• Popular blog site http://wordpress.org/
• Original, now owned by Google http://www.blogger.com/start
• Scott Adams, creator of Dilbert, blog http://dilbertblog.typepad.com/
• Why XHTML is a bad idea http://friendlybit.com/html/why-xhtml-is-a-bad-idea/

[Top]

Sounds/Audio

• Lots of sounds that easily import into Flash movies http://www.meanrabbit.com/wavhtml/wavepage.htm
• Lots of wav files including sound effects wavcentral.com/
• For the visually impaired, a browser that will speak to you www.slate.com/id/2114194/

[Top]

Web Design

• Web Site Style guide http://www.webstyleguide.com/index.html?/index.html
• Government of Canada Common Look and Feel guidelines from Treasury Board http://www.tbs-sct.gc.ca/clf-nsi/index_e.asp
• Government of British Columbia guidelines for web pages http://www.cio.gov.bc.ca/local/cio/standards/documents/standards/internet_standards_guidelines.pdf
• Government of Alberta guidelines for web pages http://publicaffairs.alberta.ca/publications.cfm
• Government of Ontario guidelines for web pages http://www.mgs.gov.on.ca/en/IAndIT/STEL02_047303.html
• Government of Manitoba guidelines http://www.gov.mb.ca/standards/electronic_forms.html
• Government of Québec guidelines for web pages http://www.webmaestro.gouv.qc.ca/fr/
• Government of Nova Scotia guidelines for web pages http://gov.ns.ca/cns/policies-web-standards.asp
• Web Designers Reference http://www.webdesign.org/web/web-design-basics/page-num-80-order-pos-level-0-from-0.html
• Reference for designing great sites http://www.killersites.com/
• Web page design for designers http://www.wpdfd.com/
• Which site is the original and which is the copy? http://www.flickr.com/photos/34923023@N00/ - example: the original, and the copy, can you spot the difference?
• Contest to design the best web page under 5k in file size http://www.sylloge.com/5k/original.html
• Usability.Gov - web usability guidelines from a collaboration of U.S. Government agencies http://www.usability.gov/guidelines/
• Best and worst in contingency design http://www.37signals.com/dnf/
• Ranking a set of web pages http://www.coolhomepages.com/
• 12 Website design decisions your business will need to make http://www.wilsonweb.com/articles/12design.htm
• Cool utility: Freeze the appearance of a web page into a saved file http://www.freezepage.com
• Web designers' lunch box http://www.k10k.net/
• The best designs http://www.thebestdesigns.com/default
• What does your web page look like with different screen resolutions? http://www.yournew.com/resolution_test.cfm#
• Five Golden Rules of Professional Design http://www.webmasterbase.com/article/848
• Bobby, a utility to catch barriers to access by individuals with disabilities http://www.icdri.org/WebAccess/bobby.htm
• Power tools for your web site http://www.netmechanic.com/
• Discussions and articles about web development http://www.webreview.com/
• Church of Usability from TechRepublic http://articles.techrepublic.com.com/5100-10878_11-1044594.html
• The cultural connotations of colour around the world http://www.sibagraphics.com/colour.php
• What colour means around the world http://www.adobe.com/products/adobemag/archive/pdfs/0003bscb.pdf
• Web site design tips and guidelines http://www.colin.mackenzie.org/webdesign/
• Web safe colours http://www.mensinghe.nl/colorDavid/index_40.html
• What is conversion rate? http://www.conversionchronicles.com/page.php?PageID=40&tracking=whatisconversionrateleft
• Web design from scratch http://www.webdesignfromscratch.com/current-style.cfm
• Web site template monster list http://www.templatemonster.com
• 7 Habits of Highly Successful Freelance Web Designer http://www.andybudd.com/archives/2006/10/7_habits_of_a_highly_successful_freelance_web_designer
• Study of Gender preferences in Web Page Design PDF
• Reading on iPad and Kindle 10% slower than ink and paper according to usability study
• Discussion of the Microsoft Windows Vista Aero design. Colours, icons, dialogs.
• International meanings of colours site.

[Top]

Other

• PLNet - B.C. Ministry of Education provides intranet access to all schools in the provincehttp://www.bced.gov.bc.ca/plnet/
• The Webby awards - annual awards for the best designed web sites www.webbyawards.com
• Web Development Trends - blog Anil Dash http://dashes.com/anil/
• Links to almost everything web related - graphics, sounds, javascript www.adeveloper.com/resource.html
• The latest tech buzzwords and what they mean content.techweb.com/encyclopedia/ - also whatis.techtarget.com/
• Check what your site will look like in the Lynx text browser www.delorie.com/web/lynxview.html
• Assistive technologies www.assistivetech.net
• U.S. Government Computer Newshttp://gcn.com/Home.aspx
• Clean up your HTML files with this utility www.w3.org/People/Raggett/tidy
• Colour and gender issues - men and women respond differently to colourwww.colormatters.com/khouw.html
• Using colours to convey meaning may backfire on a web site http://webdesign.about.com/od/color/a/aa072604.htm
• Juicy Studio Colour Contrast Analyzer http://www.juicystudio.com/services/colourcontrast.php
• Hobbes' Internet timeline http://www.zakon.org/robert/internet/timeline/
• Visual Lightness perceptions and Lightness illusions http://web.mit.edu/persci/gaz/gaz-teaching/index.html
• Your eyes can deceive you - the checkerboard illusion http://web.mit.edu/persci/people/adelson/checkershadow_illusion.html
• United States Copyright Law http://www.benedict.com/
• Browser usage statistics http://www.upsdell.com/BrowserNews/stat.htm
• Classics in the History of Psychology - The Magical Number Seven, plus or minus twohttp://psychclassics.yorku.ca/Miller/
• The Vannevar Bush 1945 article "As We Make Think" from The Atlantic - man and knowledgehttp://www.theatlantic.com/doc/194507/bush
• Freely available ISO standards documents http://isotc.iso.org/livelink/livelink/fetch/2000/2489/Ittf_Home/PubliclyAvailableStandards.htm
• All about barcodes http://www.adams1.com/pub/russadam/faq.html
• Email authentication article http://www.clickz.com/showPage.html?page=3601426
• Email spam filter postini monitors > 1B emails a dayhttp://www.postini.com/stats/
• Alexa tracks web site rankings by visits http://www.alexa.com/
• Multi-touch HCI interface - video demohttp://cs.nyu.edu/~jhan/ftirtouch/index.html
• How Google searches URLs http://www.our-picks.com/archives/2007/01/28/pro-guide-to-google-searches-part-i/
• Pingdom Tools measures how long it takes to load up your web site
• Flag counters http://flagcounter.com/ show the country where your page visitors live.
• M.I.T. web page design http://ist.mit.edu/services/web/reference guidelines.
• Google bomb definition
• Google wrote an online book 20 Things I Learned about Browsers and the Internet written in HTML 5.
• Article 12 websites that stood the test of time
• Minnesota Internet Traffic Studies (MINTS) shows Internet traffic growth rates as of 2009 http://www.dtc.umn.edu/mints/home.php
• Cisco Visual Networking Index: Forecast for 2009-2014
• MigrationsMap.Net - HTML5 demo of global migration on github http://migrationsmap.net/about.html
• Usability testing parody with fruit

[Top]