Le Template Beez

Article écrit spécialement pour Cocoate par la conceptrice des templates Beez : Angie Radtke


Un template contient habituellement plus que ce que vous voyez à première vue.

Le terme template est généralement lié à l'aspect visuel d'un site web. Mais en plus de la conception graphique, il se distingue par la technique de la mise en œuvre du site. Il détermine où le contenu se trouve dans le flux des documents, quand et où certains modules peuvent être activés et disparaitre, si des pages d'erreurs personnalisées sont utilisées et quel balisage - version html doit être utilisé.

Certains utilisateurs seront certainement familiers avec le template Beez dans Joomla ! 1.5. Tous les deux, beez_20 et beez5 sont visuellement très différents du design de la version précédente. Pour le design, j'ai pris un gris neutre pour les composants élémentaires du template, comme le menu, pour proposer une solution qui s'harmonise avec beaucoup de couleurs.

Dés le départ, je voulais développer un template conforme, facilement accessible et adaptable. Consciemment, j'avais choisi la couleur pourpre, dans l'espoir que de nombreux designers prennent le code, le modifient et le rendent disponible librement. J'avais espéré une variété de nombreux nouveaux templates libres. Cela n'a malheureusement pas été le cas.

Une autre erreur fut probablement de n'avoir pas communiqué assez clairement sur ce qu'était le vrai but. La sortie avait été structurée de façon à ce que n'importe quel design puisse être installé d'une manière simple et directe, avec seulement de légères modifications dans le CSS. J'ai gardé ce principe dans les nouvelles versions de Beez. En outre, il ya du JavaScript plus accessible et dans beez5 une petite partie de HTML5. Beez_20 ne nécessite pas de surcharges de templates. La mise en page par tableaux n'est plus d'usage dans Joomla!. Le nouvel affichage HTML suit la structure de l'ancien template Beez.

Les noms de classe CSS ont été renommés et unifiés pour une meilleure compréhension. C'est un avantage énorme pour les concepteurs de templates. Le HTML produit par le standard Joomla! est propre et bien réalisé. Vous n'avez plus besoin d'utiliser de surcharges (overrides) pour générer du code propre et conforme à la norme. Les capacités techniques des deux modèles de Beez sont presque identiques. Ils diffèrent uniquement par leur graphisme. La version Beez5 est également conçue pour l'utilisation du HTML5.

Les principales caractéristiques

  • Accessibilité
  • Position configurable de la navigation
  • Historique des rôles WAI-ARIA
  • Représentation automatique des modules dans des onglets accessibles
  • Modules déroulants fade in et fade out
  •  Colonne déroulantes fade in et fade out
  • Dans beez_ 20 vous pouvez choisir entre deux formes: naturelle ou humaine
  • Dans beez 5 HTML5 est utilisable

Accessibilité générale

Pour la plupart des gens l'Internet est devenu la norme. De l'information du monde entier est prête à être récupérée et, plus important, même les offres spéciales de la quincaillerie locale, les heures d'ouverture du Bureau d'enregistrement ou l'annuaire téléphonique sont disponibles sur votre écran. Les appels téléphoniques ennuyants ou les visites à la bibliothèque sont inutiles, il vous suffit de regarder sur le net.
Mais tout le monde ne profite pas de ce développement. Les personnes avec une déficience physique ou mentale ont des difficultés à participer pleinement à la société, même si elles pourraient bénéficier énormément de la technologie des communications. Mais souvent, ils échouent en raison des obstacles qui entravent leur accès à l'information ou qui le rend impossible. Bon nombre de ces obstacles peuvent être surmontés, si les offres sont conçues en conséquence.

Les exploitants de boutiques en ligne ou les banques qui fournissent des services bancaires par Internet, doivent être attentifs à ce groupe cible qui est assez conséquent.

L'accessibilité des sites Web vise à rendre le contenu et les interactions sur l'Internet disponible pour tous les groupes d'utilisateurs et si possible à tous les appareils..

Environ 8% de la population allemande a une limitation physique lui rendant difficile l'accés aux informations sur Internet. Habituellement, le terme «accessibilité» dans la conception web est apparentée avec Internet pour les personnes non-voyantes. Je tiens à souligner que ce n'est pas tout - en fait, ce n'en est que la plus petite partie. Je me suis souvent demandé pourquoi c'est ainsi. La raison en est probablement que le moniteur est devenu le symbole classique de l'ordinateur et que quelqu'un qui ne voit rien, ne peut pas l'utiliser. Dans mon travail quotidien, j'ai remarqué que même les non-voyants s'en sortent beaucoup mieux que les gens souffrant d'autres types de handicaps.

Les Non-voyants sont des personnes dont la vision résiduelle est seulement de quelques pour cent de la valeur moyenne. Le nombre de personnes non-voyantes en Allemagne se situe entre 150 000 à 200 000. Certains d'entre eux peuvent déchiffrer les textes justes par la taille de la police informatique et les paramètres de couleur personnalisés, tandis que d'autres dépendent d'informations acoustiques ou lisent en touchant l'afficheur Braille.

La proportion de personnes ayant une déficience visuelle sévère est significativement plus grande.

Environ un quart de la population en âge de travailler se plaint de divers degrés d'amétropie. Plus tard, le pourcentage est beaucoup plus élevé. Certains de ces problèmes peuvent être tout à fait bien compensés par des verres, d'autres avec des limitations seulement. Certaines maladies d’œil telles que la cataracte ou le glaucome peuvent être soignées ou au moins atténuées par la chirurgie. Certaines, comme la rétinite pigmentaire ou la rétinopathie diabétique, conduisent à une détérioration constante de la vision et, finalement,  souvent à une perte totale de vision. Dans la "soi-disant" vision en tunnel, le champ visuel des personnes touchées est extrêmement limitée - parfois à la taille d'une pièce de monnaie de deux-Euro, qui est tenue à une distance de longueur de bras des yeux.

Environ 10% de la population masculine est affecté par les formes douces d'achromatopsie – ce qui signifie habituellement que quelques rouges et verts ne peuvent pas être distingués entre eux. Aveugles à d'autres couleurs, le daltonisme complet ou daltonisme rouge-vert chez les femmes sont très rares.

Un autre groupe potentiel d'utilisateurs a des problèmes avec la technologie de saisie habituelle - tout le monde ne peut utiliser une souris ou un clavier standard.

Il peut y avoir pour cela de nombreuses raisons : les bras et les doigts sont immobilisés ou se déplacent spontanément et sont difficiles à contrôler. D'autres sont même sans bras ou sans mains ou sont paralysés du cou jusqu'aux pieds après un accident vasculaire cérébral d'un côté. Aussi longtemps qu'un être humain est capable d'envoyer un signal binaire contrôlé - le fameux 0 ou 1– Il peut apprendre à faire fonctionner un ordinateur et ses fonctions avec un logiciel approprié.

Il ya environ 60.000 à 100.000 personnes en Allemagne, qui ont une capacité d'audition extrêmement limitée. Pour plusieurs milliers d'entre eux, cela a été une gêne dans l'apprentissage de la langue allemande, de sorte qu'ils la maitrise imparfaitement (en 6ème ou en 4ème). Ceci explique la demande de textes plus compréhensibles.

Pour communiquer les uns avec les autres, mais également pour la réception de contenu étranger ou sophistiqué ils préfèrent la langue des signes allemande - c'est un idiome à lui tout seul, indépendant du langage parlé, basé sur un système de signes et de gestes.

Attention

Il n'y a pas que les gens avec de faibles capacités auditives qui surfent sur internet sans hauts-parleurs! Il ne suffit pas, par exemple, de donner uniquement des annonces audios- elles doivent toujours être accompagnées d'une notification visuelle clairement interprétable.

Plus l'Internet conquiert les domaines de la vie, plus les situations d'incapacité apparaissent: Connexions lentes à l'hôtel, conditions d'éclairage incontrôlables dans le train en marche, diminution volontaire du son dans le milieu de travail.

Tous les gens profitent des sites Web accessibles. Il ne s'agit pas de satisfaire toutes les règles auxquelles les institutions sont priées de se conformer. Même les petites étapes vers l'accessibilité peuvent de manière significative améliorer l'usage d'un site Web.
En raison de sa forte imprégnation, Joomla ! a la capacité d'influencer beaucoup. Avec le template standard beez , il est maintenant relativement facile de créer des sites qui sont accessibles et utilisables par beaucoup.

Comme dans Beez 1,5 toutes ces choses qui sont nécessaires à la conception de templates accessibles sont également mises en œuvre dans beez_20 et beez5. Les plus importantes sont:

  • Séparation du contenu et de la mise en page
  • Structure sémantique logique
  • Ancres de liens
  • Navigabilité au clavier
  • Contrastes de couleurs suffisants

Séparation du contenu et de la mise en page

La première règle et la plus importante pour les développeurs est la possibilité de séparation complète du contenu et de la présentation:

  • HTML propre et pur pour le contenu
  • Pas de mise en page par tableau inutile.
  • Formatage exclusivement avec des CSS
  • Une structure logique sémantique
  • Liens d'ancre

La question de la linéarisabilité du contenu et du formatage par l'unique intermédiaire du CSS est l'une des conditions les plus importantes pour une accessibilité pratique.

C'est seulement en fonction de cela que la technologie d'assistance peut réutiliser le contenu à volonté, tandis que la présentation visuelle peut être complètement ignorée. L'externalisation de la présentation dans des feuilles de style donne, par exemple, aux utilisateurs malvoyants, la possibilité de définir des feuilles de style propres dans leur navigateur pour que les pages s'adaptent exactement à leurs besoins. Une présentation linéaire des contenus et une structure sémantique adéquate sont particulièrement importantes pour les utilisateurs de lecteurs d'écran.

Les lecteurs d'écran saisissent le contenu d'un site de haut en bas, c'est à dire linéairement. L'utilisation poussée de tableaux entrave la linéarisation.

Derrière le terme Web sémantique, la plupart des gens ne peuvent pas faire jouer leur imagination. Vous y associez sans doute des leçons de langage, mais cela joue aussi un rôle spécial dans l'écriture du contenu Web. Par exemple les lecteurs d'écrans permettent à leurs utilisateurs de sauter d'en-tête en en-tête, ou de liste en liste, pour avoir un rapide aperçu général du document. Si un document Web n'a aucune en-tête, cette fonctionnalité n'est pas disponible.

La structure formelle d'un document web doit correspondre en grande partie à la structure du contenu. Selon le projet Web le choix de la hiérarchie des rubriques peut être un véritable challenge.

Aujourd'hui, on peut trouver ce concept non seulement dans les templates, mais dans tout ce qui est produit par Joomla!. Dans le développement de Joomla ! 1.6, c'était un élément central du travail de développement. Les raisons étaient, en plus de  faciliter l'utilisation des technologies d'assistance, également l'optimisation pour les moteurs de recherche (SEO) et une meilleure ergonomie pour les appareils mobiles. Du code bien structuré aide non seulement les personnes handicapées à mieux se diriger dans un site, mais aussi google qui apprécie un site bien pensé.

Ancres de liens

La présentation linéaire du contenu présente un grand inconvénient: Vous pouvez devoir parcourir un chemin très long, avant d'accéder aux zones du "fin fond" du site.
Sur l'écran, une mise en page trois colonnes permet qu'un certain nombre de secteurs commencent « en haut » et que l'œil arrive droit dessus, lorsque, soutenu par les aides visuelles, il soupçonne des informations intéressantes.

Le remède proposé est le concept des ancres. C'est, en fait, une contrepartie non visuelle à la mise en page graphique qui permet à l'utilisateur d'appareils de lecture linéaire d'identifier des domaines clés au début de la page et ensuite d'immédiatement passer à la zone où il croit que les renseignements qui l’intéressent se trouvent.

Dans la pratique, l'utilisation d'ancres signifie mettre en place un menu supplémentaire en haut de chaque page pour la navigation interne de la page. Dans la plupart des cas, il sera utile de masquer ce menu dans la disposition graphique. C'est irritant pour les utilisateurs qui peuvent voir, de cliquer sur un lien, mais que rien (apparemment) ne se passe parce que la cible du lien est déjà visible dans la fenêtre.

En tous cas, le « menu de liens d'ancrage » ne devrait pas être trop long et construit d'une manière très bien pensée-à travers, parce qu'il prolonge et complique, en raison même de la linéarisation, le chemin de la perception. En général, il est recommandé de proposer le contenu principal comme première cible, ainsi les visiteurs réguliers, qui connaissent le site et gèrent la navigation plus précisément, trouvent le plus court chemin pour aller vraiment où ils veulent..

Au moins ici, cela devient clair que des sites Web particuliers avec des pages de contenu plus complexes n'ont pas seulement besoin d'une mise en page graphique, mais aussi d'une conception du contenu qui vise à organiser le contenu sous une forme ne contenant pas d'obstacles inutiles pour les utilisateurs de "linéarisation".

 

Exemple:

<ul class="skiplinks">
  <li><a href="#main" class="u2">Passer au contenu</a></li>
  <li><a href="#nav" class="u2">Aller à la navigation principale et connectez-vous</a></li>
</ul>

Le Choix des couleurs

Le choix des couleurs est, dans le contexte de l'accessibilité, d'une importance particulière parce que les gens avec une vision des couleurs amoindrie devraient pouvoir utiliser votre site Web entièrement.

Si vous convertissez une mise en page dans des nuances de gris, vous vous ferez une idée approximative de ce que les daltoniens peuvent voir. Cependant, la perception est très personnelle et dépend de la gravité des différents degrés d'ametropie. Beaucoup de daltoniens, cependant, ont appris au cours de leur vie, quelles couleurs sont représentées par ce qu'ils voient. Ils savent, par exemple, que l'herbe est verte, et ils peuvent identifier par comparaison les autres nuances de vert.

Beaucoup plus répandue que le daltonisme total, il y a la cécité dite de couleur rouge-vert. Touchés par une anomalie génétique, les personnes ne sont pas capables de distinguer le rouge du vert. Des couleurs mélangées qui contiennent ces composantes de couleur sont brouillées pour eux.

Contrastes

Les couleurs jouent également un rôle important dans différents autres types de déficience visuelle, non seulement en raison de la couleur elle-même, mais aussi un important contraste peut être utile dans l'utilisation d'une page web.

Les couleurs de premier plan et d'arrière-plan dans des éléments des textes devraient former un contraste distinct, bien qu'il ne soit pas possible de choisir les arrangements de couleur et de contraste, qui peuvent répondre à toutes les exigences. Du texte noir sur fond blanc réalise un contraste maximum de couleur. Pour éviter les effets d'éblouissement gênants, une légère teinte de l'arrière-plan peut être utile. Quelques personnes malvoyantes auront besoin de contrastes très forts pour séparer les différents éléments du contenu entre eux. Pour eux, les combinaisons de couleurs telles que le texte blanc sur un fond orange vif, contrasté ne sont pas assez riches. En revanche, les autres contrastes forts agissent comme un rayonnement - le contenu est difficile à lire.

Beez_20: Choix du Design

Dans le template Beez 2.0, vous pouvez choisir entre un design personnel et nature. La mise en œuvre des fichiers nature.css et personal.css via les paramètres de template ainsi que la structure des fichiers CSS utilisés sont à la base de cette méthode.

cocoate.com/node/8049Beez

Figure 1: Choisir le style

Il y a deux fichiers supplémentaires qui sont responsables de l'arrangement de la couleur. Les fichiers position.css  et layout.css sont responsables du positionnement et l'espacement.

Aimeriez-vous changer par la suite uniquement les couleurs du template, vous pouvez simplement modifier les fichiers personal.css ou nature.css comme vous le voulez. Le positionnement du contenu reste le même, tels qu'ils est défini dans d'autres fichiers.

Tous les modèles de style sont encore arbitrairement modifiables et peuvent être édités par les développeurs de templates afin d'inclure d'autres modèles.
Dans la conception du code source, j'ai pris en compte la possibilité de variations créatives maximales par la modification des fichiers CSS. Je vous dis que très, très tranquillement, mais à leur manière, les templates de Beez sont quelque chose comme des cadres qui vous feront économiser beaucoup d'étapes de travail.

Position de la Navigation

Pour des raisons esthétiques ou pour améliorer la convivialité et l'accessibilité des moteurs de recherche, il peut être nécessaire de positionner la navigation avant ou après le contenu. Les deux versions des templates Beez vous permettent de choisir entre ces deux options dans le backend.

cocoate.com/fr/node/10473Sélectionnez la position de la navigation

Figure 2: Sélectionnez la position de la navigation

La navigation est visuellement et sémantiquement positionnée avant ou après le contenu et mis en forme par l'utilisation de CSS.
Si vous ouvrez  index.php dans beez_20 ou dans le modèle que vous avez déjà modifié, vous pouvez trouver autour de la ligne 27 l'affectation suivante :

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

La variable $navposition est affectée à la valeur actuellement sélectionnée dans le backend. La variable renvoie la valeur left ou center. Left représente la position avant le contenu, center le positionne après le contenu.

Le terme center peut prêter à confusion ici, Il serait logiquement préférable de dire "right". Mais, selon la façon dont vous concevez le CSS, vous pouvez placer la navigation dans un mise en page trois colonnes au milieu.

JavaScript et WAI ARIA

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) est une spécification technique de la Web Accessibility Initiative (http://fr.wikipedia.org/wiki/Web_Accessibility_Initiative), qui facilitera la participation des personnes handicapées dans les services web actuels de plus en plus complexe et interactif. Cette technique est particulièrement utile dans la conception de présentations de contenu dynamique et d'interfaces utilisateur. La technique est basée sur l'utilisation de JavaScript, Ajax, HTML, et CSS.

Les non-voyants, en particulier, perdent souvent leur orientation lors de la visite d'un site dont le contenu est tout à coup affiché ou masqué. Les personnes voyantes percevront ce changement avec les yeux, les personnes non-voyantes ne le comprennent que lorsque le focus est placé sur l'objet.

Le focus ne signifie rien d'autre que le fait de placer le curseur à l'endroit approprié pour rendre le contenu accessible.

En HTML et XHTML, nous n'avons pas eu l'occasion de mettre le focus sur tous les éléments. Seuls les éléments d'interaction comme des liens, des boutons ou des champs de saisie sont "focusables". Cela a changé avec l'utilisation de WAI ARIA et HTML5.

Les scripts utilisés dans les templates de Beez s'appuient sur cette technique pour rendre le template accessible aux personnes handicapées.

WAI ARIA - Rôles des sections: Premiers secours pour l'orientation

Les rôles des sections sont destinées à faciliter l'orientation sur un site Web en décrivant les zones de page et leur fonction exacte au sein de la page. La navigation a le rôle navigation, recherche a le rôle search, le contenu principal a le rôle main. La mise en œuvre est assez simple. L'élément s'étend seulement à l'attribut rôle approprié. Ainsi, les utilisateurs de lecteurs d'écrans modernes seront informés de ce rôle.

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

À l'intérieur du template Beez, cela est effectué automatiquement à l'aide de javascript (javascript/hide.js). L'approbation de la technologie de Wai-Aria est toujours en attente et, avec la mise en œuvre directe dans le code source le site Web ne passerait pas le test de validation.

On trouvera un aperçu complet des rôles de sections à http://www.w3.org/TR/wai-aria/roles#landmark_roles. (en anglais)

Si plus tard, vous utilisez le template Beez comme base pour votre propre template et modifiez la structure des zones de la page, vous devrez adapter le script en conséquence.

Modules et barres latérales déroulants

L'activation et la désactivation de certains secteurs peuvent être utiles pour l'utilisateur, particulièrement sur les pages avec beaucoup de contenu. Les deux templates beez fournissent deux façons différentes de le faire. Tout d'abord, la colonne avec des informations complémentaires peuvent être entièrement activée ou désactivée, d'autre part, les modules peuvent être réduits à leurs en-têtes.

Masquer la colonne

Pour tester cette fonctionnalité, vous devez placer un module dans la colonne avec plus d'informations. Les positions de module position-6, position-8 et position-3 sont disponibles. Peu importe que la navigation soit avant ou après le contenu, chaque fois que cette colonne est affichée, un lien apparaît juste au-dessus avec le texte "fermer les infos".

cocoate.com/fr/node/10473Masquer la colonne

Figure 3: Masquer la colonne

En activant ce lien, la colonne est masquée, le texte du lien changera pour « ouvrir les infos » et la colonne va être réactivée en cliquant dessus.

Cette fonctionnalité est contrôlée par JavaScript. Tous les scripts mentionnés ici sont basés sur le framework Mootools JavaScript fourni, ce qui diminue notre travail dans de nombreux domaines.

Le fichier hide.js dans le dossier JavaScript du template est chargé de montrer et cacher la colonne.

Dans l'index.php du template, autour de la ligne 194, vous trouverez le code HTML nécessaire.

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

Les contenus textuels des variables JavaScript sont contrôlés par les chaînes de langue Joomla.

Afficher et masquer les modules

Un des plus grands défis dans la conception d'un site web est la structuration claire du contenu. Surtout sur la page d'accueil, vous avez souvent besoin de placer une variété d'informations sans encombrer la page.

cocoate.com/fr/node/10473beez-Slider

Figure 4: beez-Slider

Les deux templates Beez vous permettent de présenter les modules sous la forme de sliders.

Ici, le premièr affichage est le titre du module. En cliquant sur le signe plus à côté de la rubrique, le module s'ouvre et son contenu devient visible. Puis, le signe plus est remplacé par un signe moins et le module peut être replié. Même avec cette méthode j'ai utilisé la technologie WAI ARIA.

Afin d'utiliser des modules tels que décrits, ils devraient être intégrés dans le template en utilisant la commande

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

En utilisant le style = "beezHide"  tous les modules qui sont chargés à cette position sont affichés comme des sliders.

Vous avez peut être remarqué que la commande comprend l'attribut "state", qui contrôle si le module est développé ou réduit.
Si vous choisissez la valeur 0, il est fermé quand il se charge pour la première fois, sélectionnez la valeur 1 et il sera ouvert par défaut et pourra être fermé par l'utilisateur.

Onglets accessibles

La présentation du contenu dans ce qu'on appelle des onglets est de plus en plus populaire. Il existe déjà des modules d'extensions Joomla ! avec cette fonctionnalité. Mais aucun des modules proposés ne satisfait aux exigences d'accessibilité.

cocoate.com/node/8049Beez

Figure 5: Onglets Beez

La solution intégrée à Beez est basée sur les techniques WAI-ARIA pour assurer l'accessibilité. Pour représenter les modules dans des onglets, ils sont intégrés comme suit.

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

Tous les modules placés en position-5 sont disposés automatiquement sous la forme d'onglets. Vous contrôlez l'affichage HTML par l'intermédiaire du style beezTabs. L'utilisation de l'attribut id = "3" est obligatoire. La raison se situe dans la structure des JavaScripts utilisés. Imaginez, vous souhaitez intégrer des modules à différents endroits dans votre template. La fonction JavaScript nécessite une information unique sur l'endroit où les onglets devraient être ouverts et fermés. Si cette information est manquante, le script ne fonctionne pas comme souhaité. Veuillez utiliser à cet endroit des numéros uniques pour l'id.

Ajuster la taille de police

Dans l'en-tête de la mise en page l'utilisateur peut changer la taille de polices. La base technique de cette fonction peut être trouvée dans le fichier JavaScript templates/your_name/JavaScript/md_stylechanger.js. Dans le index.php vous insérez un conteneur div avec id="fontsize" .

Cette zone est initialement vide et sera ensuite remplie dynamiquement avec le contenu en utilisant JavaScript. Si vos visiteurs ont désactivé JavaScript, cette fonction n'est pas disponible.

Certains pourraient se demander pourquoi cette fonction est encore nécessaire, puisque tous les navigateurs dispose d'une fonction pour augmenter la taille de la police. Pour les personnes âgées cette technique revêt souvent une importance particulière, étant donné que la plupart d'entre eux ont une vision plus ou moins altérée. Toutefois, et particulièrement les personnes âgées, elles connaissent très mal les fonctionnalités des navigateurs web et recherchent une offre visible.

beez5: utiliser HTML5

Le template Beez5 est à peine différent de beez_20, excepté quelques aspects de design. Les fonctionnalités offertes sont largement identiques.

La seule différence: beez5 permet l'utilisation de HTML5. Si vous jetez un oeil aux paramètres du template beez5, vous voyez que vous pouvez choisir entre du code HTML5 et XHTML. Ceci est basé sur les remplacements de templates HTML5, que vous trouvez dans le dossier HTML de votre template.

HTML5 fournit une variété de nouvelles possibilités et apportera un certain nombre de changements et de servitudes à l'avenir, mais ce n'est pas encore une norme approuvée (Mars 2011). Bon nombre des options proposées ne sont pas applicable actuellement de manière fiable, mais d'autres peuvent déjà être utilisées sans difficulté.

Une partie très importante, qui fonctionne déjà, sont les nouveaux éléments structurants. HTML4 et XHTML avaient un faible poids sémantique. Cela s'est grandement amélioré avec HTML5.

Nous disposons maintenant d'éléments vraiment pratiques pour structurer la page.

Avec les éléments

  • header
  • footer
  • aside
  • nav

vous pouvez structurer une page magnifique.


Des éléments tels que

  • section
  • article
  • hgroup

vous aident à donner plus d'importance au contenu réel.

Le code HTML5 dans Beez5 emploie seulement les éléments qui sont fiables actuellement. Seule la version 8 d'Internet Explorer a quelques problèmes, comme toujours.

Dans le haut de la page un script est inséré, intègrant les éléments inconnus dans la structure du document existant.

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

Les bases pour l'intégration du HTML5 dans Joomla! sont les surcharges de template et la réponse au langage de balisage sélectionné via le paramètre de modèle dans la index.php. Parce que le template permet d'utiliser deux langages de balisage différents, vous devez aborder cette possibilité dans index.php.

Clairement dit: La construction du index.php est assez compliquée, car selon le langage de balisage sélectionné un autre code HTML est généré.
Cela commence par la définition du type du document.

Si vous ouvrez le index.php du template Beez5, vous pouvez immédiatement voir ce que je veux dire.

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

Ce concept est appliqué à la page entière et les éléments HTML5 ne peuvent être délivrés que si HTML5 a également été sélectionné dans le backend.

Si plus tard vous voulez construire votre propre template en HTML 5, il serait préférable de supprimer toutes les requêtes et les éléments XHTML et de sortir directement le code en HTML 5.