• A link to Google Maps when JavaScript is disabled.
• Support for the Google AJAX API Loader.
• Using the small map control.
• Keyboard accessibility for all control elements within the map.

As a fallback without JavaScript — because people disable it, because their mobile device doesn’t support it, or because it gets filtered by corporate proxies — Patrick used the little known Google Static Maps API, but for some reason he missed adding the link to Google. Here is the fix:

1. <div id="map">
2. <a href="http://maps.google.com/maps ?f=q&amp;output=html &amp;q=50.110950+8.684666" title="Google Maps">
3. <img src="http://maps.google.com/staticmap?hl=en &amp;center=50.112267,8.678384 &amp;markers=50.110950,8.684666,red &amp;zoom=15&amp;size=500x300 &amp;key=[Your API Key]" alt="City map of Frankfurt" width="500" height="300" />
4. </a>
5. </div>

Then I changed how the map is embedded. As it seems that the API loader is more current, I preferred that way:

1. <script type="text/javascript" src="http://www.google.com/jsapi?key=[Your API Key]"></script>
2. <script type="text/javascript" src="/js/accgmap.js"></script>
3. <script type="text/javascript">
4. google.load( 'maps', '2', { 'language' : 'en' } );
5. google.setOnLoadCallback( GMAP.initMap );
6. </script>

Using the small control elements is trivial: SmallMapControl(). The next thing I wanted to change was keyboard access to all controls, in particular for the map type, i.e. Map | Satellite | Hybrid. Patrick refers to an id, but I found that all relevant controls have a title, so I just checked for that attribute. I also dropped setting the style attribute in JavaScript as that belongs in the CSS file. His original function GKeyboardPatch() now looks like this (note the while loop for a slightly better performance):

1. GKeyboardPatch: function( map ) {
2. var button, divs = map.getContainer().getElementsByTagName( 'div' );
3. var i = 0;
4. while ( divs[i] ) {
5. if ( divs[i].getAttribute( 'log' ) || ( divs[i].getAttribute( 'title' ) && divs[i].getAttribute( 'title' ) != '' ) ) {
6. button = document.createElement( 'button' );
7. button.setAttribute( 'value', divs[i].getAttribute( 'title' ));
8. divs[i].appendChild( button );
9. if ( divs[i].getAttribute( 'log' )) { // only control buttons
10. // override the IE opacity filter that Google annoyingly sets
11. divs[i].style.filter = '';
12. // should really set to 'transparent'
13. divs[i].style.background = 'url( http://www.google.com/ intl/en_ALL/mapfiles/transparent.png )';
14. }
15. }
16. i++;
17. }
18. }

Now remember I said I’d rather separate style and behaviour, so here are a some lines of CSS with the setting of width and height for the #map being most relevant, otherwise it will collapse:

1. #map {
2. height: 300px;
3. overflow: hidden;
4. position: relative;
5. width: 500px;
6. }
7. #maps-static, #maps-static img {
8. display: block;
9. }
10. #map span.note {
11. display: none;
12. }
13. #map button {
14. background: transparent;
15. border-style: solid;
16. border-width: 0;
17. cursor: pointer;
18. height: 100%;
19. left: -2px;
20. margin: 2px;
21. overflow: hidden;
22. padding: 2px;
23. position: absolute;
24. text-indent: -100em;
25. top: -2px;
26. width: 100%;
27. }
28. #map a:focus, #map a:active, #map button:focus, #map button:active {
29. outline: 2px dashed #61bf1a;
30. }

And that’s it, thanks again to Patrick for the solid foundation I built upon. Now download the JavaScript code and try to tab through the map below.

Actually on the other website I extracted hCard microformats from the page as well and displayed the addresses on the map, but I was lazy and used jQuery. I thought it doesn’t look well here mixed with Patrick’s clean DOM scripting, but feel free to take it from the original website.

A little known W3C standard is the Platform of Internet Content Selection (PICS). You can tell from the poor layout that it’s a very old standard — in fact all of its parts are from 1996 and 1997. OMG, that’s ancient! That’s even older than HTML 4, CSS, or the Web Content Accessibility Guidelines!

PICS is a system for self-labeling. That raised some concerns about censorship in 1998, but governments who really want to censor their population’s internet access have found more effective ways to block content (I, for one, can recommend Tor as a countermeasure, also available as a Firefox extension, though I cannot guarantee your government approves it). So what remains is a meta element with information about your website, accompanied by a machine readable RDF/XML file.

1. <link rel="meta" href="/pics-label.rdf" type="application/rdf+xml" title="ICRA PICS label" />
2. <meta http-equiv="pics-label" content='(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "http://learningtheworld.eu" r (n 0 s 0 v 0 l 1 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 1))' />

Since in the nineties internet progress was driven by porn, PICS is mostly about child protection, although it can be used to describe a machine readable privacy statement and other things as well. Think of an early predecessor of the Semantic Web. Or in microformats it would be hPorn. Well, I assume very few of you run xxx sites, so why am I wasting your time with this post?

Because the PICS standard is most convenient when your website is not pornographic. The standard provides a way to label your website and distinguish between pictures of naked people as Greek ancient sculptures, in an educational or journalistic context, or as mere porn. But despite the name it’s not only suitable for rating pictures, it’s for text content or user-generated content as well, among other criteria. Plus the PICS label is recognized by Google, so it’s not about rushing ahead and self-censoring to please our overlords, it’s a measure to maximize the target audience and avoid mislead traffic. I believe a few of your clients may appreciate that. For example although this post uses quite a few trigger words, PICS provides a way to tell search engines and cybersitting software about the true nature of this article. I love that ability!

In this article

• Introduction
• Installation
• FAQ
• Changelog
• Discussion

Introduction

I always wanted to implement one thing since I started the blog: a simple inclusion of Amazon items. I didn’t want to search through results that existing plugins provided. When I wrote about something like a book, I already used machine tags to identify the subject! So I found the inspiration to write my first real WordPress plugin: Amazon Machine Tags.

Here’s what it does:

1. It identifies any tag in the machine (or triple) tag form book:isbn=1234567890 or amazon:asin=1234567890. That works with native tags from WordPress 2.3 and later, Bunny’s Technorati Tags, Jerome’s Keywords, or as inline text (see below).
2. Then it gets the item information and a thumbnail image from the Amazon Web Services API. That’s the real thing including prices and such, no cheap RSS feed.

3. The item(s) are displayed in the sidebar or in a blog article with a link to the visitor’s best match (if the ip2country plugin is installed) or a default Amazon shop of your choice. See examples in the sidebar.

   The “best match” is based on the visitor’s location. If she is from one of the six countries where Amazon has shops, that locale is chosen. If he is from Europe, the preferred language is matched to either France, Germany, or UK, with UK as default. If it’s neither a locale nor Europe, amazon.com is the default. Based on your location, do you think that’s a reasonable approach?

   Note that some items, like books in any language other than English, are only available from certain locales, so a visitor from the UK might not see German books you recommend.

4. If you are an Amazon Associate for that locale, your Associate ID is included automatically.

You can edit the server-side, semantic and valid XHTML output via XSLT, change the CSS, or translate the admin interface through .po files. Actually Amazon loads the XSLT file from your server and processes it on theirs, so you shouldn’t block HTTP access to the plugin directory, and localhost doesn’t work either.

Results can be cached for anything between one second and one hour, so you don’t need to worry even when you run an extremely popular blog.

The YUI Connection Manager is included to verify the Access Key in the admin interface via REST and unobtrusive AJAX.

I hope this little piece of software serves you well and you like it.

Installation

1. Get the latest version of the plugin from the WordPress site.
2. Upload the whole amazon-machine-tags folder into the /wp-content/plugins/ directory.
3. Activate the plugin through the “Plugins” menu in WordPress.
4. Get an Amazon Web Services Access Key.
5. Create a wp-content/cache/ directory with permissions set to 755, or 777 if you create the directory as root user.
6. Put <?php AMTAP::get_items(); ?> in your sidebar and start using machine tags.
7. Edit amtap-blog.css if you like.
8. If you want to use tags in a blog article, write [amtap book:isbn=1234567890] or [amtap amazon:asin=1234567890]. Thanks to paulinepauline for that idea.

Frequently Asked Questions

Does it work in the sidebar on Pages, too?

Posts have tags, pages don’t, so it doesn’t work on those by default. But there’s a plugin called tags4page that enables tags for pages. Works like a charm.

Is there a limit of how many items can be requested?

Yes, Amazon has a limit of 10 items per request. Since they are separate requests, you can use a maximum of 10 items in the content plus a maximum of 10 in the sidebar.

Would it be possible to cache the images?

Technically it wouldn’t be a problem, but the Amazon Web Services license explicitly forbids caching of images (see 5.1.10). Sorry.

I need to a larger thumbnail (medium), but can’t seem to find a place to edit the size of the image being requested.

The image size can be edited in the XSLT. The original result is a XML file that is transformed by Amazon using your local copy of amtap-html-sidebar.xsl and amtap-html-content.xsl, respectively. Replacing every occurance of .//aws:TinyImage with .//aws:MediumImage should do the trick.

You can view the original XML when you activate the “debug” option in the admin interface so that the request string is printed as a comment in the sidebar’s source code. XSLT is a very powerful tool, and there’s a lot more in the XML, for example customer reviews.

Are all options really required?

No. The only required field is the Amazon Web Services Access Key. You can leave the others, they are set to defaults then.

Changelog

• 3.0 (2009-07-31): Added signed requests for the new Amazon authorization requirement. Updated the API version to 2009-07-01 (please note: if you use your own XSL files, you must update the version in the XML namespace URL). Updated links.
• 2.0 (2008-07-18):
  1. Added fields for editing the sidebar headline, link target, and displaying rating stars.
  2. Added an error message if the plugin is run from a private IP address space like localhost.
  3. Changed priorities for price selection, they are now: LowestNewPrice, ListPrice, first offer, LowestUsedPrice.
  4. Added support for the display of an artist name.
  5. Added rating stars.
  6. Fixed EAN numbers with a dash.
  7. Fixed cutting of titles after a period.
  8. Changed CSS and XSL files. Take care when you edited those.
• 1.1.3: Changed amtap-admin.css and amtap-admin.inc.php to make the admin interface look prettier with WordPress 2.5.
• 1.1.2: Fixed a bug in amtap.php when there are no other tags but default tags.
• 1.1.1: Fixed the sort order of inline items, a bug for returning an error message when the cache file is not writable, and added Amazon’s limit of 10 items per request.
• 1.1.0: Fixed the display of inline tags on the home page. Improved regular expression for filtering inline tags.
• 1.0.6: Fixed a bug introduced through the new default items function when there were no items to be displayed in the sidebar.
• 1.0.5: Added an option for default items on every page. Changed amtap-html-sidebar.xsl to sort items in the order of the request.
• 1.0.4: Bugfix for replacement of dollar characters in content. Also content items are now cached separately.
• 1.0.3: Fixed the display of inline tags on category pages.
• 1.0.2: Changed the plugin path from amtap to amazon-machine-tags for consistency with the file structure in the zipped file.
• 1.0.1: Bugfix for native WordPress tags.

When designing a site for a person who is so empathic we deemed it consequential not to exclude any users. After a little debate with our designers we settled on a color scheme that fulfills most requirements for color contrast. Furthermore text is resizable, forms are labeled, the structure is semantic: in the German accessibility test we got 98 out of 100 points.

There are little mashups including Google Maps and a journey planner for public transport. You can get decent print results, a customized error page, the site is language negotiated and thus loads your preferred language version automatically. Loading is extremely fast since we’ve learned our performance lessons, and of course everything is microformatted.

I must admit it’s difficult to microformat “Dalai Lama,” because it is a role, not a name. fn is required, but the text only refers to the title and role “His Holiness the 14th Dalai Lama.” His monastic name is of course Tenzin Gyatso, his family name is Lhamo, and his given name Thondup, but the text doesn’t mention any of these. I’m afraid microformats do not properly reflect this. How do you markup “the Pope?”

We used WordPress as a simple content management system with a self-written plug-in to clean up the comments template — the default error messages were so unacceptable. Alas we ended up with one installation for each language because the existing internationalization plug-ins were immature. Special credits to Jessica Spengler for the excellent and sensitive text translation!

I don’t think that modern technology and something ancient as Tibetan buddhism really contradict each other. In fact topics like sustainability, responsibility and empathy become more important in our work environment. Whenever the Science meets Dharma project would call for experienced web developers I’m sure we would find many willing to share their knowledge with Tibetan monks and get an insight into their wisdom and philosophy in return.

In this post:

• Dan Cederholm: Bulletproof web design
• Robin Christopherson: Beyond a code audit
• Cameron Moll: Mobile web design
• Nate Koechley: Yahoo! vs. Yahoo! vs. Yahoo!
• Tantek Çelik: Microformats: evolving the web
• “Hot topics” panel
• More presentations

The evening:before featured another get-together in a fancy work:after club, which can be summed up like this: Sweden won against Paraguay, and it was hard to talk to others because some notorious DJ wouldn’t turn down the volume. He desperately tried to get somebody on the dance floor switching from house music to r&b pop, but didn’t realize that was not what the audience wanted.

Bulletproof web design

If there was an award for best presentation, Dan Cederholm would get my vote! His slides were so well-designed, so clean, and the special effects (not seen in the PDF version) contributed to clarify the scope.

It was like Jeremy Keith’s presentation the day before, where you knew all the things he was talking about, still something made “click” and shifted your perception — and if it’s only that you think “that’s what I always needed to show to my designers!”

Scene from the early computer game Dig Dug (Atari 1983), where you pump up monsters until they explode

His example for thinking ahead showed a photo of a new warehouse in San Francisco, where the windows had been inserted to be future proof, but cemented over for the current use. So think ahead, because content amount and text size may vary, content changes and needs to be maintained, and because the environment can change. Take something off, like images, CSS, or JavaScript, and make sure the website still functions.

“The journey begins by letting go of control, and becoming flexible.”

John Allsopp, “A Dao of Web Design”

A lot of his examples worked by setting a 50% value for the horizontal or vertical background-position in combination with overlapping images, and he introduced the term “Dig Dug Text Test” as a metaphor for pumping up text and assuring the design is still not destroyed. Reminder to self: add more references to early 1980’s games in presentations, they are so cool!

Beyond a code audit

Robin Christopherson’s bad karma was that he relied on the unreliable wireless network in the conference center, therefore a few examples from the web refused to work.

But by struggling with the technical constraints he set a real-world example for the attending web developers. Robin is blind, and he did not notice the Windows XP bubbles popping up once in a while trying to alert him that the network was unavailable. He was unable to login on the QE2CC screen, because it was inaccessible and refreshed too often. Also most people I spoke with were deeply impressed by the incredible speed his screen reader was set to.

He had also prepared a couple of educational films about challenges on the web for people beyond the visually impaired, like a woman with learning disabilities who didn’t understand the word “disclaimer,” or a quadriplegic with a mouthstick and a voice recognition system, which was useless when the alt text in images or Flash applications did not match the displayed text. I know what a tremendous amount of work the production of such little films is, and I’m looking forward to access them on Robin’s site. Also check his speaker’s notes.

Mobile web design

Cameron Moll mentioned a few times that he had held this presentation a year ago. Therefore it was very professional, very slick, but a little unemotional and in my opinion not quite up to date.

Okay, there are more mobile phones than computers, more mobiles than landline connections, but he didn’t stress the incredible impact the wide adoption of Opera supporting JavaScript on cellphones will have. That’s finally a common platform for web applications using Ajax, as opposed to hundreds of different implementations of Java which are almost impossible to test. That’s a most remarkable development with the potential of revolutionizing mobile applications — Cameron hardly mentioned it, although this became public in November 2005.

Of course WML is dead, long live XHTML MP! You should serve content from a .mobi domain and concentrate on the contextually relevant information: People might check their eBay watchlist on their cellphone, but they don’t upload items to sell, so ignore features like that when developing for mobile devices.

Also my question about Vodafone and other carriers inserting invalid code in the pages they serve through their proxy might not have been clear enough, because Cameron replied it’s up to the carriers and the browsers how to interpret pages, while developers can control the code.

Unfortunately that’s untrue when carriers compress images more and insert JavaScript to get the original images with higher resolutions with a key combination. One script is inserted with the deprecated language attribute in the header, while the other comes after the closing </html> tag, thus rendering your valid XHTML strict code to tag soup. The problem not only manifests on mobile browsing devices, but also when you surf with a regular notebook using your mobile access. Therefore a @media handheld CSS, browser sniffing, or serving the MIME type depending on the HTTP accept header are all doomed. And there’s no way to prevent the carriers from doing such evil.

Yahoo! vs. Yahoo! vs. Yahoo!

I went to this presentation because Nate Koechley recently published his smart concept paper about graded browser support, which we immediately adopted. What I didn’t expect was a most impressive roller coaster trip through browser performance!

Yahoo! has a beta version out for their new portal, also Yahoo! Photos and Yahoo! Mail is under development. All of them make more or less heavy use of DHTML and Ajax. Yahoo’s goals were increasing performance by 300%, adding interactivity (vulgo: drag & drop), and supporting web standards.

For a fast response they used techniques like CSS sprites, or memory management. In Nate’s words browsers are still “a pain in the ass,” and “the web is the most hostile software engineering environment imaginable.” DHTML leaks memory like a sieve, so for each constructor use a destructor. Instead of adding events to thousands of email objects Yahoo! used the existing document.onmousemove event and checked if the mouse was over an object or white space, then passed the event to that object or drew a rectangular choice box. Key concepts are conservation, destruction, and recycling iFrames (about:blank). Use Drip as a tool for measuring memory leaks, test extreme object counts, test long interactions, and test extensive navigation.

Also their developers prefer JSON over XML because parsing XML degrades performance greater than linear as XML size increases.

They have identified HTTP requests as a main performance killer. Browsers still only process two or four HTTP requests at a time, especially start pages are not cached as effectively as they imagined, and parsing JavaScript freezes the browser. Therefore they rather serve a single large file with CSS in the header, and JavaScript as close to the </body> tag as possible.

Regarding browsers it is faster to develop for standards, than patch. Browser support must not be binary, and it does not mean “the same.”

Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogenous essence of the Web.

There are more IE5 browsers out there than IE 5.5, and IE7 “already moved the needle.”

With all the DHTML and Ajax I was concerned about accessibility, but in a sidenote I almost missed Nate mentioned the IBM contribution for DHTML accessibility. Wonderful!

Microformats: evolving the web

When microformats are even on the radar of Bill Gates, how could I ignore them? I had no clue before Tantek Çelik’s presentation @media 2006, and now I’m implementing them in this post. Microformats are virulent.

Basically you insert a few class names into your code, like

1. <p class="vcard">
2. <a class="url fn"
href="http://tantek.com"> Tantek Çelik</a>
3. </p>

There are microformats for contact cards, calendars, reviews, geo information, and many more. Even the Creative Commons license and the PICS label implemented in this page count as microformats. XFN and XOXO, too.

You can parse this page through a Technorati contacts feed service or use a tool like the Tails extension for Firefox, and voilà, there’s a vcard you could import into your address book (if there wasn’t this Thunderbird bug which prevents exactly this). With the hcalendar microformat you synchronize your calendar with event schedules on a website accordingly.

There are a few issues I ran into when I implemented hcards, and the documentation could have more examples, but they are on Tantek’s to-do list. Also sometimes it means extra, non-semantic markup, but as microformats increase semantic meaning, I assume it gets Tim Berners-Lee’s blessing. So go for it, microformats are definitely among the web’s next big things!

“Hot topics” panel

I had the pleasure to meet Molly Holzschlag earlier in a coffee break, and while I was sorry I couldn’t attend her session I18N, awakening the sleeping giant, I’m confident I didn’t miss much information as I am pretty familiar with her old articles in her regular column in WebTechniques and the current activity of the W3C I18N group, where she is a member.

Jens Grochtdreis reports in his blog about the passionate presentation she gave earlier, and although there is more technical experience and awareness in Europe with multilingual websites, rarely they pay respect to cultural differences, like the meaning of colors. Molly gives everything to educate on I18N and promote web standards, she is also a member of WaSP. I’m glad she seems to have found a way to get some help and support, as she is an outstanding, but sensitive person.

Anyway, she was part of the “hot topics” panel, where questions from the audience where considered by a group of experts: Molly, Jon Hicks, Jeremy Keith, Eric Meyer, and Tantek Çelik. They had a lot of fun and agreed CSS has become more mainstream in the last year, as you don’t have to defend CSS against table layout anymore. Well, reading the discussions in German forums and reviewing the code of other websites, there’s still a lot of educational work to be done. Also they talked about the accessibility of Ajax, and mashups as the next big thing, but you can read a decent transcript of the session in Stuart’s blog over at Muffinresearch.

Conclusions

If you have followed me this far, you can see @media was a big inspiration, it was a lot of fun, especially the after event on Saturday, and I can only recommend the conference! There are endless flickr pictures and quite a few blog entries on Technorati if you need further impressions. Um, and never mind the British food …

More presentations

Here are the presentations in the parallel track I couldn’t attend. Also there will be pod- and videocasts available soon.

• Dave Shea: Fine typography on the web
• Andy Budd: Bug hunting
• DOM Scripting: The Next Level
• Andy Clarke: The fine art of web design