Веб-приложение для обучения английскому языку

Размещено на http://www.allbest.ru/

Веб-приложение для обучения английскому языку

Введение

web приложение обучение программирование

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

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

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

1. Аналитический обзор

1.1 Исследование вопроса

Ещё несколько лет назад английский язык воспринимался как иностранный. Но с течением времени роль английского языка возросла настолько, что теперь он считается во всём мире международным. Изучение английского языка для большинства из нас становится, чуть ли не главной проблемой в жизни. Каждый взрослый человек мечтает овладеть английским хотя бы на разговорном уровне и готов выкладывать кучу денег, чтобы овладеть этим навыком. Ниже приведены основные причины популярности английского языка:

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

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

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

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

· Большинство страниц в интернете с нужной информацией распространяется именно на английском.

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

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

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

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

Почему web-приложение? Так как современный человек в наше время должен быть мобильным и хочет получать знания в любом месте. А знания должны подаваться не в сухом виде, то оптимальный выбор- это web-приложение в виде обучающей игры. В данной дипломной работе для разработки web-приложения используется один из самых популярных на текущий момент язык программирования java script. Этот интернет язык лучше всего подходит для моего проекта.

Отношение пользователей к web-приложениям на сегодняшний день остается неоднозначным. Чем же они лучше своих десктопных коллег и в чем им уступают?

Достоинства браузерных web-приложений очевидны:

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

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

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

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

Рисунок 1.1 - Схема взаимодействия

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

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

Рисунок 1.2 - веб приложение

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

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

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

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

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

1.2 Типы обучающих программ

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

* тренировочные и контролирующие;

* наставнические;

* имитационные и моделирующие;

* развивающие игры.

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

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

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

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

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

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

1.3 Анализ аналогов и прототипов

В качестве аналогов и прототипов были рассмотрены два интернет-сайта: englishlearner и correctenglish

1. Englishlearner

Рисунок 2.1 - сайт для изучения английского языка

2. Correctenglish

Рисунок 2.1 - сайт для изучения английской грамматики

Рассмотрев поближе интернет ресурс «Englishlearner» можно выделить как плюсы, так и минусы данного портала.

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

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

2. Выбор средств разрабатываемого программного средства

2.1 Выбор языка программирования и инструментов разработки

JavaScript - это язык программирования, с помощью которого веб-страницам придается интерактивность. С его помощью создаются приложения, которые включаются в HTML-код (например, анкеты или формы регистрации, которые заполняются пользователем). Часто Javascript путают с языком программирования Java, однако общего между ними очень мало. К тому же, некоторые сравнивают Javascript с языками Python, Self, Ruby. Однако это особенный язык, который существует сам по себе.

С помощью Javascript можно изменять страницу, изменять стили элементов, удалять или добавлять теги. С его помощью можно узнать о любых манипуляциях пользователя на странице (прокрутка страницы, нажатие любой клавиши, клики мышкой, увеличение или уменьшение рабочей области экрана…) Через него можно к любому элементу HTML-кода получить доступ и делать с этим элементом множество манипуляций. Можно загружать данные не перезагружая страницу, выводить сообщения, считывать или устанавливать cookie и выполнять множество других действий.

Вся уникальность данного языка программирования заключается в том, что он поддерживается практически всеми браузерами и полностью интегрируется с ними, а все что можно сделать с его помощью - делается очень просто. Ни одна другая технология не вмещает в себе все эти преимущества вместе. К примеру, есть такие, которые не кросс-браузерны (то есть поддерживаются не всеми браузерами). Это -- VBScript, ActiveX, XUL. А есть такие, которые с браузером не интегрированы в нужной степени, это - Java, Flash, Silverlight. На сегодняшний день данная технология активно развивается, разрабатывается язык программирования Javascript 2.

HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986--1991 годах в стенах ЦЕРНа в Женеве в Швейцарии. HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов -- дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.

Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег <table> предназначен для создания в документах таблиц, но иногда используется и для оформления размещения элементов на странице. С течением времени основная идея платформонезависимости языка HTML была принесена в жертву современным потребностям в мультимедийном и графическом оформлении.

CSS (Cascading Style Sheets) - каскадные таблицы стилей. Стиль - набор параметров, задающий внешнее представление объекта. Например, пусть мы хотим, чтобы все заголовки первого уровня (теги <h1>) на одной странице имели красный цвет, размер - 24 и были написаны курсивом, а на другой странице были бы синего цвета, размера - 12. Наш заголовок - это объект, а цвет, размер и начертание - это параметры. Просто параметры нашего объекта для разных страниц разные, т.е. они отличаются стилем. Каждый элемент на странице может иметь свой стиль (параграфы, заголовки, линии, текст...). Набор стилей всех элементов называют таблицей стилей. Если для одного элемента задано несколько стилей (как в примере с заголовками), то применяется каскадирование, которое определяет приоритет того или иного стиля.

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

Система управления базой данных (СУБД) - это программное обеспечение, с помощью которого пользователи могут определять, создавать и поддерживать базу данных, а также осуществлять к ней контролируемый доступ. СУБД взаимодействует с прикладными программами пользователя и базой данных и обладает приведенными ниже возможностями:

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

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

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

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

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

* развитая организация базы данных позволяет выполнять разнообразные нерегламентированные запросы, новые приложения;

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

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

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

Теперь пару слов об инструментах веб-дизайна. Внешний вид или макет сайта создается с помощью языка разметки гипертекста HTML (HyperText Markup Language) и каскадных таблиц стилей CSS (Cascading Style Sheets). Средствами первого создается структура интернет сайта в целом и каждой его страницы в частности. Страницы связываются друг с другом гиперссылками. С помощью CSS настраивается внешний вид отдельных элементов разметки: выделенных областей, заголовков страниц и разделов, гиперссылок, списков, таблиц и т.д. и т.п. Процесс создания макета сайта с использованием HTML и CSS также называют HTML версткой или версткой интернет страниц.

Функционал сайта, чаще всего, реализуется средствами веб-программирования. Это отдельный вид программирования, с помощью которого любой интернет-ресурс можно заставить делать нечто большее, чем просто отображать отформатированные с помощью HTML данные. Веб-программирование можно условно разделить на два вида: программирование на стороне клиента и программирование на стороне сервера. Любое веб-приложение (а интернет сайт это и есть веб-приложение) условно делится на две части - клиентскую часть и серверную часть. Клиентская часть ответственна за общение с пользователем посредством графического пользовательского интерфейса. К задачам клиентской части можно отнести обработку и представление в текстовом и графическом виде данных, загруженных браузером по запросу (ответ на введенный пользователем URL или переход по гиперссылке) и контроль ввода входных параметров для различного рода операций, например, ввод параметров того же поиска или параметров авторизации/регистрации. Серверная часть несет ответственность за обработку запроса пользователя: за загрузку и передачу клиенту запрошенной интернет страницы, за формирование и передачу результатов поиска, за выполнение регистрации и передачу информации о статусе ее завершения и т.д. Из названия ясно, что клиентская часть веб-приложения выполняется на стороне клиента - под управлением интернет браузера, а серверная часть на стороне сервера - под управлением серверной операционной системы.

Наиболее известным инструментом веб-программирования на стороне клиента является язык программирования JavaScript. Именно с его помощью или с помощью библиотек, написанных на JavaScript (например, jQuery) создается большинство интерактивных сценариев, выполняемых браузером в ходе общения сайта с пользователем. Любой такой сценарий может закончиться очередным запросом на сервер, где в ход уже вступают серверные технологии веб-программирования. Наиболее известными серверными языками и технологиями веб-программирования являются PHP, ASP, JSP. Часто, в ходе исполнения серверной части веб-приложения осуществляется доступ к базе данных и прочим ресурсам сервера. Наиболее популярной серверной системой управления базами данных (СУБД) является MySQL.

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

2.2 Определение контента для проекта

Самое главное в любом сайте - это его содержимое, его информация, которую он предоставляет пользователям. Все это многообразие информации принято называть контентом. Это могут быть рисунки, видео, аудио и, конечно же, ТЕКСТ. Это слово не зря написано заглавными буквами. Во-первых, примерно 80 % всей совокупной информации сайтов - это текст. А во-вторых, именно текст - это основа продвижения сайта в интернете. Все остальное - внешние ссылки, перелинковка сайта, оптимизация доменного имени, игра с мета-тегами и HTML-кодом - это даже не шлифовка, а лишь полировка бриллианта под названием текстовый контент. И тут важнейшее примечание - уникальный текстовый контент.

