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

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

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

 

 

Incomedia WebSite X5 11 – это программа для создания сайтов с большим количеством возможностей. Она предназначена для домашних пользователей, учебных заведений, организаций, веб-студий и всем, кто хочет создать сайт. При помощи WebSite X5 11 можно сделать простой сайт-визитку, одностраничный сайт («лендинг пейдж», от англ. landing page (целевая или посадочная страница)), сайт фирмы, блог и интернет-магазин. Отличительной особенностью сайтов, создаваемых в этой программе, по отношению к CMS, является то, что эти сайты статические. С недавних пор Incomedia WebSite X5 позволяет добавлять динамический контент. Но все преимущества статических сайтов остаются. А за счёт динамического контента уменьшаются недостатки.

На мой взгляд, основным достоинством Incomedia WebSite X5 является простота использования программы. Использую эту программу с версии 5.0.8 (примерно с середины августа 2006). В мае 2011 года начал публиковать статьи об этой программе у себя на сайте. Многие посетителей сайта (в комментариях, личных сообщениях) тоже неоднократно называли основной причиной выбора Incomedia WebSite X5 простоту использования. Безусловно, современные платные и бесплатные CMS, с учётом количества существующих расширений, превосходят возможности WebSite X5. Но сложность создания сайта на базе CMS гораздо сложнее создания аналогичного сайта на WebSite X5. Да и не всегда целесообразно «содержать» CMS (базу данных) для 5-20 страничного сайта.

Incomedia WebSite X5 11 Evolution – это программа для визуального создания сайтов. То есть, Вы пошагово создаёте разные «элементы» сайта (шаблон, страницы) и сразу видите, что будет в итоге.

В обзоре будет участвовать последняя, на момент написания статьи (08.10.2014), русскоязычная версия Incomedia WebSite X5 11.0.0.9 Professional. Она содержит все функции Evolution версии и некоторые дополнительные. Характеристики тестового компьютера:

  • операционная система – Windows 8.1.
  • Разрешение экрана – 1920х1080.

Возможности 11-й версии программы, которые совпадают с 10-й, рассматриваться не будут.

Также рекомендую ознакомиться с новшествами WebSite X5 12.

Системные требования к WebSite X5 11

Заявленные минимальные системные требования к Вашему компьютеру для WebSite X5 11 Evolution и Professional, а также другим версиям программы, весьма скромные:

  • операционная система – Windows XP (SP3), Vista, 7, 8.
  • Оперативная память (ОЗУ) – 1 Гб.
  • Разрешение экрана – 1024х768.
  • Интернет. Для активации программы.
  • Электронная почта. Для активации программы.

Требования к хостингу, на котором будут располагаться сайты:

  • операционная система – Windows, Linux или Unix Server.
  • PHP 5.x, MySQL – для динамического контента и некоторых дополнительных функций.

Отмечу, что начиная с Incomedia WebSite X5 10 программа и справочная система полностью переведены на русский язык. Естественно, Вы можете создавать русскоязычные сайты. Это относится и к 11-й версии программы.

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

Если Вас интересует покупка Incomedia WebSite X5 Evolution 11, то о её особенностях можно прочесть в статье «Тонкости покупки Website X5 Evolution 10» информация актуальна и для 11-й версии.

Совместимость с предыдущими версиями

Переход на Incomedia WebSite X5 Evolution 11 аналогичен переходу с 9-й на 10-ю. Также существует специальное руководство на английском языке от разработчика. Рассмотрим таблицу совместимости, представленную в этом руководстве.

 

С WebSite X5

На WebSite X5 11

Поддержка

10 (любая)

Professional

Да

10 Evolution

Evolution

Да

10 Professional

Evolution

Нет

10 Compact

Evolution

Да

10 Home

Evolution

Да

10 Compact

Compact

Да

9 (любая)

Professional

Да

9 (любая)

Evolution

Да

9 Compact

Compact

Да

 

Новое в WebSite X5 11

Давайте рассмотрим, что нового появилось в программе для создания сайтов Incomedia WebSite X5 11 Professional, по сравнению с 10-й версией. Частично будут использоваться материалы с официального сайта разработчика. Если кратко, претерпел изменения графический интерфейс, была оптимизирована «технология» разработки сайта, усовершенствован «редактор шаблонов», добавлена поддержка шрифтов Google, усовершенствован текстовый редактор, галерея изображений, почтовая форма, добавлена интеграция с комментариями Facebook и Disqus, добавлена возможность ограничения прав доступа к блогу и товарам.

Тем, кто не довольствовался основными инструментами программы для визуального создания сайтов, будет особо приятно увидеть улучшенный HTML-редактор.

SEO-возможности Incomedia WebSite X5 11 также были улучшены. Например, упрощена интеграция с Google Universal Analytics.

Графический интерфейс

На мой взгляд, графический интерфейс программы для создания сайтов стал более лаконичным (рисунок ниже), больше плашек и элементов в стиле Windows 8 (интерфейс Metro).

WebSite X5 11

Incomedia WebSite X5 11 Professional

Incomedia WebSite X5 11 Evolution

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

Программа для создания сайтов

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

WebSite X5 11

А все настройки, которые относятся к SEO-оптимизации сайта и тонкой настройке всех страниц в целом, собраны на четвёртом шаге в разделе Статистика, SEO и код (рисунок ниже).

Программа для визуального создания сайтов

Шаблоны

В Incomedia WebSite X5 11 Evolution (Professional) шаблон является частью проекта, а не сохраняется в виде отдельного файла. Все настройки стилей (меню, всплывающих подсказок, showbox-окон и электронной почты) являются частью шаблона. Всё это призвано упростить экспорт шаблона\проекта.

По заявлению разработчиков, программа для создания сайтов включает 1500 шаблонов (рисунок ниже). Плюс, была добавлена возможность обновления шаблонов с сервера разработчика прямо из окна WebSite X5 11.

Шаблоны WebSite X5 11

В Incomedia WebSite X5 11 Evolution (Professional) можно размещать горизонтальное меню сайта внутри шапки (рисунок ниже). Пример данной функции Вы можете увидеть на тестовом сайте.

Структура шаблона

В данном виде уроке показан пример выбора и редактирования шаблона.

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

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

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

Упрощена возможность добавления различных виджетов, например, переводчик Google, новости Youtube и пр. Более того, теперь можно добавлять виджеты прямо из интерфейса WebSite X5 11 (рисунок ниже).

Виджеты

Для установки виджетов потребуется указать пароль Вашего аккаунта, к которому подключена лицензия на программу, сайта answers.websitex5.com. Виджеты, которые появились в 11-й версии программы, также те, которые не были рассмотрены из предыдущей версии будут описаны в статье «Обзор Incomedia WebSite X5 11 Professional. Программа для создания HTML сайтов».

Стиль вкладок

В статье «Обзор WebSite X5 Professional программа для создания web-сайтов (часть 3)» уже упоминалось о том, что в объектах Текст и Таблица есть возможность создания вкладок. Incomedia WebSite X5 11 Professional есть возможность настройки стилей этих вкладок (рисунок ниже).

Стиль вкладок

  • Режим отображения. Можно отображать вкладки горизонтально (сверху или снизу), вертикально (слева или справа) или сделать слайд-шоу (с возможностью отображения, отображения при наведении курсора мыши или скрытии элементов управления (стрелок перелистывания)).
  • Положение. Положение вкладок.
  • Стиль. Стиль оформления вкладок. Доступно пять стилей с возможностью изменения опций цвета разных элементов вкладки.
  • Шрифт. WebSite X5 11 позволяет задать гарнитуру, кегль и начертание шрифта вкладки. Цвет относится только к названию самой вкладки, а не её содержимому.
  • Размер. Incomedia WebSite X5 11 Professional позволяет задать ширину и высоту (в пикселях) вкладки.
  • Текст. Программа для создания сайтов позволяет Вам задать цвет текста пассивных вкладок (вкладок, на которые пользователь может переключиться).
  • Фон. Программа для визуального создания сайтов позволяет Вам задать цвет фона пассивной вкладки.
  • Цвет рамки. Цвет рамки, вокруг вкладок.
  • Активный текст. Цвет шрифта активной вкладки (той вкладки, на которой сейчас находиться пользователь). Цвет относится только к названию самой вкладки, а не к её содержимому.
  • Активный фон. Цвет фона активной вкладки.
  • Высота кадра. Позволяет задать одинаковую для всех вкладок высоту в пикселях. Если содержимое вкладки больше, по высоте, чем указанное в этой опции значение, у вкладки появится вертикальная прокрутка.
  • Автовоспроизведение [сек]. Если данная опция активирована, можно задать интервал (в секундах) между автоматическим переключением с одной вкладки на другую.
  • Внутреннее поле. Отступ в пикселях от внутреннего края рамки вкладки до содержимого вкладки.
  • Эффект. Визуальный эффект при переключении между вкладками. Доступно 17 эффектов. Также, можно отключить эффекты совсем.

Пример данной функции (вертикальные вкладки слева, стиль 3, высота кадра – 500, эффект 3) Вы можете увидеть на тестовом сайте.

Шрифты Google

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

Шрифты Google

При добавлении шрифта (рисунок ниже) будет доступно два «типа» шрифтов и способов их добавления в проект.

  1. Шрифт Google. Хранится на серверах Google и подгружается на компьютер пользователя, в момент его захода на Ваш сайт.
  2. Веб шрифт. Хранится на сервере Вашего сайта и подгружается на компьютер пользователя, в момент его захода на Ваш сайт.

Добавить веб-шрифт

Для подбора шрифта Google и получения нужного @Import-кода перейдите на сайт сервиса «Шрифты Google». Для возможности написания текста на русском и\или украинском языках, в спадающем списке Skript выберите значение Cyrillic Extended или Cyrillic. Выберите понравившейся шрифт и нажмите иконку Quik-use.

Выбор шрифта Google

На появившейся странице (рисунок ниже) в первой области выберите стили шрифта, которые Вы хотите использовать у себя на сайте. Во второй области укажите символы, которые Вам нужны. Например, для русского, украинского и английского будет достаточно Cyrillic Extended (cyrillic-ext) или Cyrillic (cyrillic), Latin (latin). На третьем шаге переключитесь на вкладку @importи скопируйте код. В моём примере это:

 

@import url(http://fonts.googleapis.com/css?family=Open+Sans&subset=cyrillic);

 

Импорт-код

Этот код надо вставить в поле @Import-код в WebSite X5 11. Обратите Ваше внимание на «измеритель влияния на скорость загрузки сайта», который расположен в правом верхнем углу страницы сервиса «Шрифты Google». Чем больше стилей и символов Вы укажите, тем дольше будет грузиться у пользователей страница Вашего сайта. Скорость загрузки – важный фактор как для SEO, так и для удобства пользования Вашим сайтом.

Например, указав 1 стиль и 1 набор символов «Cyrillic (cyrillic)» «степень влияния на загрузку страницы» составляет «30». Выбрав 10 стилей и 7 наборов символов, показатель увеличился до «1200». Настоятельно рекомендую выбирать только те стили и наборы символов, которые Вам нужны.

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

Если Вы выбрали Веб-шрифт вместо Шрифт Google, достаточно указать файл шрифта (в разных форматах) у Вас на компьютере (рисунок ниже).

Веб-шрифты

Для чего надо указывать файл шрифта в четырёх разных форматах.

  1. TTF – для работы со шрифтом в самой Incomedia WebSite X5 11 Professional.
  2. WOFF – для максимизации корректного отображения шрифта в Internet Explorer, Mozzilla Firefox и Google Chrome.
  3. SVG – для максимизации корректного отображения шрифта в Mozzilla Firefox, Safari, Google Chrome и Opera.
  4. EOT – для максимизации корректного отображения шрифта в Internet Explorer.

Также стоит отметить, что разные браузеры по-разному отображают одни и те же шрифты. От этого может увеличиться ширина слов и «исказиться» вёрстка сайта. Если, например, в Mozilla Firefox меню сайта, сделанное при помощи нестандартных шрифтов занимает 500 пикселей и красиво отображается в одну строку, то в Internet Explorer может занимать 505 пикселей и из-за этого один из пунктов меню будет переходить на вторую строку или выходить за рамки меню. Именно поэтому рекомендую указывать все файлы шрифтов (WOFF, SVG, EOT) для веб-шрифта. Это увеличит кросбраузерность сайта.

Где потом можно указать применение веб-шрифтов или шрифтов Google в проекте сайта? Для этого, например, в объекте Текст, из спадающего списка со шрифтами выберите нужный Вам шрифт (рисунок ниже).

Применение шрифта Google

Текстовый редактор

В текстовом редакторе Incomedia WebSite X5 11 Professional появилось несколько новых инструментов (рисунок ниже).

Текстовый редактор

Теперь возможна вставка изображения не только с локального компьютера, но и с онлайн-библиотеки (рисунок ниже). Портал бесплатных изображений Pixabay.

Онлайн-библиотека

Возможен поиск по ключевым словам (в том числе на русском), поиск по одной из 21-й категории и разделение искомых изображений на фотографии, клипарты и векторные объекты. Отмечу, что вставка изображений с Pixabay доступна не только в объекте Текст, но и в других. Например, в Изображение.

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

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

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

Свойства изображения

В статье «Видео уроки Website X5 Evolution (часть 2). Самостоятельное создание сайта компании» можно увидеть пример работы с этим объектом.

Галерея и Изображение

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

  • Показывать курсор. Активирует отображение «навигатора».
  • Стиль кнопок. Стиль кнопок «навигатора».
  • Выравнивание. Положение «навигатора» по отношению к галерее.

Галерея

Пример данной функции Вы можете увидеть на тестовом сайте.

Во встроенном графическом редакторе изображений, который был рассмотрен ранее в статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 4). Самостоятельное создание сайта», была усовершенствована функция кадрирования изображения (рисунок ниже). Добавлена возможность кадрирования с указанием пропорций. Как произвольных, так и заданных по умолчанию (15 вариантов).

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

В следующей статье «Обзор Incomedia WebSite X5 11 Professional. Программа для создания HTML-сайтов» мы рассмотрим новые возможности, которые относятся к форме электронной почты, разграничениям прав доступа к страницам сайта и поговорим о новых SEO-параметрах.

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

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

 

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