VII Международный конкурс научно-исследовательских и творческих работ учащихся
Старт в науке
ЦОР и HTML
Автор работы награжден дипломом победителя III степени
Полная версия работы доступна во вкладке "Файлы работы" в формате PDF
Введение
С появлением компьютеров и компьютерных сетей человечество вступило в эпоху перехода от индустриального к информационному обществу. Под информационным обществом принято понимать некую новую историческую фазу развития цивилизации, постиндустриальное общество, где главными продуктами производства являются информация и знания. Переходные процессы проявляются в информатизации всех сфер человеческой жизни, в изменении нашего повседневного словаря, неотъемлемой частью которого ставятся такие термины как цифровой продукт, информационные технологии, web-ресурсы и др.
Цель исследовательского проекта: исследование возможностей создания современного цифрового образовательного ресурса, используя средства только языка гипертекстовой разметки.
Задачи исследовательской работы:
Исследовать необходимость использования ЦОР потребителем.
Исследовать потребительские запросы по вопросам возможностей современных ЦОР и оформления его содержания.
Сравнить ЦОР, являющиеся web-ресурсами и самостоятельными программами.
Исследовать возможности языка HTML.
Создать ЦОР, соответствующий по своему функционалу потребительским запросам.
Актуальность исследовательской работы:
Одним из проявлений информатизации в современном образовании является цифровой образовательный ресурс (ЦОР). А нужен ли ЦОР учителям и обучающимся? Каким должен быть современный ЦОР? Каков наиболее подходящий для него способ реализации? На все эти вопросы мы постарались дать ответ в нашей работе.
Основная часть
ЦОР - это учебные (образовательные) материалы, представленные в цифровой форме (фотографии, видеофрагменты, текстовые документы, звукозаписи, картографические материалы, статические и динамические модели, объекты виртуальной реальности и интерактивного моделирования, символьные объекты и деловая графика, или другие учебные материалы, необходимые для организации учебного процесса.
Основные задачи ЦОР: помощь учителю при подготовке и проведении урока, помощь обучающимся при выполнении домашнего задания, при подготовке к экзаменам, помощь в самообучении.
По типу работы обучающихся с цифровыми образовательными ресурсами различают демонстрационные ЦОР, когда обучающийся является наблюдателем, и интерактивные (информационно-деятельностные) ЦОР, когда ученик имеет возможность не только "смотреть демонстрации", но менять сценарий, отвечать на вопросы ресурса, получить оценку своим знаниям, выполнять лабораторные и практические задания с помощью ресурса и прочее. [1]
Современное цифровое пространство изобилует различными цифровыми продуктами. Это и самостоятельные программы, и отдельные модули, запускаемые в различных приложениях и плеерах. У каждого типа есть свои преимущества и недостатки. Право выбора цифрового продукта остается за конечным потребителем. В случае ЦОР конечным потребителем являются обучающиеся и учителя. Каковы предпочтения? Каким хотят видеть цифровой образовательный ресурс учителя и обучающиеся? Это вопросы для нашего исследования.
HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства. HTML не является языком программирования. [2]
Язык HTML был разработан британским учёным Тимом Бернерсом-Ли (Рисунок 1) приблизительно в 1986—1991 годах в Швейцарии. HTML создавался как язык для обмена научной и технической документацией, как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста.
Рисунок 1. Тимом Бернерсом-Ли
Современное применение HTML очень далеко от его изначальной задачи. Например, тег <table> предназначен для создания в документах таблиц, но иногда используется и для оформления размещения элементов на странице. С течением времени основная идея платформонезависимости языка HTML была принесена в жертву современным потребностям в мультимедийном и графическом оформлении.
Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и др.). [2]
Распространенность, мультиплатформенность, простота делает язык HTML приемлемым средством для создания цифровых образовательных ресурсов.
Практическая часть
1. Исследование
Исследование проводилось в следующих направлениях: исследование потребительского спроса в отношении цифровых образовательных ресурсов и использования браузеров, сравнение ЦОР, являющихся web-ресурсами и самостоятельными программами, исследование языка HTML, как инструмента для создания ЦОР.
Для исследования необходимости использования ЦОР потребителем и потребительских запросов относительно возможностей современного ЦОР и оформления его содержания была составлена анкета и проведен опрос с использованием сервиса Google-форма технологии Web2.0. Анкета была опубликована на Школьном портале. Опросный лист состоял из 2-ух разделов. 1 раздел опроса посвящен исследованию потребительских запросов в отношении ЦОР. Раздел содержит 3 вопроса:
Оцените необходимость использования цифрового образовательного ресурса в процессе обучения (выбор единственного ответа).
Когда лучше всего использовать цифровой образовательный ресурс? (возможность выбора нескольких ответов).
Какие элементы технического оформления содержательного контента должны присутствовать в цифровом образовательном ресурсе? (возможность выбора нескольких ответов).
Второй раздел посвящен использованию браузеров, он содержит также 3 вопроса:
Как часто Вы пользуетесь браузером? (выбор единственного ответа).
Каким браузером Вы пользуетесь чаще всего? (выбор единственного ответа).
Ваш возраст (выбор единственного ответа). (Приложение 1).
В анкетировании приняли участие более70 человек.
Сравнение ЦОР, являющихся web-ресурсами и самостоятельными программами, представлено в таблице:
|
Параметры для сравнения |
Web-ресурс |
Самостоятельная программа |
|
Зависимость от операционной системы |
Не зависит |
Зависит |
|
Затраты |
Бесплатность платформы |
Затраты на лицензирование ОС (часто) |
|
Размещение |
Локальная машина, локальный сервер, сервер Интернет |
Локальная машина |
|
Известность среды |
Интерфейс среды знаком большинству обучающихся |
Незнакомый интерфейс |
Язык гипертекстовой разметки создавался как универсальный инструмент для создания красиво оформленных текстовых документов, которые можно воспроизводить, с помощью любого средства [2], исследование возможностей языка проводилось посредством изучения словарей тегов. [3]
(Приложение 2).
2. Анализ результатов исследования
Анализ результатов экспериментов проводился с помощью сервисов Google технологии Web2.0, которая позволяет совместное создание и редактирование документов в облаке. В Приложении 3 показаны диаграммы, отражающие результаты анкетирования.
В анкетировании приняли
Анализ результатов первого раздела анкетирования показал, что 2/3 респондентов считают необходимым использование ЦОР в современном образовании, при этом около половины респондентов считают, что лучше всего использовать ЦОР на уроках и для подготовки к экзаменам. Что доказывает необходимость использования ЦОР в современном образовательном процессе. В отношении потребительских запросов около 60 % респондентов хотят видеть разнообразное мультимедийное оформление содержания, более 50% - возможность самостоятельного тренинга, тексты и подробное решение задач. И только 17 % считают необходимым дополнительное озвучивание текстов теоретического материала.
Анализ результатов 2 раздела анкеты показывает, что более 95% респондентов пользуются браузерами постоянно или часто. При этом 85% респондентов отдают предпочтение таким Браузерам как Yandex и Google Chrom.
Анализ данных сравнительной таблицы ЦОР показывает, что цифровые образовательные ресурсы, являющиеся web-ресурсами, наиболее оптимальное решение в отношении: бесплатности платформы реализации (браузера), независимости от операционной системы, универсальности размещения, известности всем современным пользователям ПК (что подтверждается результатами анкетирования).
Исследование словаря тэгов HTML показало, отсутствие возможности создания интерактивных элементов ЦОР.
3. Проектирование и создание ЦОР
Работы по проектированию и созданию ЦОР проводились по следующему плану:
Выбор типа и темы ЦОР.
Подбор информационного наполнения ЦОР.
Проектирование структуры ЦОР.
Выбор дизайна.
Создание web-страниц и их взаимосвязей.
Тестирование ЦОР. Исправление ошибок кода.
В качестве темы ЦОР была выбрана одна из тем ОГЭ по информатике «Основы формальной логики», для обеспечения соответствия потребительским запросам был выбран интерактивный тип ЦОР, содержащий основной теоретический материал, тексты задач типа 2 и 12 ОГЭ, разбор и пояснения к решению задач, возможность самостоятельного тренинга.
На рисунке 2 представлена схема структуры ЦОР. Схема создавалась с помощью Интернет-ресурса https://www.spiderscribe.net/.
Рис. 2
Выбор дизайна опирался на известный психологический факт об особенности восприятия информации технарями и гуманитариями. Технари лучше воспринимают информацию, представленную на темном фоне светлым шрифтом. Учитывая то, что образовательный ресурс ориентирован на пользователя-технаря, был выбран дизайн с темным фоном и светлым шрифтом.
Написание кодов web-страниц проводилось с помощью программы Sublime Text Version 3.1.1. На Рисунке 3 представлен внешний вид программы с открытым для редактирования файлом главной странички ЦОР.
В Приложении 4 представлен внешний вид главной страницы ЦОР, а в Приложении 5 HTML-код той же страницы.
Для создания интерактивных элементов на web-страничках в коды HTML были добавлены элементы, созданные с помощью языков CSS и Javascript.
Рис. 3.
4. Практическая значимость
1. Результаты исследовательского проекта могут быть использованы на уроках информатики, занятиях внеурочной деятельности, для самостоятельных занятий при подготовке к экзаменам или к урокам по теме «Основы формальной логики», в качестве иллюстративного материала при изучении темы «Разработка и создание web-странички».
2. Работа в целом может стать частью большего исследования или основой для другого исследовательского проекта.
Выводы
Подытоживая результаты работы, можно сказать, что
1. в современном образовательном процессе необходимо использование цифровых образовательных ресурсов;
2. обучающиеся, родители и педагоги хотят видеть ЦОР с богатым мультимедийным наполнением, с наличием интерактивных элементов, обеспечивающих наглядность и возможность самостоятельного тренинга и оценивания решений задач;
3. наиболее удачным решением при создании ЦОР является web-сайт;
4. при создании ЦОР, отвечающего всем потребительским запросам, вместе с языком HTML потребовалось использование языков CSS и Javascript.
Таким образом, для создания современного ЦОР недостаточно использования только средств языка гипертекстовой разметки.
Список литературы
1. http://it.sch867.edusite.ru/digital_resources.htm (26.02.2019 9:31)
2. https://ru.wikipedia.org/wiki/HTML (26.02.2019 10:02)
3. https://html5book.ru/html-html5/ (17.12.2018 10:12)
4. https://vyuchit.work/samorazvitie/gumanitarii-i-tehnari.html (26.02.2019 14:12)
Приложение 1.
Анкета-опрос «Цифровой Образовательный Ресурс»
Приложение 2.
Словарь тэгов HTML
Приложение 3.
Результаты анкетирования
I раздел анкетирования:
1. Необходимость использования ЦОР
2. Когда лучше всего использовать цифровой образовательный ресурс?
3. Какие элементы технического оформления содержательного контента должны присутствовать в ЦОР?
II раздел анкетирования:
1. Как часто Вы пользуетесь браузером?
2. Каким браузером Вы пользуетесь чаще всего?
3. Распределение респондентов по возрастным категориям
Приложение 4.
ЦОР «Логика»
Приложение 5.
ЦОР «Логика». Коды
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="lgika.css" />
<body background="anime.jpg">
<meta charset="UTF-8">
<title>Логика</title>
<style type="text/css">body {background-size: 2600px 1100px
}</style>
</head>
<font color="Silver"><center><h1>Логика</h1></center></p></font>
<center><h1><font color="Silver"> Базовыелогическиезнания</h1></center></body>
<big><p><font size="+2.5"><font color="Silver">1</font><font color="Silver"> Инверсия – этобулевафункция, котораяпринимаетзначение 1, если... <a href="Inversia.html">Узнатьбольше.</a></big></p></font></font></p></big></font></h1></center>
<big><p><font size="+2"><font color="Silver">2</font><font color="Silver"> Конъюнкция - этосложноелогическоевыражение, котороесчитаетсяистиннымтогда, когда... <a href="Konyunkciya.html">Узнатьбольше.</p></a></big></font></font></p></big></p></big></font></h1></center>
<big><p><font size="+2"><font color="Silver">3</font><font color="Silver"> Дизъюнкция - этосложноелогическоевыражение, котороеистинно, если ...<a href="Dizyunkciya.html">Узнатьбольше.</a></font></p></big></font></p></big></p></big></p></big></font></h1></center>
<body>
<div class="side">
<ul class="menu">
<li class="menu__list"><a href="">ОГЭЗадача №2</a>
<ul class="menu__drop">
<li><a href="zadacha2.html">Задачи</a></li>
<li><a href="Ответы.html">Какрешать</a></li></ul></li>
<li class="menu__list"><a href="ОГЭЗадача 12.html">ОГЭЗадача №12</a>
<ul class="menu__drop">
<li><a href="zadacha12.html">Задачи</a></li>
</ul>
</li>
</div></body>
<style type="text/css">
A {
text-decoration: none; /*
}