Category: Course Portfolio

During my second year at MIIS, I am very fortunate to be volunteering for the Arctime localization project. Arctime is a powerful subtitling/video editing software developed by a Chinese company. Through out this year, I have worn the PM hat, the loc engineer hat as well as the translator hat to drive the localization, testing, and translation of the Arctime official website and software. I’m very proud to say that our team of seven have accomplished a lot! We delivered the glossary validation project, EN software QA testing project, zh-TW software localization project, WordPress website migration project, and EN website continuous localization project. If you are interested in learning about these projects in details, please find our presentation here. In this article, I will be focusing on our core project—zh-TW Software Localization. We localized .properties file from simplified Chinese to traditional Chinese.

zh-TW Software Localization

Before we took over the Arctime volunteer project, the class of 2019 has laid a solid foundation of externalizing the strings and translating the software from simplified Chinese into English. Therefore, this year we carried on by doing glossary review and client validation to ensure the translation consistency and quality before we start with any other projects, running QA testing on the translated English software, and continuing to translate software into traditional Chinese for users in Taiwan and Hong Kong.

Previous Translation Process

In the previous year, volunteer linguists translated the Java .properties files directly in the Transformer software, a .properties file editor provided by the client. This way, they could save time on creating projects on TMS and importing/ exporting the texts files.

New Translation Process

This year, our team decided to move the translation process into Memsource. Our new workflow include the following steps.

1. Unpack the software and collect the source .properties files
2. Unescape the codes in the .properties files
3. Copy the unescaped texts into .txt format
4. Pretranslate the project with MT and termbase on Memsource
5. Linguists MTPE on Memsource
6. Linguists review on Memsource
7. Export .txt files from Memsource
8. Escape the codes in .txt files and paste them into properties files
9. Repackage the software
10. zh-TW software LQA testing

At first glance, it might seem that we overcomplicated the process by introducing several additional steps. However, translating in TMS have several advantages:

• Ensure translation consistency across different linguists because TM is stored real-time in the cloud, so when they translate, they can refer to others’ translation to avoid style and terminology difference
• Accumulate TM for the localization of traditional Chinese website and tutorial videos next year
• We can pretranslate with MT with one click on Memsource, as opposed to copying and pasting MT output into each .properties file in Transformer

Deliverables

Due to time and resource limitation, we weren’t able to finish the entire project. We have finished up to the fifth step—MTPE on Memsource, so the team taking over the project next year will need to continue the process from reviewing the translation. Yet, my teammate Shiyu and I have done a pilot run to test if all the listed steps work, and we have documented and solved the technical difficulties during the process, so the team will be able to continue the project smoothly next year.

Technical Difficulties

During our pilot run, we ran into quite a few issues we hadn’t foreseen, including:

• Finding the right converter to escape and unescape codes: All the online character escape converters more or less introduced some extra characters when they convert codes, which later led to the corruption of codes when we repackaged the .properties files. Therefore, we had to pick the one which introduced least changes and manually clean up the codes after conversion.

• Memsource parsing the .properties files incorrectly: The unescaped .properties files shown up as garbled on Memsource no matter which converter we used. Therefore, we decided to paste the codes from the .properties files into .txt files and import them to Memsource instead. This inevitably adding two manual steps, but this is already the most time-saving way we came up with.
• Packaging the translated files back into software: After translation and incorporation (the process of putting the translated file back into the folder and build into software,) no matter how many times we tried, the software wouldn’t run. It was because we didn’t keep the original jar file in the folder. The correct way of packaging file is as below:
  1. Rename the original string package xxxx.jar file as xxxx_original.jar and keep it in the package (Path: Contents/Resources/Java,)
  2. Zip up the translated and escaped cn, e, and META-INF folders into a new xxxx.zip string package.
  3. Change the xxxx.zip name from xxxx.zip to xxxx.jar (the original string package name.)
  4. Put this new xxxx.jar file into the package (in the same path: Contents/Resources/Java.)

Final Thoughts

During this year of managing the glossary review/validation project, the software localization project, and the QA testing project, I have gained and learned so much about Java software internationalization and localization. Yet, my biggest takeaway in this type of volunteer project is to work as closely with the client as possible.

Ask the client whenever you need help regarding the product or process. I was reluctant to ask the client for help when I couldn’t find contexts for the terms which our linguists found confusing. I also spent hours and hours experimenting how to package the translated files and build the software. However, with the client’s guidance, I was able to solve the issues real quick. For those who have experience working at an LSP, the service mindset tends to stops us from asking clients questions and prompting us to solve the problems internally. However, our collaboration with the client on this volunteer project is different from the traditional buyer-service provider relationship essentially. The client treats our team as a partner and is really willing to teach and help us, so instead of trial and error by ourselves, we should go to our client for help when we need it. After all, he is the one who coded the entire software and knows in and out about it. We should treat him as our partner, someone we can go to and ask for help as long as we need it.

Why Unity?

Unity is the most commonly used game engine in the industry. It supports multiple languages like C#, JavaScript (UnityScript) or Boo. Unity is used to make games and other types of content for more than 25 platforms, including mobile, PC, WEB, AR, and VR. The use of Unity has expanded beyond games into film, animation, architecture, and automotive, etc. After learning to use Unity, our team was amazed by how powerful Unity is in creating movements, adjusting the atheistic of the elements, and building games, so we decided to work on something challenging but interesting — localizing a game that was built on Unity.

Intro to Our Project

After searching through tens of hundreds of games on UnityList, the open-source marketplace, our team came across a simple yet fun game — the Flappy Bird. In the game, players try to control a bird by clicking the mouses or tapping space bars to fly between obstacles without hitting them. We decided to localize it from English to simplified Chinese.

How did we localize it?

Although Unity has released its localization package (in Beta) We went with the I2 Localization plugin because we want to experiment not only on the strings, but also on other elements. We first imported the plugin as an asset. Then we played the game over and over again to identify the strings in the game. There are, in total, four strings in Flappy Bird, including Game Over, Flap To Restart, Record, and Score. 

Localizing the Strings

The steps to localize strings in I2 Localization are pretty straightforward:

1. Add Languages

2. Add terms (keys) for each string

3. Locate the strings in .cs files. (They are usually in GUIManager and GameManager files.)

4. Wrap the strings with I2.Loc.LocalizationManager.GetTranslation(“TermName”).

However, the difficult part is actually locating the strings. We couldn’t find the Game Over and Flap To Restart strings in the codes. We later learned they were actually built-in texts in the GameOverText and RestartText objects.

So we literally added the strings of GameOverText and RestartText objects to the source cod.

1. Analyze how other strings are written.
2. Imitate the style and add the strings of GameOverText and RestartText into the GUIManager.cs file after analyzing what I already had for Record and Score.

a. “Public” the GameObject of gameOverText and “Private” the Text variable of gameovertext.

b. Add a GetComponent<Text> function to the variable.

3. Continue to localize the strings with I2 Localization as described above.

Localizing the Strings and Fonts

In order to provide a more comprehensive experience for the players and make this project even more challenging, we also decided to localize the fonts and sprites in the game as well. This can actually be done in I2 Localization too!

On Canva, We purchased some images (a Chinese-feeling sky, Chinese-style clouds, and bamboos) and edited them to make them fit into the games in terms of their sizes, lighting, and colors. We put them in the Sprites folder in the game assets.

The Steps are pretty simple:
1. Add a sprite (e.g. sky) as a Term in I2 Localization and select the Type as Sprite.
2. Select the Chinese-style sprite (e.g. sky_zh-CN) for simplified Chinese.

3. Select the element and add I2 Localize component to it.

4. Make sure the sprite for English and simplified Chinese were correctly set.

Localizing the Font

Very similar to localizing the sprites, all you need to do is to add a Term for fonts and add a component. The key is to select the Type as Font.

This is how the game looks like with Chinese-style sprites and fonts!

Debugging

After we successfully localized everything and added a language picker , we found a bug in the Chinese version: he bird would died even before hitting bamboos (which made the game super hard lol).

We started to dig into the files again and found that we need to adjust the Size of the Box Collider 2D component of bamboos. Even though the size of bamboos and columns are different, the Size settings of the bamboos remain the same as those of the columns. (The X number was 1.2 and should be lower.)

After several rounds of trial and error, we learned to set the X number to 0.7. Now, it matches the width of the bamboos perfectly.

 Final Product

After 7 or 8 hours of work of three people, we finally localized and debugged the game. It looks pretty cool in Chinese now!

Intro

