|
МДК/Дисциплина
|
Учебная
дисциплина: МДК 01 Обработка отраслевой информации
|
|
Группа
|
И-11
|
|
Тема занятия
|
Анимирование статических объектов
|
|
Вид занятия
|
Практическое
занятие
|
|
Цель занятия
|
Формировать
ПК 1.2 -ПК 1.2 и ОК 1. – ОК 10.
|
|
Задачи занятия
|
Обучающие; познакомить с принципами
анимирования статических объектов средствами
JQuery
Развивающие:
развивать умение управления статических объектов html
документа;
Воспитательные: воспитывать самостоятельность и
ответственность учащихся.
|
|
Аппаратное и программное обеспечение
|
Требования
к ПО:
1. Операционная
система Windows
7
2.
MS
Office
3. NotePad++
Требования
к ТО:
1. Персональный
компьютер
2. ОЗУ – не
менее 1 Гб.
3.
Свободное
место на жестком диске не менее 700 Мб.
4. Канал
Интернет со скоростью не менее 3 мегабит/сек.
|
|
Средства обучения
|
Интерактивные
средства обучения (интерактивная доска, презентация)
|
|
Методы и приемы
|
Групповые
обсуждения, мозговой штурм, словесно – наглядный
|
|
Используемые педагогические технологии
|
Интерактивные
средства обучения
|
|
Организационная
структура занятия
|
|
Этап 1
|
Организационный
момент
|
|
Цель этапа
|
Предварительная
организация группы (проверка отсутствующих, внешнего состояния помещения,
рабочих мест, наличия дежурных, рабочей позы и внешнего вида учащихся,
организация внимания)
|
|
Длительность этапа
|
5 минут
|
|
Этап 2
|
Актуализация знаний (проверка
домашнего задания)
|
|
Цель этапа
|
Воспроизведение
студентами знаний умений и навыков, профессиональных и общих компетенций
необходимых для «открытия» нового знания.
1 Для
чего предназначен JS?
2. В чем
разница JS от
JQ?
3. Какой
метод библиотеки JQ позволяет
изменять свойства объектов документа html?
4. Приведите
примеры листингов изменения свойств объекта.
|
|
Длительность этапа
|
5 минут
|
|
Форма организации деятельности обучающихся
|
Фронтальная
|
|
Функции преподавателя на данном этапе
|
Координатор,
организатор,
привлечение к размышлению
|
|
Содержание этапа
|
Представление
целей занятия, проведение опроса и комментирование ответов
|
|
Развитие
(закрепление ПК и ОК)
|
Закрепление
ПК 1.1- ПК 1.2 и ОК 1. – ОК 9.
|
|
Этап 3
|
Рекомендации по выполнению
|
|
Цель этапа
|
Объяснение
учащимся как выполнять практическую работу
|
|
Длительность этапа
|
5 минут
|
|
Функции преподавателя на данном этапе
|
Координатор,
организатор
|
|
Содержание этапа
|
Технология
выполнения практической работы
Использование
вспомогательного материала методов работы с объектами.
Эффекты
представленные в таблице ниже позволяют скрывать и отображать элементы
различными способами.
Метод Описание
fadeIn() Постепенно
меняет прозрачность выбранного элемента делая его видимым.
fadeOut() Постепенно
меняет прозрачность выбранного элемента делая его невидимым.
fadeTo() Постепенно
меняет прозрачность выбранного элемента до указанного значения.
hide() Скрывает
выбранный элемент.
show() Отображает
скрытый элемент.
slideDown() Постепенно
изменяет высоту выбранного элемента делая его видимым.
slideToggle() Применяет
к выбранному элементу метод slideDown() если он невидим и slideUp() если он
отображен.
slideUp() Постепенно
изменяет высоту выбранного элемента делая его невидимым.
|
|
Этап 4
|
Выполнение различных заданий, задач, упражнений
|
|
Цель этапа
|
Выполнение
практической работы, помощь при выполнении
|
|
Длительность этапа
|
20 минут
|
|
Форма организации деятельности обучающихся
|
Индивидуальная
|
|
Функции преподавателя на данном этапе
|
Организующая,
направляющая, инструктирующая
|
|
Содержание этапа
|
Разработать
собственный скрипт анимирования объектов на основе предложенных
Листинг
1
<html>
<head>
<script
type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<script
type="text/javascript">
$(document).ready(function(){
$("#but1").click(function(){
$("p").fadeOut(2000);
});
$("#but2").click(function(){
$("p").fadeIn(2000);
});
});
</script>
<body>
<p><b>Я
первый абзац на странице.</b></p>
<input
id="but1" type="button" value="Скрыть абзац" />
<input
id="but2" type="button" value="Отобразить абзац" />
</body>
</html>
Листинг
2
<html>
<head>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$("#but1").click(function(){
$("#par1").animate({fontSize:"1.3em"},1000);
$("#par1").animate({marginLeft:"30px"},1000);
$("#par1").animate({marginTop:"50px"},1000);
$("#par1").animate({fontSize:"1em"},1000);
$("#par1").animate({marginLeft:"0px"},1000);
$("#par1").animate({marginTop:"0px"},1000);
});
});
</script>
<body>
<p><b>Нажмите
на кнопку ниже, чтобы запустить анимацию.</b></p>
<p
id="par1">Я первый абзац.</p>
<input
type="button" id="but1" value="Выполнить анимацию" />
</body>
</html>
|
|
Закрепление
ПК и ОК
|
Закрепление
ПК 1.2 и ОК 1. – ОК 10.
|
|
Этап 5
|
Проверка выполнения работ; обсуждение допущенных
ошибок и их коррекция
|
|
Цель этапа
|
Проверить
выполнение практической работы
|
|
Длительность этапа
|
5 минут
|
|
Форма организации деятельности обучающихся
|
Индивидуальная
|
|
Функции преподавателя на данном этапе
|
Организатор,
аналитик, эксперт
|
|
Закрепление
ПК и ОК
|
Закрепление
ПК 1.1 - ПК 1.2 и ОК 1. – ОК 9.
|
|
Этап 6
|
Рефлексия (подведение итогов и самоанализ
деятельности/ обратная связь)
|
|
Цель этапа
|
Оценка
освоения умений, входящих в профессиональную компетенцию ПК 1.1, формирование
умений самооценки
|
|
Длительность этапа
|
5 минут
|
|
Форма организации деятельности обучающихся
|
Фронтальная,
индивидуальная
|
|
Функции преподавателя на данном этапе
|
Организатор,
аналитик, эксперт
|
|
Содержание этапа
|
Анализ,
оценка результатов выявление затруднений в процессе обсуждения с
преподавателем.
|
|
Закрепление
ПК и ОК
|
Закрепление
ПК 1.1 -ПК 1.2 и ОК 1. – ОК 9.
|
|
Этап 7
|
Домашнее задание
|
|
Цель этапа
|
Закрепление
полученных знаний, формирование умений использования материалов для освоения
компетенций
|
|
Длительность этапа
|
5 минут
|
|
Функции преподавателя на данном этапе
|
Организатор,
эксперт
|
|
Содержание этапа
|
Разработать
элемент галереи средствами JQ
|
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.