Dynamic XHTML Web Page: Benefits, Validation, and Customization

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 use—and 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,className) { var allElements = document.getElementsByTagName(elementName); var elemColl = new Array(); for (i = 0; i < allElements.length; i++) { if (allElements[i].className == className) { elemColl[elemColl.length] = allElements[i]; } } 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