Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Beyond the page

4,311 views

Published on

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.

Published in: Technology, Art & Photos
  • Be the first to comment

Beyond the page

  1. 1. Beyond the pageGlenn JonesFullfrontal – Brighton, UK11 Nov 2011
  2. 2. Window into a another world
  3. 3. Objects and things made of data
  4. 4. <audio src="knowingme.mp3" control></audio> a piece of audio Any semantic structure
  5. 5. The HTML5 drag and drop disaster – by PPK It’s so funny you have to read it
  6. 6. Dragging between apps
  7. 7. <a href="http://glennjones.net"draggable="true">Glenn</a> Making something draggable
  8. 8. onDragStart e.dataTransfer.setData(Text, Glenn); onDropvar name = e.dataTransfer.getData(Text); Passing data with drag and drop
  9. 9. draggables.com
  10. 10. .setData(application/json, {name: "glenn"}); .setData(text/x-vcard, BEGIN:VCARD…); mime-types
  11. 11. Checkout Ryan Seddon articles on thecssninja.com
  12. 12. 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.onerror = function (e) { console.log(‘Error reading file’); }; reader.readAsText(file);} Reading a file dragged onto a page
  13. 13. 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.onerror = function (e) { console.log(‘Error reading file’); }; reader.readAsText(file);} Reading a file dragged onto a page
  14. 14. 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.onerror = function (e) { console.log(‘Error reading file’); }; reader.readAsText(file);} Reading a file dragged onto a page
  15. 15. e.dataTransfer.setData(DownloadURL, …); mime-type : file name : urlimage/png:logo.png:http://glennjones. net/images/logo.png Dragging files with DownloadURL
  16. 16. var img = data:image/png;base64,iVBORw … var durl = "image/png:logo.png:" + img; .setData(DownloadURL, durl); DownloadURL and Data URL
  17. 17. clipboardData.setData
  18. 18. Use content editable area tocapture HTML and semantic mark-up during a paste
  19. 19. Virtual file download
  20. 20. 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]
  21. 21. var name = ‘glennjones‘;window[name] = vcard;var link = document.createElement(a);link.setAttribute("type","text/x-vcard");link.setAttribute("href","javascript:" + name);link.appendChild( document.createTextNode(vCard Download) );document.body.appendChild(link); Firefox hack – virtual download
  22. 22. Verb and Objects Post a Status Edit an Image Share a Bookmark Reply to Post Pick a Profile
  23. 23. Registering a Web Intent
  24. 24. <intentaction="http://webintents.org/pick"type="text/x-vcard"href="http://codebits.glennjones.net/contact-intent/"title="Pick a profile"></intent> Registering a Web Intent
  25. 25. Sending data
  26. 26. var intent = new Intent();intent.action = "http://webintents.org/save";intent.type = "text/x-vcard";intent.data = card;window.navigator.startActivity(intent); Sending data
  27. 27. Receiving data
  28. 28. var intent = new Intent();intent.action = "http://webintents.org/save";intent.type = "text/x-vcard ";intent.data = " ";window.navigator.startActivity(intent, returnSelection)function returnSelection(){ var vcards = intent.data} Receiving data
  29. 29. http://codebits.glennjones.net/webintents/ contact-intent.html
  30. 30. In the real world
  31. 31. Creative independenceData ownership and portability
  32. 32. Thank you @glennjoneshttp://glennjones.net
  33. 33. Creative Commons Attribution-Non-Commercial 2.0 UK: England & Wales Licence. Copyright Glenn Jones 2011 glennjones.net
  34. 34. Photo attribution:Jonas Seaman - http://www.flickr.com/photos/americanvirus/4167946259/Licence: Attribution-NonCommercial-NoDerivs 2.0 Generic (CC BY-NC-ND 2.0)

×