Search

Html 5 in a big nutshell

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

    Notes on slide 1

    19 Favorites & 1 Event

    Html 5 in a big nutshell - Presentation Transcript

    1. HTML 5 In a big nutshell. Lennart Schoors
    2. Me . lead web designer at Netlog http://www.netlog.com . blog at http://lensco.be
    3. HTML 5 . Introduction . Web Forms 2.0 . Web Applications 1.0 . When?
    4. HTML 5 Part I – Introduction
    5. Background . WHATWG . founded in 2004 . reaction against the road the W3C was taking . XHTML was no failure, but XML part never really took off . renewed focus on HTML and real-world issues . “evolving instead of reinventing”
    6. Background . 2007: WHATWG joins forces with W3C . HTML WG . both groups now work on the HTML 5 spec . all parties are now involved . anyone can contribute! . First Public Working Draft: January 22, 2008
    7. Syntax example – XHTML 1 strict: <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\"> <head> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">
    8. Syntax HTML 5: <!doctype html> <html> <head> <meta charset=\"utf-8\">
    9. Syntax XHTML taught us: . lowercase tags! . close void elements! (img, meta, input, ...) . no empty attributes! (disabled=”disabled”) . always put attribute values in double quotes!
    10. Syntax HTML 5 says: you choose.
    11. Syntax . Tag soup? No! . small degree of freedom, but very detailed rules for parsing . validation will matter . keep a clean coding style, you’ll thank yourself for it later
    12. Syntax . HTML 5 is designed so that old HTML 4 browsers can safely ignore new HTML 5 constructs . “Documents must not use deprecated features. User agents should support deprecated features.” . extensive error handling by UAs
    13. What’s gone Say bye bye to: . frames . acronym, basefont, big, center, font, s, strike, tt, u . language attribute on script . loads of presentational attributes: cellpadding, cellspacing, width & height on tables & cells, align & valign, clear, size on inputs, ...
    14. Good riddance!
    15. HTML 5 Part II – Web Forms 2.0
    16. Web Forms 2.0 . set of elements, attributes & input types . complete repetition model for forms with recurring fields (adding, removing and moving blocks) . better solutions for combo-boxes & auto-completion — like search suggestions (list attribute, datalist & select elements)
    17. Input types . date & time (single or range) . email & url . color picker . user agent can provide the user interface — integrated with native tools . client-side validation
    18. Input types <input type=”date”> in Opera:
    19. Attributes . required, placeholder, autofocus, autocomplete, inputmode . validation with pattern attribute (using regular expressions) . min, max (number of files for multi-file uploads) . a <fieldset> can be entirely disabled . form (assign form elements to multiple forms)
    20. Web Forms 2.0 . standardization of input methods . a lot less Javascript and server-side work . super useful!
    21. HTML 5 Part III – Web Applications 1.0
    22. Web Applications 1.0 . set of elements, attributes & APIs . because it’s not 1998 anymore . the web is no longer a collection of static pages
    23. Elements . meter, progress, output, time . m for marked content (like search results) . embed (finally a standard) . video and audio
    24. Elements . Semantics! . section, article, aside, header, footer, nav . dialog (for conversations) . figure (grouping images & legend) . better for disabled devices (handheld devices, search engines, ...) . better for disabled users
    25. Attributes . ping for links (no more redirects for tracking) . target is back . <ol> has start & reversed . <iframe> has seamless & sandbox . contenteditable (finally a standard!) . data-* (define your own attributes)
    26. APIs . API = a set of Javascript objects, methods, events . drag & drop . canvas (standardized) . back button management . cross-document messaging . notifications . listen for server-side DOM events
    27. More APIs . offline data with storage, client-side databases and application cache . classList — access multiple classes with has(), add(), remove() and toggle() . getElementsByClassName() getSelection() hasFocus() document.activeElement innerHTML (standardized) ...
    28. Case I: offline data . sessionStorage . temporary key/value pairs . one session per tab/window . replace cookies for session tracking . extensive Javascript methods & events
    29. Case I: offline data . localStorage . like sessionStorage, but . persistent . global
    30. Case I: offline data . client-side databases . SQLite — lots of structured, relational data . asynchronous . callback based . fast
    31. Case I: offline data . application cache . store entire apps offline — HTML, JS, CSS, images, etc. . atomic updating . you tell the browser what’s new and what not in a manifest file
    32. Case I: offline data . bringing it all together: standalone web apps . site-specific browser . custom app name & icon . online & offline . available in Safari 4
    33. Case II: video & audio . standardized way of embedding media . fallback when not supported . multiple streams in one element . full Javascript API: controls, errors, networkState, readyState, events, ... . attributes for controls, poster, autoplay, ...
    34. Case II: video & audio example: <video src=clip.ogg controls> <source type=video/mp4 src=clip.mp4> <source type=video/ogg src=clip.ogg> Download the <a href=clip.ogg>clip</a>. </video>
    35. Case II: video & audio . Formats? . discussion still open (Apple & Nokia vs. Mozilla & Opera) . \"there are no known codecs that satisfy all the current players\" . probably no 'single' standard
    36. Web Applications 1.0 . a whole bunch of new elements, attributes and APIs for web apps . super useful!
    37. HTML 5 Part IV – When?
    38. When will HTML 5 be finished? 2022 * * includes two complete specifications & complete test suite
    39. It’s the future!
    40. When? 2022 — 4 reasons you shouldn't care: . 2012 is the year of the apocalypse . HTML 4 hasn't even reached the status they want to achieve with HTML 5 . W3C: spec with interoperable implementations in late 2010, and widespread adoption in 2012 . Because you can start today
    41. Already (partially) implemented . canvas . contentEditable . getElementsByClassName . offline storage . video & audio . Web Forms 2.0 . Cross-document messaging . ...
    42. Browser implementations . Opera & Webkit lead the pack . Mozilla is close . IE8 is doing very well . validators: still experimental, but finished soon
    43. And there’s always emulation . Web Forms 2 http://sourceforge.net/projects/wf2/ . Canvas http://sourceforge.net/projects/excanvas/ . ... . roll your own
    44. HTML 5 That’s all folks! . http://www.whatwg.org . http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5) . http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers . http://www.w3schools.com/tags/html5.asp . validators: http://qa-dev.w3.org/wmvs/HEAD/ & http://html5.validator.nu Read on at http://lensco.be

    + Lennart SchoorsLennart Schoors, 11 months ago

    custom

    6026 views, 19 favs, 13 embeds more stats

    My presentation at BarCamp Ghent 2 (nov 29, 2008), more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 6026
      • 5436 on SlideShare
      • 590 from embeds
    • Comments 0
    • Favorites 19
    • Downloads 126
    Most viewed embeds
    • 381 views on http://www.labnol.org
    • 175 views on http://lensco.be
    • 13 views on http://congdongthongtin.com
    • 4 views on http://knitinr.blogspot.com
    • 4 views on http://feeds.labnol.org

    more

    All embeds
    • 381 views on http://www.labnol.org
    • 175 views on http://lensco.be
    • 13 views on http://congdongthongtin.com
    • 4 views on http://knitinr.blogspot.com
    • 4 views on http://feeds.labnol.org
    • 4 views on http://tech-buzz.net
    • 3 views on http://localhost:8888
    • 1 views on http://translate.googleusercontent.com
    • 1 views on http://www.hanrss.com
    • 1 views on http://74.125.113.132
    • 1 views on file://
    • 1 views on http://localhost
    • 1 views on http://techberry.blogspot.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

    more

    Groups / Events

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved