Media Blog

We’ve all seen it happen: a less web savvy friend wants to upload an image so they grab it from the desktop and drag it over to their web browser where… nothing happens. It’s good for a chuckle every now and then, but really, isn’t that exactly how you should upload a file to the web? After all, it works everywhere else on your PC.

Developers have been pining for drag-and-drop support in webapps pretty much since the first servers came online. But now, with HTML5 nearly here, true drag and drop support is about to become a reality.

Yes, there are JavaScript libraries that allow you to create drag-and-drop interfaces within the browser, but that’s not what we’re talking about. Rather, HTML5 offers the holy grail — drag a file from your desktop straight to a browser window and it will magically upload.

Of course, for developers, nothing is every that easy. The drag-and-drop portion of the HTML5 spec is very new, incomplete and at the moment, really only works in a very limited form in Firefox 3.5 and Safari nightly builds.

But that doesn’t mean people are starting to experiment with it. Leslie Orchard of Mozilla recently posted a very nice tutorial that will walk you through the basics of the HTML5 drag-and-drop API and help you create a little demo app (another nice working demo can be found over at The CSS Ninja).

Orchard concludes that the “first-class drag and drop events in HTML5 and Firefox make supporting this form of UI interaction simple, concise, and powerful.” However, web developer Francisco Tolmasky has a decidedly different take.

Tolmasky recently posted about his experiences implementing a drag-and-drop interface for his slide presentation web app, 280 North (think Keynote in the browser). Tolmasky found that not only are there a number of browser bugs and implementation shortcomings, but the spec itself is flawed in many ways. For example, as Tolmasky discovered, there is no reliable way to determine whether a user wants to drag an object, or simply select several by dragging to highlight them.

Another problem, and one that’s more prominent in the other side of the drag-and-drop experience (i.e. dragging out of or within the browser) is the complexity involved in figuring out where the user plans to drop the selected item and how that effects what the webapp should do with the item:

Take 280 Slides for example: When a user drags the slides out of slides navigator, he may be planning to drop it to any number of locations. If he is dragging it from one instance of 280 Slides to another, then we want to provide a serialized version of these slides so that they can be added to the other presentation. If however, he drags these slides into a program like Photoshop, then we would want to provide image data. If he were to drag them to his desktop, then perhaps we could provide a PDF version. He could even drag them to his text editor and expect the text contents of his slides to be pasted.

Desktop APIs provide hooks to delay the “what do I do with this object” problem until you actually drop the object somewhere, which saves a ton of processing overhead. But the HTML5 spec currently doesn’t have any such delays. And, in the case of dragging a large number of objects, this shortcoming can result in significant lag times.

Luckily the HTML5 drap-and-drop API is still a work in progress. The WHATWG is still gathering developer feedback. As always, if you’ve got ideas or solutions let them know on the official WHATWG mailing list.

See Also:

• HTML5 File API Brings Drag-and-Drop File Uploads to the Web
• W3C Drops Audio and Video Codec Requirements From HTML 5
• How HTML 5 Is Already Changing the Web

We’ve all seen it happen: a less web savvy friend wants to upload an image so they grab it from the desktop and drag it over to their web browser where… nothing happens. It’s good for a chuckle every now and then, but really, isn’t that exactly how you should upload a file to the web? After all, it works everywhere else on your PC.

Developers have been pining for drag-and-drop support in webapps pretty much since the first servers came online. But now, with HTML5 nearly here, true drag and drop support is about to become a reality.

Yes, there are JavaScript libraries that allow you to create drag-and-drop interfaces within the browser, but that’s not what we’re talking about. Rather, HTML5 offers the holy grail — drag a file from your desktop straight to a browser window and it will magically upload.

Of course, for developers, nothing is every that easy. The drag-and-drop portion of the HTML5 spec is very new, incomplete and at the moment, really only works in a very limited form in Firefox 3.5 and Safari nightly builds.

But that doesn’t mean people are starting to experiment with it. Leslie Orchard of Mozilla recently posted a very nice tutorial that will walk you through the basics of the HTML5 drag-and-drop API and help you create a little demo app (another nice working demo can be found over at The CSS Ninja).

