Міністерство освіти і науки, молоді та спорту України

Національний Технічний Університет України «Київський Політехнічний Інститут»

Навчально-науковий комплекс «Інститут прикладного системного аналізу»

Кафедра системного проектування

МЕТОДИЧНІ ВКАЗІВКИ

до виконання Розрахункової Графічної Роботи з дисципліни

« Комп’ютерна графіка»

для студентів напряму підготовки 6.050101 «Комп'ютерні науки»,

спеціальностей 8.05010102 «Інформаційні технології проектування» та 8.05010103 «Системне проектування» денної та заочної форм навчання

Склав: доц.. к.т.н. Цурін Олег Пилипович

Київ - 2012 р.

3

Методичні вказівки до виконання Розрахункової Графічної Роботи з дисципліни Комп’ютерна графіка для студентів напряму підготовки 6.050101 «Комп'ютерні науки», спеціальностей 8.05010102 «Інформаційні технології проектування» та 8.05010103 «Системне проектування» денної та заочної форм навчання / Укл. Цурін О.П. К. : НТУУ «КПІ», 2012 р. – 35 c.

Рекомендовано Методичною радою НТУУ «КПІ»

Протокол № __ від __.__.201_ р. Укладач: Цурін Олег Пилипович, канд. техн. наук, Відповідальний редактор: А.І. Петренко Рецензент: А.Й.Савицький

4

ВСТУП

Дисципліна «Ком’пютерна графіка» відноситься до циклу професійно

орієнтованих дисциплін і базується на знанні дисциплін: «Вступ в

інформаційні технології», «Теорія алгоритмів».

Основною метою вивчення дисципліни є надання майбутнім фахівцям

основ теоретичних і практичних знань та навичок з базових питань

проектуванню Web-сайтів і Web-додатків, методів і засобів їх розробки,

дослідження та використанню в різних областях науки і техніки.

Задачі виконання Розрахунково Графічних Робіт. Розрахункової

Графічної Роботи надають практичні навички по розробці та практичному

використанню Web-сайтів та Web- порталів..

Після виконання Розрахунково Графічних Робіт студенти повинні:

ЗНАТИ:

- методи та засоби побудови Web-сайтів та Web- порталів

- основні компоненти Web-сайтів для розробки яких використовуються

засоби комп’ютерної графіки;

- основи використання різних технологій для побудови Web-сайтів;

- використання сучасних графічних редакторів при розробці Web-сайтів;

ВМІТИ:

• вибрати метод розробки Web-сайту;

• робити оформлення титульних сторінок Web-сайтів за допомогою

графічних редакторів;

• оптимізувати Web-сторінку для пошукових систем;

ОПАНУВАТИ:

• методи та засоби розробки Web-сайтів

• роботу з поширеними графічними редакторами;

5

;

Тема “Розробка сайтів” по наданій чи вибраній та узгодженій з викладачем

тематиці є актуальною і, як показує 5 річний досвід, надає широкі

можливості для самостійної, творчої роботи студентів.

Надамо умови та основні правила виконання Розрахунково графічної роботи

по курсу “Комп’ютерна графіка”

Теоретичні основи

Web-дизайн як етап розробки

Веб-сайт (веб-вузол) — це сукупність веб-сторінок, доступних в мережі

Інтернет, які об‘єднані між собою за змістом та навігаційно. Всі сайти, які є

вільно доступними через мережу Інтернет, утворюють Всесвітню павутину

World Wide Web — найбільше сховище інформації. Станом на 2011 рік в

Інтернеті було зафіксовано понад 300 мільйонів сайтів.

В багатьох джерелах та побуті вважається, що розробниками Web-сайтів є

Web-дизайнери. Web-дизайн (від англ. Web design), згідно з Векіпедією

(Вільна енціклопедія), є — галузь веб-розробки і різновидність дизайна, в

задачі якого входить проектування веб-інтерфейсів користувачів для сайтів

чи веб-додатків.

Веб-дизайнери проектують логічну структуру веб-сторінок, знаходять

найбільш зручні рішення надання інформації, а також займаються художнім

оформленням веб-проекта. У результаті поєднання двох галузей людської

діяльності гарний веб-дизайнер повинен бути знайомий з останніми веб-

технологіями і мати відповідні художні якості.

Це визначення має суттєві недоліки.

По-перше, нема чіткого визначення місця Web-дизайнера у розробці та

подальшому супроводженні сайтів. Супроводження для сайтів це такий

самий важливий етап як і створення. Сайту без інформаційного наповнення

не існує, а його дає замовник.

6

По-друге, логічну структуру сайту, як і його інформаційне наповнення, теж

задає замовник.

По-третє, подальше існування сайту, його розвиток, його супроводження теж

залежать не тільки від Веб-дизайнера.

І, четверте, сайт може мати певні вразливості (іноді вони мають назву -

"дірки") і їх наявність залежить від кваліфікації Веб-дизайнера, а точніше від

сумісної роботи Веб-дизайнера та Веб-програміста.

Фактично у розробці сайту приймають, чи повинні приймати, участь декілька

спеціалістів різних фахів.

1. Замовник

Замовник володіє інформацією, що розміщується на сайті. Він вміє

структурувати інформацію, виділяти найбільш важливу, зробити її

лінгвістичну перевірку чи доручити зробити цю перевірку відповідним

фахівцям, виділити інформацію, що буде поновлюватись, визначити засоби

online та offline зв'язку. І цей перелік може у кожному конкретному випадку

бути продовжений.

2. Web-дизайнер

Функції Web-дизайнера в основному співпадають з наданим у Вікіпедії

визначенням. Але його треба розглядати як координатора робіт по створенню

сайта. Він повинен опікуватися і про подальше існування розробленого

сайту.

3. Web-програміст

Роль Web-програміста все збільшується в процесі розвитку Web-технологій.

На початку існування Web-сайтів його функції зосереджувались на розробці

скриптів, які розширювали можливості сайтів. При технологіях, коли

генерація сторінок виконується на боці сервера, функції Web-програміста

при розробці Web-сайта вважаються основними. До речі, він є і основним

джерелом наявності вразливостей на сайті, і тим, хто їх може прибирати.

4. Web-художник

7

Ще одним спеціалістом, який може бути залучений до роботи над Web-

сайтом, є Web-художник. Часто без спеціальної освіти та таланту художника

знайти художні рішення не вдається.

5. Менеджер проекту

Звичайно керує роботою менеджер проекту

Для розробки Web-сайту на замовлення ідеальним було б об’єднання

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

по-перше, на використання попередньо розроблених шаблонів (щоб

зменшити необхідність у художниках), по-друге, на використання

розроблених плогінів (щоб зменшити необхідність у програмістах). Але

розробка Web-додатків (“Web-приложений”- російською мовою) виконується

Web-програмістами. Складності полягають і в тому, що Web-дизайнер це

наполовину технічна професія, а Web-програміст – технічна. Якщо

розглянути глибше, то і програміст має в собі декілька рівнів (Ф.Брукс

“Мифический человеко-месяц или как разрабатываются программные

системы“). Все більше значення набуває Web-програміст. Якщо дизайнеру

ще іноді вдається засвоїти програмування з боку клієнта (звичайно

JavaScript), то серверні додатки створюються професійними програмістами

(програмування на мовах РНР і це нижній рівень, а дійсно професійні

програмісти працюють на мовах С++ та Java ).

В деяких публікаціях є висловлювання, що сучасний сайт це програмний

продукт. Якщо сайт і звичайний та простий, але вимагає засоби спілкування,

то вони створюються програмістами. До засобів спілкування чи активних

компонентів відносяться форми, гостьові кгниги, форуми та ін. Можна взяти

стандартну розробку, але фільтрацію інформації для більшості активних

компонентів треба робити. Обумовлено це багатьма причинами і в основному

пов'язано з шумом, який генерує користувач - нецензурна лексика, просте

клацання,образи та інше.

Структура процесу розробки Web-сайту

8

Якщо розглядати Веб-дизайн як Веб-проектування, то загальна структура

процесу розробки може бути представлена у вигляді, наданому на рисунку 1

Рис.1.

Функції замовника та розробників Web-сайту

Розглянемо дещо ширше функції замовника та розробників Web-сайту.

Замовник є однією з найбільш важливих ланок розробки. Він, по-перше,

вирішує задачу обгрунтування необхідності сайту, по-друге, повинен мати

інформаційне наповнення сайту, пропозиції з його структури та графічному

оформленню, і що не менш важливо, так це фінансові ресурси на розробку та

супроводження сайту. Замовник це ланцюг розробки, який приймає чи

повинен приймати участь майже в усіх етапах розробки сайту. Він визначає і

9

назви розділів, і можливе скорочення назв, і першорядні та другорядні

розділи та інше. Якість сайту теж суттєво залежить від замовника. Сайт не

повноцінний, якщо є не повним інформаційне наповнення. Сайт вмирає,

якщо він не супроводжується, а ця функція звичайно лягає на замовника та

його спеціалістів. Фінансує і контролює роботу Web-майстра замовник.

Форма та методи передачі інформації від замовника до розробників сайту

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

ієрархічну графову модель сайту, доцільно використовувати файлову

передачу інформації, що відноситься до кожної "Вершини виконання дій"

При цьому номера вершин можуть співпадати з іменами файлів. Замовник

може використовувати різні текстові процесори (але більшість буде

використовувати WORD, а це при створенні Веб-сторінок накладає деякі

обмеження і додаткові дії).

Технічне Завдання на розробку сайту інтернет-магазину книг «Читаємо

разом»

1. Етапи та терміни СТВОРЕННЯ САЙТУ:

Загальний термін робіт по створенню сайту становить 40 днів:

15 днів - дизайн оригінал-макету, розробка і озвучування флеш-презентації,

верстка статичного шаблону першої та внутрішньої сторінок сайту

25 днів - програмування, підключення адміністраторського модуля, верстка

контенту.

Перелік етапів розробки сайту:

• Розробка концепції сайту, інформаційне проектування, оформлення

Технічного завдання.

• Розробка дизайну сайту.

• Створення працюючого шаблону сайту.

• Програмування та підключення адміністраторського модуля.

• Підготовка, редагування, верстка і налаштування контенту сайту під

пошукові системи.

10

• Публікація сайту на сервері, тестування, прописка в пошукових системах і

каталогах Yandex, Google і інших.

2. ТЕХНОЛОГІЧНІ ВИМОГИ:

2.1. Сайт розробляється під базову розподільчу здатність екрана 800х600 пкс

або 1024x768 пкс (залежно від передбачуваної цільової аудиторії компанії).

2.2. Коректне відображення браузерами Internet Explorer, Opera.

2.3. Використання фірмових кольорів і логотипу магазину.

2.4. Обов'язкова візуальна підтримка дій користувача - «Інтерактив»

(візуальне відображення активних, пасивних посилань; чітке позначення

місцезнаходження користувача). За посиланням з кожної сторінки

