Создание сайта на английском языке для русскоговорящих обучающихся с целью изучения грамматики английского языка

XIV Международный конкурс научно-исследовательских и творческих работ учащихся
Старт в науке

Создание сайта на английском языке для русскоговорящих обучающихся с целью изучения грамматики английского языка

Мандрыкина П.А. 1
1Муниципальная образовательная организация «Средняя общеобразовательная школа №4 г. Балабаново»
Барави Г.Д. 1
1Муниципальная образовательная организация «Средняя общеобразовательная школа №4 г. Балабаново»
Автор работы награжден дипломом победителя I степени
Текст работы размещён без изображений и формул.
Полная версия работы доступна во вкладке "Файлы работы" в формате PDF

Введение

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

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

На просторах интернета все видели кучу объявлений «Курсы английского для начинающих», «Английский для чайников» и т.п. Что же входит в подобные курсы: куча непонятных правил и список слов для зубрёжки. Давай начнём вместе учить английский, прежде всего найди себе наставника, цель, на что или кого ты будешь равняться! После я помогу тебе изучать английский машинально и расскажу, как тебе это делать самому. Так же я помогу понять тебе, что ты уже знаешь множество английских слов и просто не догадываешься об этом.

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

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

Актуальность

В этом году среди учащихся я проводила опрос, который показал, что 96% учащихся хотят выучить английский язык, но многим это не удаётся. В наше время, знание английского языка уже даёт некий авторитет и, как бы то ни было, сейчас без него никуда. Кто-то хочет учиться в престижном ВУЗе, кто-то уехать за границу, достаточно много причин по изучению английского языка, но если грамматика состоит из формул, то, во-первых, новое английское слово является точной информацией, т.е. информацией, которую нужно знать точно, на все 100%.Попробуйте «приблизительно» или «частично» произнести английское слово! Вас иностранцы не поймут. Поэтому очень важно английские слова запоминать точно. Конечно, можно зубрить, но это скучно, правда? Да и малоэффективно, после долгой зубрёжки в нашей памяти остаются примерно 11% от всей информации, но ведь есть способы, которые смогут помочь многим? Мой проект поможет людям, изучающим английский язык, запомнить большее количество слов, за меньшее количество времени.

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

В работе поставлены следующие задачи:

Изучить материал о серверной и клиентской части сайта.

Ознакомится со структурой грамматики английского языка.

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

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

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

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

Создание проекта

1.1 Изучение проблемы.

Каждый из нас задумывался об изучении иностранных языков, в частности английского. Кому-то это нравиться, кто-то же изучает его для продвижения своей цели, при этом многие сталкивались с проблемой изучения, непосредственно грамматики, занимающей много времени и сил. К тому же для каждого не секрет, что изучение иностранных языков является общественной ценностью. Довольно престижно знать иностранные языки. Но, к сожалению, многим не хватает то усидчивости, то мотивации, то вовсе правильного подношения. Дабы полностью понять проблему пришлось изучить психологию. Прочитав несколько книг, такие как «Накопительный эффект»1Даррена Харди, «Принципы»2РэйяДалио, а также трилогию книг «НИ СЫ», «НЕ НОЙ», «НЕ ТУПИ»3 Джен Синсеро и немного разобравшись в основных проблемах всех людей, я выявила, что причинами являются:

Нехватка времени на должное обучение;

Нехватка денежных средств;

Неправильный поднос информации;

Отсутствие мотивации.

Что же разберёмся в каждой причине по отдельности. «Нехватка времени», многие обосновывают незнание английского языка малым количеством свободного времени. Пора разбить подобный стереотип. Для изучения требуется около 10-15 минут в день. Да, возможно для многих это покажется обманом, но это не так. Каждый из нас хоть раз в жизни слышал выражение «потратив уйму времени и сил на изучение заумных орфографических правил ты многого добьёшься». В частности, судя по своему опыту, могу сказать, что даже если всю жизнь провести, читая книги на английском, ты не будешь знать его. Конечно, не исключены случаи,когда человек, прочитав с первого раза, всё запомнил в совершенстве, но сейчас я о случаях,когда, испробовав все методы,тебе всё равно не удаётся понять иностранный язык, в частности английский.

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

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

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

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

