Разработка web-ресурса "Инфошкола"

Постников А.Н.

Разработка web-ресурса "Инфошкола"

44.03.01 Педагогическое образование, профиль Информатика

Народное образование. Педагогика

Дипломы

Вуз: Белгородский государственный университет - национальный исследовательский университет (НИУ «БелГУ»)

ID: 5c1a6e587966e104f6f858fd

UUID: 0e924250-e5d7-0136-0345-525400005860

Язык: Русский

Опубликовано: почти 6 лет назад

Просмотры: 9

Постников А.Н.

Источник: Федеральное государственное автономное образовательное учреждение высшего образования «Белгородский государственный национальный исследовательский университет»

Комментировать 0

Рецензировать 0

Скачать - 1,3 МБ

Поделиться работой

Федеральное государственное автономное образовательное учреждение высшего образования БЕЛГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ (НИУ «БелГУ») ФАКУЛЬТЕТ МАТЕМАТИКИ И ЕСТЕСТВЕННОНАУЧНОГО ОБРАЗОВАНИЯ КАФЕДРА ИНФОРМАТИКИ, ЕСТЕСТВЕННОНАУЧНЫХ ДИСЦИПЛИН И МЕТОДИК ПРЕПОДАВАНИЯ. РАЗРАБОТКА WEB-РЕСУРСА «Инфошкола» Выпускная квалификационная работа обучающегося по направлению подготовки 44.03.05 Педагогическое образование профиль Информатика очной формы обучения группы 02041404 Постникова Алексея Николаевича Научный руководитель: к.т.н., доцент Красовская Л. В. БЕЛГОРОД 2018

СОДЕРЖАНИЕ ВВЕДЕНИЕ .............................................................................................................. 3 1 Электронный образовательный ресурс: классификация и особенности разработки ................................................................................................................ 4 1.1 Электронный образовательный ресурс как средство обучения ................... 4 1.2 Классификация электронных образовательных ресурсов ............................ 6 1.3 Способы разработки Web-ресурса .................................................................. 8 1.4 Выбор и установка CMS для разработки Web-ресурса «Инфошкола» ..... 16 2 Структура и разработка электронного образовательного ресурса «Инфошкола»......................................................................................................... 19 2.1 Структура Web-сайта ...................................................................................... 19 2.2 Используемые плагины и их описание ......................................................... 23 2.3 Руководство для пользователя ....................................................................... 26 2.4 Руководство для администратора .................................................................. 32 Заключение ............................................................................................................ 39 Список использованных источников .................................................................. 40 2

ВВЕДЕНИЕ В настоящее время изучение информатики это наиболее остро стоящий вопрос в школах. Количество часов информатики в неделю для каждого класса урезано до минимума, к тому же ученики часто отвлекаются от темы урока. Ко всему прочему большую проблему представляет то, что система образования дает только начальные навыки работы с компьютером, такие как работа в текстовых редакторах и процессорах, электронных таблицах и т.д. Но этого недостаточно для сдачи экзаменов в 9 или 11 классах, ну или для тех, кто просто интересуется информатикой и хочет знать, как можно больше. Таким образом большая часть изучения информатики ложиться на плечи самих учащихся. Для самостоятельного изучения очень подходят электронные образовательные ресурсы. Такие ресурсы легко доступны как в школе, так и дома, да и не только дома, но и в любом месте где есть доступ к компьютеру или интернету. Таким образом у ученика появляется возможность постоянного доступа к необходимой информации. Для помощи в подготовке к единому государственному экзамену (ЕГЭ) или основному государственному экзамену (ОГЭ) мы решили создать электронный образовательный ресурс «Инфошкола» Цель: Разработать электронный образовательный ресурс «Инфошкола» представленный Web-сайтом. Объект: подготовка к ОГЭ или ЕГЭ Предмет: Электронный образовательный ресурс «Инфошкола» Задачи: 1. Исследование теоретической литературы по данному вопросу. 2. Поиск материала для наполнения сайта. 3. Подбор CMS для разработки сайта. 4. Разработка Web-ресурса «Инфошкола» 3

1 Электронный образовательный ресурс: классификация и особенности разработки 1.1 Электронный образовательный ресурс как средство обучения В зависимости от возможностей, предоставляемых данными средствами роль средств обучения в учебном процессе меняется. Традиционно построение обучения происходит на основе взаимодействия учителей и учащихся, обучающего и обучаемого. Педагогика и методика преподавания имеют внушительный багаж методов обучения и форм преподавания материала). Основная задача преподавателя – найти такие средства и способы обучения, которые позволят обеспечить наиболее оптимальные условия и формы передачи накопленных знаний, формирования компетенций с учетом особенностей возраста и психологии и возможностей всех обучающихся [3]. Развитие информационных технологий обусловило появление новой формы образования – электронное образование, то есть обучение с помощью информационно-коммуникационных технологий. Основой электронного образования являются электронные образовательные ресурсы. Такие ресурсы обучения, в которых заложены большие возможности использования информационных технологий (мультимедиа), что приводит к росту потенциала процесса обучения в целом. Также растет и диапазон применения средств обучения, благодаря чему появляется многообразие методических приемов преподавателя и эффективное формирование универсальных учебных действий. Для начала давайте рассмотрим, что вообще из себя представляет электронный образовательный ресурс (ЭОР). В самом общем случае электронный ресурс можно описать, как любую информацию, воспроизвести которую можно только при использовании электронных средств. Но неужели любая информация является образовательной? Конечно не любую информацию можно использовать для электронного образовательного 4

ресурса. Информация должна отсеиваться, на основе образовательных целей, темы излагаемого материала, ориентации на какую-либо аудиторию. В частности, ЭОР – это совокупность программных средств (интерпретаторов), интерпретаторов, информации, воспроизводимой информационных, технических, при помощи нормативных, и методических материалов, материалы мультимедиа (аудио- видео материалы), размещенные на компьютерных носителях или в сети Интернет [7]. ЭОР представляют собой средство обучения и выступают в качестве инструмента увеличения его качества. В характере деятельности участников учебного процесса в условиях современной информационной образовательной среды, выстроенной на основе ЭОР, происходят изменения в направлении увеличения доли самостоятельности в областях исследования, творчества для продуктивной работы учащихся. Разработка собственных ЭОР позволяет организовать экспериментально-исследовательскую деятельность – как индивидуально, так и группе, в коллективе с реальными объектами изучения, их моделями и отображениями. Что в свою очередь обеспечивает широкое внедрение исследовательского метода обучения, который позволяет подвести учащегося к самостоятельному "открытию" изучаемой закономерности, развитию интеллектуального потенциала, способностей к творчеству. ЭОР также возможно применять не только в школе, но и для дистанционного или самостоятельного обучения. Например, такие ЭОР как Web-ресурсы. Именно они являются наиболее современные с учетом развития Интернета, введением в школы систем виртуального контроля «Виртуальная школа». При таких условиях любой ученик, при наличии Интернет, может получить доступ в данному типу ЭОР не зависимо от места обучения. 5

1.2 Классификация электронных образовательных ресурсов Существуют несколько подходов к классификации и типологии ЭОР. Отметим, что любые классификации носят довольно условный характер и могут пересекаться в различных классах технологий. Однозначно и конкретно определить универсальную классификацию даже предметных образовательных областей для ЭОР практически невозможно. В основном это связано с большой вариативностью тем, направлений, которые охватывают различные ЭОР. Прежде чем переходить к рассмотрению конкретных классификаций, необходимо понять критерии, по которым характеризуют ЭОР и по которых происходит классификация ЭОР. С точки зрения учебного процесса можно выделить основные критерии [11]:  Уровень образования;  Форма образовательного процесса;  Специфика аудитории;  Предметная область;  Тип электронного ресурса. На практике, с учетом многообразия ЭОР проще и удобнее всего проводить классификацию по конкретному признаку, например:  по способу применения в образовательном процессе;  по целевому уровню и ступени образования;  по форме обучения;  по типу;  по целевой аудитории;  по назначению;  по функциональному назначению;  по дидактическим целям;  по виду образовательной деятельности; 6

 по характеру представления информации;  по форме организаций занятия. Ниже приведены несколько классификаций под которые попадает Webресурс: По способу применения в образовательном процессе:  Распределенные ЭОР, размещенные в различных информационных образовательных средах. А именно используемые в режиме удаленного доступа на основе Интернет-технологий; По типу [10]:  Учебный материал;  Лабораторный практикум;  Компьютерный учебник;  Электронный учебник. Рассмотрим более подробно классификацию по типу. Лабораторный практикум. Позволяет имитировать (воспроизводить) процессы, протекающие в изучаемых реальных объектах, или смоделировать эксперимент, который невозможно провести в реальных условиях. Таким образом он позволяет закрепить знания и получить навыки по применению полученных знаний на практике. Как правило такие практикумы не являются универсальными, для каждого предмета и темы необходима разработка нового практикума. Компьютерный учебник содержит структурированный учебный теоретический материл для изучения какой-либо темы. Предназначен для самостоятельного изучения обучающимся теоретического материала и может быть содержать текст, мультимедию, а также гиперссылки. Гиперссылки позволяют ученику самому выбирать порядок и направление изучения материала, согласно его навыкам и интересам. Электронный учебник позволяет обучающемуся в любое время удаленно получить доступ к необходимой ему информации. В данный учебник 7

включается информация как из компьютерного учебника, так и дополнительная, более подробная информация из других источников. Обычно электронный учебник представлен списком терминов или имен, представленных гиперссылками. 1.3 Способы разработки Web-ресурса Для разработки Web-ресурса применяются конструкторы Web-страниц. Они бывают 2 типов:  Онлайн конструкторы  Конструкторы программы (оффлайн конструкторы) Преимущества конструкторов сайтов:  Просты в использовании.  Части кода разделены (наполнение и дизайн редактируются раздельно)  Наличие встроенных шаблонов  Сохранность файлов. (в онлайн конструкторах все файлы хранятся на сервере конструктора).  Позволяет производить публикацию сайта (на собственном хостинге или на хостинге конструктора) Но не зависимо от типа конструктора для полноценной работы сайта все равно нужен интернет. Далее мы рассмотрим несколько конструкторов сайтов. Онлайн конструкторы Есть несколько самых популярных конструкторов [13]:  Wix  Diafan  Jimdo 8

 uCoz  Joomla  WordPress Wix Довольно известный и популярный конструктор сайтов. В основном ориентирован на обычного пользователя, который не знает, как пишется сайт и из чего состоит его код. Данный конструктор имеет удобный и понятный дизайн, который понимается интуитивно, с большим количество шаблонов, и дополнительных функций по созданию и оформлению дизайна и оформления текста. Все содержимое в данном конструкторе предоставляется бесплатно, все распределено по категориям, что повышает удобство в использовании данного конструктора. Однако есть и минус, после выбора шаблона его изменение будет невозможно. Этот конструктор обладает очень приятной и понятной панелью управления, очень хорошо продуманна в плане функциональной части, хотя и не совсем простая – это обусловлено большим количеством доступных настроек для оформления дизайна и текста. Среди всего можно выделить наиболее интересные функции, такие как: установка видео в качестве фона сайта, широкоформатные полосок по типу «лендинг пейдж», геометрические формы, иконки, анимация. Также этот сайт имеет встроенный редактор изображений, что-то на подобии Photoshop. Перед публикацией возможно прямо со смартфона обработать фото (кадрирование, растяжение, изменение масштаба, наложение эффектов, коррекция цвета) и поместить в нужное место на странице [13]. Возможность правки HTML кода отсутствует, что и к лучшему. Не стоит мешать качественный визуальный конструктор с инструментами для гиков. Целевая группа пользователей – новички. Для профи существуют другие конструкторы. Весь функционал реализован добавлением виджетов, компонентов и разнообразными настройками. В такой системе неопытному человеку трудно будет что-то сделать не так. На то и расчёт. 9

К преимуществам относятся:  Большой запас шаблонов на разные вкусы (более 1000);  Возможность создания собственного уникального шаблона;  Мощный редактор сайта;  Поддержка функции Drag & Drop (перетянул и отпустил) для всех элементов;  Очень гибкие и разнообразные настройки;  Сайты, написанные с помощью Wix хорошо индексируются поисковыми системами;  Русифицированный, понятный и приятный на вид интерфейс; Недостатки:  Адрес страницы в бесплатной версии, имеет вид Вашwixлогин.wix.com/название сайта;  На бесплатной версии есть ограничение по скорости загрузки сайта. Множество сложных элементов могут дольше грузиться, чем обычно. Diafan Хорошо сбалансирован, подходит для создания всех типов сайтов. Он является полноценной CMS, автоматически устанавливается на хостинг при регистрации в системе. На деле это означает мощь и наличие FTP-доступа ко всем файлам. Хороший выбор для тех, кто хочет получить возможности системы управления контентом, избежав при этом сложностей администрирования веб-сервера, настройки безопасности и прочих вещей. Профи-инструмент, завёрнутый в обёртку для начинающих пользователей. Diafan Cloud не является совсем уж простым, но и сложным в освоении для новичков его назвать нельзя. Опытные вообще за пару минут разберутся, что и к чему. Лучше всего преимущества сервиса проявляются при создании интернет-магазинов. Продиктовано это утверждение наличием удобных/мощных маркетинговых и SEO-инструментов, а также выдающейся скоростью работы движка и способностью выдерживать огромный трафик без просадок производительности сайта. 10

