Artisteer

Уроки Artisteer 4.0 (часть 3). Отзывчивый дизайн

  • Тип – программа для создания шаблонов Joomla, Drupal, Wordpress и других CMS.

 

 

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

В статье будет рассмотрена работа с последней на момент написания материала (26.11.2012) версией Artisteer 4.0.0.58475 (для Windows) и Joomla 2.5.8. Часть из затронутых тем «предложена» посетителями сайта. Часть рассматривалась ранее в комментариях или предыдущих статьях, но теперь оформлена в более структурированном виде и адаптирована под Artisteer 4.0.

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

В статье «Уроки Artisteer 3.1 (часть 1). Почему Artisteer не сохраняет проект» уже был рассмотрен вопрос создания кликабельного логотипа, но для Artisteer 3.1. В Artisteer 4.0 немного по-другому.

Рекомендую сначала создавать шаблон Artisteer с некликабельным логотипом. После того, как Вы будете готовы к установке шаблона на сайт, экспортируйте проект. Вам необходимо скопировать файл логотипа из папки «images» шаблона, например, в папку «templates» на сайте. Это нужно для того, чтобы размер (ширина и высота) файла логотипа совпадал с тем, что Вы сделали в Artisteer.

После этого в самом проекте Artisteer удалите логотип. Создайте в меню Верх. колонтитул при помощи инструмента Форма объект Форма (рисунок ниже).

Урок Artisteer 4.0

Урок Artisteer 4.0 по созданию кликабельного логотипа, по большому счёту, заключается в создании формы, задании ей прозрачности и вставки внутрь определённого HTML кода.

Нажмите правой кнопкой мыши на созданную форму и выберите из контекстного меню пункт Редактировать исходный код HTML (рисунок ниже)

Artisteer

После этого в Artisteer появится окно Редактор HTML (рисунок ниже). Вставьте в него следующий код.

<p><a href="https://aleksius.com/"><img src="/templates/aleksius_com.png" alt="aleksius.com"></a></p>

или

<p><a href="https://aleksius.com/"><img src="/templates/aleksius-com.png" alt="Aleksius.com"></a></p>

Artisteer 4

Artisteer 4 позволяет отредактировать HTML код шаблона (некоторых его элементов) прямо в самой программе.

В фрагменте кода выше «href="https://aleksius.com/"» - ссылка на главную страницу сайта. «src="/templates/aleksius_com.png"» - путь к файлу логотипа (имя файла «aleksius_com.png») от корневой папки сайта. «alt="aleksius.com"» - текст, который будет отображаться в случае, если изображение логотипа не появится. «width="229" height="100"» - ширина и высота изображения логотипа в пикселях. Это не обязательный, но желательный тег.

После этого выделите область и в меню Верх. колонтитул, группа инструментов Править, инструмент Эффекты выберите пункт прозрачность (значение 100%) (рисунок ниже).

Artisteer 4.0

Artisteer 4.0 по умолчанию делает фон для формы. В случае с логотипом это не нужно.

В результате Вы получите изображение, показанное на рисунке ниже.

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

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

Заголовок и девиз сайта

Если Вы используете заголовки и\или девиз сайта для отображения его в шапке сайта (верхнем колонтитуле), то учитывайте, что в Artisteer 4.0 он будет отображаться, а после установки на сайт нет. В самом Artisteer 4 Вы настраиваете то, как эти текстовые блоки будут выглядеть. Их размер, шрифт, цвет, начертание и положение. А после экспорта шаблона и установки его на сайт перейдите в административную панель Joomla (на примере Joomla 3.0.2), перейдите в меню Расширения, выберите пункт Менеджер шаблонов, выберите нужный Вам шаблон и на вкладке Настройки (рисунок ниже) в поля Headline и Slogan введите заголовок Вашего сайта и\или его слоган.

Шаблоны Joomla 2.5 Artisteer

Шаблоны Joomla 2.5 Artisteer настраиваются аналогично.

Если Вам необходимо (абсолютно точно) выровнять заголовок и слоган сайта по правому краю, то после экспорта шаблона откройте файл «index.php», найдите в нём следующий фрагмент кода:

<div class="art-shapes">
<h2 class="art-headline" data-left="ХХ%">
<a href="/<?php echo $document->baseurl; ?>/"><?php echo $this->params->get('siteTitle'); ?></a>
</h2>
<h2 class="art-slogan" data-left="ХХ%"><?php echo $this->params->get('siteSlogan'); ?></h2>

 

Замените числа (проценты) в тегах data-left="ХХ%" на одинаковый для класса art-headline и art-slogan. Например, на 96%. Должно получиться так:

