Используемый УМК:
- Угринович Н.Д. “Информатика и информационные технологии. 10-11 классы”,
- “ПРАКТИКУМ по информатике и информационным технологиям”,
- методическое пособие для учителя “Преподавание курса “Информатика и информационные технологии”
- презентация по теме “Разработка тематического Web-сайта” Сергейко Н.Г.
- Вид урока: урок c проектной деятельностью, на основе знаний полученных в ходе подготовки к проекту
Формы организации урока:
- групповая (используя метод проектов);
- фронтальная (общее обсуждение при повторении и при получении результатов по принципу сравнительного анализа)
Цель:
- сформировать у учащихся творческий подход, способность к самостоятельному и инициативному решению проблем;
- научить использовать типовые инструментально-технологические средства и эффективно работать в командах, что необходимо для личностного развития и профессионального самоопределения;
- закрепить навыки создания Web-страниц;
- освоить основные критерии создания веб-ресурсов и научить качественно оценивать веб-ресурсы общего назначения;
- закрепить навыки структуризации и систематизации информации и отработать навыки оптимизации информационной деятельности
- выполнить проектную работу по созданию сайта
Ход урока (2 ч.)
I. Организационный момент (3 мин.)
II. Сообщение темы и целей урока (2 мин.)
(Слайд 1) Титульный слайд
Тема сегодняшнего урока:
“Разработка тематического проекта web-сайта”
(Слайд 2) Создание Web-сайта
Цель урока - закрепить навыки по созданию web-страниц, сайтов различными инструментами (на языке HTML, FrontPage, MacroMedia Dreamweaver MX, MS Word) и дать сравнительный анализ этих способов.
Создание сайта
- это сложный как с технической, так и с организационной стороны процесс. Обычно разработка сайтов поручается опытным дизайнерам и высоко квалифицированным программистам. При создании сайтов используют самые современные технологии программирования. Повторим методику создания страниц и способы автоматизации разработки web-сайтов и выполним проекты по заданным темам:- персональный сайт
- школьный сайт
- тематический (семейный, компьютер, архивный и т.д.)
III. Повторение ранее изученного материала по данной теме (10 мин.)
- В ходе повторения вспоминаем основные понятия и определения, используем конкретные примеры:
(Слайд 3) Вопросы на повторение
Актуализация знаний
- Какие функции выполняют сервисные службы WWW?
- Назначение языка HTML
- Теги HTML
- Функциональные разделы документа
- Форматирование HTML документа
- Ссылки на другие документы и файлы
- Списки
- Графика
- Фреймы
- Звук
- Инструментальные средства создания Web-страниц
Учебное пособие по созданию Web-страниц
http://phys.pspu.ru/parshin/html/head3.shtml
(Слайд 4) Основные тэги HTML. Первая страница
Запустить текстовый редактор Блокнот
[Пуск - Программы - Стандартные - Блокнот].
ввести HTML-код, задающий структуру Web-страницы:
<HTML>
<HEAD>
<TITLE> Первое знакомство с тэгами HTML</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Ввести команду [Файл - Сохранить].
Файлу Web-страницы присвоить имя page1-1.htm.
Запустить браузер и открыть созданный файл командой [Файл - Открыть]. В заголовке окна браузера высвечивается Первое знакомство с тэгами HTML. Основная часть окна браузера - пуста.
(Слайд 5) Заголовки
Учащиеся должны ввести в текст страницы тэги заголовков различных уровней
Заголовки различных уровней:
<H1>Заголовок первого уровня</H1>…<H6>Заголовок шестого уровня</H6>
(Слайд 6) Форматирование шрифта
Ввести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий.
(Слайд 7) Списки
Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные, а также списки определений.
(Слайд 8) Внесение изменений и дополнений в Web-страницу.
В процессе создания web-страницы приходится добавлять новые тэги и просматривать получаемый результат:
- Активизировать Блокнот с открытой в нем редактируемой Web-страницей. Внести в содержимое страницы необходимые изменения и сохранить новый вариант страницы, выполнив команду меню [Файл - Сохранить].
- Активизировать браузер с открытым в нем предыдущим вариантом страницы.
Щелкнуть по кнопке Обновить. В окне браузера отобразится обновленная Web-страница.
(Слайд 9) Основные подходы к созданию сайта
Актуализация знаний. Учащимся необходимо ответить на вопросы:
- В чем причина возникновения интереса к Интернет-ресурсам?
- Какие возможности предоставляет Интернет в области Web-конструирования?
- На кого должна быть ориентирована страница - на создателя или пользователя?
- Какие цели чаще всего преследуют создатели различных сайтов?
Попробуйте классифицировать по различным основаниям сайты, расположенные в сети.
(Слайд 10) Практическое задание:
Определите сайты, которые отвечают вашим интересам, дайте им оценку:
- по оформлению
- скорости загрузки,
- количеству используемых элементов для привлечения внимания пользователей
Можно выбрать сайты, созданные профессиональными группами и образовательными порталами. Учащимся разрешается найти с помощью поисковых систем различные типы сайтов и сравнить их, назвать виды Web-сайтов. Вывод делается учащимися.
(Слайд 11) Виды сайтов
Учащиеся должны назвать типы найденных в интернете сайтов и прокомментировать, чем они характерны
(Слайд 12-15) Примеры корпоративных сайтов
(Слайд 16-19) Поисковые системы
(Слайд 20) Электронная почта
(Слайд 21) Энциклопедические системы
(Слайд 22-31) Создание сайта в интернете
Выводы делаются учащимися
(Слайд 32) Инструментальные средства создания Web-страниц от простейших HTML-редакторов до систем с использованием технологии WYSIWYG (“What You See Is What You Get” - “Что видишь, то и получишь”
- Front Page Express (Microsoft Internet Explorer),
- Composer (Netscape Communicator) и
- Web-мастер (Сибкон Коммуникатор).
- Macromedia Dreamweawer
Для достижения поставленной цели мы должны пошагово решить ряд вопросов:
(Слайд 33-40) Создание Web-страниц с помощью Microsoft Word
Показано поэтапное создание сайта, учащиеся могут повторить
(Слайд 41-54) Инструментальные средства разработки Web-страниц
Могут быть использованы учениками при создании сайта (Определяются каждой командой самостоятельно)
- Определить функции сайта
- Наполнение страниц, их фон, используемая графика, звук, анимация или видео
- Как будет осуществляться навигация, управление, ввод данных на страницах сайта, а так же отмена неправильно выполненных действий
Например:
- Определение функций с выделения основных групп посетителей школьного сайта: ученики, учителя, администрация школы, родители, и прочие, кто интересуется школой.
- Определить права доступа к выбранной информации для каждой группы, ее содержание и детальность представления;
- Для ученика: расписание, задания, методические рекомендации к урокам, возможность обсудить вопросы…
- Для учителя: разместить материалы и задания, результаты проверок, возможности библиотеки, электронные учебники, организация интерактивных мероприятий или форумов;
- Для родителей: программы обучения, планируемые мероприятия, электронные классные журналы, школьное меню…;
- Для администрации: визитная карточка школы, история и традиции школы, обязательный минимум образования, преподавательский состав, информация об учебном заведении, общешкольных мероприятиях, новости из школьной жизни.
- Возможность обмена сообщениями (форум или электронная почта).
IV. Подготовка к проектной работе (10 мин.)
Работая над проектом, ученики должны определить цель, задачи, этапы реализации.
Организационный момент
Учащиеся в классе делятся на четыре-пять групп (примерно по 3 ученика в каждой), дают название своей команды, выбирают тему проектного задания;
Для эффективной работы в проектной группе предлагается распределить роли примерно следующим образом: руководитель группы – ответственный за рекламу, web-дизайнер, web-мастер;
Перед каждой группой ставится задача – согласно полученному заданию необходимо определить функции сайта, спроектировать карту сайта, разработать внешний вид страниц, создать Web-сайт, используя выбранные инструментальные средства, и разместить его в Интернет.
V. Работа в группах (30 мин.)
(Слайд 55) Темы задания:
ТЕМЫ ЗАДАНИЯ: “Мой город”, “Моя семья”, “Мои интересы”, “Моя малая родина”, “Моя школа”, “Мой класс”. (Название темы может модифицироваться самими учащимися, но с обязательной аргументацией)
Выполняя эти задания, учащимся раскрывают, например, темы проектов:
“Мой город” - история, проблемы, перспективы.
“Мои интересы” - как я смогу реализовать себя.
“Мой класс” – об одноклассниках, успехи, взаимопомощь, досуг, интересы.
Используются фотографии и возможности графических редакторов.
- В ходе выполнения работ учащимся предлагаются критерии оценок для каждого вида работы.
- Все работы сохраняются в именной тематической папке. Учащиеся имеют возможность редактировать свои работы.
Непосредственная работа в группах
Цель задания: подготовить информационно-содержательное наполнение сайта, и определить основные формы представления информации.
Программные средства: текстовый процессор WORD, НТМL, FrontPage (по выбору группы)
Этапы работы:
1. Определить цель создания сайта.
2. Определить предполагаемый контингент посетителей сайта.
3. В соответствии с целью создания сайта и предполагаемым контингентом продумать содержание сайта.
4. Определить возможные формы представления информации на сайте.
5. Сформулировать названия основных рубрик (страниц) сайта.
6. В текстовом процессоре WORD подготовить концепцию создания сайта.
Пояснения к выполнению задания:
1. Сайт может быть создан с различными целями, в связи с этим будет разным и его содержание.
2. Определив цель создания сайта, продумайте, кто может быть его потенциальным посетителем, т.е. кого может заинтересовать информация, размещенная на сайте.
3. Обдумайте содержание. Если вы решили создать официальный сайт школы, то в нем должна быть история школы, изучаемые предметы, специализация классов, фотографии школы, кабинетов, учителей, учеников и т.п. Если это сайт об учащихся школы, или сайт выпускников, то наверное интересно объединить в этом сайте домашние странички школьников.
4. В качестве форм предоставления информации можно рассмотреть обычную текстовую информацию, фотографии, телеконференции (продумайте тему), чат, доску объявлений (продумайте тему), фотографии, работы учащихся (например открытки, выполненные во Flash) и др.
5. В соответствии с отобранным материалом продумайте названия страниц (ссылок, пунктов меню) сайта.
6. Откройте текстовый процессор WORD и подготовьте письменную концепцию сайта, кратко описав все этапы работы (цель, контингент посетителей, формы представления информации, названия рубрик).
В процессе работы групп учитель, координирует проектную деятельность, т.е. решает возникшие организационные вопросы, технические проблемы, но не влияет на результат.
РЕКОМЕНДАЦИИ ГРУППАМ:
WEB-ДИЗАЙНЕРУ ПО РАЗРАБОТКЕ ФИРМЕННОГО СТИЛЯ САЙТА
Цель: Выработка фирменного стиля сайта.
Средства: Macromedia Flash, Photoshop, CorelDraw, Paint.
Этапы работы:
1. Определить цветовую гамму сайта (выбрать 3 основных цвета, которые будут использоваться при создании дизайна сайта).
2. Выбрать 2 основных типа шрифта.
3. Разработать логотип (изображение названия).
4. Нарисовать макеты кнопок, бордюров и др. элементов, которые будут использоваться при создании дизайна сайта.
5. Сделать эскиз главной страницы (заставки) сайта, используя эффекты анимации Macromedia Flash с применением разработок 1 - 4 этапов данного технического задания.
Пояснения к выполнению задания:
1. Определяя цветовую гамму, учитывайте сочетание цветов.
2. Выбирая шрифты, помните, что с помощью шрифтов можно выделить основной текст, заголовки, ссылки. Также предусмотрите размер и цвет используемых шрифтов.
3. При разработке логотипа можно воспользоваться уже имеющимся логотипом школы. Можно предложить свой вариант написания названия, использовать анимацию во Macromedia Flash
4. Кнопки, бордюры и др. элементы должны быть выполнены в выбранной вами цветовой гамме.
5. Эскиз главной страницы выполняйте, когда выполнены все остальные этапы работы. На этой странице разместите: логотип, кнопки, бордюры. Также вы можете сделать рисунок и использовать его на главной странице.
РЕКОМЕНДАЦИИ WEB-ПРОГРАММИСТУ ПО РАЗРАБОТКЕ HTML - КОДА
Цель задания: подготовить шаблон сайта в HTML - коде, используя редактор для создания и редактирования WEB - узлов.
Программные средства: Редактор на усмотрение группы
Этапы работы:
1. На листе бумаги спроектировать вид WEB - страницы.
2. В выбранном редакторе, в окне редактирования документа отобразить все спроектированные элементы.
3. Открыть просмотр HTML - кода и определить, какие теги используются на вашей странице.
Пояснения к выполнению задания:
1. Проектируя на бумаге вид WEB - страницы предусмотрите место для расположения логотипа (изображения названия) школы (вставка объекта), кнопок перехода, меню, фотографий, основного текста. Для этого рекомендуется разместить на листе бумаги таблицу, где в каждой из ячеек будет размещен один из элементов страницы
2. Откройте редактор …. нажмите на кнопку Вставка таблицы, и в появившемся диалоговом окне введите число строк и число столбцов спроектированной вами таблицы. Ширину таблицы установите 100 %. Нажмите ОК.
3. Заполните ячейки таблицы в соответствии с вашим проектом.
4. Откройте просмотр HTML - кода и определите, какие теги используются на вашей странице для описания таблицы, строк и столбцов таблицы.
РЕКОМЕНДАЦИИ ОТВЕТСТВЕННОМУ ЗА РЕКЛАМУ
Цель задания: подготовить формы “раскрутки” сайта.
Программные средства: текстовый процессор WORD, графические пакеты Macromedia Flash, Photoshop, CorelDraw, Paint.
Этапы работы:
1. Продумать, в каких каталогах и поисковых машинах целесообразно зарегистрировать сайт.
2. Какие ссылки на другие ресурсы Интернета целесообразно разместить на сайте.
3. Как организовать баннерную рекламу (баннерный обмен) на сайте.
4. Разработать макет баннера сайта в графическом редакторе.
Пояснения к выполнению задания:
1. Вспомните, какие поисковые сервера, каталоги вы знаете. Чтобы сайт было легче найти всем желающим, продумайте, какие ключевые слова нужно использовать при создании сайта.
2. Для того, чтобы в полной мере реализовать принципы WWW (переход по “информационной паутине” от сайта к сайту, подумайте, ссылки на какие ресурсы (другие сайты) Интернет целесообразно разместить на вашем сайте.
3. Для привлечения дополнительной аудитории и увеличения посещаемости сайта используются рекламные баннеры. Как вы считаете, на каких ресурсах сети стоит их разместить?
4. В текстовом процессоре WORD подготовьте отчет по пунктам 1 - 3 этапов работы.
5. В графическом редакторе изготовьте макет рекламного баннера сайта размером 468 х 60 pix. Баннер должен содержать логотип (название сайта), его адрес в сети (для простоты назовите его просто www.sch.ru).
VI. Представление полученных результатов (10 мин.)
Руководитель каждой группы представляет проект, при этом обосновывая выбор темы сайта, инструментов для разработки, содержание Web-страниц и делает сравнительный анализ, представленных способов и обосновывает каждый. При этом учащиеся других групп участвуют в проверке работы своих соперников.
После защиты своих проектов и анализа результатов возможно придется корректировать сайт, если полученные результаты не удовлетворяют.
После представления результатов всеми группами, учитель демонстрирует возможные варианты разработок и обращает внимание учащихся на положительные стороны их проекта, анализируются недостатки и дают рекомендации по их устранению.
VII. Итог урока. (8 мин.)
Обобщение на основе сравнительного анализа результатов, полученных в ходе проектной деятельности.
Каждый из участников сыграл свою роль в работе над проектом, проявив наиболее ярко себя в том деле, которое получается у него лучше, кто-то успешно справился с организаторской работой, а кому-то удалась техническая часть. Самое главное, что вы были единой командой, которая постаралась достичь поставленной цели.
Проведем рефлексию. Давайте посмотрим, добились ли мы целей, поставленных в начале занятия
(по пунктам просматриваются все цели и задачи).
Попробуем подвести итоги, ответив на следующие вопросы:
- Что нового для себя узнали вы на уроке?
- Где могут пригодиться эти знания?
Знаниями из каких школьных предметов вы пользовались при выполнении заданий?
VIII. Оценка работы учащихся на уроке (5мин.)
(Слайд 56)
Необходимые ресурсы: компьютеры, мультимедийный проектор, пакет MS Office, презентация, MS FrontPage и другие редакторы для Web-сайта.
Источники информации:
- http://informatics.belinter.net
- http://www.informika.ru - сервер ГосНИИ Информационных технологий и телекоммуникаций “Информика”.
- http://som.fio.ru -сетевое объединение методистов
- www.mto.ru - мультимедиатехнологии в образовании
- http://www.ooipkro.ru - уроки по разным предметам