Il template Beez

Un template di solito contiene più di quanto si vede a prima vista.

Il termine template è collegato di solito all’aspetto di un sito. Ma oltre al design, si distingue dalla realizzazione tecnica. Questa determina dove è situato il contenuto senza il flusso di documenti, quando e dove alcuni moduli possono essere attivati e scomparire, se vengono usate le pagine di errore e quale markup - versione HTML dovrebbe essere usato.

Alcuni utenti avranno sicuramente familiarità con il template Beez in Joomla! 1.5. Entrambi, beez_20 e beez5 sono visualizzati in modo differente dal design delle precedenti versioni. Per il design ho usato un grigio naturale per i componenti elementari del template, come il menu per fornire una soluzione che si armonizzi con molti colori.

Anche a quel tempo, volevo sviluppare un template standard, facilmente accessibile ed adattabile. Avevo coscientemente scelto il colore viola, nella speranza che molti designer prendessero il codice, modificandolo e rendendolo liberamente disponibile. Avevo sperato in una varietà di nuovi template gratuiti. Questo purtroppo non si è verificato.

Un altro errore è stato probabilmente non aver comunicato con abbastanza chiarezza qual'era il vero scopo. L’output era stata strutturata in modo tale che ogni disegno sarebbe dovuto essere implementato in maniera semplice e diretta, solo con una lieve modifica nel CSS. Ho mantenuto questo principio nelle nuove versioni di beez. In aggiunta, c’è uno script JavaScript molto accessibile e in beez5 una piccola porzione di HTML5. Beez_20 non richiede override template. Le tabelle del layout finalmente non sono più in uso in Joomla!. Il nuovo sistema di output basato sull’HTML segue la struttura del vecchio template Beez.

I nomi delle classi CSS sono state rinominate e unificate per una migliore comprensione. Questo è un tremendo vantaggio per i progettisti di template. L’output HTML standard da Joomla! è pulita e ben formata. Non avete più bisogno di utilizzare l'override template per generare codice pulito e conforme agli standard. Le capacità tecniche di entrambi i template Beez erano quasi identiche. Differivano soltanto nel loro disegno grafico. La versione di Beez5 è stata disegnata anche per l’uso dell’HTML5.

Le caratteristiche principali

  • Accessibilità
  • Posizione di navigazione configurabile
  • WAI-ARIA Roles Landmark
  • Rappresentazione automatica dei moduli in tabelle accessibili
  • Dissolvenza in entrata e in uscita di moduli collassabili
  • Dissolvenza in entrata e in uscita di colonne collassabili
  • In beez_ 20 potete scegliere tra due forme: naturale o umano
  • In beez 5 l'HTML5 è accessibile

Accessibilità generale

Per molte persone Internet è diventato la normalità. Le informazioni dal mondo sono pronte per essere recuperate e forse, cosa più importante, sono memorizzate anche le offerte speciali dei negozi di hardware locali, gli orari di apertura dell’ufficio di registrazione o la rubrica, sono disponibili sul monitor di casa propria. Non sono necessarie fastidiose telefonate o visite inutili in libreria, basta cercare in rete.
Ma non vengono tutti benefici da questo sviluppo. Quelle persone, con alcune disabilità fisiche o mentali, hanno difficoltà a partecipare pienamente alla società, anche se potrebbero beneficiare enormemente dalle comunicazioni tecnologiche. Ma spesso non riescono a causa delle barriere che impediscono loro l’accesso alle informazioni o lo rendono addirittura impossibile. Molte di queste barriere possono essere superate, se le offerte sono progettate di conseguenza.

Gli operatori di negozi online o banche che forniscono servizi bancari, dovrebbero rendersi conto che non è un gruppo così piccolo.

Il web design accessibile mira a rendere i contenuti e le interazioni su Internet disponibili per tutti i gruppi di utenti e dispositivi, se possibile.

Circa l’8% della popolazione Tedesca ha una limitazione fisica che rende difficile il loro accesso alle informazioni da Internet. Comunemente il termine “accessibilità” nel web design si identifica con Internet per persone non vedenti. Vorrei sottolineare che questo non è tutto - anzi, questo è solamente un piccola parte. Mi sono spesso chiesto perché sia così. Probabilmente il motivo è quel monitor che è diventato il classico simbolo per il computer, e qualcuno che non vede niente, non può usarlo. Nel mio lavoro quotidiano, ho notato poi, che le persone non vedenti se la cavano molto meglio di persone con alte tipologie di disabilità.

Non vedenti sono le persone il cui residuo visivo è solamente una piccola percentuale del valore medio. Il numero di persone non vedenti in Germania va da 150.000 a 200.000. Alcuni di loro possono decifrare i testi attraverso la dimensione del carattere del computer e le impostazioni personalizzate del colore, mentre altri dipendono da informazioni acustiche o leggono toccando il display Braille.

Significativamente maggiore è la percentuale di persone con grave disabilità visiva.

Circa un quarto della popolazione in età lavorativa lamenta vari gradi di ametropia. Più avanti, la percentuale è molto più alta. Alcuni di questi problemi sono compensati abbastanza bene da occhiali, altri solo con limitazioni. Certe malattie dell’occhio come la cataratta o il glaucoma possono essere risolte o almeno mitigate con la chirurgia. Alcune come la retinite pigmentosa o retinopatia diabetica, portano ad un deterioramento della visione e infine alla completa perdita della visione. “Nella cosiddetta” visione a tunnel, il campo visivo delle persone affette è estremamente limitata - a volte alla misura di una moneta da due Euro, che si tiene alla distanza della lunghezza di un braccio dagli occhi.

Circa il 10% della popolazione maschile è affetta da lievi forme di daltonismo - che di solito significa che alcuni rossi e verdi non possono essere distinti dagli altri. Altri ciechi ad altri colori, la cecità completa o il daltonismo al colore rosso-verde è molto raro nelle donne.

Un altro gruppo di potenziali utenti che ha problemi con la solita tecnologia da input - non tutti possono usare un mouse o una tastiera standard.

Ci possono essere molte ragioni: le braccia e le dita sono immobili o si muovono spontaneamente e sono difficili da controllare. Altri non hanno braccia e mani o sono paralizzati dal collo in giù dopo una botta su un lato. Finché un essere umano è in grado di inviare un segnale binario controllato - il famoso 0 o 1 - può imparare a gestire un computer e le sue funzioni con il software adeguato.

Ci sono circa da 60.000 a 100.000 persone in Germania con capacità di sentire estremamente limitata. Diverse migliaia di questi erano disabilitati nell’apprendimento della lingua Tedesca così che la conoscevano in modo imperfetto (al 4° e 6° livello). Questo rende la richiesta di testi chiari e più comprensibili.

Per comunicare tra loro, ma anche per l’accoglienza di stranieri o contenuto sofisticato preferiscono la lingua Tedesca dei segni - questo è un idioma di per sé, indipendente dalla lingua parlata basata su un sistema di segni e gesti.

Attenzione

Non solo le persone con basse capacità uditive navigano in Internet senza o con altoparlanti spenti! Non è sufficiente, dare solo segnali di allarme acustici - questi devono essere accompagnati da un chiaro ed interpretabile avviso visivo.

Quanto più Internet ha conquistato tutti i settori della vita, tanto le situazioni di disabilità sono visibili: connessioni lente in albergo, condizioni di illuminazione incontrollabile nel treno in movimento, organizzata rinuncia del suono nei luoghi di lavoro.

Tutte le persone beneficiano dell’accessibilità dei siti web. Non si tratta di rispettare tutte le regole nella massima misura consentita, le istituzioni governative sono tenute a rispettarle. Anche l’usabilità di un sito può migliorare significativamente a piccoli passi verso l’accessibilità.
Grazie alla sua elevata penetrazione, Joomla! ha l’abilità di influenzare molto. Con il template standard Beez è relativamente facile ora, creare siti web che sono accessibili e usabili per molti.

Come in Beez 1.5, tutte queste cose che sono necessarie per la progettazione di template accessibili, sono implementate anche in beez_20 e beez5. I più importanti sono:

  • Separazione di contenuto e layout
  • Struttura semanticamente logica
  • Link ancore
  • Navigabilità da tastiera
  • Sufficienti contrasti di colore

Separazione di contenuto e layout

La prima e più importante regola per gli sviluppatori è la separazione più completa possibile di contenuto e layout:

  • HTML pulito e puro per il contenuto
  • Assenza di tabelle di layout inutili
  • Formattazione esclusivamente con i CSS
  • Una logica struttura semantica
  • Link ancore

La questione della linearità del contenuto e la formattazione tramite CSS è solo una delle più importanti condizioni per l’accessibilità adatta.

Unicamente la tecnologia assistiva ha la possibilità di riciclare i contenuti a piacimento, mentre la presentazione visiva può essere completamente ignorata. L’outsourcing della presentazione nei fogli di stile dà, per esempio, agli utenti non vedenti, la possibilità di definire i propri fogli di stile nel loro browser, e adattare quella pagina esattamente ai loro bisogni. Una presentazione lineare di contenuti e di un’adeguata struttura semantica è particolarmente importante per gli utenti lettori di schermo.

I lettori di schermo afferrano il contenuto di un sito da cima a fondo, che significa in modo lineare. L’uso di layout a tabelle ostacola la linearizzazione.

Dietro il termine Web Semantico probabilmente la maggior parte delle persone può immaginare molto poco. Probabilmente associano lezioni di lingua, ma gioca anche un ruolo speciale nella scrittura di contenuti web. Per esempio, i lettori di schermo offrono ai loto utenti di saltare da una voce all’altra o da una lista all’altra, per avere una rapida visione del documento complessivo. Se un documento web non ha intestazioni, questa funzionalità non è disponibile.

La struttura formale di un documento web dovrebbe corrispondere in gran parte alla struttura del contenuto. A seconda del progetto web la scelta della gerarchia corrispondente può essere una sfida.

Oggi, questo concetto può essere trovato non solo nel template, ma nell’intero output standard di Joomla! Nello sviluppo di Joomla! 1.6, questo era una parte centrale del lavoro di sviluppo. Le ragioni erano, oltre ad una migliore usabilità di tecnologie assistive, anche l’ottimizzazione dei motori di ricerca, ed una migliore usabilità di dispositivi mobili. Un codice ben strutturato non solo aiuta le persone disabili in una migliore navigazione all’interno di un sito, ma anche Google riconosce meglio un sito ben strutturato.

Link ancore

La rappresentazione lineare dei contenuti ha un grande svantaggio: potreste dover percorrere una strada molto lunga, per poter accedere alle altre aree contenuto.
Sullo schermo, un layout a tre colonne mostra un numero di aree che iniziano “al di sopra" e l’occhio può saltare alla sua destra, dove, sostenuto da supporti visivi, si aspetta informazioni interessanti.

Il rimedio offre il concetto di ancore, e’ infatti, un equivalente non-visivo omologo alla grafica del layout, e permette all’utente tramite dispositivi di riproduzione lineare di identificare le aree di contenuto principali, all’inizio della pagina, e poi saltare immediatamente all’area dove si pensa che ci siano informazioni di interesse.

Praticamente, l’uso delle ancore significa, impostare un menu aggiuntivo in cima ad ogni pagina per la navigazione interna della pagina. In molti casi sarà utile nascondere questo menu dal layout grafico. E’ irritante per gli utenti, che possono vedere, cliccare un link, ma non succede niente (apparentemente), perché la destinazione del collegamento è già visibile nella finestra.

In ogni caso, il "menu ancore link" non dovrebbe essere troppo lungo e costruito in modo ben pensato, perché si estende e si complica il percorso di percezione, a causa della stessa linearizzazione. In generale, è consigliabile offrire il contenuto principale come primo obiettivo, poi ai regolari visitatori, che conoscono il sito, di gestire la navigazione nello specifico, la via più breve dove in realtà vogliono andare.

