РАЗРАБОТКА ОБРАЗОВАТЕЛЬНОГО ВЕБ-РЕСУРСА ДЛЯ ИЗУЧЕНИЯ АНГЛИЙСКОГО ЯЗЫКА

DEVELOPMENT OF AN EDUCATIONAL WEB RESOURCE FOR LEARNING ENGLISH

Podoprigora Vladislava Sergeevna

student, Department of Computer Science, Natural Sciences and Teaching Methods, Belgorod State National Research University,

Russia, Belgorod

Khashaeva Svetlana Vladimirovna

Scientific supervisor, Dr. sociologist. Sciences, Professor of the Department of Sociology and Organization of Work with Youth, Belgorod State National Research University,

Russia, Belgorod

АННОТАЦИЯ

В данной статье рассматриваются теоретические и практические аспекты разработки образовательного веб-ресурса для изучения английского языка. Определяются ключевые требования к современным образовательным платформам и классифицируются существующие веб-технологии (HTML, CSS, JavaScript) и системы управления контентом (CMS).

ABSTRACT

This article discusses the theoretical and practical aspects of developing an educational web resource for learning English. The key requirements for modern educational platforms are defined and the existing web technologies (HTML, CSS, JavaScript) and content management systems (CMS) are classified.

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

Keywords: educational web resource, English language learning, information and communication technologies, ICT, teaching methods.

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

Современный веб-ресурс можно рассматривать как совокупность веб-страниц, которые содержат разнообразные учебные материалы [10].

Существует несколько определений понятия «веб-ресурс». Веб-ресурс можно описать как логическую единицу в структуре Всемирной паутины (WWW), определяемую уникальным URL-адресом, и представляющую собой организованную группу HTML-страниц, которые связаны между собой гипертекстовыми ссылками [9].

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

1. По доступности сервисов:

1.1. Открытые.

1.2. Полуоткрытые.

1.3. Закрытые.

Согласно информации из пособия Е.В. Киргизовой и А.В. Рубцова, открытые сайты доступны всем, а полуоткрытые требуют регистрации для открытия всех функций сайта, закрытые сайты, например корпоративные, которые предоставляют доступ только для узкого круга лиц [7].

2. По природе содержимого:

2.1. Статистические.

2.2. Динамические.

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

3. По физическому расположению:

3.1. Внешние сайты.

3.2. Локальные сайты.

Из учебного пособия Е.В. Киргизовой и А.В. Рубцова известно, что внешние сайты имеют широкий спектр информации, тогда как локальные сайты используются для конкретных задач [7].

4. По схеме представления, её объёму и категории решаемых задач:

4.1. Интернет-представительство владельцев:

4.1.1. Интернет-магазины.

4.1.2.Промо-сайты.

4.1.3. Каталог продукции.

4.1.4. Сайты-квесты.

4.1.5.Сайт-визитка.

4.2. Информационные ресурсы:

4.2.1. Веб-сервисы.

4.2.2. Тематический портал.

4.2.3. Тематический сайт.

Из этого следует, что основная цель образовательных веб-ресурсов состоит в том, чтобы создать открытую и интерактивную среду для обучения. Поэтому современная сфера образования нуждается в непрерывном совершенствовании и корректировке методик преподавания. Троицкая Е.А. и Артюшина Л.А. подчёркивают, что «Проникновение современных информационных технологий в сферу образования позволяет педагогам качественно изменить содержание, методы и организационные формы обучения» [12].

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

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

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

1 этап − определение концепции и структуры веб-ресурса;

2 этап − выбор хостинга (выбор сервера, где будет храниться веб-ресурс);

3 этап − определить руководство веб-ресурса и процесс подготовки информационных материалов для начального наполнения;

4 этап − создание веб-ресурса;

5 этап − оценивание эффективности [3].

Для начала рассмотрим основные способы проектирования веб-ресурсов, которые существуют в настоящие время.

1. Ручная вёрстка веб-ресурсов. Применяется один или несколько языков веб-программирования, визуальные, так и текстовые редакторы.  Популярные текстовые редакторы для создания сайтов это – Notepad++, VisualStudioCode (VS Code), SublimeText, Atom [6].

