SlideShare a Scribd company logo
1 of 120
Download to read offline
HTML 5
 and friends
2022
Queen
Elizabeth II
Platinum
Jubilee
HTML5 & Friends
2022 =
 two completely
  interoperable
implementations
CSS 2.1
Last call:
October 2009
Get Involved
whatwgwg.org/mailing-list

irc://irc.freenode.net/#whatwg

whatwg.org/html5

dev.w3.org/html5
html5doctor.com

html5demos.com
HTML 5
in 5 seconds
<!DOCTYPE html>
What about
 XHTML?
“pave the cowpaths”


    http://www.w3.org/TR/html-design-principles/#pave-the-cowpaths
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type"
 content="text/html; charset=utf-8"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type"
    content="text/html; charset=utf-8"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<style>
 article, aside, dialog,
 figure, footer, header,
 hgroup, menu, nav,
 section {
   display: block;
 }
</style>
HTML5 & Friends
HTML5 & Friends
document.createElement
document.createElement(‘article’);
document.createElement(‘nav’);
document.createElement(‘section’);
document.createElement(‘header’);
document.createElement(‘footer’);
...
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<!-- we’re ready for HTML 5 goodness now -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<!-- we’re ready for HTML 5 goodness now -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<!-- we’re ready for HTML 5 goodness now -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<!-- we’re ready for HTML 5 goodness now -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<!-- we’re ready for HTML 5 goodness now -->
</body>
</html>
Firefox 2
& Camino 1
Firefox 2
    & Camino 1
...are not A-grade browsers.
HTML 5
Language
Language
HTML5 & Friends
•Layout: header, hgroup,
 footer, section, article, nav,
 menu, dialog, aside
•Layout: header, hgroup,
 footer, section, article, nav,
 menu, dialog, aside

• Inline: time, details,
 figure, mark
•Layout: header, hgroup,
 footer, section, article, nav,
 menu, dialog, aside

• Inline: time, details,
 figure, mark

• Interactive: audio, video,
 (source), canvas, datagrid*
Marking up
   with thanks to Bruce!
HTML5 & Friends
HTML5 & Friends
A Blog Post

Credit: fujinonbinos.com
HTML5 & Friends
Native Media
 Elements
<object classid="clsid:d27cdb6e-a
height="344" codebase="http://dow
flash/swflash.cab#version=6,0,40,
<param name="allowFullScreen" val
<param name="allowscriptaccess" v
<param name="src" value="http://w
<param name="allowfullscreen" val
<embed type="application/x-shockw
src="http://www.youtube.com/v/oHg
allowscriptaccess="always" allowf
</embed>
</object>
<video width="425" height="344">
 <source src="dancing_cats.ogg" />
 <source src="dancing_cats.mp4" />
</video>
http://open.bbc.co.uk/rad/demos/html5/rdtv/episode2/
http://open.bbc.co.uk/rad/demos/html5/rdtv/episode2/
HTML5 & Friends
<video>
 <!-- native support -->
 <source />

 <!-- QuickTime support -->
 <object><param></object>

 <!-- fail down to flash -->
 <object><param></object>
</video>
<video>
 <!-- native support -->
 <source />

 <!-- QuickTime support -->
 <object><param></object>

 <!-- fail down to flash -->
 <object><param></object>
</video>
<video>
 <!-- native support -->
 <source />

 <!-- QuickTime support -->
 <object><param></object>

 <!-- fail down to flash -->
 <object><param></object>
</video>
<video>
 <!-- native support -->
 <source />

 <!-- QuickTime support -->
 <object><param></object>

 <!-- fail down to flash -->
 <object><param></object>
</video>
<video>
 <!-- native support -->
 <source />

 <!-- QuickTime support -->
 <object><param></object>

 <!-- fail down to flash -->
 <object><param></object>
</video>
Things that make me go 'Aay:


       •dirt easy doctype
       •a element wraps
         anything

       •video & audio
       •Possibility for cross
         ARIA support
HTML5 & Friends
Stuff that sucks
Stuff that sucks

•legend - in figure & details
Stuff that sucks

•legend - in figure & details
•small - should be like a, ins & del
Stuff that sucks

•legend - in figure & details
•small - should be like a, ins & del
•canvas accessibility
Stuff that sucks

•legend - in figure & details
•small - should be like a, ins & del
•canvas accessibility
•video codecs - no agreement
Stuff that sucks

•legend - in figure & details
•small - should be like a, ins & del
•canvas accessibility
•video codecs - no agreement
•The Vomit Bug
HTML 5 APIs
HTML 5 APIs
JavaScripty Stuff
•Canvas           •Geolocation
•Drag & Drop      •Local Storage
•History          •Selectors
•Inline Editing   •Server Events
•Messaging        •Web Sockets
•Offline Apps      •Workers
•Video & Audio
JavaScripty Stuff
•Canvas           •Geolocation
•Drag & Drop      •Local Storage
•History          •Selectors
•Inline Editing   •Server Events
•Messaging        •Web Sockets
•Offline Apps      •Workers
•Video & Audio
JavaScripty Stuff
•Canvas           •Geolocation
•Drag & Drop      •Local Storage
•History          •Selectors
•Inline Editing   •Server Events
•Messaging        •Web Sockets
•Offline Apps      •Workers
•Video & Audio
JavaScripty Stuff
•Canvas           •Geolocation
•Drag & Drop      •Local Storage
•History          •Selectors
•Inline Editing   •Server Events
•Messaging        •Web Sockets
•Offline Apps      •Workers
•Video & Audio
Canvas
var ctx = canvas.getContext('2d');

// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.addColorStop(0, '#E4E4E4');
grad.addColorStop(1, '#000');

// assign gradients to fill
ctx.fillStyle = grad;

// draw 600x600 fill
ctx.fillRect(0,0,600,600);
var ctx = canvas.getContext('2d');

// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.addColorStop(0, '#E4E4E4');
grad.addColorStop(1, '#000');

// assign gradients to fill
ctx.fillStyle = grad;

// draw 600x600 fill
ctx.fillRect(0,0,600,600);
var ctx = canvas.getContext('2d');

// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.addColorStop(0, '#E4E4E4');
grad.addColorStop(1, '#000');

// assign gradients to fill
ctx.fillStyle = grad;

// draw 600x600 fill
ctx.fillRect(0,0,600,600);
var ctx = canvas.getContext('2d');

// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.addColorStop(0, '#E4E4E4');
grad.addColorStop(1, '#000');

// assign gradients to fill
ctx.fillStyle = grad;

// draw 600x600 fill
ctx.fillRect(0,0,600,600);
var ctx = canvas.getContext('2d');

// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.addColorStop(0, '#E4E4E4');
grad.addColorStop(1, '#000');

// assign gradients to fill
ctx.fillStyle = grad;

// draw 600x600 fill
ctx.fillRect(0,0,600,600);
HTML5 & Friends
http://9elements.com/io/projects/html5/canvas/
http://9elements.com/io/projects/html5/canvas/
Drag'n Drop
Drag & Drop
•Events: dragover, dragenter, drop
•event.transferData contains
  strings
•Links & Images draggable by
  default
•Anything else: draggable="true"*
var drop = document.querySelector('#drop');

// Tells browser that we can drop on this target
addEvent(drop, 'dragover', cancelEvent);
addEvent(drop, 'dragenter', cancelEvent);

addEvent(drop, 'drop', function (event) {
  // stops browser from redirecting to the text.
  if (event.preventDefault) {
    event.preventDefault();
  }

  alert( event.dataTransfer.getData('Text') );

  return false;
});

function cancelEvent(event) {
  if (event.preventDefault) {
    event.preventDefault();
  }
  return false;
}
var drop = document.querySelector('#drop');

// Tells browser that we can drop on this target
addEvent(drop, 'dragover', cancelEvent);
addEvent(drop, 'dragenter', cancelEvent);

addEvent(drop, 'drop', function (event) {
  // stops browser from redirecting to the text.
  if (event.preventDefault) {
    event.preventDefault();
  }

  alert( event.dataTransfer.getData('Text') );

  return false;
});

function cancelEvent(event) {
  if (event.preventDefault) {
    event.preventDefault();
  }
  return false;
}
var drop = document.querySelector('#drop');

// Tells browser that we can drop on this target
addEvent(drop, 'dragover', cancelEvent);
addEvent(drop, 'dragenter', cancelEvent);

addEvent(drop, 'drop', function (event) {
  // stops browser from redirecting to the text.
  if (event.preventDefault) {
    event.preventDefault();
  }

  alert( event.dataTransfer.getData('Text') );

  return false;
});

