HTML5 - techMaine Presentation 5/18/09

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    6 Favorites

    HTML5 - techMaine Presentation 5/18/09 - Presentation Transcript

    1. HTML5 - A Look Ahead presented to: techMaine Web Design User’s Group May 18, 2009
    2. The obvious question..... WTF do we need HTML5 ?!?!?!
    3. Why HTML5? “HTML 5 will enable better cross-browser compatibility and better support for ‘Web 2.0-style’ Web applications in addition to documents.” Brendan Eich CTO, Mozilla
    4. Why HTML5? HTML5 will have an application cache that is capable of storing all resources in your Web app so that the browser can load them and use them even when you’re offline
    5. Why HTML5? HTML5 enables mobile and desktop Web site designers to deliver the advantages of client-side and server-side development to their users simultaneously. API development and workability in the browsers will take a leap forward.
    6. Problems with HTML5 • Not backwards-compatible? • extensible? - questionable • <P> = <p> ...and... <div class=”foo”> = <DIV class=foo> • removal of certain tags - <acronym> • removal of access keys? This could set back the usability/accessibility of markup (or, there could be good reasons for doing this)
    7. Please remain calm..... It’s just a working draft, people!
    8. What does HTML5 mean to Web designers? • new tags for semantic layout • improved microformatting • new tags for incorporating rich media • new tags for APIs, applications
    9. Browser support Browser support? What browser support??
    10. Browser Support • Opera 9.x (supposedly) offers best support • Safari 3.x - sketchy (best support in my experience) • Firefox 3.x - sketchy • Chrome? - sketchy • IE8 - veeerrrry sketchy • IE7 - nope • IE6? (LOL!)
    11. New Tags • article • datatemplate • nav • aside • embed • nest • audio • event-source • output • canvas • figure • progress • command • footer • source • datagrid • header • time • datalist • mark • video • meter
    12. doctype - “Look Ma! No DTD!” <!DOCTYPE HTML>
    13. doctype xHTML: <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd\">
    14. HTML5 - basic document structure <!DOCTYPE HTML> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>HTML5</title> </head> <body> </body> </html>
    15. Layout - HTML4, xHTML div=”header” div=”nav” div=”section” di div=”article” div=”sidebar” div=”footer”
    16. Layout - HTML5 <header> <nav> <section> di <article> <aside> <footer>
    17. Layout - HTML5 <body> <header> <h1>HTML 5</h1> </header> <nav> <ul></ul> </nav> <section> <article> <p></p> </article> <aside> <p></p> </aside> </section> <footer> <p></p> </footer> </body>
    18. HTML5 - Quirks in IE <script type=\"text/javascript\"> document.createelement('header'); </script> <header>javascript must be used to force ie to style this element</header>
    19. HTML5 & CSS • CSS works fine in most cases w/t/new tags • New tags are treated as inline elements; need to use display:block; • Need to use javascript to force IE to recognize new HTML5 tags and apply CSS to them
    20. Microformats - now <div class=\"vevent\"> <a class=\"url\" href=\"http://aneventapart.com\">http://aneventapart.com</a> <span class=\"summary\">An Event Apart Boston</span> <abbr class=\"dtstart\" title=\"2009-06-22\">June 22</abbr> - <abbr class=\"dtend\" title=\"2009-06-23\">23</abbr> in <span class=\"location\">Boston Marriott, Copley Place, Boston, MA</span> </div>
    21. Microformats - w/HTML5 <div class=\"vevent\"> <a class=\"url\" href=\"http://aneventapart.com\">http://aneventapart.com</a> <span class=\"summary\">An Event Apart Boston</span> <time class=\"dtstart\" title=\"2009-06-22\">June 22</time> - <time class=\"dtend\" title=\"2009-06-23\">23</time> in <span class=\"location\">Boston Marriott, Copley Place, Boston, MA</span> </div>
    22. <audio> <audio src=\"/tunes/boom.mp3\" controls=\"true\"> <a href=\"/tunes/boom.mp3\">Listen</a> </audio>
    23. <video> <video src=\"/video/ac-testimonial-web.mov\" controls=\"true\"> <p>your browser does not support the video tag</p> </video>
    24. <canvas> <canvas id=”a_canvas” width=”400” height=”300”> <p>Oops! Your browser can’t display the canvas.</p> </canvas>
    25. New Rules for markup This is legal in HTML5: <li> <a href=\"/2009/seattle/\"> <h2><img src=\"/i/09/city-seattle.jpg\" alt=\"Seattle\" /></h2> <h3>May 4—5, 2009</h3> <p>Bell Harbor International Conference Center</p> </a> </li>
    26. New Rules for markup This is how you do it in HTML4/xHTML: <li> <h2><a href=\"/2009/seattle/\"><img src=\"/i/09/city-seattle.jpg\" alt=\"Seattle\" /> </a> </h2> <h3><a href=\"/2009/seattle/\">May 4—5, 2009 </a> </h3> <p><a href=\"/2009/seattle/\">Bell Harbor International Conference Center </a> </p> </li>
    27. Validation validator.nu
    28. What does it all mean? • It’s a work in progress • It’s going to be awhile before we’re using HTML5 • It may turn up in mobile browsers first • HTML5 will lead to browser-based apps that are more powerful and more responsive
    29. <Thank you!> Rob Landry rob@pemaquid.com twitter: @portlandhead, @pemaquid
    SlideShare Zeitgeist 2009

    + pemaquidpemaquid Nominate

    custom

    715 views, 6 favs, 3 embeds more stats

    An overview of HTML5, given @ techMaine Web Design more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 715
      • 705 on SlideShare
      • 10 from embeds
    • Comments 0
    • Favorites 6
    • Downloads 0
    Most viewed embeds
    • 7 views on http://www.pemaquid.com
    • 2 views on http://static.slidesharecdn.com
    • 1 views on http://pemaquid.com

    more

    All embeds
    • 7 views on http://www.pemaquid.com
    • 2 views on http://static.slidesharecdn.com
    • 1 views on http://pemaquid.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags