Application Developmentwith HTML5Chris Ching and Nathaniel BagnellInteractive DevelopersDigiflare
a bit about us   www.digiflare.com   chris.ching@digiflare.com   nathaniel.bagnell@digiflare.com   Web and mobile deve...
agenda   Defining HTML5   Utilizing HTML5 Technologies   Spicing It Up With CSS3   Make Your Life Easier With Tools  ...
Defining HTML5
defining HTML5   What do people think when they hear “HTML5”?   A set of specifications   A goal toward a more open web...
HTML5 applications
HTML5 technology areas Performance   Semantics       Styling      Multimedia  3D Effects    Offline &   Connectivity   Dev...
CSS3   Border Radius   Custom Fonts   Box Shadow   Multiple Backgrounds   Selectors   Media Queries   & More…
JavaScript APIs   Canvas   Video & Audio   Drag & Drop   Geolocation   Local Storage   Offline Apps   …& more
Utilizing HTML5 Technologies
HTML5 technologies   Semantic elements   Canvas   Geolocation   Local Storage   Video & audio
semantic elements   More descriptive markup   Allows programs to extract data   Header   Article   Time   Nav   Foo...
demoSemantic Markup
canvas   A drawable surface to render    graphs, images, shapes dynamically via    JavaScript   Paths   fillRect   fil...
canvas<canvas id=‚canvasArea‛ height=‚300‛ width=‚400‛></canvas>var context = document.getElementById("canvasArea").getCon...
SVG<svg xmlns=http://www.w3.org/2000/svgxmlns:xlink=http://www.w3.org/1999/xlink version=1.1 viewBox=0 0512 512><path fill...
demoCanvas & SVG
geolocation   The user’s location is available via JavaScript API   Geolocation is opt-in   The browser asks for permis...
geolocationnavigator.geolocation.getCurrentPosition(located);function located(position) {      var latitude = position.coo...
demoGeolocation
local storage   Key/Value store   Up to 5mb   No expiration   Store string data   Offline support for applications
local storagewindow.localStorage.setItem(‘name’, ‘value’);window.localStorage.name = ‘value’;var name = window.localStorag...
demoLocal Storage
video & audio<video width=‚320‛ height=‚280‛ controls>        <source src=‚video.webm‛ type=‘video/webm; codecs=‚vp8,     ...
demoVideo & Audio
Spicing It Up With CSS3
quick CSS primer   CSS stands for    Cascading Style Sheets   CSS is used to apply    styling to mark-up    elements   ...
CSS specification stages   The CSS specification goes through              Recommendation    “stages” from the W3C.      ...
CSS milestones   CSS1 became a W3C    Recommendation in    December 1996   In the year 2000, Internet    Explorer 5.0 fo...
where CSS is now: CSS3   CSS3 builds on top of CSS 2.1   CSS3 brings forth a lot of exciting new    features, in a diffe...
why CSS modules?                               CSS Specification   CSS3 is being released in                             ...
what CSS modules exist?   There are many modules in the CSS    specification.        As of October 2011, there are 52 mo...
implementing CSS3 today   Build your site with the bare minimums first        All required functionality should be there...
implementing CSS3 today   Browser Fallbacks        Implement required functionality natively first        Provide fallb...
quick jQuery primer   We will use jQuery and several jQuery plug-ins to replicate CSS3 features    that may not be suppor...
demoSpicing It Up With CSS3
Making Your Life Easier WithTools
tools   HTML5test.com   HTML5 Boilerplate   HTML5 Animations Tools   CSS3 Generators   Visual Studio, Expression   A...
HTML5 and Beyond
future of HTML5   With each new browser release, support for the    HTML5 specification is growing   A work in progress:...
prototyping emerging standards
multi-platform/screen support• Increasing support for JavaScript and HTML5 as a  multi-platform technology• Develop rich a...
Getting Started
next steps• Implement some of the features we talked about  today on your own• Continue learning more about HTML5 and then...
resources• Diveintohtml5.org• Initializr.com• Css3please.com• Modernizr.com• Html5labs.com• chris.ching@digiflare.com and ...
related sessionsBreakouts• 26th October, DEV334 - HTML5 and CSS3  Techniques You Can Use Today, 10:30am• 26th October, WIN...
Remember To Complete Your Evaluations!You could WIN a Samsung FocusWindows Phone 7!Let us know what you liked & disliked!R...
Q&A
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
Upcoming SlideShare
Loading in …5
×

Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)

873 views

Published on

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 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
873
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
10
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)

  1. 1. Application Developmentwith HTML5Chris Ching and Nathaniel BagnellInteractive DevelopersDigiflare
  2. 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. 3. agenda Defining HTML5 Utilizing HTML5 Technologies Spicing It Up With CSS3 Make Your Life Easier With Tools HTML5 and Beyond Getting Started
  4. 4. Defining HTML5
  5. 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. 6. HTML5 applications
  7. 7. HTML5 technology areas Performance Semantics Styling Multimedia 3D Effects Offline & Connectivity Device Access Storage
  8. 8. CSS3 Border Radius Custom Fonts Box Shadow Multiple Backgrounds Selectors Media Queries & More…
  9. 9. JavaScript APIs Canvas Video & Audio Drag & Drop Geolocation Local Storage Offline Apps …& more
  10. 10. Utilizing HTML5 Technologies
  11. 11. HTML5 technologies Semantic elements Canvas Geolocation Local Storage Video & audio
  12. 12. semantic elements More descriptive markup Allows programs to extract data Header Article Time Nav Footer … & more
  13. 13. demoSemantic Markup
  14. 14. canvas A drawable surface to render graphs, images, shapes dynamically via JavaScript Paths fillRect fillText createLinearGradient drawImage
  15. 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. 16. SVG<svg xmlns=http://www.w3.org/2000/svgxmlns:xlink=http://www.w3.org/1999/xlink version=1.1 viewBox=0 0512 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,94114,94 129,265 256,265zM256,355 L192,338 188,293 132,293 139,382256,414z/><path fill=#FFF d=M255,208 L255,265 325,265 318,338 255,355 255,414371,382 387,208zM255,94 L255,150 392,150 397,94z/></svg>
  17. 17. demoCanvas & SVG
  18. 18. geolocation The user’s location is available via JavaScript API Geolocation is opt-in The browser asks for permission
  19. 19. geolocationnavigator.geolocation.getCurrentPosition(located);function located(position) { var latitude = position.coords.latitude; var longitue = position.coords.longitude;}
  20. 20. demoGeolocation
  21. 21. local storage Key/Value store Up to 5mb No expiration Store string data Offline support for applications
  22. 22. local storagewindow.localStorage.setItem(‘name’, ‘value’);window.localStorage.name = ‘value’;var name = window.localStorage.getItem(‘name’);var name = window.localStorage.name;window.localStorage.removeItem(‘name’);
  23. 23. demoLocal Storage
  24. 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. 25. demoVideo & Audio
  26. 26. Spicing It Up With CSS3
  27. 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. 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. 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. 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. 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. 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. 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. 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. 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. 36. demoSpicing It Up With CSS3
  37. 37. Making Your Life Easier WithTools
  38. 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. 39. HTML5 and Beyond
  40. 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. 41. prototyping emerging standards
  42. 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. 43. Getting Started
  44. 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. 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. 46. related sessionsBreakouts• 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:45pmAll sessions will be available online after the tour
  47. 47. Remember To Complete Your Evaluations!You could WIN a Samsung FocusWindows 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 andends 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 evaluationform 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 thecontest 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 onNovember 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 becontacted 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 awayfor 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 WindowsPhone 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-8weeks. 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. 48. Q&A
  49. 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.

×