ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 19.10.2024
Просмотров: 161
Скачиваний: 0
Руководство для начинающего пользователя Joomla! 2.5
Рис. 2. Тип пункта меню для альтернативного макета.
Создание «альтернативных» типов пунктов меню — занятие, требующее значительного опыта. Эта функция востребована не столько начинающими, сколько разработчиками шаблонов.
Рис. 3. Альтернативные макеты на страницах создания/редактирования статей.
7/14/12- |
211 - |
Руководство для начинающего пользователя Joomla! 2.5
СОЗДАНИЕ НОВОГО ШАБЛОНА НА ОСНОВЕ «ATOMIC»
Шаблон «Atomic» можно использовать в качестве основы для создания собственного. В состав «Atomic» входят следующие папки и файлы:
•Папка «atomic», расположенная в папке «templates». В ней хранятся следующие файлы:
•«component.php» — версия шаблона для печати;
•«error.php» — страница сообщений об ошибках;
•«favicon.ico» — значок сайта (статья о значках в Википедии);
•«index.html» — пустая страница, выводимая при попытке получить прямой доступ к папке. Подобные файлы являются мерой предосторожности: они не позволяют видеть содержимое папки;
•«index.php» — основной файл шаблона;
•«templateDetails.xml» — конфигурационный файл, хранящий информацию о файлах, параметрах и модульных позициях. Благодаря ему с «Atomic» может взаимодействовать менеджер шаблонов, он же нужен для создания установочного пакета шаблона;
•template_thumbnail.png — миниатюра шаблона, выводимая в таблице менеджера шаблонов;
•template_preview.png — изображение шаблона, предназначенное для предварительного просмотра.
•Папка «css», расположенная по адресу /templates/atomic/. В ней хранятся файлы CSS.
•Папка «html», расположенная по адресу /templates/atomic/. В ней хранятся файлы переопределения (override). Шаблон «Atomic» предоставляет возможность переопределения для модулей;
•Папка «images», расположенная по адресу /templates/atomic/. В ней хранятся изображения шаблона;
•Папка «js», расположенная по адресу /templates/atomic/. В ней хранятся скрипты JavaScript;
• Папка «languages», расположенная по адресу /templates/atomic/. В ней хранятся файлы со значениями языковых переменных. В исходной комплектации это англоязычные значения.
Основной файл шаблона index.php
В силу того, что Joomla! ищет встроенный тег <jdoc> и команды PHP, основной файл шаблона должен называться именно так: index.php. Вся необходимая разметка HTML с комментариями там уже содержится. Можете менять ее в соответствии с вашими потребностями.
Для того, чтобы сложить общее представление, давайте произведем краткий обзор файла.
7/14/12- |
212 - |
Руководство для начинающего пользователя Joomla! 2.5
24-я строка10 [а также следующие пять — прим. перев.] содержит код загрузки CSS-фреймворка
«Blueprint».
По коду в 50-й, 55-й, 61-й и пр. строках можно увидеть, что шаблон предлагает ряд модульных позиций с особыми названиями, например, «atomic-search», «atomic-topmenu» и т. д. Если
в интерфейсе настройки модуля в соответствующем поле вы выберете одно из них, то модуль будет выводиться в соответствующей позиции. Изменить названия позиций можно файле
«templateDetails.xml».
В 40-й строке можно увидеть следующий фрагмент кода:
echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js
Joomla «знает» значение «baseurl», а также название активного шаблона, поэтому при необходимости можно получить доступ к этим данным.
В 46-й строке можно увидеть следующий фрагмент:
echo $app->getCfg('sitename');
Он используется для получения названия сайта. 48-я строка содержит следующий фрагмент:
if($this->countModules('atomic-search')) ...
Он предназначен для подсчета модулей в позиции atomic-search и сообразной настройке макета. В 50-й строке содержится следующий фрагмент:
<jdoc:include type="modules" name="atomic-search" style="none" />
Он содержит команду «jdoc», относящуюся сугубо к набору команд Joomla. Она нужна для вставки в атрибуты кода HTML определенного типа. В данном случае имеется в виду вывод всех модулей, относящихся к позиции «atomic-search». Атрибут «style» называется «module chrome» и может иметь следующие значения:
•«table» — для вывода контента в таблице;
•«horz» — контент выводится горизонтально в ячейке родительской таблицы;
•«xhtml» — контент выводиться в теге <div> в соответствии с требованиями к XHTML;
•«rounded» — вывод в формате, позволяющем использовать закругленные углы. Класс элемента переименован из «moduletable» в «module»;
10 Номера строк могут отличиться от указанных. Продолжить чтение.
7/14/12- |
213 - |
Руководство для начинающего пользователя Joomla! 2.5
•«none» — без форматирования;
•«outline» — вывод в режиме отображения модульных позиций (?tp=1);
•индивидуальный стиль шаблона. Некоторые шаблоны имеют собственные стили. Примером может служить «Beez», подробнее о котором рассказывается в главе «Шаблон Beez».
С полным перечнем «стилей» можно ознакомиться в статье [на английском] « What is module chrome», на сайте документации Joomla.
Примеры атрибута «type» команды <jdoc>:
<jdoc:include type="head" />
<jdoc:include type="message" />
<jdoc:include type="component" style="none" />
У каждой страницы [выводимой Joomla] должен быть заголовок документа (head) и вывод одного компонента (component). Иногда еще нужна строка системных сообщений (message). Примером служебного сообщения может быть то, которое система выводит после успешного сохранения настроек. С типом «component» может использоваться «module chrome».
Файлы вывода сообщений об ошибках и версии для печати «работают» в точности также, как и основной файл.
ПАПКА CSS
В папке «CSS» — три файла.
•«template.css» — файл с предварительно записанными правилами CSS. Часть из них — закомментирована и помечена. Раскомментировать их следует, если вы не хотите использовать
CSS-фреймворк «Blueprint».
•«template_ie.css» — пуст. В него записываются переопределяющие стили для браузера Internet Explorer.
•«template_rtl.css» — также пуст. В него записываются переопределяющие стили для языков с направлением письма справа налево.
CSS-фреймворк «Blueprint»
«Blueprint» — это фреймворк, призванный сократить время разработки и увеличить совместимость создаваемых каскадных таблиц стилей (CSS) с разными браузерам.
Вот отрывок из файла README:
Мы рады, что вы проявили интерес к «Blueprint»! «Blueprint» — это фреймворк, призванный сократить время разработки каскадных таблиц стилей [CSS]. Он предоставляет надежный фундамент для создания
7/14/12- |
214 - |
Руководство для начинающего пользователя Joomla! 2.5 |
|
собственных правил CSS. Вот, что может предложить вам исходная версия |
|
фреймворка: |
|
• легко настраиваемая модульная сетка, |
|
• практичный исходный набор для оформления, |
|
• настройка исходных линий, |
|
• улучшенная установка исходных стилей браузеров, |
|
• таблица стилей для печатных версий, |
|
• эффективные сценарии для модификаций, |
|
• отсутствие излишков кода. |
|
Примеры и учебные пособия публикуются на сайте проекта [на англ.]: |
http:// |
www.blueprintcss.org/. |
|
7/14/12- |
215 - |
Руководство для начинающего пользователя Joomla! 2.5
Глава 18
Автор: Angie Radtke
Шаблон Beez
Шаблон — это всегда больше, чем может показаться на первый взгляд.
Термин шаблон обычно ассоциируется с внешним видом сайта. Помимо дизайна, однако, имеет значение и техническая реализация. Шаблон определяет, где в потоке документов будет находиться контент, где и когда будут выводиться и скрываться те или иные модули, будут ли использоваться страницы сообщений об ошибках, какой вариант языка разметки будет использоваться.
Некоторые пользователи Joomla! определенно знакомы с шаблоном Beez, входящим в исходную комплектацию CMS версии 1.5. И «beez_20», и «beez5» внешне сильно отличаются
от предшественника. В них для таких элементарных составляющих как, например, меню я выбрала нейтральный серый цвет. Сделала я это для того, чтобы добиться большей цветовой совместимости.
Работая над версией для Joomla 1.5, я хотела создать соответствующий стандартам, удобный в использовании, легко приспосабливаемый шаблон. Я намеренно использовала пурпурный цвет в надежде на то, что дизайнеры будут модифицировать его исходный код и свободно распространять результаты своей работы. Я надеялась на то, что на основе моего шаблона создадут множество новых бесплатных шаблонов. К сожалению, надежда оказалась напрасной.
Другая ошибка состояла в том, что я недостаточно ясно выразила истинную цель. Вывод шаблона был структурирован таким образом, чтобы создание новых шаблонов на его основе было процессом простым и понятным и заключалось в незначительном изменении CSS. Этот принцип я воплотила в новых версиях «Beez». В них также использован более доступный
JavaScript11, а в «beez5» — небольшое количество HTML5. С «Beez_20» не требуются переопределения. Наконец для верстки в Joomla не используются таблицы. HTML-вывод новых версий шаблона соответствует структуре предшественника.
Названия классов CSS были изменены: для лучшего понимания они были унифицированы. Существенную пользу это принесет дизайнерам шаблонов. HTML-составляющая вывода — опрятна и правильна. Для соответствия стандартам не требуются переопределения.
11 Прим. перев.: подразумеваются функции сайта с широкой доступностью, реализованные при помощи JavaScript. Продолжить чтение.
7/14/12- |
216 - |
Руководство для начинающего пользователя Joomla! 2.5
С технической точки зрения возможности обеих версий шаблона — почти идентичны. Отличия — сугубо графические. «Beez5» предусматривает использование HTML5.
ХАРАКТЕРИСТИКИ ШАБЛОНОВ
•Широкая доступность;
•возможность выбора положения навигационного блока;
•функциональные метки WAI-ARIA;
•автоматический вывод модулей во вкладках;
•сворачиваемые модульные позиции;
•сворачиваемые колонки;
•«beez_ 20» предлагает на выбор две формы: «natural» и «human»12;
•возможность применения HTML5 в «beez 5».
ШИРОКАЯ ДОСТУПНОСТЬ
Использование интернета стало для многих нормой. В сети можно найти информацию, опубликованную в разных частях мира. Сидя перед компьютером дома вы можете узнать о специальных предложениях местного компьютерного магазина, графике работы регистратуры
или найти интересующий вас телефонный номер. Благодаря интернету отпала необходимость в раздражающих справках по телефону или походах в библиотеку.
Развитие коммуникационных технологий, однако, приносит пользу не всем. Речь идет о людях с ограничениями физической или умственной дееспособности, чье участие в жизни общества, со всеми значительными сопутствующими благами, ограничено в силу того, что в качестве целевой аудитории они рассматриваются далеко не всегда. Уровень коммуникационных технологий достаточен для того, чтобы больша́я часть возникающих у них затруднений была устранена. Интернет-магазины и банки, обслуживающие через интернет, должны понимать, что это значительная доля их клиентуры.
Цель веб-дизайна, одним из принципов которого является широкая доступность, — сделать, если это возможно, информацию, публикуемую в интернете, а также взаимодействие, реализуемое при помощи него,
доступными всем группам пользователей, при помощи всех типов устройств.
Около 8% населения Германии страдают теми или иными ограничениями физического характера, затрудняющими доступ к информации, опубликованной в интернете. Обычно
12 Прим. перев.: смысл фразы в оригинале. Возможно, имеются в виду варианты оформления
«Nature» и «Personal». Продолжить чтение.
7/14/12- |
217 - |
Руководство для начинающего пользователя Joomla! 2.5
понятие «широкая доступность» применительно к веб-дизайну понимается как «интернет для слепых». Я хочу подчеркнуть, что такое понимание далеко от полного. Мне всегда было интересно, почему ситуация такова. Возможно, потому что образ компьютера неразрывно связан с образом монитора, инструмента, предназначенного для зрячих. По моим наблюдениям, слепые люди справляются с ограничениями, связанными с использованием компьютера, даже лучше, чем люди с прочими видами ограничений.
Слепые — это люди, возможности остаточного зрения которых составляют несколько процентов от средней величины. Количество слепых в Германии — 150 000—200 000 человек. Часть из них может воспринимать текстовую информацию благодаря модификациям шрифтов и цветовых схем, часть из них зависит от аудиоустройств и брайлевских дисплеев.
Значительно больше — людей с сильно ухудшившимся зрением.
Почти четверть населения трудоспособного возраста жалуется на аметропию той или иной степени. С учетом старшей возрастной группы эта доля — еще больше. В некоторых случаях вполне помогают очки. Ряд нарушений зрения, таких как глаукома и катаракта, исправляется в той или иной мере хирургическим вмешательством. Некоторые, такие как пигментная дегенерация сетчатки или диабетическая ретинопатия, становятся причиной устойчивого ухудшения зрения, ведущего к полной его потере. Поле зрения людей, страдающих так называемым туннельным зрением — крайне ограничено. Для наглядности: иногда оно визуально не больше монеты достоинством в 2 евро, находящейся на расстоянии вытянутой руки.
Около 10% процентов мужского населения подвержено неострым формам цветовой слепоты. В большинстве случаев это неспособность различать оттенки красного и зеленого. У женщин отсутствие восприятия прочих цветов, полная цветовая слепота или цветовая слепота, затрагивающая оттенки зеленого и красного, встречается редко.
Другая группа потенциальных пользователей испытывает трудности с использованием устройств ввода: мыши или стандартной клавиатуры. Причины могут быть разными: неподвижность или неконтролируемые спонтанные движения. У некоторых людей отсутствуют кисти или руки целиком, у некоторых тело парализовано от шеи вниз в результате инсульта. Однако, пока человек способен быть источником контролируемого цифрового сигнала — тех самых нулей и единиц — при помощи специального программного обеспечения он или она сможет освоить управление компьютером.
От 60 000 до 100 000 жителей Германии имеют крайне ограниченный слух. Из них у нескольких тысяч — проблемы со слухом были еще тогда, когда они осваивали немецкий язык, а потому в настоящее время они владеют им ограниченно: на уровне 4—6-го классов. Становится очевидной потребность в простых [прим. перев.: адаптированных] текстах.
7/14/12- |
218 - |