Quick question! How do you localize an After Effect video? The answer seems pretty straightforward: ask your client to provide an AE project file (.aep), investigate it thoroughly to see whether you are able to access the texts in the video, either pull them out using an AE library aetextio or create a picture list of the texts manually, feed the texts into a CAT tool to translate, and then import them back to the video either through aetextio or manually. This is the ideal scenario because the source texts in the video are not in your way. They can be replaced by target texts directly. However, if you can’t get a project file from your client, things can get a little bit crazy. You’ll have to hide the source texts away and reproduce all the effects for your target texts.

With a goal to challenge myself to learn the different text effects in AE I localized this 1’27 long commercial of Google from scratch:

Seems pretty simple right? Well, it actually took me a solid 22 hours to finish it, and I am going to show you what’s taking me so long. Maybe you will be able to sense the challenges I faced in the finished target video:

Challenges

1. Masking through Shapes

Fortunately, the background colors of the texts in the video are mostly monotone, so the most efficient way to mask the source texts is to create shapes. It’s not as simple as you might think though because the source texts move a lot and the colors/brightnesses of the backgrounds change if they are buttons!

In these cases, you’ll have to create several shapes for different frames and carefully match their appearances and motions against the buttons in the source.

In the screenshot, you can see that in order to match the motions and opaqueness of the button and the message box, I created several shapes.

• My tips:
  1. Start from the creation of relatively static backgrounds, like those without any animation.
  2. Then move on to the animated backgrounds. Create shapes larger than texts and with some extra room and match their positions to the motions of the texts.
  3. If the source texts are magnified, adjust the sizes of the shapes under “scale”.
  4. If the background colors changes, duplicate the shapes and change the colors using the “eyedropper” feature.
  5. If the brightness of the background color changes, duplicate the shape and place it at the frame when the changes start. Adjust the color of target shapes to the color of source shapes that appear in the middle of the brightness gradation process. Then you can apply the “Brightness & Contrast” effect to adjust the brightness of the target shape accordingly.

2. Masking with the New Feature: “Content Aware Fill”

This new feature isn’t that difficult to apply. I learned the gists in this Youtube tutorial. Users just need to mark the movements of the objects they want to remove with shape masks (created directly on the video layer):

I experimented with different fill methods, and found that “Edge Blend” works best with my video.

The result is quite impressive:

• My tips:
  1. Limit the range of “Content Aware Fill” to “Work Area”. Otherwise, it will take AE days to generate the .png mask that hides the objects away.
  2. Hide the shape masks of your objects by moving them outside of the display area. Or the shape masks will be there during the entire video, and you will “content aware fill” something that should not be removed.

3. Recreating Typewriter Effect

In the source video, typewriter special effect occurs whenever there is a search bar.

There is already a typewriter effect in the effect library, with which I created my credit at the end of the video. However, it does not come with a cursor:

Therefore, I turned to Youtube for help. This tutorial taught me how to install a text effect preset in AE, and I managed to match the speeds and starting points of the typewriter effects by endless experiments with the “Speed” and “Start After” setting:

• My tips:
  1. Align target texts to source texts first.
  2. Adjust Start After setting. For Chinese characters, the number should be pretty small. 0.01 to 0.05 work just fine.
  3. Then you can match the speeds against those of the source texts.

4. Recreating Blur Effect

Sometimes, the shapes do not fit well with the backgrounds when they are not absolutely monotone or static. In these cases, you can apply “Fast Box Blur” effect to soften the edges of the shapes.

• 

Sometimes the source texts also move so fast that they look blurry. You can apply the “Fast Box Blur” effect to the target texts to match the animation of the source texts in this case.

5. Adjusting Contents in the Video to fit Text Contraction/Expansion

Inevitably, when a language is translated into another, the texts expand or contract. In this project, when English is translated into traditional Chinese, it shrinks a great deal. You can see the length differences of the texts in the following screenshots:

In such cases, besides texts, video contents also need to be adjusted as well. I believe it’s feasible to recreate the objects and animations directly in AE. Worst case scenario, users can always create them in Photoshop or screenshoot the objects, import the image files into AE, and then animated them. Due to time constraints, I wasn’t able to incorporate these additional side projects this time, but I believe they are definitely fun to work on too!

Key Takeaways

1. Always adjust the beginning and end keyframes first, and then work on the middle keyframes if needed.

