HTML 5 ya está aquí. Más o menos implementados en los nuevos navegadores y con scripts para soportar los antiguos ya podemos empezar a utilizarlos y aprender a usarlos.
La comunidad Drupal ya lleva un tiempo trabajando en adoptar estos nuevos estándares . Aunque no se incluye en el core de la nueva versión Drupal 7 se está trabajando para que Drupal 8 si lo tenga, como se puede ver en este meta-issue “Convert core templates and theme functions to HTML5”. Para estar a la última y participar visita el Grupo Drupal HTML5.
Si queremos crear nuestra web con HTML5 tendremos que hechar mano al theming y a los módulos.
Hay varios temas hechos que sobrescriben el markup , theme-functions adaptadas y un par de módulos (principalmente HTML5 Tools) que amplian está funcionalidad permitiéndonos mayor control.
Módulos
- HTML5 Tools. D6. D7. Este és el módulo principal que tendremos para convertir convertir nuestras web. Permite a los sitios Drupal usar HTML5. Uno de los objetivos es proporcionar un grupo de herramientas para usar con cualquier tema HTML5.
- Soporte para el html5shiv plugin
- Soporte para el innershiv plugin
- Soporte para Google Chrome Frame
- Añade nuevos elementos para usar con Views
- Un montón más de cambios en forms y markup.
- Semantic Views. Un plugins para views que permite que los “unformatted styles, filed row styles y otros sean fácilmente configurable sin la necesidad de sobreescribir las plantillas.tpl.php.
- Semantic CCK. Permite costumizar el output HTML de los fields CCK. Inspirado en el Módulo Semantic Views.
- Semantic Fields ofrece la misma funcionalidad que Semantic CCK para D7.
Otros módulos.
- Elements. Un módulo API que nos permite usar avanzados “form elements” (url, email, search, tel, number, range) en los formularios.
- Remy Sharp's HTML5 Enabling Script. Añade una pequeña cantidad de código a la página de manera que el HTML5 saldrá correctamente en IE. Este módulo es una copia 100% del Remy Sharp's 2009 blog post. Esta funcionalidad se puede encontrar integrada en algunos temas.
Themes
Todos los temas comparten un parecido uso de las plantillas tpl.php y theme-functions a la hora de adaptarse. En Boron y Adaptive Themes podemos ver casi todas las implementaciones.
¿Que tema escoger?
Es difícil si no imposible generalizar sobre cosas así y siempre dependerá de nuestras necesidades y de las del cliente.
Si queremos un tema completo de funcionalidades (no solo HTML5) Omega y Adaptive-Theme es una buena opción. Esto temas son muy configurables a través de la interfaz, perfecto para usuarios finales que quieren meter mano y configurar su web.
Si queremos algo más básico y menos generalista yo usaría temas como Boron, Jbase o Mojo que tiene buena pinta.
Si queremos crear nuestro propio tema desde cero el tema Responsive HMTL Boilerplate viene muy bien documentado y con comentarios, pero de cualquiera de estos temas podemos aprender y tener una idea de como se está implementando HTML5 en Drupal.
- Omega - Responsive HTML5 Base Theme.D6. D7. Un tema HTML5/960gs 100% configurable. Conviene ver la página del proyecto para ver TODAS las características. Parace uno de los temas más completos. Además de contar con módulos para ampliar su funcionalidad.
Nº de plantillas tpl: 14
Las plantillas son especialmente sencillas y vienen claramente con html5 markup. Lo que me hace pensar que no es quizás relevante el número de plantillas. Habrá que hacer pruebas con los temas instalados.
Panel layouts incluidos para 12, 16, 24 columns grids
Parece un buen tema de código limpio y entendible, lleno de características (ejemplo: auto-equal regions script) y módulos que amplian su funcionalidad.
En el template.php
- Trae dos archivos más inc.
- En el código se puede ver el uso de la variable $tag ¿sirve esto para insertar html5 tags?¿quizás desde el GUI?
- Otras cosas: insteresantes funciones no relacionadas a html5, temear el nodo si está siendo visto por el autor, si está en promoción o sticky, first last link clases, heading level h2 por defecto
Subtemas:Gamma, Beta
- AdaptiveTheme. D6. D7. Html starter theme. (la versión 7.2 es un total rescrito del sistema de layout y actualizaciones a html.tpl.php para adaptarse mejor a dispositivos móviles) Conviene ver la página del proyecto para ver TODAS las características.
- Skinr estilos predefinidos
- IE backward HTML5
- Soporte para Panel (9 panels layouts extras)
Para usar todas las funcionalidades se necesita de los siguientes módulos: Block Class, Block Theme
Lo usa como base la empresa del mismo nombre AdaptiveThemes.com
Detalles: dentro del header contiene el tag hgroup, para agrupar el logo, el título y demás.
Todas las plantillas incluyen elementos html5, parece que puede generar un código muy estructurado.
Visto tag “time” en la plantilla comment.tpl.php
Panels: Incluye 9 layouts para
Nº de plantillas tpl: 20
En template.php:
- Se dividen en tres archivos. Gran cantidad de código y funciones.
- Añade el input para el bloque search con el mismo código que Boron. Luego viene código par personalizar los resultados según el tipo de contenido.
- En el código se puede ver el uso de la variable $tag ¿sirve esto para insertar html5 tags?¿quizás desde el GUI?
- Añade un clase al body del wysiwyg para el módulo con el mismo nombre para poder modificarlo sin tocar el body de la web. Con este problema me tengo encontrado un par de veces.
- Un montón de process variables: comments, block....
- Boron (HTML5 base theme). D6. D7. Convierte las plantillas.tpl.php del núcleo en HTML5. Un tema básico que apenas incluye CSS para el layout. Muchos temas parecen basarse en este para su integración en HTML5
- HTML5 shim script included for full IE compatibility
- Search form uses the new input type="search" attribute
- WAI-ARIA accessibility roles added to primary elements
- Updates all core modules to HTML5 markup
- HTML5 doctype and meta content-type.
- Header and Footer sections as header and footer elements. Navigation as nav elements
Sidebars as aside elements.Nodes as article elements containing header and footer elements. Comments marked up as articles with header/footer elements, nested within node elements. Blocks as section elements
Subtemas para Boron.
- Boron for Zen (HTML5 base theme). D6. Boron como un subtema para zen.
- Panels 960gs (HTML5). D7. Contiene una versión tuneada de la plantilla 960gs que permite más control sobre el layout, con o sin márgenes, 10px o 20px...
Nº de plantillas: 10
En template.php
- se puede ver una función para cambiar el input del search para usar el atributo HTML5 "search"
- Función para usar los atributos RDF si el módulo RDF está activado.
- Responsive HTML5 Boilerplate. D7. Un tema que incluye HTML5 + Media querys + Fluid Grid. La idea básica es un prototipo de un diseño adaptivo que se ajusta al viewsport. Parte del artículo CSS3 Media Querys pre-cocinadas
Atención! Según el autor es código experimental Bajo activo desarrollo (dev) usar bajo propia responsabilidad. Mejor usar como documentación.
Viendo en el código: Cada tpl.php viene comentado explicando la integración html5. Buena base para aprender.
Incluye hgroup en el header para los agrupar los distintos elementos: logo, eslogan...
Archivos CSS para distintos dispositivos.
Nº de plantillas 14 + 33 candidatas.
En las plantillas candidatas no pude ver ningún elemento html5 por lo que supongo que están ahí a la espera de su modificación.
En template.php
- El código de Boron para el input tag en el bloque de búsqueda.
- Mejor la accesibilidad del formulario de búsqueda avanzada envolviendo todo en fieldsets.
Aparte de esto poco más para html5. Si incluye funciones para distintos tipos de contenido parecidas a otro de los temas anteriores.
- JBase5. Un tema para themers que incluye los bloques para contruir su tema html5. Está pensado para usarse como un starter theme y desarrollar sobre el sin tener que crear un subtema. No creo que esto se un beneficio, ya que no se podrá actualizar con las mejoras que vayan incorporando.
- Inlcuye dos plugins propios: uno para personalizar el dashboard con dos columnas y otro para crear esquinas redondeadas.
- Estilos para Skins
- En el CSS se puede ver los nuevos elementos HTML5: kbd, mark...
- Incluye Modernizr y Webfontloader.js
Nº de plantillas tpl.php: 15
En el template.php
- HTML5 "search" input attribute
- Cambia la meta content-type tag por defecto a la versión HTML5 corta.
- Usa RDF atributos si el módulo está activado.
- Cambia labels de <span> a <label>
- Muchas más funciones y añadidos de clase en template.php
- HTML5 Base. D7. Un tema diseñado para trabajar con módulo Html5 Tools, para sobreescribir el markup dar una base Html con la cual empezar.
- Ligero y sencillo.
- Docenas de templates.tpl.php
- Incluirá (todavía no) un montón de las mejores prácticas del 2011 para crear responsive, mobile-first sites.
- Añade todos los elementos del header en hgroup
¡Atención! Bajo activo desarrollo (dev) usar bajo propia responsabilidad
Nº de plantillas tpl.php: 25
En template.php:
La versión dev para descargar apenas traia un par de lineas. Buscando en el repositorio git se puede ver un template.php más completo, con funciones para la renderización en distintos dispositivos y añadiendo gran variedad de clases.
- Mojo. Un tema básico usando las mejores prácticas front-end. Quizás no tan popular todavía como otros pero muy completo.
- Accessibility
- HTML5
- Mobile
- Performance
- Responsive Design
Incluye:
- Modernizr
- Mobile metatags, viewport, viewport metatag value
- Force IE usar Chrome Frame si está instalado.
Nº de plantillas: 20
- Los elementos en el header están envueltos con el tag hgroup
- Añade los el menú principal, secundarios y los “breadcrumbs” en el tag “nav”. Esto puede que lo hagan los otros temas, pero solo en este me he fijado ahora y tomo nota.
- Vistos los tags dl
En template.php (incluyes dos archivos en la carpeta inc)
- Añade Modernizr.js
- Añadidos para móviles: metatags y viewport optimizado
- Modifica el HTML si el módulo RDF está activado.
- Sobresecribe o inserta variables a la plantilla del nodo y comentarios. Algunos de estas variables son tags HTML5 como datetime o article
- Cambia el input del campo de busqueda para añdirle HTML5
- HTML 5 (theme/project). D7. En este tema se irán añadiendos los avances en implementar html5 y css3 en D8. No es un tema para usar, pero si para ver el progreso en este área.
Parece que este tema no tiene mucha funcionalidad comparado a otros. Según explican en la página solo añaden los cambios en el “theme-layer” que han sido ya incluidos en el Drupal 8 dev.
Nº de plantillas tpl: 3.
Pocas plantillas. Supongo que irán creciendo con el tiempo, ya que el objetivo es Drupal 8.
En template.php
- Funciones para cambiar archivos css del core por los propios del tema. Ejmp: Cambiar “block.css” por “block.admin.css”
- Plink. D6. D7. (dev) Un starter theme para desarrolladores que quieren las ventajas de los nuevos navegadores pero que funcione en los nuevos.
1. HTML 5
2. One click collapsible layouts
3. Responsive media query based layouts
4. Multiple CSS grid systems (fixed and fluid)
5. Skinr support with prepackaged skin sets
6. Modernizr
7. Sub themes
8. jQuery Mobile default sub theme for use in mobile switching.
Este tema aún no siendo muy conocido parece tener unas características interesasntes. Echar un ojo. Se ve funciones interesantes en el código y muchos tpl.php
Tiene un módulo que permite configurar por path: Plinko
Skins: Estilos skins incluídos.
Plantillas tpl: 16
En el template.php
- Falta por documentar
- Se pueden ver un montón de funciones (bastante distintas a otros temas) para el diseño sensible (responsive)
- Apple Touch Icon
- Añade información Doc Type si el módulo RDF es activado.
- Unas cuantas clases a los nodos y comentarios (interesante de ver)
- Incluye la idea de $tags de Adaptative Themes.
No parece especialmente innovador y html5 especifico este tema.
Bookmark/Search this post with