Текст книги "Шаблоны проектирования веб-приложений"

COLLABORATION (СОТРУДНИЧЕСТВО)

Проблема

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

Решение

Разрешите сотрудничество таким образом, чтобы участники могли работать над одной и той же позицией (например, документами, электронными таблицами и т. д.) в одно и то же время или поочередно (рис. 9.66).

Рис. 9.66. Приложение Google Docs позволяет нескольким пользователям работать над одной и той же электронной таблицей в одно и то же время. Чтобы установить различия между участниками, они выделяются различными цветами. Также это приложение позволяет пользователям общаться в режиме реального времени в процессе работы над одним и тем же документом, с целью обеспечить совместную работу

Зачем

Для своего успешного завершения многие задания предполагают совместную работу между двумя и более людьми.

По своей природе совместная работа часто осуществляется в режиме реального времени, где все участники работают (т. е. обсуждают, пишут, общаются, разговаривают в чате и т. д.) одновременно.

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

Как

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

Разрешите пользователям определять природу совместного доступа

В качестве первого шага при совместной работе пользователи должны осуществить совместный доступ к позиции и определить совместный доступ к ней. Владелец позиции может определить, могут ли люди, которым позиция доступна в совместном доступе, просматривать ее, комментировать и/или изменять ее (рис. 9.67).

Рис. 9.67. Приложение Buzzword (корпорации Adobe) разрешает пользователям отображать роли пользователей, которыми разрешен совместный доступ к документу: «Соавтор» («Co-author»), «Обозреватель» («Reviewer») или «Читатель» («Reader»). Читатель может только просматривать документ, обозреватель может читать и комментировать его, а соавтор может читать, комментировать и изменять документ

Облегчите планирование

Координация является важным аспектом совместной работы. Важной задачей при совместной работе является определение взаимно подходящего времени для всех участников. Этого можно достичь несколькими способами. Один подход – разрешить участникам делиться своим расписанием, чтобы, просматривая его, можно было узнать возможные временные интервалы. Многие календарные веб-приложения разрешают пользователям осуществлять совместный доступ к своим календарям, чтобы помочь определить те временные интервалы, которые открыты для планирования (рис. 9.68).

Рис. 9.68. Этот пример приложения Google Calendar показывает четыре календаря в совместном доступе. Как только осуществят к ним совместный доступ и наложат друг на друга, легко увидеть, что единственное открытое время для всех четырех пользователей приходится на вторник, с 12:00 до 12:30

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

Рис. 9.69. Чтобы найти взаимно удобное время, сайт Doodle.ch предоставляет пользователям возможность создавать опросы и отвечать другим членам команды, выбирая удобные временные интервалы, поддерживая встречу или планируя событие

Не все встречи можно запланировать. Часто во время чата или беседы пользователи могут пожелать осуществить совместный доступ к документу или начать сессию совместной работы.

Разрешите пользователям создавать такие импровизированные встречи, чтобы улучшить совместную работу (см. шаблон PRESENCE INDICATOR, рассмотренный ранее в этой главе).

Разрешите дополнительные режимы взаимодействия

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

Рис. 9.70. Приложение Adobe ConnectNow предоставляет пользователям возможность общаться в чате, оставлять заметки, видеть друг друга через вебкамеру, разговаривать и т. д. в процессе встречи или совместной работы

Разрешите пользователям управлять изменениями

В процессе совместной работы над одним и тем же документом очень важно, чтобы пользователи не переписывали обновления друг друга. Приложение должно создать необходимые «блокировки», чтобы сделать взаимодействие относительно гладким, прежде чем пользователи закроют документ, чтобы сделать изменения, и затем войдут заново в обновленные документы (рис. 9.71).

(а)

(б)

Рис. 9.71. Приложение While показывает пользователям, кто редактирует документ (а). Adobe Buzzword не разрешает одновременные изменения. Если пользователь намеревается поступить таким образом, появляется сообщение, отображающее причину того, почему для них заблокирована возможность обновления документа (б)

Когда несколько участников работают над одним документом, важно знать, какие изменения были сделаны и кто их осуществил. Большинство приложений предоставляет пользователям возможность выбирать версии документа и показывать их в сравнении, выделяя то, что было добавлено, изменено и удалено (рис. 9.72).

Рис. 9.72. При сравнении версий приложение Google Docs отображает изменения, которые были сделаны и показывает, кто сделал их

Как только пользователи определили изменения, в том случае если они не согласны с изменениями или предпочитают предыдущую версию документа, они должны иметь возможность вернуться назад к любой из предыдущих версий (рис. 9.73). Это очень распространено в вики-приложениях[15]15
  Вики-приложение – это веб-приложение, которое предоставляет пользователям возможность совместно создавать, редактировать и связывать веб-страницы, используя очень простой метод разметки. Относительно недавно вики-приложения стали также предоставлять расширенные возможности редактирования текстов.


[Закрыть], где страницы может добавлять, редактировать или изменять любой из участников. Большинство вики-приложений, кроме того, разрешают пользователям откатывать страницы к предыдущим версиям.

Рис. 9.73. Приложение Zoho Writer показывает пользователям версию документа в выпадающем списке Show version (Показать версию). Пользователи могут просматривать любую версию, а затем нажать кнопку Revert (Вернуться), чтобы вернуться к данной версии документа. Обратите внимание, что эта настройка возможна для пользователей независимо от того, работают ли они совместно

Связанные шаблоны проектирования

Первым шагом в сотрудничестве (COLLABORATION) является предоставление доступа другим пользователям (SHARING) к документам или другим приложениям. В дополнение к этому, чтобы облегчить совместную работу, необходим обмен сообщениями (MESSAGING) между пользователями.

Глава 10
Интернационализация

Введение

Когда проектируются веб-приложения, предназначенные для глобальной аудитории, необходимо решить две важные проблемы: интернационализации и локализации (Aykin, 2000)[16]16
  Близкий ему термин глобализация (иногда сокращается до G11N) обозначает процесс подготовки как приложения, так и бизнеса к международным рынкам (Aykin, 2000).


[Закрыть]:

• Интернационализация (I18N)[17]17
  Термины «интернационализация» и «локализация» иногда сокращаются как I18N и L10N соответственно. 18 в I18N обозначает количество букв между I и N в слове интернационализация ( internationalization ); аналогичным образом, 10 в L10N обозначает количество букв между L и N в слове локализация (localization).


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

• Локализация (L10N) представляет собой процесс адаптации приложения к конкретному региону или языку путем добавления местных компонентов и перевода текстов.

Интернационализация веб-приложений является важным шагом на пути локализации.

Она не только способна наполовину уменьшить количество общих усилий по локализации (Hurst, 2007), но и может устранить необходимость в разработке отдельных версий приложения для конкретного региона и языка.

Процесс интернационализации позволяет сочетать необходимую гибкость и приспособляемость в веб-приложениях на начальном этапе проектирования (а не только во время локализации) и требует обратить внимание на культурные нормы и предпочтения, выбор цвета, уместность изображений и т. д. (EXTENSIBLE DESIGN). В дополнение к разработке для расширения конструкторы должны быть уверены, что форматы, используемые для обозначения дат (DATE FORMAT), времени (TIME FORMAT), чисел (NUMBER FORMAT), а также валюты (CURRENCY AND CURRENCY FORMAT) представлены в соответствии с принятыми традициями и не требуют дополнительных усилий по интерпретации (см. врезку Геолокация).

После локализации приложений важно, чтобы пользователи имели возможность легко перейти к искомому локальному приложению (GLOBAL GATEWAY) и/или сменить используемый язык при взаимодействии с приложением (LANGUAGE SELECTOR).

ГЕОЛОКАЦИЯ

Для представления соответствующих форматов дат, времени, чисел и валюты по умолчанию многие приложения используют метод геолокации. Геолокация обозначает определение географического местоположения компьютера в Интернете. Зная географическое положение компьютера, и, следовательно, местонахождение его пользователя, веб-приложения могут направлять пользователей на соответствующую региональную версию приложения. Например, пользователи из Индии, введя www.google.com, могут быть направлены на www.google.co.in, а пользователи из Японии – на www.google.co.jp. Геолокация также может быть использована для построения предположений о предпочтениях пользователей относительно даты, времени, чисел и валюты. Например, пользователям, открывающим приложение в Соединенных Штатах, могут быть показаны цены в долларах США ($), а имеющим доступ к приложению из Японии цены могут быть показаны в йенах (¥).

