Аналізатор колірного набору для WEB-сторінки

[ виправити ] текст може містити помилки, будь ласка перевіряйте перш ніж використовувати.

скачати

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

Курсова робота

На тему:

Аналізатор колірного набору для 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. Неформальна постановка задачі

Дотримуючись мети даної програмної розробки, необхідно спроектувати і реалізувати програму, яка оцінює підбір кольору даної WEB-сторінки (яка надається користувачем). Даний програмний продукт повинен: включати засіб аналізу готової HTML-сторінки на предмет поєднання використовуваних в ній кольорів. Надати користувачеві вибір методу підбору кольорів з набору найбільш поширених на даний момент. Надавати інформацію про основні правила форматування при розробці користувальницького інтерфейсу. У загальних рисах система повинна надавати можливості, зазначені на рис. 1.





Рис1: Діаграма використання

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

Процес розробки аналізуючої системи включає наступні завдання:

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

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

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

  • структури зовнішніх даних;

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

  • Розробка сценарію інтерфейсу;

  1. Формування набору тестів;

  2. Реалізація проекту в вибраному середовищі;

  3. Налагодження реалізованої версії системи;

  4. Розробка інструкції користувачеві.

  1. Вимоги до оточення

    1. Вимоги до апаратного забезпечення:

  • Вимоги до комп'ютера збігаються з вимогами ОС.

  • Пристрій введення - миша, клавіатура.

  • Пристрій виведення - монітор.

    1. Вимоги до програмного забезпечення:

  • ОС MS - WINDOWS 9 x / 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.

Таблиця 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);

  • Зберігати результати аналізу в окремому текстовому файлі, при цьому система запитує у користувача наступні параметри:

  • Ім'я файлу для збереження;

  • Шлях для збереження.

  1. Вимоги до інтерфейсу

Даний програмний продукт повинен мати Windows-інтерфейс, що надає наступні можливості:

  • Перехід до аналізатора

  • Перехід до довідкової частини

  • Перегляд результатів аналізу

  • Можливість вибирати метод підбору кольорів

  • Можливість збереження результатів

  • Можливість додавання свого набору квітів у базу даних

  1. Проект

    1. Модулі та алгоритми

Програма складається з наступних модулів:

1. Модуля аналізатора, що реалізує наступні функції:

  • Вибір файлу (HTML-документа) для аналізу

  • Аналіз файлу, відповідно до обраного методу

  • Перегляд результатів аналізу

  • Збереження результатів аналізу

  • Додавання свого набору квітів у базу даних

2. Довідкового модуля, який реалізує наступні функції:

  • Надання довідкової інформації з обраної теми

    1. Структура даних

Основною структурою даного проекту є проміжний файл з ім'ям "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)

    1. Проект інтерфейсу

У даній системі буде використаний наступний проект інтерфейсу:









Малюнок 2: Проект інтерфейсу

  1. Висновок

Таким чином, в процесі виконання курсової роботи мною були виконані наступні поставлені задачі:

  • Вивчено мову розмітки гіпертексту 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/

Посилання (links):
  • http://graphicdesign.about.com/
  • http://www.webmascon.com/design
  • http://www.symbol.ru/dk/articles/color.html
  • http://www.osp.ru/publish/1998/05-06/59.htm
  • Додати в блог або на сайт

    Цей текст може містити помилки.

    Програмування, комп'ютери, інформатика і кібернетика | Курсова
    52.1кб. | скачати


    Схожі роботи:
    Створення web-сторінки
    Створення простої web-сторінки
    Створення простої web сторінки
    Web-Дизайн і програми для створення web-сторінок
    Організаційно-методичні особливості відбору та набору дітей для занять спортивною гімнастикою
    Організаційно-методичні особливості відбору та набору дітей для занять спортивною гімнастикою
    Використання пакету Web - Oracle-Web WOW
    Створення інтерактивних WEB - сторінок для отримання інформації в мережі Інтернет з використанням
    Створення інтерактивних WEB сторінок для отримання інформації в мережі Інтернет з використанням форм
    © Усі права захищені
    написати до нас