1927 год был ознаменован появлением первого механического аналогового компьютера. В 1941 г. инженер Конрад Цузе создал прототип современного ЭВМ. Инновационные технологии развивались быстро, но тогда никто не мог представить, что уже в начале XXI столетия компьютер будет стоять в каждой семье и, более того, использоваться детьми. Сейчас уже никто не удивляется этому. Современные дети чувствуют себя «как дома» на веб-страницах всемирной сети. Так же ни для кого не новость, что такой бесценный информационный ресурс как Интернет предоставляет бескрайние возможности для самостоятельного обучения.

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

В книге «Учение с увлечением» написано, что «если охоты учиться нет — учение мучительно и бессмысленно. Только увлечение создает то напряжение духовных сил, которое ведет к развитию способностей. Все знают: у кого большие способности, у того обычно есть интерес к занятиям. Но не все знают обратное правило: у кого больше интереса, у того быстрее развиваются способности. Увлечение и способности тесно связаны между собой <...> Учиться без интереса — значит подрывать основу будущей своей жизни, заранее приписываться к лагерю разочарованных и унывающих <...> Учение без увлечения стало не просто плохим учением, как было всегда, — оно теперь немыслимо. Сегодня учение с увлечением — завтра увлекательная жизнь» .

НЕ нашли? Не то? Что вы ищете?

Также возникает ряд вопросов:

А как же заинтересовать ребенка, у которого много энергии? Как сделать увлекательным обучение английскому языку?

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

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

Задачами являются:

Рассмотреть существующие веб-ресурсы; Выбрать инструментальные средства разработки; Построить архитектуру веб-ресурса; Разработать интерфейс; Написать программный код; Написать руководство пользователя; Рассмотреть преимущества и недостатки разработанного веб-ресурса.

ОБЗОР СУЩЕСТВУЮЩИХ ВЕБ-РЕСУРСОВ.

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

Первая из них - «Animal Memory Game» - находится по адресу https://www. native-english. ru/games/memory-game. Она представляет собой игру на развитие зрительной памяти и знание лексики. Задача игрока проста: необходимо найти пару соответствующих друг другу карточек, в одной из которых будет слово на английском языке, а в другой соответствующее ему изображение.

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

Из минусов данной игры можно выделить:

Отсутствие инструкции; Элементарный дизайн;

Отсутствие элементов, повышающих мотивацию и заинтересованность детей.

Рис. №1

Вторая игра называется "Игра на память - играть онлайн" и находится по адресу http://onlineguru. ru/30799/view. html. В данной игре проверяется, насколько хорошая у ребенка память. Необходимо поиграть в карты, на них изображены буквы английского алфавита. Для каждой из них имеется своя собственная пара. Ребенку необходимо переворачивать карточки одну за другой, чтобы найти для каждой из них свою пару и запоминать, где какие карточки расположены, чтобы справиться с задачей быстрее.

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

Из минусов можно выделить следующие:

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

Рис.№2

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

ОБЗОР ИСПОЛЬЗУЕМЫХ ПРОГРАММНЫХ ПРОДУКТОВ.

HTML (Hyper Text Markup Language) - "язык гипертекстовой разметки", предназначенный для создания и просмотра Web-страниц в Сети.

В HTML можно выделить ряд следующих достоинств:

Гибкость HTML позволяет осуществить интеграцию различных страниц под специфические условия; Распространенность. HTML является распространенным инструментом для создания Web-ресурсов; Демократичность. Имеет оптимальную поддержку и хорошую интерпретация у Интернет-проводников;

Постоянное развитие языка гипертекстовой разметки; Удобство в SEO-продвижении.

JavaScript – это язык программирования, придающий интерактивность Web-ресурсам.

В JavaScript можно выделить ряд следующих достоинств:

Простота использования;

Создание приложений с интеграцией HTML-кода таких как: анкеты, формы регистрации и т. п.; Возможность узнать о действиях пользователя на странице; Поддержка и интеграция с различным множеством браузеров; Возможность загрузки данных без перезагрузки страницы, устанавливать cookie и многое другое.

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

PHP обладает следующими преимуществами:

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

Также в разработке Web-ресурса использовались библиотеки Bootstrap и jQuery.

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

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

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML.

К преимуществам jQuery можно отнести:

Легкость получения к любому элементу DOM; Обращение к атрибутам и содержимому элементов DOM, и манипуляция ими; Предоставление удобного API для работы с AJAX.

СТРУКТУРА ПРИЛОЖЕНИЯ.

Приложение состоит из нескольких файлов. Первый файл - это html файл, в котором есть вся разметка web-ресурса. Второй файл - это css файл, в нем содержатся все описания стилей для ресурса. Далее есть файл библиотеки jQuery и сам файл игры, написанный на JavaScript.

В приложении есть папка images, в которой содержатся:

Одно изображение, которое имеет название turn. png. Оно выступает в качестве рубашки наших карт; От 8 карт, которые имеют название game_ с указанием цифры от 1.

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

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

Алгоритм обработки загрузки страницы следующий:

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

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

$(".card_turn").show();

После этого был написан обработчик нажатия на карту, который содержит следующий алгоритм. Сначала "переворачивается" карта.

currImg. show();

currTurn. hide();

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

if (lastElement == null)

{

lastElement = this;

return;

}

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

