Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

LAV_ СИТспец_маг2014-15 / Лаб_раб-модуль1 / Лаб4 / Планир_сайта(допол_лит)

.doc
Скачиваний:
17
Добавлен:
20.05.2015
Размер:
383.49 Кб
Скачать

Планирование сайта

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

  • разработчик контента;

  • web-маркетолог;

  • web-дизайнер;

  • web-мастер;

  • web-программист;

  • web-администратор.

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

  • общая концепция сайта;

  • график работы над проектом;

  • эскизы основной страницы и страниц более низкого уровня;

  • критерии, по которым будет оцениваться готовый проект.

Тема 1. Этапы создания сайта

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

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

  1. Обзор имеющихся решений.

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

Таблица 1.1. SWOT анализ web сайта

Сильные стороны

Слабые стороны

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

Сильные и слабые стороны могут считаться таковыми лишь в том случае, если так их воспринимают посетители аналогичных сайтов

Возможности

Угрозы

Возможности и угрозы связаны с характеристиками аудитории и неподвластны вашему непосредственному влиянию

  1. Концепция сайта

  • Название сайта

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

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

  • Назначение и предполагаемая аудитория

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

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

По данным исследования ROMIR Monitoring Рунет пока остается преимущественно "мужской территорией": в русскоязычной Сети все еще преобладают представители сильной половины человечества (56%). Мужчины ориентированы на получения новостей, и конечно, они более частые гости сайтов по программированию и компьютерным технологиям. Представительницы прекрасной половины в основном используют интернет как средство общения (через почтовые службы), также среди них более популярны сайты, посвященные образованию и туризму. Более подробная информация представлена на рис1.1.

Рис. 1.1.  Процентное посещение сайтов разной тематики интернет-пользователями (по данным холдинга ROMIR Monitoring).

Лучше всего возможности мировой паутины освоили молодые люди: средний возраст пользователя в 2005 году - 30 лет. Группа молодых рунетчиков - от 18 до 24 лет наиболее многочисленна (35% россиян в этом возрасте заходят в интернет). Вопреки ожиданиям, подростков в Интернете оказалось не много: 2,6% опрошенных в возрасте до 16 лет и 5,6% - в возрасте 16-17 лет (по данным исследования "Онлайн Монитор", агентство МАСМИ).

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

Уровень дохода россиян, периодически заглядывающих в Сеть, в основном средний. Хотя, конечно, самый высокий процент (29%) пользователей интернета оказался в группе респондентов с высоким уровнем дохода. Соотношение социальных групп в Рунете выглядит следующим образом: преобладает высокообразованная аудитория - 46,9% пользователей имеют высшее образование и 25,8% - незаконченное высшее. Люди, назвавшиеся рабочими, редко используют широкие возможности всемирной паутины - всего 4,8% из опрошенных. Немало в Рунете также студентов (21%). Наиболее активно в интернете работают руководители высшего и среднего звена, а также предприниматели. Интернет-пользователи из этих социальных групп заходят в сеть, как правило, каждый день.

  • Информационное наполнение сайта

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

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

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

  1. Логическая структура сайта и построение системы навигации

  • Логическая структура сайта

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

Хорошая структурированность сайта обеспечивает половину успеха при его создании. Ошибки на этом этапе впоследствии приведут к большим затратам сил на их исправление.

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

Для представления логической структуры сайта можно воспользоваться древовидными организационными диаграммами, которые удобно составлять в программе ConceptDraw MINDMAP Professional (рис.1.2.)

Рис. 1.2.  Структура сайта, выполненная в программе ConceptDraw MINDMAP Professional

  • Построение системы навигации

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

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

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

  1. Разработка визуальной составляющей сайта.

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

  • шрифт - в пределах публикации он должен иметь одинаковые характеристики (начертание, высоту, цвет);

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

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

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

Результатом этого этапа должен быть окончательный эскиз Web-странички.

  1. Написание кода.

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

  1. Публикация и тестирование

Публикация заключается в размещении сайта на сервере организации, предоставляющей такие услуги. Перед публикацией вы должны определиться, стоит ли иметь свой платный домен второго уровня в сети или воспользоваться бесплатным местом на другом домене (третьего или даже четвертого уровня); во втором случае вы должны убедиться, что вы получите доступ к Internet Information Service с поддержкой ASP.NET 2.0.

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

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

Тема 2. Эскизы страниц

