| Door: Sander Potjer. | Categorie: Algemeen.

Joomla 1.6, Beez en de stand van zaken

Onderstaand artikel is geschreven door Angie Radtke en verschenen op haar blog. Wij hebben dit artikel met toestemming overgenomen en vertaald. Angie komt op de komende Joomla!dagen een presentatie geven over de toegankelijkheid Joomla 1.6.

beez20De community is aan het wachten op de vrijgave van Joomla 1.6. Gebruikers staan te popelen om gebruik te maken van het nieuwe ACL en categorieën systeem. Maar dit zijn niet de enige veranderingen. Ook de backend heeft aanpassingen ondergaan, nieuwe modules zijn toegevoegd en de HTML uitvoer is gewijzigd.

Ik draag zorg over de uitvoer, implementatie van standaarden en de Beez template. Tabellen in de layout zijn verleden tijd, de uitvoer structuur van Joomla 1.6 is vergelijkbaar met de Beez uitvoer in Joomla 1.5. Verschil is dat de CSS-classe namen beter leesbaar en begrijpbaar zijn geworden.

Voor template ontwerpers is dit een groot voordeel. De standaard uitvoer is schoon en goed gestructureerd. Template overrides zullen niet meer nodig zijn om een schone HTML code te verkrijgen die aan de laatste standaarden voldoet.

De nieuwe Beez template is ontwikkeld om de voordelen van de aanpassingen in Joomla 1.6 te benutten. Onderstaand volgt een kort overzicht. Als je benieuwd bent kun je de huidige voortgang volgen op //test5.run-digital.com

Belangrijkste kenmerken

  • instelbare uitvoer, XHTML of HTML5
  • toegankelijkheid
  • 2 varianten beschikbaar
  • positie van de navigatiekolom instelbaar
  • modules kunnen worden getoond in instelbare tabbladen
  • fade in en uit van modules
  • fade in en uit van een kolom met de aanvullende informatie

XHTML of HTML 5

Het web maakt grote stappen in de richting van HTML5. De groep rond Ian Hickson heeft grote vooruitgang geboekt in de afgelopen maand. In mijn blogs heb ik vaak gesproken over HTML5 en haar mogelijkheden. Aangezien XHTML nog steeds de meest gebruikte en bekendste mark-up taal is zal dit de standaard optie blijven.
Echter, als iemand HTML 5 wil gebruiken biedt de Beez template een oplossing door de instelbare parameter in de backend. Als deze parameter is ingeschakeld zal Beez gebruik maken van de template override bestanden die HTML-5 code bevatten.

beez-16-1

Toegankelijkheid

Beez 2.0 bevat alle toegankelijke mogelijkheden van de 1.5 versie, volgens WCAG 2:

  • hoge kleurcontrasten
  • skip links
  • semantische opbouw
  • toetsenbediening
  • enz.

Lay-out en design

In de backend zijn er voor Beez twee kleurvariaties beschikbaar: "nature" en "personal"

beez-16-2
beez-16-3

De basis hiervoor is de structuur van de css-bestanden. Position.css en layout.css worden gebruikt voor de positionering en de afstanden. Personal.css en nature.css worden gebruikt voor de kleuren.

Positie van de navigatiekolom

Afhankelijk van de situatie kan het wenselijk zijn om de navigatie vóór of na de inhoud te tonen. Beez biedt de mogelijkheid met een parameter om hiertussen te kiezen.

beez-16-4
beez-16-5

Toegankelijke tabbladen

Het presenteren van content in tabbladen wordt steeds populairder. Tot nu toe waren externe modules vereist om dit voor elkaar te krijgen en de uitvoer daarvan is niet volledig toegankelijk. Beez biedt een oplossing met WAI-ARIA technieken.

"WAI-ARIA is een specificatie die een middel van het beschrijven van rollen, statussen en eigenschappen voor aangepaste widgets zodat ze herkenbaar en bruikbaar zijn voor technologie gebruikers met een beperking."

Op het eerste gezicht is er niets te zien in de broncode. Dit is omdat de code automatisch wordt toegevoegd met JavaScript in de Dom. Voor de lol kun je een kijkje nemen met behulp van Firebug naar wat er zoal aan de broncode wordt toegevoegd.

WAI-ARIA wordt ook gebruikt voor het toewijzen van gebieden op de site met betrekking tot hun functionaliteit (landmark rollen).

Implementatie binnen de templates

Om de Joomla! modules in tabbladen te tonen hebben we niets meer dan Beez zelf nodig. Template ontwerpers kennen reeds de functie

<jdoc include .... >

Deze functie voegt dynamische content toe. Deze content kunnen zowel modules als componenten zijn. De volgende code in Beez toont alle modules met positie "positie-5" automatisch in tabs.

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

Het belangrijkste is in het attribuut "stijl" die verantwoordelijk is voor de uitvoer. Het leidt tot de uitvoer beschreven in beez/html/modules.php. De ID is erg belangrijk als iemand meer dan een tabbladen gebied wilt gebruiken. Voor elk van deze gebieden moet een eigen id verstrekt worden waarbij het belangrijk is dat de ID is een nummer is en niet een string.

Fading modules en kolommen

Het in en uit faden van delen van de site en modules kan een site meer bruikbaar maken. Beez biedt twee mogelijkheden. De gebruiker kan een kolom met aanvullende informatie tonen of verbergen door te klikken. Sommige modules kunnen zo worden ingesteld dat ze kunnen in- en uit-faden terwijl de titel zichtbaar blijft. WAI-ARIA wordt ook hier gebruikt.

De info kolom gebruikt de volgende code:

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

De modules

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

De gebruikte stijl geeft de gebruiker de mogelijkheid om aan de module inhoud te tonen of te verbergen. De state="0" attribuut bepaalt dat de module verborgen is bij het laden van de website. Door de interactie van de gebruiker kan het geopend worden.
Als de template ontwerper kiest voor state="1" is de module in eerste instantie zichtbaar en kan hij verborgen worden door de gebruiker. De huidige status wordt opgeslagen in een cookie zodat deze over de gehele site is te gebruiken.