Відеоурок 1. Самостійне створення сайту на Joomla 4

• Відеоурок.
• Список питань, розглянутих під час уроків 1-7.
• Посилання та розширення з відеоуроку.
• Підготовка до створення вебсайту.

Інформація майже повністю актуальна для Joomla 5 (примітку додано 21.10.2023).

Joomla 4 – це безкоштовна «платформа» з підтримкою української мови для створення сайтів практично будь-якої складності: лендінги, сайти-візитки, каталоги, інтернет-магазини, блоги, форуми, соціальні мережі, дошки оголошень та таке інше. Для Джумла існує понад 5900 розширень для забезпечення функціональності та багато шаблонів для формування дизайну. Частина їх безкоштовні, частина - платні. Система перекладена десятками мов, включаючи російську, українську, англійську, німецьку, французьку та інші. Для неї легко знайти недорогий або навіть безкоштовний хостинг, а також документацію та відеоуроки.

Також пропоную ознайомитись з циклом відеоуроків по самостійному створенню інтернет магазину на Jooml 5 з VirtueMart 4 та новинного сайту на Joomla 6.

Відеоурок

• Встановлення локального сервера XAMPP – 00:02:45.
• Завантаження Джумла 4 – 00:04:56.
• Запуск XAMPP – 00:05:20.
• Встановлення Joomla 4 – 00:06:52.
• Використання обробки URL-адреси (файл «.htaccess») – 00:11:17.
• Встановлення мови Joomla 4 – 00:13:47.
• Зміна логіна та пароля облікового запису – 00:15:11.
• Створення користувачів – 00:16:01.
• Відключення модулів адмінки – 00:17:01.

Відео краще переглядати з якістю «1080p HD». Цей та інші відеоогляди та уроки можна знайти на моєму YouTube каналі.

Посилання та розширення з відеоуроку

• Демонстраційний сайт шаблону Helix Ultimate.
• XAMPP.
• Завантаження Joomla 4 .
• Адреса адмінки «http://localhost/joomla/administrator/». Замість «joomla» вкажіть Вашу теку, якщо вона відрізняється.
• Notepad++.

Файли доступні для завантаження під статтею над коментарями.

Joomla 4 – це безкоштовна «платформа» з підтримкою української мови для створення сайтів практично будь-якої складності: лендінги, сайти-візитки, каталоги, інтернет-магазини, блоги, форуми, соціальні мережі, дошки оголошень та таке інше. Для Джумла існує понад 5900 розширень для забезпечення функціональності та багато шаблонів для формування дизайну. Частина їх безкоштовні, частина - платні. Система перекладена десятками мов, включаючи російську, українську, англійську, німецьку, французьку та інші. Для неї легко знайти недорогий або навіть безкоштовний хостинг, а також документацію та відеоуроки.

У цьому циклі відеоуроків ми розглянемо покроковий процес самостійного створення сайту на Joomla 4 з нуля та до вивантаження на хостинг. У відео будуть розглянуті лише безкоштовні розширення. За основу буде взято безкоштовний шаблон Helix Ultimate, а як основний компонент для створення сторінок розглянемо конструктор контенту SP Page Builder 4 Lite.

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

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

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

В уроці бере участь остання доступна мені, на момент написання статті (28.12.2022), версія Joomla 4.2.6  українською мовою та локальний сервер XAMPP Windows x64 8.1.12 0 VS16. Тестовий комп’ютер працює на Windows 11 Pro 22H2 х64 (22621.963, Windows Feature Experience Pack 1000.22638.1000.0).

Список питань, розглянутих під час уроків 1-7

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

Відеоурок 1.

• Встановлення локального сервера XAMPP – 00:02:45.
• Завантаження Джумла 4 – 00:04:56.
• Запуск XAMPP – 00:05:20.
• Встановлення Joomla 4 – 00:06:52.
• Використання обробки URL-адреси (файл «.htaccess») – 00:11:17.
• Встановлення мови Joomla 4 – 00:13:47.
• Зміна логіна та пароля облікового запису – 00:15:11.
• Створення користувачів – 00:16:01.
• Відключення модулів адмінки – 00:17:01.

Відеоурок 2.

• Запуск XAMPP з теки – 00:00:58.
• Як зайти в адмінку сайту – 00:01:37.
• Збільшення тривалості сесії – 00:02:00.
• Встановлення мови для Джумла 4 з файлу – 00:03:31.
• Встановлення шаблону в Joomla 4 – 00:04:35.
• Встановлення розширень в Joomla 4 – 00:06:20.
• Налаштування шаблону та створення шапки сайту – 00:07:14.
• Створення меню в Джумла 4 – 00:18:12.
• Створення підвалу сайту (робота з модулями) – 00:19:44.
• Перегляд позицій будь-якого шаблону – 00:23:11.
• Робота з SP Easy Image Gallery – 00:24:07.
• Помилка генерації мініатюр на XAMPP – 00:25:52.

Відеоурок 3.

• Додавання модулів у підвал сайту – 00:01:05.
• Створення пунктів меню в Joomla 4 – 00:02:43.
• Створення головної сторінки сайту в SP Page Builder 4 – 00:03:53.
• Перевірка сторінки на телефоні – 00:27:16.

Відеоурок 4.

• Визначення головної сторінки сайту – 00:00:53.
• Сторінка «Про нас» – 00:02:17.
• Сторінка «Наші проекти» (галерея) – 00:13:50.
• Модуль меню у підвалі – 00:18:30.
• Модуль «Навігаційна стежка» – 00:19:47.

Відеоурок 5.

• Як створити копію всього сайту та серверу – 00:00:58.
• Створення сторінки «Контакти» – 00:02:16.
• Карта Google – 00:07:32.
• Налаштування пошти в Joomla 4 – 00:10:27.

Відеоурок 6.

• Додавання посилань на головну сторінку – 00:00:55.
• Створення категорії матеріалів – 00:02:34.
• Завантаження зображень у Медіа – 00:02:59.
• Створення матеріалів (статей) – 00:04:53.
• Створення категорії пункту меню – 00:05:26.
• Налаштування матеріалів (статей) – 00:06:07.
• Налаштування сторінки «Блог» – 00:08:14.
• Вставка відео з YouTube у матеріал Joomla 4 – 00:09:21.
• Коментарі – 00:13:18.
• Кнопки шерінгу в соціальні мережі – 00:17:39.
• Модуль новин у підвалі – 00:20:47.

Відеоурок 7.

• Реєстрація та налаштування Хостингу Україна – 00:01:03.
• Встановлення та налаштування Akeeba Backup Core – 00:03:35.
• Перенесення сайту на Хостинг Україна – 00:05:29.
• Оновлення Joomla на хостингу – 00:10:43.
• Перенесення XAMPP на інший комп’ютер, диск або теку – 00:12:29.

Підготовка до створення сайту

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

Перш ніж приступити до вивчення теорії роботи з Joomla і почати практикуватися, рекомендую пройти підготовчий етап – «проектування». Справжнє проектування – важливий, складний та тривалий процес. Ми ж передбачаємо короткий алгоритм дій, які слід виконати на початок безпосередньої роботи над сайтом. Сподіваюся, це значно допоможе вам самостійно створити сайт.

Крок 1. Визначте мету та завдання сайту. Для себе дайте відповідь на запитання (у перспективі на 1,5-2 роки):

• Що ви бажаєте отримати від цього сайту?
• Що отримають відвідувачі вашого сайту, чи їм це потрібно і наскільки?

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

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

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

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

Крок 4. Ознайомтеся із загальними рекомендаціями щодо створення сайтів від вагомих гравців ринку інтернет-індустрії та дотримуйтесь їх. Наприклад, можна почати з офіційної документації Google.

Також не зайвим буде регулярне читання галузевих блогів та форумів. Наприклад:

