Research Article Exploring Attitudes of ASP.NET Web Developers
HTML5 for ASP.NET Developers
-
Upload
justin-lee -
Category
Technology
-
view
2.918 -
download
4
description
Transcript of HTML5 for ASP.NET Developers
![Page 2: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/2.jpg)
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
![Page 3: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/3.jpg)
![Page 4: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/4.jpg)
CSS
2
CSS
3
![Page 5: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/5.jpg)
![Page 6: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/6.jpg)
HTM
L 4
HTM
L 5
![Page 7: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/7.jpg)
HTM
L 4
HTM
L 5
![Page 8: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/8.jpg)
Getting things set up
• Microsoft Visual Studio 2010 SP1• Web Standards Update for Microsoft Visual
Studio 2010 SP1• ASP.NET MVC3• NuGet
![Page 9: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/9.jpg)
Look! HTML5!
![Page 10: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/10.jpg)
NuGet Packages
• JQuery• Modernizr• HTML5.Setup• MvcHtml5Templates• MVCHtml5Toolkit• Html5Boilerplate.Mvc3.Razor
![Page 11: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/11.jpg)
Can I Use…
![Page 12: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/12.jpg)
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.
![Page 13: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/13.jpg)
HTML5 New Markups
![Page 14: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/14.jpg)
HTML5 New APIs
• Web Storage• Web Workers• Web Sockets• Notifications• Drag-and-Drop, Drag-in• Geolocation• Canvas• Etc. etc. etc. etc.
![Page 15: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/15.jpg)
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.
![Page 16: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/16.jpg)
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 { ... }
![Page 17: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/17.jpg)
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';}
![Page 18: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/18.jpg)
HTML5 + JS
• document.getElementsByClassName, document.querySelectorAll
• Custom data-* attributes• Element.classList• History API• Etc. etc. etc. etc.
![Page 19: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/19.jpg)
HTML5 DEMOSDemos
![Page 20: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/20.jpg)
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
![Page 21: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/21.jpg)
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
![Page 22: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/22.jpg)
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.
![Page 23: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/23.jpg)
Useful Links
• Html5rocks.com• htmlfivewow.com• Caniuse.com• Supersocket.codeplex.com• Web Standards Update
![Page 24: HTML5 for ASP.NET Developers](https://reader035.fdocuments.us/reader035/viewer/2022081414/54bd60e84a7959a9278b4580/html5/thumbnails/24.jpg)
Q & A
Justin LeeSoftware Development Consultant
[email protected] http://justinlee.sg
Exploring new career opportunities