Upcoming SlideShare
Loading in...5







Total Views
Views on SlideShare
Embed Views



7 Embeds 76 60 7 3 2 2 1 1



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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

HTML5 HTML5 Presentation Transcript

  • HTML5Why aren’t you using it? Brad Touesnard @bradt
  • You are using it “HTML5 isn’t a completely new language created from scratch. It’s an evolutionary rather than revolutionary change in the ongoing story of markup. If you are currently creating websites with any version of HTML, you’re already using HTML5.” - Jeremy Keith, HTML5 for Web Designers
  • What’s new in HTML5?New Structural Semantic Elements Multiple File UploadingNative Audio & Video Document EditingNew Form Controls Cross-Document Messaging2D & 3D Graphics Browser History ManagementMicrodata Web StorageDrag-and-Drop Web Workers
  • New Structural Semantic Elements
  • <div id=”header”> <div id=”content”><div id=”sidebar”>
  • <header> <section><aside>
  • <nav><nav> <article> <section> <section> <aside><nav> <article> <section> <section> <section> <article><nav> <aside>
  • <header>
  • <h1><p><p>
  • <h1><article><article><article>
  • <h1> <p><h1><p><h1><p>
  • Document OutlineNew York Times China Cracks Down on Illegal Rare Earth Mines The Snowstorm Transit Update Stir Crazy Snow Removal
  • HTML5 Document Outliner
  • Other semantic elements<hgroup><footer><time><mark><figure> / <figcaption>
  • Using These New Elements Today
  • Ye Olde Doctype<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""">
  • Ye New Doctype<!DOCTYPE html>
  • Go Blockarticle, section, aside, hgroup, nav, header,footer, figure, figcaption { display: block;}
  • Getting Internet Explorer to behave<head>...<!--[if lt IE 9]><script src=" /svn/trunk/html5.js"></script><![endif]-->...</head>
  • Why today? Om nom nom!
  • Native Video
  • The Land Before Flash
  • Criticisms of Flash Browser slowness & crashing Poor video performance (better in 10.1 with hardware acceleration) No standardized video API No semantics
  • Ideally Simple<video src="sneezing-panda.webm" width="320" height="240"></video>
  • Browser Support Today
  • Browser Support Soon
  • Unfortunately Complicated<video width="320" height="240" preload controls> <source src="panda.mp4" /> <source src="panda.webm" type=video/webm; codecs="vp8, vorbis" /> <source src="panda.ogv" type=video/ogg; codecs="theora, vorbis" /> <object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value=config={"clip": {"url": "panda.mp4", "autoPlay":false, "autoBuffering":true}} /> <p>Download video as <a href="panda.mp4">MP4</a>, <a href="panda.webm">WebM</a>, or <a href="panda.ogv">Ogg</a>.</p> </object></video>
  • Articles “Dive into HTML5: Video on the Web” - Mark Pilgrim “Flash Player: CPU Hog or Hot Tamale? It Depends.” hot-tamale-it-depends-.html
  • Native Audio
  • The Short & Sweet<audio src="bigwebshow.ogg" controls preload="auto" autobuffer></audio>
  • Browser Support
  • The Long & Ugly<audio controls preload="auto" autobuffer> <source src="bigwebshow.mp3" /> <source src="bigwebshow.ogg" /> <object width="300" height="20" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value=config={"clip": {"url": "bigwebshow.mp3", "autoPlay":false, "autoBuffering":true}} /> <p>Download podcast as <a href="bigwebshow.mp3">MP3</a>, or <a href="bigwebshow.ogg">Ogg</a>.</p> </object></audio>
  • Articles “The State of HTML5 Audio” - Scott Schiller “HTML5 Audio Unplugged” - Richard Shepherd “Native Audio in the Browser” - Mark Boas
  • 2D & 3D Graphics
  • Technologies<canvas id="game" width="500" height="500"></canvas>canvas.getContext(‘2d’)WebGL (managed by Khronos Group)canvas.getContext(‘experimental-webgl’)
  • Links Google Pacman Biolab Disaster Wolfenstein 3D Quake II WebGL port Arcade Fire “The Wilderness True 8-bit Color Cycling with Downtown” HTML5 canvascycle/?sound=0
  • New Form Controls
  • Placeholder Text<input type="text" placeholder="Enter search text here">
  • Autofocus<input type="text" autofocus>
  • Email Address<input type="email">
  • Web Address<input type="url">
  • Number<input type="number" min="0" max="10" step="2" value="6">
  • Range<input type="range" min="0" max="10" step="2" value="6">
  • Date & Time<input type="date"><input type="month"><input type="week"><input type="time"><input type="datetime"> Opera 9<input type="datetime-local">
  • Search<input type="search">
  • Others<input type="color"><input type="tel">
  • Upload Multiple Files<input type="file" name="photos[]" multiple>
  • Form Validation Email address Web address Required <input type="text" required>
  • Articles “multiple file input in Firefox 3.6” - Paul Rouget “Dive into HTML5: A Form of Madness” - Mark Pilgrim
  • What HTML5 is not
  • What HTML5 is not...CSS Web StorageSVG TurduckenWOFFWeb WorkersGeolocationGod
  • Boooooo!
  • “It’s as if the government suddenly announced that from today, all vegetables will be called potatoes, justbecause some vegetables are potatoes.” - Bobbie Johnson, GigaOM
  • “I wish I could put ‘HTML5’ in a sentence and it would mean version 5 of HTML. That would make sense.” - Me
  • Buzzword-o-matic Ajax Web 2.0 HTML5
  • Buzzword-o-matic Web5
  • Web5 Geolocation
  • Browser Support
  • Getting Locationif (!!navigator.geolocation) { var geo = navigator.geolocation; geo.getCurrentPosition(displayMap);}
  • Using Locationfunction displayMap(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // embed a map}
  • Articles “You Are Here (and so is everybody else)” - Mark Pilgrim Geolocation demo
  • Online ResourcesModernizr - Faruk Ates, Paul Irish HTML5 Doctor - Bruce Lawson, Remy Sharpe, etc Boilerplate - Paul Irish Quirks Mode HTML5 Reference
  • BooksHTML5 for Web DesignersJeremy KeithIntroducing HTML5Bruce Lawson and Remy SharpHTML5: Up and RunningMark Pilrim
  • Thank You Brad Touesnard