the RICH
STANDARD:
GETTING
familiar with
HTML5
by Todd Anglin
@telerik
facebook.com/telerik
Introductions
Todd Anglin
Chief Evangelist, Telerik
Microsoft MVP
President NHDNUG & O’Reilly Author
@toddanglin
TelerikWa...
Telerik
Complete provider of
development planning,
construction & testing tools
UI DATA PRODUCTIVITY TESTING TFS CMS
the “plan”
the
options
the
browsers
HTML5
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
t...
<HTML5 ?>
what do these *platforms*
have in common?
the rich web
Video Great Great Good
Audio Great Great Good
Animation Great Great Fair
Proprietary Yes Yes No
Availability Good Fair Gre...
famously dead* proprietary platforms
PowerBuilder
OS/2
ColdFusion
WinForms
VB6
FoxPro
OS 9
BeOS
when will HTML5 be “official?”
2022
October 2007
First W3C
Working Draft
October 2009
Last Call Working
Draft
2011
Call for test suite
contributions
2012...
<HTML5>
the basics
• <!DOCTYPE html>
• 9 new “structure” tags
• 16 new HTML elements
• 13 new <input> types
compatible
HTML
CSS+ +JavaScript
video audio history
semantic
tags
canvas offline
local
storage
drag &
drop
geolocation
sockets editing
web
workers
which browsers matter?
of internet browses with
IE, 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'...
html5test.com
DEMO
HTML5 Test + IE9
semantic tags
tag: <header> <footer> <nav> <article> <hgroup>
<header>
<hgroup>
<h1>My Site</h1>
<h2>My site tag line</h2>...
fixing IE
<head>
<meta charset="utf-8" />
<title>My Weblog</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlec...
input types
tag: time, date, search, email, etc.
<form>
<input type="email" autofocus="autofocus"
placeholder="Enter your ...
canvas
tag: <canvas />
<canvas id=“b" width="300" height="225"></canvas>
function draw_b() {
var b_canvas = document.getEl...
fixing IE
<head>
<!--[if IE]>
<script src="excanvas.js"></script>
<![endif]-->
</head>
Explorercanvas
local storage
api: sessionStorage & localStoarge
<script>
sessionStorage.setItem('value', this.value);
localStorage.setIte...
web sockets
api: WebSocket
ws = new WebSocket("ws://localhost:8282/test”);
ws.onopen = WSonOpen;
ws.onmessage = WSonMessag...
web sql
api: openDatabase
db = openDatabase("html5demos", "1.0", "HTML 5 Database API example",
200000);
if (db) {
db.tran...
offline
tag: <html manifest="html5demo.manifest">
type: text/cache-manifest
CACHE MANIFEST
# Files you want cached for you...
video
tag: <video />
<!-- Single video -->
<video src="mymovie.mp4" width="320" height="240"></video>
<!-- Multiple encode...
video for all browsers
1. Multiple encodings
2. Graceful degradation
CODECS/
CONTAINER
FIREFOX OPERA CHROME IE9 SAFARI IPH...
WebM
Royalty Free
VP8/Vorbis
support: IE9, FF3.5, Safari*, Chrome, Opera
CSS3 &
JavaScript
DEMO
CSS3 Demos
how do you use HTML5 today?
modernizer
progressive
enhancement
graceful
degradation
DEMO
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 future of the
web is HTML5.
-Dean Hachamovitch
April, 2010
thanks!
@toddanglin
telerikwatch.com
anglin@telerik.com
Resources
• Quotes
– http://www.apple.com/hotnews/thoughts-on-flash/
– http://www.dailytech.com/Adobes+CEO+Responds+to+Ste...
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
Upcoming SlideShare
Loading in...5
×

The Rich Standard: Getting Familiar with HTML5

7,817

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,817
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
41
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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.
  • Company History
  • 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 HTML5

    Fun 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-compatible
  • http://html5demos.com/
  • http://marketshare.hitslink.com/browser-market-share.aspx?qprid=1
  • http://caniuse.com/

    http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

    http://html5test.com/

  • http://www.w3.org/TR/html5/text-level-semantics.html

    http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf

    http://gsnedders.html5.org/outliner

    http://diveintohtml5.org/examples/blog-original.html

    http://visualstudiogallery.msdn.microsoft.com/en-us/d771cbc8-d60a-40b0-a1d8-f19fc393127d
  • http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#states-of-the-type-attribute

    http://www.html5laboratory.com/s/simple-html5-contact-form.html
  • http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
  • http://code.google.com/p/explorercanvas/
  • http://html5demos.com/storage
  • Example code for .NET WebSockets:
    http://www.undisciplinedbytes.com/2010/06/html-5-c-web-sockets-server-and-asp-net-client-implementation/

    Opera on Sockets:
    http://my.opera.com/core/blog/websockets

  • 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-storage

    Replacement Tech is IndexedDB:
    http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html
  • http://html5demos.com/offlineapp

    http://diveintohtml5.org/offline.html
  • http://diveintohtml5.org/video.html
  • http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html

    http://paulbakaus.com/lab/js/coverflow/

    http://www.cssplay.co.uk/menu/css3-animation.html

    http://anthonycalzadilla.com/css3-ATAT/index.html
  • http://www.modernizr.com/
  • http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html

    http://www.filamentgroup.com/examples/slider/index2UI.php

  • 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
  • The Rich Standard: Getting Familiar with HTML5

    1. 1. the RICH STANDARD: GETTING familiar with HTML5 by Todd Anglin @telerik facebook.com/telerik
    2. 2. Introductions Todd Anglin Chief Evangelist, Telerik Microsoft MVP President NHDNUG & O’Reilly Author @toddanglin TelerikWatch.com
    3. 3. Telerik Complete provider of development planning, construction & testing tools UI DATA PRODUCTIVITY TESTING TFS CMS
    4. 4. the “plan” the options the browsers HTML5 use it today A&Q
    5. 5. “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
    6. 6. <HTML5 ?>
    7. 7. what do these *platforms* have in common?
    8. 8. the rich web
    9. 9. 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
    10. 10. famously dead* proprietary platforms PowerBuilder OS/2 ColdFusion WinForms VB6 FoxPro OS 9 BeOS
    11. 11. when will HTML5 be “official?”
    12. 12. 2022 October 2007 First W3C Working Draft October 2009 Last Call Working Draft 2011 Call for test suite contributions 2012 Candidate Recommendation 2012 First draft of test suite 2015 Second draft of test suite 2019 Final version of test suite. 2020 Reissued Last Call Working Draft 2022 Proposed Recommendation
    13. 13. <HTML5>
    14. 14. the basics • <!DOCTYPE html> • 9 new “structure” tags • 16 new HTML elements • 13 new <input> types
    15. 15. compatible
    16. 16. HTML CSS+ +JavaScript
    17. 17. video audio history semantic tags canvas offline local storage drag & drop geolocation sockets editing web workers
    18. 18. which browsers matter? of internet browses with IE, FF, Safari, Chrome, or Opera 99%
    19. 19. 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 Hachamovitch General Manager, IE Team
    20. 20. html5test.com
    21. 21. DEMO HTML5 Test + IE9
    22. 22. semantic tags tag: <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
    23. 23. 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>
    24. 24. input types tag: time, date, search, email, etc. <form> <input type="email" autofocus="autofocus" placeholder="Enter your email" /> </form> support: Safari, Chrome, Opera
    25. 25. canvas tag: <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
    26. 26. fixing IE <head> <!--[if IE]> <script src="excanvas.js"></script> <![endif]--> </head> Explorercanvas
    27. 27. local storage api: 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
    28. 28. web sockets api: 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)
    29. 29. web sql api: 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
    30. 30. offline tag: <html manifest="html5demo.manifest"> type: text/cache-manifest CACHE MANIFEST # Files you want cached for your app to work offline myLogo.jpg //Interacting with cache window.applicationCache.update(); alert(window.applicationCache.status); support: FF3.5, Safari, Chrome
    31. 31. video tag: <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
    32. 32. 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>
    33. 33. WebM Royalty Free VP8/Vorbis support: IE9, FF3.5, Safari*, Chrome, Opera
    34. 34. CSS3 & JavaScript
    35. 35. DEMO CSS3 Demos
    36. 36. how do you use HTML5 today?
    37. 37. modernizer
    38. 38. progressive enhancement graceful degradation
    39. 39. DEMO PE & GD Examples
    40. 40. should I use HTML5 today?
    41. 41. 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
    42. 42. The future of the web is HTML5. -Dean Hachamovitch April, 2010
    43. 43. thanks! @toddanglin telerikwatch.com anglin@telerik.com
    44. 44. Resources • Quotes – http://www.apple.com/hotnews/thoughts-on-flash/ – http://www.dailytech.com/Adobes+CEO+Responds+to+Steve+Jobs+Rant+about+Flash/article182 67.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/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×