WEB-дизайн: Flash технологии

· ВНИМАНИЕ! В современном Интернете принято молчаливое соглашение о том, что — профессиональный сайт должен корректно отображаться при экранном разрешении 640x480 точек с цветовой палитрой в 256 цветов.

Следующее правило обусловлено тем, что вам неизвестно программное обеспечение, которое используется вашими потенциальными посетителями для просмотра Web-страниц. Речь идет о браузерах. Как уже говорилось, согласно статистике самыми популярными браузерами среди пользователей Интернета являются Microsoft Internet Explorer и Opera различных версий, все остальные распространены в значительно меньшей степени. Как известно, Microsoft Internet Explorer и Opera используют различные алгоритмы обработки HTML-кода, из-за чего один и тот же элемент в этих двух броузерах может отображаться совершенно по-разному. Среди начинающих Web-дизайнеров бытует мнение, будто заставить страницу выглядеть одинаковым образом в упомянутых программах решительно невозможно. Однако это совершенно не так: все различия между Opera и Explorer прекрасно поддаются количественной оценке и анализу, более того, существует множество алгоритмов, применение которых позволяет свести неадекватность отображения страниц к минимуму.

· ВНИМАНИЕ! Web-страница должна идентично отображаться в любом браузере.

Разумеется, непосредственно после создания предварительного шаблона будущей Web-страницы этот html-документ необходимо проверить на идентичность отображения в браузерах.

Пользователи используют Интернет-соединения имеющие разные скорости передачи данных, иными словами, работая на медленных линиях, загрузка одного html-документа может занять длительное время. Таким образом, приходим к следующему очевидному закону Web-дизайна.

· ВНИМАНИЕ! Все страницы Web-сайта, а также все интегрированные в них графические и интерактивные элементы должны быть минимальными по объему.

Другой момент, о котором обязательно следует упомянуть, касается навигации по сайту. У пользователя не должно возникать ни малейших затруднений при переходе от одного раздела созданного ресурса к другому, независимо от модели его компьютера и типа установленного программного обеспечения. Он должен отчетливо представлять себе логическую структуру вашего проекта и, по возможности, иметь доступ ко всем его компонентам в любой момент времени. Именно поэтому необходимо помнить следующее.

· ВНИМАНИЕ! Созданная вами Web-страница должна обязательно включать навигационные элементы, охватывающие все разделы вашего сайта, причем эти элементы должны всегда быть на виду. Их расположение следует выбирать, исходя из максимального удобства для пользователя. Если они размещены в верхней части страницы и пропадают из поля зрения после скроллинга (прокрутки экрана вниз), не забудьте продублировать их в нижней части документа. Графические ссылки и активные элементы следует повторить в тестовой форме в расчете на пользователей, в браузерах которых отключено отображение графики или отсутствует поддержка Java.

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

· ВНИМАНИЕ! Старайтесь выдержать весь проект в одном дизайнерском стиле, оформляйте различные его разделы таким образом, чтобы общее художественное решение было схожим для всего сайта.

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

· ВНИМАНИЕ! Не используйте на одной Web-странице более трех различных шрифтов, включая шрифты, применяемые при создании графических элементов.

· ВНИМАНИЕ! Используйте только корректные цветовые схемы и не применяйте при оформлении документов более трех различных цветов.

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

1.2 Использование Flash технологий при создании WEB продуктов

1.2.1 История появления Flash

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

В конце 1980-х с появлением персональных компьютеров сеть Интернет из среды обитания компьютерных гуру превратилась в общедоступную информационную сеть.

В 1994 году с появлением World Wide Web (www) сеть Интернет начинает интенсивно развиваться. Появляется множество сайтов, посвящённых различной тематике.

Дизайнеры, да и просто пользователи Internet-ресурсов мечтали превратить Интернет из текстовой среды в мультимедийную, чтобы сайты были удобнее и привлекательнее.

Сначала страницы стали походить на электронную газету, но со спецификой возможностей компьютера и Интернета: появились переходы по ссылкам, новости вносились в сеть раньше, чем в печатные издания, появилась возможность просмотра архивов новостей и т.д.

Появляется необходимость создания анимации. Видеоролики не могли использоваться для встраивания в Web-документы из-за большого размера. Поэтому на сайтах используется gif-анимация (последовательное отображение рисунков), позже Web-мастера внедряют на своих сайтах анимацию, изготовленную с использованием одной из технологий векторной графики. Но из-за большого разнообразия программных средств и разработчиков программных продуктов возникала проблема с отображением анимации на компьютере пользователя. Для отображения того или иного формата необходимо было устанавливать всё новые и новые плагины. Если же они не были установлены, то посетители сайта не могли воспринять идею дизайнера, а в некоторых случаях получали просто раскиданную по экрану текстовую информацию вместо удобного сайта.

Выход был один - одна из компаний создателей векторной графики объединится с гигантом анимации и станет доминирующей на рынке векторной анимации. Такими компаниями стали FutureSplash Animator и Macromedia. Джонатан Гай, основатель компании FutureSplash Animator пытался сначала договориться с одним из гигантов - Adobe. Но сделка с этой компанией не состоялась. По-настоящему продуктом Джонатана заинтересовались после того, как FutureSplash Animator был использован такими компаниями, как Microsoft и Disney Online. В ноябре 1996 года Джонатан Гай и его коллеги присоединились к компании Macromedia, и FutureSplash Animator превратился Macromedia Flash 1.0. Yа сегодняшний момент компания Adobe всё-таки объединилась с Macromedia Flash.

К концу 20-го века возможности Web-анимации достигли уровня обычных видеороликов, и ограничивались лишь скоростными возможностями Интернета, что, по сути, и сдерживает графическое развитие Flash-технологий. Но в Macromedia Flash внедрены такие возможности, о которых не могут и мечтать создатели видеофильмов - это диалог, участие пользователя в анимации. Первоначально это были банальные кнопочки, от нажатия которых происходили те или иные графические изменения. Но очень быстро Macromedia Flash превратилось в среду разработки профессиональных приложений: сайтов, справочников, игр, Интернет-казино. Появление встроенного языка программирования ActionScript, позволяет разработчикам создавать CGI программы, полнофункциональные HTTP приложения.

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

1.2.2 Примеры использования Flash-технологий

Flash-технологии, или, как их еще называют, технологии интерактивной Web-анимации, были разработаны компанией Macromedia и объединили в себе множество мощных технологических решений в области мультимедийного представления информации. Ориентация на векторную графику в качестве основного инструмента разработки Flash-программ позволила реализовать все базовые элементы мультимедиа: движение, звук и интерактивность объектов. При этом размер получающихся программ минимален и результат их работы не зависит от разрешения экрана у пользователя - а это одни из основных требований, предъявляемых к Internet-проектам.

Недавно появившись, Flash уже завоевал большую популярность среди Web-дизайнеров. Flash придает сайтам динамичность, позволяет использовать больше звуковых и графических эффектов. Все программное обеспечение, необходимое для просмотра Flash-страниц, является свободно распространяемым (freeware). Программы для создания страниц - условно-бесплатные (shareware), и Macromedia обеспечивает возможность пользования ими в течение 30 дней.

Обычно Flash-проекты созданы посредством интеграции в обычный HTML-документ Flash-объекта. Для просмотра такой страницы необходим плагин, входящий в стандартную конфигурацию Windows 98. Размер этого плагина всего 160 кб. Если по каким-либо причинам этой программы нет, ее можно взять с сайта Macromedia. Однако в большинстве случаев Flash-страница сама определяет отсутствие необходимого программного обеспечения, автоматически скачивает его и после этого становится видимой.

Другим примером использования Flash-технологии является создание интерактивных локальных презентаций. Для этого в программе предусмотрена опция создания исполняемого (.exe) файла. Но и в этом случае размер программы остается небольшим и доступным для использования в Интернете.

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

Основным объектом, которым программист оперирует при создании Flash-анимации, является кадр. А использование мощной внутренней системы меток, ссылок и переменных позволяет проигрывать наборы кадров несколько раз в зависимости от значения конкретных переменных. Таким образом, экономится объем конечной программы и время загрузки.

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

Фотографии, звуки, векторная графика - все это Flash помещает в один файл с расширением .swf (при создании презентаций файл имеет расширение .exe). Все это в сочетании с возможностью управления загрузкой облегчает работу как программиста при создании страницы, так и конечного пользователя, который имеет возможность сразу увидеть, например, заставку, ожидаемое время до окончания загрузки и т.д.

Естественно, Flash не обходится без недостатков. Основным серьезным недостатком использования Flash-объектов является необходимость для конечного пользователя иметь установленный плагин. Хотя, как было сказано выше, во многих случаях, пользователь уже имеет эту программу.

Второй недостаток заключается в высоких требованиях к ресурсам компьютера, на котором просматривается Flash-ролик. Проигрыватель анимации отнимает достаточно много ресурсов процессора, а скорость проигрывания сильно зависит от размеров экрана. Но, тем не менее, программа для проигрывания Flash-роликов работает на любом компьютере под управлением ОС Windows любых версий. Она не предъявляет жестких требований ни к количеству оперативной памяти, ни к типу процессора. Единственным различием будет скорость работы.

Пока Flash-технология в явном виде не поддерживает трехмерную графику, однако мощный набор инструментов и утилит позволяет создавать двумерные структуры, зрительно неотличимые от трехмерных.

1.2.3 Преимущества и недостатки

Прежде, чем применять Flash на сайте, нужно семь раз отмерить. Оказывается, не все знают, что это такое. Одни применяют Flash от необходимости, другие - от незнания.

Дело в том, что Flash - это не обычная растровая (gif, jpg, bmp и т.п.) картинка и не html. А мультемидийная технология. Как у любой технологии, у этой есть свои преимущества и недостатки.

Рассматривать Flash-технологию стоит с нескольких позиций:

· С точки зрения внешнего оформления и культуры сайта;

· C функционально-технической стороны;

· C практической стороны.

1. Оформление и культура сайта

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

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

2. Функционально-техническая сторона

Flash использует plug-in модули, мультемидийные функции, на сегодняшний день не интегрированные в браузеры. В силу присущих Flash-технологии свойств она имеет функциональные недостатки.

Наличие этих недостатков совсем не означает, что надо вовсе отказаться от Flash. Просто с одной стороны на весы нужно положить необходимость использования Flash-элемента, с другой стороны — его недостатки

- Обесцениваются функции браузера:

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

Кнопка «назад». Она перемещает не к началу сценария анимации, как ожидается, а на предыдущую страницу сайта, где Flash-элемент еще/уже отсутствует;

- Поиск по странице

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

- Вес страниц увеличивается в разы;

- Навигация во Flash-сайтах часто неудобна;

Сайты, построенные на Flash в большинстве случаев некорректно работают в офлайне (т.е. когда страницы сайта скачаны на компьютер пользователя и просматриваются в автономном режиме).

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

3. Практическая сторона

Кроме технических тонкостей, которые увидит не каждый, Flash обладает рядом весомых практических недостатков:

- Flash-элементы имеют большой размер. Мультимедийные возможности Flash широки, поэтому дизайнер просто не удерживается, чтобы не поэксплуатировать их;

- Flash-ролики создаются раз и навсегда. Вместо этого можно уделить внимание более частому обновлению содержания сайта;

- Скачанные на компьютер Flash-сайты отображаются некорректно. Информация, находящаяся во Flash-формате недоступна (для закачки Flash-элементов требуется программное обеспечение, которое обычно отсутствует у пользователя).

Прежде, чем применять Flash на сайте, надо поставить себя на место пользователя: нужна информация; мало времени; модемная скорость; трафик заканчивается.

Проанализировав этот параграф, сделаем вывод:

- что Flash противопоказан крупным информационным сайтам (главная цель которых - погоня за посетителями);

- Flash применим для малого сайта узкой специализации (например, для сайта, чей адрес узнается с визитки его представителя и только);

Страницы: 1, 2, 3