Introduction

In this semester, we explored different website development languages and platforms and ways of localizing the websites. For our group final project, we decided to localize a JavaScript game, to employ 24 ways library to localize the website, and to come up with automation solutions when using 24 ways.

The game we chose is blackjack — a card game that compares who gets the biggest value between player and dealer. This JavaScript game is mainly written in ES5, but uses ES6 to display strings in the game. ES6 has a totally different way to display strings comparing with ES5 standard. Because of this,  the process of wrapping up strings becomes totally automated.

In terms of localization, we used 24 ways library to achieve multilingual functionality.  We localized the program in Chinese, and designed a language button to switch between English and Chinese.

In the workflow of 24 ways, we managed to automate the preparation steps. In this blog, I will introduce how did we do it in details.

24 Ways Automation

String Preparation

24 ways uses “_()” to wrap up strings that were prepared to be translated. If the program is written in ES5, we need to manually break down strings and variables to wrap up the strings that require translation.  However, this program applied ES6 standard to display strings, so we could make advantage of it to automate the wrapping up strings step. The difference between ES5 and ES6 is shown in the following picture.

ES6 uses “`” sign to wrap up strings and “${}” to mark variables comparing ES5’s syntax (ES5 uses double or single quotation marks to wrap up stings; no symbols to mark a variable). It’s completely different from ES5 syntax. With ES5 standard we cannot wrap up strings by applying regular expression or “find and replace” function of text editors, since there are many other places to use double or single quotation marks, such as id and attributes.

Therefore, we can easily find and replace both “`” and “${}” with 24 ways’ wrapping strings method, and we don’t need to worry target unnecessary quotation marks. The final result is as follows.

String Translation

After preparing the strings, we were moving to the string translation phase. We found that 24 ways applies the exact same string wrapping pattern (“_()”) as Python localization library – pygettext. Therefore, we tried to employ pygettext to extract the strings that need to be translated.  You can find pygettext script in the python folder. The only thing that needs to be noticed is that one must make sure the file that contains strings is in the same folder as pygettext’s. After this step, one should open command prompt and type a command line (see the picture below). The pygettext library will then generate a pot file that can be converted into a po file using Poedit. Po files can be translated in most of the CAT tools.

In a po file, there will be source texts and target texts. The target texts will be empty initially. At this stage, we came up with a further automation solution. 24 ways internationalization method requires preparing string files for each languages with the same format (see the picture below).

On the left side it’s the po flie; on the right side it’s the 24 ways’ strings file. It occurred to us that we may apply regular expression and “find and replace” function in a text editor to get strings files out of po files.

First of all, one should check the regular expression box to enable the method of applying regular expression in the “find and replace” function. And then we can remove unnecessary parts by employing regular expression or simply string literals (“.” means all characters and symbols; “^” the start of a search pattern; “$” the end of a search pattern; “*” means 0 or more same elements; “\s” means a space; “\n” means a line break).

The above picture is an example of the string literal way to target information needed. All “msgid” were replaced by tabs.

In order to get a 24 ways strings file format, one need to replace line breaks and all the “msgstr” with colons.

The last step is to replace line breaks with a comma. The following picture shows the final result.

 

 

Introduction

Starting from this semester, our team (Xiu) began to work on the General Stilwell Scholarship (GSS) project. General Stilwell made tremendous contributions to the victory of Asian War zone during the World War II by helping Chinese people to defeat the imperial Japanese army.  Stilwell family devoted a lot to improve Sino-US relationship as well. The Stilwell Scholarship is to offer financial assistance to Chinese students and help them complete their master degree at Middlebury Institute of International Studies at Monterey (MIIS).

The scope of this project includes building a presentation-oriented website for GSS, presenting MIIS and GSS in Chinese social medias and localizing the website into Chinese.

I would like to talk website localization in details in this blog. However, first of all, I will brief basics of this project.

Project Brief

