A lot of things are being said about HTML5 ranging from bad to good to fanatical. From Apple, to Microsoft, to Adobe themselves, all of the big players have put their weight behind the standard. It is clear that HTML is here to stay, but what does that mean for today's developers? As consultants we need to determine the best use of technology today and in the future to deliver the best value to our clients. In this session Matt will give an overview of the technologies in and around what is being called HTML5 and whether they are useful today and going forward.

1. Practical
HTML5
Matt Casto
http://google.com/profiles/mattcasto

2. Practical

3. Practical
Important Factors

4. Practical
Important Factors

5. Practical
Important Factors
1. Client Platforms

6. Practical
Important Factors
1. Client Platforms

7. Practical
Important Factors
1. Client Platforms

8. Practical
Important Factors
1. Client Platforms
2. Web Browsers

9. Practical
Important Factors
1. Client Platforms
2. Web Browsers

10. Practical
Important Factors
1. Client Platforms
2. Web Browsers

11. Practical
Important Factors
1. Client Platforms
2. Web Browsers
3. Features Needed

12. Practical
Important Factors
1. Client Platforms
2. Web Browsers Offline / Storage
3. Features Needed

13. Practical
Important Factors
1. Client Platforms
2. Web Browsers Communication
3. Features Needed

14. Practical
Important Factors
1. Client Platforms
2. Web Browsers Hardware Access
3. Features Needed

15. Practical
Important Factors
1. Client Platforms
2. Web Browsers Semantics
3. Features Needed

16. Practical
Important Factors
1. Client Platforms
2. Web Browsers Multimedia
3. Features Needed

17. Practical
Important Factors
1. Client Platforms
2. Web Browsers CSS 3
3. Features Needed

18. Practical
Important Factors
1. Client Platforms
2. Web Browsers 3D Effects
3. Features Needed

19. Practical
Important Factors
1. Client Platforms
2. Web Browsers Performance
3. Features Needed

20. Practical
Important Factors
1. Client Platforms
2. Web Browsers
3. Features Needed

21. Practical
Important Factors
1. Client Platforms
2. Web Browsers
3. Features Needed
4. Coolness Factor

22. Practical
Important Factors
1. Client Platforms
2. Web Browsers
3. Features Needed
4. Coolness Factor

23. Practical
Important Factors
1. Client Platforms
2. Web Browsers
3. Features Needed
4. Coolness Factor

24. Practical
Important Factors
1. Client Platforms
2. Web Browsers
3. Features Needed
4. Coolness Factor

25. Practical
Important Factors
1. Client Platforms
2. Web Browsers
3. Features Needed
4. Coolness Factor

26. Practical

27. Practical
What is HTML5?

28. Practical
What is HTML5?

29. Practical
What is HTML5?
HTML5 ≈ + +

30. Practical
What is HTML5?
HTML5 ≈ HTML + +

31. Practical
What is HTML5?
HTML5 ≈ HTML + CSS +

32. Practical
What is HTML5?
HTML5 ≈ HTML + CSS + JS

33. Practical
What is HTML5?

34. Practical
What is HTML5?
Offline / Storage Multimedia
Communication CSS 3
Hardware Access 3D Effects
Semantics Performance

35. Practical
What is HTML5?
Offline / Storage Multimedia
Communication CSS 3
Hardware Access 3D Effects
Semantics Performance

36. Practical
Offline / Storage

37. Practical
Offline / Storage - Local Storage
// use localStorage for persistent storage
// use sessionStorage for per tab storage
window.localStorage.setItem('value', area.value);
window.sessionStorage.setItem('timestamp', (new Date()).getTime());
var val = window.localStorage.getItem('value');
window.localStorage.removeItem('value');
window.localStorage.clear();

38. Practical
Offline / Storage - Local Storage
Source: http://caniuse.com

39. Practical
Offline / Storage - Web SQL Database
var db = openDatabase('exampleDB', '1.0', 'example database', 5 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');
tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "bar")');
tx.executeSql('SELECT * FROM foo', [], function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
alert(results.rows.item(i).text);
}
});
});

40. Practical
Offline / Storage - Web SQL Database
Source: http://caniuse.com

41. Practical
Offline / Storage - IndexedDB
var trans = db.transaction(["foo"], IDBTransaction.READ_WRITE, 0);
var store = trans.objectStore("foo");
var request = store.put( {"bar": foobar} );
request.onsuccess = function(e) {
alert("Success!" + "rnrn" + e.value);
};
request.onerror = function(e) {
alert("Error! " + "rnrn" + e.value);
};

42. Practical
Offline / Storage - IndexedDB
Source: http://caniuse.com

