The Deconstruction of a Dynamic XHTML Web Page

1
The Deconstruction of a Dynamic XHTML Web Page
2
DXHTML?

• What's so great about it?
• You can use XML-based languages like SVG and SMIL
  with relative ease
• The more strict structural requirements inherent
  in XHTML mean fewer surprises later on
• You can create your own customized markup
  (elements and attributes) and still have the
  document validate

3
Be Valid In All That You Do

• There is nothing more important!
• Validate your XHTML and eliminate all errors
• XHTML, being based on XML, cannot tolerate
  malformed structure
• Validate your CSS
• If a browser is advanced enough to handle DXHTML,
  it will require valid CSS to properly style
  things
• Tools are available
• http//validator.w3.org/
• http//jigsaw.w3.org/css-validator/

4
Style in a Dynamic World

• Two ways to go about it
• Write static stylesheets and then dynamically
  modify values as needed
• This approach favors documents that start with a
  "default look" and then make a few changes
• Write out the whole stylesheet dynamically and
  then make dynamic modifications as needed
• Better for pages that are all-dynamic, or that
  change based on external parameters

5
Style Can Be So Fickle

• CSS support isn't a uniform space
• Although things are much better than in the past,
  browsers can still be inconsistent with CSS
• height and width get different treatment
• Percentage heights might not mean what you think
  they do
• Length values need units!
• Color values need octothorpes!

6
Making Designs Liquid

• Some principles to keep in mind
• Liquid page design is easy
• Instead of making everything a certain number of
  pixels wide, try using percentages
• If you're already dynamic, then real liquidity is
  that much easier
• Font sizes can be scaled along with the window!
• So can element heights

7
The W3C Owns the King DOM

• Old DOMs haunt us still
• document.layers died with LAYER itself
• document.all is still alive, but it's also
  completely proprietary
• Don't use either if you can avoid it!
• The W3C DOM is there and ready to useand it's
  supported by multiple browsers

8
DOM Collection Techniques

• The spec provides two useful tools
• getElementsByTagName('tagname')
• Lets you work on all of the elements that share a
  name, like DIV or H1
• Generally used to collect all such elements into
  an array which is passed around
• getElementsById('idvalue')
• Lets you pick whatever element has the given
  value for the ID attribute
• Often used to do on-the-fly restyling

9
Roll Your Own!

• getElementsWithClassName()
• function getElementsWithClassName(elementName,clas
  sName) var allElements document.getElements
  ByTagName(elementName) var elemColl new
  Array() for (i 0 i lt allElements.length
  i) if (allElementsi.className
  className) elemCollelemColl.length
  allElementsi return
  elemColl
• Use notes
• To get all elements with a given class call
  getElementsWithClassName('','className')
• Doesn't work with non-standard browsers
  (including IE4 and NN4.x)

10
Customizing XHTML

• It doesn't take a DTD
• However, it does take at least a customized
  schema
• Standards-compliant schema can be automatically
  generated by tools such as xmlspy
• You can add your own attributes, or even whole
  new elements
• Of course, those new elements will need to be
  described in CSS