Beyond the page

  • 3,404 views
Uploaded 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 …

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,404
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
7
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

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