Логическое проектирование

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

Принципы проектирования сайта

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

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

2) уместность. Разделы сайта должны содержать информацию и элементы, которые соответствуют данной части или фрагменту сайта. Элементы, которые не отвечают данному принципу, должны быть перенесены в другое место или удалены;

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

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

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

Организация информации

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

Структура организации информации на сайте может быть:

Линейная структура. Наиболее простой способ организации данных. Представляет собой набор следующих друг за другом WEB-страниц. К линейной структуре можно отнести пошаговое выполнение операций.

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

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

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

На сайте города Инза информация представлена в иерархическом виде.

Навигация по сайту

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

Где я нахожусь?

Любую WEB-страницу следует рассматривать как часть сайта и одновременно как некоторую независимую самостоятельную часть. На любую страницу сайта можно попасть в обход «главного» входа, в результате использования поисковых систем или прямой ссылки на данную страницу. Учитывая это обстоятельство, следует предусмотреть название сайта на каждой его странице, чтобы посетителю было сразу понятно, какой сайт он посетил. Также, необходимо, ввести заголовок раздела или статьи, чтобы показать посетителю, в каком месте он находится относительно самого сайта.

Какие страницы я уже посетил?

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

Какие разделы могу посетить?

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

Физическое проектирование

Описание сервисов и технологий, необходимых для реализации запланированных возможностей сайта.

На этом этапе следует описать следующее:

· технологии, которые будут применяться на сайте;

· используемое программное обеспечение;

· возможные проблемы и способы их устранения;

· как будет обновляться информация.

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

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

Контент и кратив

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

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

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

Привлечение внимания

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

Соответствие содержанию

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

Традиционность

Несмотря на относительную молодость, Интернет уже обзавелся своими традиционными устоявшимися терминами и названиями. Если где-нибудь на сайте вместо слова «форум» вставить, например, «болталка». Большая часть читателей поймет неверно, ведь можно решить, что это форум, а может и гостевая книга, а может… да что угодно можно подумать. Поэтому лучше воспользоваться тем термином, который уже устоялся и стал привычен. Некоторые понятия имеют несколько синонимов, например - главная страница, первая страница, домой обозначает одно и то же. Что предпочесть зависит только от разработчиков.

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

Краткость

Заголовок должен содержать максимум 3 строки. Тексты длиннее тяжело читать и они хуже воспринимаются при чтении. Если все же требуется длинный текст, можно разбить его на подзаголовки, разбросанные по тексту.

Орфографию

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

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

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

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

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

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

Разбивание больших таблиц

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

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

Оптимизирование графики

Чтобы графические изображения быстрее загружались на web-странице, следует уменьшать размер файлов картинок при сохранении их качества. Для оптимизации графики существуют специальные программы, позволяющие управлять различными параметрами с учетом форматов файлов. Например, Adobe Image Ready, Ulead Smart Saver Pro, Macromedia Fireworks, Adobe Photoshop и другие.

Фиксирование ширины и высоты рисунков

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

Многократное использование одних и тех же изображений

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

Применение каскадных таблиц стилей (CSS)

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

Происходит сокращение кода, вдобавок, описанный класс можно использовать многократно.

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

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

· можно изменять таблицу стилей без модификации web-страниц;

· файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от web-страниц, поэтому загрузка сайта происходит быстрее;

· при изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше WEB-страницах нашего сайта.

Размещение скриптов в отдельных файлах

Аналогично стилям скрипты можно размещать во внешнем файле. То есть вместо:

<script language="JavaScript">

текст программ

</script>

нужно указать <script language="JavaScript" src=program.js></script>, где параметр src указывает на файл со скриптами.

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

Размещение важной информации наверху страницы

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

Оптимизация кода HTML

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

Тестирование

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

Проверка корректности ссылок

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

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

Типичные ошибки, возникающие со ссылками:

· ссылка на локальный документ;

· регистр;

Ошибка, как правило, проявляется на серверах с операционной системой Linux, чувствительной к регистру символов. Поэтому файлы с именами INDEX.HTML и index.html являются разными

· неправильный путь к файлу.

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

Альтернативный текст на изображениях

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

Каждая страница должна иметь заголовок

Заголовки страниц используются поисковыми системами для обозначения страницы, а также при сохранении ссылки в разделе «Избранное» браузера. Чтобы посетителю сайта было легче и удобней ориентироваться в сайте, всегда нужно писать заголовок страницы соответствующий ее содержанию.

Публикация

Размещение сайта в Интернете. Для публикации можно воспользоваться бесплатным хостингом (www.narod.ru, www.fatal.ru, www.webhost.ru, www.boom.ru и др.), размещать сайт у провайдера или воспользоваться другими возможностями. Увы, бесплатных хостов с поддержкой Perl очень мало, и регистрация на них протекает очень медленно.

Раскрутка

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

Обмен ссылками

Один из верных способов получить посетителей - это обмен ссылками с сайтами, сходными по тематике. При немалом количестве ссылок можно получить не только трафик с сайтов-партнеров, но и трафик с поисковых систем. Алгоритмы Google, например, учитывают число ссылок на сайт с других источников, а также, слова в тексте ссылки и описание.

Обмен сайтами

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

Keywords для начинающих

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

<META NAME = <“keywords”> CONTENT = “ключевые слова”

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

Не следует писать слишком распространенные слова. Например: программы, компьютеры, Интернет. Поисковые системы их просто игнорируют, т.к. ими загружены миллионы документов. Так же, не стоит включать служебные слова (предлоги, союзы и т.д.). Нельзя повторять слова два и более раз.

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

Иногда имеет смысл вписывать слова во множественном числе. Если множественное число образуется путем изменения корня, а не замены окончания, тогда стоит давать вариант во множественном числе: «mouse» - «mice».

Следует ограничиться 250 символами, составляющими ключевые слова. Конечно, ничего страшного, если получится список длиной 500 символов, остальное просто не будет учтено поисковыми системами - некоторые из них не учитывают более 200 символов, а многие и вовсе игнорируют...

Возможно, на данный момент, создание Keywords не столь актуально. Однако не стоит им пренебрегать. Никогда неизвестно какую стратегию работы изберут поисковые системы завтра.

Поддержка

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

Поиск по сайту: