• Save
Html5 presentation-101021123240-phpapp02
Upcoming SlideShare
Loading in...5
×
 

Html5 presentation-101021123240-phpapp02

on

  • 954 views

 

Statistics

Views

Total Views
954
Views on SlideShare
954
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Html5 presentation-101021123240-phpapp02 Html5 presentation-101021123240-phpapp02 Presentation Transcript

  • HTML5 What it is, what it’s not, and what parts of it we can use today. October 21, 2010 Steven G. Chipman
  • In 140 Characters .... “HTML5 is a vocabulary and set of application programming interfaces that make up a core declarative language for web sites and applications.” @mollydotcom
  • Simplification.
  • You’re no doubt familiar with ... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <!DOCTYPE html>
  • (seriously, thats it.)
  • <meta charset=”UTF-8”>
  • <script src=”foo.js”></script>
  • <link rel=”stylesheet” href=”styles.css” />
  • <html lang=”en”>
  • HTML5 is not XML
  • <DIV>, <div> or even <DiV> is just fine.
  • <br>, <BR> and <br /> are all ok too.
  • <a class=foo> is even all right.
  • (but it seems dirty to me)
  • Obsolescence.
  • frame, frameset and noframes
  • (but when was the last time you needed them?)
  • font, center, and other presentational cruft
  • (but if you still use those, I’ll give you a smack)
  • Changes.
  • small is now semantic. It means “legal text”.
  • b now means stylistically offset text with no additional importance.
  • i means the text is in an alternate mood or voice
  • cite now means the “title of a work”
  • It’s now ok to nest elements inside an a element
  • <a href=”/”> <h1>My awesome site</h1> <h2>My witty tagline</h2> </a> * we can make this more semantic, but lets not get ahead of ourselves.
  • <menu>
  • <menu type=”list|toolbar|context”>
  • <command label=”Autofill” onclick=”doAutoFill();” /> * doesn’t seem to be supported by anything yet
  • <form contextmenu=”ourMenu”> .... <menu id=”ourMenu”> <command ... /> </menu> </form>
  • Semantics.
  • <time>
  • <time datetime=”2010-10-21”>October 21, 2010</ time>
  • <time datetime=”2010-10-21”>Thursday</time>
  • <time datetime=”2010-10-21” pubdate>October 21, 2010</time> * if nested in an <article>, its the pubdate of the article. Otherwise, its the pubdate of the document
  • <meter>
  • <meter>4 out of 5 dentists</meter>
  • <meter min=”0” max=”5”>4 out of 5 dentists</meter>
  • <meter min=”0” max=”5” value=”4”>A majority of dentists</meter>
  • It also has high, low, and optimum attributes.
  • <progress>
  • <p> Upload is <progress min=”0” max=”100”>60%</progress> complete. </p>
  • <progress min=”0” max=”100” value=”60”></ progress>
  • <section>
  • Use section it to group related content.
  • <section class=”posts”> <h1>The latest news ... </h1> <p> Oh hai, guyz! </p> </section>
  • <article>
  • Like section, but for self contained content.
  • <section class=”posts”> <h1>The latest news ... </h1> <article> <p> Oh hai, guyz! </p> </article> </section>
  • Each article can have its own h1-h6 hierarchy.
  • <section class=”posts”> <h1>The latest news ...</h1> <article> <h1>Article title</h1> <p> Oh hai, guyz! </p> </article> </section>
  • <header>
  • <hgroup>
  • <header> <hgroup> <a href=”/”> <h1>My awesome site</h1> <h2>My witty tagline</h2> </a> </hgroup> </header> * the enhanced semantics I mentioned earlier
  • <footer>
  • <footer> <small>Legal mumbo jumbo and copyrights</small> </footer>
  • <nav>
  • <footer> <nav> <ul> <li><a href=”...”>Another Property</li> <li><a href=”...”>Help!</li> </ul> </nav> <small>Legal mumbo jumbo and copyrights</small> </footer>
  • <aside>
  • Used to represent content that is tangentially related to other content.
  • <!DOCTYPE html> <head> <meta charset=”UTF-8” /> <title>Sample HTML5 Document Structure</title> </head> <body> <header> <hgroup> <h1>My awesome site</h1> <h2>My witty tagline</h2> </hgroup> <nav> <ul> <li><a href=”/”>home</a></li> <li><a href=”about.html”>about</a></li> </ul> </nav> </header> <section class=”posts”> <article> <h1>Post Title</h1> <time datetime=”2010-10-01”>October 1, 2010</time> <p>This is the body of the blog post.</p> <aside>Here is a funny excerpt!</aside> </article> </section> <footer> <nav> <ul> <li><a href=”...”>Another Property</a></li> <li><a href=”...”>Help!</a></li> </ul> </nav> <small>&copy; 2010, Me</small> </footer> </body> </html>
  • Forms.
  • <input type=”text” placeholder=”Email” />
  • <input type=”text” placeholder=”Email” autofocus />
  • <input type=”email” placeholder=”Email” autofocus />
  • <input type=”email” placeholder=”Email” autofocus required />
  • input:invalid { background-color:#E366AF }
  • tel url datetime date month week time datetime-local number range color search
  • <input type=”range” min=”0” max=”10” />
  • <input type=”date” />
  • <datalist>
  • <input type=”text” list=”titles” /> <datalist id=”titles”> <option value=”Mr.” /> <option value=”Mrs.” /> <option value=”Dr.” /> </datalist>
  • Browsers that don’t understand an input type will render it as a standard text input.
  • Media.
  • <video>
  • <video src=”movie.mp4” width=”320” height=”240” poster=”poster.jpg”> </video>
  • <video controls src=”movie.mp4” width=”320” height=”240” poster=”poster.jpg”> </video>
  • If you don’t specify controls, you can write your own with javascript. *Standard stuff like .play(), .pause(), .volume, etc.
  • <video preload=”none|auto|metadata” src=”movie.mp4” width=”320” height=”240” poster=”poster.jpg”> </video>
  • <video controls width=”320” height=”240” poster=”poster.jpg”> <source src=”movie.mp4” type=”video/mp4” /> <source src=”move.ogv” type=”video/ogg” /> </video>
  • <video controls width=”320” height=”240” poster=”poster.jpg”> <source src=”movie.mp4” type=”video/mp4” /> <source src=”move.ogv” type=”video/ogg” /> <object type=”application/x-shockwave-flash”> ... </object> </video>
  • http://slayeroffice.com/articles/html5/video/
  • <audio>
  • pretty much the same as video.
  • <canvas>
  • http://slayeroffice.com/code/mouse_patterns/mp-canvas.html
  • APIs.
  • Canvas 2d Context
  • An introduction to canvas is a presentation unto itself.
  • window.localStorage
  • localStorage.setItem(“key”,”value”);
  • localStorage.getItem(“key”); * returns null if the key doesn’t exist
  • localStorage.removeItem(“key”);
  • window.addEventListener(“storage”,onStorage,false);
  • StorageEvent.key|oldValue|newValue|url * url might be uri in some browsers. Check for uri if url isn’t there.
  • Things to keep in mind ... • 5MB of storage • EVERYTHING is returned as as string, just like cookies • If you run out of space, an exception will be thrown. • Unlike Flash LSOs, you can’t ask for more space. • Some browsers allow users to set the limit, so you may have less than 5MB
  • File API
  • Drag & Drop Events
  • Geolocation
  • navigator.geolocation.getCurrentPosition(callback);
  • function callback(position) { alert(position.coords.latitude) }
  • navigator.geolocation.watchPosition(callback);
  • Web Workers
  • Javascript is single threaded. Workers allow for background threads.
  • var worker = new Worker(“worker.js”);
  • worker.postMessage(“hello!”);
  • worker.onmessage = function(evt) { alert(evt.data); }
  • self.onmessage = function(evt) { // do stuff ... }
  • Things to be aware of ... • Workers can not access or manipulate the DOM. • They do not have access to the scripts in the page that spawned it. • Using importScripts, a Worker can access other javascript libraries.
  • Web Sockets
  • Also an entire presentation.
  • In a nutshell, it will allow us to use sockets instead of long polling over HTTP.
  • But only Safari and Chrome support it right now.
  • But what about ...
  • Getting IE to recognize new elements ... <script> document.createElement(“section”); document.createElement(“article”); // ... and so on </script> * otherwise you won’t be able to style these elements in IE8 and below
  • Testing for attribute support ... function elementSupportsAttribute(element,attribute) { var ele = document.createElement(element); return attribute in ele ? true : false; }
  • Testing for input type support ... function elementSupportsType(type) { var input = document.createElement(“input”); input.setAttribute(“type”,type); return input.getAttribute(“type”) == “text” ? false : true; }
  • According to Microsoft ... IE9 is the bomb: http://samples.msdn.microsoft.com/ietestcenter/
  • Modernizr • Detects support, does NOT provide it • Javascript hooks such as Modernizr.canvas • Adds classes to the HTML element that define available features • Sets up elements for IE 6 through 8 • MIT-BSD License
  • Resources • HTML5 for Web Designers by Jeremy Keith - http://books.alistapart.com/ • Dive into HTML5 by Mark Pilgrim - http://diveintohtml5.org/ • The Spec: http://dev.w3.org/html5/spec/Overview.html • The HTML5 Test: http://www.html5test.com/ • Modernizr: http://www.modernizr.com/
  • Questions? Thanks for coming!