2. If the backgrounds are monotone , stay with shapes. “Content aware fills” takes longer time, involves more steps, and is very CPU-consuming.

3. Organize the layers well! Rename and lock every layer after creations or modifications to prevent unintentional changes or, worse case, deletion.

4. Analyze shapes movements before creation. Group the shapes of the same movements together to modify them in bulk and ensure consistent spacing in between.

5. Display grids when you are positioning texts or shapes. Tiny spacing issues often slip through if you only rely on your sense.

6. Numbers are your guide when you are matching the fonts and positions of texts.

Final Thoughts on After Effects

Through this challenging no-source-video localization project, I learn the most important lesson the hard way:

Never localize AE videos when there are no source files!!!

Consider the additional AE and Photoshop projects to fix text expansion and contraction as well as the excruciating masking and animation recreation process. If you have no other choices but to do so,

Estimate billable hours smartly. Charge enough for your time and efforts.

Also, the new “content aware fill” feature is powerful, indeed, but it’s not intelligent. Users must manually insert tons of keyframes to mark an object that needs to be removed. If Adobe can automate the object recognition and marking process, it will definitely save users a lot of tedious manual work.

Last but not least, one final appeal to Adobe: Can we have features like animation (motion, opaqueness, position, brightness, etc) detectors? I tried many of the set effects in the library, but I wasn’t able to to create identical animations for the source texts with any of them, so I had to create the animations keyframe by keyframe from scratch. I believe loc engineers and DTP specialists who are responsible of reproduce text animations and text integration would definitely appreciate some sort of AI detectors! Go Adobe! We count on you!

A translation management system (TMS) is a tool, either in the form of software or a website, which enables you to:

• manage and track translation/localization projects
• submit, track, download, and store project files
• manage and store linguistic resources like translation memories (TM), glossaries, reference files, etc
• communicate with stakeholders including clients and vendors such as agencies, translators, editors, DTP specialists, QAers, dubbers, subtitlers, etc
• issue and record payments through documents like vendor P.Os and client invoices

In the TMS course taught by Professor Adam Wooten, I have learned a great deal about SDL WorldServer and GlobalLink through hands-on training from the professor and TransPerfect project managers, the difference between different TMSs through our group comparison project, and professional consulting skills through the consulting project for our client.

In this blog post, I will discuss about the key takeaways and present deliverables of our projects.

TMS Group Comparison Project

In this project, my team compare SDL WorldServer and GlobalLink against the need of our “client” Hulu, an American video streaming service provider owned by Walt Disney and Comcast. I learned that the key to select the best TMS is to understand and define the needs of a company, set up the weights of different requirements that are taken into consideration, and compare the performance of the TMS objectively with their scores.

The following is our presentation slides and detailed business requirement scorecard (links to Google Drive):

Presentation
Business requirements scorecard

TMS Group Consulting Project

In this project, we experienced and analyzed a TMS product of our client. The TMS was used internally originally, and the client meant to sell it as an affordable solutions to individual translators. Our team looked into the possibility of turning this TMS as an enterprise-level solution for media streaming companies. As the market of media localization grows exponentially, we believe it’s a great opportunity for our client to step into this side of the industry. We envision the target consumers of this TMS to be small language service providers (LSPs) specializing in subtitle localization, subtitlers, translators, and big and small streaming media platforms.

Small LSPs probably wouldn’t have the budget to purchase MediaNext,  the only video localization tool on the market provided by TransPerfect, nor would they be able to build their own platform, so they would be the perfect target clients for our client. Also, we suggested our client to keep the affordable pricing strategy of the product to attract more individuals whose work revolves around subtitles.

In order to win the streaming media service providers, our client needs to make some adjustments to the product:

• Support more subtitle file types that can be imported and exported into and from the TMSL:
  • ASS (existing), SSA, SUB, SMI, and WEBVTT
• Customize the user interface for video localization with some new features:
  • Text editing and formatting
  • Video timeline
  • In-context subtitle QA feature (refer to the real-time video preview feature of MemoQ)
• Improve the workflow
  • Create setting and parsing templates for subtitle projects
  • Enable PMs to assign the projects and vendors to claim them

For more details, please watch the consulting video that we delivered to our client (link to Google Drive):

Client Consulting Video

Course Overview

As a former intern of localization project managers (LPMs) and a freelance translator myself, prior to this course, I have already accumulated some insights into localization (L10N) process through observation. Therefore, when I was introduced to the standardized process and best practices systematically in this course, I had plenty of experiences to draw from. I found myself constantly comparing the localization practices I’ve observed or adopted with what I was learning in the course: from quote creating, quote issuing, pre-translation preparation, translation, reviewing, post-translation layout to linguistic testing. Thanks to our beloved professor Alaina Brandt, I have successfully gained a comprehensive understanding of a good L10N process through a project simulation.

Team Project: Beat Saber Press Kit Web Page Localization

In simulation, our team undertook a web page localization project from Hyperbolic Magnetism, an indie game studio based in the Czech Republic. We localized the press release page of Beat Saber, a very cool VR rhythm game, into six languages, including Russian, Simplified Chinese, Traditional Chinese, Mexican Spanish, German, and Japanese. We decided on this client because many of the actual clients who need L10N services are software or gaming companies and we wanted to go through the actual process to see what potential problems may be.

In this project, we first built an LPM office and then adopted a standard workflow, including three main phases: pre-production, production, and post-production.

We set up our office by…

• Creating team Trello board and adding lists and cards to define what we need to do for the 3 mentioned phases
• Creating a team Dokuwiki page which contains subpages of our team, client, and project
• Creating a OneDrive folder structure template
• Setting up job codes and tracking time spent for different stages with TopTracker

As for pre-production phases, the actions include…

• Drafting specification templates and pinning down our project specification
• Creating a project style guide for different languages
• Stipulating talent screening requirements and procedures and recruiting translators
• Creating quote template and quote our clients according to market rates
• Creating WO and PO templates and draft the actual ones for our translators
• Wiping off files properties
• Creating translation and projects, TM, and TB in Memsource
• Preparing a translation kit with translation project, TM, TB, WO, PO, and Style Guide in it

In preproduction phase, the actions involved are…

• Translating: We translated project file on Memsource. Due to time constraints and the fact that we didn’t have professional linguists to translate for us, we machine translated it.
• Editing: We ran QA check and spell check on Memsource and check translation quality in terms of terminology, accuracy, and fluency in bi-text format
• Proofreading: We exported the files, ran checks again, did a final examination on formatting and locale specific details (numbering, currency, time format, etc)
• Final Verification: We verified our deliverables once again, paying attention to both content (e.g. the number of paragraphs, brand tiles, etc) and structure (e.g. file type, file name, etc)

Finally, we entered post-production phase. The actions include…

• Handing off deliverables to our client Updating TM, TB, and Style Guide
• Invoicing our client and translators
• Sending a follow-up email
• Managing customer feedback and making changes if applicable
• Conducting a post-mortem team meeting
• Archiving the project

Lessons Learned

1. Money matters.

As a novice LPM team, we sort of messed up when quoting client because we weren’t familiar with industry customs. For our translation fee, we charged our client with the exact translator rates, meaning that we didn’t profit from translation services. Therefore, we could only earn from the project management fee in this project.

Nevertheless, we still did a good job by setting a high rate for services we didn’t want clients to ask for. For example, we charged a pretty steep rate for alignment because we wanted to discourage our client from requesting.

In our final budget tracking, we found ourselves running slightly over budget. We were less than 2 hours over billable time, which made us the best performing team in the course. However, the fact is we were still over budget. According to Alaina’s suggestion, in this scenario, there were three solutions:

• Shaving off the costs in the following stages. For instance, LPMs can cut down further billable hours like buffer time or lower the cost for editing.
• In the worst-case scenario, LPMs will have to l tell clients the truth and wait for their approval before proceeding with further work. LPMs may also need to create a new quote for client review.
• Or LPM’s organization can simply absorb the cost.

Based on my own judgement, I believe this 2-hour extra cost can be made up by saving up in future stage, as long as we identify this problem earlier in the stage. Therefore, it’s important that we LPMs keep track of budget constantly in every single stage.

2. Start organizing from the very beginning.

