Ученики на Учителя.com


Технологическая карта урока "Создание баннера в среде программы Flash" 8 класс

©Побережнюк & Побережнюк, 2017
Технологическая карта урока
«Создание баннера в среде программы Flash»
Класс: 8.
Раздел: Графическая информация и компьютер (Учебная программа Семакин И.Г. и др.,
Информатика. Программа для основной школы: 8-9 классы).
Тема: Работа в среде графического редактора. Создание баннера
Примечание: Это уже не первый урок в теме и учащиеся уже овладели приемами не
только создания и обработки изображения, но и могут создавать простейшую анимацию.
Тип урока: комбинированный.
Оборудование:
• Тетрадь, ручка;
• Компьютеры учащихся,
• Компьютер учителя,
• Интерактивная доска,
• Проектор.
Цели:
Обучающие: планируется, что в процессе урока обучающиеся:
1. Познакомить с принципом создания баннера в среде графического редактора;
2. Повторить способы создания анимации и работы в данной программе + форматы
файлов, работа с облачными технологиями;
3. Актуализировать знания о приёмах работы с графикой;
Воспитательные:
1. Способствовать развитию у обучаемых исследовательских умений и навыков,
культуры общения;
2. Стимулировать способность к взаимодействию, быстрой адаптации к
изменившимся условиям;
3. Анализ социальных проблем общества для создания баннера, формирования
правильного отношения к проблемам.
Развивающие:
1. Обеспечить условия для развития умений выделить главное, существенное,
обобщать имеющие факты;
2. Способствовать развитию познавательного интереса, воспитанию информационной
культуры, внимательности.
Планируемые результаты:
• предметные – знание основных устройств компьютера и их функций;
Базовый уровень: знание, что такое баннер, умение соотнести баннер с форматом
GIF, знание основных принципов работы с программой.
Повышенный уровень: умение создать качественный баннер с поддержкой
вспомогательных документов. Соответствие темы и изображения, логичность и
доступность представленной анимации.
Высокий уровень умение самостоятельно создать взаимосвязанный комплекс,
состоящий из наличия проблемы в обществе, умение её локализовать, абстрактно
представить в виде слогана и реализовать в виде анимации – баннера. Работа в
среде Flash самостоятельна и оперативна.
• метапредметные – развитие ИКТ-компетентности; умение определять понятия,
умение организовывать учебное сотрудничество и совместную деятельность с
учителем и сверстниками, работа с образными средствами русского языка
(создание слогана), развитие критического мышления при обсуждении баннеров.
• личностные – выработка активной гражданской позиции по отношению к
проблемам общества, личной ответственности при выполнении.
Методы:
• частично-поисковый, элементы исследовательского метода;
• наглядно-демонстрационные;
• беседа;
• практический.
ЭОР (созданные лично инструкции к работе и документы совместного доступа):
• Приложение 2. Создание баннера. Инструкция по работе (readme).
• Приложение 3. Баннер. Понятие. (текстовый документ, справочная информация для
обучающихся).
• Приложение 4. Облачная таблица для заполнения темы и слогана в совместном
доступе.
• Приложение 5. Создание баннера в программе Flash (текстовый документ и
видеофайл).
• Приложение 6. Совместная презентация «Баннер. Результаты и комментарии».
• Приложение 7. Таблица анализа работы на уроке по созданию баннера (рефлексия).
Этапы
урока
Время
(мин.)
Деятельность учителя
Деятельность ученика
Результат
работы ученика
I.Мотиваци
оный
1-2
Приветствует детей.
Просит пройти за центральные столы.
Приветствуют учителя.
Занимают место.
Готовность к
уроку.
II.
Ориентиров
очный
2-3
2
На доске изображение Яндекс.
Для данной картинки: «Мы живем с вами в
мире информации, она окружает нас со
всех сторон и надо уметь ориентироваться
в ней. Мы все живем в трехмерном мире,
проживаем по конкретному адресу и у нас
дома есть свет, горячая и холодная вода, за
которые необходимо платить
поставщикам» и т.п.
Затем учитель задает вопросы «как вы
думаете, как быстрее можно оплатить
счета?», «где можно посмотреть, как
выглядят 3d модели на картах?», «как нам
узнать ….?»
Вопрос: «какая же у нас сегодня тема
урока»?
При необходимости – уточняющий
вопрос: «А с помощью чего реализована
эта реклама, как называется эта
графическая реклама?»
Правильно, тема нашего урока сегодня:
Анализируют изображение на
доске. Выдвигают предположения.
Учащиеся догадываются,
акцентируя внимание на рекламе
Яндекса: «реклама в сети
Интернет?»
Баннер!
Получить представление о
Анализ
графической
информации.
Определение
темы и понятия
«Баннер».
2
«баннер и как с его помощью донести
какую-либо идею или рассказать о чем-
либо».
Будем считать, что мы ничего с вами не
знаем про баннеры. Какую же мы
поставим с вами цель на этот урок? Зачем
нам нужен этот урок?
Ну, это скучно, давайте лучше будем
учиться «продавать воздух?», «делать
деньги из ничего», «выдумывать
убеждалки?» или делать «объяснялки»?
Ведь это все то же самое.
Как мы будем это делать (постановка
задач)? Что для этого нам надо сделать?
Да, ребята, создать баннер! Сегодня мы
будем создавать баннер, только не
размещать его в сети, а создавать.
баннере
1. Выяснить что такое баннер
2. Выяснить, какие бывают
баннеры (виды)
3. Как создаются баннеры
4. Создать баннер?
Формулировани
е цели урока.
Постановка
задач.
III.
Основной
этап урока
(исполните
льский)
5
5+2
Для этого всем вам на вашу почту (которая
создана специально для учебы и не
является средством личной переписки)
отправлен файл (http://goo.gl/VHR7MU).
Файл содержит 5 заданий.
Задание 1.Текстовый документ. Важные
моменты: Пожалуйста, изучите его
(Приложение 2).
Изучив документ, Вы найдёте ссылку на
После изучения учащиеся по
ссылке переходят на заполнение
таблицы (Приложение 3), где
указывается тема – Задание 2.
Анализ
теоретического
компонента
темы.
Формулировка
темы и слогана
собственного
баннера.
15-17
таблицу GOOGLE. Сформулируйте тему и
слоган для будущего баннера и внесите
данные в таблицу. Это и есть задание № 2.
Затем переверните Вашу клавиатуру. На
внутренней стороне Вы найдёте номер.
Теперь Ваша задача – создать баннер,
рассчитанный на тему и слоган,
компьютера, номер которого Вы
обнаружили на клавиатуре. Достаточно
сложно, быстро сориентироваться в
вопросе. Поэтому у Вас 2 минуты, чтобы
подойти к авторам темы и слогана и
обменяться идеями. Кстати, это будет для
Вас неплохой разминкой! Это задание 3.
Следующий этап – задание 4 – собственно
изготовление баннера. Правильный
вариант у Вас получится только при
условии правильного прохождения
предыдущих этапов, где акцентируются
важные моменты.
К данному уроку Вы уже умеете создавать
анимацию в программе Flash и Вам в
помощь мы создали «напоминалочку».
Двигаясь в собственном темпе, Вы можете
пользоваться текстовым документом,
который отражает последовательность
действий (Приложение 4). Также
предложен вариант этого же документа в
режиме ролика. Просмотреть его Вы
можете, перейдя по ссылке. Вы можете
воспользоваться любым удобным для Вас
лично вариантом.
Формулируют собственную тему
и слоган, продумывают
содержание.
Переворачивают клавиатуру.
Находят номер.
Определяют по таблице новую
тему и слоган, соответствующий
номеру.
Подходят к авторам темы и
обмениваются идеями, т.к. время
ограничено 2-мя минутами,
действуют оперативно.
Как вариант – возможно
объединение в пары для работы
(по желанию).
Анализируют идею, создают
композицию, сюжет, добавляют
изображения из ClipArt,
анимируют.
По мере возникновения
потребности, т.к. процесс
анимирования уже знаком,
открывают текстовый документ
или просматривают ролик.
Корректируют работу.
Творческое
взаимодействие
с
одноклассникам
и по решению
учебной задачи.
Создание
баннера в
изменённых
условиях.
Оформление
За работу!
В совместную презентацию ставьте свой
баннер.
Перейдя по ссылке, выкладывают
работу, подписывают автора,-ов.
готовой работы
в совместной
таблице.
IV.
Рефлексивн
ый
5
Внесите в GOOGLE-таблицу Ссылка
на таблицу: http://goo.gl/OYtiw3
результаты своей деятельности. За каждое
из заданий 1-3 Вы получаете 1 балл. За
создание баннера – задание 4 –
максимально 2 балла. Итого, при
достойном выполнении всех заданий Вы
можете получить 5 баллов.
Осуществляют рефлексию
собственной деятельности,
качество выполнения каждого из
заданий. Заполняют таблицу.
Выставляют итоговый балл
самооценки.
Рефлексия
результативност
и деятельности,
самооценка
согласно
предложенным
критериям.
V.
Домашнее
задание
2
В той презентации, в которую Вы
вставляли баннер, прокомментируйте один
чей-нибудь баннер по плану, который
представлен на слайде.
Дома из документа, находящегося
на электронной почте открывают
по ссылке совместную
презентацию, комментируют одну
работу кого-нибудь из
одноклассников по плану:
1. Получилось:
2. Не получилось:
3. Советы по улучшению
баннера:
При анализе можно
ориентироваться на пример,
Качественный
анализ одного
чужого баннера.
Оформление
результатов
анализа на
слайде
совместной
презентации.
предоставленный в презентации.
Приложение 1
Виды универсальных учебных действий (по материалам ФГОС НОО)
1. Личностные УУД обеспечивают ценностно-смысловую ориентацию учащихся (умение соотносить поступки и
события с принятыми этическими принципами, знание моральных норм и умение выделить нравственный аспект
поведения), а также ориентацию в социальных ролях и межличностных отношениях. Применительно к учебной
деятельности следует выделить три вида действий:
1. 1. самоопределение - личностное, профессиональное, жизненное самоопределение;
1.2. смыслообразование - установление учащимися связи между целью учебной деятельности и ее мотивом,
другими словами, между результатом учения и тем, что побуждает деятельность, ради чего она осуществляется.
Учащийся должен задаваться вопросом о том, «какое значение, смысл имеет для меня учение», и уметь находить
ответ на него;
1.3. нравственно-этическая ориентация - действие нравственно – этического оценивания усваиваемого содержания,
обеспечивающее личностный моральный выбор на основе социальных и личностных ценностей.
2. Регулятивные УУД обеспечивают организацию учащимся своей учебной деятельности. К ним относятся
следующие:
2.1. целеполагание - как постановка учебной задачи на основе соотнесения того, что уже известно и усвоено
учащимся, и того, что еще неизвестно;
2.2. планирование - определение последовательности промежуточных целей с учетом конечного результата;
составление плана и последовательности действий;
2.3. прогнозирование – предвосхищение результата и уровня усвоения; его временных характеристик;
2.4. контроль в форме сличения способа действия и его результата с заданным эталоном с целью обнаружения
отклонений от него;
2.5. коррекция – внесение необходимых дополнений и корректив в план и способ действия в случае расхождения
ожидаемого результата действия и его реального продукта;
2.6. оценка – выделение и осознание учащимся того, что уже усвоено и что еще подлежит усвоению, оценивание
качества и уровня усвоения;
2.7. саморегуляция как способность к мобилизации сил и энергии; способность к волевому усилию – выбору в
ситуации мотивационного конфликта и к преодолению препятствий.
3. Познавательные УУД включают общеучебные, логические действия, а также действия постановки и решения
проблем.
Общеучебные универсальные действия:
3.1. самостоятельное выделение и формулирование познавательной цели;
3.2. поиск и выделение необходимой информации; применение методов информационного поиска, в том числе с
помощью компьютерных средств;
3.3. структурирование знаний;
3.4. осознанное и произвольное построение речевого высказывания в устной и письменной форме;
3.5. выбор наиболее эффективных способов решения задач в зависимости от конкретных условий;
3.6. рефлексия способов и условий действия, контроль и оценка процесса и результатов деятельности;
3.7. смысловое чтение; понимание и адекватная оценка языка средств массовой информации;
3.8. постановка и формулирование проблемы, самостоятельное создание алгоритмов деятельности при решении
проблем творческого и поискового характера.
Особую группу общеучебных универсальных действий составляют знаково-символические действия:
3.9. моделирование;
3.10. преобразование модели с целью выявления общих законов, определяющих данную предметную область.
Логические универсальные действия:
3.11. анализ;
3.12. синтез;
3.13. сравнение, классификация объектов по выделенным признакам;
3.14. подведение под понятие, выведение следствий;
3.15. установление причинно-следственных связей;
3.16. построение логической цепи рассуждений;
3.17. доказательство;
3.18. выдвижение гипотез и их обоснование.
Постановка и решение проблемы:
3.19. формулирование проблемы;
3.20. самостоятельное создание способов решения проблем творческого и поискового характера.
4. Коммуникативные УУД обеспечивают социальную компетентность и учет позиции других людей, партнера по
общению или деятельности, умение слушать и вступать в диалог; участвовать в коллективном обсуждении
проблем; интегрироваться в группу сверстников и строить продуктивное взаимодействие и сотрудничество со
сверстниками и взрослыми. Видами коммуникативных действий являются:
4.1. планирование учебного сотрудничества с учителем и сверстниками – определение целей, функций участников,
способов взаимодействия;
4.2. постановка вопросов – инициативное сотрудничество в поиске и сборе информации;
4.3. разрешение конфликтов – выявление, идентификация проблемы, поиск и оценка альтернативных способов
разрешение конфликта, принятие решения и его реализация;
4.4. управление поведением партнера – контроль, коррекция, оценка действий партнера;
4.5. умение с достаточной полнотой и точностью выражать свои мысли в соответствии с задачами и условиями
коммуникации, владение монологической и диалогической формами речи в соответствии с грамматическими
и синтаксическими нормами родного языка.
Приложение 2
Создание баннера. Инструкция по работе (readme)
Выполните следующие задания:
Задание 1 (время на выполнение 2 минуты, 1 балл). Изучить текстовый
документ (прочитать, отметив для себя главное в письменной или устной
форме). Ссылка на текстовый документ: http://goo.gl/DM6urV
Задание 2 (время на выполнение 3 минуты, 1 балл). Сформулируйте тему
и слоган для своего будущего баннера и внесите данные в таблицу GOOGLE.
Ссылка на таблицу: http://goo.gl/69EG3q
Задание 3 (время на выполнение 2 минуты, 1 балл). Переверните Вашу
клавиатуру. На внутренней стороне Вы найдёте номер. Ваша практическая
задача будет создать баннер, на тему и слоган учащихся, которые находятся
за тем компьютером, номер которого Вы обнаружили на клавиатуре. У Вас 2
минуты, чтобы подойти к авторам темы и слогана и обменяться идеями.
Задание 4 (время на выполнение 15-20 минут, 2 балла). Создайте баннер и
вставьте его в совместную презентацию. Ссылка на презентацию:
http://goo.gl/1ciGbN
Напоминание, как создавать анимацию в программе Flash:
- текстовый документ : http://goo.gl/vCoIfL
- видео http://baner.at.ua/index.html . На ваше усмотрение.
(Важно!) Условием для выставления отметки за урок является заполнение
таблицы анализа работы на уроке: Ссылка на таблицу:
http://goo.gl/OYtiw3
Домашнее задание. В той презентации, в которую Вы вставляли баннер :
http://goo.gl/1ciGbN, прокомментируйте один чей-нибудь баннер по плану,
который представлен на слайде.
Приложение 3
Задание 1. Самостоятельно изучите документ
Баннер
Понятие (Важно!). Баннер (от англ. флаг, транспарант, растяжка) – это статическая
картинка или несложная анимация, размещаемая на веб-страницах в рекламных целях.
Обычно эта картинка является ссылкой, по которой можно перейти на рекламируемый сайт.
Размер файла (Для ознакомления). К баннерам предъявляются ограничения по
размеру файла (Кб), т.к. "тяжелый" баннер, заметно увеличивает время загрузки страницы,
поэтому чем меньше вес баннера (Кб, а не Мб!).
В зависимости от разрешения выделяют наиболее распространенные типы баннеров
(Для ознакомления):
1. Стандарты, предложенные компаниями Internet Advertising Bureau и CASIE:
Размер (пиксели)
Название
468 x 60
Full Banner
392 x 72
Full banner with Vertical Navigation Bar
125 x 125
Square Banner
120 x 90
Button #1
120 x 60
Button #2
120 x 240
Vertical Banner
88 x 31
Micro Button
234 x 60
Half Banner
2. В русском Интернете свои стандарты и названия:
Размер (пиксели)
Название
470 x 60
Баннер стандартный нового формата
468 x 60
Баннер стандартный
120 x 60
«Заглушка»
100 x 100
Квадратный баннер #1
125 x 125
Квадратный баннер #2
200 x 55
«Ухо»
230 x 33
«Мелкий баннер»
81 x 63
«Счетчик»
88 x 31
«Кнопка»
234 x 60
«Половинка»
Если возникает необходимость создавать баннеры своего размера, то за основу формата
берется кратный исходному (х2, х3 и т.д.). В таком случае сайтам будет проще интегрировать
новый формат в случае его распространения. Поэтому, мы возьмем за основу Квадратный
баннер#1 и увеличим в 3 раза, т.е. получим размер 300 x 300.
Баннеры отличаются технологией изготовления. Самый распространенный и самый
древний формат — GIF (Важно!). Баннеры создаются в различных графических редакторах:
Ulead GIF Animator, Photoshop, CorelDRAW или Flash.
Сюжет баннера (Важно!). В сюжете любого баннера можно выделить три главных
этапа: завязка, развитие и развязка. Цель первого этапа – привлечь внимание зрителя, выбить
его из колеи, заставить ожидать дальнейшего (максимум динамики, почти всегда что-то
движется, взрывается или прокручивается по всей площади баннера); на втором этапе зрителю
сообщается основная информация баннера (обычно представлен сменяющими друг друга
статическими текстами); третий этап снова делает упор на чувства, а не на разум и разряжает
накопившееся напряжение раскрытием тайны личности рекламодателя и т.д (снова возникает
динамика, но обычно применяются локальные мигания, переливы и т.п, закрепляющие общий
эффект и приглашающие сделать щелчок).
Задание 2: индивидуально или парами (Ваш выбор) придумайте тему, слоган,
заполните таблицу (переход к таблице). Ссылка http://goo.gl/69EG3q
©кабинет 21, 2006-2014
Приложение 4
«Облачная» таблица для заполнения темы и слогана
Баннер – это реклама. Мы с Вами находимся в школе, поэтому ничего коммерческого
рекламировать не можем (нам это запрещено). Но существует большое количество
организаций, которые нуждаются в баннерах, новых идеях и слоганах. Поэтому,
самостоятельно можете создать баннер и попробовать получить от его реализации доход.
МЫ же будем делать социальную рекламу (некоммерческая реклама, направленная
на изменение моделей общественного поведения и привлечения внимания к проблемам
общества)
Важная часть работы – это слоган (лаконичная, легко запоминающаяся фраза, выражающая
суть рекламного сообщения). Большая часть успеха баннера – это легкость, красота и
запоминаемость слогана
Пример
Тема: Толерантность (терпимость к другим людям, их верованиям и мировоззрениям, если
они находятся в рамках законодательства)
Слоган: «нет хороших или плохих национальностей, есть хорошие или плохие люди»
Задание 3: Заполните таблицу
ФИО
№ ПК
Тема
Слоган
Задание 4. Создать баннер (пример, как это сделать вы можете найти здесь).
Ссылка 1(текст). : http://goo.gl/vCoIfL
Ссылка 2 (видео) http://baner.at.ua/index.html
Ссылка на таблицу : http://goo.gl/69EG3q
Приложение 5
Создание баннера в программе Flash
1. Работать мы будем с программой, в
которой учились работать все
предыдущие уроки – Flash. Откроем
программу.
2. Не забудем выставить разрешение
для баннера
3. Загрузим в библиотеку (Файл –
Импорт в библиотеку) те
изображения, которые вам могут
понадобиться для создания баннера
(из папки «картинки» на диске D или
сети Интернет, где вы их можете
найти самостоятельно). Не забываем,
если в файле подразумевается
прозрачность, то это формат png
4. «Вытащим» левой клавишей мыши
изображения на рабочий стол: Окно –
Библиотека (или F11). При необходимости
измените размеры (фон можно и
нарисовать).
5. Вспомним, как делать анимацию в
программе Flash. Попеременно нажимаем
клавишу F6 (создание нового слайда) и
производим необходимые изменения на
каждом слайде. Чтобы анимация была
плавная изменения между кадрами
необходимо производить небольшие (F6 –
сдвинули – F6 – сдвинули – F6 – изменили
размер и сдвинули – F6 – изменили размер
и сдвинули и т.п.)
6. Мы знаем, что значительная часть
баннера – это слоган. В программе есть
текстовый инструмент, но, проще, чтобы
было быстрее, можно открыть Word и либо
просто написать (не забывайте поменять
цвет, размер, тип шрифта) либо взять
объект Word Art, затем скопировать и
вставить во Flash (Ctrl+C, Ctrl+V). Нажмем
несколько раз F6. Для эффекта мигания
удалим текст с некоторых слайдов
7. Сохранение. Файл – Экспортировать
ролик – пишем имя файла и выбираем тот
формат, в котором сохраняются баннеры.
Все, баннер готов – открываем, любуемся.
разрешение
На этих слайдах удалим текст,
чтобы добиться эффекта мигания
Та же инструкция – Видео
http://baner.at.ua/index.html
Приложение 6
Совместная презентация «Баннер. Результаты комментарии»
Ссылка на совместную презентацию (http://goo.gl/1ciGbN)
Приложение 7
Таблица анализа работы на уроке по созданию баннера
Ссылка на таблицу (http://goo.gl/OYtiw3)
Внесите в таблицу результаты своей деятельности. За каждое из заданий 1-3 Вы получаете 0 или1
балл. За создание баннера – задание 4 – максимально 2 балла. Итого, при достойном выполнении
всех заданий, Вы можете получить 5 баллов. После урока учитель расставит свои баллы по тому
же принципу. Отметка за урок будет составляться из ученической и учительской, как среднее
арифметическое, в пользу учащегося
ФИО
выполнявших
работу
Задание
1
Задание
2
Задание
3
Задание
4
Сумма
Итоговая
отметка за
урок
отметка
учащихся
Петров, Сидоров
1
1
1
2
5
5
отметка
учителя
1
1
1
1
4
отметка
учащихся
0
0
отметка
учителя
0
отметка
учащихся
0
0
отметка
учителя
0
отметка
учащихся
0
0
отметка
учителя
0
отметка
учащихся
0
0
отметка
учителя
0
отметка
учащихся
0
0
отметка
учителя
0
отметка
учащихся
0
0
отметка
учителя
0
Приложение 8
Создание баннера в программе Flash
Видеоинструкция http://baner.at.ua/index.html
Скачать материал

Информатика - еще материалы к урокам: