Microsoft TechDays 2011's DEV302 Presentation, Application Development with HTML5. This was presented in Fall 2011 in Vancouver, Montreal, and Toronto for the Microsoft TechDays 2011 conference.

1. Application Development
with HTML5
Chris Ching and Nathaniel Bagnell
Interactive Developers
Digiflare

2. a bit about us
 www.digiflare.com
 chris.ching@digiflare.com
 nathaniel.bagnell@digiflare.com
 Web and mobile developers
 HTML5 usergroup (http://bit.ly/ncOoEh)
 Toronto, ON

3. agenda
 Defining HTML5
 Utilizing HTML5 Technologies
 Spicing It Up With CSS3
 Make Your Life Easier With Tools
 HTML5 and Beyond
 Getting Started

4. Defining HTML5

5. defining HTML5
 What do people think when they hear “HTML5”?
 A set of specifications
 A goal toward a more open web
 What is an “HTML5” application?

6. HTML5 applications

7. HTML5 technology areas
Performance Semantics Styling Multimedia
3D Effects Offline & Connectivity Device Access
Storage

8. CSS3
 Border Radius
 Custom Fonts
 Box Shadow
 Multiple Backgrounds
 Selectors
 Media Queries
 & More…

9. JavaScript APIs
 Canvas
 Video & Audio
 Drag & Drop
 Geolocation
 Local Storage
 Offline Apps
 …& more

10. Utilizing HTML5 Technologies

11. HTML5 technologies
 Semantic elements
 Canvas
 Geolocation
 Local Storage
 Video & audio

12. semantic elements
 More descriptive markup
 Allows programs to extract data
 Header
 Article
 Time
 Nav
 Footer
 … & more

13. demo
Semantic Markup

14. canvas
 A drawable surface to render
graphs, images, shapes dynamically via
JavaScript
 Paths
 fillRect
 fillText
 createLinearGradient
 drawImage

15. canvas
<canvas id=‚canvasArea‛ height=‚300‛ width=‚400‛>
</canvas>
var context = document.getElementById("canvasArea").getContext("2d");
context.beginPath();
context.moveTo(width/2, 0);
context.lineTo(width, height);
context.lineTo(0, height);
context.closePath();
context.fillStyle = "#ffc821";
context.fill();

16. SVG
<svg xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0
512 512'>
<path fill='#E34F26' d='M71,460 L30,0 481,0 440,460 255,512'/>
<path fill='#EF652A' d='M256,472 L405,431 440,37 256,37'/>
<path fill='#EBEBEB' d='M256,208 L181,208 176,150 256,150 256,94
114,94 129,265 256,265zM256,355 L192,338 188,293 132,293 139,382
256,414z'/>
<path fill='#FFF' d='M255,208 L255,265 325,265 318,338 255,355 255,414
371,382 387,208zM255,94 L255,150 392,150 397,94z'/>
</svg>

17. demo
Canvas & SVG

18. geolocation
 The user’s location is available via JavaScript API
 Geolocation is opt-in
 The browser asks for permission

19. geolocation
navigator.geolocation.getCurrentPosition(located);
function located(position) {
var latitude = position.coords.latitude;
var longitue = position.coords.longitude;
}

20. demo
Geolocation

21. local storage
 Key/Value store
 Up to 5mb
 No expiration
 Store string data
 Offline support for applications

22. local storage
window.localStorage.setItem(‘name’, ‘value’);
window.localStorage.name = ‘value’;
var name = window.localStorage.getItem(‘name’);
var name = window.localStorage.name;
window.localStorage.removeItem(‘name’);

23. demo
Local Storage

24. video & audio
<video width=‚320‛ height=‚280‛ controls>
<source src=‚video.webm‛ type=‘video/webm; codecs=‚vp8,
vorbis‛’/>
<source src=‚video.ogv‛ type=‘video/ogg; codecs=‚theora,
vorbis‛’/>
<source src=‚video.mp4‛ />
</video>

25. demo
Video & Audio

26. Spicing It Up With CSS3

27. quick CSS primer
 CSS stands for
Cascading Style Sheets
 CSS is used to apply
styling to mark-up
elements
 With presentation
separate from
content, the pages
become more flexible

28. CSS specification stages
 The CSS specification goes through Recommendation
“stages” from the W3C.
(REC)
 CSS3 module’s stages varies significantly
 Only three modules have reached
recommendation status: Selectors Level
3, Colour, and Namespaces.
 Progress is relatively quick; a little over a
year ago there was no modules at the
Recommendation stage; only Selectors Working Draft
Level 3 was a Proposed
Recommendation (WD)

29. CSS milestones
 CSS1 became a W3C
Recommendation in
December 1996
 In the year 2000, Internet
Explorer 5.0 for Mac was
the first browser to fully
support the CSS1
specification
 CSS has been gradually
building on top of each
previous version, CSS3 is no
different

30. where CSS is now: CSS3
 CSS3 builds on top of CSS 2.1
 CSS3 brings forth a lot of exciting new
features, in a different approach than
previous iterations
 CSS3 and CSS moving forward, is
organized into modules
 Updates to the CSS specification will
actually be updates to the respective
module being updated

31. why CSS modules? CSS Specification
 CSS3 is being released in Module
modules, instead of one giant release Module
Module
 W3C can bring modules up to the
Recommendation Level (REC) at
different times, based on their priority Low Medium High
Priority Priority Priority
 Priority is determined by feedback and
real-world implementation of
WD, CR, and PR specifications Module X Already Supported
 Browser developers can implement Browser
Rendering
CSS3 piece by piece, this helps speed Engine
up the overall adoption process Module Z Support Module Y Support
Later Soon

32. what CSS modules exist?
 There are many modules in the CSS
specification.
 As of October 2011, there are 52 modules
 Each module is specific to it’s purpose
 i.e. the “Fonts” module will contain all font-
related functionality
 Some modules come from entirely new
functionality, while others come from
previous features
 i.e. the “Animations” module is all new, but
the “Text” module contains both previous
and new functionality related to text

33. implementing CSS3 today
 Build your site with the bare minimums first
 All required functionality should be there
 Required structural and core visual elements implemented
 Add on additional value afterward with Progressive Enhancement
 Alternatively, you can do it in reverse with graceful degradation
 Using either method, have these value-add features subtly
appear/disappear if the user agent does/does not support them
 If your project requires the functionality regardless of native user agent
support, implement fallbacks that either substitute or imitate the desired
functionality

34. implementing CSS3 today
 Browser Fallbacks
 Implement required functionality natively first
 Provide fallbacks to browsers that do not support the functionality natively
 Fallbacks can be done with
 JavaScript alternatives (e.g. jQuery plug-ins that replicate features)
 Proprietary functionality (e.g. IE’s “Filter”)
 Pseudo effects (i.e. extra markup, images, etc.)
 The need for a fallback can be determined by
 Tools like modernizr to determine native support
 General knowledge of what is/is not supported by your target browsers

35. quick jQuery primer
 We will use jQuery and several jQuery plug-ins to replicate CSS3 features
that may not be supported in some of your target browsers
 jQuery is a JavaScript library that allows you to quickly develop JavaScript
solutions
 It has great cross browser support including IE6+, FF2+, Safari 3+, and
Opera 9+. So, let’s dive into some demos!

36. demo
Spicing It Up With CSS3

37. Making Your Life Easier With
Tools

38. tools
 HTML5test.com
 HTML5 Boilerplate
 HTML5 Animations Tools
 CSS3 Generators
 Visual Studio, Expression
 Adobe Tools
 Modernizr
 … increasingly more support for HTML5 in existing
toolsets

39. HTML5 and Beyond

40. future of HTML5
 With each new browser release, support for the
HTML5 specification is growing
 A work in progress:
First Published Candidate
Working Draft Last Call Recommendation
Working Draft Recommendation

41. prototyping emerging standards

42. multi-platform/screen support
• Increasing support for JavaScript and HTML5 as a
multi-platform technology
• Develop rich applications for
Mobile, Tablet, Desktop screens with frameworks
• Sencha Touch
• jQuery
• Windows 8

43. Getting Started

44. next steps
• Implement some of the features we talked about
today on your own
• Continue learning more about HTML5 and then
expand your knowledge on JavaScript and jQuery
• Identify opportunities around you to utilize
HTML5 technologies

45. resources
• Diveintohtml5.org
• Initializr.com
• Css3please.com
• Modernizr.com
• Html5labs.com
• chris.ching@digiflare.com and
nathaniel.bagnell@digiflare.com
• Twitter: nathaniel401, chriswching

46. related sessions
Breakouts
• 26th October, DEV334 - HTML5 and CSS3
Techniques You Can Use Today, 10:30am
• 26th October, WIN312 - Digging into an HTML5
Line of Business Start Kit, 2:45pm
All sessions will be available online after the tour

47. Remember To Complete Your Evaluations!
You could WIN a Samsung Focus
Windows Phone 7!
Let us know what you liked & disliked!
Remember, 1=Bad, 5=Good 
Please provide comments!
No purchase necessary. The contest is open to residents of Canada (excluding government employees). The Toronto Tech·Days evaluation form contest begins on October 25th, 2011 and
ends on October 26th, 2011. The Vancouver Tech·Days evaluation form contest begins on November 15th, 2011 and ends on November 16th, 2011. The Montreal Tech·Days evaluation
form contest begins on November 29th, 2011 and ends on November 30th, 2011. Participants can enter the contest in one of two ways: (1) complete and submit an evaluation form by the
contest close date; or (2) provide contact information by the contest close date. The draw for Toronto will take place on October 31st, 2011. The draw for Vancouver will take place on
November 21st, 2011. The draw for Montreal will take place on December 5th, 2011. The chances of being selected depend upon the number of eligible entries. Selected participants will be
contacted by phone and/or e-mail and will be required to answer correctly a time-limited skill-testing question. There are three (3) prizes available to be won. One (1) prize will be given away
for each Tech·Days event in Toronto (October 25-26 2011), Vancouver (November 15-16 2011) and Montreal (November 29-30 2011). The prize consists of a Samsung Focus Windows
Phone 7 (handset only; voice and/or data plan not included) (approximate retail value of $499 CAD). The prize will be delivered to the shipping address designated by the winner within 6-8
weeks. The winner may be required to sign a declaration and release form. For full contest rules, please see a Microsoft Tech·Days representative.
You can email any additional comments directly to
td_can@microsoft.com at any time.

48. Q&A

49. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should
not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.