Se encuentra usted aquí

Renovando un sitio

Este esta es la explicación del desarrollo de un sitio que construi en Drupal:

Mayte siteMayte 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

Versión: 

Comentarios

orale interesante solucion para tu sitio bilingue, yo aun no me enfrento a ese reto pero lo tendre que resolver pues tengo un sitio de turismo y estoy obligado a incluir esa sección, tu sitio me gusta solo le subiria un poco de calidad a las imagenes de lo demas me parece muy bien. saludos.

para algunos sitios con menos información en los dos idiomas es posible simplemente una duplicación de nodos. saludos

hola, me gusto muho como dejaste ese sitio, pero estoy empezando con drupal y aun no se como pusiste esos menus en la parte de arriba, la foto de la properiaria abarcando esa area, podrias explicar un poco mas, ya que he trato y solo he hechado a perder mis pruebas.

Hola Raven, el menú superior esta hecho en Photoshop las imágenes se recortaron y arme el menú primero en fireworks y luego en dreamweaver, ahora bien como se tenia que hacer el cambio de idioma, cada bloque de imágenes que forma el menú en cada idioma se llama con un código insertado en el template

Hola, yo tb estoy empezando con drupal, y me parece interesante tu página.

Yo en lo q estoy más verde, y es lo q estoy investigando ahora, es la personalización de la web con Drupal, para q no sea lo típico de 1 ó 2 barras de menú, el tipico menú, la típico zona de contenido cen el centro,... y por eso me ha llamado la atención tu página.
Respecto a lo del menú q comentas, he visto como hacer los típicos menús (como enlaces primarios, secundarios, en menú navegación,...), pero no sé como se añade un menú personalizado como el tuyo, el cual has hecho antes con firewoks y dreamweaver.

¿me podrías explicar un poco más como lo has hecho?

Gracias y un saludo.

Hola. Para empezar los menus tipicos de Drupal dan para mucho y tienen la gran ventaja que puedes añadir y cambiar elementos al mismo desde la adminsitración de Drupal.

En cuanto a el menu con imágenes despues de tenerlo en dreamweaver lo que se hace es pegarlo en el tema en el que estes trabajando y ponerle o bien ligas absolutas (no recomendable) o ligas relativas como esta /theme/nombretema/images/
Yo creo que escribire un texto explicando más a detalle como hacerlo.

 

saludos

Gracias, te agradecería si nos explicases un poco más como has diseñado/personalizado tu web.

hola, a lo mejor mi duda suena un poco absurda, pero ya baje algunos templates del drupal, y no puedo abrirlos en dreamweaver! que es el unico editor que sé usar... solo me abre codigos y nada de diseño... como le hago para editar un tema? necesitare algun plugin para poder ver los phps en mi dream?

muchas gracias por la respuesta, saludos!!! mabel.

Efectivamente los archivos de un tema en Drupal son php y si a eso le sumamos que muchos temas que puedes bajar en drupal están hechos con divs y mucha de la estructura esta en el archivo style.css entonces lo único que vez en dreamweaver es código. Para poder ver el diseño requieres tener un servidor instalado localmente en tu maquina para correr php y poder tocar el botón de preview, la otra solución si no quieres instalar localmente, es la de tener un servidor en linea e instalar drupal con los temas que deseas y subir los cambios y luego mirarlos en tu browser.

Para instalar localmente necesitas algo como easyphp para windows:


http://www.easyphp.org

o mamp para macos

http://www.mamp.info/en/index.php

 

 

Hola muy buena la pagina y tus respuestas, se ve que manejas drupal muy bien.
Yo estoy usado drupla 6.x, la verdad me a gustado muchísimo y lo único que me esta complicando es el tema del diseño, quiero crear o adaptar el themes a mi propio diseño.
¿Puedo manejar el estilo css en dramweaver??? y así poder trabajar un poco mas rápido que teniendo que manipular el código de manera manual.

Espero me puedas ayudar. Saludos desde Chile

Hola Enrique, si es posible manejar tanto los archivos css como los archivos php (por ejemplo node.tpl.php) de un tema desde dreamweaver, ahora bien no se si te refieras a poder mirar los cambios que se le hacen al tema? para eso tienes que instalar un ambiente lamp localmente en tu computadora y configurar dreamweaver para poder mirar los cambios en tu navegador pero localmente.

No es usual encontrar este tipo de información, gracias por compartirlam, a mi me sirvio mucho para decidirme por que módulo utilizar eb drupal para mis paginas en varios idiomas

Me gusta mucho este tipo de post donde uno puede aprender mucho del trabajo de otros artistas y tener una referencia de éxito. Por mi parte les quiero compartir una visión muy personal sobre la función que debería cumplir el diseño de una pagina web para la empresa de estos días: http://puntosylineaspublicidad.com/sitio/diseno-web-vendedor-o-como-hace...

Saludos y espero les guste, se agrede comentarios