HTML 5 In a big nutshell. Lennart Schoors
Html 5 in a big nutshell
Sep 11, 2014
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.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
HTML 5In a big nutshell.
Lennart Schoors
Me
. lead web designer at Netloghttp://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
.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
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
<!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">
example – XHTML 1 strict:
Syntax
<!doctype html><html> <head> <meta charset="utf-8">
Syntax
HTML 5:
Syntax
. lowercase tags!
. close void elements! (img, meta, input, ...)
. no empty attributes! (disabled=”disabled”)
. always put attribute values in double quotes!
XHTML taught us:
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
. 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, ...
Say bye bye to:
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 andmoving 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 withhas(), add(), remove() and toggle()
. getElementsByClassName()getSelection()hasFocus()document.activeElementinnerHTML (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, ...
<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
example:
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
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?
. 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
2022 — 4 reasons you shouldn't care:
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 2http://sourceforge.net/projects/wf2/
. Canvashttp://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
Related Documents
