HTML5 Advertisements
May 9th, 2010
Flash sucks, all it’s good for is flashing advertisements.
If Flash didn’t exist and HTML5 was the standard, what format would advertisers use? Here’s an example of the future in HTML5 Canvas (great tutorial here Mozilla Canvas tutorial).
HTML5 Ad:
Overall it was fairly easy and intuitive to create – the hardest part was integrating it into a WordPress Post! It works in Chrome (minus the audio), looks slightly different in Firefox, and doesn’t work at all in IE. Unfortunately, we won’t be seeing many of these ads until its browser penetration and development tools improve. Maybe it is Adobe’s fault for making it too easy?
Javascript portion:
function start(){ // Redraw the canvas every 80 ms setInterval(draw,80); // Add event listener for mouse over / mouse click canvas.addEventListener('mousemove', onMouseMove, false); canvas.addEventListener('click', onMouseClick, false); } function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Draw rectangle ctx.fillStyle = getRandomColor(); ctx.clearRect(0,0,300,100); // clear canvas ctx.fillRect(0,0,300,100); // Outer border ctx.lineWidth = 2; ctx.strokeRect(1,1,298,98); // Draw text ctx.fillStyle = 'white'; ctx.textBaseline = 'top'; ctx.font = 'bold 40px sans-serif'; ctx.fillText('YOU WIN!!!', 40, 30); ctx.strokeText('YOU WIN!!!', 40, 30); } function onMouseClick(ev) { window.location.href = 'http://www.google.com'; } function onMouseMove(ev) { // Play Audio document.getElementById('audio').play(); } function getRandomColor() { var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); return "rgb(" + r + "," + g + "," + b + ")"; }
Doesn’t work right on the iPad either.