«Web-программирование»

(элективный курс для учащихся 10-11 классов)

1. Комплекс основных характеристик программы

Пояснительная записка

Дополнительная образовательная программа «Web-дизайн» предназначена для работы в учреждениях дополнительного образования с обучающимися образовательных учреждений, желающими овладеть основами программирования и web-дизайна. Основными задачами в работе является ориентация на максимальную самореализацию личности, личностное и профессиональное самоопределение, социализацию и адаптацию детей в обществе. Таким образом, целью программы на всех этапах ее реализации является создание поля самоактуализации для детей в техническом виде деятельности (web-дизайне), формирование потребности ребёнка в приобретении специальных знаний и навыков, подготовить детей к осознанному выбору профессии и жизненного пути.

Дополнительная общеразвивающая программа разработана с помощью методической литературы и личного опыта педагога в учреждении дополнительного образования.

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

Уровень освоения базовый

Направленность (профиль) программы – техническая.

Актуальность программы - Одна из задач обучения информатике состоит в содействии прогрессивному изменению личностных качеств и свойств нового поколения в направлении, соответствующем стилю жизнедеятельности в условиях информационного общества. Поэтому основной задачей учебных курсов информационно-технологической направленности является обогащение индивидуальности учащихся и высвобождение их творческого потенциала в процессе освоения средств информационных технологий. В этом смысле умение целесообразно использовать информацию, выявлять в ней факты и проблемы, структурировать и преобразовывать информацию в текстовую и мультимедийную формы, применять её для решения возникающих задач является адекватным ответом на поставленную задачу.

Умение представлять преобразованную информацию, учитывая особенности восприятия других людей, — важное условие образовательной компетентности учащихся, выбравших кружок «Web-дизайн». Web-сайт является хорошо известным и доступным ученикам средством представления текстовой, графической и иной информации в сети Интернет.

Очень важно то, что активизация познавательного процесса позволяет учащимся более полно выражать свой творческий потенциал и реализовывать собственные идеи в изучаемой области знаний, создаёт предпосылки по применению освоенных способов сайтостроения в других учебных курсах, а также способствует возникновению дальнейшей мотивации, направленной на освоение интернет-профессий, предусматривающих web-мастеринг.

Программа кружка включает в себя практическое освоение техники создания web-страниц, тематических сайтов, а также информационно-справочных и других сайтов.

Тесная связь стиля деятельности, сформированного интернет-технологиями, со всеми сферами современного общества (гуманитарной, естественнонаучной, социальной, экономической и др.) позволяет использовать знания, выработанные при освоении программы кружка «Web-дизайн», практически во всех образовательных областях старшей школы.

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

Новизна дополнительной общеразвивающей программы предполагает:

• новое решение проблем дополнительного образования;

• новые методики преподавания;

• новые педагогические технологии в проведении занятий.

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

Адресат программы – 15 - 17 лет. / 10-11 классы

Объём программы – Программа предусматривает 68 часов, занятия проводятся 1 раз в неделю по 2 часа, с перерывом между занятиями 10-15 минут.

Формы обучения и виды занятий:

Занятия предполагают практическое выполнение индивидуальных и групповых заданий, а так же выполнение проектной работы в области Интернет-технологий.

1.2 Цели и задачи программы

Общепедагогическая направленность занятий — гармонизация индивидуальных и социальных аспектов обучения по отношению к сетевым информационным технологиям. Знания, умения и способы конструирования web-сайтов являются элементами информационной компетенции — одной из ключевых компетенций современной школы. Умение находить, структурировать, преобразовывать и сохранять информацию в html-формате и других интернет-совместимых форматах — необходимое условие подготовки современных школьников. Особая роль отводится широко представленной в курсе системе рефлексивных заданий. Освоение рефлексии направлено на осознание учащимися того важного обстоятельства, что наряду с разрабатываемыми ими продуктами в виде html-страниц рождается основополагающий образовательный продукт: освоенный инструментарий. Именно этот образовательный продукт станет базой для творческого самовыражения учащихся в форме сайтов, которые можно размещать в Интернете или в локальной школьной сети.

Цели

Основными целями являются:

• научить учащихся ориентироваться и продуктивно действовать в информационном интернет-пространстве, используя для достижения своих целей создаваемые web-ресурсы;

• сформировать у школьников целостное представление об информационной картине мира средствами Всемирной паутины, научить их способам представления информации в сети Интернет;

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

• реализовать способности учеников в ходе проектирования и конструирования сайтов;

• сформировать элементы информационной и телекоммуникационной компетенций по отношению к знаниям, умениям и опыту конструирования.

Задачи

Основными задачами являются:

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

• сформировать навыки элементарного проектирования, конструирования, размещения и сопровождения web-сайта;

• создать представление о языке HTML и научить использовать его для создания web-страниц;

• сформировать навыки коллективной работы с комплексными web-проектами;

• создать и разместить в сети Интернет собственный web-сайт в соответствии с выбранной темой.

1.3 Планируемые результаты освоения программы

В рамках кружка «Web-дизайн» учащиеся овладевают следующими знаниями, умениями и способами деятельности:

• знают принципы и структуру устройства Всемирной паутины, формы представления и управления информацией в сети Интернет;

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

• умеют спроектировать, изготовить и разместить в сети web-сайт объёмом 5-10 страниц на заданную тему;

• владеют способами работы с изученными программами;

• знают и умеют применять при создании web-страницы основные принципы web-дизайна;

• владеют необходимыми способами проектирования, создания, размещения и обновления web-сайта;

• знают виды web-сайтов, способны произвести анализ и сформулировать собственную позицию по отношению к их структуре, содержанию, дизайну и функциональности;

• владеют приёмами организации и самоорганизации работы по изготовлению сайта;

• имеют положительный опыт коллективного сотрудничества при конструировании сложных web-сайтов;

• имеют опыт коллективной разработки и публичной защиты созданного сайта;

• овладевают процедурой самооценки знаний и деятельности и корректируют дальнейшую деятельность по сайтостроительств

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

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

1.4.2 Содержание учебного плана

Раздел 1. Введение

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

Язык JavaScript — скриптовый язык, с помощью которого можно добавить на страницу динамические и интерактивные эффекты (реагирование на кнопки, обработка форм, произвольные надписи, зависящие от действий пользователей, и т. д.). Техника безопасности и организация рабочего места.

Раздел 2. Осваиваем Интернет

Учащиеся должны знать / понимать:

 Структура сети Интернет. Виды доступа к Интернет

Принципы функционирования сети. Сервисы Интернета. Браузеры

Раздел 3. Язык гипертекстовой разметки HTML

Тема 1.1. Структура html-документа

Учащиеся должны знать / понимать:

принципы работы с html-тегами;

принципы работы браузера при отображении страницы;

структуру кода web-страницы;

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

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

Учащиеся должны уметь:

создать web-страницу с помощью html-кода;

придать web-странице требуемое форматирование.

Браузер. Структура html-документа. Тег. Форматирование html-документа.

Практическая работа: «Структура html-документа».

Тема 1.2. Теги и атрибуты

Учащиеся должны знать / понимать:

назначение основных параметров для тегов форматирования.

Учащиеся должны уметь:

управлять параметрами текста с помощью тега <FONT>;

управлять параметром выравнивания для тега <P>;

задавать заголовок документа.

Атрибуты тегов. Базовый шрифт. Заголовок html-документа.

Практическая работа: «Теги и атрибуты».

Тема 1.3. Вставка изображения на страницу

Учащиеся должны знать / понимать:

как вставить изображение на web-страницу;

как отключать отображение изображений на web-странице.

Учащиеся должны уметь:

вставлять необходимое изображение в нужное место web-страницы;

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

Вставка изображения на web-страницу. Альтернативный текст.

Практическая работа: «Вставка изображения на страницу».

Тема 1.4. Управление рисунком

Учащиеся должны знать / понимать:

как узнать значения высоты и ширины графического файла.

Учащиеся должны уметь:

задавать произвольный размер вставляемому изображению;

выравнивать и центрировать рисунок на web-странице.

Выравнивание рисунка. Свойства графического изображения.

Практическая работа: «Управление рисунком».

Тема 1.5. Простые таблицы

Учащиеся должны знать / понимать:

основы работы с таблицами и применение их для разметки структуры web-документа;

назначение основных атрибутов таблицы.

Учащиеся должны уметь:

формировать таблицу;

настраивать ширину и высоту ячеек таблицы;

осуществлять разметку страницы с помощью таблиц;

создавать сложную структуру с помощью вложенных таблиц.

Создание и разметка таблицы. Вложенные таблицы.

