Обзоры расширений Joomla

Скидка -30% с 1 по 30 сентября на

WebSite X5 Evolution и WebSite X5 Professional

Скидка -30% от разработчика

Видео уроки Website X5 13, 12 (актуально для 14-16)Видео уроки Website X5 13, 12 (актуально для 14-16)

Видео уроки на русском языке по самостоятельному созданию сайта с нуля в Incomedia Website X5 Evolution и Professional 13, 12 (актуально для 14-16).

 

 

Website X5 16 – это простая в освоении русскоязычная программа для создания адаптивных сайтов разной сложности: от лэндингов до интернет-магазинов. Для того, чтобы научиться с ней работать, Вам не нужны знания вёрстки или программирования. Для большинства функций даже не нужна база данных.

Чтобы освоить программу с нуля Вы, можете ознакомиться с курсом «Видео уроки Website X5. Создание сайта с нуля», а более продвинутым пользователям может пригодиться курс «Видео уроки Website X5. Расширенные возможности».

В предыдущей статье «Обзор Website X5 15. Новые возможности» были рассмотрены новшества 15-й версии программы. С тех пор прошло около полугода и за это время в программе появилось несколько весьма полезных новинок.

В обзоре участвует последняя, на момент написания статьи (27.08.2018), русскоязычная версия Incomedia Website X5 Professional 16.2.1 (х64). Сайт на основании шаблона и «быстрого старта» – Pet Shop, включая все объекты из его состава. Немного подробнее об этом можно прочесть в следующей статье. На сайте отображаются англоязычные демонстрационные материалы, но сайт можно сделать на любом языке или даже на нескольких (мультиязычный).

Видео обзор

В данном видео показаны некоторые моменты, описанные в статье.

  • Настройка стилей заголовков H1-H6 – с 00:00:47.
  • Создание AMP страниц – с 00:04:14.
  • Ссылка Звонок/Сообщение – с 00:07:10.
  • Вложение файла – с 00:08:16.
  • Интерфейс встроенного браузера – с 00:09:16.

 

 

Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки Вы можете найти на каналах сайта Aleksius.com в YouTube, Rutube и Mail.ru.

Настройка стилей заголовков H1-H6

В Website X5 Professional 16 появилась возможность вставки заголовков H1-H6 в текст. Перейдите в Настройки – Статистика, SEO и код и активируйте опцию Настраивает теги H1…H6 для Заголовков Шаблона. Если включить опцию и в объекте текст выделить какой-то текст как Заголовок 1, то в коде страницы он будет вставлен так:

<h1 class="imHeading1">Мой заголовок 1</h1>

Если отключить опцию и сделать то же самое, то в коде страницы заголовок будет вставлен так:

<div class="imHeading1">Мой заголовок 1</div>

В Шаблон – Стили текстов, Поля и Кнопки появилась возможность настраивать внешний вид (стили) заголовкам H1-H6 (рисунок ниже). Для этого в спадающем списке Элементы страницы выберите Заголовки, а в спадающем списке Стиль – нужный уровень заголовка.

Website X5 16
Website X5 16

Настроив таким образом стили, можно будет их применять к текстам в объектах Текст (рисунок ниже), Таблица, в записях в блоге и так далее. Причём, если Вы в дальнейшем измените настройки стилей в Шаблон – Стили текстов, Поля и Кнопки, то изменения автоматически повлияют на все заголовки на сайте.

Website X5 Professional 16
Website X5 Professional 16

Создание AMP страниц

В предыдущей статье «Обзор JAmp. AMP-страницы в Joomla 3» я уже рассказывал о том, что такое AMP и делился своим опытом касательно данной технологии. Она служит для ускорения загрузки страниц Вашего сайта.

Website X5 Professional 16 появилась возможность создавать AMP-страницы для записей (постов) блога. Вам нужно перейти в Настройки – Расширенные настройки – Блог – Страница статьи и активировать опцию Создает страницы Google AMP с контентом блога. Также можете указать картинку (в поле Изображение заголовка для Google AMP), которая будет использоваться как логотип/шапка AMP-страниц вместо Вашей обычной шапки, заданной в Шаблон – Контент шаблона – Хедер.

Обратите внимание, что из-за особенностей технологии Google AMP Ваш сайт должен работать на протоколе HTTPS. То есть, у него должен быть SSL-сертификат. Подойдёт даже бесплатный от Let's Encrypt. Мой тестовый сайт как раз работает на HTTPS и для него установлен бесплатный SSL от Let's Encrypt (это входит в стоимость хостинга).

Incomedia Website X5 16
Incomedia Website X5 16

На рисунке ниже показан пример обычной страницы записи (не AMP версия).

Пример обычной страницы блога
Пример обычной страницы блога

На рисунке ниже показан пример AMP версии страницы. Страница показана не полностью. Только верхняя и нижняя её части. На странице сохранился весь текстовый контент, фотографии котов и видео. Также в верхней части появилось изображение, которое было добавлено в поле Изображение заголовка для Google AMP. Обратите внимание, что весь шаблон сайта и боковая полоса блога, включая блоки, исчезли. Страница обычного сайта располагалась по адресу «blog/index.php?milyen-kotyatki», а AMP-страница – «blog/amp/?milyen-kotyatki».

Пример AMP-страницы блога
Пример AMP-страницы блога

Если проверить код AMP-страниц в специальном валидаторе тут или тут, найдётся всего одна ошибка, и та связана с тем, что я вставил видео с YouTube при помощи «iframe», а не «amp-iframe». Это моя ошибка, а не ошибка Website X5 16.

Обе страницы были протестированы в разных сервисах. Результаты тестирования сведены в таблицу ниже.

 

Тест

Не AMP

AMP

Webpagetest.org

Время первого байта (FBT) – A

Keep-alive – A

Сжатие пакетов – A

Сжатие изображений – A

Кэширование статического контента – F

Эффект от CDN – Нет

Время загрузки – 4,285 с.

Время первого байта (FBT) – 0,233 с.

Начала отрисовки – 1,6 с.

Время полной загрузки – 5,177 с.

Время первого байта (FBT) – A

Keep-alive – A

Сжатие пакетов – A

Сжатие изображений – A

Кэширование статического контента – F

Эффект от CDN – Нет

Время загрузки – 3,141 с.

Время первого байта (FBT) – 0,225 с.

Начала отрисовки – 1,3 с.

Время полной загрузки – 3,222 с.

Google PageSpeed Tools

Для мобильных – 68/100

Для компьютеров – 77/100

Для мобильных – 70/100

Для компьютеров – 85/100

GTmetrix

PageSpeed Score – C (78%)

YSlow Score – E (58%)

Полное время загрузки – 4,0 с.

Общий размер страницы – 1,65 Мб

Количество запросов – 57

PageSpeed Score – B (82%)

YSlow Score – B (83%)

Полное время загрузки – 2,9 с.

Общий размер страницы – 1,10 Мб

Количество запросов – 23

Pingdom Website Speed Test

Оценка производительности – 73

Время загрузки – 1,61 с.

Быстрее чем 77% протестированных сайтов

Оценка производительности – 87

Время загрузки – 0,786 с.

Быстрее чем 93% протестированных сайтов

Согласно Webpagetest.org:

  • время загрузки страницы сократилось на 36,42%.
  • Время первого байта (FBT) сократилось на 3,56%.
  • Время начала отрисовки сократилось на 23,08%.
  • Время полной загрузки сократилось на 60,68%

Согласно GTmetrix время полной загрузки сократилось на 37,93%. Согласно Pingdom время полной загрузки сократилось на 51,18%.

Приведу пару сводных графиков по количественным показателям сайта из таблицы выше.

Время в сек. (меньше - лучше)
Время в сек. (меньше - лучше)
Оценка степени оптимизации (больше - лучше)
Оценка степени оптимизации (больше - лучше)

Учитывая, что это единичный случай, делать выводы о всей технологии некорректно, но примерное впечатление составить можно.

Настройки тестов:

  • Webpagetest.org. Местоположение тестового сервера – Варшава (Польша). Браузер – Chrome.
  • Pingdom Website Speed Test. Местоположение тестового сервера – Стокгольм (Швейцария).

Внизу страницы Вы сможете найти отчёты о тестировании разных страниц в GTmetrix.

Тестируемый сайт расположен на общем хостинге компании «Хостинг Украина». Тарифный план «Мастер SSD» (ниже указана конфигурация аккаунта именно для конкретного сайта):

  • SSD диски.
  • PHP 7.0.
  • PHP memory_limit 256 Мб.
  • HTTP/2.
  • Общий IP-адрес.

Ссылка Звонок/Сообщение

В Website X5 Evolution 16 и в Professional версии появился новый тип ссылки – Звонок/Сообщение (рисунок ниже). Доступны такие типы каналов:

  • Телефон. Можно выбрать тип действия Звонок или Отправляет сообщение.
  • Скайп. Можно выбрать тип действия Звонок, Отправляет сообщение, Добавить контакт, Показать профиль, Голосовая почта Skype VoiceMail, Отправить файл.
  • WhatsApp. Доступен только тип действия Отправляет сообщение.
  • Facebook Manager. Доступен только тип действия Отправляет сообщение.
  • Telegram. Доступен только тип действия Отправляет сообщение.
  • Можно выбрать тип действия Звонок или Отправляет сообщение.
  • ВКонтакте. Доступен только тип действия Отправляет сообщение.

По нажатию на ссылку произойдёт то, что указано в Тип действия.

Website X5 Evolution 16
Website X5 Evolution 16

Например, если выбрать тип канала Viber, тип действия Звонок и задать номер телефона, то по нажатию на ссылку откроется Viber и пойдёт набор номера для звонка через Viber Out. Но не всё так просто. Чтобы это сработало, надо:

  1. чтобы у пользователя, который нажимает на ссылку, был установлен Viber.
  2. Чтобы у пользователя, который нажимает на ссылку, была установлена связь между ссылками такого рода и Viber. По умолчанию, браузер сам предложит набрать номер в Viber. Но если ранее это было как-то изменено, то вызова не будет.
  3. Чтобы у пользователя, который нажимает на ссылку, были денежные средства на его счету Viber Out.
  4. Чтобы номер, который Вы указали для ссылки, был номером Viber.

Вложение файла

В Website X5 Professional 16 можно разрешить пользователям прикреплять файлы к своему заказу во время его оформления. Для этого перейдите в Настройки – Расширенные настройки – Корзина – Данные покупателя и сделайте видимым поле Приложенный файл (рисунок ниже).

Данные покупателя
Данные покупателя

Таким образом, при оформлении заказа пользователь сможет прикрепить файл (рисунок ниже). Внешний вид кнопки добавления файла зависит от браузера.

Прикрепление файла
Прикрепление файла

Файл будет прикреплён в виде вложения к письму для администратора и клиента.

Другие изменения

Помимо вышеописанных новшеств было сделано многое другое.

HTML5 и SEO. В коде сайта появились новые HTML5 теги, которые улучшают понимание страниц Вашего сайта поисковыми системами и повышают его доступность для инвалидов (от англ. accessibility). Это может положительно сказаться на позициях сайта в поисковой выдаче.

Немного подробнее о рекомендациях касательно адаптации сайта для инвалидов можно прочесть в статье «Обзор шаблона Joomla JM University. Как сделать версию сайта для слабовидящих». Если Вам интересна данная тема, то можете ознакомиться с видео-инструкцией по созданию сайтов для слабовидящих на Website X5. Вот тут можно посмотреть пример инструментария.

В статье «HTML Tags for SEO: to use or not to use?» (на англ.) Вы можете найти информацию касательно различных тегов и их важности в контексте SEO.

Безопасность и регламент GDPR. Генерируемый программой код сайта прошёл проверку на соответствие требованиям GDPR, включая требования к генерации паролей. Но Вам надо будет выполнить ещё ряд рекомендаций. Немного подробнее обо всём этом можно прочесть в статье «Регламент GDPR и 152 ФЗ. Требования, сравнение».

Предварительный просмотр сайта. Панель управления окна предварительного просмотра сайта была немного изменена (рисунок ниже): увеличены кнопки эмуляции мобильного устройства, добавлена возможность просмотра сайта в одном из браузеров, установленном у Вас на компьютере.

Окно предварительного просмотра сайта
Окно предварительного просмотра сайта

Ряд других, более мелких, изменений:

  • добавлена поддержка анимации из WebAnimator 3.
  • Изменена функциональность касательно страницы 404. Это позволит облегчить управление этой страницей при помощи файла .htaccess. В курсе «Видео уроки Website X5. Расширенные возможности»  есть видео урок, в котором показан способ создания такой страницы в предыдущих версиях программы.
  • При экспорте проекта файлы, относящиеся к дополнительным объектам, теперь экспортируются в подпапки.
  • Можно задавать имя экспортируемого проекта (файл IWZIP).
  • Упрощён процесс обновления самой программы Website X5. Не нужно удалять предыдущую версию.
  • Были добавлены новые платные объекты Textillate – анимированный текст и Accordion Text – аккордеон.
  • Множество мелких исправлений в работе объекта Текст, блога, объекта Таблица, всплывающих подсказок, фиксированной полосы, корзины, объекта Контактная форма, объекта Меню, объекта Галерея и других элементов.

В следующей статье «Обзор WebSite X5 Optimizer. Оптимизация проекта сайта» мы рассмотрим процесс покупки платного шаблона «быстрого старта» и поговорим о возможности оптимизации проекта сайта.

Видео уроки Website X5 13, 12 (актуально для 14-16)Видео уроки Website X5 13, 12 (актуально для 14-16)

Видео уроки на русском языке по самостоятельному созданию сайта с нуля в Incomedia Website X5 Evolution и Professional 13, 12 (актуально для 14-16).

 

Полезные ссылки:

При скачивании файлов менеджерами загрузок возможны проблемы.
ФайлОписаниеРазмер
Скачать этот файл (rezultaty-testirovaniya-stranitsy.zip)Результаты тестирования страницIncomedia Website X5 Professional 16.2.1 (х64)417 Кб

Скидка -30% с 1 по 30 сентября на

WebSite X5 Evolution и WebSite X5 Professional

Скидка -30% от разработчика