Presented at Prairie Dev Con 2013 in Saskatoon, SK.

2. HTML5
THE PARTS YOU CARE ABOUT
An original presentation by David Wesst / @davidwesst
Prarie Dev Con 2013 - Saskatoon, SK

3. DAVID WESST
FROM WINNIPEG, MANITOBA
SYSTEMS ANALYST, UNIVERSITY OF MANITOBA (FACULTY OF
MEDICINE)
MICROSOFT MVP, INTERNET EXPLORER
IE USER AGENT USERAGENTS.IE
PRODUCER, BREWPUB STUDIOS

4. DAVID WESST
@DAVIDWESST ON TWITTER
DAVIDWESST.COM ON THE WEB
DAVIDWESST.COM/BLOG ON THE BLOGOSPHERE
DW [AT] DAVIDWESST.COM ON EMAIL

5. FOLLOW ALONG
HTTP://D.WES.ST/DW-SLIDES

6. SLIDES AND DEMOS
AVAILABLE AFTERWARDS
HTTP://D.WES.ST/DW-PRESENTS

7. THE POINT...
To answer one of these questions:
What is HTML5 for?
What makes up HTML5?
What HTML5 tools are out there for me to use?
Does HTML5 even matter to you?

8. THE PLAN
How are we going to understand these points?
Documents Evolved
Really Defining HTML5
HTML5 Hardware (i.e. The Toolbox)

9. DEMO PREREQUISITES
HTML Audio (.mp3) is supported
HTML Audio (.ogg) is supported
HTML Canvas is supported
CSS Border Radius is supported
Go Back

10. DOCUMENTS EVOLVED

11. DOCUMENTS EVOLVED
WHAT IS A DOCUMENT?

12. DOCUMENTS EVOLVED
Documents create a paper reality we call proof.
Mason Cooley

13. DOCUMENTS EVOLVED

14. DOCUMENTS EVOLVED

15. DOCUMENTS EVOLVED

16. DOCUMENTS EVOLVED
...a collection of data (images, text, audio, video, etc.)
...a collection of data sources (references, hyperlinking)
...a product of collaboration

17. What we did not imagine was a Web of people,
but a Web of documents.
Dale Dougherty

18. WHAT DOES HTML HAVE TO DO WITH A
DOCUMENT?
HTML has always been for creating and sharing documents.
...our interpretation of what a document is has evolved.

19. REALLY DEFINING HTML5

20. REALLY DEFINING HTML5
THE GOAL:
TO UPDATE THE STANDARDS FOR THE WEB TO REPRESENT
HOW THE WORLD USES THE WEB TODAY.

21. REALLY DEFINING HTML5
How do you do this with plain old markup?
YOU DON'T. (WE HAVEN'T DONE THAT IN YEARS)

22. HTML5 DEFINES FEATURES USING THREE (3)
CORE TECHNOLOGIES:
HTML | for Defining Documents
CSS | for Styling Documents
JavaScript | for Making Documents Interactive

23. REALLY DEFINING HTML5
HTML5 features are divided into eight (8) separate groups:
Semantics
Offline & Storage
Device Access
Connectivity
Multimedia
3D, Graphics & Effects
Performance & Integration
CSS3

24. HTML5 TOOLS &
BUILDING MATERIALS

25. HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | STYLE | INTERACTION
HTML Markup | Definition
CSS3 | Style
JavaScript | Interaction

26. HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML
DEMO

27. HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML
Your IDE or Editor Experience
MICROSOFT WEBMATRIX
Free
Provides HTML, JavaScript, and CSS3 Auto-Complete
Focuses on Microsoft & Open Source technologies for web
Community Extensions to add more HTML5 development
support

28. HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML
Your IDE or Editor Experience
ECLIPSE W/ NODECLISPE, WEB PLATFORM TOOLS, APTANA
Free and Open Source
Provides strong JavaScript Support
Aptana most Web Focused
Combine Favourite Plugins to build your ideal environment

29. HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML
Your IDE or Editor Experience
CLOUD 9 (HTTP://C9.IO)
Hosted IDE
Free & Open Source
HTML5, Ruby, PHP, and Node
Provides Terminal, MySQL, and link to Github & Bitbucket

30. HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML
VISUAL STUDIO 2012/2013
Free-ish (Free Editions Available)
Microsoft Development Focused
Provides HTML, JavaScript, and CSS3 Auto-Complete
Number of Create Extensions to support HTML5
Overhauled Web Development Editor Experience

31. HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML
A FEW OTHERS...
Webstorm IDE
Notepad++
Sublime Text, Vi, Emacs

32. HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML
WHAT HTML5 EDITOR DO YOU USE?

33. HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML
DEMO - ECLIPSE

34. HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML
TONS OF NEW ELEMENTS! (FOR STRUCTURE AND SEMANTICS)
<article>
<aside>
<bdi>
<command>
<details>
<figure>
<figcaption>
<footer>
<header>
<hgroup>
<mark>

35. HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML
TONS OF NEW ELEMENTS! (MEDIA)
<audio>
<video>
<source>
<embed>
<track>

36. HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML
TONS OF NEW ELEMENTS! (FOR DRAWING)
<canvas>

37. HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML
TONS OF NEW ELEMENTS! (FOR FORM)
<datalist>
<keygen>
<output>

38. HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML
REMOVED OLD TIMEY ELEMENTS!
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>

39. HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML
ALL YOU NEED IS THE NEW DOCTYPE

40. HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML
DEMO: AUDIO ELEMENT

41. HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML - DEMO
AUDIO ELEMENT (PART 1) - DEFAULT AUDIO PLAYER
0:35

42. HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML - DEMO
AUDIO ELEMENT (PART 2) - MULTIPLE SOURCE FILES
0:35

43. HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML
WHAT ABOUT BACKWARDS COMPATIBILITY? (I.E. INTERNET
EXPLORER)
COMING UP LATER IN THE PRESENTATION, I PROMISE!

44. HTML5 TOOLS & BUILDING MATERIALS
STYLE | CSS3 - COMPILERS
SASS - SYNTACTICALLY AWESOME STYLESHEETS
http://sass-lang.com/
Improves CSS/ syntax with extra language features
Variables
Nested Rules
Mixins (Rules with Parameters)
Selector Inheritance
Available as Ruby Gem

45. HTML5 TOOLS & BUILDING MATERIALS
STYLE | CSS3 - COMPILERS
LESS - DYNAMIC STYLESHEET LANGUAGE
http://lesscss.org/
Similar to SASS. Improves CSS syntax with extra language
features
Variables
Nested Rules
Mixins (Rules with parameters)
Functions and Operations
JavaScript Based
Client and Server Options

46. HTML5 TOOLS & BUILDING MATERIALS
STYLE | CSS3 - COMPILERS
OPTIONAL DEMO - LESS

47. HTML5 TOOLS & BUILDING MATERIALS
STYLE | CSS3 - FRAMEWORKS
FRAMWORKS
Twitter Bootstrap
Semantic UI
Metro UI

48. HTML5 TOOLS & BUILDING MATERIALS
STYLE | CSS3 - FRAMEWORKS
Semantic Grid
Blueprint Framework
jQuery UI CSS Framework
(http://docs.jquery.com/UI/Theming/API)
YUI CSS Components

49. HTML5 TOOLS & BUILDING MATERIALS
STYLE | CSS3
Media Queries
Border-Radius
Background Gradients
CSS Animations and Transitions

50. HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT - LIBRARIES
MODERNIZR
http://modernizr.com/
Makes your HTML5 Fully Browser Compatible
Open Source with MIT License
Handles IE support just by adding the library
Check whether client support specific HTML5 features
Can check in both CSS and JavaScript
Adds extra tooling for performance

51. HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT - LIBRARIES
DEMO - MODERNIZR
Go to the Demo

52. HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT - LIBRARIES
There are a TON of libraries avilable thanks to the open source
community.
Before you start writing your own, find out if someone else has
done it before
Github
Bitbucket
CodePlex
Google Code

53. HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT - COMPILERS
COFFEESCRIPT
http://coffeescript.org/
"...a little language that compiles into JavaScript"
Cleaner more Readable Code
Ruby-like Syntax
Uses JavaScript Lint
Produces readable JavaScript Code
Installs from NPM

54. HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT - COMPILERS
TYPESCRIPT
http://typescript.org/
Microsoft's attempts at ECMASCRIPT next
ActiveOpen Source Project
Is subset of JavaScript (i.e. JavaScript is valid TypeScript)
Compiles down to JavaScript

55. HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT - TESTING
JASMINE
https://github.com/pivotal/jasmine/wiki
Behaviour Driven Development (BDD)
Resembles RSpec
Works with multiple platforms (ASP.NET, NodeJS, Ruby, etc.)
No external dependencies

56. HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT - TESTING
QUNIT
http://qunitjs.com/
Unit Testing Framework
Developed by jQuery
No external dependencies (not even jQuery)

57. HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT - TESTING
MOCHA
http://visionmedia.github.io/mocha/
BDD based framework
Resembles RSpec
Works with both client and server (NodeJS)

58. HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT - TESTING
DEMO - BDD WITH
JASMINE

59. HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT
JavaScript APIs
Media (i.e Audio and Video)
Text Track (i.e. Subtitles)
Web Crypto
Encrypted Media Extensions (EME)
Offline Web Applications / Application Cache
User Interaction
History

60. HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT
JavaScript APIs
DEMO - MEDIA API

61. HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT
Play
Pause
Volume Up
Volume Down

62. HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT
Non-HTML5 Spec JavaScript APIs
Canvas (2D Context)
Cross Channel Messaging
Microdata
Web Workers
Web Storage / IndexedDB
Server-Sent Events

63. HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT
Non-HTML5 Spec JavaScript APIs
DEMO - CANVAS API

65. A QUICK RECAP

66. THE POINT...
To answer one of these questions:
What is HTML5 for?
What makes up HTML5?
What HTML5 tools are out there for me to use?
Does HTML5 even matter to you?

67. THE PLAN
How are we going to understand these points?
Documents Evolved
Really Defining HTML5
HTML5 Hardware (i.e. The Toolbox)

68. NEXT STEPS

69. NEXT STEPS
Go to Modern.IE and explore
Read an HTML5 book or Tutorial
Download and run an HTML5 editor (e.g. WebMatrix)
Upgrade an app with Modernizr and the new DOCTYPE

70. DAVID WESST
@DAVIDWESST ON TWITTER
DAVIDWESST.COM ON THE WEB
DAVIDWESST.COM/BLOG ON THE BLOGOSPHERE
DW [AT] DAVIDWESST.COM ON EMAIL