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

What’s New in NGINX Ingress Controller for Kubernetes Release 1.5.0
What’s New in NGINX Ingress Controller for Kubernetes Release 1.5.0What’s New in NGINX Ingress Controller for Kubernetes Release 1.5.0
What’s New in NGINX Ingress Controller for Kubernetes Release 1.5.0NGINX, Inc.
 
HTTP2 and gRPC
HTTP2 and gRPCHTTP2 and gRPC
HTTP2 and gRPCGuo Jing
 
Monitoring, Logging and Tracing on Kubernetes
Monitoring, Logging and Tracing on KubernetesMonitoring, Logging and Tracing on Kubernetes
Monitoring, Logging and Tracing on KubernetesMartin Etmajer
 
Waf bypassing Techniques
Waf bypassing TechniquesWaf bypassing Techniques
Waf bypassing TechniquesAvinash Thapa
 
Domino Server Health - Monitoring and Managing
Domino Server Health - Monitoring and Managing Domino Server Health - Monitoring and Managing
Domino Server Health - Monitoring and ManagingGabriella Davis
 
Nginx internals
Nginx internalsNginx internals
Nginx internalsliqiang xu
 
Delivering High-Availability Web Services with NGINX Plus on AWS
Delivering High-Availability Web Services with NGINX Plus on AWSDelivering High-Availability Web Services with NGINX Plus on AWS
Delivering High-Availability Web Services with NGINX Plus on AWSNGINX, Inc.
 
High Availability Content Caching with NGINX
High Availability Content Caching with NGINXHigh Availability Content Caching with NGINX
High Availability Content Caching with NGINXNGINX, Inc.
 

Recommended

What’s New in NGINX Ingress Controller for Kubernetes Release 1.5.0
What’s New in NGINX Ingress Controller for Kubernetes Release 1.5.0What’s New in NGINX Ingress Controller for Kubernetes Release 1.5.0
What’s New in NGINX Ingress Controller for Kubernetes Release 1.5.0NGINX, Inc.
 
HTTP2 and gRPC
HTTP2 and gRPCHTTP2 and gRPC
HTTP2 and gRPCGuo Jing
 
Monitoring, Logging and Tracing on Kubernetes
Monitoring, Logging and Tracing on KubernetesMonitoring, Logging and Tracing on Kubernetes
Monitoring, Logging and Tracing on KubernetesMartin Etmajer
 
Waf bypassing Techniques
Waf bypassing TechniquesWaf bypassing Techniques
Waf bypassing TechniquesAvinash Thapa
 
Domino Server Health - Monitoring and Managing
Domino Server Health - Monitoring and Managing Domino Server Health - Monitoring and Managing
Domino Server Health - Monitoring and ManagingGabriella Davis
 
Nginx internals
Nginx internalsNginx internals
Nginx internalsliqiang xu
 
Delivering High-Availability Web Services with NGINX Plus on AWS
Delivering High-Availability Web Services with NGINX Plus on AWSDelivering High-Availability Web Services with NGINX Plus on AWS
Delivering High-Availability Web Services with NGINX Plus on AWSNGINX, Inc.
 
High Availability Content Caching with NGINX
High Availability Content Caching with NGINXHigh Availability Content Caching with NGINX
High Availability Content Caching with NGINXNGINX, Inc.
 
Xampp Ppt
Xampp PptXampp Ppt
Xampp Pptguestb4b8d8e
 
Introduction to NGINX web server
Introduction to NGINX web serverIntroduction to NGINX web server
Introduction to NGINX web serverMd Waresul Islam
 
Introduction to Prometheus
Introduction to PrometheusIntroduction to Prometheus
Introduction to PrometheusJulien Pivotto
 
Secure Session Management
Secure Session ManagementSecure Session Management
Secure Session ManagementGuidePoint Security, LLC
 
Understanding REST
Understanding RESTUnderstanding REST
Understanding RESTNitin Pande
 
How to learn HTML in 10 Days
How to learn HTML in 10 DaysHow to learn HTML in 10 Days
How to learn HTML in 10 DaysManoj kumar Deswal
 
Laravel Introduction
Laravel IntroductionLaravel Introduction
Laravel IntroductionAhmad Shah Hafizan Hamidin
 
Html5-Web-Storage
Html5-Web-StorageHtml5-Web-Storage
Html5-Web-StorageMindfire Solutions
 
HDFS Architecture
HDFS ArchitectureHDFS Architecture
HDFS ArchitectureJeff Hammerbacher
 
Kicking ass with redis
Kicking ass with redisKicking ass with redis
Kicking ass with redisDvir Volk
 
Nginx A High Performance Load Balancer, Web Server & Reverse Proxy
Nginx A High Performance Load Balancer, Web Server & Reverse ProxyNginx A High Performance Load Balancer, Web Server & Reverse Proxy
Nginx A High Performance Load Balancer, Web Server & Reverse ProxyAmit Aggarwal
 
Web api
Web apiWeb api
Web apiSudhakar Sharma
 
Ceph and Openstack in a Nutshell
Ceph and Openstack in a NutshellCeph and Openstack in a Nutshell
Ceph and Openstack in a NutshellKaran Singh
 
Kubernetes Workshop
Kubernetes WorkshopKubernetes Workshop
Kubernetes Workshoploodse
 
Room 3 - 2 - Trần Tuấn Anh - Defending Software Supply Chain Security in Bank...
Room 3 - 2 - Trần Tuấn Anh - Defending Software Supply Chain Security in Bank...Room 3 - 2 - Trần Tuấn Anh - Defending Software Supply Chain Security in Bank...
Room 3 - 2 - Trần Tuấn Anh - Defending Software Supply Chain Security in Bank...Vietnam Open Infrastructure User Group
 
