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

 

Эта статья является продолжением «Уроки Artisteer 3.1 (часть 1). Почему Artisteer не сохраняет проект».

Таблица без границ

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

Обводка таблицы

Редактирование таблицы

Чтобы такого не было, советую при создании шаблона на вкладке Содержимое в области Стили и шрифты в инструменте Толщина обводки выбрать Без обводки. Но тогда необходимо будет для всех таблиц на сайте, для которых необходимо отобразить границы таблицы, задать толщину обводки.

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

Для тех, кто делает сайты на Джумла предлагаю ознакомиться со статьёй «Обзор Droptables. Создание прайс листа в Joomla», в которой описано расширение позволяющее сделать красивые и функциональные таблицы без знаний программирования.

Цвета с изображения

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

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

Официальный сайт Joomla

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

Шаблон сайта

Для этого в Artisteer 3.1 на вкладке Цвета и шрифты в области Цвета нажмите кнопку По изображению (рисунок ниже).

По изображению

В появившемся окне (рисунок ниже) нажмите кнопку Из файла.

Из файла

После чего в правой части окна Вам на выбор будет предоставлено 6 вариантов палитр (рисунок ниже).

6 вариантов палитр

Вам нужно просто выбрать более подходящую, просмотреть её и, при необходимости внести корректировки.

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

Результат работы инструмента

Стиль позиции шаблона Artisteer

В шаблоне Artisteer 3 Вам доступно множество позиций (рисунок ниже). Это позиции в шаблоне Joomla, Drupal и так далее.

Позиции шаблона Artisteer

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

Суффикс CSS-класса модуля

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

Стиль модуля

Если Вы меняли CSS префикс «art», при разработке шаблона в Artisteer 3.1, то Вам необходимо указывать свой собственный префикс.

Детальнее о стилях позиции шаблона можно прочесть на официальном сайте Artisteer.

Оптимизация шаблона для ускорения загрузки сайта

Ускорение скорости загрузки сайта является очень важной задачей. Давайте рассмотрим созданный в Artisteer 3 шаблон сайта с точки зрения его размера в мегабайтах. Безусловно, что размер шаблона будет зависеть от количества элементов шаблона, его размеров по ширине, наличия Flash анимации в шапке сайта, количества цветов и градиентов, которые Вы используете, высоты шапки сайта, фонового изображения страницы, бликов и так далее.

Оптимизацию следует производить только после того, как шаблон полностью готов. И в него длительное время не собираются вносить изменения

Для примера, рассмотрим шаблон сайта aleksius.com. После экспорта шаблон сайта занимает 1136 КБ (1 163 264 байт) (в распакованном виде).

Сразу смело можно удалять файлы Joomla.png и powered_by.gif из папки joomla_images (на общую скорость загрузки шаблона эти два файла не влияют). В корне папки шаблона есть два файла: template_preview.png и template_thumbnail.png. Это миниатюра и её увеличенный вариант для предварительного шаблона, которые отображаются в менеджере шаблонов (рисунок ниже).

Менеджер шаблонов

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

Далее рекомендую провести оптимизацию каждого файла изображения самостоятельно при помощи графического редактора. Например, в Adobe Photoshop есть инструмент Сохранить для Web и устройств. В нём вы сможете оптимизировать изображение с одновременным отслеживанием его размера и качества. Не изменяйте формат файла. Обратите особое внимание на изображения с прозрачностью, возможно, их придётся оставить без изменений. Или после оптимизации процент уменьшения размера будет незначительным. Как правило, я варьирую параметрами количества цветов палитры (для PNG-8) и качеством сжатия для (JPEG).

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

Если «дефекты» не найдены, предлагаю загрузить все файлы изображений на один из сервисов:

Эти бесплатные сервисы позволяют оптимизировать изображения автоматически. То есть они сделают то, что Вы делали для каждого изображения отдельно в графическом редакторе.

У PunyPNG есть платная и бесплатная версия. Бесплатная версия не позволяет загружать для оптимизации файлы размером более 150 Кб и не допускает загрузку более 15 файлов одновременно.

Рекомендую сперва оптимизировать всё при помощи графического редактора «вручную», а только потом прибегать к использованию PunyPNG и\или Smush.it. Так можно добиться максимального эффекта.

После всех вышеперечисленных манипуляций с файлами шаблон сайта стал занимать 724 КБ (741 376 байт) (в распакованном виде). На диаграмме ниже видно, что разница до и после оптимизации существенна (36,26%).

Оптимизация шаблона

Разница между 1136 КБ и 724 КБ может показаться несущественной. Но помните, что шаблон сайта загружается на компьютер каждого пользователя в любом случае (если включена загрузка изображений вообще), не смотря на то, какую страницу он будет загружать. Сэкономив 36% на шаблоне, 20-50% - на изображениях в статьях, 5-10% - на файлах, загружаемых с сайта (запаковав их в архив с максимальной степенью сжатия), Вы увеличиваете общую скорость загрузки сайта для каждого пользователя. А это и есть цель оптимизации скорости загрузки сайта.

Создание вертикального меню

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

Вертикальное меню

Детальнее об инструменте Вертикальное меню Вы можете прочесть в предыдущей статье «Обзор Artisteer 3.1 (часть 2). Редактор шаблонов Joomla».

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

Для того, чтобы модуль аккордеон меню появился, зайдите в свойства модуля Вашего бокового меню, перейдите на вкладку Дополнительные параметры и в поле Суффикс CSS-класса модуля впишите «art-vmenu» (рисунок ниже).

Суффикс CSS-класса

Сохраните изменения в модуле и обновите страницу сайта.

Если Вы меняли CSS префикс «art», при разработке шаблона в Artisteer 3.1, то Вам необходимо указывать свой собственный префикс.

Смена расположения кнопки «Подробнее»

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

Кнопки

Если сюда добавляется ещё, например, кнопка Обсудить на форуме и кнопки социальных закладок, то «лесенка» получается высокой и не очень красивой. Как же расположить кнопки рядом? Рассмотрим пример для расположения кнопок Подробнее и Оставить комментарий не вертикально, а горизонтально (рисунок ниже).

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

В браузере Mozilla Firefox (в примере используется версия 11.0) установите расширение Firebug (в примере используется версия 1.9.1). Перейдите на свой сайт с установленным на нём шаблоном. Запустите Firebug и перейдите на вкладку HTML. Там выберите инструмент выделения и подведите курсор к кнопке Подробнее (рисунок ниже). Мы видим, что класс кнопки readmore (class='readmore').

Анализ кода сайта

Аналогичным способом определяем класс кнопки Оставить комментарий (в данном случае это class="write_comment readmore").

Зная это, впишем ниже приведённый код в настройки экспорта шаблона Artisteer в разделе Параметры CSS (рисунок ниже).

.readmore {

display: inline;

}

.write_comment {

float: right;

}

Параметры CSS

Для пользователей Artisteer, которые создают шаблоны для Wordpress существует специальная платная надстройка – The Templateer. Она позволяет, например, сделать кликабельным логотип без правки кода. Детальнее о The Templateer можно прочитать в статье «Обзор Artisteer 3.1 (часть 2). Редактор шаблонов Joomla».

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

 

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