0
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 d...
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 FileRead...
for (i = 0; i <= e.dataTransfer.files.length - 1; i++) {  var file = e.dataTransfer.files[i];    var reader = new FileRead...
for (i = 0; i <= e.dataTransfer.files.length - 1; i++) {  var file = e.dataTransfer.files[i];    var reader = new FileRead...
e.dataTransfer.setData(DownloadURL, …);      mime-type : file name : urlimage/png:logo.png:http://glennjones.        net/i...
var img = data:image/png;base64,iVBORw …   var durl = "image/png:logo.png:" + img;       .setData(DownloadURL, durl);     ...
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.WebKitBl...
var name = ‘glennjones‘;window[name] = vcard;var link = document.createElement(a);link.setAttribute("type","text/x-vcard")...
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="P...
Sending data
var intent = new Intent();intent.action = "http://webintents.org/save";intent.type = "text/x-vcard";intent.data = card;win...
Receiving data
var intent = new Intent();intent.action = "http://webintents.org/save";intent.type = "text/x-vcard ";intent.data = " ";win...
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...
Photo attribution:Jonas Seaman - http://www.flickr.com/photos/americanvirus/4167946259/Licence: Attribution-NonCommercial-...
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Upcoming SlideShare
Loading in...5
×

Beyond the page

3,541

Published on

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.

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,541
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Today I would like to talk to you about browser UIHow we use browsersAnd how browsers interact with other applicationsOftern as I watch other people using browsers it is if they are focusing through a window into another worldThey seem to not see the surface/layer in front of themSo the work I am going to show you today is about building interfaces that engage the user with the browser surface.
  • Transcript of "Beyond the page"

    1. 1. Beyond the pageGlenn JonesFullfrontal – Brighton, UK11 Nov 2011
    2. 2. Window into a another world
    3. 3. Objects and things made of data
    4. 4. <audio src="knowingme.mp3" control></audio> a piece of audio Any semantic structure
    5. 5. The HTML5 drag and drop disaster – by PPK It’s so funny you have to read it
    6. 6. Dragging between apps
    7. 7. <a href="http://glennjones.net"draggable="true">Glenn</a> Making something draggable
    8. 8. onDragStart e.dataTransfer.setData(Text, Glenn); onDropvar name = e.dataTransfer.getData(Text); Passing data with drag and drop
    9. 9. draggables.com
    10. 10. .setData(application/json, {name: "glenn"}); .setData(text/x-vcard, BEGIN:VCARD…); mime-types
    11. 11. Checkout Ryan Seddon articles on thecssninja.com
    12. 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. 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. 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
    15. 15. e.dataTransfer.setData(DownloadURL, …); mime-type : file name : urlimage/png:logo.png:http://glennjones. net/images/logo.png Dragging files with DownloadURL
    16. 16. var img = data:image/png;base64,iVBORw … var durl = "image/png:logo.png:" + img; .setData(DownloadURL, durl); DownloadURL and Data URL
    17. 17. clipboardData.setData
    18. 18. Use content editable area tocapture HTML and semantic mark-up during a paste
    19. 19. Virtual file download
    20. 20. 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]
    21. 21. 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
    22. 22. Verb and Objects Post a Status Edit an Image Share a Bookmark Reply to Post Pick a Profile
    23. 23. Registering a Web Intent
    24. 24. <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
    25. 25. Sending data
    26. 26. var intent = new Intent();intent.action = "http://webintents.org/save";intent.type = "text/x-vcard";intent.data = card;window.navigator.startActivity(intent); Sending data
    27. 27. Receiving data
    28. 28. 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
    29. 29. http://codebits.glennjones.net/webintents/ contact-intent.html
    30. 30. In the real world
    31. 31. Creative independenceData ownership and portability
    32. 32. Thank you @glennjoneshttp://glennjones.net
    33. 33. Creative Commons Attribution-Non-Commercial 2.0 UK: England & Wales Licence. Copyright Glenn Jones 2011 glennjones.net
    34. 34. Photo attribution:Jonas Seaman - http://www.flickr.com/photos/americanvirus/4167946259/Licence: Attribution-NonCommercial-NoDerivs 2.0 Generic (CC BY-NC-ND 2.0)
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×