HTML5
Upcoming SlideShare
Loading in...5
×
 

HTML5

on

  • 2,940 views

 

Statistics

Views

Total Views
2,940
Views on SlideShare
2,864
Embed Views
76

Actions

Likes
1
Downloads
93
Comments
0

7 Embeds 76

http://bradt.ca 60
http://lanyrd.com 7
http://www.linkedin.com 3
http://twitter.com 2
http://dev.bradt.ca 2
http://paper.li 1
http://feeds.feedburner.com 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…
Post Comment
Edit your comment

HTML5 HTML5 Presentation Transcript

  • HTML5Why aren’t you using it? Brad Touesnard http://bradt.ca @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 http://gsnedders.html5.org/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""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 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="http://html5shiv.googlecode.com /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 http://diveintohtml5.org/video.html#what-works
  • Browser Support Soon http://diveintohtml5.org/video.html#what-works
  • 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 http://diveintohtml5.org/video.html “Flash Player: CPU Hog or Hot Tamale? It Depends.” http://www.streaminglearningcenter.com/articles/flash-player-cpu-hog-or- hot-tamale-it-depends-.html
  • Native Audio
  • The Short & Sweet<audio src="bigwebshow.ogg" controls preload="auto" autobuffer></audio>
  • Browser Support http://html5doctor.com/native-audio-in-the-browser/
  • 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 http://24ways.org/2010/the-state-of-html5-audio “HTML5 Audio Unplugged” - Richard Shepherd http://thinkvitamin.com/code/html5-audio-unplugged/ “Native Audio in the Browser” - Mark Boas http://html5doctor.com/native-audio-in-the-browser/
  • 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 http://google.com/pacman/ http://playbiolab.com/ Wolfenstein 3D Quake II WebGL port http://www.nihilogic.dk/labs/wolf/ http://code.google.com/p/quake2-gwt-port/ Arcade Fire “The Wilderness True 8-bit Color Cycling with Downtown” HTML5 http://www.thewildernessdowntown.com/ http://www.effectgames.com/demos/ 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 http://hacks.mozilla.org/2009/12/multiple-file-input-in-firefox-3-6/ “Dive into HTML5: A Form of Madness” - Mark Pilgrim http://diveintohtml5.org/forms.html
  • What HTML5 is not
  • What HTML5 is not...CSS Web StorageSVG TurduckenWOFFWeb WorkersGeolocationGod
  • http://www.apple.com/html5/
  • http://slides.html5rocks.com
  • Boooooo!http://www.w3.org/html/logo/
  • “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
  • http://www.iscss3partofhtml5.com/
  • http://isgeolocationpartofhtml5.com/
  • “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 http://diveintohtml5.org/geolocation.html Geolocation demo http://html5demos.com/geo
  • Online ResourcesModernizr - Faruk Ates, Paul Irish HTML5 Doctor - Bruce Lawson,http://www.modernizr.com/ Remy Sharpe, etc http://html5doctor.com/HTML5 Boilerplate - Paul Irishhttp://html5boilerplate.com/ Quirks Mode http://www.quirksmode.org/W3Schools HTML5 Referencehttp://www.w3schools.com/html5/html5_reference.asp
  • BooksHTML5 for Web DesignersJeremy KeithIntroducing HTML5Bruce Lawson and Remy SharpHTML5: Up and RunningMark Pilrim
  • Thank You Brad Touesnard http://bradt.ca