Панель управления имеет модульную структуру. Ее можно настроить в индивидуальном порядке, добавляя/удаляя модули. Допустим, работая над визиткой, можно смело выбросить половину опций админки без ущерба для дела. Это очень хорошо для более быстрой и удобной работы с этим конструктором [13]. Jimbo Тоже довольно интересный онлайн-конструктор сайтов, Очень хорошо подходит для тех, кто не хочет вникать в суть процессы создания шаблонов и сайта в целом, а также серьезно изучать такие технологии как HTML и CSS. Платформа Jimdo представляет собой удобный и функциональный конструктор сайтов. Это коммерческий проект, который хоть и предоставляет возможность создать сайт бесплатно, однако накладывает такие ограничения, что ресурс приличного качества можно создать лишь при использовании платного тарифного плана. Сайты на jimdo могут создаваться с использованием одного из 16 шаблонов, которые становятся доступны после регистрации. Каждый шаблон содержит свои скрипты, и отнесен к определенной тематике (блог, магазин, портфолио, личный сайт и прочие). После регистрации в панели администрирования можно сменить стиль шаблона на один из 38 доступных [13]. Преимущества:  Достаточно большой выбор готовых шаблонов;  Интуитивно понятный пользовательский интерфейс;  Тонкая настройка параметров создаваемого сайта;  Возможность SEO-настройки страниц;  Нет навязчивой рекламы;  Возможность загрузки собственного шаблона. Недостатки:  Относительная сложность интеграции собственного шаблона; 11

 Некоторые ограничения при работе с графическими элементами сайта. uCoz Наверное, один из самых известных и старых сервисов в рунете, хотя с противоречивой репутацией. Подойдёт для создания практически любого сайта. По сравнению со многими другими конструкторами обладает более богатым функционалом, поэтому требует определённой степени осведомлённости для использования. Типовые шаблоны конструктора хорошо известны пользователям интернета, поскольку за десятилетнее существование Ucoz их использовали сотни тысяч раз. Они несколько просты и их дизайн немного устарел. Хотя для того, чтобы создать сайт бесплатно на Ucoz, они вполне пригодны. Преимущества:  Большое количество шаблонов и настраиваемых модулей (форум, опросы, галереи, магазин, блог и т. д);  Обилие возможностей и настроек;  Постепенно растущий объём дискового пространства по мере развития сайта (без дополнительной оплаты);  Хорошо индексируется поисковиками;  Доступен PHP (платно);  Возможен RSS импорт и экспорт;  Доступность техподдержки. Недостатки:  Огромный рекламный баннер в правом верхнем углу, закрывающий четверть экрана, причём не всегда пристойного содержания;  Невозможность полного переноса сайта на другой хостинг;  Нельзя устанавливать на хостинг сторонние скрипты, можно использовать только штатные;  Иногда администрация банит сайты без возможности восстановления, обжалованию не подлежит; 12

 Конструктор будет сложным для новичков;  Достаточно однообразные шаблоны. Данный конструктор очень противоречив. Если Вы новичок, то Вам будет сложно, если продвинутый пользователь - то он Вам не нужен попросту [13]. Joomla Первая версия платформы появилась в 2005 году, когда группа независимых программистов Mambo из-за разногласий с руководством покинула проект. На базе хорошо знакомого продукта разработчики создали новую CMS с открытым кодом. Впервые установленная платформа предоставляет минимальный набор инструментов для администрирования. Расширить его можно, скачав дополнительное программное расширение (Joomla! предлагает более 8000 продуктов). Панель не дает тяжелой нагрузки на сервер и экономит место на хостинге. Главные достоинства платформы: простота управления, надёжность, доступность. CMS написана на языках JavaScript и PHP. Бесплатно распространяется со стандартной общественной лицензией GPL [13]. Возможности  Быстрая смена шаблонов.  Создание неограниченного количества страниц.  Вывод календаря публикаций.  Настройка прав доступа, групповое администрирование.  Генерация случайных новостей.  Работа на серверах под управлением ОС Linux, MacOSX и других.  Расширение функционала. Преимущества  Простота настройки и управления.  Поддержка более 60-и языков. 13

 Четкая структура, понятное главное меню.  Наличие встроенного менеджера рассылки новостей, поддержка RSS.  Архив публикаций скрывает старые статьи. Недостатки  Нужно регулярно обновлять.  Слишком проста для некоторых задач (например, для создания банковского сайта). WordPress Его история берет свое начало с 12 июня 2001 года. Именно тогда Мишель Валдриги начал создание движка b2, который в последствии стал фундаментом для CMS WordPress. Через 1 год, в 2002 году к работе над проектом присоединились еще 2 человека: Мэтт Муленвиг и Майк Литтл. В свою очередь создатель данной CMS считается все же Мэтт Муленвиг, который и назвал эту систему WordPress. WordPress представляет из себя платформу с возможностью создавать одностраничные сайты, визитки, статичные страницы, LandingPage, новостные ленты и т.д [18]. Также он имеет встроенный текстовый редактор, который позволяет оформить текст по своему желанию без знания CSS [18]. Ко всему прочему имеется графический редактор, довольно простой, но в тоже время для новичка его вполне хватает [18]. Имеется большое количество шаблонов, которые пользователь может в любое время загрузить и установить на свой сайт, и они все бесплатные. Так же для упрощения работы с данной CMS в ней имеется большое колво плагинов, которые позволяют решать многие проблемы, или автоматизировать некоторые процессы. Нельзя не сказать, что история развития WordPress, как наиболее удобной и понятной платформы для создания и ведения блогов, сайтов и интернет-магазинов – только начинается. Возможности, предоставляемые системой WordPress по-настоящему огромны, команда разработчиков не 14

