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

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

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

 

 

В предыдущей статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 4). Самостоятельное создание сайта» мы начали рассмотрение объектов, которые превратят создание веб сайтов в приятный процесс. В этой части мы продолжим рассмотрение объектов. Начнём с Видео и аудио.

Объекты

Видео и аудио

В статье «Обзор Incomedia WebSite X5 10 Free (часть 4). Бесплатный конструктор сайтов» была рассмотрена часть возможностей данного объекта. Вкладка Общие (рисунок ниже) полностью совпадет.

Создание веб сайтов

Создание веб сайтов не заканчиваете у Вас на компьютере. Стоит подумать и про поисковые системы. Именно для этого служит вкладка Карта сайта (рисунок ниже). Особенности добавления карты сайта в поисковые системы мы затрагивали в статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 3). Создание сайтов».

Конструктор для создания сайта

Конструктор для создания сайта Incomedia WebSite X5 Evolution 10 позволяет добавить Ваше видео в карту сайта. Для этого необходимо активировать опцию Добавить видео к карте сайта.

  • Поля Заголовок (до 100 символов) и Заголовок (Описание) (2048 символов максимум) аналогичны полям, рассмотренным в статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 4). Самостоятельное создание сайта».
  • Категория – категория, к которой относится Ваше видео. Можно задавать только одну категорию, длина названия категории не должна превышать 256 символов.  Рекомендую указывать одну из категорий сайта YouTube.
  • Ключевые слова сайта – ключевые слова, которые описывают Ваше видео (как теги). Максимум 32 ключевых слова.
  • Картинка для предпросмотра видео – статическое растровое изображение в формате JPG, PNG или GIF (минимальный размер 120 х 90 пикселей), которое используется вместо видео, когда пользователь ещё его не запустил.
  • Дата публикации. Дата публикации Вашего видео.
  • Длительность (сек.). Длительность видео в секундах. От 0 до 28800 секунд (8 часов).
  • Контент, подходящий всем. Включив данную опцию, Вы подтверждаете, что видео могут просматривать дети.

Рекомендую заполнять все поля и предоставлять правдивую информацию.

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

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

Incomedia WebSite X5 Evolution 10

Incomedia WebSite X5 Evolution 10 позволяет отправлять полученные данные на почту или хранить их в базе данных. Об инструментах, которые позволяют хранить данные в базе данных, мы поговорим в статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 8). Создание WEB сайтов».

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

Website X5

Website X5 предлагает тринадцать типов полей. Для каждого типа поля есть свои параметры. Некоторые из них повторяются. Рассмотрим разные поля более детально. Если настройки одного поля похожи на настройки другого, то эти опции повторно описаны не будут.

Текстовое поле. Поле, в которое пользователь может ввести произвольный текст. Содержит следующие опции.

  • Тэг. Название поля. Отображается возле него.
  • Ширина. Ширина поля в процентах от общей ширины объекта Почтовая форма.
  • Отображать в той же строке, что и предыдущее поле. Если опция включена, то это поле будет расположено в той же строке, что и предыдущее поле.
  • Установить как обязательное поле. Если опция включена, то пользователь не сможет отправить письмо, не указав данные в этом поле.
  • Максимальное количество символов. Ограничение на количество максимально вводимых в поле символов.
  • Фильтр для вводимого текста. Вы можете задать ограничение на содержимое, которое будет вводиться в поле. Доступно: Нет ограничений (буквы и цифры), Только цифры, Телефон факс (цифры и символы ‘-’ и ‘ ’), Дата (цифры и символы ‘/’ и ‘.’).

На вкладке Параметры (рисунок ниже) Вы можете задать дополнительные настройки поля. Эта вкладка одинакова почти для всех типов полей.

Website Evolution

Website Evolution позволяет добавить описание к полю (опция Описание поля).

  • Атрибут <name>. Можно задать имя атрибута поля. Оно будет присвоено при генерации HTML кода (самого сайта). Эта опция может Вам понадобиться при возникновении ошибки с отправкой писем с сайта. Без необходимости не стоит менять значение этого поля.
  • Поле с именем базы данных. Вы можете присвоить специальное имя полю, для того, чтобы данные формы корректно заносились в базу данных. Без необходимости не стоит менять значение этого поля.