$(this).addClass("apply");

$(lastElement).addClass("apply");

lastElement = null;

Если были выбраны две различающиеся карты, то вызывается специальная функция языка JavaScript, которая называется SetTimeOut. Она работает в асинхронном режиме, т. е. не препятствуя нажатию на другие карты, через секунду скрывает обе карты, которые были неповторяющиеся, показывая их рубашки. Для того чтобы скрыть или показать карту для классов turn, вызывается метод hide, а для классов image вызывается метод show, тем самым происходит показ лицевой стороны. Соответственно, для класса image вызовется метод high, а для класса turn - метод show, тем самым скрывая карту, показывается только рубашка.

if (lastImg. attr("src") != currImg. attr(("src")))

{

lastElement = null;

setTimeout(function () { currImg. hide(); currTurn. show(); lastImg. hide(); lastTurn. show(); }, 1000);

return;

}

Принцип заполнения карт изображениями следующий. Имеются картинки в тегах <image>, есть возможность с помощью jQuery узнать количество элементов, которые попали под это описание, далее в цикле пока не заполнятся все 16 карт, генерируется случайная цифра от количества загруженных изображений, то есть происходит выбор одной из имеющихся изображений. После этого два раза в цикле. Первый цикл генерирует одно случайное целое число от 0 до 16, тем самым узнав порядковый номер карты. Особенностью является то, что такая реализация работает, несмотря на то, что матрица карт двумерная. После выбора случайного числа, происходит проверка: если изображение уже в этой карте, то выбирается новое случайное число. Если изображения нет, то оно загружается и вызывается такой же цикл, чтобы загрузить одинаковые карты. Таким образом, происходит случайное заполнение карт.

for (var i = 0; i < 8; i++)

{

var curr_image = $("#game_images>img:eq(" + getRandomInt(0, arr_count - 1) + ")").attr("src");

var indx;

indx = getRandomInt(0, 15);

while (cards[indx] != null);

cards[indx] = curr_image;

$(".card_img:eq(" + indx + ")").attr("src", curr_image);

indx = getRandomInt(0, 15);

while (cards[indx] != null);

cards[indx] = curr_image;

$(".card_img:eq(" + indx + ")").attr("src", curr_image);

}

Для того чтобы это все работало, сначала на кнопку "Начать игру" необходимо обнулить в пустую строку атрибут <img src=" '>, чтобы оно не ссылалось ни на какое изображение. И для всех карт убрать класс. apply, о котором написано ниже.

$(".card_img").attr("src", "").hide();

$(".card_turn").show();

$(".card").removeClass("apply");

Для оповещения пользователя о победе в игре для тех карт, которые были угаданы, добавлен один класс. apply, который служит для подсчета правильно выбранных изображений. Каждый раз происходит проверка на количество угаданных карт. После того как количество достигает 16 карт, пользователь оповещается о том, что он выиграл. Карты становятся неактивными и можно перезагрузить игру, нажав на кнопку "Начать игру" без перезагрузки страницы.

if ($(".apply").length == 16)

{

started = false;

alert("Ура! Вы выиграли!");

}

ПРОЦЕСС СОЗДАНИЯ ПРИЛОЖЕНИЯ.

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

После создания этой web-страницы, необходимо для всех используемых блоков в JavaScript коде прописать классы, так как в jQuery удобнее работать с ними. Для карт был прописан класс. card, для изображения рубашки - .card_turn, для изображения карт - .card_img.

После того как все эти классы были написаны, важной частью является написание кнопки "Начать игру". Для данной кнопки был задан id #start. Далее необходимо создание css файла, в нем созданы стили для правильного выравнивания всей html страницы, всех её элементов для оптимального и рационального дизайна web-приложения.

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

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

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

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

После того как были перевернуты все карты, пользователь оповещается, что он выиграл.

Иерархия вызовов функций

Когда запускается скрипт игры, на событие загрузки документа назначается обработчик, внутри которого только назначаются два обработчика: нажатие кнопки «Начать игру!» и нажатие на все карты.

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

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

ИНСТРУКЦИЯ ДЛЯ ПОЛЬЗОВАТЕЛЯ.

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

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

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

Для возвращения к меню сайта необходимо нажать кнопку «Домой».

ОБЗОР НЕДОСТАТКОВ И ПРЕИМУЩЕСТВ ВЕБ-САЙТА.

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

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

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

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

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

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

ЗАКЛЮЧЕНИЕ

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

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

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

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

Были реализованы следующие задачи:

Рассмотрены существующие веб-ресурсы; Выбраны инструментальные средства разработки; Построена архитектура веб-ресурса; Разработан интерфейс; Написан программный код; Написано руководство пользователя; Рассмотрены преимущества и недостатки разработанного веб-ресурса.

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

Далее были рассмотрены программные продукты и библиотеки, с помощью которых создавался собственный веб-ресурс, их плюсы и минусы: HTML, PHP, JavaScript, Bootstrap и jQuery.

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

Далее был написан программный код с использованием HTML, PHP, JavaScript, Bootstrap и jQuery.

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

После успешного выполнения всех этапов были выделены преимущества и недостатки готового продукта.

Из положительных характеристик можно выделить:

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

К сожалению, присутствует ряд недостатков:

Ограниченность лексики в приложении; Отсутствие произношения транскрипции в словаре.

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

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