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

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

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

Класс: 8.

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

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

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

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

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

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

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

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

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

Проектор.

Цели:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Методы:

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

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

беседа;

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

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

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

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

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

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

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

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

Приложение 1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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:

2. В русском Интернете свои стандарты и названия:

Если возникает необходимость создавать баннеры своего размера, то за основу формата берется кратный исходному (х2, х3 и т.д.). В таком случае сайтам будет проще интегрировать новый формат в случае его распространения. Поэтому, мы возьмем за основу Квадратный баннер#1 и увеличим в 3 раза, т.е. получим размер 300 x 300.

Баннеры отличаются технологией изготовления. Самый распространенный и самый древний формат — GIF (Важно!). Баннеры создаются в различных графических редакторах: Ulead GIF Animator, Photoshop, CorelDRAW или Flash.

Сюжет баннера (Важно!). В сюжете любого баннера можно выделить три главных этапа: завязка, развитие и развязка. Цель первого этапа – привлечь внимание зрителя, выбить его из колеи, заставить ожидать дальнейшего (максимум динамики, почти всегда что-то движется, взрывается или прокручивается по всей площади баннера); на втором этапе зрителю сообщается основная информация баннера (обычно представлен сменяющими друг друга статическими текстами); третий этап снова делает упор на чувства, а не на разум и разряжает накопившееся напряжение раскрытием тайны личности рекламодателя и т.д (снова возникает динамика, но обычно применяются локальные мигания, переливы и т.п, закрепляющие общий эффект и приглашающие сделать щелчок).

Задание 2: индивидуально или парами (Ваш выбор) придумайте тему, слоган, заполните таблицу (переход к таблице). Ссылка http://goo.gl/69EG3q

Приложение 4

«Облачная» таблица для заполнения темы и слогана

 

Ссылка на таблицу : 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)

 

Приложение 8

Создание баннера в программе Flash

Видеоинструкция http://baner.at.ua/index.html