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 Ultimate 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.

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

Зараз (17.07.2012) в колекції налічується двадцять чотири категорії шаблонів (близько 181 шаблон).

На відміну від третьої версії в Artisteer 4 немає необхідності на початку створення проекту вибирати, для якої CMS буде створюватися шаблон. Після того як шаблон буде готовий до установки на сайт, Ви просто виберіть CMS і її версію при експорті.

редагування вмісту

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

Переміщення вмісту з Artisteer в Вашу систему керування вмістом - це справа двох кроків.

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

Хочу зазначити, що це дуже корисна функціональна можливість. Кілька разів я звертався до служби технічної підтримки Artisteer з проханням про додавання можливості редагування стандартного тексту шаблону. При створенні шаблону сайту під замовлення кілька разів стикався з проблемою, коли замовник абсолютно не уявляє, до чого цей текст, таблиці і зображення в шаблоні. У всіх версіях Artisteer до 4-ї була одна «стандартна стаття» для будь-якого шаблону (приклад №1 , №2 , №3 , №4 ). Доводилося встановлювати шаблон в «порожню» CMS і заповнювати кілька сторінок потрібним вмістом. В Artisteer 4 теж доведеться створювати сторінку (або скористатися готовими варіантами власного «виробництва» або з колекції шаблонів Artisteer), але можна створити одну - дві тематичні сторінки про телефони (якщо замовник хоче сайт, присвячений телефонам) і використовувати їх для декількох варіантів шаблонів. Так буде набагато простіше Вам і наочніше Вашим замовникам.

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

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

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

Наступна група інструментів Вміст являє підвищений інтерес, оскільки дозволяє змінювати (або створювати) макет вмісту сторінки. На малюнку нижче показані можливі варіанти макета вмісту сторінки.

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

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

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

Крім цього можна задати стиль оформлення (поля, відступи, прогалини, заокруглення, колір обведення) для всіх сторінок, а не тільки поточної (малюнок нижче).

Для зручності, можна відобразити сітку макета сторінки, щоб бачити кордону кожного осередку макета. По суті, макет вмісту - це таблиця, що складається з рядків і стовпців. Для рядків можна задавати заливку, текстуру, обведення, скруглення, міняти поля, прогалини, встановлювати роздільник і так далі (малюнок нижче).

Крім цього можна задати макет конкретної рядки (малюнок нижче).

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

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

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

Наступна група інструментів - Вставка. На ній розташований інструмент вставки посилання (малюнок нижче). За допомогою нього Ви зможете вставити посилання або на сторінку в інтернеті або на сторінку в проекті Artisteer. Можна вказати, як треба відкрити сторінку (в цьому ж вікні, в новому і так далі), можна задати підказку для посилання або вказати, що це посилання на RSS стрічку.

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

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

Вставка таблиці здійснюється за допомогою інструменту Таблиця. Після вставки таблиці на сторінку можна буде додати, видалити і \ або об'єднати, розділити клітинки, поміняти параметри обведення і вирівнювання тексту в них. Крім цього можна буде задати ширину таблиці в пікселях або відсотках.

Інструмент Controls (малюнок нижче) дозволяє вставити такі елементи управління: кнопка, текстове поле, поле пошуку, чек-бокс і радіо кнопка.

Під час налаштування кнопки (малюнок нижче) можна задати посилання на сторінку в проекті шаблону Artisteer або адреса в інтернеті.

За допомогою редактора HTML (малюнок нижче) Ви зможете відредагувати вже існуючий код сторінки або додати власний.

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

Потрібно відзначити, що при створенні ієрархії сторінок ви можете використовувати такі інструменти (малюнок нижче).

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

Команда Повідомлення блогу створить сторінку з уже розміщеними на ній деякими елементами. Наприклад, піктограми друку, збереження сторінки в PDF, мітками (тегами) і так далі. Ці елементи можна відключати (малюнок нижче)

Властивості сторінки (малюнок нижче) розділені на три частини

1. Загальні.
2. Page Tgs.
3. Show in Menu.

У Загальні Ви зможете задати ім'я сторінки і її заголовок. В Page Tgs розташовані поля для введення опису, ключових слів і мета тегів. Show in Menu дозволить Вам вказати в яких меню (горизонтальному і \ або вертикальному) необхідно відображати посилання на дану сторінку.

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

В HTML версії шаблону Ви можете побачити результати роботи деяких з інструментів Artisteer 4.0.0.55648.

Продовжимо розгляд нові та оновлені можливостей Artisteer 4.

Підтримка HTML5 та CSS3

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

шрифти Google

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

Доступ до колекції зображень Flickr

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

Будь ласка, зверніть увагу на те, що зображення, розміщені в Flickr поширюються за ліцензією Creative Commons.

Flickr - це інтернет-сервіс для зберігання і використання цифрових фото і відео.

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

В Artisteer 4 Ви можете створювати персональні альбоми зображень (малюнок нижче). Вони з'являються разом із зображеннями з Flickr.

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

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

Схожі матеріали

Корисні посилання: