Dustin Tauer

Developer/Instructor
Web :: Mobile :: eLearning
dustin@easelsolutions.com
@dtauer
Easel solutions

Training & Development
HTML 4
<h2>Hello World!</h2>
<p><strong>I must</strong>include a <em>hello world</em> example.</p>
HTML 5
<h2>Hello World!</h2>
<p><strong>I must</strong>include a <em>hello world</em> example.</p>
HTML 5
HTML5 = HTML + CSS + JavaScript
Topics
- HTML5 Features & Examples
- The Real World
- Feature Testing
- Fallback
- Resources
Ask lots of questions!
Interrupt me or use the chat pod
New Semantic Elements
HTML4 DOCTYPE
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">
HTML5 DOCTYPE
<!DOCTYPE html>
Web design before html5

Web design after html5

Semantic distictions
<section /> clarifies <div />
<article /> replaces <div id=“content”>
<aside /> replaces <div id=“sidebar”>
Others
Datalist/Details
Form Elements
Custom Data
Local Storage
-
Client-side database
-
Key-value notation (JSON)
-
Stored in users browsers
-
5 MB (per domain)
-
The data persists
-
After the browser is shutdown or session is closed
window.localStorage.setItem('value', someValue);
Session Storage
-
Just like Local storage but data expires once browser window is closed
- Still client-side
Indexed Database
WebSQL is deprecated.
IndexedDB is an object store
var idbRequest = window.indexedDB.open('Database Name');
idbRequest.onsuccess = function(event) {
var db = event.srcElement.result;
var transaction = db.transaction([],IDBTransaction.READ_ONLY);
var curRequest = transaction.objectStore('Name').openCursor();
curRequest.onsuccess = ...;
}
Application Cache
-
Offline First
-
Cache manifest (*.appcache => file)
-
Load from local cache (HTML, CSS, JS and images)
-
mimetype: text/cache-manifest
-
5MB (chrome = unlimited storage)
-
window.applicationCache
Webworkers (multi-threading)
App.js
var worker = new Worker(“Thread.js”);
worker.onmessage = function(event) {
alert(event.data);
};
worker.postMessage('data');
Thread.js
self.onmessage = function(event) { // Do some work. self.postMessage("recv'd:"+event.data);
};
Video
<video controls width="500">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
<embed src="your_flash_file"
type="application/x-shockwave-flash"
width="1024" height="798"
allowscriptaccess="always"
allowfullscreen="true"></embed>
</video >
Graphics & 3d
-
SVG
- Resolution
-
Canvas Element
- Graphics created with JavaScript
-
WebGL
- http://helloracer.com/webgl/
- http://flashvhtml.com
Many, Many, More
-
File Access
-
Sockets
-
Connectivity
-
Device Access
- Geo-location, Camera/Micorphone, Contacts/Events, Orientation, Notifications, etc…
CSS3
Transitions
Animations
Transforms
Gradients
Rounded corners
Flexible Box Model
Multi-column
CSs3
Webfonts
Text wrapping
Columns
Opacity
Backgrounds
CSS selectors
Shadows
The Real World
DON'T: detect browser support
<script type="text/javascript">
if ( navigator.userAgent.indexOf("MSIE")>0 )
{
// Run custom code for Internet Explorer.
}
</script>
The real world
DO: Detect feature support
Modernizr
Modernizr (css)
<html class="js opacity cssanimations csscolumns …">
.opacity .button {
background:#000;
opacity: 0.75;
}
.no-opacity .button {
background: #444;
}
Modernizr (JavaScript)
if (Modernizr.canvas){ // Create canvas object and get drawing } else { // No canvas support. }
-------------------------
Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js‘ });
Shiv, Shim, Polyfill
-
Recognize the capabilities of your users
-
Fallback support for unsupported features
Shivs, Shims, and Polyfills are the same thing!
Resources
-
All your HTML5 needs
-
jQuery: HTML5 now!
- http://jquery.com
- Version 2 is out!
-
Need animation?
- Designers: Adobe Edge Animate
- Developers: http://greensock.com
Resources
-
Don’t forget about architecture
- TODO MVC
questions?
PM HTML5 Presentation
By Dustin Tauer
PM HTML5 Presentation
- 1,646