разработка

графика

продвижение и PR

будни разработки

обзоры

Эмоции 1. РАЗРАБОТКА СТРУКТУРЫ САЙТА

1. ЗАЧЕМ

Прежде всего предположим, что речь идет не о домашней странице, а о «сайте на заказ» - основной отличительный элемент подобного проекта в том, что вам приходится общаться с клиентом (John Doe, Вася Пупкин). Идея разработки сайта могла прийти клиенту (Васе) в любой момент времени (приснилось в страшном сне, бабка нашептала – есть варианты…) – но собственно цель видна смутно, предназначение определится ближе к концу игры… повод – как же, это престижно, у Пети есь, у мани есть… Вася решился и пошел искать креэйтера – благо верстать html-страницы умеет любой мало-мальски уважающий себя студент, да и школьники нынче не слабые. Ура! студент нашелся, и у студента возникает к Васе первый вопрос: А о чем собственно? Какая ТЕМА сайта? С трудом, после долгих намеков и перемигиваний выясняется, что Вася хочет сайт про свою жизнь, богатую приключениями… и даже готов платить…

Но! – стоимость сайта по-прежнему определяется относительно сложного коэффициента человеко/дней – и студенту необходимо определить объем работы… и тут начинается самое интересное.

Вася объем работы определить не может, поскольку «сайт» является для него одним объектом, который вовсе не подразделяется на такие вещи, как html-страницы, java-скрипты, формы и Вася знать ничего не желает о ТАБЛИЦАХ СТИЛЕЙ!
Вариант первый – линейная наработка проекта – когда студент рисует первую страницу, утверждает дизайн, а потом добавляет кнопки и генерит остальные страницы по мере общения с Васей.

Недостатки этого варианта видны сразу, и все их перечислять смысла нет. Основное – проблема, если навигация исполнена в виде графических меню; проблема – если графика с логотипами грамотно порезана где-нибудь в ImageReady, а у Васи идеи по тому, что будет и чего не будет на первой странице, возникают и меняются несколько раз в день и собственно до самого конца работы над проектом; проблема, если Вася имеет необходимость в таких подструктурах сайта, как feedback (чаты, форумы, etc.), обработка информации в базах данных, автоматизация новостийных обновлений … много чего может придумать Вася.

Вариант второй – стребовать с Васи договор о том, что делать и чего не делать и аванс, сделать все по пунктам договора ничего не меняя, прийти с друзьями забрать оплату и потерять Васю как потенциального заказчика навеки… Потому что ТАК НЕ БЫВАЕТ! – что бы по ходу проекта ничего не менялось… и Вася конечно обидится.

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

2. ИНФОРМАЦИОННАЯ СТРУКТУРА

Опять же есть варианты. Умные люди придумали достаточное количество программных продуктов для проектирования структур любого уровня сложности и глобальности. В порядке упрощения:

Rational Rose – глобальный и массивный инструмент для проектирования систем любой сложности. Имеет средства для моделирования, анализа, реверс инжиниринга (когда не по модели строется проект, а наоборот – затягивается проект, который анализируется кейсом, и тот генерит модель проекта, включая связи между элементами и динамику обновлений). Один из Add-In`ов Rational Rose – создание и анализ WEB – проектов. Rational Rose поддерживает язык UML (UNIVERSAL modeling language), не сказать, что невозможно сложный в освоении… но уж больно это глобально. Может быть оправдано при разработке корпоративных проектов высокого уровня сложности. Создателям домашних страничек можно не пугаться - Rational Rose им не понадобится.
ER Win – чудная кейс система, которую тоже можно использовать для проектирования, имеет Add-Ins для генерации WEB-проектов и для Reverse Engineering . незаменим для любителей XML или всяческих других сложностей. Простой интерфейс, легко разобраться, что где нажимать, что бы нарисовать схему и расставить связи… Начать можно именно с того, что просто втянуть любой (не очень большой) проект в ER Win и посмотреть, как сам кейс отрисует модель, посмотреть свойства созданных объектов, типы связей… Рекомендую!
Любой редактор, в котором можно рисовать квадратики, стрелочки-кружочки и набирать буковки J. Именно таким способом и были созданы все мои структуры…

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

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

Нарисуем все блоки, укажем, что еще не было оговорено (чтобы не забыть) – такую схему уже можно показывать заказчику – пусть утверждает названия кнопок, заголовки, наличие сервисов…

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

наверх

первоначальный эскиз структуры сайта "Юридический Информационный Портал" (открыть иллюстрацию в новом окне [.gif, 11,8Kb])

ЭТАПЫ ИСПОЛНЕНИЯ ПРОЕКТА

Комментарии к статье Разработка структуры web-проекта" от Alexey Meledin

Вообщем я просто напишу последовательность шагов (минимум), для выполнения уникального (не шаблонного) проекта.

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

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

Приблизительно:

Исследованиe
Конструирование
1. Итерация 1 - сайт версия 1.
2. Итерация 2 - сайт версия 2.
3. Итерация 3 - сайт версия 3.

Исследование

Одна из самых сложных фаз. Результатом деятельности на данной стадии выполнения проекта, должны быть:

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

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

Оценка стоимости идет по временная (я думаю, что не сложно ее высчитать).

По окончании выполнения, учитывая пожелания Заказчика Вы разбиваете проект на итерации.

Смысл:

Как можно скорее получить первую версию и feedback. Очень важно, когда Заказчик не знает чего толком хочет.
Снижается риск оценки времени, так как береться маленький скоп.

и т.д. Время итерации - 2-4 недели и не больше. Небольшой сайт может быть разбит итерации на три.

Начинаете конструирование

Задача - построение сайта в скопе первой итерации.

И по порядку:

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

По кругу.
Останавливаемся тогда, когда Заказчик удовлетворен.

Все это взято мной из:

RUP 5.5,
UML Distled,
Applying patterns in UML,
Thinking in Java 2,
OO analysis and Design,
XP articles and agile methodologies and etc.

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

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

PS:

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

Другие статьи по теме:

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

наверх

Вукс Татьяна