Modern Web Development

XHTML, CSS, and AJAX

 

Craig M. Buchek

Saint Louis Linux Users Group

October 20, 2005

 

"All successful complex applications were once successful simple applications."
                                -- Mike Champion

Agenda

  • High-level overview of web-page development techniques
    • Not too detailed on any particular technology
  • Concentrate on client-side technologies
    • (X)HTML
    • CSS
    • JavaScript
    • AJAX
  • We'll only touch on server-side technologies if there's time
  • CAVEAT: My design skills suck

HTML Origins

  • WWW and HTML were designed by Tim Berners-Lee
  • Designed so people could share info with others, using a simple format
  • TBL envisioned everyone on the Internet using HTML to share information

HTML Gets Complex

  • Browser Wars caused browser vendors to add lots of new features
    • No standardization
      • Haphazzard features
      • Browser incompatibilities
    • New features not necessarily well-thought-out
  • Designers tried to make HTML do things it was not designed for
    • Pixel-accurate layout
  • This and other things made the web more of a mass-media publishing method
    • E-commerce
    • Big media
    • Portals

Web 2.0 - Return to Origins

  • Web 2.0 - hard to define exactly
    • Blogs
    • Wikis
    • AJAX, rich user experience
    • Tagging, folksonomies
  • Dependent upon a good HTML standard
  • Concentrates a lot on user experience and cooperation/openness
  • Returning the web to a read-write mechanism
    • Unless you are the mass media, this is a good thing
  • Turning the web into an application platform
    • Unless you are Microsoft, this is a good thing

How Can We Simplify Web Development?

  • Do one thing at a time
  • Have different people do different parts
  • Separate content from presentation
  • Separate content from behavior
  • Don't mix metaphors

XHTML

  • HTML with a "cleaner" syntax
    • All tags must be closed properly
    • All tags must be in lower case
    • All attribute values must be quoted
  • Easier to manipulate programmatically
  • Can integrate with other XML formats
  • Not necessarily better than HTML 4.01

Bad HTML

  • Anything that's not content or meta-data
  • Anything that tries to force the way things look
    • FONT tags
    • Blank images for spacing
  • Inline STYLE attributes
  • Inline JavaScript
  • Tables used for layout
    • Maybe, maybe not
  • Tag soup

CSS

  • CSS = Cascading Style Sheets
  • Cascading = there's a precedence system if more than 1 style could apply
  • Style = used to define how things should look
  • Sheets = stored in separate files, so multiple HTML pages can share a single style sheet

CSS Syntax

  • Rules - list of styles to apply to the HTML output
    • selector, selector { attribute: value; attribute: value }
  • Selectors - which elements are effected by this rule
    • h1.menu
    • #header
  • Attributes - what about the element to change
    • height
    • font
  • Values - how to change it
    • 16px
    • red

Adding CSS to HTML

  • Add some classes and IDs to the HTML markup
    • Add as few as possible (but no fewer)
  • Create CSS files
  • Link the CSS files into the HTML page(s)
  • Add CSS rules to apply styles to the applicable items

JavaScript

  • Has NOTHING* to do with Java!
  • Used to add behaviors to HTML pages
    • Moving elements
    • Hiding/showing elements
    • Changing the appearance of elements
    • Reacting to user events

JavaScript - Not Just a Toy

  • JavaScript is actually a quite powerful language
    • Object-oriented (using prototypes instead of classes)
    • Dynamic (can add functions to an existing object)
    • Functions are first-class objects
    • Closures (functions can retain information from when they were created)

Unobtrusive JavaScript

  • JavaScript should augment content by adding behavior
  • Content should remain useful and usable without JavaScript
    • Or without full JavaScript support
    • Lack of JavaScript should not bar the user from any content
  • Web apps that allow users to manipulate data should deliver content in its initial state
  • JavaScript should alter content as little as possible
  • If a behavior changes only the presentation of the content, then just change the target's class or ID and allow CSS to manage the change in presentation

Bad JavaScript

  • Inline SCRIPTs
    • Possible exception of setting per-page configuration directives in the HEAD
  • Use of ONCLICKED and similar event attributes applied to elements in the HTML
  • Content hidden from those who don't have JavaScript
    • Like search engines, for example
      • Why would you want to hide content from search engines?
      • Google penalizes pages that purposely hide content
  • Alters more content than it needs to

Even Worse JavaScript

  • Doesn't add anything to the page
  • Annoys the user
    • Pop-ups
    • Pop-unders

Progressive Enhancement

  • Start with basic content in plain HTML or XHTML
  • Give some HTML elements class and/or ID attributes
  • Apply CSS (in separate files) to change appearance
  • Add behaviors using (unobtrusive) JavaScript

Graceful Degradation

  • Page should work, even if the client doesn't support something you're using
  • JavaScript should check for functions before it tries to use them
    • If browser doesn't support a function, skip that feature
    • Don't just allow the JavaScript to error out and fail to run the other features

AJAX

  • AJAX = Asynchronous JavaScript and XML
    • New term for a technique that's been around for a while
      • But we're just learning how to use it effectively
  • Asynchronous means things happen in the background
    • Clicking on things changes content/appearance, but doesn't take you to a new page
  • JavaScript makes a page request for a portion of a page to change
  • XMLHTTPRequest is what makes this technique possible
    • Internet Explorer, Mozilla/Firefox, Safari, Opera
    • Can use hidden IFRAMEs in older browsers
  • Developed for and first used by Microsoft Outlook Web Access

AJAX and XML

  • XML is often returned by the server, but is not required
    • Requires server-side implementation to return what the JavaScript expects
    • Can return HTML to place directly into the page (using innerHTML)
    • Can return JavaScript code, which the script can run directly (using eval)
    • JSON - JavaScript Object Notation
      • Lightweight XML-like data-interchange format
      • Completely valid JavaScript syntax
  • JavaScript can place XML directly within the document
  • JavaScript can perform XSLT transofrmations on the XML

AJAX Examples

Server-Side Programming

  • Lots of choices
    • PHP, ASP
    • Java (Servlets, JSP, Struts, ...)
    • Perl, Python, Ruby
  • Keep program logic separate from display logic
    • Program logic: compute the total cost of the order
    • Program logic: grab some data out of the database
    • Display logic: if there's 1 widget say "widget"; otherwise say "widgets"
    • Display logic: print a row in the table for each widget
  • Template systems can help isolate display logic
  • Rasmus Lerdorf: use good program design to segregate program logic from display logic

Summary

  • Keep your layers separate (in separate files)
    • If you don't, the complexity will eat you alive
    • Content (XHTML), Presentation (CSS), Behavior (JavaScript)
  • Use CSS to keep presentation separate from content
    • Content should remain useful and usable without CSS
  • JavaScript should augment content by adding behavior
    • Content should remain useful and usable without JavaScript
  • Class and ID attributes provide an interface from (X)HTML to CSS and JavaScript
  • Search engines only look at HTML
  • Degrade gracefully

Resources - Web

Resources - Books

  • Designing with Web Standards
  • DOM Scripting
  • The Zen of CSS Design
  • JavaScript + CSS + DOM Magic
  • Eric Meyer on CSS, More Eric Meyer on CSS
  • DHTML Utopia: Modern Web Design Using Javascript & DOM
  • Web Standards Solutions

Presentation Info