останавливается на достигнутых успехах и совершенствует систему каждый год. Проект развивается, появляются все более новые версии, плагины и сервисы, делающие движок WordPress оптимальным решением, как для ведения бизнеса, так и для самовыражения. Конструкторы программы Mobirise Пожалуй, это самый удобный бесплатный конструктор сайтов для самостоятельного создания сайтов в оффлайн режиме. Он предельно комфортный для новичков. Достаточно скачать архив с программкой на свой компьютер, установить, ввести свою почту и задать пароль для доступа. Создание структуры визитки здесь отнимет максимум 20-30 минут. Особенность системы – адаптированность всех сайтов, получаемых в ней, к красивому отображению на мобильных устройствах. На ПК, естественно, всё будет выглядеть тоже превосходно. Все блоки оформлены в едином стиле в рамках выбранного шаблона. Последних в привычном понимании здесь нет, есть 5 видов оформления: 2 бесплатных и 3 платных. Смотрятся они очень привлекательно, современно и заметно отличаются между собой по стилю оформления. Каждый блок уже содержит демо-контент для наглядности. Естественно, вы можете изменять оформление и содержание блоков. Можно изменить цвета, шрифты, добавить эффекты, кнопки, ссылки, заголовки и т. д. Ненужные вам элементы (стрелки, кнопки, описания и т. д.) можно выбрасывать из блоков. В Мобирайз есть возможность установки расширений, среди которых и 3 вышеупомянутых темы оформления. Adobe Muse Самое продвинутое на рынке ПО для создания сайтов. По нему создано огромное количество курсов, мануалов и прочего. Считается идеальной платформой для профессионального создания посадочных страниц. Также отлично подходит и для визиток. 15

Интерфейс программы покажется простым лишь для опытных пользователей Фотошопа. Всем остальным для его освоения понадобятся сторонние уроки, курсы или большое количество времени и терпения. Рекомендуем всё-таки воспользоваться каким-нибудь бесплатным курсом – на Ютуб их огромное количество. Сэкономите себе кучу времени. Шаблоны можно скачать как платно, так и бесплатно. Вообще, Muse располагает к самостоятельному их созданию – здесь для этого собрано огромное количество инструментов. Ваш полёт фантазии ограничен лишь уровнем навыка использования программы и, возможно, имеющимся на руках набором виджетов от сторонних разработчиков. Muse – идеальная программа для создания посадочных страниц. Если вы желаете монетизировать свою деятельность в этой нише, она вам подойдёт на все 100%. С ростом уровня мастерства сможете создавать не менее впечатляющие многостраничные сайты. Muse - выбор дизайнеров и всех тех, кто желает ими стать. ПО отличное, но не для всех [14]. Вывод Mobirise → отлично подойдёт новичкам для публикации единичного сайта – разбираться там вообще не в чем. Каждый сможет. При этом, программа бесплатная. Adobe Muse → обладает мощнейшим редактором дизайна страниц, вне конкуренции по этому параметру. Пользоваться сложно на первых порах, но потом удобно. 1.4 Выбор и установка CMS для разработки Web-ресурса «Инфошкола» Так как в данной выпускной квалификационной работе нам нужно создать Web-ресурс «Инфошкола», необходимо определится с выбором удобной CMS. Для создания данного ЭОР я решил выбрать CMS WordPress 16

из-за его простоты в установке, для которой нужен лишь локальный или виртуальный сервер, а дальше уже зависит от того какой сервер выбрали. Если был выбран локальный сервер, у меня, например, это OpenServer. (см. рисунок 1). Рисунок 1 - Папка с файлами локального сервера. Для его установки его достаточно просто скачать и запустить и все. Дальше для установки WordPress необходимо в папке domains создать папку с именем сайта и разархивировать туда скачанный архив WordPress. После запуска локального сервера правом нижнем углу рабочего стола появляется значок флажка (см. рисунок 2), при нажатии на который открывается меню сервера (см. рисунок 3) где мы можем и запустить сервер нажав на пункт «Запустить» (см. рисунок 3) и открыть наш сайт в разделе «Мои сайты» (см. рисунок 4) [18]. Рисунок 2 - значок сервера 17

Рисунок 3 - Меню локального Рисунок. 4 - Открытие сайта на сервера локальном сервере В нашем случаем папка с сайтом была названа InfoSchool. Для дальнейшей установки необходимо создать Базу Данных и пользователя для доступа к базе данных в разделе «Дополнительно – PhpMyAdmins» (См. рисунок 5). Для изначального входа в PhpMyAdmins используется логин root без пароля, после создания Базы Данных и пользователя можно будет заходить в PhpMyAdmins под созданным пользователем. Для создания Базы данных переходим в раздел «Базы данных» вводим название базы данных и нажимаем создать (см. рисунок 5). После создания базы данных, переходим в раздел «учетные записи пользователей» и нажимаем «добавить нового пользователя» заполняем поля такие как «имя», «пароль», наделяем необходимыми привилегиями и нажимаем создать (см. рисунок 5). 18