Our client is Ms. Shirley who is in charge of fund raising and alumni relationship at Middlebury Institute of International Studies at Monterey (MIIS). She currently runs the Stilwell Scholarship Foundation.

The project began with the client meeting in which we set up the goals, tasks and responsibilities.  The most important things we learned is the scope of this project, client’s expectations, and resources we need for completing it.

After the first client meeting, we hosted our first internal meeting to discuss our plan for the project, to decide respective roles within our team, and to come up with detailed working items for the project. The most important task is to create a whole new website for the client and localize it afterwards. This task does not only involve website design or relevant technological matters but also requires communicating with the client to decide content for the website.

In our team we have two Stilwell Scholarship recipients, so we decided to shoot an interview for current receipts. In this regard, people could get a more personal perspective of the scholarship. Video shooting is another important working item. Our colleague Seoyoung from the media department helped us complete this part of project.

As we began the Stilwell project, our client asks us to help set up a WeChat account or a mini-program in the hope of increasing MIIS’s presence in China. Therefore, we got the chance to meet with the WeChat development team to discuss the details of this matter, and we also talked about the possibilities of incorporating the MIIS account into Monterey Travel Mini-Program, which is under the development. We have not done much in the WeChat part of the project due to the time and resource limit, but we set up the communication channel for future colleagues.

Website Migration and Localization

First of all, we wireframed the website on the notebook reflecting the client’s expectations and requirements. There should be 4 pages: Home, About (under this tab, there are two subpages – About MIIS and About Scholarship), Recipients and Donate. After deciding the structure for each page, we are ready for creating the website for the General Stilwell Scholarship.

For this project, we build the website on the WordPress in order to quicken the workflow. WordPress has many useful plugins ranging from website design to multilingual internationalization. After picking up the appropriate theme for the project, we started building the website.

In terms of website creation, we employed the Elementor plugin to facilitate the website development process. In this blog, I will not focus on this aspect of the project. The picture below is the interface of Elementor when building the website.

Website Migration

Normally, the development phase of the WordPress website is on the local computer. After the website development phase, the developer will migrate the website to a remote server. However, for the General Stilwell Scholarship project, three people of our team need to work together closely to develop the website. Therefore we used a website platform called MiddCreate in which one can develop their own website with very few limitations.

After completing the website development, we installed a plugin called One-in-All WP Migration which could zip up all WordPress files and generate a .wordpress file. The plugin is easy to use by simply clicking “Export” button, and then one could get the .wordpress file of their website and migrate it to a remote server to host the website.

After selecting a remote website server and securing a domain, we installed the WordPress in the cPanel. Here one need to make sure not install WordPress in a folder, otherwise, the url to the website will be links such as “www.xxx.com/blogs”.  Then we installed One-in-All WP Migration in the WordPress in the cPanel, and import . wordpress file to the remote server. The website migration is completed after finishing these steps.

Website Localization

The final task is to localize the website and make sure the multi-lingual website functions smoothly and gets the same effects when switching between languages. The Stilwell Scholarship is to offer financial assistance to Chinese students, so we only need to localize the website into Chinese.

We installed the WPML plugin to complete the localization process. First of all, one can click “Translation Management” to select pages that need to be translated.

One can oversee the progress of all pages of the website. In this case, all pages have already been translated. If there is a page that is ready to be translated, one can check the box beside the page.

The following step is to add it to translation basket. In the translation basket, one can assign the translation job to local translators. Exporting the page in a xliff format is also an option, so one can assign it to a external translator.

Otherwise, by clicking “Translators” tab, one can add a new translator or edit the current translators database.

The translator can start the translation process by simply logging in the WordPress and going to the “Translation” tab.

The above picture is the translation interface in the WordPress. After translating a segment, one can mark the translation as complete. When finishing translating all segments, one can see the translation progress bar is marked as “100% Complete”.

Even though the localization process is easy and efficient by employing the WPML plugin, there are several places we need to be cautious of, such as strings that were generated by theme or plugins as well as differences in format between languages.