Если говорить обычным языком, то уникальность - это то, что не было раньше. А, следовательно, уникальный текстовый контент - это текст, который раньше нигде не встречался. И, естественно, имеющий смысловую нагрузку. Набор букв и символов, который обезьяна наберет на клавиатуре компьютера, хоть и будет без сомнения уникальным, но контентом считаться не может. «Евгений Онегин», «Война и мир», «Преступление и наказание» и прочие литературные произведения - вот примеры бесспорного уникального контента - и по сути, и по содержанию.

Любая поисковая система - это робот, который работает по строго заданному алгоритму. Поэтому уникальность контента на сайте оценивается формально - сравниваются наборы символов, которые уже имеются на интернет-ресурсах с исследуемым текстом. Степень совпадения оценивается в процентах. Чем выше процент, тем менее уникальный текст. То есть поисковые системы оценивают уникальность текстового контента формально - только по содержанию. Именно это позволяет зарабатывать себе на хлеб с маслом тысячам копирайтеров, то есть людям, пишущим тексты для сайтов. Потому что создать что-либо действительно уникальное (и по сути, и по содержанию) очень трудно, а вот только по содержанию - задача на порядок легче. Например, фразы: «Травка зеленеет, солнышко блестит; ласточка с весною в сени к нам летит» и «Набирающая зелень трава под ярким солнцем, ласточки, вьющиеся у крыльца- весна на подходе» обе для поисковиков считаются уникальными. Но по сути, первая действительно уник, а вторая - это рерайт первой, то есть пересказ другими словами.

2.3 Сервер для работы веб-приложения

Open Server -- это портативный локальный WAMP/WNMP сервер, имеющий многофункциональную управляющую программу и большой выбор подключаемых компонентов. Представленный пакет программ не является очередной любительской сборкой собранной «на коленке», это первый полноценный профессиональный инструмент, созданный специально для веб-разработчиков с учётом их рекомендаций и пожеланий.

Для отладки скриптов в различном окружении Open Server предлагает на выбор сразу два вида HTTP серверов, различные версии PHP и СУБД модулей, а так же возможность быстрого переключения между ними.

HTTP модули: Apache 2.2.21 и Nginx 1.0.11;

СУБД модули: MySQL 5.1.61,MySQL 5.5.20 и PostgreSQL 9.1.1; PHP модули: PHP 5.2.17 (IMagick 2.2.1, Zend Optimizer 3.3.3, IonCube Loader 4.0.7, Memcache 2.2.4) и PHP 5.3.9 (IMagick 2.3.0, Xdebug 2.1.3, IonCube Loader 4.0.10, Memcache 2.2.6);

Отличный набор инструментов: HeidiSQL, Adminer, PHPMyAdmin, PHPPgAdmin. В состав пакета так же включены: Perl, FTP сервер, Sendmail и Memcached сервер. Open Server -- это единственный проект, в который включён Nginx! Причём, здесь реализовано удобное подключение правил реврайта через файлы .nxaccess в корне домена, а PHP работает в режиме True FastCGI (неубиваемый). Все компоненты взяты с официальных репозиториев и всегда обновляются до актуальных версий с каждым обновлением пакета.

Прежде всего необходимо отметить, что Open Server -- это целиком и полностью портативный сервер. Никаких системных сервисов, куч мусора в реестре и system32. Вы можете везде таскать его с собой на флешке (желательно на скоростной), запускать на рабочей/домашней машине без опаски что у вас что-то не заработает. В случае отсутствия на компьютере нужных системных компонентов Open Server установит их сам, достаточно выбрать в меню [Инструменты -- Первый запуск] если сервер запускается на компьютере впервые. Нет необходимости описывать основные возможности программы, поскольку в большинстве своём они стандартны для такого рода софта. Самой собой что с помощью Open Server можно запустить/остановить сервер или открыть нужный домен. Гораздо интереснее вам будет узнать о специфических «фичах», которые делают Open Server особенным, действительно особенным: -- подробный просмотр логов всех компонентов в реальном времени; -- выбор HTTP, СУБД и PHP модулей в любом сочетании; -- поддержка SSL и кириллических доменов из коробки; -- поддержка алиасов или по другому доменных указателей, а так же удобная форма их настройки (привет любителям мультисайтинга в Drupal!); -- создание локального поддомена без потери видимости основного домена в сети интернет; -- доступ к доменам (в один клик) и быстрый доступ к шаблонам конфигурации модулей; -- мультиязычный интерфейс (Русский, Украинский, Белорусский, Английский); Программа постоянно совершенствуется, все адекватные просьбы со стороны пользователей Open Server детально изучаются и большинство из них реализуется!

