книги хакеры / журнал хакер / специальные выпуски / Специальный выпуск 50_Optimized
.pdf
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
|
|
|
|
hang |
e |
|
|
|
|
|
||
|
|
|
C |
|
E |
|
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|
||||||
|
|
X |
|
|
|
|
|
|
|
|
|
|
X |
|
|
|
|
|
|
|||||||
|
- |
|
|
|
|
|
d |
|
|
|
|
- |
|
|
|
|
|
|
d |
|
||||||
|
F |
|
|
|
|
|
|
|
t |
|
|
|
|
F |
|
|
|
|
|
|
|
|
t |
|
||
|
D |
|
|
|
|
|
|
|
|
i |
|
|
|
|
D |
|
|
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
|
r |
|
|
|
|
|
|
|
|
|
|
|
|
r |
||||
P |
|
|
|
|
|
NOW! |
o |
|
|
P |
|
|
|
|
|
|
NOW! |
o |
||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||
|
|
|
|
|
BUY |
|
|
|
79 |
|
|
|
|
|
|
BUY |
|
|
||||||||
|
|
|
|
to |
|
|
|
|
|
|
|
|
|
|
|
|
|
to |
|
|
|
|
|
|
||
w Click |
|
|
|
|
|
|
m |
|
|
w Click |
|
|
|
|
|
|
m |
|||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||
w |
|
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
|
|
|
|
||
|
w |
|
|
|
|
|
|
|
|
o |
|
|
|
|
w |
|
|
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
|
сим сразу же - это варварский способ |
|
|
|
. |
|
|
|
|
|
|
|
.c |
|
|||||
|
|
|
|
|
g |
.c |
|
|
|
|
|
|
|
|
|
g |
|
|||||||||
|
|
p |
|
|
|
|
|
|
|
|
|
|
|
p |
|
|
|
|
|
|
|
|
||||
|
|
|
df |
|
|
n |
e |
|
|
|
|
|
|
df |
|
|
n |
e |
|
|||||||
|
|
|
|
-xcha |
|
|
использовать вычислительные ресур- |
|
|
|
|
|
|
|
-x cha |
|
|
|
|
|
||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Í |
|
|||||
|
|
|
|
|
|
|
|
|
сы сервера. Решено строить карту на |
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
стороне клиента, на случай чего есть |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
три плана действий: а) написать ап- |
|
|
|
|
|
|
|
|
|
|
|
É |
|
||||
|
|
|
|
|
|
|
|
|
плет на Java; б) использовать движок |
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
Javascript Map Engine; в) делать карту |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
на Flash. Поклонники кофе в зернах |
|
|
|
|
|
|
|
|
|
|
|
À |
|
||||
|
|
|
|
|
|
|
|
|
могут забросать меня (и меня, похоже, |
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
тоже! - прим. AvaLANche'а) тухлыми |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
яйцами, но я с давних времен испыты- |
|
|
|
|
|
|
|
|
|
|
|
Ç |
|
||||
|
|
|
|
|
|
|
|
|
ваю легкую личную неприязнь к Java, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
а во всем виновата ее по-буддистки |
|
|
|
|
|
|
|
|
|
|
|
È |
|
||||
|
|
|
|
|
|
|
|
|
нелучшая производительность на |
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
платформе Macintosh (и на всех ос- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
тальных тоже - прим. AvaLANche'а). |
|
|
|
|
|
|
|
|
|
|
|
Ä |
|
||||
|
|
|
|
|
|
|
|
|
Возможно, кому-то повезло больше |
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
меня, но программы, написанные на |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
Java, пусть даже двадцать раз крос- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
сплатформенные, работали здесь го- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
раздо медленнее и глючнее, чем все |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
прочие. Еще одно доказательство ви- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
ны Java - отсутствие в команде опыт- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
ного Java-разработчика, который отк- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
рыл бы глаза на некоторые преиму- |
Традиционная трехколоночная верстка |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
щества (или закрыл бы глаза на не- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
достаки, да простят меня поклонники |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
Java :) - прим. AvaLANche'а). Второй |
странице элементы интерфейса так, |
Для наиболее удобного расположе- |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
вариант был отвергнут как раз из-за |
чтобы пользователи не проводили |
ния требуется предварительная рас- |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
того, что кроссплатфоменностью не |
часы в поисках всего нужного им (Не |
становка приоритетов для каждого из |
Задавая цвет |
|
|
|
|
|
|
|
|
||||||
|
|
|
|
|
|
|
|
|
обладал. Клиент дал такое напут- |
заставляйте меня думать! Я - солдат). |
вспомогательных элементов. Разде- |
|
|
|
|
|
|
|
|
|||||||
|
|
|
|
|
|
|
|
|
полосы прок- |
|
|
|
|
|
|
|
|
|||||||||
|
|
|
|
|
|
|
|
|
ствие: сайт должен работать одинако- |
Что мы имеем? Первое и самое важ- |
лим их на две группы в зависимости |
|
|
|
|
|
|
|
|
|||||||
|
|
|
|
|
|
|
|
|
рутки браузе- |
|
|
|
|
|
|
|
|
|||||||||
|
|
|
|
|
|
|
|
|
во хорошо во всех популярных брау- |
ное - собственно магазин с каталогом |
от степени важности выполняемых |
ра, ты должен |
|
|
|
|
|
|
|
|||||||
|
|
|
|
|
|
|
|
|
зерах. Но мы с удивлением обнаружи- |
товаров-рекламоносителей. Второе - |
каждой из них функций. Главное и |
помнить, что |
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
ваем его неспособность работать в |
элементы навигации сайта в целом и |
вспомогательные навигационные ме- |
эти прелести |
|
|
|
|
|
|
|
|
||||||
|
|
|
|
|
|
|
|
|
доступны лишь |
|
|
|
|
|
|
|
||||||||||
|
|
|
|
|
|
|
|
|
условиях, отличающихся от "Windows |
каталога в частности. Третье - тексто- |
ню, формы для поиска товаров и ав- |
|
|
|
|
|
|
|
||||||||
|
|
|
|
|
|
|
|
|
Windows-þçå- |
|
|
|
|
|
|
|
|
|||||||||
|
|
|
|
|
|
|
|
|
+ Internet Explorer". Другим доказа- |
вые блоки со ссылками на справоч- |
торизации зарегистрированных поль- |
рам, использу- |
|
|
|
|
|
|
|
|||||||
|
|
|
|
|
|
|
|
|
тельством недостатков Map Engine |
ную информацию (например, о том, |
зователей отнесем в первую группу и |
þùèì Internet |
|
|
|
|
|
|
|
|||||||
|
|
|
|
|
|
|
|
|
стал довольно большой объем интен- |
как сделать заказ, как пользоваться |
разместим в левой колонке, дополни- |
Explorer. |
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
сивно скачиваемых растровых фай- |
этой мудреной картой и проч.). Ничего |
тельные меню со справочной инфор- |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
лов, из которых, собственно, и состоит |
архисложного - выбираем классичес- |
мацией и редко используемыми наст- |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
карта в этом движке. В результате |
кую трехколоночную верстку, которая |
ройками сайта - во вторую группу и в |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
комфортная работа с сайтом доступна |
состоит из шапки с логотипом и эле- |
правую колонку. Чем выше располо- |
Назначая пара- |
|
|
|
|
|
|
|
|||||||
|
|
|
|
|
|
|
|
|
только счастливым обладателям ши- |
ментами фирменного стиля (часто в |
жен текст, тем он важнее. |
|
|
|
|
|
|
|
||||||||
|
|
|
|
|
|
|
|
|
рокополосных каналов, что для нас |
нее включают навигацию, форму по- |
Однако ничто не мешает нам сде- |
ìåòð Âorder â |
|
|
|
|
|
|
|
|
||||||
|
|
|
|
|
|
|
|
|
стилях формы, |
|
|
|
|
|
|
|
||||||||||
|
|
|
|
|
|
|
|
|
совершенно неприемлемо. Остается |
иска на сайте и т.д.) Под шапкой рас- |
лать главное меню гораздо более |
|
|
|
|
|
|
|
||||||||
|
|
|
|
|
|
|
|
|
èìåé â âèäó, |
|
|
|
|
|
|
|
|
|
||||||||
|
|
|
|
|
|
|
|
|
вариант с Macromedia Flash, который |
полагается область контента, разде- |
броским и заметным, чем все осталь- |
что вместе с |
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
обладает необходимой для создания |
ленная на три колонки. В самом низу - |
ное, и разместить его в правой колон- |
текстовыми |
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
по-настоящему интерактивного реше- |
подвал, в котором размещаем выход- |
ке. Хочешь эффективно выделить от- |
полями ввода |
|
|
|
|
|
|
|
|
||||||
|
|
|
|
|
|
|
|
|
ты "украсишь" |
|
|
|
|
|
|
|
||||||||||
|
|
|
|
|
|
|
|
|
ния гибкостью и позволяет размес- |
ные данные (копирайты, правовую ин- |
дельный блок в колонке и привлечь к |
|
|
|
|
|
|
|
||||||||
|
|
|
|
|
|
|
|
|
è Checkbox'û, |
|
|
|
|
|
|
|
|
|||||||||
|
|
|
|
|
|
|
|
|
тить всю карту в одном файле, а при |
формацию и прочее). |
нему внимание? Увеличивай размер |
которые в об- |
|
|
|
|
|
|
|
|
||||||
|
|
|
|
|
|
|
|
|
необходимости масштабировать ее |
С шапкой и подвалом все более-ме- |
кегля и выбирай цвет, который бы |
разованном |
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
без заметных потерь в качестве (а |
нее ясно - их внешний вид зависит от |
"перекричал" окружающие его текст |
границами |
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
квадрате будут |
|
|
|
|
|
|
|
||||||||||
|
|
|
|
|
|
|
|
|
все благодаря использованию век- |
дизайнерского решения, искать кото- |
и графику. Здесь важно проявить |
|
|
|
|
|
|
|
||||||||
|
|
|
|
|
|
|
|
|
выглядеть не- |
|
|
|
|
|
|
|
||||||||||
|
|
|
|
|
|
|
|
|
торной графики). |
рое мы будем чуть позже. А пока под- |
чувство меры и не переборщить с та- |
ëåïî. |
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
робнее разберем расположение эле- |
кими акцентами: стараясь привлечь |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ПРОЕКТИРОВАНИЕ ИНТЕРФЕЙСА |
ментов сайта в области контента. Оче- |
внимание пользователя, мы рискуем |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
Теперь мы знаем, кто и зачем бу- |
видным и логичным решением будет |
получить перегруженный и тяжелый |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
дет ходить на наш сайт, знаем, как |
размещение основного содержимого |
для восприятия сайт. Если по каким-то |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
сайт будет устроен... Самое время за- |
сайта (собственно информации) в |
причинам ты не хочешь располагать в |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
думаться над тем, как расположить на |
средней, самой большой колонке. |
левой колонке, например, главное ме- |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
ню - просто перемести его вверх, в |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
АНАТОМИЯ ВОСПРИЯТИЯ ИНФОРМАЦИИ |
шапку. Не забудь продублировать его |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
в нижней части страницы сайта, если |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Механизм восприятия текстовой информации связан с нацио- |
ожидаются большой объем текста и, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
как следствие, полоса прокрутки. Кро- |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
нальными особенностями аудитории сайта. Этот ресурс рассчитан |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
ме перечисленных элементов у нас на |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
на русскоязычных пользователей, и естественно векторы сосредо- |
сайте будет дополнительное навига- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
точения внимания посетителей будут направлены сверху вниз и |
ционное меню, которое буржуи назы- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
слева направо. Вполне логично: тексты на русском языке, в отли- |
вают "хлебные крошки". Внесем не- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
большой беспорядок в наш макет и |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
чие, скажем, от иврита, арабского и некоторых других языков, пи- |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
сделаем его ассиметричным, а об- |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
шут и читают слева направо. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ласть для "крошек" выделим над |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
средней и правой колонкой. Надо |
» |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-xcha |
|
|
|
|
80 УДОБСТВО ДЕЛАЕМВЕБ-МАГАЗИН
ЧТО ЕСТЕСТВЕННО, ТО НЕ БЕЗОБРАЗНО
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-x cha |
|
|
|
|
Ä È Ç À É Í
Что такое хорошо и что такое плохо
признать, что в этом случае мы немного отступили от традиций, так как это меню чаще всего размещают или над шапкой, или сразу под нею.
По возможности указывай размер кегля в относительных величинах. Браузеры позволяют легко масштабировать такие тексты, за что тебе будут благодарны обладатели мониторов с большим разрешением и люди с плохим зрением.
НАЧИНАЕМ РИСОВАТЬ
Безусловно, оформление сайта должно соответствовать его "офлайновому" фирменному стилю, для ознакомления с которым просим у заказчика логотип, фирменный бланк и фотографию щита с его саморекламой. Многие дизайнеры забывают о том, что они не художники, а ремесленники, и должны производить утилитарные вещи в первую очередь, а во вторую - произведения искусства. Нельзя делать дизайн ради дизайна, потому что потом им еще должны пользоваться простые смертные :-). К сожалению, эти логотип и бланк красноречиво свидетельствуют о больших творческих амбициях его автора.
С помощью веских аргументов убеждаем клиента в том, что клякса со стилизованным изображением буквы "дельта" греческого алфавита не может стать очевидным аналогом буквы "д" русского алфавита и затруднит чтение логотипа. Предлагаем заменить это безобразие на прописную "д". Отдельные умники могут припомнить логотип фирмы "Найк", в котором часто вообще не использует буквенная составляющая логотипа, но и на этот случай у меня заготовлено железное доказательство. Для стопроцентной узнаваемости такого логотипа нужно вложить в его раскрутку огромные деньги и тогда, конечно, графика не будет нуждаться в буквенной расшифровке. Например, серп и молот не требуют поясняющей подписи "коммунизм". Но это не для нас: что позволено Юпитеру, то нельзя быку. Потому просто нарисуем наше "д" так, чтобы было не слишком похоже на Дали, и тем самым придем к консенсусу. По ходу дела отметим, что кроме указанных заказчиком фирменных синего и оранжевого цветов за таковой придется принять и белый, присутствующий в качестве фона на бланке (белый цвет и отсутствие цвета - разные вещи). Лучше всего синий логотип будет смотреться на белом фоне, поэтому в качестве фона для будущих страниц выбираем именно его.
Никому не нужно объяснять, что перцы (овощи) должны быть похожи на перцы, а не на что-нибудь еще. На полученной от заказчика фотографии они были плоскими, совершенно не перечного цвета и не
отбрасывали те- ней (совсем как вампиры). Проведя элементарную цветокоррекцию, получаем здоро-
вый красный цвет и заодно убеждаемся, что ножка у одного из овощей все-таки в оригинале была задумана зеленой. Осветлив верхнюю и затемнив нижнюю часть перцев, а также добавив тени в соответствии с воображаемым направлением падающего света, полу- чаем в результате объем и естественность форм перцев. Выше посмотри на то, что было, а что получилось - в исходнике.
Рассмотрим внимательно бланк: внизу есть нечто имитирующее мазки кисти на холсте и что-то еще (весьма спорное решение для оформления деловой и распорядительной документации). Возможно, это должно было символизировать особый творческий подход к рекламе, принятый в этом агентстве. При разработке дизайна мы будем отталкиваться именно от этого символа, так как он особо дорог заказчику. Не являясь специалистом по такой высокохудожественной анархической мазне, я вспомнил сайт дизайн-студии Juxt interactive, возглавляемой небезызвестным Тоддом Пергассоном (пользуясь случаем, выражаю глубокий respect). Дабы проникнуться их стилем, весьма близким к тому, который требуется соз-
дать, пошел на сайт студии. К своему удивлению обнаружил у Джакстов совершенно новый дизайн, а всяческих завитков, клякс и прочего не осталось и в помине. Не велика беда: несмотря на то, что я был там последний раз пару лет назад, впечатления от яркого и легко запоминающегося дизайна еще живы. Решив прекратить поиски близких по духу сайтов, заглядываю в свою коллекцию шрифтов в поисках гарнитуры с подходящим рисунком шрифта ("завитки" на самом деле не что иное, как нарезка из отдельных частей букв декоративных шрифтов, стилизованных под рукописные). Из нескольких кандидатов выбираем English Vivace - отличный шрифт, выпущенный в 1990 году фирмой Bitstream Inc.
Нарезаем дизайн на дольки :-)
ХАКЕРСПЕЦ 01(50) 2005
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|
||||
|
|
X |
|
|
|
|
|
|
||||
|
- |
|
|
|
|
|
d |
|
|
|||
|
F |
|
|
|
|
|
|
|
t |
|
|
|
|
D |
|
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
|
|
r |
|
||
P |
|
|
|
|
|
NOW! |
o |
|
||||
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
BUY |
|
|
|
||||
|
|
|
|
to |
|
|
|
|
|
|
|
|
w Click |
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
m |
|
||||
w |
|
|
|
|
|
|
|
|
|
|
|
|
|
w |
|
df |
|
|
n |
|
|
o |
|
ССЫЛКИ И СОФТ |
|
|
. |
|
|
|
.c |
|
||||||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
|
|
|
-xcha |
|
e |
|
|
||||
|
|
|
|
|
|
|
|
|
|
www.useit.com - сайт отца usability Якоба Нильсена
www.flash99good.com - вопросы usability Flash-сайтов
www.usability.ru - URL говорит сам за себя
www.alistapart.com - Библия веб-дизайнера
Использованный софт
Macromedia Studio MX 2004 в составе: Freehand - для создания векторных объектов; Flash - для создания карты;
Fireworks - для разработки дизайна, нарезки и оптимизации растровых изображений;
Dreamweaver - для верстки макета;
Apple Textedit как редактор таблицы каскадных стилей.
Два перчика, иллюстрирующие ту самую фирменную "остроту", станут оригинальной деталью, украшающей шапку.
С одной стороны, при поставленной задаче сделать дизайн максимально выразительным и в то же время простым мы должны использовать минимум графики. С другой - необходимо дать понять посетителю сайта в его первый приход туда, что мы находимся на сайте рекламного агентства, специализирующегося на наружной рекламе. Очевидно, что на сайте должно присутствовать изображение с рекламного щита. Преследуя благую цель сделать шапку как можно проще, я решил размещать в ней только логотип и слоган. Слоган "Острая помощь в рекламе" написан оригинальным шрифтом - мы возьмем его прямо оттуда. С единственной оговоркой - черного цвета в шапке у нас не может быть, потому как он не является фирменным цветом клиента. Решение
простое - перекрашиваем его в нужный нам цвет и помещаем в шапку. Логотип и слоган должны уравновешивать друг друга в шапке, поэтому логотип, как более важный элемент, поместим слева, а слоган - справа.
Два перчика, иллюстрирующие ту самую фирменную "остроту", станут оригинальной деталью, украшающей шапку. Ну а для того, чтобы логотип и слоган не "повисли в воздухе", добавим к ним детали, поддерживающие их: оранжевую (фирменный цвет!) под логотипом, а под слоганом - светлосинюю с игривыми завитками , хорошо сочетающимися с ножкой одного из перчиков. Для того чтобы визуально отделить шапку от контента, небрежно проведем горизонтальную линию под "хлебными крошками". Полу- чаем простую и лаконичную шапку -
|
|
|
|
|
|
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
|
|
|
|
|
|
X |
|
|
|
|
|
|||
|
|
|
|
|
|
|
- |
|
|
|
|
|
d |
|
||
|
|
|
|
|
|
|
F |
|
|
|
|
|
|
t |
|
|
|
|
|
|
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
r |
||
|
|
|
|
|
|
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
|
|
|
|
|
|
to |
|
|
|
|
|
|
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
|
|
|
|
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
|
|
|
|
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
|
|
|
|
|
|
-x cha |
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Шапка
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-xcha |
|
|
|
|
||
|
Í |
|
|
|
|
|
|
|
||
|
É |
|
|
|
|
|
|
|
||
|
À |
|
|
|
|
|
|
|
||
|
Ç |
|
|
|
|
|
|
|
||
|
È |
|
|
|
|
|
|
|
||
|
Ä |
|
|
|
|
|
|
|
82 УДОБСТВО ДЕЛАЕМВЕБ-МАГАЗИН
Контент
лицо страницы на все 100% отражает фирменный стиль заказчика. В довершение всего назначим фоном к шапке градиентную заливку (от синего к белому).
Очевидно, что верх страницы приобрел стройность форм и целостность композиции, поэтому изображения с щитов помещаем в подвале. Дабы не увлекаться излишним декором и не плодить совершенно бесполезные в утилитарном плане делали, разместим на щитах выходные данные. Щит побольше, с контактной информацией клиента, упраздняет раздел "Контакты": адрес и телефон фирмы размещены на каждой странице сайта. Щит поменьше - копирайты разработчиков :), ну и самый маленький будет нести на себе три пиктограммы: ссылки на главную страницу, страницу для поиска товаров-рекламоносителей и на e- mail конторы. Для установления пущей исторической справедливости большой щит сделаем стилизован-
ным под биг-борд с "ногами" в виде буквы "w", что дополнительно подче- ркнет связь дизайна сайта с конкретной фирмой, являющейся распространителем рекламы: бигборды с такой оригинальной конструкцией вы не найдете больше нигде. Перевернутый градиент уравновесит верх и низ страницы и поможет создать иллюзию глубины пространства в подвале. Довершаем это дело фрагментами наиболее понравившихся букв "а-ля Тодд Пергассон", проведем небрежную белую линию, символизирующую горизонт и поставим рядом с маленьким щитом маленький силуэт счастливой влюбленной парочки, чтобы придать живость сухой абстрактной композиции подвала.
ВЕРСТКА МАКЕТА
После определения порядка расположения основных элементов сайта и разработки дизайна наступит время заняться нарезкой картинок и
Сверстанный макет
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|
|||
|
|
X |
|
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
|||
|
F |
|
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
||||
|
|
|
|
|
|
|
|||||
|
|
|
|
|
BUY |
|
|
||||
|
|
|
|
to |
|
|
|
|
|
|
|
w Click |
|
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
|
o |
|
версткой макета. Как и что нарезается,. |
|
|
|
|
|
e |
|
||||
|
|
p |
df |
|
|
|
g |
.c |
|
||
|
|
|
|
|
n |
|
|
|
|
||
|
|
|
|
-x cha |
|
|
|
|
|
ты можешь посмотреть в исходнике, а мы же сосредоточимся на макете.
Будем исходить из того, что страницы должны отображаться без горизонтальной прокрутки при разрешениях от 1024х768 точек и выше, а в идеале - от 800х600. Ты спросишь: "А почему "в идеале"? Дело в том, что одной из важных составляющих сайта является Flash-карта города, ширина которой после экспериментов с масштабированием была установлена в размере 640 пикселей, то есть средняя колонка не может быть меньше этого значения, если в странице покажется карта. А нужно еще разместить левую и правую колонки... Путем несложных подсчетов (и экспериментов по сравнению с шириной правой колонки) получаем для левой колонки ширину 188 пикселей, для правой - 144. Эти значения отличаются, потому что в левой колонке у нас в форме поиска будут находиться выпадающие списки, для которых меньшей ширины колонки может не хватить, ну а в левой ожидаются только блоки с текстовыми ссылками. Наша цель - создать шаблон "резиновой" страницы, которая будет масштабироваться и заполнять собой мониторы с самыми распространенными разрешениями при отсутствии на странице громоздких элементов (в нашем случае - карты города).
Открываем любимую программу верстки HTML-файлов и создаем таблицу шириной 100% - это будущая шапка. Поскольку картинок для шапки у нас две, делим таблицу пополам и помещаем картинки, не забывая прописать параметр Align (выравнивание). На дворе уже 2005 год, мы идем в ногу со временем и верстаем в соответствии со стандартом XHTML 1.0 :).
Использовать в таблицах атрибут Background нельзя: для каждой из таблиц, требующих фона в виде растрового изображения, все фоновые картинки прописываем в CSS как индивидуальные стили. Я сделал это во внешнем файле стилей, но никто не запрещает тебе объявить стили внутри HTML-до- кумента. Поскольку у шапки фон единообразный, создадим стиль, в котором будет фоновая картинка для всей таблицы. Далее действуем по аналогии - та же таблица, те же 100%. Делим ее на три части (по числу колонок). Для левой и правой зададим ширину в пикселях, среднюю же оставим в покое - пусть масштабируется как душе угодно :). Самое интересное - подвал.
Точно так же создаем таблицу со стопроцентной шириной (сильно сказал:)) и разделим ее опять же на три части, поскольку подвальную композицию логичнее всего разделить именно на столько частей. Не забудь создать для нее фоновую картинку и соответствующий класс в таблице стилей. Для каждой из групп снова создаем табли-
ХАКЕРСПЕЦ 01(50) 2005
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|
|||
|
|
X |
|
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
|||
|
F |
|
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
||||
|
|
|
|
|
|
|
|||||
|
|
|
|
|
BUY |
|
|
||||
|
|
|
|
to |
|
|
|
|
|
|
|
w Click |
|
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
eцы, каждая из которых заполнит собою |
||||
|
|
p |
df |
|
|
|
g |
.c |
|
||
|
|
|
|
|
n |
|
|
|
|
||
|
|
|
|
-xcha |
|
|
|
|
|
всю предоставленную ей ячейку. Такие сложности с нагромождением таблиц возникают из-за того, что для обеспе- чения свободы масштабирования придется создать фон, состоящий из двух слоев. Надеюсь, ты не запутаешься с таблицами и сможешь сделать это без подробного мануала, если нет - смотри, как сделал это я.
Кстати, картинки, располагающиеся поверх неоднородного, неповторяющегося фона (у нас он вынесен во вложенные таблицы) при дефиците свободного пространства могут перекрывать фон, нарушая тем самым единообразие. Но для настоящих индейцев это не проблема: нужно лишь при экспорте позаботиться о том, чтобы они имели прозрачный фон, сквозь который будут выглядывать... правильно, картинки, находящиеся под ними :). Но это уже совсем другая история - переходим к премудростям оптимизации графики.
ОПТИМИЗАЦИЯ ГРАФИКИ
Хороший сайт должен весить мало, поэтому наш долг и почетная обязанность - обеспечить наименьший вес графики. Повторю известные всем истины: если картинка представляет собой нечто содержащее большое количество цветов (например, фото), то разумнее всего экспортировать ее в формате .jpeg. Если же она представляет собой рисунок или схему с относительно небогатой палитрой, экспортируем в .gif. Выбирая формат для экспорта, прояви любопытство и поэкспериментируй с настройками, посмотри на реакцию картинки на изменения параметров экспорта. Даже железные правила имеют исключения, и твоя картинка может стать подтверждением одного из них. Я лишь поясню, чем я руководствовался работая над данным сайтом. Для отображения логотипа фир-
83
Готовый сайт
мы и многих картинок подвала необходимы один-два цвета и несколько их оттенков: в таком случае логично будет выбрать дающий в итоге меньший вес .gif.
В тех областях GIF'ов, где присутствует фон-градиент, путем редактирования палитры делаем пиксели фона прозрачными (из-за ограниченной 256-ю цветами палитры плавный переход одного цвета в другой здесь будет ступенчатым), сквозь которые будет виден заботливо приготовленный нами .jpeg, который еще и идеально подходит для градиентов. И тут разда-
дутся возмущенные голоса: "А как же
.png?" Но мы ответим им, что время этого формата еще не пришло и не все современные браузеры корректно поддерживают его отображение. Я нисколько не отрицаю его прогрессивности - в отдельных случаях он легко обставляет своих конкурентов, но все веб-дизайнеры, как настоящие заложники браузеростроителей, с нетерпением будут ждать новых версий "бродилок", для того чтобы поэкспериментировать с альфа-каналами и порадоваться прочим вкусностям
.png. Но это будет завтра, а сегодня - пользуемся тем, что есть.
НАПОСЛЕДОК
Исходные файлы дизайна сайта в формате .png (для редактирования рекомендуется Macromedia Fireworks), а также .HTML, таблицу стилей и оптимизированные изображения ты найдешь на прилагаемом к журналу ком- пакт-диске. Жалею, что не получи- лось вместить сюда вопросы проектирования Flash-карты, которые сами по себе просят отдельной статьи. Как она устроена и почему именно так - ты можешь спросить у меня или у Максима Шамана, по доброте душевной отдавшего свою аську тебе на растерзание (150457117), за что ему большое человеческое спасибо. Также я хотел бы поблагодарить Дениса Киселева (программера) за добрые советы и здравые идеи по проектированию сайта. E
Редактирование палитры GIF'а
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|
|||
|
|
X |
|
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
|
||
|
F |
|
|
|
|
|
|
t |
|
||
|
D |
|
|
|
|
|
|
|
i |
r |
|
P |
|
|
|
|
|
NOW! |
o |
||||
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
|
w Click |
|
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
|||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
|
df |
|
|
n |
e |
|
|
||
|
|
|
|
-x cha |
|
|
|
|
|
||
|
|
|
|
|
|
|
Í |
|
|
||
|
|
|
|
|
|
|
É |
|
|
||
|
|
|
|
|
|
|
À |
|
|
||
|
|
|
|
|
|
|
Ç |
|
|
||
|
|
|
|
|
|
|
È |
|
|
||
|
|
|
|
|
|
|
Ä |
|
|
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
hang |
e |
|
|
|
|
|
||
|
|
|
C |
|
E |
|
|
|
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|
||||||
|
|
X |
|
|
|
|
|
|
|
|
|
|
|
|
|
X |
|
|
|
|
|
|
||||||
|
- |
|
|
|
|
|
d |
|
|
|
|
|
|
|
- |
|
|
|
|
|
d |
|
||||||
|
F |
|
|
|
|
|
|
|
t |
|
|
|
|
|
|
|
F |
|
|
|
|
|
|
|
t |
|
||
|
D |
|
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
D |
|
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
|
r |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
r |
||||
P |
|
|
|
|
|
NOW! |
o |
|
|
|
|
|
P |
|
|
|
|
|
NOW! |
o |
||||||||
|
|
|
|
|
|
|
|
|
В ДВИЖЕНИИ |
|
|
|
|
|
|
|
|
|||||||||||
|
|
|
|
|
BUY |
|
|
|
86 |
ИНТЕРАКТИВНОСТЬMACROMEDIAFLASH |
|
|
|
|
BUY |
|
|
|||||||||||
|
|
|
|
to |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
to |
|
|
|
|
|
|
||
w Click |
|
|
|
|
|
|
|
|
|
|
|
|
w Click |
|
|
|
|
|
|
|
||||||||
|
|
|
|
|
|
o |
m |
|
|
|
|
|
|
|
|
|
|
|
o |
m |
||||||||
|
w |
|
|
|
|
|
|
|
|
|
|
Jenius (основатель) и Mcrush (кодер), дизайн-студия Xpdesign (www.xpdesign.fromru.com)w |
|
|
|
|
|
|
|
|
|
|||||||
w |
|
|
|
|
Content: |
|
|
|
|
w |
|
|
|
|
|
|
|
|
|
|
||||||||
|
. |
|
|
|
|
g |
.c |
|
|
|
|
|
|
|
. |
|
|
|
|
g |
.c |
|
||||||
|
|
p |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
p |
|
|
|
|
|
|
|
||||
|
|
|
df |
|
|
n |
e |
|
|
|
|
|
|
|
|
|
df |
|
|
n |
e |
|
||||||
|
|
|
|
-xcha |
|
|
|
|
|
|
ИНТЕРАКТИВНОСТЬ |
|
|
|
-x cha |
|
|
|
|
|
||||||||
|
|
|
|
|
|
|
С чего начать: опыт |
|
|
|
|
|
|
|
|
|
|
|
||||||||||
|
|
|
|
|
|
|
86 |
Интерактивность |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
Macromedia Flash |
MACROMEDIA FLASH |
|
|
|
|
|
|
|
|
|
|
|
|||||||||
|
|
|
|
|
|
|
Создание и анимация трехмерных |
|
|
|
|
|
|
|
|
|
|
|
||||||||||
|
|
|
|
|
|
|
профессионалов |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
90 Объемный мультик |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
моделей |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
С ЧЕГО НАЧАТЬ: ОПЫТ ПРОФЕССИОНАЛОВ |
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
отелось сделать этот материал непопсовым введением во Flash, чтобы не |
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
Õувеличивать количество хлама на эту тему, накопившееся в книжках, |
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
журналах и интернете. Нам это удалось. Своим опытом и знаниями делятся |
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
основатель и кодер дизайн-студии Xpdesign (www.xpdesign.fromru.com), работы |
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
которых впечатляют: www.tpst.ru, www.kontidom.ru |
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
» |
INTRO |
|
ACTION SCRIPT |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
И до нас о Flash писали до- |
Эти первые шаги в создании интерактив- |
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
вольно много, и наверняка |
ных проектов… Как же сделать проект |
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
многим уже известно, что это |
действительно интерактивным? Именно для |
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
такое. Не будем монотонно по- |
этого был создан специальный язык прог- |
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
вествовать об истории развития Macromedia |
раммирования - Action Script (далее просто |
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
и технологии Flash и ограничимся самым ин- |
AS), позволяющий полностью управлять на- |
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
тересным - подробным описанием возмож- |
шим мувиком. AS заточен строго под Flash, |
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
ностей Flash, мнением профессионалов, сло- |
поэтому максимально удобен и прост в осво- |
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
жившимся в результате долгого и порой нуд- |
ении, хотя и недостатки кое-какие имеет. Все |
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
ного, хотя в общем очень увлекательного ис- |
перечисленное ниже позволяет Action Script. |
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
пользования этого продукта. |
Ты сможешь управлять ходом событий в |
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
Современный рекламный бизнес развива- |
мувике (что должно произойти сначала, а |
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
ется фантастически быстрыми темпами в его |
что попозже) и создавать анимацию само- |
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
всех без исключения отраслях. Рекламные |
стоятельно, например, двигать какой-то объ- |
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
агентства грызут друг другу глотки, борясь |
ект с определенной скоростью. Особое вни- |
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
за клиентов. На голубых экранах мелькают |
мание стоит уделить анимации и рисованию |
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
ДВИЖЕНИИ |
рекламные ролики неземной красоты. Все |
только на AS, без использования какой-либо |
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
|
|
|
это требует новых и новых прогрессивных |
дополнительной графики. На Flash можно |
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
технологий. Web-дизайн также не обошла |
легко написать 3D-движок, к которому впос- |
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
эта гонка вооружения, и на смену скучному |
ледствии прикрепляется физика, какие-ни- |
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
HTML’у пришел Flash, открывший новые го- |
будь эффекты и даже текстурирование. Это, |
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
ризонты в интернет-рекламе. |
конечно, не Doom 3, но всякие красивости |
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
Что же особенного кроется в этой техноло- |
получишь без проблем. |
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
гии, которая носит гордое имя Flash? Мы |
Фантастические возможности получения и |
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
вряд ли опишем весь ее потенциал. Вот спи- |
передачи данных из других приложений - од- |
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
сок некоторых результатов применения Flash |
на из самых важных функций AS. Можно |
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
(будем объективны и выскажем даже горь- |
связать Flash с XML, PHP, Java Script, HTML, |
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
кую правду): |
|
DHTML, ASP, MySQL и еще множеством прог- |
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
рамм и языков. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- web-сайты с повышенным уровнем инте- |
Action Script - гибкий, доступный и надеж- |
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
рактивности, красочной анимацией и малым |
ный инструмент, без которого не обходится |
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
весом; |
|
|
|
ни один серьезный проект. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- работающие локально презентации; |
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
- красиво оформленные, настойчивые в |
ПРОГРАММИРОВАНИЕ В ACTION |
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
своем труде баннеры с малым весом (в IE че- |
SCRIPT |
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
рез опции Windows их не отключишь); |
Операторы в AS традиционны и чем-то |
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
- свой собственный Word или калькулятор |
напоминают С++ и даже Бейсик, однако на- |
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
(увы, не самый удобный способ создавать |
чинающему советуем купить какую-нибудь |
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
программы); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- игры (большинство неоправданно попу- |
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
 |
|
лярны и выбираются баловниками, чего не |
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
скажешь только о нескольких онлайн-про- |
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
|
|
ектах); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
- мульты (с этого начинали многие :); |
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
|
|
- векторная графика (способ рисовать век- |
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
|
|
торы, используемый только маньяками, кото- |
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
рые не замечают созданный специально для |
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
этого Illustrator). |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
Все это - стандартные и широко распростра- |
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
ненные пути применения Flash, но наличие в |
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
нем скрытых талантов никто не отрицает. |
Jenius - основатель дизайн-студии Xpdesign |
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ХАКЕРСПЕЦ |
01(50) 2005 |
|
|
|
|
|
|
|
|
|
|
|
|
|