Представьте себе офис крупной международной компании. Все вокруг слаженно и эффективно работают, создавая новые проекты и развивая уже существующие. В центре внимания — Сара, наш протагонист. Она — преданный своему делу профессионал и глава отдела. Её команде поручают разработку веб-приложения, которое рассчитано на широкую клиентскую базу. Чтобы приложение нашло отклик у большого количества пользователей, Саре необходимо охватить различные языки, а также учесть культурные и региональные особенности.

В этой статье мы вместе с Сарой отправимся в путешествие, чтобы поближе познакомиться со всеми аспектами локализации, начиная с планирования и заканчивая реализацией. По пути мы рассмотрим проблемы, с которыми столкнется Сара, и решения, которые она отыщет для создания успешного локализованного веб-приложения.

Часть 1. Что такое локали и основные аспекты эффективной локализации

Локали — это настройки, охватывающие широкий спектр культурных, языковых и региональных предпочтений пользователей. Они касаются не только языка, но и таких параметров, как дата и время, цифры, символы валют и т.д.

Одним из основных элементов локали является язык. Команде Сары нужно разработать интерфейс, который можно легко и быстро перевести на множество языков.

Другим важным аспектом локализации является форматирование дат и времени. В разных регионах существуют свои правила их отображения. Разработчикам нужно убедится в том, что дата и время в приложении отображаются правильно и последовательно.

Еще одним моментом, на который стоит обратить внимание, является система счисления. Front-end разработчикам необходимо внимательно следить за тем, какие десятичные разделители, разделители тысяч и символы валют используются в различных локалях.

Кроме того, нужно учитывать визуальное представление локалей. Оно включает в себя адаптацию цветовых схем, изображений и символики к различным культурным контекстам. В процессе локализации рекомендуется избегать использования визуальных средств, которые могут быть оскорбительными или неправильно понятыми в некоторых регионах.

Часть 2. Важность локализации

Локализация — один из ключевых моментов для раскрытия потенциала приложения на глобальном рынке. Она предполагает адаптацию приложения к языковым, культурным и функциональным требованиям конкретных регионов. Локализация гарантирует, что пользователи из разных регионов смогут беспрепятственно взаимодействовать с приложением Сары. Внимание к деталям повышает вовлеченность, доверие и удовлетворенность клиентов. Когда пользователи сталкиваются с контентом, соответствующим их культурным и языковым предпочтениям, они чувствуют себя значимыми для авторов приложения.

При локализации приложения для европейского региона Саре нужно учитывать различные факторы. Во-первых, следует убедится в том, что оно поддерживает основные европейские языки, такие как английский, испанский, французский, немецкий и итальянский. Кроме того, команда Сары приводит формат даты в соответствие с европейским стандартом, где день идет перед месяцем. Чтобы пользователям было комфортно, Сара переводит часы в 24-часовой формат времени, которым повсеместно пользуются в Европе.

С другой стороны, когда Сара адаптирует свое приложение для Северной Америки, она ориентируется на удовлетворение ожиданий пользователей в США и Канаде. В приложении предусмотрен выбор английского либо французского (для канадских пользователей) языка. Сара и ее команда убедились в том, что формат даты соответствует американским стандартам, а также приняли 12-часовой формат времени с индикаторами AM и PM.

Реализовав эти аспекты локализации, характерные для Европы и Северной Америки, Сара создала приложение, которое действительно ориентируется на пользователей на разных континентах.

Часть 3. Использование готовых решений для эффективной локализации

Хороший разработчик всегда задается вопросом: Как можно упростить локализацию в процессе разработки? Ответ заключается в использовании готовых решений. Такой подход дает множество преимуществ, позволяющих оптимизировать процесс локализации.

Итак, что Webix может предложить в помощь Саре?

Во-первых, заранее переведенные контролы и виджеты. Библиотека Webix включает в себя локализацию элементов управления и комплексных виджетов. Все элементы пользовательского интерфейса со встроенными лейблами, такие как кнопки, меню и т.д., уже переведены на несколько языков. Они также доступны для редактирования или создания новых пользовательских переводов. В Webix также предусмотрены предопределенные методы форматирования чисел и дат. Следовательно, нет необходимости вручную обрабатывать каждый элемент, и команда Сары может сосредоточиться на других аспектах работы над приложением.

Во-вторых, широкая поддержка локалей. В стандартный пакет библиотеки Webix входит 10 локалей, а именно:

• «en-US» — североамериканская (используется по умолчанию),
• «ru-RU» — русская,
• «fr-FR» — французская,
• «ja-JP» — японская,
• «be-BY» — белорусская,
• «de-DE» — немецкая,
• «es-ES» — испанская,
• «it-IT» — итальянская,
• «zh-CN» — китайская,
• «pt-BR» — португальская (Бразилия).

Webix Pro идет еще дальше. Он предоставляет доступ к тремстам локалям, обеспечивая всестороннее покрытие различных регионов. Использование встроенных локалей избавляет Сару от необходимости создавать переводы с нуля, что экономит время и ресурсы.

В-третьих, реализация динамического переключения языков. Пользователи могут изменить язык “на ходу”, что позволяет им мгновенно переключаться между нескольким локализованными версиями приложения. Подобные решения создают персонализированный и ориентированный на пользователя опыт.

В целом, решение Сары использовать библиотеку облегчает управление процессом локализации и обеспечивает последовательность действий. Ее команда может сосредоточиться на оптимизации функциональности веб-приложения, а Webix позволит легко наладить контакт с глобальной аудиторией.

Часть 4. Работа с локалями в Webix

Теперь, когда мы рассмотрели как Webix может помочь в локализации, давайте обратимся к практическим примерам.

В библиотеке Webix основной частью API для локализации является модуль webix.i18n. Он содержит следующие части:

• метод для смены глобальной локали
• лейблы и форматы активной локали
• все остальные доступные локали основной библиотеки (включая переведенные лейблы и форматы дат/чисел)
• готовые методы форматирования дат и чисел.

Миксины webix.Date и webix.Number содержат некоторые специфические методы локализации, например, для преобразования строк в даты или числа в соответствии с заданным форматом.

По умолчанию в Webix установлена локаль «en-US». Ее можно изменить с помощью метода setLocale(), указав в качестве параметра имя нужной локали. Для именования локалей используются общие языковые теги (коды BCP 47). Например, французская локаль может быть установлена следующим образом:

Webix также позволяет настраивать параметры для текущей локали. Например, для изменения полного формата даты (отображаемого в Datepicker и других виджетах) необходимо изменить свойство webix.i18n.fullDateFormat. После установки нового формата изменения применяются вызовом метода setLocale():

Чтобы посмотреть как это реализовано на практике, обратитесь к примеру.

Что касается комплексных виджетов, то локализованные заголовки хранятся в специальном объекте у каждого виджета. Для примера, давайте рассмотрим Document Manager. У данного виджета это будет объект docManager.locales.

Файлы локализации можно найти в одном из репозиториев Webix на Github. Здесь приведены переводы (несколько из них предоставлены пользователями) и английская локаль для всех комплексных виджетов.

Чтобы изменить локаль по умолчанию комплексного виджета, необходимо выполнить следующие действия. Первый шаг — установка пользовательского перевода путем создания нужной локали (ниже это «zh») в объекте docManager.locales:

Локаль по умолчанию (English) хранится в этом же объекте. Доступ к ней можно получить с помощью ключа ‘en’ (docManager.locales.en).

Вторым шагом является определение текущей локали. Это можно сделать, задав свойство locale виджета в конструкторе:

Если возникает необходимость переключения обратно на английский язык, то алгоритм действий следующий:

• получите сервис «locale» экземпляра виджета
• с помощью метода setLang() установите язык локали на английский.

Встроенные лейблы компонентов Webix в составе сложных виджетов, а также локализация дат и чисел зависят от используемой локали Webix. Для синхронизации локализаций сложных виджетов и Webix в конструкторе виджета должен быть определен параметр webix:

С помощью Webix можно динамически переключать языки. Например, эта возможность может быть реализована в виде нескольких кнопок на панели инструментов.

Первый шаг — синхронизация комплексных виджетов и Webix, как это было описано чуть ранее:

Следующий шаг — получение сервиса «locale» и использование метода setLang() для отображения выбранного языка.

Related sample: Document Manager: Switching Locales

Как видно из этих практических реализаций локалей, настройка пользовательского интерфейса с помощью Webix осуществляется быстро и просто. Команде Сары потребуется написать всего несколько строк кода для реализации желаемых настроек, что сократит время и затраты.

Заключение

В этой статье мы попытались осветить важность локализации при разработке веб-приложений. Успешная стратегия локализации позволила нашей героине создать приложение, которое находит отклик у пользователей по всему миру. А использование готовых решений, таких как Webix, значительно упростило и повысило эффективность процесса локализации.

Если вы хотите попробовать Webix, загрузите его через npm, Client area или кликните по большой фиолетовой кнопке внизу. Чтобы узнать больше о всех возможностях виджетов Webix, посетите сайт с документацией и галерею сниппетов.

Скачать Webix