Практическая работа: «Простые таблицы».

Тема 1.6. Формирование сложных таблиц

Учащиеся должны знать / понимать:

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

Учащиеся должны уметь:

объединять ячейки таблицы;

оформлять таблицу с помощью границ и заливки ячеек.

Объединение ячеек таблиц. Границы и заливка таблицы.

Практическая работа: «Формирование сложных таблиц».

Тема 1.7. Гиперссылки

Учащиеся должны знать / понимать:

назначение гиперссылок и принцип их создания.

Учащиеся должны уметь:

осуществлять связь страничек с помощью гиперссылок.

Гиперссылки.

Практическая работа: «Гиперссылки».

Тема 1.8. Оформление гиперссылок

Учащиеся должны знать / понимать:

как оптимальным образом и в каком виде поместить гиперссылку на web-страницу.

Учащиеся должны уметь:

изменять стандартные цвета гиперссылок;

создавать картинки-гиперссылки;

ссылаться на внешние ресурсы Интернета.

Картинка-гиперссылка. Цвета гиперссылки. Внешний ресурс.

Практическая работа: «Оформление гиперссылок».

Раздел 4. Каскадные таблицы стилей CSS

Тема 2.1. Каскадные таблицы стилей

Учащиеся должны знать / понимать:

назначение каскадной таблицы стилей;

принципы создания стилей и их применение на web-страницах.

Учащиеся должны уметь:

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

создавать стилевые правила для отдельных тегов, создавать классы и псевдоклассы.

Каскадные таблицы стилей (CSS). Селектор. Внешняя таблица стилей. Стилевой класс и псевдокласс.

Практическая работа: «Каскадные таблицы стилей».

Тема 2.2. Позиционирование

Учащиеся должны знать / понимать:

возможности стилей по позиционированию тегов;

возможности внутренних и Inline-стилей.

Учащиеся должны уметь:

создавать и использовать контекстный селектор;

использовать внутреннюю таблицу стилей и Inline-стиль;

задать позицию для тега с помощью стилей.

Контекстный селектор. Внутренняя таблица стилей. Inline-стиль. Позиционирование.

Практическая работа: «Позиционирование».

Тема 2.3. Фреймы

Учащиеся должны знать / понимать:

назначение фреймов и основы работы с ними.

Учащиеся должны уметь:

формировать фреймовую структуру страницы;

осуществлять загрузку web-страницы в заданный фрейм.

Фрейм. Фреймовая структура страницы. Гиперссылки между фреймами.

Практическая работа: «Фреймы».

Тема 2.4. Настройка фреймов

Учащиеся должны знать / понимать:

основные атрибуты тегов фреймовой структуры.

Учащиеся должны уметь:

оформлять фреймы;

создавать «историю» посещения страничек.

Форматирование фреймов. «История» посещения страничек.

Практическая работа: «Настройка фреймов».

Практика: Создание анимированных клипов для своей Web-странички.

2.2 Условия реализации программы

