Размещено на http://allbest.ru

Вступ

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

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

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

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

1. Загальна частина

1.1 Постановка задачі

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

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

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

1. Навігаційний блок. Інтерактивне меню для користувача:

a) портфоліо;

b) про мене;

c) контакти;

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

В задачу сайта входить:

· надання користувачу інформацію про портфоліо (галереї фотографій);

· надання користувачу дані про виконавця;

· надання користувачу дані про контакти;

Вихідні дані програмного застосування:

· відображення даних про портфоліо(галереї фотографій);

· відображення списку контактів;

· відображення даних про виконавця;

Система має отримувати на вхід від сервера наступну інформацію:

· дані про контакти;

· дані про галерею фотографій;

· дані про виконавця;

1.2 Дослідження і аналіз об'єкту програмування

1.2.1 Про інтернет портфоліо

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

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

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

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

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

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

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

Веб-портфоліо характеризується:

- комунікативної спрямованістю, що дозволяє студентам здійснювати інформаційне взаємодію на базі * портфоліо;

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

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

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

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

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

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

1.2.2 Реклама

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

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

Інтернет-реклама -- реклама, що розміщується в мережі Інтернет, переважно на добре зарекомендованих і популярних веб-сайтах (наприклад, Google); представлення товарів, послуг або підприємства в мережі Інтернет, адресована масовому клієнту і має характер переконання. Інтернет реклама дозволяє вирішувати практично всі завдання, що стоять перед комерційним web-сайтом, будь це Інтернет магазин, сервісні послуги або дистриб'ютори. Інтернет-реклама стає більш доступною для малого бізнесу.

Інтернет-реклама має, як правило, двоступеневий характер:

Зовнішня реклама, що розміщується рекламодавцем у видавців, -- рекламний носій. Види цієї реклами: банери, текстові блоки, байрікі, міні сайти, Interstitials. Така реклама зазвичай має посилання безпосередньо на сайт рекламодавця.

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

Функції реклами

· Створює обізнаність про товари та брендах.

· Формує імідж бренду.

· Інформує про товар і бренд.

· Переконує людей.

· Створює стимули до вчинення дій.

· Забезпечує нагадування.

· Підкріплює минулий досвід покупок.

Види реклами

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

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

1.3 Використані програмні засоби

1.3.1 Мова програмування

JavaScript - це мова програмування, що дозволяє зробити Web-сторінку інтерактивною, тобто такою що реагує на дії користувача.

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

JavaScript - об'єктно-орієнтована скриптова мова програмування і є діалектом мови ECMAScript. JavaScript зазвичай використовується як вбудована мова для програмного доступу до об'єктів додатків. Найбільш широке застосування знаходить у браузерах як мова сценаріїв для надання інтерактивності веб-сторінкам.

Основні архітектурні риси:

· динамічна типізація;

· автоматичне керування пам'яттю;

· прототипне програмування;

· функції як об'єкти першого класу.

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

В JavaScript :

· всі ідентифікатори Реєстрозалежні;

· в назвах змінних можна використовувати літери, підкреслення, символ долара, арабські цифри

· назви змінних не можуть починатися з цифри;

· для оформлення однорядкових коментарів використовуються / /, багаторядкові і внутрішньорядкові коментарі починаються з /* і закінчуються */.

Використання коду JavaScript в контексті розмітки сторінки в рамках ненав'язливого JavaScript розцінюється як погана практика. Аналогом (за умови надання посилання ідентифікатором alertLink)

<a href="delete.php" id="alertLink">Видалити</a>

наведеного прикладу може виступати, наприклад, наступний фрагмент JavaScript:

window.onload = function() {

var linkWithAlert = document.getElementById("alertLink");

linkWithAlert.onclick = function() {

return confirm('Ви впевнені?');

};

};

Винесення в окремий файл

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

<script type="text/javascript" src="http://Шлях_до_файлу_зі_скриптом"> </script>

Атрибути тега script

Тег script, що широко використовується для підключення до сторінки JavaScript, має декілька атрибутів.

Обов'язковий атрибут type для вказівки MIME-типу вмісту.

Проте, згідно специфікації HTML 4.01 в якості значення type повинно бути зазначено застаріле "text/javascript". Тому що JavaScript є мовою програмування за замовчуванням у всіх браузерах, починаючи з Netscape 2, Дуглас Крокфорд дотримується думки про недоцільність використання атрибута type, рекомендуючи вказувати його в XHTML.

Необов'язковий атрибут src, що приймає в якості значення адресу до файлу зі скриптом. Необов'язковий атрибут charset, використовуваний разом з src для вказівки кодування, що використовується для зовнішнього файлу. Необов'язковий атрибут defer, що використовується для того, щоб показати, що скрипт не генерує ніякого вмісту (що означає, зокрема, те, що в цьому скрипті відсутній виклик document.write ()).

При цьому атрибут language language="JavaScript"), незважаючи на його активне використання (у 2008 році цей атрибут був найбільш часто використовуваний у тегах <script>), відноситься до нерекомендованих (deprecated), відсутній в DTD, тому вважається некоректним.

Букмарклети

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

Cascading Style Sheets (каскадні таблиці стилів) - технологія опису зовнішнього вигляду документа, написаного мовою розмітки. CSS використовується переважно для оформлення HTML- і XHTML-документів, але іноді і для інших XML-структурованих документів (наприклад, в браузере Mozilla для оформлення елементів графічного інтерфейсу, XUL). CSS використовується творцями веб-сторінок для завдання кольорів, шрифтів, розташування і інших аспектів представлення документа. Основною метою розробки CSS було розділення вмісту (написаного на HTML або іншій мові розмітки) і представлення документа (написаного на CSS). Це розділення може збільшити доступність документа, надати велику гнучкість і можливість управління його уявленням, а також зменшити складність і повторюваність в структурному вмісті. Крім того, CSS дозволяє представляти один і той же документ в різних стилях або методах висновку, таких як екранне уявлення, друк, читання голосом (спеціальним голосовим браузером або програмою читання з екрану), або при висновку пристроями, що використовують Шрифт Брайля.

Переваги CSS розмітки:

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

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

· Простота подальшої зміни дизайну. Не потрібно правити кожну сторінку, а лише змінити CSS-файл.

· Додаткові можливості оформлення. Наприклад, за допомогою CSS-розмітки можна зробити блок тексту, який решта тексту обтікатиме (наприклад для меню) або зробить так, щоб меню було завжди видно при скролінгу сторінки.

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

Мова HTML існує в декількох варіантах і продовжує розвиватися, але конструкції HTML ймовірніше усього будуть використовуватися і надалі. Вивчаючи HTML і пізнаючи його глибше, створюючи документ на початку вивчення HTML і розширюючи його наскільки це можливо, ми маємо можливість створювати документи, які можуть бути переглянені багатьма браузерами Web, як зараз, так і в майбутньому. Це не виключає можливості використання інших методів, наприклад, метод розширених можливостей, що надається Firefox, Internet Explorer або деякими іншими програмами. Якщо це дійсно служить Вашим цілям і Ви хочете сформувати власну думку про названі програми, користуйтеся ним. Але робота з HTML - це спосіб засвоїти особливості створення документів в стандартизованій мові, використовуючи розширення, тільки коли це дійсно необхідно.

1. Структура HTML документа

Символи, взяті в кутові дужки <> є HTML командами, по яким «браузер» розпізнає, як потрібно перетворити частини тексту, укладені між цими командами.

Документ загалом повинен бути відмічений як документ в форматі HTML. Для цього він повинен починатися командою <HTML> і закінчуватися командою </HTML>.

Документ складається з 2 частин:

- Заголовка (Head),

- Власне документа (Body).

Для виділення заголовка потрібно ввести: <HEAD> Заголовок документа <HEAD> Кожний WWW - документ має назву, яка вводиться в титульному рядку браузера. Для введення титульного рядка в заголовок документа потрібно скористатися наступними командами: <HEAD> <TITLE> TITLE List </TITLE> </HEAD>

Потрібно зазначити, що титульний рядок повинен бути на англійській мові в латинському кодуванні оскільки вона відображається в спеціальних полях браузера. Для запису основного тексту потрібно ввести: <BODY> Основний текст </BODY> Таким чином, загальна схема документа в форматі HTML виглядає таким чином:

<HTML>

<HEAD> <TITLE> Титульний рядок документа </TITLE> </HEAD>

<BODY> Основний текст документа </BODY>

</HTML>

При написанні команд HTML не має значення, якими буквами - рядковими або прописними Ви пишете команди.

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

У HTML - документах використовується 3 види списків:

1. Неупорядковані списки,

2. Упорядковані списки,

3. Списки - визначення.

Неупорядкований список використовує для виділення записів спеціальні символи. Неупорядкований список визначається наступними командами початку і кінця списку: <UL> і </UL>. Кожний елемент списку починається з команди: <LI>.

1.3.2 Середовище програмування

Sublime Text - багатоплатформовий текстовий редактор. Підтримує плагіни на мові програмування HTML, CSS, JavaScript. Програма часто використовується як редактор вихідного коду. Офіційний сайт дозволяє безкоштовно і без обмежень ознайомитися з продуктом, проте повідомляє про необхідність придбання ліцензії. Починаючи з версії 2, Sublime став кросплатформним ПО. З'явилися версії під OS X і Linux.

Sublime Text підтримує велику кількість мов програмування і має можливість підсвічування синтаксису для C, C ++, C #, CSS, D, Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, MATLAB, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL і XML.

Sublime Text містить 22 різні візуальні теми, з можливістю завантаження додаткових. Користувачі бачать весь свій код в правому верхньому куті екрану і при клітці на нього можуть переходити на різні його частини. Редактор пропонує кілька режимів екрану. Один з них включає від 1 до 4 панелей, за допомогою яких можна показувати до чотирьох файлів одночасно. Повноцінний (free modes) режим показує тільки один файл без будь-яких додаткових навколо нього меню. Коли користувач набирає код, Sublime Text, в залежності від використовуваної мови, буде пропонувати різні варіанти для завершення запису. Він також автоматично завершує створені користувачем змінні.

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

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

У Sublime Text представлений великий вибір команд редагування, включаючи редагування відступів, переформатування параграфів і об'єднання рядків.

Менеджер пакетів Sublime Text може бути оснащений менеджером пакетів, який дозволяє користувачеві знаходити, встановлювати, оновлювати і видаляти пакети без перезавантаження Sublime Text. Менеджер пакетів підтримує встановлені пакети в актуальному стані з використанням функції авто оновлення і завантажує пакети з GitHub, BitBucket і настроюються JSON channel / repository систем. Він також підтримує пакети, клоновані з GitHub і BitBucket з використанням Git і Hg, і надає команди для активації і деактивації пакетів. Менеджер пакетів також включає команди для упаковки будь-якій директорії пакета в .sublime-package файл.

SublimeCodeIntel - Можливості: Jump to Symbol Definition, дозволяють користувачеві переходити до визначення символу. Надає в реальному часі автозаповнення інформації. Функція Call Tool-Tips, яка відображає інформацію в рядку стану про поточну функції.

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

Bracket Highlighter - Пакет покращує роботу підсвічування парних дужок в Sublime Text 2. Його можна налаштувати таким чином, щоб для різних типів дужок були різні кольори. Sublime dpaste - Дана функціональність дозволяє користувачам ділитися прикладами вихідного коду. Вибір ділянки коду в редакторі, і при натисканні ctrl + d обраний фрагмент відсилається в сервіс dpaste.com. Після цього даний код може бути переглянутий через браузер і використаний в інших проектах. SublimeLinter - Пакет для статичного аналізу коду, підтримує C ++, Haskell, JavaScript, Objective-J, Perl, PHP, Python, Ruby і ін. Підозрілий код виділяється, і, при натисканні на виділену область, в рядку стану відображається інформація, яка допомагає визначити помилку.

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

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

1.4 Вимоги до апаратного та програмного забезпечення

Для того, щоб запустити програму необхідно, щоб ПК працював під операціною системою (ОС) Microsoft Windows XP - Microsoft Windows 8.1. Для завантаження всього функціоналу буде вистачати 30 mb/s. Рекомендована оперативна пам'ять для перегляда: 2 ГБ. Оперативна пам'ять відеокарти: 500 MB. Рекомендовані браузери: Microsoft Internet Explorer 7.0 або більш пізня версія Mozilla Firefox 3.0 або більш пізня версія Google Chrome.

2. Практична частина

2.1 Створення та налагодження програми

2.1.1 Налаштування середовища розробки

Для створення програми обрано інтегроване середовище розробки модульних кросплатформених додатків Sublime Text 3 з набором плагінів JavaScript Development Tools.

Для встановлення Sublime Text 3 на офіційному сайті Sublime Text в розділі "Завантаження" завантажено sublimetext.rar та розархівовано його.

Розробка проводилася за допомогою стартового шаблона _optimized_gulp_sass_ із вже встановленою розміткою Bootstrap 3.0 для адаптивної верстки, owl_carousel для автоматичного перегляду слайдів, jquery 1.9.1 як допоміжна бібліотека, fontsawensome для певних вставок на сайті.

2.1.2 Використані бібліотеки

Для реалізації програмного продукту було використано наступні бібліотеки:

1. Lazy Load - це jQuery плагін, який дозволяє здійснити відкладену завантаження зображень, що актуально для сторінок з великою кількістю зображень. Зображення завантажуються в міру гортання сторінки користувачем. Використання Lazy Load дозволяє збільшити швидкість завантаження сторінки і зменшити навантаження на сервер.

2. Bootstrap - вільний набір інструментів для створення сайтів і веб-додатків. Включає в себе HTML і CSS шаблони оформлення для типографіки, веб-форм, кнопок, міток, блоків навігації та інших компонентів веб-інтерфейсу, включаючи JavaScript-розширення.

2.1.3 Використанні компоненти

При реалізації програмного продукту були використані наступні візуальні компоненти:

1. Nicescroll дозволяє надати стандартним смугам прокрутки стиль зовні схожий на використовуваний в ios (як у apple). Підтримується зміна як вертикальної, так і горизонтальної смуги прокрутки.

2. Modernizr - це JavaScript-бібліотека, яка дізнається, що з HTML5 та CSS3 вміє браузер користувача. Визначаючи можливості браузера, розробник може зробити відкат деяких функцій для старих версій браузерів. Творці Modernizr називають таку перевірку feature detection, і це набагато ефективніше, ніж просто визначити браузер, його версію і ОС.

3. Magnific Popup - це безкоштовний адаптивний jQuery lightbox-плагін, в якому основний акцент зроблено на продуктивність і надання найкращого відображення спливаючого вікна в незалежності від того з якого пристрою користувач відкрив сторінку. Оновлюйте вміст всередині лайтбоксу, не турбуючись про те, як воно буде змінювати розміри і розташування вікна. Плагін має можливість автоматично перемикатися на альтернативне відображення на мобільних пристроях при невеликому розмірі екрану. За замовчуванням, елементи управління реалізовані на чистому CSS, без зовнішньої графіки. Для переходів зображень використовується CSS3 замість повільної анімації JavaScript. Переходи можна налаштовувати за допомогою CSS3 так як вам подобається. Плагін дозволяє завантажувати в lightbox-вікно відео, карти, форми і контент з інших джерел за допомогою AJAX.

4. Freewall - є крос-браузерним плагіном JQuery, який допомагає вам створити безліч типів макетів сітки: гнучкі макети, макети з зображеннями, вкладені макети сітки, з хорошими CSS3 анімаційними ефектами.

2.2 Опис програми та її алгоритмів

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

Для доступу до сайту необхідно:

1. підключений інтернет;

2. комп'ютер, планшет, смартфон;

3. браузер для перегляду вмісту сайту.

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

2.2.1 Опис функціональності системи

Схематично основні функції системи представлені на діаграмі прецедентів у термінах мови UML на рисунку 1.

Рисунок 1 - UML діаграма прецедентів користувача.

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

Порядок роботи по «діаграми розміщення» представлено на рисунку 2.

Рисунок 2 - Діаграма розміщення для інтернет-портфоліо.

index.html - має властивості головного документу в якості запуску. Цей документ підключається до всіх кореневих папок, які відповідають за дизайн та за функціонал сайту. Підключення сontacts.html та about.html до головного файлу index.html

contacts.html - це документ сторінки “Контакти”, він взаємодіє з іншими сторінками, та відображає головну інформацію для звзяку з виконавцем.

about.html - це документ сторінки “Про мене”, в якому розміщена головна інформація про фотографа та його фотографія.

Структура сайту - розбиття загального змісту на смислові розділи і окремі сторінки із зазначенням зв'язків між ними.

Діаграму структури представлено на рисунку 3.

Рисунок 3 - Діаграма структури сайту.

2.2.2 Опис реалізованих алгоритмів

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

Рисунок 4 - Блок-схема алгоритму взаємодії користувача і системи.

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

Користувач має можливість обрати наступні пункти меню із сайт-бару:

· портфоліо;

· про мене;

· контакти.

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

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

При натискання кнопки «Про мене» відбувається перехід на сторінку, де знаходиться інформація про виконавця.

При натискання кнопки «Контакти» відбувається перехід на сторінку, на якій знаходяться контакти виконавця та форма зворотнього зв'язку.

2.3 Інструкція програміста

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

Автор: Владислав Ралько.

Мова програмування: HTML5, CSS3, JavsScript.

Середовище програмування: Sublime Text 3.

Мінімальні вимоги до мобільного комп'ютера:

CPU: 1.0 GHZ.

RAM: 512 MB (рекомендовано більше 1GB).

Video: 1024x768 чи більш, рекомендоване розширення.

Операційна система: Windows XP чи більш нова версія Windows, з встановленими всіма Service Packs Microsoft .NET Framework: 3.5 Service Pack 1 чи новіше.

Наявність доступу до мережі інтернет.

Microsoft Internet Explorer 7.0 чи більш новіша версія Mozilla Firefox 3.0.

Наявність браузеру: Microsoft Internet Explorer 7.0 або більш пізня версія Mozilla Firefox 3.0 або більш пізня версія Google Chrome.

2.4 Інструкція оператора

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



Рисунок 5 - Головна сторінка в браузері.

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

Рисунок 6 - Екран завантаження контенту у кеш.

Інакше, якщо запуск не перший, то запуск сайту відбудеться швидше, тому що завантаження стилів і скриптів вже було. Вигляд екрану зображений на рисунку 7.



Рисунок 7 - Зображення застосування у браузері.

На головній сторінці сайту відображаються роботи виконавця та зліва розташований сайт-бар (рисунок 8).

З такими пунктами меню:

1) портфоліо;

2) про мене;

3) контакти.

Рисунок 8 - Відображення пунктів меню в сайт-барі.

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

Рисунок 9 - Фільтрація за заданими категоріями.

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

Рисунок 10 - Перегляд фотографій.

Якщо вибрати пункт меню “Про мене” то можливо дізнатися інформацію про виконавця, яка зображено на рисунку 11.

Рисунок 11 - Перегляд інформації про виконавця.

Перейшовши в пункт меню “Контакти” можна отримати необхідну інформацію, як зв'язатися з виконавцем, або залишити заявку за допомогою форми “Зворотнього звязку” зображено на рисунку 12.



Рисунок 12 - Перегляд пункту меню “Контакти”.

3. Організаційно - економічна частина

3.1 Оцінка вартості програмного продукту

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

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

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

Вартість програмного продукту включає:

- собівартість програмного продукту;

- плановий прибуток.

3.1.1 Розрахунок часу

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

Таблиця 3.1 - Структура загального часу на створення програмного продукту.

№ етапу	Позначення часу даного етапу	Зміст етапу
1	ТПО	Підготовка опису завдання
2	ТО	Опис завдання
3	ТА	Розробка алгоритмів
4	ТБС	Розробка блок-схеми алгоритмів
5	ТПІ	Проектування інтерфейсу
6	ТН	Написання програми (кодування)
7	ТВТ	Відладка і тестування програми
8	ТД	Оформлення документації, інструкції користувачеві, записки пояснення

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

Умовне число команд Q визначається за формулою

Q = q з, (3.1)

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

Значення коефіцієнта з вибирається з таблиці 3.3.

Таблиця 3.2 - Значення коефіцієнта q.

Тип завдання	Значення коефіцієнта q
Завдання обліку	1400…1500
Завдання оперативного управління	1500…1700
Завдання планування	3000…3500
Багатоваріантні завдання	4500…5000
Комплексні завдання	5000…5500

Для даного завдання приймається коефіцієнт q = 1400.

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

- група А - розробка принципово нових завдань;

- група Б - розробка оригінальних програм;

- група В - розробка програм з використанням типових рішень;

- група Г - разове типове завдання.

Для даного завдання міра новизни: Г

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

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

- 2 - завдання обліку, звітності і статистики;

- 3 - стандартні алгоритми.

Дане завдання може бути віднесено до другої групи складності низького рівня.

Коефіцієнт ( з ) визначається з таблиці 3.3 в залежності від складності і міри новизни.

Таблиця 3.3 - Значення коефіцієнта з.

Мова програмування	Група складності	Міра новизни
		А	Б	В	Г
Високого рівня	1	1,38	1,26	1,15	0,69
	2	1,30	1,19	1,08	0,65
	3	1,20	1,10	1,00	0,60
Низького рівня	1	1,58	1,45	1,32	0,79
	2	1,49	1,37	1,24	0,74
	3	1,38	1,26	1,15	0,69

Для даного завдання коефіцієнт з = 0,69.

За формулою 3.1 визначається умовне число команд Q.

Q = 1400 0,69 = 966 чол / годин.

Визначається час, витрачений на кожен етап створення програмного продукту:

- Т_ПО (час на підготовку опису завдання), береться по факту і для даного завдання

Т_ПО = 40 чол / годин.

- Т_О ( час на опис завдання ) визначається за формулою

Т_О = Q B / (50 K), (3.2)

де В - коефіцієнт обліку змін завдання. Коефіцієнт В залежно від складності завдання і числа змін вибирається в інтервалі від 1,2 до 1,5. Для даного завдання В = 1,2

К - коефіцієнт, що враховує кваліфікацію програміста. Значення коефіцієнта вибирається з таблиці 3.4.

Таблиця 3.4 - Значення коефіцієнта К.

Стаж програміста	Значення коефіцієнта К
до 2-х років	0,8
від 2 до 3 років	1,0
від 3 до 5 років	1,1…1,2
від 5 до 10 років	1,2…1,3
понад 10 років	1,3…1,5

В даному випадку коефіцієнт К = 0,8.

За формулою 3.2 підраховується час на опис завдання.

Т_О = 966 1,2 / (50 0,8) = 29 [чол. / годин].

- Т_А (час на розробку алгоритмів) розраховується за формулою

Т_А = Q / (50 * K), (3.3)

За формулою 3.3 підраховується час на розробку алгоритмів.

Т_А = 966 / (50 0,8) = 24,2 [чол. / годин].

- Т_БС (час на розробку блок-схеми) визначається аналогічно ТА за формулою 3.3 і складає

Т_БС = 966 / (50 0,8) = 24,2 [чол. / годин].

- Т_Н (час написання програми на мові програмування) визначається за формулою

Т_Н = Q 1,5 / (50 K), (3.4)

За формулою 3.4 підраховується час написання програми на мові програмування.

Т_Н = 966 1,5 / (50 0,8) = 36,2 [чол. / годин].

- Т_ПІ (час на проектування інтерфейсу) визначається за формулою

Т_ПІ = Q / 50, (3.5)

За формулою 3.5 підраховується час на проектування інтерфейсу програми.

Т_ПІ = 966 / 50= 19,3 [чол. / годин].

- Т_ВТ (час відладки і тестування програми) визначається за формулою

Т_ВТ = Q 4,2 / (50 К), (3.6)

За формулою 3.6 підраховується час відладки і тестування програми.

Т_ВТ = 966 4,2 / (50 0,8) = 101,4 [чол. / годин].

- Т_Д (час на оформлення документації), береться по факту і для даного завдання

Т_Д = 40 чол / годин.

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

Т = Т_ПО + Т_О + Т_А + Т_БС + Т_Н + Т_ПІ + Т_ВТ + Т_Д, (3.7)

Т = 40+29+24,2+24,2+36,2+19,3+101,4+40=314,3 [чол. / годин].

або спрощений варіант

Т = Т_ПІ + Т_ВТ + Т_Д, (3.7.1)

Т = 19,3 + 101,4 + 40 = 160,7 [чол. / годин].

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

Основна ЗП визначається за формулою

ЗПосн.=(ЗП 1р Кт Т)/(Чр tp.д.)(1 + П/100), (3.8)

де 3П 1р - місячна зарплата 1-го розряду, грн.;

Кт - тарифний коефіцієнт, відповідний розряду тарифної сітки, за яким працює виконавець;

Т - загальний час на створення програмного продукту, чол. / годин;

Чр - кількість робочих днів в місяць;

tр.д. - тривалість робочого дня в годинах;

П - відсоток премії.

Для даного завдання:

- 3П 1р = 150,00 грн.;

- виконавець має 14 розряд;

- для 14 розряду тарифний коефіцієнт Кт = 3,36;

- загальний час створення програмного продукту Т = 314,3 чол. / годин;

- кількість робочих днів Чр = 21;

- тривалість робочого дня tр.д. = 8 годин;

- відсоток премії П=15%.

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

ЗП осн. = (150,003,36314,3)/(218)(1+15/100)=1084,34 [грн].

Додаткова заробітна плата береться у розмірі 15 % від основної і розраховується за формулою

ЗП дод. = ЗПосн. 15 / 100, (3.9)

ЗП дод. = 1084,34 15 / 100=162,65 [грн].

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

ЗПзагальна = ЗПосн + ЗПдод., (3.10)

ЗПзагальна = 1084,34 + 162,65= 1246,99 [грн].

3.1.3 Розрахунок нарахувань на заробітну плату (єдиного соціального внеску)

Єдиний соціальний внесок нараховується на заробітну плату за формулою 3.11 і складає 35,6 % від загальної заробітної плати

ЄСВ = ЗПзагальна 22 / 100, (3.11)

ЄСВ = 1246,99 22 / 100 = 274,34 [грн].

3.1.4 Розрахунок витрат на збереження та експлуатацію ПЕОМ, що відносяться до даного програмного продукту

Витрати на збереження та експлуатацію ПЕОМ визначаються у розмірі 130% від основної заробітної плати працівників, що забезпечують функціонування ПЕОМ.

До таких витрат відносяться витрати на:

- основну заробітну плату працівників, що забезпечують функціонування ПЕОМ (інженер-електронник; системний програміст; оператор);

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

- амортизаційні відрахування;

- витрати на електричну енергію;

- витрати на матеріали (до їх числа входять диски, картриджі і папір для принтерів та інше);

- витрати на профілактику ПЕОМ з периферією;

- витрати на опалювання виробничих площ;

- витрати на обслуговування виробничих площ;

- інші виробничі витрати.

Розрахунок витрат на збереження та експлуатацію ПЕОМ, що відносяться до даного програмного продукту за формулою

В зб. експл. = ЗП осн. 130 / 100, (3.12)

В зб. експл. = 1246,99 130 / 100 = 1621,09 [грн].

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

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

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

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

- нарахування на заробітну плату (єдиний соціальний внесок);

- витрати на збереження та експлуатацію ПЕОМ, що відносяться до даного програмного продукту;

- інші витрати.

Інші витрати складають 10% від суми перших чотирьох елементів і розраховуються за формулою

І.вит.=(ЗП осн. + ЗП дод. + ЄСВ + В зб. експл.) 10 / 100 (3.13)

І.вит.= (1084,34 + 162,65 + 274,34 + 1621,09) 10 / 100 = 314,24 [грн].

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

Сп.п. = ЗП осн. + ЗП дод. + ЄСВ + В зб.експл. + І.вит. (3.14)

Сп.п. = 1084,34 +162,65 + 274,34 + 1621,09 + 330,51 = 3472,93 [грн].

Структура собівартості програмного продукту відображається в таблиці 3.5.

Таблиця 3.5 - Структура собівартості програмного продукту

Елементи структури	Сума грн.	Питома вага %
1 Основна заробітна плата виконавця	1084,34	32
2 Додаткова заробітна плата виконавця	162,65	5
3 Нарахування на заробітну плату (ЄСВ)	274,34	13
4 Витрати збереження та експлуатацію ПП	1621,09	41
5 Інші витрати	314,24	9
Собівартість програмного продукту	3472,93	100

3.3 Розрахунок ціни програмного продукту

Ціна програмного продукту складається з декількох компонентів і розраховуються за формулою

Ц = Сп.п. + П + ПДВ, (3.15)

де Сп.п.- собівартість програмного продукту, грн.;

П - плановий прибуток, грн.;

ПДВ - податок на додану вартість, грн.

П - прибуток складає 40% від повної собівартості програмного продукту і розраховуються за формулою

П = Сп.п. 40 / 100 (3.16)

П = 3472,93 40 / 100 = 1389,17 [грн].

ПДВ - податок на додану вартість, який береться у розмірі 20% від суми собівартості і прибутку розраховуються за формулою

ПДВ = (Сп.п. + П) 20 / 100, (3.17)

ПДВ = (3472,93 +1389,17) 20 /100 = 972,42 [грн].

За формулою 3.15 визначається ціна програмного продукту.

Ц = 3472,93 +1389,17+972,42= 5834,52 [грн].

3.4 Зведена таблиця показників

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

Таблиця 3.6 - Результати розрахунків

Найменування показника	Сума, грн.
Собівартість програмного продукту	3472,93
Прибуток	1389,17
ПДВ	972,42
Ціна програмного продукту	5834,52

4. Безпека життєдіяльності

програмування алгоритм javascript

4.1 Вимоги до приміщень і організації робочих місць

Загальні вимоги

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

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

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

- належні ергономічні характеристики основних елементів робочого місця;

- а також враховувати такі небезпечні та шкідливі фактори:

- наявність шуму та вібрації;

- м'яке рентгенівське випромінювання;

- електромагнітне випромінювання;

- ультрафіолетове та ультрачервоне випромінювання;

- електростатичне поле між екраном та оператором;

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

Будівлі та приміщення, в яких експлуатують ЕОМ та виконують їх обслуговування, налагодження і ремонт, повинні відповідати вимогам:

НиП 2.09.02-85 „Производственніе здания”,

СНип 2.09.04-87 „Административніе и бітовіе здания”,

„Правил устройства электроустановок”, затверджених Головдерженергонаглядом СРСР 1984 р. (ПВЕ),

„Правил технической эксплуатации электроустановок потребителей”, затверджених Головдерженергонаглядом СРСР 21.12.84 (ПТЕ).

Правил безпечної експлуатації електроустановок споживачів, затверджених наказом Держнаглядохоронпраці 09.01.98 №4, зареєстрованих у Мін'юсті України 10.02.98 № 93/2533 (ПБЕ),

СНиП 2.01.02-85 „Противопожарніе нормі”;

ГОСТ 12.1.004 „ССБТ. Пожарная безопасность. Общин требования безопасности”,

Правил пожежної безпеки в Україні, затверджених наказом Управління Державної пожежної охорони МВС України від 14.06.95 № 400, зареєстрованих в Міністерстві юстиції України 14.07.95 за № 219/755,

СНиП 2.08.02-89 „Общественніе здания и сооружения” з доповненнями, затвердженими наказом Держкоммістобудування України від 29.12.94 № 106,

Сн 512-78 „Инструкция по проэктированию зданий и помещений для электронно-вічислительніх машин”, затверджених Держбудом СРСР,

ДСанПіН 3.3.3.-007-98 „Державні санітарні правила і норми роботи з візуальними дисплеями терміналами електронно-обчислювальних машин”, затверджених МОЗ України 10.12.98, а також вимогами нормативно-технічної та експлуатаційної документації заводу-виробника ЕОМ, чинних санітарних норм, санітарних норм і правил, правил у сфері охорони праці.

Для всіх споруд і приміщень, в яких експлуатуються відеотермінали та ЕОМ, повинна бути визначена категорія з вибухопожежної та пожежної безпеки відповідно до ОНТП 24-86 „Определение категорий помещений и зданий по взрівопожарной и пожарной опасности”, затверджених МВС СРСР 27.02.86, та клас зони згідно з ПВЕ. Відповідні позначення повинні бути нанесені на вхідні двері приміщення.

Будівлі і ті їх частини, в яких розташовуються ЕОМ, повинні мати не нижче ІІ ступеня вогнестійкості. Приміщення для обслуговування, ремонту та налагодження ЕОМ повинні належати за пожежовибухобезпекою до категорії В відповідно до ОНТП 24-86, а за класом приміщення - до П-ІІа за ПВЕ. Якщо відповідно до СНиП 2.09.02-85 ці приміщення повинні бути відокремленими від приміщень іншого призначення протипожежними стінами, то межа їх вогнестійкості визначається відповідно до СНиП 2.01.02 -85.

Неприпустимим є розташування приміщень категорій А іБ (ОНТП 24-86), а також виробництва з мокрими технологічними процесами поряд з приміщеннями, де розташовуються ЕОМ, виконується їх обслуговування, налагодження і ремонт, а також над такими приміщеннями або під ними. Виробничі приміщення, в яких розташовані ЕОМ, не повинні межувати з приміщеннями, де рівні шуму та вібрації перевищують норму (механічні цехи, майстерні тощо).

Робочі місця з відеотерміналами або персональними ЕОМ у приміщеннях з джерелами шкідливих виробничих факторів повинні розміщуватися в ізольованих кабінах з обладнаним повітрообміном. Стіни кабін виготовляються з негорючих матеріалів. Дозволяється виготовляти їх зі скла та металевих конструкцій. У кабіні мусить бути оглядове вікно (вікна). Висота оглядового вікна мусить бути не менше 1,5 м, а відстань віл підлоги не більше 0,8 м.

Відповідно до ДСанПіН 3.3.3-007-98 „Державні санітарні правила і норми роботи з візуальними дисплейними терміналами електронно-обчислювальних машин”, затверджених МОЗ України 10.12.98, є неприпустимим розташування приміщень для роботи з відеотерміналами та ЕОМ у підвалах та цокольних поверхах.

Площу приміщень, в яких розташовують відеотермінали, визначають згідно з чинними нормативними документами з розрахунку на одне робоче місце, обладнане відеотерміналом: площа - не менше 6,0 м², обсяг - не менше 20,0 м³, з урахуванням максимальної кількості осіб, які одночасно працюють у зміні.

Стіни, стеля, підлога приміщень, де розміщені ЕОМ, повинні виготовлятися з матеріалів, дозволених для оздоблення приміщень органами державного санітарно-епідеміологічного нагляду.

Обслуговування, налагодження і ремонт ЕОМ, вузлів та блоків ЕОМ слід виконувати в окремому приміщені (майстерні).

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

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

Підлога всієї зони обслуговування, ремонту та налагодження ЕОМ, вузлів та блоків ЕОМ має бути вкрита діелектричними килимками, термін використання яких після їх випробування на електричну міцність не закінчився, або викладена ізольованими підстилками (шириною не менше ніж 0,75-0,8 м) для ніг.

Приміщення, в яких проводиться паяння, крім того, повинні відповідати вимогам СП 952-72 „Санитарніе правила организации процессов пайки мелких изделий сплавами, содержащими свинец”, затверджених головним санітарним лікарем СРСР 20.03.72.

Приміщення комп'ютерних класів (залів), в яких проводиться навчання на ЕОМ, крім зазначених у пункті 1.2, повинні мати суміжне приміщення (лаборантську) площею не менше 18 м2 з двома входами: в учбове приміщення та в коридор (на сходову клітку).

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

У приміщеннях з ЕОМ слід щоденно проводити вологе прибирання.

У приміщеннях з ЕОМ повинні бути медичні аптечки першої допомоги.