Многие считают, что проблема только в количестве мотивации (“у меня мало мотивации делать это”, “он не мотивирован”). На самом деле, существуют разные типы мотивации – например, внутренняя (интерес, любопытство) и внешняя (дедлайн6).

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

1.2 Основы грамматики.

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

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

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

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

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

1.3 Изучение строения сайта.

Обдумывать идею о создание и реализация проекта – это совсем разные вещи. Ведь на создание сайта много времени и сил. Но с чего же начать? И прежде всего, как перейти к разработке следует определиться с конечным продуктом. Для создания подходящего веб-ресурса я взяла курсы по языкам программирования: HTML7,CSS8,JS9, PHP10. Они являются базовыми и легко изучаемыми, но следует уточнить, что на их изучение ушло более 8 месяцев.

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

Клиентская часть – эта та, которую отображает браузер пользователю. Она производит первое впечатление и говорит о дальнейшей посещаемости.Клиент — это то, с чем взаимодействует пользователь. Так что «клиентский» код отвечает за большую часть того, что на самом деле видит пользователь. Это включает в себя:

Определение структуры веб-страницы

Настройка внешнего вида веб-страницы

Реализация механизма пользовательского взаимодействия (нажатие кнопок, ввод текста и т.д.)

К клиентской части относятся HTML, CSS,JS и т.п. Клиентская часть доступна в просмотре каждому, достаточно нажать левой кнопкой мыши на экран и перейти в раздел «исследовать элемент».

Сам по себе браузер ничего не умеет. Он умеет только отображать информацию, полученную откуда-либо. Поэтому начинает работать серверная часть сайта. Она взаимодействует с клиентом (браузером, телефоном и т.п), таким образом, чтобы пользователь клиента мог получить какую-либо полезную информацию. То есть клиент отправляет запрос серверу. Сервер его обрабатывает и отдает ответ. Клиенту этот ответ отображается. Само собой пользователь не видит серверной части сайта она скрыта в самом коде и подключенных ветках PHP. Web-браузеры связанны с web-серверами при помощи гипертекстового транспортного протокола (HTTP11). Когда вы нажимаете на ссылку на странице, запрос отправляется из вашего браузера на сервер. Запрос включает в себя URL12, определяющий затронутый ресурс, метод, определяющий требуемое действие [получить, удалить, опубликовать ресурс] и может включать дополнительную информацию, закодированную в параметрах URL (пары поле-значение, оправленные как строка запроса), как post запрос (данные, отправленные методом HTTP post) или в cookies13файлы.Веб-серверы ожидают сообщений с клиентскими запросами, обрабатывают их по прибытию и отправляютобратно пользователю при помощи ответного HTTP сообщения (HTTP-ответ). Для серверной части понадобиться PHP, web-сервер[nginx, apache], библиотеки и базы данных.

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

ApacheNetBeans— это старейшая и самая популярная программа веб-сервер, на которой работают около половины сайтов всего Интернета. Веб-сервер —это специальная программа, которая принимает http-запросы от клиента (обычно браузера) и отдаёт http-ответы – html страницы и медиа-данные. Изначально веб-сервер предназначен для отдачи статического контента (готовых страниц и картинок), но, подключая дополнительные модули к Apache, можно расширить возможности веб-сервера для работы с динамическим контентом (связь с базой данных, генерация картинок на лету). Apache – многоцелевой и универсальный веб-сервер, многие возможности которого излишни в данной конкретной задаче, при том, что богатый функционал накладывает большие требования к ресурсам системы. Поэтому существуют также «легкие» веб-сервера, узко профилированные для решения конкретных задач, а потому менее требовательные к ресурсам и более производительные (быстрые). К тому же в нём доступны различные языковые пакеты ресурсов.

Далее я перешла к изучению языков и их классификациям. Начнём с самого простого и базового языка, на котором держится вся «мировая паутина» —HTML. HTML означает язык гипертекстовой разметки. Он позволяет описать основную физическую структуру документа с помощью HTML-тэгов. Каждый HTML-тэг описывает определенный элемент документа.Это оптимальный язык, так как он подходит под любой браузер и легко читается. Абсолютно любая веб-страница является html-кодом. В наше время htmlявляется единственным языком для созданияразметки сайта.

