Your SlideShare is downloading. ×
0
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
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 for ASP.NET Developers

2,936

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 …

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,936
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 and ASP.NET Justin LeeSoftware Development Consultant triplez@justinlee.sg http://justinlee.sg
  • 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. Getting things set up• Microsoft Visual Studio 2010 SP1• Web Standards Update for Microsoft Visual Studio 2010 SP1• ASP.NET MVC3• NuGet
  • 4. Look! HTML5!
  • 5. NuGet Packages• JQuery• Modernizr• HTML5.Setup• MvcHtml5Templates• MVCHtml5Toolkit• Html5Boilerplate.Mvc3.Razor
  • 6. Can I Use…
  • 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. HTML5 New Markups
  • 9. HTML5 New APIs• Web Storage• Web Workers• Web Sockets• Notifications• Drag-and-Drop, Drag-in• Geolocation• Canvas• Etc. etc. etc. etc.
  • 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. 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. 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. HTML5 + JS• document.getElementsByClassName, document.querySelectorAll• Custom data-* attributes• Element.classList• History API• Etc. etc. etc. etc.
  • 14. DemosHTML5 DEMOS
  • 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. 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. 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. Useful Links• Html5rocks.com• htmlfivewow.com• Caniuse.com• Supersocket.codeplex.com• Web Standards Update
  • 19. Q&A Justin LeeSoftware Development Consultant triplez@justinlee.sg http://justinlee.sgExploring new career opportunities

×