Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Beyond the page

Beyond the page

The latest browser APIs now make it possible to redesign how your web pages interact with other applications. Web pages are too often little islands that fail to play well with the wider user interfaces of our devices. This talk will explore the possibilities from Drag and Drop to Web Intents, demonstrating how to make web pages more equal in the world of applications.

Glenn Jones

April 27, 2012
Tweet

Other Decks in Programming

Transcript

  1. element.ondrop( function(e){ for (i = 0; i <= e.dataTransfer.files.length -

    1; i++) { var file = e.dataTransfer.files[i]; var reader = new FileReader(); reader.onload = function (e) { console.log( e.target.result ); }; reader.readAsText(file); } } ); Reading a file dragged onto a page
  2. element.ondrop( function(e){ for (i = 0; i <= e.dataTransfer.files.length -

    1; i++) { var file = e.dataTransfer.files[i]; var reader = new FileReader(); reader.onload = function (e) { console.log( e.target.result ); }; reader.readAsText(file); } } ); Reading a file dragged onto a page
  3. element.ondrop( function(e){ for (i = 0; i <= e.dataTransfer.files.length -

    1; i++) { var file = e.dataTransfer.files[i]; var reader = new FileReader(); reader.onload = function (e) { console.log( e.target.result ); }; reader.readAsText(file); } } ); Reading a file dragged onto a page
  4. window.URL = window.webkitURL || window.URL; window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder

    || window.MozBlobBuilder; var builder = new window.BlobBuilder(); builder.append(vcard); var link = document.getElementById('virtual-file-link'); link.download = ‘glennjones.vcf'; link.href = window.URL.createObjectURL(builder.getBlob('text/x-vcard')); The Download Attribute a[download]
  5. window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder; var builder =

    new window.BlobBuilder(); builder.append(vcard); var blob = builder.getBlob('text/x-vcard'); DownloadURL and BlobBuilder (Part 1)
  6. window.URL = window.webkitURL || window.URL; var blobUrl = window.URL.createObjectURL(blob); var

    downloadUrl = ‘text/x-vcard’ + ':' + name + ':' + blobUrl; link.addEventListener("dragstart", function (e) { e.dataTransfer.setData("DownloadURL", downloadUrl); }); DownloadURL and BlobBuilder (Part 2)
  7. element.oncopy( = function (e) { if (e.clipboardData) { e.clipboardData.setData('text/x-vcard',vcard); }

    }); body.onpaste( = function (e) { if (e.clipboardData) { var vcard = e.clipboardData.getData('text/x-vcard'); } }); e.clipboardData
  8. Verb and Objects Post a Status Edit an Image Share

    a Bookmark Reply to Post Pick a Profile
  9. element.onclick( function() { var intent = new Intent( "http://webintents.org/share", "text/uri-list",

    [ document.location.href ] ); window.navigator.startActivity(intent); )}; Sending data
  10. { "name": " Pick a profile", “version”: "0.0.0.2", “icons” :

    { “16” : “favicon.ico” }, "intents" : { " http://webintents.org/pick" : [{ "type" : ["text/x-vcard"], “title" : "Pick a profile", "path" : "http://codebits.glennjones.net/contact-intent/" }] } } Registering a Web Intent Service using Chrome apps/extension manifest
  11. Receiving data element.onclick( function() { var intent = new Intent(

    "http://webintents.org/pick", "text/x-vcard " ); window.navigator.startActivity(intent, returnSelection); )}; function returnSelection(){ var vcards = intent.data }
  12. Dragging between apps Dragging files onto the browser Dragging onto

    the desktop Copy and paste Virtual/client-side file download registerProtocolHandler Web Intents / Activities Opera 12 beta has preliminary support for drag'n'drop