function cancelEvent(event) {
  if (event.preventDefault) {
    event.preventDefault();
  }
  return false;
}
var drop = document.querySelector('#drop');

// Tells browser that we can drop on this target
addEvent(drop, 'dragover', cancelEvent);
addEvent(drop, 'dragenter', cancelEvent);

addEvent(drop, 'drop', function (event) {
  // stops browser from redirecting to the text.
  if (event.preventDefault) {
    event.preventDefault();
  }

  alert( event.dataTransfer.getData('Text') );

  return false;
});

function cancelEvent(event) {
  if (event.preventDefault) {
    event.preventDefault();
  }
  return false;
}
var drop = document.querySelector('#drop');

// Tells browser that we can drop on this target
addEvent(drop, 'dragover', cancelEvent);
addEvent(drop, 'dragenter', cancelEvent);

addEvent(drop, 'drop', function (event) {
  // stops browser from redirecting to the text.
  if (event.preventDefault) {
    event.preventDefault();
  }

  alert( event.dataTransfer.getData('Text') );

  return false;
});

function cancelEvent(event) {
  if (event.preventDefault) {
    event.preventDefault();
  }
  return false;
}
var drop = document.querySelector('#drop');

// Tells browser that we can drop on this target
addEvent(drop, 'dragover', cancelEvent);
addEvent(drop, 'dragenter', cancelEvent);

addEvent(drop, 'drop', function (event) {
  // stops browser from redirecting to the text.
  if (event.preventDefault) {
    event.preventDefault();
  }

  alert( event.dataTransfer.getData('Text') );

  return false;
});

function cancelEvent(event) {
  if (event.preventDefault) {
    event.preventDefault();
  }
  return false;
}
var drop = document.querySelector('#drop');

// Tells browser that we can drop on this target
addEvent(drop, 'dragover', cancelEvent);
addEvent(drop, 'dragenter', cancelEvent);

addEvent(drop, 'drop', function (event) {
  // stops browser from redirecting to the text.
  if (event.preventDefault) {
    event.preventDefault();
  }

  alert( event.dataTransfer.getData('Text') );

  return false;
});

function cancelEvent(event) {
  if (event.preventDefault) {
    event.preventDefault();
  }
  return false;
}
<style>
  [draggable=true] {
    -khtml-user-drag: element;
  }
</style>

<div draggable="true">drag me</div>

<script>
var items =
document.querySelectorAll('[draggable=true]');

for (var i = 0; i < dragItems.length; i++) {
  addEvent(items[i],'dragstart',function(event) {
     event.dataTransfer.setData('Text', this.id);
   });
}
</script>
<style>
  [draggable=true] {
    -khtml-user-drag: element;
  }
</style>

<div draggable="true">drag me</div>

<script>
var items =
document.querySelectorAll('[draggable=true]');

for (var i = 0; i < dragItems.length; i++) {
  addEvent(items[i],'dragstart',function(event) {
     event.dataTransfer.setData('Text', this.id);
   });
}
</script>
<style>
  [draggable=true] {
    -khtml-user-drag: element;
  }
</style>

<div draggable="true">drag me</div>

<script>
var items =
document.querySelectorAll('[draggable=true]');

for (var i = 0; i < dragItems.length; i++) {
  addEvent(items[i],'dragstart',function(event) {
     event.dataTransfer.setData('Text', this.id);
   });
}
</script>
<style>
  [draggable=true] {
    -khtml-user-drag: element;
  }
</style>

<div draggable="true">drag me</div>

<script>
var items =
document.querySelectorAll('[draggable=true]');

for (var i = 0; i < dragItems.length; i++) {
  addEvent(items[i],'dragstart',function(event) {
     event.dataTransfer.setData('Text', this.id);
   });
}
</script>
<style>
  [draggable=true] {
    -khtml-user-drag: element;
  }
</style>

<div draggable="true">drag me</div>

<script>
var items =
document.querySelectorAll('[draggable=true]');

for (var i = 0; i < dragItems.length; i++) {
  addEvent(items[i],'dragstart',function(event) {
     event.dataTransfer.setData('Text', this.id);
   });
}
</script>
<style>
  [draggable=true] {
    -khtml-user-drag: element;
  }
</style>

<div draggable="true">drag me</div>

<script>
var items =
document.querySelectorAll('[draggable=true]');

for (var i = 0; i < dragItems.length; i++) {
  addEvent(items[i],'dragstart',function(event) {
     event.dataTransfer.setData('Text', this.id);
   });
}
</script>
<style>
  [draggable=true] {
    -khtml-user-drag: element;
  }
</style>

<div draggable="true">drag me</div>

<script>
var items =
document.querySelectorAll('[draggable=true]');

for (var i = 0; i < dragItems.length; i++) {
  addEvent(items[i],'dragstart',function(event) {
     event.dataTransfer.setData('Text', this.id);
   });
}
</script>
http://html5demos.com/drag
http://html5demos.com/drag
Offline Applications
Offline Apps


•Application cache
•Events: offline, online
•navigator.onLine property
Enable

<html
manifest="my.manifest"
>
my.manifest

CACHE MANIFEST
images/shade.jpg
images/bin.jpg
Cache

•First line: CACHE MANIFEST
•Requires text/cache-manifest
•Recommend using versioning
•window.applicationCache
Cache

•On load will request my.manifest
Cache

•On load will request my.manifest
•Change manifest: trigger reload
Cache

•On load will request my.manifest
•Change manifest: trigger reload
•applicationCache.update() force
Cache

•On load will request my.manifest
•Change manifest: trigger reload
•applicationCache.update() force
•Cache events
HTML5 & Friends
HTML5 & Friends
Geolocation
Not always accurate!
HTML5 & Friends
navigator
  .geolocation
  .getCurrentPosition(
     success,
     err
  );
HTML5 & Friends
Web Workers
•Threads
•Threads
•Native or via Gears
•Threads
•Native or via Gears
•Sandboxed
•Threads
•Native or via Gears
•Sandboxed
•Debugging?
Without
http://html5demos.com/worker
And a

lot
more...
HTML5 & Friends
Attributes: data-*, itemProp,
sandbox (on iframes)

<progress>       Microdata API,
<meter>          datagrid, XHR2,
<datalist>       Database Storage
<ruby>
Web Forms 2.0:       querySelector
client validation,
new input types,       ARIA overlap
date time pickers
Remy
Sharp
@rem
remy@leftlogic.com

html5demos.com
html5doctor.com

JavaScript Conference:
full-frontal.org



Photos by
nesster, adactio, badlogik,
f_mafra, dearbarbie, ilcello,
thefangmonster, anniewong,
aztlek, emeraldrose

More Related Content

What's hot (20)

Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Empower your App by Inheriting from Odoo Mixins
Empower your App by Inheriting from Odoo MixinsEmpower your App by Inheriting from Odoo Mixins
Empower your App by Inheriting from Odoo Mixins
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
 
Css lecture notes
Css lecture notesCss lecture notes
Css lecture notes
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
Div tag presentation
Div tag presentationDiv tag presentation
Div tag presentation
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
CSS Positioning Elements.pdf
CSS Positioning Elements.pdfCSS Positioning Elements.pdf
CSS Positioning Elements.pdf
 
Fetch API Talk
Fetch API TalkFetch API Talk
Fetch API Talk
 
javaScript.ppt
javaScript.pptjavaScript.ppt
javaScript.ppt
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
 
Css
CssCss
Css
 
html-css
html-csshtml-css
html-css
 
Introduction to Apache Solr
Introduction to Apache SolrIntroduction to Apache Solr
Introduction to Apache Solr
 
HTML & CSS Masterclass
HTML & CSS MasterclassHTML & CSS Masterclass
HTML & CSS Masterclass
 
Css Basics
Css BasicsCss Basics
Css Basics
 
Xml http request
Xml http requestXml http request
Xml http request
 

Viewers also liked

HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookScottperrone
 
The Future of the Web: HTML5
The Future of the Web: HTML5The Future of the Web: HTML5
The Future of the Web: HTML5Derek Bender
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshellLennart Schoors
 
Computer virus
Computer virusComputer virus
Computer viruskiran_a_c
 
Html5 with SharePoint 2010
Html5 with SharePoint 2010Html5 with SharePoint 2010
Html5 with SharePoint 2010Hemant Joshi
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5osa_ora
 
virus programming using batch file
virus programming using batch filevirus programming using batch file
virus programming using batch fileAris Suryadi
 
Hello world program
Hello world programHello world program
Hello world programSpy Seat
 
Batch file programming
Batch file programmingBatch file programming
Batch file programmingswapnil kapate
 
Gears and HTML 5 @media Ajax London 2008
Gears and HTML 5 @media Ajax London 2008Gears and HTML 5 @media Ajax London 2008
Gears and HTML 5 @media Ajax London 2008dion
 
History of Creationism, Parts II & III
History of Creationism, Parts II & IIIHistory of Creationism, Parts II & III
History of Creationism, Parts II & IIIJohn Lynch
 
The Scientific Revolution
The Scientific RevolutionThe Scientific Revolution
The Scientific RevolutionJohn Lynch
 
Dc parent 14 2
Dc parent 14 2Dc parent 14 2
Dc parent 14 2mtaft
 

Viewers also liked (20)

HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - Ebook
 
HTML5
HTML5HTML5
HTML5
 
The Future of the Web: HTML5
The Future of the Web: HTML5The Future of the Web: HTML5
The Future of the Web: HTML5
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
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
 
Computer virus
Computer virusComputer virus
Computer virus
 
Security
SecuritySecurity
Security
 
Html5 with SharePoint 2010
Html5 with SharePoint 2010Html5 with SharePoint 2010
Html5 with SharePoint 2010
 
Zeus
ZeusZeus
Zeus
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5
 
virus programming using batch file
virus programming using batch filevirus programming using batch file
virus programming using batch file
 
Hello world program
Hello world programHello world program
Hello world program
 
Jsf2 html5-jazoon
Jsf2 html5-jazoonJsf2 html5-jazoon
Jsf2 html5-jazoon
 
Batch file programming
Batch file programmingBatch file programming
Batch file programming
 
HTML 5 & CSS 3
HTML 5 & CSS 3HTML 5 & CSS 3
HTML 5 & CSS 3
 
Gears and HTML 5 @media Ajax London 2008
Gears and HTML 5 @media Ajax London 2008Gears and HTML 5 @media Ajax London 2008
Gears and HTML 5 @media Ajax London 2008
 
History of Creationism, Parts II & III
History of Creationism, Parts II & IIIHistory of Creationism, Parts II & III
History of Creationism, Parts II & III
 
simple-sorting algorithms
simple-sorting algorithmssimple-sorting algorithms
simple-sorting algorithms
 
The Scientific Revolution
The Scientific RevolutionThe Scientific Revolution
The Scientific Revolution
 
Dc parent 14 2
Dc parent 14 2Dc parent 14 2
Dc parent 14 2
 

Similar to HTML5 & Friends

What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5Kevin DeRudder
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)Shumpei Shiraishi
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An OverviewNagendra Um
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & FeaturesDave Ross
 
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Cengage Learning
 
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
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?Remy Sharp
 
HTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsIvano Malavolta
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is nowGonzalo Cordero
 

Similar to HTML5 & Friends (20)

What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
Html5 public
Html5 publicHtml5 public
Html5 public
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
 
Html5
Html5Html5
Html5
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
 
Html5 intro
Html5 introHtml5 intro
Html5 intro
 
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
 
HTML5: Introduction
HTML5: IntroductionHTML5: Introduction
HTML5: Introduction
 
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を考える
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
 
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tourHTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
 
HTML5 JS APIs
HTML5 JS APIsHTML5 JS APIs
HTML5 JS APIs
 
HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
 
HTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile apps
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
 

More from Remy Sharp

HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreRemy Sharp
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQueryRemy Sharp
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Remy Sharp
 
Forget the Web
Forget the WebForget the Web
Forget the WebRemy Sharp
 
Interaction Implementation
Interaction ImplementationInteraction Implementation
Interaction ImplementationRemy Sharp
 
jQuery: out with the old, in with the new
jQuery: out with the old, in with the newjQuery: out with the old, in with the new
jQuery: out with the old, in with the newRemy Sharp
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?Remy Sharp
 
HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsHTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsRemy Sharp
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for MobileRemy Sharp
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with WingsRemy Sharp
 
Webapps without the web
Webapps without the webWebapps without the web
Webapps without the webRemy Sharp
 
codebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIscodebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIsRemy Sharp
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIsRemy Sharp
 
iPhone Appleless Apps
iPhone Appleless AppsiPhone Appleless Apps
iPhone Appleless AppsRemy Sharp
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009Remy Sharp
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do MoreRemy Sharp
 
jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009Remy Sharp
 
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryDOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryRemy Sharp
 
Prototype & jQuery
Prototype & jQueryPrototype & jQuery
Prototype & jQueryRemy Sharp
 

More from Remy Sharp (20)

HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
 
Forget the Web
Forget the WebForget the Web
Forget the Web
 
Interaction Implementation
Interaction ImplementationInteraction Implementation
Interaction Implementation
 
jQuery: out with the old, in with the new
jQuery: out with the old, in with the newjQuery: out with the old, in with the new
jQuery: out with the old, in with the new
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?
 
HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsHTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & sockets
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for Mobile
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
 
Webapps without the web
Webapps without the webWebapps without the web
Webapps without the web
 
TwitterLib.js
TwitterLib.jsTwitterLib.js
TwitterLib.js
 
codebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIscodebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIs
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIs
 
iPhone Appleless Apps
iPhone Appleless AppsiPhone Appleless Apps
iPhone Appleless Apps
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do More
 
jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009
 
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryDOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQuery
 
Prototype & jQuery
Prototype & jQueryPrototype & jQuery
Prototype & jQuery
 

Recently uploaded

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
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdfJamie (Taka) Wang
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
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
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
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
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
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
 

Recently uploaded (20)

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
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
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
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
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
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
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...
 

HTML5 & Friends

  • 1. HTML 5 and friends
  • 5. 2022 = two completely interoperable implementations
  • 11. HTML 5 in 5 seconds
  • 14. “pave the cowpaths” http://www.w3.org/TR/html-design-principles/#pave-the-cowpaths
  • 15. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  • 16. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  • 18. <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style>
  • 23. <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML 5 complete</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <!-- we’re ready for HTML 5 goodness now --> </body> </html>
  • 24. <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML 5 complete</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <!-- we’re ready for HTML 5 goodness now --> </body> </html>
  • 25. <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML 5 complete</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <!-- we’re ready for HTML 5 goodness now --> </body> </html>
  • 26. <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML 5 complete</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <!-- we’re ready for HTML 5 goodness now --> </body> </html>
  • 27. <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML 5 complete</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <!-- we’re ready for HTML 5 goodness now --> </body> </html>
  • 29. Firefox 2 & Camino 1 ...are not A-grade browsers.
  • 34. •Layout: header, hgroup, footer, section, article, nav, menu, dialog, aside
  • 35. •Layout: header, hgroup, footer, section, article, nav, menu, dialog, aside • Inline: time, details, figure, mark
  • 36. •Layout: header, hgroup, footer, section, article, nav, menu, dialog, aside • Inline: time, details, figure, mark • Interactive: audio, video, (source), canvas, datagrid*
  • 37. Marking up with thanks to Bruce!
  • 40. A Blog Post Credit: fujinonbinos.com
  • 43. <object classid="clsid:d27cdb6e-a height="344" codebase="http://dow flash/swflash.cab#version=6,0,40, <param name="allowFullScreen" val <param name="allowscriptaccess" v <param name="src" value="http://w <param name="allowfullscreen" val <embed type="application/x-shockw src="http://www.youtube.com/v/oHg allowscriptaccess="always" allowf </embed> </object>
  • 44. <video width="425" height="344"> <source src="dancing_cats.ogg" /> <source src="dancing_cats.mp4" /> </video>
  • 48. <video> <!-- native support --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
  • 49. <video> <!-- native support --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
  • 50. <video> <!-- native support --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
  • 51. <video> <!-- native support --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
  • 52. <video> <!-- native support --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
  • 53. Things that make me go 'Aay: •dirt easy doctype •a element wraps anything •video & audio •Possibility for cross ARIA support
  • 56. Stuff that sucks •legend - in figure & details
  • 57. Stuff that sucks •legend - in figure & details •small - should be like a, ins & del
  • 58. Stuff that sucks •legend - in figure & details •small - should be like a, ins & del •canvas accessibility
  • 59. Stuff that sucks •legend - in figure & details •small - should be like a, ins & del •canvas accessibility •video codecs - no agreement
  • 60. Stuff that sucks •legend - in figure & details •small - should be like a, ins & del •canvas accessibility •video codecs - no agreement •The Vomit Bug
  • 63. JavaScripty Stuff •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Offline Apps •Workers •Video & Audio
  • 64. JavaScripty Stuff •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Offline Apps •Workers •Video & Audio
  • 65. JavaScripty Stuff •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Offline Apps •Workers •Video & Audio
  • 66. JavaScripty Stuff •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Offline Apps •Workers •Video & Audio
  • 68. var ctx = canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000'); // assign gradients to fill ctx.fillStyle = grad; // draw 600x600 fill ctx.fillRect(0,0,600,600);
  • 69. var ctx = canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000'); // assign gradients to fill ctx.fillStyle = grad; // draw 600x600 fill ctx.fillRect(0,0,600,600);
  • 70. var ctx = canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000'); // assign gradients to fill ctx.fillStyle = grad; // draw 600x600 fill ctx.fillRect(0,0,600,600);
  • 71. var ctx = canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000'); // assign gradients to fill ctx.fillStyle = grad; // draw 600x600 fill ctx.fillRect(0,0,600,600);
  • 72. var ctx = canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000'); // assign gradients to fill ctx.fillStyle = grad; // draw 600x600 fill ctx.fillRect(0,0,600,600);
  • 77. Drag & Drop •Events: dragover, dragenter, drop •event.transferData contains strings •Links & Images draggable by default •Anything else: draggable="true"*
  • 78. var drop = document.querySelector('#drop'); // Tells browser that we can drop on this target addEvent(drop, 'dragover', cancelEvent); addEvent(drop, 'dragenter', cancelEvent); addEvent(drop, 'drop', function (event) { // stops browser from redirecting to the text. if (event.preventDefault) { event.preventDefault(); } alert( event.dataTransfer.getData('Text') ); return false; }); function cancelEvent(event) { if (event.preventDefault) { event.preventDefault(); } return false; }
  • 79. var drop = document.querySelector('#drop'); // Tells browser that we can drop on this target addEvent(drop, 'dragover', cancelEvent); addEvent(drop, 'dragenter', cancelEvent); addEvent(drop, 'drop', function (event) { // stops browser from redirecting to the text. if (event.preventDefault) { event.preventDefault(); } alert( event.dataTransfer.getData('Text') ); return false; }); function cancelEvent(event) { if (event.preventDefault) { event.preventDefault(); } return false; }
  • 80. var drop = document.querySelector('#drop'); // Tells browser that we can drop on this target addEvent(drop, 'dragover', cancelEvent); addEvent(drop, 'dragenter', cancelEvent); addEvent(drop, 'drop', function (event) { // stops browser from redirecting to the text. if (event.preventDefault) { event.preventDefault(); } alert( event.dataTransfer.getData('Text') ); return false; }); function cancelEvent(event) { if (event.preventDefault) { event.preventDefault(); } return false; }
  • 81. var drop = document.querySelector('#drop'); // Tells browser that we can drop on this target addEvent(drop, 'dragover', cancelEvent); addEvent(drop, 'dragenter', cancelEvent); addEvent(drop, 'drop', function (event) { // stops browser from redirecting to the text. if (event.preventDefault) { event.preventDefault(); } alert( event.dataTransfer.getData('Text') ); return false; }); function cancelEvent(event) { if (event.preventDefault) { event.preventDefault(); } return false; }
  • 82. var drop = document.querySelector('#drop'); // Tells browser that we can drop on this target addEvent(drop, 'dragover', cancelEvent); addEvent(drop, 'dragenter', cancelEvent); addEvent(drop, 'drop', function (event) { // stops browser from redirecting to the text. if (event.preventDefault) { event.preventDefault(); } alert( event.dataTransfer.getData('Text') ); return false; }); function cancelEvent(event) { if (event.preventDefault) { event.preventDefault(); } return false; }
  • 83. var drop = document.querySelector('#drop'); // Tells browser that we can drop on this target addEvent(drop, 'dragover', cancelEvent); addEvent(drop, 'dragenter', cancelEvent); addEvent(drop, 'drop', function (event) { // stops browser from redirecting to the text. if (event.preventDefault) { event.preventDefault(); } alert( event.dataTransfer.getData('Text') ); return false; }); function cancelEvent(event) { if (event.preventDefault) { event.preventDefault(); } return false; }
  • 84. var drop = document.querySelector('#drop'); // Tells browser that we can drop on this target addEvent(drop, 'dragover', cancelEvent); addEvent(drop, 'dragenter', cancelEvent); addEvent(drop, 'drop', function (event) { // stops browser from redirecting to the text. if (event.preventDefault) { event.preventDefault(); } alert( event.dataTransfer.getData('Text') ); return false; }); function cancelEvent(event) { if (event.preventDefault) { event.preventDefault(); } return false; }
  • 85. <style> [draggable=true] { -khtml-user-drag: element; } </style> <div draggable="true">drag me</div> <script> var items = document.querySelectorAll('[draggable=true]'); for (var i = 0; i < dragItems.length; i++) { addEvent(items[i],'dragstart',function(event) { event.dataTransfer.setData('Text', this.id); }); } </script>
  • 86. <style> [draggable=true] { -khtml-user-drag: element; } </style> <div draggable="true">drag me</div> <script> var items = document.querySelectorAll('[draggable=true]'); for (var i = 0; i < dragItems.length; i++) { addEvent(items[i],'dragstart',function(event) { event.dataTransfer.setData('Text', this.id); }); } </script>
  • 87. <style> [draggable=true] { -khtml-user-drag: element; } </style> <div draggable="true">drag me</div> <script> var items = document.querySelectorAll('[draggable=true]'); for (var i = 0; i < dragItems.length; i++) { addEvent(items[i],'dragstart',function(event) { event.dataTransfer.setData('Text', this.id); }); } </script>
  • 88. <style> [draggable=true] { -khtml-user-drag: element; } </style> <div draggable="true">drag me</div> <script> var items = document.querySelectorAll('[draggable=true]'); for (var i = 0; i < dragItems.length; i++) { addEvent(items[i],'dragstart',function(event) { event.dataTransfer.setData('Text', this.id); }); } </script>
  • 89. <style> [draggable=true] { -khtml-user-drag: element; } </style> <div draggable="true">drag me</div> <script> var items = document.querySelectorAll('[draggable=true]'); for (var i = 0; i < dragItems.length; i++) { addEvent(items[i],'dragstart',function(event) { event.dataTransfer.setData('Text', this.id); }); } </script>
  • 90. <style> [draggable=true] { -khtml-user-drag: element; } </style> <div draggable="true">drag me</div> <script> var items = document.querySelectorAll('[draggable=true]'); for (var i = 0; i < dragItems.length; i++) { addEvent(items[i],'dragstart',function(event) { event.dataTransfer.setData('Text', this.id); }); } </script>
  • 91. <style> [draggable=true] { -khtml-user-drag: element; } </style> <div draggable="true">drag me</div> <script> var items = document.querySelectorAll('[draggable=true]'); for (var i = 0; i < dragItems.length; i++) { addEvent(items[i],'dragstart',function(event) { event.dataTransfer.setData('Text', this.id); }); } </script>
  • 95. Offline Apps •Application cache •Events: offline, online •navigator.onLine property
  • 98. Cache •First line: CACHE MANIFEST •Requires text/cache-manifest •Recommend using versioning •window.applicationCache
  • 99. Cache •On load will request my.manifest
  • 100. Cache •On load will request my.manifest •Change manifest: trigger reload
  • 101. Cache •On load will request my.manifest •Change manifest: trigger reload •applicationCache.update() force
  • 102. Cache •On load will request my.manifest •Change manifest: trigger reload •applicationCache.update() force •Cache events
  • 108. navigator .geolocation .getCurrentPosition( success, err );
  • 113. •Threads •Native or via Gears •Sandboxed
  • 114. •Threads •Native or via Gears •Sandboxed •Debugging?
  • 119. Attributes: data-*, itemProp, sandbox (on iframes) <progress> Microdata API, <meter> datagrid, XHR2, <datalist> Database Storage <ruby> Web Forms 2.0: querySelector client validation, new input types, ARIA overlap date time pickers
  • 120. Remy Sharp @rem remy@leftlogic.com html5demos.com html5doctor.com JavaScript Conference: full-frontal.org Photos by nesster, adactio, badlogik, f_mafra, dearbarbie, ilcello, thefangmonster, anniewong, aztlek, emeraldrose