Создание шаблона Joomla за 6 шагов. Введение.

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

План

В уроках будут раскрыты следующие вопросы.

• Что из себя представляет шаблон Joomla? Какие функции он выполняет? Какая разница между шаблоном, который не имеет содержания, и шаблоном, который наполнен данными CMS?
• Чем отличается процесс разработки шаблона на локальном компьютере от процесса создания статических HTML страниц? 
• К чему ведет дизайн шаблона без таблиц в Joomla, и какая связь между стандартами W3C, удобством использования и  доступностью интерфейса?
• Какие файлы должны входить в шаблон Joomla и какие функции они выполняют?
• Как создать шаблон из 3-х колонок с помощью CSS, а не табличной структуры?
• Какие основные стили CSS следует использовать в Joomla, и какие стили по умолчанию используются ядром CMS?
• Как размещать и задавать стили для модулей, и как использовать новые техники для скругленных углов?
• Как проще построить меню CSS, которое будет имитировать эффекты меню, сделанного с помощью JavaScript?
• Как управлять выводом и отключением колонок, когда в них отсутствует содержание?
• Какие шаги надо сделать для создания шаблона для Joomla 1.6?

Что такое шаблон Joomla?

Шаблон Joomla - это набор файлов в CMS Joomla, которые управляют представлением данных. Шаблон не является веб сайтом и не рассматривается как завершенный дизайн сайта. Шаблон представляет собой основание дизайна для вывода веб сайта под управлением CMS Joomla. Для достижения эффекта завершенного дизайна шаблон плотно взаимодействует с содержанием сайта, которое хранится в базе данных Joomla.

Стили шаблона созданы так, что при вставке данных, они автоматически наследуют правила оформления, определенные в шаблоне для ссылок, меню, навигации, текста и прочих элементов.

Использование шаблона так, как это организовано в Joomla, имеет ряд преимуществ:

• Joomla выполняет всю работу по размещению содержания на сайте. Вы можете добавить новую информацию просто набрав текст статьи. Шаблон со своими стилями CSS сделает внешний вид соответствующем общему дизайну сайта.
• Содержание и его представление разделены. Особенно четко разделение проявляется при использовании CSS в шаблоне (в противоположность задействованию таблиц в файле index.php). Данный фактор является основным критерием для определения соответствия сайта новейшим стандартам веб разработки. В соответствии со стандартами HTML теги таблиц могут использоваться только для представления табличных данных, но не для разметки структуры страницы в виде колонок.
• Новый шаблон, соответственно, и новый вид веб сайта может быть применен мгновенно. Так могут быть изменены положения модулей и содержания, цвета и графика страниц.

Процесс разработки дизайна на локальном компьютере

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

Весьма распространенной практикой является использование визуальных редакторов для редактирования кода HTML (например, Dreamweaver), что снижает требования к знанию команд HTML. Однако, использование возможностей таких редакторов для создания шаблона Joomla будет весьма ограничено, так как они не выводят динамических страниц.  Придется редактировать код шаблона и его стилей CSS вручную и просматривать результат работы PHP на тестовых страницах, которые надо будет обновлять после внесения изменений. При наличии достаточно быстрого соединения можно использовать удаленный и даже реальный веб сервер. Но большинство дизайнеров использует веб сервер, установленный на локальный компьютер (localhost). Обычно это программное обеспечение, которое генерирует веб страницы, расположенные в специальной папке.

Нет правильного метода создания страниц. Все зависит от разработчика и его пристрастий. Есть те, кто больше расположен к созданию графического "образа" страницы (например, в программе Фотошоп), а затем разбивает его на отдельные изображения, используемые на веб сайте. Другие дизайнеры сразу погружаются в код CSS и начинают генерировать правила для шрифтов, рамок и фонов. Но вы, как разработчик шаблона Joomla, будете ограничены тем фактом, что нельзя сразу увидеть эффект изменений кода в редакторе, поэтому можно рекомендовать следующий процесс разработки:

1. Иметь под рукой запущенный на локальном компьютере сервер с содержанием под управлением Joomla.
2. Редактировать код HTML и CSS в редакторе и сохранять изменения на сервере.
3. Смотреть результат изменений в веб браузере.

Использование сервера на локальном компьютере

Для дальнейших действий в уроках вам понадобится локальный веб сервер. Если вы его еще не установили, самое время разобраться и сделать это. В качестве простых вариантов возможно использовать DENWER или XAMPP. Существует большое количество описаний процесса установки локального сервера.

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

W3C и стандарты

Удобство использования, доступность и оптимизация для поисковых серверов (SEO) - данные термины используются для описания отличных веб страниц. Но в  реальности все три термина очень сильно перекрывают друг друга. И страница, демонстрирующая отменные характеристики по одному пункту обычно хороша и в остальном. Самым простым методом будет использование рабочей среды, удовлетворяющей стандартам W3C. 

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

Чтобы понимать, откуда пришли веб стандарты, следует вспомнить историю. Много страниц разработаны специально для старых браузеров. Почему? Браузеры постоянно развиваются с момента появления WWW. Каждое новое поколение браузеров имеет новые функции, и производители используют для таких функций разные, часто свои собственные, теги. Каждый браузер имеет склонность использовать разный синтаксис, или "диалекты", и собственные реализации для одних и тех же базовых структур HTML.  Новые браузеры появляются, старые сходят со сцены (помните Netscape?).

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

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

Проверить соответствие сайта стандартам W3C можно с помощью специального сервиса validator.w3.org. Это просто и бесплатно. Нужно только правильно установить DOCTYPE. Сайт, который проходит проверку на соответствие W3C, использует семантически верный код HTML и разделение содержание и представления.

Семантически правильный код

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

Следует также использовать семантические имена для различных областей шаблона. Например, при создании двух или трех колоночного шаблона лучше использовать не названия "left" (левый) и "right" (правый), а  "sidebar" или "side". При задании соответствия кода HTML и классов CSS назначение областей будет понятно из названия.

CSS

CSS является простым механизмом для изменения стилей для различных элементов шаблона. В качестве примера можно посмотреть сайт CSS Zen Garden, на котором можно выбрать разные стили отображения одного содержания. 

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

К счастью, команда разработчиков Joomla пересмотрела свой подход. В версии 1.5 появилась возможность изменять вид по своему усмотрению с полноценным использованием CSS.

Анонс

В следующих уроках будет рассмотрен процесс построения шаблона Joomla.

• Комментарии