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

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

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

Для главной и внутренних страниц иногда рисуются отдельные  макеты с дополнениями или изменениями в соответствии с тематикой страницы.

Изображение первоначально  может быть векторным или растровым, выполненным в Adobe Illustrator, Adobe Photoshop или  другом визуальном редакторе (например, Scribus или Inkscape), но для верстальщика изображение, как правило, переводится в растровый формат.

Для демонстрации клиенту  изображение обычно переводится  в простой однослойный и привычный  формат изображений.

 

 

1.1.4 Необходимый инструментарий

Для того чтобы Web-мастер чувствовал себя максимально комфортно при разработке нового проекта, помимо рабочего места и персонального компьютера ему необходим определенный набор программного обеспечения, базовый инструментарий, без которого создателю Web-сайта просто не обойтись. Начинающему Web-мастеру порой бывает трудно сориентироваться не только во всем многообразии наименований существующих программ, но даже в списке минимально необходимых для работы приложений. Можно что-либо забыть, упустить или даже просто не знать о том, что впоследствии вам понадобится какая-то про- грамма или утилита. Ниже предложен полный список средств, которыми вы должны располагать перед тем, как возьметесь за разработку своего первого Интернет-проекта. Данные программы рассчитаны на использование под управлением Microsoft Windows 9X. Итак, для полноценной работы Web-дизайнеру необходимы:

- Среда разработчика  документов HTML — так называемый WYSIWYG-pe-дактор, рекомендуется программа  Microsoft FrontPage версии 98 или 2000, либо FrontPage Express.

- Редактор векторной  графики, рекомендуется CorelDraw Версии 8 или 9.

- Редактор растровой  графики, рекомендуется Adobe Photoshop версии 4.0или выше.

- Браузер Microsoft Internet Explorer версии 4.0 или выше.

- Браузер Netscape Navigator версии 4.01 или выше.

- Перекодировщик кириллицы,  рекомендуются программы ConvHTML и SNKDECode.

- Оптимизатор HTML, рекомендуется  UtilMind HTML Compressor версии 1.5 или выше.

- Оптимизатор растровых  изображений GIF, рекомендуется программа  Gif-Clean 32.

- Оптимизатор растровых  изображений JPEG, рекомендуется программа JPEGCleaner версии 2.1 или выше.

- Редактор GIF-анимации, рекомендуется  программа Ulead GifAnimator.

- Фрагментатор графики,  рекомендуется программа PictureDiser.

- FTP-клиент, рекомендуется  программа CuteFTP.

- Adobe Photoshop

- CorelDraw

Значительная часть этих приложений доступна в Интернете для свободного копирования в виде версий freeware и shareware. Наконец, в качестве редактора HTML-документов вам понадобится программа Microsoft FrontPage Express, входящая в комплект поставки браузера Microsoft Internet Explorer 5.0 или выше и операционной системы не ниже Windows 98.

 

1.1.5 Основные постулаты  Web-дизайна

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

При планировании и создании любого Web-ресурса важно помнить, что главный критерий, на который  следует ориентироваться в процессе разработки страниц, это удобство конечного  пользователя, то есть будущих посетителей  вашего сайта или домашней странички. Оно и не удивительно: ведь именно для того, чтобы посетители могли ознакомиться с содержимым вашего ресурса, вы и создаете его. Сложность момента заключается в том, что упомянутых выше потенциальных посетителей существует великое множество, причем используют они чрезвычайно широкий спектр аппаратных средств и программного обеспечения. Отсюда вытекает необходимость определенной стандартизации подходов к Web-дизайну, выработки алгоритмов, которые могли бы удовлетворить всю вашу потенциальную аудиторию, позволяя людям адекватно и с максимальным комфортом воспринимать содержимое вашего сайта. Увы, на практике создание подобных универсальных решений не представляется возможным не только в связи с быстрой эволюцией вычислительной техники и программного обеспечения, но и по причине чрезмерной широты ассортимента уже существующих аппаратных и программных средств. Единственно возможным выходом в этой ситуации было бы адаптировать сайт к тем минимальным параметрам пользовательской системы, ниже которых отображение графической и текстовой информации на экране компьютера будет затруднительно. Такой подход выглядит достаточно привлекательным с точки зрения демократичности по отношению ко всем категориям пользователей: у владельцев устаревших компьютеров со слабыми мониторами и видеокартами в процессе знакомства с вашим ресурсом не возникнет особых сложностей, владельцы же современных машин тем более не будут испытывать каких-либо проблем. Именно отсюда и берет начало первое правило, которое вам следует усвоить и запомнить. Формулируется оно следующим образом.

В современном Интернете  принято молчаливое соглашение о  том, что — профессиональный сайт должен корректно отображаться при  экранном разрешении 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 приложения.