Кафедра Информатики

КУРСОВАЯ РАБОТА

На тему:

Анализатор цветового набора для WEB-страницы

Владивосток, 2008

Содержание

1. ВВЕДЕНИЕ

1.1. ОПИСАНИЕ ПРЕДМЕТНОЙ ОБЛАСТИ 3

1.2 НЕФОРМАЛЬНАЯ ПОСТАНОВКА ЗАДАЧИ 4

1.3 ФОРМАЛЬНАЯ ПОСТАНОВКА ЗАДАЧИ

2 ТРЕБОВАНИЯ К ОКРУЖЕНИЮ

2.1 ТРЕБОВАНИЯ К АППАРАТНОМУ ОБЕСПЕЧЕНИЮ:

2.2 ТРЕБОВАНИЯ К ПРОГРАММНОМУ ОБЕСПЕЧЕНИЮ:

2.3 ТРЕБОВАНИЯ К ПОЛЬЗОВАТЕЛЮ:

3. АРХИТЕКТУРА СИСТЕМЫ (ОБЩИЕ ТРЕБОВАНИЯ)

4. СПЕЦИФИКАЦИЯ ДАННЫХ

4.1 ОПИСАНИЕ ФОРМАТА ИЛИ СТРУКТУРЫ ДАННЫХ

5 ФУНКЦИОНАЛЬНЫЕ ТРЕБОВАНИЯ:

6 ТРЕБОВАНИЯ К ИНТЕРФЕЙСУ

7 ПРОЕКТ

7.1 МОДУЛИ И АЛГОРИТМЫ

7.2 СТРУКТУРА ДАННЫХ

7.3 ПРОЕКТ ИНТЕРФЕЙСА

8 ЗАКЛЮЧЕНИЕ

9 СПИСОК ЛИТЕРАТУРЫ

2. Введение

1. 1.1 Описание предметной области

На сегодняшний день подавляющая часть населения «общается» с компьютером: на работе, дома, в различных интернет-кафе, компьютерных клубах и т.д. В большинстве случаях это «общение» происходит с помощью GUI (graphical user interface) – графического пользовательского интерфейса. Интерфейс – способ взаимодействия, передачи информации от одного объекта другому. В любом, более-менее серьезном, программном проекте существует множество интерфейсов (между программными системами, между программой и данными и т.д.), но самый главный, с точки зрения пользователя (конечного потребителя любой программы), являлся и будет являться – интерфейс программы с пользователем.

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

Сейчас огромное распространение получил WEB-интерфейс, так как практически каждый человек имеющий компьютер и телефон может без особых проблем стать пользователем Internet. А в этой глобальной сети реализован и используется именно WEB-интерфейс. Этот интерфейс, а именно пользовательская его часть, т.е. та часть которая представлена пользователю, основан на HTML (HyperText Markup Language) – языке разметки гипертекста. Этот язык является очень простым и легким для изучения, и соответственно для создания своих собственных WEB-страниц.

В настоящее время существует огромное количество средств, для разработки различных интерфейсов (не только WEB-интерфейсов), эти средства являются легкодоступными. Следовательно, практически любой пользователь компьютера может, без особых проблем и усилий, разработать и представить интерфейс, который он сам придумал и создал. Достаточно просто создаются интерфейсы для ОС MS-Windows, используя визуальные языки программирования, немного сложнее разработать и реализовать графический интерфейс под ОС MS-DOS. Общедоступными являются средства для разработки пользовательских WEB-интерфейсов для Internet (редактор Web-страниц встроен даже в MS-Word, который установлен практически на любом компьютере с ОС MS-Windows), а отсюда простой вывод – каждый, у кого есть компьютер и хоть немного желания, может создать Internet страничку.

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

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

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

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

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

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

1. Метод подбора цветов с помощью цветового круга. Суть данного метода заключается в том, что цвета подбираются по цветовому кругу Рис 3:

Рис 3.

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

Рис. С: На цветовом круге существует четыре возможных триады цветов

Но триадами не стоит ограничиваться. Можно выбрать и комплиментарные (complementary) цвета, т.е. те цвета, которые расположены в круге прямо напротив друг друга - например, красный и зеленый. Они называются комплиментарными/дополняющими потому, что будучи помещенными рядом, они делают друг друга ярче и живее, см. рис. D.

Рис. D.: цвета, противоположные друг другу на круге называются комплиментарными/дополняющими

Различные варианты

На этом этапе мы уже можем приступить к более сложным комбинациям. Например, можно взять две пары комплиментарных цветов, что называется "двойной комплемент" (double complement). Скажем, желтый и пурпурный/лиловый, и синий и оранжевый. Другой схемой является альтернативный комплемент (alternate complement), когда комбинируется триада цветов с цветом, комплиментарным одному из цветов триады. Зеленый, красно-пурпурный, красный и оранжевый - пример такой комбинации. Также существует "расщепленный комплемент" (split complement), когда берется цвет, его комплиментарный цвет и два прилегающих к нему цвета.

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

Рис. Е.: эти схемы вдохнут жизнь в любой Web-сайт

1. Неформальная постановка задачи

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

«Пользователь»

Рис1: Диаграмма использования

1. Формальная постановка задачи

Процесс разработки анализирующей системы включает следующие задачи:

1. Изучение, выбор и спецификация параметров html-страницы, по которым будет производиться анализ;

2. Выбор и изучение в необходимом объеме программных средств реализации интерфейса;

3. Разработка проекта системы, включающего в себя следующие пункты:

• структуры внешних данных;

• Разработка Спецификация требований к данной системе;

• Разработка сценария интерфейса;

1. Формирование набора тестов;

2. Реализация проекта в выбранной среде;

3. Отладка реализованной версии системы;

4. Разработка инструкции пользователю.

2. Требования к окружению

1. Требования к аппаратному обеспечению:

• Требования к компьютеру совпадают с требованиями ОС.

• Устройство ввода - мышь, клавиатура.

• Устройство вывода - монитор.

1. Требования к программному обеспечению:

• ОС MS-WINDOWS 9x/NT/2000/ХР и более поздние.

1. Требования к пользователю:

• Иметь навыки работы в ОС WINDOWS

• Уметь работать с устройством ввода - мышью и клавиатурой.

• Знать русский язык

3. Архитектура системы (Общие требования)

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

4. Спецификация данных

1. Описание формата или структуры данных

1. Формат входного файла

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

Данная WEB-страница должна удовлетворять следующим требованиям:

• Документ должен быть написан на языке HTML 4.0 и выше;

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

• Код документа не должен содержать описания стилей (Style) и классов (Class);

• Код документа не должен содержать скриптов (Script) (“javascript” и др.)

• Для наиболее правильного анализа документа желательно не использовать в качестве фона рисунки.

1. Формат файла базы данных цветов

Данные о цветовых наборах хранятся в отдельном текстовом файле в кодировке Win-1251. Для разделения строк используются символы CRLF. Названием файла является: “col_base.dat”. Пример строки в “col_base.dat”: таблица 1.