Следующий не менее важный язык — CSS. По сути — язык, который отвечает за описание внешнего вида HTML-документа. CSS — язык таблиц стилей, который позволяет прикреплять стиль (например, шрифты и цвет) к структурированным документам (например, документам HTML и приложениям XML). Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML14, но также могут быть применены к любому виду XML15-документа, в том числе XML, SVG16 и XUL17. CSSзанимает большую часть программного текстаи за ним стоит практически всё оформление на клиентской части.

Следующий язык участвующий в создании клиентской части JS. JavaScript – это мультипарадигменный язык программирования, который обычно применяется в качестве встраиваемого инструмента для программного доступа к различным объектам приложений. С точки зрения Web-разработки, без знаний этой технологии невозможно заниматься созданием современных интерактивных сайтов. Язык JS – это то, что анимирует разметку страниц (HTML) и пользовательский функционалсайтов. С помощью этого языка реализуется возможность реакции страницы или отдельных ее элементов на действия пользователя. Сегодня JavaScript является базовым языком программирования для браузеров. Он полностью совместим с операционными системами Windows, Linux, Mac OS, а также всеми популярными мобильными платформами.

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

1.4 Проведение анкетирования.

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

Обучение представляет собой сложный процесс, а, по мнению многочисленных исследований, ключевую роль при создании комфортной среды для обучения играет именно цвет. Он способствует лучшему запоминанию материала, помогает развить заложенный в человеке потенциал. Изучив множество рекламных баннеров и дополнительные источники, оптимальным цветом для обучения стал зелёный. Зеленый цвет способствует спокойствию, повышает фокусировку и эффективность работы. Он отлично подходит для концентрации внимания, к тому же он напоминает о природе и умиротворении. При этом стоит помнить, даже при определённом цвете существует множество оттенков от кислотно-зелёного и до пастельного. Для более оптимального варианта оформления web-сайта я решила провести анкетирование среди 7-9 классов и включить там следующие вопросы:

1. Добровольно ли ты изучаешь английский язык?

2. Для тебя важна атмосфера обучения?

3. Какое оформление ты хочешь видеть?

4. Как тебе легче запоминать информацию?

5. У тебя есть предложения для создания сайта? Чтобы ты хотел там видеть?

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

1. Что для тебя означает мотивация?

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

3. Какие ты знаешь мотивационные посты, книги, видео, фильмы?

Реализация

2.1 Первый этап разработки

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

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

Начала я свой проект с покупки сервера и домена. Для начала я определилась с названием своего сайта и назвала его LoadFord. Позже подобрав свободный домен, я начала подыскивать шаблон сайта, ведь он должен быть удобен в использование для любых устройств. Посмотрев несколько онлайн-школ, такие как https://foxford.ru, http://beegeek.tilda.ws/ и https://skyeng.ru/, я начала вёрстку. Разделила я сайт на 5 страниц: домашняя, грамматическая страница, раздел обучения, проект и блог. На домашней странице я разместила хедер18, статистику проведённых опросов, мотивационный, рекламный блок, feedback19 и футер20

в <body></body> каждой страницы я поместила текств блоки <div></div> и <p></p>, использовав код HTML. Потом перешла к работе с CSS и JS. Настроив шрифты, подключила ссылки на страницы, скриптыи разместила классы. Я перешла к интерактивной части проекта, добавив кнопки, переходы на другие страницы и светотень при наведение курсором. Следующим действием было написание функций и массивов в PHP. С помощью PHPя решила сделать выплывающее окно, которое при посещении сайта будет приветствовать пользователя, при этом будет учитываться время суток.

function sayHello4User()