Attacking thru HTTP Host header
Attacking thru HTTP Host headerAttacking thru HTTP Host header
Attacking thru HTTP Host headerSergey Belov
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptEdureka!
 
Html basic tags
Html basic tagsHtml basic tags
Html basic tagsumesh patil
 
Web Cache Poisoning
Web Cache PoisoningWeb Cache Poisoning
Web Cache PoisoningKuldeepPandya5
 
Kubernetes Application Deployment with Helm - A beginner Guide!
Kubernetes Application Deployment with Helm - A beginner Guide!Kubernetes Application Deployment with Helm - A beginner Guide!
Kubernetes Application Deployment with Helm - A beginner Guide!Krishna-Kumar
 
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

Introduction to NGINX web server
Introduction to NGINX web serverIntroduction to NGINX web server
Introduction to NGINX web serverMd Waresul Islam
 
Introduction to Prometheus
Introduction to PrometheusIntroduction to Prometheus
Introduction to PrometheusJulien Pivotto
 
Understanding REST
Understanding RESTUnderstanding REST
Understanding RESTNitin Pande
 
Kicking ass with redis
Kicking ass with redisKicking ass with redis
Kicking ass with redisDvir Volk
 
Nginx A High Performance Load Balancer, Web Server & Reverse Proxy
Nginx A High Performance Load Balancer, Web Server & Reverse ProxyNginx A High Performance Load Balancer, Web Server & Reverse Proxy
Nginx A High Performance Load Balancer, Web Server & Reverse ProxyAmit Aggarwal
 
Ceph and Openstack in a Nutshell
Ceph and Openstack in a NutshellCeph and Openstack in a Nutshell
Ceph and Openstack in a NutshellKaran Singh
 
Kubernetes Workshop
Kubernetes WorkshopKubernetes Workshop
Kubernetes Workshoploodse
 
Room 3 - 2 - Trần Tuấn Anh - Defending Software Supply Chain Security in Bank...
Room 3 - 2 - Trần Tuấn Anh - Defending Software Supply Chain Security in Bank...Room 3 - 2 - Trần Tuấn Anh - Defending Software Supply Chain Security in Bank...
Room 3 - 2 - Trần Tuấn Anh - Defending Software Supply Chain Security in Bank...Vietnam Open Infrastructure User Group
 
Attacking thru HTTP Host header
Attacking thru HTTP Host headerAttacking thru HTTP Host header
Attacking thru HTTP Host headerSergey Belov
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptEdureka!
 
Kubernetes Application Deployment with Helm - A beginner Guide!
Kubernetes Application Deployment with Helm - A beginner Guide!Kubernetes Application Deployment with Helm - A beginner Guide!
Kubernetes Application Deployment with Helm - A beginner Guide!Krishna-Kumar
 

What's hot (20)

Xampp Ppt
Xampp PptXampp Ppt
Xampp Ppt
 
Introduction to NGINX web server
Introduction to NGINX web serverIntroduction to NGINX web server
Introduction to NGINX web server
 
Introduction to Prometheus
Introduction to PrometheusIntroduction to Prometheus
Introduction to Prometheus
 
Secure Session Management
Secure Session ManagementSecure Session Management
Secure Session Management
 
Understanding REST
Understanding RESTUnderstanding REST
Understanding REST
 
How to learn HTML in 10 Days
How to learn HTML in 10 DaysHow to learn HTML in 10 Days
How to learn HTML in 10 Days
 
Laravel Introduction
Laravel IntroductionLaravel Introduction
Laravel Introduction
 
Html5-Web-Storage
Html5-Web-StorageHtml5-Web-Storage
Html5-Web-Storage
 
HDFS Architecture
HDFS ArchitectureHDFS Architecture
HDFS Architecture
 
Kicking ass with redis
Kicking ass with redisKicking ass with redis
Kicking ass with redis
 
Nginx A High Performance Load Balancer, Web Server & Reverse Proxy
Nginx A High Performance Load Balancer, Web Server & Reverse ProxyNginx A High Performance Load Balancer, Web Server & Reverse Proxy
Nginx A High Performance Load Balancer, Web Server & Reverse Proxy
 
Web api
Web apiWeb api
Web api
 
Ceph and Openstack in a Nutshell
Ceph and Openstack in a NutshellCeph and Openstack in a Nutshell
Ceph and Openstack in a Nutshell
 
Kubernetes Workshop
Kubernetes WorkshopKubernetes Workshop
Kubernetes Workshop
 
Room 3 - 2 - Trần Tuấn Anh - Defending Software Supply Chain Security in Bank...
Room 3 - 2 - Trần Tuấn Anh - Defending Software Supply Chain Security in Bank...Room 3 - 2 - Trần Tuấn Anh - Defending Software Supply Chain Security in Bank...
Room 3 - 2 - Trần Tuấn Anh - Defending Software Supply Chain Security in Bank...
 
Attacking thru HTTP Host header
Attacking thru HTTP Host headerAttacking thru HTTP Host header
Attacking thru HTTP Host header
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 
Html basic tags
Html basic tagsHtml basic tags
Html basic tags
 
Web Cache Poisoning
Web Cache PoisoningWeb Cache Poisoning
Web Cache Poisoning
 
Kubernetes Application Deployment with Helm - A beginner Guide!
Kubernetes Application Deployment with Helm - A beginner Guide!Kubernetes Application Deployment with Helm - A beginner Guide!
Kubernetes Application Deployment with Helm - A beginner Guide!
 

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

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
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
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdfChristopherTHyatt
 
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
 
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
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
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
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 

Recently uploaded (20)

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
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...
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
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
 
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
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
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...
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 

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