22
ГЛАВА 2. ЭТАПЫ СОЗДАНИЯ ВЕБ-ПРИЛОЖЕНИЯ
2.1. Начальные этапы разработки веб-приложения
2.1.1. Постановка целей разработки веб-приложения и
исследование предметной области
На данном этапе важно понять, для кого и зачем разрабатывается веб-
ресурс. Если неверно поставить цели и задачи, создание необходимого сайта
будет невозможно. Для начала необходимо тесно поработать с заказчиком,
чтобы понять, что именно заказчик ждет от будущего веб-приложения.
Также важно провести исследование конкурентов выбранной тематики и
составить схемы: какой они предоставляют пользователям функционал,
какую структуру и какой дизайн они имеют и т.д.
Итак, перед тем как приступать к созданию веб-приложения,
необходимо определить цель, ради которой он разрабатывается и целевой
сегмент потребителей [8]. Основными целями могут быть, например:
предоставление информации о фирме, ее услугах или продукции;
продажа товаров и услуг;
создание позитивного имиджа фирмы, бренда или продукции;
сбор оперативной информации от потребителей о продукции
фирмы, ее услугах, качестве обслуживания и др.
В сети Internet аудитория огромна. Несмотря на это определенный
интернет-ресурс увидят далеко не все пользователи сети. На практике этого и
не требуется. Задача состоит в том, чтобы веб-ресурс посещали
пользователи, которым близка и интересна тематика сайта или которые
могут выступать потенциальными покупателями.
Прежде всего, нужно разделить потенциальных посетителей в сети
Internet на сегменты и выделить целевой сегмент. Далее надо составить
характеристики, описывающие этот сегмент. При этом кроме традиционных
переменных (демографических, психологических, поведенческих и прочее)
23
важно учитывать характеристики, связанные с характеристиками
компьютерного обеспечения потребителей в Internet (скорость работы
компьютера, качество монитора, объем памяти и т.д.). Знание особенностей
потенциальных потребителей даст возможность привлекать на ресурс
посетителей, автоматически отбирая только тех, кто может быть
заинтересован содержанием сайта.
Таким образом, на всех этапах создания сайта нужно принимать во
внимание особенности и характеристики целевого сегмента аудитории.[25]
Так же в определении целей и задач создания сайта может помочь
анализ сайтов конкурентов. Проводить такой анализ конкурентов по
различным показателям удобно с помощью таблицы. Необходимо выбрать не
менее трех конкурентов, чтобы иметь достаточный диапазон для оценки, но
не более пяти — выборку стоит делать из самых крупных конкурентов.[5]
Оценку следует провести по четырём сферам. Понимание каждой
области даст возможность сформировать чёткое представление о том, что
должно быть в разрабатываемом сайте.
Пользовательский опыт:
Насколько хорошо организован сайт? Понятна ли структура сайта?
Может ли пользователь быстро и легко найти нужную информацию
на сайте?
Создаёт ли компания впечатление надежной, заслуживающей
доверия организации?
Приятный ли для восприятия дизайн?
Контент:
Является ли контент убедительным или полезным?
Легко ли читается текст?
Информация на сайте интересна пользователю? Является ли она
конкретной, краткой, полной и понятной?
24
В тексте на сайте нет опечаток, грамматических или
пунктуационных ошибок?
Техническая сторона:
Насколько быстро загружается сайт?
Адаптивная ли у сайта вёрстка, есть ли мобильная версия сайта?
Не было ошибок при загрузке сайта?
Есть ли «битые» ссылки?
Маркетинговая сторона:
Говорит ли сайт на языке покупателя?
Есть ли акции, скидки, программы лояльности?
Какова ценовая политика?
Наличие гарантий?
Каким-либо образом демонстрируется высокое качество продукции
или услуги?
2.1.2. Разработка технического задания (ТЗ)
Наметив основные цели и проведя анализ необходимо зафиксировать
полученные выводы и дополнить их, чтобы получить точное и подробное
руководство, каким сайт должен быть в итоге.
Клиент, зачастую, хочет или «что-то крутое», или «ничего необычного,
пусть будет как у всех», что является очень абстрактными понятиями. У
каждого человека свое понимание «крутого» или «как у всех». Разработчик
может не догадаться, попасть не в то настроение и тому подобное. Чтобы
такого не происходило, необходимо составлять техническое задание на
разработку сайта.
Техническое задание на сайт — это подробный документ,
описывающий процесс взаимоотношений заказчика с разработчиком и
результат его работы.
Техническое задание (ТЗ) может составлять как заказчик, так и
25
исполнитель. В любом случае, обсуждается и согласовывается
техническое задание, обеими сторонами, ведь некоторые аспекты не может
знать заказчик, а какие-то исполнитель. Составить правильное ТЗ просто
необходимо, ведь если в задании что-то упустить, например, какой-то
дополнительный модуль, то исполнитель может отказаться от доработки (в
рамках данной задачи).[12]
В отличие от ТЗ на программу или автоматизированную систему
управления, обозначающих требования к структуре или содержанию ТЗ
ГОСТов на изготовление веб-приложений, нет. Однако, исходя из практики,
требования ГОСТов (34.602 и 19.201) довольно часто учитываются при
оформлении таких ТЗ. В частности требования ГОСТ 34.602 учитывают при
создании ТЗ на интернет-магазин или портал, а ГОСТ 19.201 при разработке
ТЗ на сайт-визитку.
Опыт создания сайтов подтверждает, что техническое задание помогает
решить следующие задачи:
систематизирует и упорядочивает рабочий процесс;
оговаривает такие моменты как сроки и стоимость создания;
всю информацию необходимую для разработки интернет ресурса;
позволяет создать продукт, максимально соответствующий
ожиданиям заказчика;
позволяет юридически закрепить процесс разработки и приёмки
создаваемого продукта. [37]
Что должно включать в себя ТЗ:
обозначить целевых клиентов сайта;
структуру сайта в виде схемы, которая состоит из основных
разделов, подразделов и ориентировочного количества страниц;
требования к модулям (модуль обратной связи, вопрос-ответ, поиск,
фильтры и прочее);
26
описание дизайна (оформление, цветовая гамма, логотип,
местонахождение разного рода блоков)
используемые технологии (CMS, библиотеки скриптов, наличии
мобильной версии сайта и т.д.);
порядок предоставления, обработки или создания текстовой и
графической информации;
технические требования к сайту.
2.1.3. Создание дизайн-макета
После первого этапа разработки дизайнер анализирует ТЗ и приступает
к разработке уникального макета сайта, промежуточные версии которого
демонстрируются заказчику. При создании дизайна необходимо данный
пункт разделить на несколько подэтапов создания:
создание установленного количества различных по концепции
макетов сайта;
согласование и доработка выбранного варианта шаблона;
создание макетов внутренних страниц;
согласование и доработка каждой из типовых страниц.
Макет сайта создаётся в форматах: PSD (для верстальщика) и PNG, JPG
или JPEG (для демонстрации).
На рисунке 3 приведён пример разработки дизайна сайта. Сначала
создается набросок на бумаге, эскиз макета в ручном режиме. Затем, в
большинстве случаев с помощью программы Photoshop, дизайнер создаёт
полноценный макет сайта.
Макет может не содержать наполнения: как текстовой информации, так
и фотографий, которые должны быть предоставлены заказчиком в процессе
создания сайта — шаблон можно временно заполнить демо текстом и
картинками. Однако должны быть прорисованы все элементы дизайна.[26]
Данный этап разработки сайта может быть пропущен, так как дизайн
27
сайта можно купить в готовом виде. Существует большое количество
дизайн-студий, которые предоставляют готовые решения на коммерческой
основе. Но даже в этом случае, дизайнеру придется потратить время, чтобы
изменить готовый дизайн в соответствии с требования заказчика. При
покупке готового дизайна сайта должен предоставляться сертификат на
право использования продукта.
Рисунок 3 – Пример эскиза и разработанного по нему шаблона сайта
Разработка дизайна сайта должна осуществляться строго в
соответствии с ТЗ.
Во время создания макета должны также учитываться и технические
нюансы: какая CMS будет использоваться, нужно ли чтобы адаптирован для
мобильных устройств, какие технологии верстки будут использоваться, тем
самым рассчитываются и учитываются размеры блоков и элементов сайта.
На создание макета может потребоваться от нескольких дней до месяца.
Далее, внося все правки, заказчик утверждает дизайн.[29]
2.2. Верстка, программирование и внедрение CMS
2.2.1. Вёрстка и программирование веб-сайта
28
На данном этапе происходят исключительно техническая работа, и
насколько качественно она будет выполнена, зависит от уровня
профессионализма верстальщика и программиста. По своей сути термин
верстка подразумевает перенос нарисованного макета в рабочее состояние из
составных частей, на которые разбивается макет — это могут быть картинки,
таблицы, текст и прочие элементы.[29]
Для этих целей используются языки программирования. Их достаточно
большое количество, однако для то чтобы создать сайт, достаточно владеть
языками HTML, CSS, PHP и JavaScript. Для создания проектов,
подразумевающих регистрацию пользователей, для создания социальных
сетей или сложных форумов, понадобятся знания и навыки работы с
программным обеспечением MySQL и языком XML.
Основные языки, используемые для вёрстки и программирования веб-
сайтов:
HTML – язык разметки. На этом языке указывается расположение
блоков, шрифт, цвета, ссылки. Этот язык выступает основой, т. к. отвечает за
возможность наполнения сайта содержимым. В принципе, языком
программирования html не является, так как он только позволяет указать
расположение объектов и их формат.
CSS – тоже скорее является языком разметки, а не
программирования. Расшифровывается как каскадная таблица стилей. На
этом языке указывается параметры оформления сайта, например, реакция
ссылки или кнопки на наведение на них курсора. Именно язык CSS задаёт
внешний вид блоков с текстом, картинками и т.п.
JavaScript – браузерный язык программирования, работающий на
стороне пользователя. С его помощью можно создать функциональные
элементы (всплывающие подсказки, выпадающее меню). Все такого рода
элементы работают на стороне пользователя, то есть в случае
взаимодействия с ними страница не перезагружается.
29
PHP – серверный язык программирования, обеспечивающий связь
пользователя с сервером. Именно с его помощью отдаются команды,
зарегистрироваться или отправить сообщение на e-mail, создаются формы
обратной связи. Его использование необходимо в создании коммерческого
сайта, так как иначе не удастся получить контактные данные клиента. [40]
MySQL – это не язык, а программное обеспечение или база данных
в форме таблиц, в которых сохраняется вся информация об авторизованном
пользователе. Для взаимодействия с таблицами из MySQL используется язык
SQL. [13]
XML – язык программирования, который обеспечивает
взаимодействие компьютеров через интернет. При создании использовать его
не требуется, однако, без него не обойтись в разработке социальных
сетей.[15]
Условно можно выделить три типа вёрстки:
фиксированная вёрстка;
резиновая вёрстка;
адаптивная вёрстка.
В случае фиксированной верстки сайта его ширина остаётся
неизменной при любых обстоятельствах. Ширина макета известна заранее и
устанавливается точным значением в стилях. Данный тип верстки удобен и
хорош, пожалуй, только для верстальщиков, т. к. он является самым лёгкими
на него тратится мало всего усилий и времени. Можно предсказать заранее
поведение всех элементов на странице— нет необходимости высчитывать
какие-то проценты, можно не обращать брать во внимание разрешение
экрана пользователя. Так или иначе, всё равно выдается один и тот же
шаблон, у которого фиксированная ширина. Поэтому и такое название —
фиксированная верстка.
Отличие резиновой вёрстки от фиксированной заключается в том, что
ширина сайта не известна заранее, и может варьироваться в зависимости от
30
ширины экрана пользователя. Однако, стоит отметить, что не всегда
резиновая верстка подразумевает заполнение экрана на 100% ширины
экрана. Иногда бывает, что задаётся минимальная и максимальная ширина
сайта и, до определенного размера, сайт растягивается или сжимается, в
зависимости от разрешения экрана, а затем останавливается. Создать такую
страницу можно, используя свойства min-width и max-width, которые
применяются к главному контейнеру, который содержит в себе все элементы
сайта.
Резиновая верстка является второй по сложности исполнения, потому
что ширина сайта неизвестна заранее и будет изменяться, задать точное
значение ширины всех элементов невозможно. Выходом в данном случае
является использование процентов. Довольно часто на разных сайтах
встречаются плавающие элементы, количество которых на строке может
увеличиваться или уменьшаться, так же, в зависимости от параметров экрана
пользователя. Например, на небольшом экране отображаются только 3 товара
в строке, а на очень большом — 6. Плавающие элементы как правило
реализуются с использованием свойства float или с помощью присвоения
блочному элементу свойства display: inline-block;, что делает его наполовину
блочным и наполовину встроенным, благодаря чему перенос на новую
строку не осуществляется.
Самым сложным типом верстки является адаптивная верстка сайта. В
вёрстке данного типа отсутствует какая-либо определённость и шаблон
может подстраиваться под различные устройства и экраны, с которых
просматривается сайт, тем самым сильно меняясь. Этот тип верстки самый
трудозатратный, дорогой и, в некоторых случаях, не оправдан. Разработка
сайта с такой вёрсткой значительно возрастает в цене, а так же значительно
увеличивается срок разработки. Но основной аргумент заключается в том,
что сегодняшний день размеры экранов смартфонов и планшетов настолько
выросли, а мобильные браузеры настолько развиты, что открытый в них в
своем обычном виде сайт смотрится вполне презентабельно, за счёт
31
встроенных функций автоматического масштабирования и прочим
современным технологиям.[38]
2.2.2. Система управления содержимым (контентом) (CMS)
CMS — так называемый «движок» или «скелет» сайта,
предоставляющий базовые функции с готовыми темами оформления. Веб-
мастеру нужно просто загрузить файлы CMS на сервер, произвести её
настройку под свои нужды, выбрать тему оформления, при необходимости
внеся свои коррективы, а также наполнить сайт текстом, видеороликами,
фотографиями и прочим.
CMS пишутся в основном на PHP, но обязательно используют HTML-
и CSS-код. CMS можно сравнить с операционной системой или с программой
— разработчик её устанавливаете, настраивает и использует. Для этого не
требуется иметь навыки программирования — управлять сайтом можно,
используя простую и интуитивно понятную панель администрирования. Если
это необходимо, можно расширять функционал с помощью заранее
написанных расширений — плагинов. CMS позволяет разработчику
практически полностью избавиться от проблем, возникающих при создании
сайта — любой современный движок не требует сложной и долгой
установки.
Для редактирования текста или добавления страницы на созданном
вручную с помощью HTML и CSS сайте, нужно будет править код. В системе
управления сайтом это можно сделать через панель администрирования с
удобным интерфейсом пользователя.
Сайты на CMS получаются динамическими, могут содержать тысячи
страниц, ими легко управлять и расширять, их оформление можно изменить,
зачастую, даже не касаясь кода сайта.
Все CMS можно условно разделить на платные, бесплатные, и
самописные.