Профессиональный сайт отличается от любительского прежде всего тем, что все страницы сайта выполнены в едином стиле. Чтобы выдержать стиль, проще вначале разработать шаблон страницы. Шаблоны удобны тем, что большинство страниц верстают по подобию одной страницы почти автоматически. Структура шаблона состоит из элементов, которые должны присутствовать на всех страницах сайта. Например, меню навигации, название темы, поле ввода информации, форма поиска, контактная информация. (см.рис.1.3.). Меню навигации удобнее расположить в верхней или в левой части страницы. Обычно разрабатывают один или в случае, когда хотят особо выделить домашнюю страницу сайта - два шаблона.

Рис. 1.3.  Пример структуры информации главной страницы

Теперь перейдем к созданию внешнего вида Web-страниц. Начнем с главной страницы. Традиция оформления главной страницы пришла из полиграфического дизайна. В книге или журнале есть функциональная необходимость присутствия обложки. Обложка - "лицо" книги. Главную страницу сайта также можно сравнить с "лицом" интерактивной мультимедийной книги - она определяет образ всего сайта.

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

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

Независимо от вида домашней страницы существует несколько основных правил ее организации:

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

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

  • домашняя страница должна пояснять, чему посвящен этот узел, или же как-то привлекать внимание посетителя;

В отношении каждой порции информации, каждой картинки и каждой детали спросите себя, как отреагирует на это ваша аудитория.

Второстепенная страница-шаблон, обычно содержит следующие элементы (см. рис.1.4):

  • меню навигации по темам;

  • логотип;

  • тематическая графика;

  • название страницы;

  • поле ввода информации;

  • e-mail Web-дизайнера.

Рис. 1.4.  Пример структуры информации второстепенной страницы

Пока мы разработали только структуру страниц, состоящую из отдельных элементов. Теперь важно определить основные цвета пространства Web-страниц. Лучше не использовать больше трех цветов на одной странице, так как цвета активно влияют друг на друга. Желтый цвет "звучит" по-разному рядом с синим и серым: в первом случае он становится более ярким и насыщенным, а во втором выглядит более спокойно. (рис.1.5.)

Рис. 1.5.  Получилась тепло-холодная гамма цветов

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

Запустите графический редактор. Выберите светло-серый фон рисунка.

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

Уберите желтый цвет. Обратите внимание, что желтый цвет был нужен.

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

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

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

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

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

Рис. 1.6.  Сетка "золотого сечения"

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

Все размеры элементов композиции на рис.1.7.были найдены при помощи законов золотого сечения.

Рис. 1.7.  Один из вариантов эскиза композиции элементов главной страницы

Тема 3. Ошибки в web-дизайне

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

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

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

Ошибки

  • Устаревшая информация

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

  • Отсутствие архивов

Старая информация - не значит плохая. Обратите внимание, что архивы и информация о старом товаре или продукте - как раз достоинство сайта, а не недостаток, и они очень сильно отличаются от устаревшей информации. Читателям она может оказаться полезной. Даже если новая информация оказывается гораздо полезней, у старой информации тоже найдется свой потребитель. Поддержка архивных данных на сервере увеличивает расходы по поддержке сервера приблизительно на 10%, а полезность и посещаемость ресурса возрастает при этом на все 50%.

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

  • Заголовки, не связанные с контекстом

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

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

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

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

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

Ошибки

  • Малопонятная навигация по сайту

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

  • Сложные адреса (URL)

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

  • Исчезнувшие (ошибка 404) страницы

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

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

Ошибки

  • Прокрутка текста и усложненная анимация

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

  • Нестандартные цвета ссылок

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

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

Ошибки

  • Нестандартное использование графических элементов управления

В настоящий момент больше всего закон постоянства любят нарушать в использовании графических элементов управления - например, кнопок-селекторов и флажков (radio-buttons и checkboxes).

Например, по правилам действия кнопок-селекторов (radio-buttons), нужно выбрать одну из нескольких предложенных опций, однако никаких изменений не происходит, пока пользователь не нажмет кнопку ОК, подтверждая свой выбор. К сожалению, нередко встречаются сайты, на которых это базовое правило нарушалось - действие происходило сразу после выбора опции.

  • Не работающие фрагменты кода

Пользователь, столкнувшись с примитивной ошибкой, покинет ваш сайт немедленно. Стоит ли ему ломать голову над тем, как это работает, если есть еще 5 миллионов других сайтов?

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

Ошибки

  • Отсутствие единой регистрации в различных интерактивных элементах.

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

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

Соседние файлы в папке Лаб4