Beyond the page

Transcript

1. Glenn Jones DevUp – Barcelona, Spain 27 Apr 2012 Beyond

   the page

2. Window into a another world

3. Objects and things made of data

4. <audio src="knowingme.mp3" control></audio> a piece of audio Any semantic structure

5. The HTML5 drag and drop disaster – by PPK It’s

   so funny you have to read it

6. Dragging between apps

7. <a href="http://glennjones.net" draggable="true">Glenn</a> Making something draggable

8. onDragStart e.dataTransfer.setData('Text', 'Glenn'); onDrop var name = e.dataTransfer.getData('Text'); Passing data

   with drag and drop

9. draggables.com

10. .setData('application/json', '{name: "glenn"}'); .setData('text/x-vcard', 'BEGIN:VCARD…'); mime-types

11. Checkout Ryan Seddon articles on thecssninja.com

12. 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

13. 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

14. 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
15. None

16. Virtual file download

17. 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]
18. None

19. e.dataTransfer.setData('DownloadURL', '…'); mime-type : file name : url text/x-vcard:glenn.vcf: http://glennjones.net/images/my.vcf

    Dragging files with DownloadURL

20. 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)

21. 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)
22. None
23. None

24. navigator.registerProtocolHandler( 'mailto', 'http://localhost/peoplestore/index.htm?%s', 'Search PeopleStore (local)‘ ) Registering a custom

    protocol handler

25. mailto: or tel: x-isbn: <a href="x-isbn:978-0-9844425-0-8"> HTML5 For Web Designers</a>

26. None

27. State of play about 9 months ago

28. 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
29. None

30. Social button power billions of interaction – New hyperlink!

31. Hundreds of services – no choice

32. None

33. Verb and Objects Post a Status Edit an Image Share

    a Bookmark Reply to Post Pick a Profile
34. None
35. None
36. None
37. None

38. element.onclick( function() { var intent = new Intent( "http://webintents.org/share", "text/uri-list",

    [ document.location.href ] ); window.navigator.startActivity(intent); )}; Sending data

39. Registering a Web Intent Service

40. <intent action="http://webintents.org/pick" type="text/x-vcard" href="http://codebits.glennjones.net/contact-intent/" title="Pick a profile"></intent> Registering a Web

    Intent Service

41. { "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

42. Receiving data

43. 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 }

44. In the new world order

45. In the real world

46. Thank you @glennjones http://codebits.glennjones.net

47. 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

48. Creative Commons Attribution-Non-Commercial 2.0 UK: England & Wales Licence. Copyright

    Glenn Jones 2012 glennjones.net

49. Photo attribution: Jonas Seaman - http://www.flickr.com/photos/americanvirus/4167946259/ Licence: Attribution-NonCommercial-NoDerivs 2.0 Generic

    (CC BY-NC-ND 2.0)