Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers

9,518 views

Published on

HTML5 and CSS3 have arrived. Are you ready to start adopting these technologies in your web projects? Jump start your understanding of the new rich standards and arm yourself with essential techniques for making the most of HTML5 and CSS3 today. In this half-day workshop, you will learn everything you need to know to effectively start leveraging HTML5 and CSS3 in ASP.NET applications. Learn how HTML5 and CSS3 are removing limits from web design. Discover tools and techniques for adopting HTML5 and CSS3 while still supporting older browsers. Leave with the essential knowledge needed to embrace HTML5 and CSS3 in your next ASP.NET project!

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,518
On SlideShare
0
From Embeds
0
Number of Embeds
652
Actions
Shares
0
Downloads
112
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Going off-template for better instructional effectiveness
  • http://www.apple.com/hotnews/thoughts-on-flash/
  • Talk about the major “platforms” for the web. Introduce the players.
  • Looking for people to identify that Flash, Silverlight, and HTML5 are all competing to deliver the rich web
  • Ian Hickson of Google, Inc. is the editor of HTML5Fun facts:- It takes about 10 years to build a nuclear power plant (http://wiki.answers.com/Q/How_long_does_it_take_to_build_a_Nuclear_Power_Station)- Deposit $10/day for 12 years @ 8% = $73,000 (http://calcnexus.com/savings-calculator.php)
  • he HTML5 specification will not be considered finished before there are at least two complete implementations of the specification.http://www.w3.org/TR/html5-diff/#backwards-compatibleThe Living Standard: http://www.whatwg.org/specs/web-apps/current-work/multipage/
  • http://html5demos.com/
  • http://marketshare.hitslink.com/browser-market-share.aspx?qprid=1
  • Mozilla’s take on IE9: http://people.mozilla.com/~prouget/ie9/ie9_vs_fx4.htmlTesting older IE: http://spoon.net/ie6(News on MSFT take down of testable browsers: http://blog.thomascsherman.com/2010/11/spoon-net-forced-to-pull-internet-explorer/)Another old IE option: http://www.my-debugbar.com/wiki/IETester/HomePageOfficial MSFT option for testing old IE: http://www.microsoft.com/downloads/en/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en
  • http://code.google.com/p/ie7-js/Testing IE:http://spoon.net/browsers/Three choices: Hack it – Force features with JS shivsSupport it – Provide gracefully degraded experienceKill it – Provide message indicating no or limited support
  • http://caniuse.com/http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)http://html5test.com/
  • Sun Spider benchmark test:http://www.webkit.org/perf/sunspider/sunspider.html
  • http://www.modernizr.com/
  • http://www.modernizr.comhttp://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/
  • http://www.w3.org/TR/html5/text-level-semantics.htmlhttp://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdfhttp://gsnedders.html5.org/outlinerhttp://diveintohtml5.org/examples/blog-original.htmlhttp://visualstudiogallery.msdn.microsoft.com/en-us/d771cbc8-d60a-40b0-a1d8-f19fc393127d
  • http://www.javascriptkit.com/dhtmltutors/customattributes.shtmlhttp://html5doctor.com/html5-custom-data-attributes/Two methods of access:- Via Attributes (http://api.jquery.com/category/attributes/)Via “dataset” (plug-in required today: http://www.orangesoda.net/jquery.dataset.html)
  • http://diveintohtml5.org/video.html
  • Chrome H.264 from MSFT:http://arstechnica.com/microsoft/news/2011/02/microsoft-offers-h264-plugin-for-chrome-queries-google-on-webm.arshttp://blogs.msdn.com/b/ie/archive/2011/02/01/html5-and-web-video-questions-for-the-industry-from-the-community.aspxChrome’s pull of H.264: http://arstechnica.com/web/news/2011/01/googles-dropping-h264-from-chrome-a-step-backward-for-openness.ars/
  • WebM support via a plug-in: http://tools.google.com/dlpage/webmmfTechCrunch on WebM: http://techcrunch.com/2011/01/14/webm-plugins/
  • http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#states-of-the-type-attributehttp://www.html5laboratory.com/s/simple-html5-contact-form.htmlWeb Forms 2 (old spec – now Forms in HTML5): http://dev.w3.org/html5/web-forms-2/http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#formsDefined input types: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#the-input-elementCross browser input types: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/Cross browser forms 2.0: https://github.com/westonruter/webforms2
  • http://diveintohtml5.org/forms.html
  • http://diveintohtml5.org/geolocation.htmlSpec: http://dev.w3.org/geo/api/spec-source.htmlOnly lat, long, acc are guranteed. Other values might be available, including altitude, altitudeAccuracy, heading, speedCan force maximum age for cached geolocation objectsCan handle errors and make repeat location calls using navigatior.geolocation.watchPosition(successCallback, errorCallback, {maximumAge:time})Google Maps API v3 Reference: http://code.google.com/apis/maps/documentation/javascript/basics.html(Free to use on all apps that are free to consumers – no API keys needed)
  • http://html5demos.com/storageTutorial:http://html5tutorial.net/tutorials/working-with-html5-localstorage.html
  • http://dev.w3.org/html5/postmsg/http://ajaxian.com/archives/cross-window-messaging-with-html-5-postmessageAvailability: http://caniuse.com/#search=messaging
  • http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
  • http://code.google.com/p/explorercanvas/
  • http://upload.wikimedia.org/wikipedia/en/d/d0/Chrome_Logo.svgComparison articles:Great comparison: http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/http://blogs.sitepoint.com/2010/07/06/canvas-vs-svg-how-to-choose/ (IDEA: progressive enhancement techniques — for example, IE8 and earlier versions show a table of data whereas supported browsers show an animated pie chart.)SVG Bridge for all browsers:http://raphaeljs.com/CANVAS Bridge for IE: http://code.google.com/p/explorercanvas/(Pointless canvas example: http://paulirish.com/2010/high-res-browser-icons/)SVG is DOM-based. All elements exist in DOM. Thus, you can attach event handlers. CON: Many objects can hurt perf.CANVAS is PIXEL-based. All elements rendered quickly, but not part of DOM. CON: Harder to interact.
  • http://html5demos.com/offlineapphttp://diveintohtml5.org/offline.htmlhttp://html5doctor.com/go-offline-with-application-cache/ (Good practical tips)Inspect appcache in Chrome: chrome://appcache-internals/Stephen Walther on using ASP.NET to serve Cache manifest: http://stephenwalther.com/blog/archive/2011/01/26/creating-html5-offline-web-applications-with-asp-net.aspxFix IIS Express manifest type: http://www.danielroot.info/2010/07/how-microsofty-writes-ipad-apps.htmlC:\\Users\\{YOU}\\Documents\\IISExpress\\config\\applicationHost.configComment out the .manifest mime type (sorry ClickOnce!)Add the following line: <mimeMapfileExtension=".manifest" mimeType="text/cache-manifest" />Can also override in IIS7+ config (integrated pipeline):<system.webServer> <staticContent> <mimeMapfileExtension=".manifest" mimeType="text/cache-manifest" /> </staticContent> </system.webServer>Application Cache API: http://www.w3.org/TR/html5/offline.html#application-cache-api
  • Example code for .NET WebSockets:http://www.undisciplinedbytes.com/2010/06/html-5-c-web-sockets-server-and-asp-net-client-implementation/Online demo: http://websocket.org/echo.htmlOpera on Sockets:http://my.opera.com/core/blog/websocketsSockets disabled by default in FF and Opera: http://annevankesteren.nl/2010/12/websocket-protocol-vulnerabilityEnabling sockets in Opera 11: opera:config#UserPrefs|EnableWebSocketsEnabling sockets in FF4: about:config -> network.websocket.override-security-block;trueIE9 can do WebSockets via a prototype Silverlight hack: http://html5labs.interoperabilitybridges.com/prototypes/available-for-download/websocketsLimits: http://html5labs.interoperabilitybridges.com/media/2311/readme.htmSockets vs. traditional polling performance: http://soa.sys-con.com/node/13154733rd party sockets solution for older browsers:
  • WebSql is not proceeding: http://dev.w3.org/html5/webdatabase/State of web local storage: http://rethink.unspace.ca/2010/5/10/the-state-of-html5-local-data-storageReplacement Tech is IndexedDB:http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.htmlSyncing back to a server database: http://stackoverflow.com/questions/1744522/best-way-to-synchronize-local-html5-db-storage-with-a-serverPersistenceJS:https://github.com/zefhemel/persistencejsGoogle Web Stroage Portability Layer: http://google-opensource.blogspot.com/2009/05/web-storage-portability-layer-common.html
  • Kills Google Gearshttp://www.w3.org/TR/IndexedDB/https://developer.mozilla.org/en/IndexedDBhttp://www.html5rocks.com/tutorials/indexeddb/todo/Good comparison by Mozilla to formerWebDatabase approach: http://hacks.mozilla.org/2010/06/comparing-indexeddb-and-webdatabase/
  • http://en.wikipedia.org/wiki/Web_Workershttp://www.whatwg.org/specs/web-workers/current-work/http://caniuse.com/#search=web worker
  • http://en.wikipedia.org/wiki/Cascading_Style_SheetsIE Mac: Shipped in March 20009 style sheet languages proposed in early 90sLanguages:1996:JavaScript Style Sheets (JSSS) – Netscape1994: Cascading HTML Style Sheets (CHSS)1994: Stream-based Style Sheet Proposal (SSP)
  • New CSS3 featuresCSS3 principlesShow example of CSS3 in actionList of all CSS properties:http://meiert.com/en/indices/css-properties/http://www.w3.org/Style/CSS/current-workhttp://www.w3.org/TR/2010/WD-css-2010-20101202/#css3
  • http://html5reset.org/http://meyerweb.com/eric/tools/css/reset/http://html5doctor.com/html-5-reset-stylesheet/http://html5boilerplate.com/
  • Microsoft Extensions: http://blogs.msdn.com/b/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspxVendor specific prefixes: http://reference.sitepoint.com/css/vendorspecific
  • @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5IE relied on proprietary Embedded Open Type (.eot)Old school solutions involved things like sIFR (http://www.mikeindustries.com/blog/sifr/)Modern browsers finally support TTF and OTFResources:http://www.css3.info/preview/web-fonts-with-font-face/http://www.alistapart.com/articles/cssatten
  • Making fonts compatible with IE requires some work-around:http://randsco.com/index.php/2009/07/04/p680
  • Fix “bleeding” in Webkit with: -webkit-background-clip: padding-box;http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
  • http://designshack.co.uk/articles/introduction-to-css3-part-6-backgroundshttp://www.css3.info/preview/background-origin-and-background-clip/
  • IMAGES FROM: http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/Great visual CSS gradient generator: http://www.display-inline.fr/projects/css-gradient/#startType=hex&startValue=aaeeff&endType=hex&endValue=3399ccSimple Visual gradient creator: http://gradients.glrzad.com/Good explanation:http://www.dynamicdrive.com/style/csslibrary/item/css3_linear_gradients/background: black;background: -moz-linear-gradient(top, black, white);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white)); /*You can also make gradient stops*/-moz-linear-gradient( top,rgb(214,24,166) 0%,rgb(255,51,200) 50%,rgb(255,77,240) 87%)
  • Great tutorial:http://designshack.co.uk/articles/css/using-less-js-to-simplify-your-css3LESS site: http://lesscss.org/Enable .less with IIS Express:C:\\Program Files (x86)\\IIS Express>appcmd set config /section:staticContent /+[fileExtension='.less',mimeType='text/css']
  • CSS3 Animation Examples:http://webdeveloperjuice.com/demos/css/css3effects.html#secondhttp://anthonycalzadilla.com/css3-ATAT/index.htmlhttp://www.optimum7.com/css3-man/animation.html
  • Full list of -moz extensions: https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
  • http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.htmlhttp://paulbakaus.com/lab/js/coverflow/http://www.cssplay.co.uk/menu/css3-animation.htmlhttp://anthonycalzadilla.com/css3-ATAT/index.html
  • General discussion of best practices: http://dev.opera.com/articles/view/designing-and-developing-mobile-web-site/ (a bit old, from 2007, but some good concepts)
  • http://www.quirksmode.org/mobile/viewports2.htmlhttp://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.htmlhttps://developer.mozilla.org/en/Mobile/Viewport_meta_tag
  • http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/http://html5boilerplate.com/docs/#the-markuphttp://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193Discussion of viewport and older mobile meta tags: http://davidbcalhoun.com/tag/handheldfriendly
  • http://www.webdesignerwall.com/tutorials/css3-media-queries/http://www.w3.org/TR/css3-mediaqueries/Code for targeting iPhone: http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
  • http://www.the-m-project.org/http://www.appcelerator.com/products/titanium-mobile-application-development/http://jquerymobile.com/http://jqtouch.com/http://www.sencha.com/products/touch/Good comparison:http://stackoverflow.com/questions/5063117/choosing-mobile-web-html5-framework
  • Good presentation: http://www.slideshare.net/remy.sharp/html5-javascript-apis
  • http://stackoverflow.com/questions/394601/which-javascript-framework-jquery-vs-dojo-vshttp://www.google.com/trends?q=jquery%2Cdojo%2Cmootools%2Cyui%2Cextjs
  • http://stackoverflow.com/questions/1447184/microsoft-cdn-for-jquery-or-google-cdnhttp://en.wikipedia.org/wiki/JavaScript_engine#JavaScript_engines
  • http://www.dailytech.com/Adobes+CEO+Responds+to+Steve+Jobs+Rant+about+Flash/article18267.htm
  • http://blogs.msdn.com/ie/archive/2010/04/29/html5-video.aspx
  • ×