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

Email authentication using firebase auth + flutter
Email authentication using firebase auth + flutterEmail authentication using firebase auth + flutter
Email authentication using firebase auth + flutterKaty Slemon
 
03 - Hadoop. HDFS Shell-команды
03 - Hadoop. HDFS Shell-команды03 - Hadoop. HDFS Shell-команды
03 - Hadoop. HDFS Shell-командыRoman Brovko
 
Flutter vs React Native | Edureka
Flutter vs React Native | EdurekaFlutter vs React Native | Edureka
Flutter vs React Native | EdurekaEdureka!
 
Flutter Tutorial For Beginners | Edureka
Flutter Tutorial For Beginners | EdurekaFlutter Tutorial For Beginners | Edureka
Flutter Tutorial For Beginners | EdurekaEdureka!
 
Building beautiful apps using google flutter
Building beautiful apps using google flutterBuilding beautiful apps using google flutter
Building beautiful apps using google flutterAhmed Abu Eldahab
 
[PDF] 2021 Termux basic commands list
[PDF] 2021 Termux basic commands list [PDF] 2021 Termux basic commands list
[PDF] 2021 Termux basic commands list nisivaasdfghj
 
Web programming
Web programmingWeb programming
Web programmingLeo Mark Villar
 
html-css
html-csshtml-css
html-cssDhirendra Chauhan
 

Recommended

Email authentication using firebase auth + flutter
Email authentication using firebase auth + flutterEmail authentication using firebase auth + flutter
Email authentication using firebase auth + flutterKaty Slemon
 
03 - Hadoop. HDFS Shell-команды
03 - Hadoop. HDFS Shell-команды03 - Hadoop. HDFS Shell-команды
03 - Hadoop. HDFS Shell-командыRoman Brovko
 
Flutter vs React Native | Edureka
Flutter vs React Native | EdurekaFlutter vs React Native | Edureka
Flutter vs React Native | EdurekaEdureka!
 
Flutter Tutorial For Beginners | Edureka
Flutter Tutorial For Beginners | EdurekaFlutter Tutorial For Beginners | Edureka
Flutter Tutorial For Beginners | EdurekaEdureka!
 
Building beautiful apps using google flutter
Building beautiful apps using google flutterBuilding beautiful apps using google flutter
Building beautiful apps using google flutterAhmed Abu Eldahab
 
[PDF] 2021 Termux basic commands list
[PDF] 2021 Termux basic commands list [PDF] 2021 Termux basic commands list
[PDF] 2021 Termux basic commands list nisivaasdfghj
 
Web programming
Web programmingWeb programming
Web programmingLeo Mark Villar
 
html-css
html-csshtml-css
html-cssDhirendra Chauhan
 
Building beautiful apps with Google flutter
Building beautiful apps with Google flutterBuilding beautiful apps with Google flutter
Building beautiful apps with Google flutterAhmed Abu Eldahab
 
Google flutter and why does it matter
Google flutter and why does it matterGoogle flutter and why does it matter
Google flutter and why does it matterAhmed Abu Eldahab
 
Flutter beyond hello world
Flutter beyond hello worldFlutter beyond hello world
Flutter beyond hello worldAhmed Abu Eldahab
 
Introduction to PHP
Introduction to PHPIntroduction to PHP
Introduction to PHPBradley Holt
 
jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - IntroductionWebStackAcademy
 
Archiving in linux tar
Archiving in linux tarArchiving in linux tar
Archiving in linux tarInfoExcavator
 
Php session
Php sessionPhp session
Php sessionargusacademy
 
flutter.school #HelloWorld
flutter.school #HelloWorldflutter.school #HelloWorld
flutter.school #HelloWorldFrederik Schweiger
 
Flutter Intro
Flutter IntroFlutter Intro
Flutter IntroVladimir Parfenov
 
User management
User managementUser management
User managementMufaddal Haidermota
 
Mobile DevOps pipeline using Google Flutter
Mobile DevOps pipeline using Google FlutterMobile DevOps pipeline using Google Flutter
Mobile DevOps pipeline using Google FlutterAhmed Abu Eldahab
 
Hello Flutter
Hello FlutterHello Flutter
Hello Flutterrihannakedy
 
Firebase & SwiftUI Workshop
Firebase & SwiftUI WorkshopFirebase & SwiftUI Workshop
Firebase & SwiftUI WorkshopPeter Friese
 
Dart and Flutter Basics.pptx
Dart and Flutter Basics.pptxDart and Flutter Basics.pptx
Dart and Flutter Basics.pptxDSCVSSUT
 
Introduction to flutter
Introduction to flutter Introduction to flutter
Introduction to flutter Wan Muzaffar Wan Hashim
 
Frontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSSFrontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSSThinkful
 
