Beyond the page

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.

Transcript

1. Glenn Jones
   DevUp – Barcelona, Spain
   27 Apr 2012
   Beyond the page
   

   View Slide

2. Window into a another world
   

   View Slide

3. Objects and things made of data
   

   View Slide

4. control>
   a piece of audio
   Any semantic structure
   

   View Slide

5. The HTML5 drag and drop disaster – by PPK
   It’s so funny you have to read it
   

   View Slide

6. Dragging between apps
   

   View Slide

7. draggable="true">Glenn
   Making something draggable
   

   View Slide

8. onDragStart
   e.dataTransfer.setData('Text', 'Glenn');
   onDrop
   var name = e.dataTransfer.getData('Text');
   Passing data with drag and drop
   

   View Slide

9. draggables.com
   

   View Slide

10. .setData('application/json', '{name: "glenn"}');
    .setData('text/x-vcard', 'BEGIN:VCARD…');
    mime-types
    

    View Slide

11. Checkout Ryan Seddon articles on
    thecssninja.com
    

    View Slide

12. element.ondrop( function(e){
    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.readAsText(file);
    }
    } );
    Reading a file dragged onto a page
    

    View Slide

13. element.ondrop( function(e){
    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.readAsText(file);
    }
    } );
    Reading a file dragged onto a page
    

    View Slide

14. element.ondrop( function(e){
    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.readAsText(file);
    }
    } );
    Reading a file dragged onto a page
    

    View Slide

15. View Slide

16. Virtual file download
    

    View Slide

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

    View Slide

18. View Slide

19. e.dataTransfer.setData('DownloadURL', '…');
    mime-type : file name : url
    text/x-vcard:glenn.vcf:
    http://glennjones.net/images/my.vcf
    Dragging files with DownloadURL
    

    View Slide

20. window.BlobBuilder = window.BlobBuilder ||
    window.WebKitBlobBuilder || window.MozBlobBuilder;
    var builder = new window.BlobBuilder();
    builder.append(vcard);
    var blob = builder.getBlob('text/x-vcard');
    DownloadURL and BlobBuilder (Part 1)
    

    View Slide

21. window.URL = window.webkitURL || window.URL;
    var blobUrl = window.URL.createObjectURL(blob);
    var downloadUrl = ‘text/x-vcard’ + ':' + name + ':' + blobUrl;
    link.addEventListener("dragstart", function (e) {
    e.dataTransfer.setData("DownloadURL", downloadUrl);
    });
    DownloadURL and BlobBuilder (Part 2)
    

    View Slide

22. View Slide

23. View Slide

24. navigator.registerProtocolHandler(
    'mailto',
    'http://localhost/peoplestore/index.htm?%s',
    'Search PeopleStore (local)‘
    )
    Registering a custom protocol handler
    

    View Slide

25. mailto: or tel:
    x-isbn:
    
    HTML5 For Web Designers
    

    View Slide

26. View Slide

27. State of play about 9 months ago
    

    View Slide

28. element.oncopy( = function (e) {
    if (e.clipboardData) {
    e.clipboardData.setData('text/x-vcard',vcard);
    }
    });
    body.onpaste( = function (e) {
    if (e.clipboardData) {
    var vcard = e.clipboardData.getData('text/x-vcard');
    }
    });
    e.clipboardData
    

    View Slide

29. View Slide

30. Social button power billions of
    interaction – New hyperlink!
    

    View Slide

31. Hundreds of services – no choice
    

    View Slide

32. View Slide

33. Verb and Objects
    Post a Status
    Edit an Image
    Share a Bookmark
    Reply to Post
    Pick a Profile
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. element.onclick( function() {
    var intent = new Intent(
    "http://webintents.org/share",
    "text/uri-list",
    [ document.location.href ]
    );
    window.navigator.startActivity(intent);
    )};
    Sending data
    

    View Slide

39. Registering a Web Intent Service
    

    View Slide

40. action="http://webintents.org/pick"
    type="text/x-vcard"
    href="http://codebits.glennjones.net/contact-intent/"
    title="Pick a profile">
    Registering a Web Intent Service
    

    View Slide

41. {
    "name": " Pick a profile",
    “version”: "0.0.0.2",
    “icons” : {
    “16” : “favicon.ico”
    },
    "intents" : {
    " http://webintents.org/pick" : [{
    "type" : ["text/x-vcard"],
    “title" : "Pick a profile",
    "path" : "http://codebits.glennjones.net/contact-intent/"
    }]
    }
    } Registering a Web Intent Service
    using Chrome apps/extension manifest
    

    View Slide

42. Receiving data
    

    View Slide

43. Receiving data
    element.onclick( function() {
    var intent = new Intent(
    "http://webintents.org/pick",
    "text/x-vcard "
    );
    window.navigator.startActivity(intent, returnSelection);
    )};
    function returnSelection(){
    var vcards = intent.data
    }
    

    View Slide

44. In the new world order
    

    View Slide

45. In the real world
    

    View Slide

46. Thank you
    @glennjones
    http://codebits.glennjones.net
    

    View Slide

47. Dragging between apps
    Dragging files onto the browser
    Dragging onto the desktop
    Copy and paste
    Virtual/client-side file download
    registerProtocolHandler
    Web Intents / Activities
    Opera 12 beta has preliminary
    support for drag'n'drop
    

    View Slide

48. Creative Commons Attribution-Non-Commercial 2.0
    UK: England & Wales Licence.
    Copyright Glenn Jones 2012
    glennjones.net
    

    View Slide

49. Photo attribution:
    Jonas Seaman - http://www.flickr.com/photos/americanvirus/4167946259/
    Licence: Attribution-NonCommercial-NoDerivs 2.0 Generic (CC BY-NC-ND 2.0)
    

    View Slide