Міністерство освіти і науки, молоді та спорту України Національний Технічний Університет України «Київський Політехнічний Інститут» Навчально-науковий комплекс «Інститут прикладного системного аналізу» Кафедра системного проектування МЕТОДИЧНІ ВКАЗІВКИ до виконання Розрахункової Графічної Роботи з дисципліни « Комп’ютерна графіка» для студентів напряму підготовки 6.050101 «Комп'ютерні науки», спеціальностей 8.05010102 «Інформаційні технології проектування» та 8.05010103 «Системне проектування» денної та заочної форм навчання Склав: доц.. к.т.н. Цурін Олег Пилипович Київ - 2012 р.
27
Embed
МЕТОДИЧНІ ВКАЗІВКИ Комп ютерна графікаcad.edu.kpi.ua/tsoorin/files/2011/05/Методичні...3 Методичні вказівки до виконання
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Міністерство освіти і науки, молоді та спорту України
Національний Технічний Університет України «Київський Політехнічний Інститут»
Навчально-науковий комплекс «Інститут прикладного системного аналізу»
Кафедра системного проектування
МЕТОДИЧНІ ВКАЗІВКИ
до виконання Розрахункової Графічної Роботи з дисципліни
« Комп’ютерна графіка»
для студентів напряму підготовки 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-сайтів з уроками по вивченню
програмних систем. Прикладом таких систем можуть бути наступні: