HTML5
-
Upload
brad-touesnard -
Category
Technology
-
view
2.788 -
download
0
Transcript of HTML5
![Page 2: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/2.jpg)
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
![Page 3: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/3.jpg)
What’s new in HTML5?
New Structural Semantic Elements
Native Audio & Video
New Form Controls
2D & 3D Graphics
Microdata
Drag-and-Drop
Multiple File Uploading
Document Editing
Cross-Document Messaging
Browser History Management
Web Storage
Web Workers
![Page 4: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/4.jpg)
New Structural Semantic Elements
![Page 5: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/5.jpg)
![Page 6: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/6.jpg)
<div id=”header”>
<div id=”content”>
<div id=”sidebar”>
![Page 7: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/7.jpg)
<header>
<section>
<aside>
![Page 8: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/8.jpg)
<article>
<nav>
<nav>
<section>
<nav>
<section>
<article><section>
<section> <aside>
<section>
<aside>
<nav>
<section>
<article>
![Page 9: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/9.jpg)
<header>
![Page 10: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/10.jpg)
<h1>
<p>
<p>
![Page 11: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/11.jpg)
<h1>
<article>
<article>
<article>
![Page 12: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/12.jpg)
<h1><p>
<h1>
<p>
<h1>
<p>
![Page 13: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/13.jpg)
New York Times
China Cracks Down on Illegal Rare Earth Mines
The Snowstorm
Transit Update
Stir Crazy
Snow Removal
Document Outline
![Page 14: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/14.jpg)
HTML5 Document Outliner
http://gsnedders.html5.org/outliner/
![Page 15: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/15.jpg)
Other semantic elements
<hgroup>
<footer>
<time>
<mark>
<figure> / <figcaption>
![Page 16: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/16.jpg)
Using These New Elements Today
![Page 17: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/17.jpg)
Ye Olde Doctype
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
![Page 18: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/18.jpg)
Ye New Doctype
<!DOCTYPE html>
![Page 19: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/19.jpg)
Go Block
article, section, aside, hgroup, nav, header, footer, figure, figcaption { display: block;}
![Page 20: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/20.jpg)
Getting Internet Explorer to behave<head>
...
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com /svn/trunk/html5.js"></script><![endif]-->
...
</head>
![Page 21: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/21.jpg)
Why today?
Om nom nom!
![Page 22: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/22.jpg)
Native Video
![Page 23: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/23.jpg)
The Land Before Flash
![Page 24: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/24.jpg)
Criticisms of Flash
Browser slowness & crashing
Poor video performance (better in 10.1 with hardware acceleration)
No standardized video API
No semantics
![Page 25: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/25.jpg)
Ideally Simple
<video src="sneezing-panda.webm" width="320" height="240"></video>
![Page 26: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/26.jpg)
Browser Support Today
http://diveintohtml5.org/video.html#what-works
![Page 27: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/27.jpg)
Browser Support Soon
http://diveintohtml5.org/video.html#what-works
![Page 28: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/28.jpg)
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>
![Page 29: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/29.jpg)
Articles
“Dive into HTML5: Video on the Web” - Mark Pilgrimhttp://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
![Page 30: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/30.jpg)
Native Audio
![Page 31: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/31.jpg)
The Short & Sweet
<audio src="bigwebshow.ogg" controls preload="auto" autobuffer></audio>
![Page 32: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/32.jpg)
Browser Support
http://html5doctor.com/native-audio-in-the-browser/
![Page 33: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/33.jpg)
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>
![Page 34: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/34.jpg)
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/
![Page 35: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/35.jpg)
2D & 3D Graphics
![Page 36: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/36.jpg)
Technologies
<canvas id="game" width="500" height="500"></canvas>
canvas.getContext(‘2d’)
WebGL (managed by Khronos Group)
canvas.getContext(‘experimental-webgl’)
![Page 37: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/37.jpg)
![Page 38: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/38.jpg)
![Page 39: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/39.jpg)
![Page 40: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/40.jpg)
![Page 41: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/41.jpg)
![Page 42: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/42.jpg)
![Page 43: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/43.jpg)
![Page 44: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/44.jpg)
Links
Google Pacmanhttp://google.com/pacman/
Wolfenstein 3Dhttp://www.nihilogic.dk/labs/wolf/
Arcade Fire “The Wilderness Downtown”http://www.thewildernessdowntown.com/
Biolab Disasterhttp://playbiolab.com/
Quake II WebGL porthttp://code.google.com/p/quake2-gwt-port/
True 8-bit Color Cycling with HTML5http://www.effectgames.com/demos/canvascycle/?sound=0
![Page 45: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/45.jpg)
New Form Controls
![Page 46: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/46.jpg)
Placeholder Text
<input type="text" placeholder="Enter search text here">
![Page 47: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/47.jpg)
Autofocus
<input type="text" autofocus>
![Page 48: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/48.jpg)
Email Address
<input type="email">
![Page 49: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/49.jpg)
Web Address
<input type="url">
![Page 50: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/50.jpg)
Number<input type="number" min="0" max="10" step="2" value="6">
![Page 51: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/51.jpg)
Range
<input type="range" min="0" max="10" step="2" value="6">
![Page 52: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/52.jpg)
Date & Time
<input type="date"><input type="month"><input type="week"><input type="time"><input type="datetime"><input type="datetime-local">
Opera 9
![Page 53: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/53.jpg)
Search
<input type="search">
![Page 54: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/54.jpg)
Others
<input type="color"><input type="tel">
![Page 55: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/55.jpg)
Upload Multiple Files
<input type="file" name="photos[]" multiple>
![Page 56: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/56.jpg)
Form Validation
Email address
Web address
Required<input type="text" required>
![Page 57: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/57.jpg)
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
![Page 58: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/58.jpg)
What HTML5 is not
![Page 59: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/59.jpg)
What HTML5 is not...
CSS
SVG
WOFF
Web Workers
Geolocation
God
Web Storage
Turducken
![Page 61: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/61.jpg)
http://slides.html5rocks.com
![Page 63: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/63.jpg)
“It’s as if the government suddenly announced that from today, all
vegetables will be called potatoes, just because some vegetables are potatoes.”
- Bobbie Johnson, GigaOM
![Page 64: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/64.jpg)
http://www.iscss3partofhtml5.com/
![Page 65: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/65.jpg)
![Page 66: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/66.jpg)
http://isgeolocationpartofhtml5.com/
![Page 67: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/67.jpg)
![Page 68: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/68.jpg)
“I wish I could put ‘HTML5’ in a sentence and it would mean version 5 of HTML.
That would make sense.”- Me
![Page 69: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/69.jpg)
Buzzword-o-matic
AjaxWeb 2.0HTML5
![Page 70: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/70.jpg)
Buzzword-o-matic
Web5
![Page 71: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/71.jpg)
Web5 Geolocation
![Page 72: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/72.jpg)
Browser Support
![Page 73: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/73.jpg)
Getting Location
if (!!navigator.geolocation) { var geo = navigator.geolocation; geo.getCurrentPosition(displayMap);}
![Page 74: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/74.jpg)
![Page 75: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/75.jpg)
Using Location
function displayMap(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // embed a map}
![Page 76: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/76.jpg)
![Page 77: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/77.jpg)
Articles
“You Are Here (and so is everybody else)” - Mark Pilgrim http://diveintohtml5.org/geolocation.html
Geolocation demo http://html5demos.com/geo
![Page 78: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/78.jpg)
Modernizr - Faruk Ates, Paul Irishhttp://www.modernizr.com/
HTML5 Boilerplate - Paul Irishhttp://html5boilerplate.com/
W3Schools HTML5 Referencehttp://www.w3schools.com/html5/html5_reference.asp
HTML5 Doctor - Bruce Lawson, Remy Sharpe, etchttp://html5doctor.com/
Quirks Modehttp://www.quirksmode.org/
Online Resources
![Page 79: HTML5](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a596f01a28ab660b8b461f/html5/thumbnails/79.jpg)
HTML5 for Web DesignersJeremy Keith
Introducing HTML5Bruce Lawson and Remy Sharp
HTML5: Up and RunningMark Pilrim
Books