Artisteer

Обзор Artisteer 4.2. Шаблоны Joomla 2.5 – 3.0

  • Тип – программа для создания шаблонов Joomla, WordPress, Drupal и возможностью экспорта ещё в 14 форматов.

 

 

Продолжая цикл статей об Extensoft Artisteer, рассмотрим появившуюся 31 июля 2013 бета-версию Artisteer 4.2. Разработчики программы стараются выпускать около 2-5 обновлений своего продукта в год.

Статья базируется на заметке, опубликованной на официальном сайте Extensoft Artisteer. В обзоре участвует последняя на 06 августа 2013 версия Artisteer 4.2.0.60483 Standard Edition Beta для Windows.

Конфигурация тестового компьютера:

  • Операционная система – Microsoft Windows 8 Профессиональная (сборка 9200), x64.
  • Разрешение экрана 1920х1080.

Новые возможности будут описаны по отношению к предыдущей стабильной версии Artisteer 4.1.0.59861 Standard Edition для Windows.

Новое в Artisteer 4.2

Среди «мелких» нововведений следует отметить следующие:

  • Поддержка тем для сервиса микроблогов Tumblr. Это доступно в Artisteer 4.2 Home и Academic Edition и Artisteer 4.2 Standard Edition.
  • Ссылка на изображениях в верхнем колонтитуле теперь может отображаться на всех слайдах (например, для размещения логотипа на слайде). При условии, что Вы разместили слайд-шоу в шапке сайта.
  • Возможность задать текстуры или изображения для фона листа. Данная опция доступна на вкладке Лист, раздел Текстура или изображение (рисунок ниже).

Редактор шаблонов Joomla

Редактор шаблонов Joomla, по мнению некоторых посетителей сайта Aleksius.com, давно уже нуждался в подобной функциональной возможности. Доступно около 88 текстур, а также можно воспользоваться изображениями из веб-альбома (рисунок ниже), вставить текстуру из файла JPG, JPEG, PNG или GIF.

Веб-альбом - это своего рода хранилище изображений в сети.

Программа для создания шаблонов Joomla

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

Extensoft Artisteer

Extensoft Artisteer позволяет настроить некоторые параметры текстуры (рисунок ниже). Например, Прозрачность и Режим смешивания. Вес цвета и Насыщенность цвета доступны в том случае, если Вы указали в качестве фона произвольное изображение.

  • Возможность дублирования страниц сайта с вложенными страницами (по уровню иерархии). Если Вы создаёте статический сайт или содержимое в самом Artisteer 4.2, то теперь Вы можете копировать, дублировать страницы (рисунок ниже). Это ускорит процесс создания типовых страниц.

Программа Artisteer

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

  • Возможность добавления произвольного HTML кода в секцию <HEAD>. Вкладку Aditional HTML можно найти в меню Файл, подменю Экспорт, пункт Настройки.

Шаблоны Artisteer Joomla

Шаблоны Artisteer Joomla теперь не надо изменять на сайте или в экспортированных файлах, чтобы добавить туда, например, код отслеживания Google Analytics.

  • Поддержка новейшей версии JQuery для обеспечения улучшенной совместимости с модулями Joomla и виджетами WordPress.
  • Мелкие исправления и улучшения в программе для Joomla и WordPress.
  • Теперь можно создавать шаблоны Artisteer Joomla 3.1.

Рассмотрим другие изменения в программе более детально.

Изменения в экспорте шаблонов

Обратите своё внимание на то, что начиная с Artisteer 4.2 для экспорта (не просмотра в браузере) шаблонов (Joomla, WordPress и Drupal) из программы Вам обязательно необходимо подключение к интернету. Так как часть функциональных возможностей программы были вынесены на сторону серверов Extensoft Artisteer. Это связано с чрезмерным ростом незаконного (бесплатного) использования Artisteer (его ворованными копиями). У разработчиков (по их словам) был выбор между тем, чтобы прекратить работу над программой и тем, чтобы продолжить её улучшать, но применить такие меры по отношению процедуры экспорта шаблонов из  Artisteer 4.2.

Хочу отметить, что большой разницы между экспортом шаблона Joomla из Artisteer 4.1 и экспортом шаблона Joomla из Artisteer 4.2 не наблюдается. Все выполняемые раньше действия остались точно такими же.

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

Если у Вас нет подключения к интернету при экспорте шаблона Joomla, WordPress или Drupal, то Вы увидите следующее сообщение об ошибке (рисунок ниже).

Ошибка экспорта

Предварительный просмотр отзывчивого веб-дизайна

Программа Artisteer 4.2 теперь позволяет просматривать шаблоны так, как они приблизительно будут выглядеть на экранах мобильных устройств. Доступно пять режимов.

  1. Desktop (larger 1200px). Экран с шириной больше, чем 1200 пикселей. Это, в основном, настольные ПК, ноутбуки.
  2. Tablet Landscape (980px.. 1199px). Экран с шириной от 980 до 1199 пикселей. Это, в основном, планшеты в пейзажном (горизонтальном) положении.
  3. Tablet Portrait (768px.. 979px). Экран с шириной от 768 до 979 пикселей. Это, в основном, планшеты в портретном (вертикальном) положении.
  4. Phone Landscape (480px.. 767px). Экран с шириной от 480 до 767 пикселей. Это, в основном, смартфоны в пейзажном (горизонтальном) положении.
  5. Phone Portrait (less 480px). Экран с шириной от 768 до 979 пикселей. Это, в основном, телефоны и смартфоны в портретном (вертикальном) положении.

Для просмотра вашего шаблона в одном из этих режимов нажмите на кнопку Responsiv View в правой верхней части окна программы Artisteer 4.2 (рисунок ниже).

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

На рисунке ниже показано окно программы в режиме Desktop (larger 1200px).

Artisteer 4.2

В Artisteer 4.2, наверное для наглядности, отображается для остальных четырёх режимов рамка в виде того или иного мобильного устройства. На рисунке ниже показан режим Tablet Landscape (980px.. 1199px).

Artisteer

В Artisteer нет возможности, как например в Microsoft Office 2013, свернуть панель (ленту) инструментов. Из-за этого картинка с устройством немного обрезана. На рисунке ниже показан вид шаблона в режиме Tablet Portrait (768px.. 979px).

Artisteer 4

Artisteer 4, как видите, обзавёлся полезной функциональной возможностью. До версии 4.2 для просмотра шаблона при разных разрешениях необходимо было пользоваться сторонними программами. На рисунке ниже показан вид шаблона в режиме Phone Landscape (480px.. 767px).

Phone Landscape

На рисунке ниже показан вид шаблона в режиме Phone Portrait (less 480px).

Phone Portrait

Новые настройки отзывчивого веб-дизайна

В статье «Уроки Artisteer 4.0 (часть 3). Отзывчивый дизайн» уже была упомянута возможность создания шаблона с реагирующим веб-дизайном. Обратите Ваше внимание на то, что  программа Artisteer 4.2 обзавелась весьма, на мой взгляд, полезной функциональной возможностью. А именно – указание ширины экрана (в пикселях), меньше которой будет применяться отзывчивый веб-дизайн. Это можно сделать на вкладке Макет в области Макет листа выбрав инструмент Ширина листа, вкладка Макет листа, область Responsive Resolution (рисунок ниже). В спадающем списке Switch Resolution можно выбрать Автоматически или, что более интересно – Custom Size (от 768 до 1500 пикселей).

Настройки листа

Для моего сайта понадобилось, чтобы шаблоны Artisteer Joomla применяли отзывчивый-веб дизайн (если говорить точнее, чтобы применялась определённая таблица стилей) в случае, если сайт просматривают на экране, ширина которого менее 768 пикселей. Это связано с тем, что появилась 3-я колонка, ширина которой должна была варьироваться на 90% всех экранов в рекомендованных рекламной сетью Яндекса (РСЯ) диапазонах. В той колонке (справа) располагаются рекламные блоки РСЯ. Плюс, ширина модулей слева тоже не должна была быть менее определённого значения. Также необходимо было уменьшить длину тестовых строк (символы) в статьях. С настройками по умолчанию нельзя было добиться поставленной задачи. Для этого необходимо было в файле «template.responsive.css» найти и заменить «(max-width: 768px)» на «(max-width: 1215px)» (без кавычек). Теперь это уже не нужно.

Допустим, мы тестируем шаблон в режиме Tablet Landscape (980px.. 1199px), в настройках макета листа зададим следующие параметры:

  • Ширина – 100%.
  • Минимальная ширина – 700 пикселей.
  • Максимальная ширина – 1200 пикселей.
  • Switch Resolution – Автоматически.

Результат представлен на рисунке ниже.

Реагирующий дизайн

А теперь зададим другие настройки.

  • Ширина – 100%.
  • Минимальная ширина – 700 пикселей.
  • Максимальная ширина – 1200 пикселей.
  • Switch Resolution – Custom Size.
  • Custom Size – 1200 пикселей.

Так как ширина экрана 1199 пикселей, а в настройках макета задано применение таблицы стилей отзывчивого-веб дизайна в случае, если ширина менее 1200 пикселей, то мы наблюдаем ситуацию, которая показана на рисунке ниже.

Отзывчивый веб-дизайн

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

Отображение объектов

Например, можно отображать для экранов с шириной более 1200 пикселей картинку с логотипом, но не отображать текстовое название, а для экранов с разрешением менее 1200 пикселей – наоборот. Можно выбирать скрытие или отображение объекта для нескольких режимов. Например, для Tablet Landscape и Phone Portrait.

Верхний колонтитул

Теперь, начиная с версии 4.2, шаблоны Artisteer Joomla, как и других CMS, можно оснастить дополнительными элементами управления в шапке сайта (в верхнем колонтитуле). На вкладке Верх. колонтитул, в области Вставить для инструмента Элементы управления доступны новые объекты. До этого их было меньше. Подробнее можно прочесть в статье «Обзор Artisteer 4.1. Шаблоны Joomla 2.5 – 3.0».

Элементы управления

А именно, была добавлена возможность вставки кнопок социальных сетей для таких сервисов как:

  • Tumblr.
  • Pinterest.
  • Vimeo.
  • Youtube.
  • Linkedin.

Настройки кнопок похожи (рисунок ниже).

Настройки кнопки Linkedin

  • Текст. Надпись, которая появится справа от иконки с социальной сетью.
  • Адрес. Адрес ссылки, на которую пользователь перейдёт, нажав на иконку социальной сети.
  • Назначение. Программа Artisteer позволяет задать, как должна открываться страница с социальной сетью: в отдельном окне (_self), во всплывающем окне (_top), в новой вкладке (_blank), в этой же вкладке (_parent).
  • Подсказка. Программа для создания шаблонов Joomla позволяет задать текст всплывающей подсказки, который будет показан при наведении на иконку социальной сети.

Слайд-шоу в верхнем колонтитуле

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

Слайдшоу панель

В появившейся справа панели слайдов нажмите правой кнопкой мыши на нужный Вам слайд и выберите пункт меню Гиперссылка (рисунок ниже).

Гиперссылка

Добавление ссылки к слайду похоже на создание кнопки социальной сети, которая была рассмотрена выше (рисунок ниже). Разве что при создании ссылки слайда можно выбрать страницу своего сайта (при условии, что Вы создали эти страницы в Extensoft Artisteer 4.2).

Добавление ссылки к слайду

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

Навигатор

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

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

Маркер
Маркер