Несмотря на то что в данной главе рассматриваются несколько важных шаблонов, интернационализация и локализация – очень обширные темы. Читателям предлагается ознакомиться с ресурсами, перечисленными в разделе справочной литературы в конце книги, особенно полезны будут дель Гальдо и др. (del Galdo et al., 1996), Эйкин (Aykin, 2004, 2006), Юнкерс (Yunkers, 2002) и Ишида (Ishida, 2008).

EXTENSIBLE DESIGN (РАСШИРЯЕМЫЙ ДИЗАЙН)

Проблема

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

Решение

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

Зачем

Расширяемый дизайн (EXTENSIBLE DESIGN) является основой интернационализации. Он подготавливает веб-приложения к локализации и устраняет необходимость в создании отдельных версий для каждой конкретной страны или языка. При наличии только одной основной версии становится легче не только поддерживать код, но также и обеспечивать согласованность между вариантами приложения на различных языках в пользовательском интерфейсе. Более того, делая вебприложения независимыми от региона и нейтральными с точки зрения культуры, расширяемый дизайн старается не использовать элементы проекта, которые могут быть неправильно истолкованы или являться оскорбительными для других культур.

Расширяемый дизайн помогает сделать веб-приложения более доступными для людей с ограниченными возможностями. Например, проектируя приложение таким образом, чтобы оно могло подгонять текст по размеру при переводе его на другие языки, что позволяет пользователям с ослабленным зрением увеличивать текст, не меняя при этом макет страницы (см. главу 11).

Как

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

Использование кодировки UTF-8 для веб-страниц

Кодировка символов означает преобразование символов (алфавита, цифр, знаков препинания и т. д.) в уникальный номер (например, А сопоставляется с 65 в формате кодирования ASCII[18]18
  ASCII означает американский стандартный код для обмена информацией и произносится «Эски».


[Закрыть]). Это помогает веббраузерам определить, какие символы необходимо отобразить на странице. Выбор способа кодировки символов, таким образом, определяет языки, которые веб-приложение может быть в состоянии поддерживать. Надлежащий отбор также важен для веб-приложений, предназначенных для поддержки пользователей, которые могут предпочесть вводить данные на других языках, кроме английского.

Оригинальный метод кодирования, ASCII, основан на английском алфавите и поддерживает 94 символа. ISO 8859-1, расширение метода кодировки ASCII, основано на многонациональном наборе символов и поддерживает 191 символ латинского алфавита. Несмотря на то что оно поддерживает английский и ряд европейских языков, оно не поддерживает наборы символов азиатских языков, таких как китайский, японский, индийский и некоторые другие. Метод кодировки UTF-8 кодирует все символы в стандарт Unicode и таким образом поддерживает символы большинства языков мира, в том числе и русский. Поэтому для максимального охвата с точки зрения поддержки языков следует использовать формат кодировки UTF-8[19]19
  UTF-8 относится к 8-битной версии формата преобразования Unicode (Unicode Transformation Format).


[Закрыть].

Указать метод кодирования для веб-страниц очень просто. Вот несколько примеров:

• XHTML:

<meta http-equiv="content-type" content="/text/html; charset=utf-8" />

• JSP (серверные страницы Java):

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>

Примечание

Семантическая структура также помогает повысить доступность. Для получения более подробной информации см. шаблон SEMANTIC MARKUP в главе 11.

Дополнительную информацию о UTF-8 и стандартах Unicode можно найти на сайтах www.utf-8.com/ и www.unicode.org/faq/utf_bom.html.

Избегайте использования презентационных тегов в разметке

Вместо использования в разметке тегов, таких как <b> и <i>, применяйте семантически эквивалентные им теги, такие как <strong> и <em>. Использование презентационных тегов затрудняет локализацию, так как в разных языках существуют различные способы выделения текста.

Например, японские авторы стараются не применять выделение полужирным шрифтом или курсивом, потому что их символы слишком сложны для подобной текстовой обработки (Ishida, 2008), вместо этого они используют для выделения wakiten (специальные маркеры) (рис. 10.1).

Рис. 10.1. Японские авторы предпочитают использовать специальные маркеры для выделения, а не выделять текст полужирным шрифтом или курсивом. Эти местные формы выделения поддерживает модуль шрифтов каскадных таблиц стилей 3 уровня (CSS3) (см. CSS3 и международные тексты на www.w3.org/International/articles/css3-text/#Slide0200)

Предоставляйте возможности увеличения объема текста

В среднем тексты на отличных от английского языках занимают на 30–40 % больше места, чем тексты на английском (рис. 10.2).

Рис. 10.2. Фраза «Добавить примечание» при переводе на некоторые европейские языки удлиняется на 50-100%

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

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

Некоторые общие способы предоставления возможности увеличения текста:

• На страницах с элементами формы, особенно там, где имеются макеты с несколькими столбцами, метки следует помещать над элементами формы. Разбухание текста, вызванное переводом, тогда можно легко исправить без ущерба для макета страницы (рис. 10.3).

(а)

(б)

Рис. 10.3. В регистрационной форме eBay метки расположены над полями для ввода текста формы (а). При переводе страницы на немецкий, макет страницы сохраняется (б)

• Не устанавливайте принудительно фиксированную ширину элементов формы или данных в таблице. Данные в элементах формы такие, как кнопки и раскрывающиеся списки могут оказаться обрезанными или отобразиться в нескольких строках, придавая странице непрофессиональный вид. Подобным образом, переведенные данные в более узких столбцах могут привести к тому, что информация из одной ячейки таблицы перейдет в соседние или отобразиться в нескольких строках, что затруднит ее чтение. Для второстепенных данных допустимо сокращение или увеличение данных путем изменения ширины окна браузера (рис. 10.4).

Рис. 10.4. По мере увеличения окна браузера Gmail показывает больше текста в строках сообщения без ущерба для макета страницы. При меньшей ширине браузера Gmail сокращает строки с данными и показывает многоточие в конце

• Позвольте графическим элементам увеличиваться по вертикали и/или по горизонтали. Разработка визуальных элементов, допускающих разбухание текста, делает возможным их повторное использование независимо от языка, на который локализовано приложение (рис. 10.5).

(а)

(б)

Рис. 10.5. Для блока «учетная запись» на Blogger.com используется рамка со скругленными углами. При переводе с английского (а) на испанский (б) требуется больше места для размещения переведенной информации. Благодаря расширяемой конструкции рамки она может легко предоставить дополнительное пространство по вертикали, не меняя макет

• Оставьте достаточно пространства для меток иконок. Поскольку иконки отображаются не всегда (см. шаблон ICONS в главе 12), их обычно дополняют текстовыми метками. Размещение меток и проектирование иконок должны выполняться с учетом увеличения текста, чтобы избежать потенциальных проблем с проектом во время локализации (рис. 10.6).

(а)

(б)

Рис. 10.6. Flickr показывает метки иконок, когда страница представлена на английском языке (a), но удаляет их, когда страница отображается на других языках (б). Вместо этого они показаны в виде подсказок. Так может быть потому, что для меток, встроенных в изображения, в каждом языке требуется разный набор картинок. Кроме того, поскольку переведенные метки занимают больше места, разместить все иконки в имеющемся пространстве может быть затруднительно

Проектируйте сообщения для размещения переменного текста

Переменный текст, также называемый соединенными строками, представляет собой текст, составленный с использованием как статических, так и переменных фрагментов и, как правило, представленный в форме предложений. Например, на рис. 10.7, а показана страница результатов поиска Google с сообщением: «Результаты 1-10 из примерно 1 620 000 000 для веб-сайта».

(а)

(б)

(в)

Рис. 10.7. Сообщение о результатах поиска на Google USA (a), Google India (б) и Google Japan (в)

Переменными текстами в этом сообщении являются количество показываемых результатов (1-10), общее количество результатов поиска (1 620 000 000) и поисковый запрос (веб-сайт). В аналогичном сообщении на Google India на рис. 10.7 представлен иной порядок переменных. Сначала показано общее количество результатов поиска (194 000), количество показываемых результатов (1-10) и поисковый запрос () (б). В Google Japan на рис. 10.7 представлен другой порядок переменных текстов, начинающийся с поискового запроса (website), затем следует общее количество результатов поиска (1 150 000 000) и количество показываемых результатов (1-10) (в).

Совет

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

Если сообщения закодированы таким образом, что фрагмент переменного текста просто вставлен в статическое сообщение, такое сообщение будет почти невозможно локализовать. Поэтому для облегчения локализации важно, чтобы код обеспечивал возможность изменения структуры предложения и порядка следования переменных. Возможным решением будет перевод всего сообщения или применение другого способа представления информации, как правило, не в форме предложений, с отделением метки и переменного текста (например, Общее количество результатов поиска: 200) (Hurst, 2007).

Исключите текст из изображений

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

(а)

(б)

(в)

Рис. 10.8. Кнопка Sign Up Now! (Зарегистрироваться сейчас!) на WordPress.com является наложением текста «Зарегистрироваться сейчас!» поверх изображения кнопки (а), что облегчает повторное использование оригинального изображения кнопки в качестве фонового изображения и использование переведенного текста для других языков (б, в)

Используйте изображения, нейтральные с точки зрения культуры

При использовании изображений и иконок следует использовать общеизвестные объекты и избегать использования этноцентрических изображений и/или таких, которые могут быть квалифицированы как оскорбительные в других культурах. Например, для представления электронной почты используйте образ конверта, а не сельских почтовых ящиков, который легко понять только жителям Соединенных Штатах. Кроме того, старайтесь не использовать жесты на иконках и изображениях, так как они могут быть восприняты как оскорбление в некоторых культурах. Например, использование знака «ок» (указательный и большой пальцы, образуют круг) считается непристойным в Бразилии[20]20
  В Турции это знак чего-то гомосексуального. В Китае это может означать «ноль» или номер три, в Японии и Корее он может относиться к форме монет и означать «деньги». Для получения дополнительной информации см. The OK Hand Gesture Around the World– Learn the Meaning of Hand Gestures (2008); www.articlesbase.com/travel-tips-articles/the-ok-hand-gesture-around-the-world-learn-the-meaningof-hand-gestures-624739.html.


[Закрыть], в то время как жест большой палец вверх (знак «все хорошо» или «хорошо» в Северной Америке) считается очень оскорбительным в Ираке и других исламских странах (Кернер, 2003).

Даже символы, обычно считающиеся «нейтральными», могут не оказаться таковыми. Символ проверки (галочка в квадратном поле) означает «правильный» или «хорошо» во многих странах. Но в Японии и Корее вместо галочки используется круг, что означает «да», а галочка тут означает «ничего хорошего» или «неверно». И наконец, старайтесь не использовать карты, которые включают спорные региональные или государственные границы (например, показывая государственные границы на картах Индии и Пакистана).

Используйте культурно значимые метафоры

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

Сайтам электронной торговли следует сменить метки и/или изображения при обслуживании клиентов в этих странах (рис. 10.9).

Рис. 10.9. Amazon использует метку «корзина» на сайте электронной торговли в Соединенном Королевстве (впрочем, значок все еще напоминает тележку для покупок)

Используйте простой язык

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

Кроме того, с осторожностью употребляйте приветствия, такие как «Добро пожаловать, <first name>» в приложениях, которые могут использоваться не американскими пользователями.

По данным культурных измерений Хофстеда (см. www.greet-hofstede.com/hofstede_united_states.shtml) североамериканская культура очень неформальна по сравнению со многими другими культурами, о чем свидетельствует ее низкий индекс степени почитания власти и принятия общественного неравенства. Напротив, в Азии неформальность будет воспринята как неуместная, а к людям, как правило, обращаются по фамилии.

Приветствия, используемые Amazon или Flickr, больше подходят для веб-приложений с международными аудиториями (рис. 10.10).

(а)

(б)

Рис. 10.10. Приветствие, используемое Flickr (а) и Amazon (б), больше подходит для международной аудитории

В целом, чтобы облегчить локализацию, избегайте следующего при разработке веб-контента (Hurst, 2007):

• слов, имеющих несколько значений;

• сокращений;

• символики;

• акронимов;

• сленга или жаргона;

• обозначений пола;

• создания новых слов;

• сокращения множественного числа или словосочетаний;

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

Связанные шаблоны проектирования

Шаблоны, описанные в главе 11 – SEMANTIC MARKUP, UNOBTRUSIVE STYLE SHEETS, UNOBTRUSIVE JAVSCRIPT и т. д. – также подходят для интернационализации, так как они помогают сделать веб-приложения легко локализующимися.