0
HTML5

THE PARTS YOU CARE ABOUT
An original presentation by David Wesst / @davidwesst

Prarie Dev Con 2013 - Saskatoon, SK
DAVID WESST

FROM WINNIPEG, MANITOBA
SYSTEMS ANALYST, UNIVERSITY OF MANITOBA (FACULTY OF
MEDICINE)
MICROSOFT MVP, INTERNET...
DAVID WESST

@DAVIDWESST ON TWITTER
DAVIDWESST.COM ON THE WEB
DAVIDWESST.COM/BLOG ON THE BLOGOSPHERE
DW [AT] DAVIDWESST.CO...
FOLLOW ALONG

HTTP://D.WES.ST/DW-SLIDES
SLIDES AND DEMOS
AVAILABLE AFTERWARDS
HTTP://D.WES.ST/DW-PRESENTS
THE POINT...
To answer one of these questions:
What is HTML5 for?
What makes up HTML5?
What HTML5 tools are out there for ...
THE PLAN
How are we going to understand these points?
Documents Evolved
Really Defining HTML5
HTML5 Hardware (i.e. The Too...
DEMO PREREQUISITES
HTML Audio (.mp3) is supported
HTML Audio (.ogg) is supported
HTML Canvas is supported
CSS Border Radiu...
DOCUMENTS EVOLVED
DOCUMENTS EVOLVED
WHAT IS A DOCUMENT?
DOCUMENTS EVOLVED
Documents create a paper reality we call proof.
Mason Cooley
DOCUMENTS EVOLVED
DOCUMENTS EVOLVED
DOCUMENTS EVOLVED
DOCUMENTS EVOLVED
...a collection of data (images, text, audio, video, etc.)
...a collection of data sources (references, ...
What we did not imagine was a Web of people,
but a Web of documents.
Dale Dougherty
WHAT DOES HTML HAVE TO DO WITH A
DOCUMENT?
HTML has always been for creating and sharing documents.
...our interpretation ...
REALLY DEFINING HTML5
REALLY DEFINING HTML5

THE GOAL:
TO UPDATE THE STANDARDS FOR THE WEB TO REPRESENT
HOW THE WORLD USES THE WEB TODAY.
REALLY DEFINING HTML5
How do you do this with plain old markup?

YOU DON'T. (WE HAVEN'T DONE THAT IN YEARS)
HTML5 DEFINES FEATURES USING THREE (3)
CORE TECHNOLOGIES:
HTML | for Defining Documents
CSS | for Styling Documents
JavaSc...
REALLY DEFINING HTML5
HTML5 features are divided into eight (8) separate groups:
Semantics
Offline & Storage
Device Access...
HTML5 TOOLS &
BUILDING MATERIALS
HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | STYLE | INTERACTION
HTML Markup | Definition
CSS3 | Style
JavaScript | Inter...
HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML

DEMO
HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML
Your IDE or Editor Experience

MICROSOFT WEBMATRIX
Free
Provides HTML, ...
HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML
Your IDE or Editor Experience

ECLIPSE W/ NODECLISPE, WEB PLATFORM TOOL...
HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML
Your IDE or Editor Experience

CLOUD 9 (HTTP://C9.IO)
Hosted IDE
Free &...
HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML

VISUAL STUDIO 2012/2013
Free-ish (Free Editions Available)
Microsoft D...
HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML

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

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

DEMO - ECLIPSE
HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML

TONS OF NEW ELEMENTS! (FOR STRUCTURE AND SEMANTICS)
<article>
<aside>
...
HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML

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

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

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

REMOVED OLD TIMEY ELEMENTS!
<acronym>
<applet>
<basefont>
<big>
<cente...
HTML5 TOOLS & BUILDING MATERIALS
DEFINITION | HTML

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

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

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

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

WHAT ABOUT BACKWARDS COMPATIBILITY? (I.E. INTERNET
EXPLORER)
COMING UP...
HTML5 TOOLS & BUILDING MATERIALS
STYLE | CSS3 - COMPILERS

SASS - SYNTACTICALLY AWESOME STYLESHEETS
http://sass-lang.com/
...
HTML5 TOOLS & BUILDING MATERIALS
STYLE | CSS3 - COMPILERS

LESS - DYNAMIC STYLESHEET LANGUAGE
http://lesscss.org/
Similar ...
HTML5 TOOLS & BUILDING MATERIALS
STYLE | CSS3 - COMPILERS

OPTIONAL DEMO - LESS
HTML5 TOOLS & BUILDING MATERIALS
STYLE | CSS3 - FRAMEWORKS

FRAMWORKS
Twitter Bootstrap
Semantic UI
Metro UI
HTML5 TOOLS & BUILDING MATERIALS
STYLE | CSS3 - FRAMEWORKS
Semantic Grid
Blueprint Framework
jQuery UI CSS Framework
(http...
HTML5 TOOLS & BUILDING MATERIALS
STYLE | CSS3
Media Queries
Border-Radius
Background Gradients
CSS Animations and Transiti...
HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT - LIBRARIES

MODERNIZR
http://modernizr.com/
Makes your HTML5 Fu...
HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT - LIBRARIES

DEMO - MODERNIZR
Go to the Demo
HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT - LIBRARIES
There are a TON of libraries avilable thanks to the ...
HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT - COMPILERS

COFFEESCRIPT
http://coffeescript.org/
"...a little ...
HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT - COMPILERS

TYPESCRIPT
http://typescript.org/
Microsoft's attem...
HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT - TESTING

JASMINE
https://github.com/pivotal/jasmine/wiki
Behav...
HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT - TESTING

QUNIT
http://qunitjs.com/
Unit Testing Framework
Deve...
HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT - TESTING

MOCHA
http://visionmedia.github.io/mocha/
BDD based f...
HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT - TESTING

DEMO - BDD WITH
JASMINE
HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT
JavaScript APIs
Media (i.e Audio and Video)
Text Track (i.e. Sub...
HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT
JavaScript APIs

DEMO - MEDIA API
HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT
Play
Pause
Volume Up
Volume Down
HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT
Non-HTML5 Spec JavaScript APIs
Canvas (2D Context)
Cross Channel...
HTML5 TOOLS & BUILDING MATERIALS
INTERACTION | JAVASCRIPT
Non-HTML5 Spec JavaScript APIs

DEMO - CANVAS API
A QUICK RECAP
THE POINT...
To answer one of these questions:
What is HTML5 for?
What makes up HTML5?
What HTML5 tools are out there for ...
THE PLAN
How are we going to understand these points?
Documents Evolved
Really Defining HTML5
HTML5 Hardware (i.e. The Too...
NEXT STEPS
NEXT STEPS
Go to Modern.IE and explore
Read an HTML5 book or Tutorial
Download and run an HTML5 editor (e.g. WebMatrix)
Up...
DAVID WESST

@DAVIDWESST ON TWITTER
DAVIDWESST.COM ON THE WEB
DAVIDWESST.COM/BLOG ON THE BLOGOSPHERE
DW [AT] DAVIDWESST.CO...
HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK
HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK
Upcoming SlideShare
Loading in...5
×

HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK

706

Published on

Presented at Prairie Dev Con 2013 in Saskatoon, SK.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
706
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK"

  1. 1. HTML5 THE PARTS YOU CARE ABOUT An original presentation by David Wesst / @davidwesst Prarie Dev Con 2013 - Saskatoon, SK
  2. 2. 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
  3. 3. DAVID WESST @DAVIDWESST ON TWITTER DAVIDWESST.COM ON THE WEB DAVIDWESST.COM/BLOG ON THE BLOGOSPHERE DW [AT] DAVIDWESST.COM ON EMAIL
  4. 4. FOLLOW ALONG HTTP://D.WES.ST/DW-SLIDES
  5. 5. SLIDES AND DEMOS AVAILABLE AFTERWARDS HTTP://D.WES.ST/DW-PRESENTS
  6. 6. 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?
  7. 7. THE PLAN How are we going to understand these points? Documents Evolved Really Defining HTML5 HTML5 Hardware (i.e. The Toolbox)
  8. 8. DEMO PREREQUISITES HTML Audio (.mp3) is supported HTML Audio (.ogg) is supported HTML Canvas is supported CSS Border Radius is supported Go Back
  9. 9. DOCUMENTS EVOLVED
  10. 10. DOCUMENTS EVOLVED WHAT IS A DOCUMENT?
  11. 11. DOCUMENTS EVOLVED Documents create a paper reality we call proof. Mason Cooley
  12. 12. DOCUMENTS EVOLVED
  13. 13. DOCUMENTS EVOLVED
  14. 14. DOCUMENTS EVOLVED
  15. 15. DOCUMENTS EVOLVED ...a collection of data (images, text, audio, video, etc.) ...a collection of data sources (references, hyperlinking) ...a product of collaboration
  16. 16. What we did not imagine was a Web of people, but a Web of documents. Dale Dougherty
  17. 17. 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.
  18. 18. REALLY DEFINING HTML5
  19. 19. REALLY DEFINING HTML5 THE GOAL: TO UPDATE THE STANDARDS FOR THE WEB TO REPRESENT HOW THE WORLD USES THE WEB TODAY.
  20. 20. REALLY DEFINING HTML5 How do you do this with plain old markup? YOU DON'T. (WE HAVEN'T DONE THAT IN YEARS)
  21. 21. HTML5 DEFINES FEATURES USING THREE (3) CORE TECHNOLOGIES: HTML | for Defining Documents CSS | for Styling Documents JavaScript | for Making Documents Interactive
  22. 22. 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
  23. 23. HTML5 TOOLS & BUILDING MATERIALS
  24. 24. HTML5 TOOLS & BUILDING MATERIALS DEFINITION | STYLE | INTERACTION HTML Markup | Definition CSS3 | Style JavaScript | Interaction
  25. 25. HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML DEMO
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML A FEW OTHERS... Webstorm IDE Notepad++ Sublime Text, Vi, Emacs
  31. 31. HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML WHAT HTML5 EDITOR DO YOU USE?
  32. 32. HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML DEMO - ECLIPSE
  33. 33. 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>
  34. 34. HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML TONS OF NEW ELEMENTS! (MEDIA) <audio> <video> <source> <embed> <track>
  35. 35. HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML TONS OF NEW ELEMENTS! (FOR DRAWING) <canvas>
  36. 36. HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML TONS OF NEW ELEMENTS! (FOR FORM) <datalist> <keygen> <output>
  37. 37. HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML REMOVED OLD TIMEY ELEMENTS! <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike>
  38. 38. HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML ALL YOU NEED IS THE NEW DOCTYPE
  39. 39. HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML DEMO: AUDIO ELEMENT
  40. 40. HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML - DEMO AUDIO ELEMENT (PART 1) - DEFAULT AUDIO PLAYER 0:35
  41. 41. HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML - DEMO AUDIO ELEMENT (PART 2) - MULTIPLE SOURCE FILES 0:35
  42. 42. HTML5 TOOLS & BUILDING MATERIALS DEFINITION | HTML WHAT ABOUT BACKWARDS COMPATIBILITY? (I.E. INTERNET EXPLORER) COMING UP LATER IN THE PRESENTATION, I PROMISE!
  43. 43. 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
  44. 44. 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
  45. 45. HTML5 TOOLS & BUILDING MATERIALS STYLE | CSS3 - COMPILERS OPTIONAL DEMO - LESS
  46. 46. HTML5 TOOLS & BUILDING MATERIALS STYLE | CSS3 - FRAMEWORKS FRAMWORKS Twitter Bootstrap Semantic UI Metro UI
  47. 47. 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
  48. 48. HTML5 TOOLS & BUILDING MATERIALS STYLE | CSS3 Media Queries Border-Radius Background Gradients CSS Animations and Transitions
  49. 49. 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
  50. 50. HTML5 TOOLS & BUILDING MATERIALS INTERACTION | JAVASCRIPT - LIBRARIES DEMO - MODERNIZR Go to the Demo
  51. 51. 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
  52. 52. 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
  53. 53. 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
  54. 54. 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
  55. 55. HTML5 TOOLS & BUILDING MATERIALS INTERACTION | JAVASCRIPT - TESTING QUNIT http://qunitjs.com/ Unit Testing Framework Developed by jQuery No external dependencies (not even jQuery)
  56. 56. 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)
  57. 57. HTML5 TOOLS & BUILDING MATERIALS INTERACTION | JAVASCRIPT - TESTING DEMO - BDD WITH JASMINE
  58. 58. 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
  59. 59. HTML5 TOOLS & BUILDING MATERIALS INTERACTION | JAVASCRIPT JavaScript APIs DEMO - MEDIA API
  60. 60. HTML5 TOOLS & BUILDING MATERIALS INTERACTION | JAVASCRIPT Play Pause Volume Up Volume Down
  61. 61. 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
  62. 62. HTML5 TOOLS & BUILDING MATERIALS INTERACTION | JAVASCRIPT Non-HTML5 Spec JavaScript APIs DEMO - CANVAS API
  63. 63. A QUICK RECAP
  64. 64. 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?
  65. 65. THE PLAN How are we going to understand these points? Documents Evolved Really Defining HTML5 HTML5 Hardware (i.e. The Toolbox)
  66. 66. NEXT STEPS
  67. 67. 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
  68. 68. DAVID WESST @DAVIDWESST ON TWITTER DAVIDWESST.COM ON THE WEB DAVIDWESST.COM/BLOG ON THE BLOGOSPHERE DW [AT] DAVIDWESST.COM ON EMAIL
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×