12+  Свидетельство СМИ ЭЛ № ФС 77 - 70917
Лицензия на образовательную деятельность №0001058
Пользовательское соглашение     Контактная и правовая информация
 
Педагогическое сообщество
УРОК.РФУРОК
 
Материал опубликовал
Побережнюк Сергей Владимирович896
учитель в школе
Россия, Свердловская обл., Екатеринбург

©Побережнюк & Побережнюк, 2017

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

Класс: 8.

Раздел: Графическая информация и компьютер (Учебная программа Семакин И.Г. и др., Информатика. Программа для основной школы: 8-9 классы).

Тема: Работа в среде графического редактора. Создание баннера

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

Тип урока: комбинированный.

Оборудование:

Тетрадь, ручка;

Компьютеры учащихся,

Компьютер учителя,

Интерактивная доска,

Проектор.

Цели:

Обучающие: планируется, что в процессе урока обучающиеся:

Познакомить с принципом создания баннера в среде графического редактора;

Повторить способы создания анимации и работы в данной программе + форматы файлов, работа с облачными технологиями;

Актуализировать знания о приёмах работы с графикой;

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

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

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

Анализ социальных проблем общества для создания баннера, формирования правильного отношения к проблемам.

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

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

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

Планируемые результаты:

предметные – знание основных устройств компьютера и их функций;

Базовый уровень: знание, что такое баннер, умение соотнести баннер с форматом GIF, знание основных принципов работы с программой.

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

Высокий уровень умение самостоятельно создать взаимосвязанный комплекс, состоящий из наличия проблемы в обществе, умение её локализовать, абстрактно представить в виде слогана и реализовать в виде анимации – баннера. Работа в среде Flash самостоятельна и оперативна.

метапредметные – развитие ИКТ-компетентности; умение определять понятия, умение организовывать  учебное сотрудничество и совместную деятельность с учителем и сверстниками, работа с образными средствами русского языка (создание слогана), развитие критического мышления при обсуждении баннеров.

личностные – выработка активной гражданской позиции по отношению к проблемам общества, личной ответственности при выполнении.

Методы:

частично-поисковый, элементы исследовательского метода;

наглядно-демонстрационные;

беседа;

практический.

ЭОР (созданные лично инструкции к работе и документы совместного доступа):

Приложение 2. Создание баннера. Инструкция по работе (readme).

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

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

Приложение 5. Создание баннера в программе Flash (текстовый документ и видеофайл).

Приложение 6. Совместная презентация «Баннер. Результаты и комментарии».

Приложение 7. Таблица анализа работы на уроке по созданию баннера (рефлексия).

Этапы урока

Время (мин.)

Деятельность учителя

Деятельность ученика

Развиваемые УУД

Результат работы ученика

I.Мотиваци

оный

1-2

Приветствует детей.

Просит пройти за центральные столы.

Приветствуют учителя.

Занимают место.

Р (здесь и далее - Приложение 1). способность к волевому усилию, готовность к уроку.

Л. знание моральных норм.

Готовность к уроку.

II. Ориентировочный

2-3

2

2

На доске изображение Яндекс.

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

Затем учитель задает вопросы «как вы думаете, как быстрее можно оплатить счета?», «где можно посмотреть, как выглядят 3d модели на картах?», «как нам узнать ….?»


 

Вопрос: «какая же у нас сегодня тема урока»?

При необходимости – уточняющий вопрос: «А с помощью чего реализована эта реклама, как называется эта графическая реклама?»

Правильно, тема нашего урока сегодня: «баннер и как с его помощью донести какую-либо идею или рассказать о чем-либо».

Будем считать, что мы ничего с вами не знаем про баннеры. Какую же мы поставим с вами цель на этот урок? Зачем нам нужен этот урок?

Ну, это скучно, давайте лучше будем учиться «продавать воздух?», «делать деньги из ничего», «выдумывать убеждалки?» или делать «объяснялки»? Ведь это все то же самое.

Как мы будем это делать (постановка задач)? Что для этого нам надо сделать?


 

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

Анализируют изображение на доске. Выдвигают предположения.

Учащиеся догадываются, акцентируя внимание на рекламе Яндекса: «реклама в сети Интернет?»

Баннер!

Получить представление о баннере

1. Выяснить что такое баннер

2. Выяснить, какие бывают баннеры (виды)

3. Как создаются баннеры

4. Создать баннер?

К.умение с достаточной полнотой и точностью выражать свои мысли, слушать и вступать в диалог.

П. самостоятельное выделение и формулирование познавательной цели;

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

построение логической цепи рассуждений;

доказательство;

выдвижение гипотез и их обоснование.

Л. смыслообразование.

Анализ графической информации.

Определение темы и понятия «Баннер».

Формулирование цели урока.

Постановка задач.

III. Основной этап урока (исполнительский)

5

5+2

15-17