Тип поля – Адрес электронной почты (рисунок ниже).

Website X5 Evolution

Website X5 Evolution позволяет выводить поле, в которое пользователь сможет ввести свой адрес электронной почты для обратного ответа. Опция Запрашивать подтверждение адреса электронной почты выведет второе поле для ввода адреса электронной почты. Пользователь должен ввести два одинаковых адреса в оба поля. Если адреса не совпадают, то он не сможет отправить письмо.

Тип поля – Текстовая область (рисунок ниже).

Incomedia

Incomedia позволяет выводить область, в которой пользователь сможет вводить текст. Количество строк – по сути, высота текстовой области в строках.

Тип поля – Дата (рисунок ниже).

Дата

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

  1. 21/05/2013.
  2. 05/21/2013.
  3. 21-05-2013.
  4. 05-21-2013.
  5. 21.05.2013.
  6. 05.21.2013.
  7. 2013/05/21.
  8. 21 май 2013.
  9. 21 мая 2013.
  10. мая 21 2013.
  11. Вт 21 май 2013.
  12. Вт май 21 2013.
  13. вторник 21 мая 2013.
  14. вторник мая 21 2013.

Тип поля – Раскрывающийся список (рисунок ниже).

Incomedia Website

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

Тип поля – Список (рисунок ниже).

Incomedia Website X5

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

Тип поля – Множественный выбор (рисунок ниже). Аналогичен полю Список, но пользователь может выбрать несколько вариантов и варианты выводятся в виде списка «чек-боксов».

Множественный выбор

Тип поля – Одиночный выбор (рисунок ниже). Аналогичен полю Множественный выбор, но пользователь может выбрать только один вариант и варианты выводятся в виде списка «радиокнопок».

Одиночный выбор

Тип поля – Пароль (рисунок ниже). Можно попробовать организовать форму регистрации на сайте. Но учтите, что это регистрация не «автоматическая», как в случае с CMS, пользователь отошлёт свои регистрационные данные Вам на почту или в базу данных сайта. А Вы при помощи самой программы Incomedia WebSite X5 Evolution 10 добавите нового пользователя с такими учётными данными, обновите сайт и только после этого он сможет войти на сайт как зарегистрированный пользователь. Детальнее мы рассмотрим данный вопрос в статье «Обзор WebSite Evolution 10 (часть 9). Создание сайта своими руками». Доступна опция Требовать подтверждение пароля – она аналогична опции Запрашивать подтверждение адреса электронной почты и выведет второе поле для ввода пароля. Если значения в полях не совпадают, то пользователь не сможет отправить письмо.

Пароль

Тип поля – Приложенный файл (рисунок ниже). Вы можете разрешить пользователям отправлять файлы через форму. В поле Возможные расширения файлов впишите расширения файлов, которые Вы разрешаете прикреплять. Например: zip, rar, png. Ограничения на размер отправляемого файла Вы можете уточнить у Вашего хостинг-провайдера.

Приложенный файл

Тип поля – Контрольный вопрос (рисунок ниже). Данное поле помогает Вам лучше защитить форму от спама. Вы можете задать вопрос, ответ на который знает любой. Если форму использует человек (а не робот), то он введёт ответ и сможет отправить данные. Поле Правильный ответ служит для ввода правильного ответа, чтобы Website Evolution мог сравнивать правильный ответ и ответ пользователя.

Контрольный вопрос

Тип поля – Условия лицензионного соглашения (рисунок ниже). Служит для вывода текста лицензионного соглашения. Полезно, например, когда Вы создаёте форму регистрации.

Условия лицензионного соглашения

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

Вкладка Отправить (рисунок ниже) содержит опции, которые помогут Вам настроить отправку данных.

Отправить

Создание веб сайтов в Incomedia WebSite X5 Evolution 10 предполагает три основных способа отправки данных, которые Вы можете выбрать в спадающем списке Отправка данных:

  1. Отправка данных по e-mail.
  2. Отправка данных в базу данных.
  3. Отправить данные в виде файла.

Рассмотрим опции для настройки каждого типа.

Отправка данных по e-mail. Отправляет все собранные в форме данные на указанный Вами адрес электронной почты.

  • Адрес электронной почты отправителя. В этом спадающем списке Вы можете выбрать адрес, который указал пользователь как свой собственный. Это будет адрес отправителя. Просто выберите нужное поле.
  • Адрес электронной почты получателя. Введите Ваш адрес, на который необходимо отсылать письма с данными из этой формы.
  • Объект. Или тема сообщения. Тема письма. Если у Вас несколько форм, и Вы отправляете их на один почтовый адрес, то для удобства можно для разных форм назначить разную тему письма, а на почте создать правила обработки и, например, помещать письма с разных форм в разные папки на почте. Как создавать правила обработки для Вашей почтовой программы или почтового сервиса, Вы можете узнать в документации к этой программе или сервису.
  • Сообщение. Текст тела письма, который будет добавлен к данным пользователя.
  • Включить собранные данные в формате CSV. К письму будет прикреплён файл в формате CSV. В этом файле будут все указанные пользователем данные. Очень удобно, если Вы затем обрабатываете эти данные при помощи, например, Microsoft Excel. Вся информация уже будет представлена в виде таблицы.
  • Отправить письмо-подтверждение пользователю по e-mail. Активировав данную опцию, пользователь получит копию своего сообщения на указанный им адрес электронной почты.
  • Адрес электронной почты отправителя. Введите адрес почты, с которого пользователь получит копию своего письма.
  • Адрес электронной почты получателя. В этом спадающем списке Вы можете выбрать адрес, который указал пользователь как свой собственный. Это будет адрес получателя. Просто выберите нужное поле.
  • Включить антиспам фильтр ‘Captcha. Активирует вывод капчи для защиты формы от спама.
  • Страница подтверждения после отправки данных. Страница, на которую будет перенаправлен пользователь после того, как его данные будут успешно отправлены.

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

Отправка данных в базу данных. Конструктор для создания сайта позволяет отправлять данные не на почту, а в базу данных. Инструменты Incomedia WebSite X5 Evolution 10, которые помогут в создании базы данных мы рассмотрим в статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 8). Создание WEB сайтов».

Отправка данных в базу данных

  • Имя базы данных. Из спадающего списка Вы выбираете уже созданную базу данных.
  • Имя таблицы. Вы указываете имя таблицы, в которую необходимо помещать собранные данные.
  • Отправить письмо на электронную почту, чтобы уведомить о получении. Активирует отправку уведомлений на e-mail о том, что были получены новые данные.
  • Адрес электронной почты получателя. E-mail адрес на который будет отправлено уведомление о получении новых данных.

Отправить данные в виде файла. Если Вы хотите обрабатывать полученные данные прямо на сервере при помощи своего собственного скрипта (PHP, ASP и так далее) (его Вам нужно написать самостоятельно), то Incomedia WebSite X5 Evolution 10 может сохранять полученную от пользователя информацию в файлах.

Отправить данные в виде файла

На вкладке Стиль (рисунок ниже) собраны опции для настройки внешнего вида таких элементов формы как:

  • Тэги.
  • Поля.
  • Кнопка Отправить и Сброс.
  • Описание поля и проверка.

Стиль

Выбрать, какой именно элемент Вы хотите настраивать, можно в спадающем списке Элемент формы. Некоторые элементы имеют схожие опции. Они не будут описываться повторно, если уже были рассмотрены для другого элемента.

