If you’re looking for a nerdy book to give that budding programmer in your family this holiday season, Google has you covered.

Best of all, it’s free (you cheapskate) and it’s written entirely in HTML5 (you nerd).

The book is called 20 Things I Learned About Browsers and the Web. According to the forward, it’s “a short guide for anyone who’s curious about the basics of browsers and the web.”

It covers the structure of the web, then offers primers in HTML, JavaScript and Ajax, then offers a glimpse at what’s next in the world of browsers and web apps. There are also discussions about privacy, security, open source software, and design.

The book was written and built by the Google Chrome team, so the bulk of the technical stuff highlights features in Google’s browser. Under the hood, there’s some cool tech going on. There are fancy CSS type treatments and animations throughout. They’ve also recreated the familiar page-flipping animation as you thumb through the book, which frankly smells like the 1990s but adds a rather quaint touch here.

It’s a solid demonstration of how HTML5 can be used to present content in a compelling, “featurey” way. Plus, it’s not just for kids — I learned something new flipping through it, though I’m not saying what. I have a reputation to uphold.

See also:

• 20 Years Ago, The Web’s Founders Ask for Funding
• Beautiful Websites: Stamen’s Pretty Maps
• Meet Treesaver, a New HTML Magazine App

We’ve seen some colorful map mashups in the past, like Hypercities and HeatMap, but few are as abstract and beautiful to look at as Stamen Design’s Pretty Maps.

The aptly-named app pulls sets of geodata from various freely available open mapping projects and plots them atop one another. Pretty Maps grabs street-level data from OpenStreetMap (the “Wikipedia of maps”), land formation data from Natural Earth and place-name and place-shape data from Flickr shapefiles — Flickr’s outlines generated by the tags people have attached to photos taken in that place. So all the data is from crowdsourced databases and either public domain or licensed through the Creative Commons. The maps are generated using TileStache and PolyMaps, two open source tools developed in-house at Stamen.

The result is a map that’s not so much usable for navigation as it is pretty to look at. Cities degrade into abstract and unique blobs, with pastel colors overlaying one another. The shapes are alien looking in texture and density, but instantly recognizable if you’re already familiar with the terrain.

Stamen Design is a small, San Francisco-based data visualization firm best known in its early days for its work with Digg. Stamen specializes in abstract, trippy geo-spatial data visualizations like Trace and Cabspotting. The firm was also awarded a Knight News Grant in June to visualize publicly-available civic data.

Pretty Maps is both pretty and pretty slow. The tiles take about ten seconds to render at the lower zoom levels. This is because the Stamen team hasn’t really optimized Pretty Maps for performance. The multiple data sets get pulled in separately and are layered inside your browser using JavaScript instead of being combined first and served as one, a conscious design choice: “We wanted to leave all the plumbing exposed so that people could look at it and learn from it and, hopefully, build something new,” Stamen says on its website.

So, there’s your invitation to View Source and start digging around. We can only hope the little Grover “Near, Far” zoom controls are part of the package.

See also

• Other “Beautiful Websites”
• Microsoft Adds OpenStreetMap Layer to Bing Maps
• Where’d You Go Last Summer? Flickr Allows OpenStreetMap, FourSquare Geotags
• Historical Map Mashups Turn Cities Into Glass Onions of Time
• OpenStreetMaps Project Takes Maps in a Different Direction

Jordi Boggiano has created Slippy, a lightweight library for building animated, browser-based slideshow presentations. Slippy is very simple — check out a short demo and view the source code. Grab the code from github.

It’s written in HTML and it uses JQuery for the interactions (touch the space bar, use the arrow keys, or click the mouse to go to the next slide). It also uses Syntax Highlighter, a bit of JavaScript that pretties up snippets of code — we use Syntax Highlighter for tutorials here on Webmonkey — so it’s especially useful for presentations where you’re showing code examples. Jordi points out that Slippy can run your scripts in pretty alert() boxes (rather than the standard, boring browser alerts) to show your examples in action.

Composing a presentation is simple. Just hack a basic HTML file. Each slide is in its own <div>, and all the markup beyond that is standard HTML. Bravo!

See Also:

• Beautiful Websites: Former Apple Designer’s Amazing Photo Gallery
• Get Started With JQuery
• NYT Shows Off Real-Time Tweet Tracker During Stevenote

Slick photo gallery plug-ins for JQuery, Dojo and other JavaScript libraries mean that the days of the boring thumbnail grids are well behind us. But the same ease-of-use means that slick slideshows are everywhere — it’s hard to stand out.

Unless you’re Mike Matas. The former Apple designer and co-founder of Delicious Monster recently unveiled a new photo blog that has perhaps the slickest, yet simplest, gallery script we’ve ever seen.

Perhaps more impressive than the clever slide navigation and the blurred background photos, what’s really amazing about the site is how simple the interface is — Matas manages to pack in everything from embedded maps to comments without overwhelming the photos.

The only caveat is that the site requires a modern web browser with support for emerging standards. Internet Explorer users; nothing to see here. Also note that performance lags a bit in Firefox 3.6 compared to WebKit browsers like Safari and Chrome.

We’d hate to see a million ripoffs of this design, but if you want to do something similar, the site’s developers, Chi Wai Lau and Nefaur Khandker, say that it was built using the MooTools JavaScript framework.

Check out our three-part MooTools tutorial on Webmonkey if you want to learn more about using the free UI framework.

One very nice touch we like on the site is that scrolling changes the URL so there’s no back-button breakage. Unfortunately, if you turn off JavaScript entirely you notice that the site doesn’t function at all, which is worth remembering should you consider doing something similar.

See Also:

• Tutorial: Get Started With MooTools
• Beautiful Websites: Pictory’s Ode to Spring
• Using ‘Mad Libs’ to Make Web Forms More Fun
• Help Mozilla Improve Firefox’s New ‘Home’ Tab

There’s currently a debate raging in the publishing world over whether the web is robust enough of a platform to present magazine-like stories properly — paginated content heavy on photography, design and stylized type. The current popular opinion is that the web is not up to snuff, and thus the scramble towards dedicated readers and apps specially built for new devices like the iPad. Also, the reason for the print industry’s long-standing relationship with Flash, which handles such things in a manner that’s good enough for most.

But the web continues to mature as a presentation platform. Here’s another example of that growth: Pictory, the most recent endeavor from designer and editor Laura Brunow Miner. The site showcases captioned photography in a very magazine-like manner.

Check out the latest “issue,” a showcase on the arrival of Spring. It’s gorgeous, and it’s all done in semantic HTML, JavaScript and CSS. The fonts are provided by Typekit. The page-to-page navigation is controlled by the left and right arrow keys, but your scroll wheel works, too. There are even hidden gems, like the scripted event that makes the flowers on the title page bloom when the mouse moves over them.

When you’re done browsing Pictory, read Laura’s essay on her personal blog about how the web’s flexibility shaped her view of what’s possible in a digital magazine.