2.4 вывод по разделу

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

3. Проектирование и разработка программного средства

3.1 Назначение и возможности разработанного приложения

Назначение разрабатываемого приложения состоит в интересном изучении английского языка в виде игры, в которой есть уровни сложности, а так-же, режим свободного изучения. Программа разработана в соответствии с MVS-model в связи с этим функционал может дополняться или изменяться, что не сильно повлияет на работоспособность всей программы. А так же было проанализировано какой необходимый функционал необходим для наилучшего запоминания полученной информации. 3.2 Основные функции и возможности, реализуемые приложением

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

При попадании на страницу приложения есть несколько функциональных кнопок «Учить слова», «упражнения» и «описание».

Учить слова

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



Рисунок 3.2.1 - Выбор темы

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

Рисунок 3.2.2 - Слова для изучения

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

Упражнения

На странице упражнения рассматриваются те-же темы что и на странице изучения слов. При выборе любой темы мы попадаем на страницу с выбором уровня сложности.

Рисунок 3.2.3 - Выбор уровня сложности

В приложении два уровня сложности - начальный и продвинутый. Если выбирать начальный уровень, то тем самым начинается упражнение.

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

Рисунок 3.2.4 - Подсказка

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

Рисунок 3.2.5 - Схема тестовой базы данных

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

3.3 Схема сценария работы приложения и взаимодействия его компонент

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

Изначально сложность веб-приложений в основном регулировалась со стороны сервера за счет разделения приложения на отдельные страницы, что требовало от пользователя соответствующим образом переходить в браузере с одной страницы на другую. С внедрением AJAX и связанных технологий разработчики смогли отказаться от потребности делать «переходы» между разными страницами веб-приложения. Для типичных сценариев вроде чтения почты или новостей ожидания пользователей изменились. К примеру, после логина в почту, вы можете «пользоваться почтовым приложением» с одного и того же адреса (URL) и находится на этой странице целый день (т.н. Single-Page Applications, SPA). Логика клиентских веб-приложений в таких ситуациях существенно усложняется, иногда она даже становится сложнее, чем на серверной стороне. Возможным разрешением данной сложности может являться дальнейшее разделение на компоненты и изоляция логики внутри одной страницы или документа.

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

Так как веб-компоненты должны связать воедино HTML, CSS и JavaScript, необходимо учитывать существующие модели изоляции, присущие каждой из технологий, так как они влияют на сценарии и целостность веб-компонентов. Эти независимые модели изоляции включают:

-Изоляция стилей в CSS

-JavaScript и области видимости (замыкания)

-Изоляция глобального объекта

-Инкапсуляция

2. Описание средств разработки приложения .1 Язык программирования JavaScript Весь JavaScript-код, который включен на страницу, имеет доступ к одному и тому же глобальному объекту. Как и другие языки программирования, JavaScript имеет области видимости, которые предоставляют некоторый уровень «приватности» для кода функции. Эти лексические области видимости используются для изоляции переменных и функций от остального глобального окружения. «Модульный шаблон» в JavaScript, популярный сегодня (использующий лексические области видимости), эволюционировал из потребности множества фреймворков на JavaScript «сосуществовать» в едином глобальном окружении без того, чтобы «наступать на пятки» друг другу (завися при этом от порядка загрузки).

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

Вклад, который лексические области видимости JavaScript вносят в реализацию веб-компонента, соответствует требованию иметь способ «закрытия» компонента так, что ее содержимое может быть разумно приватным.

3.4 Изоляция глобального объекта

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

Есть ряд соображений, которые нужно учитывать при проектировании компонентов с поддержкой изоляции глобального объекта - особенно если изоляция будет подразумевать защищенные границы (подробнее ниже). На сегодня мы ожидаем, что изолированные компоненты не будут полностью доступны до тех пор, пока базовый набор спецификаций веб-компонентов не будет зафиксирован (то есть, это «отложено до следующей версии»). Однако, если мы потратим некоторое время на исследование того, как изолированные компоненты могут выглядеть, это может направить в правильное русло текущую работу. На некоторые предложения действительно стоит обратить внимание.

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

3. Структура базы данных приложения

Реализация приложения

|JavaScript

Приложение разработано по концепции (MVS Model-View-Controller) что было применено в данной дипломной работе.

3.5 Контроллер (Controller)

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

В данной дипломной работе работу контроллера выполняет файл VBGameController.js в нем описаны действия и выполняется координация всеми функциями нашего web-приложения.

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

Рисунок 3.4.1 - Обработчики

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

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

Рисунок 3.4.2 - Обертка оброботчика

3.5.1 Модель (Model)

Модель - это данные и правила, которые используются для работы с данными, которые представляют концепцию управления приложением. В любом приложении вся структура моделируется как данные, которые обрабатываются определённым образом. Что такое пользователь для приложения -- сообщение или книга? Только данные, которые должны быть обработаны в соответствии с правилами (дата не может указывать в будущее, e-mail должен быть в определённом формате, имя не может быть длиннее Х символов, и так далее).

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

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

В данной дипломной работе файл модели называется VGame.js и это самый важный файл, который описывает логику игры. Можно назвать его движок игры. И как основной файл он начинается с объявления переменных. После происходит инициализация файлов контроллера и вида, после чего необходимо выяснить какая сложность необходима игроку, а затем и запустить ее. Рис()

Рисунок 3.5.1.1 - Выбор сложности игры

Для того, чтобы сменить игру требуется знать сложность на которой находится игрок в данный момент. Статус игры, идет она или закончилась. И после этого переключить игрока в режим репетиции и для этого есть модель self.changeLevel. Так же необходимо реализовать метод повторения не правильно выбранных ответов. Для этого предусмотрена модель запоминания слов, которые были отвечены неверно и добавление их в режим репетиции данного игрока. Затем реализован метод проверки ответов пользователя и заполнение прогрессбара в зависимости от поведения пользователя. Реализован данный метод конструкцией switch, она представляет собой способ сравнить выражения сразу с несколькими вариантами. Рис()



Рисунок 3.5.1.2 - Прогрессбар

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

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



Рисунок 3.5.1.3 - Добавление неверных ответов в массив

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

3.5.2 Вид (View)

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

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

За вид отвечает файл VBGameViewe.js. В этом файле находится все, что пользователь видит на экране, двигающиеся элементы, эффекты и прочее.

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



Рисунок 3.5.2.1 - Вывод уровня сложности

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

3.6 База данных

База данных MySQL -- это самая популярная в мире база данных с открытым кодом. Благодаря своей проверенной производительности, надежности и простоте использования база данных MySQL наиболее часто используется для веб-приложений на таких ресурсах, как Facebook, Twitter, YouTube и все пять из пяти лучших веб-сайтов*. Кроме того, ее особенно часто выбирают в качестве встроенной базы данных, распространяемой тысячами поставщиков программного обеспечения и производителей оборудования.

В данном дипломном проекте используется именно база данных корпорации Oracle, ее выбор был обусловлен популярностью базы данных, а так же интеграцией её во все популярные серверы web-приложений. База данных используется для хранения английских слов, их перевода, транскрипции, и наименования темы. Рис()



Рисунок 3.6.1 - База данных

В роли субд используется phpMyAdmin так как это простой доступ и управление базой данных и поставляется вместе с openserver.

4.Руководство пользователя

4.1Раздел «Учить слова»

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

4.2 Раздел «Упражнения»

4.2.1 Начальный уровень

В режиме дипломной работы «упражнение» в первую очередь, необходимо выбрать уровень сложности. Начальный уровень -это уровень рекомендуемый для первого прохождения. Продвинутый уровень - рекомендуемый для лучшего запоминания материала. При выборе «начального уровня» появляется статусбар, проговаривается слово на английском языке, есть 6 вариантов ответов на русском языке и две кнопки, одна - это повтор слова, и вторая это выбор подсказки. При верном ответе добавляется 3 очка, при каждом неверном ответе отнимается очко, при выборе подсказки снимается два очка. После окончания режима начального уровня и отображения статистики можно закончит урок, выбрать следующий урок или выполнить работу над ошибками.

4.2.2 Продвинутый уровень

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

Размещено на Allbest.ru