Personal tools
You are here: Home → Members → jgsack's Home → WebsiteNotes: Website Presentation Notes
Navigation
Log in


Forgot your password?
New user?
 
Document Actions

WebsiteNotes: Website Presentation Notes

by James G. Sack — last modified 2006-07-17 13:29

Notes, Links, .. (very-DRAFT)

The usual tutorial..

has steps like host location, domain name, design, publish, promotion. Some of these are oriented toward business needs. Additional business topics may include e-commerce and security among other concerns. Google on website design, or many similar search criteria will find lots of starting points.

I'm just covering..

some basic concepts and the design part of the above.

First, Some Background Stuff Brief Review of Web-workings:

  • Hypertext, the web and all that
    • http://www.w3.org/People/Berners-Lee/ esp: http://www.w3.org/History.html
  • HTTP client-server, request-response
  • Browsers and HTML
  • CGI
  • DHTML, client-side scripting (Java``Script, ECMAscript)
  • extensions
    • java applets
    • AJAX
      • Asynchronous JavaScript and XML
      • XMLHttp``Request
    • webdav
    • xml-rpc, soap, ... what-else?

Basics of HTML

  • historical aside
    • HTML 2 3.x 4.0 (4.01 = XHMTL 1.0)
  • tags
    • house rules: html, head, title, body
    • basic-0: heading, paragraph
    • basic-1: (line-) break, horizontal rule
    • fun-stuff: anchors (links), images
    • then there is: lists, tables
    • also: emphasized, strong
    • and: div, span
    • there's more..
  • style
    • units: px, pt, .. (12pt ~= 15px)
    • box model (margin, padding)
    • font..
    • background..
    • border..

Tools

  • html editors
    • Amaya http://www.w3.org/Amaya/
      • nice style-debugging
    • quanta http://quanta.kdewebdev.org/
      • nicer(?) UI
      • no style-debugging, or needs configuring?
      • attribute editor is nice
    • nvu http://www.nvu.com -- lagging many features
    • Netscape Composer (+ CaScadeS ?) ?? replaced by nvu?
    • bluefish http://bluefish.openoffice.nl/ -- just a basic html editor
  • also check out (but don't forget to disable popups on this site)
    • http://webdesign.about.com/od/htmleditors/
    • http://webdesign.about.com/od/htmleditors/tp/aatptextedunix.htm
  • general text editors (vi, emacs, ..)
  • for debugging: (mozila &) firefox ''DOM Inspector'' -- yes!
    • esp (eg): Object - Computed Style (but amaya's is bettter)
  • hmmm ..these might be worth a look in a commercial shop
    • Dreamweaver, ..demo looks pretty snazzy and up-to-date per css
    • GoLive ? lightweight, maybe workable
    • Homesite ??
    • FrontPage -- looks like it needs modernizing
    • ..
  • ''sitebuilding'' tools/systems -- try google (see also CMS)
  • Neat cleanup tool: tidy http://sourceforge.net/projects/tidy (-h for help)
    • see also: http://tidy.sourceforge.net/
    • see also: http://www.w3.org/People/Raggett/tidy/
  • filler: http://www.lorem-ipsum.info/

Systems/Frameworks

  • CMS (''Content Management systems'')
    • http://www.opensourcecms.com/
  • Templating Systems
  • ..

Techniques

Restated Basics

  • site vs page
  • objectives
  • design criteria
    • branding, simple
    • +navigation
    • +special-features
  • consider
    • what's new
    • split-off by ''type'' of visitor
  • constraints
  • future plans
  • maybe a domain name is really worth considering

Content and Presentation

  • Content
    • Organizaion / Structure
    • Semantic content (text and graphics)
  • Presentation
    • Layout and Navigation
    • Style
  • Decoration

Old vs New

  • frames considered harmful
  • css replaces table-based layout
  • tags no longer needed or desirable
    • deprecated
    • obsolete
  • tag attributes no longer needed or desirable
  • html morphs into xhtml(xml)
    • deprecateed tags & features
      • font, center, b, i, ..
    • tags should anticipate xml: lowercase, balanced, closed
    • ..
  • browser-sniffing out, css-hacks in
  • some scripting obviated by css

Show & Tell

  • a favorite: http://www.csszengarden.com/
  • http://css-discuss.incutio.com/?page=DesignInspiration

Recommendations and Comments on ''Best Practices'' (as I see it, of course)

  • standards and validation
    • from http://www.molly.com/2004/07/31/doctypes-not-relevant/ :: Having a correctly formed DOCTYPE will cause browsers to run in compliance mode - an optimal browser mode for standard, conforming documents.
    • ie, "..No DOCTYPE, and you get quirks.." per http://www.w3.org/International/articles/serving-xhtml/
    • xhtml(-support) is still evolving
  • basic xthml http://www.websitetips.com/info/xhtml/basics.shtml
  • browser hacks
  • css
  • template
  • CGI
  • accessibility
  • non-gui and non-script friendly pages
  • general design advice
    • http://www.w3.org/QA/Tips/
    • http://www.tldp.org/HOWTO/Font-HOWTO/typography.html

Beyond Static Pages (CGI)

  • php, perl, python, ..any executable
  • e-commerce
  • web ''applications''

Sample Resources

Example Pages

  • PlainText
  • HtmlFragment
  • HtmlSimple
  • HtmlValid

Templates

  • see link list at bottom

References

Recommended Quickstart Refs

  • (I haven't distilled the other stuff -- feedback welcome)

Good Everyday Refs

  • http://www.w3schools.com/
  • http://devguru.com/

Specialty Topic or Advocacy Refs

  • Design Advice * ''Looking Good in Print'' (6th ed) Roger C. Parker, Paraglyph Press, January 2006 ISBN: 1-933097-06-X

W3C reference/tutorial pages

  • Recommended DTD (Doctypes) http://www.w3.org/QA/2002/04/valid-dtd-list.html
  • Character encoodings http://www.w3.org/International/O-charset.html
  • http://www.w3schools.com/
  • tag playpen http://www.w3schools.com/html/html_examples.asp
  • tag ref. http://www.w3schools.com/tags/default.asp
  • one of the nicer intro/tutorials: http://www.w3.org/MarkUp/Guide/
  • more advanced (css++): http://leftjustified.net/site-in-an-hour/site/

General Refs

  • The future of HTML, Part 2: XHTML 2.0 http://www-128.ibm.com/developerworks/xml/library/x-futhtml2.html?ca=dgr-lnxw01XHTML2
  • non-HTTP networking
    • XMPP (''Extensible Messaging and Presence Protocol'') http://www.xmpp.org/
    • SIP (''Session Initiation Protocol'') http://www.cs.columbia.edu/sip/
    • RTP, SIMPLE, ...
  • http://en.wikipedia.org/wiki/Web_development
  • Jakob Nielsen's site http://www.useit.com/

some general tutorials

  • http://academ.hvcc.edu/~kantopet/old/index.php
  • tizag has some compresensive coverage -- start with http://www.tizag.com/htmlT/
  • also looks broad & niely organized -- http://www.htmlcodetutorial.com/
  • http://www.htmltutorials.ca/

additional sites to browse

  • http://www.brainjar.com/
  • http://www.456bereastreet.com/
  • http://www.csscreator.com/
  • http://www.meyerweb.com/
  • http://www.positioniseverything.net/
  • http://diveintoaccessibility.org/
  • http://www.thesitewizard.com/
  • nvu specific(!) -- http://www.thesitewizard.com/gettingstarted/nvu1.shtml
  • http://www.htmlhelp.com/links/tutorials.htm
  • http://www.how-to-build-websites.com/
  • http://www.websitetips.com/
  • http://www.evolt.org/
  • http://www.saila.com/usage/tips/
  • http://www.xs4all.nl/~sbpoley/webmatters/index.html
  • esp: http://www.xs4all.nl/~sbpoley/webmatters/verdana.html
  • http://www.thenoodleincident.com/tutorials/box_lesson/workarounds.html
  • http://www.ilovejackdaniels.com/seo/meta-tags/3#robotstag
  • http://devguru.com/
  • http://www.ilovejackdaniels.com/css_cheat_sheet.pdf
  • http://www.ilovejackdaniels.com/javascript_cheat_sheet.pdf
  • http://www.css-discuss.org/
  • http://css.maxdesign.com.au/listamatic/index.htm
  • http://koivi.com/css-menus/
  • http://dean.edwards.name/IE7/compatibility/Pure%20CSS%20Menus.html
  • http://discuss.fogcreek.com/CityDesk/default.asp?cmd=show&ixPost=11518
  • http://www.udm4.com/demos/other-purecss.php
  • http://www.alistapart.com/articles/holygrail
  • http://www.bluerobot.com/
  • http://css-discuss.incutio.com/?page=CssLayouts
  • http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php
  • some still use tables: http://icant.co.uk/csstablegallery/index.php
  • and (questionably?): http://glazkov.com/blog/archive/2005/05/02/476.aspx
  • better: http://css-discuss.incutio.com/?page=TableDesign
  • (eg:) http://www.redmelon.net/tstme/
  • http://css-discuss.incutio.com/?page=EmulatingFrames
  • http://www.pmachine.com/ee/templates/
  • http://intensivstation.ch/en/templates/
  • http://annevankesteren.nl/2004/07/fixed-positioning
  • (wiki) css-discuss.incutio.com/
  • http://glish.com/css/
  • http://realworldstyle.com/
  • http://www.benmeadowcroft.com/webdev/
  • web hosting -- try google on that term -- caveat emptor..
    • http://www.findmyhosting.com/
    • http://order.1and1.com/xml/order;jsessionid=EEED26029A861C4D00635CDA128EFBEF.TC61b
    • http://www.anywherehost.com/
  • http://ilias.ca/
  • http://web.archive.org/web/20040926065921/http://devedge.netscape.com/
  • http://www.webdeveloper.com/
  • http://koivi.com/
  • http://wdvl.internet.com/WebRef/Help/Begin.html
  • http://www.webreference.com/
  • http://developer.apple.com/internet/webcontent/bestwebdev.html
  • http://www.htmldog.com/
  • http://www.xstandard.com/page.asp?p=58E6C3F7-E5DF-414F-8AA5-4C8BD2BEFE2A
  • http://www.westciv.com/style_master/house/good_oil/dead_layout/
  • http://phrogz.net/CSS/WhyTablesAreBadForLayout.html
  • http://www.htmldog.com/ptg/archives/000049.php

===end===
Powered by Plone CMS, the Open Source Content Management System

This site conforms to the following standards: