Автор работы: Пользователь скрыл имя, 13 Октября 2013 в 01:58, курсовая работа
Під час виконання курсової роботі було розроблено статичні та динамічні зображення різних форматів, якими було заповнено сторінки веб-сайту також оформлення веб-сйату здійснювалося за допомогою стилів css , та Java скриптів, які написані спеціально для графічного оформлення сайту. Також для оформлення веб-сайту було використане інформаційне забезпечення та анімаційні зображення у форматі gif , що допомогли розкрити тему веб-сайту. У процесі розробки сайту були використані „Adobe Photoshop СS5” , ,, Adobe Dreamweaver CS4” , Microsoft Office Picture Manager, бібліотеки Jquerry, для створення графічних переходів між зображеннями на сайті.
При розробці логотипу для нашого сайту було вирішено взяти за основу прапор Збройних Сил України, так як будь-який інший символ не підходить до тематики даного сайту, простіше кажучи інші символи не підкреслюють теми сайту, тому не є доцільним їх використання. Логотип було вирішено зробити анімаційним. Процес його створення буде пояснено у п’ятому розділі, який відповідає тематиці анімаційних зображень. Створений логотип представлено на рисунку 4.7.
Рисунок 4.7 – Логотип розробленого сайту
Навігація та перехід між розділами здійснюється з блоку ,, Меню вибору розділів “ , який розташований одразу над логотипом сайту і присутній в усіх розділах сайту, що значно прискорює перехід у потрібні розділи та їх пошук. Логотип сайту теж приймає деяку участь у схемі навігації сайту, так як по натисненню на нього відбувається перехід на стартову сторінку сайту[6]. Сайт має чотири основні розділи, панель переходів міститься на одному суцільному блоці, кнопки для переходів мають білий колір та чітко виділяються на фоні текстурованого блоку переходів. Блок переходів представлений на рисунку 4.8.
Рисунок 4.8 – Меню вибору розділів
Положення цього меню не буде змінюватись при переході на інші сторінки сайту, що значно робить зручнішим і скорочує час на перехід у другий розділ користувача.
Шапка сайту – це малюнок, що займає верхню частину сторінки, в якому найчастіше відображається тематика сайту. Шапка може бути як дуже простою, так і досить складною. Зображення може включати в себе прості графічні елементи, суцільні заливки, текстури або які-небудь візерунки [7]. Найчастіше це використовується на великих порталах. На невеликих сайтах візитках або промо-сайтах шапка може бути великого розміру і займати мало не весь екран. У смисловому ключі шапка сайту несе в собі якийсь образ, який повною мірою повинен відображати тематику сайту і сферу діяльності компанії, представленої на веб сторінках. На розробленому сайті шапка представлена невеликим блоком і на ній написано абревіатуру ,,ЗСУ” ця абревіатура повністю розкриває тематику сайту. Абревіатура розмішується у напівпрозорому елементі, який створено за допомогою графічного редактора ,, Adobe Photoshop CS5”, прозорість була надана за допомогою інструменту Polygonal Lasso, та після виділення певного контура у ,,слоях” елементу один ,,слой” робимо невидимим, такм чином досягаємо прозорості елемента. Створенна шапка відображенна на малюнку 4.9.
Рисунок 4.9 – Шапка сайту
На сьогоднішній день комп’ютерна
графіка займає важливу позицію
у будь-якій сфері діяльності, тому
що її можливо використовувати будь
де починаючи від комп’ютерних ігор
та створення анімаційних
Тривимірна графіка – це розділ комп'ютерної графіки, сукупність прийомів та інструментів, програмних і апаратних, призначених для зображення об'ємних об'єктів.
Був розроблений програмний додаток який створює тривимірні моделі у просторі та може виконувати над ними афінні перетворення. Отже для написання такої програми було обрано мову програмування C++ , так як вона є біль практичною для формування каркасних трьохвимірних моделей. Середовищем написання програми було обрано Microsoft Visual Studion 2008. Отже пояснимо роботу розробленого програмного додатку [8].
Програма демонструє всі випадки афінних перетворень в просторі і кожну проекцію для будь-якого тіла. Дані про тіла програма зчитує з текстових файлів. Перерахуємо проекції, перетворення і фігури.
Проекції :
Перетворення :
Фігури :
Далі розглянемо як залаються фігури к програмі. Для роботи програмі потрібна папка FIGURES в тій же директорії де знаходиться сама програма. Справа в тому, що фігури тіл завантажуються з файлів. Кожна фігура задається двома файлами виду FigureX.txt і FigureXm.txt, де X - номер фігури. У першому файлі знаходяться координати вершин, а в другому матриця суміжності цих вершин [Г]. Файл з координатами виглядає так, він зображений на рисунку 4.10.
Рисунок 4.10 – Файл з координатами
У першому рядку координати першої вершини, у другому рядку координати другої вершини, в третьому рядку координати третьої вершини, в четвертому рядку координати четвертої вершини. Символ (x) в п'ятому рядку – це ознака кінця даних, після нього можна писати свої коментарі. У першому стовпці координата по X, у другому за Y, в третьому за Z. Пояснимо другий файл, який визначає фігуру тобто про файл з матрицею суміжності. Він зображений на рисунку 4.11.
void Rotation(double fix ,double fiy =0,double fiz =0) - обертання навколо осі;
void Dilatation(double x,double y =1,double z =1) - розтягнення, стиснення по осям;
void Reflection(int XOZ , int XOY =1, int YOZ =1) – відображення від площини;
void Transposition(double x , double y =0, double z =0) – переміщення по вектору.
Рисунок 4.11 – Файл з матрицею суміжностей
І в рядках і в стовбцях тут містяться номери тих самих вершин з першого файлу. Найперший нуль означає, що перша вершина з першої ж ніби як і не пов'язана. Тобто, лінію проводити не потрібно. Можна поставити одиницю у відображенні фігури нічого не зміниться [Г]. Також цей файл використовується для тетраедра, і тут можна заповнити все одиницями. Цими строками визначається вершина фігури point center – центр фігури, CFile file – клас роботи з файлами.
Отже у кінцевому результаті
отримуємо такий результат
Рисунок 4.12 – Результат роботи розробленої програми
Анімація (від фр. Animation – це оживлення, одухотворення) – західна назва мультиплікації, також вид кіномистецтва, а також відповідна технологія.
Комп'ютерна анімація – це послідовний показ статичних зображень, заздалегідь підготовлених графічних файлів, а також комп'ютерна імітація руху за допомогою зміни і перемальовування форми об'єктів або показу послідовних зображень з фазами руху.
Анімація – це процес надання здатності рухатися або видимості життя об'єктам і не живим тілам у вигаданих світах художніх творів та іграх жанру фентезі.
Мультиплікація – це технічні прийоми створення ілюзії рухомих зображень, руху або зміни форми об'єктів за допомогою послідовності нерухомих зображень тобто кадрів, що змінюють один одного з деякою частотою. На думку відомого мультиплікатора Федора Хитрука, використання в СРСР термінів ,,мультиплікація”, ,,мультиплікатор” пов'язано з технологією, що використовувалася до впровадження класичної мальованої анімації створенням зображень за допомогою накладання на лист елементів персонажів. За співзвучністю із цим словом нове мистецтво було названо мультиплікацією [9].
При створенні анімації для сайту, використовувався алгоритм створення простої по кадрової анімації, деформуючи та розбиваючи на кадри статичні зображення. Для розробки анімаційних зображень для сайту було обрано графічний редактор ,, Adobe Photoshop CS5 “ , цей графічний є самим оптимальним вибором для створення такого типу анімації. Отже для нашого сайту було створено чотири анімаційних зображення. Пояснимо поетапно створення одного анімаційного зображення, для цього оберемо логотип розробленого сайту так як він є динамічним зображенням, це динамічне зображення можна побачити на рисунку 4.7.
Отже спершу зображення логотипу було статичним. Після імпортування його до обраного нами графічного редактора ми почали необхідні дії для створення анімації. З першу навколо прапора був білий фоновий колір, ми його обрізали за допомогою інструменту ,,магнітне ласо”. Зображено на рисунку 5.1.
Рисунок 5.1 – Видалення білого фонового кольору зображення
Другим етапом стало розбиття зображення на більш ніж тринадцять кадрів, для кожного з яких було задано свій період зміни. Особливо кропітка робота була під час деформації зображення, так як для кожного деформованого сектору зображення потрібен був свій кольоровий відтінок щоб створити ефект руху зображення, тому для кожного деформованого сектора використовував інструмент ,,градієнт”, який змінював кольоровий контраст зображення при його деформації [9]. Це зображено на рисунку 5.2 і 5.3.
Рисунок 5.2 – Робота над зображенням інструментом ,,градієнт”
Рисунок 5.3 – Процес створення анімації
Також у процесі створення анімації було створено близько десяти додаткових ,,слоїв” для зображення, що забезпечить плавну зміну кольору при русі цього елементу сайту.
Отже після усіх необхідних маніпуляцій ми отримали кінцевий результат. Результат зображений як окремим зображенням на рисунку 4.7 так і на рисунку 5.4 де воно ще знаходиться у готовому стані але у графічному редакторі. На рисунку 5.4 зображено вже готове до використання анімаційне зображення, яке було перекодовано з формату psd у формат gif.
Рисунок 5.4 – Готове динамічне зображення
Розроблений сайт пройшов тестування за допомогою браузерів Mozilla Fire Fox, Opera, Google Chrome, Internet Explorer. Проведене тестування у всіх чотирьох браузерах показало, що у браузерах Mozilla Fire Fox, Google Chrome, Internet Explorer спостерігається коректна робота сайту, але у браузері Opera , у деяких його версіях необхідно встановити підтримку певних плагінів які обробляють Javascript файли з допомогою яких працює сайт. Але така проблема могла виникнути через те що сайт тестувався локально без виходу в мережу інтернет, тобто без спеціального серверного програмного забезпечення, яке може обробляє запити браузеру до сайту і за допомогою набору форматів, що ним можуть оброблюватись не викликало у браузера труднощів з роботою Java скриптів.
Рисунок 6.1 – Тестування сайту у Google Chrome
Рисунок 6.2 – Тестування сайту у Opera
Рисунок 6.3 – Тестування сайту у Internet Explorer
Отже проведене тестування показало, що сайт працює коректно, без суттєвих відхилень. Що стосується зміни передачі кольору різними браузерами то ця зміна зовсім не помітна. І ні яким чином не впливає на сприйняття сайту користувачем.
6.1 Аналіз обсягу зображень
В таблиці наведено обсяг зображень на головній та вкладених сторінках.
Таблиця 6.1 – Таблиця аналізу обсягу зображень
Назва зображення |
Об’єм зображення |
Головна сторінка |
2.01 mb |
Flag.gif |
1.72 md |
zsu_emblem.jpg |
106 kb |
bg.jpg |
106 kb |
Вкладені сторінки |
551 kb |
r1.jpg |
84 kb |
r2.jpg |
33 kb |
r3.jpg |
25 kb |
r4.jpg |
26 kb |
r5.jpg |
32 kb |
r6.jpg |
55 kb |
r7.jpg |
80 kb |
r8.jpg |
15 kb |
r9.jpg |
159 kb |
r10.jpg |
42 kb |
Навівши розмір зображень з головної і додаткових сторінок сайту, можна сказати, що вони не мають сильно завантажувати роботу сервера. Тобто якщо розроблений сайт буде розміщено у мережі інтернет, то доступ до ньго буде здійснюватись за одну дві секунди.
Розроблений сайт відповідає усім сучасним вимогам, які виникли в наслідок розвитку багатьох сфер комп’ютерних технологій. Це програмування , до нього відноситься розвиток мови HTML появу такого поняття, як CSS, також написання спеціальних бібліотек з відкритим кодом для створення на сайті різних типів відео переходів та багатьох візуальних ефектів. При застосуванні яких на сайті, безумовно приваблять користувача та будуть його спонукати до того щоб він знову і знову повертався до вашого сайту.