SlideShare une entreprise Scribd logo
1  sur  48
Télécharger pour lire hors ligne
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
TelerikWatch.com
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
the past behind.”
-Steve Jobs
April, 2010
<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 Great
Evolution Good Good Poor*
Tools Fair Great Eh…
HTML5
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
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
<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
The Rich Standard: Getting Familiar with HTML5
which browsers matter?
of internet browses with
IE, FF, Safari, Chrome, or Opera
99%
The Rich Standard: Getting Familiar with HTML5
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
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>
</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 types
tag: time, date, search, email, etc.
<form>
<input type="email" autofocus="autofocus"
placeholder="Enter your email" />
</form>
support: Safari, Chrome, Opera
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
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.setItem('value', this.value);
sessionStorage.getItem(‘value’);
sessionStorage.clear();
localStorage.clear();
</script>
support: IE9, FF3.5, Safari, Chrome, Opera
5 MB limit
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)
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
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
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
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>
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
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
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 world is headed.
-Shantanu Narayen
April, 2010
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+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/

Contenu connexe

Tendances

Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Peter Lubbers
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Zi Bin Cheah
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An OverviewNagendra Um
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDee Sadler
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introductiondynamis
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrapfreshlybakedpixels
 
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine DevelopmentEECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine DevelopmentFortySeven Media
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5Steven Chipman
 
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!Christian Heilmann
 
HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)Peter Lubbers
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5Robert Nyman
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And ProtocolsSteven Cahill
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Adam Dunford
 
What the heck is HTML 5?
What the heck is HTML 5?What the heck is HTML 5?
What the heck is HTML 5?Simon Willison
 

Tendances (20)

Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
 
HTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 TemplateHTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 Template
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introduction
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
 
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine DevelopmentEECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
 
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!
 
HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)
 
HTML5
HTML5HTML5
HTML5
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And Protocols
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
 
What the heck is HTML 5?
What the heck is HTML 5?What the heck is HTML 5?
What the heck is HTML 5?
 
Web Standards
Web StandardsWeb Standards
Web Standards
 

Similaire à The Rich Standard: Getting Familiar with HTML5

Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010Patrick Lauke
 
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010Patrick Lauke
 
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet![edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!Christopher Schmitt
 
HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010Patrick Lauke
 
HTML5 Presentation
HTML5 PresentationHTML5 Presentation
HTML5 Presentationvs4vijay
 
Developing web applications in 2010
Developing web applications in 2010Developing web applications in 2010
Developing web applications in 2010Ignacio Coloma
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebGeorge Kanellopoulos
 
HTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're goingHTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're goingbrucelawson
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 

Similaire à The Rich Standard: Getting Familiar with HTML5 (20)

Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
 
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
 
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
 
HTML5 Design
HTML5 DesignHTML5 Design
HTML5 Design
 
Using HTML5 sensibly
Using HTML5 sensiblyUsing HTML5 sensibly
Using HTML5 sensibly
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet![edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
 
Html5 & less css
Html5 & less cssHtml5 & less css
Html5 & less css
 
HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
 
Fundamentals of HTML5
Fundamentals of HTML5Fundamentals of HTML5
Fundamentals of HTML5
 
HTML5 Presentation
HTML5 PresentationHTML5 Presentation
HTML5 Presentation
 
Developing web applications in 2010
Developing web applications in 2010Developing web applications in 2010
Developing web applications in 2010
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 
HTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're goingHTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're going
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 

Plus de Todd Anglin

NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularNativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularTodd Anglin
 
Making HTML5 Work Everywhere
Making HTML5 Work EverywhereMaking HTML5 Work Everywhere
Making HTML5 Work EverywhereTodd Anglin
 
Developing a Modern Mobile App Strategy
Developing a Modern Mobile App StrategyDeveloping a Modern Mobile App Strategy
Developing a Modern Mobile App StrategyTodd Anglin
 
5 Tips for Better JavaScript
5 Tips for Better JavaScript5 Tips for Better JavaScript
5 Tips for Better JavaScriptTodd Anglin
 
50in50: Resources for HTML5, CSS3, & JavaScript Developers
50in50: Resources for HTML5, CSS3, & JavaScript Developers50in50: Resources for HTML5, CSS3, & JavaScript Developers
50in50: Resources for HTML5, CSS3, & JavaScript DevelopersTodd Anglin
 
Using HTML5 to Build Mobile Apps
Using HTML5 to Build Mobile AppsUsing HTML5 to Build Mobile Apps
Using HTML5 to Build Mobile AppsTodd Anglin
 
HTML5 for Tablets and Mobile
HTML5 for Tablets and MobileHTML5 for Tablets and Mobile
HTML5 for Tablets and MobileTodd Anglin
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersTodd Anglin
 
Building RESTful Applications with OData
Building RESTful Applications with ODataBuilding RESTful Applications with OData
Building RESTful Applications with ODataTodd Anglin
 
Building a Testable Data Access Layer
Building a Testable Data Access LayerBuilding a Testable Data Access Layer
Building a Testable Data Access LayerTodd Anglin
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayTodd Anglin
 
What’s New in ASP.NET 4
What’s New in ASP.NET 4What’s New in ASP.NET 4
What’s New in ASP.NET 4Todd Anglin
 

Plus de Todd Anglin (12)

NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularNativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
 
Making HTML5 Work Everywhere
Making HTML5 Work EverywhereMaking HTML5 Work Everywhere
Making HTML5 Work Everywhere
 
Developing a Modern Mobile App Strategy
Developing a Modern Mobile App StrategyDeveloping a Modern Mobile App Strategy
Developing a Modern Mobile App Strategy
 
5 Tips for Better JavaScript
5 Tips for Better JavaScript5 Tips for Better JavaScript
5 Tips for Better JavaScript
 
50in50: Resources for HTML5, CSS3, & JavaScript Developers
50in50: Resources for HTML5, CSS3, & JavaScript Developers50in50: Resources for HTML5, CSS3, & JavaScript Developers
50in50: Resources for HTML5, CSS3, & JavaScript Developers
 
Using HTML5 to Build Mobile Apps
Using HTML5 to Build Mobile AppsUsing HTML5 to Build Mobile Apps
Using HTML5 to Build Mobile Apps
 
HTML5 for Tablets and Mobile
HTML5 for Tablets and MobileHTML5 for Tablets and Mobile
HTML5 for Tablets and Mobile
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
 
Building RESTful Applications with OData
Building RESTful Applications with ODataBuilding RESTful Applications with OData
Building RESTful Applications with OData
 
Building a Testable Data Access Layer
Building a Testable Data Access LayerBuilding a Testable Data Access Layer
Building a Testable Data Access Layer
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
 
What’s New in ASP.NET 4
What’s New in ASP.NET 4What’s New in ASP.NET 4
What’s New in ASP.NET 4
 

Dernier

The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 

Dernier (20)

The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 

The Rich Standard: Getting Familiar with HTML5

  • 1. the RICH STANDARD: GETTING familiar with HTML5 by Todd Anglin @telerik facebook.com/telerik
  • 2. Introductions Todd Anglin Chief Evangelist, Telerik Microsoft MVP President NHDNUG & O’Reilly Author @toddanglin TelerikWatch.com
  • 3. Telerik Complete provider of development planning, construction & testing tools UI DATA PRODUCTIVITY TESTING TFS CMS
  • 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
  • 7. what do these *platforms* have in common?
  • 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. famously dead* proprietary platforms PowerBuilder OS/2 ColdFusion WinForms VB6 FoxPro OS 9 BeOS
  • 11. when will HTML5 be “official?”
  • 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
  • 14. the basics • <!DOCTYPE html> • 9 new “structure” tags • 16 new HTML elements • 13 new <input> types
  • 17. video audio history semantic tags canvas offline local storage drag & drop geolocation sockets editing web workers
  • 19. which browsers matter? of internet browses with IE, FF, Safari, Chrome, or Opera 99%
  • 21. 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
  • 24. 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
  • 25. 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>
  • 26. input types tag: time, date, search, email, etc. <form> <input type="email" autofocus="autofocus" placeholder="Enter your email" /> </form> support: Safari, Chrome, Opera
  • 27. 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
  • 28. fixing IE <head> <!--[if IE]> <script src="excanvas.js"></script> <![endif]--> </head> Explorercanvas
  • 29. 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
  • 30. 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)
  • 31. 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
  • 32. 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
  • 33. 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
  • 34. 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>
  • 35. WebM Royalty Free VP8/Vorbis support: IE9, FF3.5, Safari*, Chrome, Opera
  • 38. how do you use HTML5 today?
  • 43. DEMO PE & GD Examples
  • 44. should I use HTML5 today?
  • 45. 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
  • 46. The future of the web is HTML5. -Dean Hachamovitch April, 2010
  • 48. 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/

Notes de l'éditeur

  1. 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.
  2. Company History
  3. http://www.apple.com/hotnews/thoughts-on-flash/
  4. Talk about the major “platforms” for the web. Introduce the players.
  5. Looking for people to identify that Flash, Silverlight, and HTML5 are all competing to deliver the rich web
  6. 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)
  7. 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
  8. http://html5demos.com/
  9. http://marketshare.hitslink.com/browser-market-share.aspx?qprid=1
  10. http://caniuse.com/ http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5) http://html5test.com/
  11. 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
  12. 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
  13. http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
  14. http://code.google.com/p/explorercanvas/
  15. http://html5demos.com/storage
  16. 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
  17. 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
  18. http://html5demos.com/offlineapp http://diveintohtml5.org/offline.html
  19. http://diveintohtml5.org/video.html
  20. 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
  21. http://www.modernizr.com/
  22. http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html http://www.filamentgroup.com/examples/slider/index2UI.php
  23. http://www.dailytech.com/Adobes+CEO+Responds+to+Steve+Jobs+Rant+about+Flash/article18267.htm
  24. http://blogs.msdn.com/ie/archive/2010/04/29/html5-video.aspx