Розробка сайту-візитки комерційного закладу

Вступ

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

Люди, які зв’язані своєю роботою з ІТ-сферою дуже часто працюють через мережу Інтернет. Щоб розповісти про себе, зазвичай, вони створюють сайти-візитки, в яких вони, в креативний, або не дуже, спосіб, розповідають про свої навички, приклади робіт та представляються способи для зв’язку з ними. Це необхідно для успішної комерційної діяльності

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

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

Мета дипломної роботи

Об’єктом дипломної роботи є технології та інструментальні засоби створення веб-сайту візитки.

Предметом дипломної роботи є розробка веб-сайту візитки для кав’ярні “Kameo”.

Методи дослідження. Для досягнення поставленої мети і роз’язання задач було використано такі взаємопов’язані методи дослідження: теоретичні - порівняльний аналіз провідних теорій розробки веб-дизайну з метою усвідомлення сутності його поняття; аналіз і синтез для визначення особливостей програмування <https://uk.wikipedia.org/wiki/%D0%9F%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F> для веб на стороні клієнта і сервера, а також конфігурування веб-сервера <https://uk.wikipedia.org/wiki/%D0%92%D0%B5%D0%B1-%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80>; аналіз і синтез задля упорядкування й представлення результатів та висновків дослідження; емпіричні - ознайомлення із експертними оцінками, даними провідними вченими та дослідниками теорій веб-програмування.

Практичне значення роботи - розробка веб-сайту візитки для кав’ярні “Kameo”.

1. Структура, основні характеристики та загальні принципи розробки сучасного сайту-візитки

.1 Структура сучасного сайту візитки

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

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

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

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

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

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

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

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

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

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

Як правило, тут є одразу два сайдбара, великий футер, що містить в собі одне або відразу кілька додаткових меню. Область основного контенту розбита на велику кількість окремих функціональних блоків. У кожному з них може виводитися найрізноманітніша інформація, наприклад, останні коментарі або статті, останні зареєструвалися користувачі, найпопулярніші користувачі, активні роботи / проекти і т.д. Через велику кількість блоків і інформації, яка в них розміщена, довжина головної сторінки може перевищувати довжину видимої частини екрану в 2-4 рази.[1]

.2 Загальні принципи та характеристика сайту-візитки

Для того щоб розробити сучасний сайт-візитка, потрібно дотримуватися послідовності створення сайту, тому нижче наведені загальні принципи створення веб-візитки:

. Концепція проекту

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

. Розробка дизайну

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

. Програмування

На даному етапі відбувається верстка затвердженого макета і початок розробки функціональної частини (реєстрація, авторизація, пошук, тощо). Іншими словами, починається розробка CMS (Системи управління контентом). Після закінчення розробки кожної функції окремо, вони всі об'єднуються в модулі єдиної системи управління сайтом, за допомогою якої власник сайту може здійснювати контроль і редагування проекту.

. Інформаційне наповнення

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

. Тестування

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

. Розміщення

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

. Початок просування

Сайт реєструється в пошукових системах і каталогах, розміщується статистика відвідувань і ось уже сайт готовий до роботи, і пошукові роботи починають індексувати сторінки і виводити їх відповідно до тематичної запитам. SEO-оптимізація - процес коригування HTML <https://uk.wikipedia.org/wiki/HTML>-коду, текстового наповнення (контенту), структури сайту, контроль зовнішніх чинників для відповідності вимогам алгоритму пошукових систем <https://uk.wikipedia.org/wiki/%D0%9F%D0%BE%D1%88%D1%83%D0%BA%D0%BE%D0%B2%D0%B0_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0>, з метою підняття позиції сайту в результатах пошуку в цих системах за певними запитами користувачів. Чим вище позиція сайту в результатах пошуку, тим більша ймовірність <https://uk.wikipedia.org/wiki/%D0%86%D0%BC%D0%BE%D0%B2%D1%96%D1%80%D0%BD%D1%96%D1%81%D1%82%D1%8C>, що відвідувач перейде на нього з пошукових систем, оскільки люди зазвичай йдуть за першими посиланнями <https://uk.wikipedia.org/wiki/%D0%9F%D0%BE%D1%81%D0%B8%D0%BB%D0%B0%D0%BD%D0%BD%D1%8F>.[2]

1.3 Сучасні тенденції сайтів

Ні для кого не секрет, що за останні роки веб-технології стрімко розвинулись. У першу чергу це тісно пов’язано з частою появою нових версій браузерів і підтримкою ними нових технологій. Тому напрямки розробки веб-додатків постійно змінюються. Щоб сайти виглядали сучасно, а також правильно відображалися на різних пристроях потрібно враховувати сучасні тренди в веб-розробці. Розглянемо деякі сучасні тенденції, які спостерігаються у веб-розробці останнім часом. [3]

Мінімалістичний дизайн

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

Застосування сучасних технологій HTML5 і CSS3

Унікальні можливості HTML5 вражають: нові елементи для розміщення на сторінці аудіо та відео, оффлайн коштів, анімації, нові типи полів в веб-формах та інші можливості, а в поєднанні з CSS3 розробник може домогтися приголомшливих результатів. Завдяки новим правилам, що з’явилися в CSS3, стало можливим створення безлічі цікавих візуальних ефектів, таких як закруглені кути у блоків, тіні, градієнт в якості фону, напівпрозорі елементи, CSS-трансформації, використання веб-шрифтів і багато іншого. При цьому для реалізації перерахованих інновацій більше не потрібно використовувати графічні зображення та JavaScript.

Відмова від використання Flash на користь HTML5 і JavaScript

До 2012 року Flash використовувався дуже широко, але потім його застосування стало помітно знижуватися. У першу чергу це стосується мобільних пристроїв. Так як браузери в сучасних мобільних пристроях підтримують HTML5, використання в них Flash-технологій для відображення анімації та інших невеликих завдань стало не актуально. Але це не означає, що Flash більше ніде не використовується. Без нього неможливим є відтворення відео та «просунутої» анімації.[4]

«Сприйнятливий» вебдизайн. Адаптивна верстка

