Рабочая программа внеурочной деятельности «Веб-дизайн»

Муниципальное общеобразовательное учреждение Елаурская средняя школа

имени Героя Советского Союза А.П. Дмитриева

РАССМОТРЕНО На заседании МО учителей математики и информатики Протокол №___от «___»_______2019г.

СОГЛАСОВАНО Заместитель директора по УВР _________________/ ______________  «____»____________2019г.

УТВЕРЖДАЮ Директор _________________/ __________ Приказ №_____ от «____»_________2019г.

Рабочая программа

внеурочной деятельности «Веб-дизайн»

для 7-8 классов

Учитель: _____________________________

Срок реализации программы: _______________________

Количество часов по учебному плану: всего 35 часа, 1 час в неделю

Планирование составлено на основе программы внеурочной деятельности «Веб-дизайн» (автор Д.Г. Жемчужников), опубликованной в сборнике Информатика. Примерные рабочие программы курсов внеурочной деятельности. 5-6, 7-9 классы: учебно-методическое пособие / под ред. Л.Л. Босовой..-М. : БИНОМ. Лаборатория знаний, 2019.-136с.

Рабочую программу составила _________________/_______________________________

1.     Планируемые результаты

Предметные:

	Требование ФГОС ООО	Чем достигается
1	Формирование информационной и алгоритмической культуры; формирование представления о компьютере как  универсальном устройстве обработки информации; развитие основных навыков и умений использования компьютерных устройств.	Урок 1. Знакомство с технологиями веб- разработки Урок 2. Структура HTML-документа. Содержимое блока заголовков Урок 9. Основы CSS. Практикум. Верстка одностраничного сайта Урок 13. Блоки-контейнеры. Блочная модель в CSS Урок 14. Практикум. Верстка одностраничного сайта
2	Формирование представления об основных изучаемых понятиях: информация, алгоритм, модель и их свойствах.	Урок 1. Знакомство с технологиями веб-разработки Урок 2. Структура HTML-документа. Содержимое блока заголовков Урок 4. Гиперссылки Урок 9. Основы CSS Урок 10. Селекторы. Приоритеты стилей. Каскадность Урок 13. Блоки-контейнеры. Блочная модель в CSS
3	Развитие алгоритмического мышления, необходимого   для профессиональной деятельности в современном обществе; развитие умений составить и записать алгоритм для конкретного исполнителя; формирование знаний об алгоритмических конструкциях, логических значениях и операциях;  знакомство  с одним из языков программирования и основными алгоритмическими структурами  — линейной, условной и циклической.	Урок 1. Знакомство с технологиями веб-разработки Урок 4. Гиперссылки Урок 9. Основы CSS Урок 10. Селекторы. Приоритеты стилей. Каскадность Урок 13. Блоки-контейнеры. Блочная модель в CSS Урок 14. Практикум. Верстка одностраничного сайта Урок 15. Практикум. Продолжение верстки Урок 16. Практикум. Адаптивная верстка
4	Формирование умений формализации и структурирования информации, умения выбирать способ представления данных в соответствии с поставленной задачей — таблицы, схемы, графики, диаграммы, с использованием соответствующих программных средств обработки данных.	Урок 2. Структура HTML-документа. Содержимое блока заголовков Урок 3. Форматирование текста. Физическое и логическое форматирование. Списки. Урок 4. Гиперссылки Урок 7. Таблицы Урок 8. Цвета
5	Формирование навыков и умений безопасного и  целесообразного поведения при работе с компьютерными  программами  и в  Интернете,  умения  соблюдать нормы информационной этики и права.	Урок 1. Знакомство с технологиями веб- разработки Урок 4. Гиперссылки Урок 5. Изображения Урок 6. Изображения. Видео

Личностные:

·                     широкие познавательные интересы, инициатива  и любознательность, мотивы познания и творчества; готовность и способность учащихся к саморазвитию и реализации творческого потенциала  в духовной и предметно-продуктивной деятельности за счет развития их образного, алгоритмического и логического мышления;

·                     готовность к повышению своего образовательного уровня и продолжению обучения с использованием средств и методов информатики и ИКТ;

·                     интерес к информатике и ИКТ, стремление использовать полученные знания в процессе обучения другим предметам и в жизни;

·                     способность увязать учебное содержание с собственным жизненным опытом и личными смыслами, понять значимость подготовки в области информатики и ИКТ в условиях развития информационного общества;

·                     готовность к самостоятельным поступкам и действиям, принятию ответственности за их результаты; готовность к осуществлению индивидуальной и коллективной информационной деятельности;

