Проектирование web-сайта

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

Таким образом  среди некоммерческих сайтов можно  выделить:

1)Личные  страницы

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

2)Тематические  информационные сайты

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

3)Поисковые  системы

В настоящее  время большая часть поисковых  систем превратились в полноценные  интернет-порталы (Google, Яндекс, Рамблер). Тем не менее в качестве примера «чистой» поисковой системы можно назвать Nigma.ru.

4)Почтовые  сервисы

В принципе, аналогично предыдущему пункту. Все крупные  почтовые сервисы либо стали крупными интернет-порталами (например, Mail.ru), либо являются частью других порталов (например, Gmail.com как сервис, входящий в Google, или Яндекс.Почта как часть Яндекса).

5)Социальные  сети

Приобрели в  последнее время просто фантастическую популярность. Концептуальный принцип  таких веб-сайтов базируются на социологических  теориях социальных сетей. Фактически их функции заключаются в возможности зарегистрированных пользователей находить в данной сети определенных людей и поддерживать с ними связь, организовываться в сообщества по интересам, а также в предоставлении пользователям возможности размещать собственный медиа- и текстовый контент. Крупнейшими социальными сетями в мире являются Facebook и MySpace, а в России  - «Вконтакте» и «Одноклассники».

6)Блоговые  сервисы

Предоставляют площадки для ведения блогов, позволяют  пользователям вести коллективные блоги (сообщества) и организовывать удобное взаимное чтение. Слово «блог» (blog) - это сокращение от web log - «веб-журнал». Фактически представляет из себя публичный онлайн дневник. В настоящее время блоги имеют очень широкий спектр использования: от бытовых заметок для нескольких друзей, до политической трибуны для тысяч людей. В качестве примеров блоговых сервисов можно привести livejournal.com, liveinternet.ru, сервис микроблогов twitter.com и другие.

7)Сервисы  для хранения фотографий

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

8)Сервисы  для хранения и воспроизведения  видео

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

 

9)Доски  объявлений

Фактически  аналогичны обычным бытовым доскам объявлений или рекламным газетам. Каждый желающий может вывесить своё объявление, а все посетители сайта - прочитать его. Доски объявлений, как правило, поделены на несколько тематических разделов.

10)Каталоги  сайтов

Содержат структурированные  списки ссылок на веб-сайты, снабженные их краткими описаниями. Масштаб различных  каталогов может сильно разниться: от нескольких сотен ссылок до глобальных всемирных каталогов. К последним следует отнести DMOZ и каталог Yahoo!. Русскоязычные каталоги - Яндекс.Каталог, каталог mail.ru.

11)Тематические  информационные интернет-порталы

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

12)Онлайн  энциклопедии

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

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

 

3.Создание наброска сайта

 

3.1. Перечень требований по содержимому и функциям Web-сайта

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

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

Таблица 1-Контент:

Наименование  содержимого	Описание	Тип содержимого	Форма
Фото нескольких кошек(главная  страница)	Несколько кошек сфотографированы вместе	Фото	Jpeg-файл
Статья об истории  кошачьего рода(меню)	История кошачьего рода Фото различных эпох	Текст  Фото	Word-файл  Jpeg-файл
Статья о кошачьих породах	Немного общего о породах	Текст	Word-файл
Ашера	О происхождении породы Ашера	Текст	Word-файл
Фото Ашера	Фото Ашеры	Фото	Jpeg-файл
Бенгальская	О происхождении породы Бенгальская	Текст	Word-файл
Фото Бенгальской породы	Фото Бенгальской породы	Фото	Jpeg-файл
Британская	О происхождении породы Британская	Текст	Word-файл
Фото Британской породы	Фото Британской породы	Фото	Jpeg-файл
Персидская	О происхождении породы Персидская	Текст	Word-файл
Фото Персидской породы	Фото Персидской породы	Фото	Jpeg-файл
Сиамская	О происхождении породы Сиамская	Текст	Word-файл
Фото Сиамской породы	Фото Сиамской породы	Фото	Jpeg-файл
Сибирская	О происхождении породы Сибирская	Текст	Word-файл
Фото Сибирской породы	Фото Сибирской породы	Фото	Jpeg-файл
Сфинкс	О происхождении породы Сфинкс	Текст	Word-файл
Фото породы Сфинкс	Фото породы Сфинкс	Фото	Jpeg-файла
Здоровье кошек	О здоровье кошек	Текст	Word-файл
Уход за кошками	Как правильно ухаживать  за кошкой той или иной породы	Текст  Фото	Word-файл Jpeg-файла
Игры	Игры, развлечения, игрушки  кошек	Текст  Фото	Word-файл  Jpeg-файл
Полезное	Советы	Текст	Word-файл
Выставки	Информация о кошачьих выставках	Текст	Word-файл
Смех	Смешные фото и факты	Текст  Фото	Word-файл  Jpeg-файл
Известные и знаменитые кошки	О кошках, прославившихся в той или иной области	Текст  Фото	Word-файл  Jpeg-файл
Фотогалерея	Фото кошек	Фото	Jpeg-файл
Клички кошек	О кличках кошек	Текст	Word-файл

 

Технические требования: использование HTML,CSS.

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

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

 

 

3.2 Создание рабочего  наброска сайта

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

Основные мысли:

1)  История кошачьего рода;

2)  Породы (с прилегающими фотографиями);

3)  Познавательные  статьи (здоровье кошек, уход за кошками, игры, полезное, клички); 
4)  Прочая информация(выставки, смех, факты о кошках, фотогалерея);

5)  Контактная информация.

 

 
 Рисунок 12 - Блок схема сайта

 

 

 

4. Разработка  набора макетов страниц

 

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

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

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

 

4.1. Определение функциональных зон страниц сайта

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

Правильное использование  гиперссылок является важнейшим  фактором повышения юзабилити сайта. Известный специалист по юзабилити Якоб Нильсен (www.useit.com) утверждает, что навигация сайта должна в любой момент предоставлять посетителю ответы на три вопроса:

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

2)  Где я уже был?

3)  Куда я могу  пойти?

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

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

·  логотип компании, который является ссылкой на стартовую страницу, а также краткое описание сферы деятельности;

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

·  поле поиска по сайту.

 

Классификация элементов  навигации

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

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

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

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

 

Текстовая ссылка как  элемент навигации

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