Prior to the course, our team members and I didn’t really have a habit of tracking time during work. Since it was our very first time using Toptracker to record the time spent, we paid more attention to reminding one another to turn it on than setting a naming convention for our jobs. Therefore, we used ADM for almost every task, and we didn’t specify and name tasks consistently. So it goes without saying, when we tried to calculate how much time we spent on different stages or types of task, it took us an excruciatingly long period of time to manually rename the tasks and clean the data up. Therefore, I’ve learned the importance of reaching an agreement on the naming standard for our task. The standard should be set up as early as in the LPM office building phase.

3. As an LPM, you can never be too careful.

I learned this lesson the hard away after we redid our production phase all over again. Memsource wrongly segmented our source file, and we didn’t notice it until we entered the QA stage because we machine translated it without paying much attention. (Also some of us don’t speak the language we were working on.) Since we wanted a usable TM, we had no choice but to fix this problem. We tried several times reuploading the file on a certain day, but it didn’t work. However, when we tried it again later on another day, it magically worked, so we assumed Memsource experienced some bug on the previous day. I believe after this experience, everyone on our team will always check segmentation in CAT tools before sending files to translators.

 

 

Before attending MIIS, Computer-Assisted Translation course was the course I looked forward to most because as a current freelance translator, I wanted to hone my CAT tool competency, which, I thought, if I wanted to become an LPM, would be the most valuable skill to learn. After the first semester, I did acquire a deeper understanding for the CAT tools I’ve used before (Trados and MemoQ) and get a grip on those that were new to me (WordFast, Memsource, and CafeTrans).

Out of all the things I’ve learned in the course, the followings are what I found most useful for my career development as an LPM:

1. To use other functions on Trados than those in Editor view. I’ve learned how to use Trados as an LPM and reviewer. For instance, I’ve learned how to create project and return packages, review translation, pseudo translate project files, customize filter settings for pre-translation file prep, align texts for TM creation, etc.
2. To quote using fuzzy grids generated with CAT tools. As a former intern working for a sales team in an LSP, I’ve created tons of quotes using our internal sales system, but I’ve never created a quote from scratch. Looking into rates prompted me to rethink about the rates I agreed to as a freelancer.
3. To segment Chinese terms with SegmentAnt, extract terms with Antcon, and build a TB on Trados and MemoQ. As an intern working hand in hand with PMs in my former company, I had only known that I could create a term sheet manually with Excel. Now that I’ve learned how to extract most frequently used terms from text, I am confident in accelerating my future terminology management workflow.

Nevertheless, I wasn’t completely right about my expectation for the course. I now find the most valuable takeaway from the course is the customer service lesson from our team project – Venmo website localization.

In this project, our team – MIISion undertook the simplified Chinese official website localization project from Venmo, whose representative was played by our beloved professor Adam Wooten. We translated 6 webpages for Venmo, including Front page, How Venmo works, Business, Card, Purchases, Security, Contact Us, and Sign in.

We prepared the files for translation by pseudo translating them in Trados and identifying potential problems (we were glad that we went extra mile to do so because we were able to find solutions to the problems beforehand and we also impressed Professor Adam), submitted an SOW, and held a client kick-off meeting. It’s worth mentioning that we planned to localize animated png files on the webpages too, but due to time constraints (we didn’t really have time to pick up all the DTP skills in a week), we decided to leave the layout stage for the DTP course in next semester.

Nevertheless, the question is: how do we convey this issue to our client professionally? As an LSP, though a mini-size one, it’s not ideal to let clients know that we are unable to or do not have sufficient time to perform certain tasks. Therefore, after a thorough discussion, our team decided to reframe the problem and present it to our client by stressing how much more DTP will cost and how much longer it will take for this project to be delivered. In order to help our client to save money and time, we suggested the client to initiate another DTP project after the simplified Chinese version of Venmo app is published. That way, with approved translation ready, we can also settle on the specific terms appearing in the animated png images.

During our translation stage, we also found it troublesome to use Trados without an online TM which stores updates from translators immediately, so we wanted to turn to Memsource. Unfortunately, professor wanted us to practice using Trados more, so we could only work on Trados. Our solution to this problem is to run a Translation Marathon Relay.. The first translator created TM and TB, and the other four translators did the translation one after another and review previous translators’ works while enriching the content of TM and TB.

After the regular TEP process, we delivered the following files for our client, including:

1. Translation Memory (TMX)
2. Glossary (TBX)
3. 8 Source Files (HTML)
4. 8 Target Files (HTML)
5. Psuedo Translation for client’s references (HTML)