<divclass="art-shapes">
<h2 class="art-headline" data-left="96%">
<a href="/<?php echo $document->baseurl; ?>/"><?php echo $this->params->get('siteTitle'); ?></a>
</h2>
<h2 class="art-slogan" data-left="96%"><?php echo $this->params->get('siteSlogan'); ?></h2> 

 Обратите внимание на то, что в нашем примере заголовок сайта и слоган выравнены по правому краю. Именно поэтому такое большое значение классов art-headline и art-slogan. Имеется в виду, что слоган и заголовок оканчиваются на 96% от левого края шапки сайта (верхнего колонтитула).

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

<div class="art-textblock art-object804371413" data-left="ХХ%">

 

Замените числа (проценты) в тегах data-left="ХХ%" на 4% (в Вашем случае может быть другое число). Получиться следующая конструкция.

<div class="art-textblock art-object804371413" data-left="4%">

 

Это значит, что логотип сайта будет отступать от левого края страницы на 4% (так как в нашем примере шаблон «резиновый»), и слоган и заголовок будут отступать от правого края на 4%.

Обратите Ваше внимание на то, что по умолчанию Artisteer 4.0.0.58475 делает заголовок сайта заголовком первого уровня H1. Это не совсем правильно с точки зрения SEO. Поскольку на странице должен быть только один заголовок верхнего уровня (H1). Если в Вашей статье будет ещё один заголовок первого уровня, то получается, что на странице данное требование не соблюдается.

Изменить это легко. В примерах выше Вы видите, что строка:

<h1 class="art-headline" data-left="96%">

 

была заменена на:

<h2 class="art-headline" data-left="96%">

 

Это можно сделать после экспорта шаблона в файле «index.php». Как автоматически проверить страницу на наличие SEO ошибок и при помощи чего их можно устранить, читайте в статье «Обзор RSseo (часть 2). SEO оптимизация Joomla».

Дополнительную информацию по данному вопросу Вы сможете найти в статье «Уроки Artisteer 4.1 (часть 4). Работа с вертикальным и горизонтальным меню».

Верхнее меню Artisteer 4.0 и отзывчивый дизайн Joomla

В Artisteer 4.0.0.58475 есть возможность создания отзывчивого дизайна. Пример того, как мой сайт выглядит на экране с разрешением 320х480 пикселей, Вы можете видеть ниже (на примере Mozilla Firefox 17.0).

Отзывчивый дизайн

Отзывчивый дизайн или вернее шаблон адаптировался (отозвался) на разрешение окна браузера и переместил все модули в более удобном расположении. Плюс изменил (отмасштабировал) размеры содержимого (рисунки в статьях, таблицы и так далее) по размеру окна браузера. Это очень удобно в связи с ростом количества мобильных устройств. Немного детальнее о работе шаблона Artisteer 4.0.0.58475 с отзывчивым дизайном можно прочесть в статье «Обновление сайта Aleksius.com».

Если у Вас есть меню (верхнее или боковое (вертикальное)) и оно многоуровневое, то стоит подумать над тем, как его будут раскрывать пользователи без мышки. Например, при помощи пальца руки на сенсорном экране.

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

Меню Artisteer

Меню Artisteer (меню Вашего шаблона) настраивается при помощи нескольких опций (рисунок ниже).

Меню Artisteer

Нам нужны опции Responsive Levels (рисунок ниже).

Responsive Levels

Тут всё просто, впрочем, как всё в Artisteer 4.0.

  1. Один уровень. Будет отображаться только один уровень меню. Верхний.
  2. Раскрытие с обновлением. Меню раскрывается при обновлении страницы. Не очень удобно и не всегда срабатывает (из собственного опыта).
  3. Открытые. Будет отображаться раскрытое меню. Это самый удобный, с точки зрения пользователя, вариант. Для случая, когда мы говорим о невозможности использования курсора.

В новой версии программы появилась возможность выбирать, какие элементы верхнего колонтитула будут видны на модильных устройствах, а какие нет. Подробнее об этом в статье «Обзор Artisteer 4.2. Шаблоны Joomla 2.5 – 3.0».

Позиции шаблона Artisteer 4.0 для Joomla

В Artisteer 4.0 были немного изменены позиции шаблона для Joomla (рисунок ниже).

Позиции шаблона Artisteer 4.0 для Joomla

По многочисленным просьбам разработчики добавили позицию «position-30» в шапке сайта (в верхнем колонтитуле). Теперь нет позиции «syndicate» («position-14 syndicate»),в которой можно было отображать значок RSS ленты. Её можно вывести в любой позиции шаблона при помощи модуля HTML-код. Немного детальнее с позициями шаблона Joomla Вы можете ознакомиться в статье «Уроки Artisteer 3.1 (часть 2). Позиции в шаблоне Joomla» и на официальном сайте Artisteer.

Ранее, в Artisteer 3.1, то, что Вы размещали в нижнем колонтитуле, в самом Artisteer переносилось на сайт. Теперь нет. В Joomla Вам необходимо создать модуль HTML-код и разместить его в позиции «position-27».

