Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 for ASP.NET Developers


Published on

HTML5 is the next wave of development for the web, with the support from IE9 and IE10. Even Windows 8 will support native apps written in HTML5. This session will give an overview and a deeper dive into writing effective HTML5 together with your existing ASP.NET experience to create the best next generation web experience.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

HTML5 for ASP.NET Developers

  1. 1. HTML5 and ASP.NET Justin LeeSoftware Development Consultant
  2. 2. HTML5• HTML5 + Browser API + CSS3 + JavaScript• New Elements and Attributes Markup• New APIs for DOM• Video, Audio, 2D, 3D, Animations, File, Drag- and-Drop, etc. support
  3. 3. Getting things set up• Microsoft Visual Studio 2010 SP1• Web Standards Update for Microsoft Visual Studio 2010 SP1• ASP.NET MVC3• NuGet
  4. 4. Look! HTML5!
  5. 5. NuGet Packages• JQuery• Modernizr• HTML5.Setup• MvcHtml5Templates• MVCHtml5Toolkit• Html5Boilerplate.Mvc3.Razor
  6. 6. Can I Use…
  7. 7. HTML5 New Markups• <!DOCTYPE html>• <header></header>, <section></section>, <footer></footer>• <nav></nav>• New <input></input> attributes• <audio></audio>, <video></video>• <progress></progress>• <meter></meter>• Etc. etc. etc. etc. etc.
  8. 8. HTML5 New Markups
  9. 9. HTML5 New APIs• Web Storage• Web Workers• Web Sockets• Notifications• Drag-and-Drop, Drag-in• Geolocation• Canvas• Etc. etc. etc. etc.
  10. 10. HTML5 + CSS3• CSS Selectors• Webfonts• Text wrapping• Columns• Text Stroke• Opacity• HSL support• Rounded Corners• Gradients• Shadows• Border Image• Flexible Box Model• Transitions, Transforms, Animations• Etc. etc. etc. etc.
  11. 11. CSS SelectorsSelectors Negation.row:nth-child(even) { :not(.box) { background: #dde; color: #00c;} }.row:nth-child(odd) { :not(span) { background: white; display: block;} }Image-like display More specific targettingdiv { h2:first-child { ... } display: inline-block;} div.text > div { ... } h2 + header { ... }Specific attributesinput[type="text"] { background: #eee;}
  12. 12. Web Fonts@font-face { font-family: LeagueGothic; src: url(LeagueGothic.otf);}@font-face { font-family: Droid Sans; src: url(Droid_Sans.ttf);}header { font-family: LeagueGothic;}
  13. 13. HTML5 + JS• document.getElementsByClassName, document.querySelectorAll• Custom data-* attributes• Element.classList• History API• Etc. etc. etc. etc.
  14. 14. DemosHTML5 DEMOS
  15. 15. Futures for Visual Studio vNext• Web Form will be HTML5 compatible• MVC and Razor will also support HTML5• Visual Studio Intellisense will have better JS and CSS detection
  16. 16. Tips• Use ASP.NET MVC 3, not ASP.NET Web Forms (until ASP.NET 4.5)• Use Modernizr to maintain backward compatibility• Use Web Workers to maintain responsiveness
  17. 17. Tips• Consider carefully what should be processed Server-Side and Client-Side• Not all browsers support all features (Especially IE)• Learn the new markups, what you need might just be there.
  18. 18. Useful Links••••• Web Standards Update
  19. 19. Q&A Justin LeeSoftware Development Consultant http://justinlee.sgExploring new career opportunities