Дизайн сайту більше не обмежений фіксованими розмірами. «Сприйнятливий» (адаптивний) дизайн - це методика створення макету сайту, який правильно відображається на екрані будь-якого пристрою. Не важливо, якого він розміру, смартфон це чи персональний комп’ютер. Основною ідеєю адаптивного дизайну є відмова від створення декількох варіантів сайту для різних типів пристроїв та адаптації єдиного макета для відображення на екранах із різним …. «Сприйнятливий» веб-дизайн почав розвиватися в 2012 році і цей процес триває досі. [5]

Односторінкові сайти, та використання PARALLAX - ефекту

Останнім часом стала збільшуватись кількість односторінкових сайтів, на яких можна побачити parallax-ефект. Цей напрямок розвивається і навіть великі світові компанії використовують ефект parallax на своїх сайтах. Parallax-ефект полягає в наступному: за рахунок різної швидкості руху шарів макета при прокручуванні сторінки виникає приголомшливий ефект глибини і перспективи. Це привертає увагу відвідувачів, а за рахунок того, що на таких сайтах меню зазвичай фіксується (наприклад, зверху або збоку) і не пропадає при прокручуванні, поліпшується взаємодія з користувачем.[6]

Фіксація блоку меню при прокрутці контенту

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

Слайдери, адаптовані під мобільні пристрої

Розміщення слайдерів на головній сторінці сайту є дуже популярним в сучасному веб-дизайні. Галерея з великих зображень - найнадійніший спосіб залучення уваги аудиторії. Всі слайдери базуються на jQuery-плагінах (іноді в поєднанні з CSS3). При зміні зображень в них відбуваються цікаві візуальні ефекти, які мають дуже привабливий.вигляд Багато відвідувачів використовують для серфінгу по мережі різні тач-пристрої (планшетні комп’ютери або смартфони), тому найвідоміші jQuery-плагіни (Fancybox, Lightbox та інші), призначені для створення галерей зображень, враховують це у своїй роботі. Важливо, що окрім підтримки мобільних тач-пристроїв популярні слайдери адаптують зображення під розміри екранів різних пристроїв. [8]

Великі зображення в якості фону

Їх можна використовувати на сайтах, пов’язаних з мистецтвом. Наприклад, на сайті-портфоліо фотографа якогось модного журналу або модельного агентства. Безумовно, там вони будуть дуже вигідно виглядати та вражати відвідувачів. Але у таких фонів є один істотний недолік: за рахунок їх розміру сторінки сайту можуть завантажуватися досить тривалий час. Щоб уникнути довгого завантаження сторінки, дизайнери роблять фонові зображення трохи розмитими. У підсумку з’являється можливість оптимізувати їх розмір для більш швидкого показу сторінки.[9]

Плоский дизайн, і фантастичні кольорові схеми

Плоский дизайн - один з різновидів мінімалізму. При створенні такого дизайну використовуються прості кольорові схеми, елементи дизайну не містять різні тривимірні ефекти (тіні, тиснення, градієнти та інше). Проте плоский дизайн не може бути зовсім без ефектів, але в ньому їх зовсім небагато та всі ефекти засновані на CSS3. Ключовим моментом плоского дизайну є концентрація уваги відвідувача на змісті сайту, а не на графічних елементах дизайну. У ньому використовуються прості макети, суцільні кольори, різні чіткі значки і шрифти без зарубок. Якщо говорити про кольорову гаму, то в плоскому дизайні застосовуються яскраві, соковиті, насичені кольори. Іноді кольорові схеми розбавляються сірим або чорним кольором. Плоский дизайн зараз застосовується практично всюди: від інтерфейсів додатків для Android і Windows Рhone до макетів веб-сайтів та інтерфейсів персональних ОС. Наприклад, Windows 8. Зараз популярність знову зростає. Це відбувається завдяки появі інтерфейсу Modern UI, а також оновлення дизайну сервісів Google (Gmail, Google Maps та Google+). Крім того, при використанні плоского дизайну в макетах, сторінки таких сайтів починають завантажуватися набагато швидше.[10]

2. Аналіз сайт аналогічного призначення

.1 Аналіз та порівняльна характеристика аналогічних сайтів

Розроблений сайт-візитка використовується громадським закладом «кав’ярня Kameo», у місті Полтава. Цей громадський заклад надає такі послуги:

Проаналізувавши ринок, було зроблено висновок про те, що майже усі схожі заклади-конкуренти надають приблизно однаковий спектр послуг. Підвівши підсумки маємо 14 закладів з якими потенційно буде конкурувати кав’ярня «Kameo». Але тільки у 1 з 14 закладів є веб-сайт, у всіх інших тільки группи у соціальних мережах, або ж зовсім немає інтернет-представництва. Тому до порівняння додалися сайти подібних закладів на території України та світу.

.2 Характеристика сайту кав’ярні «Львівська кав’ярня»

Сайт кав’ярні «Львівска кав’ярня» - це сайт громадського закладу який представляє совю роботу у мережі (Рисунок 2.1).

Рисунок 2.1 - Кав’ярня «Львівська кав’ярня»

Сайт виконаний у стилі Landing Page, тобто вся інформація показана на одній сторінці.

Функціонал, переваги та недоліки висвітлені у таблиці 2.1.

Таблиця 2.1 - Функціонал сайту «Львівська кав'ярня»

.3 Опис та порівняльна характеристика кав’ярні «Кофейня МИ8»

Сайт кав’ярні «Кофейня МИ8» - це корпоративний сайт з нестандартним дизайном (Рисунок 2.2).

Рисунок 2.2 - Кав’ярня «Кофейня МИ8»

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

Функціонал, переваги та недоліки висвітлені у таблиці 2.2.

Таблиця 2.2 - Функціонал сайту «Кофейня МИ8»

3. Опис розробленого сайту

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

