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

Міністерство освіти і науки України

Вінницький національний технічний університет

Факультет інформаційних технологій та комп'ютерної інженерії

Кафедра обчислювальної техніки

КУРСОВА РОБОТА

з дисципліни «Web-програмування»

на тему: Розробка інтерактивного веб сайту «Портфоліо»

Студента 4 курсу групи КІ-22мсз

спеціальності 123 - Комп'ютерна інженерія

освітня програма «Комп'ютерна інженерія» Мельник Я.І.

Керівник: к.т.н., доц. Войцеховська О.В.

м. ВІННИЦЯ 2023 рік



Міністерство освіти і науки України

Вінницький національний технічний університет

Факультет інформаційних технологій та комп'ютерної інженерії

ЗАТВЕРДЖУЮ

зав. кафедри ОТ, проф., д. т. н.

_____________ О. Д. Азаров

« 13 » вересня 2023 р.

ІНДИВІДУАЛЬНЕ ЗАВДАННЯ

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

Мельнику Ярославу Івановичу групи КІ-22мсз.

Тема роботи: Розробка інтерактивного веб сайту «Портфоліо».

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

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

2) обґрунтувати та розробити структуру сайту лендінгу;

3) обґрунтувати та вибрати дизайн сайту та його колірної гами;

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

5) реалізувати інтерактивність: додати пошук на сторінці, додати кнопку зворотного зв'язку, створити форму для обробки даних, реалізувати пагінацію, тощо.

6) виконати тестування роботи сайту.

Дата видачі « 13 » вересня 2023 р. Керівник Войцеховська О.В.

Завдання отримав Мельник Я. І.



Анотація

сайт лендінг програмування дизайн

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



Annotation

In the web programming coursework, a study of contemporary technologies and methodologies for creating websites was conducted. Programming languages, frameworks, and tools necessary for web application development were examined. During the analysis of websites using modern development and design methods, aspects of optimization were investigated to enhance the loading speed of a single-page landing. A functional web platform was developed to showcase skills in web programming and the ability to utilize advanced technologies for creating web applications.



Зміст

Вступ

1. Аналіз сучасних веб-технологій для реалізації інтерактивності на веб-сайтах

2. Проектування структури та макетування лендінгу

2.1 Обґрунтування та розробка структури сайту-лендінгу

2.2 Обґрунтування та вибір дизайну сайту та його колірної гами

2.3 Розробка макету сторінок веб сайту в сервісі Figma

3. Реалізація структури веб-сайту

3.1 Розробка форми для комунікації з користувачами

3.2 Розробка форми для збору та обробки даних

3.3 Реалізація плавного скролінгу для навігації на веб-лендінгу

4. Тестування роботи веб-сайту

Висновки

Перелік джерел посилання

Додаток А Структурна схема сайту

Додаток Б Дизайн сторінок веб-сайту

Додаток В Програмна реалізація інтерактивних елементів



Вступ

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

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

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

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

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



1. Аналіз сучасних веб-технологій для реалізації інтерактивності на веб-сайтах

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

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

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

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

Декілька ключових аспектів аналізу цих технологій включає:

– JavaScript та бібліотеки React, Angular і Vue.js є ключовими інструментами для створення інтерактивних веб-додатків та спрощення розробки інтерактивних елементів;

– синхронні JavaScript технології, зокрема AJAX та Fetch API, дозволяють створювати інтерактивні веб-сторінки з можливістю асинхронної взаємодії з сервером без перезавантаження;

– анімації CSS та CSS-фреймворки на кшталт Bootstrap і Materialize надають можливості для створення інтерактивних веб-інтерфейсів з анімаціями, переходами та динамічними елементами;

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

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

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



2. Проектування структури та макетування лендінгу

2.1 Обґрунтування та розробка структури сайту-лендінгу

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

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

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

а) відео або анімація для ефектного вираження;

б) короткий опис переваг та цілей сайту;

