HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK
-
date post
18-Oct-2014 -
Category
Investor Relations
-
view
900 -
download
3
description
Transcript of HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK
![Page 1: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/1.jpg)
![Page 2: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/2.jpg)
HTML5THE PARTS YOU CARE ABOUT
An original presentation by / David Wesst @davidwesst
Prarie Dev Con 2013 - Saskatoon, SK
![Page 3: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/3.jpg)
DAVID WESSTFROM WINNIPEG, MANITOBA
SYSTEMS ANALYST, UNIVERSITY OF MANITOBA (FACULTY OFMEDICINE)
MICROSOFT MVP, INTERNET EXPLORER
IE USER AGENT USERAGENTS.IE
PRODUCER, BREWPUB STUDIOS
![Page 4: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/4.jpg)
DAVID WESST@DAVIDWESST ON TWITTER
DAVIDWESST.COM ON THE WEB
DAVIDWESST.COM/BLOG ON THE BLOGOSPHERE
DW [AT] DAVIDWESST.COM ON EMAIL
![Page 7: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/7.jpg)
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?
![Page 8: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/8.jpg)
THE PLANHow are we going to understand these points?
Documents EvolvedReally Defining HTML5HTML5 Hardware (i.e. The Toolbox)
![Page 9: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/9.jpg)
DEMO PREREQUISITESHTML Audio (.mp3) is supportedHTML Audio (.ogg) is supported
HTML Canvas is supportedCSS Border Radius is supported
Go Back
![Page 10: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/10.jpg)
DOCUMENTS EVOLVED
![Page 11: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/11.jpg)
DOCUMENTS EVOLVEDWHAT IS A DOCUMENT?
![Page 12: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/12.jpg)
DOCUMENTS EVOLVEDDocuments create a paper reality we call proof.
Mason Cooley
![Page 13: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/13.jpg)
DOCUMENTS EVOLVED
![Page 14: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/14.jpg)
DOCUMENTS EVOLVED
![Page 15: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/15.jpg)
DOCUMENTS EVOLVED
![Page 16: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/16.jpg)
DOCUMENTS EVOLVED...a collection of data (images, text, audio, video, etc.)...a collection of data sources (references, hyperlinking)...a product of collaboration
![Page 17: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/17.jpg)
What we did not imagine was a Web of people,but a Web of documents.
Dale Dougherty
![Page 18: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/18.jpg)
WHAT DOES HTML HAVE TO DO WITH ADOCUMENT?
HTML has always been for creating and sharing documents....our interpretation of what a document is has evolved.
![Page 19: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/19.jpg)
REALLY DEFINING HTML5
![Page 20: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/20.jpg)
REALLY DEFINING HTML5THE GOAL:
TO UPDATE THE STANDARDS FOR THE WEB TO REPRESENTHOW THE WORLD USES THE WEB TODAY.
![Page 21: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/21.jpg)
REALLY DEFINING HTML5How do you do this with plain old markup?
YOU DON'T. (WE HAVEN'T DONE THAT IN YEARS)
![Page 22: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/22.jpg)
HTML5 DEFINES FEATURES USING THREE (3)CORE TECHNOLOGIES:
HTML | for Defining DocumentsCSS | for Styling DocumentsJavaScript | for Making Documents Interactive
![Page 23: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/23.jpg)
REALLY DEFINING HTML5HTML5 features are divided into eight (8) separate groups:
SemanticsOffline & StorageDevice AccessConnectivityMultimedia3D, Graphics & EffectsPerformance & IntegrationCSS3
![Page 24: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/24.jpg)
HTML5 TOOLS &BUILDING MATERIALS
![Page 25: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/25.jpg)
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | STYLE | INTERACTION
HTML Markup | DefinitionCSS3 | StyleJavaScript | Interaction
![Page 26: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/26.jpg)
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
DEMO
![Page 27: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/27.jpg)
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
Your IDE or Editor Experience
MICROSOFT WEBMATRIXFreeProvides HTML, JavaScript, and CSS3 Auto-CompleteFocuses on Microsoft & Open Source technologies for webCommunity Extensions to add more HTML5 developmentsupport
![Page 28: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/28.jpg)
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
Your IDE or Editor Experience
ECLIPSE W/ NODECLISPE, WEB PLATFORM TOOLS, APTANAFree and Open SourceProvides strong JavaScript SupportAptana most Web FocusedCombine Favourite Plugins to build your ideal environment
![Page 29: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/29.jpg)
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
Your IDE or Editor Experience
CLOUD 9 ( )HTTP://C9.IOHosted IDEFree & Open SourceHTML5, Ruby, PHP, and NodeProvides Terminal, MySQL, and link to Github & Bitbucket
![Page 30: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/30.jpg)
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
VISUAL STUDIO 2012/2013Free-ish (Free Editions Available)Microsoft Development FocusedProvides HTML, JavaScript, and CSS3 Auto-CompleteNumber of Create Extensions to support HTML5Overhauled Web Development Editor Experience
![Page 31: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/31.jpg)
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
A FEW OTHERS...Webstorm IDENotepad++Sublime Text, Vi, Emacs
![Page 32: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/32.jpg)
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
WHAT HTML5 EDITOR DO YOU USE?
![Page 33: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/33.jpg)
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
DEMO - ECLIPSE
![Page 34: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/34.jpg)
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
TONS OF NEW ELEMENTS! (FOR STRUCTURE AND SEMANTICS)<article>
<aside>
<bdi>
<command>
<details>
<figure>
<figcaption>
<footer>
<header>
<hgroup>
<mark>
![Page 35: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/35.jpg)
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
TONS OF NEW ELEMENTS! (MEDIA)<audio>
<video>
<source>
<embed>
<track>
![Page 36: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/36.jpg)
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
TONS OF NEW ELEMENTS! (FOR DRAWING)<canvas>
![Page 37: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/37.jpg)
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
TONS OF NEW ELEMENTS! (FOR FORM)<datalist>
<keygen>
<output>
![Page 38: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/38.jpg)
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
REMOVED OLD TIMEY ELEMENTS!<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
![Page 39: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/39.jpg)
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
ALL YOU NEED IS THE NEW DOCTYPE
![Page 40: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/40.jpg)
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
DEMO: AUDIO ELEMENT
![Page 41: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/41.jpg)
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML - DEMO
AUDIO ELEMENT (PART 1) - DEFAULT AUDIO PLAYER0:35
![Page 42: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/42.jpg)
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML - DEMO
AUDIO ELEMENT (PART 2) - MULTIPLE SOURCE FILES0:35
![Page 43: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/43.jpg)
HTML5 TOOLS & BUILDING MATERIALSDEFINITION | HTML
WHAT ABOUT BACKWARDS COMPATIBILITY? (I.E. INTERNETEXPLORER)
COMING UP LATER IN THE PRESENTATION, I PROMISE!
![Page 44: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/44.jpg)
HTML5 TOOLS & BUILDING MATERIALSSTYLE | CSS3 - COMPILERS
SASS - SYNTACTICALLY AWESOME STYLESHEETShttp://sass-lang.com/Improves CSS/ syntax with extra language features
VariablesNested RulesMixins (Rules with Parameters)Selector InheritanceAvailable as Ruby Gem
![Page 45: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/45.jpg)
HTML5 TOOLS & BUILDING MATERIALSSTYLE | CSS3 - COMPILERS
LESS - DYNAMIC STYLESHEET LANGUAGEhttp://lesscss.org/Similar to SASS. Improves CSS syntax with extra languagefeatures
VariablesNested RulesMixins (Rules with parameters)Functions and OperationsJavaScript BasedClient and Server Options
![Page 46: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/46.jpg)
HTML5 TOOLS & BUILDING MATERIALSSTYLE | CSS3 - COMPILERS
OPTIONAL DEMO - LESS
![Page 47: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/47.jpg)
HTML5 TOOLS & BUILDING MATERIALSSTYLE | CSS3 - FRAMEWORKS
FRAMWORKSTwitter BootstrapSemantic UIMetro UI
![Page 48: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/48.jpg)
HTML5 TOOLS & BUILDING MATERIALSSTYLE | CSS3 - FRAMEWORKS
Semantic GridBlueprint FrameworkjQuery UI CSS Framework(http://docs.jquery.com/UI/Theming/API)YUI CSS Components
![Page 49: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/49.jpg)
HTML5 TOOLS & BUILDING MATERIALSSTYLE | CSS3
Media QueriesBorder-RadiusBackground GradientsCSS Animations and Transitions
![Page 50: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/50.jpg)
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT - LIBRARIES
MODERNIZRhttp://modernizr.com/Makes your HTML5 Fully Browser Compatible
Open Source with MIT LicenseHandles IE support just by adding the libraryCheck whether client support specific HTML5 featuresCan check in both CSS and JavaScriptAdds extra tooling for performance
![Page 51: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/51.jpg)
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT - LIBRARIES
DEMO - MODERNIZRGo to the Demo
![Page 52: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/52.jpg)
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT - LIBRARIES
There are a TON of libraries avilable thanks to the open sourcecommunity.Before you start writing your own, find out if someone else hasdone it before
GithubBitbucketCodePlexGoogle Code
![Page 53: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/53.jpg)
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT - COMPILERS
COFFEESCRIPThttp://coffeescript.org/"...a little language that compiles into JavaScript"
Cleaner more Readable CodeRuby-like SyntaxUses JavaScript LintProduces readable JavaScript CodeInstalls from NPM
![Page 54: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/54.jpg)
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT - COMPILERS
TYPESCRIPThttp://typescript.org/Microsoft's attempts at ECMASCRIPT next
ActiveOpen Source ProjectIs subset of JavaScript (i.e. JavaScript is valid TypeScript)Compiles down to JavaScript
![Page 55: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/55.jpg)
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT - TESTING
JASMINE
Behaviour Driven Development (BDD)Resembles RSpecWorks with multiple platforms (ASP.NET, NodeJS, Ruby, etc.)No external dependencies
https://github.com/pivotal/jasmine/wiki
![Page 56: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/56.jpg)
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT - TESTING
QUNIT
Unit Testing FrameworkDeveloped by jQueryNo external dependencies (not even jQuery)
http://qunitjs.com/
![Page 57: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/57.jpg)
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT - TESTING
MOCHA
BDD based frameworkResembles RSpecWorks with both client and server (NodeJS)
http://visionmedia.github.io/mocha/
![Page 58: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/58.jpg)
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT - TESTING
DEMO - BDD WITHJASMINE
![Page 59: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/59.jpg)
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT
JavaScript APIs
Media (i.e Audio and Video)Text Track (i.e. Subtitles)Web CryptoEncrypted Media Extensions (EME)Offline Web Applications / Application CacheUser InteractionHistory
![Page 60: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/60.jpg)
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT
JavaScript APIs
DEMO - MEDIA API
![Page 61: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/61.jpg)
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT
Play
Pause
Volume Up
Volume Down
![Page 62: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/62.jpg)
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT
Non-HTML5 Spec JavaScript APIs
Canvas (2D Context)Cross Channel MessagingMicrodataWeb WorkersWeb Storage / IndexedDBServer-Sent Events
![Page 63: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/63.jpg)
HTML5 TOOLS & BUILDING MATERIALSINTERACTION | JAVASCRIPT
Non-HTML5 Spec JavaScript APIs
DEMO - CANVAS API
![Page 64: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/64.jpg)
![Page 65: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/65.jpg)
A QUICK RECAP
![Page 66: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/66.jpg)
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?
![Page 67: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/67.jpg)
THE PLANHow are we going to understand these points?
Documents EvolvedReally Defining HTML5HTML5 Hardware (i.e. The Toolbox)
![Page 68: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/68.jpg)
NEXT STEPS
![Page 69: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/69.jpg)
NEXT STEPSGo to and exploreRead an HTML5 book or TutorialDownload and run an HTML5 editor (e.g. WebMatrix)Upgrade an app with Modernizr and the new DOCTYPE
Modern.IE
![Page 70: HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK](https://reader033.fdocuments.net/reader033/viewer/2022051608/544254f0b1af9f410a8b4618/html5/thumbnails/70.jpg)
DAVID WESST@DAVIDWESST ON TWITTER
DAVIDWESST.COM ON THE WEB
DAVIDWESST.COM/BLOG ON THE BLOGOSPHEREDW [AT] DAVIDWESST.COM ON EMAIL