Обзор Website X5 Professional 16. Google AMP, GDPR и другие новшества

• Купить WebSite X5 Evo (скидка 20%).
• Купить WebSite X5 Pro (скидка 20%).

• Видео обзор.
• Настройка стилей заголовков H1-H6.
• Создание AMP страниц.
• Ссылка Звонок/Сообщение.
• Вложение файла.
• Другие изменения.

Website X5 16 – это простая в освоении русскоязычная программа для создания адаптивных сайтов разной сложности: от лэндингов до интернет-магазинов.

Видео обзор

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание 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 (это входит в стоимость хостинга).

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

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

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

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

Согласно 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. Доступен только тип действия Отправляет сообщение.
• Можно выбрать тип действия Звонок или Отправляет сообщение.
• ВКонтакте. Доступен только тип действия Отправляет сообщение.

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

Например, если выбрать тип канала 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. Оптимизация проекта сайта» мы рассмотрим процесс покупки платного шаблона «быстрого старта» и поговорим о возможности оптимизации проекта сайта.

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

Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и 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

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

• Купить WebSite X5 Evo (скидка 20%).
• Купить WebSite X5 Pro (скидка 20%).