SlideShare a Scribd company logo

HTML5 & Friends

•
•
Remy Sharp
Remy Sharp

I look at HTML 5, the language the APIs and the big number 2022. Lots of examples for you check out.

TechnologyDesign
1 of 120
Download to read offline
HTML 5 and friends
2022
Queen Elizabeth II Platinum Jubilee
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>
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
•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!
A Blog Post Credit: fujinonbinos.com
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/
<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
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);
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
Geolocation
Not always accurate!
navigator .geolocation .getCurrentPosition( success, err );
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...
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

Recommended

HTML Forms
HTML FormsHTML Forms
HTML FormsRavinder Kamboj
 
Event In JavaScript
Event In JavaScriptEvent In JavaScript
Event In JavaScriptShahDhruv21
 
JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object ModelWebStackAcademy
 
JavaScript - Chapter 11 - Events
JavaScript - Chapter 11 - Events JavaScript - Chapter 11 - Events
JavaScript - Chapter 11 - Events WebStackAcademy
 
Introduction to XML
Introduction to XMLIntroduction to XML
Introduction to XMLyht4ever
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Modelbaabtra.com - No. 1 supplier of quality freshers
 
Html tags
Html tagsHtml tags
Html tagsbaabtra.com - No. 1 supplier of quality freshers
 
Html forms
Html formsHtml forms
Html formsHimanshu Pathak
 

Recommended

HTML Forms
HTML FormsHTML Forms
HTML FormsRavinder Kamboj
 
Event In JavaScript
Event In JavaScriptEvent In JavaScript
Event In JavaScriptShahDhruv21
 
JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object ModelWebStackAcademy
 
JavaScript - Chapter 11 - Events
JavaScript - Chapter 11 - Events JavaScript - Chapter 11 - Events
JavaScript - Chapter 11 - Events WebStackAcademy
 
Introduction to XML
Introduction to XMLIntroduction to XML
Introduction to XMLyht4ever
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Modelbaabtra.com - No. 1 supplier of quality freshers
 
Html tags
Html tagsHtml tags
Html tagsbaabtra.com - No. 1 supplier of quality freshers
 
Html forms
Html formsHtml forms
Html formsHimanshu Pathak
 
javascript objects
javascript objectsjavascript objects
javascript objectsVijay Kalyan
 
Dom(document object model)
Dom(document object model)Dom(document object model)
Dom(document object model)Partnered Health
 
computer language - Html frames
computer language - Html framescomputer language - Html frames
computer language - Html framesDr. I. Uma Maheswari Maheswari
 
Introduction to Repetition Structures
Introduction to Repetition StructuresIntroduction to Repetition Structures
Introduction to Repetition Structuresprimeteacher32
 
Understanding THML
Understanding THMLUnderstanding THML
Understanding THMLHinopak Motors Limited
 
Shell programming
Shell programmingShell programming
Shell programmingMoayad Moawiah
 
Xml schema
Xml schemaXml schema
Xml schemaPrabhakaran V M
 
DTD
DTDDTD
DTDKamal Acharya
 
Date and Time Module in Python | Edureka
Date and Time Module in Python | EdurekaDate and Time Module in Python | Edureka
Date and Time Module in Python | EdurekaEdureka!
 
Object-oriented Programming-with C#
Object-oriented Programming-with C#Object-oriented Programming-with C#
Object-oriented Programming-with C#Doncho Minkov
 
XML Schema
XML SchemaXML Schema
XML Schemayht4ever
 
Xml presentation
Xml presentationXml presentation
Xml presentationMiguel Angel Teheran Garcia
 
XML
XMLXML
XMLDaminda Herath
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmlvikasgaur31
 
Wrapper class
Wrapper classWrapper class
Wrapper classkamal kotecha
 
Html forms
Html formsHtml forms
Html formsnobel mujuji
 
Html training slide
Html training slideHtml training slide
Html training slidevillupuramtraining
 
Object Oriented Programming Concepts using Java
Object Oriented Programming Concepts using JavaObject Oriented Programming Concepts using Java
Object Oriented Programming Concepts using JavaGlenn Guden
 
Functions in javascript
Functions in javascriptFunctions in javascript
Functions in javascriptbaabtra.com - No. 1 supplier of quality freshers
 
Html Basic Tags
Html Basic TagsHtml Basic Tags
Html Basic TagsRicha Singh
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookScottperrone
 
HTML5
HTML5HTML5
HTML5Hatem Mahmoud
 

More Related Content

What's hot

javascript objects
javascript objectsjavascript objects
javascript objectsVijay Kalyan
 
Dom(document object model)
Dom(document object model)Dom(document object model)
Dom(document object model)Partnered Health
 
Introduction to Repetition Structures
Introduction to Repetition StructuresIntroduction to Repetition Structures
Introduction to Repetition Structuresprimeteacher32
 
Date and Time Module in Python | Edureka
Date and Time Module in Python | EdurekaDate and Time Module in Python | Edureka
Date and Time Module in Python | EdurekaEdureka!
 
Object-oriented Programming-with C#
Object-oriented Programming-with C#Object-oriented Programming-with C#
Object-oriented Programming-with C#Doncho Minkov
 
XML Schema
XML SchemaXML Schema
XML Schemayht4ever
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmlvikasgaur31
 
Object Oriented Programming Concepts using Java
Object Oriented Programming Concepts using JavaObject Oriented Programming Concepts using Java
Object Oriented Programming Concepts using JavaGlenn Guden
 

What's hot (20)

javascript objects
javascript objectsjavascript objects
javascript objects
 
Dom(document object model)
Dom(document object model)Dom(document object model)
Dom(document object model)
 
computer language - Html frames
computer language - Html framescomputer language - Html frames
computer language - Html frames
 
Introduction to Repetition Structures
Introduction to Repetition StructuresIntroduction to Repetition Structures
Introduction to Repetition Structures
 
Understanding THML
Understanding THMLUnderstanding THML
Understanding THML
 
Shell programming
Shell programmingShell programming
Shell programming
 
Xml schema
Xml schemaXml schema
Xml schema
 
DTD
DTDDTD
DTD
 
Date and Time Module in Python | Edureka
Date and Time Module in Python | EdurekaDate and Time Module in Python | Edureka
Date and Time Module in Python | Edureka
 
Object-oriented Programming-with C#
Object-oriented Programming-with C#Object-oriented Programming-with C#
Object-oriented Programming-with C#
 
XML Schema
XML SchemaXML Schema
XML Schema
 
Xml presentation
Xml presentationXml presentation
Xml presentation
 
XML
XMLXML
XML
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Wrapper class
Wrapper classWrapper class
Wrapper class
 
Html forms
Html formsHtml forms
Html forms
 
Html training slide
Html training slideHtml training slide
Html training slide
 
Object Oriented Programming Concepts using Java
Object Oriented Programming Concepts using JavaObject Oriented Programming Concepts using Java
Object Oriented Programming Concepts using Java
 
Functions in javascript
Functions in javascriptFunctions in javascript
Functions in javascript
 
Html Basic Tags
Html Basic TagsHtml Basic Tags
Html Basic Tags
 

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

DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelDeepika Singh
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusZilliz
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMECloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024The Digital Insurer
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfOverkill Security
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsNanddeep Nachan
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024The Digital Insurer
 

Recently uploaded (20)

DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMECloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 

HTML5 & Friends

  • 1. HTML 5 and friends
  • 4.
  • 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>
  • 19.
  • 20.
  • 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.
  • 33.
  • 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!
  • 38.
  • 39.
  • 40. A Blog Post Credit: fujinonbinos.com
  • 41.
  • 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>
  • 47.
  • 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
  • 54.
  • 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);
  • 73.
  • 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
  • 103.
  • 104.
  • 107.
  • 108. navigator .geolocation .getCurrentPosition( success, err );
  • 109.
  • 113. •Threads •Native or via Gears •Sandboxed
  • 114. •Threads •Native or via Gears •Sandboxed •Debugging?
  • 118.
  • 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