Самый популярный язык программирования – HTML (HyperText Markup Language). HTML-документ содержит символьную информацию. Одна ее часть – собственно текст, т. е. данные, составляющие содержимое документа. Другая – теги. Тег определяет тип выводимого элемента HTML (например, заголовок, таблица, рисунок и т. п.).

Основными тегами структуры документа HTML являются: <html>…</html>, <head>…</head>, <body>…</body> [11].

Таблицы каскадных стилей CSS (Cascade Style Sheets) – это технология стилевого оформления веб-страниц, которая используется для представления элементов веб-страницы на экране браузера.

Таблицы каскадных стилей CSS (CascadeStyleSheets) – это технология стилевого оформления веб-страниц, регулирующая их визуальные характеристики: цветовая гамма, отступы, границы, рамки, обтекание текстовых элементов и прочее [1].

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

Код на языке JavaScript может быть применен несколькими способами: 1) непосредственно включаться в HTML-документ как содержимое элемента SCRIPT; 2) подключаться из внешнего источника, указанного в атрибуте SCR элемента SCRIPT; 3) содержаться в виде кода обработчика события элемента HTML.

Атрибуты, например, onclick, onmousemove; 4) указываться в виде псевдо-URL с протоколом доступа JavaScript: как значение атрибутов href, action, src и т. д.

Как видно, в первых двух случаях должен использоваться элемент SCRIPT, поэтому рассмотрим его подробнее. Для этого элемента обязательны начальный и конечный теги (<SCRIPT>…</SCRIPT>). Также для него допустимы следующие атрибуты: src, type, language, defer [2].

2. Создание сайта на CMS движке. Применение CMS есть один из самых известных сервисов автоматизированного создания сайта. Такие сервисы предоставляют возможность ускорения процесса и редактирования разработки веб-ресурса на основе готовых шаблонов, автоматизированной вёрстки и кодирования.
3. Площадка для создания блога или сайтом-конструктором. Популярные конструкторы: базиум, creatium, тильда, wix, flexbe.

Подводя итог анализа средств и технологий разработки веб-ресурса, мы приняли решение использовать Visual Studio Code (VS Code), текстовый редактор, который использует современные технологии, такие как HTML, CSS и JavaScript. Благодаря данному редактору мы сможем управлять, изменять и добавлять информацию в веб-ресурсе.

Как отмечает в своей работе Иванов В. «Создание качественного образовательного ресурса – это сложный процесс, требующий определенных знаний и навыков» [4].

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

Рисунок 1. Структура образовательного веб-ресурса для изучения английского языка

Далее представим основные разделы веб-ресурса с их кратким описанием:

1. «Главная страница». Это стартовая точка, с которой пользователь получает общее представление о веб ресурсе.
2. «Учебные материалы». Здесь можно найти учебные пособия.
3. «Обучающие сериалы и фильмы». В этом разделе содержатся материалы, предназначенные для развития навыков восприятия живой речи.
4. «Задания». Целью данного раздела является закрепление знаний посредством практических упражнений.
5. «Времена английского языка». Каждое время сопровождается таблицей, пояснением и примерами употребления.
6. «Глагол to be». Здесь можно найти как правильно применять глагол «быть» в разных конструкциях.
7. «Фразовые глаголы и идиомы». Подборка самых распространенных глаголов и идиом, которые направлены на обогащение словарного запаса.
8. «Темы и слова». Посетители могут выбрать подраздел интересующей темы.
9. «Теоретические основы синтаксиса». В данном разделе демонстрируется принципы построения фраз и предложений.

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

При разработке веб-ресурса мы используем такие технологии, как HTML, CSS, JavaScript. Каждая из которых позволит создать интересный и интерактивный сервер для обучения. Технология HTML позволила создать структуру веб-страницы, а также таблицы (рисунок 2), гиперссылки, объекты и многое другое.

Рисунок 2. Создание таблиц с помощью HTML

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

