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

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

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

 

 

Website X5 Evolution 13 – это удобная и простая в использовании программа для создания сайтов с адаптивным дизайном. В ней Вы сможете создавать посадочные страницы («лендинги»), сайты фирм, блоги и интернет-магазины. Отличительной особенностью программы является упрощённый процесс создания сайта и отсутствие необходимости программировать. Для тех, кто владеет такими языками как HTML, CSS и PHP, программа предоставит дополнительные возможности для расширения функциональности и более тонкой настройки внешнего вида сайта.

Те, кто чувствуют в себе дизайнерскую жилку, смогут создать уникальный дизайн в графическом редакторе (например, в GIMP или Photoshop), а затем реализовать его на сайте посредством множества инструментов редактирования шаблона, доступных в WebSite X5 13.

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

SEO-специалисты оценят минимальную вероятность такой частой проблемы как дубли страниц (по сравнению со многими CMS). У сайтов, созданных в WebSite X5 13, чистый и валидный код, можно добавлять мета-данные не только к страницам, но и к изображениям, и видео. Есть поддержка семантической разметки страниц Open Graph и многое другое, что позволит сделать хороший сайт. Хороший сайт – это сайт для людей, а не сайт, который подстраивают под алгоритмы поисковых систем.

Кроме вышеперечисленного, сайты, созданные в этой программе, более защищённые в плане взлома (по сравнению со многими CMS). Так как для популярных CMS есть множество расширений, разработчики которых не всегда уделяют должное внимание безопасности, сайты на CMS, как правило, динамические и подвержены всякого рода SQL-инъекциям. Если у Вас качественный хостинг, и Вы соблюдаете «банальные» правила безопасности, то даже при условии применения базы данных для интернет-магазина на Website X5 версии 13, Ваш сайт всё равно будет более стойким ко взлому (по сравнению со многими CMS).

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

В данном обзоре будет участвовать последняя, на момент написания статьи (07.10.2016), русскоязычная версия Incomedia WebSite X5 Evolution 13.0.0.13 (64 бита). Пример тестового сайта из курса видео-уроков. О новшествах WebSite X5 Professional 13 мы поговорим в следующей статье.

Хорошая новость для обладателей 12-й версии программы. По заявлению разработчика: «Новая версия 13 предусматривает уникальную формулу покупки: версия 13 добавляется к предыдущей версии, не влияя на её работу. В конечном итоге, вы можете оставить себе обе программы и продолжить работу как над созданными вами проектами в предыдущей версии (которую вы не обновили), так и над новыми сайтами, созданными в версии 13.».

Новые возможности WebSite X5 Evolution 13

Отличная новость для всех, кто привык к внешнему виду (интерфейсу) 12-й версии программы. В WebSite X5 13 нет существенных изменений в интерфейсе пользователя, а значит нет необходимости тратить время, чтобы привыкать, переучиваться и искать прежние инструменты и их опции. Почти всё осталось на своих местах (то, что было в 12-й версии). По этому, видео-уроки актуальны и для 13- версии. А теперь рассмотрим новые и изменившиеся возможности.

Увеличение стабильности и производительности

На мой взгляд, самым большим и важным изменением является очистка, оптимизация кода самой программы, избавление от поддержки устаревшей версии .NET Framework (он нужен для работы WebSite X5) и внедрение полноценной поддержки 64-х разрядных операционных систем. Это даёт увеличение скорости работы программы, оптимизирует потребление памяти Вашего компьютера и повышает стабильность работы в целом. Что ведёт к более комфортному процессу создания сайтов и его ускорению.

По заявлению разработчиков программа стала работать на 50% быстрее.

Внешне (в интерфейсе) Вы не заметите никаких изменений. Разве что добавилась надпись (64 бита) на экране загрузки программы и в информации о версии. Но на самом деле изменения весьма существенные, что особенно пригодится тем, кто создаёт сайты, состоящие из сотен страниц.

Провёл небольшой эксперимент. Его нельзя считать репрезентативным и показательным, но он даёт некоторые представления об изменениях. Тестовая система:

  • Incomedia WebSite X5 Evolution 13.0.0.13 (64 бита).
  • Incomedia WebSite X5 Professional 13.0.0.13 (64 бита).
  • Incomedia WebSite X5 Evolution 12.0.9.
  • Incomedia WebSite X5 Professional 12.0.9.
  • Операционная система – Windows 10 pro х64 (10.0.10586, сборка 10586. Все обновления на 07.10.2016).
  • Антивирусное программное обеспечение – Norton Security Deluxe 8.0.50.
  • .NET Framework 4.6.
  • Процессор – Intel Core i7-4770 (тактовая частота 3400 МГц, 4 ядра, 8 потоков).
  • Оперативная память (ОЗУ) – DDR3 16 Гб, частота 1600 МГц, двуканальный режим.
  • Видео карта – GeForce GTX 650 Ti BOOST.
  • Диск, на котором расположены программы и операционная система – SSD OCZ Vertex.
  • Диск, на котором расположены проекты WebSite X5 13 – Western Digital Caviar Black WD5001AALS (7200 оборотов в минуту).

Первый тест. «Методика» тестирования: перезагрузка компьютера, ожидание 20 секунд, запуск WebSite X5. Замер времени от нажатия на ярлык WebSite X5 до появления окна программы (не стартового, без учёта времени, необходимого на погрузку новостей с сайта программы). Повторение процедуры по три раза для каждой из 4-х программ. Результаты средних арифметических значений таковы:

  • Evolution 13 – 8,9 секунды.
  • Professional 13 – 9,166 секунды.
  • Evolution 12 – 10,266 секунды.
  • Professional 12 – 10,233 секунды.

Второй тест. «Методика» тестирования: открытие тестового проекта. Замер времени от нажатия на проект до исчезновения строки с прогрессом генерации файлов проекта. Повторение процедуры по три раза для каждой из 4-х программ. Результаты средних арифметических значений таковы:

  • Evolution 13 – 9 секунд; 118,1 Мб ОЗУ.
  • Professional 13 – 6,4 секунды; 122,7 Мб ОЗУ.
  • Evolution 12 – 11 секунд; 86 Мб ОЗУ.
  • Professional 12 – 8,7 секунды; 104 Мб ОЗУ.

Третий тест. «Методика» тестирования: добавление в проект 261 изображения общим объёмом 127 Мб. Изображения добавляются в объект Галерея, все изображения конвертируются в разрешение 800х600 с разрешения 1920х1200. Замер времени от нажатия на кнопку Предпросомтр до окончания отрисовки страницы в окне тестового браузера. Повторение процедуры по три раза для каждой из 4-х программ (затем находилось среднее арифметическое значение). Изображения перед повтором переименовывались. Результаты таковы:

  • Evolution 13 – 17,5 секунды; 482 Мб ОЗУ.
  • Professional 13 – 16,5 секунды; 604 Мб ОЗУ.
  • Evolution 12 – 98 секунд; 118 Мб ОЗУ.
  • Professional 12 – 102,3 секунды; 150 Мб ОЗУ.

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

 

WebSite X5

Тест №1 (запуск программы) в сек.

Тест №2 (открытие проекта) в сек. / Мб ОЗУ

Тест №3 (генерация изображений) в сек. / Мб ОЗУ

Evolution 13

8,9

9 / 118,1

17,5 / 482

Professional 13

9,166

6,4 / 122,7

16,5 / 604

Evolution 12

10,266

11 / 86

98 / 118

Professional 12

10,233

8,7 / 104

102,3 / 150

Тест №1
Тест №1
Тест №2
Тест №2
Тест №2 (ОЗУ)
Тест №2 (ОЗУ)
Тест №3
Тест №3
Тест №3 (ОЗУ)
Тест №3 (ОЗУ)

Как видно из результатов теста, Website X5 версия 13 отличается повышенным потреблением оперативной памяти, по сравнению с 12-й. Но стоит отметить, что это зависит от количества доступной в системе памяти. Так как у меня её было много, то программа использовала её для увеличения производительности операций. Возможно, разница в несколько секунд для тестов №1 и 2 незначительна, но стоит учесть, что сокращение времени даже в несколько секунд на каждой из операций приводит к заметному сокращению всего процесса создания сайта.

Самый ощутимый эффект виден на «ресурсоёмких» операциях по изменению размера изображений. Время генерации изображений сократилось более чем на 80%.

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

На сайте производителя заявлены следующие системные требования к Website X5 13.

  • Операционная систем - Windows 7 SP1, 8, 10. Обратите внимание, что Windows XP, Vista и Windows 7 (без SP1) не поддерживаются.
  • .NET Framework - 4.6.1.
  • Оперативная память (ОЗУ) - 2 Гб и больше.
  • Минимальное разрешение экрана - 1024х600 пикселей.

Системные требования к хостингу, на котором будут размещаться сайты.

  • Операционные системы - Windows, Linux, Unix Server.
  • PHP 5.x.
  • Для некоторых возможностей - MySQL.

Адаптивный дизайн

В Website X5 версии 13 улучшены и расширены возможности по созданию адаптивных сайтов. Теперь не нужно создавать отдельно шаблон для мобильных устройств и отдельно для компьютеров\ноутбуков. На втором шаге создания сайта («Шаблон») в Персонализация есть новый раздел Разрешения и адаптивный дизайн (рисунок ниже).

Website X5
Website X5

В этом разделе можно выбрать, какой именно сайт, адаптивный или не адаптивный, Вы хотите создавать. Инструменты этого раздела очень похожи на инструменты вкладки Адаптивный дизайн в 12-й версии. Видео-обзор по работе с этими инструментами можно посмотреть в статье «Обзор WebSite X5 12». Если Вы не знаете, какую ширину выбрать так, чтобы она подходила для большинства экранов, то рекомендую ознакомиться с этим.

Если Вы выбрали вариант Адаптивный сайт (рисунок выше), то в разделе Структура шаблона (рисунок ниже) появится «панель адаптивности» («Responsive Bar»).

Website X5 Evolution 13
Website X5 Evolution 13

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

Website X5 версия 13
Website X5 версия 13

Данный инструмент (рисунок выше) был отдельным «под шагом» Настройка шаблона первого шага создания сайта в 12-й версии программы. Его не только перенесли, но и доработали. Были обновлены пиктограммы верхней панели инструментов и появилась возможность вставки в шапку и подвал сайта различных виджетов и объектов типа Таблица, Текст, Почтовая форма и так далее (рисунок ниже). Теперь все элементы в шапке и подвале сайта добавляются через объекты и виджеты. Это даёт доступ к их редактированию при помощи всех доступных инструментов.

Website Х5 Evolution 13 что нового
Website Х5 Evolution 13 что нового

Например, если ранее можно было вставить логотип в шапку и добавить некоторые эффекты и действие по нажатию на логотип, то теперь доступны все инструменты объекта Изображение (рисунок ниже).

Редактирование изображений в шапке
Редактирование изображений в шапке

Админка сайта

В Website X5 Evolution 13 была усовершенствована административная часть сайта (рисунок ниже). Теперь Вам будет ещё удобнее:

  • Отслеживать активность в блоге.
  • Отслеживать активность в гостевой книге.
  • Управлять заказами Вашего интернет-магазина.
  • Управлять регистрациями на сайте.
  • Получать информацию о диагностике.
Админка сайта
Админка сайта

В Website X5 Professional 13 доступно специальное приложение для iOS и Android для управления сайтами – WebSite X5 Manager. О нём мы поговорим в следующей статье.

Анимация и параллакс

Теперь можно задать один из 26 эффектов анимации (у некоторых есть опции) для любого из объектов на странице. Для этого нажмите правой кнопкой мыши на любой из объектов на странице и выберите Эффекты – Редактировать (рисунок ниже). Или выделите нужный объект и нажмите на инструмент Эффект в верхней панели.

Анимация объектов
Анимация объектов

На 4-м шаге создания сайта «Страницы» в верхней панели инструментов появился новый инструмент Стиль полос. При помощи него (рисунок ниже) можно добавить эффект параллакса на страницу. В качестве подложки можно использовать:

  • Цвет.
  • Градиент.
  • Изображение.
  • Видео.
Стиль полос
Стиль полос

Ориентировочный результат можно наблюдать на рисунке ниже.

Пример параллакса
Пример параллакса

Изменения в интерфейсе

Website X5 версия 13 незначительно отличается порядком следования некоторых шагов процесса создания сайта.

  1. Четвёртый шаг «Расширенные настройки» (в 12-й версии) был перенесён на первый шаг «Настройки» (в 13-й версии).
  2. «Выбор шаблона», «Стиль шаблона» и «Настройки шаблона» из первого шага (в 12-й версии) были перенесены на второй шаг «Шаблон» (в 13-й версии).
  3. Второй шаг «Создание карты» (в 12-й версии) стал третьим и называется «Карта» (в 13-й версии).
  4. Третий шаг «Создание страниц» (в 12-й версии) стал четвёртым и называется «Страницы» (в 13-й версии).

На рисунке ниже слева показаны шаги 12-й версии, а справа – 13-й.

Шаги создания сайта
Шаги создания сайта

Объект «Заголовок»

Программа обзавелась новым объектом – «Заголовок» (рисунок ниже). При помощи которого сможете вставить текст с различными эффектами (на CSS3), выделить этот текст тегами H1-H6 (заголовки 1-6 уровня) и назначить на него различные действия по нажатию. По сути, данный объект предназначен для расширения функциональности, дизайнерских и SEO целей. Замечу, что текст будет текстом, а не изображением, даже если Вы его повернёте, добавите тень и другие эффекты.

Объект «Заголовок»
Объект «Заголовок»

Другие новшества

Помимо вышеперечисленных нововведений есть ещё ряд более мелких. Например, обновлена и дополнена библиотека шаблонов по умолчанию (Шаблон – Выбор – Шаблон по умолчанию).

Появились подсказки при клике на пиктограмму «i» в заголовке окна (рисунок ниже).

Подсказки
Подсказки

Добавлена опция Категория сайта (рисунок ниже), которая полезна в том случае, если захотите отправить заметку о своём веб-сайте в каталог сайтов, сделанных на Website X5.

Категория сайта
Категория сайта

В разделе Рекламное сообщение теперь вместо 17 уже 29 типов рекламных сообщений (анимация), и добавлены некоторые опции по их настройке (рисунок ниже).

Рекламное сообщение
Рекламное сообщение

Были объединены разделы Showbox всплывающего окна и Макет электронной почты в один инструмент – ShowBox, Подсказка и E-mail (он расположен в Шаблон - Персонализация).

Был добавлен новый инструмент Опции прокрутки страницы (рисунок ниже). Он расположен в Шаблон – Персонализация. Теперь Вы сможете добавлять кнопку прокрутки «Вверх», не прибегая к ранее описанным способам. Плюс, в данный раздел были перенесены опции по управлению закреплённым меню сайта и логотипом. Ранее они были в Общие настройки – Стиль шаблона – Структура основного шаблона и в Общие настройки – Стиль шаблона – Структура адаптивного шаблона.

Опции прокрутки страницы
Опции прокрутки страницы

Перенос проекта из 12-й в 13-ю версию

Перенос проекта из Website X5 12 в 13 особо ничем не отличается от перехода с 9 на 10-ю версию. Дополнительно рекомендую ознакомиться с официальной документацией на русском языке.

Видео уроки WebSite X5 13

Так как интерфейс программы изменился несущественно, курс «Видео уроки Website X5. Создание сайта с нуля» актуален и для 13-й версии. Как Evolution так и Professional. В курсе рассмотрены вопросы от «проектирования» до покупки хостинга\домена и выгрузки готового сайта в интернет. Детально рассмотрен процесс создания веб-проекта от простого сайта-визитки до мультиязычного интернет-магазина, адаптированного под мобильные устройства. По этой ссылке Вы сможете найти пример созданного в курсе сайта. Ниже представлен один из уроков.

Перейдите к подробному описанию курса

 

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

В следующей статье «Обзор Incomedia Website X5 Professional 13» мы сравним редакции программы Start, Evolution и Professional, а также поговорим об отличительных изменениях в профессиональной версии программы.

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

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

 

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