В статье «Обзор Artisteer 4.1. Шаблоны Joomla 2.5 – 3.0» Вы сможете узнать как создать позицию шаблона в верхнем колонтитуле.

Как убрать границы таблиц в статьях

В статье «Уроки Artisteer 3.1 (часть 2). Позиции в шаблоне Joomla» была затронута тема границ таблицы (в самом содержимом, в статьях). В Artisteer 4.0 и Joomla 2.5.8 – 3.0.2 это остается актуальным. Как, например, сделать одну таблицу на странице с границами, а вторую - без них?

В файле template.css экспортированного шаблона добавьте следующий код:

.noborder th, .noborder td
{
border:none;
}

Для удобства рекомендую внести данный фрагмент в Artisteer (меню Файл, подменю Экспорт, пункт Настройки). На вкладке Параметры CSS внесите в поле Дополнительные CSS стили вышеуказанный фрагмент кода.

Затем перейдите в редактор статей Joomla, откройте нужную статью, найдите ту таблицу, для которой необходимо убрать границу. В её параметрах (рисунок ниже) в поле Класс выберите «noborder». Если этого класса нет, то выберите пункт Значение и впишите класс «noborder» самостоятельно.

Параметры таблицы

Как подтвердить авторство для Google

Те, кто выкладывает на свой сайт авторский (нескопированный и\или изменённый) контент, могут подтвердить своё авторство перед поисковой системой Google при помощи небольшой настройки шаблона и аккаунта в социальной сети Google+. Для чего это надо? Если кратко, то это положительно влияет на позиции страниц Вашего сайта в поисковой системе Google. Она знает, что тот текст, который Вы поместили на своём сайте, является Вашим, а не скопированным. И при прочих равных условиях Ваш сайт будет занимать высшую позицию (позиции) по отношению к тем сайтам, на которых размещена копия Вашей статьи. Плюс, таким образом можно «олицетворить» Ваш сайт. Интернет, по большому счёту, «безлик». Сайты появляются и исчезают постоянно. Большинство из вновь созданных сайтов не выдерживают больше года существования. Подтверждение авторства Google даст возможность не только защитить авторство своего труда, улучшить позиции в поисковой выдаче, но и, возможно, косвенно улучшить поведенческие факторы. Пользователь, который будет запрашивать ту или иную информацию в поисковой системе, увидит не просто ссылку на сайт, а и автора этой статьи (рисунок ниже).

Подтверждение авторства Google

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

Кроме этого, пользователю, которому понравилась Ваша статья, возможно захочется подписаться на обновления новостей с Вашей страницы в социальной сети Google+.

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

Если Вы ещё не зарегистрированы в социальной сети Google+, то зарегистрируйтесь.

Зайдите в свой профиль Google+. В строке браузера найдите ссылку, похожую на «https://plus.google.com/102101364649782322365», где «102101364649782322365» номер Вашей учётной записи в Google+.

Откройте файл «index.php» экспортированного шаблона Artisteer 4.0. Найдите в нём строку:

Designed by <a href="/aleksius.com" target="_blank">ХорошевскийАлексей</a>.</span>

Где «Хорошевский Алексей» имя автора шаблона, которое указано при создании шаблона в его настройках вкладка Описание (рисунок ниже).

Описание

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

Обратная ссылка на автора

Если Вы этого не сделали, то просто добавьте в шаблон, в нижнюю его часть, следующую строку:

Сайт Aleksius.com разработал <ahref="https://plus.google.com/102101364649782322365" rel="author" target="_blank">Хорошевский Алексей</a>.</span>

 

А если сделали, то замените существующую на новую. Где на месте фраз «Сайт Aleksius.com разработал» и «Хорошевский Алексей», естественно, указываете свои нужные данные. В ссылке «https://plus.google.com/102101364649782322365» замените номер «102101364649782322365» на номер своего профиля в Google+.

Далее. У Вас на сайте должна быть страница, на которой указана информация о Вас. Например, у меня это страница «Контакты» (about-site/kontakty), где в нижней части есть фото и указаны имя и фамилия (рисунок ниже).

Контакты

Необходимо дать в социальной сети Google+ (в своём профиле) ссылку на страницу своего сайта с информацией о себе. Для этого в своём профиле Google+ найдите и нажмите на кнопку «Изменить профиль» (рисунок ниже).

Изменить профиль

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

Ссылки

Нажмите на этот раздел. После чего перед Вами появится окно редактирование ссылок (рисунок ниже).

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

Внесите в поле URL-адрес полный адрес, включая протокол (HTTP или HTTPS), страницы Вашего сайта с информацией о Вас. Поле Текст ссылки заполните на своё усмотрение. Сохраните все изменения.

Далее перейдите на вкладку «Все +1», которая находится в верхней части страницы под Вашей аватаркой (рисунок ниже).