Для этого всем вам на вашу почту (которая создана специально для учебы и не является средством личной переписки) отправлен файл (http://goo.gl/VHR7MU). Файл содержит 5 заданий.


 

Задание 1.Текстовый документ. Важные моменты: Пожалуйста, изучите его (Приложение 2).

Изучив документ, Вы найдёте ссылку на таблицу GOOGLE. Сформулируйте тему и слоган для будущего баннера и внесите данные в таблицу. Это и есть задание № 2.

Затем переверните Вашу клавиатуру. На внутренней стороне Вы найдёте номер. Теперь Ваша задача – создать баннер, рассчитанный на тему и слоган, компьютера, номер которого Вы обнаружили на клавиатуре. Достаточно сложно, быстро сориентироваться в вопросе. Поэтому у Вас 2 минуты, чтобы подойти к авторам темы и слогана и обменяться идеями. Кстати, это будет для Вас неплохой разминкой! Это задание 3.

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

К данному уроку Вы уже умеете создавать анимацию в программе Flash и Вам в помощь мы создали «напоминалочку». Двигаясь в собственном темпе, Вы можете пользоваться текстовым документом, который отражает последовательность действий (Приложение 4). Также предложен вариант этого же документа в режиме ролика. Просмотреть его Вы можете, перейдя по ссылке. Вы можете воспользоваться любым удобным для Вас лично вариантом.

За работу!

В совместную презентацию ставьте свой баннер.


 


 


 


 


 

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

Формулируют собственную тему и слоган, продумывают содержание.

Переворачивают клавиатуру.

Находят номер.

Определяют по таблице новую тему и слоган, соответствующий номеру.

Подходят к авторам темы и обмениваются идеями, т.к. время ограничено 2-мя минутами, действуют оперативно.


 

Как вариант – возможно объединение в пары для работы (по желанию).

Анализируют идею, создают композицию, сюжет, добавляют изображения из ClipArt, анимируют.

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

Корректируют работу.


 


 


 

Перейдя по ссылке, выкладывают работу, подписывают автора,-ов.

П. выбор оснований и критериев для сравнения;

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

выбор наиболее эффективных способов решения задач в зависимости от конкретных условий,

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

Р.умение понимать ход работы;

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

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

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

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

Анализ теоретического компонента темы.

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

Творческое взаимодействие с одноклассниками по решению учебной задачи.

Создание баннера в изменённых условиях.

Оформление готовой работы в совместной таблице.

IV. Рефлексивный

5

Внесите в GOOGLE-таблицу Ссылка на таблицу: http://goo.gl/OYtiw3

результаты своей деятельности. За каждое из заданий 1-3 Вы получаете 1 балл. За создание баннера – задание 4 – максимально 2 балла. Итого, при достойном выполнении всех заданий Вы можете получить 5 баллов.

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

П.знать критерии оценивания;

рефлексия способов и условий действия, контроль и оценка процесса и результатов деятельности;

Р. способность оценивать свою деятельность, волевая саморегуляция для преодоления препятствий.

Л.понять значимость приобретаемых на уроке знаний и умений.

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

V. Домашнее задание

2

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

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

Получилось:

Не получилось:

Советы по улучшению баннера:

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

П. выбор оснований и критериев для сравнения.

постановка и формулирование проблемы;

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

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

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

Приложение 1

Виды универсальных учебных действий (по материалам ФГОС НОО)

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

1. 1. самоопределение - личностное, профессиональное, жизненное самоопределение;

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

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

Регулятивные УУД обеспечивают организацию учащимся своей учебной деятельности. К ним относятся следующие:

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

  1. целеполагание - как постановка учебной задачи на основе соотнесения того, что уже известно и усвоено учащимся, и того, что еще неизвестно;

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

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

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

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

    оценка – выделение и осознание учащимся того, что уже усвоено и что еще подлежит усвоению, оценивание качества и уровня усвоения;

    саморегуляция как способность к мобилизации сил и энергии; способность к волевому усилию – выбору в ситуации мотивационного конфликта и к преодолению препятствий.

Общеучебные универсальные действия:

  1. самостоятельное выделение и формулирование познавательной цели;

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

    структурирование знаний;

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

    выбор наиболее эффективных способов решения задач в зависимости от конкретных условий;

    рефлексия способов и условий действия, контроль и оценка процесса и результатов деятельности;

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

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

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

  1. моделирование;

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

Логические универсальные действия:

  1. анализ;

    синтез;

    сравнение, классификация объектов по выделенным признакам;

    подведение под понятие, выведение следствий;

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

    построение логической цепи рассуждений;

    доказательство;

    выдвижение гипотез и их обоснование.

Постановка и решение проблемы:

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

  1. формулирование проблемы;

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

    планирование учебного сотрудничества с учителем и сверстниками – определение целей, функций участников, способов взаимодействия;

    постановка вопросов – инициативное сотрудничество в поиске и сборе информации;

    разрешение конфликтов – выявление, идентификация проблемы, поиск и оценка альтернативных способов разрешение конфликта, принятие решения и его реализация;

    управление поведением партнера – контроль, коррекция, оценка действий партнера;

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

Приложение 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

Приложение 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

Опубликовано в группе «УРОК.РФ: группа для участников конкурсов»


Комментарии (0)

Чтобы написать комментарий необходимо авторизоваться.