HTML5 and ASP.NET            Justin LeeSoftware Development Consultant      triplez@justinlee.sg       http://justinlee.sg
HTML5• HTML5 + Browser API +  CSS3 + JavaScript• New Elements and  Attributes Markup• New APIs for DOM• Video, Audio, 2D, ...
Getting things set up• Microsoft Visual Studio 2010 SP1• Web Standards Update for Microsoft Visual  Studio 2010 SP1• ASP.N...
Look! HTML5!
NuGet Packages•   JQuery•   Modernizr•   HTML5.Setup•   MvcHtml5Templates•   MVCHtml5Toolkit•   Html5Boilerplate.Mvc3.Razor
Can I Use…
HTML5 New Markups• <!DOCTYPE html>• <header></header>, <section></section>,  <footer></footer>• <nav></nav>• New <input></...
HTML5 New Markups
HTML5 New APIs•   Web Storage•   Web Workers•   Web Sockets•   Notifications•   Drag-and-Drop, Drag-in•   Geolocation•   C...
HTML5 + CSS3•   CSS Selectors•   Webfonts•   Text wrapping•   Columns•   Text Stroke•   Opacity•   HSL support•   Rounded ...
CSS SelectorsSelectors                         Negation.row:nth-child(even) {            :not(.box) {  background: #dde;  ...
Web Fonts@font-face {  font-family: LeagueGothic;  src: url(LeagueGothic.otf);}@font-face {  font-family: Droid Sans;  src...
HTML5 + JS• document.getElementsByClassName,  document.querySelectorAll• Custom data-* attributes• Element.classList• Hist...
DemosHTML5 DEMOS
Futures for Visual Studio vNext• Web Form will be HTML5 compatible• MVC and Razor will also support HTML5• Visual Studio I...
Tips• Use ASP.NET MVC 3, not ASP.NET Web Forms  (until ASP.NET 4.5)• Use Modernizr to maintain backward  compatibility• Us...
Tips• Consider carefully what should be processed  Server-Side and Client-Side• Not all browsers support all features  (Es...
Useful Links•   Html5rocks.com•   htmlfivewow.com•   Caniuse.com•   Supersocket.codeplex.com•   Web Standards Update
Q&A              Justin LeeSoftware Development Consultant        triplez@justinlee.sg         http://justinlee.sgExplorin...
HTML5 for ASP.NET Developers
HTML5 for ASP.NET Developers
HTML5 for ASP.NET Developers
HTML5 for ASP.NET Developers
HTML5 for ASP.NET Developers
Upcoming SlideShare
Loading in...5
×

HTML5 for ASP.NET Developers

2,993

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,993
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 for ASP.NET Developers

  1. 1. HTML5 and ASP.NET Justin LeeSoftware Development Consultant triplez@justinlee.sg http://justinlee.sg
  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• Html5rocks.com• htmlfivewow.com• Caniuse.com• Supersocket.codeplex.com• Web Standards Update
  19. 19. Q&A Justin LeeSoftware Development Consultant triplez@justinlee.sg http://justinlee.sgExploring new career opportunities
  1. A particular slide catching your eye?

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

×