Almeno qui diventa chiaro che, in particolare siti web con pagine di contenuto più complesso non hanno bisogno solo di un layout grafico, ma anche di un design di contenuto che si propone di organizzare il contenuto in una forma che non contiene barriere inutili per gli utenti di linearizzazione.

Esempio:

<ul class="skiplinks">
  <li><a href="#main" class="u2">Skip to content</a></li>
  <li><a href="#nav" class="u2">Jump to main navigation and login</a></li>
</ul>

La scelta del colore

La scelta del colore è, nel contesto di accessibilità, di particolare importanza perché anche persone con problemi nella visione dei colori siano in grado di utilizzare pienamente il sito.

Se si converte un layout in sfumature di grigio, si ottiene un’idea approssimativa di quale colore vedono le persone daltoniche. Tuttavia, la percezione è molto individuale e a seconda della gravità dei diversi gradi di ametropia. Molti daltonici, tuttavia, hanno imparato durante la loro vita, che i colori sono rappresentati da quello che vedono. Essi sanno, per esempio, che l’erba è verde, e possono identificarla dal confronto con altre tonalità di verde.

Molto più diffusa della totale cecità dei colori è quella chiamata cecità del colore rosso-verde. Le persone affette da questa anomalia genetica, non sono in grado di distinguere i colori rosso e verde. Colori misti che contengono queste componenti di colori sono sfocate per loro.

Contrasti

I colori giocano un ruolo importante in diversi altri tipi di disabilità visiva, non soltanto per il colore stesso, ma anche un significante contrasto può essere utile nell’uso di una pagina web.

Colore di primo piano e sfondo, senza gli elementi di testo, dovrebbero formare un netto contrasto, sebbene non sia possibile selezionare le impostazioni del colore e del contrasto, i quali soddisfano tutti i requisiti. Un testo nero su fondo bianco raggiunge un massimo contrasto di colore. Per evitare effetti di abbagliamento, una leggera sfumatura di sfondo può essere utile. Alcuni non vedenti avranno bisogno di contrasti molto forti per separare gli elementi individuali di contenuto in una pagina web dagli altri. Per loro, le combinazioni di colori come il testo bianco su uno luminoso, uno sfondo arancione contrastante, non sono abbastanza intensi. Al contrario, altri forti contrasti fungono come una radiazione - il contenuto è difficile da leggere.

Beez_20: Scelta progettuale

Nel template Beez 2.0, potete scegliere tra design personale e natura. L’applicazione dei file nature.css e personal.css dei parametri del template e la struttura dei file CSS utilizzati sono le basi di questo metodo.

cocoate.com/it/node/10517

Figura 1: Scelta dello stile

Ci sono due file in più che sono responsabili dello schema colore. La position.css  ed il layout.css sono responsabili del posizionamento globale e la spaziatura.

Se volete cambiare in seguito soltanto i colori del template, potete semplicemente modificare a piacere i file personal.css o nature.css. Il posizionamento del contenuto rimane lo stesso, come sono definiti in altri file.

Tutti gli stili di template sono ancora arbitrariamente modificabili e possono essere modificati da template che gli sviluppatori includono in template aggiuntivi.
Nella progettazione del codice sorgente ho preso in considerazione di dare la massima variazione di creatività possibile modificando i file CSS. Sto dicendo molto, ma molto tranquillamente, ma a modo loro, che i template Beez sono qualcosa come progetti per risparmiarvi molte fasi di lavoro.

Posizione della navigazione

Per motivi estetici o per migliorare la compatibilità del motore di ricerca e l’accessibilità, potrebbe essere necessaria la posizione della navigazione prima o dopo il contenuto. Entrambe le versioni dei template Beez lasciano scegliere tra due opzioni nel back-end.

cocoate.com/it/node/10517

Figura 2: Selezione posizione della navigazione

La navigazione è visivamente e semanticamente posizionata prima o dopo il contenuto e formattata con l’uso del CSS.
Se aprite il file index.php di beez_20 o il template che avete modificato, potete trovare alla linea 27 la seguente assegnazione:

$navposition = $this->params->get('navposition');

La variabile $navposition viene correntemente assegnata al valore selezionato nel back-end. La variabile espelle il valore left (sinistra) o center (centro). Left rappresenta la posizione prima del contenuto, center rimane per la posizione dopo il contenuto.

Il termine center sembra creare un po’ di confusione qui, sarebbe logicamente migliore dire che è right (destra). Ma dipende da come si progetta il CSS, potete inserire la navigazione il tre colonne viste nel mezzo.

JavaScript e WAI ARIA

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) è una specifica tecnica del Web Accessibility Initiative (http://it.wikipedia.org/wiki/Web_Accessibility_Initiative), che faciliterà la partecipazione di persone con disabilità nei servizi di rete sempre più complessi e interattivi di oggi. Questa tecnica è particolarmente utile nella progettazione di presentazioni di contenuti dinamici e interfacce utente. La tecnica si basa sull’uso di JavaScript, Ajax, HTML e CSS.

Specialmente le persone non vedenti, spesso perdono l’orientamento quando visitano un sito dove il contenuto viene improvvisamente visualizzato o nascosto. Le persone che possono vedere, possono capire questo cambiamento con i loro occhi, le persone non vedenti possono comprenderlo soltanto quando il cursore viene posizionato sull’elemento.

Mettere a fuoco non è altro che posizionare il cursore nel punto appropriato per far si che il contenuto posizionato sia accessibile.

Nell’HTML e XHTML non abbiamo avuto l’opportunità di concentrarci su tutti gli elementi. Soltanto l’interazione di elementi come link, pulsanti o campi di testo erano a fuoco. Questo è cambiato con l’uso di WAI-ARIA e HTML5.

Gli script usati nei template Beez si basano su questa tecnica che rende il template accessibile a persone con disabilità.

WAI ARIA - Landmark Roles: primo aiuto per l'Orientamento

I Landmark Roles sono destinati a facilitare l'orientamento su un sito web dalla descrizione delle aree della pagina e le loro esatte funzioni all'interno della pagina. Navigation è il ruolo della navigazione, cerca è il ruolo della ricerca main è il ruolo del contenuto della pagina. L'implementazione è abbastanza semplice. L'elemento è esteso solamente all’attributo del ruolo appropriato. Così, utenti di moderni lettori di schermo, saranno informati su questo ruolo.

<div id="main" role="main">

All’interno del template Beez, questo avviene automaticamente usando javascript (javascript/hide.js). L’approvazione della tecnologia Wai-Aria è ancora in fase di approvazione e con la diretta implementazione nel codice sorgente il sito fallirebbe il test di convalida.

Una panoramica completa dei landmark roles può essere trovata all’indirizzo: http://www.w3.org/TR/wai-aria/roles#landmark_roles.

Se in seguito volete utilizzare il template Beez come base del vostro proprio template e modificare la struttura delle aree di pagina, dovrete di conseguenza adattare lo script.

Moduli e Colonne laterali collassabili

L’attivazione o la disattivazione di certe aree può essere utile per gli utenti, specialmente su pagine con un sacco di contenuto. Entrambi i template Beez forniscono due modi diversi. In primo luogo, la colonna con ulteriori informazioni può essere completamente attivata o no, dall’altra parte, i moduli possono essere collassabili sopra le loro intestazioni.

Colonna nascosta

Per testare questa funzionalità, dovete inserire un modulo nella colonna per ulteriori informazioni. Le posizioni dei moduli position-6, position-8 e position-3 sono disponibili. Non importa se la navigazione è prima o dopo il contenuto, se questa colonna viene visualizzata, appare un link proprio sopra con il testo "chiudere info".

cocoate.com/it/node/10517

Figura 3: Colonna nascosta

Attivando questo link, la colonna viene nascosta, il testo del link cambierà in "apri info" e cliccando la colonna verrà riattivata.

Questa funzionalità viene controllata da JavaScript. Tutti gli script citati qui sono basati sulla struttura JavaScript Mootools che diminuisce il nostro lavoro in molte aree.

Il file hide.js nella cartella JavaScript del template è responsabile della visione o sparizione della colonna.

Il file index.php del template, alla linea 194, troverete il codice HTML necessario.

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

I contenuti testuali delle variabili JavaScript sono controllate con le stringhe di lingua di Joomla!

Visualizza e nascondi moduli

Uno dei più grandi cambiamenti nella progettazione di un sito, è la strutturazione chiara del contenuto. Specialmente sulla homepage, spesso bisogna inserire una varietà di informazioni senza ingombrare la pagina.

cocoate.com/node/8049

Figura 4: Scheda beez

Entrambi i template Beez hanno l’opportunità di presentare moduli in forma di schede.

Qui, il primo output è il titolo del modulo. Cliccando sul segno più vicino all’intestazione, il modulo si apre e sarà visibile il contenuto. Poi, il segno più viene sostituito dal segno meno, e il modulo può essere chiuso di nuovo. Anche per questo metodo ho usato la tecnologia WAI-ARIA.

Per poter utilizzare i moduli come descritto, dovrebbero essere integrati nel template usando il comando:

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

Usando lo style = "beezHide" tutti i moduli che sono caricati in quella posizione vengono visualizzati come schede.

Come avete notato il comando include l’attributo “state - stato”, che controlla se il modulo è espanso o collassato.
Se scegliete il valore 0, verrà chiuso al primo caricamento, selezionando il valore 1, verrà aperto di default e può essere chiuso dall’utente.

Tabelle accessibili

La presentazione di contenuti nelle cosiddette Tabelle sta diventando sempre più popolare. In Joomla! ci sono già i moduli con queste funzionalità. Ma nessuno dei moduli offerti ha soddisfatto pienamente i requisiti di accessibilità.

cocoate.com/node/8049

Figura 5: Tabella Beez

La soluzione integrata in Beez si basa sulle tecniche WAI-ARIA per garantire l’accessibilità. Per rappresentare i moduli in tabelle, vengono integrati come segue.

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

Tutti i moduli posizionati nella position-5 sono disposti automaticamente in forma di tabelle. Potete controllare l’output HTML tramite lo Style beezTabs. L’uso dell’attributo id = "3" è obbligatorio. La ragione sta nella struttura dei JavaScript usati. Immaginate di voler integrare i moduli in luoghi diversi nel vostro template. La funzione JavaScript richiede un’informazione unica su dove le tabelle dovrebbero essere aperte o chiuse. Se questa informazione non è presente, lo script non funzionerà nel modo desiderato. Si prega di utilizzare a questo punto i numeri soltanto per l’id.

Aggiustare la dimensione del font

Nella parte superiore del layout l’utente è in grado di modificare la dimensione del font. La tecnica di base per questa funzione può essere trovata nel file JavaScript templates/your_name/JavaScript/md_stylechanger.js. All’interno dell'index.php includete un div contenitore con id="fontsize".

Quest’area è inizialmente vuota e verrà riempita dinamicamente con i contenuti usando JavaScript. Se i vostri visitatori hanno disattivato JavaScript, questa funzione non è disponibile.

Qualcuno potrebbe chiedere, perché questa funzione sia ancora necessaria, visto che ogni browser ha una funzione per aumentare la dimensione del carattere. Specialmente per gli anziani questa tecnica è spesso di particolare importanza, dal momento che molti di loro hanno una visione più o meno compromessa. Tuttavia, specialmente le persone anziane spesso sanno molto poco sulla funzionalità dei browser web e siamo ansiosi di un’offerta chiara.

Beez5: uso dell'HTML5

Il template Beez5 è poco differente da beez_20, a parte alcuni aspetti del design. Le funzionalità offerte sono in parte identiche.

L’unica differenza è: beez5 consente l’uso dell’HTML5. Se date un’occhiata ai parametri del template beez5, potete scegliere tra codice di uscita HTML5 e XHTML. Questa versione del template basata sull’HTML5, la trovate nella cartella HTML del vostro template.

L’HTML5 fornisce una varietà di nuove possibilità e porterà una serie di cambiamenti e facilitazioni in futuro, ma non è ancora uno standard approvato (Marzo 2011). Molte di queste opzioni offerte non sono attualmente applicabili, ma altre possono essere usate senza difficoltà.

Una parte molto importante, che già lavora, sono gli elementi della nuova struttura. L’HTML4 e XHTML avevano un basso peso semantico. Questo è migliorato in modo significativo con l’HTML5.

Ora abbiamo veramente gli elementi pratici per la struttura della pagina.

Con gli elementi:

  • header
  • footer
  • aside
  • nav

potete strutturare una pagina meravigliosa.
Elementi come:

  • section
  • article
  • group

vi aiutano ad assegnare più importanza al contenuto effettivo.

Il codice HTML5 in Beez5 usa soltanto gli elementi che sono affidabili al momento. Soltanto la Versione 8 di internet Explorer ha alcuni problemi, come sempre.

In cima alla pagina è inserito uno script, che integra gli elementi sconosciuti nella struttura del documento esistente.

<!--[if lt IE 9]>
<script type="text/JavaScript" src="<?php echo $this->baseurl ?>/ templates/beez5/JavaScript/html5.js"></script>
<![endif]-->

L’integrazione di base dell’HTML5 in Joomla! sono le override del template e la risposta al linguaggio di markup selezionato tramite il parametro nella index.php. Poiché il template permette l’uso di due differenti linguaggi di marcatura, è necessario avvicinarsi a questa possibilità nella index.php.

Detto chiaramente: La costruzione della pagina index.php è abbastanza complicata, perché dipende dal linguaggio di marcatura di un’altro codice HTML generato.
Inizia con la definizione del tipo di documento.

Quando aprite la index.php del template Beez5 potete vedere istantaneamente di cosa parlo.

<?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; ?>

Questo concetto viene portato a termine attraverso l’intera pagina e gli elementi dell’HTML5, possono essere selezionati soltanto se l’HTML5 è stato selezionato nel back-end.

Se successivamente volete costruire il vostro template in HTML5, sarebbe meglio rimuovere tutte le query e gli elementi XHTML e in output direttamente il codice HTML5.

Commenti

Scusami, gentile Cinzia,
ma non ho capito come attivare o disattivare i moduli Beez nei template :(
(sono alle prime armi...)
Ho il piede del sito, nel quale vorrei attivare un modulo per rilanciare il sito sui social Network.
Ho installato Nice (http://extensions.joomla.org/extensions/...), e per provarlo l'ho installato nel piede della pagina prova (http://www.leggereonline.com/archivio/lo...), ma non compare nulla...
Allora mi è venuto il dubbio che quella parte del template non fosse attiva.
Da quale "foglio di stile (con Joomla 2.5) posso accedervi e cosa devo fare?
Grazie 1000 per l'attenzione, Flaminia
(sito di riferimento: www.leggereonline.com)

Ciao Flaminia, per disattivare i moduli devi accedere dal backend di Amministrazione/Gestione Template, nel menu Gestione template vai sulla voce Template, clicchi sull'icona Opzioni in alto a destra e abilita l'anteprima posizioni modulo, poi salva e chiudi. Se vai poi sul template che vuoi visualizzare ad esempio: Beez5, vai su anteprima e vedi tutti i moduli e le loro posizioni. Una volta che hai visto le loro posizioni vai sul menu Estensioni/Gestione Moduli e li disattivi o no le posizioni relative alla visualizzazione precedente. Fai delle prove in locale così se sbagli a limite reinstalli la versione di Joomla, è l'unico consiglio che posso darti e che hanno dato anche a me

P.S.: Per ulteriori domande o chiarimenti vai su http://www.joomla.it e chiedi agli esperti, loro sanno aiutarti meglio. Ciao.

Salve,
ma in Beez_20 di Defalut in Joomla 2.5.4
quali sono le voci nei fogli css che mi faccciamno Modificare la Grandezza dei Modili in position-7

Grazie