Тэги. Пояснительный текст рядом с полем.

  • Шрифт. Можно менять гарнитуру, кегль и начертание шрифта.
  • Цвет. Цвет текста.
  • Положение. Вы можете задать положение тэга по отношению к полю. Доступно: Отображать заголовки над полями, Отображать заголовки внутри полей, Отображать заголовки полей слева.
  • Ширина (%). Если Вы выбрали для опции Положение значение Отображать заголовки полей слева, то можно задать ширину (в процентах) заголовка поля от общей ширины доступной для объекта Почтовая форма.
  • Выравнивание. Если Вы выбрали для опции Положение значение Отображать заголовки полей слева, то можно задать выравнивание метки поля внутри области, отведённой для неё. Доступно Слева, По центру, Справа.

Выбрав элемент Поля (рисунок ниже) Вы сможете настроить оформление самих полей ввода данных.

Поля

  • Цвет текста. Цвет текста, вводимый в поле.
  • Цвет фона. Цвет фона области поля. Включая прозрачность.
  • Цвет текста при выборе. Вы можете задать цвет текста, когда пользователь поставил курсор в то или иное поле.
  • Цвет фона при выборе. Вы можете задать цвет фона области поля (включая прозрачность), когда пользователь поставил курсор в то или иное поле.
  • Цвет рамки. Можно сменить цвет рамки (включая прозрачность) области поля.
  • Цвет рамки сообщения об ошибке. Если данные в поле не соответствуют ограничениям, которые Вы задали для поля, то оно будет обведено в указанный Вами цвет (включая прозрачность).
  • Закругленные углы. Можно задать скругление углов полей ввода данных. Можно задавать разное значение разным углам.
  • Тень. Активирует отображение эффекта тени внутри поля ввода данных.

Настройки элемента Кнопка ‘Отправить’ и ‘Сброс’ похожи на настройки Поля. Но в качестве фона можно задать изображение в формате JPG, JPEG, PNG или GIF (опция Фоновое изображение). При помощи параметра Отображать кнопку ‘Сброс’ можно включить\отключить вывод кнопки Сброс под формой.

Элемент Описание поля и проверка (рисунок ниже) позволяет Вам настроить вид пиктограммы, которая отображается рядом с полями. Если Вы задавали описание поля, то эта пиктограмма отображается там, где есть описание. Если пользователь неверно ввёл данные, то рядом с этим полем, где введены некорректные данные, тоже будет отображена пиктограмма.

Описание поля и проверка

По умолчанию в Incomedia Web Site X5 Evolution 10 доступно двадцать восемь пиктограмм (рисунок ниже). Плюс, Вы можете загрузить свою в формате JPG, JPEG, PNG или GIF (опция Файл пиктограммы для описания).

Пиктограммы

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

  1. Показывать диалоговое окно браузера. Окно будет оформлено в стиле браузера и операционной системы пользователя.
  2. Показывать внутреннее всплывающее окно. Окно будет оформлено в стиле всплывающего окна.
  3. Показывать подсказку около неверно заполненного поля. Текст будет выведен рядом с полем, которое заполнено неверно (или не заполнено, но является обязательным).

На рисунке ниже показан пример того, как могут выглядеть разные сообщения об ошибках (в порядке следования в списке выше). Операционная система Windows 7 SP1 х64 Максимальная, встроенный в  Incomedia WebSite X5 Evolution 10.0.4.28 браузер.

Примеры подсказки об ошибках

Соц. сеть

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

Сейчас создание веб сайтов без предоставления пользователю возможности поделиться понравившимся содержимым в социальной сети – невообразимо. При помощи Twitter – кнопка ‘Твитнуть’ (рисунок ниже) Вы можете разместить кнопку, при нажатии на которую пользователь отправит заметку о материале на Вашем сайте к себе в ленту социальной сети Twitter.

Twitter – кнопка Твитнуть

  • URL сайта. URL адрес Вашего сайта.
  • Язык. Можно задать язык, на котором должна отображаться кнопка. Доступно девять языков, включая русский.
  • Стиль. Доступно три стиля оформления кнопки: None, Horizontal, Vertical (рисунок ниже). Обратите внимание, что стиль Vertical работает только в сочетании с размером кнопки Маленький.
  • Размеры. Размеры кнопки. Маленький и Большой.
  • Высота. Высота области, отведённой для объекта Соц. сеть.

