With some of the newer HTML5 API’s it is now possible to redesign how your web pages interact with the desktop. Web pages are too often little islands that fail to interact well with the wider user interface of our devices. This talk will explain the new Drag/Drop and File APIs, demonstrating how to make web pages more equal in the world of applications.

1. The page and the desktop Glenn JonesSkillswap – Brighton, UK20 Jul 2011

2. Let’s talk blue sky and real world

3. Objects and things made of data

4. <p class="vcard"><span class="fn">Glenn</span></p>a person called Glenn microformatshiv.com

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

6. Drag and drop API was born of IE and now seems to be driven by Gmail The HTML5 drag and drop disaster – by PPK It’s so funny you have to read it

7. Dragging between apps

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

9. <a href="http://glennjones.net" draggable="true">Glenn</a>*[draggable=true] { -khtml-user-drag: element; cursor: move;} Just for Safari

10. onDragStarte.dataTransfer.setData('Text', 'Glenn');onDropvar name = e.dataTransfer.getData('Text'); Passing data with drag and drop

11. draggables.com

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

13. Dragging files from the desktop using the gang of three Checkout Ryan Seddon articles on thecssninja.com

14. Dragging file from the desktop

15. for (i = 0; i <= e.dataTransfer.files.length - 1; i++) { var file = e.dataTransfer.files[i]; varreader = 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

16. for (i = 0; i <= e.dataTransfer.files.length - 1; i++) { var file = e.dataTransfer.files[i]; varreader = 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

17. for (i = 0; i <= e.dataTransfer.files.length - 1; i++) { var file = e.dataTransfer.files[i]; varreader = 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

18. Dragging files to the desktop is only for the owners of Chrome Checkout Paul Kinlan articles and his Chrome web app appmator

19. e.dataTransfer.setData('DownloadURL', '…');mime-type : file name : urlimage/png:logo.png:http://glennjones.net/images/logo.png DownloadURL

20. varimg = 'data:image/png;base64,iVBORw …. 0KGgoA+'; vardurl = "image/png:logo.png:" + img;.setData('DownloadURL', durl); DownloadURL and Data URL

21. Copy and paste is one hell of a mess

22. clipboardData.setData

23. user-select: none; Creating a hidden text selection

24. Where’s the pastable="true"

25. Use content editable area to capture HTML and semantic mark-up during a paste

26. Saving files without user intervention – a placeno one wants go?

27. People Store has an auto save

28. Components.interfaces.nsILocalFileActiveXObject("Scripting.FileSystemObject") Proprietary browser APIs for saving files

29. TiddlySaver– Java solution

30. Using Data URLs to create hyperlinks to virtual files

31. Virtual file download

32. Content-Type: text/plain; Content-Disposition: attachment; filename="mynotes.txt" Has been discussed - looks unlikely http://lists.w3.org/Archives/Public/uri/2010Feb/0069.html Data URL and Content-Disposition

33. type = content-type [CI] This attribute gives an advisory hint as to the content type of the content available at the link target address. It allows user agents to opt to use a fall-back mechanism rather than fetch the content if they are advised that they will get content in a content type they do not supporthttp://www.w3.org/TR/html4/struct/links.html#adef-type-A Type attribute on anchor element

34. varobj = Microformats.get('hCard', document.body)[0]; var name = obj.fn.replace(/ /gi, '_'); window[name] = vCard(obj); 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

35. We are so close to web pages being able to exchange data freely with other apps Let’s hope for a few more blue skies

36. Thank you@glennjonesg+glennjonesnethttp://glennjones.net

37. Creative Commons Attribution-Non-Commercial 2.0 UK: England & Wales Licence.Copyright Glenn Jones 2011www.glennjones.net

38. Photo use and attribution http://www.flickr.com/photos/86257563@N00/499426001/