^{Welcome to HTML Week here on the Layar blog where we’ll be taking a look at some of the great ways you can bring print alive with HTML widgets in the Layar Creator. We’ll provide a closer look at how each example was built, and provide you with some resources to add similar techniques to your own projects. Each example we feature can be found in the completely refreshed and updated LAYARED Magazine! Get yours today and see how interactive print is creating more engaging reader experiences!}

To kick off our series of HTML Week examples, we’ve got some fun that everyone can enjoy – puzzles and games! Adding some entertaining interactivity to otherwise static print makes for a more enjoyable reader experience, increasing the value of your publication.

Newspapers, magazines and other publications have long included simple crosswords, word jumbles or sudoku puzzles, but now things can get really interesting with interactive print! Check out the two examples below which can be found in the new LAYARED Magazine.

Drag-n-Drop Puzzle

The Drag-n-Drop Puzzle (found on page 8 of LAYARED Magazine) is a quick and easy way to add some fun to any kind of content. By simply cutting up an image into as many parts as you like, you can create a puzzle for readers to solve by dragging the pieces into place on their smartphone or tablet.

This example shows off the “draggable” capability of jQuery. It’s straightforward and easy for readers to understand – first you see one piece float up and snap into place, and then you have to do the same with the remaining pieces. Here’s more about this HTML example and how to make your own.

• Puzzle Pieces are created by splitting any image of choice into desired sections.
• Pieces are made “draggable” by using the “touch-punch” plugin explained and found here.
• Draggable and Snap UI can be found here.
• You could alternatively allow all puzzle pieces to be shown immediately from the beginning.
• To create a smoother look on the Layar App, the “light beam” effect (when the puzzle is loaded) was made using only jQuery and two images of light beams.
• The widget also offers a “Play Again?” button that refreshes the widget.

The Drag-n-Drop code may sound complex but the idea behind it is simple. First we placed a black-and-white version to serve as the area where all the puzzle pieces would end up. This doesn’t have to be done but we thought this would make it easier for users to see where they would be dropping puzzle pieces. If you want to have the puzzle snap into place above the physical image in your print content, simply remove the background image.

The way the snap feature works is one HTML “<div>” snaps onto another. For this puzzle to work, all you have to do is make one image snap onto an invisible copy of that image.

You need a piece to drag and a piece to snap onto and they need to be the same, so you just duplicate your puzzle pieces. You should have two of each piece, those for the user to drag and the others for them to snap onto. You then place the snap pieces where you want the pieces to fit together, but make them invisible, otherwise it will look as if the puzzle is already put together!

Now, when you drag the other visible pieces over the invisible ones, the drag designated pieces will snap into the correct place. Since the invisible images can’t be seen, it will look like the visible pieces are snapping into place on top of the black and white background, and presto! You’ve got a really fun and interactive puzzle game with very little effort.

Scratch-Away Game

People love scratch-away games of all kinds. The Scratch-Away Puzzle (found on page 27 of LAYARED Magazine) implements this brand of fun in AR. After scanning the page with Layar, readers simply scratch away at the puzzle to reveal the hidden message. Here’s more about this widget:

• Uses Canvas and Javascript, which you can find here.
• Users essentially scratch away normal image to reveal solved image below.
• Alternatively, a drawing feature could be added so that user can “paint” onto a canvas.

The Scratch-Away Puzzle may seem like complicated code, but it isn’t. The way we use the Canvas in our demo is by first layering two images on top of one another. One is the picture you see at the beginning, and right below it is the image with the appropriate letters blurred.

When you drag your finger across the screen and “scratch” it, you are actually erasing the front image and revealing the image behind it. It’s really as simple as that. This code can, of course, be reversed or a paint element could be added to create a canvas where a user can draw anything that they want.

That’s all for Puzzles and Games found in LAYARED Magazine. These examples were built with very basic HTML tools and techniques, but can add a lot of great interactivity to your print products!

Stay tuned here on the Layar blog throughout HTML Week for more great examples!

A video posted by Newspaperswork, a Belgian print marketing platform, is a humorous and interesting take on the power of print to engage its readers.

In it, they provided three ad execs from leading companies with personal chauffeurs for the day so they could focus on reading the paper during their commute. Unbeknownst to the execs, Newspaperswork planned for some interesting, funny and ridiculous things to happen along the way - things that would normally catch your attention.

