авторефераты диссертаций БЕСПЛАТНАЯ БИБЛИОТЕКА РОССИИ

КОНФЕРЕНЦИИ, КНИГИ, ПОСОБИЯ, НАУЧНЫЕ ИЗДАНИЯ

<< ГЛАВНАЯ
АГРОИНЖЕНЕРИЯ
АСТРОНОМИЯ
БЕЗОПАСНОСТЬ
БИОЛОГИЯ
ЗЕМЛЯ
ИНФОРМАТИКА
ИСКУССТВОВЕДЕНИЕ
ИСТОРИЯ
КУЛЬТУРОЛОГИЯ
МАШИНОСТРОЕНИЕ
МЕДИЦИНА
МЕТАЛЛУРГИЯ
МЕХАНИКА
ПЕДАГОГИКА
ПОЛИТИКА
ПРИБОРОСТРОЕНИЕ
ПРОДОВОЛЬСТВИЕ
ПСИХОЛОГИЯ
РАДИОТЕХНИКА
СЕЛЬСКОЕ ХОЗЯЙСТВО
СОЦИОЛОГИЯ
СТРОИТЕЛЬСТВО
ТЕХНИЧЕСКИЕ НАУКИ
ТРАНСПОРТ
ФАРМАЦЕВТИКА
ФИЗИКА
ФИЗИОЛОГИЯ
ФИЛОЛОГИЯ
ФИЛОСОФИЯ
ХИМИЯ
ЭКОНОМИКА
ЭЛЕКТРОТЕХНИКА
ЭНЕРГЕТИКА
ЮРИСПРУДЕНЦИЯ
ЯЗЫКОЗНАНИЕ
РАЗНОЕ
КОНТАКТЫ


Pages:     | 1 |   ...   | 3 | 4 || 6 | 7 |   ...   | 8 |

«Келли Гото и Эмили Котлер Веб-редизайн: книга Келли Гото и Эмили Котлер Перевод Г. Нифонтовой Главный редактор ...»

-- [ Страница 5 ] --

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

Два или три показа дизайна вполне достаточны.

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

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

Выбрав направление дизайна и получив одобрение клиента (не забудьте получить его подпись), мож но уверенно приступать к следующей стадии - к производству HTML.

Фаза 3: Визуальное оформление и тестирование Контроль над клиентом Иногда клиенты страдают забывчивостью. В креатив- жет потребоваться несколько дополнительных раун ном брифе может быть заявлено «классический, эле- дов проектирования, чтобы удовлетворить всем тре гантный», и именно такой стиль дизайна вы представ- бованиям, заявленным в креативном брифе. По этой ляете, но клиенту не хватает новаторства. Какого? причине нельзя обвинять клиента (и значит, предъяв «Новаторский» не был оговорен в креативном бри- лять дополнительный счет) за торможение работ.

фе. В чем же дело? Клиент не мог выразить свои Однако можно требовать ответственности клиента за желания, пока не увидел фактические варианты ди- изменения в стиле оформления, добавление большого зайна. Вот так, вдруг, ни одна из продуманных твор- количества страниц или изменения в навигации. Мягко ческих идей не отвечает этому новому требованию. напомните клиенту о креативном брифе. Часто кли Нужен совсем другой стиль, и ваш график работ по- енты «забывают», что они говорили о стиле и впечат падает в тиски. лении, которое должен производить сайт, а ведь бюд жет рассчитывался на основании этих данных до на Иногда клиентам нравится уже первый показанный чала этапа визуального дизайна. Вполне приемлемо вариант, а иногда им не угодишь. В любом случае (и часто случается), что клиенты изменяют свои по зачастую им трудно найти время, чтобы выразить свое желания после просмотра вариантов визуального ди мнение. Это тоже часть творческого процесса - вно зайна, но если при этом требуется значительная пе сите в бюджет и ее. Не исключено также, что и ди реработка сделанного, это меняет масштаб проекта.

зайнеры не сразу найдут нужное решение [md], мо 184 Глава Проблема Старая главная страница New Riders (рис. 5.7) заполнена содержимым, занимающим ценное пространство, кото рое можно было бы лучше использовать, чтобы отразить индивидуальность и бренд компании. Сайт нуждался в новой структуре и организации, чтобы в более динамичной манере подавать продукты компании (книги). Ключе вые слова: элегантный, актуальный, высококачественный, с лоском.

ПРЕЖДЕ Puc. 5.7, Старый сайт запол нен контентом и статичен (см, цветную вклейку, стр, 356) Фаза 3: Визуальное оформление и тестирование Puc. 5.8. Этот начальный вариант дизайна разработан в форме мо дульной сетки;

он выглядит модно и дружелюбно. Такой подход позво ляет расположить вверху главной страницы несколько дополнений (см. цветную вклейку, стр. 356) Глава Подход Сфокусировать главную страницу на отражение индивидуальности и образа New Riders с помощью мощной гра фики и яркого приветствия или лозунга. Ограничить контент тизерами1 или введением к различным разделам сайта. Этот подход служит также первой цели - прояснению навигации, поскольку чрезмерное содержимое не отвлекает от пользовательских маршрутов.

Puc. 5.9. Этот начальный вариант дизайна производит мягкое/эле гантное впечатление. Такой подход подчеркивает настрой и образ ком пании;

он предлагает простую систему ссылок к основным разделам кон тента (см. цветную вклейку, стр. 357) Фаза 3: Визуальное оформление и тестирование Тизер (от англ. teaser - дразнилка) - изначально в рекламе: прием, при котором рекламная кампания делится на две части: сначала появляется собственно «тизер», цель которого удивить и привлечь внимание и который не содержит ника ких рекламных предложений, а потом следует вторая часть - разгадка (revelation), когда становится понятным, что собст венно рекламируется. Здесь «тизер» означает незаконченный текст, представляющий собой несколько его начальных слов, снабженных в конце многоточием и ссылкой «далее», «весь текст». - Примеч. науч. ред.

Puc. 5.iO. Этот начальный вариант дизайна создает облик корпоратив ного/современного сайта с ярким впечатляющим лозунгом компании и под черкиванием ее индивидуальности. Он позволяет также выделить на главной странице книжные новинки (см. цветную вклейку, стр. 357) Глава Линда Вейнман (Lynda Weinman) о способности дизайнеров решать проблемы Дизайнеры способны решать пробле- собраны данные, позволяющие выяс мы. По своей сути, разработка веб-сай- нить, что по мнению конечных пользо та — это решение целого ряда задач: вателей необходимо усовершенство юзабилити, навигация, скорость за- вать и что в настоящее время очень грузки и так далее. Если дизайнер не удобно для них. Проектная группа задумывается над тем, какие аспекты должна ориентироваться на эти дан требуют решения, он или она потерпит ные в ходе творческого процесса. Без неудачу. То, насколько хорошо выгля- условно, любой редизайн начинается дит сайт после решения всех этих во- с четкого определения целей. Они просов, является критерием того, на- должны быть иерархически расставле сколько творческим был подход к ны по приоритетам и реализовываться ним. Визуальный дизайн должен под- по ходу дизайна.

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

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

