beyond the page
DESCRIPTION
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.TRANSCRIPT
Glenn JonesFullfrontal – Brighton, UK11 Nov 2011
Beyond the page
Window into a another world
Objects and things made of data
<audio src="knowingme.mp3" control></audio>
a piece of audio
Any semantic structure
Drag and drop API was born of IE and now seems
to be driven by Gmail
The HTML5 drag and drop disaster – by PPKIt’s so funny you have to read it
Dragging between apps
<a href="http://glennjones.net" draggable="true">Glenn</a>
Making something draggable
onDragStarte.dataTransfer.setData('Text', 'Glenn');
onDropvar name = e.dataTransfer.getData('Text');
Passing data with drag and drop
draggables.com
.setData('application/json', '{name: "glenn"}');.setData('text/x-vcard', 'BEGIN:VCARD…');
mime-types
Dragging files from the desktop using the gang of
three
Checkout Ryan Seddon articles on thecssninja.com
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
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
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
Dragging files to the desktop is only for the
owners of Chrome
e.dataTransfer.setData('DownloadURL', '…');
mime-type : file name : urlimage/png:logo.png:http://glennjones.net/images/logo.png
Dragging files with DownloadURL
var img = 'data:image/png;base64,iVBORw … var durl = "image/png:logo.png:" + img;
.setData('DownloadURL', durl);
DownloadURL and Data URL
Copy and paste is one hell of a mess
clipboardData.setData
Use content editable area to capture HTML and semantic
mark-up during a paste
Downloading virtual filesThe good the bad and the
ugly
Virtual file download
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]
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
Web IntentsGluing web functionality
together
Verb and Objects
Post a StatusEdit an Image
Share a BookmarkReply to PostPick a Profile
Registering a Web Intent
<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
Sending data
var intent = new Intent(); intent.action = "http://webintents.org/save"; intent.type = "text/x-vcard"; intent.data = card;
window.navigator.startActivity(intent);
Sending data
Receiving data
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
http://codebits.glennjones.net/webintents/contact-intent.html
In the real world
Creative independenceData ownership and portability
Thank you
@glennjoneshttp://glennjones.net
Creative Commons Attribution-Non-Commercial 2.0 UK: England & Wales Licence.
Copyright Glenn Jones 2011glennjones.net
Photo attribution:Jonas Seaman - http://www.flickr.com/photos/americanvirus/4167946259/Licence: Attribution-NonCommercial-NoDerivs 2.0 Generic (CC BY-NC-ND 2.0)