Bears driving cars, a man on fire, golfers in the medians … the inanity was on full blast just beyond the window of the car. However, in each case, the ad exec had their eyes buried in their newspaper and never noticed any of the antics going on around them.

A funny spin on the engagement of print, but it comes with truth as well. This is just another example of why print is far from dead, because readers are highly engaged with print products while reading.

With Layar’s interactive print technology, print engagement can reach even higher rates. One YouTube commenter sarcastically notes, “I wonder why they didn’t post this video in a newspaper but on the internet.” Well, with Layar, they could have done just that.

Last week we introduced some brand new, powerful additions to the Layar Creator - the Twitter Feed, Image Carousel and HTML widgets. Twitter and image slideshows are pretty straightforward, but the HTML widget is full of possibilities.

In order to give you some inspiration for how to make the most of this powerful new tool, we’ve compiled some examples of how you might use dynamic HTML content with interactive print. 

Flip through the photos below to see some of most promising use cases for the HTML widget.

Of course these aren’t the only examples of how HTML can be used in the Creator - the possibilities are nearly endless. Including:

• Get info with forms - Let readers subscribe to your magazine right from its pages, or let them send feedback about specific content, like mailing the author of an article, with a simple contact form.
• Cultivate event info - Instead of just telling attendees at your event what’s happening and when, provide live information, like live Tweets or breaking news stories at a big conference!

There are lots of other great examples for how to use HTML, but we want to see you come up with them and place them on your print. It’s really easy to do - just build it in HTML, host the file somewhere, add the link in the Layar Creator and define the frame size.

Check out the end of this video to see how to use the HTML widget in the Creator. 

It’s that time of year again - the holiday season - and while many still send the same old Christmas cards out to their families and loved ones, a few ambitious companies out there are taking the opportunity to create a more engaging print to digital experience with Layar.

We’ve noticed several Christmas Card campaigns being published, so here is a handful of some that caught our eye. Flip through the slideshow below to see the cards, which have all been augmented with Layar - some even with our new dynamic widgets. 

Click the thumbnails below to view larger versions of the images for scanning with Layar.

Christmas Cards are a great opportunity to add digital content to printed material, whether it’s company videos and slideshows like the ones above, or a personal message to someone special. Sign into the Layar Creator today to get started making your own AR Christmas Card!!

Special thanks to Mic-Media, Orange Barrel Media, Kennispunt Oost, Colour Tech, Drukkerij van Deventer and Reclamebureau REM for allowing us to feature their cards on the Layar blog!

We received a special (and delicious) delivery here at the Layar office: chocolate! But not just any chocolate, this is chocolate from CHOCSTAR.nl - a Dutch site that lets you create your own custom chocolate bar.

But what’s really cool about CHOCSTAR is now every shipment comes in packaging which has been enhanced with the Layar Creator. Annefrid Imenkamp, CHOCSTAR’s CECM (Chief Executive Chocolate Maker… A.K.A. best job ever!) saw a demonstration of the Creator by very own Claire Boonstra just a few weeks ago. And now, their packaging is coming to life with digital content.

Here’s what she had to say about the experience:

“A couple of weeks ago I attended a network event where Claire Boonstra gave a presentation about Layar and the new Layar Creator. At that time we were in the process of updating the packaging of our chocolate and I was instantly inspired. The following day we got to work with the Layar Creator right away and were very pleased by the user friendliness and the easiness in which you can activate print with digital content.

At CHOCSTAR fun, interactivity, innovation and graphical design are of great importance and it’s these values in which Layar perfectly provides and significantly exceeds the QR code (which we previously used on our packaging). I also really like the fact that you have the possibility to change and improve the campaign whilst it is already published.

By means of the Layar creator, start-ups and smaller companies like CHOCSTAR which do not have big budgets or aren’t backed by wealthy investors are given the opportunity to provide added value (by means of information, interactivity and fun) to their customers and simultaneously distinguish it selves from competitors.

We are very enthusiastic about Layar and definitely thinking about other ways in which we can use the technology!”

Try it out yourself! You can either order some chocolate from CHOCSTAR, or click the image below and view it with Layar to experience the activated product packaging!