ОСОБЕННОСТИ РАЗРАБОТКИ ВЕБ-ПРИЛОЖЕНИЙ ДЛЯ ИНФОРМАЦИОННЫХ КИОСКОВ

DEVELOPMENT FEATURES OF WEB APPLICATION FOR INTERACTIVE KIOSK

Nikolai Kovtunov

graduate student, Southern Federal University,

Russia, Taganrog

Информационный киоск (информационный терминал, инфокиоск, инфомат) представляет собой автоматизированный программно-аппаратный комплекс, который предназначен для предоставления справочной информации. Ключевым достоинством данного устройства является его автономность, т.е. он способен предоставлять пользователю необходимую информацию без привлечения обслуживающего персонала 24 часа в сутки 7 дней в неделю. [1] Благодаря этому информационные киоски получили широкое применение. Их можно встретить во многих учреждениях, где предоставляется какая-либо справочная информация.

Была поставлена задача разработать приложение, рассказывающее об истории газодобывающего предприятия. При анализе работы было принято решение разрабатывать веб-приложение, которое представляет собой клиент-серверную систему. В такой системе клиентом является браузер, а в роли сервера выступает веб-сервер. К достоинствам такого типа приложений относится кроссплатформенность, т.е. независимость продукта от типа операционной системы. Для работы с веб-приложением отсутствует потребность в каком-то специфическом программном обеспечении. Необходим только браузер. [2]

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

• дизайн;
• безопасность;
• запуск приложения.

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

Особое внимание стоит уделить высоким инфокиоскам с большой диагональю экрана. Во-первых, необходимо помнить о расстоянии между терминалом и пользователем. Оно не будет превышать расстояния вытянутой руки. А значит, фото- и видеоизображение не должно открываться на весь экран (иначе пользователю придется отходить от устройства для комфортного просмотра). Также не стоит располагать элементы управления слишком высоко (пользователь может не дотянуться) или слишком низко (пользователь может не попадать на элемент управления из-за малого значения угла зрения). [4]

Не меньшего внимания требует вопрос безопасности. Пользователь должен иметь возможность работать только с разрабатываемой системой. При этом к другому функционалу терминала доступа быть не должно, т.к. в этом случае действия пользователя непредсказуемы (например, он может выключить устройство). Для этого браузер с системой должен быть открыт в полноэкранном режиме. Можно переводить браузер в полноэкранный режим при каждом запуске. Однако, это не совсем удобно. Намного лучше открывать браузер в режиме информационного киоска. Для этого необходимо в свойствах ярлыка браузера прописать соответствующий ключ и адрес веб-приложения. [7] А если терминал используется только для разрабатываемого приложения, то для повышения скорости запуска системы можно добавить браузер с режимом информационного киоска в автозапуск. [8]

На следующем этапе работы над безопасностью системы необходимо не допустить возможность выхода из полноэкранного режима. Несмотря на отсутствие компьютерной мыши (и соответственно возможности вызова контекстного меню за счет клика ее правой кнопки), в информационных киосках контекстное меню может быть вызвано касанием с удержанием (долгий тап). Поэтому необходимо отключить вызов контекстного меню. Это можно сделать установкой соответствующего расширения для браузера [8] или написанием соответствующего скрипка в веб-приложении [9].

При работе над безопасностью разрабатываемого продукта необходимо особое внимание уделить клавиатуре. В большинстве информационных терминалов используется экранная клавиатура. В этом случае нельзя оставлять стандартную, потому что она предоставляет слишком широкие возможности пользователю. А это в свою очередь угрожает безопасности системы. [5] Поэтому необходимо использовать готовый плагин экранной клавиатуры [10] или разрабатывать свой. Содержание каждой отдельной клавиатуры будет зависеть от ее цели. Поэтому сложно сказать, что в ней должно быть. Однако однозначно можно сказать, каких клавиш в ней быть не должно:

• Alt;
• Win;
• Ctrl;
• Shift;
• Esc. [6]

К вопросам безопасности относится использование ссылок на сторонние приложения. В разрабатываемой системе таких ссылок быть не должно. Это связано с отсутствием навигации для перехода между вкладками из-за полноэкранного режима. Т.е. при переходе на сторонний ресурс вернуться обратно пользователю уже не удастся. Если у пользователя может возникнуть потребность в переходе на сторонний ресурс, можно предложить ему воспользоваться своим устройством (телефоном или планшетом), отобразив в системе адрес ресурса или QR-код.

