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

 

 

Данная статья написана по принципу вопрос\ответ. В ней рассмотрены вопросы, заданные читателями к статьям «Обзор Artisteer (часть 1, 2, 3)». Также затронуты некоторые из полезных, на мой взгляд, моментов по работе с Artisteer.

Artisteer – программа для создания шаблонов Joomla, Wordpress, Drupal, Blogger, DotNetNuke. Она уникальна в своём роде. Позволяет без знания языков программирования и работы с растровыми редакторами создавать качественные шаблоны сайтов, корректно отображаемые во многих популярных браузерах (Internet Explorer, Firefox, Opera, Safari, Google Chrome). Более детально об этой программе Вы можете прочитать в статьях «Обзор Artisteer 3.1 (часть 1, 2, 3)».

При написании статьи будет использована последняя (на 09.04.2012) стабильная версия Artisteer 3.1.0.48375 Standard Edition для Winows (версия Windows 7 SP1 х64). Все примеры рассмотрены для шаблонов Joomla 2.5.4. Но большинство из них применимы для всех систем управления содержимым.

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

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

Создавая Joomla шаблоны у меня не раз возникала необходимость модификации созданного проекта после его экспорта. Именно по этому решил выложить эти Artisteer уроки.

Добавление шрифтов в Artisteer

Для добавления шрифтов в Artisteer (рисунок ниже) закройте программу, скопируйте необходимые файлы шрифтов в папку с установленным Artisteer. Для Artisteer 2 это Artisteer 2 – Library – Fonts. Для Artisteer 3 это Artisteer 3 - Library – Fonts. Затем запустите программу. Шрифты должны быть доступны для их использования при создании шаблона.

Добавление шрифтов в Artisteer

Примите во внимание тот факт, что для копирования файлов шрифтов (если Artisteer установлен на системный диск Windows) Вам могут понадобиться права доступа уровня администратор.

Также будьте внимательны при использовании «экзотических» шрифтов. Необходимо хорошо знать целевую аудиторию сайта и версию (и семейство) операционной системы, которая установлена у, как минимум, 80% пользователей. Иначе красивый шрифт может стать причиной некорректного отображения сайта (при отсутствии данного шрифта на компьютере пользователя).

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

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

Рассмотрим вопрос того, как сделать, чтобы пользователь переходил на стартовую страницу сайта при нажатии на логотип.

Для этого в уже экспортированном шаблоне найдите файл index.php. В нём найдите строки:

<div class="art-header">

<div class="art-headerobject"></div>

<div class="art-logo">

Замените их на:

<div class="art-header">

<a href="/index.php">

<div class="art-headerobject"></div></a>

<div class="art-logo">

Если Вы меняли CSS префикс art-, то в коде Выше у Вас вместо art- будет свой.

Если Вы не нашли в файле index.php строк:

<div class="art-header">

<div class="art-headerobject"></div>

<div class="art-logo">

То вместо них могут быть следующие:

<div class="art-header">

<div class="art-header-position">

<div class="art-header-wrapper">

<div class="cleared reset-box"></div>

<div class="art-header-inner">

<div class="art-headerobject"></div>

<div class="art-logo">

Замените их на:

<div class="art-header">

<a href="/index.php">

<div class="art-header-position">

<div class="art-header-wrapper">

<div class="cleared reset-box"></div>

<div class="art-header-inner">

<div class="art-headerobject"></div></a>

<div class="art-logo">

Index.php в строке <a href="/index.php"> указывает на то, что необходимо перейти на стартовую страницу сайта. Можно сделать переход на любой адрес. Просто впишите нужный адрес страницы.

Для тех, у кого на сайте предусмотрена мультиязычность и каждому языку соответствует свой шаблон, рекомендую указывать для каждого шаблона отдельно не index.php в качестве страницы перенаправления, а задать адрес страницы сайта полностью с учётом языка. Например, «http://aleksius.com/ru/».

Как создать кликабельный логотип в Artisteer 4.0 можно прочесть в статье «Уроки Artisteer 4.0 (часть 3). Отзывчивый дизайн».

Очистка кода шаблона от признаков Artisteer

В статье «Защита Joomla (часть 9). Убираем следы Joomla 1.5, 1.7» была затронута тема скрытия следов того, что сайт сделан на Joomla (это актуально для любой системы управления содержимым). Выяснив, что шаблон сайта сделан при помощи Artisteer, злоумышленник может сузить круг рассматриваемых систем управления содержимым до четырёх: Joomla, Wordpress, Drupal, DotNetNuke. Это облегчит ему задачу взлома Вашего сайта.

