Artisteer

Обзор Artisteer 4 (часть 1). Программа для создания шаблонов Joomla

  • Тип – программа для создания шаблонов сайтов Joomla, Wordpress, Blogger, Drupal, DotNetNuke.

 

 

Artisteer – это программа для создания шаблонов сайтов популярных систем управления содержимым (CMS), таких как Joomla, Wordpress, Blogger, Drupal, DotNetNuke. В предыдущих циклах статей «Обзор Artisteer (часть 1, 2, 3)», «Обзор Artisteer 3.1 (часть 1, 2, 3)» и «Уроки Artisteer 3.1 (часть 1, 2)» были рассмотрены версии 3 и 3.1. 16 июля 2012 на официальном сайте была опубликована новая версия программы – Artisteer 4.0.0.55648 Beta для Windows. В этой статье будут кратко рассмотрены основные новшества четвёртой версии программы для создания шаблонов Artisteer.

При написании статьи были использованы официальные материалы (перевод с английского) с сайта разработчика. Шаблон будет создаваться для системы управления содержимым Joomla 2.5.6. Программно-аппаратная часть компьютера, на котором производится тестирование:

  • Операционная система Microsoft Windows 7 Максимальная SP1 (сборка 7601), x64.
  • Разрешение экрана 1920х1080.
  • Качество цветопередачи 32 бита.
  • Mozilla Firefox 14.0.1.
  • Adobe Flash Playe 11.3.300.265.
  • Microsoft .NET Framework 4.

Хочу отметить, что на момент написания статьи 17.07.2012 Artisteer 4 поддерживает русский язык интерфейса, но перевод неполный. Скорее всего, это будет исправлено со временем.

К основным новшествам Artisteer 4.0 хочу отнести следующие:

  • Обновлено и расширено редактирование содержимого.
  • Поддержка HTML5 и CSS3.
  • Шрифты Google.
  • Доступ к коллекции изображений Flickr.
  • Персональный альбом изображений
  • Усовершенствованное создание шапки сайта при помощи визуального редактирования.
    • Новый инструмент выделения.
    • Создание коллажей.
    • Маска для текстур.
    • Текстовые блоки.
  • Новые опции для изображений.
    • Стиль всплывающего окна Lightbox.
    • Слайд шоу.
    • Добавлено больше источников изображений.
  • Возможность разметки нижнего колонтитула (подвала).
  • Новые опции стилей.
    • Эффект тени для текста.
    • Новые опции скругления для столбцов и рядов.
  • Возможность редактирования HTML элементов управления.
  • Усовершенствован инструмент выбора цвета.
  • Усовершенствовано меню, создаваемое для сайтов.
    • Границы для заголовков блоков и меню.
  • Режим панели.
  • Немного переработаны инструменты Идеи (Предложения).
  • Общая реорганизация параметров инструментов.
  • Плагин SDK.
  • Поддержка «Изображения и ссылки» для Joomla 2.5.

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

Стартовое окно Artisteer 4

Сейчас (17.07.2012) в коллекции насчитывается двадцать четыре категории шаблонов (около 181 шаблон).

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

Редактирование содержимого

В Artisteer 3.1 Вы могли создавать содержимое страниц только при создании тем для Сайт или блог. В Artisteer 4 Вы можете создавать шаблон и содержимое страницы для любой системы управления содержимым, например, Joomla или WordPress. Более того, Вам не нужно больше выбирать тип шаблона. Просто выберите опцию Include Content при экспорте шаблона (рисунок ниже).

IncludeContent

Перемещение содержимого из Artisteer в Вашу систему управления содержимым – это дело двух шагов.

Данная функциональная возможность не удаляет содержимое из Вашей CMS (например, из Joomla). Но на этапе бета тестирования Artisteer 4 рекомендуется создать полную резервную копию Вашего сайта.

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

При редактировании Вам будет доступна панель инструментов, вкладка Правка (рисунок ниже) чем-то отдалённо напоминающая панель инструментов Microsoft Word.

Вкладка Правка

Привычные инструменты вставки позволят копировать, вставлять и вырезать фрагменты содержимого страницы (текст, списки, изображения). Далее идёт область Стиль и шрифты. В ней Вы можете выбрать один из шести стилей заголовков или стиль абзаца (они, как и раньше настраиваются во вкладке Содержимое (детальнее в статье «Обзор Artisteer (часть 3). Создание Wordpress шаблонов»)), задать шрифт, начертание и размер выделенному фрагменту текста. Помимо этого можно задать эффект тени, изменить цвет шрифта, заливку и создать элемент Цитата.

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

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

Содержимое

Ниже Вы можете видеть пример того, как выглядит статья, созданная средствами Artisteer 4 Beta в шаблоне сайта.

Пример созданной статьи в Artisteer 4 Beta

В Artisteer 4.0.0.55648 предусмотрено создание собственного макета (рисунок ниже) при помощи встроенного редактора макетов.

