Html 5 in a big nutshell

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

http://www.labnol.org	10375
http://www.maestrosdelweb.com	6624
http://lensco.be	284
http://congdongthongtin.com	279
http://feeds.feedburner.com	49
http://www.slideshare.net	49
http://integradorweb.com	43
http://knitinr.blogspot.com	36
http://www.bigwisu.com	23
http://translate.googleusercontent.com	15
http://onwebdev.blogspot.com	14
http://ruben2.com	13
http://www.newsblur.com	11
http://inteligenciaartificialomb.com	8
http://live.prokhorenko.us	8
http://tjordanm.xanga.com	7
http://127.0.0.1	7
http://s.deeeki.com	6
http://translate.google.com	5
http://optimizaciondemotoresdebusqueda.info	5
http://feeds.labnol.org	4
http://tech-buzz.net	4
http://cdn.pearltrees.com	4
http://localhost:8888	3
http://www.xanga.com	3
file://	3
http://techberry.blogspot.com	3
http://moodle.esenviseu.net	3
http://knitinr.blogspot.in	2
http://static.slidesharecdn.com	2
http://74.6.117.48	1
http://localhost	1
http://feeds2.feedburner.com	1
http://web-mercadeo.info	1
http://search.conduit.com	1
http://knitinr.blogspot.se	1
http://knitinr.blogspot.de	1
http://blog.gabrieleromanato.com	1
http://onwebdev.blogspot.com.es	1
http://flavors.me	1
http://knitinr.blogspot.co.uk	1
http://74.125.113.132	1
http://feedproxy.google.com	1
http://prokhorenko.blogspot.com	1
http://www.google.com	1
http://webcache.googleusercontent.com	1
http://itechengine.com	1
http://technology.feedfury.com	1
http://coursehome.next.ecollege.com	1
http://foros.collected.info	1
http://posterous.com	1

Html 5 in a big nutshell

by Lennart Schoors on Nov 29, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

54 Embeds 17,916

Statistics

Html 5 in a big nutshell — Presentation Transcript