МИНИСТЕРСТВО ПРОСВЕЩЕНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ
Министерство образования и науки Ростовской области
Отдел образования Администрации г. Каменск-Шахтинский
МБОУ СОШ №11 г. Каменск-Шахтинского
| РАССМОТРЕНО на заседании ШМО учителей естественно-математического цикла ________________________ Приказ №_____ от «_____»_______________г.
| СОГЛАСОВАНО Зам.директора по УВР ________________________ Приказ №_____ от «_____»_______________г.
| УТВЕРЖДЕНО Директор МБОУ СОШ № Приказ №_____ от «_____»_______________г.
|
РАБОЧАЯ ПРОГРАММА
Курса внеурочной деятельности «Современная web – разработка»
для обучающихся 10-11 классов (профильный уровень)
на 2023-2024 учебный год
Составитель: Волкова Т.Г.
г. Каменск-Шахтинский 2023
Введение
Важным условием формирования образовательной компетенции учащегося технологического профиля является умение представлять информацию в виде, удобном для восприятия и использования другими людьми. Веб-сайт – является самым популярным и доступным средством представления текстовой, графической и иной информации в сети Интернет.
Курс внеурочной деятельности «Современная Web-разработка» является курсом внеурочной деятельности для учащихся 10 и 11 классов старшей профильной школы. Занятия включают практическое освоение техники создания веб-страниц, тематических сайтов, веб-квестов, информационно-справочных и иных сайтов.
Курс рассчитан на 35 часов, которые проводятся в течение учебного года по 1 часу в неделю в 10 классе. Курс основан на использовании одного из важного интерактивного метода обучения: метода проектов. Курс служит средством внутрипрофильной специализации в области новых информационных технологий, что способствует созданию дополнительных условий для построения индивидуальных образовательных траекторий учащихся. Его задачей является также подготовка школьников к осознанному выбору Интернет-профессий, предусматривающих веб-мастеринг.
Курс может с успехом использоваться не только в технологическом, но и в других профилях старшей школы, поскольку веб-стиль деятельности относится ко всем сферам современного общества – гуманитарным, естественнонаучным, социальным, экономическим, сервисным и другим.
Особенностью предлагаемой методики является личностная и продуктивная направленность занятий. Каждый учащийся создаёт личностно значимую для него образовательную продукцию – сначала простейшие веб-страницы, затем их отдельные элементы и целостные веб-сайты. Освоение знаний и способов веб-конструирования происходит в ходе разработки учениками сайтов на темы, которые они определяют для себя самостоятельно. Осознание и присвоение учащимися достигаемых результатов происходит с помощью рефлексивных заданий. Такой подход гарантирует повышенную мотивацию и результативность обучения.
Основные цели курса:
освоить элементарные способы проектирования, конструирования, размещения и сопровождения веб-сайта в сети Интернет;
приобрести первичные навыки программирования на языке раметки гипертекста HTML;
познакомиться с основами веб-дизайна и научиться применять их при разработке веб-страниц;
создать и разместить в сети Интернет собственный веб-сайт (веб-страницы) по выбранной тематике.
Приоритетные виды и формы контроля
Проверка достигаемых учениками образовательных результатов производится в следующих формах:
текущий рефлексивный самоанализ, контроль и самооценка учащимися выполняемых заданий;
взаимооценка учащимися работ друг друга, или работ, выполненных в группах;
публичная защита выполненных учащимися творческих работ (индивидуальных и групповых);
текущая диагностика и оценка учителем деятельности школьников;
итоговая оценка деятельности и образовательной продукции ученика в соответствии с его индивидуальной образовательной программой по курсу;
итоговая оценка индивидуальной деятельности учащихся учителем, выполняемая в форме образовательной характеристики.
Планируемые результаты изучения учебного курса.
В рамках данного курса учащиеся должны овладеть следующими знаниями, умениями и способами деятельности:
знать принципы и структуру устройства "Всемирной паутины", формы представления и управления информацией в сети Интернет;
уметь найти, сохранить и систематизировать необходимую информацию из сети с помощью имеющихся технологий и программного обеспечения;
знать виды веб-сайтов, уметь произвести анализ и сформулировать собственную позицию по отношению к их структуре, содержанию, дизайну и функциональности;
уметь спроектировать, изготовить и разместить в сети веб-сайт объемом 5-10 страниц на заданную тему;
уметь программировать на языках HTML;
знать и уметь применять при создании веб-страницы основные принципы веб-дизайна;
владеть способами работы с изученными программами (браузеры, редакторы сайтов, Flash, FTP и др.);
уметь передавать информацию в сеть Интернет с помощью протокола FTP, специальных программ, веб-форм;
владеть приемами организации и самоорганизации работы по изготовлению сайта;
иметь опыт коллективного сотрудничества при конструировании веб-сайтов;
иметь опыт разработки и публичной защиты созданного сайта;
осуществлять рефлексивную деятельность, оценивать свои результаты, корректировать дальнейшую деятельность по сайтостроительству.
Критерии оценивания знаний, умений и навыков
Основой оценивания деятельности каждого ученика являются результаты анализа его образовательной продукции и деятельности по ее созданию.
Предметом диагностики, контроля и оценки в данном курсе являются:
внешние образовательные продукты учеников: созданные ими веб-страницы, их элементы, сайты и т.п.;
внутренние личностные качества учеников: освоенные ими способы деятельности, знания, умения, которые относятся к содержанию курса.
Качество образовательной продукции учеников оценивается по устанавливаемым в каждом случае критериям. Например, созданный учеником веб-сайт (веб-страница) может быть оценен по следующим критериям:
идея сайта,
соответствие структуры и содержания сайта его назначению;
степень оригинальности, количество творческих элементов сайта;
дизайн сайта, использованные графические возможности;
уровень технического исполнения сайта;
интерактивность сайта;
пользовательские возможности сайта, удобство его использования.
Для диагностики освоенных учеником умений и способов деятельности применяются рефлексивные задания. Ученик устно или письменно описывает этапы своей деятельности, возникающие проблемы, применяемые способы их решения. Рефлексивные материалы учеников служат предметом оценки уровня развития их личностных качеств – знаний, умений, способностей.
Учитель оценивает уровень развития личностных качеств учеников по параметрам, сгруппированным в определенные блоки: технические качества, дизайнерские, коммуникативные, креативные, когнитивные, оргдеятельностные, рефлексивные.
Оценка имеет различные способы выражения – устные суждения педагога, письменные качественные характеристики, систематизированные по заданным параметрам аналитические данные, в том числе и рейтинги.
Оценке подлежит, в первую очередь, уровень достижения учеником минимально необходимых результатов, обозначенных в программе курса. Оцениванию подлежат также те направления и результаты деятельности учеников, которые определены в рабочей программе учителя и в индивидуальных образовательных программах учеников.
Ученик выступает полноправным субъектом оценивания. Одна из задач педагога – обучение детей навыкам самооценки. С этой целью учитель выделяет и поясняет критерии оценки, учит детей формулировать эти критерии в зависимости от поставленных целей и особенностей образовательного продукта – создаваемого сайта.
Содержание курса внеурочной деятельности
| Название раздела | Количество часов | Основное содержание по темам |
| Моя веб-страница
| 6 | Основные понятия: гипертекст, HTML, тег, браузер, веб-страница, разметка, структура документа, заголовок, тело. Содержание темы: Техническая часть. Что необходимо для работы. Теги HTML Структура веб-страницы Заголовок документа Тело документа Атрибуты тегов Цвет фона Изображение как фон Цвет текста Цвета Размер и форма шрифта Теги форматирования текста Взаимодействие тегов Текстовые блоки Заголовки Абзацы Перевод строки Разделительная линия Обобщение Творческая работа "Самопрезентация" |
| Графика | 2 | Основные понятия: растровый формат, векторный формат, метафайлы, рамка изображения, выравнивание, обтекание. Содержание темы: Рисунки и фотографии в сети Интернет Параметры графического файла Форматы графических файлов Растровые форматы JPEG GIF PNG Достоинства растрового формата Недостатки Векторные форматы Достоинства Недостатки Метафайлы Дополнительная информация Графические редакторы Как создать графический файл для веб-страницы Прозрачная графика Связывание графического файла с HTML-документом Изображения в HTML-документе Дополнительная информация В помощь читателям веб-страниц В помощь дизайнерам Обобщение Творческая работа "Сделай красиво!" |
| Гипертекстовый документ
| 3 | Основные понятия: организация информации, гипертекстовые ссылки, внутренние ссылки, активные ссылки, посещенные ссылки, абсолютные адреса, относительные адреса. Содержание темы: Способы организации гипертекстовых документов Разработка сценария гипертекстового документа, состоящего из нескольких файлов Гипертекстовые ссылки За пределами документа Текстовые ссылки Изображения-ссылки Главный тег интернета Абсолютные адреса Относительные адреса Новое окно Внутренние ссылки. Задание цвета ссылок на веб-странице Задание цвета отдельных ссылок Цвет и наличие рамок у изображений ссылок Ссылка на адрес электронной почты Обобщение Творческая работа. Выполнение и защита проекта на одну из тем (сайт "Мой класс", "Наш фэн-клуб" и т.п.) |
| Виды сайтов
| 4 | Основные понятия: Виды сайтов, критерии оценки, дизайн, навигация, эргономика, юзабилити, интерактивность. Содержание темы: Типы сайтов, их назначение. Способы организации информации. Оптимизация веб-страниц. Удобство использования сайта. Основные методы юзабилити. Восприятие информации. Критерии оценки сайтов. Юзабилити. Структура и навигация. Контент (содержание). Внешний вид. Обратная связь. Интерактивность. Обобщение Творческая работа. Доработка оценочной таблицы и исследование выполненных проектов. |
| Основы HTML
| 8 | Основные понятия: списки, таблицы, фреймы, формы. Содержание темы: Таблицы. Лишние ячейки. Пустые ячейки Объединение ячеек. Разделение ячейки. Вложенные таблицы Цвета фона. Цвет рамки. Поля. Фреймы Как работают фреймы. Достоинства фреймов. Недостатки фреймов. Создание фреймов. Ссылки внутри фреймов. Рамки. Изменение размеров. Полосы прокрутки. Плавающие фреймы. Фреймы – хорошо или плохо? Формы Добавление формы на страницу. Кнопки. Submit. Reset. Обобщение Творческая работа. Выполнение и защита проекта на тему по выбору. |
| Редакторы сайтов | 4 | Основные понятия: Редактор веб-страниц, активные элементы, динамический язык, баннер, сервер. Содержание темы: Создание нового сайта Настройка характеристик веб-страницы Фон Текст Изображения Гиперсылки Настройка предпочтений для редактирования сайта Использование таблиц Использование слоев Использование фреймов Панель навигации Доступ к HTML-коду веб-страницы |
| Основы веб-дизайна | 4 | Основные понятия: Дизайн, векторная и растровая графика, графический редактор, инструменты, фильтры, графические примитивы, палитра цветов, формат графического файла, заголовки, текст, разделы, ссылки, термины, эффективность рекламы. Содержание темы: Элементы веб-страницы. Информационная архитектура. Макет страницы. Модульная сетка. Виды сеток. Текст. Оформление ссылок. Форматирование текста. Понятность и читаемость текста. Основные элементы текста. Фон. Графические элементы. Навигационная система. Типы. Логотип. Интерактивность. Особенности начальной страницы. Основные принципы веб-дизайна. Уменьшение размера текста и графики. Разделение пространства страницы. Исключение длинных колонок. Изображения в миниатюре. Управление внешним видом сайта. Совмещение неизменных и различающихся элементов сайта. Фон. Текст. Месторасположение эмблемы и навигационных элементов. Тема, название и заголовки. Изображения. Внесение разнообразия. Повторение стандарта. Композиция веб-страницы. Основные правила композиции. Средства композиции. Цвет. Психология цвета. Отдельные цвета. Средства веб-дизайна. Инструменты веб-дизайнера. Это может быть интересным. Обобщение. Web-мастеру: полезные советы. Web-мастеру: правила хорошего HTML. Web-мастеру: Что такое стильный дизайн? Web-мастеру: Шрифтовое оформление в web-дизайне. Web-мастеру: Главные ошибки в web-дизайне. Web-мастеру: Юзабилити. Неписаные правила. На заметку. Творческая работа "Сайт класса должен быть классным!" |
| Зачетная работа
| 4 | Основные понятия: Веб-студия: заказчик, арт-директор, веб-мастер, кодер, программист, верстальщик, менеджер. Техническое задание. Разделение труда. Проектирование, изготовление, размещение, тестирование сайта. Экспертная оценка. Содержание темы: Выбор темы сайта. Заказчик сайта. Создание команды. Распределение функций. Техническое задание. Этапы и сроки выполнения работ. Разработка сайта. Особенности групповой деятельности разработчиков сайта. Зачетная оценка. Защита проекта. |
| № | Дата | Тема урока | Виды и формы контроля |
|
| Введение. Техническая часть. Теги HTML. | рефлексия |
|
| Структура веб-страницы | самоценка |
|
| Заголовок документа Тело документа Атрибуты тегов Цвет фона. | рефлексия |
|
| Размер и форма шрифта. Теги форматирования текста. | самоценка |
|
| Взаимодействие тегов Текстовые блоки. | рефлексия |
|
| Заголовки. Абзацы. Перевод строки. Разделительная линия. | текущая диагностика |
|
| Рисунки и фотографии в сети Интернета. Параметры графического файла. Форматы графических файлов. | рефлексия |
|
| Достоинства растрового формата. Недостатки. Векторные форматы. | самоценка |
|
| Связывание графического файла с HTML-документом. Изображения в HTML-документе. | рефлексия |
|
| Гипертекстовые ссылки. Текстовые ссылки. Изображения-ссылки. | самоценка |
|
| Абсолютные адреса. Относительные адреса. Внутренние ссылки. Ссылка на адрес электронной почты. | рефлексия |
|
| Задание цвета отдельных ссылок. Цвет и наличие рамок у изображений. | текущая диагностика |
|
| Проектная работа – создание тематического сайта | рефлексия |
|
| Виды сайтов, их назначение. | самоценка |
|
| Способы организации информации. Полнота информации и ее обновление. | рефлексия |
|
| Графический и технический дизайн. Навигация. Скорость загрузки страниц и определяющие факторы. | самоценка |
|
| Интерактивность сайта. Интернет-технологии. Исследование действующих сайтов. Критерии оценки сайтов. | текущая диагностика |
|
| Таблицы. Лишние ячейки. Пустые ячейки. Вложенные таблицы. | рефлексия |
|
| Объединение ячеек. Разделение ячейки. | самоценка |
|
| Цвета фона. Поля. Фреймы. | рефлексия |
|
| Формы. Метатеги. | самоценка |
|
| Создание нового сайта. Создание новых файлов и папок. Настройка характеристик веб-страницы. | рефлексия |
|
| Фон. Текст. Изображения. Гиперссылки. | самоценка |
|
| Использование таблиц. Использование слоев. Использование фреймов. | рефлексия |
|
| Логотип. Фирменный стиль. Цветовая гамма. Макет дизайна. Верстка и оптимизация веб-страниц. | самоценка |
|
| Информационное наполнение сайта (контент). Заголовки. Текст. Привлечение внимания. Соответствие содержанию. | рефлексия |
|
| Термины. Конкретность. Простота. Краткость. Расположение элементов на сайте. Графические элементы. | самоценка |
|
| Логичность изложения. Орфография. Анимация. Баннеры. | рефлексия |
|
| Каскадные таблицы стилей.
| самоценка |
|
| Создание таблицы стилей.
| рефлексия |
|
| Проектная работа – создание тематического сайта | самоценка |
|
| Проектная работа – создание тематического сайта | рефлексия |
|
| Проектная работа – создание тематического сайта | самоценка |
|
| Защита выполненных проектов. | публичная защита |
|
| Защита выполненных проектов. | публичная защита |
| По программе: 35 часов По факту: |
217
140 103 
