1. Repository at ChSTU
  2. Випускні кваліфікаційні роботи
  3. Бакалавр
  4. 121 Інженерія програмного забезпечення (Інженерія програмного забезпечення)
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/9194
Title: WEB-орієнтований додаток для продажу комплектуючих альтернативної енергетики
Authors: Катаєва, Євгенія Юріївна
Андрієнко, Владислав Миколайович
Issue Date: 17-Jun-2022
Abstract: АНОТАЦІЯ Кваліфікаційна робота бакалавра на тему: «WЕВ-орієнтований додаток для продажу комплектуючих альтернативної енергетики». Мета кваліфікаційної роботи - розробка адаптивного Інтернет порталу для автоматизації продажу обладнання альтернативної енергетики, яка,дозволить значно знизити витрати, пов’язані з обміном інформацією рахунок використання засобів комунікацій, поширення прас-листів, організації онлайн диспетчерської служби за рахунок зворотного зв'язку. Розроблений повнофункціональний адаптивний корпоративний Інтернет портал компанії, що повністю задовольняє всім вимогам, поставленим на етапі постановки завдання , та готовий до застосування. При розробці Інтернет порталу компанії використано модульне проектування, що в майбутньому дозволить легко розширювати його функціонал. Портал є адаптивним, тобто здійснюється його коректне відображення на більшості сучасних мобільних та планшетних пристроїв, що дозволяє залучити нових потенційних клієнтів.
ANNOTATION The work “WEB-oriented application for the sale of alternative energy components» The purpose of the final work is the development of an adaptive Internet portal to automate the sale of alternative energy equipment, which will significantly reduce the costs associated witl1 the exchange of information through the use of communications distribution of price lists the organization of online control service at the expense of the inverse communication. The full-featured adaptive corporate portal of the company is developed, which fully meets all the requirements set at the stage of the task setting, and is ready for use. The Internet portal has used modular design, which in the future will allow you to easily expand its functionality. The portal is adaptive, that is, it is implemented correctly on most modern mobile and tablet devices, which allows you to attract new potential customers. In addition, the offered in the final work, the portal is cross-browser, which means the same display in most browsers and is а significant advantage over the existing Web-sites and competitors' portals. А compilation of the adaptive Internet portal project, which is an integral part of its optimization, has accelerated the downloading, of its Web pages, provided the possibility of finding links to the portal of company in the main search engines one of the first then portals or Web competitor sites.
URI: https://er.chdtu.edu.ua/handle/ChSTU/9194
Appears in Collections:121 Інженерія програмного забезпечення (Інженерія програмного забезпечення)

Files in This Item:
File Description SizeFormat 
Кваліфікаційна робота бакалавра Андрієнко Владислав Миколайович.pdf
  Restricted Access		24.27 MBAdobe PDFView/Open Request a copy
Show full item record


Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.

Extracted text 
-
11111 ТР! СТІН) ( СВІТИ І ІІЛУКИ УКРАЇНИ 
111 Іі\ J\HJ>)I ЛІ JІИі,і ТЕ ІІОJІОІ 'ІЧНИЙ УНІВЕР ИТЕТ 
Фа, у.111 , 1 І11фt \ 1 І!ІІtііі1111 т • 11011о r ·ій і сист м 
1,aф1.: J\J н 111 ( 11н1 11101 о ·шfіс111с 11с11 11я ,штомап110Rаних си тем 
Поиспювальна записка 
JIO кuа 1іфі ющій1юї робот11 бакалавра 
з напряму 11ідг товю1 121 «Інженерія програмного забезпеченняп 
(<>сні 11 11,n-кna 1іфіка111ІІ1111n рі11с1 1 1,) 
на тему: 
\ ЕВ-ОРІЄНТОВАНИ11 ДОДА ТОК ДЛЯ ПРОДАЖУ КОМПЛЕКТУІ-ОЧИХ 
АЛЬТЕРНАТИВНОЇ ЕНЕРГЕТИКИ 
Виконав: студент ПЗС-1944 
Напряму підготовки 
12] «Інженерія програмного забе.:, печен Н}І •' 
(шифр і назва напря 11 1 у nіJ.rотовк11 1 
Студент ----~А=н;,=.д:,.~::р...:...;і=є н:...:..к=о,...:.:::.В..:·:..:..t\1..1.:. .,. _____  
( 11 рі]ВІ ІІІІ~ 1 а і 11і 1 1іа ІІІ) 
Керівник _____.с, -К=ас-;-т.:..:..RЄ· =в=п'-Є'"'--'.:..~:..О..::::.....: ..._ ___  
( 11pi"J1111111,· 1а і11 і 11і .1.1 11 І 
Рецензент ---------
(11рі \ll lllllt 1:1 і 11іці ,1111) 
ЛІІОТЛЦІЯ 
КnnліфікnціН11а робот11 бакшншра на тему: «WЕВ-орієнтований додаток 
для продnжу ком1шскгу10ч11х ш11_,тср1шт11вtю'~' енергетики». 
Мста ква.11іфіющііі1юї р0Gот11 - ро'3робка а;щптивного інтернет-порталу 
;tля :штома,,11 ·~,щії \1JIOJtaжy 06т1;он111ш1 ш11,тсртпиrнюї енергетики, яка 
до· в,).11нть з11ач1ю 31111 ·тт11 1111тр:н11 1 11ов 1 111аr1і 1 обміном інформаuією за 
ра:ху1нж н111<t)!Нtс ·ин1ш1 засобів 1шму11і1<аrtій , 1юширсння прайс-листів, 
,р1 ·ані ·~,щії он.11.,Н11 J\1tc11cт1J<.'\)CJ,кoї служби за рахунок ·торопюго -зв'язку. 
РtУ'1ю6.11~НІІ\\ 11ов1юфу111щіо11ш11,1111й адаптивний корпоративний інтернет-
1юрта.11 ком11анії1 що 110nні ст10 задовольняє всім вимогам, поставленим на 
'тапі постзноnкн завдання , та готовий до застосування. При розробцj 
інт~рнет-порталу компанії використано модульне проектування, шо в 
,зйб 1тньо 1у дозвол 11ть легко розширювати його функціонал. Портал є 
адаnтнвни 1, тобто здійснюється його коректне відображення на більшості 
сучасних мобільних та планшетних пристроїв, що дозволяє залучити нових 
потенційних клієнтів. 
ANNOTATION 
Tl1e woгk «\VEB-oгie11ted application for the sale of altemative energy 
co111po11e11ts» 
ТЬе ршроsе of tЬе fіпа} woгk is tl1e development of an adaptive Intemet 
po1ial to aнtomate tl1e sale of alteгnative energy equipment, which will 
sigпificantly гeduce the costs associated witl1 the exchange of information through 
tJ1e use of co111111u11icatio11s ' d. ist1·ibution of ргісе }ists t11e oг0' с anization of 
coпt1·ol seгvice at tl1e ехрепsе of tЬе inveгse comшuпication. The ful 
adaptive co11JOгate рогtа] of tl1e соmрапу is developed, ,vhich fнlly 
1·equiremeлts set at tl1e stage of tl1e task settiпg, and is геаdу for use~ 
poгtal J1as used modulaг desigл, wl1icl1 in the future will allow you to 
its fuпctioпa lit y . ТІ1е poгtal is adaptive, that is, it is i111ple111e11ted с 
mоdегп шоЬіІе апd tablet devices, ,vl1icl1 allo,vs you to а 
customers. Іп aclditioп , tl1e offeгed in tl1e fiпal work, the ро 
w]1ich шеапs 1І1е sa111e tiisplay іп шost bюwseгs and is а sign' 
tl1e existiпg \Vcl)-sites апd competitoгs' po11als. А com 
Interлet рог!аІ pгojcct , wl1icl1 is ап iпtegгal pat1 of its opt 
tl1e dowпloadiлf!, о/' іІs Wcb pages, pt·ovided tl1e possi 
рогtаІ of со111р:111у і11 111~ 111аі11 seai·c\1 engiпes 011е oft 
co111petitoг sites. 
Форма No У-9.01 
Чrрюн.·мшіі ;trр,юш1111іі тсх11оло1 · і 111111й університет 
Факу.11 1,тст і111 Ю )МШ ііі1111х 'І 'СХІІОJІОІ ' ііІ і CIIC1Cl\l 
- iiion 11 11 IIІllnfl) 
І{афс;ч)а 11 )t)І ' шм1ю1 ·t, · 111(k1111..·11c11m11111 ·1омат111оrщ1111х систем 
(rн,n11111111ina) ----------
11:н~рям ІІЇ )\1\)1\\1\1\'ІІ ІІІЖШ 1 іІ'1}111РОІ1 1Л~ІІІОІ'О JЛr;J ·:'1111 : 1 1ш11я 
(KOJI, 1111 11111) -----------
(.'11 \'Ніа .111,нkп, 12 1 (\ 11ІЖШ1 іРН1111'0І 'РЛ ~ 1ІІОІ'О '.ІЛІіПІІІ:'ІЕfІІІЯ» 
(k!І) І . 1111\ІНІ) ----------
ЗАТВЕРДЖУЮ: 
Зав. кафедри~ 
.. J!i_,· CJZ 20 ~ . 
ЗАВДАІІНЯ 
на юиtліфіющіііну роботу баюІ.fІавра 
" Бакалавр " 
( llaJIIII рІВІіЯ ) 
студенту Андрієнко Владислав Миколайович 
(пріз1н1щс, ім 'я , по б11т1, ков і ) 
1. Тема проекту (роботи) WЕВ-орієнтований додаток для продажу комплектуючих 
альтернативної енергетики 
затверджена наказом по університету від "07"02 2022 р . №45/04 
2. Термін здачі студентом закjнченого проекту (роботи) "Об" 06 2022 р. 
3. Вих ідні дані до проекту (роботи); Операuійна система - Microsoft Windows 7/10. 
розробити адаптивний інтернет-портал. що дозволить значно знизити витрати компавіі 
пов 'язані з обміном ах 1нок вика истання засобів ком · 
(6/lЗІ{ачаються кількісні або (та) якісні 11оказ1шк11 . якu.11111ов1111е11 від11оаіда11111 об ·єкт прое. 
наукового досл ідж·еfІІrя) 
4. Зміст розрахунково-пояснювальної записки (перелік питань, що їх належить. 
1 Анал і з п )е метної області 
2 Опис існ 'IOLJИX ішень та аналогів 
3 Опис 11 юектного )ішення 
4 П )()ект 1вання а аптивного по тал 1 
5 ВисноІЗки 
б о щтки 
5. І lt-pc11i1<1 р афічного матеріалу 
СТІ'У Кї У І'ІІІ МО)tЕЛІ ІІІТЕРНЕТ-ПОРТАЛУ ТА ЙОІ 'О ОПЮВІІІІ\ ~!ОДУЛІВ 
<1, І \JJIOBII A СТОРІІІІ<А», «ІJОСЛУП1», «ГАЛП'Е}І», « КОІІ І \1' ПІ\), 
6. Л.ата BIIJ\:l'li заВJЩІІ ШІ 08.02.2022 · 
І 11 Н' ІІ)tІІJJІІІІіі ІІJІІІІІ 
(11рІ JІІІ ІІІІ С. i11i11 iri11 11 ) 
,, -
1І а ·нш l п111 і в I на ,іф і, тtііі11ої pofi0111 С-1 рок виктrання етапів 
При ,, 
' 11 .~вра II JlOC J< І у ( рОfJ<УГИ ) 
І lll ll"c )/ < )/N І < ·1: ІJl l)I ЛІО'! ІІіі ВІ11, ·r111, 
І . І ll<"'<Т ІІЮІ3Л.: І 3 1/. 11 ЛІОТІ!ІЇ 
// B l!NJ/f 
/ ,_ nuu· т пл.·. , з. ш ·ц1111, ЛІОТНЙ В11кr1~ 
1.3 /7()/'(),'lЖІ·.'ІІІfЯ 3.1/3/l, /ll/{}I .ІІІОТІ!Й B!!iїJt : 
І . ./ З.п ви>, lЖІJІШІ JA ІЩ. 11 (/(}І JІІОТ!ІЙ Bm, r111 
- O CH0IU-IA п:~)l(Я БЕРЕЗЕІ!Ь І B11n11 
__/  Пt,'ll>II' .\1.-J ТЕРІА.ІІШ БF.РЕЗЕНЬ Bн1,r1f; 
.4 Н. І. 7 / ІІІ.ПЯ.\'/13 PIII/Elf/fЯ ПОПА ІЗ.ПЕІІОЇ 
--~ 3.ЩА ЧІ БЕРЕЗЕІІЬ ВІІІ,ГJ1 
... з 0ФОР.\fЛЕІІІІЯ ПЕР/J/СІІОЇ РЕДАІЩІЇ РОБОТІ/ КВ!ТЕ/-ІЬ Вт:о, , 
.)'  ]АЛ.:Г!ІОЧ/-1.·І СТ,.JДІЯ КВІТЕНЬ Вт.:он 
ОФОР,\ІЛЕІ ІНЯ пояr, ІІО/3 .. /.ПЬ ! !ОЇ ЗА П! /('/( f,f 
3.1 РОБОТІ / 
, КВІТЕ/-11:, B111<.·r11 
.) __ -
ЗАТВЕРДЖЕНІ/Я РОБОТІ/ 
, , ТРАВЕНЬ B 11f.·u1 
.) . .) РЕЦЕНЗУВАННЯ РОБОТІ/ ТР.-ІВЕНЬ В 111-:он 
гудент 
Андрієнко В.М. 
(11рі з в11 ше та і11 і 1lіал 11 ) 
(І І і , l lll l l') 
Керівн ик роботи 
Катаєва Є.Ю. 
( 11рі 3вище 1 а і 11і ці ли) 
ЗМІСТ 
СПИСОК СКОРОЧUІІІ> ТЛ УМОUІІИХ ІІОЗІІЛЧЕІІІ, ......................................... 3 
ВСТУІ 1,,,,,,,, ,,,,,, ,,,, ,. .. ,. ., . ... ,. .......... ~ .. ........................ .... .......... .... ............ ....................... 4 
І АІ ІЛЛІ З І ІРЕ)\МЕТІ 10\' ОШІЛСП ....................................... ......... .. ... ................... 6 
1\ 1  1\)_JH, 1,ор1юр,ПІІНІЮІ 'О І11тср1tс' І ' • ІІортнлу ................................. .. ..... .. .. ......... ..... 6 
1.2 1k oб:xiJ\ltkл, ро ·чюGюt а;щ11т111111оr ·о І 11тсr11ст- rrорталу ..................... .. .. ........ 7 
1.3 11~)11>1'\ТН \\1сl)- l'Пііту ............... .... ...... ........................... ............................ .. .. ...... .. 9 
2 0111 К lCl ІУ10Ч11Х P11JJEHЬ ТЛ ЛІ ІЛЛОГІВ ................................................... 15 
2. 1 Кор1юрапшнні1 портnл «Енергія Природи» .. .. .... .. ..... .... .... ................. ... ........ 15 
2.2 lнтернет-nортnл «Ес0Тоw1ш ................. .. .. ........ ........ ... .. ...... ....... .. ..... .. ... .. ........ 16 
2.3 l{орnоративний портал компанії «RenEnergy» .................... .. ............... .......... 17 
2.4 Обїрунтування доцільності розробки адаптивного Інтернет-порталу ........ 18 
3 ОПИС ПРОЕКТНОГО РІШЕННЯ ........................................................................ 20 
3.1 Формальна постановка задачі ................................................................. ......... 20 
З .2 Вибір програмного забезпечення розробки ........ .. ....... .. ......... ........................ 20 
З.З Вибір системи керування версіями ............................ ...................................... 22 
3.4 Вибір інформаційних технологій розробки .................................................... 24 
4 ПРОЕКТУВАННЯ АДАПТИВНОГО І_НТЕРНЕТ-ПОРТАЛУ .......................... 31 
4.1 Розробка структурної моделі адаптивного Інтернет-порталу компанії ....... 31 
4.2 Встановлення препроцесора SASS та його компілятора Compass ............•.. 35 
4.3 Проектування спільних елементів ................................................................... 39 
4.4 Розробка головних об'єктів Інтернет-порталу .............................. '"" ....... _.....,.._,.,.. 
BJ1CJ--JOBJ{l1 ...... ................................................................................ .. 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ .................................. ""' 
додл·г1<и ........ ..........................................................................  
Pn., nn,i Л11 їрЇ\ 111,0 ІЗ .М . 
\JJ\ t·Y.22 l 9SH.OO І 11'3 
СННСОІ\ СІ(ОРО'ІЕІІІ) ТЛ У~10ВІІИХ IIOЗIIЛ 1fF:Jfl, 
CS " - Cascшli11g Stylc Sl1ccts - Каскадні таблиІ(і стилів 
1 :тр - 1::іІс Тпшsrсг РгоtосоІ - Протокол передачі файлів 
HTML - НурегТсхt Markup Laпguage - Мова розмітки 
гіпертекстових документів 
нттr - НурегТехt Тгапsfег Protocol - Протокол передачі даних 
HTTPS НурсгТехt T1·a11sfe1· Pгotocols Security - Захищений 
протокол передачі даних 
NPM - Node Package Manager - Менеджер пакунків. 
РНР - НурегТехt Ргерrосеssоr - Гіпертекстовий препроцесор. 
SASS - Syпtactically А wesome Stylesheets - скриптова метамова, 
J яка інтерпретується в каскадні таблиці стилів CSS. 
-І . . 
SEO - SеагсІ1 Engine Opti111ization - Пошукова оптю,11зац1я 
І 
І V 
І , саиту. 
скв l - Система Керування Версіями. 
1І ) ( І · .22 1< J5R.OO І JП  
ВСТУІІ 
В ;щ1111іІ час Іkсс11ін1н І Іа11ут1111а І11тсрнст з;юбула високу необхілнkть. 
1,іл1,111kп, ком11анііі і 11р11ват1111х осіб, вmrосяпJ свою діяли,ісп, в Інтернет, 
о~новною од11111щсю якш·о є сайт. Саtіт - це потужний інструмент реклами, 
«<)6л11ччя» організації. 
Сайт ззвждн доступний відвідувачам 24 години на добу в будь-якій TOLJUi 
світу. Розробка сайту 11еобхід11а будь-якої організації, яка піклується про свій 
імідж і процвітанні. Сайт - це зручна можливість дати кожному повну 
інформацію про товари і послуги, витративши на це набагато менше коштів, 
ніж на рекламу по телебаченню і в пресі. 
Це можливість зробити свій бізнес більш доступним споживачу і менш 
витратним. З моменту появи в мережі сайт буде приносити нових клієнтів, а 
значить приносити прибуток. 
Головна перевага створення сайту, яку можна виділити, - це розширення 
ринку збуту товару. Як це працює? Сайт допомагає компанії підтримувати старі 
1 встановлювати нові зв'язки на ринку, він стає інструментом поширення 
інформації про компанію та її бізнесі, так як повноцінний WеЬ-сайт компанії 
надає документи, фото, аудіо- і відеоматеріали, необхідні для формування 
правильного уявлення про діяльність і можливості компанії. всім бажаючим. 
Компанія , яка успішно працює на традиційному ринку, за допомогою 
WеЬ-сайту може охопити велику цільову аудиторію, хоча б тому, що відстань 
не грає в Мережі такого принципового значення, як у реальному жиnі~ може 
реал 1зувати вилучену демонстрацію товару для просування продажів 
pгo111otioll) , WеЬ-сайт забезпечує цілодобове надання послуг клі 
партнерам , тому що в Інтернеті не буває перерв на обід і сон. We 
потребу санітарної обробки, тому він може функціонувати цілод: 
чином , ком11:111ія 11 е втратить клієнта, якому потрібні 11ослуr11 абс)-
про бі :шсс п тр11 год,11111 11011і. 
За допомогою \1/еЬ-сайту з'являється 
операпшн111ї зворtп1111й зв'язок з клієнтами в будь-якій т 
маркет111-1гові доr.1 1ід:;1\е1111я. 
Ч)~ТУ .22 195R.ООІ rп 
Л"tуа.н,ніс11,. 1t a СЬОІ 'ОJ\ІІіш11ііі ДСІІІ, ІІС МОЖЛИFЮ уявнтн, що жодна 
у~ні111на комнанія не мас власного корrюрат11R1юго порталу, де клієнт може: 
ді · нат11ся 11ро компанію, зроб11п1 замовле1111я , або в режимі онлайн задати 
111пання яке i1oro цікавнть. 
Тому розробкn корпоративного порталу дозволить залучати нових 
потенuі11н11х клієнтів для компанії «Solar Garden», а також з його допомого 
провод11п1меться реклама послуг компанії. 
Відвідувач зможе на Інтернет-порталі слідкувати за новинами компанії та 
її індустрії, ознайомитися з виконаними об'єктами компанії, та наразі 
зацікавленості переглянути відгуки про компанію від клієнтів, які вже 
скористалися послугами компанії «SоІаг Gaгden». Також при потребі, відвідувач 
зможе залишити свої контактні дан і для того, щоб спеціалісти ко~шанії 
зв'язалися з ним в телефонному режимі. 
\ І ) \'І' ,22 l 95R.OU І l frj 
POJJ(IJI І 
ЛІІЛJІІЗ ІІРЕДМЕТІІОЇ ОГ.ЛЛСТІ 
1.1 Ро.ІН) І(ОІ)ІІОJШТІІВІІОГО ІІІ 1 ·с1н1ст-11орталу 
Перш нм і найважливішим елементом компанії є корпоративний Інтернет­
nортrш . На нього посилаються вс1 інші елементи, а значить, якшо 
~-.:орnоративний портал відсутній , то компанія практично позбавлена сенсу. Цей 
~-.:анал поширення інформації про товари і послуги стає таким же важливим і 
незамінним для виробників, як і ін . 
Користувачі мережі Інтернет найбільше цінують інформацjю. Тому, зміст 
\VеЬ-сторінок є одним з ключових моментів, на який необхідно звернути увагу 
nрн розробці Інтернет-порталу, і яке дасть величезну перевагу перед 
конкурентами в разі розміщення потрібної користувачеві інформації. Зміст, 
представлений на WеЬ-сторінках повинен відповідати таким умовам: 
- відповідність меті створення сайту; 
врахування особливостей цільового сегмента споживачів; 
- інформація повинна бути певною мірою унікальною, щоб привернути 
увагу відвідувачів, тим більше, що в Інтернет існує безліч схожих WеЬ-сторінок 
. . . 
1 конкуренц1я м1ж ними досить сильна; 
- інформація повинна бути оперативною. Для шдтримки штересу до 
сайту його необх ідно постійно оновлювати і модернізувати. Чим частіше буде 
відбуватися оновлення інформації на сервері - тим вище буде інтерес і, 
відповідно, відвідуваність сайту; 
- об'єктивність і достовірність. Відвідувачі, що виявили помилкову а6о. 
неточну інформацію, навряд LJИ повторно звернуться до цієї сторінки: 
- . . . ' 
шдсутн1сть надм1р1ю нав язливого рекламного характеру. 
Інтерес кор11стувзчів ]нтернет може бути прикут11П до зовсім ін 
що не від1юся·1 t,ся до nідповідної фірми або товару. Іноді вон 
підозрюют1> 111)0 ic11ynat111я і11формації, яка могла б вшш11т11ся · 
очевидно, що 11ублікуюч11 інформацію, не пов'язану безносе 
збуту, можл1ню ·3а6сз11сч11т11 додаткову увагу до свого п 
«Solar Gагdсп» була спюрс11а 1ш початку 2015 року. За тр 
, ІJ\ТУ .22 І 95R .(Ю I rп  
1ч,~,1'111 .11а нсл111,111і 111 J1ях, ·tGim)111111111111 свої oбornпr і стаrнтr rmrpoкo Аілпмою в 
мkті Чсрка~н ,·ан рсгіощ,х України. 
(\ оl:н· Gnгdcrш - компанія , яка сфокусована на розвиток інженерних 
рішень з внкор11ста1111ям с11ерrозберігаючих технологій та альтернативних 
джерел енергії. Основною спеціалізацією є соняt~ні електростанції під Зелений 
Тариф, як для фізичних осіб потужністю до 30 кВт, та й юридичних осіб 
промнслового призначення. 
Компанія займається проектуванням, продажом і монтажем устаткування 
альтернативної енергетики в цшому - гелюсистем , теплових насос1в, 
автономного зрошення. «Solar Gaгden» надає своїм клієнтам як повний пакет 
послуг, так 1о креме супровщ: 
юридичне - оформлення і підключення «зеленого» тарифу. 
технічне - попередній аналіз об'єкта, проектна документація. 
Компанія вірить в те. що кожен, вклавши мінімум коштів і зусиль, може 
отримати максимум вигоди як для себе так і для природи. Мета компанії -
с 
показати I навчити як правильно економити, а так само зарооляти на 
альтернативних джерелах енерп1. 
1.2 Необхідність розроб,ш адапт11вного Інтернет-порталу 
Компанія вирішила створити корпоративний портал для зручносп 
постійних клієнтів і залучення нових потенційних клієнтів. 
Зручність для постійних покупців полягає в тому, що д1знатися 
інформацію про, послуги , ціни , нов11н11 компанії, вони зможуть, просто 
зайшовши на портал компанії в ]11тер11еті. Там же вони зможуть більше 
ді знатися про компанії, залишити заявку на зворотній зв'язок та ін. 
Також компанія, хотіла щоб більше людей 
компанісю та її послугами цілодобово. Компанія 
корпоративного порталу пр11виде до з11ач11ого з1111жснrія внтрат, пов 
обміном інформацією за рахунок в11кор11етшшя засобів комунікацій, 
прайс-листів, диспетчерську службу і зш,чне збільшення ,8 
отр11мшшя інформації. 
ЧJ t 1· .22 l 95R.OO І І І'З 
1,\щ11,н1ія «Sotaг ОапІс11», 11ок11 1 не 11ла11у(· 111,хід 1іжнародннй рівень, алжс 
;\. я ~тнщ,~ння нсл11111х 1 ·ор11 ·ю11таль1111х порталів, які налають свої послуги не 
ті.n1,кн на тсрнторії Украї1111 . але і за кордон 11еобхід11і досить серйст,і 
вкладення та команда для розробки такого порталу, так і його оптимізаuію та 
рекламу. 
У власності ко tпанії є вся необхідна орrrехніка та додаткові приміщення, 
необхідний товар111111 запас створення корпоративного порталу підніме імідж 
фірми з1шз11ть в11трати на од11н1щю продукції, що продається, забезпечить 
підйо 1 продажів за рахунок залучення нових клієнтів і забезпечить зручність 
постійним і потенційним покупцям. 
На сьогоднішній день практично кожна організація має власний \VеЬ­
сайти або Інтернет-портал. В умовах використання сучасних інформаційних 
технологій - це необхідний фактор існування, що дозволяє розширити поле 
рекламної діяльності та залучити тим самим додаткових клієнтів. 
Створення та розробка сайтів включає: 
с:: V 
затвердження початкового технічного завдання на розрооку саиту; 
визначення структурної схеми сайту - розташування розділів, 
. . ... 
контенту I нав1гац11; 
- WеЬ-дизайн - створення графічних елементів макету сайту, стилів і 
. . ... 
елемент~ в нав1гац11 · 
- розробка програмного коду, модушв, бази даних ішш1х еле:\1ентів 
сайту необхідних в проекті; 
- тестування і розміщення сайту в мережі Інтернет. 
Під час проходження перед кваліфікаційної практнкн булн постаалені 
настулн1 завдання: 
проан:1лізуш1т11 вже 1снуючу модель \VеЬ-сайту компанії 
GaІ"den» і зроб1п11 в11с1юnок про те, що необхідно створнтн в новому Ін 
порташ; 
в11бір тех1юлоrі1ї н1 програ~\ІІшх засобів для створенНJJ 
Інтернет-порталу; 
- розробка НТf\11 .-каркзс;J головної сторінки Інтерн 
► 
'І) \ І 'У .22 l 1J5H.OO І І П 
tJ Н1нш1 н, \\'t•lн:aiity 
lнфtчщ:щія, J\oc1·y1111a корнстува,,ам І11теrне1, ротга11ювуєп,ся на 
кtн,н1 'ютерах (\1/сl)-ссрвсрах), ,ш яю,х встановлено сr1с11іалше програмне 
· а6сзнсчсння . Значна частина цієї інформації організована у вигляді WеЬ­
сайтіn. Кожен з них мас своє ім'я (адреса) в Інтернет. 
\VсЬ-сайт - це інформація , представлена в певному вид1 , яка 
І озташовується на \VеЬ-сервері і має своє ім'я (адреса). Для перегляду Web-
V • ' • • • • 
сзипв на комп ютер1 користувача використовуються спец1алью програми, яю 
називаються браузерами. Залежно від того, яке ім'я (адреса) сайту ми 
поставимо в рядку «Адреса», браузер буде завантажувати в своє вrкно 
відповідну інформацію. 
\\1еЬ-сайт складається з пов'язаних м1ж собою WеЬ-сторінок. WеЬ­
сторінка являє собою текстовий файл з розширенням *. html, який містить 
текстову інформацію і спеціальні команди - НТМL-коди, що визначають в 
якому вигляді ця інформація буде відо~ражатися у вікні браузера. Вся графічна, 
аудіо- та відео-інформація безпосередньо в \1/еЬ-сторінку не входить і являє 
собою окремі файли з розширеннями *. gif, *. jpg (графіка), *. mid, * .mрЗ (звук), 
* .а,, і (в ідео). У НТМL-коді сторінки містяться тільки вказівки на такі файли. 
Кожна сторінка WеЬ-сайту також має свій Інтернет адреса, який 
складається з адреси сайту і імені файлу, що відповідає даній сторінці. Таким 
1 J11J-юм, \\ІеЬ-сайт - це інформаційний ресурс, що складається з пов'язаних між 
собою гі пертекстових документів ('\\'еЬ-сторінок), розміщений на WеЬ-сервері і 
має інд11відуаJ1ьну адресу. Подивитися \VеЬ-сайт може будь-яка людина, що має 
комп 'ютер, п ідключений до lнтернет. 
Офіційної класифікації сторінок в І1-1тер11еті не існує, але є основні 
характеристики , за якими можна розділ11т11 і снуючі сайти, службовці діловому 
СВ І Т)'. 
Саііт візитка 
Саме той набір інформації, пош11рс1111я якої в І1пернеті, безе 
1,ор1 н.:1ю як 1ючнншочим, так і акулам бі ·ш~су. І tc своєрідний дов 
фір:--tу, шшіі ~1іст11ть всі необхідні контактні ,r1д11і та інформацію 
Ч)t t·Y.22 l 95R.OO І t П 
І\\ЩІ1,'1Іії. 1t c tt~шннна 6уп1 кщю, ю,, ,,і гю1 і 11аіі11ажливі111а інформанія про Вас , 
Н,шюї сфері J\ЇИ J11,1юсті, і11'1срссах . ІІс ваrто rtсрсвантажуванr Ваш сайт-ві1нтку 
і нф\)Jщ,щісю, яка ~южm11ю не з11адоб11п,ся rютс111{ійному клієнту або пщrгнеру. 
llрнклад сайту віз11т1<и зображено на рисунку 1.1. 
Рисунок ] . І - Приклад сайту візитки 
Сайт-візитка - це: 
зручний засіб для промацування rрунту ринку; 
недорого; 
швидко; 
вигідний для організацій , у яких бізнес здійснюється не в Інтернеті. 
Корпора111ив1-1ий саііт 
Більш серйозним виглядом представництва компанії в Інтернеті є 
корпоративні сайти. Це обов 'язковий інструмент успішного бізнесу будь-якої 
компанії. В першу чергу, сайти подібного роду допомагають формувати 
позитивний імідж компа11ії, залучають нових замовників, які можуть не знати 
про існування даної фірми на ринку, і , відповідно, розширюють рннок збуту 
компанії. За допомоrаю 1сорпорят11вноrо сяйту клієнти і замовн11к11 отрнмують 
інформацію про ці11и 11а тuт1ри і послуги в зручному вигляді. Значно збільш 
прибуток Ви зможете 111л я хоr-1 1нща 1111я можлнвості робнтн замовлення 
клієнтам прямо в І 111 ер11 е·1 і , ш І3:ш1іfі сторінці. або давати клієнту 
зв'язок за допомогою саіі,у . 
-
11)\TY.22 1<J5R.OOI Jf'J 
11р11ю\:щ '<Щ)Іюра 111111ю1 ,о raii ,,у ·ю6ражс11иИ 11н рисунку 1.2. 
3-.rot..,'°11K1~t 
~•J~""""" 
-~, 2. 1\"e~k~•t.-~ ,'Іа1 0.,: 1,r­ 8\ц.111,._,е,,1,,.._у. NмІ• се,-у. 
.,. І,,ре-у,,.~., 50-рt,.,ч•Жо11"~, 100А І,4о0(018)О!І9-80-75 Tenec,ow(05Jll5)79-1'-89 
ТсІ\ІФ8,,с ~ ) 7ti\l,34,88 i...nr t900A,018.00 
,....,,,, ,ІІООАоІ800 Сб ,stOO.t,0 1600 
С8 ,9.00 1.0 1600 
Рисунок 1. 2 - Приклад корпоративного сайту 
Отже, корпоративний сайт - це: 
доказ серйозності і перспективності Вашого бізнесу; 
гідне представництво Вашої компанії на ринку; 
найдешевший і масовий спосіб реклами Вашого бізнесу; 
зручно і комерційно виправдано. 
Промо-сайт 
Прекрасним рекламним шструментом може служити промо-сайт. 
Особливо, якщо Ви плануєте провести рекламну компанію окремого товару або 
послуги (заходи) . 
Структура промо-сайту сама по собі п~винна в11конувати функцію 
рекламного проспекту або буклету, і привертr1т11 увагу клієнтів. Також на 
такому сайті можна помістити ту інформацію, як:1 не поміститься на сторінці 
:журналу, в радіоповідомленні, телев ізійному ролику. Обсяг промо-сайту- до 
І О сторі 11ок, на яких можна розм істити дані про компанію, 11ю1ря1'ІОК діяльності: 
просувається послугу, контакт1-11 дан 1. 
Окремо 1ювідомляється інформація про акцію, і3 зазначенням те 
місця 11ровсдс11Ш1 , умов участі, новин і т.д. 
І Ір11 кл::щ промо сайту зображений на р11су11ку І .З. 
1 1 ; iтY .22 1 1>sx .001 r п 
Рисунок 1.3 - Приклад промо-сайту 
Промо-сайт - це: 
- використання можливостей Інтернету для впливу на щльову 
аудитор1ю ; 
- донесення до потенційних кшєнтш максимум інформації про товар 
або послугу; 
- потужний ефективний 1нструмент реклами компанії окремих 11 
продукпв. 
Сай111-вітри1-1а 
Бюджетним варіантом реклами будь-якої компанії є сайт-вітрина. Якщо 
компанії необхідно продавати в Інтернеті один конкретний товар або групу 
товарів, то цей тип сайтів ідеально підходить для неї. На таких сторінках 
знаходиться вся інформація , необхідна для того, щоб клієнт 11обач11в, 
зацікавився і купив даний товар, н е відволікаючись на новини та поснла~шя. Це 
структурований каталог продукції компа11ії. Цей каталог організований таким 
чином (фото, опис, ціна) , щоfі кліє11т зробнв якомоп1 менше натнскань клавіщ, 
для того, щоб знайти потрі() 1111іі товар. 
Сайт-вітри11а - це: 
максимальниі1 пр1-1Gу1 ок 11р11 мінімп.пь11ому вкладенні сил і з 
стабільний дохід; 
11)\1 . .2 2 195Н .ООІ ІП 
- \Ю'\ІІ\111\НІІіі імі )tЖ І<ОМІІ:ІІІЇі. 
11р11к.11а;\ саіі 1·у•ні 1-р1111а ·ю(іражс1111іі на р11су11ку 1.4. 
Рисунок І .4 - Приклад сайту-вітрини 
l11mep11em люгазин 
Н а відміну в ід сайту-вітрини, де кшєнт може 11обачити наявність вс1х 
товарш, за допомогою Інтернет-магазину кл ієнт може ще й зробити 
замовле1111я , вибрат11 варіант розрахунку, спос іб отрш.1а1-111я заl\Іовлення 
отримат11 рахунок на оплату. Такий са11т пов1111ен бути зручним і 
фу111щіо11аJ1ь1111м , щоб nідвідувач міг легко знайти те, що йому потрібно, 
відправит11 товnр в корзину і оформити покупку n кілька кліків. Інтернет­
маrаз1111 істотно зменшить в11трати компанії, так }ІК 11е треба орендувати 
приміще1111я для магазину, 11 е треба платити зар()біп1у 
Серед ІІІІІІІІ Х 11ерСR[ІГ: величезна ауд11тор1я, l\ЮіК.1 111131СТЬ 
необмеже111111 :ко1л 11 1\ 1 е 11т товар~ в, своєчасно реагуш-1111 11а зміни н 
враховуват11 потµе611 клієнтів і ін. 
'IJ\TY.22 195~.oo І rП  
tlрІІ К.11:\)\ 111 l'l'J)IICt· М,11 1\'ІІІІІУ ·ю(іра>І<С ІІІІЙ Іtа rнсу нку 1.5. 
"' ,. ...... а " 
,.. ..... ... 
.. ...... 
'• :- .. , . ' ....... . р 
' --.,-•·-~· -
. ...... .....~ . .. 
-
-- llj : • - ~ 
Но-(Т6'(!( 
, .t  .І  .І  .' .. . ДSІJS Х$S.1'ІЛ 
.,,...,.. .._ ____ -
..... 
,.., .
о ,. .  
•• І ... 
.- ..... . . ... ·• 
, .... _ ...._ о,,# 
... ,_ .... .... --· 
Рисунок 1. 5 - Приклад Інтернет-магазину 
Інтернет-магазин - це: 
нові можливості для бізнесу; 
розширення ринку збуту; 
залучення широкої аудиторії кл і єнтів; 
скорочення витрат. 
\\ )\ 1 · у .22 1fJ 5R.(IO І fl '3 
PO'JJ(IJI 2 
ОІНІС ІСІІУІО1 ІІІХ l'IIIIEflf, ТЛ ЛІІЛJІОПJJ 
2.11(орнора1111н111іі 11орт:1;1 «Е11с1н·ін Іf р11родю) 
... 
<,1:нсргія 11рнродн» - український корпоративний портал КОМГJаНІІ 
<,ЕнсрІ'ія прнрощш, яка надає послуги в індустрії альтернативної енергетики. 
Компанія мас ш11рок11й спектр послуг починаючи від сонячних систем і 
зак1нчуюч11 nстаноnленннм теплових насосів . 
\VеЬ-сайт корпоративного порталу: l1ttps://www.zeleniy-tarif.com/ 
Особливості WеЬ-сайту: 
- функція переключення мови (українська, російська. англійська); 
- блог з новинами від компанії «Енергія природи»; 
- сторінка з виконаними об'єктами компанії. 
Серед особливостей варто відмітити і деякі недоліки \VеЬ-сайту: 
- не зручний дизайн для відвідувача; 
- портал загружається занадто повільно (за допомогою серв1су 
«\Vebpagetest» проаналізовано портал і його загрузка становить 15с., що 
означає погану оптимізацію порталу. 
Зовнішній вигляд корпоративного порталу компанії «Енергія природи» 
представлений на рисунку 2.1. 
. - ' 
' 
' 
----~--=----~ 
! 
''  На:..;11 
НС&ОСТН 
- \ ;
'І  . :  
Рисунок 2.1 - Гш1он11J сторінка корпоративного порталу «Енерrія 
'f) \l 'Y.22 1<J5H.OOI rп 
2.2 t,н '-'ІНІt.•1 ·•11щн 11.11 «1(соТо,vю> 
<,l=~-\,.1\,\\'1')) - с11сніалі ·ю11а1111іі pccyrc rrro алr,тсрнанrтrу енергетику в 
УкраУні, )\С 1,ож1111іі oxo1J11ii южс слідкувати ·_ш новинами аш,тернативно1 
снср1-ст11к11 та в разі 11отрсб11 с11ілкуват11ся на форумі . 
Місія «ЕсоТо\.\111» : 
- поліпш11т11 екологічну с11туацію в Україні ; 
з 1енш1п11 енерrет11ч11у залежність; 
... 
11011уляризуват11 використання відновлюваної енерп1 та 
енергозберігаючих технологій. 
Інтернет-портал «ЕсоТоwп» має привабливий та зручний у використанні: 
- на відміну від вище описаного порталу присутня зручна і зрозуміла 
вав1rац1я; 
- є можливість поспшкуватися з адміністрацією порталу та 1ншими 
відвідувачами за допомогою форуму; 
- зручний пошук по порталу. 
Зовнішній вигляд головної сторшки Інтернет-порталу «EcoTown» 
представлений на рисунку 2.2. 
~ ecotown ,'!1 новини ЗРОБИ САМ ПОРАДИ для ДОМУ подіі ФО!'І'М р 
У травні 2018 року нв cтcnni• 'УІсраїнв не виrрібнn яма для 3,5 тис rрн 38 5 місяців: Ак ОТТ В )'краіІtІ tte06JUA110 
кредити українці 3влучили брудних виробництв Дані~' • на Полтавщині 3аробnяt на rюperмнyni RАВ·18рІІфІІ-
рекордних 534 млн. rрн. nктивісти ро,діnьному зборі аід)(оАіа Обленерrо 
,: J·· ~~·~.,~ 
"•;. A,. :j 
·'. '- 
,R 
1 , ., ""' 
1t .. !. / '~•JA•~ 
І ,-•_...,. 
Рисунок 2.2 - Головш1 сторі11кн І11н:р11rт-1юрталу < 
1І )Р .. 22 l <J5R.(IO І r П 
1J 1,щню1шн11н111іІ 1111р111 . 11щм111111їі «І{ 11Er1cr~ >> 
"Ht'\\E\\ 'І '!l >> 1шм11а11ін ,rка сrrрнмошнrа на 11ащ.11111я комплексних послуг в 
~~ нячнііІ t'ІІСр1 ·с11щі . І ·шюш111іі офіс ,r кої ротга 11юваний в Кн ві . Компанія ма 
~ні 11 к,)р11орап11щ 111і 11ортал. 
Кщ 1101 ат1ш1111іі портал знаходиться за такою адресою: 
l1tt )s : //п~11е11сг 1.co111 .t1a/. 
Корпо1 апш11111ї по1лал «І\е11 Е11егу» має ряд перева г: 
- швидке зава11тажен11я порталу; 
- адаптація під сучасні мобільні та планшетні пристрої; 
- перехід на власний Інтернет магазин. 
Також присутні недоліки, такі як: 
- застарілий дизайн; 
- незручна нав1гац1я по порталу; 
- відсутність новин компанії. 
Зовнішній вигляд головної сторшки Інтернет-порталу «RenEnerg)')> 
представлений на рисунку 2.3. 
'І);, 
~~ Роаnюгци,~ ЛроК'DВ 
( ~ вwоб'"'""""'с• ''"І""" 
Гелиосистемь, под ключ: 
. для горя чего водоснабжения 
-для поддержания отопления 
, -i-".!·.,.-..,-=· для обогрева басейна 
Рисунок 2.3 - 811rю1л 1( )J 1он1юї сторінки корпоративного по 
't) tJ'Y,22 11J5K.(IO I rп 
2.~ or,, І'У " 1у 1ш11ш1 1щнІ. 11, 110с I І rю JJюfi,ш ~щ:нr r11n1юr о І 1нер11ет-
1юр 111.11~• 
С11іл1,1юю о~:06.пнвістю, 110з1 ·ля11унrх вище аналоr·ів, с те, rrю їх переважна 
бі.11 1,шіст~) не r ащнповаr-юю 11ід використання для перегляду на рі -томанітних 
суч~юнrх мо6ільн11х та планшетних пристроях , порівняння наведено в 
та6.11 11uі 2.1 . 
Відмінністю розглянутих шrалопв та корпоративного порталу «Solar 
Gагdеп)) - полягає в наявності функції зворотного зв ' язку на Інтернет-порталі 
«Solai· Gагdеп», яка наддасть можливість легко бути на зв'язку з клієнтами в 
зручний для них час. 
Запропонований Інтернет-портал «SоІаг Garden», що розробляється У 
випускній роботі бакалавра, матиме коректне відображення інформації за 
рахунок адаптивності та універсальності в різних браузерах та на більшості 
сучасних мобільних та планшетних пристроїв. 
Таблиця 2.1 
Я1сісна оцінка існуючих аналогів та запропонованої моделі 
фун 1щіонування Інтернет-порталів 
No Інтернет-портали Переваги Недоліки 
Наявність інформації Тривале 
Корпоративний портал про виконані об'єкти в завантаження 
«Енергія Природи» межах м . Одеси та Інтернет-порталу 
Одеської області. (15 с.) . 
Ба. гатофунк-. 
цюнальн1сть, 
Інтернет-портал наявн1сть Відсутність 
2 
«Есо Т О\-'v'П» форуму для кросбраузерності 
зворотного зв 'язку з 
компан1єю 
Корпоративний портал Швидке завантаження Зnстарілнй дизайн, 
з 
«R еп Епегgу» порталу(до б с.) незручна навігація 
Адаптош1н111і під всі 
пристрої. 
Аrtа1ІТ1ш11ий Інтернет-
Швидке завшпnже11ш1 
4 портnл компанії «SоІаг 
порталу. 
G<1 гсІс11 » 
Фу111щія ЗВL)рот~ юго 
зв'язку 
'f)(I .22 l<J)R.00 І f IJ 
\ k1юн11і футщії аї\ан н1111ю1 о І II rсрнс r - r10r·r:н1y ко~rrrанїі <<Solar (iarclcn,1: 
11срсІ'JlЯЛ інформ:щії про ,1і ят,11 ісп, коІ\ІГІ~lfІії <(Solar (jardcn,); 
- 11t'рсrля;\ 1ювн11 в обл ас ri cylfac1111x тсхнолоrі й альт ернатнвної 
снср,~пtкн; 
- перегляд і11фор~1ації про сучасне обладнання альтернативної 
енергетики ; 
- розрахунок вартості nстшrопле11шr та монтажу обраного обладшшня 
альтернатнвної енергет11к11 в залежності від їх технічних характеристик, 
виконуваної задачі та побажань замовника; 
- можлив1сть переглянути вже виконані роботи ко rпанії в р1зних 
регіонах України по встановленню та супроводу обладнання альтернативної 
енергетики; 
- оптим1зац1я Jнтернет-порталу для просування обладнання 
альтернативної енергетики «SоІаг Gaгden» в пошукових системах (Google, 
Yandex тощо); 
- можлив ість зворотного зв'язку з компанією «Solar Garden». 
'І) \ t· .22 І 95К .ОО І f 11 
l'OJJ(IJI J 
Ot1tlC ttl'Of.:l(TIIOJ'O І'ІІІІЕІІ ІІЯ 
-'· 1 \.})орма.,н,11а Іtос 1: нюнка за1щ•1і 
~1с~\,ю л.аної в1111уск11ої роботн бакалаора є розробка адаптивного 
lt11\'))НСт-порталу л.ля І<о~11ш11ії «Solar Garden». Портал повинен мати коректне 
ні ,1.06ражсння інформ~щії за рахунок адапп,вності та універсальності в різних 
6раузс1 зх тз на більшості сучас1111х мобільних та планшетних пристроїв. 
в . . 
адаппшному Інтернет-порталі повинн1 бути реал1зован1 таю 
можлнвосп: 
- ознайомлення відвідувача з послугами компанію та роботою компанії; 
- функціонування зворотного зв'язку компанії з клієнтом; 
- зручне відображення порталу на всіх пристроях, з яких здійснюється 
перегляд порталу; 
- модуль з виконаними роботами компанії; 
- швидке завантаження Інтернет-порталу; 
- однакове відображення Інтернет-порталу у всіх браузерах. 
З огляду на поставлен і завдання WеЬ-сайту, обрано наступю 
інформаційні технології та програмні засоби розробки такого роду 
корпоративного порталу: 
- HTML5; 
- CSSЗ(SASS/SCSS); 
- Ja,,aScipt (Jqueгy); 
- РНР; 
- NPM; 
- GLІlp. 
3.2 B11Gip програм11оrо забезпе•1е11ш1 розробю1 
Серслошнцем розробки адаптивного І нтер11ет-11орталу 
131І '3ІН1 11ено сучас11ий програмний пакет \\lcbStoг111 від компанії JetBrains, 
11ащк кор11стувачу широкі можливості для розро61,:11. 
k1Вг:1і11s \VebStoпл - інтегроване середов11 щс 
НТ 1\ _ 1 а CSS під компанії JetBrains, розроблс11а 11а ()С1юві платфор 
'1)\1' .. 22 195R.OOI rп 
\І)\ ;,\ . \\\~l,Stoп" t· с11сніа.11і ·нн1а11шо ІІ<.'рсі(Іо 1'І1rStorrr1, r1rоrю11ую 1 1н Аслнку 
11і, МІІ\)ЖІІІІУ 3 ІІЩ" МОЖЛІІІюсн:і\ . 
\\ (-l,Stotщ заGс·тсч)е авто;\о~ювнсншr, аналі1 колу 11а льоту, навіrанію по 
}-.'(),'~\ рсфак1·ор1111г та інтсграrtію 3 снстсмамн yrrraвлimrя версіями. Важливою 
п~'рСtШ'ОЮ інтсгровшюго ссрсдошнца розробки WebStorm є робота з проектами 
(У тому числі, рефакторннг коду JavaScript, що міститься в різннх файлах і 
теках проекту, а також ВІ<ШІДеtюrо в HTML). Підтримується множинна 
вкладеність (коли в докуІ\Іент на HTML вкладений скріпт на Javascript, в який 
в~-:ладено інш1111 код HTML, всередині якого вкладений Javascript) - в таких 
конструкціях підтримується коректний рефакторинr. 
lt 3
: »@= t : :щ,:' ,Н:е: 1,:t•ro : ,'t ·! ! цz1 :п, 
А І 
і о • . ' ' 
-( • .~ k~6," 
· ~•·: ... .. J"; •• 
t' ... t;
.... 
 ··• ~ ,;. t' 
.. ..... ••r •І • • l( t 
'•~• t ', • • t ' ' І' • t І о ' ., ' • О І 
... • • ' І • •• І • , • • • 1,, 
,, ,,, 
. ." •• ••• І 
:
. . . .. ,. . 
, .. 
О ; ,· r 
. ... ' .. ' · . 
•• І 
.. ' .,., 
. . . . . ~ 'j . .. : ' : ' . . .. . 
n 
Рисунок З .] - Середовище розробки WebStoгш 
Мо:жливості И1ebSto,-m 
- модифікація файлів.сss, l1t111l ,.js з одночасним переглядом результатів 
(Live Edit, в деяких джерелах ця фу11кціональність називається «редагування 
файлів на льоту» або «в ре:-~лшому часі» або «без перезавантаження сторін 
- підтримка I-ITMLS; 
підтримка JSDoc; 
- підтр11мка Noc\e.js; 
11)\ І'У .22 l 95R.OO І rП  
,ож.1111но~ 1і  / ,t'H ('щІінg і Ett1111rt; 
- ·щсн:щжсння ко;tу на JavaScript; 
- ні ; ншснс 1юз1чна1111я 1а 11rотоколаш1 ГJ'Р, SF'TP, на монтор,аних 
м~р~жсв11х nнсках тощо з маж 11вістю автоматичної сн11хроні1а11ії; 
- інтеграція з с11стсмами управління версіями St1bversion, Git, GitHub, 
Рсгtо1·сс1 МсгсшіаІ CVS підтримуються з коробки з можливістю побудови 
спнску змін і nідкладен11х змі11 ; 
- інтеграція з системами відстежен11я помилок. 
Приклад розробки WеЬ-сайту для компанії Solar Garden в WebStorm 
зображений на рисунку З.І. 
3.3 Вибір с11стем11 1ссрува11ня версіs1м11 
Система керування версіями (англ. source code management, SСМ) ­
проrрамний інструмент для керування версіями одиниці інформації: вихідного 
коду програми , скрипту, WеЬ-сторінки, WеЬ-сайту, ЗО-моделі , текстового 
документу тощо. 
Система керування версіями - інструмент, який дозволяє одночасно, не 
заважаючи один одному, проводити роботу над груповими прое1-сгами. 
Системи керування версіями зазвичай використовуються при розробці 
програмного забезпечення для відстеження, документування та контролю над 
поступовими змінами в електронних документах: у сирцевому коді застосунків, 
кресленнях , електронних моделях та інших документах, над зміна:\Ш яки..х 
одночасно працюють декілька людей. 
Кожна версія позначається унікальною цифрою чн лперою) 
доку 1е 11ту занотовуються. Зазвичай також зберігаються дані про ав 
3робле11ої Зl\1 і1111 та її час . Інструменти для контролю nepciti входять до СКJІ 
баrал,ох і 1 пеrровяннх середовищ розробки. Іс11уют1, два основні типи с 
керувш 1 ш1 верс і }1 м 11 : з це11тралізованим схов11щеJ\І п1 р03поділеш~м. 
\ 1[1 СL,оrод11іш11і~ день існує дуже багато с11стс~1 керування верс· 
ЯІ< : 
- Со11с111те111 \Іегsіопs Syste111 (CVS); 
- St1t1н:г~io11 (S\ІN); 
► 
'l)\l'Y.22 1f)5~.oo\ JП 
- Hr,· isitщ (\щ\1·111 Systcm (IH 'S); 
- Р~-1 l~H\'r: 
-- ~lkt\)St)H Visнa1 Sош·сс Salt (VSS); 
- t\kt\~шia1 : 
- 1) at\:s; 
1і  t, 
)\.11 я контролюІЗання змін n і\юсму проекті обрано Git. 
Git 131\брано тому що ос,юшюю відмінністю від інших систем (таких як 
нЬ, егsіо11 та подібн11х ії1) с те, як Git сприймає дані. Концептуально, більшість 
СКВ зберігають інформацію як список файлових редагувань. Ці інші системи 
(C\ lS, Subveгsioп, Регfогсе, Ваzааг тощо) розглядають інформацію як список 
файлів та змін кожного з них протягом деякого часу (це зазвичай називають 
оснований на дельтах контроль версій), що показано на рисунку 3.2. 
Checkins Over Time 
File А _., ІН Л2 
File В Лl Л2 
File С _.. Лl -t► Л2 лз 
Рисунок 3. 2 - Збереження даних, як переліку змін 
від базової версії кожного файлу 
Git не оброблює та не зберігає свої дані таким чином. Замість цього, Git 
сприймає свої дан і радше як ннзку знімків мініатюрної файлової системи. У Git 
щоразу, як ви створюєте ком іт, тобто зберігаєте стан вашого проекту 
1апам'ятовує як виглядають всі ваші файл 11 в той момент і зберігає noo 
на цей знімок. Для ефективності, якщо фnйли не змінилисяt Git 
файли знову, просто роб11ть пос11л.11111я ш, попередній ідентич 
вже зберігається. Git вважас свої л,а11і біл1,1L1 я1, потік знімd 
р11су11ку 3.3). 
1 1 )tІУ . 22 1<>5Н.ООІ fl'J 
thr< kln~ Ovcr f \mc 
Fi\c д дl дl А2 д2 
Fi\e В в в 61 В2 
Fite С Cl С2 С2 сз 
Рисунок З.З - Зберігання даних як знімків проекту за хронологією 
Це дуже важлива різниця між Git та майже всіма іншими СКВ. З шє~ 
пр11ч111111 в Git заново переосмислено майже кожен аспект контролю версій, які 
інші системи просто І<опіювали з попереднього покоління . Це зробило Git 
більш схожим на мініатюрну файлову систему з деякими неймовірно 
потужними вбудованими інструментами на додаток, а не просто СКБ. 
3.4 Впбір інформацііі1111х технологій розроб1сп 
HTML5 
HTML (мова гіпертекстової розмітки) - це код, який використовується 
для структурування і відображення WеЬ-сторінки та її контенту. Наприклад, 
контент може бути розбитий на параграфи (абзаци), містити список, 
зображення чи таблицю. 
HTML - це не мова програмування, це мова розмпки, яка спов1щає 
браузер, як відображати вміст \VеЬ-сторінки, яка переrлящкться. Розмітка може 
бути простою чи складною, залежно від бажання \~1еЬ-днзайнера, який її 
створює. HTML складається з серії (елементів) , які використовуються для 
вміщення , або "загортання" в них р1зних частин ко11тенту, щоб вони 
відображал 11 ся чи діял и в певний спосіб. Ці елементи за допомогою початкових 
і кінце1шх (теrі в) можуть зробити слово чи зображення пос1шшшям на будь-яку 
іншу стор і11 ку, можу1 ь відображати текст курсивом, збі.%ш11п1 чи змен 
шрифт тощо . 
НТМ\_5 - ш1ступ11а версія мови HTML. До складу робочої групи з 
уві йшл11 ЛО\_ , Лррk, t,oogle, ІВМ, Microsoft, Mozilla, Nokia, Opera 
сотень інш11х 1шроG1111кіrз . 
11)\ 1' .22195R.(IOI ІГ3 
~ ·~ін ·ш1111юм 1 
' \ 1101101· ІН.'рсії мо1111 ро1мі rк 11 11rommycr1,cя rrрибрати 
б:щ·~''"'-' 1. її'' ін. 
11рІІ 11р111ї11я1ті р1111е1111я 11ro nве;~е11ня ІІОІНІХ ТСГІВ було ртглянуто 
6і.11\111і..:тt, 11011уляр1111х саіІтів і шщілено основні елементи, які були спільннми 
для нсіх "'сЬ-сторінок. 
Ро· 1іч:11оч11 області 1ш стор11щ1 за допомогою певних елемент1в, uя 
тсхно опя юже допомоп-11 по егш1п11 кор11стувачеві навігацію. Наприклад, він 
може легко пропустит11 розділ навігації або швидко переходити від однієї статті 
до іншої без необхідності для авторів робити відповідні посилання. Автори 
також отримують вигоду в результаті заміни великої кількості div-iв одним з 
декількох відповідних елементів, що також приводить до чистого і легкого для 
автора початкового коду. 
Елементами І1еаdег є заголовки роздш1в. Вони можуть складатися з 
декількох частин - наприклад, було б виправдано розділяти блок заголовка на 
підзаголовки, історію версій або вказання авторства. Елемент footer визначає 
НИ,І(НJО частину розділу, до якого він відноситься. Зазвичай він містить 
інфор 1ацію про розділ - наприклад, ім'я автора, посилання на схож1 
документи, копірайт і тому подібне. Блок паv містить список посилань для 
навігації. Підходить, наприклад, для навігації по сайту, або для змісту. Елемент 
aside підходить для розміщення вмісту яким-небудь чином спорідненого 
основному контенту. У звичайному в1 1 шщку буде корисний для роз. 1ітки бічної 
колонки . Тег sectioп представляє загальн 11 й розділ документа або додатку, 
наприклад, такий як розділ. Тег ai·ticle відзначає незалежний розділ документа, 
с1 орінки або сайту. Застосуємо для такого в11 1істу як новини, запнсу блоrа, 
повідомлення у форумі або коментарі К()ристувачів. 
CSSЗ і препроцесор SASS 
CSS (англ. Cascading Style Sl1eets, укр. Каскадні таблиці с 
спеціальна мова, що ш1кор11стооус1 ,,ся для 01111су зовнішнього 
сторінок, написаних мовами розІ\1ітк11 д,11111:-:. 
11){1. ' . ~2 195Х .(ЮІ rf'J 
Н,,і'\ч:к, і111с t'SS н111юр11с I он ю 11, ю,я ві 1уат,1юї r1рс'1с11п111ії сторінок, 
HaH1t\'a1111x HTt\1C та ХІ ІТ~1С, але формат CSS може 1астосовуАатнся ,ю іншнх 
tщ,,ів Х~1І~•док) мснтіn. 
11~1111фік:.щії CSS бул11 створс111 та розвиваються Консорціумом 
1 с~світньої мережі. 
S має різні рівні та профілі. Наступний рівень CSS створюється на 
основі попередніх, додшоч11 11ony функціональність або розширюючи вже 
наявні функції. Рівні позначаються як CSS І, CSS2 та CSSЗ. Профілі -
сук) пність правил CSS одного або більше рівнів, створені для окремих типів 
пристроїв або інтерфейсів. Наприклад, існують профілі CSS для принтерів, 
мобіль1шх пристроїв тощо. 
CSSЗ це останнє еволюційна зміна мови Cascading Style Sheets, і ця дія 
спрямована на розширення CSS 2.1. Воно привносить давно очікувані 
нововведення , такі як закруглені кути, тіні, градієнти, переходи або анімація , а 
також нові макети , такі як 111ulti-colшnns, «гумовий» дизайн або сітковий макет. 
Експериментальний функціонал позначений спеціальними префіксами 
розробника, і він не повинен використовуватися у виробничому середовищі, 
або повинен використовуватися з особливою обережністю, так як його 
синтаксис і поведінка може бути змінено в майбутньому. 
SASS (англ. Syntactically A~1esorne Stylesl1eets) - скриптова метамова, яка 
інтерпретується в квскадні таблиці стилів (CSS). Спроектована ГеJ\.ШТОНО:\t 
Кетліном та розроблена 1] атал і Вейзенбаум. Sass призначений для підвищення 
рівня абстракції коду та спрощення файлів CSS. 
Мова Sass має два синтаксиси: 
- sass (ор11rі11ал ь111111) - відрізняється відсутнjстю фіrур1111х дужок. в 
ньому вкладеш 11сме11ти реалізовані за допомогою відступів, а правила 
вщокремлюютьс}J 11сревсл.е1111ям рядка; 
- scss (нош1іі) - rшкор11стовує фігурні дужки (подібно до CSS). 
Файли sаss-с11нтакс11су ш1ють розширення -
*.scss. 
11)\1 .22\f)5R.OOI fll 
::\SS р,,н~~нрнн· t'SS, Іt:ІJtаю1111 кіJІІ,І<а tсхані ti\tiri, лoc·ryr1m1x R більш 
,,,;,1111\і~НІІ\ ~юн.,х 11 1ю11,амуна1111я, ·юкrс ,а об'скrно-оріс11rоnа11нх мовах, але 
11.:-,,\,~1) 1111нх )\ЛЯ C'SS. І11rср11рста1ор Sass транслюс SassScript у блокн правил 
css. 110 ~у, і, "ass - не с111пакс11111111іі цукор для CSS . 
.І~1ш aipt та Jque1J1 
.la, а сгірt (JS) - щ111аміч11а, об'сктно-орієнтована прототип на мова 
Реалізація стандарту ECMAScript. Найчастіше 
в11корнстов) сться для ст1Зоре1111я сценарїіІЗ WеЬ-сторінок, що надає можливість 
на сто~ ОНІ кл1є11та (прнстрої кнщевого користувача) взаємод1яти з 
корнстуІЗачем , керувати браузером, асинхронно обмінюватися даними з 
серІЗеl о 1, змінювати структуру та зовнішній вигляд WеЬ-сторінки. 
JavaScгipt класифікують як прототипну (підмножина об'єктно-
орієнтованої), скриптову мову програмуІЗання з динамічною типізацією. Окрім 
прототипної, JavaScгipt також часткоІЗо пщтримує 1нш1 парадигми 
програмування (імперативну та частково функціональну) і деякі відповідні 
архітектурні властивості, зокрема: динамічна та слабка типізація, автоматичне 
керування пам'яттю, прототипне наслідування, функції як об'єкти першого 
класу. 
Мова JavaScгipt використовується для: 
- написання сценаріїв \1/еЬ-сторінок для надання їм інтерактивності; 
- створення односторінкових \1/еЬ-додатків (ReactJS, AngLJlarJS, Vtte.js); 
- програмування на стороні сервера (Nocle.js); 
- стаціонарних застосунків (ЕІесt1·оп, N\\І .j s); 
- мобільних застосунків (React Native, Согlіо,1а); 
- сценаріїв в прикладному ПЗ (11априклад, в програмах зі складу А(іоЬе 
Cгeati ve St.1ite чи Apache JMeteг); 
- всередині РDF-документів тощо. 
j QL1cгy - популярна JаvаSсгірt-бібліотска з відкр1п11l\1 с11рцевим кодом. 
13она була 11редставле11а у січ11і 2006 року у І3n1{'шпр NYC Джоном Ресі!1 
(.1 0\111 Resig). Згідно з дослідже11шш11 орп1111·шц11 WЗTechs, 
в11 кор11стовується понад половшюю від /\1іл1,ііL)ІІ~ 11аі1відвідуваніших 
► 
'І)\ГУ.22 1 1)5~.(ЮІ fl] 
jQ\І\.'t·y t ' Наі\1ю11у.1н1р11і11юю (іі(іліоrскою J;1vнScript1 яка посилено 
1щк1)J)11\.'1'\)Н)Т11,~)1 на \.'1,0t 'OJ\lli11111iii ) tCIII, , 
j()нci· ' с ні.11t,н1щ 111ю1 ·рам1111м 1аfіс111с1 1с1111ям ПІд ліцсюією МП (до 
,~\.'рссня "Ot 2 GyJю 11одвіІінс лінсшувшrrrя нід мп та ONU General Public 
1 .kcнsc другої версії) . 
Стпакснс jQue1·y розробле11ий , щоб зробити орієнтування У навігаuії 
зр) чнішнм завдяк11 внбору елементів DOM, створенню анімації, обробки подій, 
і розробки АJАХ-застосунків. jQueгy також надає можливості для розробників, 
для створення nлагінів у верхній частию бібліотеки JavaScript. 
Використовуючи ці об'єкти , розробники можуть створювати абстракції для 
низькорівневої взаємодії та створювати анімацію для ефектів високого рівня . 
Це сприяє створенню потужних і динамічних WеЬ-сторінок. 
Основне завдання jQueгy - це надавати розробнику легкий та гнучкий 
інструментарій кросбраузерної адресації DOM об'єктів за допомогою CSS та 
XPatl1 селекторів . Також даний фреймворк надає інтерфейси для Аjах­
застосунків, обробників лодій і простої анімації. 
Принцип роботи jQueгy полягає в використанні класу (ф ункції), який при 
звертанн і до нього повертає сам себе . Таким чином, це дозволяє будувати 
послідовний ланцюг методів(зображено на рисунку 3.4). 
$( '#test ' ) //зноходш,о елеNент з id="test" 
. tехt(' Клікнf1 по мені ' ) //6сmmІО6ІІЮЄІ'іО текст елемнпю рі6нt1м ·клікнt1 110 мені" 
.addClass( 'myAler·t ') ,І/додоє"о клас "myA Lert· 
.css(' color ·, ' red ' ) І/6спюнобмємJ кvлір тексту червоним 
.attr(' alert ', ' Пр"віт, еві те! ' ) // додоєNО атрибут "oLert" із зноченняt, ·npu6im, с6іп;е і" 
.bind( // додає.~,, 6 обро6нt1к под ії cLick функцію, яко ~іJкриё мод~ль;,е 
'click', // бікно із тексmоІ'І, що 6казанt1й б отрt1буті "oLert• ("Прt16іт, ,t,i,~e! ") 
function(){alert($(this) .attr ('alert '))} 
) ; 
Рисунок 3.4 - Принци роботи бібліотеки Jqueгy 
РНР 
РНР (англ . РІ-ІР: Hypeгtext Ргергосеssог - РНР: 
препроцесор), попередщ1 назва: РегsопаІ Но111е Page Тоо\s ­
програмування , бул[! створена для генерації НТМL-сторінок на стороні 
сервера. РНР є од11ісю з 11n11пош11реніших мов, що використовуються у 
WеЬ-розробок (разом і ·3 1-1,1:1,.NET, Ре1· І , Pythoп, Rt1by). РНР підтр 
'ІJПУ.22І95Н .ООІ Jf'J 
11~'1'~\\;\Ж\І\)l\) 6i.11 i,111k1 ю ХОС111 111 ·-11roвaii;tcpi11. РІ 11' r,pncк г віл.критого 
ll\'~,1,,:, t1ЮІ\) ·Jа6сз11счсння . 
Pl ІР інтсрнрступься Wcb-cepncpoм у І ІТМL-код, який передається на 
~,\,рtШУ кліснта . l la відміну від скриптової мови JavaScript, користувач не 
6:1ч 1пь РНР-коду бо браузер отримує готовий ht111І-код. Це є перевага 3 точки 
зор безпеки , але погіршус і11терактив 11ість сторінок. Але ніхто не забороняє 
1311корнстовуnат11 РНР для генерування JаvаSсгірt-кодів, які виконуються вже на 
сторон~ ктєнта. 
РНР - мова, У код якої можна вбудовувати безпосередньо html-кoд 
сторінок, яю, У свою чергу, коректно оброблюватимуться РНР­
інтерпретатором. Обробник РНР просто починає виконувати код шсля 
відкриваючого теrу (<?рІ1р) і продовжує виконання до того моменту, поки не 
зустріне закриваючий теr (?>) . 
Велика різноманітність функцій РНР дає можливість уникати написання 
багаторядкових функцій, призначених для користувача, як це відбувається в С 
або Pascal. 
NPM 
NPM (Node Package Manageг) - це менеджер пакунюв для мови 
програ.мування JavaScгipt. Для середовища виконання Node.js є менеджером 
пакунків за промовчуванням . Включає в себе клієнт командного рядка, який 
також нази вається 11pm, а також онлайн-базу дан11х публічних та приватних 
пакун юв, я ка називається реєстром 11р111. Реєстр доступ1ші1 через кшєнт, а 
доступн1 накунки можна переглядати та шукати через \.VеЬ-сайт nрш. 
Менеджер пакунків та реєстр керуються 11pm, Іпс. 
РМ може управляти пакунками , які є локаль1111 м11 залежностями певного 
проекту , а також глобально інстальованими ін струt11ентами JavaScript. Пр11 
rз11 1юр11ста~ 111і пр111 як менеджера залеж1юст1 для лою1ль110rо проекту, можна 
встn 1 юв11 ·111 одною командою всі залеж11ості проекту чсрс·з фnі1л packageJson. У 
фnйJІ і pnckn2,e.j so11 кожна залежність може в1 1зш111ат11 діашно11 дійсних версійа1 
в11кор11стовуюч 11 схему сема11т11ч11ої версії. що щнволяє розроби 
<ІВТО~І ::1ТІ ІЧІІО ОІІОВЛЮВаТІІ свої пакет11, ОДІІО1\~ІСІЮ у1111к:110 1 111 11ебажаних змін 
Ч)\ТУ.22 1 <J5X.OO І ( П 
(111!1> 
Jl11p - це таск-мснсюкср лля антомапJІrного виконання tracтo 
t,Нt-.\,рнс1'0nуван11х зшзда1111 (11а11р11клад, мі11іфікаціі, тестування , об 'єднання 
фаі1лів), на1111са1шй на моnі програмуnання JavaScript. Програмне забе1печення 
внкор11стовує команд1111й рядок для запуску завдань, визначених у файлі 
Gulp1ile. Створено як відгалуження від проекту Grunt, щоб взяти з нього кращі 
nрактнкп. Поширюється через менеджер пакетів NPM під МІТ ліцензією. 
Від Gгuпt відрізняється тим, що код завдань записується JavaScript кодоч, 
а не в сталі конфігураційного файлу. 
На 2017-й рік налічується більше 3100 плагінів для Gulp. 
Взаємодії між частинами програми реалізується через оператор.ріре(), 
виконуючи по одному завданню за раз, не зачіпаючи вихідні файли, до кінця 
процедури. Це дає можливість комбінації плагінів в будь-якій послідовності і 
кількості. 
В Gulp вдосконалена система збирання. Це означає, що кр1м запус1'.-у 
. . . . 
завдань, можна також копіювати файли з м1сця на м1сце, комшлювати 1 
розгортати проект в новому оточенн1. 
'1/\ТУ .22 І958 .00 1 JІ З 
РОЗДІЛ 4 
11РОЕІ ТУВЛІІІІЯ ЛДЛІІТИПНОГО ІІІТЕРІІЕТ-ПОРТАЛУ 
.-. t Розробка стру1пур1юї моделі ада1п11в11ого І11тер11ет-порталу 
~о 11ншії 
На rоловніі1 сторінці порталу відображатиметься секщя привпання, 
пзйдер з послугами інформація про компанію, відео-відгуки клієнтів про 
1'омпзнію та етапн реалізації проектів ко шанією. 
На рисунку 4.1 представлена структурна модель Інтернет-порталу. 
На сторінці «Послуг» відображатиметься повний список послуг які надає 
компанія. можливий перехід по кожній з послуг де є детальний опис послуги та 
її цін11 . 
На стор1нщ «Галерея» відображається список виконаних робіт 
компанією. з можливим переходом на кожну з робіт, де є опис та фото галерея. 
·, Л:i,iiirr;~1111ii і1ттср11і:1~·11;1рт.ІJІ · 
. .· .. i,So!,11· (i~1·J~m• . 
',), І 1 11,,І_''ІІі 
[ 
, 1 . .. 
1 
І ' 
І 
L ---· r. 
J>11су11ок 4.1 - Заrаль,ш структурна модсл 1,' І 11п.'р11ет-порталу 
І Іа сторінці «Ко,пш<пш відобрюкшоться ко11 ·пшт11 компанії та G 
карта з nдJX'COJ\I місцезнаходження офісу компnнії «SоІш· Gаніеп». 
Перш за все, створимо проект та структурусІ\ю iioro в \\'ebStoпn. 
р 
ЧДТУ.221958.001 ПЗ 
Для цього натискасмо на «Створ1п11 проект)) (1ображе110 11а рисунку 4-2) 
WebStorтn 
Р11су1юк 4.2 - Ві1<110 ст1.юре1111я 11роекту 
Далі в11611расмо пустий 11роект і дасмо 11а1ву «Sola1·Ga1·dcn» (див. 11а 
р11су11ку 4.3 ). 
І І • • 
! 1, • 
: j ... <;\., ' ' 
І ( {),І 
Рисунок 4.3 - С1 воре11ня проекту та його назви 
Проект ст1Зорен11Іі . І -І аступ1111Іі 1,рок потрібно створ11ти маіібутшо 
структуру проекту. Створні'ІІО ,u11ректорію під 11азвою src, де розроблятнмемо 
проект(зображено на рису11ку 4.4). 
.,,. . . - . - - - . - - .. .. - - - - 1..1 - • - - - - - - - - - - - - - - - • - - • 
, о .1 Project • 
І 
І 
"V : sotиr Gardcn •-/\'JcbstormProjects/Soiar Gar, 
І 
9 : ~ src 
1!111 External Libraries 
І 
,., - - - - - - - .. - - - - - - - ... - - - • - ,t_ - - - - - - - • - - - - - - - - - - - - • 
Р11су11ок 4.4 - С, ворс1111я папки src 
1 1;р · .22 195Х . (ЮІ J П 
Т,, І\~,ж с1 норнмо 11:111 ку 11i;t 1ш·нюю (l ist нля маИбут111,оr ·о rотоrюгп 
\)111'1\Мі ·~t)Н:\ІЮІ\) 11 ро~кту І'ОНню, ·о Щ> за111 1пя на хості11г (відображено на 
рн~унк , ~.5). 
т r~ Sotar Gardcn 
~ ·.: dist 
Г 1 src 
1111 Externa( Libraries 
Рису11ок 4.5 - Створення папки dist 
Дал і потрібно в директорії sгс створити директорії(в ідображено на 
р11сунку 4.6): 
- backeпd - де будуть збері гатися файли *. рІ1р для роботи з серверо~1 та 
кл ієнтом; 
- foпts - де будуть зберігатися шрифти для сайту; 
- І1 t111І - де будуть збері гатися файли з розширенням * .html; 
- i111g - де будуть зберігатися зображення. логотипи. іконки які потрібні 
для сайту; 
- js - де будуть зберігатися * .js файли. 
о· Projcct .. І • 
, ~ So[ar Gardcn 
dist 
b,Jckend 
- . fonts 
. t1 t rn І 
1!119 
• J~  
І !і І f: х t L~ r r1 .з І l і ~на г і с s 
Р11су1101< 4.6 - Створені днректорії в s1·c 
Переіідсмо до встшювле1111я NPM. 
Для ііо1 ·о вста11овле1111я відкриємо термінал П\ введемо команду npm init 
(див. рнсу11ок 4. 7). 
ЧДТУ.221958.00 І 111 
t І . . І'\.' •• 
l • ., .,.
,- .•lt .... ,,.,... , t 
............ . 
'. . -~ '. ' . . ' 
., . 
. . 
• • • .. . .. І • •'. І 
Р11су11ок 4.7 - Робон, ·з тсрt-1і11nлоі\1 
Ця K0i\ta11дn ВС1 ШІОІ3ЛІОС llplll І.! проект. J Іісш1 ввелс 1111я ЦІ( І КОМШІДИ О 
проекті 110яв1пься фаі1л packag,c .j soп (JJ ІІІЗ. р 11су11ок 4.8). 
'( - -
, tJ Solar Gardcn • рас,сїgс мn 
·,
І .~, а- r ~.  t 
: ~ , tJ Solar Gardcn 1 ; 
, А. 
.~ L1 d1st 
;t: ► tJsrc 
: (.о .: packagc ,son 
~,'5  1:,єxtcrnallibrarit>S с'  
,•­: 
,1/1 
,N 
f,' 
І 
І О 
~··················-·······-·-------"-··---- --·· ·· ············· · · ·······~ 
Рнсу11ок 4.8 - Фшїл pнckage.json 
Тепер за ДОПОі\ІОГОІО прт І\ІОЖ І ІП ска•1~1т11, ВСТШІОВІІТІІ ГІШІГІІІІІ ПІ 
б ібJІ іотек11 які потрі бні лля ро·зрnб 1ш с:1і1ту . Потрі611і пші гшагі1111 і бібліотекн: 
- JQ11e1y- для і11іціалі з(І ції бібл іотек11 п1 д.11я подальшої робот11 ·3 нею; 
- fo11tm1•esome - іко1юч111111 шр11фт і CSS і11струме11тарііі; 
- JQ11e1y111aske{/i11p11t - ІІЛ[І І ' іІІ ІlО'ШОШІС легко задатн для поля М~СКУ 
ввсдсш1я; 
- slickcm·ousel - jqt1cгy 11л:11 · і11 . нк11іі жнвош1с створити на сай1і слаіілеr 
r .. • 
\)у,1 1 ,-}1кn1 складносп; 
34 
'І)\І 'У.22 \!J5К . ООІ rп 
- І(чІ1t,ч11/Іс1 :1 'J.,· Ію1 уж1 111іі і r11y,11<1rii rrmнi11 JavaScrirt (бс11алсж11ості), 
111111у11t~нніІ ' 1 \~:щ"vа,,с J\Jlя с , норс1111я ,,у;ювнх пшсrс~і лай rбоксу. 
1t\t)G н~,·.нютпн 11:111р11ю1а;\ .iчt1cry в терміналі ми гювнн111 прописапr 
11pm Їl1S\at t jqнсгу - savc (uідобрюкс110 11а рисунку 4.9). 
Рисунок 4.9 - Встш10nле1111я бібліотеки jqt1ery за допомогою прm 
Щоб nстаноnнти решту плаrінів робимо аналогічну операцію тшьки 
вказуємо назву плаrіна. Після встановлення всі х плагінів та бібліотек в файлі 
package.jsoп добавиться об 'єкт dependencies з полями - де назва полів назва 
плаrінів або бібліотеки, а значення це версія самого плагіна або бібліотеки 
(див. рисунок 4.1 О). 
~ 1 " 
· ?.:!<'~~;r.j)on 
} . 
-~,~•tr.vr"': ~, 
·11c~~~f··: . ::с~, 
•· t ! ort. ,.1 .: t ./·- •· .' : :1·1~ u· .. 1,,:~:.J:-•~--1 :·с •, .. :;а l нf ": .. ') . ;." · , 
-~:i~'!i.·h.н:i'": · ·2 . o.t1 , 
t 
·; :;~t'!"]' : .. .!.} . ~· , 
, .. Je; :..1·:j· .-.... ;: ,.::,:•i;•" ~ · : . : . 1 , І 
і І 
Рисунок 4. І О - Файл package.json після встановлення плагінів та бібліотек 
4.2 Вста1ювле1111я препроцесора SASS та iioro 1,оl\шішпора Coшpass 
Також дл я початку роботи над проектом потрібно встановити 
препроцесор SASS, що пр11скорить розробку і додасть більш~ можлнвостеіі. А 
для компіляції коду з SASS в CSS та слідкування за змінами sстановимо 
Co111pass, який itc нее буде nідслідковувати та компілюватн код. 
Так як 1)l)·3роб1ш nі дfіувалась на операційнііі с11стс:\11 Uпіх (Ubuntu), 
відкриємо термі11:11 1 і ·п1 r-. 1 вnсдемо комшщи: 
$ sнdo apt-get l1pdate -обновляємо інформацію про бібліотеки. 
Потім встшюв11юпю l{t1by через RVM 
35 
ЧДТУ.221958.001 ПЗ 
$ curl -L https://get.rV1n.io І bash -s stable l 
$ source ~/.rvm/scripts/rvm 
$ rvm install 
Terrep вста~юв11мо SASS та Compass за допо~югою команди: 
$ sudo gem install sass compass 
тепер 11отріб110 об1ю1ЗІІпr всі пспн-юrзлсні в с11стем1 пакет11 Ruby, 
r rрописусмо в терм1нал1 
$ sudo gem update 
Тепер Cornpass і SЛSS пста11оплс111rі1 глобальrю 11а комп 'ютеrі, дал~ 
потрі6110 роз вср11утн його 11роскті , лля rtього в тср~1іr1ал і 11сре11дС[\JО з коrенсвої 
д11 рскторії n д11ректорію sr·c (в ідобрюr«.'ІІО 11а р11су11ку 4.11 ). 
1;•,-. 
Рису,юк 4. 11 - Перех ід в шrректорію sгс 
Дал і для стил іп спзорш10 д11рек1 орію sty\cs 1а переііде~ю в д11рсК1орію. 
Перех ід в д11ректорію зображено 1111 р11су11ку 4. 12.  
і n· • ••  , І O • 1 
t • t: 5ol~r Gord~n 
..; d•~t 
t: • f2 $.\', \ 
.. • t1 ~І( 
~ t.s b~rl tnd 
:< t, tont, 
,_. ., • ..-~І 
, , vo,·.1~Th1 n)(P,,d-T4 10 : • /l;,:t,нor . .r 1·011tr · І r,І II r.. 1·dc:,/ ,:с$ .:,t s tylr:1 
~ V 
Рисунок 4.12 - Псрс:-.і ,1 1 в 1111рt'К1орію stylcs 
ТІ?11ср розвернемо в д11рсІ(торії styks 11:ic SЛSS за допомогою Compass 
( 1()6ражс,ю rш рисунку 4.13). 
ЧДТУ.221958.00 І ПЗ 
Ttrll'iNI 
➔ vova~ThinkPad-T410: - /WcbstororroJects/so1Ar Cardcn/~rc/5tylc1$ co~pass initl 
)( 
Рисунок 4.1 З - Ініціалізація SASS 
Після ц, є , кома,щи в директорії styles з'яв11лось З д11ректорії і І фаііл 
(зображено 11а р11су 11ку 4.14 ): 
- sas. -сасІ1е - ця директорія створюється за замов1 1ува1111ям так як, Sass 
кешус компіл1.,оrза11і шабло1111 і фрагІ\1е11п 1 . Це зна•шо 11рискорюс повторну 
компіляLtію rзеm1ю1х колс1щііі Sаss-фаі'ілів, 1 працюс краще за все, якщо 
wабло1111 Sass розліле11і 11 а 01<ре 1 і фа1ілн , які імгюртуют1.,ся в од1111 файл; 
- sass - це д11ректорія , де зберігаються фаіІт, з розш11ре1111ям sass або 
scss j які 11отім КОІ\ІПЇJІІОІОТІ,СЯ ІЗ css; 
stylcsl1eet. - це д11рсктор ія , де зберігаються rзжс скоІ\1пільовш1і css -
файл11; 
- сопfіg.гЬ - це фа1іл для 11алаштуrза1111я SЛSS. 
·, stylб 
► .sass-cache 
~ sass 
1e.scss 
print.scss 
screen.scss 
v st,;lesheets 
ie.css 
pr int.css 
screen.css 
config.rb 
J>нсу1юк 4. 14 - Ф:1~JІІ 1 та д11 ректорії після розверта11ш1 SЛSS 
МожеІ\,ю с1юстеріпп11, що в фш1лах sass і stylesl1eets с З ф:1ііл11. Для roбon1 
вони не потрібні , стrзорн 10 свою структуру, тому для 11очатку ш~дюшмо їх. 
Так як ПІІС:1ТІІ І\ 1С і\ ІО ШІ СІІІІПІКСІ1Сі scss переі'іме11уємо nan1<y snss JШ scss 
(відображено ш1 р11су11ку -1 .15 ). 
'l)\l 'Y.22 \<J5R.OOI ІІ · J 
" r•stvlcs 
► J 1 .Si!SS·(a<.l1c 
.,. \ scss 
r I componcnts 
r 1 gener а\ 
1 layout 
main.scss 
І 1 styleshcets 
' config.rb 
Р11сунок 4.15 - Перейменування фаіілу sass на scss 
Тепер спзоримо файл 111ai11.scss - він виступатиме як головний і до нього 
будемо підключати інші файли. 
В директорії scss створимо З директорії (зображено на рисунку 4.15 ): 
- co111po11ets - де знаходитимуться так звані компоненти, це можуть 
бути окремі стил ізовані кнопки, таблиці , навігація; 
- gепега\ - де знаходитимуться файли, які відповідатимуть за загальні 
стил і та адаптацію для всіх пристроїв; 
- layout - де знаходитимуться стилі розбиті на окремі секції. 
Всі ці директорії створено, щоб полегшити розробку стилізації 
утворюючи так звану модульність, яка добавить швидшу розробку та зручний 
рефакторинr коду в проекті. 
Також це поліпшить розробку проекту іншому програм1сту, якщо 
потр і бно створити або добавити щось нове на портал. 
Tenep після всіх цих nроцедур також потрібно налаштувати sass, за 
до1юмоrою файлу сопfіg.гЬ, який вже створенн~ за допомогою compass. 
Вид файлу тіл ьки після розгортання SASS nідображено на рнсунку 4.16. 
_. main.~css _ u_ _c onfig.rb · _ 
rcqu i rc •compass/import-once/act i vatc' 
І R~qu i rc пnу additional cump~uu p l ugin:1 h~r~. 
• ScL t h iu t o t hc root о ! yo ur p ruJccL wh~n dcploy d: 
l1ltp_p ,1t l1 = "/" 
c :ss_ dir " '' :1 ty le:i h cet:1 " 
uпua d i r ~ ":ia :iu " 
im,HJ(,:І_d i 1· • "i m,HJC:I " 
.J і\ V ,1 ~• с:-_r j [) 1, :1_ d і r ,. " j і\ V fi:I С І' І І' t ,i " 
Рисунок 4.16 - Іlо•шткшшіі фніі.1 1 co11tig.1·b 
'І )П У .22 1< J5R.fIO І І П 
1J k.1111 111.'рсіІ ІL'ІІ ,11:111ш1 J\11pc1< r орії, ·1, 1 і 1111мо т11пу п нала r1гrува н11ях 
,,,,,, '" .,, ч,ії '\ soss на scss. 
· t'1 нщк~н і )\ІІрск~ орії Jtл я зображс11 1, 1а j!\ файл ів пжс іс 11у1т1,, R config.rh 
1 111~щ) їхні 11аіtмс11ува11ня . 
11;1І 11 
В11хіJ\НІІіІ фа1Їл 3 налаштува11т1м11 зображено на рисунку 4.17. 
;1 main .sш iJ conrig.rb 
rcquire 'compass/import-oncc/activatc' 
f Rcquirc any additional co~pass plugins here . 
t Sct this to the root of you r projcct ~hen dcployed: 
http_path = "/" 
css_di r = "stylesheets• 
sass_di r = ·~· 
images_di r = "img" 
jшscriQ~dir = •js• 
Рисунок 4.17 - Вихідний файл config.rb після налаштування 
Все готово для запуску SASS. Запускаємо compass для відслідковування 
змін sсss-файлів та компіляції в *. css (див. на рисунку 4.18). 
r. i vova@I binkPad-I410 :-/\;tbs tor~Projccts/SolarG.irdcn/ src / s tylcs S co::pass wa~ch 
' х >» Co:::pass is watchinq !or changes. Prcsз Ctrl-C to Stcp. 
L 
Рисунок 4. І 8 - Увімкнений co111pass для роботи препроцесора SASS 
4.3 Прое1стуnа111ш спіль1111х елеме1піn 
Розробку Інтернет-порталу розпочато з спільних структурних елементів 
для всього WеЬ-сайту, до яких відносяться: l1eader, footer та кнопка зворотноrо 
зв'язку з модальним вікном. 
Структура І1еасІег зображена на рисунку 4.19. 
Структурний елеме11т І1еаdег місппь 4 компонента: 
- ЛОГО І(ОМП3ІІЇЇ; 
- навігація по 1юртш1у; 
- телефо1111 дли зв ' я·зку; 
- скрите ме11ю, )ІІ,~ ві :tоСіражапшеться тшьки на планшетах та 
телефонах. 
'І)( f · у .22 1!J 5R.OO І f Н 
) \.11~ 1ю1І;\11,у с 1щ,р1<1t' t1,с я JIO j~tiнa в фа~ілі inclcx.html лля hcadcr, яка 
н,,,'\а.1,і н11к(,рнстон)Т1I,сн на і1111111 х сн,рі11ках. 
'j  
Лоrо Контактні дані ! 1 
j 
• • ~ • r ~ f • • • • ..~  
Рисунок 4.19 - Структура l1eader для сайту 
Потім потрібно стилізувати структурний елемент header, щоб додати 
йому привабливого та зручного для відвідувача вигляду, який відповідатиме 
загальному дизайн-макету Інтернет-порталу «Solar Garden». ДгІя стилізації 
використано нові можливості css, а саме Лех, тому що він надає можливість 
зробити l1eadeг гнучким для різних пристроїв, що дозволить легко керувати 
ним . Після стилізації отримано готовий макет структурного елементу header, 
наведени й на рисунку 4.20. 
·. . -~(067) 'J; 
і; : . :: 1,::1 Ycnyn1 новосn1 Гаnере11 КонтІІСТЬІ :': •34 7). 
Рисунок 4.20 - Готовий елемент \1eader 
Також розроблено адаптивний І1еаdег (д1ш. р11сунок 4.21), де при 
натисненні на к1юnку меню відкриватиметься бокове меню з навігацією сайту 
(зображено на рисунку 4.22), а при натисненні на кнопку «Закрити» меню 
плавно зникати.ме , а в структурному елементі І1еа(\ег з'явиться знову кнопl\-а 
«Меню» . 
---
Р11сунок 4.21 - Адапт11ш111іі Ін~ш.Іег 
N 
@ · 
к-~ 
Рисунок 4.22 - Адаптивне меню навігації 
Аналогічно з І1еаdег структура footeг майже не відрізняється (зображено 
на рисунку 4.23), відмінність тільки в тому що з'являється елемент копірайт. 
Приступимо до розмітки footer. 
·-·-·-·-·-·-·-·-·-·-·-·-· -·-·-·-·-
11,.;, ,н;,ао оорщу І 
~--~•••>••• .11. 070 ~І МІ.І І~ 
Лого компа1-1ії , Контактні дані 
'--....· -~-_- .,.;) 
- 8 - 8 - 8 - • ,._. 8 - 8 " ., • .., 8 • 8 -• 8 - • 8 __, 8 -. 8 - 8 - 8 - І -• • - 8 ,.__ ■ - • С..., "" 
Рисунок 4.23 - Структура footer 
.,., 
Наступний крок потрюно стиЛІзувати footer. Для адаптивного 
ввідображення на б ільшості пр11стр()ЇВ в11кор11стовуємо властивість tlex, а потім 
просто корегуємо медіа за п1r1.1 1\ 111 11 n різн11х екранах. 
Після стилізації отрІІ І\ІШІО ГОТОВІ ІІІ footer coшponent, який 
використовуватимемо 11а ІlL)!їїШІЇ (ві Jtоіір~1жс1ю 1ш р11сунку 4.24). 
41 
ЧДТУ.221958.001 ПЗ 
SOLARG t r\llpr.~.,,n:..-~~-, 
········· ....A..R..D..E..N. .  • _,.~-2,,...,.,.. 
\, r,(ІІ ІІІ" U 
Р11су11ок 4.24 - Footcr для Oc s kt op всрс11. ~1  пр11стро.. ш 
також foote1· ПОІЗІІЇСТІО адаппш111111, заоляк~1 мел~а 1ат~п1м та 
11ст11ІЗОСТЯІ\1 Пех , нанр~~клаrt ЯІ< оідображаст1,ся footcr 11а смартфоні ІрІюпс? 
13Jlo 
(зобрmке1ю 11а р11су1шу 4.25 ). 
Главная 
Услуги 
Новости 
Галерея 
Контакть1 
Р11су 11о к 4.25 - Відображе1111я foote,· 11 а с:-.шртфо 11і Ipho11c 7 
Для можт1оості , щоб кл і с11т міг ос1ао11т11 свої ко1па1п11і да11і, а робіт1111ки 
ко~1 п а 11ії І\t0П111 йому зателефонуш:т1 , ІЗІ1рішс1ю розро611ТІІ форму зворотного 
язку , як:1 вщкриват11 меться по 1~ат11 сне1111ю 1ш кнопку. яка завжд11 в11д11ма для 
313 
. . . . . . . , 
13 щв1дувача , де вщвщувач в модальному в1к111 запо1311ят1шс свое ІМ я та номер 
телефону та відп равлят11 заявку на зворот11 і11 зв·юок. Да11і з форми 
зб 11 раТІІ І\ І УТLСЯ за ДО І ІОМОГОІО рІ,р скріпта та від11равл;1тщ1ут1,ся )' ВІІГЛЯді ЛІІСТ8 
на електро 1 1у пошту фірм 11. 
П е р11 11111 крок, потрібно зробити кнопку. Спо 11атку зrо611:-.10 rозмітку за 
до1ю~югою \111111. Бач1н,10, що це зв111ші111а к1ю11ка :.i кJ1асо~1 call-button, яка 
вссрсд11ні 1ас слсj\1с11т spa11 з класом.111оЬіІс-рІ1011е. Піс:ш розІ\1ітк11 прнступимо 
до ст11л і зуІЗа 1111я кнопю1. 
Отр11ш1л 11 готоІЗу к11опку(зображе1-10 на р11су11ку 4.26), т1.:пер потрібно 
створ11111 ~юд:-1л 1) 11 е вік110 з формою. 
\>~н.:у 1юк 4.26 - Кнопка зворотного зв·я·~ку 
ЧДТУ .221958.00 І ПЗ 
Після розм~· тк, н потр~' б но стит·з увати наше вікно. Спо1штку воно не видиме 
,-ого поки не натиснуть на кнопку зворотного зв'язку, це все робиться за 
)10 
югою 2 станів властивості display для модального вікна. Поки не 
дonor, 
. будеться натискання на кнопку «модальне вікно», вона має властивість 
131)1 • 
. у· попе, це властив~. сть приховує 11аше модальне вікно а при натиск аННІ 
d1SP1 а  · ' 
вnаст~~вість display міняється 11а властивість display: block. Повністю готове 
•зоване вікно зображено ш1 рисунку 4.27. 
ст11л1 
Остаеьте Ваши коктактнь~е даннь~е. и мь, 
сеяж.емся с Вами в бnижейwее время 
І.,-, Ввtдюе ваше иuя --- _] 
І \.. Во~дитt номер теnефон11 - ] 
0-Тnpau~,n, 
Рисунок 4.27 - Мол.альне вікно зворотного зв ·язку 
Кнопка і модаль11е вікно rотооі, потім потрібно зв'язат11 їх щоб по кліку 
появлялось модальне в1кно. робиі\ю 11е за допомогою jqt1ery. Цей код 
відсл ідковує натискання по нашій к11опці з класом call-button. і модальному 
вікну присвоює властивість display : block, 1до дає змогу появитися на екршв 
відв ідувача модальному вікну. В модальноІ\t)' вікні є два поля для вводу І в 
одному з них де потрібно ввест11 те11ефо11 1\111 повинні обмеж11т11 введешн1 
відв ідувачем тільки uифр. Робимо це за допоr-.югою плаrіна jquery 111askedinpнt, 
який ми вже встановили. Наведе1111і1 1111ж1 1е код обІ\Іежує введення тільки 1111фр 
в такому в форматі + 38( * ,:, ,:, ) ,:, ,:, * - '~ ,:, - * *. де * - ч11сло. Відтепеr 
відвідувач не зможе вводити нічого кріr-.1 цифр в поле для номера телефону. 
Також нам потрібно задати, що пр11 1~ат11сканні на кнопку «Закр11т11» 
(д11витися рисунок 4.28), наше і\ІОдаль11е вікно буде знову приховане длs1 
uідвідувача. 
Рисунок 4.28 - К11011кс.1 ·:шкр11ття J\Юдальrюго вікна 
43 
ЧДТУ.221958.001 ПЗ 
l lal\t потрібно в1щористати jqt1cry, нижче наведений код внко11ує закриття 
модального вікна при натиска~111і 11а ю-ю1шу з класом close-button. До того ж 
потріб110 врахувати, що якщо відвідувач 11атис1<ає не на область модалмюrо 
вік11а м11 також приховусмо модальне вікно. Це робит~,ся за допомогою також 
jquc1·y, ми заводимо перемін11у якій присвоюємо значення нашого модаль11ого 
вікна . І потім коли відвідувач 11атискає не по області r.юдального nік11а 
в111<011ується функція , яка псрсвіряс, якщо клік здійснений не в області 
І\t0даль11оrо вікна , то приховусмо його. Фінальний етап , щоб 11р11 нат11ска11ні на 
кнопку, у нас запусюшся рІ1р скрипт, який відправлятиме дан і , м11 використаємо 
Jquery. 
4.4 Розробю1 голов1111х об'опів І11тер11ст-порталу 
Розробка головної сторі1110t най nажливіша, п1к як вош:1 відображап11\1еться 
для кл і єнта спершу. Головна сторін ка мас привертати увагу. Тому в11ріше110 на 
головній стор і11 u і ро-зм іст,пи 4 секції. Кшю~а з яких несе свою і,нJюрмапшність 
ДЛЯ КЛІЄІ ІПІ. 
І секuія - секu1я пр11шп1н11 я, в uій секuії кл 1 є11т бачитиме слайдср '3 
слога~шм1 1 , слайдер з сш1ском послуг, і відео, яке буде постііїно відтворюватися 
на задньому фоні . 
2 секuі я - секція про компан1ю, в uіії секції кл1єнт r.юже д~знатися 
коротко про ком панію та переваги цієї компанії. 
З секція - сс ,щія з відео-відгуками клієнтів про ко:\Jпш,ію. 
4 секці я - етап реалізації проектів компанією. 
Також розробимо фіксовані соціальні іконю1 , як1 11остіііио 6ач11т11ме 
відвідувач , гю яких відвідувач зможе перейт11 на сторі11ку l~1cebook компанії 
"Sо/аг Gагdеп", 'Іа 11а їx ,Jii1 відео-канал Yot1tl1Ьe. 
В11моп1 до розробк11 головної сторінки: 
суч ас 1111ії пр11вабmший д11зайн; 
с1щ11mш11а сторі11ка для всіх пристроїв; 
кросбрnузерність; 
верс·1ш111 я t.:ш1ту бло11не із застосуванням теrів l lTl\ll,5. 
44 
ЧЛ І У .22 І 9)R.OO І ff J 
Рс) •,,)с)(Ї/,:11 / Ct'h" І(il. / 'о.7()(1//()/. СІІІОJ>;тш 
~, ,,\,р11щ) J\ЛЯ 1 сс,щії scctio11 ·J класо 1 \vclcoinc-scction. Н:1стуг111и~і крnк. 
" .... , -p,6tH' ~твор1п11 "'1ї1ррс1· для вінсо, яке відrвоrюnатнмсп,ся на 1,щш,п~,~у 
1 . ~тв1..)\)ІІМО тсr viclco, ле в1п11ачмо шлях Д() відео. Потрібно 1робнпr 
\t)\)H\, т:1 
\.'.r1:1йдсl з слоганами компанії . Для нього потріб110 створ11тн wr::ippcr для 
,юв, 0 1лсНl>, якому 1 1 р11 своіі 10 клас \vclcome-message. 
Cont-tfЧWЬІ[ 
3ЛЕКТРОСТАНU,іИ ГІІ1МОСМСТDІ.4 
Рисунок 4.29 - І секці я Головної сторі н ки 
Осталось все це стил ізувати за допомогою CSS. Вид 1 секції після 
стил і за ції неведений нижче на рисунку 4.29. 
СОЛНЕЧНЬІЕ 
3ЛЕКТРОСТАНЦИИ 
Рисунок 4.30 - Відо61х1жс11ш1 І 1.:с к1tії 11а JрІюпе 7 
45 
► 
'l)t 1Y.221())R.00 1111 
\t \) 11 1 11\H J'i6tIO 'ЧЮ611111 \ ПІf'рСГ ;{ЛЯ І<ОЖ ІІОf О it СJІОГ::І ІІ ЇА, J(Jl lt 111,orn 
,,.,~\''\'ІІІМ ti i, · ·\ к.пасамн 1нщ:ssа 1:1-с , не 11 не rюnіяомлсн11я . /(ля тогп 1110(; слогаш, 
'"'Р1·а.11 11 с 1, як с.паіі;щ, н11 кор11стnпю плrir · i11 slick, я киН Rжс nста 11оnит1 р:.шін,с, 
~,.,~ ;н)банимо 11алаштуuа 1111я . Л11алогіч110 робимо слайд з списком послуг 
... 
1-:ох1п:11ш . 
За допомогою медіа зат~тів п1кож розроблено адапп1Аність для се к11ії 
під всі сучасні мобіл ь11 і та пж111шсп1і пр11строї. (дивнтнся рисунок 4.30). 
Розроб1-а 2 се1щії Го.'lов,юі· с111орі11ки 
Створ1tІ\Ю для 2 секції sectioп з класом about-coinpany і wrapper. який 
об 1еж ватиме ширину контенту та вирівняє його по центру сторінки. 
Зробимо список з перевагами компанії, це звичайний список, якнй поп~1 
заповнимо і до кожного елементу списку добавимо і конку, яка співпадатиме 
контенту. Останні й крок, це стилізації секції, результат стил ізації наведено на 
рисунку 4.31. 
О КОМПАНИИ 
SolarGarden - компания, которая сфокусироеана на развитие t~НКенернь,х peu,e-tt,,1A с ..спа,~ 
знерrосберсrающих теІСНQ"'Іоrий и альтернатиВНЬІх источнмкое Зttерrми Qcнoeнctl наwеА 
сnециализациеА явnяІСJТся солнечньrе злектростанцми nc:tA ЗеnfнЬІА Тариф, ка• д.nя фІОмческмх лиц 
МОЩНОСТЬІО ДО 30 кВr, та и юридических лиц ГІРОМЬІШЛен-tОІ"'О назначf'НИЯ, 
Наша компания занммается nроектированием. nродu:еЯ м монтажем оборудоаанмя альтернатмано" 
знерrетИК!~4 в цепом - rе.лиосистем, темоаь~х насосов, аатономноm ороwенмя. Mw nредостааnяем 
сеоим u,иентам кас nоnньн1 пакет услуг, так и отдельное соnроеождеwие 
Юридическое - ОфОрмлеttие и nодключение «зеnеноrо• тармфа 
Техническое - nредварктепьнь~R аналю обьекта, nроектная документация 
Мь~ верим I то, что кuдЬІА, вnожие мжимум средств и усмлиА, i.tOXtrТ nonY'-4141 111 wаксиuум 1wrcдw 
Наша цеnь - показать и научить как правильно зкономкть, а так •• Japa(Jarwuть на альf'ернатменwх 
источниках ~рrмиІ 
w 
о о 
npo.K MONM "11M Wмроьм ассор1МІІІОN1' 
nepcoнua оІор~о•ІНІІ" 
f!l ~ 
rі•1мес~анмрооамм• Теамм:•••оно. ...,  .. 5wc~ 8WИ. мм,.,.. Іім~8Мt__.,L 
o0\>0IC'f08 "ІКНИаtІМ n,0811'18 І• , ....... 24 ..М:МІ ~сw•И• 
Рисунок 4.3 І - 2 секція Головної сторін ки 
Розробки З сt!ю/ії Голошюї сторінки 
З секщя Головної стор 111 к11 м іститиме 3 модальннх ві~ш.1 як~ 
відкрипатимуться I ю кJІ іку 1ia блок з вщrуком . кожне І\tо,'\ШlЬІІ~' кікtю ма 111ме 
відео відгук про ко!\111 ~ 1,ію від кл і снті в. 
Створнмо 3 ~1 1 1 ~.1 1 огі1 11111 х fілока для відгуків ЯКІ міст11п1:\1Уть в собі 
картинку та юю11 ку. Bccp~;llllli н11х блоків потрібно створ11111 1ю блоку длs~ 
ЧЛТУ.22 І 95R.ОО І ПЗ 
модального. оіКJІі) В ЯКІІХ будуть ЗЩ\ХОДИТИСЯ ГІОСІІЛШІШІ на ОІДСО та КІІОІІКа 
«закр1п11 l\ІOДaJll>HC 13\КІІО». 
Po"Jl\tiткn HTML готова, ш1ступ111111 крок rютріб1ю за доrюмоrою J(JLІcry 
зроб11 п1 ш.об при 11ат11ска1111і 11а кнопку з класом play-viclco оіюсривалось 
r-.юдаль11е в1к110 щоб оідсо всереди11і модального rзію,а поч1шало само 
uідтоорюват11 с1,. 
Тс1кож 11отrіG1ю 11юб пр,1 11ат1 1 ска 11111 11 а к1юпку ·i класоІ\1 close-vidco, 
модальне в 1 к110 закр 11 валось, n uідсо 11сrсспшало в 1дrnорювап1сь, рішення 33 
ДОПОl\ІОГОІО jQLІcгy ІІ[ІІЗСДСІІО ІІІІЖ1 І С . 
Остан 11і 11 крок розробк 11 З сскІ(ЇЇ - с1 илізnнія за лоrюІ\юrою css, результат 
якої зображено 11 ::i р11су11ку 4.32 та 4.33. 
Р11сунок 4.32 - З секuія Голов110·1 сторі11к11 
Рисунок 4.33 - Модал 1, 11 е вік 110 в ідео в ідгука 
Рrп;юfжо 4 сеюrії Голотюї cmo;Jimш 
Розробка 4 секції є не менш вюкл11 1юю 111ж попсред111, вона показує 
ю1 if'my ст:1 11 реал іза ції проекту комтшісю, ·I() 1\ І )' в11рішсно зробнтн анімзuію 
11оя ви ко~ююго етапу, яка пр11оертат11 і\1 е ува 1 ·у в ідв ідувачів. 
С11оч[Ітку розробимо зображе111 1 я(зо()раже1ю ,ia р11су11ку 4.34), воно с 
ос,юrюю дт, анімації. Всього 8 етапів ш1і ;ш11tії. А1-1іі\1аuія полягає, що коли 
ві_rті,r~ув[Іч rорпп11 ме 4 секцію і д іі1де до І I 1уIIк1у реалі-з~ції проекту, плавно 
с11р;1н:1 11ш1о:rят11меться оп11са~1ня етапу і тnк ·з 11;1СТ) 11111ш11 всіІ\~а етапами. 
47 
'1 )\1' . .2 2 11J5R.OOI fl'J 
Рисунок 4.34 - Зображення для 4 анімації 
Для початку зробимо розмітку HTML. Створимо section з класом project­
realisatioп і обмежемо контент за допомогою wrapper. Код зображений нижче. 
<section class="project-realisation"> 
<div c lass="wrapper" > 
</div> 
</section> 
Рюработка прое,ста ,.,...,. 
'""""""" зnмростан.,о, 
Постав.а ОООР\flОВЗНІtЯ 
(соnн....,. ,.оду,111, инвертор, 
метаmокОНСТ'Р')tЩНИ, кебели и 
тn) 
Строитеnьно . монт~• 
рабоТЬІ 
Подw,а заявnеtІІЯ в 00\знерrо 
°р"а"<Ч"іТ"NО"ІО" С"Чі"ТІ8 дХ/1-11 О 
поо,-,еtІІЯ mareмlti І'ІО 
·~тарифо,/ 
Устанот.а ·зелаооrо· 
зnet(fJIOC'l8Jчнtea 
(дВ,'nв~,НтрМо;ЬнІер1( У'°м")" '""' 
ДСІІиюр ( 06un3,+l-i.,ID на 
,Ч.,ОДа."-f ЗЛМрQ1ttс,РfИИ 
Р11су1юк 4.35 - ➔ секція Головноі' сторінки 
ЧJ\І ' .22 19 К .00 1 Jf] 
ІІ а~ту1lн ні\ \ lЖ, ' 1 ІЮ\ Н 1 40 , 1·щ r'r Jtля ·юбраж шrя . 
di с , " 'арІ1 - lisa ion"></diV> 
І І k.11я І \ЬОІ 'О ство~ 11 ю кожен з ета 11 іо реалізації в такому вигляді . 
class="first - st.ep " > Paзpaбoткa проекта сетевой соЛНР'-ІНvй 
злектростанции< /р> 
, я II r11n1111 , 
1 ,Іut Garui:n» 
1 
І 
!- ➔ RIOHOJ\1 HC 
снітлення 
i,1r,1i 'І L ,(tІ,І 111,ІНІІ;Ч 
IJI OiJl'U',11 Н~ Р, ~t\.JL" ,І Hi ч. J Ї Ні,}1 
_ _,""'0"J-І'"И'-Щ'\111ІЯ оt1р;:нпrх 
хараюер11с 11к  
Про1:ктуuu1111я 
1t)!ІТ,t;І, і 
п, ск -наладка 
Р11 сунок 4.36 - Структурна модел t., стор і11 к 11 « Послуг» 
JJ р11с1уп11мо до стил і за ції, резул ьтат якої 1-ншеде н1 11111с1 p11cy111-:y ..iJ:ї 
·~НJІІ1ШІ1 JІОС Ь ви конати а німацію, ЩО зді нс 1 1ювн1 І І і\ І С І ЬОІ ''П ДОПО:\ ЮГО\О 
jqt1c1·y. ) lл я кожного блоку опису ета пу реал і з~щії 1 юї рі6 11 0 11 pt) t111cnтi 1 . 
Н ( ($(tl1is) .scrollTop() + h) >= $( 11 .fi1st ­
~Lєp " ) .of f s et() .top) { 
$( ".first - step" ) . css({\·i:н J 1il iL y : 11 visibl e 11
}) ; 
$ ( 11 • first - step" ) . aclc1C'la~~- \ ' a11i111atєd 
boll11ce I11Rigl1t' ) ; 
49 
► 
'І) \І 'У , 22 195~ .ООІ 111 
)\С 11t'J)C1'1\H\П І}СЯ 1 '' 1 К що 11р11 trpoкpyll{i сн~рінкн rrоrлунок дох0 f('-l'ff ДО 
r , 
t1C1'111\'1\' стану рсшtі3:щії, він стас mщ11м11м і Jtобавляюп,ся класи animatcd і 
1'11.'1\\IIO~lнl{igl,t , m<i ВЇJ\11оuіщ1юп) за r111імш1ію rroяшr блока. 
І оз1,061,:а сто1,і11ки «Послуг» 
Відвідувач зможе озна1101\11 пись з послугами які надає компаmя «Solar 
G,1гtieiш. На рнсунку 4.36 зображено структурну модель сторінки Послуг. 
3 рнсунку 4.36 видно, що ІЗсього 12 послуг, в більшості з яких є опис 
послуги за 4 критеріями (осноІЗна характеристика, принцип роботи, основнr 
засоби застосування , вартість обладнання від обраних характеристик). 
Тобто У відв ідувача є можлиІЗ і сть більше детально ознайомитись з 
кожною послугою, і в раз і зацікавленості , залишити заявку для зворотного 
зв'язку. 
Сторінка послуг пrсля проектування матиме вигляд, який наведено на 
рисунку 4.37. 
УСЛУГИ 
.'r{. 
~ lii/lJ ~ 
Солнечнь1•е злект ростанции Гелиосистемь1 Телловь1е насось1 Счетчики и креnnения 
f ··/•:::• • 
у 'І" "і' ~ ~ 
Автономное освещение Автономное орошение Подключение Зелёного Проектирование 
Тарифа 
fl \ і І 
~ fь 
Юридическое сопровождение Консалтинг Га рантийное обслужи ванне Монтаж II nуско-намдІ(І 
Рису11ок 4.37 - В11д сторінки «Послуги» 
З рисунка 4.37 вид110 що у ш1с пр11сутніі1 блок з списком послуг, які надає 
компанія «Solar· GапІеп». Пр11 11 :п11скn1111і rш одну з послуг відкр11ват11меться 
сторінка з детальним 01111соі\1 ніr ·ї 1юсJ1уп1, перехід на опис послуги шсля 
ибору «Сонячні електроста11ції» 11:11к'/\~110 1ш рисунку 4.38. 
11)('!' . . 19~~.001 r1·1 
n~11uиn ~АЄОТІ,і 
НЯЧНЬІХ 
3"m'І'ОСТАіЩМ~ 
ПРММІ1НЕНИ~ соnн~чн1,1х 
ME!o.11'0cfAHUMA 
ЦЕНА С3С ПОД 3ЕЛ[Н\,І~ 
ТАРИФ 
Описание технопогии 
Соnнвчная ,нерги.я • зто nрео6ра1оеание з№рrии от соnнечноrо света в :)І"Іекrрич9С190 л~ • 
неnСІСРСЛ(теснно с исnоnоюванием фоrозnскrрІ-Nества (PV). косеенtЮ \.ІСf'Юnьзующеrо конuентра,ороеанную І 
соnнечную 3t4ерrию, n11бо комбинаuмю 
Комцерчсскме концентрироеаннь~с солнечнь~с зпектрос,анции бьmм еnервь,е разработань, s 1980-х ronax 
Соnночнwо 3ntктростанцмм сrаноеятся Оь,строи нодороrоИ щt]І(оуrлоро.аной 1охноnоnюй D.ЛЯ 
Рисунок 4.38 - Опис послуги «Сонячні електростанції» 
Опис послуги «Сонячн і електростанції» здійснюється за 4 пунктами яю 
наведено в модал ьній структурі стор1 н1<и Послуги , один із пункт1в, а саме 
вартість обладнання в залежності від обранихUхарактеристик зображено на 
рисунку 4.39 та 4.40. 
Цена СЗС 
Станция на 5 кВт 
Станция на 10 кВт 
Станция на 15 кВт 
Станция на 20 кВт 
Станция на ЗО кВт 
Р11су 11ок 4.39 - Вибір х3рактер11 с11 11, ()Оm1; 111,111ш1 
11ослуги «Сонячн і еле 1п \)ОС'І іШІlії» 
5 І 
Ч)\1 l 95R.OO І І П 
ІІР- РІ\ 1'1118 ОІІОІ'!)'І\011~ 1141!: 
n,n nрн n ~ nоn..Іф, t nn 
, \ 'tl)n НА ПОНА - ~4 •; 
' Доrюn,11,mnьноя нмрузко но ІфОІІnю _ 20 кr/ кв : 
Мощнос ,,нв рт-оре _ ,о.о ке, 
, Ор.1 нтоц11я - ю . 
Пnощадь соnнечн1,1х щ1неnеА - 62,32 м2 
Зкономмчес1n1е nок113ат-еnм : 
\' Годо-, доход - до 2565,46 $, 
Срок окуnаемости - до 5.5 пет. (с уче1ом Вашого потребnения) 
о В1,1работка зп. знерrии за год -до 11 812 кв,·ч: 
·9- Веnичина зеnеноrо тарифа - О, 18 Евро/кВт'ч: 
Гарант-мм: 
·Q на соnнечн1,1е па непи - 1О  пет: 
6 на инверторное оборудование - 5 пет: 
1) на монт-ажн1,1е работ1,1 - 2 года 
Станция на 15 кВт 
Рисунок 4.40 - Вид блоку при виборі характеристики « І О кВт» 
Розробка сторінки «Галерея» 
.1 
К111,,.ьш oGлuc'l ь 
l 
1- 1 l 
х ~р~щ ( ' \~ tJІJJІII l', (.'1111 ttщ1' 
І І І 11111 tl,O 
Рису 11 01< 4.-+ І l ' І J)) к 1_,  J )І 1:1 ~10,t.tc .1 11, «Галереї» 
52 
Ьт 
11Jtl\' .2, 19)X.(HII 111 
'\~"Жt..' 11ю1 .11111111 1 н1 с 11 1 11а 1111 r rr · r - rrorпaлy «Snlar (iarclen», ле 
\\І "і \'Щ\\j ЮЖ\.' ІУНН11іm,,н 111 \.' l, '\ І\ІІІ<О ІІ Н ІІІІ НІ rобота І Н кnмrrа нії у RCi X регіонах 
~\.1 аїнн . 11 ,, ' ~J\yc ю с1р: 1< 1 урну щ>;tеJІІ, сторі нки r ·алерея , яка 1ображена на 
рн 'унку .41. 
«І 'ал срся » , розроблятиметься динамічною 11 можл ивістю 
,10 )~Шл ятн ноuі роботи ко 1 11 r1 11 ії. І І роектування стор ін ки виконано за сучасними 
І 'ТО а 1н НТ 1L5 і CS 3. 1І рн кла;t ви конаного проектування наведено на 
рнсунк 4.42. 
ГАЛЕРЕЯ 
·- • 
Рисунок 4.42 - Вид розробленої сторін ки «Гелерея» 
ХАРАКТЕРИСТИКА ОбЬЕКТА 
Осенью 2016 ,ма еи.е ,,,w :..,неnь I\Ye&<,Oit ООласти no.:i ...,. ..,...1,•c-1 , 
11роrрамме 1Зеленt11,і 1арr1ф• с no,•::iщt.ІV , ::~,•мн11,1 SolarGarden 9 
самь~е ~opo1r.;1e сро~1• i.a ~po1u.e 1dr0J,>0.J,10ro Д(І\!J 61:·i!J )CtJr.oe.n\' ..J  
СЕС uощностью 5 ~в1 с даnьhе:1ш111-,1 -1а;.,.1.ц,1в...11-,1,е \І мvщ~.Ф.:н1 
Для реат1:~аЦІt,, npoe~,a 11с10:~ь1vв.11111,ь вь.с~1~0,.J~"(Ііеоі-,~,.~ 
noлн"p11etanrn1чec..i1e nak л,, от ttaLL11~ nJµ1w~poa ~~1а.-.. ,1 
пщщ1ючен11е с,анци,1 бьІП npoшse4e,. n о.:~11н ::е"ь 
18І.hl,'f8CJ,\"3 1.apa1i1ep1\CH\r..ll об\.е~,а 
Р1 І L' ' І І t)і( -1 .-1 l Обрп 11 11й об'єкт «К 11 Ї13с 1., 1w оеї .1 1 : 1L'ТІ ,>> 
'IJ\1 ' ... 21<>5R.OOI 11'! 
lt ,, 1.'1,,pi11tti <\ 1 'І 1.1І  '-'Р<.'И )) ро1роfіж·1ю crt11coк I rн1 ко 11а 1111 ІН б ' 
fJ сктамн 
"\, ·, н1 '·ш ії <,S,,І а 1· (1 ,H\t1.'m) , 11  r: • . . v 
РІІ н11\юр1 o;t11oro ·1 об ' скпв r11 11кrнпагп,ся лсталf,ІІНН 
111~ ,,1Уt·к1 ,. '\ 1і11і 1 --,лс 1,, . .. б • · · 
,,, • ' \:С Ю, 11р11юrан rтЄіору об 'ск г << І<ншс 1, ка о лас п,,> та м1н1 
гм1('р6 нанс;,с1ю на р11су111<у 4.43 та 4.44. 
Рисунок 4.44 - Перегляд фото об'єкту «Київська область» 
Сторінка Галерея та всі її об'єкти повністю адаптовані під всі сучасю 
мобільн і та планшетні пристрої, кросбраузерні , що означає щентичне 
відображення сторінки у всі х браузерах . 
Розробка сторінки «Ko11111al(J11u» 
На рисунку 4.45 зображе110 структурну модель стор1нки «Конта1'ї1І» 
Інтернет-порталу «Sо Іаг Gагdе1ш. Во, ш розроблятиметься щоб інформуватн 
ві двідува ч а про контактні да 11і кожного з в ідд.іл ів компанії «Solar Gai·den». та 
розташування головного офісу в 1. Черкяси. 
І нформаці я про контяктні щ111і в ідділ і в м 1 ститиме три пункти. яю 
наве;\е110 в структурній модел і , n саме 1 1 нс роботи , моб ільниіі телефон та е-шаіl. 
а інформація про розташування голов 11 ого офісу в ідобрюкатиметься на карті, 
яка р03робл ятиметься за доrІОІ\Ю І 'О І 1) Google 1\1\np s, ТОІ\І)' відвідувач зможе 
діз11а111сь м ісцезнаходже1111я офісу кш,111а 11ії, 1nкож 11среЇІп1 на Google карти та 
nроклnсти маршрут до офісу . 
54 
ЧJП . І 9. ~ . (ЮІ rf 'J 
( екrеrпря ;111рсктор<1 
сnм роrrашуnапня,1 
1су 1їщ111анії «Solar Garden» 
І<JJ,ii.І,,Іj,;, Т~ .. ,~ ..· 11, І •t 
Рисунок 4.45 - Структурна модел ь сторінки «Конта кти» 
Готовий прототип сторі нки «Контакти» з інформаuією про конта ктні дані 
та розташуванням головного офі су компанії «Solar Garden» після розроб ки 
зображено на рисунку 4.46. 
КОНТАКТЬІ 
ЮРИДИЧЕСКИЙ ОТДЕЛ ОТДЕЛ ПРОДАЖ 
С 9.ООдо 18.00 С 9.00 до 1в .оо 
(067),182,71-77 (067)-367-91-99 
~о/;щ;а1dсп uu@gma•J сот 
СЕКРЕТАРЬ 
С 9.00 до 18.00 ОПЕРАЦИОННЬІЙ ДИРЕКТОР 
(067)-123-81-ВВ С 900 до 18 00 
(094)-881-01-ВВ 
Р исун ок 4.46 - Конп1 1<тна інформаці я сторін ки «Ко1 11 ~11': 11J)) 
55 
'IJtl'Y.22195~.(IOI JІ1 
ВИСІІОВЮІ 
\' ~О)\і НІ\ 1<'' )11 а~н,я 1<валіфікаrtііі11ої rюбо-пt бакалавра отриманю" 1 
11\'!'Н\)ф) нкціо11аль1111tі ада~п11111111і1 корrюратиnт,й портал, повністю готовий до 
18~'1\)~ування . Данніі нортал оріє11тооа11нй на рекламу та залучення нових 
1'JІіснтів. З 1Їоrо допомогою кор11стуоачі можуть отр11мувати необхідну 
інформацію про компанію а її послуг11 , також залишати заявки для зворотного 
зв'язку з компанією. Відвідувач може оз11айом 11тись з готовими робота~1и 
компанії та переглянути nідео-оідгуки клієнтів. При розміщенні порталу в 
глобальній мережі географія розповсюдження зростає до масштабів країни . 
Розглянуто класифікаціюю WеЬ-сайтів. Досліджено, які технологій є 
більш зручними для створення сайтів та портал ів в залежності від їх 
призначення. Виконана класифікація типів WеЬ-сайтів, описані їхні основні 
характеристики та параметри. Наведені актуальні та наочні приклади найбільш 
розповсюдженої типізації сайтів. 
При розробці адаптивного корпоративного порталу проаналізовані 
сучасні \VеЬ-технолоrії, що дозволяють створювати інтерактивні WеЬ-сторінки. 
Найбільш придатними для виконання поставленого завдання виявилися 
HTML5, CSSЗ , РНР, SASS та ін. 
Розроблений адаптивний Інтернет-портал задовольняє вс1м вимогам, 
поставленим на етапі постановки завдання . При розробці Інтернет-порталу 
використана модульна розробка , що надає змогу надалі легко розширювати 
функціо1~ал порталу. 
Портал, що розроблений, є адаптивним, тобто здійснюється його 
коректне відображення на всіх сучасн их мобільних та планшетних пристроях. 
що дозволяє залучити нових поте11ці й 1-111х клієнтів. 
Також готовий Інтер11ет-портал є кросбраузер1шм, що означає однакове 
Ного відображення у більшості браузерів , 11\0 є з11ач11ою перевагою над іншими 
nорталам 11 ко11куре11тів. 
Реш1і 3овано функцію зворотного зn 'JІЗку , тш J\ол.ає можливість компанії 
зв·я·~ушm1сь з відвідувачами порталу, які зш11ш111.1111 сnої контактні дані. 
ЧЛТУ.22 І 95R .ОО \ І П 
1\нроб.1 ~,ю 6лог з 1юв111шмн, що на;щє можливість компанії занікави-rИ 
t\tдni.n,yв3чin тз ознзііо 1нти їх з індустрією альтернативної енерге,ики. 
Відвідувачі можуть слідкушп11 за ноnинами альтернативної енергетики та, в 
разі зацікавленості альтернапш110ю енергетикою, скористатися послугами 
компанії. 
Також розроблена «Галерея», де вщвщувач може ознайомитись з вже 
виконаннмн проектами компанії. 
Для просування порталу в пошукових системах: 
проведений аналіз тематичного сегменту; 
складено семантичне ядро; 
сайт оптимізований для пошукових систем. 
Просування і розкрутка в Інтернеті проводилася шляхом реєстрації в 
пошукових машинах, в сервісах закладок та поштової розсилки. 
. ... 
Проведена збірка проекту, що є невід'ємною частиною оптим1За1111 
порталу, яка прискорила завантаження. 
Проведені дії дозволили знаходити портал компанн в пошукови.'< 
системах першим, ніж портали або сайти його конкурентів. 
'l )tl .22 1(J~R.OOI rІ J 
('llltCOI( НІІІ<ОІ'Іf< 'ТЛІІІІХ ){ЖEVJ-:Jf 
1, (1\ll) 1{\11\1't't' « І О Ooltlc11 l{l1lc~ of \Vc~Jsitc rJcsign & f:onctic,nality,, 
І Е.11~1< 1 1юннніі prcypc І · Рсж11м ;{ос ryr1y: І,ttps ://s i tc.clt 1l11·L111r1cr.ca/pagc/l ()ф 
goltk1н11 lcs-of-\\1cbsitc-dcsi gн-ft1 нсt іоrш І і ty 
2. CSS І Елект~ 0111111і1 ресурс] . _ 20 І о . Режнм доступу: 
11ttp ://\Vcbdax .нn/sposobcss.plip. 
3. Jamie .1ti,, i1cг «9 Guidcliпcs for Exccptional Web Design, Usability, апd User 
Ехрсгіспсе» lЕ лектро1111111і ресурс] Режим доступу: 
l1ttp :// blog.liнbspot .com/blog/tabid/6307 /Ьi d/30557 /6-gu idel ines-for-
except і опа 1website-design-a11d-t1sabi І ity.aspx 
4. Ja,1aScгipt [Електронний ресурс]. _ 202 1. _ Режим доступу: 
11tt p://ua. wik і  pedia.oгg/wiki/J a vaScript. 
5. Nielse11 Noгman Gгoup . World Leaders ш Research-Based User 
122 Ехрегіепсе [Електронний ресурс] Режим доступу: 
11ttps://,v,~1w. 1111gгoup.co111/ 
6. WoгdStгeam «А Веgіплег's Guide to Content Strategy for the Web: І О Things 
You Need to Кпоw» [Електронний ресурс] - Режим доступу: 
11ttps : //,1vv.1w.,voгdstгeain.co111/blog/ws/202 I/  11 /28/content-strategy 
7. XML [Електронний ресурс]. - 202 1. - Режим доступу: 
l1ttp ://www.4stud.i11fo/Web-pгogгa111шi11g/x111l . l1t111\. 
8. Батршина Г. С. «Прикладная информатика в пс11холоr111ш [Еле1'.ронний 
ресурс] І Режим доступу: l11tps://stL1dopedia.ua/ 17 _ 12060_ tipi-
\~eb aytov.l1t111І 
9. Візуал ьна і єрархія сайту. Я к виділнти гшювне і організувати контент. 
використовуючи інструменти дизайну: колір, контраст, типоrрафіку. 
відстані . [Електронний ресурс] / ]1111а БурштеІін. Режнм доступу: 
111! р ://ti lda. ed ucat io11/a11icles-visLІa 1-11 іе1·агсІ1у 
10. И1пер11ст-маркетинr [Електрон1111Іі ресурс] .- 2021. - Режнм доступу: 
l1ttp://,\,,vw. ,v 11it esi te.Ьiz/Ma іп V i c,,1/Mai11/Sc1·\'il..'rs/ f\. •t,нketi11g.ht111I. 
І \111L' р11р1.:татор РІ ІР [Електро1111111і pccypL' I. -- 20ІО. - Режим доступу: 
l1tt р:// \\1\v\\1.so llt і 111e.ua/Ьookpl1p/. 
58 
' І JН .. 22 11>5R.001 r, i 
1~. Іk1ю.1t1,юм11111.' І'ІІР ІЕJН:1<1 ро111111іі рсс rcl . 2021. Режим ;юстуr1у : 
1,tt1,://pl,p .sн/І'tщ/' soH\vaгc. 
1~. Клnсс11ф11ю.11\11я саіінщ І Елск1ро11 1111 іі rccypcj. - 2020. - Режнм доступу: 
t,щ,://\\І\\І\\' ,1н тcp11cт-tccl11'ologi cs.ua/art ic l cs/art icle_  l4 86.11tml·  
14, Ко1щс1щ11я прос1<та tЕ лсктро111111 іі ресурс] . - 2021. - Режим доступу: 
t1ttp://,v,v,v .54 28030.ua/stcps.plip. 
t5. Макарова Т. В . «Oc110n1,1 111 1форшщ1ю11 11 ь1х технологий в рекламе;> 
[Електрон1111і1 ресурс] Режим доступу: 
https://studгef.com/462945/iп roгmatika/klas і fi katsiya _s aytov 
16. Організація контенту на веб-ресурсі : плоска ієрарх ія vs глибока ієрархія 
[Електронний ресурс] / Режим доступу: 
https:/ /1 рgепегаtог. гu/Ь І о g/2021 /09 /03/0  гgan і zaci ya-kon ten ta-na-veb-resu rse­
ploskayai eгaг\1i ya-vs-glu b okaya-i eгaг\1 i ya/ 
17. Офіційний сайт Vago11l11fo [Електронний ресурс] - Режим доступу: 
http://vago11.i11fo/ 
18. Практика применения PERL, РНР, АРАСНЕ и MySQL для активнь1х WеЬ­
сайтов / Александр Вячеславович Фролов, Григорий Вячеславович 
Фролов. - К. : Рус. ред., 2022. 
19. Принципь1 создания сайтов на современном :папе [Електронний 
ресурс]. - 2020. - Режим доступа: http://sl1aгley.ua/1iteгatuгe/ 113-vazlшye­
principy-sozda11 iya-sa jto,1-v-гa 111kax-so\1гeшe1111yx-tendeпcij-
sajtostгoeni ya.l1tшl . 
Прохорский Г.В. Как сделать свою \1/еЬ-страничку или сайт: учеб. -
Москва, 2005 r. - 245с. 
Сидоренко Алексей . Созда 1111е 11 раскрутка сайта. [ЕлектронннЇІ ресурс]. -
021. - Режим доступу: www. рг-пеws.на. 
ипи Сайтів . La11di11g Pngc [Електронний ресурс] / Режнм доступу: 
p://znet.гu/гaskп1tk;1/,1 i cl y i -snyt o,1- i - i\1-klassifikatsiya-s-p1·iшe1·a111i/#Pagc 
итр інтернет ріше 111, п1 тсх 11шюгі11 ONVOLGA Vagoпlпfo [Електрошшіі 
уре] - Реж1-1м ) lосту 11 у: \1t!ps ://oп\10.t1a/statpюdvig/2128-kriteriioceпki­
tenta-site.l1t111 І 
59 
І ) \ 1· l 91R ОО І rП  
4. \ ·3 \ )ЇJ\\ ті 11 ) -саН 1. . ( ' 11 оні 11rи11rн1шt ю1аfіілі ri : вщ п п 11HRn гей 
ДІІ ' '\І \1 1 )\О 1 ОН1С111 , nін i11r rФейс ф рмн 1З ЮRЛ ШІЯ JIO пошуку . 
1~))ЮІІІІЮ 'Ті 1сс1 nш111я . [Електронний рес р J / Вікторі~ '3акірова -
р жн 1 ноступ : l1ttps://ww\v.a, l11narю .с rn/edt1cation/article. /yu1,ah1\iti/ 
GU 
JtOJ{Л'J ОК Л 
ЗЛТDЕР Д)КЕf 10: 
Зав. ка < едрою ПЗАС, професор 
Первуні11ський С.М. 
~ ~r-,u~~ 
,, 2.& ,, _J()ц{~--- 2022 р. 
\VЕВ-ОРІЄНТОВАНИЙ ДОДА ТОК ДЛЯ ПРОДАЖУ КОМПЛЕКТУlОЧИХ 
АЛЬТЕРНАТИВНОЇ ЕНЕРГЕТИКИ 
Специфікація 
482. ЧДТУ 22 І 958.001 
Листів 2 
Розробник Андрієнко B.l\1. 
Керівник Катаєва Є.1O. 
2022 рік 
61 
t\R . ЧJП 1< J 5X.OOІ 
\ \tУ~ІІ :\ІІl'1ІІІН І І ніі 1cr1 на ння ГІрн 1і rка 
-~ ~ -.чло ._ .. 19 t-01 120 1 Текст 11рограмн 
4~ 2 . ЧЛТУ . 2195R-01340 1 \11струю \ія користува1 1еві 
-І ~2.Ч ЛТ) ·"""" 1958-01 90 О І ГJ афічні 1атеріалн 
- --
L 1 
-----; 
г 
Г-
--
>-- -- l 
,_ r-
І 
І 
f- 1 
~ 
І 
і 
\\'ЕВ-ОР1 - НТ ВЛ111 ІІЇ ДОДАТОК ДЛЯ ПРОД )КУ KUivlf ІЛf.КТУІОЧНХ 
АЛЬ ТЕРІІА ТИІЗІІОЇ ЕІІЕРГЕТІІКН 
Текст програми 
482.Ч}l.ТУ.221958-01 12 01 
Л11стів 8 
Розробник 
4Х2 , 'fJ{ І У . 221 () .~~ -О І 12 О І 
"1н-,·н~<'l ' 
.. tH\' c )~ n r; ,,.. ttw1· ,·чч)(~k:"'~ 
.. tH v c ) i.,G!; "' "logo" ::-
<a }н:ef ,,, "i11dex . }1tml't > 
<img '~--' rc--"1' mg І solar - logo . png'1 
.,lt = 11 Sola1·Ga1·deн" > 
< /а > 
</div> 
<div class="left - side" > 
cnav class="main-nav " > 
<Ul class="nav- list" > 
<li > 
<а href="" 
сlаss= " асtіvе " >Главная</а> 
</li> 
<li> 
<а 
hre f= " html /services . html " >Ycлyги< /a > 
</li> 
<li> 
<а 
href= " html /news . html ">Hoвocти</a> 
</ li> 
<li> 
<а 
href="html/gallery .html">Гaлepeя</a 
> 
</li> 
<li> 
<а 
hre f =" h tml/cont ac t . html " >Контактьr</ 
а > 
</li > 
</Ul > 
</ nav> 
<div class= "contact-mobile-info"> 
<Р> +38 (<span 
class= "kyi vs tar " >067 </ span>) -367-91- 99</Р> 
<Р >+38 (<span 
c l ass= "kyi vstar " >067 </ span>) - 182- 71 - 77 </р> 
</div> 
</div> 
</ div> 
<div class= " js -toggle -main- meш.1 11 > 
< і c lass= "fas fa -bars" ></i > 
</div> 
c /l1eader> 
l1eader { 
111argi11: О 25рх ; 
padding- top: 2 0рх ; 
l1e igl1t: l00px ; 
position: relative; 
64 
l 
, 11 і.ЧЧ 1· { 
. di t:l 
н~ · jf:) 11 : 
с 
li 11 - і ms: с n n ; 
ьас cgrou11d - color: rg ( 
а о, о, 
padding: о , . ) ; 
О Орх; 
posi ion: relative; 
bord r - radius : 15рх; 
. left - side { 
display: flex; 
align - items: cente r•,  
} 
.nav-list { 
li { 
display : inline-block; 
margin-right : З Sрх; 
position: relative; 
transition : all.4s; 
&:  : after { 
content: 11 ІІ ,.  
width: О ; 
transit ion: width.4s; 
} 
&:hover { 
color : #ООЬООО; 
&: :after { 
content: 1111,.  
position: absolute; 
width: 100% ; 
bottom: -lOpx ; 
margin : О auto; 
l e ft: О; 
right: О; 
height : 2рх; 
background : #ООЬООО; 
& а { 
color: #О ОЬООО; 
} 
а { 
text - deco1:a t in11: 11011€:; 
color: #fff ; 
font-fami l y : ' R 1) :ІL) І c,.'3 la l) ', saпs- serif; 
65 
foнt - nize: l~px; 
fон - weigl1t: 700: 
paddi119 : О Зрх; 
.active 
color: #ООЬООО limportant; 
&: :after { 
content : 11 11 ; 
position: absolute; 
width: 100%; 
bottoш: -l0px; 
margin: auto о; 
left: О; 
height: 2рх; 
background: #ООЬООО ; 
} 
} 
.contact-mobile-info { 
margin: О ЗОрх; 
р { 
margin-bottom: Spx; 
color: #ffffff; 
font: 300 lбрх 'RobotoSlab', sans-serif; 
position: relative; 
.kyivstar { 
position : relative; 
&: :before{ 
posit ion: absolute; 
content: ' '; 
display: block; 
width : 24рх; 
l1eight : 24рх; 
background: url ( 11 •• / •• / img/kyiv s ta1.·. png " ) 110-
repeat; 
top: 50%; 
transform: transl ateY(-50%); 
rigl1t: бОрх; 
} 
. js-toggle-111ain-menu { 
66 
4~2-'f)tJ Y.22J(J5~-0I 12 01 5 
pL)S i t іон : "l>i:ю l \itc . 
cu l o~ : #(fffff , ' 
І 
top : 5 0% ; 
t1·,шsfo1,n : t1·anslateY (-so . 
left: З Орх; \ ), 
foпt - fa. mi ly: 'Fontдw 
font - stze: esome • sans-seri f ; 
24рх; • 
display : none; 
&:lюver { 
col or: #ООЬООО· 
І 
cu rsor: p ointer• 
} ' 
} 
.logo { 
transi t i on: trans f orm.Ss; 
img{ 
width: 2 80рх ; 
} 
&:hover { 
trans form : s cale (l.l } ; 
} 
} 
<footer> 
<div cla s s =" wrapper" > 
<div c lass="footer - main"> 
<div class= "logo "> 
<а hre f ="i ndex . h t inl" ><img src="img/ solar­
logo. png" a l t =" Sola rGarden" ></ a > 
</ div > 
<nav class= "foo t er- nav"> 
<Ul class= "footer- nav- list"> 
<li ><a 
href= " index.htrnl " >Глaвнaя</a></li> 
<li ><a 
href= " htrnl/services . htrnl " >Ycлyги</a></li > 
<li ><a 
href= " htrnl/news . htrnl " >Hoвocти</a></l i > 
<l i ><a 
l1re f ="html /gallery . htnй " >Галерея</ a></ li > 
<li >,a 
href="html/contact . htinl " > KoH 'J 'nK'Гf,r</a >< /li > 
</Ul > 
</nav> 
<div class= "footer - co11tact-info"> 
<Р class= 11 aclcl1·ess- i11fo" >/1</р> 
67 
<Р с1<1!-~- ~c-m;1 t 1-
і 11 f ~" , s() l ,-н g,н·,іен. t1,1 •.~ g r.1;\ і 1 . com~/ р > 
< І cla~s="phone - info" ></p :­
</d iv> 
</ d iV> 
cdiv class="footer -copyright" > 
<Р> "SolarGarden"c / p> 
</d iv> 
c / div> 
-::/footer> 
footer { 
background: #ООО ; 
padding: 40рх о 25рх О ; 
} 
.footer-main { 
display: flex; 
justify- content: space - betwee n; 
align-items: center; 
margin- bottom: 40рх; 
.footer-nav-list { 
li { 
di s play : inline-bl ock · 
І 
mar gin-right : ЗОрх; 
&:last - child { 
margin : О; 
} 
а { 
t ext - decorat ion: none; 
font : 3 00 18рх ' RobotoSlab', san s-serif; 
c o l o r : #ffffff; 
&:l10ver { 
col or : # О ОЬО О О ; 
} 
} 
} 
.footer - con tact - inf o { 
р { 
margin- b o t tom: lOpx ; 
color: #ffffff; 
posit ion : r e lative ; 
& : l10ve1.· { 
cta·sor: poiпter; 
68 
4R2,1  IJtTY .221 '>5~-О І 12 о І 1 
} 
& : )юvе1·: : before { 
color: #ООЬООО·,  
} 
&:last - child { 
margin: О; 
} 
.address-info: :before { 
content: 11 \fo41 11 ; 
display: inline -block·,  
font-family: FontAwesome · 
• • І 
position: absolute; 
top: 50%; 
transform: translateY( - 50%); 
left: -2 0рх; 
} 
.phone-info: :before { 
content: 11 \f 095 11 ; 
display: inline -block; 
font-family: FontAwesome ; 
position: absolute; 
top: 50%; 
trans form: translateY(-50%) ; 
left: -2 0рх; } 
.email-info : :before { 
content: 11 \fOeO 11 ; 
display: inline -block; 
font-family: FontAwesome ; 
position: absolute; 
top : 50%; 
transform: t ranslateY(-50%); 
left : -2Зрх; } 
} 
.footer- copyright { 
р{ 
color: #fff; 
text-align: center; 
@media screen and (max-widtl1: 1 200рх) { 
header.wrapper { 
justify-content: fl ex-end; 
padding: о 40рх о О; 
69 
) 
})C.:\tlCl . jG - ogg) -m"iY\ - 1'\\ ЩІ { 
ді~рlау: block; 
} 
11eader.left - side { 
display: 11one; 
} 
.footer-шain { 
justify-content: space-around; 
.footer-nav- list { 
li { 
display: block; 
margin: О О Зрх О; 
} 
} 
.aЬout-company { 
.company-info { 
padding: О 20рх; 
} 
} 
} 
@media screen and(max-width : 80Орх) { 
.footer-main { 
flex -di r ection: column; 
.logo { 
display : block ; 
margin-bot tom: 25рх; 
} 
. footer-nav-l i s t { 
mar gin-bottom: 2 5рх ; 
} } 
70 
/lO) lЛTOK В 
\VЕІЗ-ОРІЄ\ ІТОІ3ЛІ ІИі'~ ДОДЛТОК ДJІЯ І ІРО)tЛЖУ К()t\ 1f ІЛЕКТУІОЧНХ 
ЛJІЬТLРІ 1л·1 І ШІ ІОЇ ЕІ ІЕРІ 'ЕЛ ІКІ І 
ІІ ІС'І рукці}/ кор11с І )' ВіІЧ;l 
48 2. ЧДlУ 221958-0 І 34 О І 
Л1 1с·1ів 7 
-----'-Щ-'-і:- Л11лrіс111ш В.1\1 
Черкас11, 2U22 
71 
4R2.tf)(TY. 22 І 95Х-О І 34 О І 2 
\\н~ю6ю, г0Jюв11ої сторі11к11 наііважливіша, так я к вона піл.пбражатю11ст,,с~ 
.!\ЛЯ к~tіrнта с11сршу. Голоn11а сторінка має прнвертатн увагу. Тому внрішено на 
І\,.rюнні~, сторінці роз 1істити 4 секції. Кожна з яких несе свою інформативність 
для кnіснта. Стnоримо для І секції scction з класом welcome-section. Наступний 
крок потрібно спюр11п 1 ,,,1·аррег для nідео, яке відтворюватиметься на задньо~,у 
фоні , та спзор11мо тег video, де визначмо шлях до відео. 
Рисунок В.1 - І секція Головної сторінки 
Осталось все це стилізувати за допомогою CSS. Вид 1 секції після стилізації 
неведений нижче на рисунку В. 1. 
СОЛНЕЧНЬІЕ 
3ЛЕКТРОСТАНЦИИ 
, 1~~ -?- _ ВіJtобJ)аження 1 секції на lphone 7 
Р11су11ок 
72 
4Н2 .' ІЛТУ. 22195R-OI J4 01 3 
\ 1,,,, м 1ютрі61ю ·чю611 111 \vп1ррс1· юн, кuж11оr·о і I слоп111іn, ;1ля 111,oro спюрнw 
,іі,· , к1мсам11 11 -111cssagc, Jtc 11 - не 11 011і1tомлс1111я . /(ля тnro 11106 слоrа,rи rоrrгалнсь 
Яt ~-У\:\Н;щ , нІІК()J)ІІСТаємо 11ла~ ·і11 slick, якніі rзже встшювнли ранінrс, але ;юбавн~ю 
Ш\.1Ш\Нтува1тя . Л11 n.погіч 110 роб11мо слайд з списком послуг компанїі. 
Зробнмо сnнсок з перевагами ко~rпанії, це звичайний спrrсок, якнй пот,:ч 
зш1,)В1щмо і до кожного елементу списку добшmмо іконку, якп співпадап,:че 
~онтснту. Останн і й крок, це стилізацїі секції, результат стилізації наведено J-ш 
О КОМПАНИИ 
SolarGarden - компания, которая сфокусироеана на развктие -енернь,х реwенІ'й с мспа,Ь3083НИІ!м 
знерrосберегающих техноnоrиА и а111,тернативн1,1х мсточнмков :~нерrии. ОсновноІ1 наwей 
специализацией АІІПАІОТСА соnнечнь,е ~nектростанции ПОА ЗеnЬі11й Тариф, как д11я физІNес~их лиц 
мощностью до ЗО кет, та и ІОРІ\АІNеских nиц nромь,wnежого казначения. 
Наша коt.1nания занимается nроектироеанием, nродажей и монrамом оборудования альrернативноіІ 
знерrетики в целом - rелиосмстем, темовь,х насосов, автономного ороwения МЬІ nредоставnяем 
своим 111иенrам как rmньiR пакет услуг, так и отдельное соnроВQ11<Дение. 
Юридическое -оформnение и nад111~стние •зеленого, тарифа 
Те11111Nеское - nредварктельнЬІй анализ обьекта, nроектная документация 
МЬІ верим в то, что каждЬІА, ВЛОІСИв МІtіиму1,1 средств и усиnиІ1, ма,сеr nолу,<ІП• ма,симум •w~w. 
Наша цель - показать и нау,<кть ,а, правильно зконом~ь. а так же зарабать,ват• ка ал•тернатмІІНWХ 
источнмuх знерrимІ 
.,, 
[] w • і ~ 
о о ~ R1 
r'lpoф«MOМl8Jtll W..,.raa ксерrwемт ,,,_ с.,..._ 
Г•,....~• ...с• 
ne,coмan, o6opyJI08МUt .ео,у. .. -
tkJtyPI ... 
~ пlliJ l!I Q) 
•о 
5ІONtt4UIIНNpOlat•І т,х. .............с ., 5wctJW8f IWJ08 ..,..,I iecUmtМ .,n8a L 
оСі•tпОІ tОосмопнм, ,... .m  І• т,..,... 24 ..КОІ) Чt,uccw••• • 
Рисунок В.З - 2 секц і я Головної стор і11 к11 
З се,щія Головно·~" стор1нки м іститиме З модалью1х вікна які 
відкрнватимуп,ся ло кл і ку на блок з в ідгукоі\t. кож11с модальне вікно матиме відео 
в1дгук про компанію від кл ієнті в. 
Створимо З аналогі чних блока для в ідгук і в які і\ 1і сп1т11 муть в собі картинку 
та кнопку. Всередині цих блокі в потрібно створнп 1 по блоку для модального. 
вікна в яких будуть знаходитися посилання ш1 вілео та к1101жн «закрнтн модальн~ 
Ро·змітю1 І ІТМJ_, готоІЗа , насту111111ЇІ крок 1ю· 1 рі6110 за допомогою jquery 
обитн щоG 11р11 11ап1ска1111і ш1 юю1жу з юшсоІ\t рІау- , і~І~о uідкр11вмось модальне 
кно і 1цоб nідео всередині модального вік11а 1ю111111шю 1:н~ю відтворюватись. 
482 .ЧДТУ. 221958-013401 4 
Також потрібно щоб пr11 11атиска1111і на 1шопку з класом closc-videot 
,юда,1ьне вікно закривалось, а niдco 11срестшзало відпюрюватисьt рішення за 
;1\ШО~югою jQucry наведено 11ижч е. 
Осп11111ій кроІ< розробк11 З сс,щії - стилізація за допоі\юrою css, результат 
якої зображено на r11су11ку 8 .4 та 13.5. 
Рису , юк 13.4 - З сск11ія Голоrшої сторінк11 
Рисунок В.5 - Модал ь11 е віюю відео відгукn 
Спочатку розроб11мо зобрткс11ш1(зображе11 0 на р11сунку В.б), воно с 
ОСІІОВОІО дл я а ІJі маuії . І3сьо, ·о 8 е1апін ШІі І\tаUЇі. А 11і 1шщія ІЮJІ ЯГ::ІЄ, щu KOJIII 
відвідувач rортат11ме 4 сскu11 0 і д іІіле до І пункту реалізації проекту, 11шш1ю 
справn появлятиметься 01 111 с:111ш1 етапу і так з насту п1111і\1и всіІ\1а етnпа;..111. 
Відвідува ч зможе оз 11 :1 і101\ 11 ~т11 сь ·3 послугам и які 11::щає коі\111ш1і}1 «SоІш· 
Gагdеп». На рису11ку 8 .7 зобр"жс,ю струк 1 ур 11у модель сторі11к11 Послу , ·. 
з рисунку В. 7 ВІІДІІО, шо вс1..,0 1 ·0 12 послуг, в більшості з ЯІ<ІІХ с OllllC ІІОСJІ)'ГІІ 
4 крнтеріями (основт1 х:~рактер11ст11 к:~ , пр11нuи11 робот11, ос1ю1ші з.1соб11 
астосуваюн1, вартість облад11ш111и від обр,1 1111 х хара ктеристик). 
Тобто у відвідувачJ с іІІОЖJ ІІІІ3і сть G ільше детально оз11аі1омнп1с1> ·3 кож1юю 
. . . . , 
ослугою, J в раз, ЗПUІІШІЗЛСІЮL'ТІ , 'Зіl.' ІІІІJІlІТІІ З:l SІВКУ для зворотного зв JІЗКу. 
7➔ 
5 
Рисунок В.7 - Зображення для 4 анімації 
Сторінка послуг після проектування матиме вигляд, який наведено на 
рисунку В.8 . 
УСЛУГИ 
.'А'. . 
~ /j/J 
Солнечнь1•е :,лек тростанции Гелиосистемь1 Теплов1,1е насось1 Счетчмкм к кремеммя 
r .•,'.?.,t.\ .·,·.  ~ 
Автономное освещение Автономное ороwение Подкпючение Зеnёноrо Проектироеанме 
Тарифа 
!fl 
Юридическое с:оnроаождение Консалтинг Гарантиі\ное обслуживание Монтu: к nyc~ 
r11су1юк В.8 - Вид сторі11к11 «Пос.11у п1 » 
з рису111<а В .8 ВІІ)ЩО що у 11ас 11рисут11іП 6.І ІОК 3 L'ІІІІСІ,01\І ІІОL'.Іtуг. }ІКЇ н~щає 
омпанія «SоІш· (1ш·(Іс11». Іlри 1шл1с1ш1111і 11а о;,11у з ІІРL'Л)Т відкр11ват11меться 
орінка З ДС'J .1.'1 1 ,/ІІІМ 01 І І ІСОМ 11ісї fЮСJІУГІІ, 11rpcxi), 11а \)\ І І IL' ll\)L'.11)'1'11 після вибору 
онячні електрос ·1а1111ії» ш~всдс1ю ш1 р11су11"у В.9. 
75 
- І 
4Н 2. t І) (ТУ . 22 1(J  5Х -О І .14 О І 
Conнe·1нhte ~rрос11нцмм 
nr,,11111'11 l'At.011,I 
,·- rоnІІЯ'ІІ"-ІХ 
~nt11Тl'OCTAHЦMR 
nr,,~1•FHII~ СОПН~ЧНhІХ 
·' м1·11тrост,1.нци~ 
\' urnA С3С nод 3ЕП[НЬІЙ 
ТАrис, 
Оnмсанме техноnогмм 
СоnнІNНаЯ 3І!ер111А - 3"0 r,реобра:юоач,е 3-.!Р,"'4 ОТ СО-ІНОІО СІМ!Іа І -~.., r-.-\o 
неnосреі\ственно с ИUІоnь:юоаНІІем фаІозrектр,чвсrв.., (PVJ. ,освечно І'СІ10П""f"UІОП) ,о,щ•,rр~ 
соnнІNН}'ІО знеІ)!И.О, nмбо ,о,.,бн..;,uию 
К°"мерче001е ,ощен1р1•роеаннь,е солнеччь~е ,n~1poc,a,,u,и бwn• ~ p,upaбoraнw I tзaG-, roaax 
Сопночн1,11 )Локтростанцмм с1ановя1С11 бwстроіІ НІдОІ)Оrо.1 ІtIOІ:oyrfle!)OCI01 rexl<Ql10/\00~ IJtNІ 
Рисунок 8.9 - Опис послуги «Сонячні електростанції» 
Сторінка «Галерея», розроблятиметься динам1чною ІЗ МОЖЛИВІСТЮ 
добавляти нові роботи компанії. Проектування сторінки виконано за сучасню.ш 
методами HTML5 і CSSЗ. Приклад виконаного проектування наведено на рисунку 
В.10. 
ГАЛЕРЕЯ 
Рисунок В. І О - 1~11.1 pt1 :ро().1 1L'ІІtЇЇ сторі11к11 «Галерея» 
76 
482. LJДTY. 22 l 95R-O І 34 О І 
7 
ХАРАКТЕРИСТИКА 06ЬЕКТд 
~ІО 20 1е lg,:;,t t.u8 Q.1,. ,,r,_,., ~:ari оrлс,11 ~nio...io С 
rc:,orpl'l lile •~tww-. 18l.-f\• с m&.o...wo •~ SollrG.ttdtn 8 
CМIWt f~W'At (1)')1"" ._. .,,.,;u,,t WCO(~I) .,)tll4 е.-1\1 )("'~ 
С(С liIOt!•«r...o s, в, ,w. ..- ..,..и, ~•iJІ'&.lиJow Wi:'JUit«Т,1 
' /1М ~1111~)&.... nV)frTI IO'IQr\ QJГ..Q ~IJill""(t•  .....,. 
~J)tt(Tl.'t/')".' ...,. ll't N1tfo1'1111 Qf M.'ti,rr "Іf 1 Щ!f,r.. ~,•  .- І 
rt.llno.t'tt;I(! СІІ1 1•~бt,:, ~-~ J1 ос.,,,,_,.°" 
tt't-..,.ЧitC:•"8 •~11;.,.Cl tit,JІ cf,І,tJJJ 
..  . tlil\:\\ ,І І 
:... І . 1 
•І  
_, ~І..._.._ 
Р11су 11о к В. І І - Обра 1111іі об'по « К11ївська обл[Ість» 
На сторі1щі «Галерея» розроблс 110 сп 11 сок з в 11 ко11а 1111 ~ 111 об ' сктш,111 ко~1па 1111 
<<Sola1· Ga1·cle11», при n11борі одного з об'скті в в ілкр11 вап1,ся де І"[ІЛІ,н1111 01111с об'єкту 
з J\Ііні галерссю, пр 1 1 клад вибору об'скт <<Кr ~ївс ~, к[І область» та Г\Іі ні галереї 
наведе 110 на pr 1 су11ку В. І 2. 
Р11су1юк 4.44 - Перегляд фото об'єкту «К11ївсLК[І облnс1 І,» 
Сторі111ш r· ш1ере}1 л1 вс і її об'єкти повністю ада11 ювані riiд вс1 сучасні 
та п.11а11111ст111 пр11строї, кросбраузерні , що оз11а 1 1ас ідентичне 
· ображешш t: 1орі111, 11) ucix браузерах. 
,tX2.11)tJ . 2219.,~•ОІ rю . 01 ) 
, / 
J\OJtл rок ,. 
\\'ЕВ-ОРІЄНТОВАНИЙ ДОДАТОК ДЛЯ ПРОДАЖУ КОМПЛЕКТУЮЧИХ 
АЛЬТЕРНАТИВІ ІОЇ ЕІ І СРГЕТИКИ 
Графічні матеріали 
482 .ЧДТУ. 221958-0 І 90 О І 
Листів 5 
Розробник: Андрієнко B.l\1. 
78 
4Х2 . 1 1 ) ~1 ·У. 22 /<JSX-01 <J0-01 2 
•• . t' -1 
1,,1.-r1• ,, 
) 
J ~, 
: а. .- 1 ~ 
, ': ... 
,·,t .. ,;. ·. ... ....." ' 
Переваrн даного порта:1у: Не.::10.1ікн: 
• Ф~ ~•·~. . ~ я· переключення ~ювп 
()'Араінська, росіfіська . англіfіська); • не зручmп1 wпarm .:шя виві.:Іувача; 
• Зручнші блоr з новпнамп від • повільне завантаження порталу. 
~-омпанії «Енергія прнродш> . 
Рисунок Г.1 - Корпоративний портал «Енергія Природи» 
r./j ecotown НОІ;'І1ІІИ J ~ САМ П~ ГJІА ДОМ.У r,QДІ СОІ'VІІІ 
~ •Р••нІ )018 рсжу иti •тоnлІ» ~Уwр11і1 мІ' НО еwрtби" IIMfll д.n• з,s n.<: ... рм :afll s t~нсецІа: •• отr 8)'.р,моІ-0(\•'-'> 
ІІРС'АІПІ8 у.рnімці J~мnм С,:руд.нюt 1мробниЦТІІ Д1tІІІІ1. . , "" По1П88...,.мІ JApod."tec ма nІ;р«:І"JМRутtІ U.8·Т,..ф• .,. 
рОІІООрдкІІа 63-4 W'IM. rрм. І'-8'ТМ8іt'ТМ ро~момr Jборі ■ід.юді. OoІtC~pro 
; ' ~~.;:~ '')-..-:: .. ~ 
.Ї ~.. ·::..· ,---- ·-q І 
- -. 
;taнoro порталу: Недо.1ік11: 
• погана адаптація: 
• повільн~ заванrажения порталу. 
Р11~)ї101, J '.2 І11т"р11ст-11ортал «Есо То\\'\1)) 
79 
-
482. ЧДТУ. 2219 58-0 І 90-0 1 3 
оо о 
Гелиосистемьt под ключ: 
• дnR iOpllЧ('lO 400(ЮІО6жrниR 
•д ля подlkржа,шя omonni:nuн 
. дп,1 обо1реоо 6осей11а 
Переваr11 .JiU-юro портRлу: Не.Jо..1і1..и: 
• шв1ШJ<е завантаження порпшу: засПІрі,111іі Jюarrн: 
• а.:нштаuія nL:.i сучасн і мобі.1ьн і та незручна нав іпшія по порта,'Іу: 
планшетні прнстрої. • ві.:~сутність вовни коьшанії. 
Рисунок І . З - Корпораї11в 1 111іі 1юрїал «Rеп Eпergy» 
NIШrJil11Jd{ U!Тtp!~t-noprш 
cSo!ar Oardtn> 
~ІЬ:путк 
.І  
М:~ІІ}ІІІЬ Гш~р,а 
г .4  - стІ))І І<ТУ \) І Н1 і\ НЩ·С . 11 , і111 с рІІl'ї- І ІОр 1 алу 
Р11 су1101< 
хо 
--
482.ЧДТУ . 221958-01 90-01 
4 
. -
,,, • • • •.  ..,:~/~), :.J_1,.,, _'_•і.,•~ • •І 
r, ~-f~~i\.!,--:--~· · .. 
~. .. :І"_ ' ,, 
- • Гtпіоо,стеми 
1'fJ )ИНUIOJ р:аботи " 
Т ,anoa1 касоси 
Оаюаю iaco61t 
АJІтономи, аастосуа 
оаімtинж 
артіст1, оел141 
A:a'l'OHOМNt а 3anezиotт ід 
поливання обраюsк 
;rа~т•ристих 
П да:лючеННJІ. 
Зшmоrо Тарифу 
Пpoerry2 анн.11 
К oиcan:r інr 
Гарантійне 
обслуrов~аюц 
ОВТа:8: І 
пуа:о-иаnадrа 
Рисунок Г.5 - Структурна модель модуля «Послуги» 
Модуm. Кошакти 
Інrернеr-порталу «Solar 
Garden» 
• • .І.  
Час робощ Час роботи, 
Часроб()Щ Час робоm, 
Робочий rелефон, Е· РобоЧІпї телефон, E­
очж телефон, Е· Робочшt телефон, Е-
mail mail mail 
m.il 
Маркетингового 
Юрнмmоrо відділу Операційного 
Секретаря 
вім.лу директора 
Goo@Je- Кдрта з адресом розтmпуванням 
головного офісу комmнїї <<Solar Gardero> 
Рнсу 1 юк \ '.6 - Стру 1о урн n модель модуля «Ко1пакл , >) 
4Х2.'ІЛГ . 22\(JSR-OI 90-01 5 
с ,• • , r • 
~:..,·. 
Щfі і1А У-СЛУГИ r, І',-tОСие ,.., w 
~ ~ 
T1tn~1tWX0<,t,,І C,tt. ..И "kptnntм•'lt 
r --·;т;:-:, 
Солнечнwе 
т"т 
злектростанции 
Atno~~ ос~~цен~.е АІІ1()ІСІ4М0t ~ltlt! 
@ ~ ф fimt 
Рисунок Г.7 - Адаптація порталу для сучасних юб ільних та планшетних 
пристроїв 
82