Embed Size (px)
DESCRIPTION
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!
Citation preview
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Todd Anglin, Chief Evangelist
TelerikE: [email protected] | T: @toddanglin
Introductions
Todd AnglinChief Evangelist, Telerik
Microsoft MVP
ASP InsiderPresident NHDNUG & O’Reilly Author
@toddanglin
TelerikWatch.com
RICH LEARNING AHEAD
the “plan”the
options HTML5the
browsers
CSS3targetin
g mobile
modern javascri
pt
use it today A&Q
“Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.”
-Steve Jobs April, 2010
<HTML5 ?>
what do these *platforms* have in common?
the rich web
New!
Web
3D
Video Great Great Good
Audio Great Great Good
Animation Great Great Fair
Proprietary Yes Yes No
Availability Good Fair Great
Evolution Good Good Poor*
Tools Fair Great Eh…
HTML5
famously dead* proprietary platforms
PowerBuilder
OS/2
ColdFusionWinForm
sVB6
FoxPro
OS 9BeOS
when will HTML5 be “official?”
2022
October 2007First W3C
Working Draft
October 2009Last Call
Working Draft
2011Call for test
suite contributions
2012Candidate
Recommendation
2012First draft of
test suite
2015Second draft of
test suite
2019Final version of
test suite.
2020Reissued Last Call Working
Draft
2022Proposed
Recommendation
<HTML5>
the basics• <!DOCTYPE html>• 9 new “structure” tags• 16 new HTML elements• 13 new <input> types
compatible
HTMLCSS+ +JavaScript
video audio history
semantic tags canvas offline
local storage
drag & drop
geolocation
sockets editing web workers
[browsers]
which browsers matter?
of internet browses withIE, FF, Safari, Chrome, or Opera
99%
browser support
• Better, but not perfectFeature Check
• CanIUse.com• BrowserScope.org• Html5Test.com
Equalizers
• Html5Reset.org• Html5Boilerplate.c
om• jQuery
Hacks
• JavaScript helpers• “Downlevel”
experiences
Know your users. Know your browsers.
fixing IE• Three options:
–Shiv it–Kill it–Target it
Because some browsers run on many different operating systems, there can be a tendency to use a 'least common denominator' approach to implementing HTML5. By using more of the underlying operating system, and taking advantage of the power of the whole PC, IE9 enables developers to do more with HTML5.
“
”
-Dean HachamovitchGeneral Manager, IE Team
html5test.com
?Updated March 2011
in the future, browsers
compete on speed, not on
features
DEMODEMO
HTML5 Test + IE9Testing old browsers
using ittoday
how do you use HTML5 today?
modernizer
Modernizr• Shiv’r + Inspector
– Simple way to check feature support– Conditional JS and CSS
.multiplebgs div p { /* properties for browsers that support multiple backgrounds */}.no-multiplebgs div p { /* optional fallback properties for browsers that don't */}
if (Modernizr.canvas) { //Canvas supported}
if (Modernizer.cssColumns){ //Columns supported}
//Etc...
*Don’t use with IE HTML5shiv. One or the other.
progressiveenhancementgracefuldegradation
stuff you can do todaystuff you can do tomorrow
semantic tagstag: <header> <footer> <nav> <article> <hgroup>
<header> <hgroup> <h1>My Site</h1> <h2>My site tag line</h2> </hgroup></header><article> <header> <h1>An article title</h1> <header></article><footer><p>Copyright 1987</p></footer>
support: IE9, FF3.5, Safari, Chrome, Opera
enriching VS Experience
http://bit.ly/vsHTML5http://bit.ly/vsSVG
Add Intellisense & Schema Validation to Visual Studio editor
fixing IE
<head> <meta charset="utf-8" /> <title>My Weblog</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--></head>
semantic datadata-*
Valid approach to storing data in HTML
<!--Store values in data-* attributes--><div id="mydiv" data-key="26" data-name="My product name">This product is an extremely popular choice.</div>
<!--Access values with JavaScript-->//Using DOM's getAttribute() propertyvar key = mydiv.getAttribute("data-key") //returns "26" //OR Using JavaScript's dataset property**var key = mydiv.dataset.key //returns "26"
support: IE9, FF3.5, Safari, Chrome, Opera
videotag: <video />
<!-- Single video --><video src="mymovie.mp4" width="320" height="240"></video>
<!-- Multiple encoded versions --><video width="320" height="240" controls> <source src="mymovie.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="mymovie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></video>
support: IE9, FF3.6, Safari, Chrome, Opera
video for all browsers
1. Multiple encodings
2. Graceful degradation
CODECS/CONTAINER
FIREFOX OPERA CHROME IE9 SAFARI IPHONE ANDROID
Theora+Vorbis+Ogg
✓ ✓ ✓ · · · ·
H.264+AAC+MP4
✓ · ✓ ✓ ✓ ✓ ✓
WebM+Vorbis
✓ ✓ ✓ ✓ . . ✓
<video width="320" height="240" controls> <source src="mymovie.ogv"> <source src="mymovie.mp4"> <object data="videoplayer.swf"> <param name="flashvars" value="mymovie.mp4"> HTML5 and Flash video not supported </object></video>
WebMRoyalty FreeVP8/Vorbis
support: IE9*, FF3.5, Safari*, Chrome, Opera
input types*tag: time, date, search, email, etc.Web Forms 2.0 HTML5 Forms
<form><input type="email" autofocus="autofocus"
placeholder="Enter your email" /></form>
support: Safari, FF4*, Chrome, Opera
browser autofocus• Improved usability
– Supported in Safari, Chrome, Opera (so far)<form name="f">
<input id="q" autofocus>
<!--Technique to support older browsers--> <script> if (!("autofocus" in document.createElement("input"))) { document.getElementById("q").focus(); } </script> <input type="submit" value="Go"></form>
geolocation
navigator.geolocation.getCurrentPosition(callback);
function callback(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var acc = position.coords.accuracy;}
support: IE9, Safari, FF3.5, Chrome, Opera
opt-in user feature to share physical position
local storagesessionStorage = per windowlocalStorage = per browser
<script>sessionStorage.setItem('value', this.value);localStorage.setItem('value', this.value);
sessionStorage.getItem(‘value’);
sessionStorage.clear();localStorage.clear();</script>
support: IE9, FF3.5, Safari, Chrome, Opera
5 MB limit
messagingsend cross-document (and domain) local messages
//Sender (http://example.com)var o = $('iframe')[0];o.contentWindow.postMessage('Hello world','http://b.example.org/');
//Receiver (http://b.example.org)window.addEventListener('message', receiver, false);function receiver(e) { if (e.origin == 'http://example.com') alert(e.data);}
support: IE8, FF3.5, Safari, Chrome, Opera
canvastag: <canvas />
<canvas id=“b" width="300" height="225"></canvas>
function draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100);}
support: IE*, FF3, Safari, Chrome, Opera
fixing IE
<head> <!--[if IE]> <script src="excanvas.js"></script> <![endif]--></head>
Explorercanvas
svg vs canvasScalable Vector
GraphicsCanvas
Bitmap-output
Good for animation
JavaScript-based
Vector-output
Good for interaction
XML-based
stuff you can do todaystuff you can do tomorrow
offlinetag: <html manifest="html5demo.manifest">MIME type: text/cache-manifest
CACHE MANIFEST# Files you want cached for your app to work offline
myLogo.jpg
//Interacting with cachewindow.applicationCache.update();alert(window.applicationCache.status);
support: FF3.5, Safari, Chrome, Opera 10.6
web socketsapi: WebSocket
ws = new WebSocket("ws://localhost:8282/test”);
ws.onopen = WSonOpen;ws.onmessage = WSonMessage;ws.onclose = WSonClose;ws.onerror = WSonError;
function WSonMessage(event) { $(“#myDiv”).html(event.data);};
support: IE9**, Safari 5, Chrome, FF4*, Opera 11*
web sqlapi: openDatabase
db = openDatabase("html5demos", "1.0", "HTML 5 Database API example", 200000);if (db) { db.transaction(function(tx) { tx.executeSql("CREATE TABLE IF NOT EXISTS tweets (id REAL UNIQUE, text TEXT, created_at TEXT, screen_name TEXT, mention BOOLEAN)", [], callback); });}
db.transaction(function (tx) { tx.executeSql('SELECT * FROM tweets WHERE mention = ? AND id > ? ORDER BY id DESC', [mention, latest], callbackFunc);});
support: Safari, Chrome, Opera
“This specification has reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.” –W3C
indexedDBJavaScript API for indexed local storage
var request = window.indexedDB.open("CandyDB", "My candy store database");
request.onsuccess = function(event) { var db = event.result; if (db.version != "1") { // User's first visit, initialize database. ... }}
support: IE9*, FF4, (Chrome)
web workersbackground threads for JavaScript
var worker = new Worker('worker.js');
worker.onmessage = function (event) { $('#result').innerHTML = event.data;};
//Worker communicates viapostMessage([value]);
support: FF3.5, Safari, Chrome, Opera
CSS3
CSS History
1996
• CSS v1• IE3: First implementation
• IE Mac: First 100% support
1997
• CSS v2• Still ZERO 100% implementations
2007
• CSS v2.1• Fixed errors in 2.0 spec
CSS: Plagued by implementation bugs & inconsistencies
CSS3• Improve consistency & power of styling language
What’s CSS3?
• Extensions for CSS2.1– Add functionality, refine definitions
Module Status
Animations WD
2D/3D Transformations WD
Selectors (Level 3) PR
Media Queries (Level 3) CR
Backgrounds & Borders (rounded corners)
CR
Text (text shadows, outline) WD
CSS 2.1 LCWD LC CR PR REC
leveling the playing field
• CSS Reset– Browsers ship with built-in styles – zero
them out!– Enable newer features in older browsers
http://html5reset.orghttp://html5boilerplate.com
Browser Prefixes
•-webkit•-moz•-o•-ms “standard” way
browsers implement custom
features.
custom fonts• Biggest Problem?
– Licensing!
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf') format(“opentype”);
}
//Usageh3 { font-family: Delicious, sans-serif; }
Web Font Providers
• Solve the licensing problem• Host the TTF/OTF font files• Provide easy-to-use code
http://code.google.com/webfontshttp://webfonts.fonts.comhttp://typekit.com/libraries
rounded corners• Easy corner control
– Expect GD for older browsers (IE)
-moz-border-radius: 5px 5px 5px 5px; //Optionally ”explicit”-webkit-border-radius: 5px;border-radius: 5px;
//Can also control specific cornersborder-bottom-left-radius:0px;border-bottom-right-radius:0px;
drop shadows• Exactly like it sounds
– box-shadow: <hShift> <vShift> <size> <color>;
-moz-box-shadow: 2px 2px 2px #333;-webkit-box-shadow: 2px 2px 2px #333;box-shadow: 2px 2px 2px #333;
text shadows• Uniform across supported browsers!
– text-shadow: <h offest> <v offset> <blur size> <color>;
text-shadow: 2px 2px 2px #333;
//You can apply multiple shadowstext-shadow: 2px 2px 2px #333, 2px 2px 3px #CCC;
Backgrounds• More options, more power
– multiple backgrounds– resize backgrounds– background clipping
/*Background size*/-webkit-background-size: 137px 50px;-o-background-size: 137px 50px;background-size: 137px 50px;
/*Multiple Backgrounds*/background: url(top.gif) top left no-repeat,url(bottom.gif) bottom left no-repeat,url(middle.gif) left repeat-y;
/*Background origin*/background-origin: border;/*Other options: padding or content*/
Gradients• Not CSS3!
– But useful and desirable– Can be “shived” to support all browsers
LESS for CSS• Use LESS to write less CSS
– Variables, operations, mix-ins, nested rules
/*Variables*/@primaryColor: #383939;background-color: @primaryColor;
/*Mix-ins!!*/.roundedCorners (@radius: 12px) {
-moz-border-radius: @radius;-webkit-border-radius: @radius;border-radius: @radius;
}
#page { background-color: @primaryColor; .roundedCorners; }
animating with CSS• Animate by setting CSS properties
– Works when JS is disabled
#id_of_element { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;
}
the One-Offs
• Features waiting for friendsWebKit
• Reflections (-webkit-box-reflect)
• 3D Transforms (-webkit-perspective)
Mozilla• <Nothing
notable?>
IE (9)• Hardware
rendering!
DEMODEMO
CSS3 Demos
mobile
considerations
1. Bandwidth2. Screen Size3. Interaction4. Look-and-feel5. Reusability
980px320px
<meta>• Rendering hints for mobile browsers
<meta name="viewport" content="width=device-width, initial-scale=1.0">Optional: user-scalable=no
target-densitydpi=device-dpi (Android Only)
<!--iOS specific--><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black" /><link rel="apple-touch-icon" href="./apple-touch-icon.png" />
media queries• Target styles to specific devices…
– And features!
/*These two rules do the same thing*/@media all and (min-width:500px) { … } @media (min-width:500px) { … }
/*Multiple conditions*/@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; }}
frameworks
javascriptjQuery
universal language
• Mobile• Desktop• Server (node.js)• Devices
frameworks
• jQuery• MooTools• YUI• extJS• Dojo• prototype
Google Trends
jQuery
• Available from numerous CDNS– Google, Microsoft, Telerik
JavaScriptEngines
jQuery API
EMCAScript “Standard”
JägerMonkey V8 Nitro Chakra
Browser Versions
HTML5 + JavaScript
• Aware & Dependent
Canvas Storage Offline
Video GeoLocation
Sockets
Workers Etc…
should I use HTML5 today?
The consumer should be able to decide which technologies they want to use, but a multi-platform world is definitely where the world is headed.
-Shantanu Narayen April, 2010
The future of the web is HTML5.
-Dean Hachamovitch April, 2010
Your Feedback is Important
Please fill out a session evaluation form drop it off at the conference registration
desk.
Thank you!
@toddanglin
telerikwatch.com
Resources
• Quotes● http://www.apple.com/hotnews/thoughts-on-flash/● 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
• HTML5 Resources● http://www.w3.org/TR/html5-diff/#backwards-compatible● http://html5demos.com/● http://ishtml5ready.com● http://caniuse.com● http://html5readiness.com● http://html5test.com● http://www.browserscope.org/● http://www.html5rocks.com/
• HTML5 Demos● http://9elements.com/io/projects/html5/canvas/● http://html5demos.com/● http://www.chromeexperiments.com/
• CSS3 Demos● http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html● http://anthonycalzadilla.com/css3-ATAT/index.html
• IE9 Download● http://ie.microsoft.com/testdrive/
CSS3 Resources
• LESS CSS “framework” + tutorial● http://
designshack.co.uk/articles/css/using-less-js-to-simplify-your-css3
• LESS T4 Template from Phil Haack● http://
haacked.com/archive/2009/12/02/t4-template-for-less-css.aspx
• LESS VS CSS code highlighting● http://
visualstudiogallery.msdn.microsoft.com/en-us/dd5635b0-3c70-484f-abcb-cbdcabaa9923
Slide Title
• Please use this template for your slides● Please DO NOT change the format of this template● Please DO NOT use special formatting such as
shadowing for code or images, or shadows behind boxes, etc. Please DO NOT use layers or slides because the text is unreadable when printed as handouts for students.
● Please send completed slides to [email protected]
● Filename for slides should be: lastname_conference_sessionnum_sessiontitle.ppt Please zip all files before sending them. Include sample code for the attendee disk in a subfolder.
