Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML 5 In a big nutshell. Lennart Schoors
Me . lead web designer at Netlog http://www.netlog.com . blog at http://lensco.be
HTML 5 . Introduction . Web Forms 2.0 . Web Applications 1.0 . When?
HTML 5 Part I – Introduction
Background . WHATWG . founded in 2004 . reaction against the road the W3C was taking . XHTML was no failure, but XML part ...
Background . 2007: WHATWG joins forces with W3C . HTML WG . both groups now work on the HTML 5 spec . all parties are now ...
Syntax example – XHTML 1 strict: <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.or...
Syntax HTML 5: <!doctype html> <html> <head> <meta charset=quot;utf-8quot;>
Syntax XHTML taught us: . lowercase tags! . close void elements! (img, meta, input, ...) . no empty attributes! (disa...
Syntax HTML 5 says: you choose.
Syntax . Tag soup? No! . small degree of freedom, but very detailed rules for parsing . validation will matter . keep a ...
Syntax . HTML 5 is designed so that old HTML 4 browsers can safely ignore new HTML 5 constructs . “Documents must not us...
What’s gone Say bye bye to: . frames . acronym, basefont, big, center, font, s, strike, tt, u . language attribute on s...
Good riddance!
HTML 5 Part II – Web Forms 2.0
Web Forms 2.0 . set of elements, attributes & input types . complete repetition model for forms with recurring fields (a...
Input types . date & time (single or range) . email & url . color picker . user agent can provide the user interface ...
Input types <input type=”date”> in Opera:
Attributes . required, placeholder, autofocus, autocomplete, inputmode . validation with pattern attribute (using...
Web Forms 2.0 . standardization of input methods . a lot less Javascript and server-side work . super useful!
HTML 5 Part III – Web Applications 1.0
Web Applications 1.0 . set of elements, attributes & APIs . because it’s not 1998 anymore . the web is no longer a coll...
Elements . meter, progress, output, time . m for marked content (like search results) . embed (finally a standard) . video...
Elements . Semantics! . section, article, aside, header, footer, nav . dialog (for conversations) . figure (group...
Attributes . ping for links (no more redirects for tracking) . target is back . <ol> has start & reversed . <iframe> h...
APIs . API = a set of Javascript objects, methods, events . drag & drop . canvas (standardized) . back button man...
More APIs . offline data with storage, client-side databases and application cache . classList — access multiple classes ...
Case I: offline data . sessionStorage . temporary key/value pairs . one session per tab/window . replace cook...
Case I: offline data . localStorage . like sessionStorage, but . persistent . global
Case I: offline data . client-side databases . SQLite — lots of structured, relational data . asynchronous . ...
Case I: offline data . application cache . store entire apps offline — HTML, JS, CSS, images, etc. . atomic ...
Case I: offline data . bringing it all together: standalone web apps . site-specific browser . custom app name & ...
Case II: video & audio . standardized way of embedding media . fallback when not supported . multiple streams in one el...
Case II: video & audio example: <video src=clip.ogg controls> <source type=video/mp4 src=clip.mp4> <source typ...
Case II: video & audio . Formats? . discussion still open (Apple & Nokia vs. Mozilla & Opera) . quot;there ...
Web Applications 1.0 . a whole bunch of new elements, attributes and APIs for web apps . super useful!
HTML 5 Part IV – When?
When will HTML 5 be finished? 2022 * * includes t...
It’s the future!
When? 2022 — 4 reasons you shouldn't care: . 2012 is the year of the apocalypse . HTML 4 hasn't even reached the status...
Already (partially) implemented . canvas . contentEditable . getElementsByClassName . offline storage . video & audio...
Browser implementations . Opera & Webkit lead the pack . Mozilla is close . IE8 is doing very well . validators: still exp...
And there’s always emulation . Web Forms 2 http://sourceforge.net/projects/wf2/ . Canvas http://sourceforge.net/proj...
HTML 5 That’s all folks! . http://www.whatwg.org . http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)...
Html 5 in a big nutshell
Upcoming SlideShare
Loading in …5
×
Technology
60,310 views
Nov. 29, 2008

Html 5 in a big nutshell

My presentation at BarCamp Ghent 2 (nov 29, 2008), providing a quick overview of HTML 5. Includes two detailed cases, one about local storage APIs and one about the new video element. Check http://lensco.be for more.

no profile picture user

  • Login to see the comments

Show More

Html 5 in a big nutshell

  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 quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot;>
  8. Syntax HTML 5: <!doctype html> <html> <head> <meta charset=quot;utf-8quot;>
  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) . quot;there are no known codecs that satisfy all the current playersquot; . 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

×