Glenn Jones Fullfrontal – Brighton, UK 11 Nov 2011 Beyond the page
May 12, 2015
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)