HTML5 for ASP.NET Developers
Download as PPTX, PDF•0 likes•2,333 views
The document discusses HTML5 and its integration with ASP.NET, covering new elements, attributes, and APIs that enhance web development, including support for video, audio, animations, and more. It highlights tools and techniques like Microsoft Visual Studio 2010 SP1, ASP.NET MVC3, jQuery, and Modernizr to facilitate HTML5 implementation and provide better coding practices. Additionally, it emphasizes the importance of backward compatibility and the need to learn new markups to utilize the benefits of HTML5.
![CSS Selectors
Selectors 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 targetting
div { h2:first-child { ... }
display: inline-block;
} div.text > div { ... }
h2 + header { ... }
Specific attributes
input[type="text"] {
background: #eee;
}](https://image.slidesharecdn.com/html5andasp-net-120113043856-phpapp01/85/HTML5-for-ASP-NET-Developers-16-320.jpg)
HTML5 for ASP.NET Developers
- 1. HTML5 and ASP.NET Justin Lee Software Development Consultant [email protected] 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
- 8. Getting things set up • Microsoft Visual Studio 2010 SP1 • Web Standards Update for Microsoft Visual Studio 2010 SP1 • ASP.NET MVC3 • NuGet
- 9. Look! HTML5!
- 10. NuGet Packages • JQuery • Modernizr • HTML5.Setup • MvcHtml5Templates • MVCHtml5Toolkit • Html5Boilerplate.Mvc3.Razor
- 11. Can I Use…
- 12. 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.
- 14. HTML5 New APIs • Web Storage • Web Workers • Web Sockets • Notifications • Drag-and-Drop, Drag-in • Geolocation • Canvas • Etc. etc. etc. etc.
- 15. 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.
- 16. CSS Selectors Selectors 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 targetting div { h2:first-child { ... } display: inline-block; } div.text > div { ... } h2 + header { ... } Specific attributes input[type="text"] { background: #eee; }
- 17. 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'; }
- 18. HTML5 + JS • document.getElementsByClassName, document.querySelectorAll • Custom data-* attributes • Element.classList • History API • Etc. etc. etc. etc.
- 20. 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
- 21. 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
- 22. 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.
- 23. Useful Links • Html5rocks.com • htmlfivewow.com • Caniuse.com • Supersocket.codeplex.com • Web Standards Update
- 24. Q&A Justin Lee Software Development Consultant [email protected] http://justinlee.sg Exploring new career opportunities