Обучающие курсы:

Обучение профессии "Разработчик C#" + стажировка в Mail.ru
Обучение профессии "Разработчик Python" + трудоустройство
Обучение профессии "Веб-разработчик" + стажировка в Mail.ru


Главная страница
Библиотека (скачать книги)
Скачать софт
Введение в программирование
Стандарты для C++
Уроки по C#
Уроки по Python
HTML
Веб-дизайн
Ассемблер в среде Windows
ActiveX
Javascript
Общее о Линукс
Линукс - подробно
Линукс - новое
Delphi
Паскаль для начинающих
Турбопаскаль
Новости
Партнеры
Наши предложения
Архив новостей





Урок 30. Особенности дизайна с использованием флэш технологии

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

Но, во-первых, есть модные сайты и без флэша. Если не брать в расчет скучные сайты вроде веб-представительства Маши Цигаль (www.mashatsigal.com), то среди таких сайтов можно встретить по-настоящему интересные и необычные работы.

Например, сайт молодого дизайнера одежды Киры Пластининой (www.kiraplastinina.com) показывает, что вполне можно обойтись средствами HTML, CSS, JavaScript и качественной графики и что давно всеми муссируемую идею сайта с журналом в основе дизайна можно, наконец, сделать элегантно, с выдумкой и с использованием динамики на страницах.
А сайт Султанны Французовой (www.sultannafrantsuzova.com, тоже без флэша) статичный, без особых экспериментов с интерфейсом, но использует интересное совмещение рисованной графики, выполненной в псевдонебрежном стиле, и качественных фотографий.

Отсюда вывод: не все то флэш, что двигается и выглядит привлекательно.

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

 

Проблема 1.
Перенасыщенность эффектами

Трудно удержаться и не сделать каждое меню выплывающим с разных сторон, а все разделы открывающимися в новом стиле. Фотографии при наведении мыши должны покачиваться, а прежде чем текст откроется, по нему будут бегать какие-то подозрительные геометрические фигуры. Первый раз это может позабавить. Второй раз это можно показать другу. Третий раз это может начать раздражать; а если на сайт заходишь только за новостями (30-40 Кб), то весь ролик со спецэффектами (240 Кб) каждый раз загружать просто обидно.
Это как раз тот случай, когда красота не делает мир лучше. Работая на эстетику, разработчик забывает о функциональности.

 

Проблема 2.
Неполная поддержка традиционных интерфейсных элементов

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

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

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

 

Проблема 3.
Фиксированная верстка

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

Почему бы не добиться того же самого на флэше?
Ведь чаще всего то, что мы видим на флэш-сайтах — это прямоугольник посреди страницы; в этот прямоугольник заключается ролик, а пространство вне прямоугольника используется очень скупо. По адресу http://flash-mx.ru/url_elastic можно найти исчерпывающее описание того, как от объекта Stage можно добиться такого поведения, когда верстка страницы будет меняться при масштабировании окна браузера и окажется корректной на разных разрешениях мониторов.
Кроме того, можно использовать совмещение традиционного HTML и флэша.

 

Проблема 4.
Возможность отключения или отсутствия в браузере

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

Наконец, есть разные версии флэш-плейера, и то, что работает в 8 версии, не работает в 7, а ведь не все регулярно следят за обновлением браузера.
В целом сложно найти хотя бы один сайт, где все эти проблемы были бы решены целиком и полностью. Впрочем, есть сайты, для которых такое решение и не требуется. Так, www.conclaveobscurum.ru Олега Пащенко задумывался и создавался скорее не как информационный ресурс, а именно как дизайнерский проект, блестяще воплощенный в жизнь.

Проект «Приключения Шерлока Холмса и доктора Ватсона» (http://221b.ru/main.htm) сделан на флэше, но лишен многих недостатков традиционного построения флэш-сайтов: не страдают URL-адреса, разделы меню прокомментированы, загрузка быстрая. Каждый раздел сделан не по шаблону, а с выдумкой. Даже стандартные разделы — меню слева и шапка сверху — нарисованы необычно, а потому запоминаются. Пользоваться удобно.
Правда, верстка жесткая: страницу не уменьшить. Неясно, зачем внизу дублируется то меню, которое слева — на случай отключенного флэша? Но если флэш отключен, то весь сайт работать не будет.

 

На сайте lanehouse.ru первое досадное впечатление — точка в title-надписи сверху (точка в заголовках и уведомлениях — стиль автобусных объявлений, а не веб-дизайнеров).
В остальном сайт замечателен отрисовкой и количеством графики. Например, в одной только флэш-заставке сменяются несколько тщательно прорисованных планов.

Стиль поддерживается на внутренних страницах, которые сделаны на HTML с использованием фреймов. Правда, прокрутка тут смотрится чужеродной.
И верстка текста некрасивая, с огромными пробелами из-за выключки по ширине... Тире заменены дефисами. «Особенности концепции» — это почти тавтология. А внимание к упомянутой заставке настойчиво привлекается и при ее завершении, и при загрузке внутренних страниц: полюбуйтесь, как мы, дизайнеры, умеем. Что смазывает эффект величественности.

 

А теперь зададимся вопросом: нужна ли была эта флэш-заставка.
Функция ее — демонстрация природы и домов. Но эта демонстрация должна быть опциональной, а не принудительной. Каждый раз вместо того, чтобы найти нужную информацию, посетитель вынужден терпеть загрузку ролика весом несколько сотен килобайтов, который он уже неоднократно видел.
Внимательные, конечно, найдут ссылку «Пропустить заставку», но он светло-синяя на голубом фоне, и заметить ее не так просто. (Кстати, такие ссылки портят внешний вид страницы с роликом, но отказаться от них можно только на сайте, который полностью сделан на флэше.) Логичнее было бы сделать так: заставка демонстрируется только первый раз, при втором и последующих посещениях сайта сразу загружается основная страница, а ссылка «Просмотреть заставку» убирается совсем: вместо нее в меню появляется ссылка «Демонстрационный ролик» или что-то вроде этого.

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

Хороший дизайн представлен на сайте coding4.net - coding4.net - движки CMS на ASP.NET (AJAX/MVC) – все ясно и по делу, ничего лишнего, отвлекающего пользователя от текста и информации. Страницы загружаются быстро и материалы по  CMS на ASP.NET находятся также быстро.

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

И всегда нужно предусматривать варианты загрузки сайта без флэша.



     
 

Библиотека программиста. 2009.
Администратор: admin@programmer-lib.ru