Finnotype

iPhone ate my mail

2012-01-25T04:40:00.001-05:00

Deleted mail was mysteriously disappearing from my email account. I could not find anything older than one week. The culprit turned out to be iPhone. I use it to read the same account. A well-hidden setting removed deleted messages.

To check your iPhone:

Go to Settings > Mail, Contacts, Calendars.
Select the account from which deleted messages are disappearing.
Go to Account Info > Advanced.
Under Deleted Messages, change Remove to Never.
Go back to Advanced.
Go back to Account Info.
Click Done. This is important to save the setting!

My removal interval was set to After one week. Gotcha!

Picnik for collaborative screenshots

2012-01-17T08:13:00.000-05:00

Update! Picnik is closing on April 19, 2012. This is sad news. I really liked working with the product. Please sign the Don't Close Picnik petition! A subset of Picnik features is available in the Google+ Creative Kit but, crucially, the Photo Bucket is not. This means that the custom circles and arrows we use to annotate images are gone.

At Magnolia, we recently started using Picnik to annotate screenshots. We wanted a casual but obvious way to draw the reader's attention to an image detail. In this post I explain why we chose Picnik and how it is working so far.

Picnik is a photo editor that runs in the browser. You may have seen it as the embedded photo editor in Picasa Web Albums. The requirements that drove us to a Web-based tool were:

No OS lock-in. We have technical writers working on Windows 7, Vista and Mac OSX. It is difficult to find a screenshot tool that works on all those platforms. Skitch is awesome on the Mac but a Windows version is still only hearsay.
Consistent annotations. Annotations are the circles and arrows we add to screenshots to draw the reader's attention to whatever it is we write about. While any screenshot tool can take a plain screenshot, adding consistent annotation shapes is difficult unless everybody uses the same tool. Documentation ends up looking amateurish and poor if the shapes are not consistent.
Casual, hand-drawn look. We wanted a casual, edgy look. Straight lines and rectangles are difficult to see on a UI that already has lots of straight lines. They also look incredibly boring. If you annotated something on a piece of paper, you would grab a pen and circle it. That's the look we wanted.
Shared storage. Web-based tools promise cloud storage. Why should everybody take the same screenshot when a perfectly good example exists in a shared library? Why draw your own arrows with a shaky mouse if there's a nice-looking arrow in the toolbox?

I must emphasize that Picnik really isn't a screenshoot tool. It's a photo editor whose features are clearly geared towards processing photos. It's great for assembling favorite shots into a Christmas card but for taking a screenshot you still need a local tool, which is fine for us.

Picnik features we love and curse

Uploading an image is a snap. The image is opened in the editor immediately so no unnecessary browsing is needed. Besides upload, you can open an image from Flickr, Facebook and several other popular services.

Resizing to new dimensions works as expected. The quality of the reduced image is not as good as if you used Photoshop. The image is fuzzier, which can be a problem. Text in a screenshot must stay sharp and readable in smaller size too. To get around the issue, we either crop to the relevant area or keep the shot full-size. Modern browsers do a very good job at resizing in the viewport, certainly no worse than Picnik.

Canvas as a concept does not exist as in Picnik. When you need more room around the image, add a border. The border can be any color and width. Make it white and you effectively have a bigger canvas.

Shapes. I drew a collection of annotation shapes by hand in Skitch and saved them as PNG files. Then I uploaded them into a Picasa Web Album that is visible in the Photo Basket in Picnik. Now anybody in the team can drag-and-drop symbols onto an image. This solves the requirement that all writers use the same symbols to produce a consistent look and feel.

Text. Picnik has a huge variety of fonts to choose from. They are very hip and cool, which means they are perfect for a scary Halloween photo but not so great when you need readable text. We chose a font called Just Me Again Down Here by Kimberly Geswein. It's a good compromise between hand-drawn look and readability. We matched the font size to the shape stroke width.

Sharing and layers are my biggest grievance with Picnik. I asked on the help forum why sharing is so weird. Bottom line: edits are stored on the image owner's Picnik account and are not accessible to other users. This means that while you can save an image to a Picasa Web Album, other team members won't be able to edit it. The image is flat to them. This is a shame because picking up from where another use left would be fantastic. As for the shapes, we put them in a common Picasa account which all technical writers register in their Picnik. So at least the shapes are available to everyone.

So there you have it. Picnik works for us now. Drop a comment if you solved similar requirements in your team with something else.

Twitter-style character counter for textareas

2012-01-16T09:32:00.000-05:00

In this post I show how to improve textarea usability with a Twitter-style character counter.

Validating form input length is a common strategy for reducing errors. So common in fact that the HTML specification provides a maxlength attribute for input fields. Starting with HTML5, multiline textarea fields support the attribute too!

Since it is always better to prevent an error than catch one the user already made, here are two ways to improve textarea usability in Magnolia CMS, making sure the user knows how many characters are allowed.

Display the character limit

The obvious improvement is to display the character limit. In Magnolia CMS, you set the limit on the form field. The system saves it to a maxLength property in the repository.

Render the length on the page:

Copy the formEdit.ftl script which renders input controls.
Create folder Templating Kit > Templates > /form/paragraphs.
Create a new template script formEdit and paste the copied script into it.
Render the maxLength property in the textarea element on line 21.
Render it visibly to the user: ${content.maxLength!'50'}
Enable the script and refresh the Contact form page.

Twitter-style character counter

How does the user know they are approaching the limit? jQuery Charcount plugin adds a Twitter-style character counter. As the user types text, the plugin counts unused characters. When a limit is exceeded, the counter turns red.

Start by downloading the jQuery Charcount plugin kit:

jQuery.js is the core jQuery script. Magnolia CMS already has it.
charCount.js counts the characters and draws the counter.
CSS styles sets the alarm color.
01.html is an example page.

Step 1: Add the Charcount script as a resource

Go to Templating Kit > Resources > /templating-kit/js/all.
Under all, add a new JavaScript resource charCount.
In the Advanced tab, set Extension to js.
Paste the downloaded charCount.js script into the charCount item.
Change line 35 to read the textarea ID from the element:
var available = $(obj).attr('maxlength') - count;

Step 2: Warn when 10 characters are left

Copy the document.ready function from the example 01.html file.
Paste it in the charCount script before the closing })(jQuery); line.
Change #message2 to textarea. We are getting the IDs dynamically.
Set the warning to 10.

The end of your script should now look like this:

$(document).ready(function(){

//custom usage

$("textarea").charCount({

warning: 10,

counterText: 'Characters left: '

});

})(jQuery);

Step 3: Make the counter red on warning

In /templating-kit/themes/pop/css, create a new sheet charCount.
On the Advanced tab, set Extension to css.
Set Model Class to info.magnolia.module.templatingkit.resources.STKResourceModel.
Paste the following style in the Content box:

.form-wrapper div span.warning {

color:red;
font-weight:bold; !important
}

Step 4: Include the new style in the theme

In Templating Kit > Themes > /pop/cssFiles, copy styles to charCount.
Set link property to /resources/templating-kit/themes/pop/css/charCount.css.

Step 5: Try it!

Reload the Contact page. Now the page has a counter that starts counting back from the limit.

Type some text into the box. When 10 characters are left, the counter turns red.

Are patents invisible art?

2011-07-20T14:39:00.001-04:00

NPR reported about a woman who paid $10,000 for a non-visible work of art:

...the idea of the [Museum of Non-Visible Art] is that the works of art don't exist physically, instead they are imagined by the artist. So when you purchase the "work of art" you get a "card" to hang on an empty wall and you "describe it to your audience. Amazingly, the museum just made one big sale. A woman paid $10,000 for a piece titled Fresh Air.

When asked why she bought the non-visible piece, the woman explained:

As a new media producer, I was inspired by the [artist's] sentence, "We exchange ideas and dreams as currency in the New Economy." I felt that the act of purchasing "Fresh Air" supported my thesis about a concept I term "you-commerce," which is the marketing and monetization of one's persona, skills, and products via the use of social media and self-broadcasting platforms.

Sounds crazy, eh? Why would anyone pay money for art they cannot see? I mean, it is not even a sketch of an eventual visible piece. Just an idea in the artist's mind. She must have been off her rocker!

But wait. Is it really that remarkable? Companies pay money for mere ideas all the time. They buy rights to products just to keep them off the market. Drug makers file patents just to sit on them so competitors don't develop competing drugs.

Last week we heard about an auction where Apple, RIM, Ericsson, EMC, Microsoft and Sony bought 6,000 patents and patent applications from bankrupt Canadian telecom giant Nortel. The patents cover wireless, Internet search and social-networking technologies. The winning bid was $4.5 billion.

What do winners plan to do with the patents? Not sure. According to Dow Jones they "stock up their arsenals for raging legal battles over smartphones, Web advertising and whatever comes next in the multitrillion-dollar technology wars."

Which is crazier: $10k for fresh air or $4.5 billion for whatever comes next?

Coupons with Imaging module

2011-04-05T15:30:00.001-04:00

In this post I show you how to create coupons using the Magnolia Imaging module. I start with a background image and overlay the special promotion text. Campaign specific details are managed in the Data module while static text is configured in the Imaging module.

Let's start by registering an image generator. For this purpose I use the ImageOperationChain generator since it allows me to execute multiple image operations one after the other. My image operation chain will be called coupon and it outputs PNG files.

The first image operation in the chain, loadImage, loads a background graphic. I am using the ClassPathImageLoader class which can retrieve an image from the classpath. (You can also load from DMS, website or external URL.) By default, a Magnolia webapp's classpath includes any JARs in /WEB-INF/lib and any classes and resources in /WEB-INF/classes. I copied my background graphic into the latter and named it coupon.png. Here's the operation configuration.

When I request the image I need to pass an existing page in the URL. This is how the parameter provider factory works. I can see the image at http://<host>/<instance>/.imaging/coupon/website.png. This is a Christmas coupon with some red lights and space for text below.

Campaign management in Data module

For managing the campaigns I created a custom data type in the Data module. The campaign entry dialog allows editors to enter a discount percentage, product and validity period. I entered a Christmas campaign that offers 25% discount on a single in-store product.

The Data module stores the information in the data workspace. The discount percentage, for example, is stored in /campaign/Christmas/percentage.

Text overlay

The TextFromNode class can retrieve content from any workspace and overlay it on top of the image. In the percentage operation I fetch the discount percentage from the Data module. I need to pass the workspace name and path in the request URL, http://<host>/<instance>/.imaging/coupon/data/campaign/Christmas.png.

The percentSymbol operation overlays the % symbol using the FixedText class. The symbol is given in the text property. This works fine for static strings that don't change often. See Text overlay to learn about the nodes and valid values.

I added the text "off" also as fixed text and requested the image. Here's what is looks like at this point.

Adding the product description, validity period and legal disclaimers works in a similar fashion. Changing typeface, font size and positioning I was able to make the design more interesting. Here's the final result.

When the next campaign kicks in, all you need to do is ask your graphic designer for a new background image and create a campaign data item in the Data module.

Background image credit: George Deputee and Juliancolton2 on Flickr.

Controlling AdminCentral access

2011-03-31T04:14:00.002-04:00

AdminCentral is a Magnolia CMS user interface where administrators and editors work. In this post I show how to configure menu permissions for a custom user role.

AdminCentral provides menus for common tasks. When you click a menu, workable items are displayed on the right.

You can hide menus and move them around to promote often-used items or deny permission to items that users should not be able to access. Magnolia CMS ships with typical roles such as superuser, editor and publisher. While a superuser can see everything, editors only see items that are relevant to their job.

Permissions for custom roles

Suppose your organization has a very specialized editor role, Category Editor, who is responsible for maintaining a taxonomy of categories. Categories are tags that help site visitors find related, interesting content.

Categories are managed in a custom data type under the Data menu. The demo-project website has an example taxonomy consisting of categories such as Culture, Family and Finance. The Category Editor needs access to the Data > Category menu only.

You can approach setting permissions for this role in two ways:

Top down: Start with a more powerful editor role and remove permissions until only the ability to edit categories is left.
Bottom up: Start with zero permissions and keep adding until the Category Editor can do their job.

Magnolia CMS ships with a demo-project-base role that provides many basic permissions common to all users. It's a good starting point so let's choose the first option: top down.

Create category-editor role

Create new role category-editor and new user jsmith. Assign roles demo-project-base and category-editor to user jsmith.

Now open another browser instance and sign in as jsmith. You should see three menus: Website, Documents and Data.

The Category Editor doesn't need the first two menus or the Contact submenu so let's remove them.

Hide menus

Edit the access control lists (ACL) attached to the category-editor role. Deny access to the following nodes in the config workspace:

/modules/adminInterface/config/menu/website$
/modules/adminInterface/config/menu/dms$
/modules/adminInterface/config/menu/data/Contact$

The demo-project-base role already grants access to the same nodes so you need to make the deny rules "win". If a user has multiple ACLs through role and group assignment that specifically list the requested resource, the ACL with the longest pattern determines the permission. The order of the rules is not considered. This is a critical point. Use the dollar sign ($) to mark the end of the path, which makes the deny rule longer.

Here's what the Category Editor sees after the ACLs have been applied. Menus are now perfect but the editor cannot edit the data items. Categories have a crossed-out pen icon to indicate this.

Grant access to data

Add an ACL in the data workspace that grants Read/Write permission to /categorization node. Now the items are editable.

Lock the backdoor!

Menus are not the only way to access content in AdminCentral. They just provide convenient access to often-used items. If you are restricting access per security, not just for convenience, make sure you lock down the content too:

Workspaces store the actual content. Make sure that any role you choose as a basis does not grant access to a workspace that users should not be able to access. In our example the demo-project-base role does not grant any unnecessary workspace permissions. You can control workspace access with an ACL. Select the workspace from the controlled space dropdown.
Trees are customized views into specific data. Users can view trees with a direct URL if they know the name of the tree, for example http://[host]/[instance]/.magnolia/trees/website. Each module can register its own trees. Look in /modules/adminInterface/trees to get an idea. As long as you restrict permissions to workspaces correctly, trees will honor the permissions.
Pages provide specialized tools such as exporting, importing and querying. Users can access pages with a direct URL too: http://[host]/[instance]/.magnolia/pages/jcrUtils. Like in trees, content cannot be accessed through pages as long as the workspace is locked down.

Category cloud with images

2011-03-18T04:11:00.002-04:00

This post was inspired by Amit Patel's question on how to add images in a Magnolia category cloud. Thanks Amit!

What is a tag cloud?
Tags are words or short phrases that describe content such as articles or photos. A tag cloud is a weighted lists of those tags displayed as a group where popular tags are given more visual weight than less popular tags. The visual weight is accomplished by making popular tags larger or bolder.

Here's a tag cloud from Flickr with tags that people use on their photos.

Another cloud with trending Twitter topics.

Magnolia category cloud
Magnolia's category cloud paragraph has the same principle. Articles on a website are tagged with categories to make it easier to find related content. Categories can be displayed in a cloud just like tags. The Magnolia category cloud is an editorial paragraph rather than compiled automatically from popularity statistics. This means that editors can set the weights to promote categories that are hot to give a boost to active campaigns or new content, for example.

Add an image control to Category dialog
The quickest way to add images to each category is to copy the photo upload mechanism from the Contacts data type. Both Contacts and Categories are managed in the Data module so repurposing elements is a snap.

Add an image control in Category dialog:

Go to Data > Config (Dialogs).
Copy /modules/data/dialogs/contact/personalTab/photo to /modules/data/dialogs/category/mainTab.
Rename the copied node to icon.
Change the label to "Icon".

Now you can add images. Get some nifty icons from the Web and add them to your categories.

Render images next to category labels

Edit the categoryCloud.ftl paragraph script. It's in the Categorization module JAR. You can also test this out by creating a script in Templating Kit > Templates and referencing it from the paragraph definition instead.
Assign images to categories.

[#-- Assigns: Macro for Item iteration --]
[#macro assignItemValues item]
    [#-- Assigns: Get Content from List Item--]
    [#assign itemName = item.@name]
    [#assign itemDisplayName = item.displayName!itemName]
    [#assign itemLevel = item.level]
    [#assign itemLink = model.getCategoryLink(itemName)!]
    [#assign itemIcon = item.icon!]
[/#macro]

Render the icons.

<li class="${itemLevel}">
  [#if item.icon?exists]
    <img src="${stk.createImageLink(itemIcon)}" />
  [/#if]
    <a href="${itemLink}" >${itemDisplayName}</a>
</li>

To finish off, add a category cloud paragraph on the page and admire your handywork!

Link popularity

2011-02-02T06:18:00.000-05:00

This post belongs to a series about search engine optimization (SEO) with Magnolia CMS. Today we look at increasing your site's link popularity.

Search engines place strong emphasis on your site’s link popularity. Links from external sites, especially highly ranked ones, increase your site's rank. The more links targeting your site from external sources the better.

There are countless ways to build links and a comprehensive discussion on this is beyond the scope of this paper. Some ways that Magnolia can help to build incoming links are:

By developing a blog on an external domain to promote your main site. The Templating Kit allows you to manage multiple sites in a single instance.
A forthcoming social media module will facilitate effortless integration with social media networks that have become a must for success on the Web.
Social bookmarking provided in many Magnolia templates.
Friendly URLs make creating external links intuitive and easy to create.

Keywords in page titles and meta elements

2011-02-01T04:40:00.000-05:00

This post belongs to a series about search engine optimization (SEO) with Magnolia CMS. Today we look at inserting keywords in page titles and meta elements.

Page titles are an extremely important SEO factor. Search engines give titles considerable algorithmic weight and use them as headings on search results. Titles should include keywords and, where appropriate, your company name for branding purposes:

<title>Magnolia - Finance, Insurance & Banking</title>

Description meta elements on the other hand do not add much to page relevance, but should not be neglected:

<meta name="description" content="Magnolia's largest group of Enterprise Edition customers is from the...">

Their content often appears below the title in search results:

The relevance of keywords stipulated in the keyword tag once had great impact, but this is no longer true. Actual page content is now far more relevant. Still, a keyword tag should be included:

<meta name="keywords" content="Finance, Insurance, Banking">

Magnolia produces the title element from the page title automatically, so this aspect is never overlooked. Inserting keywords and descriptions is done in the page info dialog:

These fields can be made mandatory with a simple configuration change in AdminCentral. If an editor fails to provide the description, page abstract is used automatically as a fallback. Authors don't need to fill the field to be SEO compliant.

Managing multi-language and multi-regional sites

2011-01-31T07:45:00.001-05:00

This post belongs to a series about search engine optimization (SEO) with Magnolia CMS. Today we look at managing multi-language and multi-regional sites.

Multi-language sites offer content in multiple languages, and allow you to extend your reach to a global audience. Estimates are that 73% of web users do not speak fluent English. Regional sites target specific geographic locations, and normally have a country-specific domains such as .de, .co, or .uk.

For multilingual sites, best practice is to ensure that your content appears in search results for the appropriate language:

Use the targeted language consistently throughout the page. Render all content and navigation in that language.
Serve language-specific content at a separate URL. Use Unicode encoding.
Avoid cookies to display translated versions.
Avoid automated redirection based on the user's perceived language, as this could prevent a crawler from viewing all language variations.

For multi-regional sites, best practice is to ensure that your site appears in search results for the targeted country:

Use a country-code top-level domain name such as .de or .cn. This is a strong indicator to users and search engines that the site is intended for a specific country.
Include local contact details, currency, and language in the site's content.
Host the site on a server within the targeted country.

You can manage multi-language and multi-regional sites in a single Magnolia instance, while adhering to all best practices. A multisite configuration ensures that language is used consistently across multilingual sites. Redirection based on user's perceived language is not used.

Individual sites are configured in site definitions. In the example below, demo-project is a multi-lingual site that serves content in English and German, while demo-project-de is a site targeted at a German speaking audience only. Internationalization (i18n) configuration accommodates multiple languages. Both of these sites extend the default site, inheriting common elements, facilitating rapid site deployment.

A language selection dropdown allows editors to select the content authoring language:

Since navigation is generated from content, links display in the correct language, provided the content is translated:

Where built-in precautions fail due to editor error, a fallback language can be used to ensure that at least some of the content is rendered.

From SEO perspective, it is best when a crawler finds all language-specific content in one directory. Magnolia accomplishes this by injecting a language identifier in the URL.

Locale	URL
Fallback language	www.example.com/article.html
German	www.example.com/de/article.html
French	www.example.com/fr/article.html
Spanish	www.example.com/es/article.html

With domain name mapping, this can be easily changed to de.example.com/article.html if needed.

Content can also be exported into a CSV or Excel file and handed to translators. Other export formats are pluggable and can be written to support custom formats. The exported file includes context information and a link back to the original content to facilitate translation. Translated content can be imported back into the system with the same mechanism.

Optimizing images

2011-01-28T03:48:00.000-05:00

This post belongs to a series about search engine optimization (SEO) with Magnolia CMS. Today we look at optimizing images.

Great images enhance your site visually and enhance SEO rankings, provided they are properly optimized. Google and other search engines offer image-specific searches. A high rank in these searches increases your visibility. Search engines cannot read the content of images, and therefore must rely on accompanying text and tags.

Best practices include:

Image alt attributes with a short description of the image, for example.
Keyword-rich image file names. yellow-roses.jpg is far more descriptive and relevant than img003.jpg.
Size and quality optimized for quick loading. Crisp, sharp images look better in thumbnails displayed in search results, and are more likely to be linked to by other webmasters.
Captions that aptly describe the image assist vision-impaired users.
Width and height specified in the element. Many browsers render a page before images are downloaded. When dimensions are provided, other page elements wrap around them correctly, improving the initial user experience.

Images can be stored in Magnolia's built-in document management system or uploaded at editing time. When the DMS is used, a two-phase failsafe mechanism ensures that alt tags, appropriate file names, and captions are included:

At upload time, details such as image source, copyright, subject line and size are captured. The fields provided for this purpose in the DMS are based on the Dublin Core Metadata Standard. If the original file name contains spaces, Magnolia replaces them with hyphens. In the event that an editor fails to include the information requested in the dialog, the source and subject-line are used as fallback.
When inserting an image to a page, the information read from the DMS can be changed once again. If the fields are configured as mandatory, an editor cannot insert an image without providing suitable alt attribute and caption. This enforces best practice compliance.

As a result, the page template renders crawler-accessible HTML code:

Magnolia Imaging module ensures that high-quality, web-optimized images are used uniformly throughout the site. The module generates multiple variants from a single source image, resulting in considerable time-savings for editors. Sizing and cropping happens automatically, based on CSS rules. Built-in filters that scale and crop images can also be used for effects such as text overlays, which allow crawlers to read image text. It is possible to configure a standard output format and resolution for all images, and control the behavior of images in each area of a template.

Redirecting traffic

2011-01-26T03:17:00.002-05:00

This post belongs to a series about search engine optimization (SEO) with Magnolia CMS. Today we look at redirecting traffic.

Redirecting is the practice of sending requests to alternative destinations. Typical reasons to redirect are:

Pages have moved due to site re-organization but search engines and users still have the old URLs in their indexes and bookmarks. Without redirection traffic going to the moved pages is lost to 404 errors.
Identical URLs serving the same content lead to duplicate content issues as crawlers mistake each URL for a separate site. This is known as the "canonical URL issue" in SEO parlance. It is not uncommon to have example.com, www.example.com, and example.com/index.html deliver the same content. Sometimes there is a valid need to display the same content on multiple pages.

These factors adversely affect SEO but they can be corrected by redirecting the incoming request to an alternative URL. There are several ways to redirect, but the only search engine friendly way is a 301 permanent redirect, which ensures that your hard-earned page rank is transferred to the new location. Contrast this with a temporary 302 redirect which is disastrous for SEO as page rank is not applied towards the new location.

Redirects are typically cumbersome to implement on a Web server. Responsibility over Web server configuration often falls to another team and is out of reach for authors and editors, even for technical CMS team members. Fortunately, Magnolia allows you to configure redirects directly in AdminCentral.

A permanent 301 redirect is easy to do with virtual URI mapping. The request can be redirected to the same domain or another one. For example, when visitors request winter2010.com, you can redirect them to example.com/marketing/campaigns/winter2010, the actual location of the content. Short addresses are easier to market and remember.

In addition, the Templating Kit includes a Redirect template that allows authors to set up a redirect page and define where the incoming request should go. Both internal and external pages can be identified as redirection targets:

If you read more about the canonical URL issue on SEO blogs you will come across the "canonical URL tag". It is a link element in the page HTML head that tells crawlers that the page is actually a copy of the page given in the href attribute, and that page rank should be attributed to that page instead.

<link rel="canonical" href="http://www.example.com" />

The canonical URL is almost the same as 301 redirect in terms of SEO with the following exceptions:

301 redirect redirects all traffic (crawlers and visitors). The canonical meta element is just for crawlers.
301 is a stronger signal that multiple pages have a single, canonical source.
301 can redirect traffic to another domain, while still counting existing page rank towards the new location.
Canonical URL is sometimes favored over 301 because you don't need to ask developers to implement it. But as seen above, this is not an issue in Magnolia since editors can do their own virtual URI mapping in AdminCentral.

Categorizing content

2011-01-24T03:40:00.000-05:00

This post belongs to a series about search engine optimization (SEO) with Magnolia CMS. Today we look at categorizing content.

Usability and SEO go hand-in-hand. Categorizing content allows visitors to find related and similar content with ease. Logical, keyword-rich categories provide intuitive navigation of a large collection of content. Categorization offers a range of opportunities to improve internal linking, visibility, and keyword density. Common uses of categories are tag clouds, and links to overview and landing pages.

Although content tagging is an effective technique, tag clouds in particular have been abused. Bloggers saw them as a keyword-stuffing opportunity, and search engines have developed techniques to combat this trend.

Magnolia allows you to create custom categorization taxonomies. You can tag articles with categories to support browsing of related content. This feature can be extended and adapted to suit your needs.

By default, you can categorize any page based on the Article template. Categories are displayed as related links in the article header:

Magnolia provides an editorial Category Cloud which allows editors to assign weights to categories. The more weight a category has, the bigger it shows in the cloud:

The Category Overview template lists all articles within a category and suggests related categories:

Preventing broken links

2011-01-21T04:41:00.001-05:00

This post belongs to a series about search engine optimization (SEO) with Magnolia CMS. Today we look at preventing broken links.

Broken links can lower your site's rankings. Google mentions this specifically in its SEO guidelines. Broken links are also a source of irritation for users.

While you have little control over changes to external links, you can inadvertently break internal links in a variety of ways, such as when changing site structure or deleting content that has incoming links.

A process should be in place to regularly validate all links on a site.

Magnolia has safeguards to prevent broken links:

A hierarchical content store ensures that there are no orphaned pages that have no incoming links. All pages belong to a hierarchy, and each page has at least one incoming link - from its parent.
Each page has a unique content ID for use as an internal link target. Dialogs provide a user-friendly browser for locating the target. Authors don't need to know the unique ID.
The unique ID stays the same even when the target page is moved or renamed. This allows for flexible site reorganization without breaking the links. The same mechanism is used when linking to documents in the document management system (DMS). Internal links to non-existing pages and documents will not be rendered, avoiding broken links.
A reference view lists any incoming and outgoing links. A message on shows dependent content on deletion and deactivation.
A custom 404 "not found" page can be displayed for broken incoming links. You can provide helpful alternatives such as sitemap tree or a search box to find the desired content:

Magnolia does not check for outgoing broken links but third party link checker tools for this purpose exist.

HTML links

2011-01-19T10:42:00.001-05:00

This post belongs to a series about search engine optimization (SEO) with Magnolia CMS. Today we look at inserting HTML links.

Navigation links should be rendered as HTML to make them easy for crawlers to read. Search engines take the anchor text of a link into consideration when indexing it. Graphics and Flash objects, used by many designers to control look and feel, normally cannot be crawled. Alternative text descriptions should be provided. Use of uncrawlable elements also hinders users who do not have the required browser plug-ins.

Since the navigation system is a site-wide collection of links to topics, links should be consistent throughout the site. Navigation is also a perfect opportunity to include descriptive keywords.

The Magnolia Templating Kit offers four navigation structures out-of-the-box: horizontal, vertical, breadcrumbs, and meta-navigation. All of them render links as HTML. Consistent navigation is enforced throughout the site using the same template.

Shallow site architecture

2011-01-17T08:18:00.000-05:00

This post belongs to a series about search engine optimization (SEO) with Magnolia CMS. Today we look at providing a shallow site architecture.

Site architecture is critical to SEO. Many sites grow organically and their architecture becomes a maze-like, illogical complex. A clear structure provides both the user and web crawler with a positive navigational experience.

As a rule of thumb, the flatter the structure, the better. The higher a page appears in the site structure, the more likely it will be ranked high by a crawler. Crawlers seem to determine the depth of a page by the number of directories present in the URL, giving more relevance, for example, to /books/art than to /books/bestsellers/hardcover/art. A one or two layer limit is recommended, but for larger sites this is not always feasible.

It is also important to maintain consistency throughout your site. All pages should follow the same format, and once established, you should endeavor to stick to the URL guidelines. Where possible, avoid the use of sub-domains as crawlers may view them as separate from your main domain.

Magnolia stores content in a hierarchical content repository. Editors see the hierarchy as a tree where each page belongs to a branch and has a parent node:

Organizing a site as a hierarchy enforces consistent structure. Pages and branches can be rearranged via drag-and-drop.

Magnolia allows you to manage an unlimited number of sites in AdminCentral. Each site has its own site tree, to keep the hierarchy shallow. You can map unique domain names to each site, creating microsites for campaigns, for example. To a crawler, these appear either as unique sites (www.winter2010.com) or as parts of your domain (winter2010.example.com).

Sometimes it is difficult to avoid deeper structures. For example, you may want to create a campaign inside your main site at /example/marketing/campaigns/winter2010. Adhering to the shallow hierarchy principle is possible even in this case. Magnolia allows you to shorten the URL with URI mapping. Visitors and crawlers access the campaign site at www.example.com/winter2010 while the content is served from the true location deeper in the hierarchy.

Search-engine friendly URLs

2011-01-14T03:30:00.000-05:00

This post belongs to a series about search engine optimization (SEO) with Magnolia CMS. Today we look at creating search-engine friendly URLs.

URLs are an important SEO element for search engines as well as users. Search engines are more likely to index static, short, clean URLs. Users appreciate their readability too. While most crawlers can follow dynamically generated URLs, there is evidence that when dynamic parameters are appended to a URL, the crawler only follows them to sites considered to have high importance. Request parameters should be avoided in the URL, as the crawler may view several URLs pointing to the same content as duplicates, lowering page rank.

Good

http://www.yoursite.com/books/hardcover

Bad

http://www.yoursite.com?p=72&s=0

Page URLs should:

Include important keywords, as keywords are highlighted in search results. Most SEO experts agree that including them in a URL is important. Keywords also increase the likelihood of a visitor clicking through to your site.
Have short, case-insensitive words, separated with hyphens.
Be descriptive of page content. Both from the SEO and usability perspectives, an obvious URL is a good URL. URLs get pasted, shared and written down, so the more obvious the content, the better.
Avoid the use of meaningless numbers and extraneous information.

Magnolia produces clean, human-readable URLs by default. Dynamically generated URLs are converted to crawler-friendly static ones. Request parameters are not appended to URLs.

Some systems append session IDs to a URL. A session is typically needed when a user logs in. A user's shopping cart is an example of content that would be stored in a session. Appending session IDs to URLs is a security issue. A URL that contains an ID cannot be copied without the risk of inadvertently handing the session to another user.

Good

http://www.yoursite.com/cart

Bad

http://www.yoursite.com/cart?jsessionid=undn2i50l4

Magnolia is session-less until the user logs in. At that point, a session ID is stored in a cookie instead of appending it to the URL. This avoids the duplicate content issue and makes URLs safe to copy and share.

When creating internal links, Magnolia uses the title of the target page as anchor text by default. The title typically includes the most relevant keywords about the target page.

Minimizing length and trailing slashes will make URLs easier to copy and paste, and fully visible in search results. A Magnolia URL is equally valid, regardless of whether you include an .html suffix or slash:

http://www.magnolia-cms.com/clients/references
http://www.magnolia-cms.com/clients/references.html
http://www.magnolia-cms.com/clients/references/

Restricting crawler access

2011-01-12T04:38:00.000-05:00

This post belongs to a series about search engine optimization (SEO) with Magnolia CMS. Today we look at restricting crawler access.

While SEO is mostly about about enticing that crawlers to your content, there are some pages you may not want them to access. These include administrative, password protected, and paid access pages.

A robots.txt file restricts crawler access on a site-wide basis. The file is typically placed in the root directory of your site. All legitimate crawlers it check fro the presence of a robots.txt file, and respect the directives it contains. Even if you do not want to restrict access, it is advisable to include a robots.txt file because the absence of one has been known to produce a 404 error, resulting in none of your pages being crawled. This can also be the case if the file is not constructed correctly. Specific crawlers can also be denied access by entering their names or IP addresses in the file.

The following example instructs all crawlers to keep out of the private and temp directories and denies access to a specified crawler.

User-agent: BadBot # replace 'BadBot' with the actual user-agent of the bot
Disallow: /private/
Disallow: /temp/

It is also possible to exclude individual pages with a robots meta element in the page HTML header.

<html>
<head>
<title>...</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
</head>

Relevant values for the robots meta element are:

NOINDEX prevents the page from being included in the index.
NOFOLLOW prevents the crawler from following any links on the page. Note that this is different from the link-level rel attribute which prevents the crawler from following an individual link. For anti-spam reasons, it is generally better to use the rel attribute with value NOFOLLOW for individual links.
NOARCHIVE instructs the crawler not to keep the page in the engine's public index. With Google, this prevents a cached copy of the page from being available in search results.

Preventing crawlers from following undesirable links can help combat automated spam. This method is endorsed by all major engines. Adding a rel="nofollow" attribute to a link allows control on an individual link basis. It can be used to reference external content while not endorsing it, and overcomes the necessity to exclude the crawler from all links on a page.

<a href="http://www.badsite.com" rel="nofollow">

You can use all the above access restriction methods in Magnolia:

Editing a robots.txt file is vastly simplified in that Magnolia produces clean, human-readable URLs such as http://www.magnolia-cms.com/support-and-services.
At a single-page level, templates set the robots meta element in the HTML header to "all" by default, allowing full crawler access. Options to change this behavior can be offered to editors with minimal configuration directly in AdminCentral. Customization would involve adding a field in the Page Info dialog definition and a minor tweak to the paragraph template.

Sitemaps

2011-01-10T13:46:00.000-05:00

This post belongs to a series about search engine optimization (SEO) with Magnolia CMS. Today we look at creating an XML sitemap.

While most crawlers will find your site on their own, best practice is to keep them informed by providing an XML sitemap that lists your site's URLs. The document includes additional metadata about each page, such as when it was last updated, how often it changes, and its relative importance to other pages on your site.

The Sitemaps XML protocol (sitemaps.org) is supported by all major search engines. You should include a reference to your sitemap's location in a robots.txt file.

Magnolia's Google Sitemap module generates your sitemap XML document automatically. It finds all the pages on your site and allows you to easily set priority and change frequency in the user interface. No XML editing is necessary. Default values are provided should you prefer to tweak just the critical pages.

The generated XML is compliant with the Sitemaps protocol so that it is ready for submission. If you manage multiple sites in the same Magnolia instance, you have the option to create a separate sitemap for each site.

Magnolia's Sitemap template is an additional component, unrelated to the XML sitemap. It allows you to include a sitemap page on your site without coding or configuration. It serves as a further navigational element, by offering an overview of content. This feature follows SEO best practices by assuring that each page is accessible by at least one static text link.

W3C compliant code

2011-01-06T04:50:00.001-05:00

This post belongs to a series about search engine optimization (SEO) with Magnolia CMS. Today we look at creating W3C compliant code.

In order to crawl and index a website, a search engine has to be able to read and interpret its code. A page coded in compliance with standards developed by the World Wide Web Consortium (W3C) is simpler for search engines to parse.

The standards page at W3C lists more than 100 specifications, ranging from accessibility to XSLT. While this can seem overwhelming, four of the standards are key:

Valid code (HTML, XML, XHTML)
Semantically correct code
CSS
DOM and ECMAScript

Valid code

The Magnolia Templating Kit is a best-practice framework that produces valid XHTML. The templates can be used to build compelling websites quickly and efficiently without the need for technical expertise.

The use of XHTML markup is declared with a DOCTYPE element, as you can see in the source code of any page created using a Magnolia template.

The page validates against the Document Type Definition (DTD) declared in the same element. The structure of a Magnolia page conforms to the document type by having an html element with the XHTML namespace declared, a head element including the title element, and a body element. All elements and attribute names are written in lower case and attribute values are enclosed in quotes. All non-empty elements (e.g. p, li) are properly terminated with a closing tag. All empty elements (e.g. br, hr, img) are properly terminated with a trailing slash (<br />).

Semantically correct code

Semantic markup describes the meaning of a page in terms of content, rather than the design.

In Magnolia templates, heading elements (h1, h2, h3 etc.) are used in the correct order without skipping levels, lists are used to list items, and tables are only used to present tabular data, not to create page layouts. Try removing CSS, JavaScript and images from your code. Is the code still understandable? Does it make sense to a reader? If yes, then it is semantically good code.

CSS

Cascading Style Sheets change the appearance of page elements by assigning styles to them. A style sheet gives a consistent appearance to an entire site. Semantic XHTML and CSS can improve your rankings, as it leads to better crawling, faster website response, and better accessibility and usability, which gives you higher conversions and increases your linking chances.

The look and feel of a Magnolia-based website is controlled by a single CSS file. Since the XHTML structure is designed to be styled with CSS, appearances can be changed without touching templates. Designers working with CSS don't necessarily need to know anything about Magnolia in order to create a compatible site design. They can start with the static HTML prototype that ships with the system, pick an HTML structure that is a close match to their original design, and then modify it further.

Magnolia CSS includes some browser-specific properties such as -moz-border-radius that are not part of the official CSS specification. Such properties are not used in areas critical to usability and fall back to standard properties gracefully.

DOM and ECMAScript

Document Object Model (DOM) provides a scripting language such as ECMAScript, the standardized version of JavaScript, easy access to the structure, content and presentation. DOM is future proof; it will allow any scripting language interact with the document. As long as you site has useful content, JavaScript code will plays virtually no role in SEO optimization. The only thing that matters is where the code resides.

Magnolia uses jQuery, the most popular JavaScript library. jQuery is a cross-browser library designed to simplify client-side scripting of HTML. It supports DOM element selection, traversal and modification. The entire library is stored in single external JavaScript file rather than embedded in the page HTML. An external file saves bandwidth by reducing page length, yielding faster downloads.

Search Engine Optimization

2011-01-04T10:44:00.016-05:00

This is the first post in a series on search engine optimization (SEO). I will be looking at key SEO factors identified by the SEOmoz.org consulting group and pitting them against Magnolia CMS, a Web content management system.

This series should be interesting to online marketers, people employing web communications, and anyone looking to increase their site rank. Download all posts in a single PDF.

What is SEO?

The purpose of SEO is to enhance the volume and quality of traffic directed to a website via search engine results. Search engines aim to provide users with the most relevant results, while webmasters attempt to tweak their sites in order to move it up in the rankings and attract profitable, organic traffic. SEO began in the early 1990s, and quickly degenerated into a tug of war between search engines and webmasters. For each new weighting factor introduced by the engines, crafty webmasters invented means to circumvent it. As a result, many undeserving sites achieved high rank at the expense of great sites providing valuable information. The Web became cluttered with content designed to satisfy the engines as opposed to users.

Today, SEO is practiced in a more cooperative environment in which search engines provide advice to webmasters. The engines will probably never fully disclose the algorithms that drive their crawlers, but the fundamentals of SEO are firmly established.

Google is the dominant player, with more than 80% of the search market, followed by Bing, Yahoo, AOL and Ask, according to the findings of statowl.com:

Coming up next

In subsequent posts I will cover the following SEO best practices:

Magnolia Tech Briefs

2010-10-18T05:56:00.003-04:00

We started publishing a new type of document this week: Tech Briefs. These are short technical articles on trends and hot topics we get asked about a lot.

The series starts with two Tech Briefs:

Performance and high availability. By good performance we understand the capability of a system to serve multiple simultaneous requests in reasonable time under heavy load. High availability refers to the degree of operational continuity in a system. In this brief we examine a Magnolia setup that focuses on performance.
Cloud. Cloud computing is a hot trend. In a cloud, infrastructure services are provided like a utility - think water or electricity. CMS administrators benefit from simplicity as they no longer need to know all the details of the underlying technology. Can Magnolia run in a cloud?

The briefs are also available as PDF. Print and read on your way home.

Sit, roll and start flow! Commands in Magnolia CMS

2010-10-18T03:29:00.019-04:00

Commands are custom actions executed at pre-defined trigger points. Magnolia CMS uses them to send email, flush cache, take backups, import and export data and many other common duties.

A command can perform virtually any task you can write in Java like send a Tweet or upload a photo to Flickr. You are not limited to features inside the CMS itself.

Here's how commands work. A command definition makes the command available to the system. Below is a definition for the deactivate command. Its purpose is to pull a web page down from the public instance.

As you can see, the command definition has just one property, class, which identifies the Java class that should be executed when the command is called (DeactivationCommand).

Its counterpart command activate is a bit more complicated:

activate is actually a chain of three commands:

version creates a new version of the page.
startFlow starts an activation workflow.
alert sends a workflow notification to the recipient's Magnolia inbox.

When you call the parent command the children are executed one-by-one from top down.

Command definitions can contain other properties besides class. The startFlow command has a property workflowName which identifies the workflow that should be launched. Defining properties rather than hard coding them gives content editors more flexibility. Editors can replace the default approval workflow with a custom one by simply assigning it to the activate command, without having to touch code.

To find more examples of command definitions, sign into the demo (u/p: superuser/superuser) and execute this JCR query in the config repository in AdminCentral > Tools > JCR Queries.

select * from nt:base where jcr:path like '%/commands/%'

You will find the corresponding Java business logic in the SVN repository:

See also: Commands in official documentation

Vanity URLs with Magnolia CMS

2010-10-07T03:18:00.020-04:00

Vanity URLs are short, easy to remember Web addresses used for campaigns, microsites and landing pages. They are a key Internet marketing tool. In this post I whip out my vanity cane, clip on my grill and show you how to get vain with Magnolia CMS.

A vanity URL typically contains a word or phrase that describes a specific target such as a campaign slogan. When a user visits the vanity URL they are redirected to the actual target site. The URL can be constructed using a:

trailing path: www.shell.com/eco-marathon
domain prefix: experience.virgin-atlantic.com
domain suffix: www.amazon.de
entirely unique domain name: mynavyfuture.com

The URL is often reproduced in print ads, hoping that the short and snappy look makes it easier to remember.

Magnolia CMS provides two approaches to creating vanity URLs:

1) Virtual URI mapping is used to create path-based vanity URLs. In this mechanism a trailing path is mapped to an actual page. In the configuration example below, www.example.com/winter2010 is forwarded to www.example.com/marketing/campaigns/winter.

You can choose from three types of redirecting actions:

forward hides the true target URL from the visitor. The typed URL remains in the address bar.
redirect displays the true target URL in the address bar.
permanent 301 redirect is a search engine friendly option.

2) Multi-site support is used to create domain name based vanity URLs. This feature is available in Enterprise Edition Pro. It allows you to map complete domains, domain prefixes and suffixes to a site.

In the example below, a user who enters winter2010.example.com is redirected to www.example.com/marketing/campaigns/winter.

Unique domain names can be configured in a similar fashion. In the example below, both example.com and winter2010.com point to the same site. However, winter2010.com is mapped to a special campaign section of the site. A user who enters winter2010.com is redirected to winter2010.com/marketing/campaigns/winter.

Note! You must register domain names with a domain registrar first. Then make sure that DNS entries for the domain names you map point to the server hosting your Magnolia instance. Domain mapping in Magnolia AdminCentral alone is not enough.

Magnolia CMS Technical Guide now online

2010-07-30T03:21:00.005-04:00

I started writing a white paper on Magnolia CMS architecture couple of months ago. I initially targeted analysts and CTOs, thinking 10 pages would be optimal. After reviewing drafts with Philipp we felt we had to cover more topics and match architectural features to business benefits. The paper turned into a book!

Magnolia CMS Technical Guide has new architecture diagrams that make complex topics such as the templating mechanism and clustering easier to understand. I also talk about why we chose the JCR Java Content Repository, explain the module system and show internationalization examples.

Magnolia partners can download a PDF from the secure partner site.

RFP answer sharing

2010-02-25T06:59:00.012-05:00

Responding to requests for proposal is hard work. An RFP is like a questionnaire. A prospective client looks for a solution to a particular problem and sends a request to several companies to find the best match.

The RFP document contains product requirements, problem scenarios, questions about your company's ability to deliver a system in time and on budget, and inquiries about support options.

At Magnolia we respond to quite a few RFPs. Writing comprehensive answers takes time and in-depth knowledge. The answers are out there but finding them at a moment's notice...well that's the hard part. Our partners who implement Magnolia Web content management around the globe face the same challenge. So we decided to give them a hand.

I collected answers from past RFPs into a single knowledge base. I edited them for reuse and shared them with our partners on Google Docs. Partners can access the knowledge base over the web and copy text directly into their responses. Full-text Google search helps find content quickly. I further grouped answers in a particular subject area such as "workflow" together. This speeds the writing effort further since questions are bundled together the same way.

To keep the content fresh and reliable, I go through it after each Magnolia release, write about new features, and weed out any phased-out content.

Want to become a Magnolia partner and grow with us?

Basel local builds an electric moped

2010-02-19T04:15:00.002-05:00

20 Minuten report on a Basel local who built a electric-assisted moped. I dig the chopper-like looks. Groovy. Google translation to English.

Indenting tables in Google Docs

2010-02-16T05:17:00.005-05:00

Outdated! This method does not work in the new Google Docs editor. There is no way to indent tables with the new editor. If you have a document created with the old editor, create a copy of it.

Indenting a table in Google Docs so that it is flush with list items can be tricky. If you select the table and click the Indent button on the toolbar, the contents of the table shift around and become a big mess. Here's a workaround.

If you look at the HTML source (Edit > HTML) you will see that Google Docs creates indents by adding style="margin-left: 40px;" to the element. Further indents are done in increments of 40 pixels.

To apply this method to a table without editing the HTML by hand:

Add an extra paragraph before or after the table.
Select both the paragraph and the table.
Click the indent button on the toolbar.

The whole table is now indented. You can remove the extra paragraph later.

Numbered headings in Google Docs

2010-02-15T04:09:00.014-05:00

Pro-Web has a nifty post on how to add sequentially numbered headings to a Google Docs document. The technique takes advantages of CSS counter-reset and counter-increment properties.

I tested it on a simple document with multi-level headings:

The heading numbering came out fantastic. The built-in table of contents feature works fine too but does not reflect the outline numbering (1, 1.2, 1.2.3) I used in my headings.

Minor nag is TOC layout in the print view. Google Docs generates a PDF when you want to print your document. The left indent on the TOC is too big and there seems to be no way to adjust it. See for yourself:

Open the document on Google Docs .
Click File > Print.

Tip: How to embed Google Docs into a web page or blog post like above

Yahoo! Pipes for filtering news feeds

2009-12-21T08:12:00.003-05:00

Here's how to filter annoying stuff out of a news feed. I used Yahoo! Pipes to filter "steampunk", "Mario" or "Lego" out of the BoingBoing feed.

Original RSS feed

Modified feed with filter

Robert Llewellyn on hydrogen

2009-11-29T17:06:00.003-05:00

Robert Llewellyn of CarPool fame rants about hydrogen in his usual entertaining way.

Tinkering with future tools

2009-11-25T10:55:00.005-05:00

Listen to the On Point episode on Tinkering and American Innovation. Another wonderful podcast by Tom Ashbrook and great fun for anybody who likes to tinker in their garage.

People working with hobby projects have tools at their disposal today that only a few years ago were way too expensive or only available in a professional setting. For example, you can buy or build your own CNC milling machine to create 3D objects on your desktop. Specialized shop tools are now cheap enough for home use the same way personal computing became a mainstream commodity.

When will this trend reach the biotechnology field? The cost of genome sequencing has come down rapidly. The first decoding performed on Greg Venter's DNA in 2007 cost $70 million. Today Complete Genomics can sequence the human genome for $5,000 in a professional lab with unique equipment. Will this technology be available for hobbyists in a few years?

It would be interesting to decode the genome of garden vegetables and create your own carrot variety or find a genetic flaw to cure a disease.

Electric bike

2009-10-06T14:15:00.010-04:00

I'm looking to turn my regular bicycle into an electric bike. There's a network of interesting but excruciatingly hilly bike trails behind my village. I think an electric-assisted bike would allow me to take them head-on.

I tested some ready-made ebikes by the Swiss manufacturer Flyer. They are good packages but I don't think I need a completely new bike. I am putting together a kit that consist of an electric motor, battery and controller that I can install on my regular bike. At the moment I am reading forums and researching which motors are good for hilly terrain. I don't need high speed just loads of torque which a geared motor should provide. Light weight is also high on the list since my bike is already quite heavy.

I am going with these components:

Univega Terreno 400 - my existing bike that I will build on
350/500W Permanent Magnet Brushless Rear Hub Motor manufactured byEcitypower and matching controller
36V 15AH LiFePO4 battery from PingBattery on eBay
plus throttle and pedal sensor

Lots of great info on this forum: endless-sphere.com.

Social Media Marketing

2009-09-09T07:43:00.009-04:00

I started a new online training course in Social Media Marketing. The topic is not new as such; I have used the key social media tools for some time already. What the course is going to do, however, is put Facebook, Twitter, LinkedIn and other social networks into a business context and teach me how to use them strategically to grow business.

The first session focused on top 10 keys to social media marketing success. The keynote speakers clearly know their area. Very insightful commentary on how to communicate with customers, how to portray your persona on forums, and where to draw the line between personal image and the company your represent.

The course is done completely online. Judging by the start it's going to be fun.

DIY fireplace fan

2007-12-16T19:07:00.004-05:00

I recently installed a small gas fireplace. It's a great unit but it doesn't circulate heat very well without a fan. I wanted to improve the heat output and found a fireplace fan on the web. While the fan looked very professional, the price ($140) put me off. So I decided to build my own.

Update: This project was featured as Editor's Choice at Instructables.com!

Materials:

Computer fans (2), $2.99 each, Newegg.com
Fan noise dampeners, $1.99 for a pack of two, Newegg.com
AC adapter / power supply, 12v 500ma, Model TEAD-41-120500U, $2.99, eBay.com
Panel-mount stereo 3/32" submini phone jack, $2.99, Radioshack.com
Steel sheet, 26 gauge, 12"*12". You can find this near the roofing and sheathing materials at Home Depot but basically any sheet that you can cut will work.

Tools:

Dremel
Soldering iron
Work bench
Drill and a drillbit slightly larger than the threaded part of the phone jack
Screwdriver
Ruler and pen

Steps to build:

Using the dampeners as a template, mark the position of the fan screws on the steel sheet. Leave about 1/4" inch between. Drill the holes. This will give you two squares.

Find a round object such as a mug that has the same diameter as the fan blades. Use it to draw circles in the middle of the squares.

Install a metal cutting disc in your Dremel tool. Cut along the circles. Do this step outside as metal dust and sparks will fly everywhere. Wear gloves and eye and ear protection! The cut edges will be sharp. Use a sanding stone to finish them and round any other sharp corners.
At this point you can cut the metal sheet to the correct width. It only needs to be as wide as the two fans.
Measure one fan thickness (25 mm) from the bottom of the squares down and draw a line.
Measure one fan height (80 mm) from the first line and draw a second line.
Cut the sheet to the right height along the second line.
Secure the sheet into a workbench at the first line and bend it to 45° angle.
Then at the second line and bend it to 90° angle.
Attach the fans into to the case. Order of compilation from the front: screw, plastic grommet, blade shield, case, noise dampener, fan, rubber grommet, nut. The grommets are optional but help reduce vibration and noise.
Twist the positive (red) wires from each fan together and solder them into the positive leg of the phone jack.
Twist the negative (black) wires from each fan together and solder them into the negative leg of the phone jack.
Drill a hole somewhere on the case to mount the phone jack. Push the jack through and secure with the nut provided. Stash the cords inside the case so they don't come into contact with the spinning fans.
Glue furniture pads to the bottom of the case to eliminate vibration and noise further.
Plug it in and test.
Position the fan near the back of the fireplace and plug it in.

Possible further enhancements:

Adjustable fans. They come with a potentiometer that allows you to adjust the speed. The higher the speed, the noisier the fans so slowing them down makes sense.
Fans with a temperature sensor. A sensor linked to the fan's motor automatically controls the speed, adjusting it up as the ambient temperature around the fireplace rises.

Web navigation with a subway map

2007-11-30T09:17:00.003-05:00

I saw a story on BBC News about the London subway map. The map is a classic 20th century design created by electrical engineer Harry Beck. It was a great hit with the public when first published and is still used today with few modifications. Beck's map was originally rejected by London Transport, however, because it was not geographically accurate. To make the complex map clearer, Beck had enlarged the central areas and compressed the outer areas.

While Beck's ingenious design makes the subway network easy to comprehend, it is indeed difficult to tell how far apart the stations actually are. This can be a problem in the physical world; what seems like a short walk on the map may turn out to be quite a trek on the surface.

In the virtual world where scale does not matter, a subway map can be an incredibly useful navigation metaphor.

I am currently involved in commercializing a tool called Prosumer. Prosumer allows you to create workflow-oriented Web applications without coding. With this tool you design the user's navigation path as if you were drawing a subway map, creating stations and connecting them with tracks.

Here are some familiar subway concepts and what they represent in Prosumer:

Station. In Prosumer, a station is a Web page. The user stops at the station to perform an action, for example to fill a form, and continues their journey to the next page.

Track. Tracks are navigation paths from one station to the next, basically hyperlinks.

Railroad switch. Business rule that routes the user to a particular navigation path. Depending on what the business rule says, tracks split and merge to create alternative journeys.

Departures and arrivals. Points in time when actions can be executed. For example, "On arrival to the Shopping Cart station, calculate the total of items the user has in her shopping cart" or "On departure from the Flight Search station, save the user's home airport".

I think this is a very powerful way to visualize a Web application's navigation pattern. Even after a long time away from the design, looking at the map makes it immediately evident to you what happens where.

Altwheels Festival

2007-10-01T13:43:00.003-04:00

I visited the Altwheels Festival in Boston last weekend and chatted with Mike Dabrowski about his 100 mpg Honda Insight. Mike is a hobbyist and energy conservation enthusiast. His car has a manual electric drive control. It's a system that a skilled driver can use to increase miles per gallon by 10-20% and learn to better manage the mix of gas to electric.

In a modern hybrid vehicle such as the Toyota Prius, the car makes the decision when to engage the electric motor. Mike's car works differently. It lets the driver control the mix. The car has a little joystick that you can push to make the electric motor turn on and assist in an uphill, or pull back to switch the car into charging mode in a downhill. The motor assists or charges in proportion to how far you push or pull.

Mike has also added auxiliary batteries so the electric motor can be used without a need to get energy from gas or momentum. The batteries can be charged with solar or from the grid. The system can run for 1 hour boosting the mpg to 100. The really unique feature is a fifth wheel that provides an EV mode. The car can travel in this all-electric mode at 30 mph for over 35 miles, which is great in stop-and-go city traffic and mall parking lots.

While the car is an amazing engineering sandbox, talking to man himself is the real treat. No matter what question we hurled at him, Mike had an answer. As he experiments and tweaks, he puts his brain to work. There is a huge difference between someone who just promotes a product at a stand and a true hobbyist like Mike.

Defining relevance

2006-10-10T20:50:00.002-04:00

Relevance is a crucial factor in online advertising. Relevant ads stand a better chance of being clicked than random ads. The ads you see in your Gmail sidebar, for example, are not random. Google analyzes the message you are composing or reading, and displays ads that match the content. Consequently, the likelihood that you click an ad that has something in common with the email message is fairly high.

But how do you define relevance?

The relevance of an ad ultimately depends on the context where it appears. An ad's context is typically the text and images that surround it on the website. But the context can also cover the user.

In linguistics, a quality known as readability defines how easy a given piece of text is to understand. To make text easier to comprehend you can:

Keep complex words to a minimum
Simplify sentence structures
Avoid obscure literary devices

The problem with such measures is that they are not user specific. Readability can tell you whether People magazine is easier to read than the New York Times, but it cannot tell you how easy it is for a particular reader to understand. The magazine is not customized for you or me. It is aimed at a generic readership population, an approximation of the intended audience.

The same problem applies to advertising. If you want to measure the desirability of an ad, it helps to know the reader's preferences, past purchase behavior, familiarity with the subject, and motivation.

This is why Gmail appears to be the most advanced application of AdSense to date. It extends the context of an ad to cover the user. The email message that I am reading or composing is a good indicator of my personal preferences. I am likely to write about something that is relevant to me.

Update 2007-10-08:
Erick Schonfeld analyzes Gphone rumors on Techcrunch. Same relevance principle as above, this time pairing AdSense with the phone.

To the extent that such marketing messages can be targeted based on location or what the consumer is trying to achieve at that particular moment, the greater likelihood that those ads will be clicked on. So if I am looking at restaurant reviews on my Gphone, I might not mind seeing coupon offers for nearby restaurants, but a mortgage ad would be annoying. The individual developers have the best chance of making such ads a seamless part of the overall mobile experience rather than a distraction.

Wikimania 2006

2006-08-06T22:09:00.003-04:00

I participated in the second annual Wikimania 2006 conference in Cambridge this weekend. Having set up and nurtured intranet wikis myself, I chose to go to a panel discussion on organizational uses of wiki technology. The panel was excellent. I particularly enjoyed the many tips the panelists shared on how to boost user adoption.

The tip that rang most true is "don't get in the way". This is probably the hardest lesson to learn if you like to tinker with wiki technology. What the panelists referred to is adding structure that hinders rather than helps user adoption.

Wiki is not top-down software. Its informality and openness are key to its effectiveness. The type of unnecessary structure you should restrain yourself from adding to a wiki is forms and automation that are compulsory for the user.

Everybody knows that there is more than one way to jot down meeting notes, maintain an FAQ, or compile a glossary on a wiki. While some of those ways are more elegant than others, it doesn't really matter how the information gets on the wiki as long as it gets there. Once there material is up it will benefit somebody.

So feel free to organize and categorize existing wiki pages. It helps information retrieval. But be wary of setting restrictions on how users should contribute new material. Forms and automation easily become just another barrier for adoption.

Navigation pattern: minimal add-edit-delete

2006-06-05T23:19:00.002-04:00

Design patterns are popular in software engineering. They provide time-tested, repeatable solutions to common problems. Since most programming problems can be distilled into a number of core tasks, design patterns work like templates; they solve each core task and allow you to derive a solution to the overall problem. Design patterns are abstract enough so that choosing the language and tools with which to apply them is up to you.

In my information architecture work I often come across navigation problems that have generally applicable solutions. Here's an example of a "navigation pattern" that you will hopefully find useful.

Design problem
A user needs to add, edit and delete items.

Pattern name
Minimal add-edit-delete

Click thumbnail to view image

When to use

In an application that is task and workflow oriented.
When the user is expected to perform one task at a time to complete an action.
Suitable for devices that are not feature-rich, such as mobile phones.

Solution

Self-contained, has a minimal number of screens.
Indicates page transitions clearly.
Provides confirmation for an accomplished task.
Navigable with links.

Content authoring drives Web accessibility

2005-11-30T21:47:00.002-05:00

I recently reviewed a Web application for Section 508 compliance. Section 508 is a part of U.S. Rehabilitation Act which requires that information technology must be accessible to users with disabilities. For example, Web sites must be accessible to people who are visually impaired. This can be achieved by providing alternative keyboard navigation and ensuring that these people can use assistive technology such as screen readers and Braille displays. Compliance with the act is necessary if you want to sell software to U.S. government agencies.

So I compared the product against a checklist of standards. The standards are quite logical: provide ALT attributes for non-text assets, don't rely on color alone to convey information, identify form elements, and so on. I found some shortcomings and suggested how to fix them.

What surprised me, however, was how common these problems still are. Let's consider image ALT attributes. Very few Web pages are hand-coded today. Content is authored in content management systems, blogging tools, Word processors and WYSIWYG design tools, and then converted into HTML for publishing on the Web. In many cases authors never see the HTML code, which means they don't have a chance to define ALT attributes either. So why don't authoring tools fill in the attribute automatically?

As I was writing this post I uploaded an image of Braille text into Blogger. I had named the image "braille.jpg". Imagine if Blogger would have read my file name, recognized it as a word, and used it in the ALT attribute. Instead it left the attribute empty. (I defined it manually in the HTML.)

High-level content authoring tools already save users a lot of time and effort. By making sure that they also produce Section 508 compliant code we could take big strides in providing an accessible Web experience.

Ultimate paper plane

2005-11-24T19:25:00.000-05:00

Aviation and aerospace engineering students at the University of Leeds, U.K., have come up with the perfect design for a paper aeroplane. The design introduces tiny folded winglets on each side of the plane and at the back, as well as cambered wings, which gives it the killer air-time. The secret to a really good paper plane is to minimise the drag and maximise the lift.

Guardian has provided step-by-step instructions for building the plane, Avenger. (You need a Macromedia Flash capable browser.)

Amazon adopts folksonomy

2005-11-11T20:58:00.002-05:00

Have you noticed? It's kind of small and unobtrusive, hard to recognize unless you are looking for it. But it's there. And it may have a huge impact on how people find stuff on Amazon.

I am talking about Amazon's decision to add a folksonomy-based categorization scheme to the vast online store. Next time you search for a book on Amazon's Web site, pay attention to the little Your tags box on the details page. The online merchant describes the new feature like this:

"Tags provide an easy way for you to remember and classify any item on the Amazon site for later recall. For example, you might be shopping for holiday gifts and tag items with the names of the people on your shopping list. You might also want to tag items you've purchased in the past. Don't like the way Amazon has organized its science fiction or cookbooks? Tag the items you care about with the categories that matter to you. Because people's tags are visible to others, a great side effect of tagging is that you can navigate among items through other people's tags. What items have people tagged "gift" or "Tuscany" or "robot?""

It's the last example — other people's ability to see your tags and yours to see theirs — that makes this type of categorization potentially very powerful.

I have written about folksonomy before, explaining that the method has grown organically out of a need to complement burdensome formal classification efforts done by site owners with more casual categorization by users and their keywords. Folksonomies are particularly useful when the amount of items to classify is very large. It increases a user's chances of finding an interesting item by browsing.

Note! The cherry on top is the suggestive AJAX search Amazon implemented in the Your tags box. As you begin to type, tags added by other people are displayed as suggestions. Nnnnice.

World Usability Day

2005-11-01T22:11:00.001-05:00

Want to learn how usability plays a key role in voting practices and governance? Thursday, November 3, 2005 is World Usability Day. Usability Professionals Association's Boston chapter is hosting a full-day event to promote the fields of usability engineering and user-centered design by educating the public about the value of user-centered design processes.

Multi-disciplinary teams of researchers, designers, developers, and members of the public will be let loose on the city of Boston to study aspects of public life. They will report back their findings and suggest improvements. You also get to watch usability specialists evaluate products and Web sites in a rapid-fire manner providing detailed feedback about each product's usability-related strengths and weaknesses.

Events will be held at the Museum of Science. Exhibits and activities will begin at 9 a.m. The event is free with museum admission and open to the public. For more details, visit http://www.upaboston.org/.

Panflute flowchart

2005-10-09T21:58:00.000-04:00

Cop language

2005-09-26T16:46:00.003-04:00

For decades, police across the country have used 10-codes for frequently used radio messages. We all know at least one of them, 10-4, which means "message received, OK." Now the National Incident Management System, a subdivision of the FEMA, is calling for clearer, more easily understood language.

NIMS is driving for the currently used 10-code system to be replaced with plain English commands, arguing that:

All local responders, as well as those from other jurisdictions and other states, must know and use commonly established operational structures, terminology, policies and procedures.
Everyone must communicate clearly with each other and coordinate response activities effectively.
Everyone has to speak the same language - plain English.

NIMS is serious about the issue and carries a big stick. Resistance to comply will result in the loss of federal preparedness funding. Goodbye 10-codes, hello plain English!

The effort is part of a larger campaign to improve communication from the federal goverment to the people. In 1995 a group of federal employees began meeting to try to spread the use of plain language. This group, now called PLAIN—the Plain Language Action and Information Network, remains at the center of the movement in the United States. There is also a long-standing Plain English Campaign in the U.K. They define plain English as "something that the intended audience can read, understand and act upon the first time they read it. Plain English takes into account design and layout as well as language."

So far both movements have been mainly concerned with written language. NIMS is taking an important step by extending the effort to the airwaves. Spoken language is communication too. Why shouldn't it be as clear as possible?

Let's hope that there will be less 10-1 and more 10-2 after the conversion.

Resources:

Government Calls for End to Police Codes. Talk of the Nation, NPR. September 26, 2005.
Concerning NIMS, ICS and Plain Language. Announcement by NIMS/FEMA. August 23, 2005.

Folksonomies shape search behavior

2005-09-19T23:41:00.002-04:00

With the proliferation of tagging based services such a del.icio.us and Flickr, the term folksonomy has started to pop up in discussions about Web content. It's a fairly new term that has grown organically out of the need to distinguish between the formal classification of information done by experts such as librarians and the more casual categorization that users and authors of Web content do when they describe content with keywords.

Folksonomy is a derivative of the term taxonomy. Information architects use taxonomies to classify information according to a predefined formal scheme. In a taxonomy there is typically a hierarchy between the items it attempts to describe. For example, fuel is a parent concept for diesel oil, gasoline and butane. Folksonomy, on the other hand, has no explicit hierarchy. It is a flat namespace without parent-child or sibling relationships.

Flickr is an example of a folksonomy based system. When amateur shutterbugs take photos and upload them to Flickr, they are asked to describe each shot with keywords. The keywords are completely of their own choosing. No existing categorization scheme is given or even suggested. One photographer might tag her shot of Paris with a keyword "eiffeltower", while another might tag his with "girl", "ladefense" or "arch".

Similarly, Technorati does not provide bloggers with a taxonomy by which to tag interesting Web sites. What the two systems do provide, however, is clusters of related tags. The tag "paris" has related tags "France", "Hilton" and "travel" in Technorati, derived from posts submitted by other users.

The concept of related information has a crucial impact on users' search behavior. Information on the Web is uncategorized. It is hard even for Googlebot to figure out the interrelationships between documents; it couldn't possibly index all the new content according to any formal taxonomy. There is simply too much content and it is too varied. Folksonomy based sites provide a creative solution to the problem: they encourage the user to browse related information to find interesting content. By following the links of related tags a Technorati user will likely find blog posts he is interested in but which he would not have thought of searching for with a specific Google query of his own devise.

Do you recognize innovation?

2005-09-06T15:13:00.001-04:00

Computer chips are faster today than they were five years ago. The cars we drive now are safer than the cars our grandparents drove. Since the industrial revolution life in the modern world has become increasingly easier. Is this the result of innovations or merely progress as usual?

Innovation is a much sought-after but elusive quality. Companies are trying to encourage it, creative people are revered for displaying it, but how do you recognize innovation?

Suppose a designer makes a product improvement that increases sales by 10,000 units. Do you reward the designer for her innovativeness? What about another improvement that increases sales by 5,000 units? Does that qualify for innovation? The quantitative criteria we use to measure success lends itself poorly to measuring an abstract quality such as innovation. How would you even devise a scale to measure the satisfaction a user experiences when an innovative product makes his life easier?

Here's an example: Küppersbusch is a company that makes kitchen appliances such as ovens and cooktops (hobs). Their latest product is the Induction-Top, a cooktop based on the principle of electromagnetic induction. It cooks without an open flame, is twice as fast as gas, more efficient than electric, cool to the touch even when on, and turns off automatically when the cooking pot is removed from the induction zone. Imagine that!

But is it an innovation? Michael Faraday is generally credited with having discovered the induction phenomenon in 1831. Cooktops hardly pass for an innovation either. However, when the two are combined the result is a truly innovative product. No more fire hazards or burnt fingers. Instant heat, all of which goes into the pot instead of dissipating in the kitchen. It looks very sleek and modern too.

Here the innovation is not about inventing a new technology. It's about applying a well-known method to an age-old problem. Yet from the end-user's point of view it is as close to magic as you can get.

Categories: innovation

Day trading on carbon

2005-08-23T15:00:00.002-04:00

The carbon dioxide spewing industry has used an emission trading system for years. A company that exceeds its CO² emission quota can buy the right to pollute more from another company that has pollution credits left. Britain is now proposing to extend this system to individuals.

British climate researchers want to create a system of "Domestic Tradable Quotas" for measuring, buying and selling of carbon emission credits. "Under the plan, every Brit would be issued a sort of debit card charged with an equal number of personal carbon credits at the beginning of the year. If you pollute more than your share, you could then buy more credits from someone more Earth-friendly." Mike Wendling of Grist magazine has the story on this ambitious plan.

A plan of this magnitude has considerable information management and usability hurdles to overcome. Let's examine some of them.

Convenience. Would you hand over an ID card every time you filled up your gas tank (petrol, British readers)? Each time you make a purchase that results in carbon emissions your environmental account needs to be charged. How do you record those purchases in a convenient manner? Are all gas stations expected to install readers for the new ID cards? A wide majority of adult consumers already have a debit or credit card that uniquely identifies the owner. Why not identify the consumer by their Visa card and handle the carbon charge behind the scenes transparently? Is it really necessary to introduce yet another card?
Scope. How do you calculate a carbon credit for a head of lettuce bought at the grocery store? Storing vegetables at the store requires cooling, which in turn uses electricity. Simple enough; distribute daily power consumption among the items sold and convert it into emission credits. But it gets more complicated. The lettuce was trucked to the store from a wholeseller. Do you include carbon emissions from the delivery truck in the price of the lettuce? And before that, it was trucked to the wholeseller from a farm. Do you include that trip? Do you charge fewer credits for lettuces trucked in from local producers than those flown in from Spain?
Privacy. Would you let the government track each time you turned on your washing machine or computer? As much as we would like to think that such information is nobody else's business, it is already out there. Electricity and natural gas consumption is tracked in detail by utility companies. Accessing those figures and charging our carbon accounts correspondingly is just a matter of pulling the information into one big database and crunching the numbers.
Fairness. "According to research by Tina Fawcett of the Environmental Change Institute at Oxford University, personal emissions among Britons currently vary by a factor of up to 12 -- so capping everyone's energy use at the same level might be a recipe for all sorts of trouble, in the nation that brought us soccer hooligans. But low-carbon users who don't drive or fly much would be able to sell their excess units to Hummer owners, jet-setters, and others who refuse to get on the energy-reduction bandwagon." It seems like the market-based system would reward and punish everyone duly. But like any system, Domestic Tradeable Quotas is likely to have loopholes. The rich don't pay taxes progressively so why would they dish out for the Hummer emissions either? The bill's sponsor, Member of Parliament Colin Challen says that "a voluntary approach will only get through to about 20 percent of the population." Even in the new system, this 20% will pay their carbon credits dutifully while the remaining 80% of us will try to wiggle our way out of it.

British policy makers acknowledge that "personal carbon allowances are a very attractive intellectual idea. The implementation would potentially be very expensive, but that shouldn't stop us from looking at the arguments."

While the information management and usability problems are solvable — create a nationwide database, produce and distribute the carbon cards, and make sure the whole system runs smoothly — the biggest job likely is to convince citizens to support the idea.

Resources:
BBC News "Personal carbon quotas considered"
Mike Wendling's story "In the Cards"

Categories: tradable, domestic, quotas, carbon, dioxide, emissions

Innovative user experience pays big rewards

2005-08-04T19:53:00.002-04:00

BusinessWeek has a special report on how corporations struggle with innovation. Despite the huge sums of money spent on R&D, surprisingly few innovations are created.

Some companies manage better. iPod and JetBlue are examples of products where the focus was placed on previously overlooked areas of user and consumer experience. With iPod Apple created a line of products that is easy to use, wonderful to see and touch, and clearly differentiated in the marketplace. JetBlue focused on the traveler's experience.

What are the lessons learned from successful companies, then?

Open up. Share your R&D with outsiders. Bring in design and innovation expertise. Send your top execs shopping for the products you sell.
Lead the revolution. Champion a cultural revolution inside the company and scatter designers to work with engineering, marketing and branding units.
Change managers. Hire more anthropologists and social psychologists, fewer engineers.
Change the incentives. Reward new ideas, customer satisfaction and top-line revenue.
Turn the innovation process upside down. Innovation in the 90s meant developing new technologies in the lab, designing a product and tossing it at consumers. Innovation today means observing consumers to discover what they want, then satisfying them with new products.

The last point is almost painfully accurate. It is all too commonplace to confuse innovation with technology. Tech-centric innovation merely generates feature-ridden products that can frustrate consumers. Instead, start by analysing the problem, then develop a solution to it. The solution may be a technical one but it doesn't have to be. As long as it makes life easier for enough people it will sell.

Missing Tivo guide data - advertisers' blunt counter-strike

2005-08-02T14:08:00.001-04:00

Every TiVo user knows about the 30-second skip. Officially denied, yet easy to program into your TiVo, it allows you to skip TV commercials in 30-second increments. A typical half-hour block of TV time includes 22 minutes of programming with 6 minutes of national advertising and 2 minutes of local. Since TV stations prefer to join several spots together to make commercials whose duration is an increment of 30 seconds, you can conveniently bypass the entire commercial break by pressing the 30-second skip button a couple of times.

TiVo also gives you to the option to record a First Run Only. Each episode of a popular TV show is broadcast several times. A given episode of The Daily Show with Jon Stewart, for example, runs on Comedy Central up to six times a week. With the First Run Only option, only the first airing of that episode will be recorded. This effectively allows the consumer to watch only the latest episode and to steer clear from re-runs.

Advertisers don't particularly like either feature. As the average cost of producing a 30-second national TV commercial nears $350,000, courting a viewer who only records the latest episode and skips commercials is like pouring money down the drain.

Largely the blame falls on the advertisers themselves. Although time-shifting technologies such as VCRs have been around for 25 years, the advertising industry hasn't developed adequate means to penetrate the shift and reach the viewer. Regrettably, they are resorting to brute force.

Each channel or network is responsible for reporting episode details and their airing schedule to TiVo. TiVo organizes and distributes this guide data to consumers, who in turn record the programs they are interested in. In theory, that is. Missing or inadequate guide data is a hot topic on TiVo forums. Comedy Central is a known offender. When a channel fails to identify each airing of an episode in the guide data, the TiVo device no longer knows which episode is the first airing and which are re-runs. Consequently, TiVo errs on the side of caution, recording all the episodes rather than risk missing the first run.

People have complained about faulty guide data but nothing has been done about it. The problem happens with The Daily Show all the time, which begs the question; is it accidental or intentional? Networks don't really care about accurate guide data. They know DVR users are probably skipping the commercials anyway. However, inadequate guide data works to the advertiser's advantage as it forces viewers to manually delete the re-runs. This involves watching part of the episode, most likely the beginning where commercials from the previous program overlap. Now, repeat that six times for each recorded Daily Show episode and you have effectively created a repeat impression of the first ad spot.

Coincidence? I think not.

Categories: metadata, advertising

Content management conference in Boston

2005-07-29T11:57:00.002-04:00

The Gilbane Conference on Content Management Technologies is gathering in Boston November 29 - December 1, 2005. This year the focus will be "on the broad range of content technologies available for enterprise applications, including widely deployed technologies like content management and enterprise search. We will also be looking at the use and applicability of newer technologies for corporate content applications, especially blogs, wikis, RSS, and "rich internet" applications."

The pre-conference tutorials alone are mouthwatering:

Not to mention the keynote debate on blog, wiki and RSS technologies on Wednesday afternoon.

Tip! You can attend a keynote of your choice and get full access to the exhibit area for free by registering with the Technology Showcase option!

Categories: content, management, RSS, Wiki, blog

AJAX user interaction

2005-06-27T22:45:00.002-04:00

An AJAX application can send requests to a Web server to retrieve only the data that is needed. The result is a more responsive application, since the amount of data interchanged between the browser and the server is vastly reduced. However, not only the amount of data is reduced. What also lessens is the amount of feedback between the application and its user.

Since there is no clearly visible page transition, the result of a user action can be hard to notice. Luke Wroblewski talks about how to communicate changes in the application to the user.

Surgical traffic advisory

2005-06-24T11:52:00.002-04:00

Boston has had its share of traffic problems. A key part of the Big Dig project was to relieve congestion by replacing a six-lane elevated highway that ran through downtown Boston with an underground expressway. Today, the Central Artery/Tunnel Project's Operations Control Center (OCC) "contains the most advanced electronic traffic monitoring and incident response system in the world". I got a demonstration of the system as I drove through the tunnel on I-93 from north to south.

There are several exits in the I-93 tunnel that either take you back to the surface or into another tunnel leading to the airport. As I drove into the tunnel my car radio went silent and an information broadcast from the OCC took over. A crystal clear voice said that exit 22 was under construction and that drivers should take exit 23 instead. The entire FM and AM spectrum was overridden with the announcement. What was really impressive, though, is that the normal radio program came back once I had passed the dysfunctional exit 22. I was still driving in the tunnel, but since the broadcast was no longer relevant to me, the OCC returned the control of my radio.

Adapting Jakob Nielsen's usability heuristics to what happened, you could say the OCC did a good job in several areas:

Simple and natural dialogue. Dialogue should not contain information that is irrelevant. Every extra unit of information competes with relevant units of information and diminishes their relative importance. All information should appear in a natural and logical order. When a driver passes the exit, the message is no longer relevant to them so don't broadcast it.
Prevent errors. Even better than good error messages is a careful design that prevents a problem from occurring in the first place. The message prevented motorists from trying to take the exit, which in turn prevented delays and kept the traffic flowing.
User control and freedom. Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. No pun intended, in this case the "emergency exit" was exit 23, the secondary route recommended in the broadcast.

This type of surgical broadcasting that targets only those drivers who find the message relevant is an excellent strategy. I certainly don't mind having my radio program interrupted if the message is brief and timely. Well done OCC!

Peel-and-stick metal

2005-06-21T14:42:00.001-04:00

Alsa's FXSheeting is a thin layer of metal coated with a plastic laminate. It transforms pretty much anything into a metal surface. Very cool idea. It is available in brushed brass, aluminum and copper, or mirror aluminum and copper finishes. You can order it by the foot and install like contact paper; just peel and stick.

Check out the video on the site. They are applying metal surfaces to an oven, fridge, microwave, speakers...

Intellectual property rights of design

2005-06-19T15:40:00.002-04:00

This is the Nelson platform bench. I love its simple, utilitarian design. The blonde maple looks great. It can act as a table, a seat, a stereo rack, anything. Timeless modernism, eh?

Now here's what bugs me. I want the bench but it costs around $600. I dabble with carpentry so I could probably make a good replica for $200. Can I simply copy the design and make my own?

George Nelson designed it for Herman Miller in 1948, so Miller owns the design and can manufacture it for commercial purposes. What about private, domestic use? I don't care about selling it. I would use it myself and enjoy its clean lines.

Is copying a design the same as downloading a ripped mp3? Both are for "private, domestic use." I think making the bench would be more like learning to play a song yourself.

Has anyone made a Nelson? How did it turn out?

Categories: IPR, design, furniture

Hanging planter

2005-06-19T15:38:00.002-04:00

You may have seen ads for the Topsy-Turvy upside-down planter sold on the Web. It is a clever way to grow tomatoes and other vegetables because it eliminates the need for a backyard garden plot, stakes, weeding, hole digging, worms and in-ground insects. The planter also looks cool on a deck or balcony and is sure to capture visitors' attention.

Here’s how to make your own upside-down planter from materials around the house. It likely won’t cost you a penny and will only take 15 minutes. Click the thumbnails for larger images.

Materials needed

Empty ½ gallon milk container.
Other plastic containers and bottles work too. Just make sure they are food grade plastic so that the plant growing inside is safe to eat.
Scissors
Chain or string
2 hooks or nails
Paint (optional)
Soil
Newspaper
Rubber band
Plant seedling (tomato, bell pepper, chili pepper). Choose a variety with small fruit.

Note! The planter is not designed to grow plants from seed. You should use a plant seedling that is ready for transplanting outdoors.

Construction

Cut off the bottom of the milk container two inches from the bottom. This will become the lid of your planter.

In the remaining container, cut two holes in opposite corners about 1 inch from rim.

Tip. Don’t make holes on the side where the handle is. This way the handle will be hidden in the back when you hang the planter.

In the bottom piece you cut off, cut two slots in opposite corners. The chain or string will run up through the slots.

Optional step: Cover your work area with newspapers and paint the planter. Spray paint is easiest. Spray two or more layers while letting the paint dry in between the layers. I painted mine dark green to make it look more like a planter and less like milk bottle. Also, plant roots like to grow in dark.

Important! Don’t paint the inside of the planter. The paint may contaminate the soil and find its way into the plant and eventually into your body.

After the paint has dried, attach the chain or string into the holes you made in the bigger piece. Use needle nose pliers to open and close the chain loops.

Screw the hooks (or nails) into a terrace beam or other wood surface on the sunny side of your house.

Planting

Wrap the plant into a sheet of newspaper to protect it as you push it through the container opening. Use a rubber band to hold the newspaper around the plant.

Holding the plant root ball in your hand, push the plant through the bottom of the container and out from the top opening. Help with your other hand to guide the rolled up newspaper through the opening.

Firmly fill the planter with moist soil. Leave 1 inch from the top empty. Make sure you put soil everywhere around the root ball.

Hanging and watering
Put the lid on and hang the planter from the hooks. Lift the lid and carefully water the plant. As some of the water will run through, it is a good idea to place a potted plant underneath to catch the overflow.

The plant will adapt to the upside-down position in a few days. It turns around and starts to grow up towards the sun. Learn why.

More info:

JS Online: Hanging tomatoes turn growing upside down
Garden Gate Tips: PVC hanging planter

Categories: gardening, permaculture

Update 1: It's July 23, about a month since I moved the tomato seedlings into the hanging planters. Some fruit are beginning to pop up. Cherry tomatoes don't grow any bigger than in the picture, which is a perfect size for the hanging planter. Bigger tomatoes might weigh down the stems.

Update 2: It's September 15. I have harvested about one dry pint of cherry tomatoes from the two hanging planters. To get an idea of how well they yield compared to ground plants, I planted the same variety on the ground. The ground plant has yielded a much larger crop, maybe four times as many tomatoes.

I think the culprit for the small yield is watering. Since the hanging planters don't hold much soil, the soil inside the container dries easily. I have had to water them often, pouring the water in slowly so the dry soil would hold it instead of letting it run out the bottom right away.

One solution to the watering problem would be to install a drip feed that keeps the soil moist at all times. I am thinking of a water tank such as a soda bottle suspended above the hanging planter with a drip feed regulator. This is an enhancement I need to try next summer.