Docker Explained | What Is A Docker Container? | Docker Simplified | Docker T...
Docker Explained | What Is A Docker Container? | Docker Simplified | Docker T...Docker Explained | What Is A Docker Container? | Docker Simplified | Docker T...
Docker Explained | What Is A Docker Container? | Docker Simplified | Docker T...Edureka!
 
Introduction to Scala
Introduction to ScalaIntroduction to Scala
Introduction to ScalaRahul Jain
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.jsVikash Singh
 
Flutter
FlutterFlutter
FlutterMohit Sharma
 
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

Building beautiful apps with Google flutter
Building beautiful apps with Google flutterBuilding beautiful apps with Google flutter
Building beautiful apps with Google flutterAhmed Abu Eldahab
 
Google flutter and why does it matter
Google flutter and why does it matterGoogle flutter and why does it matter
Google flutter and why does it matterAhmed Abu Eldahab
 
Introduction to PHP
Introduction to PHPIntroduction to PHP
Introduction to PHPBradley Holt
 
jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - IntroductionWebStackAcademy
 
Archiving in linux tar
Archiving in linux tarArchiving in linux tar
Archiving in linux tarInfoExcavator
 
Mobile DevOps pipeline using Google Flutter
Mobile DevOps pipeline using Google FlutterMobile DevOps pipeline using Google Flutter
Mobile DevOps pipeline using Google FlutterAhmed Abu Eldahab
 
Firebase & SwiftUI Workshop
Firebase & SwiftUI WorkshopFirebase & SwiftUI Workshop
Firebase & SwiftUI WorkshopPeter Friese
 
Dart and Flutter Basics.pptx
Dart and Flutter Basics.pptxDart and Flutter Basics.pptx
Dart and Flutter Basics.pptxDSCVSSUT
 
Frontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSSFrontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSSThinkful
 
Docker Explained | What Is A Docker Container? | Docker Simplified | Docker T...
Docker Explained | What Is A Docker Container? | Docker Simplified | Docker T...Docker Explained | What Is A Docker Container? | Docker Simplified | Docker T...
Docker Explained | What Is A Docker Container? | Docker Simplified | Docker T...Edureka!
 
Introduction to Scala
Introduction to ScalaIntroduction to Scala
Introduction to ScalaRahul Jain
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.jsVikash Singh
 

What's hot (20)

Building beautiful apps with Google flutter
Building beautiful apps with Google flutterBuilding beautiful apps with Google flutter
Building beautiful apps with Google flutter
 
Google flutter and why does it matter
Google flutter and why does it matterGoogle flutter and why does it matter
Google flutter and why does it matter
 
Flutter beyond hello world
Flutter beyond hello worldFlutter beyond hello world
Flutter beyond hello world
 
Introduction to PHP
Introduction to PHPIntroduction to PHP
Introduction to PHP
 
jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - Introduction
 
Archiving in linux tar
Archiving in linux tarArchiving in linux tar
Archiving in linux tar
 
Php session
Php sessionPhp session
Php session
 
flutter.school #HelloWorld
flutter.school #HelloWorldflutter.school #HelloWorld
flutter.school #HelloWorld
 
Flutter Intro
Flutter IntroFlutter Intro
Flutter Intro
 
User management
User managementUser management
User management
 
Mobile DevOps pipeline using Google Flutter
Mobile DevOps pipeline using Google FlutterMobile DevOps pipeline using Google Flutter
Mobile DevOps pipeline using Google Flutter
 
Hello Flutter
Hello FlutterHello Flutter
Hello Flutter
 
Firebase & SwiftUI Workshop
Firebase & SwiftUI WorkshopFirebase & SwiftUI Workshop
Firebase & SwiftUI Workshop
 
Dart and Flutter Basics.pptx
Dart and Flutter Basics.pptxDart and Flutter Basics.pptx
Dart and Flutter Basics.pptx
 
Introduction to flutter
Introduction to flutter Introduction to flutter
Introduction to flutter
 
Frontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSSFrontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSS
 
Docker Explained | What Is A Docker Container? | Docker Simplified | Docker T...
Docker Explained | What Is A Docker Container? | Docker Simplified | Docker T...Docker Explained | What Is A Docker Container? | Docker Simplified | Docker T...
Docker Explained | What Is A Docker Container? | Docker Simplified | Docker T...
 
Introduction to Scala
Introduction to ScalaIntroduction to Scala
Introduction to Scala
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
Flutter
FlutterFlutter
Flutter
 

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

Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKJago de Vreede
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
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
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Angeliki Cooney
 
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
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdfSandro Moreira
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Zilliz
 
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
 
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
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfOverkill Security
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 

Recently uploaded (20)

Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
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
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
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
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
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...
 
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
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 

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