Безусловно, изменить до неузнаваемости файлы шаблона Artisteer – длительный процесс. Но убрать комментарий «Created by Artisteer v3.1.0.48375» считаю не лишним.

Для этого в папке с экспортированным шаблоном (не в архиве) просто запустите поиск по содержимому с критерием «Artisteer». Это можно сделать, например, при помощи Total Commander или при помощи стандартного поиска Windows (по содержимому). Но при помощи Total Commander результат лучше.

На примере шаблона Artisteer 3.1.0.48375 для Joomla 2.5.4 рассмотрим список файлов, в которых содержится комментарий Artisteer.

  1. editor.css
  2. params.ini
  3. print.css
  4. readme.txt
  5. script.js
  6. template.css
  7. template.ie6.css
  8. templatedetails.xml
  9. functions.php
  10. index.php

В этих файлах необходимо убрать комментарии Created by Artisteer v3.1.0.48375, Deprecated since Artisteer 3.0, Decorate component with Artisteer style и так далее. В каждом файле отдельно необходимо произвести поиск с искомой фразой «Artisteer».

Отступ для «хлебных крошек»

В Joomla есть модуль «Навигатор сайта» («Хлебные крошки»). Это один из элементов, позволяющий упростить навигацию пользователям по Вашему сайту и улучшает внутреннюю перелинковку страниц. Что немного улучшает SEO показатели Joomla сайта.

Если разместить модуль в позиции «position-15» (или в позиции «banner-1» для Joomla 1.5), то надписи (путь) будут расположены слишком близко к левому краю (рисунок ниже).

Хлебные крошки

Чтобы этого избежать в настройках экспорта шаблона в Artisteer в разделе Параметры CSS (рисунок ниже), введите следующий код:

.breadcrumbs

{

margin: 10px;

}

Где значение 10px - это отступ от края страницы до надписи. Его можно увеличить или уменьшить.

Параметры CSS

В результате модуль будет смотреться немного красивее (рисунок ниже).

Отступ для Хлебных крошек

 

Иконки меню. Сервисы поиска иконок

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

Параметры отображения ссылки

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

Меню с иконками

Для поиска иконок существуют специальные сервисы, например:

  1. findicons.com
  2. iconarchive.com
  3. iconfinder.com
  4. icongal.com
  5. iconsearch.ru
  6. iconseeker.com
  7. veryicon.com

Это по сути поисковые системы по каталогу картинок. На рисунке ниже приведён пример результата поиска по запросу «computer» на сайте Icon archive.

Icon archive

Все вышеперечисленные сервисы обладают схожими функциональными возможностями. Можно задать фильтр по цвету фона, размеру изображения (от 16 до 512 пикселей), по цвету изображения, выбрать тип лицензии, по которой предоставляется изображение (платная и бесплатная) и так далее. На 09.04.2012 в Icon archive доступно 333624 изображений распределённых по 44 категориям. Есть возможность загрузки одной и той же иконки в различных размерах и форматах (PNG, ICO, ICNS).

Artisteer не сохраняет проект

Несколько раз мне был задан один и тот же вопрос от разных пользователей: «Artisteer не сохраняет. Что делать?», «Что мне делать?! Artisteer 3.1 не сохраняет!», «Почему Artisteer не сохраняет проект». В интернете, по статистике запросов от Яндекс, очень популярными (касающееся Artisteer) являются запросы «Artisteer 3.1 не сохраняет» и «Artisteer не сохраняет».

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

  1. На официальном сайте Artisteer проверьте, чтобы у Вас была установлена последняя, стабильная, лицензионная версия Artisteer.
  2. На официальном сайте Artisteer проверьте, чтобы Ваш компьютер и установленное на нём программное обеспечение соответствовало минимальным системным требованиям, заявленным производителем.
  3. Проверьте, чтобы директория, в которую Вы пытаетесь сохранить проект, была доступна для записи.
  4. Если всё вышеперечисленное не помогло, то обратитесь в службу технической поддержки Artisteer. Она доступна на русском языке.

В большинстве случаев, с которыми мне доводилось сталкиваться Artisteer 3.1 не сохраняет проекты, вернее Artisteer не сохраняет изменения, которые вносятся в проекты, именно по тому, что он не лицензионный.

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

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

 

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