The page and the desktop
Upcoming SlideShare
Loading in...5
×
 

The page and the desktop

on

  • 5,171 views

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

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.

Statistics

Views

Total Views
5,171
Views on SlideShare
2,991
Embed Views
2,180

Actions

Likes
3
Downloads
9
Comments
2

11 Embeds 2,180

http://glennjones.net 1244
http://www.glennjones.net 890
http://lanyrd.com 34
http://localhost 3
http://www.hanrss.com 2
http://translate.googleusercontent.com 2
http://ej.sectorit.net 1
http://feeds.feedburner.com 1
http://webcache.googleusercontent.com 1
https://twitter.com 1
http://twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The page and the desktop The page and the desktop Presentation Transcript

  • The page and the desktop
    Glenn JonesSkillswap – Brighton, UK20 Jul 2011
  • Let’s talk blue sky and real world
  • Objects and things made of data
  • <p class="vcard"><span class="fn">Glenn</span></p>a person called Glenn
    microformatshiv.com
  • <audio src="knowingme.mp3" control></audio>a piece of audio
    Any semantic structure
  • Drag and drop API was born of IE and now seems to be driven by Gmail
    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
  • <a href="http://glennjones.net" draggable="true">Glenn</a>*[draggable=true] { -khtml-user-drag: element; cursor: move;}
    Just for Safari
  • onDragStarte.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
  • Dragging files from the desktop using the gang of three
    Checkout Ryan Seddon articles on thecssninja.com
  • Dragging file from the desktop
  • for (i = 0; i <= e.dataTransfer.files.length - 1; i++) {
    var file = e.dataTransfer.files[i];
    varreader = 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
  • for (i = 0; i <= e.dataTransfer.files.length - 1; i++) {
    var file = e.dataTransfer.files[i];
    varreader = 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
  • for (i = 0; i <= e.dataTransfer.files.length - 1; i++) {
    var file = e.dataTransfer.files[i];
    varreader = 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
  • Dragging files to the desktop is only for the owners of Chrome
    Checkout Paul Kinlan articles and his Chrome web app appmator
  • e.dataTransfer.setData('DownloadURL', '…');mime-type : file name : urlimage/png:logo.png:http://glennjones.net/images/logo.png
    DownloadURL
  • varimg = 'data:image/png;base64,iVBORw …. 0KGgoA+'; vardurl = "image/png:logo.png:" + img;.setData('DownloadURL', durl);
    DownloadURL and Data URL
  • Copy and paste is one hell of a mess
  • clipboardData.setData
  • user-select: none;
    Creating a hidden text selection
  • Where’s the pastable="true"
  • Use content editable area to
    capture HTML and semantic
    mark-up during a paste
  • Saving files without user intervention – a placeno one wants go?
  • People Store has an auto save
  • Components.interfaces.nsILocalFileActiveXObject("Scripting.FileSystemObject")
    Proprietary browser APIs for saving files
  • TiddlySaver– Java solution
  • Using Data URLs to create hyperlinks to virtual files
  • Virtual file download
  • 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
    Data URL and Content-Disposition
  • 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
    Type attribute on anchor element
  • 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);
    Firefox hack – virtual download
  • We are so close to web pages being able to exchange data freely with other apps
    Let’s hope for a few more blue skies
  • Thank you@glennjonesg+glennjonesnethttp://glennjones.net
  • Creative Commons Attribution-Non-Commercial 2.0 UK: England & Wales Licence.Copyright Glenn Jones 2011www.glennjones.net
  • Photo use and attribution
    http://www.flickr.com/photos/86257563@N00/499426001/