Html 5 in a big nutshell
Upcoming SlideShare
Loading in...5
×
 

Html 5 in a big nutshell

on

  • 39,247 views

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 ...

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.

Statistics

Views

Total Views
39,247
Views on SlideShare
15,942
Embed Views
23,305

Actions

Likes
31
Downloads
625
Comments
1

70 Embeds 23,305

http://www.labnol.org 13195
http://www.maestrosdelweb.com 8929
http://congdongthongtin.com 389
http://lensco.be 287
http://integradorweb.com 89
http://knitinr.blogspot.com 52
http://www.slideshare.net 49
http://feeds.feedburner.com 49
http://www.bigwisu.com 25
http://translate.googleusercontent.com 25
http://onwebdev.blogspot.com 21
http://www.comunidadtic.com.ar 19
http://ruben2.com 13
http://www.newsblur.com 11
http://127.0.0.1 10
http://inteligenciaartificialomb.com 9
http://live.prokhorenko.us 9
http://tjordanm.xanga.com 7
http://cdn.pearltrees.com 6
http://flavors.me 6
http://s.deeeki.com 6
http://optimizaciondemotoresdebusqueda.info 5
http://blog.gabrieleromanato.com 5
http://translate.google.com 5
http://knitinr.blogspot.ae 5
http://feeds.labnol.org 4
http://knitinr.blogspot.ro 4
http://tech-buzz.net 4
http://knitinr.blogspot.co.uk 4
http://knitinr.blogspot.in 3
http://www.linkedin.com 3
http://onwebdev.blogspot.com.ar 3
http://pmomale-ld1 3
http://www.xanga.com 3
file:// 3
http://localhost:8888 3
http://techberry.blogspot.com 3
http://moodle.esenviseu.net 3
http://192.168.12.135 2
http://static.slidesharecdn.com 2
http://knitinr.blogspot.de 2
http://web-mercadeo.info 2
http://74.125.113.132 1
http://knitinr.blogspot.jp 1
http://knitinr.blogspot.com.au 1
http://knitinr.blogspot.ie 1
http://knitinr.blogspot.dk 1
http://knitinr.blogspot.ch 1
http://knitinr.blogspot.be 1
http://knitinr.blogspot.co.at 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Very well done.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html 5 in a big nutshell Html 5 in a big nutshell Presentation Transcript

  • 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 never really took off . renewed focus on HTML and real-world issues . “evolving instead of reinventing”
  • 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
  • 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;>
  • 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! (disabled=”disabled”) . always put attribute values in double quotes!
  • 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 clean coding style, you’ll thank yourself for it later
  • 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
  • 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, ...
  • 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 (adding, removing and moving blocks) . better solutions for combo-boxes & auto-completion — like search suggestions (list attribute, datalist & select elements)
  • 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
  • Input types <input type=”date”> in Opera:
  • 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)
  • 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 collection of static pages
  • Elements . meter, progress, output, time . m for marked content (like search results) . embed (finally a standard) . video and audio
  • 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
  • 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)
  • 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
  • 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) ...
  • Case I: offline data . sessionStorage . temporary key/value pairs . one session per tab/window . replace cookies for session tracking . extensive Javascript methods & events
  • Case I: offline data . localStorage . like sessionStorage, but . persistent . global
  • Case I: offline data . client-side databases . SQLite — lots of structured, relational data . asynchronous . callback based . fast
  • 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
  • Case I: offline data . bringing it all together: standalone web apps . site-specific browser . custom app name & icon . online & offline . available in Safari 4
  • 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, ...
  • 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>
  • 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
  • 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 two complete specifications & complete test suite
  • 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 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
  • Already (partially) implemented . canvas . contentEditable . getElementsByClassName . offline storage . video & audio . Web Forms 2.0 . Cross-document messaging . ...
  • Browser implementations . Opera & Webkit lead the pack . Mozilla is close . IE8 is doing very well . validators: still experimental, but finished soon
  • And there’s always emulation . Web Forms 2 http://sourceforge.net/projects/wf2/ . Canvas http://sourceforge.net/projects/excanvas/ . ... . roll your own
  • 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