UML-діаграма сайту ЄвроТрансПошта описує процедуру замовлення посуги і її доставка.

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

Також на UML-діаграмі зображено оператора сайту, який має ряд функцій, які виконує під час адміністрування сайту. А саме:

- доступ до сайту;

- доступ в панель адміністрування;

- надання консультації клієнту;

- отримування даних про замовлення та оплату послуги;

- інформування перевізника, про нове замовлення.

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

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

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

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

1.11 Структура інтерфейсу веб-сайту

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

Сайтом також називають вузол мережі Інтернет, комп'ютер, за яким закріплена унікальна ІР-адреса, і взагалі будь-який об'єкт в Інтернеті, за яким закріплена адреса, що ідентифікує його в мережі (FTP-site, WWW-site тощо).

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

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

Веб-сторінка (англ. Web-page) -- інформаційний ресурс доступний в мережі World Wide Web, який можна переглянути у веб-браузері. Зазвичай, інформація веб-сторінки записана в форматі HTML, XHTML, або рідше wml (для wap-сторінок).

HTML -- Мова розмітки гіпертекстових документів. Cтандартна мова розмітки веб-сторінок в Інтернеті. Більшість веб-сторінок створюються за допомогою мови HTML (або XHTML). Документ HTML оброблюється браузером та відтворюється на екрані у звичному для людини вигляді.

HTML є похідною мовою від SGML, успадкувавши від неї визначення типу документу та ідеологію структурної розмітки тексту.

HTML разом із каскадними таблицями стилів та вбудованими скриптами -- це три основні технології побудови веб-сторінок.

Типовий Web-документ складається з текстових блоків, рисунків, таблиць, ліній, гіперпосилань. Більш складні Web-документи містять фрейми (вкладені Web-сторінки), елементи керування та вводу інформації(кнопки, перемикачі, поля вводу тексту), динамічні об'єкти (Java Applet, Java Script, ActiveX).

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

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

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

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

Графічний варіант представлення системи навігації є, мабуть, найбільш розповсюдженим в Інтернеті. Воно зрозуміло: сучасні графічні редактори укупі з усілякими надбудовами (plug-іns), ефектами і фільтрами здатні створювати приголомшливі зразки оформлювальних рішень. Застосування фотографічних зображень, малюнків, а також анімації залучило величезну кількість Web-дизайнерів, що віддали перевагу візуальній привабливості.

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

Усього можна виділити чотири блоки інформації. Розглянемо кожний з них:

1. "шапка" - займає верхню частину сайта у вікні браузера (як правило, не більше 1/4 видимої частини екрана без прокручування) і може містити:

- логотип;

- салоган;

- гасла;

- девізи;

- рекламну інформацію (банери і текстові блоки) та ін.;

2. Меню навігації - воно може бути вертикальним, горизонтальним, містити підменю і та інші компоненти.

3. Основна частина - тут відображається основна і сама головна складова будь-якого Web-сайта - інформація: новини і каталог продукції, контактні дані і гостьова книга.

4. "Підвал" - нижня частина сайта у вікні браузера, не є обов'язковим блоком, він лише підкреслює чітку структуру. Він може містити:

- інформацію про авторське право розроблювачів Web-сайта (повний чи текст посилання на нього);

- координати для зв'язку;

- дублюючу навігацію (текстову);

- рекламну інформацію.

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

Ще одним важливим моментом, що передує початку роботи над графічним макетом, є вибір типу верстки. Усього існує два типи - статичний і динамічний.

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

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

Отже сайт буде мати структуру, яка складається із чотирьох блоків: верхній, навігаційний, основний та нижній. Сайт буде мати таку структуру, яка показана на рисунку 1.7.

Рисунок 1.7 - Каркас сайту

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

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

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

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

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

Я ж буду користуватися векторною графікою.

Три найпопулярніші типи зображення які використовуються в WEB: jpg, gif i png.

JPEG (Joint Photographic Experts Group) -- растровий формат збереження графічної інформації, що використовуєстиснення з втратами.

При необхідності дуже сильного стиснення втрати можуть бути переглянуті за допомогою модуля Matrixmuster (матричний зразок, матричний малюнок). Втрати і спотворення інформації через ступінь стиснення можуть проявлятися вже в призначених для користувача програмах. Допустимий рівень стиснення залежить від характеру зображення та існує, як правило, в межах 1:10. Формат JPEG часто використовується як формат даних в цифрових камерах. У Інтернеті формат JPEG застосовується для відображення напівтонових ілюстрацій та графічної інформації з плавним переходом тонів. Формат JPEG, на відміну від GIF і PNG, не підтримує ні анімацію, ні прозорість. Область застосування формату досить вузька -- розповсюдження високоякісної напівтонової графіки в Інтернеті. Формат підтримується практично всіма сучасними графічними програмами та веб-браузерами.

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

Найбільша роздільна здатність,яку підтримує формат JPEG/JFIF є 65535Ч65535.

PNG (Portable Network Graphics) -- растровий формат збереження графічної інформації, що використовує стиснення без втрат. PNG був створений для заміни формату GIF, графічним форматом, який не потребує ліцензії для використання. Зазвичай файли формату PNG мають розширення .png і використовують позначення MIME-типу image/png.

Формат PNG зберігає інформацію у стиснутому вигляді, при чому стиснення проводиться без втрат якості, на відміну від формату JPEG. Формат PNG спроектований для заміни застарілого і простішого формату GIF, а також у деякій мірі, для заміни складнішого формату TIFF.

GIF (від англ. Graphics Interchange Format -- «формат обміну зображеннями») -- 8-бітний растровий графічний формат, що використовує до 256 чітких кольорів із 24-бітного діапазону RGB. Формат було розроблено компанією CompuServe у 1987 році, і з того часу набув широкої популярності у всесвітній павутині завдяки своїй відносній простоті та мобільності. Одними із головних особливостей формату є підтримка анімаціїта прозорості.

Для стискання файлів використовує LZW-компресію.

А малювати векторні зображення для сайту я буду малювати в графічному редакторі GIMP, який був стрений проектом GNU і розповсюджується за вільною ліцензією GPL.

GIMP -- растровий графічний редактор, із деякою підтримкою векторної графіки. Проект розпочали 1995 року Spencer Kimball і Peter Mattis як навчальний проект в Берклі. В 1997, після закінчення нимиуніверситету GIMP став частиною проекту GNU. Програма підтримується та розвивається товариством добровольців, ліцензована за умовами GNU General Public License версії 3+, починаючи з релізу 2.8. Символом GIMP є койот Вілбер (Wilber). Програма працює на системах Microsoft Windows, Gnu/Linux, FreeBSD (або OpenBSD), MacOS X, OpenSolaris.

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

Для початку треба намалювати шапку для сайту. Так як компанія ЄвроТрансПошта працює у сфері перевезення, то виберу для шапки дизайн у транспортному стилі. Результат видно на рисунку 1.8.



Рисунок 1.8 - Шаблон сайту

Такий автомобіль буде зображено на усі сторінках сайту.

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

Тепер малюємо стрілку «back to top», яка буде піднімати на початок сайту, якщо відвідувач буде низько на сторінці сайту і захоче перейти на початок сайту.

Для цього запускаю графічний редактор GIMР. Створюю нове зображення і зберігаю з назвою back to top та задаю розширення PNG.

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

Зберігаю зображення.

Виглядає зображення на рисунку 1.9.

Рисунок 1.9 -- Зображення back to top

Отримане зображення переміщую в папку сайту у папку images.

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

Лістинг 1.16 - Підключення зображення до сайту

<div style="position: fixed; bottom: 40px; right: 80px;">

<a href="template.php#top" title="Піднятися до верху">

<img src="images/back-to-top.png" alt="back-to-top">

</a>

</div>

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

Рисунок 1.10 - Зовнішній вигляд сайту

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

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

Найчастіше CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML, але формат CSS може застосовуватися до інших видів XML-документів.

У лістингу 1.17 описаний головний CSS-стиль сайту. Самих же стилів може використовуватися при розробці та функціонуванні сайту, дуже багато.

Лістинг 1.17- Головний CSS-стиль сайту

body/*вся сторінка*/

{

background-color: faf3ba;/*фоновий колір*/

color: 005906;/*колір тексту*/

}

.mainframe/*головний блок ||| усі блоки взяті в один загальний блок*/

{

/*border: 1px solid black; бордюр ||| потім видалити. потрібен для розмітки*/

width: 900px;/*ширина головного блоку = ширина сайту*/

margin: 10px auto 20px;/*10px = відступ з верху, auto (center) з ліва/з права, 20px = з низу*/

overflow: hidden;/*заборона показувати контент, якщо він виходить за межі блоку (щоб не з'їхав шаблон)*/

}

.header

{

/*border: 1px solid black; бордюр ||| потім видалити. потрібен для розмітки*/

text-align: center;/*розміщення тексту = по центру*/

}

.leftmenu

{

/*border: 1px solid black; бордюр ||| потім видалити. потрібен для розмітки*/

float: left;/*розміщення блоку = з ліва. обтікання з правого боку*/

overflow: hidden;/*заборона показувати контент, якщо він виходить за межі блоку (щоб не з'їхав шаблон)*/

width: 250px;/*ширина блоку*/

padding: 20px;/*відступ вмісту блоку від границь блоку*/

}

.leftmenu-block

{

border: 1px solid red; /*бордюр*/

overflow: hidden;/*заборона показувати контент, якщо він виходить за межі блоку (щоб не з'їхав шаблон)*/

padding: 10px;/*відступ вмісту блоку від границь блоку*/

text-align: center;/*розміщення тексту = по центру*/

border-radius: 8px;/*заокруглені краї*/

color: blue;/*колір тексту*/

background-color: gold;/*колір заливки*/

}

.workarea

{

/*border: 1px solid black; бордюр ||| потім видалити. потрібен для розмітки*/

overflow: hidden;/*заборона показувати контент, якщо він виходить за межі блоку (щоб не з'їхав шаблон)*/

padding: 20px;/*відступ вмісту блоку від границь блоку*/

}

.footer

{

/*border: 1px solid black; бордюр ||| потім видалити. потрібен для розмітки*/

overflow: hidden;/*заборона показувати контент, якщо він виходить за межі блоку (щоб не з'їхав шаблон)*/

text-align: center;/*розміщення тексту = по центру*/

width: 100%;/*ширина блоку*/

}

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

На цьому робота із інтерфейсом закінчена.

1.12 Програмні рішення

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

Починаю писати код сайту із шапки сайту.

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

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

Вихідний код верхньої частини сайту описаний в лістингу 1.18.

Лістинг 1.18 -- Шапка сайту

<div id="loginBar"><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><!--<s5200>-->Ви увійшли як<!--</s>--> <a href="$PERSONAL_PAGE_LINK$" title="Мій профіль"><b>$USERNAME$</b></a> | <!--<s3167>-->Група<!--</s>--> "<u>$USER_GROUP$</u>"<?else?><!--<s5212>-->Вітаю Вас<!--</s>--> <b>$USERNAME$</b><?endif?><?endif?> <?if($RSS_LINK$)?>| <a href="$RSS_LINK$" title="RSS">RSS</a><?endif?></div>

<div id="dataBar">

<p id="navBar"><a href="$HOME_PAGE_LINK$" title="Головна"><!--<s5176>-->Головна<!--</s>--></a><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?> | <a href="$PERSONAL_PAGE_LINK$" title="Мій профіль"><!--<s5214>-->Мій профіль<!--</s>--></a><?else?> | <a href="$REGISTER_LINK$" title="Реєстрація"><!--<s3089>-->Реєстрація<!--</s>--></a><?endif?><?endif?> <?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?> | <a href="$LOGOUT_LINK$" title="Вихід"><!--<s5164>-->Вихід<!--</s>--></a><?else?> | <a href="$LOGIN_LINK$" title="Вхід"><!--<s3087>-->Вхід<!--</s>--></a><?endif?><?endif?></p>

<p id="data">$WDAY$, $DATE$, $TIME$</p>

</div>

<div style="clear:both;"></div>

<div id="logo">

<div id="logoName"><!-- <logo> -->ЄвроТрансПошта<!-- </logo> --></div>

</div>

<div style="clear:both;"></div>

Вихідний код навігаційної частини сайту описаний в лістингу 1.19.

Лістинг 1.19 -- Ліва частина сайту

<?if($SMENU_1$)?>

<table border="0" cellpadding="0" cellspacing="0" class="boxTable"><tr><td class="boxTitle"><b><!-- <bt> --><!--<s5184>-->Меню сайту<!--</s>--><!-- </bt> --></b></td></tr><tr><td class="boxContent"><!-- <bc> -->$SMENU_1$<!-- </bc> --></td></tr></table>

<?endif?>

<?if($LOGIN_FORM$)?>

<table border="0" cellpadding="0" cellspacing="0" class="boxTable"><tr><td class="boxTitle"><b><!-- <bt> --><!--<s5158>-->Форма входу<!--</s>--><!-- </bt> --></b></td></tr><tr><td class="boxContent"><!-- <bc> -->$LOGIN_FORM$<!-- </bc> --></td></tr></table>

<?endif?>

<?if($CATEGORIES$)?>

<table border="0" cellpadding="0" cellspacing="0" class="boxTable"><tr><td class="boxTitle"><b><!-- <bt> --><!--<s5351>-->Категорії<!--</s>--><!-- </bt> --></b></td></tr><tr><td class="boxContent"><!-- <bc> -->$CATEGORIES$<!-- </bc> --></td></tr></table>

<?endif?>

<?if($BASKET$)?>

<table border="0" cellpadding="0" cellspacing="0" class="boxTable"><tr><td class="boxTitle"><b><!-- <bt> --><!--<s5441>-->Кошик<!--</s>--><!-- </bt> --></b></td></tr><tr><td class="boxContent"><!-- <bc> -->$BASKET$<!-- </bc> --></td></tr></table>

<?endif?>

<?if($SEARCH_FORM$)?>

<table border="0" cellpadding="0" cellspacing="0" class="boxTable"><tr><td class="boxTitle"><b><!-- <bt> --><!--<s3163>-->Пошук<!--</s>--><!-- </bt> --></b></td></tr><tr><td class="boxContent"><div align="center"><!-- <bc> -->$SEARCH_FORM$<!-- </bc> --></div></td></tr></table>

<?endif?>

<?if($CALENDAR$)?>

<table border="0" cellpadding="0" cellspacing="0" class="boxTable"><tr><td class="boxTitle"><b><!-- <bt> --><!--<s5171>-->Календар<!--</s>--><!-- </bt> --></b></td></tr><tr><td class="boxContent"><div align="center"><!-- <bc> -->$CALENDAR$<!-- </bc> --></div></td></tr></table>

<?endif?>

<?if($POLL$)?>

<table border="0" cellpadding="0" cellspacing="0" class="boxTable"><tr><td class="boxTitle"><b><!-- <bt> --><!--<s5207>-->Наше опитування<!--</s>--><!-- </bt> --></b></td></tr><tr><td class="boxContent"><!-- <bc> -->$POLL$<!-- </bc> --></td></tr></table>

<?endif?>

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

Футер - це частина сайту, так само відома, як підвал сайту, що з'являється в нижній частині сайту і є на всіх сторінках сайту.

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

Вихідний код нижньої частини сайту описаний нижче.

<div id="footer"><!-- <copy> -->Copyright MyCorp &copy; $YEAR$<!-- </copy> --> | $POWERED_BY$</div>

Реєстрація користувачів на сайті описана у лістингу 1.20.

Лістинг 1.20 -- Реєстрація на сайті

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>Сторінка реєстрації - $SITE_NAME$</title>

<?$META_DESCRIPTION$?>

<link type="text/css" rel="StyleSheet" href="/.s/src/css/916.css" />

</head>

<body>

$ADMIN_BAR$

<div id="contanier">

$GLOBAL_AHEADER$

<div id="content">

<!-- <middle> -->

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<?if(!$HIDE_CLEFTER$)?>

<td valign="top" style="width:220px;">

$GLOBAL_CLEFTER$

</td>

<?endif?>

<td valign="top" style="padding:0px 0px 0px 20px;"><?if($MODULE_NAME$)?><h3>$MODULE_NAME$</h3><br><?endif?><!-- <body> --><div align="center">$BODY$</div><!-- </body> --></td>

</tr>

</table>

<!-- </middle> -->

</div>

</div>

$GLOBAL_BFOOTER$

</body>

</html>

Також на сайті є книга відвідувачів. Вона призначена для того, щоб користувачі сайту могли залишати відгуки про діяльність роботи компанії ЄвроТрансПошта. Код книги відвідувачів описаний у лістингу 1.21.

Лістинг 1.21 - Книга відвідувачів

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>$MODULE_NAME$ - $SITE_NAME$</title>

<?$META_DESCRIPTION$?>

<link type="text/css" rel="StyleSheet" href="/.s/src/css/916.css" />

</head>

<body>

$ADMIN_BAR$

<div id="contanier">

$GLOBAL_AHEADER$

<div id="content">

<!-- <middle> -->

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<?if(!$HIDE_CLEFTER$)?>

<td valign="top" style="width:220px;">

$GLOBAL_CLEFTER$

</td>

<?endif?>

<td valign="top" style="padding:0px 0px 0px 20px;"><?if($MODULE_NAME$)?><h3>$MODULE_NAME$</h3><br><?endif?><!-- <body> --><table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td width="80%"><a href="$HOME_PAGE_LINK$"><!--<s5176>-->Головна<!--</s>--></a> &raquo; <!--<s3197>-->Гостьова книга<!--</s>--></td>

<td align="right" style="white-space: nowrap;">[ <?if($SIGN_LINK$)?><a href="$SIGN_LINK$"><!--<s5205>-->Додати запис<!--</s>--></a><?endif?> <?if($READ_LINK$)?><a href="$READ_LINK$"><!--<s5206>-->Читати записи<!--</s>--></a><?endif?> ]</td>

</tr>

</table><hr />

$BODY$<!-- </body> --></td>

</tr>

</table>

<!-- </middle> -->

</div>

</div>

$GLOBAL_BFOOTER$

</body>

</html>

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

- введення особистих даних;

- перегляд послуг;

- замовлення послуг;

- оплата замовлених послуг;

- консультація оператора сайту;

- зміна особистих даних;

- керування профілем.

Саме тому робота із профілем клієнтів на сайті займає дуже багато часу. Але кодовий результат її роботи показаний у лістингу 1.22.

Лістинг 1.22 - Профіль клієнтів на сайті

<html>

<head>

<title>Інформація про користувача</title>

<link type="text/css" rel="StyleSheet" href="/.s/src/css/916.css">

</head>

<body>

<table border="0" cellpadding="5" cellspacing="1" style="background:url('/.s/t/916/1.gif') top repeat-x #FFFFFF;border:1px solid #E1E1E1;" width="100%">

<tr><td><h3>Інформація про користувача</h3></td></tr>

<tr><td align="center"><div align="center">

<script type="text/javascript">if (window.name.length>2){window.resizeTo(750,420);}</script>

<style type="text/css">.udtb {text-align:left;padding:3px;} .udtlb {clear:left;float:left;width:150px;}</style>

<div style="position:relative;float:right;text-align:center;">

<?if($_AVATAR$)?>$_AVATAR$<br /><br /><?endif?>

<?if($UNET_ID$)?><div style="padding-bottom:4px;"><img alt="" style="vertical-align:-4px;" border="0" src="http://s16.eurotransposh/img/ma/uid.gif"> <a href="$UNET_PROFILE_URL$" target="_blank"><b>uID профіль</b></a></div><?endif?>

<?if($_CHANGE_DETAILS_URL$)?>[ <a href="$_CHANGE_DETAILS_URL$">Змінити дані</a> ]<?endif?>

<?if($_PM_READ_URL$)?><div style="padding-top:4px;" id="userPMread">[ <a href="$_PM_READ_URL$">Читати ОП (<b>$UNREAD_PM$</b>)</a> ]</div><?endif?>

<?if($_PM_SEND_URL$)?><div style="padding-top:4px;" id="userPMread">[ <a href="$_PM_SEND_URL$" title="Відправити особисте повідомлення">Відправити ОП</a> ]</div><?endif?>

</div>

<div id="block1" class="udtb"><div class="udtlb">Користувач:</div> <a href="javascript://" rel="nofollow" onclick="prompt('Адреса профілю даного користувача','$_PROFILE_URL$')"><b>$_USERNAME$</b></a> <?if($MODER_PANEL$)?>[id: <b>$_USER_ID$</b>]<?endif?> <?if($_RANK_NAME$)?><span title="Ранг: $_RANK$">$_RANK_ICON$</span> [ $_RANK_NAME$ ]<?endif?></div>

<?if($_BANNED_TILL$)?>

<?if($_BANNED_TILL$="1")?><div id="blockBanned" style="text-align:center;padding:3px;"><b style="color:red;">Активність заблоковано назавжди!</b></div><?else?><div id="blockBanned" style="text-align:center;padding:3px;">Активність заблоковано до $_BANNED_TILL$</div><?endif?>

<?endif?>

<div id="block2" class="udtb"><div class="udtlb">Група:</div>

<?if($MODER_PANEL$)?>

$MODER_PANEL$

<?else?>

$_GROUP_NAME$ <?if($_GROUP_ICON$)?>$_GROUP_ICON$<?endif?>

<?endif?>

</div>

<?if($AWARDS_READ_URL$ || $_REP_READ_URL$)?>

<div id="block25" class="udtb"><div class="udtlb">Заохочення:</div> <?if($AWARDS_READ_URL$)?><a href="$AWARDS_READ_URL$" title="Список нагород">Нагороди (<b>$AWARDS$</b>)</a> <?if($AWARDS_DO_URL$)?>[<a href="$AWARDS_DO_URL$">+</a>]<?endif?><?endif?><?if($_REP_READ_URL$)?><?if($AWARDS_READ_URL$)?> &nbsp; <?endif?><a title="Дивитися історію репутації" class="repHistory" href="$_REP_READ_URL$">Репутація (<b>$_REPUTATION$</b>)</a><?if($_REP_DO_URL$)?> [<a href="$_REP_DO_URL$">&plusmn;</a>]<?endif?><?endif?></div>

<?endif?>

<?if($_BAN_READ_URL$)?>

<div id="block3" class="udtb"><div class="udtlb">Зауваження:</div> <a class="banPercent" title="Дивитися історію зауважень" href="$_BAN_READ_URL$">$_BAN_PERCENT$%</a> <?if($_BAN_DO_URL$)?>&nbsp; <a href="$_BAN_DO_URL$"><img alt="" style="margin:0;padding:0;border:0;" title="Змінити рівень зауважень" src="http://s16.eurotransposh/img/fr/wm.gif" width="10" height="9" /></a><img alt="" style="margin:0;padding:0;border:0;" src="http://s16.eurotransposh/img/fr/w$_BAN_RATING$.gif" width="49" height="9" /><a href="$_BAN_DO_URL$"><img alt="" style="margin:0;padding:0;border:0;" title="Змінити рівень зауважень" src="http://s16.eurotransposh/img/fr/wp.gif" width="10" height="9" /></a><?endif?></div>

<?endif?>

<?if($_NAME$)?>

<div id="block5" class="udtb"><div class="udtlb">Ім`я:</div> $_NAME$ <?if($_GENDER_NAME$)?>[ $_GENDER_NAME$ ]<?endif?></div>

<?endif?>

<?if($_STATUS$)?>

<div id="block6" class="udtb"><div class="udtlb">Статус:</div> $_STATUS$</div>

<?endif?>

<?if($MODER_PANEL$)?>

<div id="block7" class="udtb"><div class="udtlb">Реєстраційний IP:</div> <a href="https://apps.db.ripe.net/search/query.html?searchtext=$_IP_ADDRESS$" target="_blank">$_IP_ADDRESS$</a></div>

<?endif?>

<?if($_REG_TIME$)?>

<div id="block8" class="udtb"><div class="udtlb">Дата реєстрації:</div> $_REG_TIME$</div>

<?endif?>

<?if($_LOG_TIME$)?>

<div id="block9" class="udtb"><div class="udtlb">Дата входу:</div> $_LOG_TIME$</div>

<?endif?>

<?if($_BIRTHDAY$)?>

<div id="block10" class="udtb"><div class="udtlb">Дата народження:</div>$_BIRTHDAY$ [ <b>$_AGE$</b> $_ZODIAC$ ]</div>

<?endif?>

<div id="block11" class="udtb"><div class="udtlb">E-mail:</div>

<?if($_IS_OWN_PROFILE$)?>$_EMAIL$

<?if($_EMAIL_IS_HIDDEN$)?><span style="font-size:7pt">(Адресу приховано)</span><?endif?>

<?else?>

<?if($MODER_PANEL$)?><a href="mailto:$_EMAIL$">$_EMAIL$</a>

<?if($_EMAIL_IS_HIDDEN$)?><span style="font-size:7pt">(Адресу приховано)</span><?endif?>

<?if(!$_EMAIL_IS_VERIFIED$)?><span style="color:red;" title="Not verified e-mail">*</span><?endif?>

<?else?>

<?if($_SEND_EMAIL_URL$)?><a href="$_SEND_EMAIL_URL$">Написати лист користувачеві</a>

<?else?>$_EMAIL$

<?endif?>

<?endif?>

<?endif?>

<?if($_EMAIL_VERIFICATION_URL$)?>[ <b><a href="$_EMAIL_VERIFICATION_URL$"><span style="color:red">Підтвердити e-mail</span></a></b> ]<?endif?></div>

<?if($_WWW$)?>

<div id="block12" class="udtb"><div class="udtlb">Сайт:</div> $_WWW$</div>

<?endif?>

<?if($_ICQ$)?>

<div id="block13" class="udtb"><div class="udtlb">ICQ:</div> $_ICQ$</div>

<?endif?>

<?if($_AOL$)?>

<div id="block14" class="udtb"><div class="udtlb">AOL:</div> $_AOL$</div>

<?endif?>

<?if($_MSN$)?>

<div id="block15" class="udtb"><div class="udtlb">MSN:</div> $_MSN$</div>

<?endif?>

<?if($_YAHOO$)?>

<div id="block16" class="udtb"><div class="udtlb">Yahoo:</div> $_YAHOO$</div>

<?endif?>

<?if($_PHONE$)?>

<div id="block26" class="udtb"><div class="udtlb">Телефон:</div>$_PHONE$

<?if($_IS_OWN_PROFILE$ || $MODER_PANEL$)?>

<?if($_PHONE_IS_HIDDEN$)?><span style="font-size:7pt">(Телефон прихований)</span><?endif?>

<?endif?>

</div>

<?endif?>

<?if($_COUNTRY$)?>

<div id="block18" class="udtb"><div class="udtlb"><?if($UNET_ID$)?>Місце проживання<?else?>Країна<?endif?>:</div> $_COUNTRY$</div>

<?endif?>

<?if($_STATE$)?>

<div id="block19" class="udtb"><div class="udtlb">Штат:</div> $_STATE$</div>

<?endif?>

<?if($_CITY$)?>

<div id="block20" class="udtb"><div class="udtlb">Місто:</div> $_CITY$</div>

<?endif?>

<?if($_SIGNATURE$)?>

<div id="block21" class="udtb"><div class="udtlb">Підпис:</div> $_SIGNATURE$</div>

<?endif?>

<?if($_IS_ACTIVITY$)?>

<div id="block25" class="udtb"><hr></div><div id="block22" class="udtb" style="text-align:center">

<?if($_COM_ENTRIES$)?> | <a href="$_COM_ACTIVITY_URL$" target="_blank">коментарі(<b>$_COM_ENTRIES$</b>)</a><?endif?>

<?if($_FORUM_ENTRIES$)?> | <a href="$_FORUM_ACTIVITY_URL$" target="_blank">форум(<b>$_FORUM_ENTRIES$</b>)</a><?endif?>

<?if($_BLOG_ENTRIES$)?> | <a href="$_BLOG_ACTIVITY_URL$" target="_blank">блог(<b>$_BLOG_ENTRIES$</b>)</a><?endif?>

<?if($_NEWS_ENTRIES$)?> | <a href="$_NEWS_ACTIVITY_URL$" target="_blank">новини(<b>$_NEWS_ENTRIES$</b>)</a><?endif?>

<?if($_PUBL_ENTRIES$)?> | <a href="$_PUBL_ACTIVITY_URL$" target="_blank">статті(<b>$_PUBL_ENTRIES$</b>)</a><?endif?>

<?if($_LOAD_ENTRIES$)?> | <a href="$_LOAD_ACTIVITY_URL$" target="_blank">файли(<b>$_LOAD_ENTRIES$</b>)</a><?endif?>

<?if($_DIR_ENTRIES$)?> | <a href="$_DIR_ACTIVITY_URL$" target="_blank">сайти(<b>$_DIR_ENTRIES$</b>)</a><?endif?>

<?if($_BOARD_ENTRIES$)?> | <a href="$_BOARD_ACTIVITY_URL$" target="_blank">оголошення(<b>$_BOARD_ENTRIES$</b>)</a><?endif?>

<?if($_PHOTO_ENTRIES$)?> | <a href="$_PHOTO_ACTIVITY_URL$" target="_blank">фото(<b>$_PHOTO_ENTRIES$</b>)</a><?endif?>

<?if($_STUFF_ENTRIES$)?> | <a href="$_STUFF_ACTIVITY_URL$" target="_blank">Ігри(<b>$_STUFF_ENTRIES$</b>)</a><?endif?>

<?if($_SHOP_ENTRIES$)?> | <a href="$_SHOP_ACTIVITY_URL$" target="_blank">товари(<b>$_SHOP_ENTRIES$</b>)</a><?endif?>

<?if($_VIDEO_ENTRIES$)?> | <a href="$_VIDEO_ACTIVITY_URL$" target="_blank">відео(<b>$_VIDEO_ENTRIES$</b>)</a><?endif?> |</div>

<?endif?>

<?if($USERS_LIST_URL$)?>

<hr /><form method="post" action="/index" name="fuser" style="margin:0px"><table border="0" cellpadding="4" cellspacing="1" width="100%" id="usch"><tr><td align="center"><input type="button" class="allUsersBtn" style="width:150px;" onclick="window.location.href='/index/15-1'" value="Список користувачів" />&nbsp;<input type="text" class="uSearchFl" name="user" style="width:240px;text-align:center;" size="20" value="Логін користувача" onclick="if (this.value=='Логін користувача'){this.value='';}" maxlength="25" /> <input type="submit" class="uSearchFlSbm" style="width:150px;" value="Знайти користувачів" /></td></tr></table><input type="hidden" name="a" value="15" /></form>

<?endif?></div></td></tr>

</table>

</body>

</html>

Для форматування положення елементів на сторінці та налаштуванні їх дизайну відповідає CSS-стиль. В лістингу 1.23. приведено CSS-стиль.

Лістинг 1.23 - CSS-стиль

/* General Style */

body {background:#F7F7F7; margin:0px; padding:0px;text-align:center;}

#contanier {background:url('/.s/t/916/2.gif') center repeat-y #F7F7F7;width:900px;margin-left:auto;margin-right:auto;text-align:left;}

#loginBar {height:25px;background:url('/.s/t/916/3.jpg') no-repeat;text-align:left;font-size:7pt;color:#ABABAB;padding-top:13px;}

*html #loginBar {height:38px !important;}

#dataBar {height:20px;background:url('/.s/t/916/4.jpg') no-repeat;padding-top:8px;}

*html #dataBar {height:28px !important;}

#navBar {float:left;color:#959595;margin:0;padding:0 10px 0 10px;}

#data {float:right;color:#959595;margin:0;padding:0 10px 0 10px;}

#logo {height:233;background:url('/.s/t/916/5.jpg') right no-repeat;}

#logoName {width:343px;height:203px;text-align:center;background:url('/.s/t/916/6.jpg') no-repeat;float:left;padding-top:30px;color:#FFFFFF;font-size:20pt;font-weight:bold;padding-right:100px;}

*html #logoName {height:233px !important;width:443px !important;}

#content {width:820px;margin-left:auto;margin-right:auto;background:url('/.s/t/916/7.gif') top no-repeat;padding:20px 40px 10px 40px;border-bottom:1px solid #E1E1E1;}

*html #content {width:900px !important;}

#footer {width:900px;margin-left:auto;margin-right:auto;text-align:center;padding:20px 0 20px 0;color:#ABABAB;}

.boxTable {width:220px;}

.boxTitle {height:30px;color:#748800;font-size:11pt;font-weight:bold;}

.boxContent {padding:5px 5px 5px 20px;}

h3 {text-align:right;font-size:13pt;font-weight:bold;color:#66645B;}

a:link {text-decoration:none; color:#6493D8;}

a:active {text-decoration:none; color:#6493D8;}

a:visited {text-decoration:none; color:#6493D8;}

a:hover {text-decoration:underline; color:#000000;}

a.topLink:link, a.forRegLink:link {text-decoration:underline; color:#FFFFFF;}

a.topLink:active, a.forRegLink:active {text-decoration:underline; color:#FFFFFF;}

a.topLink:visited, a.forRegLink:visited {text-decoration:underline; color:#FFFFFF;}

a.topLink:hover, a.forRegLink:hover {text-decoration:underline; color:#000000;}

td, body {font-family:verdana,arial,helvetica; font-size:8pt;}

form {padding:0px;margin:0px;}

input,textarea,select {vertical-align:middle; font-size:8pt; font-family:verdana,arial,helvetica;}

.copy {font-size:7pt;}

a.noun:link {text-decoration:none; color:#6493D8}

a.noun:active {text-decoration:none; color:#6493D8}

a.noun:visited {text-decoration:none; color:#6493D8}

a.noun:hover {text-decoration:none; color:#000000}

hr {color:#8EA8C4;height:1px;}

label {cursor:pointer;cursor:hand}

.blockTitle {padding-left:19px; font-weight:bold; color:#FFFFFF; font-size:12px; background: url('/.s/t/916/8.gif') no-repeat 7px 6px;text-transform:capitalize;}

a.menu1:link {text-decoration:underline; color:#DDEEF7}

a.menu1:visited {text-decoration:underline; color:#DDEEF7}

a.menu1:hover {text-decoration:underline; color:#FFFFFF}

a.menu1:active {text-decoration:underline; color:#FFFFFF}

.menuTd {font-family:Tahoma,Arial,Helvetica; padding-left:15px;padding-right:12px; background: url('/.s/t/916/9.gif') no-repeat 0px 3px;}

.mTd {padding-left:12px;padding-top:5px;padding-right:1px;}

.pageTitle {font-family:Tahoma,Arial,Helvetica; font-size:8pt; font-weight:bold; color:#FFFFFF; padding-left:10px; padding-right:10px;}

.mframe {padding-left:15px; padding-bottom:20px; padding-right:3px;}

.blockT1 {border-left:1px solid #5694B5;}

.blockT2 {padding:5px;}

/* ------------- */

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

ul.uz, ul.uMenuRoot {list-style: none; margin: 0 0 0 0; padding-left: 0px;}

li.menus {margin: 0; padding: 0 0 0 13px; background: url('/.s/t/916/10.gif') no-repeat 3px 4px; margin-bottom: .6em;}

Стиль для форми для коментування, також має свій стиль, який приведений у лістингу 1.24.

Лістинг 1.24 - CSS-стиль для залишення коментарів

/* Comments Form Style */

.commTable {background:#FFFFFF; border:1px solid #E1E1E1;}

.commTd1 {color:#000000;}

.commTd2 {}

.commFl {width:100%;}

.smiles {border:1px inset;background:#FFFFFF; border:1px solid #E1E1E1;}

.commReg {padding: 10 0 10 0px; text-align:center;}

.commError {color:#FF0000;}

.securityCode {}

/* ------------------- */

На цьому завершується робота із каскадними таблицями стилів.

2. СПЕЦІАЛЬНА ЧАСТИНА

2.1 Оптимізація веб-сайту

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

Головний стандарт, для оцінювання веб-сайтів - ISO 9241-11.

Юзабіліті (англ. Usability -- дослівно «зручність користування») -- поняття в мікроергономіці, що визначає загальну степінь зручності предмета при використанні; термін схожий з терміном «ергономічність», але має іншу область поширення і відрізняється нюансами визначення. Використовується для комп'ютерної техніки, терміном юзабіліті називають концепцію розробки користувацьких інтерфейсів програмного забезпечення, орієнтовану на максимальну психологічну і зорову зручність для користувача. ISO визначає використовність як «Ступінь з якою продукт може бути використано визначеними користувачами для досягнення визначених цілей з ефективністю, продуктивністю та вдоволеністю для специфічного контексту використання».

Веб-юзабіліті -- це застосування принципів юзабіліті в тих областях, де перегляд веб-сторінок можна розглядати як загальну парадигму (або "метафору") для побудови GUI

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

Загальні цілі веб-юзабіліті:

- Представити користувачеві інформацію в ясній і стислій формі;

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

- Усунути будь-яку двозначність щодо наслідків дій;

- Розміщення важливих елементів у відповідній області на веб-сторінці;

В контексті веб-сайтів електронної комерції, сенс веб-юзабіліті звузився до ефективності: запуск продажів і/або виконання інших операцій які являються цінними для бізнесу. Увагу до веб-юзабіліті було підвищено тоді, коли багато ранніх сайтів електронної комерції потерпіли невдачу в 2000 році. На початку 90--х вважалося, що графічний дизайн повинен бути необхідною складовою частиною сайту для успішного ведення електронного бізнесу, але піонери веб-юзабіліті вважали інакше. Вони виступали за принцип KISS, який довів свою ефективність у приверненні уваги до сайту кінцевого користувача.

Критерії оцінювання ресурсів інтернету:

- комфортність;

- навігація;

- безпека;

- гарантії та легітимізація.

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

2.2 Тестування веб-сайту

Існують спеціальні сайти для оцінювання якості web-ресурсів мережі. Ці сайти визначають такі важливі показники, як: Ping (провірка доступності сайту / чи сайт в on-line), Провірка зворотніх посилань (провірка, хто посилається на цей сайт) Провірка ТИЦ и PR (рейтинг сайту у пошуковиках). Окрім цього, ці сервіси стежать за роботою Вашого сайту і повідомляють Вас, якщо щось не працює, або працює неправильно.

W3C Markup Validation Service - це безкоштовна послуга, що надається в W3C. Дозволяє перевірити сумісність вашого HTML документа зі стандартами HTML або XHTML, і дозволяє веб-авторам знайти помилки.

Рисунок 2.1 -- Результат перевірки сайту сервісом validator.w3.org

Результати перевірки:

- 6 Помилки, 31 попередження

- Адреса: http://eurotransposh.com/

- Кодування :UTF-8

- Doctype : HTML 4.01 Transitional

- Кореневий елемент: HTML

Ping-Admin.Ru здійснює цілодобовий моніторинг на вашому сервері таких сервисов як: HTTP, HTTPS; FTP; MySQL, PostgreSQL; POP3, SMTP, IMAP; DNS, а також перевірки за допомогою Ping й Telnet. моніторинг сервера сайту сервісів перевірка доступності ping

- Сервіс надає наступні послуги:

- Детальна разова перевірка сайту;

- Ping;

- Перевірка зворотних посилань;

- Перевірка ТИЦ й PR.

Рисунок 2.2 -- Результат перевірки сайту сервісом Ping-Admin.Ru

Результати перевірки подані в таблиці 2.1.

Таблиця 2.1 - Результати перевірки сайту

Провірка http://eurotransposh.com/
Точка моніторингу	IP вашого серверу	Загальний час, сек.	DNS, сек.	З'єднан ня, сек.	Очікуван ня, сек.	Швидкість завантажен ня
Іспанія, Мадрид	194.0.131.18	0,988889	0,4573	0,063306	0,085992	215 КБ/с
Італія, Мілан	194.0.131.18	0,501605	0,1063	0,045984	0,069991	294 КБ/с
Україна, Київ	194.0.131.18	0,099343	0,0025	0,002278	0,022927	1,13 МБ/с

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

3. ОРГАНІЗАЦІЙНО - ЕКОНОМІЧНА ЧАСТИНА

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

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

3.1 Визначення стадій технологічного процесу та загальної тривалості проведення НДР

Витрати часу по окремих операціях технологічного процесу відображені в таблиці 3.1.

Таблиця 3.1 Операції технологічного процесу та час їх виконання

№ п/п	Назва операції (стадії)	Виконавець	Середній час виконання операції, год.
1	Витрати праці на підготовку опису задачі	інженер	6
2	Витрати праці на розробку дизайну	інженер	10
3	Витрати праці на розробку структури сайту	інженер	6
4	Витрати праці на створення сайту по вибраному дизайну та структурі	інженер	65
5	Витрати праці на підготовку документації	інженер	6
6	Витрати праці на відлагодження коду на сервері	інженер	12
Разом	105

3.2 Визначення витрат на оплату праці та відрахувань на соціальні заходи

Відповідно до Закону України “Про оплату праці” заробітна плата - це “винагорода, обчислена, як правило, у грошовому виразі, яку власник, або уповноважений ним орган виплачує працівникові за виконану ним роботу”.

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

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

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

При розрахунку заробітної плати кількість робочих днів у місяці слід в середньому приймати - 24,5 дні/міс., або ж 196 год./міс. (тривалість робочого дня - 8 год.).

Місячний оклад кожного працівника слід враховувати згідно існуючих на даний час тарифних окладів. Рекомендовані тарифні ставки: керівник проекту - 4,5...8,0 грн./год., інженер - 3,0...5,0 грн./год., консультант - 3,5...5,5 грн./год., технік - 3,0...4,5 грн./год., лаборант - 2,0...3,5 грн./год.

Основна заробітна плата розраховується за формулою:

, (3.1)

де Тс - тарифна ставка, грн.;

Кг - кількість відпрацьованих годин.

Оскільки всі види робіт в даному проекті виконує інженер, то основна заробітна плата буде розраховуватись тільки за однією формулою:

грн.

Додаткова заробітна плата становить 10-15 % від суми основної заробітної плати.

, (3.2)

де Кдопл. - коефіцієнт додаткових виплат працівникам, 0,1-0,15 (візьмемо його рівним 0,15).

грн.

Звідси загальні витрати на оплату праці (Во.п.) визначаються за формулою:

. (3.3)

грн.

Крім того, слід визначити відрахування на соціальні заходи:

2 фонд страхування на випадок безробіття - 1,3 %;

3 фонд по тимчасовій втраті працездатності - 2,9 %;

4 пенсійний фонд - 32,3 %.

У сумі зазначені відрахування становлять 37,5 %.

Отже, сума відрахувань на соціальні заходи буде становити:

(3.4)

де ФОП - фонд оплати праці, грн.

грн.

Проведені розрахунки витрат на оплату праці зведемо у таблицю 3.2.

Таблиця 3.2 Зведені розрахунки витрат на оплату праці

№ п/п	Категорія працівн.	Основна заробітна плата, грн.	Додат. заробітна плата, грн.	Нарахув. на ФОП, грн.	Всього витрати на оплату праці, грн. 6=3+4+5
		Тариф. ставка, грн.	К-сть відпр. год.	Фактиx. нарах. з/пл., грн.
А	Б	1	2	3	4	5	6
1	інженер	5	105	525	78,75	226,41	830,156

3.3 Розрахунок матеріальних витрат

Матеріальні витрати визначаються як добуток кількості витрачених матеріалів та їх ціни:

, (3.5)

Де: qi - кількість витраченого матеріалу і-го виду;

рі - ціна матеріалу і-го виду.

Звідси, загальні матеріальні витрати можна визначити:

. (3.6)

Проведені розрахунки занесемо у таблицю 3.3.

Таблиця 3.3 Зведені розрахунки матеріальних витрат

№ п/п	Найменування матеріальних ресурсів	Од. виміру	Факт. витрачено матеріалів	Ціна 1-ці, грн.	Загальна сума витрат, грн.
1	Папір формату А4	шт.	200	0,05	10
2	Папір формату А1	шт.	6	1,5	9
3	Інструменти для малювання та креслення	шт.	10	1	10
Разом	216	2,55	29

3.4 Розрахунок витрат на електроенергію