beyond the page

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)