html5
Post on 15-Jul-2015
2.788 Views
Preview:
TRANSCRIPT
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
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
New Structural Semantic Elements
<div id=”header”>
<div id=”content”>
<div id=”sidebar”>
<header>
<section>
<aside>
<article>
<nav>
<nav>
<section>
<nav>
<section>
<article><section>
<section> <aside>
<section>
<aside>
<nav>
<section>
<article>
<header>
<h1>
<p>
<p>
<h1>
<article>
<article>
<article>
<h1><p>
<h1>
<p>
<h1>
<p>
New York Times
China Cracks Down on Illegal Rare Earth Mines
The Snowstorm
Transit Update
Stir Crazy
Snow Removal
Document Outline
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 Block
article, 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 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
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 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
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"><input type="datetime-local">
Opera 9
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
SVG
WOFF
Web Workers
Geolocation
God
Web Storage
Turducken
http://slides.html5rocks.com
“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
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
AjaxWeb 2.0HTML5
Buzzword-o-matic
Web5
Web5 Geolocation
Browser Support
Getting Location
if (!!navigator.geolocation) { var geo = navigator.geolocation; geo.getCurrentPosition(displayMap);}
Using Location
function 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
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
HTML5 for Web DesignersJeremy Keith
Introducing HTML5Bruce Lawson and Remy Sharp
HTML5: Up and RunningMark Pilrim
Books
top related