Modern Web Design: XHTML, CSS, Unobtrusive JavaScript, and AJAX

NOTE: If you contribute, please leave your name next to your contributions, so I can credit you.

I want to demonstrate the creation of a web page. I want to start out with a basic HTML page, then add CSS to make it look pretty. Then I want to add some (unobtrusive) JavaScript functionality, such as form validation, navigation menus, tabs, tooltips, and maybe a WYSIWYG text area. Then I want to add some AJAX.

I could use some ideas on what kind of page to use as a demo. Here are my ideas for consideration:

• Entry form for an CD database application
  • HTML: Web form
  • CSS: Make it look nice
  • JS: Validation, menus, tabs, WYSIWYG, tooltips; show thumbnail of album art, full size pop-up on hover?
  • AJAX: When barcode is entered, fetch/fill other info from web

• Intro
  • This is a high-level overview of web design
    • Please keep the questions at a high level
    • I don't want to get bogged down in low-level details for this presentation
      • We can do that in follow-up presentations, if desired
• What is the goal of a web page?
  • To present information to the user
    • Gets the info to them quickly
    • Looks nice
  • Easily accessible
    • Search engines can find it
    • Easy to navigate within the site
    • Users with different technologies can access it
      • Various browsers
        • Why limit yourself? That's not what the web is about
      • Various operating systems
        • No Windows executables, no ActiveX
      • Mobile devices
        • Limited input
        • Small screens
      • Limited plug-ins
        • Flash
        • Audio
        • Java
    • Users with different abilities can access it
      • Visual considerations
        • Color blindness
        • Font sizes
        • High contrast
        • Screen readers
      • Other considerations
        • Hearing difficulty (or no audio available)
        • Epilepsy (no fast flashing items)
        • Limited range/speed of motion
        • Limited input capabilities
• HTML page should work in any browser, without CSS, JS, or AJAX enabled
• Don't assume anything about the browser
  • HTML 4.01 is about all you should rely on
    • Everything else is an optional improvement to the info presented by the HTML
  • Page should work on any size display
  • Browser might even claim to be one browser/version, but actually be another
    • Check browser capabilities, not browser name/version
  • Always have fall-back functionality
• XHTML vs. HTML
  • XHTML is a little easier for server-side and JS to process than HTML
    • Especially if transforming the document, like with XSLT
    • Or if translating from some other form of XML
    • No significant reason other than that to choose it over HTML 4.01
  • When I refer to HTML, I generally mean either XHTML or HTML
• Emphasize why we separate markup from presentation
  • Google, search engines, screen readers for the blind
  • Zeldman's arguments are good to use
  • Semantic meaning
    • Semantic web
    • Little semantic web
• CSS
  • Selectors
  • Specificity
  • Attributes/values
• How the browser loads a page (conceptually)
  • Loads the HTML from the URL requested
  • HTML headers say what CSS file(s) to load
    • CSS is loaded, applied to HTML to render
  • HTML headers say what JavaScript file(s) to load
    • JS files are loaded and run
  • One thing JS can do is register event handlers
    • When something happens, those JavaScript functions are run
      • Like a pop-up when a click happens
      • Like a pop-up or color change on hover
    • Event handlers can also be declared in the HTML
      • But it is not recommended
• Unobtrusive JavaScript
  • There are several ways to add JavaScript to a page
    • onevent tags in HTML elements
    • SCRIPT tags in HTML header
    • external scripts
  • No JavaScript in the HTML page at all; only REL references
    • TODO: Why?
  • JavaScript adds handlers to page elements by ID, class, or type
    • TODO: Examples
• Uses for JavaScript
  • Form validation
    • Still must use server-side validation, even if we have client side validation
      • Because we can't gurantee that the JavaScript will run
      • Because someone will write HTTP directly to the server, bypassing the browser altogether
  • Pop-up items
    • Menus
    • Tooltips
    • Alerts
    • Dialog boxes
    • Selection boxes
  • Hiding/showing elements
    • Tabs
    • Collapsable trees
  • WYSIWYG text editing
  • Drag-n-Drop
    • Sortable lists
    • Re-order table columns
  • Sortable tables
  • Hover effects (most can be done with CSS these days)
    • Roll-overs
    • Tooltips
    • Menus
  • Dynamically generated content (not recommended)
• AJAX: Asynchronous JavaScript and XML
  • Means that the web page gets info from a server without reloading the page
    • The server usually sends XML
  • New name, not all that new an idea/technique
    • Started coming into common use/vogue recently, with many Google initiatives
      • Google Suggest - suggests completions according to what you type
      • Google Maps - can move around and zoom map without reload
• Did we meet our goals?
  • HTML presents info to users quickly
  • HTML ensures all readers can access the info
  • HTML makes it searchable
  • CSS makes it look nice
  • CSS can help navigation
  • JS menus can help navigation
  • JS adds optional functionality
  • AJAX adds some optional functionality
  • BONUS:
    • Less bandwidth used
    • Separation of duties/concerns/expertise
• References
  • Zeldman book, web sites
  • Unobtrusive JS
  • JS libraries
  • AJAX info