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.
15. 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
16. 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
17. 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
18. Dragging files to the desktop is only for the owners of Chrome Checkout Paul Kinlan articles and his Chrome web app appmator
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 Data URL and Content-Disposition
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 Type attribute on anchor element
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); Firefox hack – virtual download
35. 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