Шаблон Beez

Шаблон — это всегда больше, чем может показаться на первый взгляд.

Термин шаблон обычно ассоциируется с внешним видом сайта. Помимо дизайна, однако, имеет значение и техническая реализация. Шаблон определяет, где в потоке документов будет находиться контент, где и когда будут выводиться и скрываться те или иные модули, будут ли использоваться страницы сообщений об ошибках, какой вариант языка разметки будет использоваться.

Некоторые пользователи Joomla! определенно знакомы с шаблоном Beez, входящим в исходную комплектацию CMS версии 1.5. И «beez_20», и «beez5» внешне сильно отличаются от предшественника. В них для таких элементарных составляющих как, например, меню, я выбрала нейтральный серый цвет. Сделала я это для того, чтобы добиться большей цветовой совместимости.

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

Другая ошибка состояла в том, что я недостаточно ясно выразила истинную цель. Вывод шаблона был структурирован таким образом, чтобы создание новых шаблонов на его основе было процессом простым и понятным и заключалось в незначительном изменении CSS. Этот принцип я воплотила в новых версиях «Beez». В них также использован более доступный JavaScript1, а в «beez5» — небольшое количество HTML5. С «Beez_20» не требуются переопределения. Наконец для верстки в Joomla не используются таблицы. HTML-вывод новых версий шаблона соответствует структуре предшественника.

Названия классов CSS были изменены: для лучшего понимания они были унифицированы. Существенную пользу это принесет дизайнерам шаблонов. HTML-составляющая вывода — опрятна и правильна. Для соответствия стандартам не требуются переопределения. С технической точки зрения возможности обеих версий шаблона — почти идентичны. Отличия — сугубо графические. «Beez5» предусматривает использование HTML5.

Характеристики шаблонов

  • Широкая доступность;
  • возможность выбора положения навигационного блока;
  • функциональные метки WAI-ARIA;
  • автоматический вывод модулей во вкладках;
  • сворачиваемые модульные позиции;
  • сворачиваемые колонки;
  • «beez_ 20» предлагает на выбор две формы: «natural» и «human»2;
  • возможность применения HTML5 в «beez 5».

Широкая доступность

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

Развитие коммуникационных технологий, однако, приносит пользу не всем. Речь идет о людях с ограничениями физической или умственной дееспособности, чье участие в жизни общества, со всеми значительными сопутствующими благами, ограничено в силу того, что в качестве целевой аудитории они рассматриваются далеко не всегда. Уровень коммуникационных технологий достаточен для того, чтобы больша́я часть возникающих у них затруднений была устранена. Интернет-магазины и банки, обслуживающие через интернет, должны понимать, что это значительная доля их клиентуры.

Цель веб-дизайна, одним из принципов которого является широкая доступность, — сделать, если это возможно, информацию, публикуемую в интернете, а также взаимодействие, реализуемое при помощи него, доступными всем группам пользователей, при помощи всех типов устройств.

Около 8% населения Германии страдают теми или иными ограничениями физического характера, затрудняющими доступ к информации, опубликованной в интернете. Обычно понятие «широкая доступность» применительно к веб-дизайну понимается как «интернет для слепых». Я хочу подчеркнуть, что такое понимание далеко от полного. Мне всегда было интересно, почему ситуация такова. Возможно, потому что образ компьютера неразрывно связан с образом монитора, инструмента, предназначенного для зрячих. По моим наблюдениям, слепые люди справляются с ограничениями, связанными с использованием компьютера, даже лучше, чем люди с прочими видами ограничений.

Слепые — это люди, возможности остаточного зрения которых составляют несколько процентов от средней величины. Количество слепых в Германии — 150 000—200 000 человек. Часть из них может воспринимать текстовую информацию благодаря модификациям шрифтов и цветовых схем, часть из них зависит от аудиоустройств и брайлевских дисплеев.

Значительно больше — людей с сильно ухудшившимся зрением.

Почти четверть населения трудоспособного возраста жалуется на аметропию той или иной степени. С учетом старшей возрастной группы эта доля — еще больше. В некоторых случаях вполне помогают очки. Ряд нарушений зрения, таких как глаукома и катаракта, исправляется в той или иной мере хирургическим вмешательством. Некоторые, такие как пигментная дегенерация сетчатки или диабетическая ретинопатия, становятся причиной устойчивого ухудшения зрения, ведущего к полной его потере. Поле зрения людей, страдающих так называемым туннельным зрением — крайне ограничено. Для наглядности: иногда оно визуально не больше монеты достоинством в 2 евро, находящейся на расстоянии вытянутой руки.

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

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

От 60 000 до 100 000 жителей Германии имеют крайне ограниченный слух. Из них у нескольких тысяч — проблемы со слухом были еще тогда, когда они осваивали немецкий язык, а потому в настоящее время они владеют им ограниченно: на уровне 4—6-го классов. Становится очевидной потребность в простых [прим. перев.: адаптированных] текстах.

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

Внимание

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

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

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

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

Как и в версии для Joomla 1.5, в «beez_20» и «beez5» есть все, что необходимо для создания собственных широкодоступных шаблонов. Здесь очень важны:

  • отделение содержания от представления [контента от верстки],
  • рациональная с семантической точки зрения структура,
  • HTML-закладки,
  • возможность навигации при помощи клавиатуры,
  • достаточный цветовой контраст.

Отделение содержания от представления

Первое и наиболее важное правило для разработчиков — отделять контент от верстки насколько это только возможно:

  • опрятный, чистый HTML для контента;
  • отказ от таблиц как инструмента верстки;
  • использование для форматирования каскадных таблиц стилей и только их;
  • рациональная с семантической точки зрения структура;
  • HTML-закладки.

Форматирование только при помощи каскадных таблиц стилей и линейное выстраивание информации — вот важнейшие требования к широкодоступным сайтам.

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

Линейное выстраивание информации означает: в направлении от верхней части страницы — к нижней. Именно в таком порядке ее обрабатывают читающие устройства и приложения. Использование для верстки таблиц затрудняет данный процесс.

Представление о термине «семантическая паутина» у большинства из нас — скудное. У кого-то оно ассоциируется с уроками иностранных языков [слова в диаграмме смысловых связей]. Однако, «семантическая паутина» имеет отношение и к созданию контента для веб. Например, читающие устройства и приложения позволяют пользователям переходить от заголовка к заголовку, от списка к списку и складывать общее представление о структуре открытого ими документа. Если веб-документ не имеет заголовков, то такая возможность отсутствует.

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

В настоящее время данный принцип воплощен не только в шаблонах, но и во всём стандартном выводе Joomla. В процессе создания версии 1.6 он был в центре внимания разработчиков. Причиной тому было не только желание усовершенствовать специальные возможности [синоним широкой доступности] сайтов, управляемых Joomla, но и улучшить их отображение на мобильных устройствах, а также оптимизировать их с точки зрения поисковых систем. Хорошо структурированный код оценят не только пользователи с ограниченной дееспособностью. На хорошо структурированном сайте даже Google будет себя чувствовать лучше.

Закладки HTML

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

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

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

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

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

Пример:

<ul class="skiplinks">
<li><a href="#main" class="u2">Перейти к основному тексту.</a></li>
<li><a href="#nav" class="u2">Перейти к основному блоку навигации и войти в систему.</a></li>
</ul>

Выбор цветов

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

Если вы обесцветите страницу [т. е. замените цвета на оттенки серого], то сможете сложить приблизительное представление о том, что видят люди, страдающие цветовой слепотой. Фактически восприятие — индивидуально и зависит от тяжести аметропии. Многие не различающие цвета люди, приспособились и угадывают их. Например, они знают, что трава — зеленая и могут, сравнивая, идентифицировать другие оттенки зеленого.

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

Контраст

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

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

«beez_20»: разработка дизайна

Шаблон «beez_20» предлагает два варианта оформления: «personal» и «nature», «стилистические» параметры которых хранятся в файлах «personal.css» и «nature.css», соответственно. Переключение между ними возможно благодаря специальной структуре файлов CSS и интерфейсу настройки шаблона.

Выбор варианта оформленияВыбор варианта оформления

Рис. 1. Выбор варианта оформления.

Есть еще два файла, отвечающих за цветовую схему. Файлы «position.css» и «layout.css» предназначены для общего задания расположения элементов страницы и отступов.

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

Все варианты оформления можно менять по своему усмотрению. Разработчики шаблонов могут пополнить их список.

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

Положение меню

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

Выбор порядка выводаВыбор порядка вывода

Рис. 2. Выбор порядка вывода.

Навигационная колонка [боковая, содержащая меню] и визуально и по порядку вывода содержимого [в коде страницы] может появляться как до основной полосы [слева], так и после нее. Форматирование колонки будет задаваться 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» [рус.: «навигация»], роль поисковой панели — «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») необходимо поместить модуль. Вне зависимости от того, где расположена навигационная колонка, справа или слева от основной полосы, сверху будет выводиться ссылка с текстом «Скрыть информацию».

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

Рис. 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.

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

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

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

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

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

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

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

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

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

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

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

Вкладки шаблонов «Beez»Вкладки шаблонов «Beez»

Рис. 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. Для реализации переключателя размера шрифта в файле «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,
  • 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.


1 Прим. перев.: подразумеваются функции сайта с широкой доступностью, реализованные при помощи JavaScript.

2 Прим. перев.: смысл фразы в оригинале. Возможно, имеются в виду варианты оформления «Nature» и «Personal».

Комментарии

Модули не прячутся и не сворачиваются... или неясно расписано

Думаю, вам следует проверить следующее.

  • Исполняет ли ваш браузер JavaScript.
  • Используется ли на интересующих вас страницах шаблон «Beez».
  • Находятся ли интересующие вас модули в подходящих позициях.
    • Для размещения в скрываемой колонке модуль должен быть в одной из следующих позиций: «position-3», «position-6» или «position-8».
    • Для размещения в сворачиваемой рамке — в «position-4».
    • Для размещения в рамке с вкладками — в «position-5».

А можно ли каким-нибудь образом реализовать сворачивание модуля в другом шаблоне, отличном от Beez? Какие файлы следует скопировать для этого?

Думаю, можно. Интереса ради попробовал. В шаблоне «Atomic», пусть криво, но получилось. Для этого сделал следующее: скопировал код функции «modChrome_beezHide» из файла modules.php шаблона «Beez_20» в аналогичный файл шаблона «Atomic»; в index.php шаблона «Atomic» вставил ссылку на файл сценариев hide.js шаблона «Beez_20»; заменил в index.php шаблона «Atomic» имеющуюся там команду вывода модульной позиции «position-4»(<jdoc:include type="modules" name="position-4" style="sidebar" />) на аналогичную из index.php шаблона «Beez_20»(<jdoc:include type="modules" name="position-4" style="beezHide" headerLevel="3" state="0 " />); в административном разделе выбрал стиль «Atomic» и задал позицию «position-4» модулям в боковой колонке. «Кривизна» решения — в том, что содержимое модулей сворачивается, а место которое занимает модуль в развернутом состоянии не высвобождается, то есть нижние модули вверх не сдвигаются.

А как Вы поменяли цвет фона сайта? Я уже который день перебираю personal.css, но ничего не могу найти. Мне очень важно.

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

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

Если вы хотите изменить цвет «листа» (т.е. фона над «задником»), то придется изменять цвета множества отдельных элементов страницы — отыскивать свойства background, содержащие значения типа #буквы_и/или_цифры, например, #fff или #FFFFFF, и заменять их значения на нужное вам, обновляя страницы сайта в браузере после каждого изменения, проверяя таким образом результат. Возможно, вы добьетесь удовлетворительного результата, если «тупо» замените все фрагменты background:#fff на background:#код_нужного_вам_цвета.

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

Пожалуйста, сообщите о результатах.

Верстаю beez_ 20 на денвере, изменил цвет фона как указано выше - изменил значение background в personal.css в 20 строке на #ccff66 - изменила цвет только нижняя половина фона сайта, верхняя осталась серой как и была изначально, причем когда я хромом щелкаю на сером фоне и выбираю "просмотреть код элемента" он меня отсылает в ту же 20 строку personal.css в котором уже выбран новый цвет

Думаю, дело в том, что в строке остался следующий фрагмент:
url(../images/personal/bg2.png) repeat-x.
У меня строка выглядит следующим образом:
background: #ccff66;
и «задник» — полностью нового цвета.