завантажується поштова програма (бланк листа для зворотного зв'язку).

2.5. Мета-теги і контент сайту на етапі виготовлення сайту повинні бути

налаштовані для пошукових систем, щоб забезпечити просування сайту за

ключовими словами в пошукових системах Yandex, Google.

3. СТРУКТУРА ТА ОПИС САЙТУ:

3.1. Головна сторінка (обкладинка сайту):

• Містить графічну частину, основну навігацію, а також тематичну область

для того, щоб відвідувач сайту з першої сторінки мав можливість отримати

загальну інформацію про магазин, а також ознайомитися з останніми

надходженнями магазину.

• Тематична область першої сторінки ділиться на розділи:

- «Про магазин» - містить коротку інформацію про магазин.

- «Каталог» - перелік всіх жанрів творів:

• Назва розділу каталогу

• Маленька картинка

• Список книг, які є в розділі каталогу.

3.2. Графічна оболонка внутрішніх сторінок (спільна для всіх підрозділів):

• Графічна шапка

• Навігаційне меню

11

• З правого боку сторінки відображається навігаційна панель у текстовому

вигляді, Copyright, контактний e-mail і посилання на каталог книг.

3.3. Опис розділів сайту:

Сайт ділиться на 2 групи навігації:

1. Загальна інформація.

2. Каталог

Ергономічні обмеження при Web дизайні

Одна з основних функцій Web-дизайнера це створення зручного інтерфейсу

користувача з Web-сайтом. Зручний інтерфейс не можливо зробити без

врахування ергономічних обмежень користувача. Частина ергономічних

обмежень та рекомендацій враховується технічними засобами та

інтерфейсом браузера і Web-дизайнер на них не впливає а просто їх

використовує. До цих обмежень відносяться формат екрана, розташування

засобів керування, смуг прокручування та інші. Але при створенні Web-сайту

багато компонент керування та розміщування інформаційного наповнення

Web-дизайнер робить самостійно і тому розглянемо деякі ергономічні

обмеження та рекомендації.

Обмеження по кількості елементів керування

У 80-і роки дослідження кількості елементів керування, з яким людині

зручно працювати було проведено фірмою ІВМ. У якості елементів

керування розглядалося меню з яким працює користувач у діалоговій

системі.

Експериментально досліджувалась залежність R=F(N) та T=F(N) де R -

ймовірність помилки користувача при обмеженні часу пошуку; T - час

витрачений на пошук необхідного елемента керування; N - кількість

елементів керування. Отримані експериментальні залежності надано на рис.

1.

12

Рис.1. 7 9

Після 7-9 елементів керування (клавіш меню) визначається швидке зростання

і R, і T. Горизонтальна ділянка графіка означає, що при кількості, меншій 7-9

клавіш, користувач не робить зорове сканування і майже не витрачає часу на

пошук та має мінімум помилок. Мала кількість елементів керування не є

оптимальним для користувача і часто викликає роздратування (краще –

дискомфорт) користувача. Обґрунтувати це важко, але треба пам’ятати про

магічне число - 7.

При визначенні клавіш є ще дві проблеми. Перша - це кількість інформації

що закладена у кожну клавішу. Нагадаю, що клавіша задає “Зміст” того, куди

робиться з неї перехід, тобто повинна відповідати Вмісту інформації. Часто

досить важко декількома словами надати відповідність вмісту. Ці питання

краще вирішувати не Web-дизайнеру, а мати консультації із замовником,

який може порадити метод скорочення. Якщо за одиницю взяти одне слово,

то краще не перевищувати 3 слів у одній клавіші. При цьому можуть

виникати і проблеми розташування клавіш у полі екрану. (Рисунок 2)

13

Рис.2

Обмеження по розташуванню елементів керування

На рисунку наведено приклади двох орієнтацій клавіш з різними відстанями

між клавішами. Ці 2 орієнтації широко використовуються при побудові

сайтів. Їх закладено і у розташування клавіш у CMS. Загалом розташування

ДЕФ є більш компактним і цим часто користуються для надання великої

кількості клавіш, але залежність, що надана на рисунку, залишається і в

цьому випадку. Особливо це помітно при випадаючих клавішах.

Цікаво спостерігати вплив відстані між клавішами на сприйняття їх

користувачем. Клавіші створюють єдине інформаційне поле і воно починає

розриватися при відстані більшій ніж половина ширини клавіші у напрямку

їх орієнтації. Так, якщо А,В та Д,Е є прийнятними, то С та Ф неприйнятними

для побудови набору клавіш.

Іноді здається, що мала кількість клавіш для керування, створює сприятливі

умови роботи користувача. Мала кількість клавіш керування, особливо на

14

першому рівні, часто є наслідком поганої структуризації інформації. Часто в

цьому випадку велика кількість клавіш буде на нижніх рівнях. Мала кількість

клавіш керування така ж не прийнятна для сприйняття користувачем як і

велика. Користувача дратує (робить дискомфортним стан) незадіяна зона

екрану в якій він очікував клавіші керування. На жаль прикладів із сайтами у

яких є ця помилка достатньо, наприклад сайт Родовід банку (Рисунок 3).

Рис. 3.

Обмеження по інформаційному наповненню

Інформаційне наповнення кожного розділу повинно бути зручним для

сприйняття. Все залежить від призначення відповідного сайту та розділу. Як

показують дослідження, багато відвідувачів сайтів продивляються лише

першу сторінку і тому багато уваги дизайнера повинно бути зосереджено на

змісті та структурі першої сторінки. Доцільно коротко надати призначення

сайта та його основні новини.

Якщо зміст розділу повністю текстовий, то доцільний обсяг повністю

залежить від зацікавленості користувача, але в більшості випадків після 6-8

тисяч символів з’являється відчуття дискомфорту. Об'єм тексту може бути

збільшено при використанні графічних ілюстрацій.

Якщо сайт навчальний, то можна визначити порцію кожного уроку в

залежності від засвоєння матеріалу середнім учнем без втоми (без

15

дискомфорту). У Сполучених Штатах випускається серія книжок для

вивчення програмних систем під назвою “Ten minute for study” (“Десять

хвилин для навчання”). Пропонується витрачати 10 хвилин для вивчення

певних функцій системи. Подібні книжки було надруковано автором у 1994-

1998 роках (“Вивчаємо та працюємо з ACCESS“, “Працюємо з Internet “, “

Lotus Organizer для секретаря и руководителя” та інші). Особистий досвід

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

кафедри САПР-СП ІПСА НТУУ ”КПІ” з курсу “Технологія комп'ютерної

графіки”, де ставилася задача створення Web-сайтів з уроками по вивченню

програмних систем. Прикладом таких систем можуть бути наступні:

Уроки по вивченню Microsoft Project

http://bug.kpi.ua/stud/work/RGR/bochkarev-MP/index.html ,

Вивчаємо Maya http://bug.kpi.ua/stud/work/RGR/radkevich-

Maya/BABERRR/index.htm ,

Можливості та особливості Apple Macintosh

http://bug.kpi.ua/stud/work/RGR/turash-ckryabincka-apple/mysite/index.html ,

Вивчаємо та працюємо з LabVIEW

http://bug.kpi.ua/stud/work/RGR/LabView/index.html .

Кожний сайт відповідно оформлюється і має титульну сторінку. Прикладом

може бути титульна сторінка «Уроків по вивченню Microsoft Project» .

Після кожних трьох уроків ставиться тест для контролю знань з вивченого

матеріалу. Для цього студентам передається Action Script , вони заповнюють

його питаннями та відповідями і вставляють скрипт у сайт. Після тестування

програма оцінює результати і показує відсоток вірних відповідей. Надається

можливість продивитись вірні відповіді (рис.4, рис.5).

Графіка та текст.

Текст без графіки погано сприймається і виглядає нудно. Для навчальних

матеріалів більше 3-5 сторінок по 2 тисячі символів краще не розміщувати. У

серії книжок для навчання кожний урок (урок був порцією інформації) мав

16

до 10-12 сторінок з копіями екранів та поясненнями до них. Графічна

інформація має різні функції при її використанні.

Розглянемо основні типи графічних зображень на Web-сторінках та їх

характеристики:

• намальовані художниками чи взяті з Інтернету графічні зображення

(титульне оформлення, логотипи, піктограми, банери, та інші мальовані

зображення на сторінці);

• художнє оформлення текстової інформації

• спеціально розроблені шаблони оформлення Web-сторінок

• схеми, графіки, діаграми та інше

• фотозображення;

• анімовані зображення;

• телевізійні фрагменти.

Перш за все відзначимо, що будь яка сторінка має своє титульне оформлення.

До титульної сторінки відноситься одне, на мій погляд обов'язкове правило -

стиль, зображення на сторінці, скрипти, що використовуються, фон та

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

Сторінки кафе, розважальних сайтів, домашні сторінки мають багато

яскравих рухливих зображень, фото, іноді і непристойних, вкрадені з інших

сторінок зображення та інше, що навряд чи Ви будете використовувати для

сайту поважної фірми.

Розробка логотипу, графічне оформлення, створення оригінального банеру є

одними з найбільш творчих операцій при створенні сторінок. Для виконання

цих робіт звичайно залучаються художники, які володіють засобами

комп'ютерної графіки. При роботі художника важливою частиною є

узгодження з замовником мети графічної роботи, побажань замовника по

оформленню та змісту роботи, умов та обмежень. Умови та обмеження це не

тільки розмір зображення та обсяг пам'яті, але й дозволені та недозволені

графічні елементи, це і колір, і яскравість, і шрифти та інше. Звичайно

17

розробка логотипу, банеру та інших графічних елементів це ітераційний

процес.

Рис.4

Рис.5.

18

Тактильна безперервність розглядається як мінімізація змін при роботі

засобів керування. Звичайними засобами керування є миша та клавіатура.

Часові обмеження

Дослідження показали, що при організації ваємодії ефективність роботи

користувача залежить від значення tp. Фірма IBM досліджувала зміни

ефективності роботи користувачів (кваліфікованих і недостатньо

підготовлених) в залежності від часу реакції.

При цьому умови реального часу мали вигляд:

Де ti – час реакції, ТoR – психофізіологічне обмеження на час реакції. Фірма

ІВМ провела дослідження і з'ясувала, що час затримки (дозволений час

реакції) залежить від складнощів того завдання, що виконує система. Для

простих завдань типу натискання на клавішу і отримання реакції Тo1 =0,1-0,2

с. , нескладних завдань, типу обчислення простих функцій, перетворення

зображень на площині Тo2 = 2-3 секунди, а для складних (складних

обчислень, пошуку у базах Тo3 це 20-30 секунд. Якщо виконується

співвідношення, що надано нижче, то вважається, що взаємодія з системою

йде у реальному часі.

Якщо розглядати роботу InterNet, то завдання можуть бути інтерпретовані

наступним чином Тo1- це робота зі сторінкою у браузері, Тo

2 – запит сторінок

по заданій адресі, Тo3 – робота з великими базами та виконання складних

обчислень.

Якщо затримка перевищує обмеження, то користувач відчуває дискомфорт.

Щоб зменшити дискомфорт при виконанні завдання на екрані формуються

деякі рухомі об'єкти (звичайно це полоса, чи різні типи годинників), чи

інформація видається користувачу поступово під час її отримання. Після

дискомфорту йде відмовлення користувача від поточного виконання дій.

Відмова теж залежить від можливості очікування користувачем інформації.

19

Рис.6.

Рис.7.

Колір

1. Психогенний вплив

Вельми показовим випадком психогенного впливу виступає вплив кольору

на психофізіологічний і емоційний стан людини.

Експериментально встановлено, що при дії пурпурного, червоного,

помаранчевого і жовтого кольорів частішає і поглиблюється дихання і пульс

людини, підвищується його артеріальний тиск, а зелений, блакитний, синій і

фіолетовий кольори викликають зворотний ефект. Перша група кольорів є

збудливою, друга заспокійливою.

Людям зі слабкою нервовою системою найчастіше подобаються червоний і

жовтий кольори, з міцними нервами - зелений і синій.

Червоний колір асоціюється з виглядом крові або відблиском вогню і

викликає занепокоєння і тривогу, піднімає активність. Блакитний колір, що

фігурує в спадковій пам'яті як колір неба, викликає урочистий настрій.

20

Чорний колір тотожний мороку і печалі. Білий колір прийнято пов'язувати зі

світлом і чистотою.

Є тісний взаємозв'язок між кольором і звуком. Зелений і фіолетовий

відповідають рівним інтонаціям людського голосу. Певні поєднання кольорів

надають цілком певний емоційний вплив. Наприклад, використання

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

задоволення. У свою чергу, невірна комбінація кольорів сприяє виникненню

неспокою і т. п.

До речі, принцип дії колірних плям можливо використовувати для розробки

деяких видів психотронної зброї.

2. Колір при Web-дизайні

З погляду людської психології поєднання кольорів може в значній мірі

впливати на сприйняття людиною наданої на малюнку інформації. Саме тому

при підборі колірного поєднання, наприклад тексту з фоном, рекомендується

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

читатися, при цьому читач не повинен напружувати зір, його очі не повинні

втомлюватися. Далі приведений перелік колірних поєднань мальованого

об'єкту або тексту з фоном в порядку погіршення зорового сприйняття:

• синє на білому;

• чорне на жовтому;

• зелене на білому;

• чорне на білому;

• зелене на червоному;

• червоне на жовтому;

• червоне на білому;

• померанчеве на чорному;

• чорне на пурпурному;

• помаранчеве на білому;

• червоне на зеленому.

21

Коректність поєднання один з одним решти всіх кольорів і відтінків

перевіряється за допомогою одного простого правила: переведіть ваше

зображення у формат «grayscale» (256 відтінків сірого) і подивіться, чи

читається у такому вигляді ваш текст, чи контрастно виглядають намальовані

елементи. Якщо ні — прийняте вами колірне рішення краще переглянути. У

будь-якому випадку для тексту рекомендується вибирати традиційний,

звичний оку чорний колір, як фон краще всього використовувати тьмяну,

ледве помітну заливку довільного відтінку. Проте найбільш «вірним»

рішенням завжди був і залишається «класичний» варіант: чорним по білому.

Дизайн кольору для WEB

Немає нічого важливішого правильного підбору кольорів для пожвавлення

веб-сторінки.І нічого гіршого неправильних кольорів, які завдають шкоди

вашому контенту

Перше враження про сайт формується у відвідувача протягом перших дев'яти

секунд відвідування? Дуже важливо упевнитися, що колірна схема дизайну

сайту знаходиться у відповідності з контентом і цільовою аудиторією

проекту. Треба прагнути, щоб кольорова схема посилювала виразність сайту,

при цьому не відволікаючи і не вводячи в оману користувачів.

Колірна гамма сторінки дає можливість виділити такі найбільш важливі

частини сторінки як навігаційні елементи, змістовні блоки, акценти,

взаємозв'язку і т.д. З цієї причини, колір - вкрай важливий елемент дизайну

web-сайту.

Для більшості людей колір грає роль підключення їх уваги до об'єкту, або ж

навпаки - відключення уваги від оного. Відвідувачі вашого сайту, чи знають

вони це чи ні, реагують на кольори та інші візуальні елементи на вашому

сайті на несвідомому рівні. Заінтригований (і не збитий з пантелику)

відвідувач сайту, найімовірніше, втягується в мети вашого сайту - чи то тут

можна знайти інформацію, чи то розважитися, або ж тут продаються товари

або послуги.

22

Можна перейти до деяких з найбільш очевидних способів упевнитися, що

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

Кольори висловлюють настрій і індивідуальність вашого сайту

Кольори висловлюють призначення вашого сайту, його мети, і

індивідуальність (також як і тієї компанії, яку він представляє). Щоб

проілюструвати це, розглянемо два варіанти інтерфейсу сайтів роздрібної

торгівлі:

Gap Online - приклад ретельного підбору колірної гамми. Сайт використовує

монохроматічни синьо-сіру палітру, яка є дуже ефективною для виділення

представленої одягу і моделей. Кольори м'які, ненасичені - і весь проект Gap

виглядає і сприймається легко і ненав'язливо. Оцінка: 5

У той час як BigSmart переповнений насиченими, яскравими, контрастними

колірними комбінаціями. Вся ця барвиста мішура відволікає увагу від тієї

інформації, яку вона покликана донести. Всі зображення одягу просто

губляться в загальному візуальному шумі. Оцінка: 2 -

Кольори встановлюють ідентичність

Кольори сайту і логотип компанії повинні доповнювати один одного і

існувати в одній палітрі ... Дизайн сайту повинен бути спроектований щодо

лого так, щоб логотип не стирчав як запалений великий палець. Хорошим

прикладом вищесказаного послужить колірна гармонія між сайтом Beck

Interactive і їх логотипом. Це тим більше важливо, що в 99% випадків

логотип вже містить специфічні фірмові кольори тієї або іншої організації.

Кольорова палітра повинна відповідати змісту сайту

Зміст і колір на сайті повинні гармонійно доповнювати один одного. Давайте

повернемося до Gap Online ще раз: кольори, вибрані для дизайну не

відволікають від процесу отримання інформації, і це також створює дружню

залучає середу.

Кольори в контексті нашої емоційної і культурної дійсності

Web-cайти, які розробляються для глобальної аудиторії, повинні вибирати

кольори для дизайну, грунтуючись на розумінні їх культурного й емоційного

23

значення. Web-дизайнер повинен серйозно поставитися до аналізу символіки

кольору. Наприклад, червоний - колір вогню, пожежі і крові і не асоціюється

зі спокоєм або світом. Зелений капелюх в Китаї сигналізує, що дружина

чоловіка обманює його, але в багатьох інших регіонах (наприклад, в Індії),

зелений колір асоціюється з грошима, процвітанням і благополуччям. Так що

є доцільним довідуватися про колірному і культурному призначення дизайну.

Колір для груп населення

Кольори повинні підбиратися залежно від аудиторії або цільової групи сайту

... "The Meaning of Color" від Natalia Khouw звертає увагу на деякі цікаві

факти, отримані з академічних досліджень про сприйняття кольору різними

групами населення, такі як:

Чоловіки віддають перевагу синій колір червоному, в той час як жінки

навпаки - червоний синього.

Інший приклад - чоловіки віддають перевагу помаранчевий жовтому, тоді як

жінки воліють жовтий помаранчевому.

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

молодої аудиторії більш яскраві кольори, тоді як для старших / дорослих

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

Сполучення різних кольорів

Окремий колір сам по собі може бути дуже кричущим або занадто блідим -

однак він може бути добре обіграний у поєднанні з іншими кольорами.

Поєднання чорного і сірого досить тоскно, але спробуйте додати до них

помаранчевий і вийшла непогана комбінація.

Кольори та їх природні асоціації

Якщо Ви робите звичайний інформаційний портал, типу пошукового

сервера, використовуєте просту, дуже обмежену колірну палітру, яка не має

ніякого специфічного значення.

Деякі загальновідомі колірні значення / асоціації:

Червоний! асоціюється з кров'ю, і з почуттями, які є енергійними,

хвилювання, пристрасті або еротика. Більшість кольорів несе, і позитивні і

24

негативні значення. Зворотний бік червоного викликає агресивні почуття,

викликаючи гнів або насильство.

Помаранчевий! - Колір тіла, або ж теплоти вогню. Позитивні значення цього

кольору пропонують доступність, невимушеність.

Жовтий! - Колір радості, сонячного світла. Цей колір оптимістичний,

піднесений, сучасний. Енергія жовтого може стати переважної. Тому жовтий

- не той колір, який має тенденцію домінувати над модою протягом тривалих

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

теплоту сайту тропічного курорту, проте такий же колір може знищити сайт

юридичної фірми, оскільки додаткове значення жовтого - боягузтво.

Зелений! У його позитивному значенні зелений передбачає натуральні,

природні стану (рослинний світ, ліси), життя, стабільність, спокій,

природність. З іншого боку, зелений в деяких своїх відтінках або в деякому

нетрадиційному контексті (типу зеленої шкіри) може замість цього

асоціюватися з розпадом (грибок, пліснява), токсичністю, штучно.

Синій! пропонує прохолоду, віддаленість, духовність, або, можливо,

стриману елегантність. Деякі відтінки синього приємні чи не кожному. У

його негативному значенні, ми можемо думати про "блюзі" - що може мати

на увазі печаль, пасивність, відчуження, або депресію.

Фіолетовий! - Колір фантазії, грайливості, імпульсивності, і мрійливого

стану. У його негативному як він може асоціюватися з кошмарами або

божевіллям.

Білий колір

Білий колір додає рівновагу між кольорами. Якщо ваш сайт містить багатий

контент (цікаві тексти), робіть ваші веб-сторінки як можна більш простими

для візуального сприйняття, залишайте велику кількість незаповненого

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

Обмежуйте вашу кольорову палітру двома або трьома головними кольорами

(напівтоновими варіаціями) і невеликими акцентами в деяких місцях.

Обмеження кольорів в InterNet взагалі і кольорової палітри графіки зокрема

25

означають менші розміри файлу, більш швидке завантаження і, що найбільш

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

користувачів. У WEB білий - найяскравіший колір, чорний по відношенню

до нього - найбільш контрастний, і червоний забезпечує акцент і відмінно

поєднується з обома

1. Тема РГР береться у викладача чи з ним узгоджується. Категорії тем

можуть бути наступні:

1.1 Особиста (надається технічне завдання викладачем. Як показує досвід

звичайно ТЗ надається студентам, які володіють С++, РНР чи іншими мовами

програмування);

1.2 Сайт уроків по навчанню роботі з програмними системами. Тема може

бути надана викладачем (дивись Додаток 1) чи запропонована студентом;

1.3 Розробка сайту по наданому матеріалу (можливо по конспекту лекцій

викладачів кафедри).

Зауваження. Зверніть увагу на формули та рисунки. Перехід від WORD до

HTML з WORD не проходить (шукайте шляхи і один з них через Front Page ,

який робить з формул малюнки).

2. При підготовці уроків ОБСЯГ: не менше 3 уроків по 4-5 тисяч символів

кожний з ілюстраціями у вигляді копій екранів, імена файлів латиницею;

3. При виконанні робіт по п.1.2 та 1.3 після кожного розділу вставляються

тести (скрипти для тестів може бути взято з

http://moodle.kpi.ua/mod/resource/view.php?id=1092). Кількість питань не

менше 10 , відповідей по кожному питанню 4-5 одна з яких одна вірна;

4. Сайт оформлюється згідно з вимогами та рекомендаціями, що наданою у

багатьох джерелах, як рекомендації по Web-дизайну. Дивись курс лекцій;

5. Забезпечити можливість перегляду на трьох видах браузерів (Explorer,

Mazila, Opera), можливість встановлення під UNIX (відсутність кирилиці та

великих літер);

26

7. Зробити оформлення титульної сторінки на якій обов’язково повинно бути:

<Назва>< прізвища авторів>< група>

Ознайомитися з роботами студентів попередніх років за адресою:

http://bug.kpi.ua/stud/work

Роботи приймаються виключно українською мовою.

Якщо виконана студентом робота уставляється у MOODLE, то після кожного

уроку (модуля, лекції) вставляється тест (якщо потрібно, то інструкцію по

уставленню тестів взяти у викладача)

Деякі рекомендації по написанню уроків:

В основному в уроках розглядається навчання виконання певних функцій

вибраної системи. І тому побудова уроків наступна:

1. Обов’язково надається назва уроку і потім курсивом його зміст (1-2 рядка);

2. Кодування тексту на всіх сторінках сайту в UTF8;

3. У тексті уроку розглядається навчання користувача використанню ряда

функцій системи. Для виконання певної функції системою користувач

повинен виконати наступні дії і далі вони по пунктам 1.,2.,3.,.... надається

послідовність цих дій;

4. Наводяться ілюстрації (рисунки) і в основному це копії екранів

5. Після закінчення уроку пишеться, що розглядалося (2-3 рядка);

6. На Web-сторінці після кожних 3 уроків ставиться тестування і для цього

використовується програма для створення тестів, що отримується у

викладача;

7. Сайт може робитися 2 фреймовий (лівий-назва уроку, правий - текст).

Якщо назва довга, використовується HTML тег Alt.

8. Обов’язоково на сайті повинні бути група та прізвище автора

9. Сайти будуть перевірятися на плагіат

10. ВИКОНАННЯ.

Передавати інформацію можна 3 шляхами:

- По E-mail за адресами: o.tsoorin@kpi.ua , o.tsoorin@gmail.com

27

- Принести в к.130б-7(на носії)

- Розмістити у MOODLE

Спілкування з викладачем можливе у розділі "Новини" за адресою

http://moodle.kpi.ua/ у розділі Комп’ютерна графіка (необхідна попередня

реєстрація - кодове слово для входу видає викладач)

8. Розроблена сторінка розміщується на Сайт http://bug.kpi.ua/stud/work , який

працює під UNIX і тому треба перевірити кодування на сторінці;

9. Робота вважається прийнятою, коли вона розміщена на Сайті

http://bug.kpi.ua/stud/work

Керівник доц. Цурін О.П.

Додаток 1

Теми завдань по РГР

1. Супроводження Web-проекту за допомогою Microsort Project

2. Засоби автоматизації розкручування Web-сайтів

3. Підроблені сайти та методи їх пошуку

4 Методи пошуку плагіату

5. Уроки по вивченню ХML, DHTML та їх особливостей

6. ASP та робота з ним

7. Опис веб-сервісів за допомогою мов розмічування RDF, RDF Schema,

8. Опис веб-сервісів за допомогою мови розмічування OWL, а також

онтології OWL-S

9. Структура та склад онтології OWL-S та визначення семантики сервіса

(IOPE)

10. AJAX, DOM та робота з ними

11. Робота з Maya

12 Відео Монтаж

13 Віртуальна реальність

14 QTVR

28

15 Практика роботи з Q Time

16 Створення особистих Web-сайтів засобами Google

17 Розкручування сайтів наукових журналів у Google Scholar

18 Cloud computing його роль та значення

19 Принципи Cloud computing

20 Роль та значення комп’ютерної графіки у Cloud computing

21 Методичне та програмне забезпечення підняття рейтингів Web-сайтів

(засоби розкручення сайтів - ручні, автоматизовані, автоматичні, вплив

розкручення на рейтинги та інше)

22 Засоби та методи оцінки поновлення Web-сайтів на заданій множині

сайтів. (У нас були оцінки за допомогою обчислення об’єму сайту, але цього

не достатньо)

23 Реалізації функцій Blackboard засобами CMS та плогінами відкритого

доступу

24 Графічні можливості та засоби програмування графіки на мобільних

пристроях Apple

25 . Супроводження та розкручування Web-сайтів на Joomla (реальне

супроводження сайту)

26 Супроводження та розкручування Web-сайтів на Drupal (реальне

супроводження сайту)

27 Супроводження та розкручування Web-сайтів на Word Press (реальне

супроводження сайту)

29 Функції та моливості Parallels Plesk SiteBuilder

30 Інсталяція Parallels Plesk SiteBuilder

31 Робота з Parallels Plesk SiteBuilder під Windows

32 Робота з Parallels Plesk SiteBuilder під UNIX