Extreme|FX

Creating a Culturally Customized Website

2011-10-06T10:52:00+00:00

"Human-Computer Interaction (HCI) research shows that successful interaction depends on more than just using the correct language. Interaction is also dependent upon the culturally embedded meaning of objects such as icons, and metaphors such as the desktop, or the shopping cart (Bourges-Waldegg & Scrivener, 1998; French & Smith, 2000)".

Cultural customization is a fundamental step for reaching a global audience with your website, and should be completed as part of website translation and website localization. While many website owners treat this step as optional, it should be treated as integral. Website cultural customization can do a lot to validate your presence on the web with your target locale and ensure the effectiveness of your website to locale specific users. Cultural adaption involves perception, symbolism and behavior.

Culturally customizing a websitemay sound like a lot of work, and if you are starting with a standard website that had no preparation, considerable effort may be required. However, if you plan for cultural customization at the time a website is initially designed, your work will be considerably reduced.

Let's begin with a review of the three main types of websites:

Standard websites:this type of website has only one language (usually English) and the same content is intended to reach all countries. No effort was made in terms of website translation, website localization or website internationalization.
Localized websites:this type of website ranges from websites with some translated landing pages, websites that are fully translated (localized), to websites that not only offer users with translated content, but also with content specific to their country or locale.
Culturally customized websites:this type of website not only takes into account the language and locale of the target audience, but also one or more levels of cultural adaptation: perception, symbolism and behavior.

After website translation and website localization, if you are going to do cultural customization for your website, you and your translation services agency should take the following issues into consideration:

Using Unicode

The very first step in cultural customization is to make sure that a website will be able to display any language. The Unicode Standard is the universal character encoding standard for written characters and text. It defines a consistent way of encoding multilingual text. Unicode characters are represented in one of three encoding forms: a 32-bit form (UTF-32), a 16-bit form (UTF-16), and an 8-bit form (UTF-8). UTF-8 has been designed for ease of use with existing ASCII-based systems and it is usually the default encoding that you should be using on any webpage. Setting up the right encoding will ensure that your website's contents will be correctly displayed. Most Content Management Systems (CMS) already handle all content as UTF-8 encoded text.

Flexible Design

If possible, use a highly flexible or "fluid" design that allows pages to scale based on what content is in them. If we take an English word as a base, the same word in Russian could be up to 60% longer, while in many Asian languages it could be less than a half the width. Based on the complexity of Asian languages, you may need to scale fonts by about a 120% so they are legible. So, as a rule of thumb, you should avoid using fixed sized structures with text in it - space should be allowed to expand or contract in accordance with the size of the text.

Adding "Culture" to the mix

