html5 for asp.net developers
DESCRIPTION
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.TRANSCRIPT
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
CSS
2
CSS
3
HTM
L 4
HTM
L 5
HTM
L 4
HTM
L 5
Getting things set up
• Microsoft Visual Studio 2010 SP1• Web Standards Update for Microsoft Visual
Studio 2010 SP1• ASP.NET MVC3• NuGet
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></input> attributes• <audio></audio>, <video></video>• <progress></progress>• <meter></meter>• Etc. etc. etc. etc. etc.
HTML5 New Markups
HTML5 New APIs
• Web Storage• Web Workers• Web Sockets• Notifications• Drag-and-Drop, Drag-in• Geolocation• Canvas• Etc. etc. etc. etc.
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.
CSS SelectorsSelectors.row:nth-child(even) { background: #dde;}.row:nth-child(odd) { background: white;}
Image-like displaydiv { display: inline-block;}
Specific attributesinput[type="text"] { background: #eee;}
Negation:not(.box) { color: #00c; } :not(span) { display: block; } More specific targettingh2:first-child { ... }
div.text > div { ... } h2 + header { ... }
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';}
HTML5 + JS
• document.getElementsByClassName, document.querySelectorAll
• Custom data-* attributes• Element.classList• History API• Etc. etc. etc. etc.
HTML5 DEMOSDemos
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
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
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.
Useful Links
• Html5rocks.com• htmlfivewow.com• Caniuse.com• Supersocket.codeplex.com• Web Standards Update
Q & A
Justin LeeSoftware Development Consultant
[email protected] http://justinlee.sg
Exploring new career opportunities