Кафедра Информатики
КУРСОВАЯ РАБОТА
На тему:
Анализатор цветового набора для
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 СПИСОК ЛИТЕРАТУРЫ
1. Введение
1.1
Описание предметной области
На сегодняшний день подавляющая часть населения «общается» с компьютером: на работе, дома, в различных интернет-кафе, компьютерных клубах и т.д. В большинстве случаях это «общение» происходит с помощью GUI (graphicaluserinterface) – графического пользовательского интерфейса. Интерфейс – способ взаимодействия, передачи информации от одного объекта другому. В любом, более-менее серьезном, программном проекте существует множество интерфейсов (между программными системами, между программой и данными и т.д.), но самый главный
, с точки зрения пользователя (конечного потребителя любой программы), являлся и будет являться – интерфейс программы с пользователем
.
Мало разработать и реализовать программный продукт, надо разработать и реализовать удобный пользовательский интерфейс, большинство пользователей оценивает программу не по ее функциональным возможностям (хотя это тоже немаловажно), а именно по удобству интерфейса: легкость в изучении, в «исследовании», а, впоследствии, легкость и удобство в работе с данной программой. Нередки случаи, когда очень полезный и нужный программный проект проваливался именно из-за непродуманного или плохо реализованного интерфейса с пользователем.
Сейчас огромное распространение получил WEB-интерфейс, так как практически каждый человек имеющий компьютер и телефон может без особых проблем стать пользователем Internet. А в этой глобальной сети реализован и используется именно WEB-интерфейс. Этот интерфейс, а именно пользовательская его часть, т.е. та часть которая представлена пользователю, основан на HTML (HyperTextMarkupLanguage) – языке разметки гипертекста. Этот язык является очень простым и легким для изучения, и соответственно для создания своих собственных 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.2Неформальная постановка задачи
Следуя цели данной программной разработки, необходимо спроектировать и реализовать программу, которая оценивает подбор цвета данной WEB-страницы (которая предоставляется пользователем). Данный программный продукт должен: включать средство анализа готовой HTML-страницы на предмет сочетания используемых в ней цветов. Предоставить пользователю выбор метода подбора цветов из набора наиболее распространенных на данный момент. Предоставлять информацию об основных правилах форматирования при разработке пользовательского интерфейса. В общих чертах система должна предоставлять возможности, указанные на ри
с. 1.
|
Рис1: Диаграмм
а
и
споль
зования
1.3Формальная постановка задачи
Процесс разработки анализирующей системы включает следующие задачи:
1. Изучение, выбор и спецификация параметров html-страницы, по которым будет производиться анализ;
2. Выбор и изучение в необходимом объеме программных средств реализации интерфейса;
3. Разработка проекта системы, включающего в себя следующие пункты:
-структуры внешних данных;
-Разработка Спецификация требований к данной системе;
-Разработка сценария интерфейса;
4. Формирование набора тест
5. Реализация проекта в выбранной среде;
6. Отладка реализованной версии системы;
7. Разработка инструкции пользователю.
2 Требования к окружению
2.1 Требования к аппаратному обеспечению:
- Требования к компьютеру совпадают с требованиями ОС.
- Устройство ввода - мышь, клавиатура.
- Устройство вывода - монитор.
2.2 Требования к программному обеспечению:
- ОС MS-WINDOWS 9x/NT/2000/ХР и более поздние.
2.3 Требования к пользователю:
- Иметь навыки работы в ОС WINDOWS
- Уметь работать с устройством ввода - мышью и клавиатурой.
- Знать русский язык
3.
Архитектура системы (Общие требования)
С точки зрения пользователя система разделяется на следующие подсистемы: анализирующую часть и справочную часть. Анализирующая часть позволяет пользователю проанализировать выбранную им страницу (согласно определенному методу выбора цвета), просмотреть результаты анализа, добавить свой цветовой набор (только для определенного метода анализа). Справочная часть дает возможность пользователю просматривать справочную информацию по вопросам правильного форматирования WEB-страницы (в том числе выбор цвета для её оформления).
4.
Спецификация данных
4.1Описание формата или структуры данных
4.1.1 Формат входного файла
Входной файл (файл подлежащий анализу, документ HTML) выбирается пользователем из числа файлов, существующих на твердом носителе (по умолчанию расширение – htm).
Данная WEB-страница должна удовлетворять следующим требованиям:
-Документ должен быть написан на языке HTML 4.0 и выше;
-Код документа не должен содержать синтаксических (или иных) ошибок, которые могут привести к неправильной интерпретации документа и ошибочных выводов программы;
-Код документа не должен содержать описания стилей (Style) и классов (Class);
-Код документа не должен содержать скриптов (Script) (“javascript” и др.)
-Для наиболее правильного анализа документа желательно не использовать в качестве фона рисунки.
4.1.2 Формат файла базы данных цветов
Данные о цветовых наборах хранятся в отдельном текстовом файле в кодировке Win-1251. Для разделения строк используются символы CRLF. Названием файла является: “col_base.dat”. Пример строки в “col_base.dat”: таблица 1.
Таблица 1: Формат базы данных цветовых комбинаций.
| Идентификатор комбинации
|
Набор цветов в формате
RGB |
| <Combination 1: Cool pastels> | #99cc99 #ffcc00 #99ccff |
Идентификатор комбинации должен содержаться в угловых скобках ( “<”, ”>” ) и включать в себя ключевое слово “Combination”, за этим словом следует порядковый номер комбинации (1..n - integer), через “:” следует название цветовой комбинации.
Через знак пробела следует сам набор цветов в формате: #RRGGBB, где RR – доля красного цвета, GG – доля зеленого, BB – доля синего. Доли каждого из цветов записываются в шестнадцатеричном формате (1..f), строчными латинскими буквами.
Каждая запись начинается с новой строки.
5.
Функциональные требования:
Данный программный продукт должен предоставлять пользователю следующие возможности:
- Выбирать: режим анализа HTML-документа указанного пользователем или режим чтения справочной информации;
- Анализировать выбранный им HTML-документ, при этом система запрашивает у пользователя следующие параметры:
- Имя и местоположение HTML-документа с помощью стандартного Windows интерфейса;
- Название метода подбора цветов, согласно которому будет произведен анализ выбранного документа;
- Указание на автоматическое определение типа предложенного документа.
- Просматривать результат анализа выбранного пользователем HTML-документа, при этом программа должна предоставить пользователю информацию о:
- Ошибках (связанных с набором цвета на данном HTML-документе);
- Недостатках (связанных с набором цвета на данном HTML-документе);
- Наиболее подходящей цветовой гамме, рекомендуемой для данного HTML-документа;
- Целесообразность использования указанного метода анализа с учетом подбора цветовой гаммы данного HTML-документа;
- Статистические сведения по цветовым параметрам, для указанного HTML-документа
- Изучать справочную информацию по ряду вопросов создания эргономичных интерфейсов, в том числе и по правилам выбора цветовой палитры создаваемого интерфейса, в зависимости от предназначения создаваемого интерфейса (в данном случае HTML-документа);
- Добавлять свои цветовые наборы в существующую базу данных, при этом система запрашивает у пользователя следующие параметры:
- Название цветовой гаммы (желательно на английском языке);
- Перечисление всех цветов из вводимого набора в формате RGB. Символ “#”, указывать не требуется (более подробно формат базы данных цветов указан в Таблице 1);
- Сохранять результаты анализа в отдельном текстовом файле, при этом система запрашивает у пользователя следующие параметры:
- Имя файла для сохранения;
- Путь для сохранения.
5 Требования к интерфейсу
Данный программный продукт должен иметь Windows-интерфейс, предоставляющий следующие возможности:
- Переход к анализатору
- Переход к справочной части
- Просмотр результатов анализа
- Возможность выбирать метод подбора цветов
- Возможность сохранения результатов
- Возможность добавления своего набора цветов в базу данных
6 Проект
6.1Модули и алгоритмы
Программа состоит из следующих модулей:
1. Модуля анализатора, реализующего следующие функции:
- Выбор файла (HTML-документа) для анализа
- Анализ файла, в соответствии с выбранным методом
- Просмотр результатов анализа
- Сохранение результатов анализа
- Добавление своего набора цветов в базу данных
2. Справочного модуля, который реализует следующие функции:
- Предоставление справочной информации по выбранной теме
6.2Структура данных
Основной структурой данного проекта является промежуточный файл с именем “tempfile.htm”, который аналогичен входному файлу, но во входном файле все символы латинского алфавита преобразуются в нижний регистр, на одной строке находится только один тег.
Также используются следующие структуры, указанные в Таблице 2:
Таблица 2.
| Имя
|
Тип
|
Комментарий
|
| ColNum | Array [1..20],[1..2] of String | Таблица перевода цвета в формат RGB: “red” - “#ff0000” |
| Resrvd_Words | Array [1..20] of String | Массив ключевых слов языка HTML, отвечающих за цвет на странице. |
| Founds | Array [1..1000] of String | Массив, в котором хранятся все найденные цвета (в формате #RRGGBB) |
6.3Проект интерфейса
В данной системе будет использован следующий проект интерфейса:
Рисунок 2: Проект интерфейса
7 Заключение
Таким образом, в процессе выполнения курсовой работы мною были выполнены следующие поставленные задачи:
- Изучен язык разметки гипертекста HTML
- Изучены основы работы с Delphi.
- Разработан формат файла базы данных цвета.
- Изучены методики подбора цвета для WEB-страниц.
- Собрана, изучена и систематизирована информация о правилах создания эргономичных интерфейсов (в том числе WEB-интерфейсов).
- Разработаны спецификации требований
- Частично реализован редактор и справочная система
В будущем планируется закончить разработку анализатора и справочной системы, расширить базу данных цветовых наборов, увеличить число методов, согласно которым происходит анализ.
Список литературы
[1] Гофман В. Э., Хомненко А. Д. ,Delphi 5. – СПб.: БХВ-Петербург, 2001. – 800 с.: ил.
[2] Карпов Б. ,Delphi: Специальный справочник. – СПб.: Питер, 2002.- 688с.: ил.
[3] Немнюгин С. А.,TurboPascal. – СПб.: Издательство «Питер», 2000. – 496с.: ил.
[4] Петров В.Н.,Информационные системы. – СПб.: Питер, 2002. – 688с.: ил.
[5] Гончаров А., Самоучитель HTML. – СПб.: Питер, 2001. – 240с.:ил.
[6] Минаси М., Графический интерфейс пользователя: секреты проектирования: Пер. С англ. – М.:Мир, 1996. – 160с.:ил.
[7] http://graphicdesign.about.com
[8] http://www.webmascon.com/design
[9] http://www.symbol.ru/dk/articles/color.html
[10] http://www.osp.ru/