Orchard concludes that the “first-class drag and drop events in HTML5 and Firefox make supporting this form of UI interaction simple, concise, and powerful.” However, web developer Francisco Tolmasky has a decidedly different take.

Tolmasky recently posted about his experiences implementing a drag-and-drop interface for his slide presentation web app, 280 North (think Keynote in the browser). Tolmasky found that not only are there a number of browser bugs and implementation shortcomings, but the spec itself is flawed in many ways. For example, as Tolmasky discovered, there is no reliable way to determine whether a user wants to drag an object, or simply select several by dragging to highlight them.

Another problem, and one that’s more prominent in the other side of the drag-and-drop experience (i.e. dragging out of or within the browser) is the complexity involved in figuring out where the user plans to drop the selected item and how that effects what the webapp should do with the item:

Take 280 Slides for example: When a user drags the slides out of slides navigator, he may be planning to drop it to any number of locations. If he is dragging it from one instance of 280 Slides to another, then we want to provide a serialized version of these slides so that they can be added to the other presentation. If however, he drags these slides into a program like Photoshop, then we would want to provide image data. If he were to drag them to his desktop, then perhaps we could provide a PDF version. He could even drag them to his text editor and expect the text contents of his slides to be pasted.

Desktop APIs provide hooks to delay the “what do I do with this object” problem until you actually drop the object somewhere, which saves a ton of processing overhead. But the HTML5 spec currently doesn’t have any such delays. And, in the case of dragging a large number of objects, this shortcoming can result in significant lag times.

Luckily the HTML5 drap-and-drop API is still a work in progress. The WHATWG is still gathering developer feedback. As always, if you’ve got ideas or solutions let them know on the official WHATWG mailing list.

See Also:

• HTML5 File API Brings Drag-and-Drop File Uploads to the Web
• W3C Drops Audio and Video Codec Requirements From HTML 5
• How HTML 5 Is Already Changing the Web

The creator of some of our favorite mashups is back with an awesome new creation: Delicious TV.

Tony Hirst, whose previous creations include map-oriented mashups that turn Google Maps into a blogging tool or even a geo-calendar, has created a way to send your Delicious video bookmarks on to Boxee.tv.

The result is Boxee playlist you can easily update simply by bookmarking a video and adding a specific tag.

Hirst’s tool uses Yahoo Pipes to then parse through the resulting Delicious RSS link and create a playlist in a format Boxee can understand. The results show up in a Boxee playlist like the one pictured above.

There are some caveats to keep in mind, namely that only certain videos sources will work. But if you’ve been looking for an easy way to get web video over to your television, Hirst’s Delicious TV is a slick and easy way to do it.

Check out Hirst’s Delicious TV write up for full instructions on how to make it work (naturally you’ll need to have Boxee installed and a Delicious account).

[via Lifehacker]

See Also:

• Killer Mashup Plots Your Schedule on a Google Map
• Pipes Mashup Turns Google Maps into a Blogging Tool
• Create Slick Spreadsheet Mashups in Google Docs

The creator of some of our favorite mashups is back with an awesome new creation: Delicious TV.

Tony Hirst, whose previous creations include map-oriented mashups that turn Google Maps into a blogging tool or even a geo-calendar, has created a way to send your Delicious video bookmarks on to Boxee.tv.

The result is Boxee playlist you can easily update simply by bookmarking a video and adding a specific tag.

Hirst’s tool uses Yahoo Pipes to then parse through the resulting Delicious RSS link and create a playlist in a format Boxee can understand. The results show up in a Boxee playlist like the one pictured above.

There are some caveats to keep in mind, namely that only certain videos sources will work. But if you’ve been looking for an easy way to get web video over to your television, Hirst’s Delicious TV is a slick and easy way to do it.

Check out Hirst’s Delicious TV write up for full instructions on how to make it work (naturally you’ll need to have Boxee installed and a Delicious account).

[via Lifehacker]

See Also:

• Killer Mashup Plots Your Schedule on a Google Map
• Pipes Mashup Turns Google Maps into a Blogging Tool
• Create Slick Spreadsheet Mashups in Google Docs