должно быть обоснованным. Напри- убедитесь, что они ясны, и придержи мер, целью должно быть не использо- вайтесь их.

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

190 Глава Выверка переходов ВЫВЕРКА и функциональности Выверка переходов и функциональности Совсем необязательно ждать полного завершения Создание HTML-протосайта дизайна, оптимизации и кодирования, чтобы про Проверка функциональности верить основную функциональность, контент и на вигацию. По ходу визуального дизайна поправьте то, что еще не вполне работает;

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

HTML-протосайт Протосайт - расширение макетов фазы 2: Разработка структуры сайта - использу ется для выверки переходов страниц, навигации и контента. Протосайт обычно не включает особой функциональности, хотя иногда применяются «облегченные»

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

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

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

Фаза 3: Визуальное оформление и тестирование стояния дел. Например, предполагается наличие основной страницы под наз ванием «Расположение офисов» с четырьмя вторичными страницами, по одной для каждого из офисов. Только включив настоящее содержимое, можно обна ружить, что на основную страницу «Расположение офисов» фактически нечего (в терминологии контента) поместить: все содержимое размещается на вторич ных страницах. Очень важно для клиента (и проектной группы) выявить такие недочеты до того, как начнется само производство.

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

Насколько необходим протосайт?

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

Puc. 5.11. Образец страницы для протосайта New Riders.

Этот «HTML для прощелки вания» содержит навигацию»

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

Так или иначе, это все равно пробное производство, даже если протосайт совсем отбрасывается, а фактический редизайн пересматривается и формируется за ново (такое тоже случается).

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

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

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

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

Должны быть проверены любые из следующих компонентов:

• Сложные наборы фреймов (не рекомендуются без абсолютной необходимости) • Функциональные динамически изменяемые меню в DHTML или JavaScript • Всплывающие окна, особенно с фиксированным размером или расположением • Таблицы стилей или любые компоненты, требующие проверки в броузерах • Выпадающие меню (особенно те, что работают как ссылки) • Стандартные функции для покупательской корзины • Все что требует написания облегченных сценариев или включений на стороне сервера (SSI) Фаза 3: Визуальное оформление и тестирование Тестирование функциональности на стадии визуального дизайна позволит устранить проблемы до завершения дизайна, то есть когда это еще достаточно просто сделать. Такая проверка поможет также заранее подготовить произ водственный штат к предполагаемым задачам. Заблаговременное решение тех нических проблем сэкономит много времени на последующих этапах.

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

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

чайте происхождение каждого элемента графики, так Убедитесь, что получили сведения обо всех фотогра как никогда нельзя сказать заранее, какое направле- фиях и иллюстрациях для сайта. Передайте эту инфор ние дизайна будет выбрано в конце концов. При пред- мацию клиенту. В перечне деталей и уточнений в пла ставлении концепций клиентам следует очень четко не проекта должно быть четко сформулировано, что объяснить, что изображение, в которое они влюби- внешние затраты на фотографии не входят в смету лись, может стоить им 800 долларов за каждый год проекта. Укажите также, что получение прав на исполь эксплуатации сайта плюс дополнительные затраты, ес- зование изображений - ответственность клиента, осо ли оно будет использоваться в печати и для марке- бенно если клиент собирается в дальнейшем использо тинговых целей. Пусть клиенты осознанно делают свой вать любое из изображений сайта (например, в марке выбор (есть и другая стопка изображений) и, возмож- тинговых брошюрах, почтовой корреспонденции и так но, они захотят выбрать чуть менее интересные бес- далее). Существующие сегодня онлайновые сайты с ар платные изображения вместо тех, которые обойдутся хивами фотографий (например, www.tonystone.com, им в 100 долларов за один показ. Осведомите клиен- www.photodisc.com, www.comstock.com) расширили тов заранее, до закрытия обсуждений. Каждый сэко- свои функциональные возможности, чтобы упростить номит много времени и устранит лишние заботы, ес- процесс приобретения иллюстрационных материалов.

7 За к. 194 Глава только одобренное направление;

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

Первые компоненты создаваемого графического шаблона - глобальные. Уточ ните все детали навигационной панели в состояниях on/off /over (нахождение указателя мыши над ней, не над ней и при прохождении через нее). Нужен ниж ний текстовый колонтитул? Добавьте его теперь. Если для навигационных кно пок запланированы какие-то особые эффекты на JavaScript (например, выпа дающие меню или различные отображения кнопок в зависимости от располо жения указателя мыши, или плагины, которые являются глобальными), они уже должны быть обсуждены с дизайнерами производства на предыдущей ста дии в плане возможности их программирования и в отношении формы их пода чи в производство. Сейчас время формирования графических слоев, которые бу дут поддерживать все эти функциональные возможности. Если предусмотрено включение динамически генерируемого содержимого, на данном этапе требу ется создать отдельный слой, определяющий, где именно в шаблонах будет по являться это содержимое.

Имейте в виду, что, вероятно, придется создать на базе основного шаблона не сколько графических шаблонов для разных групп одинаковых страниц. Для небольших проектов редизайна, возможно, будет достаточно лишь нескольких шаблонов, но крупным сайтам часто требуется дюжина или больше. (Для www.webvan.com создавалось больше 40 шаблонов!) В случае большого коли чества графических шаблонов удобно сформировать электронную таблицу, в ко торой перечислить их все, чтобы не пропустить случайно, — так называемый план создания шаблонов. Скорее всего, будет создан графический шаблон для главной страницы, шаблон для основных страниц, шаблон для вторичных стра ниц и так далее. Не забудьте о страницах с сообщениями об ошибках, всплыва ющих окнах или страницах переадресации, сопровождающих заполнение форм или завершение транзакций. Ваши визуальные дизайнеры не смогут спроекти ровать все эти страницы. Обратите внимание на отмеченные стандарты в руко водстве по стилю оформления (обсуждаемому позже в этой главе), чтобы дизай неры производства смогли импровизировать в случае необходимости.