We also gave a presentation on the lessons we learned in the project in this video.

 

 

 

 

In Website Localization, my favorite course of the entire semester, my friends and I decided to use TranslatePress plugin on WordPress to localize the landing page of Lyft, our content donor, into Chinese.

We decided on this final project because we wanted to get more familiar with building a website on WordPress, to learn how to recreate a slider on WordPress, and to learn TranslatePress, a new localization plugin we didn’t cover this semester. .

Our project involves 3 stages: preparation, re-creation, and localization of the website.

For preparation, we…

1. Downloaded all the image files from the Lyft official landing page with the inspect>resources feature on Safari. Compared to Chrome, Safari performs better in providing previews of the resources, making it easier to identify images.
2. Translated pictures using two free online photo editing platforms: Meitu and Pixlr. We used the airbrush feature on Meitu to erase the original texts on the images and add  Chinese translation to it. Hindsight is 20/20. It didn’t occur to me until we finished editing the images that we could actually change the sample user on the screenshots. Instead of simply translating the English user name into Chinese, we could have created a Chinese user to appeal to our target audience better. That’s something we can think about in our future software or website L10N projects. We then turned to Pixlr to merge pictures (using the “open image as layer” feature.)
3. Pick a theme without a large embedded header image. We picked “Primer” by GoDaddy.

As for webpage re-creation, we…

1. Created a site using the resources we collected in the previous stages.
2. Added a  slider with the plugin Master Slider and adjusted its width, length, and appearance. There are plenty of slider creation plugins on WordPress, but we decided on Master Slider because it has the most detailed slider settings. You can adjust not only the size of your Slider but also that of your images. Moreover, you can even choose a clear background or upload an image as your slider background. Nevertheless, it did take us some time to configure the settings to best present the phone with sliding images – it was just a process of trial and error.

Finally, the cherry on the cake, for the localization of the page, our team…

1. Installed and activated the TranslatePress plugin.
2. Translated strings by clicking on the Translate Page button. We were then prompted to the Settings page.
   
3. Configured source and target language and how we wanted to display language options, e.g. whether to present language names in their native languages, whether to use Google Translate (requires api) to pretranslate. We also chose how we wanted to present language switchers from three available options: adding a short code to page widgets, adding  language switcher menu items to menu, or using automatically generated floating language selection. We decided to add a drop-down language switcher and a floating switcher displaying national flags.
4. Translated strings by clicking on the Translate Page button again to enter the WYSIWYG interface. We moved between pages and strings with the dropdown selector and previous/next buttons and saved our translation before moving onto the next one.

During our configuration and translation stage, we observed some pros and cons of TranslatePress.

• Pros:
  1. It’s very user-friendly. Even localization laymen like business owners can localize their websites if they have quality translation at hand.
  2. The WYSIWYG window shows translation right away after users save it.
  3. Google Translate is built-in and available, as long as users have the api.
  4. It does a great job at capturing strings on pages. (It captures every string including  the copywrite line in the footer.)
• Cons:
  1. There’s no CAT-toolish functions such as TM and TB.
  2. Unlike another plugin Multilang, it doesn’t integrate any CAT tool or support TMX export and import.
  3. Vendor-management friendly functions such as notifications or different-level user accounts are available only on paid add-ons.
  4. It’s hard to accelerate the  translation process by moving between strings because there are no  keyboard shortcuts.
  5. Users have to manually save each string before they can see the preview in WYSIWYG window or move onto the next one.
  6. Tags are presented in unclear symbols. Users have to look them up in the WYSIWYG window to see what tags they are handling.
  7. It automatically segments lines separated by hard enters. What’s worse, users  can’t merge or split segments as they want.
  8. No corresponding page is created for target languages, making it impossible to organize translation or present a localized widget like a slider. (Therefore, we could only present our DTP result – translated images in one slider that shows in both languages.)

In conclusion, in what kind of situation will the TranslatePress plugin come in handy?

• When you want a free, easy plugin
• When your contents are all in text or when you don’t need to localize pictures on your webpages
• When you don’t want all the hassle of managing webpages in different languages
• When your contents are not repetitive (you don’t want to reuse/manage the translation)
• When you wish to publish your translation quickly and directly on one platform

Based on our user experience, we like this plugin in general, but we still prefer to manage translated contents page by page and link them to original content.