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

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

Природниче відділення Педагогічного коледжа Львівського національного університету Імені Івана Франка

Тема роботи:

Розробка web-сайту

ЛЬВІВ 2021



Зміст

Вступ

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

Визначення тематики та основної мети проекту

Розробка технічного завдання

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

Верстка та програмування

Що таке верстка сайту з точки зору підходу до роботи

Як вибрати верстальника

Що таке фронтенд

Що таке бекенд

Наповнення контентом

Тестування

Основні види тестування сайтів

Функціональне тестування

Тестування веб-ресурсів: юзабіліті

Типи тестування сайту на сумісність

Тест на продуктивність

Перевірка безпеки

Здача готового проекту

Джерела



Вступ

сайт макетування дизайн тест

1991 рік. Інженер Тім Бернс-Лі створив перший у світі веб-сайт. Таку собі примітивну інформаційну сторінку…аби показати, який вигляд має мова розмітки HTML.

З того моменту, здається, минула ціла вічність. І сьогодні кількість сайтів різної складності/тематики вже перевищує мільярд.

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

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

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

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



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

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

Визначення тематики та основної мети проекту

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

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

Розробка технічного завдання

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

План розробки сайту або ТЗ потребує обов'язкової участі замовника та відповідності наступним вимогам:

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

· чіткість - у цьому документі не місце суб'єктивним формулюванням;

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

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

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

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

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

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



Верстка та програмування

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

Далі послідовність створення веб-сайту передбачає надання послуг з програмування. Фахівець повинен «оживити» сайт та наповнити його необхідним функціоналом. У більшості випадків програмування здійснюється на основі CMS, наприклад, на WordPress або сервісі Тільда, але в інших - потребується написання коду з нуля. Наприклад, для того щоб розробити унікальний функціональний блок тощо.

Що значить зверстати сайт

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

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

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

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

· коректна робота сайту - належне виконання функцій та відображення всіх елементів.

Що таке верстка сайту з точки зору підходу до роботи

Крім різних типів верстки, існують ще різні підходи. Розглянемо основні етапи:

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

· гумова - протилежна попередньому пункту, тому здатна підлаштовуватися під різні параметри;

· адаптивна - розробляється під певні дозволи;

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

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

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

Як вибрати верстальника

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

Що таке фронтенд

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

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

Фронтенд вміщує в себе кілька компонентів:

· HTML (мова розмітки документа, за допомогою якого створюються заголовки, абзаци, списки і т.д.);

· CSS (мова, яка використовується для опису і стилізації документа, завдяки якому задаються потрібні шрифти, кольори, розміщуються певним чином блоки та ін.);

· JavaScript (мова, що реагує на дії відвідувачів сайту: кліки мишкою, пересування курсору, натискання клавіш).

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

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

Що таке бекенд

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

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

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

Відмінність Frontend і Backend розробки, їх взаємодія

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

Зазвичай весь процес проходить циклічно:

· Frontend збирає призначені для користувача дані і перенаправляє їх в Backend;

· відбувається обробка даних;

· інформація повертається, прийнявши зрозумілу форму і виконавши запит.

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

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



Наповнення контентом

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

Тестування

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

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

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

Основні види тестування сайтів

· функціональне тестування;

· тестування юзабіліті (перевірка зручності користування);

· тестування сумісності (конфігураційне тестування);

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

· перевірка безпеки.

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

Функціональне тестування

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

· перевірка посилань (внутрішніх, вихідних, ізольованих і т. д.);

· перевірка форм - в подальшому дозволить взаємодіяти з користувачами і отримувати від них дані;

· тест файлів cookie - необхідний для підтримки сеансів з авторизацією;

· валідація HTML/CSS - перевірка на відсутність серйозних синтаксичних помилок і доступу ресурсу для різних пошукових систем;

· перевірка бази даних - тут потрібно простежити за правильністю виконання запитів, а також вилучення та оновлення даних.

Крім цього види функціонального тестування можна розбити на такі різновиди:

· ad-hock перевірка - не припускає попередньої підготовки. Цей метод допомагає швидко ознайомитися з системою, а також виявити основні несправності;

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

· проведення еквівалентних тестів - група тестів, спрямованих на виявлення конкретної помилки;

· дослідницька перевірка (exploratory testing) - методика, що дозволяє одночасно розробляти і виконувати тести, а заодно ретельно вивчити готовий продукт.



Тестування веб-ресурсів: юзабіліті

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

· навігаційне тестування - перевірка доступу до меню, сторінок, блоків, полів і кнопок. Важливо, щоб структура була логічною і зрозумілою;

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

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

Типи тестування сайту на сумісність

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

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

· перевірка на кросбраузерність - сайт повинен однаково добре функціонувати в усіх відомих браузерах (Google, Яндекс, Firefox, Internet Explorer і т. д.). Він також повинен правильно відображатися, на що впливає якісна верстка;

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

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



Тест на продуктивність

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

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

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

· перевірка на швидкість з'єднання - перевіряється час відгуку сайту.

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

Перевірка безпеки

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



Здача готового проекту

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

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



Джерела

1. https://web-systems.solutions/blog/veb-rozrobka-etapy-i-standarty/.

2. https://webtune.com.ua/statti/web-rozrobka/etapy-stvorennya-veb-sajtiv/.

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