Рисунок 3. Анимированные блоки

Технологии JavaScript помогла нам реализовать специальный скрипт для определения правильных и неправильных ответов в разделе задания (рисунок 4).

Рисунок 4. Скрипт для подсчёта ответов

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

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

1. Достоинства:

1.1. Не требует финансовых затрат.

1.2. Подходит для небольших проектов.

1.3. Имеет базовые инструменты.

1.4. Простота в использовании.

2. Недостатки:

2.1. Ограниченные ресурсы.

2.2. «Левая» реклама на сайте.

2.3. Риск отключения сервисов.

Теперь разберём платный хостинг провайдер:

1. Плюсы:

1.1. Разнообразие тарифных планов.

1.2. Множество шаблонов для конструктора.

1.3. Нет рекламы.

1.4. Бесплатная проверка антивирусом.

2. Минусы:

2.1. Новичкам сложнее разобраться в панели управления.

2.2. Цены выше среднего.

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

Для эффективной и результативной работы на образовательном веб-ресурсе «Английский – легко и просто» было разработано методическое пособие, которое можно скачать по ссылке: https://disk.yandex.ru/i/Hb2x4Rc7xV4Xvw

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

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

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

1. Васильева И.Н. Web-технологии: учебное пособие / И. Н. Васильева, Д. Ю. Федоров. – СПб.: Изд-во СПбГЭУ, 2014 – 67 с.
2. Вахтуров В.В. JavaScript. Освой на примерах. – СПб.: БХВ-Петербург, 2007. – 400 с.
3. Введение в создание сайтов: основные этапы и типы [Электронный ресурс]. – URL: https://sky.pro/wiki/html/vvedenie-v-sozdanie-sajtov-osnovnye-etapy-i-tipy/  (дата обращения 04.05.2026).
4. Иванов В. Разработка сайтов для обучения: практические советы и инструменты. – 2023 [Электронный ресурс]. – URL: https://code-craft.ru/blog/razrabotka-saytov-dlya-obucheniya-prakticheskie-sovety-i-instrumenty-stati-na-sayte-nazvanie/ (дата обращения: 23.04.2026).
5. Иевлев П. Что такое JavaScript, что представляет собой и для чего нужен популярный язык программирования. – 2023 [Электронный ресурс]. –45 URL: https://digitalocean.ru/n/chto-takoe-javascript (дата обращения: 16.04.2026).
6. Инструменты для создания сайтов: текстовые редакторы [Электронный ресурс]. – URL: https://sky.pro/wiki/html/instrumenty-dlya-sozdaniya-sajtov-tekstovye-redaktory/ (дата обращения 01.05.2026).
7. Киргизова Е.В. Web-технологии: от теории к практике: учеб. пособие / Е.В. Киргизова, А.В. Рубцов. – Красноярск: Сибирский федеральный университет, 2018. –160 с.
8. Корнацкая Е.Ю. Актуальность web-сайта для современной школы // Актуальные исследования. – 2024. – №8 (190). – [Электронный ресурс]. – URL: https://apni.ru/article/8522-aktualnost-web-sajta-dlya-sovremennoj-shkoli (дата обращения 10.04.2026).
9. Невдяев Л.М. Телекоммуникационные технологии. Англорусский толковый словарь-справочник. – М.: Международный центр научной и технической информации, 2002. – 598 с.
10. Перевезенцева Е.С. Подход к методике обучения проектированию web-ресурсов в вузе: основные проблемы и выборы средств проектирования // Моделирование и анализ данных. М.: МГППУ, 2013. – №1. – 144-156 с.
11. Создание сайтов: HTML, CSS, PHP, MySQL (часть первая: лекции и практические задания). – Ставрополь, 2023.
12. Троицкая Е.А. Информационные технологии в учебном процессе [Электронный ресурс]: учеб. пособие / Е.А. Троицкая, Л.А. Артюшина; Владим. гос. ун-т им. А.Г. и Н.Г. Столетовых. – Изд. доп. и перераб. – Владимир: Изд-во ВлГУ, 2020–166 с.