Your SlideShare is downloading. ×
Worry free web development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Worry free web development

1,064
views

Published on

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

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,064
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 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

    ×