Your SlideShare is downloading. ×
0
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
Beyond the page
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Beyond the page

3,505

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 …

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,505
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
8
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)

    ×