{

$hourDay = date('H');

if ($hourDay>= 18 && $hourDay< 24) {

$userMessage = 'Good evening!';

} elseif ($hourDay>= 5 && $hourDay< 10) {

$userMessage = 'Good morning!';

} elseif ($hourDay>= 10 && $hourDay< 18) {

$userMessage = 'Good afternoon!';

} else {

$userMessage = 'Good night!';

}

return $userMessage;

2.2 Оформление и итоги анкетирования

По итогам анкетирование 89% учащихся выбрали нежные не яркие цвета для обучения. Цвет может повысить четкость и читаемость текста на целых 40 процентов по двум причинам:

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

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

Следующий опрос среди 10 и 11 классов был направлен на выяснения значимости мотивации. 94 % из опрощенных согласились, что мотивация играет неотъемлемую роль в обучении. Эстетичное спокойное оформление – залог хорошего начало.

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

Последним делом я закинула в <head></head>, название web-страницы, ссылки на фавикон, подключенные файлы JS, CSS, PHP, bootstrap21, а также тип данных и языковой формат.

Заключение

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

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

Ссылка на итоговый продукт моего проекта, сайт - https://loadford.ru/

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

Ваулина Ю. Е., Дули Д., Подоляко О. Е.«Английский язык» – учебное пособие 2018 г.

Далио Р.– «Принципы»– зарубежная литература 2018 г.

Левин К.– «Психология подростков» зарубежная литература 1937 г.

Маслоу А.–«Теория человеческой мотивации»зарубежная литература 2011 г.

Непомнящий М. – «Компетенция Верстальщик (2020)», «Полное руководство по Python 3 - от новичка до специалиста (2020)»– учебное пособие 2020 г.

Синсеро Д.– «НИ СЫ», «НЕ НОЙ», «НЕ ТУПИ»– зарубежная литература 2019 г.

Хакимов М.– «Уровень 1. Основы программирования», «Уровень разработка приложений», «PHP. Уровень 1-4» – учебное пособие 2020 г.

Харди Д. – «Накопительный эффект»– зарубежная литература 2020 г.

«Онлайн-школа – Фоксфорд» (электронный ресурс). – Режим доступа: https://foxford.ru.

«Покупка доменов» (электронный ресурс). – Режим доступа:https://www.nic.ru/.

«Сервис персональных рекомендаций»(электронный ресурс).–Режим доступа:https://zen.yandex.ru/.

«Уроки с преподавателем в онлайн-школе Skyeng»(электронный ресурс).–Режим доступа: https://skyeng.ru/.

«BEEGEEK – Онлайн-школа» (электронный ресурс). – Режим доступа: http://beegeek.tilda.ws/.

Приложение

Опрос между учащимися 7-9 классов.

Опрос между учащимися 10 - 11 классов.

1Харди Д. – «Накопительный эффект» – зарубежная литература 2020 г.

2Далио Р. – «Принципы» – зарубежная литература 2018 г.

3Синсеро Д. – «НИ СЫ», «НЕ НОЙ», «НЕ ТУПИ» – зарубежная литература 2019 г.

4Маслоу А.– «Теория человеческой мотивации» зарубежная литература 2011 г.

5Левин К.– «Психология подростков» зарубежная литература 1937 г.

6Дедлайн — (от англ. deadline) в прямом переводе — мёртвая линия. Последний срок, предельный срок, дата или время, к которому должна быть выполнена задача.

(Источник: https://zen.yandex.ru/)

7HypertextMarkupLanguage (HTML) — язык гипертекстовой разметки.

8Cascading Style Sheets (CSS) — каскадные таблицы стилей.

9JavaScript (JS)—мультипарадигменный язык программирования.

10HypertextPreprocessor (PHP) — более ранняя версия ‘Personal Home Page tools’ предварительный обработчик гипертекста.

(Источник: https://zen.yandex.ru/)

11Hyper Text Transfer Protocol (HTTP) — протокол передачи гипертекста.

12Uniform Resource Locator(URL)—определитель местонахождения ресурса.

(Источник: https://zen.yandex.ru/)

13Cookies (с англ., печеньки) — небольшие текстовые файлы, содержащие служебную информацию.

(Источник: https://zen.yandex.ru/)

14Extensible Hypertext Markup Language (XHTML) — Расширяемый язык разметки гипертекста.

15Extensible Markup Language(XML) — Расширяемыйязык.

16Scalable Vector Graphics(SVG) — Масштабируемая векторная графика.

17Extensible User Interface Language(XUL) — Pасширенный язык пользовательского интерфейса. (Источник: https://zen.yandex.ru/)

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

19Feedback обратная связь.

20Футер – это самый нижний блок. Обычно в нем содержится информация о ресурсе, навигация и тому подобная информация.

(Источник: https://zen.yandex.ru/)

21Bootstrap – свободный набор инструментов для создания сайтов и веб-приложений.

Просмотров работы: 162