Описання програмного продукту

4.1Структура сторінки сайту

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

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

Блок основного контенту розташовується в центральній зоні сторінки. Тут буде знаходиться інформація. Основна увага користувача буде залучено саме до цього місця. (рисунок 4.1).

Рисунок 4.1 - Макет головної сторінки сайту

(а - логотип; б – навігація; в – слайдер; г – основна частина; д – футер)

4.2 Структура сайту

Зміст сайту складається з текстової інформації (унікальний контент), що є зручним для SEO оптимізації та подальшої розкрути сайту.

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

а) галерея;

б) форма закачки на сайт;

в) служба підтримки;

г) зворотній зв'язок;

д) гугл карта.

4.3Формування файлової структури

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

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

У проекті використовувалося програмування мовою Java Script. Необхідні бібліотеки для роботи даної мови знаходяться в папці js. Таким чином, вся файлова структура сайту робить проект більш гнучким до модифікації будь-яких файлів або зображень. Така організація дозволяє швидко і якісно організувати роботу, як з функціональними файлами, так і з графічним матеріалом, вчасно знаходити й усувати помилки та вносити корективи (рисунок 2.4).

Рисунок 2.4 – Файлова структура сайту

4.4 Опис шаблону сайту

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

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

- логотип;

- навігація;

- футер (нижня частина сайту);

- фони сайту.

На рисунку 2.5 можна побачити як буде виглядати шаблон сторінки.

Рисунок 2.5 - Схема шаблону сайту

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

4.5 Реалізація фіксованої верстки

Для створення сайту виділяють 3 види верстання: фіксована, резинова, гібридна.

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

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

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

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

При реалізації фіксованого верстання:

- немає необхідності виставляти максимальну і мінімальну ширину макету;

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

Виходячи з аналізу макета, був обраний варіант верстання на основі елементів div. Таблиці каскадних стилів CSS були винесені в окремий файл під назвою style.css та два стилі сайту, світлий light.css, темний dark.css.

4.6Результати роботи програми

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

Дата добавления: 2015-07-15