43. Practical
Offline / Storage - onLine API
document.body.addEventListener("online", function() { checkOnLineState(); }, false);
document.body.addEventListener("offline", function() { checkOnLineState(); }, false);
checkOnLineState();
function checkOnLineState() {
if (typeof (navigator.onLine) == 'undefined') {
alert("navigator.onLine isn't defined.");
return;
}
if (navigator.onLine) {
alert("You are online.");
} else {
alert("You are online.");
}
}

44. Practical
Offline / Storage - AppCache
CACHE MANIFEST
# v0.0.8 - not required, but lets you easily invalidate cache
index.html
site.css
jquery-1.4.1.js
emoticon_smile.png
emoticon_unhappy.png
NETWORK:
noncached.html
FALLBACK:
/ offline.html

45. Practical
Offline / Storage - AppCache
<!DOCTYPE HTML>
<html manifest="cache.manifest">
<head><title>Hello AppCache</title></head>
<body>
<h1>Hello AppCache!</h1>
</body>
</html>

46. Practical
Offline / Storage - AppCache & onLine
Source: http://caniuse.com

47. Practical

48. Practical
Offline / Storage Multimedia
Communication CSS 3
Hardware Access 3D Effects
Semantics Performance

49. Practical
Communication

50. Practical
Communication - WebSocket API
var ws = new WebSocket("ws://websocket.example.com");
ws.onopen = function(e) { alert("WebSocket connection open"); };
ws.onmessage = function(e) { alert("WebSocket message received: "
+ e.data); };
ws.onclose = function(e) { alert("WebSocket connection closed"); };
ws.postMessage("Hello WebSocket");
ws.disconnect();

51. Practical
Communication - WebSocket API
Source: http://caniuse.com

52. Practical

53. Practical
Offline / Storage Multimedia
Communication CSS 3
Hardware Access 3D Effects
Semantics Performance

54. Practical
Hardware Access

55. Practical
Hardware Access - Native Drag & Drop
document.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Customized text');
event.dataTransfer.effectAllowed = 'copy';
}, false);

56. Practical
Hardware Access - Native Drag & Drop
Source: http://caniuse.com

57. Practical
Hardware Access - Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latLng = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker(
{
position: latLng,
map: map
});
map.setCenter(latLng);
}, errorHandler);
}

58. Practical
Hardware Access - Geolocation
Source: http://caniuse.com

59. Practical
Hardware Access - Device Orientation
window.addEventListener('deviceorientation', function(event) {
var a = event.alpha;
var b = event.beta;
var g = event.gamma;
}, false);

60. Practical
Hardware Access - Device Orientation
Source: http://caniuse.com

61. Practical

62. Practical
Offline / Storage Multimedia
Communication CSS 3
Hardware Access 3D Effects
Semantics Performance

63. Practical
Semantics

64. Practical
Semantics
<body>
<section> <aside>Top links...</aside>
<header>
<article> <figure>
<hgroup>
<header> <img src="..."/>
<h1>Page title</h1>
<h1>Title</h1> <figcaption>Chart 1.1</figcaption>
<h2>Page subtitle</h2>
</header> </figure>
</hgroup>
<section> <footer>
</header>
Content... Copyright ©
<nav>
</section> <time datetime="2010-11-08">
<ul>Navigation...</ul>
</article> 2010
</nav>
</section> </time>.
</footer>
</body>

65. Practical
Semantics
Source: http://caniuse.com

66. Practical
Semantics - Datalist
<input list="cars"/>
<datalist id="cars">
<option value="BMW"/>
<option value="Ford"/>
<option value="Volvo"/>
</datalist>

67. Practical
Semantics - Datalist
Source: http://caniuse.com

68. Practical
Semantics - Details / Summary
<details>
<summary>Parent</summary>
Child
</details>

69. Practical
Semantics - Details / Summary
Source: http://caniuse.com

70. Practical
Semantics - Progress & Meter
Your score is:
<meter min="0" max="100" low="40" high="90"
optimum="100" value="91">A+</meter>
Download is:
<progress>working...</progress>
Goal is:
<progress value="75" max="100">3/4 complete</progress>

71. Practical
Semantics - Progress & Meter
Source: http://caniuse.com

72. Practical
Semantics - new form elements
<input type="text" required />
<input type="email" value="some@email.com" />
<input type="date" min="2010-08-14" max="2011-08-14"
value="2010-08-14"/>
<input type="range" min="0" max="50" value="10" />
<input type="search" results="10" placeholder="Search..." />
<input type="tel" placeholder="(555) 555-5555"
pattern="^(?d{3})?[-s]d{3}[-s]d{4}.*?$" />
<input type="color" placeholder="e.g. #bbbbbb" />
<input type="number" step="1" min="-5" max="10" value="0" />

73. Practical
Semantics - new form elements
Source: http://caniuse.com

74. Practical

75. Practical
Offline / Storage Multimedia
Communication CSS 3
Hardware Access 3D Effects
Semantics Performance

76. Practical
Multimedia

77. Practical
Multimedia - Audio