Рисунок. 5 - Создание новой базы данных и пользователя для нее После создания базы данных и пользователя, с помощью меню, открываем свой сайт, в браузере открывается страница установки CMS в которой все понятно и интуитивно, так как там всего несколько шагов в каждом их которых несколько строк в которые надо ввести данных учетной записи для доступа к сайту, для доступа к базе данных и все [18]. 2 Структура и разработка электронного образовательного ресурса «Инфошкола» 2.1 Структура Web-сайта В данном разделе представлена структура сайта. 19

Начальная страница представляет собой страницу, на которой есть несколько вкладок такие как: «Главная», «ОГЭ», «ЕГЭ», «О нас» и «Контакты» (см. рисунок 6). Рисунок 6 - Структура сайта При переходе на каждую их вкладок у нас появляется необходимая информация. «Главная страница» - страница приветствия пользователя, а также на ней будут показываться новости сайта (см. рисунок 7). Рисунок 7 - Главная страница 20

«ЕГЭ» - страница, представленная списком разделов заданий в ЕГЭ, в которых показано краткое описание каждого раздела, при нажатии «подробнее» пользователь переходит на страницу нужного раздела (см. рисунок 8). Рисунок 8 - ЕГЭ Все разделы разделяются на Часть В и Часть С. Всего в общей сложности 12 разделов информации такие как:  системы счисления  логика  графы  оперирование информацией  робот  программирование  сети и адресация. «ОГЭ» по своей конструкции похоже на «ЕГЭ» только там разделы для подготовки в ОГЭ (см. рисунок 9). 21

Рисунок 9 - ОГЭ «Контакты» - вкладка с контактной формой, с помощью которой можно отправить письмо на почту, если пользователь нашел какую-то ошибку или ему необходимо связаться для уточнения необходимого вопроса. Письмо отправляется на почту сайта «informaticschool@mail.ru» (см. рисунок 10). Рисунок 10 - Контакты 22

Также на каждой странице есть «поиск», для быстрого перехода на интересующий его раздел (см. рисунок 11). Рисунок 11 - Поиск 2.2 Используемые плагины и их описание Для удобной работы и использования WordPress были добавлены плагины. Они позволяют «по блокам» собрать необходимый функционал для разработки сайта. Для подключения плагинов можно воспользоваться библиотекой плагинов WordPress. Найти необходимы плагин можно с помощью поиска. (См. рисунок 12) Рисунок 12 - Библиотека плагинов WordPress 23

Для разработки нашего сайты были использованы такие плагины как: 1. Contact Form 7 2. Elementor 3. Duplicator 4. Google XML Sitemaps 5. Rus filename and link translit 6. Проверка нерабочих ссылок 7. Akismet Anti-Spam 8. WP-Pro-Quiz Описание плагинов Contact Form 7 Contact Form 7 может управлять многочисленными контактными формами, где вы можете гибко настраивать содержимое форм и почты с достаточно простой разметкой. Формы имеют встроенную поддержку Ajax отправки, CAPTCHA, спам фильтра Akismet и не только [16]. Elementor «Живой» конструктор. Позволяет создавать профессиональный дизайн, а также оснащен продвинутыми возможностями. С помощью него можно просто и быстро добавлять необходимые элементы на страницу, и редактировать их сразу после добавления [16]. Duplicator Главный помощник любого начинающего пользователя в делах переноса сайта. Этот плагин сам произведет все необходимые процедуры по копированию сайта и создаст простой файл установочник нашего сайта, что позволяет много кратно упростить процесс переноса сайта с локального сервера на виртуальный [16]. Google XML Sitemaps Данный плагин позволяет сделать наш сайт более «читаемым» для поисковых систем, он создает необходимые метки для отображения 24

результатов поиска и нахождения необходимых элементов на нашем сайте [16]. Rus filename and link translit Данный плагин упрощает создание ссылок и имен документов, так как многие браузеры не понимают русские буквы в адресной строке. Этот плагин автоматические переделывает русские слова в слова, написанные на латинице, что позволяет упростить процесс создания ссылок на каждую страницу [16]. Проверка нерабочих ссылок Как ясно из названия данный плагин предназначен для проверки ссылок. При создании ссылки на другую страницу, или файл возможны поправки или удаление страницы (файла), в следствии чего ссылка будет не работать. Этот плагин покажет ссылку, которая была нарушена [16]. Akismet Anti-Spam Данный плагин предназначен для защиты сайта от спама. Так как у нас будет возможность оставления комментариев в новостной зоне, нам необходим данный плагин для предотвращения спама в комментариях [16]. WP-Pro-Quiz WP Pro Quiz является одним из самых популярных плагинов тестов, доступных в репозитории плагинов WordPress. Это очень мощный плагин с большим количеством вариантов настройки [16]. Плагин позволяет создавать различные тесты с неограниченным количеством вопросов различных типов. Возможны след типы вопросов:  Единичный Выбор  Множественный Выбор  Выбор “Методом Сортировки”  “Свободный” Выбор  Выбор “Методом Матричной Сортировки”  Функция закрытого опроса  Мнение 25

Результаты могут быть предоставлены пользователям с оценками на основе их ответов и даже отправлены им по электронной почте. Также возможно составление статистики и отображения прогресса отдельного пользователя. 2.3 Руководство для пользователя При входе на сайт пользователь попадает на главную страницу (см. рисунок 13) откуда он может прочитать новости или перейти к изучению необходимой информации на вкладках «ЕГЭ», «ОГЭ». Рисунок 13 - Главная 26

При переходе на вкладку «ЕГЭ» или «ОГЭ» пользователь видит список тем доступных для изучения. Они представлены в виде «Аккордеона» для большего удобства (см. рисунок 14). Рисунок 14 - ЕГЭ Для изучения необходимой информации достаточно нажать на «подробнее» в нужном разделе, и пользователь перейдет в раздел теории (см. рисунок 15) где будут предоставлены необходимые понятия и описания разных алгоритмов, а также есть видео уроки (см. рисунок 16) для большего удобства использования. 27

Рисунок 15 - Теория Рисунок 16 - Видео уроки 28

Так же в конце каждой теории есть возможность пройти тестирований, чтобы определить уровень усвоения материала. (см. рисунок 17, см. рисунок 18) Рисунок 17 - Начало теста Рисунок 18 - Тест Данный тест позволяет посмотреть насколько хорошо был понят изученный материал, и выводит график отображающий процент правильных ответов (см рисунок 19). 29

Рисунок 19 - График теста Также дополнительно пользователь, нажав на кнопку «показать вопросы» может просмотреть где он ошибся и пояснения к вопросам (см рисунок 20). Рисунок 20 - Пояснение к вопросу 30

Однако, если при изучении информации пользователь не нашел необходимого материала он может на вкладке «Контакты» написать письмо ответственному сайта, чтобы необходимый материал был добавлен на сайт. (см. рисунок 21) Рисунок 21 - Контактная форма 31

2.4 Руководство для администратора Для входа в консоль администратора необходимо добавить в адресной строке к адресу сайта «/admin» после чего WordPress переведет нас на вход в консоль, где надо будет ввести данные администратора (логин и пароль). Логин: Admin Пароль: Admininfsch Далее мы попадаем в консоль администратора сайта, из которой производится управление и редактирование сайта. (см. рисунок 22) Рисунок 22 - Консоль администратора Далее у нас появляется список возможностей (см. рисунок 23). Пункт «Страницы» позволяет создавать и редактирование страницы (см. рисунок 23) 32

Рисунок 23 - Страницы Пункт «Записи» отвечает за создание и редактирование новостных записей (см. рисунок 24). Рисунок 24 - Записи Пункт «Внешний вид» отвечает за редактирование внешнего вида сайта, изменение шаблона и т.д. (см. рисунок 25). 33

Рисунок 25 - Внешний вид Пункт «Плагины» позволяет добавлять, подключать и отключать плагины сайта (см. рисунок 26). В данном пункте мы можем видеть название плагина, а также его описание. Рисунок 26 - Плагины 34

Пункт «Пользователи» отвечает за управление пользователями (создание новых, удаление старых, управление правами доступа) (см. рисунок 27). Рисунок 27 - Пользователи Пункт «Настройки» и «Инструменты» позволяют настройки самой консоли (см. рисунок 28). Рисунок 28 - Настройки и инструменты 35 производить

Ниже расположены все дополнительные плагины, позволяющие создание тестов, редактирование элементов страниц, создание резервных копий (см. рисунок 29). Рисунок 29 - Дополнительные плагины Elementor позволяет создавать и редактировать интерактивные объекты на странице такие как: кнопки, списки, текстовые поля, галереи, видеовставки и т.д. (см. рисунок 30). Рисунок 30 - Elementor Diplicator предназначен для создания резервных копий сайта и базы данных, а также помогает при переносе сайта с хостинга на хостинг (с локального на виртуальный) (см рисунок 31). 36

Рисунок 31 –Duplicator WP-Pro_Quiz предназначен для создания тестов (см рисунок 32). Он позволяет создать различные тесты, выводить статистику каждого пользователя, а также показывать в каких тестах была допущена ошибка. Рисунок 32 - WP-Pro-Quiz Таким образом создаются тесты для каждой темы, после чего для каждого теста создаются вопросы разных типов, описанных в разделе описания плагинов. После создания теста для добавления его на страницу, необходимо на пустую страницу добавить «Шорткод» необходимого теста (см рисунок 33, см рисунок 34). 37

