Этапы разработки сайта
- Постановка задачи
- Разработка технического задания
- Проектирование
- Структура приложения
- Хранение данных
- Шлюзы с другими программами
- Графический дизайн
- Программирование
- Верстка
- Клиентские функции
- Серверные функции
- Наполнение
- Размещение
- Продвижение
- Поддержка
Постановка задачи
Как бы банально это не звучало, но прежде чем начинать что-либо
разрабатывать, надо четко выяснить: а что же, собственно, требуется.
Развернутый ответ на этот, в общем-то, очевидный вопрос и кроется за
красивым термином «грамотная постановка задачи». При этом, он вовсе не так
прост, как может показаться. Например, если говорить о разработке
веб-сайтов, то встречаются такие постановки задачи: «Нужно сделать сайт
нашей компании. Сколько это будет стоить?». Наверное, реакция представителя
компании-разработчика может привести такого клиента в недоумение. Вероятно,
даже вызовет подозрения: «что же это он молчит и задумчиво морщит лоб, не
иначе, думает, сколько из нас можно выжать». На самом же деле он собирается
с силами перед мини-лекцией о том, что все компании разные, потребности у
них разные, следовательно, и сайты им нужны разные, а значит объем работ
разный, соответственно, и стоимость тоже получается разной, напрямую
зависящей от требований. После лекции начинается дискуссия, которая плавно
перетекает в совместную работу над документом, описывающим постановку
задачи.
Реально, постановка задачи - этот тот единственный этап работы над
программным продуктом, который почти полностью лежит на плечах заказчика.
Компания-разработчик может помочь, например, в обработке материала или в
структуризации данных, но она не способна решить, что же хочет заказчик. Мы
можем только задать несколько наводящих вопросов и посоветовать что-то,
основываясь на своем опыте.
Итак, основные наводящие вопросы, касающиеся разработки сайтов:
- Что нужно сделать? Нужно постараться дать наиболее исчерпывающее
описание и при этом уложится в 500 символов.
- Какая информация будет размещена на сайте? Просто перечислить
разделы, но постараться учесть все желания.
- Какие дополнительные функции, кроме представления статической
информации, будет иметь сайт? Перечислить и дать краткое описание каждой
функции. Постараться уложиться в 100 символов.
- Должен ли сайт обмениваться данными с другими программами? Если да,
то нужно перечислить все эти программы, дать их краткое описание и
объяснить цель этого обмена.
- Есть ли какие-то требования к программной и аппаратной платформе, на
которой должен работать сайт? Если да, то надо перечислить эти
требования и дать краткое объяснение.
Естественно, перечисленных выше вопросов может быть недостаточно для
написания исчерпывающей Постановки Задачи. Они нужны «для затравки».
После ответа на них появятся другие вопросы, на которые тоже нужно будет
ответить. Процесс следует повторять до тех пор, пока внимательное
прочтение документа не принесет новых вопросов. В этот радостный момент
можно остановиться и перейти к работе над техническим заданием.
Техническое задание
Следующий шаг, который нужно предпринять после того, как задача поставлена
- разработать Техническое Задание. Разберемся, что это такое и зачем оно нужно.
Действительно, у нас на руках есть Постановка Задачи - документ, который кратко,
но емко, описывает желания заказчика. Неужели его не достаточно? Особенно, если
учесть время, которое было затрачено на его написание! К сожалению, недостаточно.
К примеру, в Постановке может быть указано, что сайт должен давать доступ к
прайс-листу компании, но там не описан ни формат листа, ни способ его обновления,
ни куча других, важных для программиста вещей. Реально, прайс-лист может быть
маленьким и умещаться на одной странице или быть настолько большим, что для
работы с ним потребуется сложная поисковая система. Другими словами, информации
в Постановке Задачи достаточно для получения представления о работе, но совершенно
не хватает для разработки как таковой.
Тут на сцену и выходит Техническое Задание (или ТЗ). Техническое Задание призвано
детальнейшим образом описать работу, которую необходимо сделать. Идеальное ТЗ
самодостаточно, после его утверждения разработчики могут решить порвать все
связи с цивилизацией и уехать куда-нибудь в район Подкаменной Тунгуски. Они
возьмут с собой Задание и компьютеры, а через оговоренное время вернутся с готовым
продуктом.
Очевидно, что написание идеального (или близкого к такому) Технического Задания
- это чрезвычайно сложная задача, и взваливать ее на плечи клиента совершенно
невозможно. Обычно разработчики берут эту задачу на себя, ибо раскрытие многих
вопросов требует наличия специальных знаний. За основу Технического Задания
берется Постановка Задачи, она входит в него составной частью и является источником
новых уточняющих вопросов. Другой источник сведений для ТЗ - это знания разработчиков
о том, как надо реализовать ту или иную функцию с тем, чтобы ее было удобно
использовать. Эта область знаний называется usability, подробнее узнать о ней
можно, например, на сайте http://www.usability.ru.
Результатом выполнения второго этапа работы является документ «Техническое
Задание». Он может иметь достаточно внушительный размер (в районе 50 страниц)
и содержит все сведения, необходимые для дальнейшей работы над проектом.
Проектирование
Получив Техническое Задание, разработчики принимаются за свою основную работу
- создание готового продукта. Аналогично тому, как мало-мальски серьезный дом
нельзя построить без чертежей, серьезный программный продукт следует сначала
спроектировать. По некоторым источникам, затраты на внесение изменений в разрабатываемое
приложение от этапа к этапу возрастают по экспоненте. То есть гораздо дешевле
поправить Техническое Задание, чем Проект, и еще дешевле не сделать ошибки на
этапе проектирования, чем поправить ее на этапе реализации. Можно выделить три
основные части, на которые обращается внимание: структура программы, способ
хранения данных и шлюзы с другими программами.
Структура программы
Любая программа имеет определенную логику функционирования. Несколько упрощая,
эту логику можно назвать «структурой программы». Если мы говорим о простейшем
статическом веб сайте (это даже почти не программа), то он состоит из набора
файлов с информацией, между которыми проложены связи. Функционирует он в соответствии
с базовой логикой работы веб-сайтов, поэтому и думать над его структурой практически
не надо. Другое дело - сложный динамический сайт, работающий с базой данных
и позволяющий обновлять свое содержимое в режиме on-line. Такой сайт будет содержать
подпрограммы, работающие на сервере, и подпрограммы, загружающиеся в браузер
и работающие на машине пользователя. Проработанная схема всех этих подпрограмм
или компонентов сайта, а также их взаимодействия, и представляет собой Структуру
Программы.
Хранение данных
Большинство, да, наверное, даже все, программы оперируют данными. Это знает
каждый, знакомый со школьным курсом информатики. Впрочем, современный процесс
разработки пользовательских приложений скорее нужно называть метапрограммированием.
Метапрограммирование - это что-то вроде «программирования программ», т.е. мы
имеем дело с программами, которые управляют работой программ, управляющих работой
программ и т.д. Данные для таких программ сложнее организованы и обладают многими
специальными свойствами.
Можно выделить два типа данных: статические и динамические. Статические жестко
зашиты в программу, изменить их можно только поправив сам текст программы. Считая
сайт программой, мы обнаружим, что никогда не меняющаяся страница «История компании»
как раз и является отличным примером статических данных. Очевидно, что полностью
статический сайт состоит только из страниц с неизменным содержимым. Для его
изменения нужно лезть в программу, что требует специальных знаний.
В противоположность статическим, динамические данные время от времени меняются.
Хороший пример динамических данных - новости. Новости постоянно добавляются,
старые новости приходят в негодность и удаляются. Естественно, что приложение
должно уметь работать с динамическими данными, а значит, у него должно быть
хранилище таких данных.
В зависимости от сложности данных, требуемой частоты обновления, бюджета проекта,
наконец, можно предложить два варианта организации хранилища данных: а) хранить
данные в текстовых файлах определенной структуры (XML документы) или б) организовать
базу данных.
XML документы
XML - это популярный сейчас метод создания структурированных текстовых документов.
До его появления имел место конфликт: текстовые документы, такие понятные человеку,
очень тяжело обрабатывались программными средствами; с другой стороны, двоичные
файлы, которые отлично читает программа, очень плохо воспринимаются и редактируются
человеком. Формат XML стал компромиссным решением - несколько элементарных правил
позволяют делать структурированные текстовые файлы, одинаково понятные и программе
и пользователю.
Для хранения данных в XML документах, мы должны придумать определенную структуру
для каждого типа данных и научить разрабатываемую программу доставать данные
из файлов с такой структурой. Вероятнее всего, заносить информацию в эти файлы
придется вручную, ибо при хранении данных в файлах возникают проблемы, связанные
с совместным доступом к этим данным.
Базы данных
Упрощая, можно сказать, что база данных - место хранения, изменения и обработки
данных. Данные в базе жестко структурированы, поэтому прежде чем хранить какую-то
информацию в базе, мы должны ее проанализировать, выделить структуру, а затем
воплотить эту структуру в схеме базы данных. Задача достаточно сложная, но и
преимущества от использования баз данных велики: легкость обработки огромных
массивов данных, возможность сложного поиска нужной информации в базе, простота
обновления данных и т.д.
В отличие от XML документов, базы данных не предназначены для того, чтобы пользователь
работал с ними напрямую, так что использование базы подразумевает наличие программных
средств для обновления хранящейся в ней информации.
Шлюзы с другими программами
Логично предположить, что, раз человек может обмениваться информацией с другим
человеком, то и программа может обмениваться данными с другой программой. На
деле же все не так просто. Продолжая аналогию, можно сказать, что большинство
программ говорят на разных языках и их нужно специально учить взаимопониманию.
Таким образом, для того, чтобы разрабатываемый продукт мог брать информацию
из каких-то других автоматизированных систем, нужно разработать специальный
компонент - шлюз. Способов функционирования шлюзов существует очень много. Здесь
все зависит от связываемых программ и стоящей задачи.
Графический дизайн
Сформулировать задачу дизайнера проще простого - надо сделать красиво и удобно.
Найти же решение этой задачи, то есть нарисовать красивый и удобный интерфейс
- может быть наиболее сложный этап всей работы над проектом.
Во-первых, для графического оформления каждого проекта придумывается своя уникальная
идея. Во-вторых, на основе этой идеи разрабатывается макет сайта. Макет показывает,
как будут выглядеть различные страницы, где будет располагаться информация,
где будет находиться навигационные и управляющие элементы и т.д. Наконец, на
основе макета прорабатывается внешний вид каждой категории страниц. То есть,
например, разрабатывается дизайн страниц с новостями, дизайн страниц с информацией
о продукте и т.д. Фактически дизайнер штудирует техническое задание и рисует
шаблоны для всего, что там описано.
Нужно упомянуть и о специфике дизайна интерфейсов для веб-сайтов.
- Дизайн сайта должен
быть «легким», т.е. общий размер всех файлов, составляющих оформление сайта,
должен быть очень небольшим. Это необходимо для того, чтобы сайт быстро грузился
даже по медленным линиям.
- Пользователи могут
иметь разные разрешения экрана, размер их браузеров тоже может быть практически
любой, поэтому дизайн сайтов стараются сделать «эластичным». Эластичный дизайн
растягивается, когда браузер широкий, и сужается, когда он делается узким. Конечно,
везде есть свои разумные пределы и у любого эластичного дизайна есть свои нижние
ограничения - страница не может стать уже находящейся в ней информации.
- Из-за масштабности
сети Internet, обращения к серверу могут быть достаточно долгими, поэтому интерфейс
разрабатывается с мыслью о минимизации этих обращений.
Программирование
Этап программирования, его еще называют «реализацией», начинается по окончанию
всех подготовительных этапов: проектирования и разработки пользовательского
интерфейса. У каждого типа приложений есть свои специфические шаги реализации,
для веб-сайтов можно выделить три основных шага: верстка, разработка клиентской
части и разработка серверной части. Не обязательно в таком порядке.
Верстка
Интерфейс сайта, разработанный дизайнером - это еще только макет окончательного
интерфейса сайта. Фактически, он состоит просто из набора картинок. Для того
чтобы его можно было использовать в программном продукте, нужно провести верстку
- разрезать макет интерфейса на составляющие его графические компоненты и описать
правила расположения всех этих элементов на странице. Для описания используется
специализированный язык HTML - язык разметки гипертекстовых документов. Готовые
сверстанные HTML шаблоны далее используются в следующих этапах реализации проекта.
Заметим, что язык HTML достаточно сложен для интерпретации, что возлагает большие
требования на программу просмотра этих файлов - браузер. Устаревшие браузеры
(например, Netscape Navigator версии 4) обладают значительно меньшими возможностями,
чем современные, поэтому, если разрабатываемый проект требует сохранить совместимость
с такими браузерами, верстка может стать очень сложной, местами невыполнимой
задачей.
Клиентские функции
Сверстанные HTML шаблоны определяют способ вывода информации: внешний вид страниц,
расположение текста, навигационные кнопки и т.д. В принципе, этого может быть
вполне достаточно для статического сайта - каждая навигационная ссылка просто
ведет на другую статическую страницу. Таким образом реализуется базовая функция
сайта - показ информации.
С другой стороны, нередко приложение должно выполнять какие-то активные действия
на стороне клиента. Например, нужно сделать интерактивную анимацию или быстро
посчитать что-либо, избегая обращений к серверу. Все это реализуется при помощи
подпрограмм, работающих в браузере пользователя. Совокупность этих подпрограмм
называется клиентской частью приложения.
Одна из функций клиентской части - обмениваться информацией с серверной частью
по сценарию более оптимальному, чем стандартный сценарий «нажал - перегрузил».
Серверные функции
Для того чтобы достать данные из базы данных, произвести поиск по заданному
критерию, автоматически занести в базу информацию, присланную администратором
сайта, или провести другие подобные действия, на сервере, обслуживающем сайт,
для этого должна быть соответствующая программа. Совокупность всех компонентов
сайта, работающих на сервере, называется серверной частью.
Любой серьезный динамический сайт обладает очень развитой серверной частью,
отвечающей за работу с базой данных, вопросы безопасности (аутентификация пользователей),
обновление информации и общение с другими программами.
Наполнение
Основная задача такого специфического программного продукта как веб-сайт -
это предоставление информации посетителям. Поэтому, после окончания всех основных
этапов разработки, сайт необходимо наполнить информацией. В зависимости от объема
данных, это может быть как достаточно легкой, так и весьма и весьма трудоемкой
задачей. Ее могут решить разработчики, если заказчик предоставит все данные,
или же ей может заниматься сам заказчик, в том случае, если сайт оборудован
системой обновления содержимого. На практике обычно применяется комбинированный
подход - часть информации забивают разработчики, а часть - заказчик.
Естественно, прежде чем разместить информацию на сайте, ее нужно подготовить:
написать тексты, собрать и обработать информацию о продуктах, подобрать фотографии
и т.д. Так как процесс этот достаточно долог, его стоит начинать пораньше -
лучше сразу после утверждения технического задания.
Разработчики могут помочь заказчику и на этом этапе, предоставив услуги копирайтера,
переводчика и дизайнера. Копирайтер специализируется на написании текстовых
материалов. Он обработает данную заказчиком информацию и выдаст текст, точно
соответствующий контент-модели разрабатываемого сайта. Дизайнер подгонит предоставленные
фотографии, чтобы они соответствовали графическому стилю всего сайта, и оптимизирует
их для ускорения загрузки.
Размещение
Очевидно, что после завершения разработки сайта, надо сделать то, ради чего
затевалась вся работа - сделать его доступным пользователям. С этой целью сайт
размещается на сервере - мощном компьютере, соединенном с Internet быстрой и
надежной линией. Такое размещение называется хостингом (от английского hosting)
и обычно оплачивается помесячно. Помимо размещения самого сайта на какой-либо
хостинг-площадке, нужно дать ему красивый адрес. Например, www.theCompany.ru.
Для этого нужно зарегистрировать доменное имя theCompany.ru и сделать так, чтобы
запросы по адресу www.theCompany.ru направлялись на нужный сервер. Больше узнать
о регистрации доменных имен можно на сайте www.nic.ru,
это чисто административная процедура и особого интереса не представляет. Лучше
рассмотрим более подробно вопрос направления запросов.
Каждая машина в сети имеет уникальный адрес, состоящий из четырех цифр. Словами
и буквами там и не пахнет. Для того чтобы людям не приходилось запоминать цифры,
в свое время была введена всеинтернетная служба DNS (Domain Name Service), которая
и занимается преобразованием буквенных адресов в цифровые. Поэтому, для того
чтобы буквенный адрес вел на правильный сервер, нужно сделать соответствующую
запись в службе DNS. По правилам полагается делать две записи на каждое имя
- основную (primary) и вторичную (secondary). Делается это для повышения надежности.
Эта услуга также обычно является платной.
Продвижение
Учитывая, что сайтов в Интернете чрезвычайно много, очень важно сделать все
возможное, чтобы о свежеразработанном сайте узнало как можно больше людей. Для
этого сайт регистрируют в поисковых машинах и каталогах, рисуют и показывают
баннеры, делают адресную рекламу и т.п. Диапазон возможных рекламных мер достаточно
велик, так что для каждого конкретного случая разрабатывается специализированная
рекламная кампания.
Поддержка
За готовым программным продуктом надо следить: менять информацию, устранять
возникающие в процессе работы ошибки, воплощать в жизнь новые идеи. Все это
входит в понятие «поддержка». Заказчик может поддерживать свой сайт самостоятельно,
переложить эту задачу на плечи разработчика или выбрать комбинированный подход.
Самостоятельная поддержка осуществляется обычно при помощи систем онлайнового
управления, встроенных в сайт, и, как правило, не включает в себя существенных
изменений сайта. В свою очередь, разработчики в рамках поддержки сайта могут:
- Обновлять материалы
на сайте
- Менять структуру сайта:
добавлять новые разделы, изменять или удалять старые
- Помогать в анализе
функционирования сайта, составлять рекомендации по его изменению
- Добавлять новые функции,
расширять возможности уже имеющихся функций и сервисов сайта
- Производить графические
работы: обрабатывать новые фотоматериалы, разрабатывать баннеры, анонсы и т.п.
- Писать тексты для
новых разделов сайта
Необходимо помнить, что грамотная поддержка - это залог успешного функционирования
сайта, и что сайт, который не поддерживается должным образом, не стоит времени,
сил и денег, потраченных на его создание.