Beyond the page

Beyond the pageGlenn JonesFullfrontal – Brighton, UK11 Nov 2011

Window into a another world

Objects and things made of data

<audio src="knowingme.mp3" control></audio> a piece of audio Any semantic structure

The HTML5 drag and drop disaster – by PPK It’s so funny you have to read it

Dragging between apps

<a href="http://glennjones.net"draggable="true">Glenn</a> Making something draggable

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

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

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

clipboardData.setData

Use content editable area tocapture HTML and semantic mark-up during a paste

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

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

Registering a Web Intent

<intentaction="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 2011 glennjones.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)

http://glennjones.net	1264
http://www.glennjones.net	577
http://lanyrd.com	24
http://translate.googleusercontent.com	4
http://www.hanrss.com	2
http://translate.yandex.net	2
http://www.google.co.uk	1
http://led	1
http://www.85searchengines.com	1

Beyond the page

by Glenn Jones

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 1,876

Statistics

Beyond the page Presentation Transcript