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

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

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

 

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

Объекты

Видео и аудио

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

Incomedia WebSite X5 Free 10

Incomedia WebSite X5 Free 10 поддерживает такие форматы файлов: MP4, OGG, WEBM, FLV, AVI, WMV, MPG, MOV, MP3, WAV, WMA, MID, AIF, M4A.

  • Local Fileon PC. Вы можете указать путь к мультимедийному файлу на Вашем компьютере.
  • Internet file. Путь к видео\аудио файлу в интернете. URL адрес.
  • YouTube/Vimeo Video URL. Путь к видео\аудио файлу на видео хостингах YouTube или Vimeo.
  • Alternative Text. Текст, который будет появляться вместо видео или аудиофайла в том случае, если файл недоступен или у пользователя, просматривающего Ваш сайт, отключена поддержка мультимедиа (или отсутствует нужный плагин).
  • Size. Размер (ширина и высота в пикселях) области плеера.
  • Autoplay. Если данная опция включена, то мультимедийный объект, к которому она применена, будет автоматически проигрываться при загрузке страницы. Не рекомендую её активировать, особенно, если на старнице несколько аудио или видеообъектов.
  • Enable Full Screen view. Добавляет возможность просмотра видео в полноэкранном режиме. На панели управления видео будет добавлена соответствующая кнопка (рисунок ниже). Опция доступна только в случае с файлами, подключёнными локально.
  • Show Control Bar. Включает отображение панели управления воспроизведением мультимедийного объекта.
  • Automatically hide the Control Bar. Если опция Show Control Bar включена, то Вы можете задать автоматическое скрытие панели, активировав опцию Automatically hide the Control Bar. Опция доступна только в случае с файлами, подключёнными локально.
  • Color. Можно задать цвет панели управления. Опция доступна только в случае с файлами, подключёнными локально.

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

Видео объект

О расширенных возможностях данного инструмента Вы сможете прочесть в статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 5). Создание веб сайтов».

Социальная сеть

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

Incomedia WebSite X5

Бесплатный конструктор сайтов Incomedia WebSite X5 Free 9 не позволял такого сделать. Это новый, по отношению к 9-й версии, объект. В Incomedia  WebSite X5 Evolution 8 и 9 это можно было реализовать при помощи объекта HTML и виджеты.

В спадающем списке Social Network доступно восемь элементов.

Самый «универсальный» AddThis – ‘ShareButtons (рисунок выше). О сервисе AddThis Вы можете прочесть немного подробнее в статье «Обзор ValAddThis plugin. Социальные закладки для Joomla». Вам доступно семь стилей для отображения кнопок социальных закладок AddThis.

  1. Stile 1.
  2. Stile 2.
  3. Stile 3.
  4. Stile 4.
  5. Stile 5.
  6. Stile 6.
  7. Stile 7.

На рисунке ниже показан пример отображения стилей социальных закладок в порядке их следования в списке выше. Они отображаются в окне предварительного просмотра (опция Preview) WebSite X5.

WebSite X5

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

Incomedia WebSite X5

Incomedia WebSite X5 в сочетании с AddThis позволят распечатать текущую страницу, отправить письмо о ней на почту друзьям пользователя, добавить в закладки браузера и отправить сообщение о странице в одну из 339 социальных сервисов мира. Количество сервисов (триста тридцать девять) указано на 04.04.2013. Нажав на ссылку More… (339) перед пользователями откроется расширенный список социальных сервисов с возможностью поиска по нему (рисунок ниже).

Incomedia WebSite

В Incomedia WebSite 8 этого очень не хватало.

Поле User name предназначено для ввода уникального «имени» Вашего сайта, которое Вы получили при регистрации в сервисе AddThis. Так Вы сможете получать весьма детальную статистику о том, как пользователи используют социальные закладки на Вашем сайте. Рекомендую зарегистрироваться в сервисе для сбора и анализа подобных статистических данных.

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

FacebookComments Box. Это следующий «социальный объект», который вы можете подключить на страницах своего сайта. Это форма комментариев Facebook (рисунок ниже).

Incomedia

Incomedia сделала заметный шаг в сторону интеграции сайтов, создаваемых при помощи их программы, с социальными сервисами. Даже бесплатный конструктор сайтов обладает минимально необходимым для этого набором опций. Поле Website URL служит для того, чтобы Вы указали адрес Вашего сайта (необходимо для интеграции с Facebook). В спадающем списке Language находится доступный для оформления интерфейса комментариев список языков. Всего их девять (включая английский, немецкий, французский и другие), но русского и украинского нет. В поле Color можно выбрать стиль формы комментариев. Light (рисунок выше) или Dark (рисунок ниже)

WebSite X5 Free

В WebSite X5 Free, при помощи FacebookComments Box пользователи смогут оставлять комментарии не только с использованием своего профиля от социальной сети Facebook, но и профиля Yahoo, AOL, Hotmail.