Twitter – кнопка Твитнуть 2

Twitter – поле учётной записи. Данный социальный объект (рисунок ниже) позволяет разместить на страницах сайта, сделанном в Website Evolution модуль, в котором будет отображаться лента из Вашего Twitter аккаунта. При желании пользователи смогут подписаться на эту ленту. В поле Имя пользователя Вы сможете ввести логин Вашей учётной записи в Twitter.

Twitter – поле учётной записи

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

Twitter – кнопка читать

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

Pinterest – кнопка Читать

Доступно четыре стиля оформления кнопки (рисунок ниже).

Pinterest – кнопка Читать

Pinterest – кнопка ‘Pin It’. Данная кнопка позволяет Вашим посетителям отправить себе на стену ссылку на понравившуюся статью на Вашем сайте. Опция URL изображения позволяет ввести URL адрес картинки, которую пользователи могут разместить рядом с заметкой на своей странице.

Пример работы некоторых элементов объекта Соц. сеть Вы можете посмотреть на тестовом сайте. О том, как расположить кнопки социальных сетей за пределами страницы сайта, а также о том, как получать подробную статистику об использовании этих кнопко посетителями, Вы можете прочесть в статье «Уроки WebSite X5 (часть 2)».

Гостевая книга

Создание веб сайтов в Incomedia Web SiteX5 Evolution 10 интересный процесс. Особенно интересно мнение пользователей о Вашем проекте. Для отслеживания этого вопроса используем объект Гостевая книга (рисунок ниже). Отмечу, что для корректной работы гостевой книги, страница сайта, на которой она расположена, должна иметь расширение PHP. Как это сделать, описано в статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 3). Создание сайтов».

Гостевая книга

Конструктор для создания сайта предоставляет возможность создать страницу, на которой пользователи смогут писать свои комментарии и оставлять голоса.

  • Тип контента. Можно выбрать, что именно пользователи смогут делать в Вашей гостевой книге: Комментарии и голосование, Комментарий, Оценка.
  • Режим просмотра. Для защиты сайта от спама Вы можете сперва моделировать комментарии, а затем их отображать (параметр Отображать комментарии после одобрения администратором) или публиковать их сразу без проверки (параметр Показать новые комментарии сразу).
  • Показывать кнопку ‘Нецензурное’. Вы можете выводить рядом с комментариями кнопку, при нажатии на которую пользователи смогут сообщить о том, что тот или иной комментарий нецензурный.
  • Включить антиспам фильтр ‘Captcha. Для защиты гостевой книги от спама со стороны роботов, Вы можете включить вывод капчи.
  • Тип голосования. Если в поле Тип контента Вы выбрали: Комментарии и голосование или Оценка, то можно конкретизировать, какой «индикатор» оценок (рисунок ниже) следует отображать на сайте. Доступно десять стилей.
  • Подпапка на сервере для сохранения данных. Все комментарии Incomedia WebSite X5 Evolution 10 хранит в файлах на сервере. Вы можете указать папку, в которой будут содержаться файлы с комментариями. Эта папка и файлы в ней должны быть доступны на запись.
  • Отправить по электронной почте уведомление о получении комментариев. После того, как кто-то из посетителей Вашего сайта оставит комментарий, Вам на почту придёт уведомление.
  • Адрес электронной почты получателя. Введите e-mail, на какой необходимо отправить уведомление.
  • Высота. Высота области объекта Гостевая книга.

На тестовом сайте Вы можете увидеть пример работы объекта Гостевая книга.

В конце статьи «Обзор WebSite Evolution 10 (часть 10). Создание сайта HTML» Вы можете скачать файл проекта (*.IWZIP) тестового сайта к данному циклу статей.

Стили индикатора

В новой версии программы появилась возможность хранения информации из гостевой книге в базе данных. Подробнее об этом можно прочесть в статье «Обзор Incomedia WebSite X5 Professional 10 (часть 1). Создание статического сайта».

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

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

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

 

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