Есть возможность задать форму (размер) маркера (5х5, 7х7, 10х10, 15х15, 20х20, 25х25), скругление (10%, 20%, 30%, 40%, 50%), отступы между маркерами (0-25 пикселей с шагом в 5 пикселей). Плюс, для каждого из состояний маркера (Активный, Пассивный, Наведённый) можно отдельно задать заливку, цвет и толщину обводки, а также прозрачность и градиент (57 видов). Для градиента можно задать контраст (0-100%).

Слайдер

Для работы со слайдером (слайд-шоу) в Artisteer 4.2 появилась отдельная вкладка на панели инструментов (рисунок ниже).

Слайдер

В ней, как и на всех вкладках программы есть область Идеи, где расположена кнопка Suggest Slider. При нажатии на которую Artisteer сам сгенерирует дизайн слайдера. Инструменты области Слайдшоу описаны выше в данной статье.

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

Фон

Отдельно стоит отметить область инструментов Макет. Нажав на Расположение (рисунок ниже) Вы сможете выбрать где должен располагаться слайдер.

Расположение

Вне листа 3 варианта:

  1. Над верхним колонтитулом.
  2. Под верхним колонтитулом.
  3. Под верхним колонтитулом и вертикальным меню.

Внутри листа (1 вариант).

Кликабельный логотип в Artisteer 4.2

В статьях «Уроки Artisteer 4.0 (часть 3). Отзывчивый дизайн» и «Уроки Artisteer 3.1 (часть 1). Почему Artisteer не сохраняет проект»  были рассмотрены способы создания кликабельного логотипа в Artisteer. Но в версии 4.2 есть более простой способ. Как уже упоминалось выше на вкладке Верх. колонтитул, в области Вставить для инструмента Элементы управления доступны новые объекты. Один из них Imagelink. Его настройки (рисунок ниже) крайне просты.

Кликабельный логотип Artisteer

  • Адрес. Адрес ссылки на которую пользователь перейдёт нажав на логотип. Можно задать ссылку на страницу сайта из списка страниц, которые Вы создали непосредственно в Artisteer.
  • Назначение. Программа Artisteer 4.2 позволяет задать как должна открываться главная страница сайта: в отдельном окне (_self), во всплывающем окне (_top), в новой вкладке (_blank), в этой же вкладке (_parent). Безусловно, можно задать адрес любой страницы, даже, адрес страницы не Вашего сайта. Но, как правило, пользователи ожидают переход на главную страницу текущего сайта в случае, если они нажимают на логотип.
  • Подсказка. Программа для создания шаблонов Joomla позволяет задать текст всплывающей подсказки, который будет показан при наведении на логотип.

Обратите Ваше внимание, что таких изображений Вы можете создать несколько.

Экспорт шаблона Artisteer в разные форматы

В статьях «Обзор Artisteer 4 (часть 2). Создание меню сайта» и «Обзор Extensoft Artisteer 4 (часть 3). Программа для создания шаблонов Joomla» уже затрагивался вопрос плагинов экспорта шаблонов Artisteer в разные «форматы». В Artisteer 4.2, по умолчанию, доступно восемь «форматов» экспорта:

  1. WebsiteorBlog. Версия 1.0. Дата последнего обновления 22 августа 2012. Создание статического HTML сайта с возможностью размещения на бесплатном хостинге Artisteer.net. Хостинг доступен только для клиентов Extensoft Artisteer.
  2. BloggerTemplate. Версия 1.0. Дата последнего обновления 25 июля 2012. Создание темы для блогов, размещённых на популярном сервисе Blogger.com от Google.
  3. Drupal. Версия 1.2. Дата последнего обновления 5 мая 2013. Создание темы для CMS Drupal 5 - 7.
  4. TumblrTheme. Версия 1.0. Создание тем для сервиса микроблогов Tumblr.
  5. WebsiteTemplate. Версия 1.0. Дата последнего обновления 7 июля 2012. Создание статического HTML сайта.
  6. DotNetNukeSkin. Версия 1.1. Дата последнего обновления 5 августа 2013. Создание темы для CMS DotNetNuke 5 - 7.
  7. JoomlaTemplate. Версия 1.2. Дата последнего обновления 29 марта 2013. Создание шаблонов для CMS Joomla 1.5 - 3.1.
  8. WordPressTheme. Версия 1.1. Дата последнего обновления 5 мая 2013. Создание темы для CMS WordPress.