Рисунок 33 - Шорткод Рисунок 34 - Тест Таким образом создается новая страница, на которую необходимо сделать ссылку из необходимого раздела, после перехода по которой откроется окно начала теста. Такой же алгоритм и для создания контактных форм, после созданий любой контактной формы у нее будет представлен «Шорткод» при добавлении которого на страницу будет создана новая контактная форма. 38

Заключение В ходе выполнения выпускной квалификационной работы были выявлены основные направления работы для выполнения поставленных целей. Основной целью работы является разработка web-ресурса для помощи в подготовки учащихся к сдаче ОГЭ и ЕГЭ. Была изучена литература и программные средства для создания webресурсов. После рассмотрения характеристик и анализа современных средств разработки web-ресурсов была определена системы управления контентом. CMS WordPress оказалась наиболее оптимальной и быстрой в изучении для выполнения поставленной цели работы. Благодаря теоретическому анализу литературы была проведена разработка web-ресурса «Инфошкола» При создании ресурса была построена структурная схема, которая помогла разобраться в конструировании webресурса. Созданный ресурс отвечает современным нормам, а также сочетает в себе удобство и функциональность. Web-ресурсом можно легко управлять в дальнейшем, что делает его удобным для администрации. В заключительной главе были описаны результаты практической части. А именно описано как был создан web-ресурс, и как им пользоваться любому пользователю, а также были описаны процессы управления web-ресурсом и его редактирование. Таким образом, считаем цель выпускной квалификационной работы достигнутой. 39

Список использованных источников 1. SITE-BUILDERS URL: https://site-builders.ru/luchshie-programmy-dljasozdanija-sajta 2. TexTerra URL: http://www.internet-technologies.ru/review-of-websitebuilder.html 3. Багирян В.Б., Смелова В.Г. Интерактивное оборудование и интернетресурсы в школе. Автореферат – Москва, 2013. – 256 с. 4. БиблиоРоссика. URL: http://www.bibliorossica.com/book.html?&currBookId=17616 5. Вишнякова А.Ю. Разработка электронного образовательного ресурса в составе информационно-методического обеспечения учебного курса. Диссертация – Екатеринбург, 2017. - 86 с. 6. ГОСТ Р 52657-2006 Информационно-коммуникационные технологии в образовании. Образовательные интернет-порталы федерального уровня. Рубрикация информационных ресурсов. 7. ГОСТ Р 53620-2009 Информационно-коммуникационные технологии в образовании. Электронные образовательные ресурсы. Общие положения 8. ГОСТ Р 7.0.83-2013 Система стандартов по информации, библиотечному и издательскому делу. Электронные издания. Основные виды и выходные сведения. 9. Записки программиста URL: https://eax.me/wordpress/ Классификация электронных образовательных ресурсов. URL: 10. http://megabook.ru/article/Электронный%20образовательный%20ресу рс. 11. Классификация электронных образовательных ресурсов. URL: https://www.intuit.ru/studies/courses/12103/1165/lecture/19307?page=2 12.Обзор CMS WordPress https://konstruktorysajtov.com/cms/wordpress 40 URL:

13. Обзор бесплатных онлайн конструкторов сайтов. URL: http://poznayka.org/s62970t1.html 14. Обзор конструкторов сайтов URL http://mylektsii.ru/1-70383.html 15. Обзор онлайн конструкторов сайтов. URL: http://www.bourabai.kz/php/constructors.htm. 16.Плагины для WordPress URL: https://ru.wordpress.org/plugins/ 17. Постников А.Н. Применение электронных образовательный ресурсов в обучении школьников на уроках информатики. // Актуальные проблемы развития науки и современного образования. Сборник научных статей II Международной научно-практической конференции. (г. Белгород, 10 апреля 2018г). 18. Постников А.Н. Разработка сайта с помощью CMS Wordpress // Актуальные проблемы развития науки и современного образования. Сборник научных статей II Международной научно-практической конференции. (г. Белгород, 10 апреля 2018г). 19. Программы для создания сайтов URL: https://uguide.ru/luchshie- programmy-dlya-sozdaniya-sajtov 20.Решу ЕГЭ URL: https://inf-ege.sdamgia.ru 21.Решу ОГЭ URL: https://inf-oge.sdamgia.ru 22. Электронные образовательные ресурсы в учебной деятельности образовательного учреждения. http://edu.iro48.ru/doc/lekciya_eor.pdf. 41 URL:

Рецензии:

Авторизуйтесь, чтобы добавить рецензию

- у работы пока нет рецензий -

Отзывы:

Авторизуйтесь, чтобы оставить отзыв