the RICH STANDARD: GETTING familiar with HTML5 by Todd Anglin @telerik facebook.com/telerik
The Rich Standard: Getting Familiar with HTML5
May 12, 2015
HTML 5 may take some time to find full support in all major browsers, but you may be surprised to discover how many of HTML 5’s features are available today! HTML 5 is the next generation standard for web applications, and it promises to give plug-in based RIAs a serious challenge. In this demo heavy session, you’ll see HTML 5 in action and learn what you can do with today’s browser support for the new standard. If you’re building rich web applications and you’ve never touched HTML 5, this session is a must see.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
the RICHSTANDARD:
GETTING familiar
with HTML5by Todd Anglin
@telerik
facebook.com/telerik
Introductions
Todd AnglinChief Evangelist, TelerikMicrosoft MVPPresident NHDNUG & O’Reilly Author
@toddanglin
TelerikWatch.com
TelerikComplete provider of development planning, construction & testing tools
UI DATA PRODUCTIVITY TESTING TFS CMS
the “plan”the
options
the browser
sHTML5
use it todayA&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
which browsers matter?
of internet browses withIE, FF, Safari, Chrome, or Opera
99%
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
?
DEMODEMO
HTML5 Test + IE9
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
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>
input typestag: time, date, search, email, etc.
<form><input type="email" autofocus="autofocus"
placeholder="Enter your email" /></form>
support: 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
local storageapi: sessionStorage & localStoarge
<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
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: Safari, Chrome, Firefox, (Opera 10.7)
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
offlinetag: <html manifest="html5demo.manifest">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
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
· · ✓ ✓ ✓ ✓ ✓
<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
CSS3 &JavaScript
jQuery
DEMODEMO
CSS3 Demos
how do you use HTML5 today?
modernizer
progressiveenhancementgracefuldegradation
DEMODEMO
PE & GD Examples
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
Resources
• Quotes– http://www.apple.com/hotnews/thoughts-on-flash/– http://www.dailytech.com/Adobes+CEO+Responds+to+Steve+Jobs+Rant+about+Flash/a
rticle18267.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/
Related Documents
