SlideShare une entreprise Scribd logo
1  sur  25
Télécharger pour lire hors ligne
HTML5
New Features and Resources
Ron Reiter, 2012
What's New?
●   CSS3
●   Drag and Drop
●   localStorage & sessionStorage
●   IndexedDB
●   Application Cache Manifest
●   Native Audio and Video Support
●   Real-time P2P Video Streaming
●   Web Intents
What's New? (etc.)
●   postMessage
●   File API
●   Websockets
●   Canvas & SVG
●   WebGL
●   Notifications
●   Web Workers
●   Geolocation
CSS3 Media Queries
CSS3 media queries are used for responsive design:
@media screen and (min-width:480px) and (max-width:800px) {
  /* Target landscape smartphones, portrait tablets, narrow desktops

    */
}

@media screen and (max-width:479px) {
  /* Target portrait smartphones */
}
CSS3 New Features
●   Rounded Corners
●   Transitions and Animations
●   2D & 3D Transformations
●   Transparency
●   Box Shadows
●   Text Effects
●   Columns, Regions, Exclusions
●   Custom Filters & GLSL Shaders
●   Compositing & Blending
CSS3 Demos
● CSS3 Playground
  ○   http://css3.mikeplate.com/

● Adobe (Filters, Compositing, Regions)
  ○   http://adobe.github.com/web-platform/samples/css-customfilters/
  ○   http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/
  ○   http://adobe.github.com/web-platform/demos/compositing/index.html
  ○   http://www.html5rocks.com/en/tutorials/regions/adobe/

● Media Queries
  ○   http://mediaqueri.es/
CSS3 Demos (etc.)
● Transitions
  ○   http://www.joelambert.co.uk/flux/

● 3D
  ○   http://www.keithclark.co.uk/labs/3dcss/demo/
  ○   http://www.paulrhayes.com/experiments/cube-3d/touch.html
  ○   http://www.satine.org/research/webkit/snowleopard/snowstack.html
  ○   http://www.clicktorelease.com/code/css3dclouds/
Drag and Drop
● Web Application UI
  ○   http://html5demos.com/drag

● Files
  ○ Desktop to Browser
    ■ http://jsfiddle.net/darcyclarke/YWF3u/1/
  ○ Browser to Desktop
    ■ http://www.thecssninja.com/demo/gmail_dragout/
Storage
●   localStorage is a persistent key-value store
●   sessionStorage is the same, only volatile
●   Client-side only
●   5 megabyte limit

