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

Видео уроки Website X5 13 и 12Видео уроки Website X5 13 и 12

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

 

 

Incomedia WebSite X5 12 – это программа для создания сайтов (HTML5, CSS3, отзывчивый дизайн, Open Graph и т.д.). Она полностью переведена на русский язык, включая справку, а также техническую поддержку. Особенностью программы является простой и удобный интерфейс, который облегчает процесс разработки сайтов (по сравнению с популярными бесплатными CMS). При помощи WebSite X5 12 можно создавать сайт фотографа, ресторана, свадебного салона и любой другой организации, фирмы и пр. Программа также позволяет организовать полноценную продажу товаров на сайте – интернет-магазин.

Подробнее о программе (её предыдущей версии) можете прочесть в цикле статей, первая часть статьи – «Обзор Incomedia WebSite X5 11 Evolution. Программа для визуального создания сайтов». Также можете ознакомиться с несколькими видео-роликами – первая часть «Видео уроки Website X5 (часть 1). Самостоятельное создание сайта компании».

Возможности 13-й версии программы описаны в статье «Обзор Website Х5 Evolution 13. Что нового».

В обзоре будет участвовать последняя на момент написания статьи (26.09.2015) русскоязычная версия Incomedia WebSite X5 12 Evolution и Professional (12.0.0.12). Скачать демонстрационную версию Incomedia WebSite X5 Evolution 12 можно на сайте разработчика.

Тестовая система:

  • Операционная система – Windows 8.1 х64 Профессиональная.
  • Разрешение экрана – 1920х1080.
  • Браузер – Mozilla Firefox 41.0.
  • Сайт экспортируется на локальный сервер «Open server 5.2.2 Расширенный» (Apach-2.2+Nginx-1.6, PHP-5.4, MySQL-5.5).

Для полноценной проверки работоспособности и возможности сайта, созданного в Website X5 12, особенно Professional версии, рекомендую тестировать или на реальном хостинге, или на локальном сервере. Потребуется создать базу данных для сайта. Как установить Open server и как создать там базу данных, можете прочесть в статье «Ответы на вопросы по шаблонам для Джумла. Внесение изменений». Описанная там методика подходит не только для Joomla, но и для Website X5 12 (и сайтов, сделанных при помощи другого программного обеспечения).

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

Что нового в WebSite X5 12

Кратко перечислим, какие новые возможности доступны в 12-й версии программы, по сравнению с 11-й.

  • Адаптивный веб-дизайн (отзывчивый дизайн). С возможностью настройки макета страниц для разных разрешений экрана, раздельным редактированием мобильного и обычного шаблона сайта и настройками «контрольных точек» – ширины экрана, после которой происходит изменение макета\шаблона сайта. Ранее было доступно только мобильное приложение.
  • Управление заказами интернет-магазина в админке сайта даже с телефона (только для Professional версии). В 11-й версии в административной части сайта не было возможности отслеживания покупок и админка была неадаптивной.
  • Возможность задавать наличие определённого количества товаров на складе с возможностью ограничения количества покупок (только для Professional версии). Это функция для интернет-магазина. Ранее количественный показатель наличия на складе был недоступен.
  • Усовершенствованная админка сайта.
  • Возможность вывода сообщения об использовании на сайте «куков» (и\или ссылки на политику конфиденциальности и защиты персональных данных).
  • Защита от спама при помощи новой reCAPTCHA.
  • Усовершенствованная страница приветствия с возможностью автоматического перенаправления пользователей на нужную версию сайта согласно языка их браузера или разрешения экрана. Последнее доступно только в Professional. Ранее в 11-й версии, для мультиязычных сайтов, можно было разместить переключатели языка.
  • Добавлена поддержка Open Graph.
  • На сайте технической поддержки Answers официально появилась русскоязычная ветка.
  • Добавилась возможность задавать иконки способа оплаты и доставки на странице оформления заказа интернет-магазина.
  • И другие нововведения.

Обратите внимание, что для Evolution и Professional версий наборы опций отличаются. Например, в Professional настройка адаптивного дизайна более расширенная по сравнению с Evolution (подробнее об отличиях Pro и Evo мы поговорим в следующей статье).

Официальные минимальные системные требования весьма скромные:

  • Операционная система – Windows Vista, 7, 8, 10. Обратите внимание, что поддержка Windows XP не заявлена.
  • Оперативная память (ОЗУ) – 1 Гб.
  • Разрешение экрана – 1024x600.

Добавлю, что при работе в Windows 8.1 программа вела себя нормально. Поверхностное тестирование в Windows 10 х64 Pro тоже не выявило никаких проблем. Для более удобной работы в программе рекомендую запускать её на компьютере с 2 и более гигабайтами оперативной памяти, разрешением экрана не менее 1366х768, наличием подключения к интернету (чем быстрее, тем лучше), а также быстрым винчестером (для ускорения протекания всех процессов). Также не забудьте, что при использовании Flash или PDF-файлов (для их отображения в браузере) понадобятся соответствующие плагины браузера.

Рассмотрим некоторые новшества WebSite X5 12 более детально (на примере Professional версии). В качестве тестового сайта возьмём сайт\интернет-магазин пиццерии из прошлого цикла видео-уроков WebSite X5 11.

Мобильная версия

На первом шаге создания сайта в WebSite X5 12 Professional, в разделе Общие настройки, вкладка Адаптивный дизайн (рисунок ниже) Вы можете управлять «точками остановки» или ещё в программе применяется термин «контрольные точки» или «интервал».

Обратите внимание, что в 13-й версии программы данный инструмент был изменён.

«Точка остановки» или «контрольная точка» – это ширина области экрана, в которой просматривают сайт. В большинстве случаев, это ширина разрешения экрана. Написал «области экрана, в которой просматривают сайт», так как даже на мониторах с разрешением 1920х1080, где 1080 – ширина, пользователь может уменьшить ширину окна браузера и, как следствие ширину Вашего сайта. Так вот WebSite X5 12 подстраивается не под фактическую ширину экрана устройства пользователя, а под ту его часть, в которой в данный момент отображается сайт. На мой взгляд, это правильно. Это и есть та адаптивность (отзывчивость), которую так активно продвигает Google.

WebSite X5 12
WebSite X5 12

«Точка остановки» («контрольная точка») указывает на то, как сайт должен «реагировать» при той или иной ширине экрана. Например, для ширины экрана менее 480 пикселей можно задать скрытие тех или иных объектов на странице. Вы можете сами задавать точки и редактировать существующие.

Опция Запустить легко адаптируемый сайт активирует применение отзывчивого дизайна и позволяет воспользоваться опциями для его настройки на следующих этапах.

В разделе Стиль шаблона (рисунок ниже) появился новый подраздел – Структура адаптивного шаблона. Он очень похож на редактор «обычных» шаблонов, но относится к мобильным. Мобильный шаблон будет автоматически применяться к сайту, в случаях, когда ширина экрана менее 985 пикселей.

WebSite X5 Professional 12
WebSite X5 Professional 12

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

Incomedia WebSite X5 Professional 12
Incomedia WebSite X5 Professional 12

Наиболее интересные, на мой взгляд, настройки – это настройки меню (рисунок ниже).

  • Всегда поддерживайте его видимым. Если опция включена, то верхнее меню будет отображаться даже тогда, когда пользователь прокрутит страницу вниз. Оно будет «приклеено» к верхней части страницы.
  • Спрятать логотип при видимом названии. Если опция включена, «мини-логотип», файл которого указывается в Логотип компании, будет скрываться тогда, когда будет видна шапка сайта. Это полезно, если Вы продублировали в ней логотип (в увеличенном варианте).
Структура адаптивного шаблона
Структура адаптивного шаблона

На рисунке ниже показан пример отображения «мини-логотипа» и «приклеенного» верхнего меню.

Адаптивный шаблон
Адаптивный шаблон

При редактировании адаптивного шаблона сайта Incomedia WebSite X5 Professional 12 можно разместить в подвале произвольный текст (рисунок ниже). Допускается применение HTML. Обратите внимание, текст будет вставлен именно в виде текста, а не изображения. Что гораздо лучше.

Подвал
Подвал

В мобильном виде верхнее меню сайта «прячется» за «кнопкой-гамбургером» и появляется по её нажатию в правой части сайта (рисунок ниже). Внешний вид (стиль\дизайн) меню можно настроить в подразделе Стиль раскрывающегося меню (в текущем разделе Стиль шаблона).

Раскрывающееся меню
Раскрывающееся меню

В принципе, WebSite X5 12 адаптирует макет страниц под разную ширину экрана автоматически. Но можно изменить некоторые настройки вручную. Также стоит отметить, что при внесении изменений в проект в нижней части окна программы (рисунок ниже), а также в подразделе Статистика, SEO и код, появится предупреждение о необходимости проверки отображения мобильной версии сайта. Следовать этому совету очень полезно.

Адаптивный макет страницы
Адаптивный макет страницы

Обратите внимание, что в Incomedia WebSite X5 Evolution 12 (рисунок ниже) нет одного весьма полезного, на мой взгляд, инструмента для настройки макета страницы – Запустить режим изменения разрыва строк для изменения расположения Объектов с более низким разрешением.

Incomedia WebSite X5 Evolution 12
Incomedia WebSite X5 Evolution 12

В Pro-версии он есть (рисунок ниже).

Легко адаптивные настройки
Легко адаптивные настройки

Вы можете управлять порядком следования объектов и их отображением\скрытием при той или иной ширине экрана – «Интервал» (ширина экрана настраивается на первом шаге создания сайта – «точка остановки» («контрольная точка»)).

Подробнее об объектах WebSite X5 можно прочесть в предыдущих статьях.

В спадающем списке Заказать (рисунок выше) доступны две опции.

  • Упорядочить все Объекты сначала. Выбрав эту опцию, Вы сможете указать, какой из объектов должен быть первым на странице в мобильной версии сайта. Этот инструмент подойдёт в случае, когда нужно упорядочить все объекты на странице. Цифры в треугольниках в правом нижнем углу каждого объекта указывают на его порядковый номер в макете мобильного сайта. Просто нажмите на объект, который нужно назначить первым, левой клавишей мыши. После этого - на второй и так далее.
  • Выполнить упорядочивание с Объекта. Вы можете изменить порядок следования отдельно выбранных объектов. Например, если нужно поменять местами только 3-й и 4-й, а первые два уже стоят в нужном порядке. Для этого нажмите сперва на объект №2, задав его начальным, а после нажмите на тот объект, который должен идти после него (рисунок ниже). Если нажать на №4 (рисунок ниже), то он станет третьим.
Упорядочивание объектов
Упорядочивание объектов

Находясь в одном из режимов редактирования порядка следования макета, нажав на спадающий список Заказать (рисунок ниже), перед Вами появятся две опции.

  1. Аннулировать упорядочивание. Завершает упорядочивание и отменяет все сделанные изменения.
  2. Полное упорядочивание. Завершает упорядочивание и сохраняет все внесенные изменения.
Отмена подтверждения
Отмена подтверждения

Обратите внимание, что не всегда можно задать нужный Вам порядок следования объектов. Это зависит от макета страниц и расположения объектов в нескольких ячейках сетки макета (рисунок ниже).

Макет страницы
Макет страницы

Справа от инструмента Заказать есть инструмент Запустить режим Показать/Спрятать Объекты для более низких разрешений (рисунок ниже). Выбрав этот инструмент и нажав на какой-то объект, укажите на то, что его не нужно отображать в мобильной версии сайта.

Скрытие объекта
Скрытие объекта

В моём примере это объект №3 (рисунок выше). Он серого цвета. Если переключиться на другое отображение, то видно, что его не будет на странице (рисунок ниже).

Скрытый объект
Скрытый объект

Очень полезная функция. Настоятельно рекомендую детально проработать вопрос скрытия менее важных объектов страниц сайта в мобильной версии.

Правее от инструмента Запустить режим Показать/Спрятать Объекты для более низких разрешений расположен ещё один – Запустить режим разрыва строк для изменения расположения Объектов с более низким разрешением. Он позволяет принудительно задать перенос объектов на новую строку в случаях, когда программа посчитает, что объекты могут располагаться в одной строек. Например, на главной странице тестового сайта, проект которого можете скачать в конце данной статьи, есть таблица (объект №2) (рисунок ниже).

Режим разрыва строк
Режим разрыва строк

Если оставить разрыв строк по умолчанию, то таблица выглядит так, как показано ниже (при ширине области браузера – 720 пикселей).

Сайт в окне с шириной 720 пикселей
Сайт в окне с шириной 720 пикселей

Таблица явно не помещается в одной строке макета страницы с текстовым объектом. Лучше перенести её на следующую строку под текстовый объект. Для этого нажмите на инструмент Запустить режим разрыва строк для изменения расположения Объектов с более низким разрешением слева от объекта таблицы (№2), на рисунке выше появится чёрная пунктирная линия. Это значит, что тут можно вставить разрыв. Нажмите на неё левой клавишей мыши – она станет сплошной и красной (рисунок ниже). Для подтверждения применения действия ещё раз нажмите на инструмент Запустить режим разрыва строк для изменения расположения Объектов с более низким разрешением.

Принудительный разрыв
Принудительный разрыв

Теперь при той же ширине экрана страница будет выглядеть гораздо лучше (рисунок ниже).

Сайт в окне с шириной 720 пикселей (2)
Сайт в окне с шириной 720 пикселей (2)

Управление заказами интернет магазина

В Incomedia WebSite X5 Professional 12 были расширены возможности для создания интернет-магазина.

Была добавлена возможность задать пиктограмму для способа доставки и оплаты (рисунок ниже). Можно просмотреть результат на тестовом сайте, заказав какой-то товар.

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

Управление заказами интернет магазина
Управление заказами интернет магазина

Для этого доступно несколько разделов:

  • Продукт заказан. Список всех товаров, которые заказали покупатели. Можно просмотреть расширенную информацию о заказе прямо в окне браузера (рисунок ниже). Также можно экспортировать данные в CSV-файл и обрабатывать их на компьютере. При помощи пиктограмм в правой части таблицы заказов можно перемещать заказ из раздела в раздел – менять его статус. Например, нажав на зелёный грузовичок, заказ перейдёт в раздел Выполнены.
  • Выполнены. Список всех товаров, которые заказали покупатели и которые им уже доставили.
Информация о заказе
Информация о заказе
  • Скоро. Или «В ожидании». Заказ находится в процессе обработки.
  • Наличие. Или «Заканчиваются». Отображает список товаров, которые заканчиваются. Для работы данной вкладки нужно вносить фактическое наличие каждого товара и настроить опцию Уведомлять, если количество меньше (в настройках каждого товара). Немного подробнее об этом мы поговорим в следующей статье.
  • Графики. Доступно три графика, позволяющие увидеть общую динамику продаж и продажи по отдельным товарам (рисунок ниже).
Графики
Графики

Обратите внимание, что из-за ограничений безопасности тестовый сайт функционирует не в полной мере.

В следующей статье «Обзор WebSite X5 12» мы закончим обзор нововведений. Затронем управление количеством товаров, добавление на сайт Open Graph тегов и другое. Также посмотрим примеры сайтов, сделанных в WebSite X5, и поговорим об особенностях перехода с 11-й на 12-ю версию.

Видео уроки Website X5 13 и 12Видео уроки Website X5 13 и 12

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

 

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

При скачивании файлов менеджерами загрузок возможны проблемы.
ФайлОписаниеРазмер
Скачать этот файл (pitstsa-test.zip)Проект сайта Website X5 12 ProfessionalК статье Обзор Incomedia WebSite X5 12. Новые возможности3144 Кб
Скачать этот файл (pitstsa-testovyj-sajt.zip)Проект сайта Website X5 12 EvolutionК статье Обзор Incomedia WebSite X5 12. Новые возможности3667 Кб