Сценарий урока по информатике и ИКТ с использованием авторского медиапродукта
Submitted by Евгения Викторовна Демина on Sat, 03/04/2010 - 20:41
Подробный конспект урока
Организационная информация
Тема урока
Структура HTML-документа. Цвет фона и текста.
Предмет
Информатика и ИКТ. Элективный курс «Создание WEB – страниц».
Класс
Девятый
Автор урока (ФИО, должность)
Демина Евгения Викторовна, учитель информатики и ИКТ.
Образовательное учреждение
Муниципальное образовательное учреждение г. Северск «СОШ № 89».
Республика/край, город/поселение
Томская область, г. Северск.
Методическая информация
Тип урока
Урок изучения новогоматериала (комбинированный, учебный практикум, исследовательская работа, тестирование).
Цели урока
Овладеть основными приемами созданияWEB - страниц на языке HTML.
Задачи урока
1) Познакомиться с основными возможностями языка HTML для создания Web-страниц.
2) Использовать медиапособие при изучении нового материала (просмотреть пособие по темам «Структура HTML-документа», «Цвет фона и текста», а также видео-уроки по этим темам – Урок 1, Урок 2).
3) Воспитывать самостоятельность учащихся – умение планировать свою деятельность, разрабатывать стратегию и план рассуждений (Индивидуальная работа, Тест).
4) Создать на компьютере собственную Web-страницу по теме урока с использованием основных тегов языка HTML.
5) Формировать творческий подход при создании собственной Web -страницы.
Знания, умения, навыки и качества, которые актуализируют/приобретут/закрепят/др. ученики в ходе урока
Основные знания
В результате изучения темы «Структура HTML-документа. Цвет фона и текста» ученик должен знать/ понимать:
· набор необходимых инструментов для создания веб-страницы /сайта;
· принципы работы с веб-редакторами;
· основные средства редактирования веб-страниц;
· типичную структуру веб-страницы и принципы проектирования сайта;
· основные принципы веб-дизайна;
· атрибуты тега<body></body>: bgcolor, text;
· структурные теги (название и назначение), HTML- код.
Основные умения
В результате изучения темы «Структура HTML-документа. Цвет фона и текста» ученик должен уметь:
· самостоятельно составлять и планировать технологическую последовательность операций;
· уметь самостоятельно находить и использовать нужную информацию;
· готовить текст и иллюстрированный материал для сайта;
· пользоваться средствами Web-редактора для написания страницы: создавать страницу, редактировать и форматировать текст и Web-страницу.
Развитие навыков:
В результате изучения темы «Структура HTML-документа. Цвет фона и текста» ученик должен:
· приобрести навыки применения средств ИКТ в повседневной жизни, при выполнении индивидуальных и коллективных проектов в учебной деятельности, при дальнейшем освоении профессий, востребованных на рынке труда;
· закрепить навыки работы в HTML-редакторе.
Развитие личностных качеств и психических процессов (Prilojenie1):
Создание учащимися собственных WEB-ресурсов приобретает все большую актуальность. В настоящее время медиапособие является ключевым дидактическим звеном информационно-коммуникационной технологии обучения в процессе подготовки конкурентоспособных учащихся (выпускников) XXI века. Медиапособие как дидактическое средство в процессе предпрофильной подготовки учащихся разработано с целью повышения информационной и коммуникативной компетенции учащихся, выработки навыков применения средств ИКТ в повседневной жизни, при выполнении индивидуальных и коллективных проектов в учебной деятельности, при дальнейшем освоении профессий, востребованных на рынке труда.
Для того чтобы создать собственную Web-страницу, ученик может воспользоваться специальными программами редактирования документов Всемирной паутины. Следует отметить, что эти программы часто ограничены в своих возможностях, содержат ошибки, иногда создают избыточный код, который поддерживается не всеми браузерами, хотя, по мнению учеников, они более просты в использовании, так как являются визуализированными. Написание HTML-кода для Web-страницы является трудоемким процессом и заключается в «ручном» способе создания кода документов Всемирной паутины на языке HTML- HyperText Markup Language (языка разметки гипертекста). В процессе предпрофильной подготовки ученик должен придти к выводу: для того, чтобы научиться создавать, программировать, «шлифовать» и раскручивать собственную Web-страницу, необходимо научиться делать это в «ручную». Только так можно познать основы HTML-кода, его возможности, преимущества перед визуализированными готовыми программами-редакторами, осознать насколько это трудоемкий процесс для разработчиков.
Ход
и содержание урока
1.Этап.Сообщение темы и постановка цели и задач урока. (На начало урока используется проектор, где на экране представляется главное окно медиапособия) (DeminaEV_MediaPosobie/menu.exe/Cлайд-кадр №1).
2.Этап.Знакомство учащихся с картой медиапособия. Прежде чем приступить к работе, учитель знакомит учащихся с картой медиапособия, а также учащимся предлагается просмотреть и прослушать краткую характеристику медиапособия, описание работы и инструкцию по выполнению контрольного теста (Слайд-кадр №2, Слайд-кадр №3).
Примечание: В виду того, что объем мультимедийного пособия имеет значительный объем, электронный модуль Обзор (Слайд-кадр №3) отключен.
Повторение основных понятий: Web-страница, Web-сайт, Web-сервер, гиперссылка, протокол передачи гипертекста, Web-браузер.
Вопросы учителя:
Подумайте над вопросами:
Приходилось ли вам работать в системе Интернет? Знаете ли вы, что такое Web-браузер? Назовите примеры Web-браузеров? Что такое Web-страница и Web-сайт? Знаете ли вы, что такое гиперссылка? Назовите примеры ссылок? Знакомы ли вы с форматами графических файлов? Назовите их? Знакомы ли вы с HTML-кодом? Что такое теги?
4. Этап.Введение новых понятий на уроке (Слайд-кадр 4.3,
Учитель предлагает посмотреть на экран, где представлен HTML -код Web-страницы, структурные теги (название и назначение), атрибуты тегов: bgcolor=blue text=red.
Используя проектор, учащиеся вместе с учителем смотрят и анализируют первую и вторую главы модуля (Слайд-кадр № 4.3) «Пособие» «Введение. Структура HTML-документа» и «Цвет фона и текста» (Слайд-кадр № 4.3.1, Слайд-кадр № 4.3.2). Учащиеся фиксируют в тетрадь основные моменты первой главы: структурные теги (название и назначение), HTML- код, а также основные моменты второй главы: атрибуты тега<body></body>: bgcolor, text.
Учитель: Ребята, в каком редакторе можно создавать Web-страницы, используя HTML-код?
Выдвижение гипотезы построения кодаWeb-страницы учащихся: Home-site, Front Page, DreamWaver.
Выявление решающей гипотезы (подготовка Web-страницы заключается в «ручном» способе создания HTML- кода в редакторе Блокнот).
5.Этап.Самостоятельная работа учащихся, учебный практикум используя медиапособие учитель предлагает учащимся надеть наушники и самостоятельно просмотреть, прослушать модуль «Видео-уроки»: Урок 1, Урок 2 (На главном меню пособия представлен в виде желтых яблок). Во время прослушивания видео-уроков, учащиеся могут фиксировать в тетрадь основные моменты.
Примечание: В виду того, что объем мультимедийного пособия имеет значительный объем, и остальные видео-уроки не используются на данном уроке, электронные модули Уроки 3,4,5,6,7,8 отключены.
После видео-уроков учитель задает вопросы учащимся: Что было не понятно при просмотре? Как вы думаете, трудоемкий ли процесс написание HTML-кода? Где располагается заголовок Web-страницы, каким тегом он обрамляется? Где находится тело программы, каким тегом оно обрамляется? Что означают атрибуты bgcolor=blue text=red? Атрибутами какого тега они являются? Назовите парные теги?
Далее учитель предлагает учащимся попытаться самим построить в редакторе Блокнот структурный код Web-страницы, следуя указаниям видео-уроков.
6. Этап.Подведение итогов, обсуждение проблемы. После того, как учащиеся попробовали самостоятельно создать первую Web-страницу, учитель подводит итог и предлагает обсудить проблему сложности создания Web-страницы в редакторе Блокнот.
Примерные ответы учащихся:
· сложно запомнить написание основных структурных тегов;
· затраты времени на написание HTML-кода;
· невозможность визуализации тегов, как, например, в программе HomeSite ;
· невозможность мгновенно просмотреть Web-страницу, только с помощью браузера.
Вопрос учителя: для чего же нужно уметь создавать Web-страницу с помощью языка разметки гипертекста HTML, используя редактор Блокнот.
Вывод (должны сделать учащиеся): Редактор Блокнот позволяет создавать Web-страницу в «ручную» с помощью HTML-кода – языка разметки гипертекста. Все страницы в Интернете представлены, с помощью HTML-кода. Любой желающий, который хочет научиться создавать правильно и структурировано Web-страницу, должен научиться делать это в «ручную». Только так можно познать основы HTML-кода, осознать насколько это трудоемкий процесс для разработчиков.
7. Этап.Исследовательская, самостоятельная, индивидуальная работа (Prilojenie.doc)по созданию собственной Web-страницы в рамках темы урока. Учитель сообщает план исследовательской работы и раздает пакеты с заданиями.
После того, как выполнено индивидуальное задание, учащимся предлагается выполнить Тест с помощью тестовой программы мультимедийного пособия (DeminaEV_MediaPosobie/menu.exe/Слайд-кадр №7) на знание теоретического материала урока.
8 Этап.Подведение итогов: учитель проводит рефлексию. В заключении урока учитель проводит рефлексию, предлагая определить ценность урока, его полезность. Выставление оценок.
Проверка и оценивание ЗУНКов
Результатом данного урока являются устная работа на уроке, готовые Web-страницы учащихся в рамках темы урока, тестирование по теме урока. В конце, программа теста автоматически подсчитывает баллы учащегося в процентном соотношении. Результаты теста выводятся на экран и анализируются учащимся самостоятельно.
1) Исследовательская, самостоятельная работа по созданию собственной Web-страницы в рамках темы урока. Учитель сообщает план исследовательской работы и раздает пакеты с заданиями. (Prilojenie.doc).
2) Тест (DeminaEV_MediaPosobie/menu.exe/Слайд-кадр №7).
Рефлексия деятельности на уроке
Тестовое задание в конце урока позволило осуществить контроль, провести рефлексию.(DeminaEV_MediaPosobie/menu.exe/Слайд-кадр№7). Интерактивный режим выполнения тестовых заданий позволяет учащимся самостоятельно определить уровень полученных теоретических знаний на уроке в процентном соотношении, а также проанализировать допущенные ошибки.
Домашнее задание
Подготовить тему для будущего Web-ресурса. Определить тип ресурса (проект, сайт, личная страничка), дизайн проекта, соответствие критериям технологичности, функциональности и экологичности.
Дополнительная необходимая информация
На уроке мною были использованы следующие методы и формы работы с учащимися:
Методы: словесный, метод практического применения знаний, метод самостоятельной работы и работы под руководством учителя, метод презентационных технологий, метод программированного обучения – с помощью обучающего устройства (программируемый электронный учебник (пособие), тестирующие, контролирующие программы).
Формы:
фронтальная работа, как наиболее целесообразная с точки зрения психологического комфорта учащихся на открытых уроках;
индивидуальная форма, позволяющая дать посильные задания учащимся;
Использованные источники и литература (если имеются)
Список использованной литературы
1. Быстро и легко создаем, программируем, шлифуем и раскручиваем web-сайт +КОМПАКТ-ДИСК: Учеб. пособ./Под ред. Алексеева Ю.М. – М.: Лучшие книги. – 2003. – 432с.
5. Web-дизайн / Под ред. Кирсанов Д. – СПб.: Символ-Плюс – 1999. – 267с.
6. Режим электронного доступа: //www.citforum.ru
Обоснование, почему данную тему оптимально изучать с использованием медиа-, мультимедиа, каким образом осуществить
Целесообразность использования
медиапродукта на занятии:
1. Недостаточное количество информационного материала в существующих учебно-методических пособиях (в учебниках нет определенных иллюстраций, кодов Web-страниц, видео изображений).
2. Повышение эффективности усвоения учебного материала за счет одновременного изложения учителем необходимых сведений, показа демонстрационных фрагментов, а также самостоятельной работы учащихся во время просмотра видео-уроков.
3. Эффективность индивидуального подхода к работе учащихся на этапе работы с видеофрагментами урока (продуктивная самостоятельная творческая деятельность, развитие способностей, индивидуальная траектория освоения материала, индивидуальное время освоения, уровневая дифференциация при подготовке контрольных заданий).
4. Развитие наглядно-образного мышления за счет повышения уровня наглядности (виртуальный эксперимент- визуализация процессов, которые трудно или невозможно рассмотреть в реальных условиях).
Советы по логическому переходу от данного урока к последующим
Логический переход от данного урока к последующим я вижу таким образом:
· в целях формирования интереса и положительной мотивации к выбранному профилю основная форма контроля за уровнем достижений учащихся в рамках элективного курса «Создание Web-сайтов» - “Student/sPortfolio”. Эта форма используется в образовательной практике для составления и пополнения коллекции самостоятельно выполненных учебных и профессиональных продуктов.
Такая форма оценивания достижений учащихся выбрана для поддержания неформального интереса к курсу, повышения учебной мотивации, проявления учебной инициативы, снятию психологического барьера перед отметкой.
Ученик получает зачет (оценку не ниже 4) при условии выполнения работы в установленный срок с учетом стандартных требований к их оформлению.
В качестве предполагаемых результатов могут быть:
· WEB-ресурсы и проекты, созданные учащимися по различным темам;
· результатом совместной деятельности учащихся может быть также организация и проведение презентаций сайтов (как школьных, так и городских);
· содержание предпрофильной подготовки включает участие в городских, областных, региональных и Всероссийских конкурсах.
Другое
Медиапродукт
«СозданиеWEB– страниц с помощью языка разметкиHTML»
1. Среда: программа Adobe Captivate3. Продукт представлен в виде файлов типа EXE (исполняемые файлы).
2. Вид мадиапродукта: Электронное (мультимедийное) образовательное пособие.
3. Технологический сценарий - подробное описание медиапродукта:
I.Краткое описание содержания интерактивных учебных кадров- экранов.
1. Главное меню (Слайд кадр №1).
2. Знакомство с медиапособием. Кнопки: КАРТА и ОБЗОР. Левый верхний угол программы. (Слайд кадр №1)
3. Модуль «Пособие» (Слайд кадр №4). Глава I «Введение. Структура HTML-документа»: структурные теги (название и назначение), HTML- код (Слайд-кадр № 4.3.1).
Прежде чем приступить к работе, учитель знакомит учащихся с картой медиапособия, а также учащимся предлагается просмотреть и прослушать краткую характеристику медиапособия, описание работы и инструкцию по выполнению контрольного теста. (Левый верхний угол программы: КАРТА и ОБЗОР).
Учебный материал программы условно делится на четыре модуля:
МодульI. Video-уроки.
Модуль Video-уроки содержит 8 video-уроков, представлен в виде желтых яблок и предназначен для изучающих тему «Создание Web-страниц с помощью языка разметки HTML» «с нуля».
МодульII.Пособие (Теоретическая часть).
Состоит из восьми разделов (тем) и содержит описание основных понятий, практических алгоритмов и шаблонов для создания Web-документов, а также необходим для систематизации полученных знаний и закрепления навыков работы в HTML-редакторе.
МодульIII. Кроссворд.
Модуль «Кроссворд» является формой итогового контроля, необязательной для выполнения. В качестве подготовки к контрольному тесту учащимся рекомендуется разгадать кроссворд, так как некоторые вопросы дублируются в тестовом задании. Кроссворд содержит 14 вопросов по горизонтали и 11 по вертикали. Недостатком является невозможность выполнения кроссворда в интерактивном режиме, так как для установки требуется специальная программа (PikOCross 2), в которой разработан кроссворд. По желанию заказчика возможно подключение программы PikOCross 2.
МодульIV. Контрольный тест.
«Контрольный тест» является обязательной формой итогового контроля. Программа теста содержит 15 вопросов вида «Да – Нет», а также множественный выбор (учащийся выбирает один вариант ответа или несколько вариантов). В случае выбора одного варианта ответа, список выбора ответов обозначается «кружком», а при выборе нескольких вариантов ответа – «квадратиком». Преимуществом программы контрольного теста является возможность интерактивного режима выполнения тестовых заданий. В конце, программа теста автоматически подсчитывает баллы учащегося в процентном соотношении. Время прохождения теста не учитывается, за каждый правильный ответ дается по 1 баллу. Каждый пропущенный вопрос программа теста воспринимает как ошибка.