·                     развитие чувства личной ответственности за качество окружающей информационной среды;

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

Метапредметные:

·                     владение основными общеучебными умениями информационно-логического характера: анализ объектов и ситуаций;  синтез как составление целого из частей и самостоятельное достраивание недостающих компонентов;

·                      владение умениями организации собственной учебной деятельности, включающими: целеполагание как постановку учебной задачи; планирование с учетом конечного результата, разбиение задачи на подзадачи,  разработка последовательности и структуры действий,  необходимых для достижения цели при помощи фиксированного набора средств; прогнозирование; контроль – интерпретация полученного результата, его соотнесение с имеющимися данными с целью установления соответствия или несоответствия (обнаружения ошибки); коррекция – внесение необходимых дополнений и корректив в план действий в случае обнаружения ошибки;  оценка – осознание учащимся того, насколько качественно им решена учебно-познавательная задача;

·                     широкий спектр умений и навыков использования средств информационных и коммуникационных технологий для сбора, хранения, преобразования и передачи различных видов информации (работа с текстом, гипертекстом, звуком и графикой в среде соответствующих редакторов; навыки создания личного информационного пространства;

·                      владение базовыми навыками исследовательской деятельности, проведения виртуальных экспериментов; владение способами и методами освоения новых инструментальных средств;

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

2.     Содержание программы

Урок 1. Знакомство с технологиями веб-разработки

Теоретическая часть

Обзор базовых технологий разработки. Выбор инструментов. Знакомство с HTML. Создание тестовой первой страницы.

Практическая деятельность

Подбор материалов для индивидуального проекта.

Урок 2. Структура HTML-документа. Содержимое блока заголовков

 Теоретическая часть

Изучение структуры веб-страницы, возможного содержимого блока <head>.

Мета-теги. Комментарии.

Определение структуры и дизайна индивидуального проекта.

Проектная работа

Разработка блока заголовков индивидуального проекта. Создание индивидуальных элементов (заголовков, ключевых слов, иконок и т. д.) своих страниц.

Урок 3. Форматирование текста. Физическое и логическое форматирование. Списки.

Теоретическая часть

Обзор тегов форматирования текста. Теги физического и логического форматирования текста, списков. Организация рабочего места разработчика.

Практическая деятельность

Форматирование текстового контента.

Урок 4. Гиперссылки

Теоретическая часть

Изучение типов гиперссылок и вариантов их применения. Файловая структура. Внутренние и внешние ссылки. Знакомство со ссылками-якорями.

Проектная работа

Размещение контента в индивидуальном проекте. Создание перекрестных ссылок.

Урок 5. Изображения

Теоретическая часть

Углубленное изучение параметров тега изображения. Единицы измерения. Изучение вариантов форматирования изображений в HTML.

Проектная работа

Подготовка и размещение изображений в индивидуальном проекте.

Урок 6. Изображения. Видео

Теоретическая часть

Форматы изображений для веб-дизайна и принципы их использования. Растр и вектор. Принципы подготовки изображений для веб-дизайна. Анимированные изображения. Вставка видео на веб-страницу.

Практическая деятельность

Обработка изображений. Вставка видео и фрейма.

Урок 7. Таблицы

Теоретическая часть

Изучение средств HTML для создания таблиц. Варианты применения таблиц. Объединение и форматирование ячеек.

Практическая деятельность

Организация табличного представления информации.

Урок 8. Цвета

Теоретическая часть

Изучение вариантов определения цветов в HTML. Обзор теории цвета. Цветовой круг, модель Иттена. Обзор принципов создания гармоничных цветовых схем.

Практическая деятельность

Подбор цветовой схемы для индивидуального проекта.

Урок 9. Основы CSS

Теоретическая часть

Обзор назначения, синтаксиса и применения каскадных стилей. Изучение вариантов размещения стилей.

Проектная работа

Применение стилей в индивидуальном проекте. Подключение шрифтов Google.

Урок 10. Селекторы. Приоритеты стилей. Каскадность

Теоретическая часть

Виды селекторов CSS: селекторы тегов, классов, идентификаторов, групп. Понятие класса. Селекторы дочерних и сестринских элементов, потомков. Понятие наследования. Каскадность стилей. Расчет и определение приоритетов стилей.

Практическая деятельность

Применение стилевых правил к основному контенту индивидуального проекта.

Урок 11. Стилевые свойства текста

Теоретическая часть

Обзор применения CSS стилей для текста и списков. Цвет, шрифт, размер, начертание, трансформация, декорирование текста. Интервалы, выравнивание.

Проектная работа

Создание стилевых правил для текстов в индивидуальном проекте.

Урок 12. Стилевые свойства графики

Теоретическая часть

Обзор применения CSS стилей для графических элементов. Фоновые изображения: повтор, позиция, размер. Цвет и градиент. Рамки, отступы, тени. Примеры применения различных эффектов к изображениям.

Проектная работа

Применение стилей к изображениям в индивидуальном проекте.

Урок 13. Блоки-контейнеры. Блочная модель в CSS

Теоретическая часть

Изучение применения блоков-контейнеров и их видов при взаимном расположении элементов. Внешние и внутренние отступы. Блочные, строчные, гибридные элементы. Подготовка к блочной верстке веб-страницы. Практика применения отступов, обтекания. Понятие потока документа.

Практическая деятельность

Подготовка материалов к верстке одностраничного сайта.

Урок 14. Практикум. Верстка одностраничного сайта

Теоретическая часть

Объединение содержимого HTML и разметки CSS. Создание базовых стилей веб-страницы. Вопросы адаптивности. Размещение блоков контента на страницах индивидуального проекта. Форматирование контента и применение стилей.

Проектная работа

Верстка одностраничного сайта в индивидуальном проекте.

Урок 15. Практикум. Продолжение верстки

Теоретическая часть

Объединение содержимого HTML и разметки CSS. Разработка шапки и навигационных панелей. Разработка стилей блоков основного контента. Обтекание, вычисление ширины блоков. Резиновая верстка. Разработка подвала. Форматирование контента и применение стилей.

Проектная работа

Верстка одностраничного сайта в индивидуальном проекте.

Урок 16. Практикум. Адаптивная верстка

Теоретическая часть

Типы  верстки.  Изучение  принципов  адаптивной  верстки.  Наборы  стилей. Медиа-запросы.        Ограничения по        ширине          и другим        параметрам    экрана. Брейк-пойнты. Создание полностью адаптивной веб-страницы.

Проектная работа

Верстка адаптивного сайта в индивидуальном проекте.

3.     Тематическое планирование

№	Тема	Количество часов
		всего	теория	практика
Основы языка разметки HTML
1	Знакомство с технологиями веб-разработки. Структура HTML-документа	3	2	1
2	Физическое и логическое форматирование. Списки.	2	1	1
3	Гиперссылки	2	1	1
4	Изображения и видео	2	1	1
5	Таблицы	2	1	1
6	Цвета	1	1
Итого		12	7	5
Основы таблиц стилей CSS
7	Принципы	1	1
8	Селекторы. Приоритеты стилей. Каскадность	2	1	1
9	Стилевые свойства текста	2	1	1
10	Стилевые свойства графики	2	1	1
11	Блоки-контейнеры. Блочная модель в CSS	1	1
Итого		8	5	3
Практикум
12	Верстка одностраничного сайта	10	3	7
13	Адаптивность верстки	2	1	1
Итого		12	4	8
14	Резерв	3	1	2
Итого по всем разделам		35	17	18

Календарно-тематическое планирование

№ урока	Тема урока	Кол-во часов	Основное содержание	Планируемые результаты (предметные)	Оборудование, ЭОР	Дата
						план	факт
Основы языка разметки HTML (12ч)
1	Знакомство с технологиями веб-разработки.	1	Обзор базовых технологий разработки. Выбор инструментов. Знакомство с HTML. Создание тестовой первой страницы.	Формирование информационной и алгоритмической культуры; формирование представления о компьютере как  универсальном устройстве обработки информации; развитие основных навыков и умений использования компьютерных устройств. Формирование представления об основных изучаемых понятиях: информация, алгоритм, модель и их свойствах. Развитие алгоритмического мышления, необходимого   для профессиональной деятельности в современном обществе; развитие умений составить и записать алгоритм для конкретного исполнителя; формирование знаний об алгоритмических конструкциях, логических значениях и операциях;  знакомство  с одним из языков программирования и основными алгоритмическими структурами  — линейной, условной и циклической. Формирование умений формализации и структурирования информации, умения выбирать способ представления данных в соответствии с поставленной задачей — таблицы, схемы, графики, диаграммы, с использованием соответствующих программных средств обработки данных. Формирование навыков и умений безопасного и  целесообразного поведения при работе с компьютерными  программами  и в  Интернете,  умения  соблюдать нормы информационной этики и права.	Интерактивная доска, ПК
2-3	Структура HTML-документа	2	Изучение структуры веб-страницы, возможного содержимого блока <head>. Мета-теги. Комментарии. Определение структуры и дизайна индивидуального проекта		Интерактивная доска, ПК
4-5	Физическое и логическое форматирование. Списки.	2	Обзор тегов форматирования текста. Теги физического и логического форматирования текста, списков.		Интерактивная доска, ПК
6-7	Гиперссылки	2	Изучение типов гиперссылок и вариантов их применения. Файловая структура. Внутренние и внешние ссылки. Знакомство со ссылками-якорями.		Интерактивная доска, ПК
8-9	Изображения и видео	2	Углубленное изучение параметров тега изображения. Единицы измерения. Изучение вариантов форматирования изображений в HTML. Анимированные изображения. Вставка видео на веб-страницу.		Интерактивная доска, ПК
10-11	Таблицы	2	Изучение средств HTML для создания таблиц. Варианты применения таблиц. Объединение и форматирование ячеек.		Интерактивная доска, ПК
12	Цвета	1	Изучение вариантов определения цветов в HTML. Обзор теории цвета. Цветовой круг, модель Иттена. Обзор принципов создания гармоничных цветовых схем.		Интерактивная доска, ПК
Основы таблиц стилей CSS (8ч)
13	Принципы	1	Обзор назначения, синтаксиса и применения каскадных стилей. Изучение вариантов размещения стилей.	Формирование информационной и алгоритмической культуры; формирование представления о компьютере как  универсальном устройстве обработки информации; развитие основных навыков и умений использования компьютерных устройств. Формирование представления об основных изучаемых понятиях: информация, алгоритм, модель и их свойствах. Развитие алгоритмического мышления, необходимого   для профессиональной деятельности в современном обществе; развитие умений составить и записать алгоритм для конкретного исполнителя; формирование знаний об алгоритмических конструкциях, логических значениях и операциях;  знакомство  с одним из языков программирования и основными алгоритмическими структурами  — линейной, условной и циклической.	Интерактивная доска, ПК
14-15	Селекторы. Приоритеты стилей. Каскадность	2	Виды селекторов CSS: селекторы тегов, классов, идентификаторов, групп. Понятие класса. Селекторы дочерних и сестринских элементов, потомков. Понятие наследования. Каскадность стилей. Расчет и определение приоритетов стилей.		Интерактивная доска, ПК
16-17	Стилевые свойства текста	2	Обзор применения CSS стилей для текста и списков. Цвет, шрифт, размер, начертание, трансформация, декорирование текста. Интервалы, выравнивание.		Интерактивная доска, ПК
18-19	Стилевые свойства графики	2	Обзор применения CSS стилей для графических элементов. Фоновые изображения: повтор, позиция, размер. Цвет и градиент. Рамки, отступы, тени. Примеры применения различных эффектов к изображениям.		Интерактивная доска, ПК
20	Блоки-контейнеры. Блочная модель в CSS	1	Изучение применения блоков-контейнеров и их видов при взаимном расположении элементов. Внешние и внутренние отступы. Блочные, строчные, гибридные элементы. Подготовка к блочной верстке веб-страницы. Практика применения отступов, обтекания. Понятие потока документа.		Интерактивная доска, ПК
Практикум (15ч)
21-30	Верстка одностраничного сайта	10	Объединение содержимого HTML и разметки CSS. Создание базовых стилей веб-страницы. Вопросы адаптивности. Размещение блоков контента на страницах индивидуального проекта. Форматирование контента и применение стилей. Разработка шапки и навигационных панелей. Разработка стилей блоков основного контента. Обтекание, вычисление ширины блоков. Резиновая верстка. Разработка подвала. Форматирование контента и применение стилей.	Формирование информационной и алгоритмической культуры; формирование представления о компьютере как  универсальном устройстве обработки информации; развитие основных навыков и умений использования компьютерных устройств. Формирование представления об основных изучаемых понятиях: информация, алгоритм, модель и их свойствах. Развитие алгоритмического мышления, необходимого   для профессиональной деятельности в современном обществе; развитие умений составить и записать алгоритм для конкретного исполнителя; формирование знаний об алгоритмических конструкциях, логических значениях и операциях;  знакомство  с одним из языков программирования и основными алгоритмическими структурами  — линейной, условной и циклической.	Интерактивная доска, ПК
31-32	Адаптивность верстки	2	Типы  верстки.  Изучение  принципов  адаптивной  верстки.  Наборы  стилей. Медиа-запросы. Ограничения по            ширине           и другим            параметрам экрана. Брейк-пойнты. Создание полностью адаптивной веб-страницы.		Интерактивная доска, ПК
33-35	Резерв	3			Интерактивная доска, ПК