Рабочая программа по курсу Сайтостроение

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

Ожидаемые результаты программы 5

Учебно-тематический план 7

Содержание изучаемого курса 8

Методическое обеспечение программы 15

Дополнительная общеразвивающая программа « Сайтостроение» имеет техническую направленность.

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

Программа рассчитан на 72 учебных часа.

Занятия проводятся 2 раза в неделю.

Продолжительность занятий – 1 час.(40минут)

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

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

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

Цель программы:

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

Задачи программы :

Обучающие:

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

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

3.Дать первичные навыки программирования на языках HTML, Dynamic HTML, CSS; познакомить с основами веб - дизайна;

4.научить основам работы с программами Dreamweaver и Flash (или аналогичными);

Развивающие:

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

2. Сформировать целостное представление об информационной картине мира средствами «Всемирной паутины».

Воспитательные:

1. Реализовать коммуникативные, технические и эвристические способности обучающихся в ходе проектирования и конструирования
сайтов;

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

3. сформировать навыки работы в коллективе с комплексными веб - проектами;

В рамках данной программы учащиеся овладевают следующими знания­ми, умениями и способами деятельности: знают принципы и структуру устройства «Всемирной паутины», фор­мы представления и управления информацией в сети Интернета;

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

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

умеют программировать на языках HTML, Dynamic HTML, CSS на уровне создания не менее 3—5 соответствующих элементов сайта;

владеют способами работы с изученными программами (редакторы сайтов, Flash, FTP и др.);

умеют передавать информацию в сеть Интернета с помощью протокола FTP, специальных программ, веб - форм;

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

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

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

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

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

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

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

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

1. Вводное занятие

Теория: Инструктаж по технике безопасности при нахождении в компьютерном классе. Знакомство с интернет-пространством.

1. Глава I. Моя веб - страничка

Теория:

Основные понятия: гипертекст, HTML, тег, браузер, веб - страница, разметка, структура документа, заголовок, тело.

Техническая часть Теги HTML

Структура веб – страницы. Заголовок документа. Тело документа. Атрибуты тегов. Цвет фона.

Изображение как фон. Цвет текста. Цвета.

Размер и форма шрифта. Теги форматирования текста. Взаимодействие тегов. Текстовые блоки. Заголовки. Абзацы.

Перевод строки. Разделительная линия.

Практика:

Создание простейшей веб-страницы, редактирование текста и фона с использованием HTML-тегов

Творческая работа. Тема «Самопрезентация».

1. Глава II. Графика

Теория:

Основные понятия: растровый формат, векторный формат, метафай­лы, рамка изображения, выравнивание, обтекание.

Рисунки и фотографии в сети Интернета. Параметры графического файла Форматы графических файлов. Растровые форматы JPEG GIF PNG

Достоинства растрового формата. Недостатки Векторные форматы Достоинства Недостатки Метафайлы

Дополнительная информация. Графические редакторы. Как создать графический файл для веб - страницы

Практика:

Связывание графического файла с HTML-документом. Изображения в HTML-документе.

Творческая работа. Тема «Сделай красиво!».

1. Глава III. Гипертекстовый документ

Теория:

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

Способы организации гипертекстовых документов. Гипертекстовые ссылки

Практика:

Разработка сценария гипертекстового документа, состоящего из не­скольких файлов

Творческая работа. Тема «Выполнение и защита небольшого проек­та» (сайт «Мой класс», «Наш фэн - клуб» и т.п.)

1. Глава IV. Виды сайтов

Теория:

Основные понятия: виды сайтов, критерии оценки, дизайн, навига­ция, эргономика, скорость загрузки, интерактивность, чат, форум, гостевая книга.

Виды сайтов, их назначение

Способы управления вниманием посетителей. Способы организации информации

Полнота информации и ее обновление. Графический и технический дизайн

Навигация. Скорость загрузки страниц и определяющие факторы

Интерактивность сайта. Интернет – технологии

Практика:

Исследование действующих сайтов

Критерии оценки сайтов

Творческая работа

1. Глава V. Основы HTML

Теория:

Основные понятия: списки, таблицы, фреймы, формы, метатеги, интерактивность.

Таблицы

Лишние ячейки. Пустые ячейки Объединение ячеек. Разделение ячейки. Вложенные таблицы Цвета фона. Фреймы. Формы. Метатеги .

Практика:

Отработка создания таблиц, разделения ячеек, объединения ячеек, изменение структуры таблицы

Творческая работа. Тема «Выполнение и защита небольшого проекта»

1. Глава VI. Редакторы сайтов

Основные понятия: редактор веб - страниц, активные элементы, дина­мический язык, сценарий, баннер, сервер, администрирование.

Теория:

Изображения Гиперссылки

Панель навигации

Практика:

Создание нового сайта

Создание новых файлов и папок

Настройка характеристик веб – страницы. Фон. Текст.

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

Использование таблиц

Использование слоев

Использование фреймов

Доступ к HTML-коду веб - страницы

Творческая работа. Тема «Выполнение и защита проекта»

1. Глава VII. Дополнительные возможности создания веб - страниц

Теория:

Основные понятия: каскадные таблицы стилей, CSS, селектор, Flash, символ, клип, кнопка, анимация движения, анимация формы, Dynamic HTML, интерактивность, сценарии, статические и динамические страни­цы, активные элементы.

Назначение CSS Каскадные таблицы стилей Основы CSS

Цвет в CSS Размер в CSS Комментарии

Каскадность стилей и приоритеты. ID-классы.

Три способа задания стиля. Приоритеты Flash

Основные понятия. Типы символов. Кнопки Динамический HTML

Практика:

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

Анимация движения. Анимация формы

Работа со слоями Примеры использования DHTML Творческая работа.

Тема «Технический проект»

1. Глава VIII. Основы веб - дизайна

Теория:

Основные понятия: дизайн, векторная и растровая графика, графи­ческий редактор, инструменты, фильтры, графические примитивы, па­литра цветов, формат графического файла, заголовки, текст, разделы, ссылки, термины, эффективность рекламы.

Логотип. Фирменный стиль Цветовая гамма

Заголовки. Текст. Привлечение внимания

Соответствие содержанию

Термины. Конкретность. Простота. Краткость. Логичность изложения

Орфография Расположение элементов на сайте

Графические элементы. Анимация. Баннеры

Практика:

Макет дизайна. Верстка и оптимизация веб - страниц. Информационное наполнение сайта. Навигация. Творческая работа. Выполнение и защита творческих работ на выбранные темы (логотип, баннер, фирменный стиль, макет дизайна и др.)

1. Глава IX. Размещение, «раскрутка» и поддержка сайта в сети

Теория:

Основные понятия: Интернет, IP-адрес, домен, провайдер, хостинг, трафик, доступ по коммутируемым каналам, выделенная линия, модем, скорость передачи информации, администрирование сайта, протоколы FTP, TCP/IP, HTTP, релевантность запросов, скорость загрузки, критичность размеров файлов изображений и веб-страниц, электронная почта, реклама, снам, статистика, посещаемость страниц сайта, счетчик, поис­ковые системы, поисковые роботы, рейтинг ресурса, баннер, метатеги, ключевые слова, содержание, заголовки страниц, эффекты дизайна, инте­рактивность, банерный обмен, обмен страницами.

Хостинг Удобство навигации Целостность данных Корректность ссылок

Орфография Графика Скорость загрузки

Практика:

Размещение сайта у провайдера FTP — передача файлов Тестирование сайта

Регистрация сайта в поисковых системах Обмен ссылками Банерная реклама

Принципы и технологии обновления сайта. Автоматические системы обновления сайта. Обобщение. Творческая работа. Самооценка. Рефлексия.

1. Глава X. Проектирование сайта

Теория:

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

Концептуальное проектирование

Основные и второстепенные цели

Действия, которые необходимо предпринять для достиже­ния поставленных целей Состав пользователей Интересы групп пользователей Разделы сайта Критерии достижения цели

Логическое проектирование

Тип структуры сайта (линейная, иерархическая, контекст­ная, другая). Названия разделов

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

Физическое проектирование

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

Практика:

Применение навыков концептуального, физического и логического проектирования

Творческая работа

1. Глава XI. Зачетная работа

Теория:

Основные понятия: тема и структура веб - сайта, проектирование, изготовление, размещение, тестирование сайта, экспертная оценка.

Выбор темы творческого проекта — сайта

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

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

Практика:

Техническое задание

Проектирование, создание и размещение сайта в сети

Акт сдачи-приемки работы

Защита выполненных проектов

1. Итоговое занятие. Олимпиада по веб - дизайну

Практика:

Основные понятия: логотип, фирменный стиль, баннер, макет, гра­фика, дизайн.

Олимпиадные задания:

1. Разработайте макет своей «веб - визитки». Найдите необходимые слоганы и их графическое сопровождение.

2. Разработайте макет логотипа своей школы (класса) в формате jpg или gif. и представьте его в цветном и черно-белом вариантах.

3. Изготовьте два баннера размером 120x60 — анимированный и статичный. Цель баннеров — воздействовать на эмоциональную сферу потенциального зрителя.

