Diseño y temas
Crear themes Drupal con traducción.
Necesito hacer un theme que este en ingles y en español, ¿alguien sabe como lograr esto?
programador necesita
Desarrollador de Drupal es necesario. Contratista independiente paga mensualmente en Western Union. Buenos conocimientos de Inglés escrito requerido. Competitivos precios por proyecto que el trabajo a alrededor de $ 10 por hora. Debe tener equipo propio, espacio de trabajo y conexión a Internet. Mínimo 3 años de experiencia en programación PHP y 1 año de experiencia en Drupal necesario. Por favor enviar curriculum vitae y una lista de sitios que han construido para mives@preferati.com.
Visualizando Zen
Siempre es interesante ver un documento donde se ve de manera más gráfica y esquemática como se compone la estructura de un tema.
En un grupo de Drupal encontré este esquema que muestra como están nombradas las clases e IDs aplicados a los divs que componen las plantillas, faltan las regiones nada más.
Existe una versión de más resolución.
Una lista extensa de temas
Por el usuario de twitter @drupalbjorn me entero de un articulo con una extensa lista de temas (themes) para Drupal. Da gusto ver que cada día existen más
Usando Zen theme
Escuchaba hace poco un podcast de la gente de lullabot sobre diseño de themas en Drupal y mencionaban como uno de los grandes errores que comete casi todo mundo es intentar empezar un thema nuevo a partir de Garland, el thema por default al instalar, siendo que este no es un buen thema para usar como base.
La mejor manera de empezar un nuevo diseño es con un thema pensado como base para ser modificado, una especie de hoja en blanco con una estructura ya definida, pero que permita modificar los espacios y añadir estilos y colores.
Zen theme me parece hasta ahora uno de los mejores themas para empezar a desarrollar algo nuevo. Más alla de las cosas que gustan presumir en un thema como ser table-less o cubrir bien los estandares de WC3, cuando se empieza a trabajar con Zen se encuentra uno con un codigo muy, muy comentado, con archivos css separados por cada una de sus funciones, por ejemplo: html-elements.css para cosas como las ligas (a, a:hover) todos los H1 a H6, tr y demas elementos html, layout-fixed.css para un thema con medidas fijas y layout-liquid.css para un thema flexible (de hecho se puede cambiar cual de los dos usar desde la administración del thema) y hasta un archivo ie.css para todos los trucos para lograr que se vea bien el sitio en versiones viejas (y no tanto) de explorer.
Otra de las ventajas son sus 8 regiones donde se pueden colocar bloques con contenido de esta manera es posible hacer varios acomodos y colocar información dinámica en áreas superiores o bien tener dos regiones diferentes al pie.
La carpeta del thema trae por default dos temas zen y zen classic, pero la idea básica de este tema es utilizarlo como base para crear un thema nuevo, por lo que se usa la carpeta STARTERKIT para empezar, se copia esta carpeta y se re nombra así como el archivo STARTERKIT.info al nombre del nuevo thema, dentro de este archivo que es el que controla todo el thema se seleccionan los archivos css que se usaran y se copian de la carpeta zen los que se quieren usar, todo este proceso se explica a detalle en el archivo README.txt que contiene el thema.
¿ Quien más esta usando Zen theme para desarrollar themas?
Diseño de pagina de inicio
Una manera sencilla de tener más de un diseño dependiendo el contenido o el área del sitio donde se encuentra es editando los archivos .tpl.php que contiene un tema.
por ejemplo para tener una pagina de inicio diferente al contenido se copia el archivo page.tpl.php, que es en el que esta la estructura general del tema y se renombra a page-front.tpl.php.
Después se edita el contenido del archivo ya sea cambiando imágenes o bien llamando un estilo diferente de css.
existen otros nombres como son block.tpl.php para editar bloques, o bien
search-result.tpl.php para los resultando de una búsqueda.
existe dentro del sitio de Drupal una lista de una buena cantidad de estos nombres de archivo para modificar como se verán diversas partes de una pagina, la dirección es:
Recursos para crear temas
En el sitio de Drupal existe una pagina interesante donde se en listan varias direcciones para cosas como validar el código HTML y CSS o revisar la pagina en varios navegadores. Es una buena manera de tener algunos recursos más para desarrollar temas en Drupal.
Renovando un sitio
Este esta es la explicación del desarrollo de un sitio que construi en Drupal:
Mayte Prida es presentadora de televisión en la cadena telemundo, sobreviviente de cáncer, autora y una de las hispanas más prominentes luchando a favor de las mujeres y de la salud en Estados Unidos.
Mayte Prida requería una nueva versión de su sitio: www.mayteprida.com que mostrara más ampliamente su labor, siendo muy importante que el sitio fuera bilingüe, mostrando contenido tanto en español como en ingles.
Nuevo diseño
Con esta nueva versión del sitio se creo un diseño con criterios diferentes, por principio se creo una pagina de inicio con más opciones de navegación y que destacara ciertos elementos como un texto de presentación o ligas a el programa de televisión de Mayte Prida o a la fundación de lucha contra el cancer. El nuevo diseño conserva el color rosa como un color importante (se usa en la lucha contra el cáncer), pero aplicado sin tanto peso, logrando una plantilla mucho más blanca y fácil de leer.
Dos idiomas y un snippet
El sitio necesitaba una solución para mostrar el contenido tanto en ingles como en español, en el sitio anterior simplemente se dividía el sitio desde la pagina en los dos idiomas. Al ser montado el sitio en Drupal la solución es más elegante, permitiendo una pagina de inicio con la interfaz en el idioma del browser de quien lo este observado, para hacer esto se uso el modulo i18n que permite crear un nodo en un idioma y crear su traducción como paso siguiente.
El diseño seleccionado contiene entre otras elementos, un menu diseñado que requeria ser una imagen, al hacer esto no se podia hacer uso de la traducción de la interfaz que permite el modulo i18n, como primera solución se pensó en el uso del modulo taxonomy theme para asignar un tema diferente dependiendo el idioma, el modulo funcionaba a medias ya que continuamente se quedaba con el ultimo tema (theme) seleccionado o bien cambiaba el idioma, pero todos los textos que era imágenes no cambiaban.
La solución que se encontró fue no utilizar el modulo taxonomy theme y usar un snippet que sobre el mismo tema (theme) selecciona que imagen mostrar dependiendo el idioma. De esta manera fue posible al tocar el bloque de traducción (translation block) cambiar tanto de idioma en los textos como en las imágenes del menu, asi como los archivos de flash.
Modulos usados
i18n - para mostrar y cambiar los dos idiomas
TinyMCE - para editar los textos en los nodos
image - para administrar las imágenes y galerías
IMCE - para administrar las imágenes
Traducir no es facil
El modulo i18n esta lleno de detalles y configuraciones que de un inicio resultan atemorizantes, para saber como utilizarlo existe un articulo de Dave Myburgh que lo explica bastante bien y existe una traducción al español.
Comentarios
Se agradecen cualquier comentarios sobre el diseño y el armado del sitio (html +css) así como dudas sobre el uso de los modulos.
Posdata:
Existe una versión en ingles de este texto directamente en el sitio de drupal.org
Diferencias en los temas de Drupal 6 y 5
Existen dos diferencias importantes de un tema en Drupal 6 con respecto a drupal 5 la primera esta en un nuevo archivo que debe tener cada tema de Drupal, es un archivo con terminación .info que sirve para especificar información mínima del tema, es un archivo de texto que contiene información como esta:
; $Id: garland.info,v 1.5 2007/07/01 23:27:32 goba Exp $
name = Coatepec
description = Tema para el sitio ejemplodrupal.com.
version = VERSION
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
stylesheets[print][] = print.css
; Information added by drupal.org packaging script on 2008-04-09
version = "6.2"
project = "drupal"
datestamp = "1207776008"
Esta información se ve reflejada en la pagina de administración de temas, el ejemplo más claro es la parte de description. Este archivo con información sobre el tema no es opcional ya que sin el Drupal simplemente no detecta el tema aun que este bien escrito el código en el archivo page.tpl.php (que es el archivo básico del tema).
El otro detalle que resalta ya dentro del archivo page.tpl.php es como se declaran las columnas laterales en Drupal 5 se escribían así:
<?php if ($sidebar_left): ?>
<?php print $sidebar_left ?>
<?php endif; ?>
En Drupal 6 se declaran de una manera más sencilla:
<?php if ($left): ?>
<?php print $left ?>
<?php endif; ?>
Para saber más a detalle sobre como convertir temas a Drupal 6 existe una pagina