Html5 Primer

Primer for PHP Devs
by Graeme Bryan

HTML

• Tim Berners-Lee

• 1989

• W3C World Wide Web Consortium

• Actually developed document sharing system
in 1980

Journey to HTML5
1989
1980 1995 1997
Internet
ENQUIRE HTML 2.0 HTML 3.2
proposed

Journey to HTML5
1989
1980 1995 1997
Internet
proposed

1998 2000
HTML 4.01 XHTML 1.0

Journey to HTML5
1989
1980 1995 1997
Internet
proposed

1998 2000
HTML 4.01 XHTML 1.0

2008 XHTML?

XHTML5?

• Yes

• Part of the HTML5 spec

• XML-based serialisation of HTML5

WHATWG?
• Web Hypertext Application Technology Working
Group

• competing vision

• Web browser manufacturers and interested parties

• based on HTML and related technologies

• interoperable Web Applications

• submit the results to a standards organisation

New Tags & Attributes
• <!DOCTYPE html> • <aside>

• rel="archives" etc. • <hgroup>

• <section> • <header>

• <nav> • <footer>

• <article> • <time>

APIs
• <canvas>

• <video>

• navigator.geolocation

• window.localStorage

• text/cache-manifest

Forms
• autofocus

• placeholder="Your Email"

• type="email"

• type="date"

• type="search"

• Etc.

Canvas
• a resolution-
dependent bitmap
canvas

• Graphs, charts

• Game graphics

• visual images on the
fly

Canvas compatibility
caniuse.com

Video
<video src="pr6.webm" width="320" height="240"></video>

<video width="320" height="240" controls>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E,
mp4a.40.2"'>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

Video compatibility

Also may need different resolutions / sizes for slow
connections and small screens

Video for everybody
• Camen Design UK

• <camendesign.com/code/video_for_everybody>

• Fallback to Flash Video

• However, browser controls look

• MediaElement.js <mediaelementjs.com>

• VideoJS <videojs.com>

Geo-location

function get_location() {
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(show_map);
} else {
// no native support; maybe try Gears?
}
}

Local Storage
• Cookies are limited to about 4 KB of data

• Web apps need a lot of storage space...

• on the client...

• that persists beyond a page refresh...

• and isn't transmitted to the server.

window.localStorage

function supports_html5_storage() {
return ('localStorage' in window) &&
window['localStorage'] !== null;
}

var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);

text/cache-manifest
• Offline web application

• will read the list of URLs from the manifest file

• download the resources

• cache them locally

• and automatically keep the local copies up to
date as they change

text/cache-manifest

CACHE MANIFEST
NETWORK:
/tracking.cgi
CACHE:
/clock.css
/clock.js
/clock-face.jpg

Boilerplate:
Why it is awesome
• Cross-browser compatible (IE6)

• HTML5 ready. Use the new tags with certainty

• Optimal caching and compression

• Best practice site configuration defaults

• Mobile browser optimisations

• Progressive enhancement graceful degradation

• IE specific classes for maximum cross-browser control

• Handy .no-js and .js classes to style based on capability

• A full, hooked up test suite

Boilerplate:
Why it is awesom-er
• Javascript profiling…in IE6 and IE7?

• Console.log nerfing so you won't break anyone by mistake

• Never go wrong with your doctype or markup!

• An optimal print stylesheet, performance optimized

• iOS, Android, Opera Mobile-adaptable markup and CSS skeleton

• IE6 pngfix baked in

• .clearfix, .visuallyhidden classes to style things wisely and accessibly

• .htaccess file that allows proper use of HTML5 features and faster page
load

• CDN hosted jQuery with local fallback failsafe

• Think there's too much? The HTML5 Boilerplate is delete-key friendly. :)

HTML5 Reset v2

• Similar to boilerplate but different in scope

• html5reset.org

Resources
• Dive Into HTML5 by Mark Pilgrim
<diveintohtml5.org>

• HTML5: Up & Running (printed version)
O'Reilly

• dev.w3.org/html5/html4-differences/

• en.wikipedia.org/wiki/HTML5

Thank you

My name is Graeme Bryan

Mobile: 0425 724 169

Email: grae@avinago.com

URL: avinago.com/webbinago

Html5 Primer

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (6)

Similar to Html5 Primer

Similar to Html5 Primer (20)

Recently uploaded

Recently uploaded (20)

Html5 Primer

Editor's Notes