Разработка сайта «Каракольский автолюбитель» и размещение его в сети

 

2.2.2 Шрифтовое решение

 

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

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

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

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

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

• Фирменный шрифт. Используется в логотипе. Поскольку это шрифт не имеет широкого распространения на сайте он будет представлен виде картинки.

 

• Verdana, Tahoma, семейство sans-serif. Tahoma - гротеск. Очень хорошо смотрится в полосе и на экране. Гарнитура Verdana является примером шрифта без засечек. Буквы в этом шрифте имеют геометрическую форму, они одинаковой толщины, аккуратные и открытые. Такой шрифт, по мнению психологов, положительно влияют на визуальное восприятие. Шрифты данного семейства являются самыми удобно читаемыми и разборчивыми.

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

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

 

2.2.3 Изготовление графических элементов и их оптимизация

 

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

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

Для декоративного выделение элементов меню в некоторых видах навигации и ссылках использовались изображения стрелок и иконки с изображением флага Великобритании. Они сохранены в формате gif с восьми битным цветом.

Для обработки  графических элементов использовалось следующее программное обеспечение:

• Adobe Photoshop CS3. Один из самых популярных и профессиональных редакторов для работы с растровой графикой. С помощью этого пакета изменялись параметры изображений. Выполнялась их обрезка; убирались дефекты изображения, компоновка макета сайта.
• Corel DRAW X4. Один из самых популярных и профессиональных редакторов для работы с векторной графикой. С помощью этого пакета осуществлялась разработка логотипа, макета сайта.

Одним  из важнейших  элементов на странице является шапка  сайта.

Шапка, представляющая собой статическую и три картинки объединенных в слайд, по задумке автора, должна сразу ввести посетителя в атмосферу сайта. Таким образом, для создания шапки сайта было решено использовать несколько изображений: изображение прямоугольника, с заливкой серого цвета – для фона, изображение автомобильного колеса (рисунок 2.2) и 3 изображения посвященные разделам на сайте (Рисунок 2.3).

Рисунок 2.2 – Изображение флага

 

Рисунок 2.3 – Изображение здания парламента

Работа над шапкой производилась средствами приложения Adobe Photoshop CS3 путем компоновки трех выбранных изображений.

Поскольку основной цвет станиц сайта серый, то шапка монтировалась с использованием оттенка серого цвета.

Технически компоновка осуществлялась путем создания трех слоев, предназначенных для хранения изображений. В самом верхнем слое с фотографией флага был создан эффект прозрачность 60% и выбран режим наложения Darker Color. Благодаря этому получилась цельная картинка Британского флага на синем фоне прямоугольника. Для самого нижнего слоя с изображением парламента созданы настраиваемые слои Levels и HUE, благодаря которым был отрегулирован контраст, яркость, настроен необходимый цвет. После склеивания слоев сохраняем рисунок для Web.

Готовая шапка сайта  представлена на рисунке 2.4

Рисунок 2.4 – Готовая шапка сайта

 

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

2.3 Анализ юзабилити макета

 

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

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

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

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

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

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

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

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

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

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

 

 

3. ПРОИЗВОДСТВО И ТЕСТИРОВАНИЕ

3.1 Формирование файловой структуры

 

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

Изображения, которые используются для верстки, расположены в папках image и images, которые находится в основном каталоге проекта. Здесь собран весь иллюстративный материал, предварительно подготовленный и оптимизиро-ванный под веб-публикацию.

Материалы, предназначенные для скачивания находятся в папке materials. Наиболее удобным форматом для хранения данных файлов является формат программы Microsoft Excel *.xls.

В проекте использовалось программирование на языке Java-Script. Необходимые библиотеки для работы данного языка находятся в папке libs.

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

 

3.2 Описание шаблона сайта

 

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

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

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

 

3.3 Реализация «фиксированной » верстки

 

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

При фиксированной верстке:

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

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

Макет, основанный на фиксированной ширине основного поля является оптимальным для наилучшей читаемости текста.

Исходя из анализа  композиционного решения макета, был выбран двухколончатый вариант верстки на основе элементов «div».

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

В качестве объявления DOCTYPE использовался следующий вариант:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Подключаем таблицу каскадных стилей.

<link rel="stylesheet" type="text/css" href="plus.css"/>

 

4. ОБОСНОВАНИЕ ИСПОЛЬЗОВАНИЯ CMS

 

CMS (Content Management System) - это компьютерное программное обеспечение, предназначенное для упрощения и систематизации совместного создания документов и контента. Чаще всего, CMS – это веб приложение, служащее для управления веб сайтами и их содержимым. Преимущества, которые дает использование CMS:

• Абстрагирование от оформления, человек работает только н<span class="dash041e_0431_044b_0447_043d_044b_0439__Char" style=" font-size: 14pt;