Материал: Браузерное расширение для визуализации грамматики

Браузерное расширение для визуализации грамматики

Введение

Изучение иностранных языков - важная задача в современном мире. Сегодняшняя экономика приобретает все более глобальный характер, и все более частой становится необходимость общения с людьми из других стран и культур. Знание иностранных языков открывает новые возможности карьерного роста, позволяя работать в компаниях, ведущих бизнес в нескольких странах мира, или работающих с иностранными клиентами; позволяет проще путешествовать по миру и общаться с людьми за рубежом. Многие люди так же изучают иностранный язык как хобби.

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

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

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

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

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

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

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

Анализ существующих решений

В настоящее время существует множество браузерных расширений, различным образом использующие возможности доступа к просматриваемым пользователем страницам в целях изучения иностранных языков или облегчения понимания информации, представленной на иностранном языке. Далее будет рассмотрено несколько программных продуктов, некоторые из которых так же предоставляют возможность дальнейшего изучения выбранных слов в специализированных сервисах или мобильных приложениях.[1] - одна из популярных онлайн-платформ для изучения английского языка. Одним из продуктов, предоставляемых платформой является браузерное расширение “ЛеоПереводчик”, доступное для Chrome и Safari (рис. 1). [2].

Рис 1. Основной интерфейс браузерного расширения “ЛеоПереводчик”.

Расширение предоставляет следующие возможности:

Перевод слова на странице по двойному клику на него (рис. 2).

Перевод не только слов, но и выражений, содержащих выделенное слово.

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

Рис 2. Перевод слова на странице по двойному клику.

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

Интерфейс для изучающих английский язык как иностранный

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

Рис. 3. Пример информации, предоставляемой расширением.

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

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

Рис. 4. Страница с измененным расширением содержимым.

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

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

Рис.5. Тест по значениям переведенных слов.

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

Браузерное расширение для визуализации грамматики

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

Рис.6. Визуалиация грамматики по клику на предложение на иностранном языке.

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

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

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

Выбор методов решения поставленных задач

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

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

Рис.7. Диаграмма клиент-серверной архитектуры. [36]

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

Клиенты и серверы общаются между собой с помощью модели обмена сообщениями запрос-ответ: клиент посылает серверу запрос, а сервер возвращает ответ. Как правило, сервер представляет собой некую абстракцию для клиента, т.е клиент не знает, как именно сервер обрабатывает тот или иной запрос и доставляет ответ. Клиенту необходимо только лишь знать протокол обмена сообщениями. Для формализации обмена данными, и организации слоя абстракции между сервером и клиентом сервер может реализовать API (application programming interface, интерфейс программирования приложений), представляющий собой набор методов и функций, доступных клиенту, а так же описание входных и выходных данных.

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

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

Программа-клиент

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

Программа-клиент реализует следующий функционал:

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

Отображает историю переведенных и добавленных на изучение слов.

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

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

Выбор браузера для реализации расширения

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

Internet Explorer (с 1999 г.)(с 2004 г.)(с 2009 г.)Chrome (с 2010 г.)(с 2010 г.)Edge (c 2016 г.)

Несмотря на то, что в большинстве случаев разработка расширений ведется с использованием общего стека технологий (HTML, JavaScript, CSS), синтаксис и методы разработки, архитектура, и API могут значительно различаться в различных браузерах до такой степени, что расширение, разработанное для одного браузера, фактически не работает в другом.

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

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

Таким браузером был выбран Google Chrome, являющийся самым популярным браузером на апрель 2016 г. (табл. 1) [7], что позволяет представить продукт как можно большему числу пользователей при реализации расширения для одной программы-браузера.

Таблица 1

Распределение рынка браузеров, 2016 г.