в) заклик до дії, наприклад, кнопка «Дізнатися більше» або кнопка зворотнього зв'язку «Зв'яжіться з нами».

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

– в розділі сайту «Мої роботи» представлено коротку інформацію про розроблені проекти, які демонструють набуті навички;

– в розділі «Контакти» для користувача надається інформація для зв'язку та можливість зворотнього зв'язку для зручного способу надсилання запитів.

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

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

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

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

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

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

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

Рисунок 2.1 Структура веб-лендінгу сторінки

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

2.2 Обґрунтування та вибір дизайну сайту та його колірної гами

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

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

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

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

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

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

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



2.3 Розробка макету сторінок веб-сайту в сервісі Figma

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

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

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

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

В частині футера лендінгу розташовано повідомлення про автора та короткий опис про нього, використовуються фрейми, текстові поля [3].



Рисунок 2.2 Головна сторінка лендінгу в середовищі Figma

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

Рисунок 2.3 Форма зворотнього зв'язку в середовищі Figma

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

Рисунок 2.4 Розділ «Мої роботи» веб-лендінгу в середовищі Figma



3. Реалізація інтерактивності веб-сайту

3.1 Розробка форми для комунікації з користувачами

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

Ефективна форма зворотного зв'язку може привабити нових користувачів та партнерів, які шукають можливості для співпраці та співробітництва (див. рисунок 3.1) [4].

Рисунок 3.1 Реалізована форма зворотнього зв'язку

В формі зворотнього зв'язку використовуються наступні HTML теги (див. рисунок 3.2 - реалізація форми) та їх атрибути:

– тег <form> визначає форму на сторінці і використовується в коді для створення форми для зворотнього зв'язку;

– тег <div> використовується для групування та стилізації елементів в HTML, і в коді використано тег <div> для створення контейнера з привласненими назвами та полями введення;

– тег <input> створює поле вводу для користувача. У коді використовується для полів «Ім'я», «Skype», «Телефон», «Email» та «Ваше повідомлення». Атрибут type визначає тип введення, такий як текст (type="text") та електронна адреса (type="email"). Атрибут id використовується для ідентифікації поля;

– тег <textarea> використовується для створення багаторядкового текстового поля, де користувач може вводити довші повідомлення, і в коді використовується для поля «Повідомлення»;

Рисунок 3.2 Реалізація форми в середовищі Visual Studio Code

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

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

3.2 Розробка форми для збору та обробки даних

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

Форми можуть мати різне призначення, в залежності від потреб веб-сайту. Наприклад, форми можуть бути використані для:

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

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

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



Рисунок 3.3 Реалізована форма для збору та обробки даних від користувачів

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



Рисунок 3.4 Реалізація форми в середовищі Visual Studio Code

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

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

3.3 Реалізація плавного скролігну для навігації на веб-лендінгу

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

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

Застосування jQuery mPageScroll2id може покращити користувальницький досвід, забезпечуючи не лише функціональність, але й естетичний аспект навігації на веб-сторінці. Цей плагін стає ефективним інструментом для розробників, які прагнуть підняти рівень взаємодії користувача з їх веб-ресурсом через вдосконалення механізмів переходів між розділами сторінки [8].

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

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

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

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

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



Рисунок 3.4 Реалізація плавного скролінгу в середовищі Visual Studio Code

Цей код використовує плагін jQuery mPageScroll2id для реалізації плавного скролінгу на веб-сторінці.

Основні аспекти цієї функціональності включають наступне:

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

– «$("nav a,a[href='#top'],a[rel='m_PageScroll2id'],a.PageScroll2id"):» цей селектор jQuery вибирає всі посилання в навігаційному меню «(nav a)», посилання, що ведуть до верхньої частини сторінки «(a[href='#top'])», та всі посилання, що мають атрибут «rel='m_PageScroll2id'» або клас «PageScroll2id»;

– «.mPageScroll2id()» це метод, який активує плагін «mPageScroll2id» на вибраних елементах. Коли користувач натискає на одне з цих посилань, він буде плавно прокручуватися до відповідного розділу на сторінці;

– «highlightSelector:"nav a"» параметр, який передається в метод «mPageScroll2id», він вказує, що всі посилання в навігаційному меню «(nav a)» повинні бути виділені, коли користувач прокручує до відповідного розділу на сторінці.

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



4. Тестування роботи веб-сайту

Тестування веб-сайту відбувалося за допомогою браузера Microsoft Edge, для цього було використано середовище Visual Studio Code з розширенням Live Server. Метою тесту було перевірити коректність роботи кнопок, посилань та форм на веб-сторінках, а також швидкість завантаження всього контенту.

Live Server є розширенням для Visual Studio Code, яке дозволяє легко створювати локальний сервер для перевірки веб-сайтів, створених на HTML, CSS та JavaScript (див. рисунок 4.1). Він використовує Node.js, Express.js та Socket.IO для технічного створення та керування простим локальним сервером. [10].

Рисунок 4.1 Розширення Live Server в середовищі VS Code

Основні компоненти та функції розширення включають:

– Live Server використовує Node.js, яке є серверним середовищем для JavaScript, та Express.js, яке є веб-фреймворком для Node.js. Express дозволяє швидко створювати та налаштовувати веб-сервер;

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

– розширення вбудоване в VS Code і взаємодіє з його API для отримання інформації про вибраний файл, автоматичного визначення кореневого каталогу проекту та управління подіями, такими як збереження файлу;

– Live Server моніторить зміни в файлах проекту, особливо у вихідних файлах (HTML, CSS, JavaScript), і автоматично перезапускає сервер та оновлює браузер, щоб відобразити останні зміни;

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

Встановлення розширення:

– встановлення розширення:

а) потрібно відкрити VS Code та перейти в розділ «Extensions»;

б) ввести «Live Server» у полі пошуку;

в) обрати розширення «Live Server» та встановити його.

- запуск локального сервера:

а) потрібно відкрити файл, який необхідно тестувати;

б) у правому нижньому кутку вікна редактора натиснути на «Go Live» або використати контекстне меню правою кнопкою миші та обирати «Open with Live Server».

- відкриття веб-сайту в браузері:

а) після запуску Live Server відкриє веб-сайт у браузері за замовчуванням.

- автоматичне оновлення:

а) Live Server автоматично оновлює веб-сторінку при збереженні ваших змін у вихідному коді, що уникатиме необхідності для користувача вручну оновлювати сторінку браузера.

- зупинка сервера:

а) щоб зупинити локальний сервер, перейдіть до вікна VS Code та натиснути на «Stop» у правому нижньому кутку.

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

Рисунок 4.2 Результат роботи сторінки лендінгу з використанням розширенням Live Server



Висновки

Структура односторінкового веб-лендінгу «Портфоліо» ретельно працює над актуальними тенденціями веб-програмування та потребами цільової аудиторії. Головна сторінка привертає увагу користувача візуальними елементами, інформація про вміст розміщена в розділі «Резюме» та «Контакти», а розділ «Мої роботи» надає деталізовану інформацію. Логічний порядок та легка навігація, забезпечені структурною схемою, сприяють ефективній взаємодії користувачів із сайтом. Колірна палітра вибрана з урахуванням чистого, мінімалістичного дизайну для привабливого вигляду, використання синіх акцентів виражає важливість, а баланс ілюстрацій та тексту чітко визначає вміст інформації лендігну. Макетування в Figma включає визначення рамок, розмірів та компонентів, забезпечуючи ефективне візуальне представлення та взаємодію з користувачами.

Форми зворотнього зв'язку на веб-сайтах відіграють ключову роль у забезпеченні ефективної комунікації між веб-сайтом та його відвідувачами. Використовуючи HTML та відповідні теги, такі як <form>, <div>, <input>, <textarea>, розроблена форма зворотнього зв'язку відображається з ефективністю та доступністю. Форми є необхідним елементом для збору різноманітних даних від користувачів, таких як реєстраційні дані, відгуки чи інші питання. Забезпечуючи зручність та захист даних, форми сприяють покращенню якості обслуговування та розумінню потреб користувачів, що робить їх важливим інструментом для взаємодії та оптимізації процесів.

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

У результаті тестування веб-сайту за використання браузера Microsoft Edge та розширення Live Server для Visual Studio Code виявлено, що функціональність всіх елементів, таких як кнопки, посилання та форми, працює належним чином. Розширення Live Server, яке базується на Node.js, Express.js та Socket.IO, надає зручний інструмент для локального тестування веб-сайтів, забезпечуючи автоматичне оновлення сторінки при зміні вихідного коду. Зафіксовано, що веб-сайт відображається повністю за 1 секунду, а всі елементи, включаючи зображення, шрифти, тексти та стилі, завантажуються коректно. Таким чином, використання вказаних інструментів дозволяє ефективно проводити тестування веб-сайтів з високою швидкістю та точністю.



Перелік джерел посилання

1. Фрейн Б. HTML5 і CSS3. Розробка сайтів для будь-яких браузерів і пристроїв / Бен Фрейн. Київ: Діалектика, 2014. 304 с.

2. Савченко М. Створення сайту-лендінгу: від ідеї до реалізації / М. Савченко. Київ: Дух і Літера, 2022. 156 с.

3. Уайт Д. Figma: Повний посібник з дизайну та спільної роботи / Деніел Уайт. Київ: Видавництво Графіт, 2016. 211 с.

4. Фріман Ч. HTML5: Довідник розробника / Чак Фріман, Джеймс Харнер. Київ: Діалектика, 2016. 197 с.

5. Мінеллі Д. HTML5 та CSS3: Дизайн веб-сайтів із використанням JavaScript і jQuery / Джеймс Мінеллі. Київ: Видавництво Кодекс, 2022. 302 с.

6. Дакетт Д. HTML і CSS: Професійний дизайн веб-сайтів / Джон Дакетт. Київ: Київський університет, 2018. 254 с.

7. Чаффер Д. Learning jQuery / Джонатан Чаффер, Карл Сведберг. Київ: Packt Publishing, 2023. 140 с.

8. Кантор І. Сучасний підручник Javascript / І. Кантор. Київ: Графіт, 2015. 333 с.

9. Фрімен Е. Розробка веб-додатків на мові програмування JavaScript / Ерік Фрімен, Елізабет Робсон. Київ: Діалектика, 2022. 178 с.

10. Колесник Я. Selenium WebDriver: From Foundations to Framework / Яків Колесник. Київ: Київський університет, 2014. 210 с.

11. 

Додаток А Структурна схема сайту

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

Рисунок А.1 Структурна схема сайту



Додаток Б Дизайн сторінки веб-сайту

Рисунок Б.1 Реалізований дизайн головної сторінки лендінгу

Рисунок Б.2 Реалізований дизайн розділу сторінки «Мої роботи» в середовищі Figma



Рисунок Б.3 Реалізований дизайн сторінки з формою збору інформацію про користувачів

Рисунок Б.4 Реалізований дизайн сторінки з формою зворотнього зв'язку

Додаток В Програмна реалізація інтерактивних елементів

Вихідний код сторінки:

<!DOCTYPE html>

<html lang="ua">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!-- Titles -->

<title>Персональне портфоліо</title>

<!-- Syles -->

<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css">

<link rel="stylesheet" href="css/main.css">

<link rel="stylesheet" type="text/css" href="fonts/noto-webfont/noto.css">

<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.min.css">

<link rel="stylesheet" href="libs/fancybox/jquery.fancybox.css">

<!-- FavIcons -->

<link rel="shortcut icon" href="img/favicons/favicon-48x48.ico" type="image/x-icon" />

<link rel="apple-touch-icon" href="img/favicons/apple-touch-icon.png">

</head>

<body>

<!-- Шапка -->

<div class="header">

<div class="header__inner">

<nav class="navigation">

<!-- Navigation icon -->

<!-- <div class="navigation__toggle navigation__toggle--fixed">

<i class="fa fa-bars" aria-hidden="true"></i>

</div> -->

<button id="navigation__button" class="cmn-toggle-switch cmn-toggle-switch__htx">

<span>toggle menu</span>

</button>

<!-- // Navigation icon -->

<ul class="navigation__list">

<li><a href="#resume">Резюме</a></li>

<li><a href="#portfolio">Портфоліо</a></li>

<li><a href="#contacts">Контакти</a></li>

</ul>

</nav>

<div class="header__centered-content">

<div class="user-photo user-photo--shadow">

<img src="usercontent/img/photo-avatar.jpg" alt="Ярослав Мельник">

</div>

<h1 class="header__title">Ярослав Мельник</h1>

<h2 class="header__subtitle">HTML/CSS верстальник сайтів</h2>

</div>

<a href="#resume" class="mouse_scroll" title="Швидкий скролінг">

<div class="mouse">

<div class="wheel"></div>

</div>

<div>

<span class="m_scroll_arrows unu"></span>

<span class="m_scroll_arrows doi"></span>

<span class="m_scroll_arrows trei"></span>

</div>

</a>

</div>

</div>

<!-- // Шапка -->

<!-- Резюме -->

<div id="resume">

<div class="container">

<div class="row">

<!-- Фото користувача -->

<div class="hidden-xs col-sm-2 col-lg-3">

<div class="user-photo user-photo--big">

<img src="usercontent/img/photo-avatar.jpg" alt="Ярослав Мельник">

</div>

</div>

<!-- // Фото користувача -->

<!-- Резюме користувача -->

<div class="col-sm-10 col-lg-9">

<div class="heading">Резюме</div>

<p><strong>Ярослав Мельник</strong><br>

21 рік, Вінниця, Україна</p>

<p>Закінчив Київський Фаховий Коледж Зв'язку за спеціальністю «Комп'ютерна Інженерія». Після чого вступ до Вінницького Національного Технічного Університету на спеціальність «Комп'ютерна Інженерія» та активно займаюся саморозвитком.</p>

<!-- Досвід та Освіта -->

<div class="row">

<div class="col-sm-6">

<div class="heading heading--medium">

Досвід роботи

</div>

<ul class="definition-list">

<li class="definition-list__item">

<div class="definition-list__def">

Січень -- наш час

</div>

<div class="definition-list__desc">

<p>ОТГ Обслуговування комп'ютерів та Інтернет мереж</p>

</div>

</li>

<li class="definition-list__item">

<div class="definition-list__def">

Вересень 2021 -- червень 2023

</div>

<div class="definition-list__desc">

<p>Фрилансер, HTML/CSS верстальник веб-сторінок.</p>

</div>

</li>

</ul>

</div>

<div class="col-sm-6">

<div class="heading heading--medium">

Освіта

</div>

<ul class="definition-list">

<li class="definition-list__item">

<div class="definition-list__def">

2022-2024

</div>

<div class="definition-list__desc">

<p>Вінницький Національний Технічний Університет, спеціальність «Комп'ютерна Інженерія»</p>

</div>

</li>

<li class="definition-list__item">

<div class="definition-list__def">

З квітня по серпень - 2023

</div>

<div class="definition-list__desc">

<p>Курси по верстці сайтів HTML/CSS - Udemy.com</p>

</div>

</li>

<li class="definition-list__item">

<div class="definition-list__def">

2018 -- 2022

</div>

<div class="definition-list__desc">

<p>Київський Фаховий Коледж Зв'язку, спеціальність «Комп'ютерна Інженерія»</p>

</div>

</li>

</ul>

</div>

</div>

<!-- // Досвід та Освіта -->

<div class="button">

<i class="fa fa-download" aria-hidden="true"></i>

Завантажити резюме

</div>

</div>

<!-- // Резюме користувача -->

</div>

</div>

</div>

<!-- Резюме -->

<!-- Портфоліо -->

<div id="portfolio" class="section section--padding-smaller section--bg-gear">

<div class="container">

<!-- Заголовок -->

<div class="heading heading--center">Мої роботи</div>

<!-- // Заголовок -->

<!-- Фільтр робіт -->

<div class="filter-block">

<ul class="filter-block__block">

<li class="filter-block__element">

<span class="filter-block__button filter" data-filter="all">Всі</span>

</li>

<li class="filter-block__element">

<span class="filter-block__button filter" data-filter=".html-css">HTML+CSS</span>

</li>

<li class="filter-block__element">

<span class="filter-block__button filter" data-filter=".bootstrap">Bootstrap</span>

</li>

<li class="filter-block__element">

<span class="filter-block__button filter" data-filter=".tutorial">Навчальні</span>

</li>

<li class="filter-block__element">

<span class="filter-block__button filter" data-filter=".payed">На замовлення</span>

</li>

</ul>

</div>

<!-- // Фільтр робіт -->

<!-- Блок - ряд с роботами -->

<div class="row" id="portfolio-projects">

<!-- Робота в портфоліо -->

<div class="col-sm-4 mix html-css tutorial">

<div class="portfolio-item">

<div class="portfolio-item__image">

<a href="usercontent/img/full/organic.png" class="fancybox portfolio-item__image__hover" rel="group" title="Учбовий макет Organica">

<i class="fa fa-search" aria-hidden="true"></i><br>

<span>переглянути макет</span>

</a>

<img src="usercontent/img/project_organica.jpg">

</div>

<div class="portfolio-item__title">

<a href="#">Навчальний макет Organica</a>

</div>

<div class="portfolio-item__description">

Верстка односторінкового сайту по PSD макету.

</div>

</div>

</div>

<!-- // Робота в портфоліо -->

<!-- Робота в портфоліо -->

<div class="col-sm-4 mix bootstrap tutorial">

<div class="portfolio-item">

<div class="portfolio-item__image">

<a href="usercontent/img/full/apollo.png" class="fancybox portfolio-item__image__hover" rel="group" title="Учбовий макет Apollo">

<i class="fa fa-search" aria-hidden="true"></i><br>

<span>переглянути макет</span>

</a>

<img src="usercontent/img/project_apollo.jpg" alt="Учбовий макет Apollo">

</div>

<div class="portfolio-item__title">

<a href="#">Навчальний макет Apollo</a>

</div>

<div class="portfolio-item__description">

Верстка лендингу хостинг компанії. Мобільна адаптивність.

</div>

</div>

</div>

<!-- // Робота в портфоліо -->

<!-- Робота в портфоліо -->

<div class="col-sm-4 mix bootstrap tutorial">

<div class="portfolio-item">

<div class="portfolio-item__image">

<a href="usercontent/img/full/portfolio.png" class="fancybox portfolio-item__image__hover" rel="group" title="Особистий сайт портфоліо">

<i class="fa fa-search" aria-hidden="true"></i><br>

<span>переглянути макет</span>

</a>

<img src="usercontent/img/project-portfolio.jpg" alt="Особистий сайт портфоліо">

</div>

<div class="portfolio-item__title">

<a href="#">Особистий сайт портфоліо</a>

</div>

<div class="portfolio-item__description">

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

</div>

</div>

</div>

<!-- // Робота в портфоліо -->

<!-- Робота в портфоліо -->

<div class="col-sm-4 mix html-css payed">

<div class="portfolio-item">

<div class="portfolio-item__image">

<a href="usercontent/img/full/car-concept.png" class="fancybox portfolio-item__image__hover" rel="group" title="Промо сайт автомобіля">

<i class="fa fa-search" aria-hidden="true"></i><br>

<span>переглянути макет</span>

</a>

<img src="usercontent/img/project_auto.jpg" alt="Промо сайт автомобіля">

</div>

<div class="portfolio-item__title">

<a href="#">Промо сайт автомобіля</a>

</div>

<div class="portfolio-item__description">

Верстка односторінкового сайту по PSD макету.

</div>

</div>

</div>

<!-- // Робота в портфоліо -->

<!-- Робота в портфоліо -->

<div class="col-sm-4 mix bootstrap payed">

<div class="portfolio-item">

<div class="portfolio-item__image">

<a href="usercontent/img/full/motorcycles.jpg" class="fancybox portfolio-item__image__hover" rel="group" title="Магазин мотоциклів">

<i class="fa fa-search" aria-hidden="true"></i><br>

<span>переглянути макет</span>

</a>

<img src="usercontent/img/project_moto.jpg" alt="Магазин мотоциклів">

<i class="fa fa-search" aria-hidden="true"></i><br>">

</div>

<div class="portfolio-item__title">

<a href="#">Магазин мотоциклів</a>

</div>

<div class="portfolio-item__description">

Верстка лендінгу для компанії Indian Motorcycles.

</div>

</div>

</div>

<!-- // Робота в портфоліо -->

<!-- Робота в портфоліо -->

<div class="col-sm-4 mix html-css payed">

<div class="portfolio-item">

<div class="portfolio-item__image">

<a href="usercontent/img/full/music.jpg" class="fancybox portfolio-item__image__hover" rel="group" title="Магазин аудіотехніки">

<i class="fa fa-search" aria-hidden="true"></i><br>

<span>переглянути макет</span>

</a>

<img src="usercontent/img/project_music.jpg" alt="Магазин аудіотехніки">

</div>

<div class="portfolio-item__title">

<a href="#">Магазин аудіотехніки</a>

</div>

<div class="portfolio-item__description">

Верстка сторінок для магазину вінтажної аудіотехніки.

</div>

</div>

</div>

<!-- // Робота в портфоліо -->

</div>

</div>

</div>

<!-- // Портфоліо -->

<!-- Контакти -->

<div id="contacts" class="block-bg contacts section section--padding-smaller section--bg-cloud">

<div class="container">

<div class="row">

<!-- Контакти - текст -->

<div class="col-sm-6">

<div class="heading heading--white">

Контакти

</div>

<div class="contacts__description">

<p>Якщо ви шукаєте спеціаліста з верстки сайтів, front-end розробника в команду або для роботи над проектом -- я до ваших послуг.</p>

</div>

<!-- Контактні данні -->

<div class="row">

<!-- Email Skype -->

<div class="col-lg-6">

<ul class="definition-list">

<li class="definition-list__item">

<div class="definition-list__def definition-list__def--light definition-list__def--bigger">

Email

</div>

<div class="definition-list__desc">

<p><a href="mailto:ya_melnik@gmail.com">ya_melnik@gmail.com</a></p>

</div>

</li>

<li class="definition-list__item">

<div class="definition-list__def definition-list__def--light definition-list__def--bigger">

Skype

</div>

<div class="definition-list__desc">

<p><a href="skype:ya_melnik?chat">ya_melnik</a></p>

</div>

</li>

</ul>

</div>

<!-- // Email Skype -->

<!-- Телефон Адреса -->

<div class="col-lg-6">

<ul class="definition-list">

<li class="definition-list__item">

<div class="definition-list__def definition-list__def--light definition-list__def--bigger">

Телефон

</div>

<div class="definition-list__desc">

<p><a href="tel:+38 (098) 777-55-00">+38 (098) 777-55-00</a></p>

</div>

</li>

<li class="definition-list__item">

<div class="definition-list__def definition-list__def--light definition-list__def--bigger">

Адрес

</div>

<div class="definition-list__desc">

<p>Україна, Вінниця</p>

</div>

</li>

</ul>

</div>

<!-- // Телефон Адреса -->

</div>

<!-- // Контактні дані -->

<!-- Соціальні мережі -->

<ul class="definition-list">

<li class="definition-list__item">

<div class="definition-list__def definition-list__def--light definition-list__def--bigger">

Соціальні мережі

</div>

<div class="definition-list__desc">

<div class="social-icons">

<a href="https://twitter.com/?lang=uk" class="fa fa-twitter" aria-hidden="true"></a>

<a href="https://www.instagram.com/" class="fa fa-instagram" aria-hidden="true"></a>

<a href="https://uk-ua.facebook.com/" class="fa fa-facebook" aria-hidden="true"></a>

<a href="https://github.com/" class="fa fa-github" aria-hidden="true"></a>

</div>

</div>

</li>

</ul>

<!-- // Соціальні мережі -->

</div>

<!-- Контакти - Форма -->

<div class="col-sm-6">

<div class="heading heading--medium heading--padding-top heading--white">Зв'язок зі мною</div>

<form id="contact-form" class="contact-form">

<!-- Hidden Required Fields -->

<input type="hidden" name="project_name" value="Мій персональний сайт">

<input type="hidden" name="admin_email" value="ya_melnik@gmail.com">

<input type="hidden" name="form_subject" value="Повідомлення з сайту">

<!-- END Hidden Required Fields -->

<input type="text" class="contact-form__input" name="name" placeholder="Ім'я">

<input type="text" class="contact-form__input" name="email" placeholder="Email">

<div class="clearfix">

<input type="text" class="contact-form__input contact-form__input--half-width" name="skype" placeholder="Skype">

<input type="text" class="contact-form__input contact-form__input--half-width" name="phone" placeholder="Телефон">

</div>

<div class="contact-form__bg-pencil">

<textarea class="contact-form__textarea" placeholder="Ваше повідомлення" name="message"></textarea>

</div>

<input type="submit" class="contact-form__submit" name="" value="Відправити">

</form>

<div id="answer"></div>

</div>

<!-- // Контакти - Форма -->

</div>

</div>

</div>

<!-- Копірайт -->

<div class="copyright">

<div class="container">

<p class="copyright__label">© 2023 Ярослав Мельник</p>

<p>Веб-розробник з м. Вінниця, займаюсь веб-версткою та саморозвитком.</p>

<p>Цей сайт створено в рамках надання інформації потенційним роботодавцям про мій досвід та отримані навички за час навчання.</p>

</div>

</div>

<!-- // Копірайт -->

<!-- Vendor scripts -->

<script src="libs/jquery/jquery-1.11.2.min.js"></script>

<script src="libs/bootstrap/js/bootstrap.min.js"></script>

<script src="libs/pagescroll2id/jquery.malihu.PageScroll2id.js"></script>

<script src="libs/mixitup2/jquery.mixitup.min.js"></script>

<script src="libs/fancybox/jquery.fancybox.pack.js"></script>

<script src="libs/jquery/jquery.mousewheel-3.0.6.pack.js"></script>

<script src="libs/jquery.validate/jquery.validate.js"></script>

<!-- Custom scripts -->

<script src="js/navigation.js"></script>

<script src="js/main.js"></script>

</body>

</html>

Реалізація плавного скролінгу за допомогою JavaScript:

$(document).ready(function() {

//slide2id - плавний скролінг по посиланням всередині сторінки

$("nav a,a[href='#top'],a[rel='m_PageScroll2id'],a.PageScroll2id").mPageScroll2id({

highlightSelector:"nav a"

});

// MixItUp - фільтрація робіт в портфоліо

$('#portfolio-projects').mixItUp();

// FancyBox - galery

$(".fancybox").fancybox({

// За замовчуванням - з виправленням від прокрутки до верху

helpers: {

overlay: {

locked: false

}

}

});

Размещено на Allbest.ru

...