• Блог агенції Inweb.
• Блог WebMaestro.

А ось у бібліотеці актуального не знайти. Там або все те, що вже є в мережі, або те саме, але іншими словами. Хоча… Можливо, є винятки.

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

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

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

Крок 6. Перегляньте сайти 10 найсильніших конкурентів. Шукайте та записуйте все, що стосується зовнішнього вигляду, функціональності, інформації, цін тощо. Я складаю таблицю. Наприклад, таку.

Плюс, записуйте по сайтах все, що вважаєте за потрібне, важливе, корисне, цікаве. У таблиці використовую «0» і «1» (як «немає», «є»), щоб потім підсумувати рядками і зрозуміти, що зі знайденого зустрічається на сайтах конкурентів частіше або рідше.

Крок 7. На підставі знайдених «фішок» на кроці №6 почніть планувати те, що буде у вас на сайті. Можна розбити його на завдання пріоритетності.

Крок 8. Продумайте структуру вебсайту. Наприклад.

Головна

Каталог товарів

       Підрозділ 1

          Товар 1

          Товар 2

          Товар …

       Підрозділ 2

          Товар 1

          Товар 2

          Товар …

       Підрозділ …

          Товар 1

          Товар 2

          Товар …

Доставка і оплата

Контакти

Блог

       Стаття 1

       Стаття 2

       Стаття …

По суті, це відображення меню сайту і, частково, структури URL-адрес (про це поговоримо у наступних статтях).

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

Сторінка «Контакти». Карта Google з позначкою нашого офісу (праворуч на сторінці); форма зворотного зв'язку (з полями «телефон», «повідомлення») (ліворуч на сторінці). Над формою, зліва від карти: телефон (клікабельний), адреса, короткий опис, як проїхати, графік роботи.

І так з кожної типової сторінки. Звичайно, схожі сторінки товарів окремо описувати не потрібно.

Крок 10. Напишіть у плані додаткові завдання. Наприклад, «Показник оптимізації швидкості завантаження сайту за даними тесту Google PageSpeed Insights повинен бути не менш 50 (для мобільних пристроїв)».

Крок 11. Підготуйте тексти, зображення та інший вміст під кожну сторінку сайту.

Крок 12. Підберіть необхідні для реалізації сайту розширення Joomla. Про це поговоримо у наступних статтях.

Крок 13. Виберіть шаблон для Joomla. Наведу короткий перелік формальних ознак, зустрівши які в описі шаблону можна буде на 80-90% переконатися, що шаблон хороший і задовольнить вас:

• Сумісність шаблону з потрібною версією Joomla і додатковими розширеннями.
• Адаптивний дизайн.
• HTML5, CSS3, Bootstrap 5 (або новіше).
• Сумісність із актуальними версіями браузерів Google Chrome, Mozilla Firefox, Opera, Microsoft Edge, Safari, Android.
• Дата оновлення шаблону не більше 1 року тому.

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

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

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

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

У наступній статі «Відеоурок 2. Самостійна розробка сайтів на Joomla 4» розглянемо встановлення шаблону, додаткових розширень, створимо шапку, підвал сайту та розглянемо ще декілька питань.

Автор статті – Хорошевський Олексій

Кандидат технічних наук, викладач Харківського національного університету радіоелектроніки, веб-майстер та SEO-оптимізатор із досвідом роботи понад 15 років. Спеціаліст зі створення сайтів на Joomla та WebSite X5. Автор наукових публікацій, відеокурсів та навчального контенту з веб-розробки та SEO. Веде блог та YouTube-канал, де ділиться своїми знаннями та практичним досвідом. Надає послуги зі створення, доопрацювання, супроводу та просування сайтів. Докладніше про автора… Контакти: +38 095 840 24 29 +38 095 840 24 29 +38 095 840 24 29 email@aleksius.com Соціальні мережі: LinkedIn Facebook YouTube (Twitter) Публікації та робота: Google Академія Scopus Upwork Freelance.ua