Visible Posts. Количество последних комментариев, которые будут отображены сразу на странице. Поля Width и Height аналогичны таким же полям, описанным выше в статье. Пример работы данного социального объекта Вы можете увидеть на тестовом сайте. Стиль Lightтестовый сайт, стиль  Dark – (тестовый сайт).

Объект Facebook – ‘LikeBox (рисунок ниже) позволяет добавить блок, в котором отображается список пользователей Facebook, которым понравился Ваш сайт. Также в этом блоке отображаются новости Вашей группы Facebook на страницах WebSite X5 10.

WebSite X5 10

В поле Profile URL вводится адрес Вашей страницы в социальной сети Facebook. Опции Language, Color, Width и Height аналогичны опциям, описанным выше.

  • Show Faces. Если опция Show Stream отключена, а опция Show Faces включена, то вместо списка событий будут показаны фотографии пользователей, которым понравился Ваш сайт (рисунок ниже).
  • Show Stream. Отображает ленту новостей Вашего профиля (рисунок выше).
  • Show Header. Можно убрать заголовок с надписью «Find us on Facebook» (рисунок ниже).

Социальный объект

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

Facebook – ‘LikeButton. Позволяет отображать кнопку «Мне нравится» социальной сети Facebook (рисунок ниже).

Кнопка Мне нравится от Facebook

Параметры Website URL, Show Faces, Width и Height аналогичны параметрам других объектов. В выпадающем меню Color бесплатный конструктор сайтов Incomedia WebSite X5 Free 10 позволяет выбрать одну из двух цветовых схем оформления кнопки. Light (рисунок выше) и Dark (рисунок ниже).

Кнопка Мне нравится от Facebook 2

Спадающий список Font Type позволяет задать один из шести шрифтов для оформления кнопки. Доступны: Arial, Lucida grande, Segoe UI, Tahoma, Trebuchet ms, Verdana. WebSite X5 10 позволяет задать один из трёх стилей кнопки.

  1. Standard.
  2. Button count.
  3. Box count.

На рисунке ниже показаны примеры разных стилей в порядке их следования в списке выше.

Кнопка Мне нравится от Facebook 3

Вместо кнопки «Мне нравится» в спадающем списке Label можно выбрать кнопку «Рекомендовать» (рисунок ниже).

Кнопка Рекомендовать от Facebook 4

Если опция ShowSendButton включена, то рядом с кнопкой «Мне нравится» или  «Рекомендовать» будет показана кнопка Send (рисунок ниже). Кнопка даёт возможность Вашим пользователям, которые зарегистрированы в социальной сети Facebook, пересылать ссылку на страницу Вашего сайта по электронной почте, а также отправить её конкретному другу или группе пользователей в Facebook.

Кнопка Мне нравится от Facebook 5

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

Facebook – ‘SubskribeButton. Позволяет размещать кнопку Follow на странице Вашего сайта (рисунок ниже).

Кнопка Follow от Facebook

Опции аналогичны рассмотренным ранее. Пример работы данного социального объекта Вы можете увидеть на тестовом сайте.

Google Plus – ‘Plus 1’ Button. Добавление кнопки социальной сети Google +. Опции Website URL, Language,Width и Height аналогичны другим объектам, рассмотренным выше.

Кнопка Google+

В Incomedia WebSite X5 Free 10 Вы можете задать один из трёх размеров кнопки (Small, Medium, Big). Поле Style позволяет задать стиль счётчика. Inline (рисунок ниже), Bubble (рисунок выше) и None (без счётчика).

Кнопка Google+ 2

Поле JS Function служит для более тонкой настройки объекта. Для справки можете ознакомиться со статьёй «Кнопка +1». Опции аналогичны рассмотренным ранее. Пример работы данного социального объекта Вы можете увидеть на тестовом сайте.

Google PlusBadge. Можно разместить ссылку на Ваш профиль в социальной сети Google + в виде беджа (рисунок ниже).

Бедйж Google+

Пример работы данного социального объекта Вы можете увидеть на тестовом сайте. Настройки объекта Google PlusBadge аналогичны описанным выше. Google PlusBadge, можно использовать для подтверждения авторства статей в поисковой системе Google. Это может помочь Вам в SEO продвижении сайта. Подробнее об этом можно прочесть в статье «Уроки Artisteer 4.0 (часть 3). Отзывчивый дизайн». Если на Вашем сайте размещено уникальное (не скопированное) содержимое (тесты, фотографии, видео и так далее) рекомендую воспользоваться данной возможностью.

Google PlusIcon. При помощи этого социального объекта Incomedia WebSite X5 Free 10 позволяет разместить на странице сайта красивую кнопку социальной сети Google + со ссылкой на свой профиль.

Иконка Google+

Пример работы данного социального объекта Вы можете увидеть на тестовом сайте. Настройки объекта Google PlusIcon аналогичны описанным выше. В платной версии данный объект обладает большим количеством возможностей об этом Вы можете прочесть в статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 5). Создание веб сайтов».

Карта

