By Lee Sykes
March 2006
This is part of the How did they build it …? series of interviews.
This is an email interview with Laurence Neville who has created two DotNetNuke® sites: www.landmarkeducation.co.il and www.landmarkeducation.co.jp
We discuss how Laurence created these websites, in particular looking at the use of Languages within the sites.
Introduction
- Q. Hi Laurence, thank you for taking the time to join us, How Are You?
- Q. Could you start by explaining who you are, what you do and your background with DotNetNuke?
- A. In my day job I am primarily a SQL Server developer, although I also do some ASP.NET development and website design, mostly around DotNetNuke.
- Q. Regarding Landmark Education, could you provide a background on the website, what is it for? What’s its history?
- A. Landmark Education is a training and development company that offers programs and curricula to individuals, organizations, communities, and institutions through 51 offices and in 22 countries worldwide. The website exists to promote the company, and to provide its customers with information such as available course dates, syllabuses etc. The flagship site www.landmarkeducation.com provides extra services, such as the ability to register into courses online and subscription services for course graduates.
Languages:
- Q. Let’s begin by looking at this website: www.landmarkeducation.co.il This is a very interesting website in Hebrew. Could you explain how you set up DotNetNuke to use the Hebrew language?
- A. It was actually surprisingly easy. I had worked on sites before in other European languages, but never any in non-Western scripts, and I was worried that there would be a lot of extra techniques to learn or that DotNetNuke would not be able to handle a complex right-to-left Unicode script like Hebrew. However it turned out that no special configuration of DotNetNuke was required – nothing in the core needed altering, mostly it was just a case of designing a special skin for the site. At the time we were using DotNetNuke 2.1.2 and the techniques I used all remained valid through the upgrades to the 3.x versions.
- Q. How did you get the text to flow from right to left?
- A. First I took the skin from an equivalent site where the text flowed left-to-right. This skin used tables to control the layout and I added a dir="rtl" directive to the outermost table. For example:
<table dir="rtl" cellspacing="0" cellpadding="0" width="100%" height="100%" border="0" summary="Main table for design" id="Table1">
The only other thing that needed doing in the skin was to turn a few attributes from ‘left’ to ‘right’, e.g. a table cell with:
style="border-right-style:dotted;border-right-width:1;border-color=#FFCC66;"
became
style="border-left-style:dotted;border-left-width:1;border-color=#FFCC66;"
By the way, on some Israeli sites you will see the vertical scrollbar flips to the left side of the IE browser window (see http://he.wikipedia.org). I guess this is more natural for Israelis. This is achieved by adding the dir="rtl" directive to the <html> tag of the page. You can add this in the default.aspx file without making any changes to the core code, but you will have to re-edit the file after any DotNetNuke upgrades as the default.aspx file will have been replaced.
- Q. Do you have to use a special Text Editor for this or can you use the default text editor that comes with DotNetNuke?
- A. As I remember the version of the FreeTextBox editor that came with DNN 2.1.2 did not handle Hebrew correctly. I can’t remember exactly what the problem was, and it may have been a defect just of that early version. I switched to the CuteEditor and found no problems with it.
- Q. When you enter Text into your Text Editor does this also flow from right to left?
- Q. Were there any other challenges regarding setting up the Hebrew language for this website?
- A. No major technical challenges. There were minor things – a few modules needed the Alignment property setting to right instead of left in order for the content to justify right (but strangely not all needed this).
- Q. Can you speak Hebrew?
- A. No, and nor can the site administrator! But the people who write the content do obviously and the site administrator is very proficient with copying and pasting! It can be very confusing however if you have to edit Hebrew and are not used to doing it – the arrow, Home and End keys on the keyboard do not do what you are used to, especially when there is English text mixed in with Hebrew! Inserting and highlighting text can become a big challenge!
- Q. Did you have to go through any special testing procedures for this website? Did you have to test it in multiple browsers?
- A. Nothing special that you wouldn’t do for any other site. Unicode scripts are well supported by modern browsers – there are thousands of Hebrew, Thai, Kanji etc sites out in the world and as far as I know those parts of the world rely on the same browsers that the west does: IE, Netscape, Opera, Firefox etc.
- Q. Where are you based? And how did you end up creating a website for a foreign language that you don’t speak?
- A. I live in London, UK. Landmark Education is an international company but initially only had an English site (www.landmarkeducation.com). Landmark wanted to set up websites that were written specifically for the countries it operates in where English is not the primary language. At first, it looked like this would require creating the sites in the traditional (HTML, ASP etc) way. I was not directly responsible for websites, but I had been using DotNetNuke 1.0 for some other projects and was asked to determine if DotNetNuke could handle the requirements. Although 1.0 did not look like it could, 2.0 came out within a short period of time and when I saw the new skinning system I realized DotNetNuke was probably the ideal system to use. It would allow me to create the look & feel (i.e. the skin) once and reuse it all over the site, and more importantly it would allow a site administrator without HTML skills to manage the content.
- Q. You mentioned that you have created websites for other languages, which languages have you worked with?
- A. French, German, Dutch, Swedish, Danish and Kanji (Japanese). I am also proficient at translating between American and British English having lived in the US for many years :-)
- Q. Did you also design LandmarkEducation.com? – I’ve noticed this site does not use DNN, why did you choose DNN for www.landmarkeducation.co.il and for http://www.landmarkeducation.co.jp ? and what was the brief for designing these websites?
- A. No I did not. This site was created before DNN was available. Like I said above, the requirement for the Israel and Japan sites coincided neatly with the release of DNN 2.0. As the number of Landmark sites grew, what was important was that they could be maintained and expanded by staff that did not necessarily have web design training. DotNetNuke fitted the bill perfectly.
Menu:
- Q. Could you explain the design of the menu system. I can not read it, but it looks interesting.
- A. The top menu shows just the top level pages. The tab highlighted in gold is the page you are on (or the parent of the sub-page you are on).
The left navigation (or is it the right navigation?!) always shows you the page you are currently on (the highlighted bullet), the sub-pages of the current page, and the pages between the current page and the top level. In other words, it’s a bit like a Windows Explorer tree.
- Q. Are you using the Solpart menu?
- A. The top menu uses the standard Solpart menu, but the left navigation is a module I wrote myself. At the time I could not find a menu module that could display an n-level tree the way we wanted it (and even today I don’t think such a module exists commercially).
- Q. Looking at: http://www.landmarkeducation.co.jp – When you click on a menu item the list of text links on the left hand side changes and displays a coloured box next to the page you are viewing, while also displaying any sub menus underneath it. How did you create this?
- A. The menu module on the .co.jp site is actually exactly the same as the one on the .co.il site. Being primarily a SQL Server developer I created a SQL stored procedure to figure out the set of pages to be shown in the menu, with the indent level of each. The module then uses a DataList of tables to format the menu. Each link is checked to see if it matches the current page, and if so a different CSS style is applied.
- Q. When a menu item is selected, the tab is coloured, underneath this in the coloured area is a section of text, is this the breadcrumbs? – Did you have to do any special configuration setup for this?
- A. Yes, this is the standard breadcrumbs skin object.
Modules:
- Q. Which modules have you used on the website?
- A. Just Text/HTML, Links, and two custom written modules – the navigation menu we already talked about plus a module to display the next available Landmark courses. You will see this module on the third tab of both the .co.jp and .co.il sites.
- Q. Could you explain how your module works?
- A. The ‘available courses’ module, pulls the next available courses for the country from a master schedule database, and presents it in the local language.
- Q. Did the Hebrew / Japanese languages raise any interesting issues in terms of development for the module?
- A. Very much so. I wanted to create one module that could present a list of available courses for any given country and language. The first, and the easiest step, was to pull the raw data from a separate SQL Server database. Then it needed to translate the data (city names and dates) into the local language. I created a lookup table in which to store words that were used in the output and their translations, plus an edit screen in the module to maintain it. However, translation is more than just swapping each word for its equivalent in the local language. The whole grammar of the phrase is different in Hebrew and Kanji.
For example, the English:
Tokyo, Japan, 21st, 22nd, and 23rd April 2006
becomes in Kanji:
?? (Japan) ?? (Tokyo) 2006 ? (character for year) 4 ? (character for month) 21? (character for day), 22?, 23?
Content:
- Q. There is a lot of content within the website, how did you decide on the page structure that you’ve created, what factors affected your decision? And could you explain the page structure that you’ve created. – Was this pre-determined by the English .com version?
- A. I did not design the overall structure of the site – the template was based on the landmarkeducation.com site, which itself was designed by other teams. My role in this project was as a technical developer rather than a website designer or graphic designer. The top level pages are:
- Home
- The Landmark Forum (the main Landmark course)
- Events and Locations (available courses)
- Company Overview
- Contact Us
- Privacy Policy (Japan site only)
- Q. And to finish off, is there any advice you can pass on to the readers if they are offered a job creating a website in a language that they do not speak and it is their first time working on one of these projects?
- A. Well in my case I was not really prepared for the task, and even with hindsight its difficult to think of specific advice. I used a technique that is tried and tested in the IT world called “throw your hat over the wall then figure out how to get it back”. The things that definitely worked in my project were:
- using a system that allowed clean separation of design and content (i.e. DotNetNuke)
- being able to concentrate just on the design with someone else responsible for entering the content
- having people around who understood both English and Hebrew, e.g. who could tell me if the text flowed correctly
If you would like to find out any further information regarding Landmark, visit: www.landmarkeducation.com