Конспект на тему « Розміщення зображень, аудіо та відео-файлів на веб-сторінках»

Про матеріал
Бурхливий розвиток Інтернет технологій надав широкі можливості для застосування у веб-сторінках різноманітних мультимедійних елементів - анімації, звуку, відео. Величезний потенціал «пожвавлення» дизайну можна реалізувати в багатьох елементах: від простих анімованих GIF чи Flash-зображень до відео роликів із звуком і рухом.
Перегляд файлу

C:\Users\Вікторія\Desktop\Без названия (1).jpgКонспект на тему « Розміщення зображень, аудіо та відео-файлів на веб-сторінках»

Бурхливий розвиток Інтернет технологій надав широкі можливості для застосування у веб-сторінках різноманітних мультимедійних елементів - анімації, звуку, відео. Величезний потенціал «пожвавлення» дизайну можна реалізувати в багатьох елементах: від простих анімованих  GIF чи Flash-зображень до відео роликів із звуком і рухом.

Окрім привертання уваги відвідувачів до сайту, веб-анімація також може розважати чи інформувати. На веб-сторінці можна застосувати анімацію і звук для опису етапів складної процедури або процесу. Наприклад, анімована послідовність чи відеоролик, який демонструє кроки вивчення певного уроку у супроводі голосу диктора є значно ефективнішим за текстовий документ, що описує ці ж кроки.

Тип анімації і програмного забезпечення, необхідного для її створення визначається в залежності від конкретного призначення веб-сторінки. Анімація є важливою складовою дизайну веб-сайту, і у веб-дизайнера, є широкі можливості вибору багатьох технологій, які допоможуть в досягненні конкретних цілей, що ставляться перед сайтом.

 

 

 

 

 

 

GIF-анімація

Анімація з використанням формату GIF (Graphic Interchange Format) є найпростішою в реалізації і достатньо популярною в Інтернет. C:\Users\Вікторія\Desktop\Без названия.jpg

Анімовані GIF-зображення працюють як традиційна покадрова анімація, яку застосовують у мультфільмах. Кожна GIF-анімація містить певне число кадрів, де кожен кадр є частиною анімації, також задаються параметри, які дозволяють регулювати швидкість і тривалість анімації. Програма, за допомогою якої створюється GIF-анімація (PhotoShop, ImageReady), зберігає кадри та відмічені опції в GIF-файлі,  а браузер інтерпретує задані параметри  і відтворює анімацію, створюючи зоровий образ руху.

Флеш-анімація

Adobe Flash (раніше відома як Macromedia Flash), або просто Flash  - це є мультимедійна платформа, яку використовують для створення векторної анімації та інтерактивних застосувань (зокрема, ігор), а також для інтеграції відеороликів у веб-сторінки.

Flash дозволяє створювати повноцінну анімацію з вбудованим звуком і інтерактивністю при відносно невеликих розмірах файлу. Невеликі розміри файлів Flash продиктовані використанням в основному векторних зображень, які описані математичними формулами. C:\Users\Вікторія\Desktop\Без названия.png

Векторні зображення, які збережені у Flash-анімації, позначаються як SVG-зображення, або векторна графіка, що масштабується (Scalable Vector Graphics). Розміри SVG-зображень можна змінювати (робити їх більшими або меншими) під час відтворення анімації без втрати якості зображення і вони завантажуються швидше, ніж традиційні JPEG- або GIF-зображення. Отже, можна створювати файли складної Flash-анімації, які швидко завантажуються і відтворюються на комп'ютері відвідувача.

Використання Flash для оформлення сайту

Існує як мінімум три підходи до створення сайтів з Flash:

• Створення флеш-сайту, який є абсолютно цілісним: всі Flash-об'єкти в ньому завантажуються перед початком роботи сайту.

• Створення флеш-сайту з використанням  HTML або текстових фрагментів, які будуть підвантажено за потребою

• Створення традиційного HTML сайту з окремими фрагментами Flash.

Flash-елементи сайту

• Інтро — це невелика заставка, яка відображається перед входом до сайту або у верхній частині сторінки. Як правило, розміщення інтро виділяє сайт серед інших та завдає відповідний настрій для відвідувача. Часто використовується для іміджевих сайтів (спеціалізовані чоловічі або жіночі портали, сайти косметологічних лікарень, салонів краси, перукарських або нічних клубів).