Объект Карта (рисунок ниже) позволяет разместить на страницах Вашего сайта карту Google.

Бесплатный конструктор сайтов

Бесплатный конструктор сайтов идёт в сторону интеграции с различными сервисами. И в десятой версии это очень заметно. Опции Language и Size аналогичны подобным опциям в других объектах, которые рассмотрены ранее.

  • Address. В это поле Вы должны ввести начальную, центральную точку карты. Например, «Ukraine, Kharkiv» (без кавычек), поставит в центр карты город Харьков (Kharkiv), страна Украина (Ukraine).
  • Style. Incomedia WebSite X5 Free 10 позволяет Вам выбрать один из трёх стилей карты. Map, Satellite, Terrain. На рисунке ниже показаны стили карт.
  • Zoom Factor. Масштаб. От 1 до 20. 1 – будет показана карта мира, 20 – будет показана улица.
  • Showtip. Если данная опция включена, то на карте возле маркера местоположения будет отображена всплывающая подсказка с описанием места.

Стили карты

Flash анимация

В Incomedia WebSite X5 Free 10 Вы можете украсить Ваш сайт Flash анимацией. Для этого предназначен объект Flash анимация (рисунок ниже).

Flash анимация

В поле Local Fileon PC Вы можете указать путь к файлу в формате SWF. Если в качестве объекта выступает игра, то можно указать её URL адрес в поле Internet file. В поле Player version Вы можете задать версию Flash плеера (7-11), которая необходима для нормального воспроизведения Flash анимации. Если у пользователя, зашедшего на Ваш сайт, установлена не соответствующая версия, то ему будет показано сообщение с указанием необходимости обновить плагин. Остальные опции аналогичны тем, что присутствуют в ранее рассмотренных объектах. В статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 6). Создание интернет сайтов» Вы сможете ознакомиться с дополнительными опциями данного объекта.

Расширенные настройки

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

Четвёртым шагом создания сайта в Incomedia WebSite X5 Free 10 является более «тонкая» настройка стилей различных элементов. В WebSite X5 Free 10 Вам доступно всего два из одиннадцати инструментов расширенной настройки сайта (рисунок ниже).

  1. Главное меню.
  2. Стили и модули.

Чтобы получить доступ к остальным девяти инструментам Вам необходимо, например, купить WebSite X5 Evolution.

Купить WebSite X5 Evolution 10

Стиль главного меню

Настройки данного инструмента (рисунок ниже) позволяют изменить внешний вид главного меню сайта. Они разделены на две вкладки.

  1. General.
  2. Menu Item.

Вкладка 3D Style недоступна в Incomedia WebSite X5 Free 10.

Стиль главного меню

  • Width. Ширина пункта меню в пикселях.
  • Margin. Отступ от названия пункта меню до внешней границы в пикселях.
  • Distance between Buttons. Расстояние по ширине между пунктами меню в пикселях.
  • Enable Auto-scrolling. Позволяет сделать так, чтобы меню всегда отображалось на странице, даже если пользователь прокручивает её вниз. К сожалению, на тестовом сайте в Incomedia WebSite X5 Free 10 не удалось получить результат.
  • Font Type. Вы сможете задать гарнитуру, кегль и начертание шрифта надписей пунктов меню.
  • Alignment. Выравнивание надписи внутри пункта меню.

К сожалению, надписи в меню Incomedia WebSite X5 Free 10 не текстовые. Это изображение. Опция Use Anti-alias text позволяет сделать более гладкими края букв надписей пунктов меню.

Вкладка Menu Item (рисунок ниже) позволяет настроить стиль пункта меню для разных состояний (на меню не наведён курсор мыши или на меню наведён курсор мыши).

Вкладка Menu Item

  • Menu Item. Можно выбрать, для какого состояния Вы хотите изменять опции. Menu Item – Вы меняете настройки для состояния пункта меню, когда на него не наведён курсор мыши, и он не является текущим пунктом меню (меню той страницы, на которой сейчас находится пользователь). Item on mouse over/Current Page – Вы меняете настройки для состояния пункта меню, когда на него наведён курсор мыши, или он является текущим пунктом меню (меню той страницы, на которой сейчас находится пользователь).
  • Background Color. Цвет фона пунктов меню. Возможна прозрачность.
  • Text Color. Цвет шрифта надписей пунктов меню.
  • Border Color. Цвет обводки пунктов меню.
  • Background Image. В качестве фона Вы можете задать изображение формата JPG, JPEG, GIF или PNG. Для удаления изображения нажмите правой кнопкой мыши на поле Background Image и выберите пункт меню Remove.
  • Font Style. Вы можете задать стиль оформления шрифта. Доступно три эффекта: Inset, Raised, Drop Shadow.

Настройки стиля, как для Menu Item так и для Item on mouse over/Current Page, одинаковые. В статье «Обзор Incomedia WebSite X5 Evolution 10 (часть 6). Создание интернет сайтов» Вы сможете ознакомиться с дополнительными опциями данного объекта.

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

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

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

 

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