Worry free web development

1,407 views

Published on

Original draft of presentation. The actual presentation is on my other computer and will be uploaded later.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,407
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Worry free web development

    1. 1. Worry-Free Web Development Estelle Weyl EvoTech.Net
    2. 2. Plan Ahead <ul><li>“An ounce of prevention is worth a pound of cure” </li></ul><ul><ul><ul><li>-Ben Franklin </li></ul></ul></ul><ul><li>“A stitch in time saves nine” </li></ul><ul><ul><ul><li>- Thomas Fuller (or his mom), 1732 </li></ul></ul></ul><ul><li>“Code it right the first time” </li></ul><ul><ul><ul><li>- Me </li></ul></ul></ul>
    3. 3. Worry-Free Web Development Estelle Weyl EvoTech.Net <ul><li>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. </li></ul><ul><li>By coding properly, you can create usable, accessible and working web sites while saving yourself headaches down the road </li></ul>
    4. 4. CSSZenGarden <ul><li>All of their sites have their sites have the exact same XHTML with the exception of one line: the call to the external CSS. ~ </li></ul>
    5. 5. Target Audience <ul><li>Who is your target audience? </li></ul><ul><li>What devices are they using to access the web? </li></ul><ul><li>How does it differ from how you access the web? </li></ul><ul><li>How will it differ 5 years from now? 10 years? </li></ul><ul><li>What is the purpose of your site? </li></ul><ul><li>How will that change in the next 10 years? </li></ul>
    6. 6. Site Structure <ul><li>Expandable, </li></ul><ul><li>upgradeable, </li></ul><ul><li>changeable? </li></ul>
    7. 7. The “Right” way <ul><li>Code to the web standards - not to a browser </li></ul><ul><li>Separate XHTML, CSS, and JavaScript </li></ul><ul><li>Separation of presentation from structure </li></ul><ul><li>Separation of behavior from presentation </li></ul>
    8. 8. XHTML (how) <ul><li>All elements and attribute names are lower case </li></ul><ul><li>All attribute values are quoted </li></ul><ul><li>All elements require a closing tag </li></ul><ul><li>If empty, the elements is closed with a slash </li></ul><ul><li>No attribute minimization </li></ul><ul><li>in strict XHTML, inline elements are in block elements </li></ul><ul><li>XHTML is an XML application written in well formed XML </li></ul>
    9. 9. Semantics! <ul><li>Use the correct <element> for each component of your page. </li></ul><ul><ul><li>Code understood by you & others working it </li></ul></ul><ul><ul><li>Screen readers understand it </li></ul></ul><ul><ul><li>Search engines understand it </li></ul></ul><ul><ul><li>Mobile devices, printers, parsers, etc! </li></ul></ul>
    10. 10. XHTML (why) <ul><li>Better: XHTML is easier to manipulate, encourages use of CSS, is extensible, and is supported by mobile devices. </li></ul><ul><li>and </li></ul><ul><li>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. </li></ul>
    11. 11. XHTML (why, part II) <ul><li>Easier to maintain </li></ul><ul><li>XML (XSL, XSLT, RSS, Machine readable) </li></ul><ul><li>Easier to learn </li></ul><ul><li>Futureproof </li></ul><ul><li>Difference between XHTML and HTML is invisible to the PC browser user. </li></ul>
    12. 12. Layer and Enhance <ul><li>Your initial document should be pure, valid XHTML </li></ul><ul><li>Your page should work with just your XHTML ~ </li></ul><ul><li>Don't create dependencies between </li></ul><ul><li>XHTML, CSS and JavaScript </li></ul>
    13. 13. Layer and Enhance (XHTML cont.) <ul><li>Your XHTML should be: </li></ul><ul><li>In the right order to be read </li></ul><ul><li>In the right order for search engines </li></ul><ul><li>Accessible </li></ul><ul><li>Work in all browsers </li></ul><ul><li>Work in all media </li></ul>
    14. 14. Layer and Enhance (XHTML cont.) <ul><li>Your XHTML should not: </li></ul><ul><li>Have divitis </li></ul><ul><li>Have non-contextual images ~ </li></ul><ul><li>Have non linking links </li></ul>
    15. 15. Layer and Enhance (XHTML cont.) <ul><li>Your XHTML should not: </li></ul><ul><li>Have divitis </li></ul><ul><li>Have non-contextual images ~ </li></ul><ul><li>Have non linking links </li></ul><ul><li>Have tables!!! </li></ul>
    16. 16. Semantics <ul><li><div> and <span> have virtually no semantic meaning. </li></ul>
    17. 17. Semantics <ul><li><div> and <span> have virtually no semantic meaning. </li></ul><ul><li><br /> is only for poetry! </li></ul>
    18. 18. Semantics <ul><li><div> and <span> have virtually no semantic meaning. </li></ul><ul><li><br /> is only for poetry! </li></ul><ul><li><table> is for data ~ </li></ul>
    19. 19. Tableless <ul><li>Float everything? </li></ul><ul><li>Parent <div> has 100% width and floated </li></ul><ul><li>{ clear: both;} on section <div> </li></ul><ul><li>Examples: </li></ul><ul><ul><li>Dreamweaver ~ </li></ul></ul><ul><ul><li>Grids ~ </li></ul></ul><ul><ul><li>Faux columns ~ </li></ul></ul>
    20. 20. Backward compatible <ul><li>Don't code to old browsers, but do avoid breaking them </li></ul><ul><ul><li>Add extra outer div </li></ul></ul><ul><ul><li>Don't include XML declaration </li></ul></ul>
    21. 21. Presentation Layer ... CSS <ul><li>Add the presentation layer </li></ul><ul><li>Develop in compliant browser </li></ul><ul><li>Keep browser quirks in mind.... </li></ul><ul><li>Avoid hacks </li></ul><ul><li>Reset the default rendering to equalize browser differences </li></ul><ul><li>Presentation effects </li></ul>
    22. 22. External stylesheets <ul><li><link href=&quot;myCSS.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /> </li></ul>
    23. 23. Develop in Firefox <ul><li>Get the site working with a compliant browser </li></ul><ul><li>Keep browser quirks in mind, but don't cater to them </li></ul><ul><ul><li>ex. Double margin on float in IE6 </li></ul></ul><ul><ul><li>Develop in FireFox rather than Safari </li></ul></ul>
    24. 24. Presentation Layer ... CSS <ul><li>Keep browser quirks in mind.... </li></ul><ul><li>Avoid hacks </li></ul><ul><li>Set defaults for all elements to minimize browser differences </li></ul><ul><ul><li>This will reduce typing! </li></ul></ul><ul><ul><li>http://www.evotech.net/blog/2007/04/css-best-practices/ </li></ul></ul><ul><ul><li>http://developer.yahoo.com/yui/fonts/ </li></ul></ul><ul><ul><li>http://developer.yahoo.com/yui/reset/ </li></ul></ul>
    25. 25. Presentational Effects in CSS <ul><li>Rollovers, </li></ul><ul><li>Background image changes </li></ul><ul><li>Drop down menus </li></ul>
    26. 26. Presentation Layer ... CSS <ul><li>Once that's all working... </li></ul><ul><li>enhance with javaScript </li></ul>
    27. 27. Behavior Layer ... JavaScript <ul><li>ENHANCEMENT </li></ul><ul><li>Start with a site that WORKS without JavaScript </li></ul><ul><li>Use JS to enhance the user experience </li></ul><ul><li>ex. if a “link” isn't linking anywhere, create it dynamically. </li></ul>
    28. 28. Including JavaScript <ul><li><script type=”text/javascript”> </li></ul><ul><li>type=”text/javascript” is required </li></ul><ul><li>language=”javascript” is not allowed in strict </li></ul>
    29. 29. Including JavaScript <ul><li><script type=”text/javascript”> </li></ul><ul><li>type=”text/javascript” is required </li></ul><ul><li>language=”javascript” is not allowed in strict </li></ul><ul><li>Dreamweaver starter scripts gets this wrong </li></ul>
    30. 30. Including JavaScript <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>//<![CDATA[ </li></ul><ul><li>code here </li></ul><ul><li>//]]> </li></ul><ul><li></script> </li></ul>
    31. 31. Including JavaScript <ul><li><script type=&quot;text/javascript&quot; src=&quot;m.js&quot;></script> </li></ul><ul><li>Don't include anything between the open and closing tags </li></ul><ul><li>Include the external javascript file at the BOTTOM of the page </li></ul><ul><li>Sunday, go to unobtrusive JavaScript at 1:00 on Sunday by Paul Davis. Please heckle him </li></ul>
    32. 32. Event Handlers <ul><li>target.addEventListener(type, listener, useCapture); </li></ul><ul><li>var container = document.getElementById('myId'); </li></ul><ul><li>var links = container.getElementsByTagName('a'); </li></ul><ul><li>for (var i=0; i < links.length; i++){ </li></ul><ul><ul><li>links[i].addEventListener('click', </li></ul></ul><ul><ul><ul><ul><ul><ul><ul><ul><ul><li>function(){ functionhere;}, false); </li></ul></ul></ul></ul></ul></ul></ul></ul></ul><ul><li>} </li></ul>
    33. 33. Thanks to: <ul><li>OpenOffice.org </li></ul><ul><li>Engage.com </li></ul><ul><li>Adobe / Community MX </li></ul><ul><li>You </li></ul>
    34. 34. Contact Information <ul><li>Estelle Weyl [email_address] http://evotech.net/blog </li></ul>

    ×