^{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!}

Next up for HTML Week we share a really great way to get readers interacting with your print products: maps! Whether you’re providing travel information about far off locales or just trying to help people find your local business, a map does the trick best, and a little interactivity can go a long way!

The interactive map that we added to the “Lonely Planet’s Travel Guides Just Got Better” article on page 12 of LAYARED Magazine is a perfect example of using interactive print to provide extra detailed information to readers.

Just scan the page and up pops a map with different locations throughout the world highlighted. The cities are from Lonely Planet’s annual list of top destinations. Tap one of the icons and photos and links for more information slide out of the bottom of the map. Each city features a YouTube video, links to airline and hotel services, additional country information and a link to download the Lonely Planet app.

Like the Superhero Puzzle from yesterday’s post, this example uses jQuery to produce the animation, namely the “.animate” function. Here’s how we did it.

The points on the map were placed “by hand” with CSS on their corresponding positions on the map. It’s a little time consuming to get right, but easy in the end. The smooth drop effect for the info pane was made using only simple jQuery code. After the map fades in, the info pane fades in behind it, remaining out of view.

When a user taps on one of the map points, three things happen. First the map point becomes white, which is accomplished simply by switching the image with an alternate white version. Second, the pane is dropped by using the jQuery “.animate” code function to increase the top margin. And lastly, all of the elements in the info pane, corresponding to the country map point that was clicked on, are loaded into the pane. When a user taps “View More,” the preliminary content fades out and the new slideshow content fades in.

The slideshow is also very easy to build using a trick with the “overflow:hidden” option for HTML “<div>” tags. Essentially, we created a smaller window ”<div>” through which a larger ”<div>” with the content passes through. That’s just how we did it, but there are lots of ways to create slideshows with basic HTML. Check out this resource for tips.

Augmented Reality Event 2011 was again provided with an inspiring keynote from Microsoft’s Blaise Aguera y Arcas, creator of Photosynth and architect of Bing Mobile and Bing Maps.

Last year, Blaise provided ARE attendees with a keynote similar to his well-known TED talk on Photosynth. Blaise was equally impressive this year in Santa Clara, providing a keynote on big data and augmented reality - an intersection we appreciate here at Layar.

In his presentation Blaise talks about how Photosynth is evolving and he ends with his latest project: Read Write World. A very impressive project about crunching all available big data to “index, unify, and connect of the world’s geo-linked media. Consisting of a cloud-based geo-indexing, matching and processing services.” All code is intended to be open source, serving an example of what big companies can aspire to.

Once again, we’ve got video for those who couldn’t make it to ARE this year, so check out Blaise’s great talk below!