The document discusses various aspects of HTML5 drag and drop functionality, including passing data between applications and reading files dropped onto web pages. It covers techniques for managing file downloads and using web intents for sharing data like vCards. Additionally, it highlights creative independence and data ownership issues in the digital realm.

1. Beyond the page
Glenn Jones
Fullfrontal – Brighton, UK
11 Nov 2011

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

16. e.dataTransfer.setData('DownloadURL', '…');
mime-type : file name : url
image/png:logo.png:http://glennjones.
net/images/logo.png
Dragging files with DownloadURL

17. var img = 'data:image/png;base64,iVBORw …
var durl = "image/png:logo.png:" + img;
.setData('DownloadURL', durl);
DownloadURL and Data URL

19. clipboardData.setData

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

22. Virtual file download

23. 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]

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

27. Verb and Objects
Post a Status
Edit an Image
Share a Bookmark
Reply to Post
Pick a Profile

30. Registering a Web Intent

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

32. Sending data

33. var intent = new Intent();
intent.action = "http://webintents.org/save";
intent.type = "text/x-vcard";
intent.data = card;
window.navigator.startActivity(intent);
Sending data

34. Receiving data

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

36. http://codebits.glennjones.net/webintents/
contact-intent.html

37. In the real world

39. Creative independence
Data ownership and portability

40. Thank you
@glennjones
http://glennjones.net

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

42. Photo attribution:
Jonas Seaman - http://www.flickr.com/photos/americanvirus/4167946259/
Licence: Attribution-NonCommercial-NoDerivs 2.0 Generic (CC BY-NC-ND 2.0)