1. Введение в технологию создания веб-сайтов


1.4. Этапы разработки сайта

Термин "веб-дизайн" применяется к обобщенному понятию, описы-вающему процесс, который фактически охватывает много различных дисциплин, таких как:

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

Если вы самостоятельно разрабатываете небольшой сайт, то вам придется стать и графическим дизайнером, и сценаристом, и вешальщиком HTML-кода, и информационным архитектором и т.д.

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

Современный сайт можно представить как состоящий из трех отдельных слоев:

  1. структурный – содержимое документа с разметкой (X)HTML. Он формирует основу, на которой могут применяться другие слои;
  2. представления – используя таблицы стилей можно управлять тем, как должно выглядеть содержимое сайта;
  3. поведения – включает сценарии, которые наделяют страницу интерактивностью

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

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

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

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

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

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

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

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

Поскольку Всемирная паутина – визуальная среда, веб-страницы требуют особого внимания к проектированию их внешнего вида. Графический дизайнер создает "look and feel" – внешний вид и поведение сайта – логотипы, графики, шрифты, цвета, макеты и т. д., чтобы обеспечить положительное первое впечатление и согласованность с брендом и миссией организации, которую он представляет. Графические дизайнеры обычно создают эскизы возможных вариантов внешнего вида сайта. Кроме того, они могут быть ответственны за подготовку графических файлов, оптимизированных для Интернета.

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

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

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

  • оптимизация изображений для получения минимального возможного размера файла без потери качества;
  • минимизация размера документов HTML и CSS путем удаления лишних пробелов между символами и переводов строк;
  • сведение к минимуму использования сценариев JavaScript;
  • добавление сценариев таким образом, чтобы они загружались параллельно с другими активами страницы и не блокировали ее визуализацию;
  • запрет загрузки неиспользуемых активов (например, изображений, сценариев или библиотек JavaScript);
  • сокращение количества запросов, посылаемых браузером на сервер (известных как НTTP-запросы). Каждое обращение к серверу в виде HTTP-запроса занимает несколько миллисекунд, и эти миллисекунды способны повлиять на производительность.

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

На этапе тестирования проверяется сайт на работоспособность и удобство пользования интерфейсом.

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

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

Для проверки можно использовать валидатор – программное обеспечение, которое сравнивает ваш исходный код с указанной версией HTML. Валидаторы доступны в инструментах для разработчиков, таких как дополнение Firebug для браузера Firefox или встроенные инструменты разработчика в браузерах Safari и Chrome, чтобы вы могли проверить свою работу в процессе. Если для создания сайтов вы используете программу Dreamweaver, в нее также встроен валидатор.

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

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

Бесплатный хостинг предлагают, например:

  • 4shared – http://www.4shared.com/;
  • About.me – http://about.me/;
  • uCoz – http://www.ucoz.ru/;
  • сайты Google – https://sites.google.com/.

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

  • поддержка CGI: Perl, PHP, Python, ASP, Ruby, JSP, Java;
  • поддержка баз данных.

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

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

Во-вторых, со временем веб-документы исчезают или перемещаются, что приводит к так называемым "ломаным ссылкам".

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