The route, which you can bicycle through is drawn on Google Maps. There are nine  action points where the user can listen to streaming audio clips, with still images, in his/her mobile phone. This is sort of  augmented reality experience: The user sees the real world (where he/she is now bicycling) combined with the historic events (audio playback narrative). For example, at Linnansaari (a location on the route) you’ll see the actual 17th century castle ruins and the narrator tells how the castle exploded when fire, caused by a lighting, reached gunpowder warehouse… boom. The explosion caused stones fly over 400 meters.

Alternatively, the clips are available as podcasts from Oulu Tourism pages. You can download them into your iPod for offline listening and use in conjuction with a paper map. This demostrates interesting mix of multichannel publishing: paper, web, mobile and podcasts.

The tour is bilingual in Finnish and English.

There exists unreleased iPhone application, based on PhoneGap, which allows the user to track his/her location real-time on the web page. We didn’t see it worth of trouble to go through Apple iPhone application review process. When location based service support comes for the browser this feature is indended to be included as the standard HTML5 feature of the service.

There also exists Nokia Series 60 mobile application, based on PyS60 and Series 60 BrowserControl API, which allows the user to track his/her location in real-time. The application provides wrapper around Series 60 WebKit control and allows Javascript to access phone native functions (GPS) over localhost socket communication. Like with Apple, we didn’t see real-time tracking feature interesting enough to go through Symbian Signed process to get our application released. Also, BrowserControl had seriousquality problems and we didn’t consider it stable enough for the end users. Some work is available in PyS60 Community Edition repository.

The service is hosted on Python specific virtual server on Twinapex services server farm.

Features

• Premium content tailored for audio listening
• Dubbed in English and Finnish by a professional voice actor
• Bilingual: English/Finnish
• Adapts for smartphones (WebKit based browsers) and low end phones (XHTML mobile profile browsers)
• Streaming video and audio (RTSP / progressive HTTP download forv iPhone). Different audio quality is provided on depending on the handset features.
• Screen resolution detection based on user agent sniffing. Three different version of images are used.
• Custom Google Maps component for mobile is used. The component adapts for different mobile phones based on sniffing. Features include zoom, show action point, show the current location, search street address name. This component can be published on a request.
• Management interface features include video upload, video transcoding different mobile versions and editing bilingual content
• Apex Vertex handset database is used to detect the user’s mobile phone capabilities
• Apex Vertex logging and traffic analytics capabilities are used for the site statistics

Software stack

• Ubuntu 8.04 Hardy Heron virtual server
• Apache 2.2 / mod_python
• Python 2.5
• Django 1.0
• Django-CMS 1.0
• mobile.sniffer Python package to provide abstraction over different handset databases
• Apex Vertex streaming solution (RTSP based on Darwin streaming server by Apple)
• TinyMCE WYSIWYG editor
• Darwin streaming server
• ExtJS is extensively used in Apex Vertext management interface

Development effort

Development time: Around 100 hours. Three different developers where involved. Used development tools: Eclipse, PyDev, Subclipse, Subversion. There were around five meetings between the content provider and the technology provider. Few beta testing rounds using iPhone application were performed by bicycling in -10 celcius degrees weather (north and so on…). No polar bears were harmed during the creation of this mobile service.

The service is linked in from Oulu Tourism pages and thousands of paper brochures printed for Oulu summer season 2009.

About the author Mikko Ohtamaa

• LinkedIn
• Twitter

Do not index query strings

It is often desirable to make sure that query string pages (http://yoursite/page?query_string_action=something) do not end up into the search indexes. Otherwise search bots might index pages like site’s own search engine results  (yoursite/search?SearchableText=…) lowering the visibility of  actual content pages.

GoogleBot has regex support in robots.txt and can be configured to ignore any URL ? in it. See the example below.

Query string indexing causes the crawler crawl things like

• Various search results (?SearchableText)
• Keyword lists (?Subject)
• Language switching code (?set_language)… making set_language appear as the document in the search results

Also, “almost” human readable query strings look ugly in the address bar…

Top level domains and languages

Using top level domain name (.fi for Finland, .uk for United Kingdoms, and so on.) to make distinction between different languages and areas is optimal solution from the SEO point of view. Search engines use TLD information to reorder the search results based on where  the search query is performed  (there is difference between google.com and google.fi results).

Plone doesn’t use any query strings for content pages. Making robots to ignore query strings is especially important if you are hosting multilingual site and you use top level domain name (TLD) to separate languages: if you don’t configure robots.txt to ignore ?set_language links only one of your top level domains (.com, .fi, .xxx) will get proper visibility in the search results. For example we had situation where our domain www.twinapex.fi did not get proper visibility because Google considered www.twinapex.com?set_language=fi as the primary content source (accessing Finnish content through English site and  language switching links).

Shared forms

Plone has some forms (send to, login) which can appear on any content page. These must be disallowed or otherwise you might have a search result where the link goes to the form page instead of the actual content page.

Hidden content and content excluded from the navigation

Any content excluded from the sitemap navigation  should be put under disallowed in robots.txt. E.g. if you check “exclude from navigation” for Plone folder remember to update robots.txt also.

In our case, our internal image bank must not end up being indexed, though images themselves are visible on the site. Otherwise you get funny search result: if you search by person’s name the photo will be the first hit instead of biography.

Sitemap protocol

Crawlers use Sitemap protocol to help determining the content pages on your site (note: sitemap seems to be used for hinting only and it is not authoritative).  Since version 3.1 Plone can automatically generate sitemap.xml.gz. You still need to register sitemap.xml.gz in Google webmaster tools manually.

There exists a sitemap protocol extension for mobile sites.

Webmaster tools

Google Webmaster tools enable you to monitor your site visibility in Google and do some search engine specific tasks like submitting sitemaps.

I do not know what kind of similar functionality other search provides have. Please share your knowledge in the blog comments regarding this.

HTML <head> metadata

Search engines mostly ignore <meta> tags besides title so there is no point of trying fine-tune them.

Example robots.txt

Here is our optimized robots.txt for www.twinapex.com:

# Normal robots.txt body is purely substring match only
# We exclude lots of general purpose forms which are available in various mount points of the site
# and internal image bank which is hidden in the navigation tree in any case
User-agent: *
Disallow: set_language
Disallow: login_form
Disallow: sendto_form
Disallow: /images

# Googlebot allows regex in its syntax
# Block all URLs including query strings (? pattern) - contentish objects expose query string only for actions or status reports which
# might confuse search results.
# This will also block ?set_language
User-Agent: Googlebot
Disallow: /*?*
Disallow: /*folder_factories$

# Allow Adsense bot on entire site
User-agent: Mediapartners-Google*
Disallow:
Allow: /*

Useful resources

• How Google treats HTML metatags. This is especially interesting considering Plone’s support for Dublin core metadata (title, description, keywords). Note: <meta> keywords are not indexed.
• Plone SEO add-on product
• SEO with robots.txt
• Sitemaps mobile protocol

Like many other CMSs out there,  Plone has only one box to enter Google Analytics script snippet.  It is often desirable to use different tracker for different domain and different language combinations, but Google itself doesn’t provide any fancy generator to create complex page tracking code.

Page tracker code, though looks little difficult when spit out by Google Analytics, is just normal Javascript.  You can make the condition to choose the appropriate page tracker id in Javascript itself using document.location property and this way you don’t need to mess with your page templates to create separate tracking Javascript snippet slots.

Here is an example what you can toss in to Plone site setup -> site -> JavaScript for web statistics support:

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript">
try {
// Choose page tracker id according to domain
  var domains = document.location.hostname.split(".");
  var tld = domains[domains.length-1];
if(tld == "fi") {
  // .fi
  pageTracker = _gat._getTracker("UA-8819100-1");
} else {
  // .com
  pageTracker = _gat._getTracker("UA-8819100-4");
}
pageTracker._trackPageview();
} catch(err) {
}

</script>

This is used on www.twinapex.com and www.twinapex.fi sites.

Use console.log(err) to output possible Javascript in catch {} errors using Firebug.

Often external artist is used to design a site theme. Artists might or might not have seen Plone, artists might or might not have any basic usability know how. This article should explain the elements which “must be there” to make a match between the theme and Plone easily.

The basic layout

This document describes the elements of multilingual high usability Plone theme. It is based on fluid div layout, meaning that the content stays very readable on small screens or when CSS is not loaded (screen readers). See the example layout.

The layout must not break down when user is using non-default font size. E.g. all element accept two rows text, even if the default case is usually one row.

Plone layout

Here we are designing a “normal” site theme where Plone is used to publish textual content for external readers. This might not always be the case – for example if Plone is used as a professional tool one might want to use all available screen space to display as much as possible action shortcuts to make the tool to quick to use. The latter is actual case I have seen in medical applications.

Plone layout is formed by seven main parts.

The layout must be designed so that

• The maximum width of content area newer exceeds a certain amount (1200px) so that characters-per-line count stays readable on wide screen displays. Left body padding and right body padding fill the wide screen gap to keep the content in sane max-width.
• Left portlets and right portlets parts can be missing, giving space to content part
• Header and footer are resizable. Usually logo is at the left site of the header and actions at the right side of the header. These sections should not overlap with the width of 780 px.
• Left body padding and right body padding can have shadow effect on the central column a la blogger.

Alternative layout cases

The layout must be formed from such a blocks that left or right portlets can be easily dropped without breaking the layout.

Right portlets missing:

Both portlets missing (front page view):

Header elements

The header should have the following elements

• Logo
• Language selector – either a drop down list, flag icons or language names
• Site action links with icons: site map, accessibility help, toggle easy read (make fonts larger), contact
• Search box
• Section (main level) navigation tabs
• Personal bar. Contains the username and log out buttons. Only available when logged in. To see an example, create plone.org account and login to ploen.org.

The header must scale between 780 – 1280 px. Section navigation tabs may trigger drop down menus, see http://www.jyu.fi/

Content area elements

The content area contains

• Content title
• Content description: one paragraph, no HTML formatting
• Breadcrumbs path bar displaying the position in the navigation hierarchy. Example.
• Content actions: send to, print, RSS feed. Icons with or without text labels. New Plone versions place these at the bottom, but they used to be at the top.
• Document byline: creator name w/link, creation date or edit date. This is usually only available for logged in members.
• Notification messages: When user performs actions (e.g. save) this feedback box is rendered with white i(nfo) letter in blue circle having a message like “Save succeeded.”
• The main body text and images

The whole portlet section can be dropped, making space for the content.

Portlets

Portlets are boxes on the left and right side of the content containing section specific actions.

Example portlets:

• Navigation

• Search (not the header search)

• News

• Recently changed

The portlet consists of

• Title (usually link)
• Content area
• Optional More link, located at the right bottom corner.

See http://www.siggraph.org/ for creative use of portlets.

Footer elements

The footer has

• Copyright clause
• Link to about page
• Contact information

The footer must scale between 780 – 1280 px.

Complete picture

Special cases

These are often required and might shoot you into a foot

• The current section (main level folder) where the user is located is identified somehow: a changing big topic picture, text. For example, see http://www.archred.com/updates/news and you see that there is big Updates title.
• To make more space available for front page or top level content, breadcrumbs and portlets are missing. A special front page animation may be used.See http://www.archred.com
• Breadcrumbs is also often disabled for top level elements
• There is a special print.css which is loaded when the document is printed. It sets display:none to porlets, header and footer so that only the main content area is printed.
• Visual editor (Kupu) text might require special CSS rules to have the same formatting rules as in non-edit mode to get real WYSIWYG.
• A special attention must be paid for the style of generic HTML elements like a, h1, h2 and p. They are used on the content area and outside it, often with different colors.

Colors

Plone uses mechanism to have color variables in CSS. See base_properties.prop to get an idea what colors there are and try to guess how they are used.

Icons

Plone uses generic icon mechanism to apply icons to any action available on site. Icons are 16×16, transparent with one pixel transparent border leaving 14×14 pixels for the content.

The icons should preferably be suitable for dark and light backgrounds. This might be hard to achieve, though, so it is suitable to use ligh background icons, since this is the Plone default.

Actions

• Search
• Smaller font
• Larger font
• Print
• Send to (email)
• Contact
• Sitemap
• Member icon
• Settings
• Log out
• Login
• RSS feed

Language flags

Plone default flags can be used

• Finnish
• English
• Swedish
• etc.

Content icons

These reflect different Plone content types

• Page
• Folder
• News
• Event
• Collection
• File

Link icons

Plone uses Javascript to apply special icons for external links

• HTTP link (globe)
• HTTPS link (lock)
• mailto link (letter)

Favorite icon

• The site bookmark icon, the one seen in the address bar, uses normal favicon.ico practices