Все +1

Вновь нажмите «Изменить профиль». На появившейся странице активируйте опцию Показывать эту вкладку в профиле (рисунок ниже).

Показывать эту вкладку в профиле

Сохраните изменения. Настоятельно рекомендую загрузить в профиль Google+ свою качественную и чёткую фотографию размером 150 на 150 пикселей. Это нужно для отображения Вашего фото рядом со ссылками на Ваши статьи в поисковой выдаче.

Теперь проверяем результат. На странице «Инструмент проверки структурированных данных» в строку www.examle.com вводим адрес той страницы своего сайта, авторство которой Вы хотели подтвердить. В моём случае это ссылка на статью «Обзор Google Site Search» – «http://aleksius.com/joomla/rasshireniya/google-site-search-poisk-po-sajtu-joomla». Если Вы видите что-то похожее на рисунке ниже, то у Вас всё получилось.

Инструмент проверки структурированных данных

Если нет, то проверьте все сделанные шаги. Возможно, стоит подождать. Думаю, не более 1-3 суток.

Как убрать надпись: «Joomla template created with Artisteer by»

При создании шаблона в Artisteer в нижней части шаблона может отображаться строка «Joomla template created with Artisteer by». Убрать её можно двумя способами. Найти в файле «index.php» шаблона строку

<span id="art-footnote-links"><a href="http://www.artisteer.com/" target="_blank">Web Template</a> created with Artisteer by <a href="/aleksius.com" target="_blank">Хорошевский Алексей</a>.</span>

И удалить её. Вместо фрагмента «<a href="/aleksius.com" target="_blank">Хорошевский Алексей</a>.</span>» у Вас будет другой.

И второй способ. В самом Artisteer в меню Файл, подменю Экспорт, пункт Настройка выберите вкладку Сноска и отключите опцию Обратная ссылка на CMS и Artisteer (рисунок ниже).

Обратная ссылка на автора

Lightbox Joomla 2.5

Если у Вас в статье размещено изображение, которое подразумевает возможный его просмотр пользователями в увеличенном виде, то Artisteer 4.0 позволяет это сделать с применением эффекта Lightbox без установки сторонних расширений. Ниже представлен пример Lightbox в Joomla 2.5.8.

Lightbox в Joomla 2.5

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

Что для этого нужно? Вам необходимо в одной папке на сервере создать два файла с почти одинаковым именем. Например, «aleksiuscom.png» и «aleksiuscom-large.png». Где «aleksiuscom» имя файла, а расширение может быть не только PNG. Файл «aleksiuscom.png» меньше по размеру (по ширине и высоте), чем «aleksiuscom-large.png». Он (файл «aleksiuscom.png») будет отображаться в тесте Вашей статьи. А Файл «aleksiuscom-large.png» будет отображаться (с применением эффекта Lightbox) тогда, когда пользователь нажмёт на файл «aleksiuscom.png».

Затем в менеджере статей найдите нужную, в ней найдите картинку, которую надо увеличивать, в примере это «aleksiuscom.png», и для этой картинки в параметрах изображения на вкладке Положение (рисунок ниже), в поле Класс выберите пункт Значение и задайте «art-lightbox» (без кавычек).

Положение

Сохраните статью и проверяйте изменения.

Отмечу, что сейчас на сайте увеличение картинок реализовано так:

<p align="center"><a href="/images/stories/article/artisteer-4/artisteer-4-1/shablony-joomla.png" title="Шаблоны Joomla" onclick="window.open('/images/stories/article/artisteer-4/artisteer-4-1/shablony-joomla-b.png','Шаблоны Joomla','width=899,height=671,left='+(screen.availWidth/2-449.5)+',top='+(screen.availHeight/2-335.5)+'');return false;"><img class="caption" src="/images/stories/article/artisteer-4/artisteer-4-1/shablony-joomla.png" border="0" alt="Шаблоны Joomla" title="Шаблоны Joomla" /></a></p>


где «shablony-joomla.png» – это «миниатюра», а «shablony-joomla-b.png» – её увеличенная версия. После применения Lightbox код будет следующим:

<p align="center"><img class="art-lightbox" src="/images/stories/article/artisteer-4/artisteer-4-1/shablony-joomla-2-5.png" border="0" alt="Шаблоны Joomla 2.5" title="Шаблоны Joomla 2.5" /></p>

но нигде в коде странице нет ссылки на «shablony-joomla-b.png» – увеличенную версию. Хотя всё работает и при нажатии открывается большая картинка «shablony-joomla-b.png». Я поинтересовался у службы технической поддержки веб-мастеров Яндекса по поводц индексации увеличенных версий картинок при реализации Lightbox. Вот ответ:

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

Для SEO, считаю, что это не очень хорошо.

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

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

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

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

 

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