The page and the desktop<br />Glenn JonesSkillswap – Brighton, UK20 Jul 2011<br />
Let’s talk blue sky and real world<br />
Objects and things made of data<br />
<p class="vcard"><span class="fn">Glenn</span></p>a person called Glenn<br />microformatshiv.com<br />
<audio src="knowingme.mp3" control></audio>a piece of audio<br />Any semantic structure<br />
Drag and drop API was born of IE and now seems to be driven by Gmail<br />The HTML5 drag and drop disaster – by PPK<br />I...
Dragging between apps<br />
<a href="http://glennjones.net" draggable="true">Glenn</a><br />Making something draggable<br />
<a href="http://glennjones.net" draggable="true">Glenn</a>*[draggable=true] {  -khtml-user-drag: element;  cursor: move;}<...
onDragStarte.dataTransfer.setData('Text', 'Glenn');onDropvar name = e.dataTransfer.getData('Text');<br />Passing data with...
draggables.com<br />
.setData('application/json', '{name: "glenn"}');.setData('text/x-vcard', 'BEGIN:VCARD…');<br />mime-types<br />
Dragging files from the desktop using the gang of three<br />Checkout Ryan Seddon articles on thecssninja.com<br />
Dragging file from the desktop<br />
for (i = 0; i <= e.dataTransfer.files.length - 1; i++) {<br />var file = e.dataTransfer.files[i];<br />varreader = new Fil...
for (i = 0; i <= e.dataTransfer.files.length - 1; i++) {<br />var file = e.dataTransfer.files[i];<br />varreader = new Fil...
for (i = 0; i <= e.dataTransfer.files.length - 1; i++) {<br />var file = e.dataTransfer.files[i];<br />varreader = new Fil...
Dragging files to the desktop is only for the owners of Chrome<br />Checkout Paul Kinlan articles and his Chrome web app a...
e.dataTransfer.setData('DownloadURL', '…');mime-type : file name : urlimage/png:logo.png:http://glennjones.net/images/logo...
varimg = 'data:image/png;base64,iVBORw ….  0KGgoA+'; vardurl = "image/png:logo.png:" + img;.setData('DownloadURL', durl);<...
Copy and paste is one hell of a mess<br />
clipboardData.setData<br />
user-select: none; <br />Creating a hidden text selection<br />
Where’s the pastable="true"<br />
Use content editable area to <br />capture HTML and semantic <br />mark-up during a paste<br />
Saving files without user intervention – a placeno one wants go?<br />
People Store has an auto save<br />
Components.interfaces.nsILocalFileActiveXObject("Scripting.FileSystemObject")<br />Proprietary browser APIs for saving fil...
TiddlySaver– Java solution <br />
Using Data URLs to create hyperlinks to virtual files<br />
Virtual file download<br />
Content-Type: text/plain; Content-Disposition: attachment; filename="mynotes.txt" Has been discussed - looks unlikely http...
type = content-type [CI] This attribute gives an advisory hint as to the content type of the content available at the link...
varobj = Microformats.get('hCard', document.body)[0]; var name = obj.fn.replace(/ /gi, '_'); window[name] = vCard(obj); va...
We are so close to web pages being able to exchange data freely with other apps<br />Let’s hope for a few more blue skies<...
Thank you@glennjonesg+glennjonesnethttp://glennjones.net<br />
Creative Commons Attribution-Non-Commercial 2.0 UK: England & Wales Licence.Copyright Glenn Jones 2011www.glennjones.net<b...
Photo use and attribution<br />http://www.flickr.com/photos/86257563@N00/499426001/<br />
Upcoming SlideShare
Loading in...5
×

The page and the desktop

5,107

Published on

With some of the newer HTML5 API’s it is now possible to redesign how your web pages interact with the desktop. Web pages are too often little islands that fail to interact well with the wider user interface of our devices. This talk will explain the new Drag/Drop and File APIs, demonstrating how to make web pages more equal in the world of applications.

Published in: Technology
2 Comments
3 Likes
Statistics
Notes
  • michael kors hamilton bagDarjeeling white tea is very mild and slightly sweet like other white teas. It brews to a pale golden color, michael kors hamilton large toteand because it is less compact than many other michael kors shoulder bagteas in loose form, requires more tea leaves per cup. However, it still michael kors hamilton handbagretains the astringency and muscatel flavor of Darjeeling black in a lighter flavor.
    Many tea drinkers who find black Darjeeling a bit strong will likely love white Darjeeling because it is more flavorful than many other white teas michael kors satchel handbagyet is not as robust as black Darjeeling.
    If youre interested in sampling a Darjeeling white tea, Darjeeling White michael kors tote bagTips is a great tea to start with. It very indicative of most good Darjeeling teas, with a light sweet note and a michael kors bags saleflavor that reminds you of muscatel and other white wine. If youve michael kors tote salefound other white teas nearly tasteless, you may be pleasantly surprised by the flavor in a Darjeeling michael kors black bag
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Wow... really handy set of tips.

    Will we evolve towards a lib that abstracts all those proprietary ways of handling file saving and dragndrop between different apps become more commonplace?

    I definitely hope so. ;)

    Great work, as usual, Glenn. Thanks for sharing.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
5,107
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
10
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

The page and the desktop

  1. 1. The page and the desktop<br />Glenn JonesSkillswap – Brighton, UK20 Jul 2011<br />
  2. 2. Let’s talk blue sky and real world<br />
  3. 3. Objects and things made of data<br />
  4. 4. <p class="vcard"><span class="fn">Glenn</span></p>a person called Glenn<br />microformatshiv.com<br />
  5. 5. <audio src="knowingme.mp3" control></audio>a piece of audio<br />Any semantic structure<br />
  6. 6. Drag and drop API was born of IE and now seems to be driven by Gmail<br />The HTML5 drag and drop disaster – by PPK<br />It’s so funny you have to read it<br />
  7. 7. Dragging between apps<br />
  8. 8. <a href="http://glennjones.net" draggable="true">Glenn</a><br />Making something draggable<br />
  9. 9. <a href="http://glennjones.net" draggable="true">Glenn</a>*[draggable=true] { -khtml-user-drag: element; cursor: move;}<br />Just for Safari <br />
  10. 10. onDragStarte.dataTransfer.setData('Text', 'Glenn');onDropvar name = e.dataTransfer.getData('Text');<br />Passing data with drag and drop<br />
  11. 11. draggables.com<br />
  12. 12. .setData('application/json', '{name: "glenn"}');.setData('text/x-vcard', 'BEGIN:VCARD…');<br />mime-types<br />
  13. 13. Dragging files from the desktop using the gang of three<br />Checkout Ryan Seddon articles on thecssninja.com<br />
  14. 14. Dragging file from the desktop<br />
  15. 15. for (i = 0; i <= e.dataTransfer.files.length - 1; i++) {<br />var file = e.dataTransfer.files[i];<br />varreader = new FileReader();<br />reader.onload= function (e) {<br /> console.log( e.target.result );<br />};<br />reader.onerror= function (e) {<br /> console.log(‘Error reading file’)<br /> };<br />reader.readAsText(file);<br />}<br /> <br />Reading a file dragged onto a page<br />
  16. 16. for (i = 0; i <= e.dataTransfer.files.length - 1; i++) {<br />var file = e.dataTransfer.files[i];<br />varreader = new FileReader();<br />reader.onload= function (e) {<br /> console.log( e.target.result );<br />};<br />reader.onerror= function (e) {<br /> console.log(‘Error reading file’)<br /> };<br />reader.readAsText(file); <br />}<br /> <br />Reading a file dragged onto a page<br />
  17. 17. for (i = 0; i <= e.dataTransfer.files.length - 1; i++) {<br />var file = e.dataTransfer.files[i];<br />varreader = new FileReader();<br />reader.onload= function (e) {<br /> console.log( e.target.result );<br />};<br />reader.onerror= function (e) {<br /> console.log(‘Error reading file’)<br /> };<br />reader.readAsText(file); <br />}<br /> <br />Reading a file dragged onto a page<br />
  18. 18. Dragging files to the desktop is only for the owners of Chrome<br />Checkout Paul Kinlan articles and his Chrome web app appmator<br />
  19. 19. e.dataTransfer.setData('DownloadURL', '…');mime-type : file name : urlimage/png:logo.png:http://glennjones.net/images/logo.png<br />DownloadURL<br />
  20. 20. varimg = 'data:image/png;base64,iVBORw …. 0KGgoA+'; vardurl = "image/png:logo.png:" + img;.setData('DownloadURL', durl);<br />DownloadURL and Data URL<br />
  21. 21. Copy and paste is one hell of a mess<br />
  22. 22. clipboardData.setData<br />
  23. 23. user-select: none; <br />Creating a hidden text selection<br />
  24. 24. Where’s the pastable="true"<br />
  25. 25. Use content editable area to <br />capture HTML and semantic <br />mark-up during a paste<br />
  26. 26. Saving files without user intervention – a placeno one wants go?<br />
  27. 27. People Store has an auto save<br />
  28. 28. Components.interfaces.nsILocalFileActiveXObject("Scripting.FileSystemObject")<br />Proprietary browser APIs for saving files<br />
  29. 29. TiddlySaver– Java solution <br />
  30. 30. Using Data URLs to create hyperlinks to virtual files<br />
  31. 31. Virtual file download<br />
  32. 32. Content-Type: text/plain; Content-Disposition: attachment; filename="mynotes.txt" Has been discussed - looks unlikely http://lists.w3.org/Archives/Public/uri/2010Feb/0069.html<br />Data URL and Content-Disposition<br />
  33. 33. type = content-type [CI] This attribute gives an advisory hint as to the content type of the content available at the link target address. It allows user agents to opt to use a fall-back mechanism rather than fetch the content if they are advised that they will get content in a content type they do not supporthttp://www.w3.org/TR/html4/struct/links.html#adef-type-A<br />Type attribute on anchor element <br />
  34. 34. varobj = Microformats.get('hCard', document.body)[0]; var name = obj.fn.replace(/ /gi, '_'); window[name] = vCard(obj); 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);<br />Firefox hack – virtual download<br />
  35. 35. We are so close to web pages being able to exchange data freely with other apps<br />Let’s hope for a few more blue skies<br />
  36. 36. Thank you@glennjonesg+glennjonesnethttp://glennjones.net<br />
  37. 37. Creative Commons Attribution-Non-Commercial 2.0 UK: England & Wales Licence.Copyright Glenn Jones 2011www.glennjones.net<br />
  38. 38. Photo use and attribution<br />http://www.flickr.com/photos/86257563@N00/499426001/<br />
  1. A particular slide catching your eye?

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

×