Кафедра Информатики
КУРСОВАЯ РАБОТА
На тему:
Анализатор цветового набора для 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 (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.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 #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] НемнюгинС. А.,Turbo Pascal. – СПб.:Издательство «Питер», 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/