The Community is still waiting for the new release of Joomla 1.6.

Users are anxious to have Acl and the new category system. But some other things will be changed too. The backend has some changes, new modules have been added, and the HTML – Output changed.

I care about the output, the implementation of standards and the beez -template

Layout-tables are the past. The output structure in 1.6 is similar to the beez output in 1.5. CSS- classnames are more readable and understandable.

For templatedesigners this is a big advantage. The standard output is clean and well structured. Template overrides aren’t need to provide clean HTML code that is compatible with the latest standards.

The new beez template has been developed to take advantage of the changes in 1.6.

This is a short overview.

Key Features:

• configurable output XHTML versus HTML5
• accessibility
• 2 Designs available
• position of the navigation column configurable
• modules can be displayed in accessible tabs
• fade in and of modules
• fade in and out of the column with the additional information

XHTML versus Html 5

The web is making large steps toward HTML5. The group around Ian Hickson made big progress last month. In my blog I have often talked about HTML5 and its possibilities. Since XHTML is still the most widely used and best known mark-up language, it will continue to be the default option.

However, if somebody wants to use HTML 5, the beez template offers a configurable parameter in the backend.

When this parameter is activated, beez use the template override files that contain HTML-5 code.

Accessibility

Beez 2.0 contains all the accessibility features stuff of the 1.5 version, according WCAG 2:

• high color contrasts
• skip links
• semantic
• keyboard navigation
• etc.

Layout and Design

In the backend there are two Designs available: nature and personal

The basis for this is the structure of the css files. Position.css and Layout.css are used for the positioning and the distances. personal.css and natur.css are used for the design.

Position of the navigation column

Depending on the situation, it might be desirable to place the navigation either before or after the content. Beez offers the possibility to choose this in a parameter setting.

Accessible Tabs

Presentation of content in tabs is becoming more popular. Until now, external modules were required to do this, and their output isn’t fully accessible.

Beez offers a solution using WAI-ARIA techniques.

"WAI-ARIA is a specification that provides a means of describing roles, states, and properties for custom widgets so that they are recognisable and usable by assistive technology users."

On the first view there is nothing to see in the source code. This is because the code is added automatically with JS in the Dom. For fun, you can use Firebug to look at what will be added to the source code.

Wai-Aria is used for assigning site areas in relation to their functionality too. (landmark roles)

Implementation within the templates

To display Joomla! modules in tabs, we need nothing more than beez itself. Template designers already know the template function:

<jdoc include .... >

This function adds dynamic content . This content can be modules or components. The following code in beez displays all modules on position "position-5" automatically into tabs.

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

The important thing is in the attribute "style", which is responsible for the output. It leads to the output function in beez/html/modules.php. The ID is very important, if somebody wants to use more than one tab area. For each of these areas it should be its own id provided. It’s important that the ID is a number and not a string.

Fading modules and columns

The fading in and out of parts of the site and modules can make a site more usable. Beez offers two possibilities. The user is able to hide or show a column with additional information by clicking. Some modules can be set up to fade in or out while the headline is remains. Wai-Aria is used here too.

The info column uses the following code:

<div id="close">
<a href="#" onclick="auf('right')">
<span id="bild">
<?php echo JText::_('TEXTRIGHTOPEN'); ?>
</span>
</a>
</div>

The modules

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

The used style gives the user the ability to show and hide the module content.

The state="0" attribute provides that the module is closed with the first loading of the website. It can be open through the user interaction.

If the template-designer chooses state="1" the module is initially open and can be closed by the user. The actual status is located in a cookie, so it works over all sites.