Novità sul template Beez per Joomla 1.6

Angie Radtke  cura l’output, l’implementazione degli standard e lo sviluppo del template Beez (già presente in Joomla 1.5). Di seguito riportiamo la traduzione del suo articolo scritto su Joomla.org riguardante le novità della nuova versione del template Beez per Joomla 1.6.

La futura versione 1.6 porterà importanti novità quali il nuovo sistema ACL per la gestione degli utenti e la nuova organizzazione delle categorie, ma anche un pannello amministrativo rinnovato e un front-end con output HTML cambiato rispetto alla versione 1.5.

Il layout a tabelle è il passato. La struttura dell’output nella 1.6 sarà simile a quella di beez in joomla 1.5. I nomi delle classi CSS saranno più leggibili e comprensibili e per gli sviluppatori di template questo sarà un grande vantaggio. Con un output standard pulito e ben strutturato, non ci sarà bisogno di alcun override del template per fornire codice HTML pulito e compatibile con gli standard.

Il nuovo template beez è stato sviluppato per trarre profitto dai cambiamenti della 1.6

Questa è una piccola anteprima del nuovo template Beez:
http://test5.run-digital.com

Caratteristiche importanti:

• output XHTML configurabile rispetto a HTML5
• accessibilità
• 2 Design disponibili
• Posizione della colonna di navigazione configurabile
• I moduli possono essere mostrati in tab accessibili
• Dissolvenza in entrata dei moduli
• Dissolvenza in entrata ed in uscita della colonna contenente ulteriori informazioni

XHTML rispetto a Html 5

Il web sta facendo grandi passi verso l’HTML5. Il team di Ian Hickson ha fatto notevoli progressi lo scorso mese. Nel suo blog ha parlato spesso dell’HTML5 e delle sue possibilità. Siccome l’XHTML è ampiamente utilizzato, fin quando sarà conosciuto come il migliore linguaggio di mark-up, continuerà ad essere la scelta principale.

Comunque, se qualcuno volesse usare l’HTML 5, il template beez permetterà di farlo tramite una opzione attivabile dal back-end.

Quando questo parametro sarà attivato, beez userà i files per l’override del template che contengono il codice HTML-5.

Accessibilità

Beez 2.0 conterrà tutte le caratteristiche di accessibilità della versione 1.5 in accordo con lo standard WCAG 2:

• forti contrasti di colore
• salto dei links
• semanticità
• navigazione da keyboard
• etc.

Aspetto e grafica:

Nel back-end ci saranno due aspetti disponibili: nature e personal

Il fulcro di ciò sarà la struttura dei file css. I file Position.css e Layout.css saranno usati per il posizionamento e le distanze. I file personal.css e natur.css invece per la progettazione.

Posizione della colonna di navigazione

A seconda dei casi, si potrà desiderare di porre la colonna di navigazione prima o dopo il contenuto. Beez offrirà la possibilità di effettuare questa scelta tramite un apposito parametro di configurazione.

Tabs accessibili

Presentare il contenuto nei tabs sta diventando sempre più diffuso. Prima d’ora, per farlo però erano richiesti moduli esterni, e il loro output non era totalmente accessibile.

Beez offrirà una soluzione innovativa utilizzando la tecnica WAI-ARIA, una specifica che offre uno strumento per la descrizione di ruoli, condizioni e caratteristiche per widgets personalizzati in modo che siano riconoscibili ed utilizzabili da parte delle tecnologie assistive degli utenti.

A prima vista non ci sarà nulla da vedere nel codice sorgente. Questo poichè il codice verrà aggiunto automaticamente con un JS nel Dom. Per divertimento, potrai usare Firebug per vedere cosa verrà aggiunto al codice sorgente.

Wai-Aria verrà anche utilizzato per assegnare le aree del sito in relazione alla loro funzionalità (landmark roles).

Implementazione dentro i templates.

Per visualizzare i moduli di Joomla! nei tabs, non avremo bisogno di niente altro che beez non possegga già. Gli sviluppatori di templates già conoscono la funzione:

 <jdoc include .... > 

Questa funzione aggiunge contenuti dinamici. Questo contenuti possono essere moduli o componenti. Il seguente codice in beez visualizzerà tutti i moduli in posizione “position-5”  automaticamente dentro dei tab.

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

Il fattore importante risiede nell’attributo “style”,  che sarà responsabile dell’output. Esso farà riferimento alla funzione di output in beez/html/modules.php. L’ID sarà di fondamentale importanza se qualcuno avrà bisogno di più di un’area tab. Per ognuna di queste aree dovrà essere fornito un proprio ID. Sarà fondamentale quindi che l’ID sia un numero e non una stringa.

Dissolvenza moduli e colonne

La dissolvenza in entrata ed in uscita di parti del sito e di moduli renderà il sito più facilmente utilizzabile. Beez offrirà due possibilità. L’utente sarà in grado di nascondere o visualizzare una colonna contenente ulteriori informazioni facendo un semplice click. Alcuni moduli potranno essere impostati con dissolvenza in entrata o in uscita mentre il titolo rimarrà invariato. Wai-Aria verrà utilizzata anche qui.

La colonna informazioni usa il seguente codice:

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

I moduli

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

Lo stile usato darà agli utenti la possibilità di mostrare e nascondere il contenuto di un modulo.

L’attributo state=”0”  prevederà che il modulo sia chiuso al primo caricamento del sito web. L'utente potrà aprirlo successivamente con un semplice click.

Se lo svliuppatore del template sceglierà state="1" il modulo sarà inizialmente aperto e potrà essere chiuso dall’utente. L'impostazione dello stato verrà collocata in un cookie, in questo modo funzionerà su tutti i siti web.