Файл: книга по джумла.pdf

Руководство для начинающего пользователя Joomla! 2.5

Навигационная колонка [боковая, содержащая меню] и визуально и по порядку вывода содержимого [в коде страницы] может появляться как до основной полосы [слева], так и после нее. Форматирование колонки будет задаваться CSS. Если вы откроете файл «index.php» шаблона «beez_20» или файла созданного на его основе, то в районе 27-й строки увидите следующую переменную и присваиваемое ей значение:

$navposition = $this->params->get('navposition');

Переменной «$navposition» присваивается значение, выбранное на странице настроек

в административной панели. Этим значением может быть: «left» или «center». Значение «left» предполагает размещение навигационной колонки до основной полосы, значение «center» — после нее. Выбор для последнего значения слова «center» [рус.: «центр»] может сбивать с толку, логичнее было бы использовать слово «right» [рус.: «правый»]. Однако, если заданный при помощи CSS макет будет трехполосным, колонка вполне может оказаться центральной.

JAVASCRIPT И WAI ARIA

WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications) — это спецификация организации Web Accessibility Initiative (http://en.wikipedia.org/wiki/Web_Accessibility_Initiative [на англ.]), предназначенная для облегчения использования с каждым днем становящихся все более сложными интерактивных веб-сервисов людьми с ограниченной дееспособностью. Спецификация особенно полезна для проектирования пользовательских интерфейсов и средств представления динамического контента. В основе проектов, на которые нацелена WAI ARIA, —

такие языки и подходы как: JavaScript, Ajax, HTML, CSS.

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

«в фокусе». «Поместить в фокус» в данном случае означает ни что иное, как навести на элемент курсор, чтобы соответствующий контент стал доступен.

В HTML и XHTML «в фокусе» могли быть только такие элементы взаимодействия

с пользователем как ссылки, кнопки, поля ввода. Ситуация изменилась с приходом WAI ARIA

и HTML5.

Скрипты, использованные в Beez, опираются на WAI ARIA, благодаря чему шаблоны пригодны для сайтов, которые посещают люди с ограниченной дееспособностью.

Функциональные метки WAI-ARIA — первый помощник в ориентировании

Функциональные метки WAI-ARIA призваны облегчить ориентирование на странице. Они описывают те или иные области веб-документа и рассказывают о ролях этих областей. Например, роль навигационного блока описывается меткой «navigation» [рус.: «навигация»],

Руководство для начинающего пользователя Joomla! 2.5

роль поисковой панели — «search» [рус.: «поиск»], роль основной полосы — «main» [рус.: «основная»]. Реализация — совсем проста. К тегу добавляется специальный атрибут. Благодаря ему пользователи современных читающих устройств и приложений могут узнать о роли фрагмента в документе.

<div id="main" role="main">

В «Beez» роли добавляются при помощи сценария на JavaScript, расположенного в файле по адресу корневая_папка_joomla/templates/папка_шаблона/javascript/hide.js. Пока спецификация WAI-ARIA не утверждена, для прохождения шаблоном проверки на соответствие стандартам вышеупомянутые атрибуты в коде страниц не выводятся. В дальнейшем, если вы будете создавать свой шаблон на основе «Beez» и решите менять структуру страниц, не забудьте внести изменения и в сценарий.

С полным описанием функциональных меток WAI-ARIA [на английском языке] можно ознакомиться по адресу: http://www.w3.org/TR/wai-aria/roles#landmark_roles [на англ.].

Сворачиваемые колонки и модульные позиции

Возможность отображать и скрывать некоторые области страницы может оказаться удобной

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

Сворачивание колонок

Для того, чтобы проверить, как работает данная функция, в колонку для дополнительной информации (к ней относятся следующие позиции: «position-6», «position-8», «position-3»)

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

Руководство для начинающего пользователя Joomla! 2.5

Рис. 3. Сворачивание колонки.

После клика по этой ссылке колонка будет свернута, а прежний текст ссылки будет заменен на «Показать информацию». Если кликнуть по ссылке снова, колонка появится.

Эта функция реализована на JavaScript. Все упомянутые здесь сценарии основаны на «Mootools». Наличие этого фреймворка в исходной комплектации позволяет сэкономить время и силы, затрачиваемые на разработку.

Сценарий, отвечающий за разворачивание и сворачивание колонки дополнительной информации, хранится в файле «hide.js», в папке для скриптов JavaScript.

Необходимый HTML-код можно найти в «index.php», в районе строки № 194.

<div id="close">

<a href="#" onclick="auf('right')">

<span id="bild">

<?php echo JText::_('TPL_BEEZ2_TEXTRIGHTCLOSE'); ?>

</span>

</a>

</div>

Текстовое содержимое переменных JavaScript задается языковыми переменными Joomla.

Разворачивание и сворачивание модулей

Руководство для начинающего пользователя Joomla! 2.5

Одна из труднейших задач, решаемых в процессе создания сайтов, — разработка понятной структуры контента, особенно для главной страницы, где его [контента] обилие и разнообразие не должны затруднять восприятие.

Рис. 4. Слайдер, предлагаемый шаблонами «Beez».

Оба варианта шаблона могут выводить модули в виде слайдеров. Это значит, что изначально выводится только заголовок модуля и кнопка со знаком «+» рядом с ним. Клик по кнопке разворачивает модульную позицию, отображая ее содержимое. После этого знак «+» заменяется знаком «−», клик по которому свернет модульную позицию. Даже в данном случае

я использовала WAI ARIA.

Для реализации сворачиваемых модульных позиций применяется следующая команда:

<jdoc:include type="modules" name="position-8" style="beezHide" headerLevel="3" state="0" />

Для отображения модулей в виде слайдеров атрибуту «style» должно быть задано значение

«beezHide».

Вы, возможно, отметили наличие в команде атрибута «state», значение которого определяет развернутой или свернутой будет выводиться модульная позиция. Если значение — «0», то модуль по умолчанию выводится свернутым. Выбор значения «1» приведет к выводу модуля в развернутом состоянии с возможностью дальнейшего сворачивания.

Вкладки с расширенной доступностью

Руководство для начинающего пользователя Joomla! 2.5

Представление контента в так называемых вкладках становится все более популярным. Уже существуют модули, в которых благодаря Joomla эта функция реализована. Но ни один из них не соответствовал требованиям, выдвигаемым к доступности.

Рис. 5. Вкладки шаблонов «Beez».

Для обеспечения доступности вышеупомянутая функция шаблонов «Beez» реализована

с использованием методов WAI-ARIA. Команда для вывода модулей во вкладках — следующая:

<jdoc:include type="modules" name="position-5" style="beezTabs" headerLevel="2" id="1" />

Все модули, относящиеся к позиции «position-5», выводятся во вкладках. Генерация соответствующего кода HTML задается значением «beezTabs» атрибута «style». Использование значения «3» атрибута «id» — обязательно. Причина — в специфике используемых сценариев JavaScript. Представьте себе, что вы хотите вставить модули в разные части вашего шаблона. Сценарию на JavaScript нужны однозначные данные о том, где и какие вкладки должны открываться. Если эти данные отсутствуют, то сценарий не будет работать как ожидается. Пожалуйста, используйте эти номера-метки только для идентификаторов.

НАСТРОЙКА РАЗМЕРА ШРИФТА

В правом верхнем углу страниц, создаваемых «Beez», выводятся ссылки для настройки размера шрифта. Код данной функции хранится в следующем файле со сценариями JavaScript:

корневая_папка_joomla/templates/название_шаблона/JavaScript/md_stylechanger.js. Для

Руководство для начинающего пользователя Joomla! 2.5

реализации переключателя размера шрифта в файле «index.php» есть контейнер <div> со значением «fontsize» атрибута «id».

Изначально этот контейнер — пуст. Он заполняется содержимым динамически, при помощи сценария. Если браузер посетителя не исполняет сценарии JavaScript, то функция работать не будет.

В силу того, что в большинстве браузеров есть функция настройки размера шрифта, возникает вопрос: а зачем это переключатель нужен в «Beez»? Дело в том, что люди преклонного возраста, часто страдающие в той или иной мере нарушениями зрения, мало знают о наборе функций браузеров — им нужен очевидный способ.

«BEEZ5»: ИСПОЛЬЗОВАНИЕ HTML5

За исключением ряда особенностей дизайна между «beez5» и «beez_20» едва ли есть разница. То, что они предлагают, — в значительной степени идентично.

Единственное отличие «beez5» — возможность применять HTML5. Если вы откроете страницу настроек шаблона в административном разделе, то увидите выпадающий список для выбора варианта языка разметки с пунктами «HTML5» и «XHTML». Реализуется эта возможность благодаря файлам переопределения HTML5 в папке «html».

В будущем HTML5 привнесет ряд изменений, нацеленных на повышение удобства

и расширение возможностей, однако в настоящее время в качестве стандарта он не принят (март 2011) [февраль 2012 — прим. перев.]. Некоторые из нововведений уже применимы, некоторые — нет.

Одно из уже «работающих» нововведений — отсутствующие в предыдущих версиях структурирующие теги. Семантическая составляющая HTML4 и XHTML — на сравнительно низком уровне. Значительные улучшения привнесены в HTML5.

Для структурирования страницы в настоящее время есть действительно удобные элементы. При помощи тегов:

•header,

•footer,

•aside,

•nav,

можно создать замечательную страницу.

А следующие теги:

• section,

Руководство для начинающего пользователя Joomla! 2.5

•article,

•hgroup;

помогут выделить действительно важную информацию на ней.

Вкоде HTML5 шаблона «Beez5» — только применимые в настоящее время теги. Проблемы, как всегда, возникают только у 8-й версии Internet Explorer.

Вначало кода страницы вставлен скрипт, интегрирующий «неизвестные» элементы в структуру документа.

<!--[if lt IE 9]>

<script type="text/JavaScript" src="<?php echo $this->baseurl ?>/ templates/beez5/ JavaScript/html5.js"></script>

<![endif]-->

В основе интеграции HTML5 в Joomla — применение переопределения в шаблоне и реакция на выбранный вариант языка разметки, реализованная при помощи шаблонного параметра

в «index.php». Так как «Beez5» позволяет применять два разных языка разметки, для реализации данной возможности потребуется обратиться к файлу «index.php».

Понятно: структура «index.php» — очень сложна, потому что HTML-вывод зависит от выбранного языка разметки.

Файл начинается с определения типа документа.

Если вы откроете «index.php», то сразу станет понятно, что я имею в виду.

<?php if(!$templateparams->get('html5', 0)): ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"><?php else: ?>

<?php echo '<!DOCTYPE html>'; ?>

<?php endif; ?>

Это касается не только определения типа документа, но и всего его содержимого: элементы HTML5 в коде вы увидите, только если данный язык разметки выбран в административном разделе.

Если в последствии вы захотите создать собственный шаблон на основе HTML5, будет лучше, если вы удалите все запросы и все элементы XHTML, и вывод будет состоять только

из HTML5.