Розробка веб-сайту "IT-education" із використанням фреймворку Bootstrap та CMS Wordpress

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

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

Розробка веб-сайту «IT-education» із використанням фреймворку Bootstrap та CMS Wordpress

Карабін Оксана Йосифівна, Віжевський Тарас Вікторович

Karabin Oksana, PhD (Candidate of Pedagogical Sciences), docent, ORCID: 0000-0001-8759-948X VizhevskiyTaras undergraduate student, Ternopil National Pedagogical University, 2, M. Kryvonosa Str., Ternopil, Ukraine

«IT-EDUCATION» WEBSITE DEVELOPMENT USING FRAMEWORK BOOTSTRAP AND CMS WORDPRESS

Summary. The article is devoted to the development of the IT-EDUCATION website using the Bootstrap framework. The principles of construction of Internet sites and technologies of using such framework are considered, which allow to make layout of a site, while having only initial knowledge of their creation. The most popular free content management systems are analyzed and benchmarked: Joomla !, Drupal and WordPress. The features of building websites using content management and manual modes are explored. WordPress Content Management System enhances its functionality. As a result of the work, a website design was developed, additional modules, components were added, and the process of installing and configuring new templates, modules, and components was described. The materials can be used to select the most optimal technologies for implementing their own websites.

Карабін Оксана Йосифівна кандидат педагогічних наук, доцент кафедри інформатики та методики її навчання, Тернопільський національний педагогічний університет імені Володимира Гнатюка Віжевський Тарас Вікторович магістрант спеціальності 014.09 Середня освіта (Інформатика), Тернопільський національний педагогічний університет імені Володимира Гнатюка

Анотація. Стаття присвячена розробці вебсайту «IT-Education» з використанням фреймворку Bootstrap. Розглянуто принципи побудови Інтернет-сайтів та технології використання такого фреймворку, які дозволяють зробити верстку веб-сайту, при цьому маючи лише достатні знання для їх розробки. Проведено аналіз і порівняльну характеристику найбільш популярних безкоштовних систем керування вмістом: Joomla!, Drupal та WordPress. Досліджено особливості побудови вебсайтів за допомогою систем керування вмістом та в ручному режимі. За допомогою системи керування вмістом вебсайту WordPress розширено його функціональність. У результаті виконання роботи було розроблено дизайн вебсайту, додані додаткові модулі, компоненти та описано процес встановлення й налаштування нових шаблонів, модулів і компонентів. Матеріали можуть бути використанні для вибору найбільш оптимальних технологій для реалізації власних вебсайтів.

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

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

За останні декілька десятків років завдяки бурхливому розвитку інтернету в програмуванні виділяють окремий напрямок - веб програмування, тобто створення скриптів для веб, так як нині, в час стрімкого прогресу, відформатований текст та зображення на веб-сайті не дивуватимуть користувачів. Слід зазначити, що й вимоги до веб-сайтів зазнали зміни, і тепер для успішного представництва організації або особи в інтернет необхідно надати своїм відвідувачам різні можливості: контактні форми, каталоги продукції, підписки, розсилання, пошук по вебсайту тощо. Інтерактивність та адаптивність веб-сайту забезпечується за рахунок сучасних технологій веб-програмування в обличчі HTML 5 і CSS 3 [4].

Технології вебпрограмування на думку користувачів об'єднують набір різних засобів і мов програмування або мов розмітки тексту. Ці програмні засоби розділяються на два основні види: серверні і клієнтські. Серверні скрипти виконуються на стороні сервера, тобто того комп'ютера, на якому розміщені вихідні файли вебсайту та база даних. До серверних скриптів належать PHP, Perl, ASP.NET, NodeJS тощо. Вони виконуються ще до завантаження сторінок вебсайту на клієнтській стороні. У свою чергу, клієнтські скрипти виконуються на комп'ютері клієнта вже після завантаження сторінки із сервера й не вимагають її додаткового перезавантаження (Java script, Flash, Vbscriptі Silverlight) [2].

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

Аналіз останніх досліджень і публікацій.

Теоретичні засади розробки вебсайтів розкриваються у дослідженнях зарубіжних науковців - D. Lane, E. Williams Hugh, W. Luke, T. Laura, D. Ramel, У. Соссоу, D. Sparlok, І. Marcottта ін. Досить багато вітчизняних вчених (Т. Басюк, В. Дронов, Д. Колисниченко, А. Петлюшкин та ін.) присвятили свої дослідження проблемі розробки вебсайтів із використанням фреймворку Bootstrap та CMS WordPress.

Виділення не вирішених раніше частин загальної проблеми. Для розробки адаптивного дизайну використовують CSS-фреймворки. Нині існують десятки таких фреймворків, кожний з яких має свої переваги й недоліки: деякі з них мають гарний функціонал, але потребують великих затрат пам'яті. Розглянемо та виконаємо порівняльну характеристику найбільш задіяних у вебпрограмування фреймворків, а саме: Bootstrap, Zurb Foundation, Semantic UI. Зазначимо та охарактеризуємо особливості вебсайтів, для використання в мережі інтернет, із використанням фреймворку Bootstrap та SMC WordPress, а саме: гнучкість, інтерактивність, адаптивність, зручність системи управління структурою, простота та зрозумілість дизайну вебсайту, підтримка графічних вставок та анімації для підсилення емоційно-ціннісного компонент змісту вебсайту.

Головною метою цієї роботи є теоретичне обґрунтування та технологія розробки вебсайту «IT-Education» із використанням фреймворку Bootstrap та CMS WordPress. веб сайт фреймворк інформаційний

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

- тип вебсайту (портал, промо, візитка, корпоративний, магазин тощо);

- функціонал вебсайту (пошук, каталог, стрічка новин тощо);

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

- структура вебсайту (кількість та структура вебсторінок тощо);

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

Четвертий етап - розробка макету дизайну вебсайту. Для цього етапу характерні підпункти:

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

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

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

- розробка внутрішніх вебсторінок за зазначеним алгоритмом;

- з'ясування та визначення схематичного розміщення всіх блоків вебсторінок.

П'ятий етап - HTML-CSS верстка. Залежно від цілей і завдань вебсайту, верстка повинна задовольняти деяким вимогам. Зазвичай дані вимоги:

- кросбраузерність - сторінки повинні однаково відображатися у різних браузерах (Mozilla Firefox, Google Chrome, Opera, Internet Explorer, Safari);

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

- швидкість обробки коду браузерами;

- валідність - відповідність зазначеним стандартам;

- семантична коректність - логічне і правильне використання елементів HTML.

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

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

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

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

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

Розглянемо детальніше та виконаємо порівняльну характеристику фреймворків Bootstrap, Zurb Foundation, Semantic UI.

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

Важливим показником Bootstrap є підтримка адаптивної 12-ти колонкової сітки, відтак, він вважається одним із найпопулярніших фреймворків [3].

Фреймворк Bootstrap підтримує такі веббраузери: Chrome (Mac, Windows, iOS, і Android), Safari (Mac і iOSтільки); Firefox (Mac, Windows), Internet Explorer, Opera (Mac, Windows).

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

- переваги: відповідна документація,

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

- недоліки: внаслідок популяризацію

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

Zurb Foundation - призначений для розробки адаптивного вебдизайну. Даний фреймворкє популярним, як і Bootstrap. Кількість зірок зазначених на GitHub підтверджують довіру веброзробників до цього фреймворку. Zurb Foundation був створений в компанії Zurb, що спеціалізується на розробці дизайнів вебзастосунків [5].

Zurb Foundation пропонує колекцію готових компонентів (віджетів), 12-ти колонкову сітку та інші атрибути. Бібліотека UI компонент даного фреймворк виглядає цілком достатньою для роботи над реальними прототипами, також Zurb Foundation характеризується повною адаптивністю та відмовою від застосування бібліотеки jQuery на користь Zeptojs [4].

Даний фреймворк зазначається подібністю до Bootstrap, тому при наявності досвіду розробників їх перехід на новий фреймворк буде доволі зручним. Foundation підтримує такі браузери: Chrome (Mac, Windows, iOS, і Android), Safari (Mac і iOSтільки), Firefox (Mac, Windows), Internet Explorer, Opera (Mac, Windows).

Виділимо переваги та недоліки фреймворку Zurb Foundation:

переваги:

- вбудована валідація форм,

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

недоліки:

- високий рівень входження,

- великий розмір.

Semantic UI - фреймворк для побудови призначеного для користувача інтерфейсу вебзастосунку з широкими можливостями по налаштуванню та розробки вебдизайну. Набір включає більше 50 елементів UI і 3000 змінних CSS тощо. Фреймворк повністю адаптивний, всі компоненти визначаються за допомогою Ems або Rems. Один з основних переваг фреймворку є його семантичність класів [3].

Компоненти, запропоновані Semantic UI включають звичайні кнопки, анімовані кнопки, роздільники, значки, зображення, мітки, спливаючі вікна, сегменти, кастомізовані checkbox і radio, text loader тощо [7].

Semantic UI підтримує такі браузери: Chrome (Mac, Windows, iOS, і Android), Safari (Mac і iOSтільки), Firefox (Mac, Windows), Internet Explorer, Opera (Mac, Windows).

переваги:

- проста у використанні,

- різноманітність компонентів, семантичність, активний розвиток;

недоліки:

- не підтримує препроцесори SASS і LESS, недостатня рекламованість даного фреймворку.

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

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

Наведемо порівняльну таблицю основного функціоналу вищенаведених фреймворків [5].

Таблиця 1

1. Маркотт І. Отзывчивый веб-дизайн. URL: http://www.mankowichi.by/images/docs/12.pdf/. (дата звернення: 28.10.2019).

2. Спарлок Дж. Bootstrap. URL: https://books.google.com.ua/books?id=LZm7Cxgi3aQC&printsec=frontcover&dq =bootstrap&hl=en&sa=X&ved=0ahUKEwivno3jiunLAhXJE5oKHXaCBeU%20Q6AEIMjAC#v=onepage&q=bootstrap&f=false. (дата звернення: 18.11.2019).

3. Шеной А., Соссоу У. Learning Bootstrap. 2014. URL: https://books.google.com.ua/books?id=pswGBgAAQBAJ&printsec=frontcover%20&dq=bootstrap&hl=en&sa=X&ved=0ahUKEwjtseXsinLAhUECZoKHe6DBjA4ChDoAQhDMAc#v=onepage&q=bootstrap&f=false. (дата звернення: 21.11.2019).

4. Инструменты для самостоятельного создания сайтов. URL: http://www. cossa. ru/articles/155/65624/. (дата звернення: 03.12.2019).

5. Результаты тестирования шести ведущих фреймворков на производительность. URL: http:// www.alrond.com/ru/2007/jan/25/rezultaty-testirovanija-6-frameworks/. (дата звернення: 24.11.2019).

6. Десять причин избегать тяжеловесных фреймворков, а также лишних зависимостей в проекте. URL: http://eax.me/avoid-frameworks. (дата звернення: 24.10.2019).

7. What are cron jobs? URL: https://support.hostgator.com/articles/cpanel/what-are-cron-jobs. (дата звернення: 04.12.2019)