Сайт-візитка складається з однієї, або декількох сторінок і дає змогу користувачеві ознайомитися з основною інформацією про, ту або іншу організацію, чи особу, та їх товари або послуги. Такі сайти виділяються з поміж інших за допомогою неповторного дизайну, або інформації. Для зручного дизайну використовуються загальноприйняті паттерни: кольори складаються по певній палітрі, використовується не більше трьох різних шрифтів, які мають розмір не менше чотирнадцятого кеглю, використання полуторного міжрядкового інтервалу та чітке розподілення між абзацами. На малих розмірах екрану елементи повинні мати великі користувацькі елементи (кнопки, поля вводу). Навігація по сторінці повинна бути інтуїтивно зрозумілою, простою та зручною, щоб користувач міг отримати всю необхідну йому інформацію якомога швидше. Якщо сайт- візитка має лише одну сторінку, навігація виконується по найголовнішим елементам (секціям) інформації на сайті. Основною вимогою до таких сайтів являється їх швидкість. Сайт представляє собою «візитну картку» особи або підприємства, тому перехід на нього повинен бути швидким та зручним. Необхідно стискати увесь вихідний код, зображення та асинхронно завантажувати важкі елементи сторінки, якщо вони не являються основним функціоналом. За можливості, використовувати два різні шрифти: стандартний (у наявності на кожному пристрої, тому не 28 потребує завантаження) та дизайнерський (основний шрифт сайту-візитки, який буде завантажуватися на сторінку). Дизайнерський шрифт завантажувати асинхронно та відображати його поступово. Кожне зображення повинно мати декілька вихідних розмірів (маленьке, звичайне та велике) та завантажуватися залежно від розміру екрану. Структура коду повинна бути чітко налагоджена, щоб браузер міг легко орієнтуватися та відображати контент сторінки.[12]

3.1 Завдання дипломної роботи

Завданням дипломної роботи є розробка сайту-візитки комерційного закладу - кав’ярні, розташованої у місті Полтаві за адресою вул. Фрунзе, 7 у готельному комплексі «Галерея».

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

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

3.2 Основні вимоги до програми

Під час створення програмного продукту було використано такі технологій:

-       РНР - скриптова мова програмування;

-       HTML - мова розмітки гіпертексту;

-       JavaScript - динамічна, об’єктно-орієнтована мова програмування;

-       jQuery - найпопулярніша бібліотека мови програмування JavaScript, орієнтована на взаємодію JavaScript з HTML;

-       CSS - каскадна таблиця стилів;

-       Adobe PhotoShop CC - програма для обробки зображень та дизайну.

Для коректної роботи програма потребує встановлення веб-серверу.

Даний програмний продукт надає наступний функціонал:

-       надання інформації про заклад;

-       надання інформації асортимент продукції;

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

-       надання можливості комунікації між користувачем та спеціалістом;

-       надання можливості оформити заявку на замовлення продукту.

Діаграма прецедентів (Додаток А), ілюструє основні можливості програми.

.3 Інтерфейс програми

Програма буде мати вид стандартного сайту-візитки із певними особливостями.

Головне вікно програми буде мати логотип, інформаційні закладки, модальні вікна.

Основними вимогами до інтерфейсу є:

-       зручне розташування елементів для взаємодії з інтерфейсом;

-       адаптивність (чіткий вигляд всіх елементів сторінки на будь-якому пристрої);

-       меню для навігації по сторінці;

-       новітній дизайн у вигляді Landing Page;

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

Знімки екрану (Додаток Б) готового продукту демонструють основний функціонал системи.

4. Опис проектних рішень, інструментів та підходів до розробки з обгрунтуванням їх вибору

Під час створення програмного продукту було використано такі технології:

РНР - скриптова мова програмування;- мова розмітки гіпертексту;- динамічна, об’єктно-орієнтована мова програмування;- найпопулярніша бібліотека мови програмування JavaScript, орієнтована на взаємодію JavaScript з HTML;- каскадна таблиця стилів;PhotoShop CC - програма для обробки зображень та дизайну.[13]

.1 PHP

(англ. PHP: Hypertext Preprocessor - PHP: гіпертекстовий препроцесор), попередня назва: Personal Home Page Tools - скриптова мова програмування, була створена для генерації HTML-сторінок на стороні веб-сервера. PHP є однією з найпоширеніших мов, що використовуються у сфері веб-розробок (разом із Java,.NET, Perl, Python, Ruby). PHP підтримується переважною більшістю хостинг-провайдерів. PHP - проект відкритого програмного забезпечення.інтерпретується веб-сервером у HTML-код, який передається на сторону клієнта. На відміну від скриптової мови JavaScript, користувач не бачить PHP-коду, бо браузер отримує готовий html-код. Це є перевага з точки зору безпеки, але погіршує інтерактивність сторінок. Але ніщо не забороняє використовувати PHP для генерування і JavaScript-кодів які виконуються вже на стороні клієнта.[14]

4.2 HTML і CSS

(англ. Hyper Text Markup Language - Мова розмітки гіпертекстових документів) - стандартна мова розмітки веб-сторінок в Інтернеті. Більшість веб-сторінок створюються за допомогою мови HTML (або XHTML). Документ HTML оброблюється браузером та відтворюється на екрані у звичному для людини вигляді. HTML є похідною мовою від SGML, успадкувавши від неї визначення типу документу та ідеологію структурної розмітки тексту. Попри те, що HTML - штучна комп'ютерна мова, вона не є мовою програмування. HTML разом із каскадними таблицями стилів та вбудованими скриптами - це три основні технології побудови веб-сторінок.впроваджує засоби для:

–       створення структурованого документу шляхом позначення структурного складу тексту: заголовки, абзаци, списки, таблиці, цитати та інше;

–       отримання інформації із Всесвітньої мережі через гіперпосилання;

–       створення інтерактивних форм;

–       включення зображень, звуку, відео, та інших об'єктів до тексту.

Остання версія була представлена у 2014 році під назвою HTML5.

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

Каскадні таблиці стилів (англ. Cascading Style Sheets або скорочено CSS) - спеціальна мова, що використовується для опису сторінок, написаних мовами розмітки даних [ссылка на информацию]. Найчастіше CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML, але формат CSS може застосовуватися до інших видів XML-документів. Специфікації CSS були створені та розвиваються Консорціумом Всесвітньої мережі. CSS має різні рівні та профілі. Наступний рівень CSS створюється на основі попередніх, додаючи нову функціональність або розширюючи вже наявні функції. Рівні позначаються як CSS1, CSS2 та CSS3. Профілі - сукупність правил CSS одного або більше рівнів, створені для окремих типів пристроїв або інтерфейсів. Наприклад, існують профілі CSS для принтерів, мобільних пристроїв тощо. CSS (каскадна або блочна верстка) прийшла на заміну табличній верстці веб-сторінок. Головна перевага блочної верстки - розділення змісту сторінки (даних) та їхньої візуальної презентації.[16]

