HTML and CSS Reference
In-Depth Information
Figure 6-1.
Shows the ad's drag-and-drop example
I hope you got all that; I know it's a lot. If you didn't, you can read through the previous code again and for follow
up learning's visit
http://html5laboratory.com/drag-and-drop.php
. DnD is a bit of a hidden gem to some users,
especially in the ad environment, so if it's a specific function in the ad experience, be sure to include a relevant and
clear call to action to ensure that your users take the appropriate action.
Drag-and-Drop in Advertising
With some basic DnD primer under your belt, let's think about how the drag-and-drop (DnD) API can apply to us
folks in the advertising space. At first thought, I believe the DnD API can bring new ways to play interactive games.
For example, it allows a user to play the game of chess more accurately as it resembles the users' native behavior. It
can re-create an interactive shopping cart experience, where users drag products to a checkout cart which could fill
depending on the amount of products getting dropped into it. I think once you start playing around with this API, the
possibilities when using this standard are limitless.
It can drag elements into a to-do list so a user can print at a later time or even be used for functionality on a mix
up puzzle game, where the user needs to assemble the puzzle for a hidden offer. I also see DnD bringing the ability
to handle a complex publisher integration—for instance, where a user drops select content from the publisher's page
onto the ad's drop space (as was just covered). This could be sort of an Easter egg hunt, where the end user finds
relevant content within the site and gets special deals with the discovery of these “eggs.”
Granted, DnD still has its fair share of quirky issues, but if you're interested in an in-depth look at the DnD API,
go to
http://html5rocks.com/en/tutorials/dnd/basics
.
You can view the current spec at
http://dev.w3.org/
File
The updated File API in HTML5 allows web content to prompt users to select local files on their machine and then
read the contents of those files within the browser itself, with no need of server-side help or a plugin. This selection
can be done either by using an HTML input element or with the just-learned DnD API. If you use Gmail (Google's
mail service) and a modern browser, chances are you're using the File API without knowing it when you attach files
to mail. You may think, “Well sure, I've added attachments to e-mail before,” but did you know you can drag those
