План-конспект занятия по теме «Язык HTML»

План-конспект занятия по теме «Язык HTML»

Педагога дополнительного образования Шмельковой Ольги Николаевны.

Творческое объединение «Компьютерная страна «Информ@шка».

Цель занятия: закрепить навыки по созданию web-страниц, сайтов с помощью различных программ («HTML», «FrontPage», «MacroMedia Dreamweaver C5», «MS Word») и дать сравнительный анализ этих способов.

Задачи:

1. Обучающие:

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

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

• освоить основные критерии создания веб-ресурсов;

• выполнить проектную работу по созданию сайта.

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

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

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

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

• воспитывать коммуникативную культуру;

• воспитать умение самостоятельно мыслить, аккуратность и активность при выполнении заданий, ответственность за выполняемую работу.

I Дидактический материал для педагога:

1. Угринович, Н.Д. Преподавание курса «Информатика и информационные технологии». Методическое пособие /Н.Д. Угринович, В.В. Морозов, Нечаев – М.: БИНОМ. Лаборатория знаний, 2006. ISBN: 5-94774-018-4

Интернет источники:

1. http://informatics.belinter.net

2. http://www.informika.ru - сервер ГосНИИ Информационных технологий и телекоммуникаций «Информика».

3. http://som.fio.ru - сетевое объединение методистов

4. www.mto.ru - мультимедиатехнологии в образовании

5. http://www.ooipkro.ru - уроки по разным предметам

II.Дидактический материал для воспитанников:

1. Угринович, Н.Д. «Информатика и информационно-коммуникационные технологии. 9-10 классы»/Н.Д. Угринович.– М.: Бином,Лаборатория знаний, 2009. – 212 с.ISBN978-5-9963-0327-4

2. Практикум по информатике и информационным технологиям.

3. Электронный учебник «Создание тематического проекта web-сайта».

III.Материально техническое оснащение занятия:

• компьютеры;

• мультимедиа проектор;

• карточки с заданиями;

• локальная сеть с выходом в Интернет;

• мультимедийная презентация.

Программное обеспечение:

• операционная система «Windows XP»;

• пакет программ «Microsoftoffice 2010» (программное средство разработки мультимедиа проектов «Power Point», текстовый редактор «Word»).

Ход занятия

1. Организационный момент (2 мин.)

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

Педагог: Здравствуйте ребята! Сегодня мы приступаем с вами к проектной деятельности. Тема нашего занятия «Создание тематического проекта web-сайта». На прошлых занятиях мы познакомились с созданием сайтов.

1. Введение в тему занятия (3 мин.)

Обучающимся необходимо ответить на вопросы:

1. В чем причина возникновения интереса к Интернет-ресурсам?

2. Какие возможности предоставляет Интернет в области web-конструирования?

3. На кого должна быть ориентирована страница - на создателя или пользователя?

4. Какие цели чаще всего преследуют создатели различных сайтов?

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

III Объяснение нового материала (12 мин.)

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

• персональный сайт;

• школьный сайт;

• тематический (семейный, компьютер, архивный и т.д.)

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

Презентация. Электронное пособие «Создание тематического проекта web-сайта».

Подготовка к проектной работе

Педагог: Работая над проектом, воспитанники должны определить цель, задачи, этапы реализации. Рассмотрим более подробно несколько этапов работы над проектом.

Этап 1.Предложение тем проекта.

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

ТЕМЫ ЗАДАНИЯ: «Родной город», «Моя родословная», «Мои интересы», «Моя малая родина», «Моя школа», «Мой класс».

Этап 2. Выбор тем проекта.

Выбор тем для проекта длился 15-20 мин.

Воспитанники должны раскрыть темы проекта, например, тема проекта «Город родной - Бузулук» - история, проблемы, перспективы.

Этап 3.Выбор методов и ресурсов для работы над проектом, выбор формы презентации результатов проекта.

Выбор методов и ресурсов. Педагогу важно познакомить воспитанников с имеющимися возможностями, предоставив право выбора им самим.

Форма презентации. Презентацию подготавливают воспитанники самостоятельно, с минимальной помощью педагогу. На весь этап отводится 15-20 мин.

Этап 4. Работа над проектами.

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

Этап 5. Подготовка к защите проекта.

Включает в себя работы всей программы.

• Дизайнерское оформление сайта, наглядно представляет суть проекта.

• Подготовка устной презентации проекта.

• Подготовка команды для ответов на каверзные и серьезные вопросы оппонентов.

• Создание специальной папки документов (портфолио), в которой полно и доказательно представлена логика работы над проектом.

• Каждая позиция направлена на то, чтобы вызвать живой отклик участника проекта.

Этап 6. Презентация проекта.

IV Практическая работа (25 мин.)

Обучающиеся делятся на четыре-пять групп (примерно по 3 воспитанника в каждой), дают название своей команды. Для эффективной работы в проектной группе предлагается распределить роли примерно следующим образом: руководитель группы – ответственный за рекламу, web-дизайнер, web-мастер.

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

Практическое задание:

Для достижения поставленной цели воспитанники должны пошагово решить ряд вопросов:

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

• определить функции сайта.

• наполнение страниц, их фон, используемая графика, звук, анимация или видео.

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

Например:

• определение функций с выделения основных групп посетителей сайта: воспитанники, педагоги, администрация учреждения, родители, и прочие, кто интересуется учреждением.

• определить права доступа к выбранной информации для каждой группы, её содержание и детальность представления.

• для воспитанника: расписание, задания, методические рекомендации к занятиям, возможность обсудить вопросы.

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

• для родителей: собрания, планируемые мероприятия.

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

• возможность обмена сообщениями (форум или электронная почта).

Непосредственная работа в группах

Цель задания: подготовить информационно-содержательное наполнение сайта, и определить основные формы представления информации.

Этапы работы:

1. Определить цель создания сайта.

2. Определить предполагаемый контингент посетителей сайта.

3. В соответствии с целью создания сайта и предполагаемым контингентом продумать содержание сайта.

4. Определить возможные формы представления информации на сайте.

5. Сформулировать названия основных рубрик (страниц) сайта.

6. В текстовом процессоре WORD подготовить концепцию создания сайта.

Пояснения к выполнению задания:

1. Сайт может быть создан с различными целями, в связи с этим будет разным и его содержание.

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

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

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

5. В соответствии с отобранным материалом продумать названия страниц (ссылок, пунктов меню) сайта.

6. Откройте текстовый процессор WORD и подготовьте письменную концепцию сайта, кратко описав все этапы работы (цель, контингент посетителей, формы представления информации, названия рубрик).

В процессе работы групп педагог, координирует проектную деятельность, т.е. решает возникшие организационные вопросы, технические проблемы, но не влияет на результат.

Представление полученных результатов (10 мин.)

Презентацию проводиться во время занятия, занимает больше часа.

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

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

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

VI Подведение итогов (2 мин.)

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

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

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

(по пунктам просматриваются все цели и задачи).

Попробуем подвести итоги, ответив на следующие вопросы:

• Что нового для себя узнали вы на занятие?

• Где могут пригодиться эти знания?

Рекомендации группам для работы над проектом:

Web-дизайнеру по разработке фирменного стиля сайта

Цель: Выработка фирменного стиля сайта.

Средства: Photoshop, CorelDraw, Paint.

Этапы работы:

1. Определить цветовую гамму сайта (выбрать 3 основных цвета, которые будут использоваться при выборе дизайна сайта).

2. Выбрать 2 основных типа шрифта.

3. Разработать логотип (изображение названия).

4. Сделать эскиз главной страницы (заставки) сайта, используя эффекты анимации Macromedia Flash или скриптов с применением разработок 1 - 4 этапов данного технического задания.

Пояснения к выполнению задания:

1. Определяя цветовую гамму, учитываем сочетание цветов.

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

3. При разработке логотипа можно воспользоваться уже имеющимся логотипом учреждения (герб).

4. Кнопки, бордюры и др. элементы должны быть выполнены в выбранной вами цветовой гамме.

5. Эскиз главной страницы подбирается из готовых шаблонов, согласно тематике сайта. На этой странице разместите: логотип, кнопки, бордюры. Также вы можете сделать рисунок и использовать его на главной странице.

Рекомендации Web-программисту по подборке шаблона для сайта

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

Этапы работы:

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

2. В выбранном редакторе, в окне редактирования документа отобразить все спроектированные элементы.

Пояснения к выполнению задания:

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

2. Заполните ячейки таблицы в соответствии с вашим проектом.

Приложение А

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

Рисунок 1 – Сайт города Бузулука

Создан в объединении «Информ@шка» группой воспитанников 2–го года обучения: Лунин Сергей –БКПТ; Решетов Дима – МАУ «Гимназия №1»;

Дмитриев Юра – МАУ «Гимназия №1»

Рисунок 2 –Детский сайт «Забавные ребята»

Создан в объединении «Информ@шка» группой воспитанников: Скворцовой Дарьей – МАУ«Гимназия №1; Аветисян Гаяне – Н.александровская школа; Советовым Глебом – МОБУ «НОШ №11».