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.

Demo

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

Outline

  • 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
 
presentation/ajax.txt · Last modified: 2005/07/12 01:45 by 67.64.218.143
 
Except where otherwise noted, content on this wiki is licensed under the following license:CC Attribution-Share Alike 3.0 Unported
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki