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

Видео уроки Website X5. Создание сайта с нуляВидео уроки Website X5. Создание сайта с нуля

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

 

 

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

Новое в WebSite X5 11

Почтовая форма

В статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 5). Создание веб сайтов» уже был рассмотрен объект Почтовая форма. В Incomedia WebSite X5 11 Professional был добавлен новый тип поля – Описание (рисунок ниже). Его можно использовать для вставки произвольного теста. Например, для пояснений. Пример работы с данным объектом можно посмотреть в соответствующем видео уроке.

  • Тэг. Текст, который будет отображаться возле или внутри поля. Его название.
  • Ширина. Ширина поля в процентах.
  • Отображать в той же строке, что и предыдущее поле. Incomedia WebSite X5 11 Evolution (Professional) позволяет отобразить поле в той же строке, что и предыдущее, если оно не первое. Пример показан на тестовом сайте для полей «Тема» и «Ваш e-mail».
  • Текст. Собственно, сам текст, который будет показан на форме.
  • Шрифт. Программа для создания HTML-сайтов, при помощи данных опций, позволяет Вам задать гарнитуру (включая веб-шрифты), кегль и начертание текста описания.
  • Цвет текста. Цвет текста описания.
  • Поля. Отступ от текста описания до окружающих элементов (сверх «стандартного отступа»)
  • Выравнивание. Выравнивание текста описания.

WebSite X5 11

Помимо добавления нового поля было усовершенствовано поле Разделитель (рисунок ниже). Добавлена возможность смены цвета тэга поля и цвета линии.

Разделитель

Пример почтовой формы c новыми полями, сделанной в Incomedia WebSite X5 11 Professional, можно увидеть на тестовом сайте.

Блог и Лента RSS

Для блога, который был рассмотрен ранее в статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 8). Создание WEB-сайтов» можно задавать наперёд время публикаций постов блога (записей) и новостей RSS ленты (объект Лента RSS). Также для галерей блога можно задавать эффекты переходов между изображениями (рисунок ниже).

Incomedia WebSite X5 11 Evolution

Пример записи блога с эффектами для галереи, сделанной в Incomedia WebSite X5 11 Professional, можно увидеть на тестовом сайте.

Теперь Вы можете предоставить своим пользователям комментировать записи в блоге не только при помощи встроенной системы комментариев, но и при помощи интеграции с комментариями Facebook или Disqus (рисунок ниже) (только для Professional версии).

  • Цвет. Программа для создания HTML-сайтов позволяет Вам задать цветовую схему комментариев Facebook. Светлая или тёмная.
  • Видимые сообщения. Количество сообщений, которые будут показаны при загрузке формы комментариев. Остальные будут отображены, если пользователь нажмёт на соответствующую ссылку.

Incomedia WebSite X5 11 Professional

Для интеграции с Disqus необходимо ввести короткое имя Disqus в соответствующее поле (рисунок ниже).

Русская программа создания сайта

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

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

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

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

Пример блога, сделанного в Incomedia WebSite X5 11 Professional, можно увидеть на тестовом сайте. Для тестового сайта я отключил ограниченный доступ.

После всех манипуляций карта сайта примет следующий вид (рисунок ниже).

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

Подробнее об автоматической регистрации пользователей Вы можете прочесть в статье «Обзор WebSite X5 Professional программы для разработки сайтов (часть 2)». Владельцам Incomedia WebSite X5 11 Evolution, возможно, будет интересен урок по созданию не автоматической регистрации.

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

Корзина

Так же, как и для блога, русская программа создания сайта позволяет Вам ограничить доступ к корзине только для конкретных пользователей или групп пользователей. Как это сделать, описано выше. Данная возможность доступна только в Incomedia WebSite X5 11 Professional.

В статье «Обзор WebSite Evolution 10 (часть 9). Создание сайта своими руками» мы рассматривали возможности программы касательно создания товаров. Расширенные возможности были затронуты в статье «Обзор Incomedia WebSite X5 Professional 10 (часть 1). Создание статического сайта». 11-я версия оснащена опциями Действительно до (ошибка русского перевода), позволяющая задать дату начала действия купона, Истекает – дата окончания (рисунок ниже).

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

В 11-й версии, русская программа создания сайта позволяет Вам задать наценку (фиксированную или процент) для того или иного способа оплаты (рисунок ниже). Думаю, что такую возможность ожидали многие владельцы интернет-магазинов на Incomedia WebSite X5.

Наценка за способ оплаты

Объект Каталог товаров (рисунок ниже), который был подробно рассмотрен в статьях «Обзор Incomedia WebSite X5 Evolution 10 (часть 6). Создание интернет-сайтов» и «Обзор Incomedia WebSite X5 Professional 10 (часть 1). Создание статического сайта», оснащён двумя новыми опциями:

  • Добавить продукт без отображения корзины. Если данная опция включена, то при нажатии на значок корзины на странице товаров, товар будет добавлен в корзину, но пользователя не перенаправят на саму страницу с корзиной. Он сможет продолжить покупки.
  • Разрешить переход при нажатии на изображение. Если данная опция включена, в настройках товара на вкладке Общие ничего не выбрано для опции Ссылка (напр., на страницу продукта), и в настройках изображения на вкладке Изображение задано хотя бы одно изображение товара, то ко всем фотографиям в карточке товара будет добавлена ссылка на их увеличенные версии. На тестовом сайте. Для товара «WebSite X5 Evolution 11» по нажатию на изображение задано отображение галереи ShowBox, а для товара «Artisteer» применяется опция Разрешить переход при нажатии на изображение и задано несколько изображений.

Каталог товаров

Статистика, SEO и код

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

Статистика, SEO и код

Часть этих опций уже была рассмотрена в статье «Обзор Incomedia Website X5 Evolution 10 (часть 1). Платный конструктор сайтов». Остановимся на новых.

  • ID для отслеживания в Google Universal Analytics. Достаточно ввести ID сайта своего аккаунта Google Analytics, и с Вашего сайта начнут поступать статистические данные в сервис Google Analytics. Для ознакомления с основными возможностями и преимуществами Universal Analytics рекомендую прочесть статью «Преимущества Universal Analytics».
  • Автоматическое управление тегом заголовка. Доступно в Incomedia WebSite X5 11 Professional. Если на первом шаге создания сайта в стиле шаблона Вы активировали отображение названия страницы, то при помощи опций Автоматическое управление тегом заголовка можно задать, какой тег будет присвоен названию, H1 или H2.

Доступно две опции:

  1. H1 для названия страницы.
  2. H1 для заголовка и H2 для названия страницы.

На тестовом сайте Вы можете видеть пример работы второй опции - H1 для заголовка и H2 для названия страницы.

В качестве названия страницы, в моём примере, выступает слово «Галерея» (рисунок ниже). Оно задаётся в свойствах страницы, на втором шаге создания сайта, в поле Расширенный заголовок. А в качестве заголовка, в моём примере, выступают слова «Галерея - Aleksius.com». Заголовок формируется из названия страницы и названия сайта, заданного на первом шаге в поле Название сайта.

Теги заголовков

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

 

<h1 id="imPgTitle">Галерея</h1>

 

А теперь фрагмент кода, если выбрана опция H1 для заголовка и H2 для названия страницы.

 

<h1 class="imHidden">Галерея - Aleksius.com</h1>

<h2 id="imPgTitle">Галерея</h2>

 

Лично моё мнение: второй вариант немного лучше. Так как Вы можете дать дополнительный сигнал поисковым системам о релевантности Вашей страницы. Конечно, если название страницы и правда отвечает её содержимому.

В 10-й версии программы выбора нет и код формируется так:

 

<h1 class="imHidden">Галерея - Aleksius.com</h1>

 

Вкладка Эксперт, помимо опций, описанных в статье «Обзор Incomedia Website X5 Evolution 10 (часть 1). Платный конструктор сайтов», содержит область Файлы, связанные с HTML-кодом. Работа с данной областью была описана на примере вставки слайдера в статье «Уроки WebSite X5 (часть 2)». Но в 11-й версии программы, эта область, на данной вкладке (рисунок ниже) относится ко всему веб-сайту.

Файлы, связанные с HTML-кодом

HTML-код

Для тех, кто захочет дополнить свой сайт «нестандартными» функциями, программа для создания HTML-сайтов предоставляет изменённый объект HTML-код. В нём появилась нумерация строк, подсветка синтаксиса и автоматическое заполнение HTML-тегов и свойств CSS. Другие возможности данного объекта были рассмотрены в статьях «Уроки WebSite X5 (часть 2)» и «Обзор WebSite Evolution 10 (часть 2). Конструктор сайтов».

Также в свойствах страницы на вкладке Эксперт появилась возможность вставки кода После открытия тега HEAD (рисунок ниже).

Свойства страницы

Виджеты WebSite X5 11

В предыдущей статье «Обзор Incomedia WebSite X5 11 Evolution. Программа для визуального создания сайтов» мы уже затрагивали вопрос новшеств 11-й версии касательно управления объектов и новых виджетов. Давайте рассмотрим некоторые из них, более подробно.

Bookeo. Данный виджет (рисунок ниже) даёт Вам возможность интегрировать на свой сайт страницу сервиса «Bookeo», который позволяет организовать онлайн бронирование билетов на экскурсии, туры и любые другие мероприятия. Чем-то напоминает RSEvents Pro. Сервис поддерживает русский и украинский языки.

Регистрация весьма несложная (рисунок ниже).

Bookeo

После регистрации перейдите на страницу «SETTINGS» и выберите пункт «Web site integration» (рисунок ниже).

Bookeo (2)

В спадающем списке Page location укажите вариант embed a widget in my web site. В поле 2. Input below the address of the webpage where you put the widget введите полный адрес страницы сайта, где будет расположен виджет Bookeo. В моём примере это «http://aleksius.com/images/demonstratsionnye-primery/website-x5-11/bookeo.html» (рисунок ниже).

Интеграция Bookeo с Incomedia WebSite X5 11 Evolution

Затем скопируйте код из поля 1. Insert the following line in the HTML code of a page of your web site. Insert it in the position where you want the widget to appear и вставьте в поле HTML Code в WebSite X5 11 (рисунок ниже).

HTML Code

На тестовом сайте Вы можете видеть пример интеграции Bookeo и программа для создания web-сайтов. Отмечу, что на данный момент (15.10.2014) у меня ещё есть тестовый доступ к сервису. Но скоро он закончится. После этого на странице не будет выводиться форма резервирования.

Jssoor Slider. Как Вы знаете, программа для создания веб-сайтов оснащена собственным объектом для создания галерей, в статье «Уроки WebSite X5 (часть 2)» я приводил пример вставки «стороннего» слайдера при помощи объекта HTML-код. Jssoor Slider – это ещё один инструмент, который позволяет разместить красивую галерею на странице (рисунок ниже).

  • Добавить. Русская программа создания сайта позволяет Вам добавлять изображения следующих форматов: PNG, JPEG, JPG.
  • Удалить. Удаление выбранных изображений из списка.
  • Показать маркеры навигации. Активирует отображение маркеров навигации для переключения между изображениями.
  • Lazy loading. Или отложенная загрузка. При помощи данной опции, программа для создания HTML-сайтов позволяет Вам существенно сократить время загрузки страницы сайта. Это достигается путём загрузки только тех изображений слайдера, которые видны в данную секунду. То есть, если в списке слайдера несколько изображений, то при загрузке страницы на компьютер пользователя будет загружаться только первое изображение. Остальные будут подгружены по мере необходимости (по таймеру или при переключении маркеров навигации). Рекомендую использовать данную опцию.
  • Авто воспроизведение. Запускает показ слайдов при загрузке страницы.
  • Время отображения. Время отображения одного изображения в секундах.
  • Эффект. Визуальный эффект смены слайдов. Можно выбрать один из восьми доступных или выставить случайный.

Jssoor Slider

Пример работы Jssoor Slider можно увидеть на тестовом сайте.

Как видите, в 11-й версии программы для создания web-сайтов появилось достаточно много полезных функций. Особенно радует то, что разработчики двигаются в сторону совершенствования и упрощения самого процесса разработки сайта путём улучшения интерфейса WebSite X5 11.

Видео уроки Website X5. Создание сайта с нуляВидео уроки Website X5. Создание сайта с нуля

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

 

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