ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«БЕЛГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ НАЦИОНАЛЬНЫЙ
ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ»
( Н И У
« Б е л Г У » )
ФАКУЛЬТЕТ МАТЕМАТИКИ И ЕСТЕСТВЕННОНАУЧНОГО
ОБРАЗОВАНИЯ
КАФЕДРА ИНФОРМАТИКИ, ЕСТЕСТВЕННОНАУЧНЫХ ДИСЦИПЛИН И
МЕТОДИК ПРЕПОДАВАНИЯ
РАЗРАБОТКА ЭЛЕКТРОННОГО РЕСУРСА ДЛЯ РАБОТЫ УЧИТЕЛЯ
АНГЛИЙСКОГО ЯЗЫКА
Выпускная квалификационная работа
обучающегося по направлению подготовки 44.03.05 Информатика и
иностранный язык (английский)
очной формы обучения, группы 02041205
Роговой Марины Федоровны
Научный руководитель
к.т.н., доцент
Красовская Л.В.
БЕЛГОРОД 2017
1
СОДЕРЖАНИЕ
ВВЕДЕНИЕ.................................................................................................... 3
1 Электронный образовательный ресурс: специфика, виды, значение ... 5
1.1 Электронный ресурс, как эффективное средство обучения ................... 5
1.2 Классификация электронных образовательных ресурсов ....................... 9
1.3 Роль электронного ресурса в работе учителя и образовательного
учреждения ..........................................................................................................................................16
2 . Особенности проектирования, структурирования и информационного
наполнения электронного ресурса учителя ........................................................ 21
2.1 Правила проектирования электронного ресурса учителя ......................21
2.2 Структура и содержание разрабатываемого электронного ресурса 24
3 Разработка электронного ресурса .......................................................... 29
3.1 Обоснование выбора средств разработки web-сайта ...............................29
3.2 Структура, содержание, наполнение.................................................................36
3.2 Элементы оформления: общее, обратная связь, карта сайта,
тестирование, регистрация на хостинге ...............................................................................50
ЗАКЛЮЧЕНИЕ ........................................................................................... 60
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ ................................. 63
ПРИЛОЖЕНИЕ А ....................................................................................... 67
ПРИЛОЖЕНИЕ Б........................................................................................ 68
2
ВВЕДЕНИЕ
Электронные образовательные ресурсы являются одной из самых
ценных составляющих образовательной информационной среды. Именно в
образовательных ресурсах концентрируется содержательная составляющая
учебного процесса. Значение электронных ресурсов в учебном процессе
существенно большее, чем у обычных бумажных пособий, поскольку новые
образовательные
технологии
предполагают
сокращение
персональных
контактов преподавателя и учащегося с увеличением доли самостоятельной
подготовки. Поэтому электронные учебные материалы принимают на себя
поддержку части тех компонент обучения, которые в стандартном учебном
процессе обеспечиваются очным общением преподавателя и ученика.
Интернет стал важной частью нашей личной жизни и вошёл в сферу
образования в качестве проводника учительского опыта, лучших работ, идей
и достижений. Сегодня передовые учителя создают персональные сайты и
блоги, особенно учителя иностранных языков. Именно такие учителя
становятся лучшими в своих школах и получают профессиональное
признание. С помощью электронного ресурса они всегда имеют возможность
делиться своим опытом работы с сообществом российских и зарубежных
коллег, со своими учениками и их родителями [1].
Электронный образовательный ресурс имеет функцию хранилища
методических материалов, полезных ссылок и собственных наработок. В
настоящее время Интернет даёт возможность пользоваться различными
материалами, взаимодействовать с профессиональными сообществами,
проводить
дистанционные
мастер-классы,
вебинары,
конкурсы
педагогического мастерства и принимать в них участие [2]. Кроме того, сайт
учителя английского языка может использоваться как периодическое
издание, дающее возможность педагогу и его учащимся публиковать свои
работы.
3
Цель исследования заключается в разработке электронного ресурса для
работы учителя английского языка. Достижение поставленной цели
предполагает решение ряда задач, связанных с:
1. Установлением области использования ЭОР
2. Определением наиболее приемлемой структуры ЭОР
3. Определением наиболее оптимальных средств разработки ЭОР
4. Внедрение ЭОР и применения в школьном учебном процессе;
Объектом
исследования
является
электронный
образовательный
ресурс.
Предметом исследования выступает деятельность учителя английского
языка.
Работа состоит из 66 страниц и трех глав. Первая глава содержит
информацию об электронных образовательных ресурсах, их спецификах,
видах, классификации. Вторая глава содержит материалы, связанные с
деятельностью учителя и содержанием электронного образовательного
ресурса учителя. Третья глава состоит из описания разработки электронного
ресурса учителя, его структуры, методах и способах разработки. Список
использованных источников включает 35 наименований.
4
1 Электронный образовательный ресурс: специфика, виды,
значение
1.1 Электронный ресурс, как эффективное средство обучения
В самом общем случае понятие электронного ресурса можно
определить
как
любую
информацию,
для
воспроизведения
которой
необходимы электронные устройства. При таком определении понятия
электронного ресурса нет указаний ни на тип воспроизводимой информации,
ни на ее содержание. Очевидно, что не любая информация предназначена для
образования и может использоваться в учебном процессе. Информация для
образовательных целей, как правило, характеризуется последовательностью
и
системностью изложения
материала, ориентацией на конкретную
аудиторию, нацеленностью на получение заранее заданного результата и
рядом других отличительных признаков [3]. Поэтому особый интерес
представляют электронные ресурсы, которые могут быть использованы в
образовании – электронные образовательные ресурсы (ЭОР).
В частности
ЭОР – это совокупность программных средств,
информационных, технических, нормативных и методических материалов,
полнотекстовых электронных изданий, включая аудио и видеоматериалы,
иллюстративные
материалы
и
каталоги
электронных
библиотек,
размещенные на компьютерных носителях и/или в сети Интернет [4]. В
самом общем случае к ЭОР можно отнести учебные видеофильмы и
звукозаписи,
для
воспроизведения
которых
достаточно
бытового
магнитофона или CD-плейера, однако далее основное внимание будет
уделено именно ресурсам, предназначенным для воспроизведения на
компьютерах или совместимых с ними устройствах – электронных книгах
или ридерах. Устройства, называемые электронными книгами (ридерами)
представляют
собой
разновидность
планшетных
компьютеров,
предназначенных для отображения текстовой информации, представленной в
5
электронном виде и характеризующихся ограниченной функциональностью
(см. рисунок 1.1), поэтому, если не оговаривается иное, мы будем
предполагать
что
ЭОР
предназначаются
для
воспроизведения
на
полнофункциональных персональных компьютерах [5].
Рисунок 1.1 – Ридеры
Именно такие ЭОР являются наиболее современными и эффективными
при их использовании в образовании и их часто называют цифровыми
образовательными ресурсами (ЦОР), поскольку в компьютерах используются
цифровые
способы
записи,
хранения
и
воспроизведения
различной
информации. ЦОР представляют собой фотографии, видеофрагменты,
модели объектов и явлений, картографические материалы, звукозаписи,
текстовые документы и иные материалы, которые могут быть использованы
для организации и проведения учебного процесса. С другой стороны,
цифровые
форматы
сейчас
используются
и
для
записи
аудио/видеоинформации на компакт-диски (CD) [6]. Вероятно по этой
причине термин ЦОР хоть и используется специалистами не нашел
отражения
в
нормативных
документах.
Например,
согласно
межгосударственному стандарту ГОСТ 7.23-2001, лучше использовать
общий термин «электронные» и аббревиатуру «ЭОР».
6
По сложности исполнения ЭОР можно разделить на четыре основных
типа:
Первый, простые ЭОР - текстографические. Они отличаются от книг в
основном
формой
предъявления
текстов
и
иллюстраций:
материал
представляется на экране компьютера, а не на бумаге. При этом
последовательность материала на экране задается автором как в книге.
Никаких иных существенных отличий от полиграфического варианта такого
текста нет. Данный тип ЭОР легко распечатать, т.е. перенести на бумагу,
превратив его в традиционную форму учебного материала[7].
Второй, гипертекстовые ЭОР. Существенным отличием данного типа
является наличие ссылок на логически связанный текст или фрагменты
текста. В данном случае навигация по тексту является нелинейной, т.е.
просматривать
фрагменты
текста
можно
в
произвольном
порядке,
определяемом логической связью и собственным желанием пользователя. В
ЭОР этого типа термины или иные важные понятия и факты могут являться
ссылками, после перехода к которым можно получить уточняющую
информацию в небольшом дополнительном окне или мгновенно сменить
содержимое экрана при указании так называемого ключевого слова (либо
словосочетания).
Третий, ЭОР представляющие собой видео или звуковой фрагмент.
Формальные отличия от книги здесь очевидны: ни кино, ни анимация
(мультфильм), ни звук в полиграфическом издании невозможны. Однако по
отношению к обучаемому этот тип ЭОР не отличается ничем от аудио/видео
продуктов, воспроизводимых на бытовом CD-плеере.
Четвертый, мультимедиа ЭОР. Они имеют наиболее существенные,
принципиальные отличия от книги. Это самые мощные и интересные для
образования продукты, включающие в себя тексты, иллюстрации, видео, звук
и другие цифровые возможности [8].
Последний тип ЭОР является наиболее зрелищным и эффективным в
обучении. Английское слово multimedia в переводе означает «много способов
7
(сред)».
Мультимедиа
ЭОР
реализуют
возможность
одновременного
воспроизведения на экране компьютера текста, рисунков, анимации, звука и
видеофрагментов в некоторой взаимосвязи, подчиненной определенной
дидактической идее, и изменение одного из них вызывает соответствующие
изменения других.
Средства
мультимедиа
обеспечивают
возможность
проведения
практических работ на различном оборудовании и изучать как явления
природы, так и работу приборов и механизмов без оснащения учебных
заведений дорогостоящей аппаратурой [9]. Ресурсы для проведения
практических работ, как правило, представляют обучающимся схему
лабораторной установки или прибора и его панель управления. Производя
заданные методичкой действия, обучающийся снимает результаты для
последующей их обработки в отчете. Примеры некоторых ЭОР рамках
программ среднего и высшего образования представлены на рисунке 1.2.
Рисунок 1.2 - ЭОР для проведения практических работ
8
Таким образом, электронные ресурсы сегодня являются носителями
знаний и информации в рамках информационно-образовательной среды
учебного заведения, региона, ассоциации учебных заведений или более
глобальных образовательных объединений.
1.2 Классификация электронных образовательных ресурсов
Существует много различных подходов к классификации ЭОР.
Универсальную классификацию даже предметных образовательных областей
для ЭОР определить однозначно почти невозможно. Это связано, в первую
очередь, с многовариативностью тематических направлений, охватываемых
различными ЭОР [10].
Прежде
чем
переходить
к
непосредственной
классификации,
необходимо выделить основные параметры, характеризующие ЭОР, которые
в последствие могли бы лечь в основу критериев классификации. С точки
зрения организации учебного процесса основными подобными параметрами
являются :
тип электронного издания (ресурса);
предметная образовательная область;
рекомендуемый уровень образования;
рекомендуемая форма образовательного процесса;
специфика аудитории.
С одной стороны, по выполняемым функциям ЭОР можно отнести к
традиционным учебным изданиям и, соответственно, использовать принципы
классификации, используемые для традиционных учебников. С другой
стороны, они принадлежат к категории электронных изданий и к ним могут
быть применены принципы классификации электронных изданий. С третьей,
многие ЭОР представляют собой программные продукты [11]. В силу
9
многообразия ЭОР на практике удобно проводить классификацию по
конкретному определяющему признаку, а именно:
по типу;
по функциональному признаку, определяющему значение и место
ЭОР в учебном процессе;
по организации текста ресурса;
по характеру представляемой информации;
по форме изложения;
по целевому назначению;
по наличию печатного эквивалента;
по формату (природе) основной информации;
по технологии распространения;
по характеру взаимодействия с пользователем.
По типу можно выделить следующие основные группы ЭОР:
компьютерный учебник (учебное пособие, текст лекций и т.д.);
электронный справочник;
компьютерный задачник;
компьютерный лабораторный практикум (модели, тренажеры);
компьютерная тестирующая система [12].
Компьютерный учебник предназначен для самостоятельного изучения
теоретического материала и может быть текстографическим, гипертекстовым
или мультимедийным. Он содержит структурированный учебный материал,
предоставляемый
обучаемому.
Гипертекстовая
структура
позволяет
обучающемуся определить оптимальную траекторию изучения материала и
удобный темп работы, соответствующий особенностям его восприятия.
Электронный справочник позволяет обучаемому в любое время
получить необходимую справочную информацию. В справочник включается
информация, как дублирующая, так и дополняющая материал учебника.
Обычно электронный справочник представляет собой электронный список
терминов, или используемых в курсе слов изучаемого иностранного языка,
10
или имен цитируемых авторов и т.д. Каждая единица списка гиперактивна –
ее активизация позволяет обратиться к гиперссылке, содержащей толкование
термина, перевод и грамматические характеристики иностранного слова,
энциклопедическое описание и т.д. Обычно в электронный справочник
можно войти из любого раздела курса [13].
Компьютерный задачник позволяет отработать приемы решения
типовых задач, позволяющих наглядно связать теоретические знания с
конкретными проблемами, на решение которых они могут быть направлены.
Компьютерные практикумы, модели, конструкторы и тренажеры
позволяют закрепить знания и получить навыки их практического
применения.
Компьютерные
модели,
как
правило,
не
являются
универсальными. Каждая из них рассчитана на моделирование достаточно
узкого круга явлений. Основанные на математических моделях (которые
содержат в себе управляющие параметры), компьютерные модели могут
быть использованы не только для демонстрации трудно воспроизводимых в
учебной обстановке явлений, но и для выяснения (в диалоговом режиме)
влияния тех или иных параметров на изучаемые процессы и явления. Это
позволяет использовать их в качестве имитаторов лабораторных установок, а
также для отработки навыков управления моделируемыми процессами.
Компьютерный лабораторный практикум позволяет имитировать процессы,
протекающие
в
изучаемых
реальных
объектах,
или
смоделировать
эксперимент, не осуществимый в реальных условиях. При этом тренажер
имитирует не только реальную установку, но и объекты исследования и
условия проведения эксперимента. Лабораторные тренажеры позволяют
подобрать
оптимальные
для
проведения
эксперимента
параметры,
приобрести первоначальный опыт и навыки на подготовительном этапе,
облегчить и ускорить работу с реальными экспериментальными установками
и объектами [14].
Компьютерная тестирующая система может представлять собой как
отдельную программу, не допускающую модификации, так и универсальную
11
программную оболочку. Как правило, такие системы обеспечиваются
подсистемой подготовки тестов, облегчающей процесс их создания и
модификацию.
Эффективность
использования
тестирующей
системы
существенно выше, если она позволяет накапливать и анализировать
результаты тестирования.
Компьютерные системы контроля и измерения уровня знаний
обучающихся нашли широкое применение ввиду относительной легкости их
создания. Существует целый ряд инструментальных систем-оболочек, с
помощью
которых
программирования,
преподаватель,
в
состоянии
даже
не
скомпоновать
знакомый
перечни
с
основами
вопросов
и
возможных ответов по той или иной учебной теме. Такие программы
позволяют разгрузить преподавателя от рутинной работы по выдаче
индивидуальных контрольных заданий и проверке правильности их
выполнения, что особенно актуально в условиях массового образования.
Появляется возможность многократного и более частого контроля знаний, в
том числе и самоконтроля, что стимулирует повторение и, соответственно,
закрепление учебного материала[15].
Примером
классификации
по
функциональному
признаку,
определяющему значение и место ЭОР в учебном процессе может являться
типологическая модель системы учебных изданий для вузов, которая
включает следующие группы ЭОР:
программно-методические (учебные планы и учебные программы);
учебно-методические
(методические
указания,
руководства,
содержащие материалы по методике преподавания учебной дисциплины,
изучения курса, выполнению курсовых и дипломных работ);
обучающие (учебники, учебные пособия, тексты лекций, конспекты
лекций);
вспомогательные (компьютерные практикумы, сборники задач и
упражнений, хрестоматии, книги для чтения);
компьютерные (тестирующие) системы и базы данных тестов [16].
12
В
среднем
классификация,
среднего
образовании
построенная
образования
по
на
практике
тематическим
(предметам,
широко
используется
направлениям
дисциплинам).
Кроме
общего
того,
по
организации текста они подразделяются на моноиздания и сборники.
Моноиздание включает одно произведение, а сборник – несколько
произведений учебной литературы. Учебник, учебное пособие, курс и
конспект лекций могут выходить в свет только в виде моноизданий, а
практикум, хрестоматия, книга для чтения – в виде сборников. Учебные
планы, учебные программы, методические указания (руководства) и задания
для практических занятий выпускают преимущественно в виде моноизданий
[17].
По
характеру
представляемой
информации
можно
выделить
следующие виды учебных изданий: учебный план, учебная программа,
методические указания, методические руководства, программы практик,
задания для практических занятий, учебник, учебное пособие, конспект
лекций, курс лекций, практикум, хрестоматия и др.
По форме изложения материала учебные издания могут быть
разделены на следующие группы:
конвекционные
учебные
издания,
которые
реализует
информационную функцию обучения;
программированные учебные издания, которые по существу и
представляют собой в этой классификации электронные издания;
проблемные учебные издания, которые базируются на теории
проблемного обучения и направлено на развитие логического мышления;
комбинированные, или универсальные учебные издания, которые
содержат отдельные элементы перечисленных моделей [18].
По целевому назначению электронных средств учебного назначения
могут быть разделены на группы по уровню образования:
общее среднее;
среднее специальное;
13
высшее (с разделением по уровням – бакалавр, специалист,
магистр);
специалисты (для дополнительного образования).
Различия
по
целевому
назначению
вызваны
различными
дидактическими задачами, которые решаются при подготовке специалистов
различного уровня.
По
наличию
печатного
эквивалента
выделяются
две
группы
электронных средств учебного назначения:
электронный аналог печатного учебного издания – электронное
средство
учебного
назначения,
в
основном
воспроизводящее
соответствующее печатное издание (расположение текста на страницах,
иллюстрации, ссылки, примечания и т.п.);
самостоятельное электронное средство учебного назначения –
электронное издание, не имеющее печатных аналогов [19].
По формату основной информации выделяются следующие типы ЭОР:
текстовой – электронное издание, содержащее преимущественно
текстовую
информацию,
представленную
в
форме,
допускающей
посимвольную обработку;
графический-электронное издание, содержащее преимущественно
графические сущности, представленные в форме, допускающей просмотр и
печатное воспроизведение, но не допускающей посимвольной обработки;
звуковой
представление
–
электронное
звуковой
издание,
информации
в
содержащее
форме,
цифровое
допускающей
ее
прослушивание, но не предназначенной для печатного воспроизведения;
программный
–
автономный
программный
продукт,
представляющий собой публикацию текста в некоторой автономной
программной среде;
мультимедийный – электронное издание, в котором информация
различной природы присутствует взаимосвязанно для достижения заданных
разработчиком дидактических целей [20].
14
По технологии распространения можно выделить:
локальный ЭОР – электронное издание, предназначенное для
локального
использования
количества
идентичных
и
выпускающееся
экземпляров
в
(тиража)
виде
определенного
на
переносимых
машиночитаемых носителях;
cетевой ЭОР – электронное издание, доступное потенциально
неограниченному кругу пользователей через Интернет или локальную сеть;
ЭОР комбинированного распространения – электронное издание,
которое может использоваться как в качестве локального, так и в качестве
сетевого.
По характеру взаимодействия пользователя и ЭОР можно выделить две
группы:
детерминированный тип – электронное издание, параметры,
содержание и способ взаимодействия с которым определены издателем и не
могут быть изменяемы пользователем;
недетерминированный тип – электронное издание, параметры,
содержание и способ взаимодействия с которым прямо или косвенно
устанавливаются пользователем в соответствии с его интересами и целями
использования
на
основе
информации
и
с
помощью
алгоритмов,
определенных создателем (разработчиком) [21].
Учитывая все сказанное, один и тот же ресурс может быть
классифицирован следующим образом:
по типу – компьютерный учебник
по формату информации – мультимедийный
по наличию печатного аналога – самостоятельное средство (нет
печатного аналога)
по технологии распространения – сетевой
по характеру взаимодействия пользователя – детерминированный
по уровню образования (аудитории) – среднее специальное
по форме изложения материала – универсальное учебное издание
15
по организации текста – моноиздание
по тематике – история.
Следует обратить внимание, что в различных классификаторах позиции
могут быть взамоисключающие или взаимопоглощающие. Например,
отнесение
ЭОР
по
формату
к
мультимедийному
типу
допускает
использование в нем графики и звука, в то время как отнесение ЭОР к
высшему образованию исключает его использование по умолчанию в
среднем [22].
Все представленные выше виды и принципы классификации позволяют
учесть те или иные характеристики и параметры ЭОР. На практике можно
использовать и другие критерии классификации, однако, вне зависимости от
назначения, методики использования или технологии реализации, основой
любого дидактического средства является учебный материал изучаемой
предметной области.
1.3
Роль
электронного
ресурса
в
работе
учителя
и
образовательного учреждения
Электронный образовательный ресурс для работы учителя (далее
«сайт»)- это коммуникационный центр, позволяющий преобразовывать,
хранить,
транслировать,
в
том
числе
интерактивно,
информацию,
направленную на решение проблем образовательного характера в масштабах
класса, школы или же района, области, страны, мира [23]. Целевую
аудиторию определяет изначально разработчик сайта, однако этими рамками
сайт никогда не ограничивается, поскольку его адрес доступен в сети всему
миру, а проблемы образования актуальны для всего человечества. Кроме
того, сайт может выступать и как средство массовой информации, и как
средство дистанционного образования, и как интернет-магазин учебнометодической
литературы
и
дидактических
16
материалов,
как
место
обсуждения актуальных вопросов - форум - неограниченным количеством
участников, как доска объявлений, как файлообменник и много чем
полезным еще. И только в последнюю очередь - визитной карточкой учителя
[24].
Всем известно как важна роль учитель в жизни школьника. Кроме как
обучения своему предмету он учит и жизни. Те знания, которые дает
учитель, вне всякого сомнения, пригодятся и в жизни, только надо хорошо
усвоить. Но знания передаваемые учителем почти всегда остаются в стенах
школы, а могли бы служить для человечества многие годы путем передачи
через электронный образовательный ресурс. Поэтому ниже приведены
причины актуальности создания и внедрения ЭОР для работы учителя.
1. Настоящий учитель должен стремиться стать положительным
примером для своих учеников и свой сайт будет незаменимым помощником.
2. Сайт создает хорошую репутацию учителя, работает на сохранение
своего общественного имиджа, общественного признания.
3. Сайт
с
качественными
материалами
показывает,
насколько
компетентен и профессионален учитель.
4. Электронный ресурс позволяет создать и внедрить справочник по
предмету.
5. Интересные красочные материалы помогают привлечь внимание
учеников к изучаемому предмету, на примерах показать возможность
применения знаний в дальнейшей жизни.
6. Постоянная
работа
над
сайтом
показывает
стремление
к
самообразованию и самосовершенствованию учителя.
7. Материалы учителя, выложенные на сайте, показывают насколько
воспитаны чувства меры и самообладания.
8. Тексты на сайте показывают качество знания правил русского
языка, культуру своей речи.
17
9. Комментирование, высказывание своего мнения по случаям
нарушения учениками и учителями законодательства показывает честность и
добропорядочность учителя.
10. Учитель на сайте может высказывать мысли и идеи по улучшению
образования.
11. На сайте для всеобщего обозрения учитель может выкладывать
свои личные заслуги и творческие успехи.
12. ЭОР создает возможность консультировать и давать советы
родителям по вопросам образования учеников, высказывать положительное
мнение о творческих успехах своих учеников.
13. Через сайт появляется вносить свой вклад в развитие гражданского
общества, показать свое уважение и ответственность за культурные и
религиозные обычаи и идеи окружающих.
14. Электронный ресурс позволяет давать советы и рекомендации по
безопасности детей физического и морального здоровья.
15. Сайт может помочь педагогу заслужить получение высшей
учительской категории или денежные вознаграждения за свои материалы
выложенные на сайте [25].
Электронный образовательный ресурс в рамках школьного обучения
призван реализовать две важнейшие функции:
1. во-первых, сайт является представительством школы в сети
Интернет, источником информации о ней, о ее преподавателях и учениках и
т.п.;
2. во-вторых, сайт может быть использован и непосредственно как
инструмент учебного процесса, значительно облегчить задачу учителя. И
если в процесс обучения сайты только начинают вводить, то как визитную
карточку школы сайты используют давно [26].
Для
учеников
и
их
родителей
сайт
–
это,
прежде
всего
информационный ресурс. Используя сайты различных образовательных
учреждений, учащиеся и другие могут сравнивать их и делать выбор в пользу
18
лучших. С помощью образовательного ресурса родители смогут получить
исчерпывающую информацию о школе: координаты, специализацию,
педагогический состав, расписание занятий. Если нет времени ходить на
родительские собрания, то с преподавателями можно пообщаться, например,
на форуме. А ученикам сайт позволяет не только узнать последние новости,
домашние задания, расписание, увидеть фотоотчеты с внеклассных
мероприятий и пообщаться онлайн, но и зачастую служит средством
самовыражения. Интернет дает возможность публиковать свои, скажем,
стихи, рассказы, рисунки и т.п. [27].
Учитель на своей страничке может указать личные данные, учебные
заведения, которые он окончил, опыт преподавания, который он имеет, а
также разместить учебные материалы, тексты, фотографии, презентации и
других полезных учебных материалов.
Сайт может служить и виртуальным музеем, и способом привлечения
внимания спонсоров к школе.
Для преподавателей в целом сайт – это огромная площадка для обмена
опытом, завязывания контактов со своими коллегами из других городов и
даже стран, участие в партнерских программах в рамках казахстанских и
зарубежных
образовательных
программ
по
обмену
методическими
материалами, готовыми уроками и педагогическим опытом.
К основным характеристикам образовательных сайтов относятся:
содержание образовательного интернет-сайта - единство всех
основных
элементов
(текстовых
и
графических)
образовательной
информации, существующей и выраженной в виде web-сайтов, а также
единство связей этих основных элементов;
дизайн образовательного интернет-сайта - процесс выбора и
организации графических компонентов с целью достижения определенной
цели, которая может быть либо эстетической, либо иметь функциональную
подоплеку, а зачастую преследовать обе эти цели;
19
техническая реализация образовательного интернет-сайта - выбор
компонентов, интегрирование технологий, программных продуктов и
технических средств, для донесения образовательной информации до
пользователя;
эксплуатационность
образовательных
интернет-сайтов
-
характеристики, информирующие об использовании образовательных сайтов
пользователями [28].
Поэтому, подводя итог, можно сказать, что создание электронного
образовательного
ресурса
(в
нашем
случае
web-сайта)
-
событие,
повышающее не только имидж учителя, но и образовательного учреждения.
Хороший сайт, вбирая в себя всю полезную информацию, является лучшей
визитной
карточкой
и
коммерческой
фирмы,
и
образовательного
учреждения, работая на них в любое время суток. Безусловно, это
современно и престижно. Это прекрасная возможность преподавателю
продемонстрировать
всем
свои
достижения,
размещать
актуальную
информацию для заинтересованных лиц (родителей, учеников, студентов,
преподавателей, коллег из других учебных заведений). Это способ рассказать
о своих успехах и помочь детям сделать процесс обучения более приятным.
20
2
Особенности
проектирования,
структурирования
и
информационного наполнения электронного ресурса учителя
2.1 Правила проектирования электронного ресурса учителя
Электронный ресурс для работы учителя-предметника – важнейший
элемент учебно-воспитательного процесса, инструмент повышения качества
образования, средство формирования информационно-коммуникативной
культуры участников образовательного и воспитательного процессов. Он
позволяет учителю презентовать свой педагогический опыт, получить
навыки дистанционных форм обучения школьников, повысить уровень своей
ИКТ-компетентности. Работа над ресурсом (сайтом) должна начинаться с
проектирования. Прежде всего следует ответить на ряд вопросов: кто будет
потребителем информации, какова будет структура сайта, какие материалы
планируется размещать на сайте и т. д. Важно понимать, что электронный
ресурс создается для работы конкретного учителя, преподающего в
конкретной школе конкретный предмет и для конкретной аудитории
пользователей – учащихся и их родителей. То есть, необходимо учитывать
специфику образовательного учреждения и преподаваемого предмета, а
также контингента обучающихся[29]. Хорошо спроектированный сайт
отражает профессиональные качества педагога-предметника, имеет четкую и
понятную
для
пользователей
(учащихся,
родителей,
коллег)
информационную структуру, которую можно изменять и дополнять по мере
наполнения сайта новыми материалами. Целевые установки создания сайта
могут быть различны: популяризация знаний по предмету, представление
дополнительных материалов, контроль знаний, вовлечение в проектноисследовательскую деятельность, представление методических материалов,
«живое» общение с классным коллективом и многое другое. При создании
электронного ресурса следует учитывать и возраст аудитории (обучающиеся
младшего, среднего или старшего школьного возраста, родители, коллеги).
21
От этого зависит дизайн сайта в целом, стиль изложения и уровень
сложности
размещаемых
материалов,
графическое
оформление
и
иллюстрации и т. д.
В сети Интернет более всего распространены такие сайты учителейпредметников
разных
типов
образовательных
учреждений,
которые
объединяют в единое целое предметные сайты и сайты «Учитель – ученику».
Насколько уместно сочетание этих совершенно разных по целевой
направленности типов сайтов? Если речь идет об образовательном сайте,
адресованном обучающимся и их родителям, то нужно ли знакомить
пользователей сайта, например, с рабочей программой учителя или
конспектами уроков. С содержанием уроков, конечно же, да, а вот с
конспектами – нет. Таким образом, первостепенная задача при создании
электронного ресурса основывается на том, что, прежде всего, стоит
определиться относительно того, какой сайт будет создаваться: либо это
будет сайт для делового общения с коллегами (предметный сайт); либо сайт,
служащий средством обучения и воспитания школьников (сайт «Учитель –
ученику»).
При проектировании электронного ресурса, создания текстов и
размещения их в сети Интернет следует выполнять некоторые правила [30].
Во-первых,
чтение
текста
с
экрана
монитора
происходит
приблизительно на 25% медленнее, чем чтение печатного текста. Поэтому
рекомендуется на web-страницах размещать не более 50% текста, который
может быть использован для передачи того же материала в печатном
издании. Информацию большого объема следует разбивать на несколько
страниц, связанных между собой гиперссылками. Площадь экрана монитора
ограничена, и для того, чтобы текст поместился на нем, приходится
прибегать к механизму прокрутки, пользоваться которым не всегда удобно.
Во-вторых, для загрузки объемных материалов часто требуется много
времени, следовательно, пользователь может попросту не дождаться загрузки
22
ресурсов. Поэтому следует по возможности сокращать объем материалов,
размещаемых в интернете.
В-третьих, предлагаемые тексты следует разбивать на части, разделы,
абзацы, которые будут иметь заголовки и подзаголовки, несущие смысловую
нагрузку. Ключевые слова важно выделить цветом или начертанием. Кроме
того, текст можно предлагать в виде таблиц, списков, схем, что позволяет
структурировать информацию, она лучше воспринимается и запоминается.
В-четвертых, в тексте возможно использование метафор, цитат,
крылатых выражений, занимательных примеров, увлекательных фактов,
умеренной дозы юмора. Все это делает текст привлекательным, интересным,
запоминающимся.
В-пятых, тексты следует оформлять в едином стиле, который обычно
представляет собой смесь научного и публицистического. Научному стилю
изложения присущи точность, однозначность, логичность, строгость. Для
публицистического стиля характерны описательность и метафоричность,
более «живое» изложение и использование свободных выражений. С
изменением возраста целевой аудитории стиль изложения текстовых
материалов меняется и от публицистического приближается к научному [31].
И, наконец, при создании и размещении материалов следует
использовать
гипертекстовые
ссылки
везде,
где
это
возможно
и
целесообразно. Ссылки могут связывать как страницы и разные материалы
ресурса между собой, так и обращать пользователей к содержанию других
сайтов. Материалы сайта воспринимаются гораздо эффективнее, если текст
дополнен
технологий
качественными
позволяют
иллюстрациями.
использовать
Возможности
графические,
интернет-
звуковые
и
мультимедийные иллюстрации. Графические иллюстрации помогают полнее
представить описываемые явления, события, процессы, а также снизить
объем текстовой информации. Перед размещением изображения его
необходимо откадрировать, то есть выделить на изображении главное, а
несущественные детали по краям просто обрезать. Кроме того, следует
23
уменьшить размеры изображения насколько это возможно. Использование
анимации в содержании электронного ресурса уместно только в тех случаях,
когда она, во-первых, используется для привлечения внимания к чему-либо;
во-вторых, имеет образовательные цели. Анимация же «для украшения»,
размещенная,
например,
в
углу
каждой
страницы
сайта
мешает
сосредоточиться на чтении и осмыслении текста. Поэтому не стоит
использовать анимацию в элементах дизайна [32].
Итак, при проектировании электронного ресурса основное внимание
следует
обращать
предоставляемой
на
его
информационное
информации
является
наполнение.
решающим
Качество
фактором,
определяющим практическую ценность сайта. Грамотно написанный текст,
сопровождаемый
хорошими
графическими
и
мультимедийными
иллюстрациями – вот признаки качественного образовательного ресурса.
2.2 Структура и содержание разрабатываемого электронного
ресурса
В настоящее время структура и содержание материалов электронных
образовательных
ресурсов
педагогов
не
регламентируется
никакими
нормативными документами. Однако размещаемые материалы должны иметь
образовательный характер и не противоречить общепризнанным научным
фактам, этическим нормам и не идти в разрез с законодательством РФ.
Важно отметить, что посетитель сайта может простить многое: «жуткий»
дизайн,
грамматические
ошибки,
неудобную
навигацию
(что
для
персонального сайта учителя весьма нежелательно), если на сайте он найдет
именно ту информацию, которая ему крайне необходима. Содержание сайта
– важнейший его элемент. Распространенной ошибкой является стремление
сделать сайт «всеобъемлющим», самым интересным и ярким по содержанию.
Невозможно объять необъятное, следует работать на ту аудиторию, с
24
которой учитель предметник собирается общаться на страницах своего сайта.
Здесь важно представить себя на месте учеников, родителей, коллег и
размещать на сайте ту информацию, которая будет им интересна и полезна.
Кроме того, нельзя забывать о защите персональных данных [33]. При
необходимости страницы сайта, на которых размещена конфиденциальная
информация, можно закрыть паролем, ограничив доступ широкому кругу
пользователей. Отметим, что в настоящее время на уровне образовательного
учреждения принимаются локальные нормативные акты о неразглашении
персональных данных как обучающихся, так и учителей, которые позволяют
регламентировать деятельность ОУ в рамках создания и продвижения сайта
школы.
Содержание
сайта
тесно
связано
с
его
структурой.
Процесс
информационного пополнения сайта идет одновременно с корректировкой
его структуры. Хороший образовательный ресурс учителя должен не только
демонстрировать профессиональные компетентности учителя-предметника,
но и иметь ясную и понятную структуру, в нем должно быть легко
ориентироваться и находить нужную информацию. Анализ многочисленных
сайтов учителей показал, что наилучшим является следующий набор
основных
страниц
сайта:
главная
страница,
карта
сайта,
визитка,
нормативные документы, методическая копилка, в помощь учащимся,
учебная деятельность(методические ресурсы) , обратная связь [34].
Разработанный нами электронный образовательный ресурс содержит
все вышеперечисленные разделы. Главная страница нашего сайта состоит из
обращения
к
пользователям
сайта,
путеводителя
по
страницам
сайта(обширное поле навигации, иначе –меню), краткий анонс страниц сайта,
новостную ленту и другое. При оформлении главной страницы мы в первую
очередь учитывали необходимость создания активных заголовков текстов,
при помощи гиперссылок, что значительно облегчает навигацию по сайту
для пользователей. Поскольку содержание сайта «разрослось», в нем стало
много подразделов, некоторые из которых не отражены в основном меню
25
сайта, мы создали страницу «Карта сайта», где представили более подробную
многоуровневую структуру сайта с разбивкой на страницы и подстраницы,
разделы и подразделы, использовав при этом возможности гиперссылок.
Именно с этой страницы пользователи могут начать свое знакомство с
сайтом, поскольку здесь им предоставлена вся структура ресурса. Кроме того
пользователь получает однозначный ответ на вопрос: «Чем этот сайт мне
полезен и что я могу здесь найти?».
В раздел «Визитка» (в нашем случае он называется «О себе») были
включены следующие пункты:
фото
учителя,
краткая
информацию
об
образовательном
учреждении, краткая информацию о педагоге (образование, владение
иностранными языками и др.), сведения о его достижениях, достижениях его
учеников, данные о повышении квалификации, публикации.
Сайт – это своего рода «живой» инструмент создания имиджа
современного педагога[35]. Поэтому, при создании электронного ресурса
имеет
место
быть
размещение
информации
личностного
характера
(увлечения, любимые книги и кинофильмы, профессиональное и жизненное
кредо и т. д.). В этом случае учитель становится не только функциональное
единицей – учителем английского или математики, но и личностью, что
способствует взаимопониманию, появлению интереса к учителю у детей и
родителей. Психологи утверждают, что ученики ценят в педагоге личностные
качества выше, чем профессиональные.
На страницу «Нормативные документы» нами были помещены:
1. документы гимназии: отчеты, приказы, программы развития,
локальные акты;
2. Документы федерального, регионального уровней.
Размещенные здесь материалы представляют собой текстовые файлы
удобные для скачивания или просмотра в браузере.
Раздел «методическая копилка» включает в себя: конспекты уроков,
календарно-тематическое планирование, рабочие программы, внеклассные
26
мероприятия, презентации к урокам, учебники и пособия,. Этот раздел
позволяет учителю не только презентовать свой педагогический опыт
широкой аудитории, но и накапливать практически значимый материал,
осуществлять
рефлексию
и
корректировку
своей
педагогической
деятельности. Кроме того, содержание данного раздела и подразделов будет
полезно коллегам-практикам.
В разработанный нами раздел «помощь учащимся» (в нашем случае он
называется «Ученикам и родителям») включены: указания и рекомендации,
образцы работ учащихся, ссылки на интерактивные источники информации,
на игры-тренажеры, интересные факты о языке, секреты успеха на уроке и
другое. Данный ресурс расширяет рамки обычного урока, поскольку учитель
дистанционно предоставляет учащимся дополнительный учебный материал.
Отметим, что отсылка учащихся к разнообразным цифровым обучающим
ресурсам мотивирует школьников к просмотру позитивного контента сети
Интернет,
а
также
способствует
формированию
информационно-
коммуникативной компетентности школьников.
«Обратная связь» необходима для организации обратной связи с
пользователями Интернет-ресурса. Важно отметить, что учитель с помощью
данной формы связи способен быстро реагировать на каждое сообщение
учеников. Таким образом поддерживается «живое» общение, у сайта
появляются новые посетители, он приобретает единомышленников или
оппонентов.
Раздел «Учебная деятельность» содержит разноуровневые учебные
материалы для пятых, шестых, седьмых, восьмых, девятых, десятых и
одиннадцатых классов, работы учащихся и проектные технологии.
Дополнительно нами был разработан раздел «Фотогалерея». Это своего
рода информационный источник о жизни ученического сообщества.
В целом, информационное наполнение электронного образовательного
ресурса учителя, создание оригинальных и полезных разделов, является
сложной, но посильно задачей. В нашей работе была проведена тщательная
27
работа с текстом, подготовка и подбор иллюстраций составление методик,
разработка и использование передовых технологий.
Безусловно, первое впечатление о сайте посетители получают от
оригинального дизайна, ярких иллюстраций и броских заголовков, а далее
идет знакомство с содержанием сайта. Содержание электронного ресурса
учителя,
решающего
образовательные
задачи,
требует
повышенного
внимания и ответственности. Ученики (родители, коллеги) могут навсегда
потерять доверие к материалам сайта, если в его содержании есть
неточности, ошибки, небрежное оформление, неудачно сформулированные
фразы, неграмотные ссылки и т. д.
28
3
Разработка электронного ресурса
3.1 Обоснование выбора средств разработки web-сайта
Чтобы обеспечить выполнение указанных функций было необходимо
тщательно продумать структуру электронного ресурса и производить её
проектирование
на
основе
web-технологий.
Был
проведён
анализ
существующих средств и языков проектирования и наиболее оптимальным
средством разработки был выбран язык гипертекстовой разметки последнего
поколения HTML-5 с использованием языка описания внешнего вида
документа CSS 3. HTML5 вводит и расширяет диапазон возможностей,
включающий элементы форм, API, мультимедиа, структуры и семантики.
HTML5 вводит целый ряд новых элементов, которые упрощают
структуру страниц. Большинство страниц на HTML4 содержат типовые
элементы, такие как «шапка», «подвал» и колонки. Ныне, как правило, в коде
документа они обозначаются с помощью элементов <div>, описывая каждый
атрибутом id или class. Рисунок 3.1 показывает типичное расположение двух
колонок сверстанных с использованием <div> с атрибутами id и class. Макет
содержит шапку, подвал и горизонтальную навигацию ниже заголовка.
Основное содержание включает статью и боковую панель справа (сайдбар).
Рисунок 3.1 - Типовые элементы страниц на HTML4
29
Использовать элементы <div> правильно, потому что в HTML4 не
хватает нужной семантики для описания этих частей более конкретно.
HTML5 решает эту проблему путем внедрения новых элементов для
представления каждого из этих разных разделов. Элементы <div> могут быть
заменены новыми элементами <header>, <nav>, <section>, <article> и
<footer>( см. рисунок 3.2)
Рисунок 3.2 - Новые элементы
Вот некоторые преимущества от применения этих элементов. Когда
они используются в сочетании с элементами заголовков (от <h1>до <h6>),
это позволяет разметить вложенные разделы по уровням заголовков, вплоть
до шестого. Спецификация включает подробный алгоритм для создания
схемы документа, который принимает структуру этих элементов во внимание
и учитывает обратную совместимость с предыдущими версиями. Это могут
использовать как средства разработки, так и браузеры для создания
оглавления, чтобы помочь пользователям с навигацией по документу.
Заметим,
что
для
лучшей
совместимости
с
существующими
браузерами, также можно использовать другие элементы заголовка (от <h2>
до <h6>) вместо соответствующих элементов <h1>.
В нашей работе мы использовали следующий код структурирования
вложенными элементами <h3>,<h2>,<h1> ( см. рисунок 3.3).
<h1 id="logo">Cайт учителя</a></h1>
30
<h3>Великобритания</h3>
<h2>Welcome!</h2>
<h2>Last news</h2>
Рисунок 3.3 – Заголовки
Помечая целевые разделы страницы с помощью специальных тегов,
вспомогательные
технологии
могут
помочь
пользователю
легко
перемещаться по странице. Например, они могут просто пропустить раздел
навигации или быстро переходить от одной статьи к другой. Следовательно,
нам не придется обеспечивать механизм создания ссылок для этого. Также
замена множества <div> на несколько различных элементов помогает сделать
исходный код понятнее и проще.
Элемент <header> определяет заголовок раздела, который может
содержать больше, чем просто название раздела. К примеру, имеет смысл для
заголовка включить подзаголовок или любую другую информацию. В нашей
работе хедер определяет:
<!-- Header --> -обозначение комментария для выделения важных
частей элементов кода
<header>
<div class="shell">
<!-- Logo -->
<h1id="logo"><ahref="index1.html">Cайт учителя</a></h1></header>
Элемент <footer> определяет нижний контейнер раздела, в котором
добавляется. Раздел футера нашего электронного ресурса содержит такую
31
информацию как: авторство, ссылки на основное меню навигации(Mini Nav),
авторские права, ссылка на разработчика.
<!-- Footer -->
<footer>
<div class="shell">
<!-- Mini Nav -->
<div class="footer-navigation">
<ul>
<li><a href="ychebna.html">Учебная деятельность</a></li>
<li><a href="metodkop.html">Методическая копилка</a></li>
<li><a href="forpupils.html">Учащимся и родителям</a></li>
<li><a href="normdoc.html">Нормативные документы</a></li>
<li><a href="self.html">Коротко о себе</a></li>
<li><a href="feedback.html">Обратная связь</a></li>
</ul> </div>
<!-- /Mini Nav -->
<!-- Copyrights -->
<p class="right">
Copyright
2017
|
Рогова
Марина
Федоровна<a
href="marinaindex1.html"> Rogova M.</a> </p>
<!-- /Copyrights -->
<div class="cl"> </div>
</div></footer><!-- /Footer -->
Элемент <nav> представляет раздел навигационных ссылок, он
подходит для навигации по сайту или оглавления. В данном ресурсе этот
раздел представляет собой совокупность вложенных списков. Формат и
стиль контейнера <nav> прописан в css-файле.
<ul id="nav">
<li><a href="ychebna">Учебная деятельность</a><ul>
<li><a href="5.html">5 класс</a></li>
<li><a href="6.html">6 класс</a></li>
<li><a href="7.html">7 класс</a></li>
<li><a href="8.html">8 класс</a></li>
<li><a href="9.html">9 класс</a></li>
<li><a href="10.html">10 класс</a></li>
<li><a href="11.html">11 класс</a></li>
<li><a href="rab.ych.html">Работы учащихся</a></li>
<li><a href="progect.html">Проектные технологии</a></li>
32
</ul></li>
<li><a href="metodkop.html">Методическая копилка</a><ul>
<li><a href="Planirovanie.html">Планирование</a></li>
<li><a href="author.html">Авторские разработки</a></li>
<li><a href="grammar.html">Грамматика</a></li>
<li><a href="Reading.html">Чтение</a></li>
<li><a href="listerning.html">Аудирование</a></li>
<li><a href="tips.html">tips for the lesson</a></li>
<li><a href="books.html">Учебники и пособия</a></li>
<li><a href="konspecty.html">Конспекты уроков</a></li>
</ul></li>
<li><a href="forpupils.html">Учащимся и родителям</a><ul>
<li><a href="secret.html">Секрет успеха на уроке</a></li>
<li><ahref="neyspevaemost.html">Признаки неуспеваемости</a></li>
<li><a href="stopworlds.html">Запретные слова</a></li>
<li><a href="resyrsi.html">Ресурсы</a></li>
<li><a href="healthlines.html">Полезные ссылки</a></li>
<li><a href="games.html">Игры</a></li>
<li><a href="interesting.html">Интересные факты о языке</a></li>
</ul></li>
<li><a href="normdoc.html">Нормативные документы</a></li>
<li><a href="self.html">Коротко о себе</a></li>
<li><a href="feedback.html">Обратная связь</a></li></ul>
Css оформление:
#nav,#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
float:right}
#nav {
font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
font-size: 13px;
height: 70px;
list-style: none outside none;
margin: 40px auto;
text-shadow: 0 -1px 3px #202020;
width: 700px;
/* граница радиуса*/
33
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
/* тень контейнера */
-moz-box-shadow: 0px 3px 3px #cecece;
-webkit-box-shadow: 0px 3px 3px #cecece;
box-shadow: 0 3px 4px #8b8b8b;
/*градиент */
background-image: -webkit-gradient(linear, left bottom, left top,
color-stop(0,
#787878),
color-stop(0.5,
#5E5E5E),
color-stop(0.51,
#707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%,
#5E5E5E 50%, #707070 51%, #838383 100%);
background-color: #5f5f5f;}
#nav li {
border-bottom: 1px solid #575757;
border-left: 1px solid #929292;
border-right: 1px solid #5d5d5d;
border-top: 1px solid #797979;
display: block;
float: left;
height: 34px;
position: relative;
width: 105px;}
#nav > li:first-child {
border-left: 0 none;
margin-left: 5px;}
#nav ul {
left: -9999px;
position: absolute;
top: -9999px;
z-index: 2;}
#nav li a {
color: #FFFFFF;
display: block;
line-height: 34px;
outline: medium none;
text-align: center;
text-decoration: none;
/* заливка */
34
background-image: -webkit-gradient(linear, left bottom, left top,
color-stop(0,
#787878),
color-stop(0.5,
#5E5E5E),
color-stop(0.51,
#707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%,
#5E5E5E 50%, #707070 51%, #838383 100%);
background-color: #5f5f5f;}
Элемент <aside> предназначен для содержания, которое имеет
косвенное отношение к контенту рядом с ним, как правило, используется для
обозначения сайдбара. В нашей работе сайдбар оформлен с помощью css,
что несколько модифицирует его структуру.
<aside>
<h2>Popular items</h2>
<div class="entry bullet-list">
<ul>
<li><a
href="letter.html">Ка
правильно
написать
личное
письмо</a></li>
<li><a href="recomendation.html">Рекомендации по выполнению задания
С2</a></li>
<li><a
href="openlesson.html">Oh,
Home,
Sweet
Home
(открытый
урок)</a></li>
<li><a href="worldfouner.html">Словообразование </a></li>
<li><a
href="discussion.html">A
Job
for
Life
(урок-
дискуссия)</a></li>
<li><a href="christmas.html">Рождество в Англии</a></li>
<li><a href="quiz.html">Игра-викторина "Слабое звено"/a></li>
<li><a href="tests.html">Online тесты по английскому языку</a></li>
</ul>
</aside>
Использование в нашей работе CSS 3 позволило значительно
расширить
возможности
верстки
сайта,
без
применения
сторонних
технологий. С помощью него мы создали привлекательный дизайн
электронного ресурса с использованием минимально необходимого кода.
Так же как и HTML 5, CSS 3 поддерживается современными браузерами
частично, но в течение ближайших лет ожидается полная поддержка
браузерами HTML 5 и CSS 3.
35
Основное
преимущество
выбранного
нами
языка
веб-
программирования HTML 5 с использованием CSS 3 заключается в
получении современного, привлекательного, удобного и функционального
сайта, эффективно выполняющего свои задачи
За
счет
формирующих
отказа
от
некоторые
использования
элементы
множества
дизайна
изображений,
страницы,
такие
как
скругленные углы, тени, градиенты, страницы нашего сайта загружаются
значительно
быстрее.
Это
помогает
нам
создавать
положительное
впечатление о сайте у посетителей.
Поэтому целесообразно считать, что HTML 5 и CSS 3 способствовали
нахождению оптимальных решений для выполнения поставленных нами в
данной работе задач.
3.2 Структура, содержание, наполнение
Помимо основной структуры содержания нашего электронного
образовательного
ресурса,
указанной
в
данной
работе,
расширение
информационного контента привело к расширению подструктур ресурса.
Полная структура представлена на рисунке 3.4 и рисунке 3.5.
Рисунок 3.4 – Главная страница
36
Рисунок 3.5 – Подструктура
Согласно
этим
схемам
были
реализованы
все
основные
и
второстепенные страницы нашего электронного ресурса. Первостепенной
задачей стояло создание грамотного и доступного к пониманию меню. Это
условие было успешно реализовано путем сочетания простого понятного
дизайна с расширенным пакетом функция ( выпадающее меню), с
градиентной заливкой и выделением при наведении курсора (см. рисунок
3.6).
Рисунок 3.6 - Реализация меню
37
Следующей задачей при проектировании электронного ресурса было
грамотное
оформление
слайдера(специальный
элемент
веб-дизайна,
представляющий собой блок определенной ширины изменяющийся в ручном
или автоматическом режиме элементах – картинок, текстов и ссылок)
содержащего информацию о Великобритании, об итоговой аттестации, карту
сайта, фотогалерею и раздел тестирования. Каждый элемент данного раздела
содержит дополнительные ссылки на сторонние познавательные ресурсы.
Выполнение данной задачи представлено на рисунке. 3.7 и на рисунке 3.8.
Рисунок 3.7 – Слайдер Аттестация
Рисунок 3.8 – Слайдер Фотогалерея
38
Страница
слайдера,
посвященная
Великобритании,
содержит
интересные факты о стране и языке, познавательные видеоресурсы, которые
находятся в правом меню и доступны для просмотра любому пользователю
(см рисунок 3.9).
Рисунок 3.9 – Великобритания
Страница
«Аттестация»
содержит
полезную
информацию
по
подготовке к государственным экзаменам, а так же видеоуроки (см. рисунок
3.10).
Рисунок 3.10 – Аттестация
39
Функции карты сайта были реализованы графически, а так же с
помощью интерактивной карты сайты, которая позволяет сделать возможной
быструю навигацию не только по страницам нашего ресурса, но и так же по
всем возможным, доступным для скачивания или просмотра, страницам (см.
рисунок 3.11).
Рисунок 3.11 – Нормативные документы
Раздел нашего ресурса «Фотогалерея» содержит краткое описание
события и его фотографии (см. рисунок 3.12).
40
Рисунок 3.12 – Фотогалерея
Последняя
страница
слайдера,
называющаяся
«Тестирование»
содержит различные тесты на различные темы с разным уровнем подготовки.
Пользователь может пройти каждый тест по отдельности или начать
выполнение сразу нескольких. В конце каждого выдается результат, а так же
можно узнать правильные и неправильные ответы (см. рисунок 3.13).
Рисунок 3.13 – Раздел тестирования
41
Остальные пункты структуры главной страницы и раздела футера
реализованы и оформлены на рисунке 3.14.
Рисунок 3.14. Главная страница
Ниже
представлены
полные
страницы
представленных
выше
категорий. В раздел «О себе» можно как перейти из главного меню, так и с
вкладки Welcome. Раздел содержит личную информацию об учителе,
квалификации, стаже, достижениях, как личных, так и учеников (см. рисунок
3.15).
42
Рисунок 3.15 – раздел «О себе»
Раздел «Новости» содержит основную страницу с возможностью
выбора статей и дополнительные, содержащие сами статьи (см. рисунок 3.16
и рисунок 3.17).
Рисунок 3.16 – Главная страница новостей
43
Рисунок 3.17 – Статья о последнем звонке
Для того, чтобы грамотно организовать взаимодействие учителя и
ученика мы создали рабочую форму обратной связи с возможностью
прикрепления нескольких документов. Наименования пунктов нашей формы
располагаются слева, что обеспечивает свойство float, при наведении курсора
мышки на поле, его границы становятся голубыми, правильно заполненные
поля темнеют, форма поддерживается от IE10 включительно, проверка на
правильность заполнения полей осуществляется не на стороне сервера (см.
рисунок 3.18 ).
44
Рис. 3.18- Форма обратной связи
Нормативная база нашего электронного образовательного ресурса
представлена на странице нормативные документы в виде многоуровневого
интерактивного списка (см. рисунок 3.19), где у любого пользователя есть
возможность
просмотреть
гимназии(отчеты, приказы
в
браузере
,программы,
или
скачать
локальные
документы
акты), документы
федерального уровня, (Законы РФ, постановления правительства, приказы
МОиН РФ ( дополняется по мере публикации), приказы министерства
здравоохранения и социального развития, конвенция о правах ребенка), а так
же
документы
регионального
уровня
(постановления
правительства
Белгородской области, приказы департамента Белгородской области).
45
Рисунок 3.19 – Нормативная база электронного ресурса учителя
Далее согласно структуре нашего электронного образовательного
ресурса была разработана страница «Методическая копилка», которая
содержит
разделы:
календарно-тематическое
планирование,
рабочие
программы, внеклассные мероприятия, презентации к урокам, учебники и
пособия, конспекты уроков (см. рисунок 3.20).
Рисунок 3.20 – Методическая копилка
46
Далее, согласно основному меню нашего ресурса, была реализована
страница «Учебная деятельность», информационное наполнение которой
состоит из материалов для скачивания отсортированных по уровням
обучения( 5, 6, 7, 8, 9, 10, 11 классы), а так же работ учащихся и проектных
технологий. Так же страница дополнена правым меню, в котором можно
выбрать одну их предложенных популярных тем или посмотреть видео о
Британии (см. рисунок 3.21).
Рисунок 3.21 – Учебная деятельность
При создании вышеупомянутого раздела популярных тем(рис) было
использование оформление многоуровневого списка, содержащего такие
темы, как «Рождество в Англии», «Как правильно написать личное письмо»,
«Рекомендации по выполнению задания С2», «Игра-викторина "Слабое
звено», «Словообразование», «A Job for Life (урок-дискуссия)», «Oh, Home,
Sweet Home (открытый урок)» . Каждая тема представляет собой отдельный
47
контейнер
с
собственным
оформлением,
картинками,
шрифтами
и
содержимым (см. рисунок 3.22).
Рисунок 3.22 – Раздел популярное
Оставшийся элемент основного меню «Ученикам и родителям» был
разработан на нескольких отдельных страницах, содержащих информацию о
секретах успеха на уроке, признаках неуспеваемости на уроках, заметках о
воспитании детей родителям, запретных словах, полезных языковых
ресурсах, интерактивных играх на английском языке и интересных фактах о
языке. Каждая страница оформлена разными шрифтами и правым меню с
видеонаполнением называющимся «It’s really interesting» и содержащим
общеразвивающие материалы о Британии и о разговорном английском (см.
рисунок 3.23 и рисунок 3.24).
48
Рисунок 3.23 – Игры
Рисунок 3.24 – Факты о языке
49
Реализацию остальных страниц нашего ресурса можно найти в
ПРИЛОЖЕНИИ Б.
3.2 Элементы оформления: общее, обратная связь, карта сайта,
тестирование, регистрация на хостинге
Приведенные выше элементы электронного ресурса были реализованы
с помощью HTML 5 и css3, что позволило создать оригинальный дизайн и
увеличить скорость загрузки страниц. Ниже приведены некоторые примеры
реализации
оформления.
Вначале
документа
мы
вставили
новый
<DOCTYPE> на первой строке, который обозначает (и отсылает эту
информация браузеру), что страница создана по HTML5 стандарту. Далее мы
подключили
специальный
JavaScript,
который
поможет
правильно
отображать HTML5 в любом IE. Далее следуют скрипты прокрутки страницы
и корректного отображения анимации панели меню.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<title>Site for teacher</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<!--
Скрипт для отображения в Интеренет эксплоуере
-->
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css">
.clear {
zoom: 1;
display: block;
}
</style>
<!--[endif]-->
50
<script
type="text/javascript"
src="js/jquery-
1.4.2.min.js"></script>
<script
type="text/javascript"
src="js/jquery.jcarousel.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script
type="text/javascript"
src="js/MyriadPro.font.js"></script>
<script
type="text/javascript"
src="js/ArialBold.font.js"></script>
<script type="text/javascript" src="js/jquery-func.js"></script>
<link
rel="shortcut
icon"
type="image/x-icon"
href="css/images/favicon.ico" /> </head>
Чтобы правильно организовать работу формы обратной связи, внешний
вид которой описан в предыдущей главе, нам потребовалось использовать
PHP (широко используемый язык сценариев общего назначения с открытым
исходным кодом). Css оформление мы оставили в этом же html файле, для
удобства использования и редактирования, а php вынесен в отдельный.
#feedback-form { /* вся форма */
max-width: 550px;
padding: 2%;
border-radius: 3px;
background: #f1f1f1;}
#feedback-form label { /* наименование полей */
float: left;
display: block;
clear: right;}
#feedback-form .w100 { /* поля */
float: right;
max-width: 400px;
width: 97%;
margin-bottom: 1em;
padding: 1.5%;}
#feedback-form .border { /* граница полей */
border-radius: 1px;
border-width: 1px;
border-style: solid;
border-color: #C0C0C0 #D9D9D9 #D9D9D9;
box-shadow: 0 1px 1px rgba(255,255,255,.5),
rgba(0,0,0,.1) inset;}
#feedback-form .border:focus {
outline: none;
border-color: #abd9f1 #bfe3f7 #bfe3f7;}
#feedback-form .border:hover {
51
0
1px
1px
border-color: #7eb4ea #97cdea #97cdea;}
#feedback-form .border:focus::-moz-placeholder { /* убрать при
фокусе первоначальный текст поля */
color: transparent;}
#feedback-form .border:focus::-webkit-input-placeholder {
color: transparent;
}#feedback-form
.border:not(:focus):not(:hover):valid
{
/*
правильно заполненные поля */
opacity: .8;
}#submitFF { /* кнопка "Отправить" */
padding: 2%;
border: none;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
background: #669acc;
color: #fff;}
#feedback-form br {
height: 0;
clear: both;}
#submitFF:hover {
background: #5c90c2;}
#submitFF:focus {
box-shadow: 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8),
inset 0 -1px 0 rgba(0,0,0,.05);}
</style>
<form enctype="multipart/form-data" method="post" id="feedbackform">
<label for="nameFF">Имя:</label>
<input
type="text"
name="nameFF"
id="nameFF"
required
placeholder="например, Иван Иванович Иванов" x-autocompletetype="name"
class="w100 border">
<label for="contactFF">Email:</label>
<input type="email" name="contactFF" id="contactFF" required
placeholder="например,
ivan@yandex.ru"
x-autocompletetype="email"
class="w100 border">
<label for="fileFF">Прикрепить файл:</label>
<input
type="file"
name="fileFF[]"
multiple
id="fileFF"
class="w100">
<label for="messageFF">Сообщение:</label>
<textarea
name="messageFF"
id="messageFF"
required
rows="5"
placeholder="Введите ваше сообщение…" class="w100 border"></textarea>
<br>
<input value="Отправить" type="submit" id="submitFF">
</form>
<script>
document.getElementById('feedbackform').addEventListener('submit', function(evt){
var http = new XMLHttpRequest(), f = this;
evt.preventDefault();
http.open("POST", "contacts.php", true);
52
http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
alert(http.responseText);
if (http.responseText.indexOf(f.nameFF.value) == 0) { // очистить
поле сообщения, если в ответе первым словом будет имя отправителя
f.messageFF.removeAttribute('value');
f.messageFF.value='';
}
} }
http.onerror = function() {
alert('Извините, данные не были переданы');
}
http.send(new FormData(f));
}, false);
</script>
Файл php:
<?php
if (isset ($_POST['contactFF'])) {
$to = "rogylik@yandex.ru"; // электронный адрес куда приходят
письма
$from = $_POST['contactFF'];
$subject
=
"Заполнена
контактная
форма
с
".$_SERVER['HTTP_REFERER'];
$message = "Имя: ".$_POST['nameFF']."\nEmail: ".$from."\nIP:
".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['messageFF'];
$boundary = md5(date('r', time()));
$filesize = '';
$headers = "MIME-Version: 1.0\r\n";
$headers .= "From: " . $from . "\r\n";
$headers .= "Reply-To: " . $from . "\r\n";
$headers
.=
"Content-Type:
multipart/mixed;
boundary=\"$boundary\"\r\n";
$message="
Content-Type: multipart/mixed; boundary=\"$boundary\"
--$boundary
Content-Type: text/plain; charset=\"utf-8\"
Content-Transfer-Encoding: 7bit
$message";
for($i=0;$i<count($_FILES['fileFF']['name']);$i++) {
if(is_uploaded_file($_FILES['fileFF']['tmp_name'][$i])) {
$attachment
=
chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_nam
e'][$i])));
$filename = $_FILES['fileFF']['name'][$i];
$filetype = $_FILES['fileFF']['type'][$i];
$filesize += $_FILES['fileFF']['size'][$i];
$message.="
--$boundary
Content-Type: \"$filetype\"; name=\"$filename\"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=\"$filename\"
$attachment";
}
}
53
$message.="
--$boundary--";
if ($filesize < 10000000) { // проверка на общий размер всех
файлов. Многие почтовые сервисы не принимают вложения больше 10 МБ
mail($to, $subject, $message, $headers);
echo $_POST['nameFF'].', Ваше сообщение получено, спасибо!';
} else {
echo 'Извините, письмо не отправлено. Размер всех файлов
превышает 10 МБ.'; }}?>
Раздел нашего электронного ресурса «Карта сайта» был реализован на
отдельной странице, графическое исполнение которой было приведено выше
в работе. Составленный нами ресурс содержит информацию по всем
возможным страницам, подстраницам, а так же дополнительным материалам
для скачивания. Ниже представлен фрагмент карты.
<div class="text">
<h7> <p><p>Наглядная структура сайта</h7>
<br></div>
<figure>
<img src="images/стркутура 1.111.jpg" width="450" height="350"
/></a>
<img src="images/стркутура 2.jpg" width="450" height="350" /></a>
</figure>
<div class="text">
<h7> <p><p>Функциональная карта сайта со
ссылками</h7> <br><br>
</div>
<div id="cont">
<h8><a href="http://teacher.rogylin0.beget.tech">Homepage</a>
Last updated: 2017, June 8
</h8><table
cellpadding="0"
cellspacing="0"
border="0"
width="100%">
<tr
valign="top"><td
class="lpart"
colspan="100"><div
class="lhead">/
<h8><span class="lcount">29 pages</span></div></h8>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/"
title="Site
for
teacher"><h7>Site for teacher</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/ychebna.html"
title="Study"><h7>Study</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/Metodkop.html"
title="Metod"><h7>Metod</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/forpupils.html"
title="forpupils"><h7>forpupils</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/secret.html"
title="Secret"><h7>Secret</h7></a></td></tr>
54
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/neyspevaemost.html"
title="forpupils"><h7>forpupils</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/stopworlds.html"
title="forpupils"><h7>forpupils</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/resyrsi.html"
title="Help"><h7>Help</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/games.html"
title="Games"><h7>Games</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/interesting.html"
title="Interesting"><h7>Interesting</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/normdoc.html"
title="Documents"><h7>Documents</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/self.html"
title="Self"><h7>Self</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/feedback.html"
title="feedback"><h7>feedback</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/britain.html"
title="Britain"><h7>Britain</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/attest.html"
title="Attestation"><h7>Attestation</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/sitemap.html"
title="Карта
сайта"><h7>Карта сайта</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/newsmain.html"
title="Site
for teacher"><h7>Site for teacher</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/photo.html"
title="Photo"><h7>Photo</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/tests.html"
title="Tests"><h7>Tests</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/news104.html"
title="News"><h7>News</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/news803.html"
title="News"><h7>News</h7></a></td></tr>
55
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/news1402.html"
title="News"><h7>News</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/popular.html"
title="Popular"><h7>Popular</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/index.html" title="Site for
teacher"><h7>Site for teacher</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/news2605.html"
title="News"><h7>News</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/news1005.html"
title="News"><h7>News</h7></a></td></tr>
<tr><td
class="lpage"><a
href="http://teacher.rogylin0.beget.tech/news805.html"
title="News"><h7>News</h7></a></td></tr>
</table>
</td>
</tr>
Раздел тестирования был реализован следующим образом:
<div class="text">
<h8>
<p><p>Раздел
тестирования</h8>
<br><br></div>
<div class="text">
<h7> <p><p>Тест предназначен для проверки
умения употреблять слова is и are в различных предложениях.</h7>
<br><br></div>
<iframe
id="otpwt4925"
src="//onlinetestpad.com/wt/822d047f9f064fbfb2a9e9c802f7aa71"
frameborder="0"
style="width:100%;"
onload="var
f
=
document.getElementById('otpwt4925'); var h = 0; var listener =
function (event) { h = parseInt(event.data); if (isNaN(h)) h = 400;
f.style.height = h + 'px'; }; function addEvent(elem, evnt, func) { if
(elem.addEventListener) { elem.addEventListener(evnt, func, false); }
else if (elem.attachEvent) { elem.attachEvent('on' + evnt, func); }
else { elem['on' + evnt] = func; } }; addEvent(window, 'message',
listener);" scrolling="no" ></iframe>
<iframe
id="otpwt2278"
src="//onlinetestpad.com/wt/b0e78b7272244326866fc197320fb734"
frameborder="0"
style="width:100%;"
onload="var
f
=
document.getElementById('otpwt2278'); var h = 0; var listener =
function (event) { h = parseInt(event.data); if (isNaN(h)) h = 400;
f.style.height = h + 'px'; }; function addEvent(elem, evnt, func) { if
(elem.addEventListener) { elem.addEventListener(evnt, func, false); }
else if (elem.attachEvent) { elem.attachEvent('on' + evnt, func); }
else { elem['on' + evnt] = func; } }; addEvent(window, 'message',
listener);" scrolling="no" ></iframe>
<iframe
id="otpwt6278"
src="//onlinetestpad.com/wt/9606211d692142c7a03bd44b2ff4e29a"
frameborder="0"
style="width:100%;"
onload="var
f
=
56
document.getElementById('otpwt6278'); var h = 0; var listener =
function (event) { h = parseInt(event.data); if (isNaN(h)) h = 400;
f.style.height = h + 'px'; }; function addEvent(elem, evnt, func) { if
(elem.addEventListener) { elem.addEventListener(evnt, func, false); }
else if (elem.attachEvent) { elem.attachEvent('on' + evnt, func); }
else { elem['on' + evnt] = func; } }; addEvent(window, 'message',
listener);" scrolling="no" ></iframe>
<iframe
id="otpwt4422"
src="//onlinetestpad.com/wt/3dfc76e65acc45f0938613175af5d505"
frameborder="0"
style="width:100%;"
onload="var
f
=
document.getElementById('otpwt4422'); var h = 0; var listener =
function (event) { h = parseInt(event.data); if (isNaN(h)) h = 400;
f.style.height = h + 'px'; }; function addEvent(elem, evnt, func) { if
(elem.addEventListener) { elem.addEventListener(evnt, func, false); }
else if (elem.attachEvent) { elem.attachEvent('on' + evnt, func); }
else { elem['on' + evnt] = func; } }; addEvent(window, 'message',
listener);" scrolling="no" ></iframe>
<iframe
id="otpwt2547"
src="//onlinetestpad.com/wt/3fdda17599e84518b0061775d6252211"
frameborder="0"
style="width:100%;"
onload="var
f
=
document.getElementById('otpwt2547'); var h = 0; var listener =
function (event) { h = parseInt(event.data); if (isNaN(h)) h = 400;
f.style.height = h + 'px'; }; function addEvent(elem, evnt, func) { if
(elem.addEventListener) { elem.addEventListener(evnt, func, false); }
else if (elem.attachEvent) { elem.attachEvent('on' + evnt, func); }
else { elem['on' + evnt] = func; } }; addEvent(window, 'message',
listener);" scrolling="no" ></iframe>
<iframe
id="otpwt4230"
src="//onlinetestpad.com/wt/b43096e2021744bb8d5924e64ad43c3f"
frameborder="0"
style="width:100%;"
onload="var
f
=
document.getElementById('otpwt4230'); var h = 0; var listener =
function (event) { h = parseInt(event.data); if (isNaN(h)) h = 400;
f.style.height = h + 'px'; }; function addEvent(elem, evnt, func) { if
(elem.addEventListener) { elem.addEventListener(evnt, func, false); }
else if (elem.attachEvent) { elem.attachEvent('on' + evnt, func); }
else { elem['on' + evnt] = func; } }; addEvent(window, 'message',
listener);" scrolling="no" ></iframe>
<iframe
id="otpwt4111"
src="//onlinetestpad.com/wt/6c4d2654966346e99a85e27bd0d32263"
frameborder="0"
style="width:100%;"
onload="var
f
=
document.getElementById('otpwt4111'); var h = 0; var listener =
function (event) { h = parseInt(event.data); if (isNaN(h)) h = 400;
f.style.height = h + 'px'; }; function addEvent(elem, evnt, func) { if
(elem.addEventListener) { elem.addEventListener(evnt, func, false); }
else if (elem.attachEvent) { elem.attachEvent('on' + evnt, func); }
else { elem['on' + evnt] = func; } }; addEvent(window, 'message',
listener);" scrolling="no" ></iframe>
Что касается регистрации электронного ресурса на хостинге, то он
проходил в несколько этапов. Свой выбор мы остановили на хостинге
57
поскольку
BeGet.ru,
он
специализируется
на
предоставлении
телекоммуникационных услуг по размещению сайтов на собственных
серверных ресурсах и
сотрудничает с мировыми лидерами высоких
технологий AMD, Intel, APC, Cisco Systems, Seagate, Allied Telesyn.
Для
начала
предоставленными
была
30
пройдена
днями
регистрация
бесплатного
также бесплатный домен, вида ваш_логин.bget.ru.
на
хостинге
с
тестового
периода,
а
В нашем случае был
предоставлен домен rogylin0.beget.tech. Однако этот домен не отвечал
требованиям
нашего
ресурса,
поэтому
был
создан
новый
домен
teacher.rogylin0.beget.tech и прилинкован к новому сайту, название которого
полностью подходит нашей работе teachersite22, директория которого
расположена на teachersite22/public_html. Стандартный интерфейс учетной
записи
на
хостинге «Beget» с полным набором возможных функций
представлен на рисунке 3.25.
Рисунок 3.25 - Возможности хостинга
58
Далее был осуществлен перенос нашего статичного сайта на хостинг
путем закачки файлов на сервер через прокол FTP. Для этого мы
использовали популярный FTP-клиент -Total Commander (см. рисунок 3.26).
Рисунок 3.26 – Загруженные файлы
По завершению регистрации наш сайт полностью и успешно
отображается в сети Интернет и доступен любому пользователю.
59
ЗАКЛЮЧЕНИЕ
Разработанный нами электронный образовательный ресурс для работы
учителя английского языка, основными пользователями которого являются
ученики, решает следующие образовательные задачи.
Во-первых, электронный ресурс учителя английского помогает решить
задачу индивидуализации содержания определенного курса школьной
программы. Именно через онлайн-ресурс учащимся с разным уровнем
подготовленности предлагаются дифференцированные задания, что в
условиях
обычного
урока
не
всегда
реализуемо.
Здесь
же
для
заинтересованных и наиболее успевающих учащихся можно мы поместили
ряд заданий повышенного уровня сложности, дополнительный материал,
углубляющий и расширяющий содержание урока. Для учащихся, по тем или
иным причинам отстающим в освоении программы, разработаны задания
тренировочного характера, задания с пояснениями, комментарии к типичным
ошибкам. Кроме того, подобная работа с сайтом способствовала успешному
переносу части обучающего времени в сеть Интернет.
Во-вторых, нельзя забывать, что учитель строит урок, ориентируясь на
учащихся с разными типами восприятия. Работа на уроке – это быстрое
динамическое переключение (сначала слушаем, далее обсуждаем, в конце
записываем). Учащиеся порой теряют нить урока и не могут фиксировать его
ход в виде конспекта, который им предлагается вести по мере развертывания
учебного материала. Но, с помощью разработанной нами электронной версии
материалов, которые всегда находятся в открытом доступе для всех учеников
в любое время, обучающиеся английскому языку в «Гимназии №22» смогли
сфокусировать внимание на самом ходе урока, на словах учителя и
высказываниях одноклассников, и на каждом уроке работали более
продуктивно.
В-третьих, разработанный нами электронный образовательный ресурс
для работы учителя показал отличный потенциал в сфере дополнительного
60
образования школьников. Здесь содержится
много различный ссылок на
ресурсы сети Интернет, которые позволяют развивать не только предметные
знания, но и общий кругозор ученика. Таким образом, наш сайт позволяет
дополнить и содержательно расширить диалог учителя с учениками и выйти
за рамки урока, пригласив учащихся к обсуждению интересного и значимого
материала, лежащего в данной предметной области, но выходящего за рамки
школьной программы английского языка.
В-четвертых, разработанный нами сайт позволяет учителю реализовать
дистанционное
обучение
в
рамках
подготовки
к
экзаменам
и
государственной аттестации. Это крайне значимо для всех школьников,
поскольку
позволяет
тщательно
изучить
контрольные
задания,
и
воспользоваться ссылками на дополнительные материалы. Для большей
эффективности обучения была установлена форма обратной связи, с
помощью которых реализуется общение учителя с учеником, помощь в
трудных заданиях, консультирование.
Итак, созданный нами электронный ресурс является успешным и
востребованным, поскольку выполняет новые образовательные функции.
Педагог из источника информации превратился в партнера по общей
деятельности, и сформировался новый тип общения в системе «учитель –
ученик», повысился авторитет учителя в глазах учеников.
В ходе нашего исследования были успешно реализованы задачи,
поставленные в начале работы. А именно:
была грамотно определена область использования электронного
ресурса, что позволило ученикам с различной степенью подготовки
правильно распределить учебную нагрузку.
качественно разработанная структура электронного ресурса сделала
возможным быстрый и оптимальный доступ ко всем методическим
наработкам учителя
61
выбранные нами средства разработки ресурса позволили сделать
сайт более интерактивным, полезным, качественно исполненным и удобным
для восприятия.
внедренные и примененные нами разработки и материалы успешно
используются в учебно-воспитательном процессе, объединяя учителя и
учащихся
В этом случае можно говорить о том, что разработанный электронный
ресурс для работы учителя английского языка способствует повышению
качества школьного образования.
62
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
1. Панкова, Е.В. Интернет-сайт среднего профессионального учебного
заведения: эффективность поиска в Интернете // Панкова Е.В., Косинова С.
А. // Научные и технические библиотеки. – 2012. – №3. – С. 41-44
2. Гендина, Н.И. Использование формализованных методов при
подготовке текста для веб-сайтов учреждений культуры // Н.И. Гендина, Н.И.
Колкова, О.И. Алдохина // Научные и технические библиотеки. – 2008. –№3.
– С. 29-35
3. Гура, В.В. Уровни педагогического проектирования электронных
образовательных ресурсов для открытого образования / В.В. Гура; –
Таганрог, 2009
4. Коджаспирова, Г.М., Петров К.В. Технические средства обучения и
методика их использования. Учеб. пособие для студ. высш. пед. учеб.
заведений- М.: Академия, 2012.- 256 с.
5. Мосолков, А. Е. Электронные образовательные ресурсы нового
поколения (ЭОР) [Электронный ресурс].- Режим доступа: http://www.metodkopilka.ru/page-article-8.html
6. Селевко, Г.К. Современные образовательные технологии: Учеб.
пособие / Г.К. Селевко, – М.: Народное образование, 2006. – 256 с
7. Осин,
А.В.
Электронные
образовательные
ресурсы
нового
поколения: открытые образовательные модульные мультимедиа системы
[Электронный ресурс]/ А.В. Осин // Единое окно – Режим доступа:
http://window.edu.ru/window/library?p_rid=45271
8. Семенов А. Л. «Роль информационных технологий в общем
среднем образовании. //Информатика и образование» 2011.№2
9. Тлеукеева, Р. Традиционные и электронные ресурсы: состояние,
проблемы. эффективность использования //Роза Тлеукеева//Библиотека. –
2008. – №1. – С. 15-19
63
10. Зимина О.В. Печатные и электронные учебные издания в
современном высшем образовании: Теория, методика, практика / О.В.
Зимина. – М.: изд-во МЭИ, 2013. – 336 с.
11. Ахмедова
Альфира
Мазитовна
Использование
современных
электронных средств обучения в учебном процессе // Science Time. 2015. №1
(13). URL: http://cyberleninka.ru/article/n/ispolzovanie-sovremennyh-elektronnyhsredstv-obucheniya-v-uchebnom-protsesse).
12. Панова Е.В. Электронный учебник: преимущества и проблемы
использования в учебном процессе / Е. В. Панова // Международная
конференция "Библиотеки и Образование" - 2007 «Информационные ресурсы
и сервисы открытого образования». [Электронный ресурс]. - URL:
http://www.spbbt.ru/files/Conferens/ pankovaev_01_2007.pdf
13. C.Симонович, Г.Евсеев, А.Алексеев. Специальная информатика:
учебное пособие.- М.:АСТ-ПРЕСС:Инфорком-Пресс,2008-480с
14. Ахмедова
А.М.
Использование
образовательных
ресурсов
Интернета на уроках физики / А. М. Ахмедова, Е. Ю. Фадеева // Ученые
записки института социальных и гуманитарных знаний: материалы V
Международной научно-практической конференции «Электронная Казань 2013»
(ИКТ
в
образовании:
технологические,
методические
и
организационные аспекты их использования) часть II. - Казань: Юниверсум,
2013. - №1 (11). - С.267-273.
15. Гендина, Н.И. Лингвистические средства проектирования контента
веб-сайтов / Н.И. Гендина // Научные и технические библиотеки. – 2008. –
№3. – С. 5-14
16. Леонтьев
В.
П.
«Новейшая
энциклопедия
персонального
компьютера 2009» - М.: ОЛМА-ПРЕСС, 2009
17. Лапчик М.П., Семакина И.Г., Хеннер Е.К. «Методика преподавания
информатики: Учебное пособие для студентов педвузов»; Под общей
редакцией М.П. Лапчика. – М.: Издательский центр «Академия», 2006.
64
18. Лавренов А.Ю. Якушина Е.В. Создание школьного сайта. Занятие
второе. М: Вопросы Интернет-образования, № 30.
19. Рогачева, Г.И. Современные информационные образовательные
ресурсы // Г.И. Рогачева // Информатизация школьного образования:
Материалы междунар. науч.-практ. конф. 17-18 сентября 2012 г. – Барнаул,
пера, А. Темпера. – М., 2012. – 61 с.
20. Полат Е.С. Интернет на уроках иностранного языка// ИЯШ № 2, 3
2001 г.
21. Полат Е.С. Метод проектов на уроках иностранного языка// ИЯШ
№ 2, 3 2000 г.
22. Лесничая, И.Г., Миссинг, И.В. Информатика и информационные
технологии. М.: Экспо, 2005: - 109с.
23. Тюгаева, О.В. Об использовании компьютерных технологий на
уроках математики в школе // Вестник ТГПУ.– 2012.– №4.– URL:
http://cyberleninka.ru/article/n/ob-ispolzovanii-kompyuternyh-tehnologiy-naurokah-matematiki-v-shkole (дата обращения: 19.11.2016).
24. Писаренко, В.И. Использование компьютерных технологий в
обучении иностранным языкам // Открытое образование. – 2004 –№2. – с. 4649
25. Сергеева, М.Э. Новые информационные технологии в обучении
английскому языку 2005– 166с.
26. Кизимова, И.Г. Использование интерактивных информационных
технологий
юридического
в
обучении
института
английскому
МВД
языку//Вестник
России.–
2013.–
Казанского
№12.–
URL:
http://cyberleninka.ru/article/n/ispolzovanie-interaktivnyh-informatsionnyhtehnologiy-v-obuchenii-angliyskomu-yazyku (дата обращения: 14.11.2016).
27. Ефременко, В.А. Применение информационных технологий на
уроках иностранного языка// Иностранные языки в школе – №8 – 2007. –с. 17
65
28. Расулова,
М.
Ж.
Использование
информационно-
коммуникационных технологий на уроках английского языка // Теория и
практика образования в современном мире: материалы II междунар. науч.
конф. (г. Санкт-Петербург, ноябрь 2012 г.). – СПб.: Реноме, 2012. – С. 80-95
29. Сидоренко, А.Ф. Использование компьютерных программ на
уроках английского языка.// Иностранные языки в школе – 2002. –№6. – с.4043
30. Арзуманова, Н.В. Использование современных информационных
технологий в образовательном процессе // Известия РГПУ им. А.И. Герцена.
– 2009. – №113. – URL:http://puma/article/n/ispolzovaniesovremennyhinfo
rmatsionnyhtehnologiyvobrazoatelnomprotsesse(дата обращения: 20.11.2016)
31. Сайков,
Б.П.
Организация
информационного
пространства
образовательного учреждения: практическое руководство. – М.: БИНОМ.
Лаборатория знаний, 2005. – 406 с.
32. Колкова, М.Н. Методики обучения иностранным языкам в средней
школе. – Спб: КАРО, 2005. – 224 с.
33. Конышева, А.В. Английский язык. Современные методы обучения:
кн. для студентов и преподавателей ВУЗов. – М.: ТетраСистемс, 2007. –352 с.
34. Цветкова, Л.А. Использование компьютера при обучении лексике в
начальной школе. // Иностранные языки в школе – 2002. – №2. – С. 43-47
35. Роберт, И.В., Поляков, В.А. Основные направления научных
исследований в области информатизации профессионального образования. –
М.: «Образование и Информатика», 2004. – 295с.
66
ПРИЛОЖЕНИЕ А
СПРАВКА О ВНЕДРЕНИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ ОБРАЗОВАТЕЛЬНОЕ
УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«БЕЛГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ НАЦИОНАЛЬНЫЙ
ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ»
( Н И У
« Б е л Г У » )
ФАКУЛЬТЕТ МАТЕМАТИКИ И ЕСТЕСТВЕННОНАУЧНОГО
ОБРАЗОВАНИЯ
КАФЕДРА ИНФОРМАТИКИ, ЕСТЕСТВЕННОНАУЧНЫХ ДИСЦИПЛИН И
МЕТОДИК ПРЕПОДАВАНИЯ
Справка
о внедрении результатов выпускной квалификационной работы
Роговой. М.Ф. на тему: «Разработка электронного ресурса для работы
учителя английского языка»
Настоящая справка выдана Роговой Марине Федоровне, обучающейся
группы 02041205 по направлению подготовки 44.03.05 Педагогическое
образование по профилю «Информатика и иностранный язык (английский) о
том, что электронный образовательный ресурс для учителя успешно
реализован и применен в работе учителя английского языка Муниципального
Бюджетного
Общеобразовательного Учреждения
«Гимназия №22» г.
Белгорода Фоминой Елены Ивановны.
Директор МБОУ «Гимназия №22»
67
/С.А Шляхова/
ПРИЛОЖЕНИЕ Б
Код разработанного электронного ресурса
находится на cd-r
68
Отзывы:
Авторизуйтесь, чтобы оставить отзыв