• Сервер (Маршрутизатор, подключение к сети интернет (WAN), беспроводной выход в интернет, 4G/LTE (требуется USB модем), 3G (требуется USB модем);

• Обжимной инструмент;

• Тестер кабельный (878, 126н);

• SSD-накопитель;

• Кабель сетевой UTP;

• Wi-Fi - точка доступа;

• Мышь проводная;

• Ноутбук. Операционная система Windows 10 в комплекте с Офисными приложениями Microsoft Office 2

• браузеры Internet Explorer, Opera;

• текстовый процессор Блокнот;

• Мультимедийный проектор

• Интерактивная доска, стенды, мультимедийное оборудование (проектор, экран, аудиоустройства)

2.3. Формы аттестации и оценочные материалы

Предметом диагностики и контроля в курсе «Технологии создания сайтов и основы web-дизайна» являются внешние образовательные продукты учащихся (созданные web-сайты), а также их внутренние личностные качества (освоенные способы деятельности, знания, умения), которые относятся к целям и задачам курса.

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

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

Диагностика и контроль — необходимые части учебного процесса, но увеличение их доли неизбежно приводит к сокращению времени на изучение материала. Поэтому столь важно извлечение максимума информации об учащихся за минимальное время.

Контроль и диагностика должны быть действенными. Даже когда учитель отмечает факт решения практической задачи (созданную web-страницу), он должен стремиться к мысленному представлению использования учеником принципов web-дизайна, т. е. использовать практический результат в качестве показателя сформированности определённого способа деятельности (выполнение учебной задачи) и на этой основе оценивать полученный продукт.

Поскольку в условиях гуманизации образования ученик является полноправным субъектом оценивания, то учитель должен обучать школьников навыкам самооценки. С этой целью педагог выделяет и поясняет критерии оценки, учит школьников формулировать эти критерии в зависимости от поставленных целей и особенностей образовательного продукта. При этом важно учитывать, что одно дело — давать оценку внешней образовательной продукции (созданному web-сайту) и другое — внутреннему образовательному продукту (освоенным способам действий).

Качество внешней образовательной продукции желательно оценивать по следующим параметрам:

по количеству творческих элементов в сайте;

по степени его оригинальности;

по относительной новизне сайта для ученика или его одноклассников;

по ёмкости и лаконичности созданного сайта, его интерактивности;

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

Созданными внешними образовательными продуктами учащиеся могут пополнять собственные портфолио.

Оценка внутреннего образовательного продукта связана с направленностью сознания школьника на собственную деятельность, на абстракцию и обобщение осуществляемых действий, иными словами: здесь должна иметь место рефлексивная саморегуляция.

Проверка достигаемых школьниками результатов производится в следующих формах:

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

текущая диагностика и оценка учителем деятельности школьников в виде двух контрольных работ по следующим темам: «Язык гипертекстовой разметки HTML. Каскадные таблицы стилей CSS»; «Язык сценариев JavaScript».

Итоговый контроль проводится в конце курса. Он организуется в форме дифференцированного зачёта — защита итогового проекта.

Воспитательный аспект образования оценивается по следующим критериям:

• Нравственная развитость учащегося.

• Коммуникативная развитость учащегося.

• Сформированность ученического коллектива.

• Готовность к выбору профессии.

• Эмоциональный комфорт в коллективе.

• Социализированность личности учащегося.

2.4 Методические материалы

При планировании занятии по данному учебному курсу необходимо помнить, что обучение носит практико-ориентированный характер, поэтому наиболее часто используемым типом занятия является комбинированное занятие, структура которого предполагает на одном занятии одновременно освоение, закрепление нового материала и применение его на практике. Данный вид занятий предполагает разнообразные виды организации учебной деятельности: фронтальную, групповую и индивидуальную. При построении сайтов реализуется проектный метод работы, в котором преобладают групповой и индивидуальный вид учебной деятельности. Выполнение проектов завершается публичной защитой результатов и рефлексией.

Педагогу особенно важно помнить, что каждый ребенок развивается разными темпами в силу своих способностей и психо-физических особенностей развития. Поэтому особенно важно при помощи системы дифференцированных заданий создать условия для индивидуального развития каждого воспитанника, обеспечить для каждого ситуацию успеха, в которой любое достижение учащегося отмечается как индивидуальная победа.

Наиболее эффективные методы организации учебной деятельности: видеоуроки, мультимедийные демонстрационные и обучающие презентации, самостоятельная работа с электронным пособием для учащихся, коллективно-творческое дело, мозговой штурм, проектирование и моделирование, конкурсы и викторины, краткосрочное и долгосрочное проектирование, работа с Интернет-ресурсами, компьютеризированное тестирование. Отбор методов обучения обусловлен необходимостью формирования у обучающихся информационной, коммуникативной и медиа- компетентностей. Для их формирования при организации учебной деятельности необходимо учитывать следующие условия:

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

• личностная значимость обучения (зачем учащемуся необходимо быть компетентным в области сайтостроительства);

• организация работы с реальными объектами действительности, относящихся к учебному курсу (веб-страница, сайт, компьютер, компьютерная программа, Интернет и др.);

• практическая направленность обучения;

• наличие достаточного уровня знаний, умений и навыков для овладения учебным материалом;

• индикаторы - учебные и контрольно-оценочные задания для определения уровня усвоения программного материала;

Программа предполагает возможность построения индивидуального образовательного маршрута с индивидуальным сроком реализации, на основе уровня знаний учащегося, его индивидуальных особенностей, обеспечивающих усвоение программного материала курса в полном объеме в более короткие сроки за счет уплотнения содержания и выбора рациональных форм и методов обучения. Работа с одаренными детьми предполагается через реализацию следующих направлений деятельности:

• работа по индивидуальному образовательному маршруту,

• привлечение к исследовательской и проектной деятельности,

• привлечение к участию в конкурсах различных уровней от институционального до международного,

• реализация личного проекта,

2.5 Методические рекомендации по оцениванию курса «Web-программирование»

1. Общие положения

Оценивание учащихся в рамках курса «Web-программирование» направлено на диагностику и контроль освоения знаний, умений и навыков, предусмотренных программой. Оно включает текущий, промежуточный и итоговый контроль, а также самооценку учащихся.

2. Виды оценивания

1. Текущий контроль (поурочное оценивание):

• - Выполнение практических заданий (кодирование, работа с HTML, CSS, JavaScript).

• - Устные опросы по теоретическим вопросам.

• - Самостоятельные работы (тестирование, работа с кодом, мини-проекты).

• - Анализ и исправление ошибок в коде.

2. Промежуточный контроль (в конце каждого блока):

• - Проверочные работы (тесты, мини-проекты).

• - Оценка групповых работ и проектов.

• - Ведение журнала прогресса (портфолио работ учащегося).

3. Итоговый контроль:

• - Защита итогового проекта (разработка веб-сайта).

• - Оценка презентации проекта и объяснения кода.

• - Итоговый тест на знание теоретического материала.

3. Критерии оценивания

4. Методы оценивания

• - Критериальное оценивание – соответствие выполненных работ установленным критериям.

• - Рефлексивная самооценка – учащиеся оценивают свой прогресс, ведут дневник разработчика.

• - Коллективная оценка – обсуждение работ в группе, взаимная рецензия.

• - Дифференцированный подход – учёт индивидуальных темпов обучения.

5. Итоговая оценка

Формируется как средневзвешенное значение оценок за:
- Практические задания (40%).
- Теоретические тесты и проверочные работы (30%).
- Итоговый проект и его защита (30%).

Список литературы

1. А.А. Дуванов Материалы курса «Основы web-дизайна и школьного "сайтостроительства » : лекции- М. : Педагогический университет «Первое сентября», — 2006

2. А.А. Дуванов Web-конструирование DHTML, СПб -БХВ, Петербург, 2003

3. Microsoft Front Page 2003. Русская версия: Практическое пособие: пер. с англ. – М.: СП ЭКОМ, 2005. – 384 с.: ил.;

4. Белов В. Ключи к успеху // Мир ПК. – 2006. – №8. – с. 68-70.;

5. Гончаров А. HTML в примерах. С.-Пб.: Питер, 2003.;

6. Гончаров А. Самоучитель HTML. С.-Пб: Питер, 2000.;

7. Дригалкин В. В. HTML в примерах. Как создать свой Web-сайт: Самоучитель / В. В. Дригалкин. – М.: Изд-во «Вильямс», 2003. – 192 с.: ил.

8. Кузнецов М.В. Практика разработки Web-сайта / М.В. Кузнецов, И.В. Симдянов, С.В. Голышев. – СПБ.: БХВ-Петербург, 2005. – 960 с.: ил

9. Рафал Томал «Основы Web-Дизайна» - 2015

10. Аарон Уолтер - Эмоциональный веб-дизайн– 2012

11. Немцова Т. И., Назарова Ю. В. Компьютерная графика и wеЬ-дизайн. Практикум: учебное пособие/ М. : Ид •ФОРУМ•: ИНФРА-М, 2010.- 288 с.: ил.- (Профессиональное образование).

Дополнительная литература

1. Лебедев С.В. Web-дизайн: учебное пособие по созданию публикаций для Интернет / С.В. Лебедев. – 3-е изд., перераб. и доп. – М.: Альянс-пресс, 2004.- 736 с

2. Мержевич В. В. Ускорение работы сайта: для веб-разработчиков / В.В. Мержевич. – СПб.: БХВ-Петербург, 2005. – 384с.: ил

3. Смирнова И.Е. Начала Web-дизайна. – СПб.: БХВ–Петербург, 2003

4. Усенков Д. Уроки Web-мастера. – М.: Лаборатория базовых знаний, 2001.

5. Усенков Д.Ю. Уроки Web-мастера. – М.: БИНОМ, 2003;

6. Штайнер Г. HTML/XML/CSS / Г. Штайнер. – 2-е изд., перераб. – М.: Лаборатория Базовых Знаний, 2005. – 510 с.: ил.