HTML5 for ASP.NET Developers
•Als PPTX, PDF herunterladen•
0 gefällt mir•2,327 views
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.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (19)
Ähnlich wie HTML5 for ASP.NET Developers
Ähnlich wie HTML5 for ASP.NET Developers (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
HTML5 for ASP.NET Developers
- 1. HTML5 and ASP.NET Justin Lee Software 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
- 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 triplez@justinlee.sg http://justinlee.sg Exploring new career opportunities