SLUUG Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== 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
      * on//event// 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
SLUUG Wiki

User Tools

Site Tools

Page Tools
