HTML5 Projects: Personalized Ads

- Hi, I'm Joe Lowery, and I'd like to welcome you to HTML5 Projects, Personalized Ads. Website visitors are often bombarded with a blizzard of product offerings, many of which don't fit their lifestyle or situation. If you could narrow the options so folks would be more likely to take advantage of an advertised special, wouldn't you think it would increase sales? In this course, we're gonna bring some advanced HTML5 technologies to bear and create personalized advertisements based on user responses to basic questions.

We'll save those preferences on their own system so any time they visit the site, they'll see the offer created just for them. After you've had a chance to see what we're gonna build, I'll explain the underlying technologies including localStorage, the slider form element, Canvas, and CSS3 transforms. Then, we'll dig into the project itself. First, we'll set up the invitation which we'll make more tempting with a Canvas-drawn text on one side, and an easy-to-answer questionnaire, complete with slider, on the other.

To keep people intrigued, we'll set up a card-flipping transition between the two sides. Next, we'll create the offer page that will use HTML5 localStorage to handle the custom advertisement. Finally, we'll modify the initial page so that the users see a custom reminder of their special offer, all done with HTML5 Canvas feature, and we don't ask them to fill out a form they've already completed. So let's get rolling on HTML5 Projects, Personalized Ads.