Поняття про анімаційні ефекти на веб сторінках.�Мультимедіа на веб-сторінках.
Розшифруй
QR-код!!!
ТЕМА УРОКУ
ПОВТОРЮЙМО!
Працюємо на оцінку!
Актуалізація опорних знань і життєвого досвіду
Пропоную визначити свої асоціації до слова «анімація».
Чи потрібна анімація для сайта?
Випадки доцільності�використання анімації
За допомогою анімації веб-дизайнер передає перехідний процес.
Якщо один і той самий об’єкт може перебувати в різних станах в різний час, процес переходу з одного стану в інший найкраще передається за допомогою анімації. Анімація в цьому випадку дає користувачеві можливість відслідковувати зміни, що відбуваються візуально, а не просто уявляти їх.
Випадки доцільності�використання анімації
Зміна інформації на екрані.
Дуже зручно використовувати анімацію у веб-дизайні для відображення декількох інформаційних елементів в одній і тій же області екрану.
Наприклад, відображення пояснень до карти. Коли миша наводиться на певну ділянку карти, в кутку екрану з'являється інформація, що відноситься до цієї ділянки.
Випадки доцільності�використання анімації
Відображення об’ємних структур
Випадки доцільності�використання анімації
Залучення уваги
Якщо, наприклад, ми хочемо виділити в меню назва сторінки, на якій знаходиться користувач, ми можемо поставити миготливу кнопку. Але "мигнути" вона повинна лише кілька разів. Тільки, щоб звернути увагу користувача на себе. А далі їй достатньо змінити трохи колір.
Типи анімацій
Тип анімації і програмного забезпечення, необхідного для її створення визначається в залежності від конкретного призначення веб-сторінки.
GIF-анімація;
Флеш-анімація (дана технологія є застарілою);
Веб-засоби для створення анімацій: CSS і JavaScript;
Анімація за допомогою CSS;
Анімація за допомогою JavaScript.
ПЕРЕВІР СЕБЕ! ТИ ЦЕ ЗАСВОЇВ!
Мультимедіа на веб-сторінках
Використання мультимедійних даних на веб-сторінках робить їх наочними, легкими для сприйняття.
Мультимедіа на веб-сторінках
Завдяки поданню інформації не у вигляді тексту, який потрібно уважно читати, а у формі аудіозаписів та відеозображень можна скоротити час перегляду.
Мультимедіа на веб-сторінках
Завдяки спеціальним модулям, вбудованим у браузер, аудіо- та відеофайли можуть відтворюватися прямо у його вікні.
Мультимедіа на веб-сторінках
Як додати аудіо на веб-сторінку?
<audio src="audio.mp3" controls></audio>
Шлях до файлу
Додати панель керування
Мультимедіа на веб-сторінках
Атрибути тегу <audio>:
autoplay
Відтворювати музику відразу після завантаження сторінки.
controls
Додає панель керування до аудіофайлу.
loop
Циклічно повторює аудіофайл.
muted
Вказує, що звук має бути відключений
preload
Використовується для завантаження файлу разом із завантаженням веб-сторінки.
src
Вказує шлях до аудіо файлу.
Мультимедіа на веб-сторінках
Приклад використання HTML тега <audio>:
Мультимедіа на веб-сторінках
Як додати відео на веб-сторінку?
<video src="video.mp4" controls</video>
Шлях до файлу
Додати панель керування
Мультимедіа на веб-сторінках
Атрибути тегу <video>:
autoplay
Відео починає відтворюватися автоматично після завантаження сторінки.
controls
Додає панель керування до відеоролика.
height
Задає висоту області для відтворення відеоролика.
loop
Повторює відтворення відео від початку до його завершення.
muted
Вказує, що відео буде відтворюватися без звуку
Мультимедіа на веб-сторінках
Атрибути тегу <video>:
poster
Вказує адресу картинки, яка буде відображатися поки відео недоступне або не відтворюється.
preload
Використовується для завантаження відео разом із завантаженням веб-сторінки.
src
Вказує шлях до відеоролика.
width
Задає ширину області для відтворення відеоролика.
Мультимедіа на веб-сторінках
Приклад використання HTML тега <video>:
Запитання для рефлексії
Запитання для рефлексії
Домашнє завдання