Помимо этого, в магазине Artisteer (рисунко ниже) (который доступен в меню Файл, подменю Экспорт) на 07 августа 2013 доступно ещё двенадцать «форматов»:

  1. WordPress Themplateer Lite. Бесплатный плагин. Версия 1.11. Дата последнего обновления 21 ноября 2012. Создание темы для CMS WordPress с поддержкой SMOF Options Framework.
  2. Modx (Beta). Бесплатный плагин. Версия 0.8. Дата последнего обновления 5 октября 2012. Создание темы для CMS Modx.
  3. MoodleTheme. Бесплатный плагин. Версия 1.3. Дата последнего обновления 27 марта 2013. Создание темы для CMS Moodle.
  4. Visual Studio C# Project. Бесплатный плагин. Версия 1.3. Дата последнего обновления 6 сентября 2012. Создание темы для проекта Microsoft Visual Studio C#.
  5. Visual Studio ASP.NET MVC4. Бесплатный плагин. Версия 1.0. Дата последнего обновления 5 марта 2013. Создание темы для проекта Microsoft Visual Studio 2012 ASP.NET MVC4.
  6. PHPTemplate. Бесплатный плагин. Версия 2.2. Дата последнего обновления 22 июля 2013. Аналогичен плагину WebsiteorBlog. Предназначен для создания HTML сайтов, в которых меню и страницы будут создаваться с использованием PHP.
  7. Weebly. Бесплатный плагин. Версия 1.3. Дата последнего обновления 6 сентября 2012. Создание темы бесплатного on-line конструктора сайтов Weebly.com.
  8. concrete5. Бесплатный плагин. Версия 0.9.6. Дата последнего обновления 13 декабря 2012. Создание темы для CMS concrete5 (5.6.0.2).
  9. Flatnux.
  10. Visual Studio ASP.NET MVC3. Бесплатный плагин. Версия 1.1.1. Дата последнего обновления 28 августа 2012. Создание темы для проекта Microsoft Visual Studio ASP.NET MVC4.
  11. CodeCharge Studio Project. Бесплатный плагин. Версия 1.7. Дата последнего обновления 6 августа 2013. Создание темы для визуального конструктора динамических сайтов CodeCharge Studio на базе операционной системы Windows.
  12. EbayTemplate. Бесплатный плагин. Версия 2.0. Дата последнего обновления 22 июля 2013. Создание темы для eBay (не коммерческих (продающих) страниц).

Магазин

Как видите, в версии 4.2 появилось достаточно много нового и полезного. Шаблоны Artisteer Joomla теперь доступны и для версии CMS 3.1. Отметим, что на данный момент (07 августа 2013) Extensoft Artisteer 4.2 находится на стадии beta-тестирования. Наблюдаются некоторые ошибки при экспорте проекта и возможно внезапное закрытие программы. Потому не рекомендую использование текущей beta-версии 4.2.0.60483 на реальных проектах. Но можно принять участие в тестировании, отправке отзывов и отчётов об ошибках. Это даст возможность разработчикам сделать программу ещё лучше.

Если у Вас возникли вопросы касательно того, как и где можно купить Artisteer, то можете обратиться к статье «Покупка Artisteer».

Похожие материалы
Автор статьи – Хорошевский Алексей

Хорошевский Алексей Примерно с 2008 года и по сегодняшний день создаю сайты «под ключ» на Joomla и WebSite X5. Также занимаюсь их доработкой, SEO-продвижением, контекстной рекламой, защитой от взлома и оптимизацией скорости загрузки сайта.

Кандидат технических наук по специальности «Информационные технологии».

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

 

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