По причине угрозы безопасности также стоит избегать ссылок на документы. Это связано с тем, что некоторые документы, которые браузер может отобразить (например, с расширением .pdf), будут открыты в другой вкладке браузера. А из-за полноэкранного режима пользователь не сможет самостоятельно вернуться в веб-приложение. Остальные документы, которые браузер не может открыть, будет предложено скачать. Для этого на экране терминала будет отображена панель задач и окно сохранения. Дальнейшие действия пользователя непредсказуемы, а значит, угрожают безопасности системы.

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

Браузеры в информационных киосках имеют дополнительные возможности. К ним относится функция pinch-to-zoom (возможность масштабирования контента на экране, разводя и сводя два пальца). [11] Однако на практике эта возможность не только не востребована, но и неудобна. Ее можно отключить, добавив соответствующий ключ в свойствах ярлыка браузера. [12]

Другой дополнительной возможностью, которая на практике неудобна, является перемещение по истории браузера жестом «Свайп вправо». Ее также можно отключить, добавив соответствующий ключ в свойствах ярлыка браузера. [12]

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

Список литературы:

1. Информационный киоск [Электронный ресурс]. – Режим доступа:  https://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D1%8B%D0%B9_%D0%BA%D0%B8%D0%BE%D1%81%D0%BA (дата обращения: 19.08.2018).
2. Ковтунов Н.А., Компаниец В.С. АВТОМАТИЗАЦИЯ ПРОЦЕССА ПРОВЕДЕНИЯ СОБЕСЕДОВАНИЯ НА ПРЕДПРИЯТИИ // Технические науки - от теории к практике: сб. ст. по матер. LXIII междунар. науч.-практ. конф. № 10(58). – Новосибирск: СибАК, 2016. – С. 54-59.
3. Дизайн и программное обеспечение для интерактивных информационных киосков [Электронный ресурс]. – Режим доступа: http://mittec.su/multi/touch_screen (дата обращения: 19.08.2018).
4. Угол зрения [Электронный ресурс]. – Режим доступа: http://www.medical-enc.ru/glaznye-bolezni/ugol-zreniya.shtml (дата обращения: 19.08.2018).
5. Немного о безопасности терминалов в МФЦ [Электронный ресурс]. – Режим доступа: https://habrahabr.ru/post/338012/ (дата обращения: 19.08.2018).
6. Правильная клавиатура для информационных терминалов [Электронный ресурс]. – Режим доступа:  https://habrahabr.ru/post/141712/ (дата обращения: 19.08.2018).
7. Стойка в торговом зале (инфо-киоск) [Электронный ресурс]. – Режим доступа: http://kuzevich.ru/index.php/1c/itemlist/tag/%D0%B8%D0%BD%D1%84%D0%BE%D0%BA%D0%B8%D0%BE%D1%81%D0%BA (дата обращения: 19.08.2018).
8. Настройка информационного киоска [Электронный ресурс]. – Режим доступа: http://adm-info.ru/pc-oborudovanie/all-materials-of-blog/pc-category/oborudovanie-category/info-kiosk-settings (дата обращения: 19.08.2018).
9. Запрет правого клика на страничке [Электронный ресурс]. – Режим доступа: https://ruseller.com/lessons.php?rub=29&id=201 (дата обращения: 19.08.2018).
10. Fullscreen Virtual Keyboard Plugin For jQuery [Электронный ресурс]. – Режим доступа: https://www.jqueryscript.net/other/Virtual-Keyboard-jQuery-MOK.html (дата обращения: 19.08.2018).
11. The Fat Thumb — однопальцевая замена pinch-to-zoom [Электронный ресурс]. – Режим доступа: https://habrahabr.ru/post/147303/ (дата обращения: 19.08.2018).
12. Отключить масштабирование зума Chrome для использования в киоске [Электронный ресурс]. – Режим доступа: http://qaru.site/questions/210605/disable-chrome-pinch-zoom-for-use-in-kiosk (дата обращения: 19.08.2018).