Blog dedicado a la enseñanza gratuita, utilizando JavaScript, CSS, HTML, PHP, MySQL, UML, Patrones de Diseño.

Desarrollar un sitio multilingüe en Drupal 6.x


Ver directamente en blip.tv
Descargar en formato mp4
Descargar vía iTunes
Feed Rss del Curso
Descargar en formato m4v(iPod, iPhone, iPad...).



Ver directamente en blip.tv
Descargar en formato mp4
Descargar vía iTunes
Feed Rss del Curso
Descargar en formato m4v(iPod, iPhone, iPad...).


Drupal 6 cuenta con un soporte multilingüe que te permite desarrollar sitios Web multilingües con toda facilidad.

El módulo i18n amplía la capacidad de crear y manejar contenidos multilingües además de visualizarlos. Las principales características que agrega son:
  1. Traducción de contenidos dentro de los nodos
  2. Posibilidad de traducir palabras o frases como términos taxonómicos
  3. Agrupación de elementos a fin de suministrar diferentes contenidos por idioma
  4. Opción de selección de idioma, accesible a los visitantes mediante un clic
  5. Autorización para que los administradores de sitios ingresen contenidos en idiomas múltiples
    Abordaremos cómo desarrollar un sitio en Drupal para que éste albergue contenidos en idiomas múltiples, cómo crear y manejar contenidos multilingües y cómo permitir que los visitantes elijan el idioma de visualización.

    Instalación de los módulos necesarios

    El módulo i18n permitirá que tu sitio pueda visualizar fácilmente contenidos en idiomas múltiples.
    Extrae el archivo descargado a ${DRUPAL_HOME}/sites/all/modules/ donde ${DRUPAL_HOME} es la raíz de tu instalación de Drupal 6. Luego de extraer el módulo, se creará un directorio nuevo.
    • ${DRUPAL_HOME}/sites/all/modules/i18n

    Activa los módulos multi-lenguaje

    • http://yourdomain.com/admin/build/modules
    • Administer > Site Building > Modules
    • Activa todos los módulos que se encuentren en "Multilenguaje" y guarda la configuración. *
    * Nota: Este sitio ha sido actualizado a la versión 6.x.1.1 del módulo i18n.

    La versión i18n (internacionalización) utilizada en este tutorial:

    Official releases Date Size Links Status
    6.x-1.1 22 de Junio, 2009 116,08 KB Recomendado para 6.x Actualmente, éste es el lanzamiento recomendado para 6.x.

    Módulos adicionales:

    Es probable que desees activar el módulo path en este momento, si no se activó anteriormente. Ésto permitirá que los contenidos traducidos se encuentren más fácilmente.
    módulo path

    Configurar los idiomas

    Para que el sitio pueda incluir contenidos en idiomas múltiples, estos idiomas primero deben ser agregados.
    Navega a /admin/settings/language y selecciona "Agregar idioma". Agrega todos los idiomas que desees.

    Definir idiomas
    Observa la advertencia acerca de la configuración del idioma por defecto. Es importante que lo configures pronto. Mira la nota en la discusión sobre la traducción de frases definidas por el usuario (al pié de la página).
    Una vez que agregaste todos los idiomas, ve a Configurar y selecciona la configuración de idiomas deseada. Si no estás seguro, intenta "Sólo Prefijo de Ruta de Acceso" ("Path Prefix Only"). Ésto permitirá que el idioma sea seleccionado por un prefijo de la URL.
    Ejemplo: "/de/contact" establece el idioma de presentación en alemán basado en el uso de "de" en la ruta de acceso.

    Activar el soporte Multilingüe para contenidos

    En este paso, seleccionaremos los tipos de contenido que necesitan traducción. Navega a /admin/content/types y selecciona el tipo de contenido que desearás traducir. En "Ajustar Flujo de Trabajo" selecciona Soporte Multilingüe - Habilitado, con la traducción. Ésto agregará una pestaña "Translate" ("Translate" tab) a la página con el contenido, trataremos este tema posteriormente.
    Repetir la acción para todos los tipos de contenido que desearás traducir.

    Ésto es lo que verás cuando se active el soporte Multilingüe.

    Multilingüe activado .

    Preparar el contenido a traducir

    Determinar el idioma de origen

    Para la traducción de contenidos, debes seleccionar el idioma original en el que se encuentra el contenido. Se puede hacer cuando ingresas contenido nuevo o cuando lo editas.



    Si la pestaña "Translate" ("Translate" tab) no está disponible para tu contenido, entonces es probable que el idioma para ese contenido se ajuste a "Idioma neutro".

    Crear traducciones

    Esta página explica cómo ingresar una traducción manualmente a través de la pestaña Translate, creada por el módulo i18n.
    Si también utilizas el módulo ICanLocalize Translator, la traducción de contenidos se puede manejar a través de un Panel de Control de las Traducciones central y puede ser realizada por traductores profesionales.
    Selecciona la página que deseas traducir y luego selecciona la pestaña "Translate" ("Translate" tab).
    • Selecciona 'agregar traducción':

    • Después ingresa tu traducción:

    • Selecciona 'guardar' para guardar la traducción.

    • La traducción se guardó y ahora cuenta con un enlace al documento de origen.

    Agregar el selector de idiomas

    Navega a /admin/build/block y agrega el selector de idiomas en la barra lateral izquierda

    • Configuración del bloque
    Configuración del bloque 'selector de idiomas'
    • El menú de selección de idiomas ahora se encuentra en la barra lateral izquierda.
    selector de idiomas

    Configurar la portada para cada idioma

    Cuando los usuarios acceden a tu sitio a través de yourdomain.com, los quieres redireccionar a la portada. Cuando acceden a tu sitio a través de yourdomain.com/es, los quieres redireccionar a la portada en español.

    Para poder hacerlo, es necesario que establezcas la ruta de acceso del nodo en la página de inicio. La ruta de acceso o dirección debe ser la misma para todas las versiones de idiomas de la página de inicio.
    Luego, debes ir a la página de administración de la Información del sitio y configurar la ruta de acceso como la Portada por defecto. A continuación explicamos cómo hacerlo, paso a paso.

    1) Edita el nodo para tu página de inicio y configura la dirección URL - ejemplo: trata de configurarla en "home".


    2) Haz lo mismo con el nodo en español que quieres como página de inicio y establece la dirección URL con el mismo valor, "home" en este ejemplo.

    3) Ve a tu página de Información sobre el sitio /admin/settings/site-information y configura la portada con la misma dirección URL - "home" en este ejemplo.

    portada

    4) Guarda la configuración y prueba tus URLs.

    Puedes ver cómo funciona en este sitio:

    Agregar un menú

    Esta página explica cómo ingresar los elementos de menú manualmente y cómo traducirlos utilizando la pestaña "Translate" ("Translate" tab), creada por el módulo i18n.
    Si además utilizas el módulo ICanLocalize Translator, los elementos de menú también serán traducidos junto con los contenidos de los nodos.
    Ahora veremos cómo agregar un elemento de menú a los Enlaces primarios (Primary links) para el idioma por defecto y cómo crear diferentes menús traducidos en otros idiomas. Este elemento de menú se enlazará a la página de inicio de cada idioma y visualizará el texto adecuado para el idioma indicado.

    Existen dos maneras de hacerlo:

    1) Editar la página y agregar un menú
    o
    2) Agregar menús a través de las páginas de administración.


    Método 1:

    1) Ve a tu página de inicio y selecciona "Editar" (Edit), luego haz clic en "Ajustes del menú" (Menú settings) si no puedes visualizarlos.

    Agrega un menú

    2) Ingresa un nombre para el menú, "Home" en este caso

    Agrega un nombre para el menú

    3) Guarda la página. De este modo, se creó el menú "Home" en la página de inicio.

    menú creado

    4) Repite los pasos llevados a cabo con la página de inicio traducida y modifica el título del enlace al menú con la correspondiente traducción de "Home", en este ejemplo, "Inicio" para nuestra página en español.

    Menú de la página en español

    5) A continuación vemos el menú resultante para la página de inicio en español.

    Menú de la página en español



    Método 2:

    Al utilizar este método, creamos los menús desde las páginas de administración.

    1) Navega a http://yourdomain.com/admin/build/menu-customize/primary-links y selecciona "Agregar elemento" (Add item)

    2) Crea un menú para la página de inicio en inglés. Debes configurar la Ruta de acceso (Path), el Título (Title) y debes asegurarte de configurar el idioma en "Inglés" ("English")

    Crea el menú en inglés


    3) Repite la acción para la página de inicio en español y configura la ruta de acceso a la página de inicio en español, el título en español y el idioma en "Español" (Spanish).

    Menú en español

    4) Se obtienen los mismos resultados que con el método 1.





    NOTA: En algunas páginas de administración se muestran ambos menús.

    Ambos menús

    Se diseñó con la intención de que el usuario común sólo visualice los menús en el idioma en uso.

    Utilizar un nombre de dominio diferente para cada idioma

    Drupal facilita la visualización de tus sitios Web en idiomas diferentes desde diferentes dominios.
    Ésto te permite, por ejemplo, tener contenidos en inglés en www.yourdomain.com y contenidos en español en spanish.yourdomain.com.
    Los diferentes idiomas pueden estar en subdominios o en dominios totalmente diferentes, incluyendo dominios de nivel superior (TLDs).
    Para hacerlo, deberás configurar Drupal de modo que pueda visualizar idiomas diferentes en dominios diferentes, también deberás configurar tu servidor Web de modo que enlace todos los dominios al mismo sitio en Drupal.

    Configuración en Drupal

    1) Ve a /admin/settings/language/configure y selecciona "Domain name only" como el idioma deseado.

    Configuración del nombre de dominio

    2) Ve a la página de administración de idiomas, /admin/settings/language y edita cada idioma para poder incluir el nombre de dominio.

    Para el idioma Inglés:
    Dominio del idioma inglés

    Para el idioma Español:

    Configuración del idioma español

    Definición de parámetros en el archivo de configuración del servidor

    Una vez que has configurado Drupal de modo que se pueda visualizar idiomas diferentes en dominios diferentes, debes dar instrucciones a tu servidor Web para que envíe solicitudes desde dominios múltiples al mismo sitio en Drupal.
    En Apache, deberás editar el archivo con extensión .conf y agregar un alias distinto para cada dominio. Por 

    ejemplo:
    ServerName www.yourdomain.com
    ServerAlias spanish.yourdomain.com
     
    Además, también deberás enlazar el servidor de nombre de dominio (DNS - domain name server) al servidor de todos tus nombres de dominio en idiomas diferentes.

    Agregar iconos de idiomas

    En Drupal, es sencillo agregar una bandera para cada idioma en el selector de idiomas con el módulo Iconos de Idiomas http://drupal.org/project/languageicons.

    Iconos de idiomas

    Ve a http://drupal.org/project/languageicons y descarga el módulo para luego instalarlo en tu directorio sites/all/modules. Navega al módulo de administración de tu sitio Web -/admin/build/modules- y activa el módulo "Iconos de Idiomas" incluido en la sección "Multi-lenguaje". Luego sólo tienes que guardar la configuración y listo, las banderas aparecerán en tu selector de idiomas.

    Traducción de los contenidos en los bloques

    El módulo i18n de Drupal puede traducir los contenidos que se encuentran en los bloques.
    Para poder visualizar bloques en idiomas múltiples, puedes utilizar uno de los siguientes métodos:
    1. Crear un bloque diferente para cada idioma.
    2. Usar localización por segmentos.
    Cuando creas un bloque, puedes elegir entre asignarlo a un idioma específico o asignarlo a todos los idiomas usando la traducción por segmentos.

    Método 1: Diferentes bloques para cada idioma

    Selecciona un único idioma para el bloque e indica en qué nodos visualizarlo. Debes seleccionar únicamente aquellos nodos que estén escritos en el mismo idioma que el bloque. Luego, crea bloques similares en otros idiomas y actívalos para los nodos en dichos idiomas. Este proceso mantendrá un aislamiento total entre bloques que estén en diferentes idiomas. Podemos tener traducciones entre bloques, pero es posible que estas traducciones contengan contenidos totalmente independientes. Drupal y el módulo i18n no ofrecen ninguna herramienta que permita sincronizar los contenidos de los bloques que se encuentran en diferentes idiomas.

    Método 2: Localización por segmentos

    Drupal puede traducir segmentos del inglés a otros idiomas (por ahora, no existe la posibilidad de traducir desde un idioma que no sea el inglés). Puedes pedir que Drupal maneje el título y los contenidos de los bloques como si fueran segmentos y que busque traducciones utilizando el mecanismo de traducción por segmentos de Drupal.
    Cuando un bloque se visualiza en un idioma diferente, Drupal busca en el título y en el contenido del bloque las traducciones por segmentos que estén disponibles. Si hay alguna traducción por segmento disponible, ésta se visualizará, de lo contrario lo que se visualizará es el texto original.
    Para utilizar este método, debes seleccionar la opción "Todos los idiomas (traducible)" -"All languages (Translatable)"- al momento de crear o editar un bloque.

    bloque traducible

    NOTA: Un aspecto importante a tener en cuenta cuando se utilice este método es que el idioma por defecto debe ser Inglés. Drupal localiza estos segmentos con la función t(), pensada para ser solicitada cada vez que un módulo produce un segmento en inglés.
    Aquí tenemos un ejemplo. Crearemos un bloque nuevo y traduciremos sus segmentos.

    Crea el bloque y selecciona 'Todos los idiomas (Traducible)' - 'All languages (Translatable)'

    crea un bloque

    Elige dónde se visualizará el bloque

    Este bloque lo visualizaremos en la barra lateral derecha. La posición de visualización no tiene ninguna importancia y no es necesario que el bloque se visualice para que pueda ser traducido.

    bloque en barra lateral derecha

    Ahora lo vemos de la siguiente forma:

    bloque de la página de inicio
    Al seleccionar el idioma español, se puede ver el bloque pero sin la traducción.
    bloque no traducido

    Ingresar manualmente las traducciones de los contenidos en los bloques

    Los segmentos del título y del contenido se traducen utilizando la interfaz de traducción (translate interface).
    Ve a /admin/build/translate/search y busca los segmentos utilizados en el bloque.

    búsqueda de bloque

    Haz clic en "Editar" e ingresa la traducción.

    bloque ingresar traducción

    Repite el mismo procedimiento para el contenido del bloque buscando algún texto en dicho contenido.

    Ya cuentas con un bloque íntegramente traducido en la página de inicio en español.


    bloque traducido al español



    Traducir bloques con ICanLocalize Translator

    ICanLocalize Translator maneja la traducción de bloques utilizando el mecanismo de traducción por segmentos de Drupal.
    Aunque internamente los nodos y los bloques se construyen de manera diferente, ICanLocalize Translator hace que la traducción se vea de la misma manera para el usuario.
    Los bloques aparecerán en el panel de control para las traducciones como cualquier otro tipo de contenido. De manera interna, ICanLocalize Translator buscará los segmentos creados por los bloques en Drupal y devolverá los contenidos traducidos como traducciones por segmentos. Los usuarios no tienen que manejar ésto de modo manual ya que el módulo maneja todo de manera automática.

    Traducciones del núcleo de Drupal

    Drupal ha sido traducido a muchos idiomas. Puedes bajar los diferentes idiomas del portal de traducciones de Drupal.
    Las traducciones realizadas son sólo para Drupal (no para tus contenidos). El uso de las mismas cambiará las páginas de administración a otros idiomas.
    A continuación presentamos algunos de los paquetes de idiomas más comunes:

    Instrucciones para agregar traducciones nuevas

    Descargar e instalar el módulo Localization Client. Es necesario hacerlo para poder importar tanto traducciones nuevas como traducciones actualizadas.
    1. Localiza el archivo del idioma que necesitas. Puedes utilizar el cuadro de 'Búsqueda' que se encuentra del lado derecho de la página de las traducciones.
    2. Descarga el paquete de idioma adecuado para tu versión de Drupal en el directorio raíz de Drupal.
    3. Extrae el contenido del archivo comprimido.
    4. Ve a la interfaz de traducción en admin/build/translate, selecciona "Importar" (Import) y luego "Reimportar paquetes" (Reimport packages). Para realizar este paso, el módulo Localization Client debe ser instalado y activado.

    Preguntas frecuentes

    ¿Qué debo hacer para eliminar el enlace a otras traducciones que se encuentra al pie de mi página?

    Puedes hacerlo desde la página de ajustes Multilingüe: admin/settings/language/i18n
    Selecciona "Ocultar los enlaces de traducción de contenido" ("Hide content translation links").

    Tengo un sitio cuyo idioma por defecto es el inglés. ¿Cómo puedo cambiarlo a alemán?

    Quisiera acceder a los nodos en inglés con example.com/en, y a los nodos en alemán simplemente con example.com.

    PHP Conference BCN en Madrid, España

    Empieza:

    2010-10-29 (All day) - 2010-10-30 (All day) Europe/Madrid; Related event (ie. not Drupal specific)

    Este viernes arranca la PHP Conference Barcelona en el Citilab de Cornellá que ya acogió anteriores ediciones y la Drupalcamp Spain.

    La PHP conference será un evento con ponentes y conferencias de gran nivel técnico.

    Se hablará sobre varnish, PHP for Android, escalabilidad, rendimiento... todo un gran evento para no perdérselo.

    ¿Qué drupaleros vamos al mayor evento de PHP en Europa este año?

    más info:

    http://phpconference.es/

    Spain

    Fuente  drupal.org

    50 Advanced HTML5 Demos to show It’s Power

    Flash vs HTML5 is one of the hottest topic today , but we are not getting in the argument of which is superior to other and which is not. Flash will always be an awesome choice for rich content web applications and games same as HTML5 in developing cool animations and simple gaming applications unless some major development to be made in future years. Today we have collected 50 awesome HTML5 demos to show its potential.

    1. Tunneler


    Tunneler

    2. JuicyDrop


    juicydrop

    3. Magnetic


    Magnetic

    4. Trail


    Trail

    5. Sinuous


    Sinuous q

    6. DDD


    DDD

    7. Harmony


    harmony

    8. Lines go all over the place.


    Lines go all over the place.

    9. Chrome Canopy


    Chrome Canopy

    10. Ball Pool


    Ball Pool

    11. Chain Reaction


    Chain Reaction

    12. Entanglement


    Entanglement

    13. Blob


    Blob

    14. Biolab Disaster


    Biolab Disaster

    15. Google Gravity


    Google Gravity

    16. Core


    Core

    17. Gartic


    Gartic

    18. HTML5 Video Destruction


    HTML5 Video Destruction

    19. The tristan washing machine


    the trista

    20. Changing Background


    Background Changing

    21. HTML5 Drum Kit


    HTML5 Drum Kit

    22. Dynamic Content Injection


    Dynamic Content Injection

    23. Geolocation


    Geolocation

    24. Video for Everybody!


    Video for Everybod

    25. Projekktor Zwei


    Projekktor

    26. ContentEditable


    ContentEditable

    27. Drag and drop


    Drag and drop

    28. Canvas Photo


    Canvas Photo

    29. 360° MP3 player


    360° MP3 player

    30. JaVortex


    JaVortex

    31. 3D Model Viewer


    Javascript 3D Model Viewer

    32. 3D Landscape on HTML5 canvas


    3D Landscape

    33. Stalk Buttons


    Stalk Buttons

    34. JavaScript Fireworks


    JavaScript Fireworks

    35. Blob Sallad


    Blob Sallad

    36. SublimeVideo


    SublimeVideo

    37. Catch it!


    Catch it!

    38. Breakout Clone


    Breakout Clone

    39. Sketchpad


    Sketchpad

    40. Simple Drag and Drop


    Simple Drag and Drop

    41. CanvasPaint


    CanvasPaint

    42. Monster


    Monster

    43. Making waves with html5


    making waves

    44. Starfield


    Starfield

    45. The mesmerizer


    The mesmerizer

    46. Bomomo


    bomomo

    47. Canvas Nebula


    Canvas Nebulaq

    48. Liquid Particles


    Liquid Particles

    49. Moving Cloth in HTML5


    Moving Cloth in HTML5

    50. CanvasMol


    CanvasMol

    Twitter Delicious Facebook Digg Stumbleupon Favorites More