Our culture affects the way we see the physical world and the meanings we attribute to objects in our environment. As noted before, culture is shaped by our perception of the word (how we select, filter, organize and interpret information), symbolism (a person's capacity to respond to or use a system of significant symbols used to understand their environment and create a social reality) and behavior (what forces us to behave and react the way we do). If you're designing a website for a culturally diverse audience, you should carefully consider what visual representations you use on your website, as their meanings can vary considerably from culture to culture.

A complete discussion of this topic would constitute a complete book, I have noted an excellent one below from Nitish Singh entitled "The Culturally Customized Web Site: Customizing Websites for the Global Marketplace". Let me provide you with some examples so you can have a grasp of the basic concepts:

Perception

There are many factors that affect perception. One of the most important and easiest factors to adjust after website localization is color. People from different cultures do not perceive colors in the same way. The following chart^‡ gives some examples of color and their meaning in different cultures.

COLOR	USA	China	India	Egypt	Japan
Red	Danger Love Stop	Good fortune Luck Joy	Luck Fury Masculine	Death	Anger Danger
Orange	Confident Dependable Corporate	Fortune Luck Joy	Sacred (the Color Saffron)	Virtue Faith Truth	Future Youth Energy
Yellow	Coward Joy Hope	Wealth Earth Royal	Celebration	Mourning	Grace Nobility
Green	Spring Money New	Health Prosperity Harmony	Romance New Harvest	Happiness Prosperity	Eternal life
Blue	Confident Dependability Corporate	Heavenly Clouds	Mourning Disgust Chilling	Virtue Faith Truth	Villainy
Purple	Royalty Imagination	Royalty	Unhappiness	Virtue	Wealth
Black	Funeral Death Evil	Heaven Neutral High Quality	Evil	Death Evil
White	Purity Peace Holy	Mourning	Fun Serenity Harmony	Joy	Purity Holiness

Naturally you can't accommodate every single culture with your design. But if your website is correctly structured and you have your content separated from your design (as you should), adjusting the main "theme" of a website is as easy as dropping a couple of selectors on the main CSS with a lang=xxx attribute selector.

Symbolism

We all use symbols, almost unconsciously, on a daily basis. We don't even have to think about them as we take their meaning for granted. But there are times when the same symbol could mean two completely different things from one culture to another. One of the common examples is the Swastika: most of us will associate it with the Nazi movement. But for Hindus, it is the symbol of good luck and well-being. The swastika is used in all Hindu yantras and religious designs.

Another seemingly harmless example is the "thumbs-up" gesture. Many countries recognize this as a sign of approval or confirmation, and a graphic designer looking for a graphical way to let users know that they have successfully completed an action might be tempted to base an icon on this image. However, in modern day Afghanistan, Iraq and parts of Greece, Italy and France this simple gesture can be considered to be very impolite. In fact it is often regarded as the equivalent of the "middle finger salute" used in the UK and USA.

Behavior

Behavior is defined by the following cultural values^† : Collectivism, Power Distance, Uncertainty Avoidance, Masculinity-Femininity and High-Low Context. Behavior is what it "drives" us to do something and it is an entire topic by itself. Basic behavior is influenced by the tone of the writing in content, images, layout, etc. It has a big influence on any "Call-to-Action", as they are tightly connected.

This concept is the hardest point to implement, as it may involve significant design changes, modification to the tone of the writing (so, you will not be simply translating content into another language, but copywriting it), and swapping images. For instance, a woman in a scanty swimsuit draped over a red sports car would be inappropriate for many global target markets.

Putting the World into Web

As you can see, creating a culturally correct website could be as huge task if you want to do it "by the book." But most of these tasks can be accomplished by doing moderate research on target locales, coding the website following the recommended standards, and adjusting the localized website content to avoid insulting the target, global audience.

The first items (using Unicode and flexible design) should not have a big impact on the website localization budget. If the design process took colors and symbols into consideration, probably only minor adjustments would be required, based on the locale, with minimal cost.

Behavior is the hardest point to achieve, not only because of the technical issues (you may need to have different templates for different regions) but also because maintenance costs can sometimes be very high.

^† Hofstede, Geert. Culture's Consequences, Comparing Values, Behaviors, Institutions, and Organizations across Nations Thousand Oaks, CA: Sage Publications, 2001

^‡Small extract from the global color chart on "Beyond Borders", Yunker 2003

Website Internationalization and Accessibility

2011-07-21T14:55:00+00:00

The World Wide Web is capable of living up to its name: by being accessible to everyone in the world. This is more or less true, as there are still many web users whose needs aren't adequately met. The Word Wide Web Consortium (W3C) has several recommendations on how to make a webpage accessible by users, not only with disabilities, but also by users that do not speak English.

What is Accessibility?

Here is a definition from the Web Accessibility Initiative WAI: "… Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging."

Internationalization

Internationalization is the practice of making content available in a variety of languages, not simply one. On the web, languages determine the direction of the text, the fonts used, or even the dictionary for pronunciation used by a screen reader.

Basically, a website is composed of three layers: Content, Presentation and Behavior.

The content layer is what your readers are coming to get when they come to your Web page. Content can consist of text or images and includes the pointers that your readers need to navigate around your website. In web development, HTML makes up the content layer and it also structures the web document.
The presentation layer is how the document will look to your readers. This layer is defined by the CSS or styles that indicate how your document should be displayed and on what media types.
The behavior layer is the layer of a webpage that performs a function. If you use Ajax or DHTML, it is the JavaScript that makes the page do something. If you have a PHP/.Net or any other kind of back-end, it is that back-end that produces results when your reader clicks something on the webpage. For most web pages, the first level of behavior is the JavaScript interactions on the page.

One of the principles of web accessibility is that these three types of information should be separated from one other. Blind users will certainly not be able to "see" anything on screen, so another way to "present" the information to that user needs to be created. Arabic online users would have an unpleasant experience trying to read left-aligned Arabic content and Chinese users would have a hard times trying to read 11px Chinese text. As you can see, accessibility it is not only for blind people.

Accessibility Standards

You would have to spend a small fortune doing website testing to assure proper presentation on all possible devices. You already know how hard it can be to fully test a design on mainstream browsers, if you have to accommodate really old browsers that do not follow the standards, like IE6. Adding assistive technology software and hardware to the mix makes the task nearly impossible.

So, how do web developers deal with these issues? Subject matter experts on accessibility around the world compiled their knowledge and created a set of recommendations for web developers to follow. By learning these standards, a web developer won't have to spend time researching every possible access method. By following these standards, he can be reasonably sure that a compliant webpage will be accessible to a broad audience.

Cascading Style Sheets

Cascading Style Sheets(CSS) is a simple way to add style (fonts, colors, layout, etc.) to web pages. CSS were designed primarily to enable the separation of document content from document presentation.

If we broaden our understanding of "presentation" to mean something more like "representation," thereby obviating even an implied visual form, it becomes possible to customize CSS for a range of output media. It also becomes possible to write separate style sheets for media, whose modes of presentation vary enormously, from Braille to printers to computer screens.

CSS Level 2media types were defined in 1998. Their details (as excerpted from the W3C document focusing on accessibility-specific media) are as follows:

Aural: Intended for speech synthesizers.
Braille: Intended for Braille tactile feedback devices.
Embossed: Intended for paged Braille printers.
Print: Intended for paged, opaque material and for documents viewed on screen in print preview mode.
Screen: Intended primarily for color computer screens.
TTY : Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.

The preferred method of styling a document involves external style sheets - separately-maintained documents that can be included by reference in an unlimited number of HTML files and updated in one single operation. Style sheets are then linked to a document as follow:

<link rel="stylesheet" href="stylesheet.css" type="text/css" />

To use media style sheets, simply add one more attribute to the link attribute media. Some possible examples:

<link rel="stylesheet" href="tty.css" type="text/css" media="tty" />
<link rel="stylesheet" href="aural.css" type="text/css" media="aural" />
<link rel="stylesheet" href="braille.css" type="text/css" media="braille" />

If you do not specify a medium for a style sheet, graphical Web browsers default to an interpretation of media="all". In CSS Level 2, you do not have to use separate style sheets for different media; you can use the @media rule to specify the media.

You can also pair media queries with pseudo-classes, most notability the lang pseudo-class. The CSS Level 2 specification defines a special pseudo class, :lang(), for indicating rules that should be applied only to elements that match a certain language. Such a rule is written as follows:

:lang(zh-CN) { font-size: 120%; }

This would display anything written in Simplified Chinese language with a font size 1.2 times larger than the base size specified for the whole document.

Under the Web Content Accessibility Guidelines, you are required to specify changes in the language used in documents. You do this by adding the lang="languagecode" attribute to virtually any tag (like <p></p>, <span></span>, <cite></cite>, or <hx></hx>. Also, in order to specify a change in language, you must already have declared the default, base, or original language, which you do by adding lang="languagecode" to the <body> or (preferably) <html> tags

<p lang="zh-CN"> 关于我们</p>

By itself, :lang() is not particularly useful, but when combined with other CSS rules and properties, it can be quite powerful.

List Markers

One way in which :lang() rules can be used is to set an appropriate marker for ordered lists. For example:

ol li:lang(hy-AM) { list-style-type: armenian; }

That will set the list style to traditional uppercase Armenian numbering for Armenian text. There are specific values for Armenian, Georgian, Roman and Greek numbers/letters. You can find a complete list at W3C Generated content, automatic numbering, and lists.

Bidirectional Text

Two CSS properties, direction and unicode-bidi, are used to affect the calculation of the correct direction. In most cases, you won't need to use these properties if you set the correct language on the document/text run, but you may occasionally need to change text direction. You should first use the unicode-bidi property to create an additional level of embedding or to set up an override. Then the value of direction can be set to either ltr (left-to-right) or rtl (right-to-left).

Summary

Users with disabilities are as entitled to use the Web as anyone else, but often they are unable to access websites due to careless web design. Using Cascading Style Sheets is an excellent first step toward developing a website that can be used by everyone, as style sheets separate presentation from content. Assistive technology devices and software can often enable access by disabled users, but only if sites are designed in accordance with Web accessibility standards. The W3C has produced Web Content Accessibility Guidelines that are an invaluable resource for Web developers.

In addition to users with disabilities, users in non-English-speaking countries also use the Web. CSS is designed with internationalization in mind; for example, rules can be made for specific languages with the :lang() pseudo-element, and the list-style-type property can produce a number of non-English number markers.

Keeping the goal of website globalization in mind

Whether you are trying to release a multilingual product in order to increase your global market share and ROI or you are trying to increase your company's global operational efficiencies by developing multilingual websites, website globalization is a requirement to make either a reality. Each client's needs are somewhat unique and there are a variety of factors that can influence resources and costs involved in a complex software globalization project.

Website Localization with Ektron – Part 2

2010-08-27T09:33:00+00:00

Setting up the correct Locale

The first thing we should do is to make sure that the system responds to the user in the correct (user selected) locale. To do this, we should not only rely on the content returned by Ektron (that will be in the correct locale) but also we should tell the system to use that same locale to present any information requested outside Ektron in the same locale.

Since we are dealing with a website, and based on Microsoft best practices, the locale initialization must be done with the InitializeCulture method, by overriding it and setting the CurrentCulture and CurrentUICulture for the current thread. The Culture value determines the results of culture-dependent functions, such as the date, number, and currency formatting, and so on. The UICulture value determines which resources are loaded for the web page.

Since we would have to use the above on every template on our website and that's not only too time consuming, but also error prone (if you add a new web page and forget to add the code, some items on that web page may not work as expected), I usually create a LocalizablePage class that inherits from the System.Web.UI.Page and I override the InitializeCulture method with the initialization code. Then the only thing that I have to remember is to change the inheritance of every template from System.Web.UI.Page to LocalizablePage.

namespace EktronLibrary {
    using System.Globalization;
    using System.Web.UI;

    public class LocalizablePage : Page {
        protected override void InitializeCulture() {
            //this is here just to make sure the culture is correctly initialized
            CultureInfo c = Utilities.CurrentCulture;
            base.InitializeCulture();
        }
    }
}

As you can see on the code above, I did not directly place all the initialization code on the LocalizablePage class, but I created a helper class that does all this for me. Also that class returns what is the actual user-selected locale and what's the default locale selected in Ektron. These two values will come in handy for some of the next tasks.

namespace EktronLibrary {
    using System.Globalization;
    using System.Threading;
    using System.Web;
    using Ektron.Cms.Controls;

    public static class Utilities {
        private static int _lastCulture;
        private static CultureInfo _lastCultureInfo;
        private static readonly object _cultureLock = new object();

        static Utilities() {
            using (LanguageAPI languageApi = new LanguageAPI()) {
                DefaultCulture = new CultureInfo(languageApi.DefaultLanguageID);
            }
        }

        public static CultureInfo DefaultCulture {
            get;
            private set;
        }

        public static CultureInfo CurrentCulture {
            get {
                using(LanguageAPI languageApi = new LanguageAPI()) {
                    if (_lastCulture != languageApi.CurrentLanguageID) {
                        HttpContext.Current.Application.Lock();
                        lock (_cultureLock) {
                            _lastCulture = languageApi.CurrentLanguageID;
                            _lastCultureInfo = new CultureInfo(_lastCulture);
                            Thread.CurrentThread.CurrentCulture = Thread.CurrentThread.CurrentUICulture = _lastCultureInfo;
                        }
                        HttpContext.Current.Application.UnLock();
                    }
                }

                return _lastCultureInfo;
            }
        }
    }
}

Adding LANG attribute to the html tag

Now that we have our system and code properly set, we need to tell the browser/spiders in which language we are serving the page. For this you can:

Add a Literal control inside the html tag and from the code behind, write the appropriate code for the literal to display the current locale, or
Use the code below to simply replace the html tag by a .net control that will render the html tag and also take care of setting the correct attribute. As you can see, this piece of code uses the CurrentCulture property of our helper class to ensure that we always use the correct user selected locale.

using System.Web.UI;

[assembly: TagPrefix(@"EktronLibrary.Controls", @"EktLib")]
namespace EktronLibrary.Controls {
    using System.Text;
    using System.Web.UI;

    [ToolboxData(@"<{0}:EktronHtmlTag runat=server />")]
    public class EktronHtmlTag : Control {
        protected override void Render(HtmlTextWriter pOutput) {
            StringBuilder strb = new StringBuilder(@"", Utilities.CurrentCulture.Name);
            pOutput.Write(strb.ToString());
            RenderChildren(pOutput);
            pOutput.Write("");
        }
    }
}

Taking care of content directionality

Again, we created another control that you can simply drop in your templates (inside the body tag); making sure it wraps all the content of your website. This control will render a DIV tag with the DIR attribute correctly set (rtl for Right-to-Left or ltr for Left-to-Right) based on the page target language. The DIR attribute is being applied to a DIV and not to the BODY tag because some speakers of languages that use right-to-left scripts prefer the directionality of the user interface to be associated with the desktop environment and not with the content of a particular document.

using System.Web.UI;

[assembly: TagPrefix(@"EktronLibrary.Controls", @"EktLib")]
namespace EktronLibrary.Controls {
    using System;
    using System.ComponentModel;
    using System.Text;
    using System.Web.UI;

    [ToolboxData(@"<{0}:EktronContentDirectionality runat=server />")]
    public class EktronContentDirectionality : Control {
        [Category("EktLib Component")]
        public string ClassName { get; set; }

        protected override void Render(HtmlTextWriter pOutput) {
            StringBuilder strb = new StringBuilder("<div ");

            string langName = Utilities.CurrentCulture.TwoLetterISOLanguageName;
            string dir = (langName.Equals(@"ar", StringComparison.OrdinalIgnoreCase) ||
                langName.Equals(@"ur", StringComparison.OrdinalIgnoreCase) ||
                langName.Equals(@"fa", StringComparison.OrdinalIgnoreCase) ||
                langName.Equals(@"he", StringComparison.OrdinalIgnoreCase)) ?
                    @"rtl" :
                    @"ltr";

            if (!string.IsNullOrEmpty(ClassName)) {
                strb.AppendFormat("class=\"{0}\" ", ClassName);
            }

            strb.AppendFormat(@"dir=""{0}"">", dir);

            pOutput.Write(strb.ToString());
            RenderChildren(pOutput);
            pOutput.Write("</div>");
        }
    }
}

Localizing hard-coded images

If an image is linked on a page from the content in Ektron, it is easy to go to that page, edit the localized version and replace the image. But when dealing with images hard-coded into the templates (Logos, graphics with overprinted text, etc.) you cannot resort to the features Ektron provides. In these cases, you have to pick the correct image for the user selected locale.

The code below shows you an example of a user-control that takes care of everything for you. The control has the same set of attributes as the IMG tag. The only difference is on how the control renders the IMG tag. If the website is being displayed in the Ektron default language (set on the web.config), the control will look for the image on the path/filename combination you specified on the Source attribute. But when the user changes the language of the site, the control will try to load the image from the same path as the original version, but the control will append to the name an underscore (_) and then the full name for the selected locale (es-ES for Spanish/Spain, ja-JA for Japanese/Japan, zh-CN for Simplified Chinese/China, etc). So, for example, if the original image is located under this path "/images/subfolder/header.jpg", the Spanish version will be located/named as "/images/subfolder/header_es-ES.jpg" and the Japanese version will be "/images/subfolder/header_ja-JP.jpg"

using System.Web.UI;

[assembly: TagPrefix(@"EktronLibrary.Controls", @"EktLib")]
namespace EktronLibrary.Controls {
    using System.Drawing.Design;
    using System.Web.UI;
    using System.ComponentModel;
    using System.Text;
    using System.Web;
    using System.Web.UI.Design;

    [ToolboxData(@"<{0}:EktronLocalizableImage runat=server />")]
    public class EktronLocalizableImage : Control {
        [Category("EktLib Component"), DefaultValue(""), Localizable(true)]
        public string Alt {
            get;
            set;
        }

        [Category("EktLib Component"), DefaultValue(""), Localizable(true)]
        public string Title {
            get;
            set;
        }

        [Category("EktLib Component"), DefaultValue("")]
        public string UseMap {
            get;
            set;
        }

        [Category("EktLib Component"), DefaultValue("")]
        public string ClassName {
            get;
            set;
        }

        [Category("EktLib Component"), DefaultValue("")]
        public string Style {
            get;
            set;
        }

        [Category("EktLib Component"), Editor(typeof (UrlEditor), typeof (UITypeEditor))]
        public string Source {
            get;
            set;
        }

        [Category("EktLib Component")]
        public int Width {
            get;
            set;
        }

        [Category("EktLib Component")]
        public int Height {
            get;
            set;
        }

        protected override void Render(HtmlTextWriter pOutput) {
        StringBuilder strb = new StringBuilder(@"<img");
        if (Utilities.CurrentCulture.LCID == Utilities.DefaultCulture.LCID) {
            strb.AppendFormat(@" src=""{0}""", Source);

        } else {
            int dot = Source.LastIndexOf('.');
            strb.AppendFormat(@" src=""{0}_{2}.{1}""",
                    Source.Substring(0, dot),
                    Source.Substring(dot + 1),
                    Utilities.CurrentCulture.Name);
        }

        if (!string.IsNullOrEmpty(Alt)) {
            strb.AppendFormat(" alt=\"{0}\"", HttpUtility.HtmlAttributeEncode(Alt));
        }

        if (!string.IsNullOrEmpty(Title)) {
            strb.AppendFormat(" title=\"{0}\"", HttpUtility.HtmlAttributeEncode(Title));
        }

        if (!string.IsNullOrEmpty(UseMap)) {
            strb.AppendFormat(@" usemap=""{0}""", HttpUtility.HtmlAttributeEncode(UseMap));
        }

        if (!string.IsNullOrEmpty(ClassName)) {
            strb.AppendFormat(" class=\"{0}\"", HttpUtility.HtmlAttributeEncode(ClassName));
        }

        if (!string.IsNullOrEmpty(Style)) {
            strb.AppendFormat(" style=\"{0}\"", HttpUtility.HtmlAttributeEncode(Style));
        }

        if (Width > 0) {
            strb.AppendFormat(" width=\"{0}\"", Width);
        }

        if (Height > 0) {
            strb.AppendFormat(" height=\"{0}\"", Height);
        }

        strb.Append("/>");
        pOutput.Write(strb.ToString());
    }
    }
}

Localizing hard-coded text

You have two options here:

Remove all the hard-coded text from the templates, placing them in resource files (.resx) and then use the Literal asp.net control to place it back on the templates. The resource file will have to be sent to the translation company as part of the localization process, along with the content exported from Ektron. If you are using the LocalizablePage class as the base class for all your templates, the system will automatically pick-up the correct resource file once the translated resources are back in place.
Remove all the hard-coded text from the templates, placing them in smart-forms within Ektron, and then use the standard ContentBlock control from Ektron to place the text back into the templates. You will have to also provide the control with an XSLT file that the control will use to render the content, and the content ID for the text you want to display. This method has the advantages of letting the Website administrator edit/import/export the text from within Ektron's Workarea.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output omit-xml-declaration="yes" />

    <xsl:template match="/root">
        <xsl:value-of select="DictionaryEntry"/>
    </xsl:template>
</xsl:stylesheet>

And there you have it… If you correctly implement the techniques mentioned above, you will have a "bullet-proof" base of templates that will be localization-friendly and that may require minimal adjustments to be done over the QA phase.

I hope the "Website Localization with Ektron CMS" 2-part series of articles has provided you with useful information on how to correctly author multilingual websites under the Ektron CMS.

Website Localization with Ektron Web CMS Part 1

2010-08-06T18:24:00+00:00

This is the Part 1 (of 2) on "Website Localization with Ektron Web CMS". In this part I will discuss how to correctly setup a multilingual website within Ektron and also provide some additional information about website localization in general.

Setting up Ektron

When setting up a multilingual website in Ektron, there are several factors that fall outside the translation-only process that is built into the web system. Let's first set-up Ektron through the WorkArea.

You should first go to the configuration screen, and under "Language Settings" you should enable the languages you want your website to be translated into. You enable a language by checking the boxes that are under the green check mark icon.

It is worth noting that while I'm using the word "language", what we are really selecting is a locale. A locale is the association of a language and a country. Locale settings are important due to, for example, the "English" language using different words that represent the same meaning in the US and in UK. The same applies to currency, measurements (metric system/imperial units/customary units/etc.).

Preparing the templates for your multilingual website

While most of the translation workflow process will be handled by Ektron, the templates you have created (aspx pages) to display the content on your website will also require preparation to support multilingual content.

Important tips about creating templates for website localization

Content translation expansion: Make sure there is enough room for the text to accommodate possible expansion once translated (usually text length could expand up to a 25% of the original), or that the web template was coded in a way that expands or shrinks based on the displayed content.
Hard-coded text: text that it is hardcoded into the web template will not be exported for translation. Having different web templates per language sometimes is not possible. This means that every time you have to make one change to the template you need to apply the same change over and over again for each language. To solve this issue, I would recommend:
- Have all hard-coded text extracted into a resource file (that needs to be sent for translation also), or
- Create a "Dictionary" folder within the CMS, setup a simple SmartForm/XSLT that will hold/display the text and then replace all the hardcoded text on the web templates with Content controls that will have their IDs pointing to each entry on the Dictionary.

The second option has the advantage of letting the Website administrator edit the website text, and also, since the text now is part of the CMS content, it can be exported/imported back by the Website admin.

Localization and images/PDFs/documents: These items are not exported for translation. If the images you used on the website do not have any text, this is not a problem. But PDFs or other documents need to be sent separately to the translation company if you need them translated.
Text direction: Ektron handles Left-to-Right (LTR) and Right-to-Left (RTL) text without problems. But you have to tell the browser how you want it to display the text on screen. If you are not translating your website into Arabic/Hebrew/Persian/etc., this is not an issue. But if you are localizing your website into RTL direction for languages like Arabic, you will have to employ some code on the backend that detects the language direction and writes the appropriate "dir" attribute on the html page (dir="rtl"). Also, you may want to add this attribute to a container inside the html page and not to the page per-se. In some browsers, applying a right-to-left direction in the html or body tag will affect the user interface too. If the page has a scroll bar, it will appear on the left side of the window. JavaScript alert boxes may also be mirror imaged. Some speakers of languages that use right-to-left scripts prefer the directionality of the user interface to be associated with the desktop environment, not with the content of a particular document. Because of this, it may be preferable to not declare the document directionality on the html or body tag.
Character encoding: If a browser is unable to detect the character encoding used in a Web document, the user may be presented with unreadable text. Declaring the character encoding of the web template is important for anyone producing multilingual websites. A Unicode encoding can support many languages and can accommodate pages and forms in any mixture of those languages. Its use also eliminates the need for server-side logic to individually determine the character encoding for each page served or each incoming form submission. This significantly reduces the complexity of dealing with a multilingual site or application. A Unicode encoding also allows many more languages to be mixed on a single page than almost any other choice. Authors are encouraged to use UTF-8 as the default character encoding when creating templates and use the appropriate meta-tag on each template (<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>)
Page language: Declaring the default language is already important for web applications such as accessibility and search engine optimization (SEO), but many other possible applications for this information may emerge over time. It is usually very easy to do when creating the content, but more difficult to retrofit later in order to take advantage of language-related features. The easiest way is to declare the language on the HTML tag of your web template (<html lang="en" xml:lang="en">). It can be overridden for portions of the document as required.

Exporting and translating content

Once you have your website ready for translation, you can export the content of the website with a click of your mouse. You select the root folder and from the "Action" menu, select "Export for translation". Ektron will go through each page on your website, create an XLIFF file ready for translation and compress it with all the other pages in one single ZIP file (per language) that you can download and send for translation.

Each ZIP file will have a complete copy of your website ready for translation. One feature Ektron has is that you don't need to track which pages you modified/added into the website after the content was translated. Ektron will do that for you and the next time you export the content, only the new pages/changed content will be exported, saving you time and money.

The content is then translated by a translation agency and sent back to you, again, as ZIP files.

Importing back the translated content

Once the content has been translated, you need to import back the translated content into the CMS. As with exporting, this operation is as easy as going to the settings and selecting the "Import XLIFF Files" option. After you browsed your machine for the zipped XLIFF files and clicked on the upload button, Ektron will insert back each translated contents under the page/language they belong.

If you have setup a content approval chain, the newly imported content will be placed as "Checked In" for your web reviewers and/or QA testers to review and approve.

At this point, your multilingual website is ready. I would always highly recommend running a standard website Quality Assurance process of the site in case any issues surface (i.e., some text may need some adjustments, still having hard-coded text on the templates, etc).

I hope this article was useful and serves as a starting point to prepare an Ektron based website to support multiple-languages. In my next article I will show you how to create a series of simple controls that you can drop in your templates in order to take care of some common issues with localization.

Website Translation, Website Localization and Website Internationalization

2010-06-22T22:52:00+00:00

Many customers new to translation are confused by the terms "translation", "localization" and "internationalization". Although each term describes a distinct process for website projects, translation and localization are often used almost interchangeably. This blog clears up the mystery around these basic concepts.

Website translation is also known as "Website Globalization". In order to "translate" a website into other languages you may need both Internationalization (I18N) and Localization (L10N) services.

View complete article here: Website Translation, Website Localization and Website Internationalization

12 Steps to Website Globalization

2010-04-30T19:24:00+00:00

Whether you are trying to launch a multilingual website to expand your products and services into new global markets or whether you are trying to increase your company's global operational efficiencies by developing multilingual extranets and intranets, website globalization is a requirement to make either a reality. You must translate (globalize) your website to empower your web presence to effectively communicate, conduct and complete international e-commerce.

Website translation is also known as "website globalization". In order to truly "translate" a website into other languages you may need both internationalization (I18N) and localization (L10N) services.

View complete article: 12 Steps to Website Globalization

Preconditions, postconditions checks

2009-03-31T19:25:00+00:00

How many times you found yourself writing preconditions before executing some code (like argument validation) and post-conditions (validating some result before returning the value/using on another function)?

So, for example:

if (arg == null) throw new ArgumentError("arg can not be null");
if (!(arg is IInterface)) throw new ArgumentError("arg must be of type IInterface");
....
if (ret == null) throw new Error("Something went wrong!");

return ret;

That’s good practice, but when you have to validate several conditions the code starts to look messy. For that reason, I created a couple of helper classes that takes cares of the job, providing a nice fluent typing.

Pre-conditional checking examples:

requiresNumber(pIndex, "pIndex").isLessThan(_size);
requires(pCollection, "pCollection").isNotNull();
requiresString(pKey, "key").isNotNullOrEmpty();
requires(pValue, "value").isNotNull();
requires(pNode._parent, "node").isNotSameAs(this, "You cannot attach a node to itself").isTypeOf(TreeNode);

Post-conditional checking examples:

ensuresBool(ExternalInterface.available, "ExternalInterface is not available.").isTrue();
ensures(_entries[pOldKey]).isNotNull("Key ["+pOldKey+"] does not exists.");
ensuresNumber(days).isLessOrEqualThan(10675199, "Invalid number of days: "+days);

Usage

You have 6 specific conditional checks (Array, Boolean, Date, Number, String) and one general. You access the conditionals by using either the requires[Type] functions or ensures[Type] functions.

The “requires” functions requires at least one parameter: the value you want to check. You can also pass a second parameter that represents the “name” of that value (you usually use “requires” to validate method arguments).

The conditions may have different number of parameters (depending on what are you checking). The last one is an additional string you may want to attach to the error description.

The “ensures” functions are similar to “requires”. Ensures needs at least one parameter (the value). The second argument is an additional message you may want to attach to the complete validation process, and the third one is the “name” of the variable you are checking.

This library is part of my flash framework. You can download it from Google Code

Note: There is a bug on the FlexSDK4 that does not let me compile the full library as a .swc, nor create the documentation (If you are interested: bug). You have to download the library from the SVN repository. I will post a new ZIP file when the bug gets fixed.

Method overloading in flash

2009-03-27T15:43:00+00:00

As you may already know, it is not possible to have the same method with different signatures in flash (also known as method overloading).

For example, on c# you may have the same function that does different things depending on the argument count / arguments types. The only limitation is that you can not have a method with the same signature (and different return type, for example).

So, this are perfectly valid method declarations:

class Datetools {
    public function minus (date:Date):Timespan {        ....    }
    public function minus (span:Timespan):Date {        ....    }
}

And the compiler then chooses the right one based on usage.

Now, how to do this in actionscript? The most used method is to add a switch/if statement inside the function and try to match the parameters. It is not only cumbersome but also hard to maintain.

So, using a little of black magic here and there, I present here my method overloader class.

package extremefx.tools {	
	/**
	* @author Marcelo Volmaro
	*/
	public final class Overloader {
		private var _methods:Object;
		public function Overloader(pTarget:Object, pFnc:String) {
			_methods = {};
			pTarget[pFnc] = _exec;
		}
		public function overload(pFunction:Function, ...args):void {
			_methods[args.join("")] = new Fnc(pFunction, args);
		}
		public function unoverload(...args):Boolean {
	    		return delete _methods[args.join("")];
		}
		private function _exec(...args):* {
			var l:int = args.length,
 			h:String = "",
			theF:Fnc;
			for(var i:int = 0; i < l;i++){
				if (args[i] == null) continue;
				h += args[i].constructor;
			}
			//an exact match was found, use this.
			if ((theF = _methods[h])) return theF.f.apply(null, args);
			var bestMatch:int = -1,
			fnc:Function = null;
			for each(theF in _methods){
				if (theF.l != l) continue;//match number of arguments
				var m:int = 0;
				for (var j:uint = 0; j < l; j++){
					if (args[j] is theF.a[j]) m++;//find out which method has the best match
				}
				if (m > bestMatch){
					bestMatch = m;
					fnc = theF.f;
				}
			}
			return (fnc == null) ? null : fnc.apply(null, args);
		}
	}
}

final class Fnc {
	public var f:Function;
	public var a:Array;
	public var l:uint;
	public function Fnc(pF:Function, args:Array){
		f = pF;
		a = args;
		l = args.length;
	}
}

How to use?

Simple. You need to instantiate a new Overloader class, passing as arguments the target object and the name of the function you want to overload. The overloaded function must be defined as a variable of type “Function”. The Overloader class will assign then the method that will check for arguments and calls the appropiate function.

public function main():void {
	var o:Overloader = new Overloader(this, "testFnc");
	o.overload(_testO1, String);
	o.overload(_testO2, String, Boolean);
	o.overload(_testO3, Number);
	o.overload(_testO4, Function, Number);	o.overload(_testO5, DummyTest, Number);
	trace(testFnc("A String"));//A String
	trace(testFnc("A String", true));//A String:true
	trace(testFnc("A String", false));//A String:false
	trace(testFnc(123.456));//123.456
	trace(testFnc(_testO1, 123.456));//Function plus:123.456
	trace(testFnc(this, 123.456));//Class [object DummyTest] plus:123.456
}

private function _testO1(pString:String):String {
	return pString;
}

private function _testO2(pString:String, pBool:Boolean):String {
	return pString + ":"+ pBool;
}

private function _testO3(pNumber:Number):Number {
	return pNumber;
}

private function _testO4(pFunction:Function, pNumber:Number):String {
	return "Function plus:"+pNumber;
}

private function _testO5(pClass:DummyTest, pNumber:Number):String {
	return "Class "+pClass+" plus:"+pNumber;
}

public var testFnc:Function;

I’d tried to make it bulletproof. If the specified parameter combination does not exist on the registered function list, the overloader will try to find out the best match from all the available functions, or at least one of the available functions. Please note that since flash player does runtime checking on the argument types, an exception may be thrown if the player can not do a type convert on the arguments (int, uint and numbers are convertibles, for example).

Hope you like it and as always, comments are welcomed!.

Flash internationalization library

2008-04-21T19:37:00+00:00

This library will help you to internationalize your flash application. It supports localization of numbers, date/time, percentages and strings. It can also parse back numbers and date/time formats on a specific locale into flash internal formats.

Details

Most of the code is well documented. I choose to follow the .net c# conventions for formatting as is the one I use the most.

There is also a resource management class that will let you manage language-specific resources, like strings and bitmaps. The resource manager uses the standard XLIFF format and it supports trans-unit nodes as well as bin-unit nodes.

Bin-unit nodes can have external or internal content. External content can be anything that flash supports natively like text files, xml, sound, video and images. External content will be loaded at runtime after the XLIFF file is parsed.

Internal content can only be images.

The library also supports text pluralization. For the library to know a string is a pluralized string, the string “[I18N]” must precede the list of pluralization’s.

ex: [I18N]|{0} file deleted.|{0} files deleted.

The number of plurals will depend on the language. Most languages uses two forms, singular used for one only, but other languages have more that one plural form (and others, like some of the Asian family, have no distinction between the singular and plural form).

For example, Polish uses e.g. plik (file) this way:

0 plików
1 plik
2-4 pliki
5-21 plików
22-24 pliki
25-31 plików
etc.

and so on. Plural forms must be sorted like in real life. So, the singular first (if exists) and then the plurals.

In the zip package there is a demo application that uses all the features the framework has. Please check that demo and the documentation for more information.

TODO / Missing

Calendars: Gregorian calendar and all its derivated works (Japanese, Julian, Korean, Taiwan, ThaiBuddhist). All the Lunar Calendars do not. Also, the UmAlQuraCalendar it is not implemented at all.
HijriCalendar: Again, I implemented the algorithm, but I’m not sure if it works correctly. Need to check how the addHijriDate parameter works, if this parameter is the same as hijriAdjustment in .net, and if the calendar works at all.
Native digits on the NumberFormatInfo is implemented but currently the system does not replace digits on the output string. Need to check with someone that knows Arabic on how this works.
Collation tables (tables used for correct string sorting based on the language sorting rules) are not implemented. Not sure if I will be able to implement this feature, as they are pretty big. The collation table for the Japanese language only is a 9mb binary file.
Bi-Di algorithm (have a rought version working, need to test against all the test cases).
Inline node parsing on XLIFF files (to correctly handle inline tags, like bold, italic, links, etc).

Source code and downloads at: GoogleCode

Flashxed

2007-09-10T12:45:00+00:00

How to play:

Flashxed is a puzzle game in which your goal is to move similar blocks together, which causes them to disappear. Once all the blocks are gone, you’ve solved the level and you’re presented with a new level to solve. You move blocks by pressing the mouse on them and dragging to either the right or left. If an empty space is encountered, “gravity” takes over and the blocks fall towards the bottom.

PLAY NOW!

Many thanks to Martin who provided me with the web-space necessary to host the game!.