Проектирование и создание современного web-сайта

 

3. ВЫБОР СТРУКТУРЫ WEB-СТРАНИЦЫ

 

3.1. Создание фиксированных и гибких Web-страниц

 

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

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

Достоинства:

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

– заполнено все пространство дисплея, отсутствует нежелательное свободное  место, наличие которого часто планируется разработчиками страниц с фиксированными размерами;

– дизайн гибких страниц по духу и  по природе более близок к золотой  середине. Согласно таким стандартам, "хорошей" считается страница, которая доступна для большинства  пользователей.

 

Недостатки:

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

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

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

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

Достоинства:

– страница будет выглядеть одинаково независимо от размеров дисплея. Это особенно важно для компаний, стремящихся представить свой имидж одинаково для всех посетителей;

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

Недостатки:

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

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

– стремление полностью контролировать отображение страницы означает своего рода выступление против среды. Web – это не печатное издание, у него свои сильные стороны и особенности. Защитники стратегии гибкого дизайна скажут, что фиксированному дизайну нет места в Web.

 

3.2. Разработка комбинированных  Web-страниц

 

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

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

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

 

  3.3. Macromedia Flash

 

Реально ли уместить страничку, содержащую приличное количество анимации, звука  и удивительных способов интерактивности  в файл порядка 100 Кбайт? Сделать  так, чтобы эта страница работала одинаково как в Netscape Navigator, так и в Internet Explorer Internet Explorer? Компания Macromedia решила большинство проблем совместимости и производительности, выпустив Flash, который к сегодняшнему дню весьма эволюционировал и является полноценной частью инструментов-техник Web-дизайна.

Коротко и ясно о том, что это  такое. Существуют plug-in'ы (подключаемые модули), которые встраиваются в  браузер, и служат для просмотра Flash страниц. Называются они Flash Player. Причем в последних версиях Netscape Navigator и Internet Explorer эти модули уже встроены (если нет, то их можно бесплатно скачать с сайта Macromedia). И существует программа Flash, с помощью которой эти страницы создаются.

В пользу Flash приведу его основные достоинства и статистку использования Macromedia профессиональными разработчиками:

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

– устранение проблем совместимости  между браузерами. В отличие от HTML, Flash одинаково работает как в Internet Explorer, так и в Netscape Navigator. Имеется даже специальный вариант примочки-проигрывателя для браузеров, поддерживающих Java (Flash Java Player);

– мощный событийно-управляемый язык. В Macromedia Flash используется специальный  язык, при помощи которого можно  создавать "интеллект" для своей страницы. Причем если в Flash 4 это был, скорее, некий скрипт (script), имеющий всего несколько основных функций, то в Flash 5 (несмотря на название "ActionScript") – это почти полноценный язык программирования, с поддержкой условий, циклов, массивов, функций и классов, которые можно наследовать;

– Flash имеет автоматическую поддержку anti-aliasing (сглаживание контуров с  помощью смешения соседних цветов). В результате даже простая линия  или кружочек, нарисованные во Flash, выглядят приятно для глаз. Что же тут говорить о рисунках, нарисованных профессионалами;

– создавать страницы во Flash под  силу даже ребенку, и, признаюсь, это  весьма приятное занятие. А если обладать элементарными навыками дизайна  и рисования, открывается весь простор  для Вашей фантазии, предоставляемый Flash.

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

На сегодняшний день Flash Player используют 222 миллиона человек, и каждый день его скачивает еще 1.4 миллиона. По данным Macromedia это позволяет 90% пользователям Сети просматривать страницы с Flash содержимым.

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

Особенности Macromedia Flash 5. Начну с определения, возможно, несколько неожиданного, но дающего направление для дальнейшего раскрытия данной темы: "Flash 5 – язык программирования нестандартных интерфейсов с векторной анимацией".

Здесь делается основной упор на то, что  интерфейсы нестандартны. Что имеется  в виду, зачем это нужно и  к чему это ведет?

"Нестандартные" интерфейсы  имеют ряд отличий от "стандартных" (под "стандартными" подразумеваются привычные интерфейсы HTML):

1. Специальные управляющие объекты  (кнопки, панели, блоки). Для примера,  рулетка в Microsoft Word – нестандартный  объект. Ее практически невозможно  реализовать в HTML, только картинку, но не интерактивную функциональность.

2. Независимое размещение объектов, другими словами, не размещение  объектов относительно друг друга,  а расположение по координатам  и уровням. В DHTML такая возможность  существует, но в DHTML надежно реализовать можно только совсем простые вещи.

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

В результате подобной "нестандартности" появляется полная свобода в создании интерактивного интерфейса, более удобного, более наглядного, более функционального. Это реально повышает уровень  предоставляемого сервиса. А значит, достигается "customer satisfaction" (удовлетворение требований клиента), и, в конечном итоге, система становится более конкурентоспособной.

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

Разработчики, попробовавшие программировать  в среде Flash 5, подтвердят мои слова: Flash – уже не просто технология для  создания анимационных роликов. Другими  словами, Flash стал применим для создания интерактивных приложений.

Когда следует использовать Macromedia Flash. Резонно задаться вопросом: а оно надо? Есть ли смысл использовать Flash 5 там, где он никогда не использовался? Ведь "несть числа" всевозможным языкам программирования, описывающим клиентскую часть. А Flash, к тому же, – один из самых медленных.

Здесь важно понять, что существует два принципиальных условия применения Flash:

1. Надо аккуратно выбирать область  применения Flash за пределами анимации.

2. Этим инструментом надо уметь  грамотно пользоваться.

С первым условием достаточно просто: Flash нужен там, где нестандартный  интерфейс дает много новых возможностей, где нужна интерактивность, где  не подходит "спартанская" внешность. При совпадении всех этих требований имеет смысл задуматься об использовании Flash 5 в качестве инструмента для построения системы.

Чем определяется "грамотность" применения Flash 5? Необходимо определиться, каковы преимущества использования  именно Flash в конкретном проекте, и  с какими "подводными камнями" придется столкнуться.

Основные плюсы программирования в среде Flash 5 – в процессе разработки:

1. Почти каждая аккуратно запрограммированная  функция сразу очевидно полезна  во многих местах.

2. Возможно построение универсального  сервера.

3. Легко переносится часть логики с серверной на клиентскую часть.

4. Свобода в верстке и в  наборе control-элементов (кнопок, меню, списков, таблиц).

Есть, однако, и недостатки, что-то работает не лучшим образом, а потому, если в системе важны определенные компоненты, Flash использовать пока нецелесообразно. Собственно, список тех компонентов, которые на данный момент "не дружат" с Flash:

1. Сложные математические операции  на клиентской части.

2. Работа с очень сложными  структурами данных на клиентской  части.

3. Мелкие тексты, написанные  по-русски, из-за проблемы с кодировкой.

4. Сайты со сверхсложной бизнес-логикой,  требующие мгновенной загрузки.

5. Механизмы, требующие работы  с файловой системой клиента  или его устройствами (например, Web-камерой или микрофоном).

Вот, пожалуй, и все трудности. Но! Если в столь ожидаемом многими Flash 6 добавится некоторый набор усовершенствований, эти проблемы станут неактуальны. Это набор довольно простых вещей, которые очевидно не сложно сделать:

1. Кэширование растрированных векторов.

2. Поддержка Unicode.

3. Усовершенствование механизма  наследования объектов.

4. Внедрение методов проектной/командной  работы.

5. Отладка Performance and Memory-Use на XML, Math/Data Functions.

6. Окончательное разделение программирования  и дизайна.

Это не так много, разница между Flash 4 и Flash 5 гораздо больше, чем эти изменения. Конечно, и после этого Flash не надо будет применять везде – он все равно останется для "своей" области.