4. Придумайте графическую иллюстрацию для раздела юмористического сайта. Иллюстрация необходима смешная, занимательная, оригинальная. Размер иллюстрации 130x190 пикселей. Формат файла jpg или gif.

5. Разработайте титульную веб - страницу на одну из тем: «Наш класс», «Наша школа», «Мы — фанаты!», «Интернет-газета», «Веб-клуб»

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

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

Формы организации учебных занятий.

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

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

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

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

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

Материально-техническое обеспечение.

-Компьютерный класс, состоящий из 15 компьютеров;

-Сетевой принтер для учащихся и преподавателя;

-Мультимедиа проектор, экран;

-Локальная компьютерная сеть;

-Инсталиционные пакеты программ: MS Windows XP (или более поздние версии), Office 2003 (или более поздние версии), WinRaR, Блонот;

-Наличие доступа в интернет;

- Антивирусная программа;

-Кабинет, оборудованный согласно правилам пожарной безопасности.

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

1. Литература для учителя:

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

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

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

1.4. Дуванов А. А. Web-конструирование. Элективный курс/ под ред. А. А. Дуванова. - СПБ.: БХВ-Петербург, 2007 с электронной поддержкой.;

1.5. Информатика. Базовый курс. Учебник для ВУЗов / под ред. С.В. Симоновича. - СПб.: Питер. - 2000.

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

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

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

1.9. Монахов М. Ю., Воронин А. А. Создаем школьный сайт в Интернете: Практикум. — М.: БИНОМ. Лаборатория знаний, 2006.

1.10. Угринович Н.Д. Информатика и информационные технологии. Учебник для 10-11 классов / Н.Д. Угринович.  – М.:БИНОМ. Лаборатория знаний, 2005;

1.11. Угринович Н.Д. и др. Практикум по информатике и информационным технологиям. Учебное пособие. – М.: БИНОМ, 2005;

1.12. Преподавание курса «Информатика и ИКТ» в основной и старшей школе (7-11): Методическое пособие для учителей. Угринович Н. Д — М: БИНОМ. Лаборатория знаний, 2005;

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

1.14. http://htmlbook.ru — Мержевич Влад.

Краткий, но информационно насыщенный учебник по технологии создания сайтов, HTML, CSS, дизайне, графике и др.

1.15. http://www.intuit.ru/ — П.Б. Храмцов, С.А. Брик, A.M. Русак, А.И. Сурин.

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

1.16. http://winchanger.narod.ru — А. Климов

Краткий справочник по тегам HTML-языка.

1.17. http://www.w3.org/ — World Wide Web Consortium.

О спецификации HTML 4.0. Профессиональный документ. Для тех, кому недостаточно справочников, или для решающего аргумента в спо­ре. Единственной нормативной версией является английская версия дан­ного документа. Однако переводы этого документа имеются по адресу http://www.w3. org/MarkUD/html40-uDdates/translations.html

1. Литература для ученика:

2.1. Дуванов А. А. Web-конструирование. Элективный курс/ под ред. А. А. Дуванова. - СПБ.: БХВ-Петербург, 2007 с электронной поддержкой.;

2.2. Угринович Н.Д. Информатика и информационные технологии. Учебник для 10-11 классов / Н.Д. Угринович.  – М.:БИНОМ. Лаборатория знаний, 2005;

2.3. http://htmlbook.ru — Мержевич Влад.

Краткий, но информационно насыщенный учебник по технологии создания сайтов, HTML, CSS, дизайне, графике и др.

2.4. http://winchanger.narod.ru — А. Климов

Краткий справочник по тегам HTML-языка.

Список используемой литературы

3.1.Федеральный закон от 29.12.2012 № 273-ФЗ ( ред. От 05.05.2014) « Об образовании в Российской Федерации» ( с изм. И доп., вступив. В силу с 06.05. 2014)

3.2.Приказ Министерства образования и науки РФ от 29.08.2013 № 1008 «Об учреждении порядка организации и осуществления образовательной деятельности по дополнительным общеобразовательным программам»

1. Угринович Н.Д. Информатика и информационные технологии. Учебник для 10-11 классов / Н.Д. Угринович.  – М.:БИНОМ. Лаборатория знаний, 2005;

2. Преподавание курса «Информатика и ИКТ» в основной и старшей школе (7-11): Методическое пособие для учителей. Угринович Н. Д — М: БИНОМ. Лаборатория знаний, 2005;

3. Windows-CD. Компьютерный практикум на CD-ROM Угринович Н. Д. — М.: БИНОМ. Лаборатория знаний, 2005.

1