Создание макета в Artisteer 4.0.0.55648

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

Стиль блоков макета

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

Стиль оформления для всех страниц

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

Стиль строк

Помимо этого можно задать макет конкретной строки (рисунок ниже).

Макет строки

Как и при создании таблицы в Microsoft Word, в Artisteer 4.0 Вы сможете вставить или удалить строки в общую таблицу макета содержимого страницы. При этом Вы сможете сразу вставлять строки с нужным макетом строки (рисунок выше).

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

Стиль ячейки макета

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

Опции настроек

Следующая группа инструментов – Вставка. На ней расположен инструмент вставки ссылки (рисунок ниже). При помощи него Вы сможете вставить ссылку или на страницу в интернете или на страницу в проекте Artisteer. Можно указать, как надо открыть страницу (в этом же окне, в новом и так далее), можно задать подсказку для ссылки или указать, что это ссылка на RSS ленту.

Группа инструментов Вставка

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

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

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

Инструмент Видео

Вставка таблицы осуществляется при помощи инструмента Таблица. После вставки таблицы на страницу можно будет добавить, удалить и\или объединить, разделить ячейки, поменять параметры обводки и выравнивания текста в них. Помимо этого можно будет задать ширину таблицы в пикселях или процентах.

Инструмент Controls (рисунок ниже) позволяет вставить такие элементы управления: кнопка, текстовое поле, поле поиска, чек-бокс и радио кнопка.

Инструмент Controls

При настройке кнопки (рисунок ниже) можно задать ссылку на страницу в проекте шаблона Artisteer или адрес в интернете.

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

При помощи редактора HTML (рисунок ниже) Вы сможете отредактировать уже существующий код страницы или добавить собственный.

Редактор HTML

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

Набор инструментов Слайд шоу

Нужно отметить, что при создании иерархии страниц Вам доступны следующие инструменты (рисунок ниже).

  • Новая страница. Создаёт новую страницу.
  • Новая дочерняя страница. Создаёт дочернюю страницу для выбранной страницы.
  • Новое сообщение блога.
  • Правка.
  • Переименовать.
  • Удалить.
  • Использовать под блог. Трансформирует выбранную Вами страницу в сообщение блога. О том, как создать блог на Joomla Вы можете прочитать в статье «Обзор RSBlog (часть 1, 2, 3)».
  • Скрыть заголовок статьи.
  • Свойства.

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

Команда Сообщение блога создаст страницу с уже размещёнными на ней некоторыми элементами. Например, пиктограммы печати, сохранения страницы в PDF, метками (тегами) и так далее. Эти элементы можно отключать (рисунок ниже)

Команда Сообщение блога

Свойства страницы (рисунок ниже) разделены на три части

  1. Общие.
  2. Page Tgs.
  3. Show in Menu.

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

В Общие Вы сможете задать имя страницы и её заголовок. В PageTgs расположены поля для ввода описания, ключевых слов и мета тегов. Show in Menu позволит Вам указать в каких меню (горизонтальном и\или вертикальном) необходимо отображать ссылку на данную страницу.

Некоторые из вышеперечисленных инструментов были доступны и в версиях 3, но, повторюсь, только при создании шаблона тип Сайт или блог.

Продолжим рассмотрение новых и обновлённых возможностей Artisteer 4.

Поддержка HTML5 и CSS3

Теперь Artisteer поддерживает самые прогрессивные и новые стандарты для более гибкого создания шаблонов, отвечающих последним требованиям вёрстки (HTML 5 и CSS3). Вы можете внести в шаблон свой собственный код, например, анимацию, непосредственно при помощи Artisteer 4. Это даёт дополнительные возможности для создания шаблонов, а так же делает Ваш сайт не только более красивым и функциональным, но и обеспечивает более долгий срок совместимости с новыми версиями браузеров, так как рано или поздно поддержка устаревших технологий прекращается.

Шрифты Google

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

Шрифты Google

Доступ к коллекции изображений Flickr

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

Пожалуйста, обратите внимание на то, что изображения, размещённые в Flickr распространяются по лицензии Creative Commons.

Flickr – это интернет-сервис для хранения и использования цифровых фото и видео.

Доступ к коллекции изображений Flickr

Персональный альбом изображений

В Artisteer 4 Вы можете создавать персональные альбомы изображений (рисунок ниже). Они появляются вместе с изображениями с Flickr.

Персональный альбом изображений

Для работы с альбомами в боковой панели Choose content image нажмите на All и в появившемся контекстном меню выберите или уже существующий альбом или создайте новый (рисунок ниже). Тут же Вы сможете сортировать найденные во Flickr результаты по релевантности, популярности или дате добавления. Вы также можете включать в альбомы отдельные изображения с компьютера или целые папки с изображениями.

Создание нового альбома

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

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

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

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

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

 

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