78. Practical
Multimedia - Audio
Source: http://caniuse.com

79. Practical
Multimedia - Audio
Browser Ogg mp3 wav
Firefox 3.5+ ✓ ✓
Safari 5+ ✓ ✓
Chrome 6+ ✓ ✓
Opera 10.5+ ✓ ✓
IE 9 ✓ ✓

80. Practical
Multimedia - Video

81. Practical
Multimedia - Video
Source: http://caniuse.com

82. Practical
Multimedia - Video
Browser Ogg H.264 WebM
Firefox 3.5+ ✓
Firefox 4+ ✓ ✓
Safari 3+ ✓
Chrome 6+ ✓ ✓
Opera 10.5+ ✓ ✓
IE 9 ✓ ✓
iPhone Safari ✓
Android ✓ ✓

83. Practical
Multimedia - Canvas
<canvas id="canvas" width="838" height="220"></canvas>
<script>
var canvasContext = document.getElementById("canvas").getContext("2d");
canvasContext.fillRect(250, 25, 150, 100);
canvasContext.beginPath();
canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
canvasContext.lineWidth = 15;
canvasContext.lineCap = 'round';
canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
canvasContext.stroke();
</script>

84. Practical
Multimedia - Canvas
Source: http://caniuse.com

85. Practical
Multimedia - Inline SVG
<html>
<svg>
<circle id="myCircle" class="important"
cx="50%" cy="50%" r="100"
fill="url(#myGradient)"
onmousedown="alert('hello');"/>
</svg>
</html>

86. Practical
Multimedia - Inline SVG
Source: http://caniuse.com

87. Practical

88. Practical
Offline / Storage Multimedia
Communication CSS 3
Hardware Access 3D Effects
Semantics Performance

89. Practical
CSS 3

90. Practical
CSS 3 - Selectors
.row:nth-child(even) {
background: #dde;
}
.row:nth-child(odd) {
background: white;
}

91. Practical
CSS 3 - Image-like display
div {
display: inline-block;
}

92. Practical
CSS 3 - specific attributes
input[type="text"] {
background: #eee;
}

93. Practical
CSS 3 - Negation
:not(.box) {
color: #00c;
}
:not(span) {
display: block;
}

94. Practical
CSS 3 - More specific targetting
h2:first-child { ... }
div.text > div { ... }
h2 + header { ... }

95. Practical
CSS 3 - Webfonts
@font-face { <div id="fontface-sample"
font-family: 'LeagueGothic'; class="example">
src: url(LeagueGothic.otf); <span>LeagueGothic font with
} no image replacement</span>
</div>
@font-face {
font-family: 'Droid Sans';
src: url(Droid_Sans.ttf);
}
header {
font-family: 'LeagueGothic';
}

96. Practical
CSS 3 - Text overflow
div {
text-overflow: ellipsis;
}

97. Practical
CSS 3 - Rounded Corners
face: border-radius: 15px;
left eye: border-radius: 20px;
right eye: border-radius: 35px;
base white: border-radius: 5px;
mouth: border-radius: 23px;
nose: border-radius: 0px;
left black eye: border-radius: 35px;
right black eye: border-radius: 2px;

98. Practical
CSS 3
text-shadow: 5px 5px 4px #0ff;

99. Practical
CSS 3 - all features
Source: http://caniuse.com

100. Practical

101. Practical
Offline / Storage Multimedia
Communication CSS 3
Hardware Access 3D Effects
Semantics Performance

102. Practical
3D Effects

103. Practical
3D Effects - Canvas 3D
<canvas id="canvas" width="838" height="220"></canvas>
<script>
var canvas = document.getElementById("canvas")
var gl = canvas.getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
//...
</script>

104. Practical

105. Practical
Offline / Storage Multimedia
Communication CSS 3
Hardware Access 3D Effects
Semantics Performance

106. Practical
Performance

107. Practical
Performance - Web Workers
var worker = new Worker("worker.js");
}
worker.onmessage = function(e){ alert(e.data) };
worker.postMessage("Hello Worker");
page script
}
onmessage = function(e) {
if (e.data === "Hello Worker") {
postMessage("Hello World"); worker.js
}
};

108. Practical
Performance - Web Workers
Source: http://caniuse.com

109. Practical

110. Practical
Detection, Polyfills, and Shims
http://modernizr.com/
http://yepnopejs.com/
https://github.com/Modernizr/Modernizr/wiki/
HTML5-Cross-browser-Polyfills

111. Practical

112. Practical
Just remember ...

113. Practical
Just remember ...

114. Practical
Just remember ...
support your
customer.

115. Practical
Just remember ...

116. Practical
Just remember ...
don’t be a hipster

117. Practical
Please thank our sponsors!

118. Practical
Resources:
http://www.w3.org/html5
http://www.html5rocks.com/
http://slides.html5rocks.com
http://diveintohtml5.org
http://caniuse.com