• Динамічні випадні меню і анімовані кнопки пожвавлюють дизайн, проте, використовуючи їх, важливо знати міру і не перевантажувати сайт. На сьогодні багато динамічних функцій можна реалізувати за допомогою CSS і JavaScript, що є кращим і для розробника і для браузера.

• Лічильники, годинник, календарі і власне інформери виглядатимуть набагато краще, якщо їх зробити із застосуванням Flash-технологій. Загальний розмір інформеру (графіка та програмний код) при цьому є доволі малим.

Технології Flash добре справляються з оздобленням сайту, але на тепер ця технологія є дещо застарілою і завданням розробників HTML5 та CSS3 є створення гідної альтернативи для втілення динамічних елементів сайту.

 

Звук в Інтернеті

Звук, що супроводжує сайт допомагає «задати настрій» аудиторії і підсилити враження відвідувачів. Продуманий звуковий супровід допоможе відвідувачам сайту отримати максимум вражень від сторінки і утримати їх на сайті. Веб довгий час був безмовним середовищем, але на сьогодні звук є дуже популярним.

C:\Users\Вікторія\Desktop\Без названия (1).pngПерші звукові формати дозволяли створювати файли з настільки великими розмірами, що на завантаження хвилинного музичного фрагмента потрібно було очікувати хвилинами, а то і годинами.

Наприкінці 1996 року компанія RealNetworks створило першу версію RealAudio, де було застосовано «потокову» технологію, що дозволяє браузерам завантажувати і програвати звукові файли прямо на комп'ютері відвідувача. Технологія потокового відтворення дозволяє відтворювати музику або мову у той час, поки браузер продовжує підвантажувати файл.

З RealAudio конкурує QuickTime компанії Apple, який функціонує подібно до RealAudio. На багатьох сайтах використовуються обидва формати — і RealAudio, і QuickTime — і більшість користувачів доставляють відповідні плагіни до своїх браузерів.

З часом, технології розвиваються, і веб-розробники розуміють, наскільки великою є роль звуку разом з рештою вмісту в створенні настрою і утриманні уваги відвідувача. Використання звуку внесло зміни до дизайну і конструкції сайтів. Наприклад, тепер на деяких сайтах ведеться радіомовлення (webcast — співзвучно до broadcast - віщати, передавати теле- або радіосигнали). Тисячі сайтів в Веб віщають в прямому ефірі. Вебcast широко використовують - від музики до прямих трансляцій президентських мов і спортивних ігор.

Якщо сайт буде містити музику або звук, слід передбачити кнопку, яка дозволить користувачеві швидко вимкнути музику або звук.

Подібно до графічних файлів, аудіофайли теж мають свої власні формати. Загальноприйнятими форматами звукових файлів, які добре працюють на платформі Windows є формати WAV, AU, SND, МРЗ і MIDI. На платформі Macintosh застосовують формати AIF, AIFF, SND, AU, МРЗ і MIDI. Деякі з форматів (AU, SND, МРЗ і MIDI) є універсальними і можуть використовуватися як в Windows, так і в Macintosh.

Відео на Веб-сторінці

Популярною на сьогодні областю веб-дизайну є створення відео для відтворення на веб-сторінках.  Застосування відео в Інтернет постійно зростає, тому стрімко вдосконалюються технології, що дозволяють швидко завантажувати відеофайли.

C:\Users\Вікторія\Desktop\Без названия (2).pngВідео файли знаходять в Інтернеті ряд особливих застосувань:

• Використання відео для реклами телевізійних шоу і фільмів: у цих галузях традиційно використовуються анонси (короткі уривки передач або фільмів).

• Використання відео для ознайомлення відвідувачів з автором. Наприклад, короткий відеоролик про розробника сайту підсилить враження від його домашньої сторінки. Чи відеоролик може супроводжувати резюме, щоб працедавці мали шанс наочно побачити майбутнього працівника.

• Демонстраційні ролики є кращими за стаціонарні фотографії і допомагають потенційним покупцям дійсно побачити товар. Маркетингові сайти, такі як http://www.toyota.com, надають покупцям легкових і вантажних автомобілів можливість оглянути автомобіль за допомогою програм віртуальної реальності, наприклад, програми моделювання віртуальної реальності компанії Apple (www.appie.com).

docx
Додано
7 листопада 2025
Переглядів
110
Оцінка розробки
Відгуки відсутні
Безкоштовний сертифікат
про публікацію авторської розробки
Щоб отримати, додайте розробку

Додати розробку