В производство идут многослойные файлы Photoshop или Fireworks, которые вызывают все функциональные возможности (включая состояния on/off /over) и содержат заполнители или фиктивный текст вместо содержимого (рис. 5.12). Убе дитесь, что в графические шаблоны включена вся информация, которую произ Фаза 3: Визуальное оформление и тестирование ENW» 1 ui« or at™ «,* 3 hm O( r H « n **). d o»

t» r. »

»

Рис. 5.12. Главная страница (вверху) и вторичная страница (внизу) в процессе разработки.

Каждая из них - отдельный мно гослойный файл с перечислением всех находящихся на странице текстов. Четко именованные слои указывают состояние дина мического элемента графики и его функциональность. Не забудьте включить справочный слой, содер жащий все слои файла склеенны ми, - он нужен дизайнерам произ водства (см. цветную вклейку, стр. 358) 196 Глава водство должно будет преобразовать в HTML-страницы. Часто бывает полезна рас печатка отдельных выносок. (Имейте в виду, что макеты не отображают истинное размещение;

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

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

Руководство по стилю оформления - основной документ для эксплуатационно го обслуживания после запуска, но он также чрезвычайно полезен для справки во время производства. Созданное в двух частях группой дизайнеров и произ водственной группой (по одной части на группу), руководство по стилю оформле ния может быть объемным или очень простым - это зависит от того, сколько стандартов и рекомендаций вы хотите дать эксплуатационной группе и, конеч но, от бюджета и ресурсов проектной группы. Чем более детально руководство по стилю оформления, тем лучше подготовлен сайт к решению почти неизбеж ных проблем во время эксплуатации (подробнее о техническом обслуживании сайта см. в описании фазы 5: Запуск и сопровождение). Клиенты часто сами занимаются техническим обслуживанием своих сайтов, а они обычно не явля ются дизайнерами. Помогите им.

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

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

Эти рекомендации не обязательно подписывать у клиента;

достаточно, чтобы клиент одобрил стра ницы, на которых видны основные стандарты. Вся Рис. 5.13, Этот образец руко документация по стандартам подготавливается и водства по стилю оформле одобряется проектной группой для уверенности в ния представлен в формате том, что во время дизайна и создания графических HTML (см. цветную вклей шаблонов разработчики будут соблюдать стиль ку, стр. 358) оформления. Поддерживайте взаимодействие между членами проектной группы, чтобы пробле мы стандартизации не приходилось решать мно гократно;

создайте новый стандарт, а затем пере ходите к работе над новым элементом. В этом слу чае дизайнерам производства HTML не придется многое изобретать самим.

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

Но почему такой строгий процесс? Это творческая фаза;

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

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

Следующей фазой является производство, практическая реализация проекта.

Если визуальный дизайн был выполнен правильно, следующая фаза, при усло вии интенсивной работы, будет протекать гладко.

Контрольный список задач фазы Создание Передача в производство • Анализ целей сайта • Создание графических шаблонов • Разработка концепций D Создание руководства по стилю оформления • Представление дизайна • Установка стандартов • Получение одобрения Выверка • Создание протосайта • Выверка навигации и контента • Проверка функциональности Учебный пример DiverseWorks Клиент: DiverseWorks Art Space Арт-директор: Джоел Харрис (Joel Harris) Изготовители сайта: Грегори Тейлор URL: www.diverseworks.org (Gregory Taylor), Дэвид Шеферд (David Shepherd), Проектная группа: Idea Integration, Хьюстон Катерина Метьюс (Katherine Matthews) Креативный директор: Джеф Мак-Лахлин (Jeff Mclaughlin) ПРЕДЫДУЩИЙ DIVERSEWORKS.ORG [ПРЕЖНИЙ] был бо гат информацией, но страницы были перена сыщены содержимым и неудобны для навига ции. Сайт не передавал художественного харак тера сообщества, а кроме того, процедура ре гистрации новых членов и записи волонтеров была неудобной.

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

СОВРЕМЕННЫЙ DIVERSEWORKS.ORG [ПЕРЕПРОЕКТИРОВАННЫЙ] Результат: Увеличение количества зарегистрирован выполнен в явно современном стиле, обновлен имидж ных членов сообщества и записавшихся волонтеров, а также рост доверия благодаря улучшенному дизайну.

DiverseWorks как галереи современного искусства и сцены. Редизайн также улучшил навигацию, упростив ее до пяти главных ссылок с меню на DHTML. Были созданы удобные формы для регистрации новых чле нов сообщества и добровольной работы на некоммер ческой основе. (2000 г.) См. цветную вклейку, стр. 348- Фаза 4: Производство и контроль качества Задачи этапа производства ясны: никакого невер ного толкования возможностей пользователя или целей проекта;

создайте веб-сайт, который выгля дит и работает одинаково для каждого пользова теля. Не удваивайте усилий;

кодируйте каждую HTML-страницу только один раз.

Фаза 4: Производство и контроль качества Беготня и планирование сайта, по существу, закончены;

теперь наступает вре мя создавать, реализовывать и интегрировать. Фаза 4 - этап, на котором вы полняется фактическое формирование сайта. Проект сформулирован и струк турирован, набросок дизайна сайта разработан - сейчас требуется собрать во едино все, что проектировалось, планировалось, накапливалось. Если сравнить веб-дизайн с печением пирогов, считайте, что фрукты уже нарезаны, тесто го тово, печь разогрета и можно лепить пирог. Еще раз сверьтесь с рецептом и на чинайте печь.

Эта фаза разделена на три этапа: подготовка, компоновка и тестирование - тех нология, нацеленная на контролируемое производство HTML-проекта. Незави симо от бюджета - будь он свыше 100 тысяч долларов или менее 10 тысяч очерченные здесь этапы подходят для любого веб-проекта: как для редизайна, так и для изначального создания сайта. В любом случае цель ясна. Никакого удваивания усилий. Кодируйте каждую HTML-страницу только один раз.

Фаза 4: Производство и контроль качества Оценка состояния проекта ПОДГОТОВКА Прежде чем фактически начать производство, вы- Оценка состояния проекта берите момент для оценки состояния проекта. Не Составление рекомендаций расширился ли масштаб? Не вышел ли проект за Формирование файловой рамки бюджета? Получен ли основной контент? структуры И полностью ли готова проектная группа к пред стоящим задачам производства?

Именно в начале производственной фазы следует осознать важный факт: Сеть управляется HTML.

Надо полагать, что кто-то в проектной группе вла деет процессом создания HTML: либо путем чис того ручного кодирования с использованием ВВЕ dit, Homesite компании Allaire или чего-то подоб ного, либо с помощью редакторов WYSIWYG, на пример Adobe GoLive, Macromedia Dreamweaver или Microsoft FrontPage. Очень важный вопрос:

каков уровень его навыков?

Взвесьте вновь возможности группы производства HTML теперь, когда точно известен уровень ди зайна и технические требования, а если затрудня етесь сами произвести оценку, найдите кого-то, кто может это сделать. Координирование веб-про изводства требует способности и опыта. В зависи мости от квалификации группы следует опреде лить истинный уровень сложности, который мо жет представлять производство сайта. Например, если создается сайт брошюрного типа с 20-40 стра ницами и несложными сценариями на JavaScript, то, вероятно, можно справиться с этим, прибегнув к помощи редакторов WYSIWYG. Если же сайт сложнее - громоздкие таблицы и/или фреймы, до полнительное создание сценариев и/или примене ние DHTML, - потребуется умение решать проб лемы, то есть потребуются люди, очень хорошо владеющие HTML. Это предполагает умение вруч ную кодировать страницы или, по крайней мере, читать и понимать коды достаточно хорошо, что бы отлаживать HTML и решать проблемы в ходе производственного процесса.

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

Ваша цель? Никакого неверного толкования возможностей пользователя или целей проекта. Никакого отслеживания в обратном порядке. Кодируйте каж дую HTML-страницу только один раз.

Составление рекомендаций Составление еще при подготовке проекта веб-редизайна четких рекомендаций для производства HTML помогает найти ответы на вопросы и избежать дорого стоящего отступления назад. Ведомость клиентских технических требований определяет характеристики возможностей аудитории и технических стандар тов для сайта. Это рабочая таблица. Она длинная, подробная и имеет техничес кий характер. Клиент может просто ответить: «Я не знаю. Вы специалисты;

вы объясните мне». Некоторые объяснения, вероятно, необходимы. Например, ру ководитель проекта или ведущий производственный дизайнер могут охаракте ризовать, как отразится выбор поддержки броузеров 3.x на возможность ис пользования некоторых функциональных возможностей или как повлияет вы бор Flash на возможность поддержки пользователей с модемной связью и так далее.

Ведомость клиентских технических требований можно загрузить с ivww.web-re design.com. Из-за ее размера она не приведена в книге полностью, показаны толь ко первые две части: «Целевые спецификации» и «Функциональность и осо бенности» (см. рабочую таблицу на следующей странице). В общей сложности она состоит из пяти частей:

Часть 1: Целевые спецификации Часть 2: Функциональность и особенности Часть 3: Дизайн и размещение Часть 4: Установки файловой структуры и каталогов Часть 5: Сервер и данные о хостинге Прежде чем приступить к производству HTML, следует найти ответы еще на ряд вопросов, что может оказаться столь же утомительным, как заполнение этой таблицы. Они обсуждаются с визуальными дизайнерами в начале фазы 3: Ви зуальное оформление и тестирование. Постарайтесь побыстрее получить отзы вы клиента. Их следует получить и проанализировать еще до того, как визуаль Фаза 4: Производство и контроль качества ные дизайнеры начнут разрабатывать концепции, Навыки в HTML и уж конечно до того, как дизайнеры производства начнут формировать протосайт. Хотя эта глава касается HTML, в ней не идет речь о кодировании Ведущий дизайнер производства HTML обяза- HTML, о самой теории кодирова тельно должен быть контактным лицом группы;

ния или создания сложных сцена руководитель проекта может быть, а может не риев. Здесь обсуждается техноло быть знатоком по технической части. Постарай- гия процесса редизайна и то, что тесь получить от клиента - или его ключевых тех- относится к фактическому произ нических специалистов - подробные ответы на все водству сайта: обеспечение глад кого выполнения проекта в рам вопросы, добавляя по мере необходимости допол ках графика работ и бкщжета. Ру нительные комментарии. Попросите клиента ста ководство по практическому руч вить пометку «Не известно» рядом с несуществен ному кодированию ищите в аль ными пунктами и указать области, в которых не тернативных источниках, напри обходимы советы, предложения или уточнения. К мер в книге Ардис Ибанез (Ardith заполнению этой ведомости следует отнестись Ibanez) и Натали Зи (Natalie Zee) очень серьезно, поскольку результаты ее анализа «HTML Artistry: More Than Code», будут служить для производства руководством, New Riders, 1998 или в книге Лин «высеченным на камне». ды Вейнман (Lynda Weinman) «Creative HTML Design. 2», New Ri Рабочая таблица на следующих страницах помо- ders, 2001.

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

Запланированный масштаб сталкивается с реальностью Запланированные 100 часов могут легко вырасти в 300, если сложность сайта была недооценена. В фазе 1: Определение проекта на основании пред полагаемого масштаба был оценен бюджет проек та. Планировалось 50 страниц, а получилось 120, или пока еще укладываетесь? Проверьте. Не воз рос ли объем работ - за счет разбухания или в ре зультате требуемых клиентом изменений и добав лений? Если так, вам потребуется или увеличить бюджет, или сократить распределенное по задачам время... или терпеть убытки. Независимо от того, оговаривались или нет с клиентом возможные Глава б Целиком эту рабочую таблицу (все 5 частей) можно загрузить с www.web-redesign.com.

Фаза 4: Производство и контроль качества (QA) Целиком эту рабочую таблицу (все 5 частей) можно загрузить с www.web-redesign.com.

Фаза 4: Производство и контроль качества 212 Глава б Чэд Кэссирер (Chad Kassirer) о понимании клиента до начала кодирования Хорошее понимание клиента - ключ к ра лучшего способа дизайна и форми успеху веб-проекта. До начала процес- рования веб-сайта необходимо изучить са производства важно прийти к согла- целевую аудиторию. Узнав ее, можно сию и получить одобрение по двум ас- лучше приспособить сайт к потребнос пектам: составу целевой аудитории и тям именно этой аудитории, а потом ожиданиям клиента в отношении де- уже думать о других пользователях.

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

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

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

планов.

Я рекомендую использовать ведомость клиентских технических требований Как ответственный за производство буквально с первых шагов. Она отра- отделов веб-разработки компаний жает и проясняет каждому, каковы Red Eye Digital Media u Idea Integrati начальные цели проекта, даже если в on/Сан-Франциско Чэд Кэссирер ходе работ произведены изменения. (www.whatdesign.com) сыграл ведущую В случае изменений требований или роль в процессе производства многих ожиданий клиента ведомость клиент- отмеченных наградами веб-сайтов, ских технических требований может таких как Splatterpunk (Adobe), Geor служить контрактом, на который мож- gia Revealed (One World Journey) и Ma но сослаться при необходимости (на- king Sense of Modern Art (SFMOMA).

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

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

Следите за временем на всем протяжении проекта. Делайте это еженедельно, тогда оценка будет относительно несложной. Сколько из распределенного вре мени и ресурсов уже исчерпано? Укладываетесь ли вы в бюджет? Увеличился ли масштаб? Достаточно ли осталось бюджетного времени, чтобы спокойно за вершить работы? Знание, сколько времени и ресурсов требуется для заверше ния производства сайта и проверки качества (QA), часто является одним из ту манных вопросов в оценке проекта. Жестокая правда? Большинство вещей, ко торые кажутся простыми, вовсе не таковы и займут гораздо больше времени, чем ожидалось. Кодирование HTML-страницы или шаблона может отнять не сколько часов или несколько дней - это один из факторов, вызывающих разбу хание проекта, который чрезвычайно трудно оценить правильно до начала фак тического производства.

МАСШТАБ: УКЛАДЫВАЕТЕСЬ ЛИ ВЫ?

Карта сайта Насколько велик сайт? Сколько страниц? Соответствует ли это запла нированному?

Сложности визуального Стала ли разрезка файлов на части ночным кошмаром или прошла I проектирования достаточно гладко?

Необходимость создания DHTML, динамика на JavaScript, формы, всплывающие окна, фреймы, облегченных сценариев выпадающие меню и так далее. Что из этого планировалось сразу? Что собираетесь включить теперь? Совпадают ли эти намерения?

Внутренние разработки Укладываются ли инженеры в рамки бюджета/графика работ? Адекватно ли были определены потребности во внутренних разработках и отвеча ют ли они на данный момент предполагаемому масштабу/стоимости?

Пересмотр возможностей аудитории Ориентируйтесь на пользователей. Создаваемый сайт должен учитывать воз можности целевой аудитории, поэтому нельзя преобразовывать визуальный ди зайн в HTML, если неизвестны технические параметры: целевые операционные системы, броузеры, мониторы и скорости связи. Воспользуйтесь в качестве ру ководства ведомостью клиентских технических требований.

Проверка состояния контента Содержимое должно быть уже получено. Но есть вероятность, что не полностью.

Обязательно нужно следить за готовностью контента. План его поставки был Фаза 4: Производство и контроль качества (QA) Учет доступности Представьте, что ваш единственный доступ в Сеть через броузер, который не поддерживает графику.

Войдите на любой сайт - если навигационные сред Рис. 6.1. Пиктограмма «ОдобреноБобби» («Bobby ства и кнопки не имеют описательных ALT-тегов, вы Approved» ) появляется, если сайт отвечает всем не сумеете различить изображения между собой. требованиям стандартов ADA. Если сайт не со Недавняя поддержка правительства и новые стан- ответствует этим стандартам, Бобби, естест дарты Акта о доступности для людей с ограни- венно, не одобряет его и перечисляет обнаружен ные ошибки и предложения по их устранению ченными возможностями (Accessibility with Disa bilities Act, ADA) нацелены на обеспечение пол ного доступа к веб-сайтам. Этот новый набор стан дартов, введенный Консорциумом Всемирной сети (www.w3c.org), имеет своей целью позволить подключаться к Сети всем людям независимо от их ограниченных возможностей, включая тех, кто использует старые броузеры или устаревшие тех нологии. Понимание значимости требования дос тупности перед началом кодирования - особенно если сайт должен подчиняться стандартам по до ступности - позволит избежать авральных работ в дальнейшем (например, кодирования ALT-тегов на 100 страницах, хотя вовремя это можно было сделать один раз в шаблоне HTML).

Есть два бесплатных инструмента, которые помогут проверить сайт на доступность после его запуска:

Bobby и Macromedia Section 508 Accessibility Suite.

Bobby (www.cast.org/bobbyj - интерактивный ин струмент, который мгновенно оценивает веб-стра Рис. 6.2. Этот снимок экрана показывает ре ницы. Введите URL, и Bobby определит области, ко зультаты запуска URL через Бобби. Вопроси торые не соответствуют стандарту доступности, и тельные знаки указывают на области, которые сообщит, все ли изображения имеют соответствую- или не соответствуют стандартам ADA, или щие ALT-теги. Это быстро и впечатляюще, а резуль- просто могут быть улучшены таты могут просто удивить вас (рис. 6.1 и 6.2).

Section 508 Accessibility Suite для Dreamweaver 4 и Dreamweaver UltraDev 4, созданный UsableNet (рис. 6.3), позволяет проверять веб-сайты на доступ ность таким же образом, как документы проверяют ся на наличие грамматических ошибок. Это расши рение, доступное бесплатно на Macromedia Exchange (www.usablenet.com/macromedia/index.htm), помо жет убедиться, что веб-контент соответствует реко мендации W3C/WAI, раздел 508, уровень 1. Отчет можно получить для одной страницы, всего сайта, Рис. 6.З. Usable.net и Macromedia сообща помога выбранных разделов или любого каталога. ют проверить доступность 216 Глава б четок: содержимое должно быть готово до начала производства HTML. Предуп редите клиента, что время подошло и контент пора «замораживать».

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

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

В ходе фазы 3 визуальные дизайнеры встречались с дизайнерами производства, чтобы убедиться в технической осуществимости своих задумок с помощью Flash, DHTML, JavaScript и/или чистого HTML. Ко времени первой поставки графи ческих шаблонов от визуальных дизайнеров в производство должны быть ре шены такие вопросы, как проектируемый объем загрузки (в Кбайт) и потенци ально возможный объем оптимизации.

Опоздание и последствия Контент опоздает;

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


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

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

БЫСТРАЯ СПРАВКА: СТАТИЧЕСКИЙ или ДИНАМИЧЕСКИЙ Статический сайт: Предварительно полностью подготовленые страницы про только внешний интерфейс сматриваются в броузере по ссылке на них;

обычно исполь зуют расширения.html или.htm.

Динамический сайт: команды Страницы создаются сервером «на лету», обычно собирая внешнего и внутреннего интерфейсов конкретную информацию из различных мест, например из базы данных. Сайт содержит также стандартные страницы HTML. Для возможности заполнения динамическим содер жимым к HTML-страницам может быть добавлен дополни тельный код (ASP, Java, Perl).

Формирование файловой структуры Структура файлов часто путается новичками и клиентами, у которых знаний достаточно только для того, чтобы сделать их самих опасными, с архитектурой сайта (фаза 2: Разработка структуры сайта). Фактически файловая структура это простое, но важное поддержание порядка. Начав организованно, легче ос таваться организованным, так что сделайте это приоритетом. (Это особенно важ но для проектов с многочисленной командой.) Хотя не существует общеприз нанно лучшего способа организации файловой структуры сайта, различные стра тегии отвечают разным целям (рис. 6.4 и 6.5).

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

Редизайн - прекрасный повод расставить все по местам. Наверняка структура HTML старого сайта в беспорядке: дублированные файлы, изображения, рассе янные по разным каталогам, старые версии файлов все еще на сервере... Сфор 218 Глава б Puc. 6.4.

Puc. 6.5.

Две структуры с различ ными стратегиями. На рис. 6.4 изображения разме щены в корневом каталоге, а на рис. 6.5 - в каталоге текущего месяца. Выбор стратегии зависит толь ко от индивидуальных предпочтений Фаза 4: Производство и контроль качества мируйте логичную, удобную в поддержании струк Три вопроса туру файлов для перепроектированного сайта.

по файловой структуре Цель? Четкость, организованность и возможность 1.Как организована текущая расширения структуры, т. е. масштабируемость.

структура каталогов и есть ли у клиента причина для такого Файловая структура метода?

и масштабируемость 2. Соответствует ли структура каталогов организационной Какой рост (увеличение трафика, добавление кон- структуре контента?

тента, новые продукты) ожидается в первый год 3. Будут ли изображения поме после запуска? Планируете ли вы добавлять новые щаться в корневой каталог или разделы? В каком направлении они будут расти? в отдельные папки?

По времени? По темам?

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

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

Важный вопрос: заботит ли это клиента? Возмож но, но вряд ли. Клиент хотя бы понимает это? Воз можно, но, скорее всего, нет. Тем не менее, про Глава б диктованная клиентом или сформированная про ектной группой файловая структура должна быть ответом на предшествующие вопросы. Цель? Быть масштабируемыми. Оставаться организованными.

Разрезание на части и оптимизация КОМПОНОВКА Проверив всю информацию (этап подготовки в этой Разрезание на части фазе) и убедившись, что проект редизайна продви и оптимизация гается по плану, можно всерьез перейти к произ Создание HTML-шаблонов водству HTML и начинать компоновку. На этом эта и страниц пе производства графические шаблоны (рис. 6.6) Применение облегченных преобразуются (разрезаются на части и оптимизи сценариев руются) в элементы HTML (графические объекты) Заполнение страниц таким образом, чтобы их можно было снова сло Интеграция с внутренними жить вместе (воссоединить и закодировать).

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

После того как файлы Photoshop/Fireworks при ведены в надлежащее состояние, дизайнеры про изводства осуществляют их фактическое разреза ние на части (рис. 6.7) и оптимизацию отдельных частей (рис. 6.8). Заметьте, что иногда, когда на пряженно с бюджетом и ресурсами, и визуальным дизайном и производством HTML может занимать ся один человек.

Умелая оптимизация должна быть главным приоритетом. В качестве превосходного пособия с практическими рекомендациями можно использовать книгу Линды Вейнман (Lynda Weinman) «Designing Web Graphics.3» (Дизайн веб-графики. 3), New Riders, 1999.

Фаза 4: Производство и контроль качества Рис. 6.6. Графический шаб лон для www.diverseworks.org передан дизайнерами в про изводство в виде много слойного файла Photoshop или Fireworks. Этот файл содержит все элементы страницы, в том числе все состояния динамических элементов - каждое в от дельном слое. Здесь показа но выпадающее меню при на хождении указателя мыша над ним (состояние «on» ) Puc. 6.7. Графические шаблоны разделяются на части и разрезаются в программах Fireworks или Photoshop. Ясно различимые слои соответствуют состояниям on/off/ over или выноскам DHTML Рис. 6.8. Фоновый рисунок до и после оптимизации в Fireworks. Размер файла умень шен до 16 Кбайт убавлением количества цветов в формате GIF 222 Глава б Создание шаблонов Контроль над версиями и страниц HTML Старайтесь, чтобы всем, кто име ет доступ к активным HTML-фай Если формирование веб-сайта сравнить со строи лам, было понятно, когда с ними тельством дома, то на данном этапе есть графика работают, чтобы предотвратить и контент (строительные материалы), а также ка одновременное редактирование талог файлов (каркас дома). Теперь можно форми файла несколькими членами ровать HTML-шаблоны и страницы (без содержи группы. Такая неосведомлен ность обычно приводит к потра- мого), которые получаются из них (это стены ком ченному впустую времени, пере- нат дома). Создав шаблоны, следует включить в записанным файлам и потерян- них облегченные сценарии (электропроводка, во ной работе. Если над HTML ра допровод и прочие атрибуты). После этого можно ботают более двух человек, для заполнять страницы (обставлять дом мебелью), увеличения эффективности по приближаясь к запуску сайта (к новоселью).

лезно договориться о способе контроля над версиями. Первый HTML-шаблон устанавливает глобальные В Dreamweaver 4 есть удобная стандарты, такие как навигация, структура таб опция, позволяющая регистри- лиц, использование шрифтов, обработка ALT-, ровать прием и сдачу файлов. В COMMENT- и TITLE-тегов и так далее. Возьмите оп этом могут помочь также про тимизированную графику, вырезанную из графи граммы сторонних разработчи ческого шаблона, добавьте другие элементы, кото ков, такие как SourceSafe, Per рые нужно включить (в том числе необходимые об force и WebDAV.

легченные сценарии;

их создание обсуждается Несколько определений для непосвященных Графический шаблон сущ. Многослойный циф- Оптимизировать гл. 1. Сжимать изображение или ровой файл (обычно Photoshop или Fireworks), со- код до минимально возможного размера файла с держащий неотрендеренный, редактируемый текст, целью сокращения времени загрузки. Оптимизиро подготовленный визуальным дизайнером, который ванные файлы сохраняются обычно в формате GIF четко передает всю информацию, необходимую для или JPG. 2. Подготовить для использования в Сети.


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

Шаблон HTML (называемый также HTML-оболоч- сущ. Выделенная часть файла Photoshop или Fire кой) сущ. Не имеющая конкретного содержимого works, предназначенная быть отдельным изображе HTML-страница, которая формируется дизайнерами нием (обычно GIF или JPG).

производства путем воссоединения всех элементов, вы- Склеивать гл. Бесшовно сращивать GIF- или JPG резанных и оптимизированных из графического шаб- изображения при помощи HTML таким образом, что лона. Визуально соответствует графическому шабло- бы при просмотре в броузере файл выглядел, как ну. (Используется в производстве HTML для создания первоначальный графический шаблон.

в дальнейшем файлов с помощью команды Save As.) Фаза 4: Производство и контроль качества дальше в этой главе), и встройте их в HTML. Проверьте начальный(е) HTML файл(ы) на различных броузерах и платформах. Убедитесь, что графический шаб лон нормально преобразовывается, а таблицы HTML не развалились (рис. 6.9).

Этот файл будет служить основой. Если он окажется с изъянами, которые не бу дут устранены здесь, его дефекты перенесутся на все созданные на его основе стра ницы. Заметьте, что эта проверка не считается проверкой качества (QA);

это, по сути, просто стандартная процедура производственного дизайна, выявляющая ошибки.

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

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

Рис. 6.9. Крупные гра фические элементы часто разрезают на части для облегчения их загрузки. Остере гайтесь искажения таблиц. Здесь пока зан пример с сайта www.flyingsparkfurni ture.com: работающая нормальная таблица (слева) и она же во вре мя отладки перед про веркой качества (QA) 224 Глава б Применение облегченных сценариев Динамическое изменение, формы, выпадающие меню, всплывающие окна, сме на изображений, фреймы... - все это результаты облегченных сценариев. Тер мин «облегченные» означает, что вы прекрасно можете закодировать их сами с использованием элементарного JavaScript, что потребует лишь некоторого по нимания программирования. Создание облегченных сценариев не следует пу тать с Java, ASP или CGI. Это скорее стандартные функциональные возмож ности, встречающиеся на всех сайтах, например динамическое изменение (рис. 6.10). Это код, который можно легко позаимствовать и слегка модифици ровать в соответствии с потребностями своего сайта.

С совершенствованием программного обеспечения реализация облегченных сце нариев и специальных возможностей (в частности, мультимедиа, требующего плагинов) становится все проще и проще. Это не должно удивлять. Те, кто ис пользовал Fireworks для разрезки на слои и оптимизации графических шабло нов, могли подключить простые режимы, такие как MouseOvers и Swaplmages, при оптимизации и экспорте файлов. Если экспортировать HTML-файл прямо Включение включений Включение (include) - это текстовый фрагмент, за Разве одна из причин редизайна сайта - то, что он кодированный и сохраняемый отдельно, но приме стал громоздким для обслуживания? Иногда простая няемый глобально, что позволяет редактировать его текущая задача, например изменение нижнего колон лишь в одном месте. JavaScript-включение - это по титула с авторскими правами, превращается в такую вторение функциональности. Вместо включения по гигантскую работу (особенно для сайта с сотнями стра вторяющегося кода в каждую страницу просто ссы ниц), которую просто так не сделать. При формиро лаются на внешний файл, который сохраняется на вании сайта иногда приходится иметь дело с повто сервере отдельно от страницы HTML. He требуется ряющимися вещами - битами кода, верхними и ниж никаких вложенных фреймов. Включение - это свой ними колонтитулами и так далее - на всем сайте или, ство атрибута «src» (индикатор источника), нечто по по крайней мере, на большинстве страниц. Возьмем добное атрибуту src IMG-тега (индикатор изображе общий пример: вышеупомянутый нижний колонтитул ния). В некотором роде включение - почти динами с авторскими правами. Как вы изменяете год на каж ческий элемент, только не требующий внутренней дой странице? Можно воспользоваться одним из сле базы данных. Следует отметить, что использование дующих способов:

включений несколько замедляет загрузку. Сделайте 1. Вручную открыть и отредактировать каждую стра выбор: стоит ли облегчение модификаций четверти ницу (требует времени). Заново загрузить каждую секунды загрузки? Вероятно, да, но следует взве страницу.

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

тот же.) Заново загрузить каждую страницу.

3. Сформировать включение. Заново загрузить толь ко одну страницу.

Фаза 4: Производство и контроль качества из графического шаблона, многое для облегченно Меньше - значит лучше го сценария уже будет сделано.

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

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

Слишком большой? Вернитесь и не оставляйте устранение дефектов на этот момент.

оптимизируйте снова. Поищите, где можно сбросить несколько байт. Придумывайте способы.

Подгоняйте.

Есть очень много возможностей найти готовые коды. Позаимствуйте JavaScript с любого из следующих сайтов: www.javascript.com, Каскадные таблицы стилей www.builder.com, developer.netscape.com, www.scriptworld.com.

и DHTML DHTML - это сочетание JavaScript с каскадными таблицами стилей (CSS) для манипулирования HTML Это позволяет независимо управлять каждым из множествен ных уровней HTML, включенных в отдельные слои. При использова нии CSS можно определить набор атрибутов, дать ему имя, а затем ссылаться на него. Если требует ся изменить цвет всех заголовков, CSS выполнят эту задачу гораздо быстрее. К сожалению, броузеры 3.0 не поддерживают OSS, и не которые броузеры 4.0 также испы тывают трудности с ними. В нас тоящее время при использовании CSS приходится делать двойную Рис. 6.10. На главной странице www.diverseworks.org ди- работу - создавать два парал намическое изменение представляет собой размытый лельных сайта, иначе пользовате крупный план иллюстрации, который изменяется, ста- ли с броузерами, не поддержива новясь четким. Местонахождения указателя мыши для ющими GSS, будут видеть иска этого изображения (над изображением и вне его) опре- женный дизайн.

делены в палитре слоев графического шаблона 8 Зак. 226 Глава б Джеффри Зельдман (Jeffrey Zeldman) о веб-стандартах диционные броузеры. Будь это обладате Написать однажды и использовать всю ли мобильных телефонов, Palm Pilots, ду - к этому надо стремиться.

неграфических броузеров типа Lynx или С этой целью проект веб-стандартов (Web специальных броузеров для людей с ог Standards Project, www.webstandards.org) раниченными возможностями, - все они призвал изготовителей броузеров под смогут теперь наслаждаться полным до держать ряд основных стандартов - CSS, ступом к контенту сайта.

HTML 4, XML и др., подчиненных очень важной идее: разделению стиля и содер- С отделением стиля оформления от со жимого. держимого не придется создавать допол нительные версии целых сайтов, чтобы Что это означает? Это означает, что ди поддержать этих пользователей (сам по зайн отражен в одном месте (например, себе дорогой и отнимающий много вре в каскадных таблицах стилей, CSS), а со мени процесс);

просто надо будет доба держимое - в другом (например, в доку вить одно-два правила к таблице стилей.

ментах HTML или XHTML или в базе данных с записями в XML-формате). При полной поддержке веб-стандартов, которые облегчают истинное разделение Зачем это необходимо веб-дизайнерам?

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

«HTML как инструмент дизайна». Не удастся. Даже с изощренными редакто- Я креативный директор A List Apart, еже рами HTML на это уйдут часы или дни недельного онлайнового журнала для лю мартышкиного труда, не говоря уже о до- дей, создающих веб-сайты (www.alista полнительных часах на тестирование в part.com). Поскольку я контролирую броузерах и отладку. сайт - это не то, что сдать клиенту и за быть, - и поскольку сам обновляю содер Во-вторых, если можно отделить дизайн жимое каждую неделю, то я также посто от данных, то ваш сайт больше не будет янно, в большей или меньшей степени, закрыт для людей, использующих нетра Фаза 4: Производство и контроль качества (QA) модернизирую дизайн сайта и пользова- любопытно в историческом плане, но об тельские маршруты. Это суровое испы- щая идея сайта, постоянство его образа тание, потому что мой стиль и содержи- и поток посетителей улетучиваются пря мое драматически сцеплены практичес- мо на глазах.

ки нерасторжимым образом. Для управ- В последующие 18 месяцев, если соответ ления оформлением я использую CSS, но ствие стандартам укрепится во всех бро из-за ограничений текущих броузеров узерах и пользователи перейдут на них, я (особенно броузеров 4.0) для размещения перенесу все размещение в CSS, тогда бу дизайна я все еще мучаюсь с HTML-таб- дущие редизайны займут минуты вместо лицами. Из-за этого на любое изменение часов, оставляя мне больше времени на дизайна, даже самое ничтожное, уходят развитие особенностей сайта и работу с часы. авторами. Сейчас я пытаюсь делать из менения такого типа, но при 10% чита Когда я наконец доведу одну страницу до телей, использующих Netscape 4, и 25% требуемой кондиции, могу ли я автома с IE4, я не могу по-настоящему двигать тически модернизировать остальную часть сайта по ее подобию? Нет, потому ся вперед.

что каждая страница - скопление глубо- Я описал простой сайт, основанный на ко взаимосвязанных, вручную закодиро- контенте. Вообразите более крупные и бо ванных ячеек таблицы. Это слишком лее интерактивные сайты, вооруженные сложно для глобального поиска и заме- стандартами XML, CSS и DOM. Пред щения. И у меня нет производственного ставьте: одна группа занимается реди бюджета (сайт независимый и некоммер- зайном, в то время как другая внедряет ческий). Когда зарываешься в старых новые функции, и обе не беспокоятся, проблемах, возникает археологический что сотрут работу друг друга. Это потря эффект. На практике с дизайном оказы сающе, но мы еще до этого не дошли.

вается хитрее, чем вы только что читали.

Получается редизайн по нисходящей к тому, как это было. Это, может быть, Джеффри Зельдман (www.zeldman.com), автор книги «Taking Your Talent To The Web» у New Riders, 2001, является так же издателем и креативным директо ром «A List Apart», еженедельного жур нала для веб-разработчиков, соучреди телем и руководителем группы The Web Standards Project - основной коалиции, борющейся за веб-стандарты, а также учредителем Happy Cog - веб-агентст ва Нью-Йорка, по меньшей мере, приоб ретающего известность. В свободное время Зельдман выступает с доклада ми на веб-конференциях, пишет публи кации в Adobe Web Center, PDN-Pix Ma gazine и Creativity.

228 Глава б Заполнение страниц Контент должен быть готов. Не исключено, что готова только часть содержимо го, другая часть скоро подойдет, а над третьей все еще работают. Но когда HTML шаблоны созданы и из них сформированы страницы, из-за задержки контента производственные дизайнеры будут простаивать.

Предупредите этот момент. До наступления крайнего срока напомните о нем ответственному за поставку контента по электронной почте. Укажите дату, когда контент будет заморожен. Замораживание означает прекращение изменений.

Финал. Если не сделать этого, контент продолжит пополняться по каплям, а содержимое, поступающее после замораживания, вызовет разбухание проек та;

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

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

Какой бы ни был выбран способ, ознакомьте с ним всех дизайнеров производ Кодирование вручную или WYSIWYG (что видите, то и получите) Говорят, что кодирование вручную - исчезающее ис- Свежие версии WYSIWYG-редакторов позволяют не кусство... так ли это? Многие проекты требуют зна- искушенным в HTML (дизайнерам и нетехническим ний и гибкости, которые приходят с высоким уровнем членам группы) создавать HTML-страницы с лег навыков в HTML Для многих из этих проектов дизайне- костью простого перетаскивания (drag-and-drop), ры производства HTML кодируют каждый тег-так на- Adobe GoLive и Macromedia Dreamweaver, два про зываемое кодирование вручную, - используя про- мышленных WYSIWYG-редактора, предлагают не 1 граммы типа BBEDIT или гибриды типа HomeSite. Руч- только удобный в работе интерфейс. Одно из самых ное программирование почти всегда дает более чис- больших преимуществ WYSIWYG-редакторов - эко- I тый код, чем генерируют WYSIWYG-редакторы. И номия времени. Кодирование вручную может быть поскольку борцы за чистоту HTML очень требова- трудоемким и длительным процессом, тельны к качеству кодов, многие программисты из- Хотя WYSIWYG-редакторы имеют свои недостатки - f бегают WYSIWYG-редакторы не только потому, что чаще всего избыточный исходный код, - эти прило они имеют тенденцию добавлять лишний и иногда жения превосходны для первых шагов в веб-дизайне громоздкий второстепенный код, но также и потому, и вполне достаточны для большинства проектов. Но что они часто не позволяют достичь такого высокого не отказывайтесь и от изучения HTML Это позволит уровня, какой может быть достигнут вручную. легче справиться с любыми проблемами разработки.

Фаза 4: Производство и контроль качества ства, занимающихся заполнением страниц. Убе Контейнеры дитесь, что ничего не пропущено и не перепутано.

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

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

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

Заполнение страниц требует наличия всего контен- Если ваш сайт не управляется ди та, включая часто забываемое техническое «неви- намически, но имеет области, в димое содержимое»: ALT-, МЕТА- и TITLE-теги. которых содержимое регулярно изменяется, подробно опишите Часть невидимого содержимого, например ALT-те в руководстве по стилю оформ ги для общих графических элементов типа нави ления HTML, как следует пра гационных элементов, должна быть добавлена на вильно их обновлять.

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

Сохраните его как элемент технологии.

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

230 Глава б Клиенту может не требоваться снабжать ALT-тегами все до единого изображения, и это нормально. Но ALT-теги имеют большое значение, добавляя ясность в опре деление терминов или в использование основных функциональных возможнос тей (рис. 6.12). Так или иначе, как только принято соглашение об именовании файлов и установлен стиль, дизайнеры производства могут двигаться дальше.



Pages:     | 1 |   ...   | 3 | 4 || 6 | 7 |   ...   | 8 |
 





 
© 2013 www.libed.ru - «Бесплатная библиотека научно-практических конференций»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.