При створенні програмного продукту були використані HTML5 та CSS3, тому що вони являються найновітнішими технологіями у розробці веб-сайтів. При використанні HTML5 зменьшується розмір коду сторінки, також покращується робота з CSS. Ця технологія у свою чергу надає можливість для створення веб-сайтів за допомогою FexBox методу. Він отримав повноцінну підтримку у 2014 рощі.

Перевагами цього методу є:

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

−       безліч мов у світі використовують написання справа наліво rtl (right-to-left), на відміну від звичного нам ltr (left-to-right) [ссылка на информацию]. FlexBox адаптований для цього. У ньому є поняття початку і кінця, а не права і ліва. Тобто в браузерах з rtl-локалізацією всі елементи будуть автоматично розташовані в реверсному порядку, що автоматично полегшує написання та підтримку коду;

−       розташування елементів в HTML не має вирішального значення. Його можна змінити в CSS. Це особливо важливо для деяких аспектів responsive-верстки [17].

4.3 Java Script і jQuery

Script (JS) - динамічна, об'єктно-орієнтованa [4] мова програмування. Реалізація стандарту ECMA Script. Найчастіше використовується як частина браузера, що надає можливість коду на стороні клієнта (такому, що виконується на пристрої кінцевого користувача) взаємодіяти з користувачем, керувати браузером, асинхронно обмінюватися даними з сервером, змінювати структуру та зовнішній вигляд веб-сторінки. Мова JavaScript також використовується для програмування на стороні сервера (подібно до таких мов програмування, як Java і C#), розробки ігор, стаціонарних та мобільних додатків, сценаріїв в прикладному ПЗ (наприклад, в програмах зі складу Adobe Creative Suite), всередині PDF-документів тощо.Script класифікують як прототипну (підмножина об'єктно-орієнтованої), скриптову мову програмування з динамічною типізацією. Окрім прототипної, Java Script також частково підтримує інші парадигми програмування (імперативну та частково функціональну) і деякі відповідні архітектурні властивості, зокрема: динамічна та слабка типізація, автоматичне керування пам'яттю, прототипне наслідування, функції як об'єкти першого класу.

Незважаючи на схожість назв, мови Java та Java Script є двома різними мовами, що мають відмінну семантику, хоча й мають схожі риси в стандартних бібліотеках та правилах іменування. Синтаксис обох мов отриманний «у спадок» від мови С, але семантика та дизайн JavaScript є результатом впливу мов Self та Scheme. [18]- популярна JavaScript-бібліотека з відкритим сирцевим кодом. Вона була представлена у січні 2006 року у BarCamp NYC Джоном Ресіґом (John Resig). Згідно з дослідженнями організації W3Techs, JQuery використовується понад половиною від мільйона найвідвідуваніших сайтів. jQuery є найпопулярнішою бібліотекою JavaScript, яка посилено використовується на сьогоднішній день.є вільним програмним забезпеченням під ліцензією MIT (до вересня 2012 було подвійне ліцензування під MIT та GNU General Public License другої версії).

Синтаксис jQuery розроблений, щоб зробити орієнтування у навігації зручнішим завдяки вибору елементів DOM, створенню анімації, обробки подій, і розробки AJAX-застосунків. jQuery також надає можливості для розробників, для створення плагінів у верхній частині бібліотеки JavaScript. Використовуючи ці об'єкти, розробники можуть створювати абстракції для низькорівневої взаємодії та створювати анімацію для ефектів високого рівня. Це сприяє створенню потужних і динамічних веб-сторінок.[19]

.4 SASS

У нашому проекті на рівні з HTML та CSS ми використовували CSS препроцесор SASS [24].- скриптова метамова, яка інтерпретується в каскадні таблиці стилів (CSS). Спроектована Гемптоном Кетліном та розроблена Наталі Вейзенбаум. призначений для підвищення рівня абстракції коду та спрощення файлів CSS.

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

Після розробки таблиць стилів за допомогою SASS спеціальна програма перетворює написаний код у звичний CSS.[20]

4.5 Процес розробки

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

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

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

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

5. Економічне обгрунтування

.1 Розрахунок трудомісткості програмного продукту

Загальну трудомісткість , люд-год., можна визначити за формулою (6.1)

де Т_заг. - загальна трудомісткість, людино-години;_еф - ефективний фонд часу роботи розробника за відповідний календарний період, год. Визначається як добуток норми часу (N_час) і коефіцієнта використання робочого часу (k_врч=0,9). Норма часу (N_час) встановлюється у людино-годинах і визначається, у свою чергу, як добуток відповідного затраченого часу на розроблення програмного продукту та кількості розробників за умови виникнення співавторства. При 39-годинному робочому тижні тривалість робочого місяця складає відповідно: січень, лютий - по 156 год., березень, квітень - по 163,8 год., травень - 140,4 год. поточного року._скл. - коефіцієнт, що корегує проблеми контролю вхідної та вихідної інформації (складає 1,08 - 1,1);_м. - коефіцієнт, що корегує використання мови певного рівня складності (мова високого рівня дорівнює 1); _станд. - коефіцієнт використання стандартних програм. У процесі розробки ПП використовуються стандартні модулі та/або пакети прикладних програм, чи типові програми, тому норму часу коригують за допомогою коефіцієнта k_станд = 0,6-0,8._{станд.ПП} - коефіцієнт розробки стандартного ПП (1,2 - 1,6).

Виконуємо розрахунок:

люд-год

.2 Розрахунок собівартості програмного продукту

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

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

де  - заробітна плата розробників ПП, грн.;

- єдиний соціальний внесок, грн.;

- вартість машинного часу, необхідного для розробки та налаштування ПП, грн.;

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

- вартість матеріалів, комплектуючих, грн.

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

де  - основна заробітна плата розробників ПП, грн.;

ЗП_дод - додаткова заробітна плата розробників, грн.

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

де - місячний оклад розробника ПП, грн;

- річний фонд робочого часу. Відповідно до Листа Міністерства соціальної політики України від 09 вересня 2014 року № 10196/0/14-14/13 «Про розрахунок норми тривалості робочого часу на 2015 рік» норма робочого часу на 2015 рiк при 39-годинному робочому тижні - 1957,8 годин;

Основну заробітну плату , грн., визначаємо за формулою (6.5)

де - годинна заробітна плата програміста, грн.;

 - загальна трудомісткість розробки ПП, людино-години (див. формулу 6.1).

Додаткова заробітна плата (премії, одноразові заохочення тощо) розраховується згідно з нормативами, що встановлені підприємством (складають 10-40 % від основної зарплати. Витрати на додаткову заробітну плату , грн., визначаються за формулою (6.6):

де  - нормативний коефіцієнт додаткової заробітної плати (0,1-0,4);

- витрати на основну заробітну плату, грн.

Виконуємо розрахунки.

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

Витрати на сплату єдиного соціального внеску С_ЄСВ, грн., визначаються за формулою (6.7):

де  - коефіцієнт витрат на сплату ЄСВ ();

Виконуємо розрахунки С_ЄСВ:

Вартість машинного часу , грн., необхідного для розробки та налаштування ПП визначається за формулою (6.8):

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

- собівартість однієї машино-години роботи ПК при використанні власного ПП і величина орендної плати за 1 год. роботи ПК за умови, що машина орендується. , грн., визначається за формулою (6.9).

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

де  - кількість робочих днів. протягом яких експлуатується ПК при програмуванні;

- номінальна тривалість цілодобової роботи обладнання, ;

- коефіцієнт враховує втрати часу на обслуговування ПК;

Визначаємо дійсний фонд часу:

Експлуатаційні поточні витрати , грн., на обслуговування ПК визначаємо за формулою (6.10)

де С_ЗПінж - основна та додаткова заробітна плата спеціаліста (інженера-електронника), який обслуговує машину з урахуванням його зайнятості на обслуговування ПК, грн.. Визначається за формулою (6.11)

де О_міс - місячний оклад інженера-електронника, який обслуговує машину;

Ч_і - кількість інженерів-електронників; Рекомендується - 1 чол._розр - час розробки продукту у місяцях;

- коефіцієнт, що враховує зайнятість інженера у даному проекті, що може складати від 20% до 30% часу його роботи. Відповідно k_зайн = 0,2-0,3.

Виконуємо розрахунки С_ЗПінж:

- амортизаційні відрахування, що розраховуються від залишкової вартості ПК і норми амортизаційних відрахувань (річна норма амортизації складає 50% від балансової вартості ПК; ), грн.; амортизаційні відрахування визначаємо за формулою (6.12)

Виконуємо розрахунки С_АВ:

С_рем - витрати на ремонт і профілактику ПК, грн.. Визначаються за формулою (6.13)

де k_рем - коефіцієнт поточного ремонту та обслуговування ПК, що залежить від середньостатистичного нормативу витрат на поточний ремонт і обслуговування ПК, який складає 4% ();

- ціна ПК, грн.;

- кількість необхідних комп’ютерів.

Виконуємо розрахунки С_рем:

- витрати на оплату електроенергії, що за формулою (6.17) (приймаємо чинні тарифи за 1 кВт*год. Електроенергії)

де  - потужність ПК, кВт;

Т_ел - тариф на оплату електроенергії, грн.;

Виконуємо розрахунки:

Розраховуємо експлуатаційні поточні витрати відповідно до 6.10:

Загальновиробничі (накладні) витрати () - це витрати на диски, картриджі, папір для роздрукування тощо. До складу загальновиробничих витрат також можуть належати витрати на освоєння нової розробки; відшкодування зносу спеціальних інструментів і пристроїв цільового призначення тощо.

Враховуючи комплексний склад загальновиробничих витрат, їх норматив можна визначити у відсотковому значенні, що складає 50% від основної заробітної плати розробників ПП. Загальновиробничі (накладні) витрати визначаються за формулою (6.16), грн.:

де  - коефіцієнт загальновиробничих (накладних) витрат.

Виконуємо розрахунки С_зв:

Вартість витратних матеріалів, комплектуючих () рекомендовано взяти у розмірі 10 % від фонду заробітної плати ().

Виконуємо розрахунок :

Адміністративні витрати складають 10-20 % від основної заробітної плати програміста. Адміністративні витрати визначаються за формулою (6.19), грн.:

де  - коефіцієнт адміністративних витрат.

Виконуємо розрахунок С_адмін:

Витрати на збут складають 2,5-5% від виробничої собівартості. Витрати на збут визначаються за формулою (6.20), грн.:

де k_збут- коефіцієнт витрат на збут (k_збут =0,025/0,05).

- виробнича собівартість, грн.

Виконуємо розрахунок С_збут:

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

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

Результати виконаних розрахунків заносимо у таблицю 5.1.

Таблиця 5.1 - Калькуляція собівартості ПП

5.3 Визначення договірної ціни ІП

Ціна ІП (Ц_дог) формується на основі економічно обґрунтованої собівартості його розробки, норми рентабельності, прибутку (певного відсотку торговельної надбавки) та податку на додану вартість (ПДВ) за формулою (6.19) або (6.20)

Де С_пов - повна собівартість або поточні витрати на розробку ПП, грн.;

Р - рентабельність (нормативний рівень Р_норм = 20% від повної собівартості), грн.;- торговельна надбавка (5-10% від повної собівартості), грн.;

Виконуємо розрахунок:

.4 Оцінка конкурентоспроможності ІС

У процесі дослідження виділяються основні технічні та економічні параметри базового та нового варіантів ПП. Також наводяться додаткові функції нового ПП (табл. 5.2).

Виходячи з отриманих результатів, розробка є кращою відносно базового варіанта за такими параметрами:

–       Вартість ІП, грн;

–       Простота та зручність інтерфейсу;

–       Вага ІП;

–       Час виконання запиту;

–       Кiлькiсть людей, необхідних для обслуговування.

Таблиця 5.2 - Характеристика основних техніко-економічних параметрів базового та нового варіантів ІП

За двома параметрами новий і базовий варіанти ІП є ідентичними (3 - кількість функцій ІП, 6 - Можливість нарощування функціональних характеристик), а за параметром 7 (Час відновлення системи після збою) новий варіант продукту поступається базовому.

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

Конструювання еталону конкурентоспроможності ІП.

Еталоном є точка багатовимірного простору (вектор), що утворена за таким правилом: серед показників-стимуляторів (здійснюється позитивний вплив на конкурентоспроможність) відбираємо дані з максимальним значенням, а серед показників дестимуляторів (чинить негативний плив на конкурентоспроможність) відбираємо дані з мінімальним значенням. Визначення еталонного значення наведено в табл. 6.3 (колонки 3, 4).

Інтегральний показник конкурентоспроможності відносно еталона () визначається за формулою (4.22)

де  - величини за і-тим параметром відповідно базового, нового варіанта ІП та еталона.

Результати розрахунків заносимо до таблиці 4.2 (колонки 5, 6).

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

, новий ПП знаходиться на одному рівні з базовим.

Таким чином, базовий ПП переважає за еталон параметрами на 5,6, а новий - на 5,67. Тобто новий ПП є безперечно конкурентоспроможним порівняно з базовим.

Загальна ефективність виробництва нового ІП порівняно з базовим визначається за формулами (6.23-6.24)

де  - величини за і-тим параметром відповідно нового та базового варіанту ПП.

Проте, якщо серед параметрів є такі, для яких максимальне значення є найбільш ефективним, то рівняння  набуває такого вигляду (формула)

Для розрахунку загальної ефективності визначимо відносне значення параметрів нового ІП відносно базового (табл. 6.2, колонка 7).

Розраховуємо ефективність окремого параметра нового ІП за формулами 6.24 і 6.25, результати розрахунків заносимо до таблиці 6.4 (колонки 8, 9):

-й параметр: оскільки в новому продукті вдалось зменшити його загальну вартість, виграш від цього склав: 1 - 0,7923= 0,2077.

-й параметр: вдалося покращити інтерфейс (вдосконалення призвело до спрощення та зручності користування), тому виграш нового продукту складає: 1,25 - 1 = 0,25.

-й параметр: кількість функцій розробленого ІП є такою ж, як і в аналога, тобто лишилась незмінною (1 -1 = 0).

-й параметр: за рахунок скорочення ваги розробленого ІП отримали виграш у розмірі: (1 - 0,4= 0,6).

-й параметр: вдосконалення ІП дозволило покращити (скоротити) час виконання запиту, виграш від цього склав (1- 0,83 = 0,17).

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

-й параметр: незважаючи на проведені вдосконалення, не вдалось скоротити час відновлення системи у випадку збою в роботі комп’ютера, тому програш склав: 1 - 1,33 = -0,4.

-й параметр: завдяки вдосконаленню, вдалось зменшити кількість людей, необхідних для обслуговування, тому виграш складає: 1 - 0,66 = 0,34.

Таблиця 5.3 - Визначення параметрів конкурентоспроможності ІП та показника його ефективності

Відповідно до цього, загальна економічна ефективність складе:

Отже, ефективність виробництва нового (розробленого) програмного продукту відносно базового (аналогу) складає 1,492 що у відсотковому вираженні становитиме 149,2 %.

5.5 Моделювання конкурентоспроможності розробленого ІП та його аналогу

Моделювання оцінки конкурентоспроможності нового ІП базується на побудові номограми для порівняння параметрів конкурентоспроможності. Відповідно, кожній із восьми осей з використанням певного масштабу виміру відмічаються точки, що відповідають певним значенням параметрів, наведені в таблиці 6.2. Лінія, що проходить через них, утворює багатокутник, таким чином отримуємо номограму для порівняння параметрів конкурентоспроможності базового та нового варіантів ІП (рисунок 5.1).

Рисунок 5.1 - Номограма для порівняння параметрів конкурентоспроможності базового та нового варіантів ІП

. Охорона праці

.1 Заходи з охорони праці

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

Комплексні заходи бажано формувати у вигляді додатку до колективного договору, який є невід`ємною складовою колективного договору, а об’єми та джерела фінансування цих заходів належить обумовити у текстовій частині розділу “Охорона праці”. [21]

До комплексних заходів можна включити питання, для прикладу:

−       модернізація технологічного, вантажопідіймального, транспортного та іншого виробничого обладнання згідно з вимогами нормативно-правових актів з охорони праці ;

−       розробка, виготовлення, монтаж нових більш ефективних інженерно-технічних засобів охорони праці;

−       створення та впровадження автоматизованих інформаційних систем охорони праці, систем аналізу і прогнозування небезпечних і аварійних ситуацій на виробництві; створення програмного забезпечення і електронних баз даних з охорони праці;

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

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

−       обладнання спеціальних механізмів і устаткування, які направлені на забезпечення безпечного виконання робіт;

−       застосування більш безпечних засобів транспортування різноманітних вантажів;

−       реконструкція та розширення санітарно-побутових приміщень відповідно до діючих норм, з метою забезпеченості ними працівників; обладнання цих приміщень сучасним інвентарем та приладами;

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

−       створення кабінетів, стендів, виставок з охорони праці, придбання необхідних наглядних посібників, плакатів, демонстраційної апаратури, відеофільмів, контрольно-вимірювальних та інших приладів, літератури з питань охорони праці;

−       розробка проектів положень, інструкцій, інших локальних актів з охорони праці, які діють у межах підприємства, їх тиражування після затвердження роботодавцем; придбання необхідних державних нормативно-правових актів з охорони праці та забезпечення ними посадових осіб та працівників підприємства.[22]

.2 Техніка безпеки при роботі з комп’ютером. Організація робочого місця програміста

Науково-технічний прогрес вніс серйозні зміни в умови виробничої діяльності робітників розумової праці. Їх праця <http://ua-referat.com/%D0%9F%D1%80%D0%B0%D1%86%D1%8F> стала більш інтенсивним, напруженим, які вимагають значних витрат розумової, емоційної і фізичної енергії. Це зажадало комплексного рішення проблем <http://ua-referat.com/%D0%A0%D1%96%D1%88%D0%B5%D0%BD%D0%BD%D1%8F_%D0%BF%D1%80%D0%BE%D0%B1%D0%BB%D0%B5%D0%BC> ергономіки, гігієни і організації праці, регламентації режимів праці та відпочинку.

Робота <http://ua-referat.com/%D1%80%D0%BE%D0%B1%D0%BE%D1%82%D0%B0> з комп'ютером характеризується значною розумовою напругою і нервово-емоційним навантаженням операторів, високою напруженістю зорової роботи <http://ua-referat.com/%D0%A0%D0%BE%D0%B1%D0%BE%D1%82%D0%B8> і достатньо великим навантаженням на м'язи рук при роботі з клавіатурою <http://ua-referat.com/%D0%9A%D0%BB%D0%B0%D0%B2%D1%96%D0%B0%D1%82%D1%83%D1%80%D0%B0> ЕОМ. Велике значення має раціональна конструкція і розташування елементів робочого місця, що важливо для підтримки оптимальної робочої пози людини-оператора.

У процесі <http://ua-referat.com/%D0%9F%D1%80%D0%BE%D1%86%D0%B5%D1%81> роботи з комп'ютером необхідно дотримувати правильний режим праці та відпочинку. В іншому випадку у персоналу наголошуються значна напруга зорового апарату з появою скарг на незадоволеність роботою, головні болі, дратівливість, порушення сну, втому і хворобливі відчуття <http://ua-referat.com/%D0%92%D1%96%D0%B4%D1%87%D1%83%D1%82%D1%82%D1%8F> в очах, в поясниці, в області шиї і руках.[23]

Правильно спроектоване і виконане виробниче освітлення <http://ua-referat.com/%D0%92%D0%B8%D1%80%D0%BE%D0%B1%D0%BD%D0%B8%D1%87%D0%B5_%D0%BE%D1%81%D0%B2%D1%96%D1%82%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F> покращує умови зорової роботи, знижує стомлюваність, сприяє підвищенню продуктивності праці, благотворно впливає на виробниче середовище, надаючи позитивну психологічну <http://ua-referat.com/%D0%9F%D1%81%D0%B8%D1%85%D0%BE%D0%BB%D0%BE%D0%B3> дію на працюючого, підвищує безпеку праці і знижує травматизм.

Недостатність освітлення <http://ua-referat.com/%D0%9E%D1%81%D0%B2%D1%96%D1%82%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F> приводить до напруги зору, ослабляє увагу, приводить до настання передчасної стомленості. Надмірно яскраве освітлення викликає засліплення, роздратування і різь в очах. Неправильний напрямок світла на робочому місці може створювати різкі тіні, відблиски, дезорієнтувати працюючого. Всі ці причини можуть призвести до нещасного випадку або профзахворювань, тому такий <http://ua-referat.com/%D0%A2%D0%B0%D0%BA%D0%B8%D0%B9> важливий правильний розрахунок освітленості.

Існує три види освітлення - природне <http://ua-referat.com/%D0%9F%D1%80%D0%B8%D1%80%D0%BE%D0%B4%D0%B0>, штучне і поєднане (природне <http://ua-referat.com/%D0%9F%D1%80%D0%B8%D1%80%D0%BE%D0%B4%D0%B0> і штучне разом).

Вимоги до освітленості в приміщеннях, де встановлені комп'ютери, наступні: при виконанні зоровихробіт високої точності загальна освітленість <http://ua-referat.com/%D0%9E%D1%81%D0%B2%D1%96%D1%82%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F> повинна складати 300лк, а комбінована - 750лк; аналогічні вимоги при виконанні робіт середньої точності - 200 і 300лк відповідно <http://ua-referat.com/%D0%92%D1%96%D0%B4%D0%BF%D0%BE%D0%B2%D1%96%D0%B4%D1%8C>.[24]

Шум погіршує умови праці <http://ua-referat.com/%D0%A3%D0%BC%D0%BE%D0%B2%D0%B8_%D0%BF%D1%80%D0%B0%D1%86%D1%96> надаючи шкідливу дію на організм людини. Працюючі в умовах тривалої шумової дії випробовують дратівливість, головні болі, запаморочення, зниження пам'яті, підвищену стомлюваність, зниження апетиту, біль <http://ua-referat.com/%D0%91%D1%96%D0%BB%D1%8C> у вухах і т.д. Такі порушення в роботі ряду органів і систем організму людини можуть викликати негативні зміни в емоційному стані людини аж до стресових. Під впливом шуму знижується концентрація уваги, порушуються фізіологічні <http://ua-referat.com/%D0%A4%D1%96%D0%B7%D1%96%D0%BE%D0%BB%D0%BE%D0%B3%D1%96%D1%8F> функції <http://ua-referat.com/%D0%A4%D1%83%D0%BD%D0%BA%D1%86%D1%96%D1%97>, з'являється втома у зв'язку з підвищеними енергетичними витратами і нервово-психічним напруженням, погіршується мовна комутація. Все це знижує працездатність людини <http://ua-referat.com/%D0%9F%D1%80%D0%B0%D1%86%D0%B5%D0%B7%D0%B4%D0%B0%D1%82%D0%BD%D1%96%D1%81%D1%82%D1%8C_%D0%BB%D1%8E%D0%B4%D0%B8%D0%BD%D0%B8> і її продуктивність <http://ua-referat.com/%D0%9F%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%96%D1%81%D1%82%D1%8C>, якість і безпеку праці. Тривала дія інтенсивного шуму [вище 80 дБ (А)] на слух людини приводить до його часткової або повної втрати.

Рівень шуму на робочому місці математиків-програмістів і операторів відеоматеріалів не повинен перевищувати 50дБА, а в залах обробки інформації на обчислювальних машинах - 65дБА. Для зниження рівня шуму стіни і стеля приміщень, де встановлені комп'ютери, можуть бути облицьовані звукопоглинальними матеріалами <http://ua-referat.com/%D0%9C%D0%B0%D1%82%D0%B5%D1%80%D1%96%D0%B0%D0%BB%D0%B8>. Рівень вібрації в приміщеннях обчислювальних центрів може бути понижений шляхом встановлення устаткування на спеціальні вібро-ізолятори.[25]

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

Робоче місце і взаємне розташування всіх його елементів повинне відповідати <http://ua-referat.com/%D0%92%D1%96%D0%B4%D0%BF%D0%BE%D0%B2%D1%96%D0%B4%D1%8C> антропометричним, фізичним і психологічним <http://ua-referat.com/%D0%9F%D1%81%D0%B8%D1%85%D0%BE%D0%BB%D0%BE%D0%B3%D1%96%D1%8F> вимогам. Велике значення має також характер <http://ua-referat.com/%D0%A5%D0%B0%D1%80%D0%B0%D0%BA%D1%82%D0%B5%D1%80> роботи. Зокрема, при організації робочого місця програміста повинні бути дотримані наступні основні умови: оптимальне розміщення устаткування, що до складу робочого місця і достатній робочий простір <http://ua-referat.com/%D0%9F%D1%80%D0%BE%D1%81%D1%82%D1%96%D1%80>, що дозволяє здійснювати всі необхідні рухи і переміщення.

Ергономічними аспектами проектування відео термінальних робочих місць, зокрема, є: висота робочої поверхні, розміри простору для ніг, вимоги до розташування документів на робочому місці (наявність і розміри підставки <http://ua-referat.com/%D0%9F%D1%96%D0%B4%D1%81%D1%82%D0%B0%D0%B2%D0%B8> для документів, можливість різного розміщення документів, відстань від очей користувача до екрану, документа, клавіатури і т.д.), характеристики робочого крісла, вимоги до поверхні робочого столу, регульованість елементів робочого місця.

Головними елементами робочого місця програміста є стіл і крісло. Основним робочим положенням є положення сидячи.

Робоча поза сидячи викликає мінімальне стомлення <http://ua-referat.com/%D0%A1%D1%82%D0%BE%D0%BC%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F> програміста. Раціональне планування <http://ua-referat.com/%D0%9F%D0%BB%D0%B0%D0%BD%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F> робочого місця передбачає чіткий порядок і сталість розміщення предметів, засобів праці і документації. Те, що потрібно для виконання робіт частіше, розташоване в зоні легкої досяжності робочого простору.

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

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

Оптимальна зона - частина моторного поля робочого місця, обмеженого дугами, описуваними передпліччями при русі в ліктьових суглобах з опорою в точці ліктя і з відносно нерухомим плечем.[26]

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

−       ширина не менш 700 мм ;

−       глибина не менше 400 мм ;

−       висота робочої поверхні <http://ua-referat.com/%D0%9F%D0%BE%D0%B2%D0%B5%D1%80%D1%85%D0%BD%D1%96> столу над підлогою <http://ua-referat.com/%D0%9F%D1%96%D0%B4%D0%BB%D0%BE%D0%B3%D1%96> 700 - 750 мм.

Оптимальними розмірами столу є:

−       висота 710 мм ;

−       довжина столу 1300 мм ;

−       ширина стола 650 мм.

Поверхня <http://ua-referat.com/%D0%9F%D0%BE%D0%B2%D0%B5%D1%80%D1%85%D0%BD%D1%96> для листа повинна мати не менш 40 мм в глибину і не менш 600 мм в ширину. Під робочою поверхнею <http://ua-referat.com/%D0%9F%D0%BE%D0%B2%D0%B5%D1%80%D1%85%D0%BD%D1%96> повинно бути передбачено простір для ніг:

−       висота не менше 600 мм ;

−       ширина не менш 500 мм ;

−       глибина не менше 400 мм.

Крісло виконується відповідно <http://ua-referat.com/%D0%92%D1%96%D0%B4%D0%BF%D0%BE%D0%B2%D1%96%D0%B4%D1%8C> до ГОСТ 21.889-76. При його проектуванні виходять з того <http://ua-referat.com/%D0%A2%D0%BE%D0%B3%D0%BE>, що при будь-якому робочому положенні програміста його поза повинна бути фізіологічно <http://ua-referat.com/%D0%A4%D1%96%D0%B7%D1%96%D0%BE%D0%BB%D0%BE%D0%B3%D1%96%D1%8F> правильно обґрунтованої, тобто положення частин тіла повинно бути оптимальним. Конструкція робочого сидіння повинна відповідати таким основним вимогам:

−       допускати можливість зміни положення тіла, тобто забезпечувати вільне переміщення корпуса і кінцівок тіла один щодо одного;

−       допускати регулювання висоти в залежності від зростання працюючої людини (у межах від 400 до 550 мм );

−       мати <http://ua-referat.com/%D0%9C%D0%B0%D1%82%D0%B8> злегка увігнуту поверхню,

−       мати невеликий нахил назад. [27]

.3 Протипожежний захист

До первинних засобів пожежогасіння відносяться: вогнегасники (вогнегасник ВП-10-порошковий з місткістю корпуса 10 л; вогнегасник ВВ-5 - вуглекислотний з місткістю корпуса 5 л); пожежний інвентар (покривала з негорючого теплоізоляційного полотна, грубововняної тканини, ящики з піском, бочки з водою, пожежні відра, совкові лопати); пожежний інструмент (гаки, ломи, сокири тощо).

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

Бочки для зберігання води з метою пожежогасіння встановлюються у виробничих, складських та інших приміщеннях, будівлях та спорудах у разі відсутності внутрішнього протипожежного водогону та за наявності горючих матеріалів, а також на території підприємств. їх кількість у приміщеннях визначається з розрахунку установки однієї бочки, місткістю не менше 0,2 м³ на 250-300 м²захищуваної площі. Такі бочки повинні бути укомплектовані пожежним відром місткістю не менше 8 л.

Ящики для піску повинні мати місткість 0,5, 1,0 або 3,0 м³ та бути укомплектовані совковою лопатою.

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

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

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

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

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

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

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

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

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

Керівники підприємства зобов’язані забезпечити своєчасне виконання правилі вимог пожежної безпеки, організувати на підприємстві пожежну.[28]

сайт візитка кав’ярня програма

Список використаної літератури

1.      Структура сучасного сайту-візитки [Електронний ресурс]

.        Принципи та характеристики сайту-візитки

.        Сучасні тенденції веб-сайтів [Електронний ресурс]

.        Інформація про тенденціях [Електронний ресурс]

.        Адаптивний веб-дизайн [Електронний ресурс]

.        Landing page and Parallax [Електронний ресурс]

.        Фиксация блока меню [Електронний ресурс]

.        Создание слайдеров [Електронний ресурс]

.        Верстка веб-сайту: як у html зробити фон картинкою [Електронний ресурс]

.        Как использовать плоский дизайн? [Електронний ресурс]

.        Створення сайтів [Електронний ресурс]

.        Коротко про сайти-візитки [Електронний ресурс]

.        Adobe Photoshop CC [Електронний ресурс]