Авг 29 2011
Веб-анимация
С развитием Интернета, разработчики web-сайтов стали все чаще пользоваться в своих разработках анимацией. Без всяких сомнений, конечно же, анимация способна внести на страницы web-сайта элемент живости, движения. Это особенно относится к ресурсам, содержащим публицистические материалы и громоздкие тексты.
Но в случаях, когда анимация (flash и gif) бездумно, а, самое главное, в чрезмерных количествах размещается на web-сайте, создается невольное впечатление, что это сделано лишь для того, чтобы продемонстрировать какой-то мнимый уровень мастерства web-студии или отдельного дизайнера. При этом об удобстве конечного пользователя, по большому счету, и не задумывается никто. А ведь довольно таки часто, из-за большого количества gif-анимации и flash-роликов на сайте, становится невозможно не то, что информацию запомнить, а и прочитать то ее удается с большим трудом.
Так как использование анимации должно быть серьезно ограничено, разберем на конкретных примерах, в каких случаях анимационные эффекты оправданы, а в каких – нет.
Применять анимацию НЕ следует в следующих случаях:
1. на каждой web-странице в виде совершенно бесполезного украшательства. Посетитель вашего сайта будет отвлекаться и понизится уровень его внимание. Ну а в результате – раздраженные и недовольные посетители будут уходить к конкурентам с более спокойным дизайном.
2. при разработке фирменного логотипа. Логотип – это часть бренда, фирменный знак, и по этой причине он не должен включать в себя сложные для визуального восприятия объекты. И тем более недопустимым считается включение в логотип анимационных изображений.
3. на web-страницах, и без того перегруженных большими объемами информации. Анимация любого вида, в особенности это относится к flash-роликам, способствует значительному увеличению размера web-страницы. Наивно в таком случае полагать, что пользователь (а ведь высокоскоростной интернет сейчас далеко не у каждого) будет столько времени дожидаться окончания загрузки нужной ему страницы, только по той причине, что вы разместили на ней, как вам казалось, красивую анимацию.
А вот использовать анимацию НЕОБХОДИМО, когда:
1. необходимо продемонстрировать наглядно возможности того или иного рекламируемого продукта. При этом, при помощи программы, к примеру, 3d max можно разработать объемные объекты или же, используя технологию flash, создать элемент «слайд-шоу», оснащенный кнопками управления. Flash-анимация наделена несравненно большими возможностями и более богатым набором инструментов для реализации таковых, в сравнении с привычной нам анимацией GIF. Однако, увлекаться данной технологией не стоит, ведь, в первую очередь, большая часть пользователей Рунета и до сих пор вынуждена пользоваться низкоскоростными подключениями, вследствие чего они не имеют возможности по полной оценить весь ваш привлекательный дизайн, реализованный с использованием flash-анимации. Во-вторых, несовершенство поисковых систем Рунета делает недоступным для поиска содержимое flash-сайтов, а значит, и для оценки уровня релевантности web-страницы. Иными словами, сайт, построенный с использованием технологии flash, может не рассчитывать на место в выдаче поисковых систем, так как они его попросту не обнаружат (не проиндексируют).
2. проследить изменение какого-нибудь объекта.
3. привлечь внимание посетителей к какой-то определенной области web-страницы. В данном случае применение «всплывающих» названий и других подобного рода эффектов допустимо. Но, опять же, в разумных пределах.
И в заключение…
Если вас берут сомнения, использовать ли или не использовать на сайте анимацию, задайте самому себе вопрос: а можно ли обойтись вообще без нее в данном случае? Если ответ положительный, рекомендуем снизить к минимуму применение анимационных эффектов. В противном же случае, обратитесь к специалистам по web-дизайну, если вы не до конца уверены в своих собственных силах, дабы потом, в конечном итоге, не пришлось все равно все переделывать.
Изображения на веб-сайте. Часть I. Форматы.
В настоящее время для оформления дизайна web-сайтов используются графические элементы трех форматов: JPG (JPEG), GIF и PNG. Чтобы понять, какой из вышеперечисленные форматов и для какого вида графики подходит, рассмотрим особенности каждого из них.
1. GIF.
Формат Graphics Interchange Format (GIF) был разработан компанией CompuServe в 1987 году и предназначался изначально для передачи растровых изображений по Сети (Интернет и локальной). Но поскольку первоначальная версия формата надежд не оправдала – конечный файл изображения получался слишком большого объема, что на то время делала его передачу по Сети невозможной, двумя годами спустя была представлена усовершенствованная, вторая версия GIF. Среди новых функциональных возможностей формата оказались: существенное сокращение объема файла изображения путем поддержки LZW-компрессии; поддержка анимации и прозрачности.
Алгоритм LZW относится к группе так называемых методов сжатия без потерь. Что касаемо применения его конкретно к формату GIF означает, что с применением метода компрессии LZW не происходит искажения или повреждения данных графического файла. Применение алгоритма LZW возможно только к восьмибитным изображениям.
Формат GIF считается в настоящее время стандартным форматом для анимированных изображений. Процесс разработки анимации gif напоминает собой создание мультипликационных фильмов, когда движение персонажа или какого-то предмета разделено на кадры, через определенный промежуток времени друг друга сменяющие.
Области использования формата: графики, диаграммы, простейшие анимация и изображения.
2. Формат JPEG.
Формат JPEG (Joint Photographic Experts Group – англ. объединенная группа экспертов фотографии)
Используется для хранения фотографических многоцветных изображений, так как в случае с данным форматом возможно сжатие полноцветного изображения практически без уменьшения в нем количества цветов. Процесс сжатия осуществляется за счет уменьшения количества содержащих информацию пикселей.
В процессе сжатия осуществляется конвертация исходного изображения в цветовую систему YCbCr. Каналы Cr и Cb, отвечающие за цвет изображения, в 2 раза уменьшаются. Уже после этого все цветовые каналы исходного изображения, включая и черно-белый канал Y, разбиваются на части, каждая из которых размером 8х8 пикселей. Эти частички изображения подвергаются косинусному дискретному преобразованию – опять-таки, алгоритм сжатия без потерь. И заключительный этап: упаковка полученных в итоге коэффициентов при помощи кодов Хаффмана.
3. Формат PNG.
Portable Network Graphics (PNG) представляет собой растровый формат хранения информации графического типа без потери при этом качества в процессе сжатия.
Данный формат изначально задумывался как замена формату GIF. Отсюда и возможности похожие, типа наличия возможности прозрачного фона. Однако, из-за большого, в сравнении с форматом GIF, объема конечного файла с изображением, а также ввиду отсутствия поддержки анимации, амбициозным планам разработчиков формата было так и не суждено сбыться.
Тем не менее, PNG очень хорошо подходит для редактирования и хранения изображений в промежуточных стадиях их создания. Графический редактор Macromedia Fireworks, к примеру, для сохранения полученных результатов обработки графических файлов использует именно данный формат.
JPEG, GIF и PNG. Что же предпочесть?
Формат GIF лучше использовать для хранения графических элементов web-сайта (баннеры, меню, кнопки). В формате JPEG необходимо хранить фотографии и прочие полноцветные изображения. А в формате PNG можно сохранять предварительные очертания макета вашего будущего web-сайта.
