HTML5 Projects: Personalized Ads

with Joseph Lowery
please wait ...
HTML5 Projects: Personalized Ads
Video duration: 0s 1h 11m Intermediate


Imagine gathering some simple information about your site visitors (like gender, age, and location) and having that change the advertisements shown on the page. In this installment of HTM5 Projects, discover how to combine advanced HTML5 form elements to gather personal details from visitors and create a better user experience. Author Joseph Lowery shows how to leverage local storage to save and retrieve customization parameters, and work with the Canvas element to create a personalized ad on the fly. HTML5 technologies covered include HTML5 form elements, HTML5 local storage, HTML5 Canvas, and the HTML5 classList tag, which change classes on page elements without JavaScript.

Business Web
HTML JavaScript CSS


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

please wait ...