Web-разработка

Отже, зробимо висновок, що вибір структурної схеми сайту та розміщення елементів є доцільним для розробки сайту.

 

 

3 РОЗРОБКА ІНФОРМАЦІЙНОГО ЗАБЕЗПЕЧЕННЯ  САЙТУ

 

Інформаційне забезпечення сайту – це невід'ємна складова підтримки сайту. 
Для ефективної роботи сайту потрібен постійний його розвиток і оновлення, яке досягається інформаційним забезпеченням сайту в комплексі з іншими методами підтримки, сайту. Інформаційне забезпечення сайту — це забезпечення його актуальною свіжою інформацією, ведення новинних сторінок, періодичної розсилки з інформацією про його оновлення, створення форумів, блогів, FAQ розділів та інших інтерактивних систем, які привертають увагу відвідувачів, дає їм цікаву та актуальну інформацію та спонукає повертатися на сайт [2].

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

Отже, використовуючи лише інформацію доступну для всіх, ми все одно зможемо розкрити тему даної курсової роботи у повному обсязі.   При відкритті сайту потрапляємо на головну його сторінку , де розміщена коротка інформація про історю українського війська , також є можливість прочитати повну історію , так як на цій сторінці міститься кнопка при натисканні на яку буде здійснений перехід на сторінку з повною історією створення української армії. Також у верхній частині сторінки знаходиться логотип сайту, це емблема Збройних Сил України, яка у повній мірі говорить за тематику сайту. З головної сторінки можливо здійснити перехід у той роздій сайту який зацікавить користувача. Також у додатковому блоці буде можливість проглядати події які трапилися у армії, тобто цей додатковий блок відіграє роль стрічки з новинами. Також сайт включає в себе не менш важливі підрозділи, які знаходяться у кожному з основних розділів сайту. У цих підрозділах міститься інформація про самі зразки озброєння, які знаходяться на озброєнні діючої української армії, самі ці підрозділи ставлять остаточну крапку у розкритті теми сайту. Для того щоб повністю розкрити тему сайту, було створено статті у яких міститься інформація починаючи з історії армії України і завершуючи детальним описом та зображеннями зразків озброєння. Також на сайті присутній розділ ,, Галерея “ де представлені зображення зразків діючого озброєння, перегляд їх відбувається за допомогою створеного для сайту слайдера з графічним переходом. При відборі інформації, а саме текстової інформації, було прийняте рішення помістити досить великий об’єм інформації на окремій сторінці, а основну статтю розмістити на головній сторінці. Тобто, таким чином буде досягнено не загромадження головної сторінки зайвою текстовою інформацією статті, при цьому не втративши розкриття головної теми цієї статті. Доступ до повної інформації забезпечили через окрему сторінку, яка викликається при натисненні на відповідну кнопку на сторінці. Щоб статті не були суцільним текстом було їх оформлено графічними додатками, до яких входили статичні та анімаційні зображення.

Головним інформаційним  ресурсом розробленого веб-сайту став сайт Міністерства оборони України, та “Біла книга – 2012. Збройні Сили України” . Інформація на сторінках сайту розміщена поблоково, тобто кожний блок сайту на одній сторінці містить відповідну йому інформацію. Це є зручним для користувача, так як є можливість вибрати інформацію того розділу у якому зацікавлений користувач затративши на це мінімальну кількість часу.

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

4 РОЗРОБКА ГРАФІЧНОГО ЗАБЕЗПЕЧЕННЯ  САЙТУ

 

Розробка графічної частини  сайту є дуже важливим етапом у  його створенні, так як користувач зпершу оцінює сайт за його графічним оформленням, а потім починає ознайомлюватись з текстовою інформацією веб-сайту. 99% усіх сайтів що розміщені у мережі Інтернет мостять графічну інформацію, яка супроводжує текстову. На деяких сайтах саме графічний контент на 80% розкриває його тему з мінімальною кількістю текстової інформації розміщеної на ньому, що приваблює користувачів. Графічне оформлення сайту потрібно використовувати тому що інколи просто зручніше все описати одним або декількома зображеннями. При застосуванні графічного контенту необхідно чітко усвідомлювати поєднання та синхронізацію графіки з текстом щоб графічний контент був розміщений доцільно.

4.1 Вибір колірної гами

 

Розміщуючи на веб-сторінці графічні зображення та оформлюючи її фон, потрібно чітко розуміти та знати  правила зіставлення кольорів. Тому що деякі кольори мають властивість  міняти свій відтінок при зіставленні  його з іншим кольором чи викликати напруження зору, прикладом цього може бути текст жовтого кольору на білому фоні. Також необхідно розуміти що кольорове оформлення сайту має відповідати його тематиці, тобто повинне бути гармонійне поєднання кольорів [2]. Отже, для початку важливо обрати основний колір сайту, так як сайт у нас на військову тематику, то при виборі для нього основного кольору ми не стали зупинятися на якомусь одному, ідеальним фоновим зображенням для сайту став ,,захисний” колір, який називається деформуючим. Є таке поняття як деформуюче фарбування. Це багатокольоровий малюнок з кольоровими плямами різної форми. Таким чином основній колір сайту сформований із двох основних кольорів, а саме зеленого і його відтінків та коричневого. Пояснимо як ці кольори будуть сприйматися людиною.

Зелений колір символізує природу, здоров'я, свіжість, спокій, медицину. Сприяє розслабленню, тонізує і заспокоює. Зелений - це колір новачків. У великій  кількості може викликати відчуття млявості і одноманітності.

Коричневий може означати дружбу, заходи, події, землю, шоколад, матеріалізм, надійність, світ, продуктивність праці, практику, важку працю. З негативу – брудний, і нудний [3].

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

Кольорова модель RGB – це найбільш поширена в веб-дизайні  модель. Абревіатура RGB означає назви  трьох кольорів: Red (червоний), Green (зелений), Blue (синій). Його вихідним кольором є  чорний , екран монітора. Всі інші кольори на ньому виходять шляхом комбінації трьох кольорів, які у  своїй суміші повинні утворити білий  колір [3]. У HTML документах кольори задаються символами від 00 до FF в шістнадцятковому коді перед якими ставиться символ #. Схема кольорової моделі зображена на рисунку 4.1.

 

 

 

Рисунок 4.1 – Кольорова  модель RGB

 

Кольорова модель CMYK. Ця модель характерна для поліграфії та друку. Абревіатура CMYK означає назви чотирьох кольорів: Cyan (блакитний), Magenta (пурпурний), Yellow (жовтий), Key (чорний). Його вихідним кольором є білий (аркуш паперу). Всі інші кольори на ньому виходять шляхом комбінації трьох кольорів, які у своїй суміші повинні  утворити чорний колір. Оскільки модель RGB охоплює більший колірний діапазон, ніж модель CMYK, то всі зображення, призначені для друку і поліграфії, повинні бути переведені з системи RGB в CMYK . Так, створюючи логотип для  сайту, використовується одна система (RGB). А для друку візиток і  фірмових бланків, використовується CMYK модель. Схема кольорової моделі зображена  на рисунку 4.2.

 

 

Рисунок 4.2 – Кольорова  модель CMYK

 

Також при кольоровому  оформленні сайту дизайнери використовують палітру кольорів. Як правило, дизайнери  користуються традиційним колірним кругом для визначення кольорової палітри  для сайту. Колірний круг з 12 кольорів був винайдений Ісааком Ньютоном ще в 1666 році. Існує ряд колірних комбінацій, обираних за допомогою  кола, які практично завжди виглядають гармонійно. У такій палітрі використовується тільки один колір, але з різними  значеннями насиченості і яскравості. Такі схеми акуратні і діють заспокійливо [3].

 

Рисунок 4.3 – Стандартна кольорова  палітра

 

 

Рисунок 4.4 – Приклад різної насиченості  кольору

 

Окрім цієї палітри існує ще шість різних видів палітр для поєднання кольорів. Що стоcується тексту, то він повинен виділятись з основної палітри кольорів сайту, але не бути дуже яскравим. Тобто колір фону і тексту повинні бути контрастними.

Чим контрастніше текст  тим він краще сприймається. Важливо  вибирати кольори, які забезпечать  хороший контраст між текстом, зображеннями і фоном. Наприклад, кольори, найбільш зручні для читання – це чорний і білий або білий та чорний. А ось оранжевий текст на коричневому тлі недостатньо контрастний, і швидше за все, створить незручності для читачів. Для нашого сайту, оптимальним варіантом є захисний колір з деформуючим фарбуванням. Колір тексту ми обрали світло сірий який міститься у напівпрозорому чорному фоні. Колір тексту таким чином не є сильно яскравим який напружує зір при читанні і не зливається з основним фоновим кольором. Також при виборі кольору було обрано комплементарну палітру, яка використовує два контрастні кольори, тобто це зелений і всі його відтінки та коричневий [3]. Це зображено на рисунку 4.5.

 

 

Рисунок 4.5 – Комплементарна палітра

 

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

4.2 Розробка статичних зображень

 

При додаванні  статичних зображень на сайт потрібно підбирати їх таким чином щоб вони компонували з кольоровим оформленням сайту, тобто так щоб зображення не дуже різко виділялося своїм кольором та той самий час не зливалося з фоновим кольором сайту. Зображення повинні відповідати тематиці розділу у який вони додані на сайт і водночас не відходили від основної тематики веб-сайту. Також існує такий критерій як вага зображення, тобто чим більше воно буде у розмірі тим його інформаційна вага буде більша. Для зменшення ваги фотографій був використаний Microsoft Office Picture Manager, який дозволяе зменшити вагу фотографії з 6 мб до 30 кб , за допомогою спеціальної функції для підготовки фотографії для використання у веб-ресурсах. Таким чином ми зменшили час відгуку сайту при відкритті його користувачем, звісно вага фотографій буде відігравати негативну роль якщо сайт буде розміщенний на сервері, а при роботі сайту з локального хоста це не впливає на швидкість його роботи, так як запити до нього не оброблюються веб-сервером. 

На сайт додані зображення з форматом jpg, gif ці формати  найоптимальніше підходять до розміщення на веб-сатйі до тогож ще й оброблені  у  Microsoft Office Picture Manager. Усі статичні зображення на сайті мають рамку по контуру, і таким чином усі статичні зображення мають свою чітку границю і не зливаються з основним кольоровим фоном сайту. Приклад такого зображення наведено на малюнку 4.6, статичні зображення рисунок 4.7 і 4.8. Це зображення було оброблено у графічному редакторі Adobe Photoshop CS 5 , з допомогою необхідного пензля ми відредагували зображення та в результаті отримали блакитну рамку.

 

 

Рисунок 4.6 – Статичне зображення з рамкою

 

         

 

Рисунок 4.7 – Статичне зображення з рамкою

Рисунок 4.8 – Статичне зображення з рамкою

Також статичні зображення на веб-сайті у більшості розділів мають функцію графічного переходу між ними при перегляді, такий  візуальний ефект створений за допомогою  спеціальних Java скриптів у бібліотеці jQuery [4]. На сайті у окремому розділі розроблена галерея із створеним у ній сладйдером, з відео переходом при перегляді зображень. 

4.2.1 Розробка логотипу

 

Логотип – це найважливіший елемент іміджу компанії. Він служить, в першу чергу, для ідентифікації компанії на ринку. Логотипи з'явилися для того, щоб відрізняти продукцію різних фірм в рамках однієї галузі. Зареєстрована торгова марка захищає компанію від недобросовісної конкуренції і дозволяє захистити її права в суді. У сприйнятті споживача наявність логотипу або товарного знака фірми, що має усталену репутацію, є гарантією якості товару [4].

Отже з описання терміну  логотип видно, що в першу чергу  він є ідентифікатором компанії , у нашому випадку сайту, та відрізняє  її від інших. До створення логотипу потрібно підійти з не меншою серйозністю  ніж до вибору кольорової гами сайту. При створенні логотипу сайту  потрібно притримуватись таких критеріїв  :

• індивідуальність – це властивість дозволяє виділитися на ринку і стати конкурентно-здатним, що є основним при розробці логотипу, емблеми і забезпечує можливість реєстрації знака, а також його подальше використання без порушення прав інших суб'єктів господарювання;
• функціональність ;
• асоціативність як властивість товарного знака позначає присутність зв'язків, асоціацій між товарним знаком і особливостями товару, що ним маркується [5].