Plantilla Beez

Thank you for your contribution: 

Una plantilla contiene normalmente mucho más de lo que puedes ver a simple vista.

El término plantilla suele estar relacionado con la apariencia visual de un sitio web. Pero, además del diseño, una plantilla se distingue por la forma de su implementación técnica. Esta determina dónde se sitúa el contenido dentro del flujo de documentos, cuándo y dónde ciertos módulos pueden ser mostrados u ocultados, si se usaran páginas de error personalizadas y con qué marcado -versión HTML- debería usarse.

Algunos usuarios a buen seguro estarán familiarizados con la plantilla Beez de Joomla! 1.5. Tanto beez_20 como beez5 son visualmente muy diferentes en su diseño a la versión previa. Para este diseño utilicé un gris neutral para los componentes elementales de la plantilla, como el menú, para proporcionar una solución que armonice con muchos colores.

Incluso en aquel momento, quería desarrollar una plantilla que cumpliera con los estándares, fácilmente accesible y adaptable. Había elegido conscientemente el color morado, con la esperanza de que muchos desarrolladores tomarían el código, lo modificarían y lo harían de libre distribución. Tenía la esperanza de ver aparecer una gran variedad de nuevas plantillas gratuitas basadas en Beez. Desafortunadamente, esto no ocurrió.

Otro fallo fue probablmente que no comuniqué de manera suficientemente clara cual era mi intención con aquel diseño. La salida estaba estructurada de una manera que prácticamente cualquier diseño podría ser implementado de manera clara y sencilla, con sólo unas pequeñas modificaciones del CSS. Mantuve este principio en las nuevas versiones de Beez. Además, en beez5 hay un JavaScript más accesible y una pequeña porción de HTML5. Beez_20 no requiere sobreescrituras de plantilla (template overrides). En Joomla! por fin ya no se usan tablas en el diseño. La nueva salida basada en HTML sigue la estructura de la antigua plantilla Beez.

Los nombres de las clases CSS han sido renombrados y unificados para una mejor comprensión. Esto supone una ventaja tremenda para los diseñadores de plantillas. La salida HTML estándar de Joomla! es limpia y bien formada. No necesitas usar más sobreescrituras de plantilla para generar un código limpio y que cumpla con los estándares. Las capacidades técnicas de ambas plantillas Beez son prácticamente idénticas. Sólo se diferencian en su diseño gráfico. Además, la plantilla beez5 está diseñada para el uso de HTML5.

Las características principales

  • Accesibilidad
  • Posición configurable de la navegación
  • Marcas de roles WAI-ARIA
  • Representación automática de los módulos en pestañas accesibles
  • Efecto 'fade in' y 'fade out' de módulos colapsables
  • Efecto 'fade in' y 'fade out' de columnas colapsables
  • En beez_ 20 puedes elegir entre dos formularios: natural o humano
  • En beez 5 puede usarse HTML5

Accesibilidad General

Para la mayoría de la gente, Internet se ha convertido en la norma. En la red hay disponible información proveniente de todo el mundo y, quizá más importante, también pueden encontrarse ahí ofertas especiales de la tiendecita de la esquina, los horarios de apertura de las oficinas del Registro o la guía telefónica de tu localidad, todo ello accesible desde una pantalla en tu casa. Las molestas llamadas telefónicas o las visitas a la biblioteca ya no son necesarias, ahora uno simplemente busca en internet.
Pero no todo el mundo se beneficia de este desarrollo. Las personas con discapacidades físicas o mentales tienen dificultades para participar plenamente en la sociedad, incluso a pesar de que podrían beneficiarse tremendamente de las tecnologías de la comunicación. Pero a menudo no lo consiguen debido a barreras que dificultan su acceso a la información, o que incluso lo hacen imposible. Muchas de esas barreras pueden ser superadas, si lo que se ofrece es diseñado correctamente.

Los operadores de tiendas online o los bancos que porporcionan servicios de banca online deberían preocuparse de este potencial grupo de clientes, que no es tan pequeño como podría pensarse.

El diseño web accesible aspira a hacer el contenido y la interacción en Internet accesible para todos los grupos de usuarios y dispositivos, si ello es posible.

En torno al 8% de la población de Alemania tiene una limitación física que le hace difícil acceder a la información en Internet. Habitualmente, el término "accesibilidad" en diseño web es identificado con Intenet para personas ciegas. Quiero hacer hincapié en que esto no es todo -de hecho, se trata del grupo más pequeño. A menudo me ha preguntado por qué esto es así. Probablmente la rezo sea que el monitor se ha convertido en el símbolo clásico para un ordenador, y alguien que no ve nada, no puede usarlo. En mi trabajo diario me he dado cuenta de que incluso la gente ciega se desempeña mucho mejor que la gente con otro tipo de discapacidades.

Las personas denominadas ciegas son aquellas cuya visión residual es únicamente un pequeño porcentaje del valor medio habitual. El número de personas ciegas en Alemania oscila entre 150000 y 200000. Algunos de ellos pueden únicamente descifrar textos mediante la configuración de tamaños de letra de ordenador y colores personalizados, mientras que otros necesitan información acústica o leer mediante el tacto usando un dispositivo Braille.

Significativamente mayor es la proporción de personas con discapacidad visual severa.

Alrededor de un cuarto de la población en edad de trabajar se queja de distintos grados de ametropía. Por tanto, el porcentaje es mucho mayor. Algunos de estos problemas pueden ser compensados bastante bien mediante el uso de gafas; otros sólo hasta un límite. Ciertas enfermedades oculares, como las cataratas o el glaucoma, pueden ser solucionadas o al menos mitigadas a través de la cirugía. Algunas, como la retinitis pigmentosa o a retinopatía diabética, llevan a un deterioro continuo de la visión, hasta terminar a menudo en una pérdida total de la misma. En el denominado "túnel de visión", el campo visual de las personas afectadas es extremadamente limitado -a veces tan pequeño como una moneda de 2 euros que es sostenida a un brazo de distancia de los ojos.

Alrededor del 10% de la población masculina sufre de diversas formas de ceguera cromática -lo que normalmente significa que algunos rojos y verdes no pueden ser distinguidos unos de otros. Ciegos a otros colores, ceguera completa a los colores o daltonismo (ceguera rojo-verde) son muy poco frecuentes entre las mujeres.

Otro grupo de usuarios potencial tiene problemas con la tecnología de entrada habitual - no todo el mundo puede usar un ratón o un teclado estándar.

Puede haber muchas razones para esto: brazos o dedos inmóviles o que se mueven espasmódicamente y son difíciles de controlar. Otros incluso carecen de brazos o de manos, o están paralizados de cuello para abajo tras recibir un golpe. Mientras un ser humano sea capaz de enviar una señal binaria controlada -el famoso 0 o 1- puede aprender a manejar un ordenador y sus funciones con el software apropiado.

Hay entre 60000 y 100000 personas en Alemania con una capacidad auditiva extremadamente limitada. Muchos miles de ellas tuvieron problemas para aprender su idioma, y apenas lo dominan de manera imperfecta (al nivel de entre 4 y 6 curso). Esto hace la necesidad de textos más inteligibles más clara.

Para comunicarse entre ellos, pero también para la recepción de contenido extranjero o sofisticado, ellos prefieren la lengua de signos alemana -que es un idioma en sí mismo, independiente del idioma hablado basado en un sistema de signos y gestos.

Atención

No sólo las personas con audición deficiente navegan por interner sin altavoces o con los altavoces apagados. No es suficiente, por ejemplo, dar sólo señales de aviso acústicas - siempre deben ir acompañadas de un mensaje visual claramente interpretable.

Mientras Internet más conquista todas las parcelas de la vida diaria, más disfunciones son visibles: conexiones lentas en el hotel, condiciones de luminosidad incontrolables en un tren en marcha, puestos de trabajo ruidosos.

Toda la gente se beneficia de los sitios web accesibles. No se trata de cumplir todas las reglas hasta su última consecuencia, tal y como se les exige a las instituciones de los gobiernos. Incluso los pasos más insignificantes en busca de la accesibilidad pueden mejorar considerablemente la usabilidad de un sitio web.
Debido a su gran penetración, Joomla! tiene la posibilidad de influenciar muchísimo. Con la plantilla estándar Beez ahora es relativamente fácil crear sitios web que sean accesibles y usables para la mayoría.

Como en Beez 1.5, todas estas cosas que son necesarias para el diseño de plantillas accesibles han sido implentadas en beez_20beez5. Las más importantes son:

  • Separación del contenido y su presentación
  • Estructura semánticamente lógica
  • Enlaces ancla
  • Navegabilidad desde el teclado
  • Contrastes de colores suficientes

Separación de Contenido y Disposición

La primera y más importante regla pra los desarrolladores es la posibilidad de separar completamente el contenido y la disposición del mismo (su "diseño", cómo se distribuye en la pantalla):

  • HTML limpio y puro para el contenido
  • No usar tablas innecesarias en el diseño
  • Formato exclusivamente con CSS
  • Estructura semántica lógica
  • Enlaces ancla

Linealizar el contenido y formatearlo usando únicamente CSS es una de las condiciones más importantes para una correcta accesibilidad.

Sólo entonces la tecnología asistencial tiene la opción de reciclar los contenidos como se quiera, mientras que la presentación visual puede ser completamente ignorada. La externalización de la presentación a hojas de estilos permite, por ejemplo, que los usuarios visualmente impedidos tenganla posibilidad de definir sus propias hojas de estilo en sus navegadores y adaptar las páginas para que encajen exactamente con sus necesidades. Una presentación lineal del contenido y una estructura semántica adecuada es particularmente importante para los usaurios de lectores de pantallas.

Los lectores de pantallas toman el contenido de un sitio de arriba a abajo, esto es, linealmente. El uso extensivo de tablas en el diseño obstruye la linealización.

Tras el término Web Semántica la mayoría de la gente probablemente alcanza a intuir sólo una parte de lo que implica. Tü mismo probablemente asociarás el término a lecciones de lengua, pero también juega un papel especial en la escritura de contenido web. Por ejemplo, los lectores de pantallas ofrecen a sus usuarios la posibilidad de saltar de encabezamiento en encabezamiento o de lista en lista, para que puedan hacerse una idea general rápida sobre el documento. Si un documento web no tiene encabezamientos, esta funcionalidad no estará disponible.

La estructura formal de un documento web debería corresponderse en gran medida con la estructura del contenido. Dependiendo del proyecto web, la elección de la jerarquía de encabezamientos adecuada puede resultar todo un reto.

Hoy día, este concepto puede encontrarse no sólo en las plantillas, sino en toda la salida estándar de Joomla!. Durante el desarrollo de Joomla! 1.6 este tema supuso uno de los ejes centrales del trabajo de desarrollo. Los motivos eran, además de conseguir una mejor usabilidad en tecnologías asistenciales, una optimización para motores de búsqueda y una mayor usabilidad en dispositivos móviles. El código bien estructurado no sólo ayuda a la gente con discapacidades a navegar mejor por un sitio web, sino que incluso Google se siente mucho mejor con un sitio tan bien estructurado.

Enlaces ancla

La presentación lineal del contenido tiene un gran inconveniente: puedes tener que desplazarte un trecho largo para poder llegar al contenido que buscas.
En la pantalla, un diseño de tres columnas permite que un buen número de secciones empiecen "arriba", y que el ojo pueda saltar directamente a ellas, allí donde, apoyado por ayudas visuales, sospeche que hay información interesante.

Como remedio aparece el concepto de ancla. Se trata, de hecho, de la contrapartida no visual del disño gráfico, y permite al usuario de dispositivos de reproducción lineal identificar la áreas de contenido clave al inicio de la página, y desde ahí inmediatamente poder saltar al área donde dicho usuario piense que se encuentras la información que le interesa.

De manera práctica, el uso de anclas supone configurar un menú adicional en la parte superior de cada página para su navegación interna. En la mayoría de los casos será útil esconder este menú en el disño gráfico. Es irritante para los usuarios que pueden ver hacer clic en un enlace y no percibir ningún resultado aparente, dado que el destino del enlace ya es visible en la pantalla.

En cualquier caso, el "menú de enlaces ancla" no debería ser demasiado lango, y estar construido de una manera muy bien pensada, ya que, debido a la propia linealización, extiende y complica la ruta de percepción. En general es recomendable ofrecer el contenido principal como el destino del primer salto, de modo que los visitantes habituales, que saben que el sitio maneja la navegación de una forma específica, tengan a mano el camino más corto hacia donde realmente quieren llegar.

Al menos aquí se hace patente que, particularmente en los sitios web con páginas de contenido más complejas, no basta con un diseño gráfico, sino también un diseño del contenido que aspire a organizar el contenido de tal manera que no contenga barreras innecesarias para los usuarios de clientes de linealización.

Ejemplo:

<ul class="skiplinks">
  <li><a href="#main" class="u2">Saltar al contenido</a></li>
  <li><a href="#nav" class="u2">Saltar a la navegación principal y al inicio de sesión</a></li>
</ul>

La elección del color

La elección del color es, en el contexto de la accesibilidad, de particular importancia, ya que incluso la gente con discapacidad visual cromática debería ser capaz de usar tu sitio web por completo.

Si conviertes tu diseño a una escala de grises te harás una idea aproximada de lo que las personas con ceguera cromática pueden ver. Sin embargo, la percepción es muy personal, y depende de la gravedad del grado de ametropía. Muchas personas con ceguera cromática han aprendido a lo largo de sus vidas qué colores están representados por lo que ven, por el contexto. Saben, por ejemplo, que la hierba es verde, y pueden identificar por comparación otros tonos de verdes.

Mucho más extendido que la ceguera cromática total es el denominado daltonismo. Ocasionado por una anomalía genética, las personas que lo sufren son incapaces de distinguir los colores rojo y verde. Las mezclas de colores que contienen como componentes a estos dos son borrosas para ellas.

Contrastes

Los colores también juegan un papel importante en varios otros tipos de discapacidades visuales, no sólo debido al color en sí mismo, sino también por su contraste. Un contraste de colores significativo puede ser de gran ayuda en el uso de una página web.

Los colores de primer plano y de fondo entre los elementos de texto deberían formar un contraste distintivo, aunque no es posible seleccionar las configuraciones de color y contraste que satisfagan todos los requerimientos. El texto negro sobre un fondo blanco consigue el máximo contraste de color. Para evitar efectos de reflejo perturbadores, difuminar levemente el fondo puede ser de ayuda. Algunas personas con discapacidad visual necesitarán contrastes muy fuertes para separar unos elementos individuales del contenido de otros en una página. Para ellas, las combinaciones como un texto blanco sobre un fondo naranja brillante no son suficientes. Por contra, otros contrastes fuertes actúan como una radiación - el contenido es difícil de leer.

beez_20: Elección del diseño

En la plantilla Beez 2.0 puedes elegir entre el diseño "personal" y el "nature". La implementación de los archivos nature.csspersonal.css a través de los parámetros de la plantilla, asó como la estructura de los archivos CSS utilizados, es la base de este método.

cocoate.com/node/8049Beez

Figura 1: Elige el estilo

Hay dos archivos más que manejan el esquema de colores. Los archivos position.csslayout.css son los encargados de el posicionamiento y espaciado generales.

Si más adelante te gustaría cambiar los colores de la plantilla, puedes somplemente modificar personal.cssnature.css según tus necesidades. El posicionamiento del contenido permanecerá igual, ya que está definido en otros archivos.

Todas las plantillas de estilo son arbitrariamente modificables, y pueden ser ajustadas por desarrolladores de plantillas para incluir plantillas adicionales.
En el diseño del código fuente he tenido en cuenta el poder ofrecer la mayor cantidad posible de variaciones mediante modificaciones de los archivos CSS. Lo que te estoy diciendo es que muy, muy calladamente, pero a su manera, las plantillas Beez son algo parecido a un framework de desarrollo de plantillas, y pueden salvarte muchos de los pasos necesarios a la hora de crear plantillas para Joomla!.

Posición de la Navegación

Por motivos estéticos o para mejorar la optimización para motores de búsqueda y la accesibilidad, puede ser necesario colocar la navegación antes o después del contenido. Ambas versiones de la plantilla Beez te permiten elegir dos opciones en el backend.

cocoate.com/node/8049Beez

Figura 2: Seleccionar la posición de la navegación

La navegación está visual y semánticamente situada antes o después del contenido y se le da formato mediante CSS.
Si abres el archivo index.php de beez_20 o de la plantilla que ya has modificado, puedes encontrar sobre la línea 27 la siguiente asignación:

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

La variable $navposition es asignada al valor seleccionado en el backend. La variable espera los valores left o center. Left representa la posición antes del contenido, center se usa para el posicionamiento tras el contenido.

El término center puede parece un poco confuso aquí. De acuerdo a la lógica sería mejor decir right. Pero dependiendo de cómo diseñes el CSS, puedes colocar la navegación en el centro de una vista de tres columnas.

JavaScript y WAI ARIA

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) es una especificación técnica de la Web Accessibility Initiative (Iniciativa para la Accesibilidad Web - http://es.wikipedia.org/wiki/Web_Accessibility_Initiative) que facilita la participación de las personas con discapacidades en los cada vez más complejos e interactivas servicios web de hoy en día. Esta técnica es particularmente útil a la hora de diseñar presentaciones de contenido dinámico e interfaces de usuario. Esta técnica está basada en el uso de JavaScript, Ajax, HTML, y CSS.

Sobre todo las personas ciegas suelen perder la orientación cuando visitan un sitio en el que el contenido es mostrado o escondido de repente. La gente que puede ver es capaz de percibir estos cambios con los ojos,  mientras que la gente ciega sólo pueden entender estos cambios cuando el foco está situado en el elemento que aparece y desaparece.

Por foco nos referimos nada más que a situar el cursor en el lugar apropiado para hacer el contenido indicado accesible.

En HTML y XHTML no teníamos la oportunidad de centrar el foco en todos los elementos. Sólo los elementos de interacción como enlaces, botones o campos de entrada eran "enfocables". Esto ha cambiado con el uso de WAI ARIA y HTML5.

Los scripts usados en las plantillas Beez se basan en esta técnica para hacer las plantillas accesibles a personas discapacitadas

WAI ARIA - Landmark Roles: Primeros auxilios para la orientación

La intención de los "Landmark roles" (roles de marcado) es facilitar la orientación en un sitio web describiendo áreas de la página y su localización exacta dentro de la misma. La navegación tiene el rol navigation, la búsqueda tiene el rol search, el contenido principal tiene el rol main. La implementación es bastante simple. El elemento es extendido sólo al atributo apropiado del rol. Así, los usuarios de los modernos lectores de pantalla serán informados de dicho rol

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

Dentro de la plantilla Beez esto se hace automáticamente usando javascript (javascript/hide.js). La aprobación de la tecnología WAI-ARIA está aún pendiente, y por tanto implementarla directamente dentro del código fuente del sitio web provocaría que los tests de validación fallaran.

Un completo resumen de los landamark roles puede encontrarse en este enlace (en inglés) http://www.w3.org/TR/wai-aria/roles#landmark_roles.

Si usas la plantilla Beez como base para tu propia plantilla y modificas la estructura de las áreas de página, deberías adaptar el script consecuentemente.

Módulos y columnas colapsables

La activación y desactivación de ciertas áreas puede ser útil para el usuario, especialmente en páginas con mucho contenido. Ambas plantillas Beez proporcionan dos maneras de hacerlo diferentes. Primera, la columna con información adicional puede ser mostrada u ocultada, y por otro lado, los módulos pueden ser colapsados dejando únicamente visibles sus títulos.

Esconder la columna

Para probar esta funcionalidad debes colocar un módulo en la columna de información adicional. Las posiciones de módulos position-6position-8 y position-3 están disponibles en esa zona. No importa si la navegación está situada antes o después del contenido, cuando esta columna se muestre aparecerá un enlace justo encima con el texto "close info" (cerrar información).

cocoate.com/node/8049Beez

Figura 3: Ocultar Columna

Activando este enlace, la columna será ocultada, el texto del enlace cambiará a "open info" (abrir info) y la comunla será reactivada al hacer clic en él.

Esta funcionalidad es controlada por JavaScript. Todos los scripts mencionados están basados en el framework JavaScript Mootools que viene con Joomla, que disminuye la cantidad de trabajo que los diseñadores tenemos que hacer en muchos aspectos de la creación de una plantilla.

El archivo hide.js que hay dentro de la carpeta JavaScript de la plantilla es el responsable de mostrar y ocultar la columna.

En el index.php de la plantilla, alrededor de la línea 194 encontrarás el código HTML necesario.

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

Los contenidos textuales de las variables JavaScript son controlados con las cadenas de idioma de Joomla.

Mostrar y ocultar Módulos

Uno de los mayores desafíos a la hora de diseñar un sitio web es la estructuración clara del contenido. Especialmente en la página principal, a menudo necesitarás colocar una amplia variedad de información sin que la página de la sensación de estar abarrotada.

cocoate.com/node/8049Beez

Figura 4: beez-Slider

Ambas plantillas Beez ofrecen la posibilidad de presentar los módulos como "sliders" (contenido deslizante).

Aquí, la primera salida es el título del módulo. Haciendo clic en el signo más junto al título, el módulo se abre y sus contenidos serán visibles. Entonces, el signo más es reemplazado por un signo menos, y el módulo puede ser colapsado de nuevo. Incluso para este método he usado tecnología WAI ARIA.

Para usar los módulos de la manera que acabo de describir, deben ser integrados en la plantilla usando el comando

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

Usando el código style = "beezHide" todos los módulos que son cargados en esta posición serán mostrados como sliders.

Puedes haberte dado cuenta de que el comando incluye el atributo "state", que controla si el módulo es expandido o colapsado.
Si eliges el valor 0, estará colapsado cuando se cargue por primera vez; si seleccionas el valor 1, estará abierto por defecto y podrá ser cerrado por el usuario.

Pestañas accesibles

La presentación del contenido en las denominadas Pestañas se está haciendo cada vez más popular. Ya hay módulos que extienden Joomla! con esta funcionalidad. Pero ninguno de los disponibles cumplían con los reqerimientos de accesibilidad.

cocoate.com/node/8049Beez

Figura 5: Pestañas de Beez

La solución integrada en Beez está basada en las técnicas WAI-ARIA para asegurar la accesibilidad. Para mostrar los módulos en pestañas, están integrados como sigue:

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

Todos los módulos situados en la posición position-5 son ordenados automáticamente en pestañas. Puedes controlar la salida HTML a través del atributo Style beezTabs. El uso del atributo id="3" es obligatorio. El motivo está en la estructura del JavaScript utilizado. Imagina que quieres integrar módulos en distintos sitios de tu plantilla. La función JavaScript requiere una información única acerca de dónde deberán ser abiertas y cerradas qué pestañas. Si esta información falta, el script no funcionará como se espera. Por favor usa en este punto sólo números para la id.

Ajustar el tamaño de letra

En la parte superior del diseño el usuario puede cambiar el tamaño de letra. La base técnica para esta función puede ser encontrada en el archivo JavaScript templates/your_name/JavaScript/md_stylechanger.js. Dentro de index.php incluyes un contenedor div con id="fontsize" .

Esta zona está inicialmente vacía y será rellenada dinámicamente con contenido usando JavaScript. Si tus visitantes tuvieran desactivado el JavaScript, esta función no estará disponible.

Algunos pueden estar preguntándose por qué es esta función aún necesaria, pues todos los navegadores tienen la funcionalidad de incrementar el tamaño de letra. Especialmente para la gente más mayor, esta técnica es a menudo de particular importancia, pues la mayoría de ellos tienen una visión más o menos deficiente, y habitualmente estas personas mayores saben muy poco acerca de la funcionalidad de los navegadores web y buscan opciones que estén más "a mano".

beez5: usa HTML5

La plantilla Beez5 apenas se diferencia de la beez_20, aparte de algunos aspectos de diseño. Las características que ofrecen son prácticamente idénticas.

La única diferencia: beez5 permite el uso de HTML5. Si echas un vistazo a los parámetros de la plantilla beez5, verás que puedes elegir entre salida de código HTML5 y XHTML. Esto está basado en las sobreescrituras de plantilla HTML5, que puedes encontrar en la carpeta HTML de la plantilla.

HTML5 proporciona una variedad de nuevas posibilidades, y traerá un buen número de cambios en el futuro, pero aún no es un estándar oficialmente aprobado (marzo de 2011). Muchas de las opciones ofrecidas no son actualmente aplicables de manera confiable, pero otras pueden ser utilizadas ya sin problema alguno.

Una parte muy importante, que ya funciona, son los nuevos elementos de estructuración. HTML4 y XHTML tenían un bajo peso semántico. Esto ha mejorado significativamente con HTML5.

Ahora tenemos elementos realmente prácticos para estructurar la página.

Con los elementos

  • header
  • footer
  • aside
  • nav

puedes estructurar una página maravillosa.
Elementos como

  • section
  • article
  • hgroup

te ayudan a asignar más importancia al contenido real.

El código HTML5 en Beez5 usa sólo elementos que son confiables desde ya. Sólo Internet Explorer Versión 8 tiene algunos problemas... como siempre :).

En la parte superior de la página se inserta un script, que integra los elementos desconocidos en la estructura existente del documento.

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

La base para la integración de HTML5 en Joomla! son las sobreescrituras de plantilla (template overrides) y la respuesta al lenguaje de marcado seleccionado a través del parámetro de la plantilla en el index.php. Dado que la plantilla permite el uso de dos lenguajes de marcado diferentes la aproximación a esta posibilidad debe hacerse desde el index.php.

Dicho claramente: la construcción del index.php es un poco complicada, porque dependiendo del lenguaje de marcado seleccionado se generará un código HTML distinto.
Empieza definiendo el tipo de documento.

Cuando abres el index.php de las plantillas Beez5 puedes ver inmediatamente lo que quiero decir.

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

Este concepto es arrastrado a lo largo de toda la página y los elementos HTML5 pueden ser utilizados sólo si HTML5 fue seleccionado en el backend.

Si más tarde quieres construir tu propia plantilla en HTML5, sería mejor eliminar todas las consultas y elementos XHTML y sacar directamente el código HTML5.