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.

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)