The document discusses best practices for worry-free web development by emphasizing the importance of coding XHTML, CSS, and JavaScript separately for better cross-browser compatibility and future adaptability. It highlights the necessity of understanding user needs, maintaining valid code, and ensuring accessibility while avoiding common pitfalls like excessive div elements and non-semantic usage. It also encourages layering enhancements with CSS and JavaScript to create a seamless user experience without dependencies on JavaScript for basic functionality.

1. Worry-Free Web Development Estelle Weyl EvoTech.Net

2. Plan Ahead “An ounce of prevention is worth a pound of cure” -Ben Franklin “A stitch in time saves nine” - Thomas Fuller (or his mom), 1732 “Code it right the first time” - Me

3. Worry-Free Web Development Estelle Weyl EvoTech.Net By coding content, presentation and behavior separately, your code will work cross browser and cross device: without having to re-code when a new technology or device comes on the market. By coding properly, you can create usable, accessible and working web sites while saving yourself headaches down the road

4. CSSZenGarden All of their sites have their sites have the exact same XHTML with the exception of one line: the call to the external CSS. ~

5. Target Audience Who is your target audience? What devices are they using to access the web? How does it differ from how you access the web? How will it differ 5 years from now? 10 years? What is the purpose of your site? How will that change in the next 10 years?

6. Site Structure Expandable, upgradeable, changeable?

7. The “Right” way Code to the web standards - not to a browser Separate XHTML, CSS, and JavaScript Separation of presentation from structure Separation of behavior from presentation

8. XHTML (how) All elements and attribute names are lower case All attribute values are quoted All elements require a closing tag If empty, the elements is closed with a slash No attribute minimization in strict XHTML, inline elements are in block elements XHTML is an XML application written in well formed XML

9. Semantics! Use the correct <element> for each component of your page. Code understood by you & others working it Screen readers understand it Search engines understand it Mobile devices, printers, parsers, etc!

10. XHTML (why) Better: XHTML is easier to manipulate, encourages use of CSS, is extensible, and is supported by mobile devices. and Easier: The syntax rules for XHTML are consistent. XHTML is easier to author and to maintain, the structure is more apparent and problem syntax is easier to spot.

11. XHTML (why, part II) Easier to maintain XML (XSL, XSLT, RSS, Machine readable) Easier to learn Futureproof Difference between XHTML and HTML is invisible to the PC browser user.

12. Layer and Enhance Your initial document should be pure, valid XHTML Your page should work with just your XHTML ~ Don't create dependencies between XHTML, CSS and JavaScript

13. Layer and Enhance (XHTML cont.) Your XHTML should be: In the right order to be read In the right order for search engines Accessible Work in all browsers Work in all media

14. Layer and Enhance (XHTML cont.) Your XHTML should not: Have divitis Have non-contextual images ~ Have non linking links

15. Layer and Enhance (XHTML cont.) Your XHTML should not: Have divitis Have non-contextual images ~ Have non linking links Have tables!!!

16. Semantics <div> and <span> have virtually no semantic meaning.

17. Semantics <div> and <span> have virtually no semantic meaning. <br /> is only for poetry!

18. Semantics <div> and <span> have virtually no semantic meaning. <br /> is only for poetry! <table> is for data ~

19. Tableless Float everything? Parent <div> has 100% width and floated { clear: both;} on section <div> Examples: Dreamweaver ~ Grids ~ Faux columns ~

20. Backward compatible Don't code to old browsers, but do avoid breaking them Add extra outer div Don't include XML declaration

21. Presentation Layer ... CSS Add the presentation layer Develop in compliant browser Keep browser quirks in mind.... Avoid hacks Reset the default rendering to equalize browser differences Presentation effects

22. External stylesheets <link href=&quot;myCSS.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; />

23. Develop in Firefox Get the site working with a compliant browser Keep browser quirks in mind, but don't cater to them ex. Double margin on float in IE6 Develop in FireFox rather than Safari

24. Presentation Layer ... CSS Keep browser quirks in mind.... Avoid hacks Set defaults for all elements to minimize browser differences This will reduce typing! http://www.evotech.net/blog/2007/04/css-best-practices/ http://developer.yahoo.com/yui/fonts/ http://developer.yahoo.com/yui/reset/

25. Presentational Effects in CSS Rollovers, Background image changes Drop down menus

26. Presentation Layer ... CSS Once that's all working... enhance with javaScript

27. Behavior Layer ... JavaScript ENHANCEMENT Start with a site that WORKS without JavaScript Use JS to enhance the user experience ex. if a “link” isn't linking anywhere, create it dynamically.

28. Including JavaScript <script type=”text/javascript”> type=”text/javascript” is required language=”javascript” is not allowed in strict

29. Including JavaScript <script type=”text/javascript”> type=”text/javascript” is required language=”javascript” is not allowed in strict Dreamweaver starter scripts gets this wrong

30. Including JavaScript <script type=&quot;text/javascript&quot;> //<![CDATA[ code here //]]> </script>

31. Including JavaScript <script type=&quot;text/javascript&quot; src=&quot;m.js&quot;></script> Don't include anything between the open and closing tags Include the external javascript file at the BOTTOM of the page Sunday, go to unobtrusive JavaScript at 1:00 on Sunday by Paul Davis. Please heckle him

32. Event Handlers target.addEventListener(type, listener, useCapture); var container = document.getElementById('myId'); var links = container.getElementsByTagName('a'); for (var i=0; i < links.length; i++){ links[i].addEventListener('click', function(){ functionhere;}, false); }

33. Thanks to: OpenOffice.org Engage.com Adobe / Community MX You

34. Contact Information Estelle Weyl [email_address] http://evotech.net/blog