localStorage.setItem(key, value)
localStorage.getItem(key)
localStorage.removeItem(key)
localStorage.clear()
IndexedDB
● Allows indexed, efficient queries
● Transactions
● Object based
var customerData = [
   { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
   { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
];
var request = indexedDB.open("example", 2);
var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
objectStore.createIndex("name", "name", { unique: false });
objectStore.createIndex("email", "email", { unique: true });
for (var i in customerData) {
     objectStore.add(customerData[i]);
}
Cache Manifest
● Turns web pages into offline applications
   ○   http://www.html5rocks.com/en/tutorials/appcache/beginner/

● Example file structure:
CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
Media Tags
● Audio and video tags
● Video can be manipulated using canvas or
  CSS filters
<audio src="test.ogg" autoplay>
 Your browser does not support the audio element.
</audio>
<video controls>
 <source src="foo.ogg" type="video/ogg">
 <source src="foo.mov" type="video/quicktime">
 Your browser doesn't support the video element.
</video>
WebRTC
● MediaStream API (getUserMedia) - API
  for utilizing webcams or microphones
● PeerConnection API - allows audio and
  video streaming between peers
● Data Channel API - used for P2P data
  sharing, for directly sending files and raw
  data between clients not through a server
● Get started
  ○   http://www.html5rocks.com/en/tutorials/webrtc/basics/
postMessage
● Allows cross-domain iframe and window
  communication using messages and
  callbacks
● The right way to exchange data between
  two different domains under your control
Web Intents
● Allows invoking web applications with an
  intent-like interface, passing data to them
● Example - http://webintents.org/

var intent = new Intent("http://webintents.org/share",
  "text/uri-list",
  "http://news.bbc.co.uk");

window.navigator.startActivity(intent);
File & File System API
● Another local storage interface, but with a
  file interface, organized in directories
● Can be used for accessing real filesystem
  on PhoneGap
● In the future, HTML5 based desktop
  applications might also be able to access
  the real filesystem using it
Websockets
● Message oriented communication
  ○ Chat, games, and other interactive content
● The right way to do server push
● Reduces the HTTP headers overhead
● No request-response constraint
  (completely asynchronous)
● Emulation libraries
  ○ sockjs
  ○ socket.io
SockJS Example
// Echo sockjs server (node.js)
var sockjs_opts = {sockjs_url: "http://cdn.sockjs.org/sockjs-0.3.min.js"};

var sockjs_echo = sockjs.createServer(sockjs_opts);
sockjs_echo.on('connection', function(conn) {
    conn.on('data', function(message) {
        conn.write(message);
    });
});

// 1. Echo sockjs client
<script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
<script>
    var sockjs_url = '/echo';
    var sockjs = new SockJS(sockjs_url);
    sockjs.onopen    = function() {console.log('[*] open', sockjs.protocol);};
    sockjs.onmessage = function(e) {console.log('[.] message', e.data);};
    sockjs.onclose   = function() {console.log('[*] close');};
    sockjs.send("Hello!");
</script>
Canvas
● Pixel manipulation API
● Used for image processing, games
  (sprites), and more
● Examples
  ○ http://kennethjorgensen.com/canvas/tree.html
  ○ http://hakim.se/experiments/html5/blob/03/
  ○ http://hakim.se/experiments/html5/coil/
SVG
● SVG - Scalable Vector Graphics
● Great for scaling graphics to any size, an
  advantage when dealing with sub-pixel
  screens (retina)
● Examples
  ○   http://raphaeljs.com/analytics.html
  ○   http://upload.wikimedia.org/wikipedia/commons/6/6c/Trajans-
      Column-lower-animated.svg
  ○   http://svg-wow.org/camera/camera.xhtml
WebGL
● JavaScript OpenGL interface for 3D
  programming
● Widely adopted
● Microsoft's IE10 will not support it, claim
  the standard is not secure
● Examples
  ○ http://www.chromeexperiments.com/webgl/
  ○ http://ro.me
  ○ http://lights.elliegoulding.com/
Notifications
● Allows websites to pop up desktop
  notifications for open tabs
document.querySelector('#show_button').addEventListener('click', function() {
  if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
      // function defined in step 2
      window.webkitNotifications.createNotification(
          'icon.png', 'Notification Title', 'Notification content...');
  } else {
      window.webkitNotifications.requestPermission();
  }
}, false);
Web Workers
● Used for CPU intensive processing
● Does not interrupt the UI thread
main.js
var worker = new Worker('my_task.js');
worker.onmessage = function(event) {
    console.log("Worker said : " + event.data);
};
worker.postMessage('ali');

mytask.js
self.postMessage("Working hard for event.data");
self.onmessage = function(event) {
    self.postMessage('Hi '+ event.data);
};
Geolocation
Questions?
Thank You!

Contenu connexe

Tendances

Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overviewJacob Nelson
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5Steven Chipman
 
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialHTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialProdigyView
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Gil Fink
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohanballychohanuk
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginnersVineeth N Krishnan
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5Jamshid Hashimi
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5Sayed Ahmed
 
Basics of css and xhtml
Basics of css and xhtmlBasics of css and xhtml
Basics of css and xhtmlsagaroceanic11
 
The Future of the Web: HTML5
The Future of the Web: HTML5The Future of the Web: HTML5
The Future of the Web: HTML5Derek Bender
 
SharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & AccessibilitySharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & AccessibilityMavention
 
What the heck is HTML 5?
What the heck is HTML 5?What the heck is HTML 5?
What the heck is HTML 5?Simon Willison
 

Tendances (20)

HTML5 Tutorial
HTML5 TutorialHTML5 Tutorial
HTML5 Tutorial
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
 
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialHTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohan
 
Html5 Future of WEB
Html5 Future of WEBHtml5 Future of WEB
Html5 Future of WEB
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5
 
HTML 5 Overview
HTML 5 OverviewHTML 5 Overview
HTML 5 Overview
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
 
HTML5
HTML5HTML5
HTML5
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
 
Basics of css and xhtml
Basics of css and xhtmlBasics of css and xhtml
Basics of css and xhtml
 
The Future of the Web: HTML5
The Future of the Web: HTML5The Future of the Web: HTML5
The Future of the Web: HTML5
 
SharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & AccessibilitySharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & Accessibility
 
Intro to html 5
Intro to html 5Intro to html 5
Intro to html 5
 
What the heck is HTML 5?
What the heck is HTML 5?What the heck is HTML 5?
What the heck is HTML 5?
 
Html 5 introduction
Html 5 introductionHtml 5 introduction
Html 5 introduction
 

Similaire à HTML5 New Features and Resources

JavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web frameworkJavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web frameworkAlive Kuo
 
Front-End Developer's Career Roadmap
Front-End Developer's Career RoadmapFront-End Developer's Career Roadmap
Front-End Developer's Career RoadmapWebStackAcademy
 
Node.js Web Apps @ ebay scale
Node.js Web Apps @ ebay scaleNode.js Web Apps @ ebay scale
Node.js Web Apps @ ebay scaleDmytro Semenov
 
Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3Karambir Singh Nain
 
GWT - Building Rich Internet Applications Using OO Tools
GWT - Building Rich Internet Applications Using OO ToolsGWT - Building Rich Internet Applications Using OO Tools
GWT - Building Rich Internet Applications Using OO Toolsbarciszewski
 
Basic html5 and javascript
Basic html5 and javascriptBasic html5 and javascript
Basic html5 and javascriptwendy017
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesiabrucelawson
 
AD109 Navigating the Jungle of Modern Web Development
AD109 Navigating the Jungle of Modern Web DevelopmentAD109 Navigating the Jungle of Modern Web Development
AD109 Navigating the Jungle of Modern Web DevelopmentShean McManus
 
Building Real-World Dojo Web Applications
Building Real-World Dojo Web ApplicationsBuilding Real-World Dojo Web Applications
Building Real-World Dojo Web ApplicationsAndrew Ferrier
 
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3Kannika Kong
 
PHP BASIC PRESENTATION
PHP BASIC PRESENTATIONPHP BASIC PRESENTATION
PHP BASIC PRESENTATIONkrutitrivedi
 
Web Development with AngularJS, NodeJS and ExpressJS
Web Development with AngularJS, NodeJS and ExpressJSWeb Development with AngularJS, NodeJS and ExpressJS
Web Development with AngularJS, NodeJS and ExpressJSJoão Rocha da Silva
 
Parallel programing in web applications - public.pptx
Parallel programing in web applications - public.pptxParallel programing in web applications - public.pptx
Parallel programing in web applications - public.pptxGuy Bary
 
Montreal.rb 2022-10-05 - Glimmer DSL for SWT - Ruby Desktop Development GUI ...
 Montreal.rb 2022-10-05 - Glimmer DSL for SWT - Ruby Desktop Development GUI ... Montreal.rb 2022-10-05 - Glimmer DSL for SWT - Ruby Desktop Development GUI ...
Montreal.rb 2022-10-05 - Glimmer DSL for SWT - Ruby Desktop Development GUI ...Andy Maleh
 
Ustream Techtalks: Google Chrome Developer Tools
Ustream Techtalks: Google Chrome Developer ToolsUstream Techtalks: Google Chrome Developer Tools
Ustream Techtalks: Google Chrome Developer ToolsMáté Nádasdi
 
Building native mobile apps using web technologies
Building native mobile apps using web technologiesBuilding native mobile apps using web technologies
Building native mobile apps using web technologiesHjörtur Hilmarsson
 
mloc.js 2014 - JavaScript and the browser as a platform for game development
mloc.js 2014 - JavaScript and the browser as a platform for game developmentmloc.js 2014 - JavaScript and the browser as a platform for game development
mloc.js 2014 - JavaScript and the browser as a platform for game developmentDavid Galeano
 
The Importance Things of Full Stack Development
The Importance Things of Full Stack DevelopmentThe Importance Things of Full Stack Development
The Importance Things of Full Stack DevelopmentMike Taylor
 

Similaire à HTML5 New Features and Resources (20)

JavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web frameworkJavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web framework
 
SWAD-24-years.pdf
SWAD-24-years.pdfSWAD-24-years.pdf
SWAD-24-years.pdf
 
Front-End Developer's Career Roadmap
Front-End Developer's Career RoadmapFront-End Developer's Career Roadmap
Front-End Developer's Career Roadmap
 
Node.js Web Apps @ ebay scale
Node.js Web Apps @ ebay scaleNode.js Web Apps @ ebay scale
Node.js Web Apps @ ebay scale
 
Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3
 
GWT - Building Rich Internet Applications Using OO Tools
GWT - Building Rich Internet Applications Using OO ToolsGWT - Building Rich Internet Applications Using OO Tools
GWT - Building Rich Internet Applications Using OO Tools
 
Basic html5 and javascript
Basic html5 and javascriptBasic html5 and javascript
Basic html5 and javascript
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
AD109 Navigating the Jungle of Modern Web Development
AD109 Navigating the Jungle of Modern Web DevelopmentAD109 Navigating the Jungle of Modern Web Development
AD109 Navigating the Jungle of Modern Web Development
 
Building Real-World Dojo Web Applications
Building Real-World Dojo Web ApplicationsBuilding Real-World Dojo Web Applications
Building Real-World Dojo Web Applications
 
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
 
Performance (browser)
Performance (browser)Performance (browser)
Performance (browser)
 
PHP BASIC PRESENTATION
PHP BASIC PRESENTATIONPHP BASIC PRESENTATION
PHP BASIC PRESENTATION
 
Web Development with AngularJS, NodeJS and ExpressJS
Web Development with AngularJS, NodeJS and ExpressJSWeb Development with AngularJS, NodeJS and ExpressJS
Web Development with AngularJS, NodeJS and ExpressJS
 
Parallel programing in web applications - public.pptx
Parallel programing in web applications - public.pptxParallel programing in web applications - public.pptx
Parallel programing in web applications - public.pptx
 
Montreal.rb 2022-10-05 - Glimmer DSL for SWT - Ruby Desktop Development GUI ...
 Montreal.rb 2022-10-05 - Glimmer DSL for SWT - Ruby Desktop Development GUI ... Montreal.rb 2022-10-05 - Glimmer DSL for SWT - Ruby Desktop Development GUI ...
Montreal.rb 2022-10-05 - Glimmer DSL for SWT - Ruby Desktop Development GUI ...
 
Ustream Techtalks: Google Chrome Developer Tools
Ustream Techtalks: Google Chrome Developer ToolsUstream Techtalks: Google Chrome Developer Tools
Ustream Techtalks: Google Chrome Developer Tools
 
Building native mobile apps using web technologies
Building native mobile apps using web technologiesBuilding native mobile apps using web technologies
Building native mobile apps using web technologies
 
mloc.js 2014 - JavaScript and the browser as a platform for game development
mloc.js 2014 - JavaScript and the browser as a platform for game developmentmloc.js 2014 - JavaScript and the browser as a platform for game development
mloc.js 2014 - JavaScript and the browser as a platform for game development
 
The Importance Things of Full Stack Development
The Importance Things of Full Stack DevelopmentThe Importance Things of Full Stack Development
The Importance Things of Full Stack Development
 

Plus de Ron Reiter

Securing your Bitcoin wallet
Securing your Bitcoin walletSecuring your Bitcoin wallet
Securing your Bitcoin walletRon Reiter
 
Brogramming - Python, Bash for Data Processing, and Git
Brogramming - Python, Bash for Data Processing, and GitBrogramming - Python, Bash for Data Processing, and Git
Brogramming - Python, Bash for Data Processing, and GitRon Reiter
 
BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...
BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...
BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...Ron Reiter
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to BootstrapRon Reiter
 
jQuery Mobile Workshop
jQuery Mobile WorkshopjQuery Mobile Workshop
jQuery Mobile WorkshopRon Reiter
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5Ron Reiter
 
Building Chrome Extensions
Building Chrome ExtensionsBuilding Chrome Extensions
Building Chrome ExtensionsRon Reiter
 
Introduction to App Engine Development
Introduction to App Engine DevelopmentIntroduction to App Engine Development
Introduction to App Engine DevelopmentRon Reiter
 
Digital Audio & Signal Processing (Elad Gariany)
Digital Audio & Signal Processing (Elad Gariany)Digital Audio & Signal Processing (Elad Gariany)
Digital Audio & Signal Processing (Elad Gariany)Ron Reiter
 
Writing HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAEWriting HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAERon Reiter
 

Plus de Ron Reiter (11)

Securing your Bitcoin wallet
Securing your Bitcoin walletSecuring your Bitcoin wallet
Securing your Bitcoin wallet
 
Brogramming - Python, Bash for Data Processing, and Git
Brogramming - Python, Bash for Data Processing, and GitBrogramming - Python, Bash for Data Processing, and Git
Brogramming - Python, Bash for Data Processing, and Git
 
BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...
BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...
BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
jQuery Mobile Workshop
jQuery Mobile WorkshopjQuery Mobile Workshop
jQuery Mobile Workshop
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5
 
Mobile Spaces
Mobile SpacesMobile Spaces
Mobile Spaces
 
Building Chrome Extensions
Building Chrome ExtensionsBuilding Chrome Extensions
Building Chrome Extensions
 
Introduction to App Engine Development
Introduction to App Engine DevelopmentIntroduction to App Engine Development
Introduction to App Engine Development
 
Digital Audio & Signal Processing (Elad Gariany)
Digital Audio & Signal Processing (Elad Gariany)Digital Audio & Signal Processing (Elad Gariany)
Digital Audio & Signal Processing (Elad Gariany)
 
Writing HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAEWriting HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAE
 

HTML5 New Features and Resources

  • 1. HTML5 New Features and Resources Ron Reiter, 2012
  • 2. What's New? ● CSS3 ● Drag and Drop ● localStorage & sessionStorage ● IndexedDB ● Application Cache Manifest ● Native Audio and Video Support ● Real-time P2P Video Streaming ● Web Intents
  • 3. What's New? (etc.) ● postMessage ● File API ● Websockets ● Canvas & SVG ● WebGL ● Notifications ● Web Workers ● Geolocation
  • 4. CSS3 Media Queries CSS3 media queries are used for responsive design: @media screen and (min-width:480px) and (max-width:800px) { /* Target landscape smartphones, portrait tablets, narrow desktops */ } @media screen and (max-width:479px) { /* Target portrait smartphones */ }
  • 5. CSS3 New Features ● Rounded Corners ● Transitions and Animations ● 2D & 3D Transformations ● Transparency ● Box Shadows ● Text Effects ● Columns, Regions, Exclusions ● Custom Filters & GLSL Shaders ● Compositing & Blending
  • 6. CSS3 Demos ● CSS3 Playground ○ http://css3.mikeplate.com/ ● Adobe (Filters, Compositing, Regions) ○ http://adobe.github.com/web-platform/samples/css-customfilters/ ○ http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/ ○ http://adobe.github.com/web-platform/demos/compositing/index.html ○ http://www.html5rocks.com/en/tutorials/regions/adobe/ ● Media Queries ○ http://mediaqueri.es/
  • 7. CSS3 Demos (etc.) ● Transitions ○ http://www.joelambert.co.uk/flux/ ● 3D ○ http://www.keithclark.co.uk/labs/3dcss/demo/ ○ http://www.paulrhayes.com/experiments/cube-3d/touch.html ○ http://www.satine.org/research/webkit/snowleopard/snowstack.html ○ http://www.clicktorelease.com/code/css3dclouds/
  • 8. Drag and Drop ● Web Application UI ○ http://html5demos.com/drag ● Files ○ Desktop to Browser ■ http://jsfiddle.net/darcyclarke/YWF3u/1/ ○ Browser to Desktop ■ http://www.thecssninja.com/demo/gmail_dragout/
  • 9. Storage ● localStorage is a persistent key-value store ● sessionStorage is the same, only volatile ● Client-side only ● 5 megabyte limit localStorage.setItem(key, value) localStorage.getItem(key) localStorage.removeItem(key) localStorage.clear()
  • 10. IndexedDB ● Allows indexed, efficient queries ● Transactions ● Object based var customerData = [ { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" }, { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" } ]; var request = indexedDB.open("example", 2); var objectStore = db.createObjectStore("customers", { keyPath: "ssn" }); objectStore.createIndex("name", "name", { unique: false }); objectStore.createIndex("email", "email", { unique: true }); for (var i in customerData) { objectStore.add(customerData[i]); }
  • 11. Cache Manifest ● Turns web pages into offline applications ○ http://www.html5rocks.com/en/tutorials/appcache/beginner/ ● Example file structure: CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js
  • 12. Media Tags ● Audio and video tags ● Video can be manipulated using canvas or CSS filters <audio src="test.ogg" autoplay> Your browser does not support the audio element. </audio> <video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mov" type="video/quicktime"> Your browser doesn't support the video element. </video>
  • 13. WebRTC ● MediaStream API (getUserMedia) - API for utilizing webcams or microphones ● PeerConnection API - allows audio and video streaming between peers ● Data Channel API - used for P2P data sharing, for directly sending files and raw data between clients not through a server ● Get started ○ http://www.html5rocks.com/en/tutorials/webrtc/basics/
  • 14. postMessage ● Allows cross-domain iframe and window communication using messages and callbacks ● The right way to exchange data between two different domains under your control
  • 15. Web Intents ● Allows invoking web applications with an intent-like interface, passing data to them ● Example - http://webintents.org/ var intent = new Intent("http://webintents.org/share", "text/uri-list", "http://news.bbc.co.uk"); window.navigator.startActivity(intent);
  • 16. File & File System API ● Another local storage interface, but with a file interface, organized in directories ● Can be used for accessing real filesystem on PhoneGap ● In the future, HTML5 based desktop applications might also be able to access the real filesystem using it
  • 17. Websockets ● Message oriented communication ○ Chat, games, and other interactive content ● The right way to do server push ● Reduces the HTTP headers overhead ● No request-response constraint (completely asynchronous) ● Emulation libraries ○ sockjs ○ socket.io
  • 18. SockJS Example // Echo sockjs server (node.js) var sockjs_opts = {sockjs_url: "http://cdn.sockjs.org/sockjs-0.3.min.js"}; var sockjs_echo = sockjs.createServer(sockjs_opts); sockjs_echo.on('connection', function(conn) { conn.on('data', function(message) { conn.write(message); }); }); // 1. Echo sockjs client <script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script> <script> var sockjs_url = '/echo'; var sockjs = new SockJS(sockjs_url); sockjs.onopen = function() {console.log('[*] open', sockjs.protocol);}; sockjs.onmessage = function(e) {console.log('[.] message', e.data);}; sockjs.onclose = function() {console.log('[*] close');}; sockjs.send("Hello!"); </script>
  • 19. Canvas ● Pixel manipulation API ● Used for image processing, games (sprites), and more ● Examples ○ http://kennethjorgensen.com/canvas/tree.html ○ http://hakim.se/experiments/html5/blob/03/ ○ http://hakim.se/experiments/html5/coil/
  • 20. SVG ● SVG - Scalable Vector Graphics ● Great for scaling graphics to any size, an advantage when dealing with sub-pixel screens (retina) ● Examples ○ http://raphaeljs.com/analytics.html ○ http://upload.wikimedia.org/wikipedia/commons/6/6c/Trajans- Column-lower-animated.svg ○ http://svg-wow.org/camera/camera.xhtml
  • 21. WebGL ● JavaScript OpenGL interface for 3D programming ● Widely adopted ● Microsoft's IE10 will not support it, claim the standard is not secure ● Examples ○ http://www.chromeexperiments.com/webgl/ ○ http://ro.me ○ http://lights.elliegoulding.com/
  • 22. Notifications ● Allows websites to pop up desktop notifications for open tabs document.querySelector('#show_button').addEventListener('click', function() { if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED // function defined in step 2 window.webkitNotifications.createNotification( 'icon.png', 'Notification Title', 'Notification content...'); } else { window.webkitNotifications.requestPermission(); } }, false);
  • 23. Web Workers ● Used for CPU intensive processing ● Does not interrupt the UI thread main.js var worker = new Worker('my_task.js'); worker.onmessage = function(event) { console.log("Worker said : " + event.data); }; worker.postMessage('ali'); mytask.js self.postMessage("Working hard for event.data"); self.onmessage = function(event) { self.postMessage('Hi '+ event.data); };