Пермская группа пользователей Linux

Итак, продолжим тему графики.

2. Слои.

Технологии создания сайтов позволяют использовать слои. То есть у нас есть возможность размещать один объект поверх другого. Например, текст поверх картинки.

Рассмотрим пример: текст с иллюстрацией.

В первом случае изображение наложено фоном у объекта с текстом. Но для того, чтобы картинка была не под текстом, а левее, нам приходится делать отступ слева, а это не всегда возможно. Например, если слева находится меню или у сайта жестко задана сетка.

Во втором случае мы просто вынесли изображение в отдельный объект и сдвинули его влево относительно текста. Кроме того, расположили его так, чтобы он находился под текстом и не мешал с ним работать. Здесь нам не пришлось менять сетку сайта и раздвигать объект с текстом.

3. Перемещение слоев.

Технология слоёв активно используется в анимации на сайте и разных эффектах, написанных на яваскрипте.

Здесь можно посмотреть пример эффекта, который обычно реализуется на флеше (составной баннер справа): http://bar.yandex.ru/firefox/

А вот пример современного интерфейса, выполненного с помощью слоёв и яваскрипта: http://sibirlink.nestor-online.ru/ (yes / no)
Здесь каждый отрезок пути и каждая точка — отдельный объект, отдельный слой.

http://www.permlug.org/card/ — а здесь слоями сделан эффект стирания защитного слоя с карты.

Следует отметить одну важную особенность: каждый слой всегда является прямоугольником. И вообще, все объекты на сайтах всегда прямоугольные. Даже если на картинке у вас нарисован кружок, а вокруг него прозрачная область, то все равно эта картинка будет прямоугольной. А сквозь прозрачные области нельзя будет кликнуть на объекте, который расположен на нижнем слое.

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

4. Прозрачность.

Каждому объекту можно задавать степень прозрачности: от 0 до 100%. Причем, если у объекта есть какое-то содержимое, то оно тоже будет иметь такую же прозрачность.
Этот эффект обычно применяется для создания эффекта затемнения или плавного появления объекта.
Как, например, здесь: http://mdrag.nestor-online.ru/
Или здесь, когда нажимаете «Войти»: http://vidizokna.ru/

5. Анимация: Javascript и Flash.

Мы перечислили все возможности вёрстки относительно графики. Теперь давайте сравним возможности технологий яваскрипт и флеш с точки зрения анимации.

Передвижение объектов — это возможность сдвинуть объект вверх, вниз, вправо или влево. Формально обе технологии (яваскрипт и флеш) позволяют нам это сделать, но есть важное отличие: чтобы передвинуть небольшую картинку из одного конца окна в другой, нам необходимо сначала создать флеш-объект шириной во всю страницу, что очень неудобно.

Вообще, нужно всегда помнить: все действия по изменению размеров и положения объектов флеш позволяет делать только внутри себя. То есть, чтобы сделать флеш-анимацию во всех четырех углах страницы, нам необходимо создать один большой объект размером на всю страницу.

Простой пример: падающий снег на странице. Если делать этот эффект с помощью яваскрипта, то основной контент будет перекрываться только непосредственно снежинками, то есть несколькими маленькими объектами, который не будут мешать работе с сайтом. А если делать этот эффект на флеш, то флеш-объект перекроет весь контент и сделает невозможной работу с сайтом.

С прозрачностью и изменением размеров, думаю, всё понятно. Тут различий нет.

Вращение объектов возможно только во флеше. Именно полноценное вращение, а не эмуляция с помощью набора из нескольких картинок. Хотя довольно часто можно обойтись простой gif-анимацией — именно так чаще всего сделан индикатор загрузки данных, наверняка многие его видели: http://mdrag.nestor-online.ru/images/waiting.gif

Взаимодействие с объектами страницы возможно только с помощью яваскрипта. Например, если нам надо добавить новый пункт в меню после нажатия пользователем кнопки. Или, допустим, обновить личный счёт пользователя, если он выиграл во флеш-игре и заработал очки. Особенность флеш, как я уже говорил, в том, что это объект сам в себе — он может совершать действия только внутри себя. Взаимодействие же с другими объектами флеш может осуществлять только посредством яваскрипта.

Векторная графика до недавних пор не поддерживалась браузерами, и работа с ней была доступна только через флеш. Однако сейчас эта ситуация меняется. Уже несколько лет существует графический формат SVG, который на сегодняшний день поддерживается всеми популярными браузерами, кроме Internet Explorer, однако есть надежда, что поддержка этого формата появится в IE 9 версии.

Формат SVG поддерживается программами Adobe Illustrator, Corel Draw и Microsoft Visio.
Этот формат — наше ближайшее будущее, поэтому дизайнерам стоит обратить внимание на его возможности.