http://slid.es/dtauer/pmhtml5

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
http://html5test.com

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
http://codepen.io/dtauer/pen/HjFKI

Form Elements
http://codepen.io/dtauer/pen/Krfkv

Custom Data
http://codepen.io/dtauer/pen/GIJms


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

http://proofwhisky.com

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
http://modernizr.com/

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



Shivs, Shims, and Polyfills are the same thing!

Resources


Resources


questions?

Made with Slides.com