Cómo localizar tu aplicación de Django

¿Alguna vez te has preguntado cómo los sitios web pueden ofrecer su contenido en múltiples idiomas, adaptado perfectamente a diferentes culturas y regiones? Bueno, esa magia se llama localización y es un cambio de juego para el desarrollo web, especialmente cuando se utiliza Django, un marco de trabajo de Python súper versátil. No se trata solo de traducir.

¿Alguna vez te has preguntado cómo los sitios web pueden ofrecer su contenido en varios idiomas, perfectamente adaptados a diferentes culturas y regiones?

Bueno, esa magia se llama localización y es un cambio de juego para el desarrollo web, especialmente cuando se usa Django, un framework de Python muy versátil.

No se trata solo de traducir texto, también se trata de adaptar tu aplicación a diferentes culturas, con sus costumbres y preferencias únicas. Así que hoy te guiaré a través de la localización de una aplicación Django. ¡Vamos a sumergirnos!

Prerrequisitos

En primer lugar, asegúrate de tener Python instalado en tu máquina. Para este tutorial, asumo que ya tienes conocimientos básicos de Django, así que avanzaremos rápidamente por algunas partes.

Si aún no estás familiarizado(a) con los conceptos básicos de Django, es posible que quieras repasar eso primero. No te preocupes, en Hyperskill, donde trabajo como experto, tenemos algunos rastros de aprendizaje increíbles.

Esto es lo que cubriremos:

  1. Cómo Instalar Django
  2. Cómo Crear un Nuevo Proyecto y Aplicación Django
  3. Cómo Crear un Selector de Idioma
  4. Cómo Localizar tu Aplicación
  5. Cómo Marcar Cadenas en Plantillas Usando {% trans %}
  6. Pluralización
  7. Conclusión

Cómo Instalar Django

Paso 1: Crear un entorno virtual

Generalmente, creamos un entorno virtual para proyectos de Django. Esto ayuda a aislar el proyecto de otros proyectos de Python en tu máquina y mantener las dependencias del proyecto únicas. Ejecuta el comando python -m venv myenv para crear un entorno virtual.

Paso 2: Activar el entorno virtual

Ejecuta source myenv/bin/activate en Unix/macOS o myenv\\Scripts\\activate en Windows para activar el entorno virtual.

Paso 3: Instalar Django

Con tu entorno virtual activo, instala Django utilizando el gestor de paquetes Python pip ejecutando el comando pip install django.

Paso 4: Probar la instalación de Django

Después de la instalación, verifica que Django se haya instalado correctamente ejecutando django-admin --version. Debería mostrar el número de versión sin errores.

Up1Ue0QkBKQkvZp6YggoT-2RkQSPOZ_h8EN46rl8Z_ZqZvM5EmRANoBURpN6oU8SP6OrObUHnHJ5HXnYeZEK5DyPADhfNHb4PNu98xcdIbui8gP18wHtmzTTshLQtEz1uXFk0j1l51c94wv5wCDLVcw

django-admin es el script de línea de comandos que viene con Django. Se utiliza para realizar tareas administrativas como iniciar un nuevo proyecto y manejar las migraciones de la base de datos.

Cómo Crear un Nuevo Proyecto y Aplicación Django

Paso 1: Crear un proyecto Django

Creemos un nuevo proyecto llamado localization_project usando el comando django-admin startproject localization_project.

Este comando creará un nuevo directorio llamado localization_project, que contendrá todos los archivos necesarios para nuestro proyecto Django, como se muestra a continuación.

lasC5Lapd9onrbUJPL_kd51iMMV-n4e31amdbqUl8-452gqE9LPKvw4Tj5S5yGix44fhYAReSF5erlyip6FK4_vUil8pF7zE4hvgt0OZ_emW4QnZYNVUB3MCRse50PoFVeb1QkYgkHUF8grUbTGVc24
Un nuevo directorio llamado localization_project

Para empezar a trabajar en este nuevo proyecto, ve a la carpeta recién creada ejecutando el comando cd localization_project.

Paso 2: Crea una aplicación Django

Necesitas una aplicación con contenido para mostrar cómo se traduce el contenido. Usaré el comando python manage.py startapp homepage para crear una aplicación simple. Una vez más, manage.py es otra utilidad de línea de comandos que actúa como un envoltorio alrededor de django-admin, lo que te permite interactuar con tu proyecto Django de diversas formas. Al ejecutar eso, deberías obtener otra carpeta llamada homepage con muchos archivos de Python.

Paso 3: Define la vista para tu aplicación

Abre el archivo views.py en el directorio de la aplicación homepage y define una vista para la página principal. Para simplificar, nuestra página principal mostrará un saludo, un número en miles y la fecha actual.

from django.shortcuts import renderfrom django.utils import timezonedef home_view(request):    context = {        'greeting': "¡Bienvenido a nuestro Proyecto de Localización!",        'large_number': 12345.67,        'current_date': timezone.now()    }    return render(request, 'home.html', context)

Paso 4: Configura las URLs

Primero, en el directorio localization_project, edita el archivo urls.py para incluir las URLs de la aplicación homepage.

from django.contrib import adminfrom django.urls import path, includeurlpatterns = [    path('admin/', admin.site.urls),    path('', include('homepage.urls')),]

Luego, crea un archivo urls.py en el directorio de la aplicación homepage y establece la URL para tu vista.

from django.urls import pathfrom .views import home_viewurlpatterns = [    path('', home_view, name='home'),]

Paso 5: Crea la plantilla de la página principal

En el directorio de la aplicación homepage, crea una carpeta llamada templates. Dentro de ella, crea un archivo llamado home.html. Aquí es donde diseñarás tu página principal. Agrega el siguiente código HTML:

<!DOCTYPE html><html><head>    <title>Proyecto de Localización</title></head><body>    <h1>{{ greeting }}</h1>    <p>Número: {{ large_number }}</p>    <p>Fecha: {{ current_date }}</p></body></html>

Agrega la aplicación homepage a la lista INSTALLED_APPS en tu archivo settings.py en el directorio localization_project.

INSTALLED_APPS = [    # 'otras aplicaciones',    'homepage',]

Debería ser tu directorio final de localization_project:

OYqBkb5L6wtvrQENqa89O-7F9nJBGdBRA-vb-p-4saAxE1JLFfci3VTM2RENhuB-wdUmf6TLR-QpxrEeT_QdALrNbdTQdMpKNXTwaU2nITbcb6MQgystPD9DJZunddDvX5lGjj6Rc4wpZQIj3VEwnaM
Un directorio final de localization_project

Paso 6: Ejecuta el servidor de desarrollo

Finalmente, puedes ejecutar tu servidor de desarrollo para ver la página de inicio utilizando el comando python manage.py runserver. Ahora, cuando visites http://127.0.0.1:8000/ en tu navegador web, deberías ver tu página de inicio simple mostrando un mensaje de bienvenida, un número en miles y la fecha actual.

<img alt="FgKfmYPAti1Q74jKY5l393qNVjGh4GlRJIDEx2n5uxMG0SB3Ru5J19DX0fmaxSAHgllrCpC3Ky8nTH9HwC3rX_wAgSv-qUSFHjFop-HSsBOgcNYuNI635B4RdkzlxVP_ZO2dHGmE3EGZ2Kh2vRFb1Rg" src="http://cdn.miximages.com/code/1d05682087fa…
Un mensaje de bienvenida, un número en miles y la fecha actual

Cómo crear un selector de idioma

Normalmente, la mayoría de los sitios web muestran contenido en inglés cuando los visitas por primera vez.

Si has visitado un sitio web que admite la localización, probablemente hayas visto un menú desplegable que permite a los usuarios seleccionar entre los idiomas que admite el sitio web. Una vez que el usuario selecciona su idioma preferido, el sitio web establece automáticamente este como idioma predeterminado y actualiza el contenido en consecuencia. Este menú desplegable se llama selector de idioma, que crearás a continuación. Con él, tendrás la opción de permitir a los usuarios cambiar el idioma y ver la funcionalidad de localización en acción, lo cual harás después.

Paso 1: Agrega un formulario de selección de idioma

En primer lugar, modifica tu plantilla home.html para incluir un formulario de selección de idioma. Este formulario contendrá un menú desplegable con las opciones de Inglés, Español y Francés. El formulario se enviará a la vista set_language incorporada de Django, que se encargará del cambio de idioma.

<!DOCTYPE html><html><head>    <title>Proyecto de Localización</title></head><body>    <h1>{{ greeting }}</h1>    <p>Número: {{ large_number }}</p>    <p>Fecha: {{ current_date }}</p>    <form action="{% url 'set_language' %}" method="post">        {% csrf_token %}        <input name="next" type="hidden" value="{{ redirect_to }}" />        <select name="language">            <option value="en">Inglés</option>            <option value="es">Español</option>            <option value="fr">Francés</option>        </select>        <input type="submit" value="Cambiar idioma">    </form></body></html>

Paso 2: Actualiza tu vista

En tu función home_view en views.py, incluye la ruta actual en el contexto para que el formulario sepa dónde redirigir después de cambiar el idioma.

from django.utils.translation import gettext as _

def home_view(request):
    context = {
        'greeting': _("¡Bienvenido a nuestro Proyecto de Localización!"),
        'large_number': 12345.67,
        'current_date': timezone.now(),
        'redirect_to': request.path
    }
    return render(request, 'home.html', context)

Paso 3: Configura la URL para el cambio de idioma

Asegúrate de que tu archivo urls.py en el directorio localization_project esté configurado para manejar el cambio de idioma. Django proporciona una vista para esto, pero debes vincularla en tu configuración de URL.

from django.contrib import admin
from django.urls import path, include
from django.conf.urls.i18n import i18n_patterns

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('homepage.urls')),
    path('i18n/', include('django.conf.urls.i18n')),
]

El patrón de URL i18n incluye la vista de redireccionamiento set_language.

Paso 4: Habilita el middleware para el local

Asegúrate de que el LocaleMiddleware esté habilitado en tu archivo settings.py. Este middleware permite que Django detecte automáticamente la preferencia de idioma del usuario a partir de la solicitud.

MIDDLEWARE = [    # 'otro middleware',    'django.middleware.locale.LocaleMiddleware',]

Paso 5: Ejecuta el servidor de desarrollo y prueba el selector de idioma

Ejecuta tu servidor de desarrollo y visita tu página de inicio. Ahora deberías ver algo similar a la imagen a continuación, con el menú desplegable de selección de idioma con los tres idiomas que hemos elegido.

9yNT9lQNvc6xCh_VvgwkOhygjTW0zogXJRdwhRYUlpEqJ3lngsynnXwbzHpwpI4MPLzeey4-HPJJEW0McsNSJSeKd0kBSDdpzliUUbcSaYvTCJzak-GznTRKLqWnV7W62Kf_aOz3Gi_kfzX8GwlVsVg
Menú desplegable de selección de idioma con los tres idiomas que hemos elegido

Cómo localizar tu aplicación

Esta sección te mostrará cómo traducir el texto de nuestra página de inicio según las selecciones del usuario local.

Paso 1: Habilita la internacionalización en la configuración de Django

Antes de comenzar, asegúrate de que tu proyecto de Django esté configurado para la internacionalización. En tu archivo settings.py, deberás verificar y actualizar las siguientes configuraciones. Probablemente las primeras cuatro configuraciones en el código siguiente vienen por defecto. Entonces, necesitas especificar los idiomas que deseas admitir en tu aplicación, en este caso, inglés, español y francés. A continuación, define la ruta a tu directorio de localización. Aquí es donde Django almacenará y buscará archivos de traducción. Debes crear este directorio manualmente en tu proyecto (en el mismo directorio que el archivo manage.py). Además, recuerda importar el módulo OS en la parte superior del archivo.

LANGUAGE_CODE = 'en-us'TIME_ZONE = 'UTC'USE_I18N = TrueUSE_TZ = TrueLANGUAGES = [    ('en', 'Inglés'),    ('es', 'Español'),    ('fr', 'Francés'),]LOCALE_PATHS = [os.path.join(BASE_DIR, 'locale')]

Paso 2: Marcar texto para traducción

Cuando desarrollas una aplicación web utilizando Django, es esencial recordar que el texto, los números y las fechas se localizan de manera diferente según el idioma y la cultura. Esto se debe a que su contenido y contexto pueden variar mucho.

Por ejemplo, las cadenas de texto deben ser más inherentemente conscientes de su significado y contexto cuando se utilizan en una aplicación. Por lo tanto, para que tu aplicación sea accesible para usuarios de diferentes culturas, debes marcar explícitamente cada cadena que necesita ser traducida. Por otro lado, los números y las fechas son tipos de datos que Django puede formatear automáticamente según la configuración regional. No es necesario marcarlos. Si revisas nuestra aplicación, notarás que pasamos tres valores desde nuestro archivo views.py a la plantilla HTML: una cadena de texto, un número y una fecha. Mientras que no es necesario marcar el número y la fecha para la localización, debes marcar la cadena de texto para habilitar su localización. Para este propósito, Django proporciona la función gettext. Cuando localices tu aplicación, marca cualquier cadena que pases desde la vista a la plantilla HTML que desees localizar. En nuestro caso, marcaremos el texto del saludo con _().

from django.utils.translation import gettext as _from django.shortcuts import renderfrom django.utils import timezonedef home_view(request):    context = {        'greeting': _("¡Bienvenido a nuestro Proyecto de Localización!"),         #otros datos    }    return render(request, 'home.html', context)

Paso 3: Crea los archivos de mensajes

Utiliza el comando makemessages para crear archivos de idioma para cada idioma. Escanea los archivos de tu proyecto de Django en busca de cadenas de traducción marcadas para localización y genera archivos .po, los cuales almacenan las traducciones. Ejecuta estos comandos en tu herramienta de línea de comandos o terminal.

  • Para español: django-admin makemessages -l es
  • Para francés: django-admin makemessages -l fr

Esto creará archivos .po en los directorios locale/es/LC_MESSAGES y locale/fr/LC_MESSAGES.

Paso 4: Traducir archivos de mensajes

Abre cada archivo .po y agrega la traducción para cada cadena debajo de su correspondiente msgstr. Por ejemplo, en el archivo locale/es/LC_MESSAGES/django.po, agregarías lo siguiente:

msgid "Welcome to our Localization Project!"msgstr "¡Bienvenido a nuestro Proyecto de Localización!"

Y agregarías el siguiente texto en el archivo locale/fr/LC_MESSAGES/django.po:

msgid "Welcome to our Localization Project!"msgstr "Bienvenue dans notre Projet de Localisation!"

Paso 5: Compilar archivos de mensajes

Después de traducir, compila estos archivos en archivos .mo, archivos legibles por máquina que Django puede usar. Ejecuta el comando django-admin compilemessages para procesar todos tus archivos .po dentro del proyecto y generar los archivos .mo correspondientes.

Paso 6: Ejecutar el servidor y probar las traducciones

Ahora, prueba tus traducciones usando el selector de idioma en tu sitio web. Actualiza tu página de inicio y deberías ver el mensaje de saludo en el idioma seleccionado:

PvcQ_nIqBHwpavzd-g9XWonKSAsCeZ_Cy80nCxYNZ3pBNIthVug_u-7CGr905Dug41pfXKBoZflcHkeAYHfQI54SutLQKZcU0jw6KlhjTl353pFOz49-I-SVR82gBOYkXiJ8VlzEze4PeLf7fC77YOo
El mensaje de saludo en español
WVeCHfGGlMqSEtGIBuKtFPmFYiWNEanZv66Btk92avC-rpaBQ1XrvSBwdlphmCqDBxd5JxZ5cnoLv2wiXvaobNKPOS21p6kfUe2FbxOkG7W54onAb6Jun5c2FOn1T74HWPoNIdNOCon2cc_kSC_GHeg
El mensaje de saludo en francés

Como puedes ver, el encabezado del proyecto, “Welcome to our Localization Project”, está traducido según el idioma que seleccionamos. También notarás que el número y la fecha se traducen automáticamente al idioma seleccionado. Pero puedes ver que las palabras “Number” y “Date” no están traducidas. No las marcamos para traducción en los pasos anteriores. Cada vez que actualices tu aplicación web con contenido adicional que necesite ser localizado, simplemente sigue los pasos mencionados anteriormente.

Primero, marca las cadenas que requieren localización. Luego, ejecuta el comando makemessages para actualizar tus archivos .po con estas nuevas cadenas. Después, proporciona los textos traducidos relevantes en los archivos .po para estas nuevas cadenas. Finalmente, genera los archivos .mo utilizando el comando compilemessages.

Cómo marcar cadenas en plantillas usando {% trans %}

Como sabes, las palabras “Number” y “Date” no se localizaron en los pasos anteriores. Curiosamente, no puedes marcarlas usando el método gettext ya que no se pasan desde el archivo views.py. Son palabras estáticas en la plantilla HTML. Para localizar texto en plantillas de Django, usa la etiqueta de plantilla {% trans %} proporcionada por Django. Esta etiqueta le indica a Django que traduzca el texto especificado al idioma apropiado según las preferencias de idioma del usuario actual. Vamos a localizar el texto “Number” y “Date” usando la etiqueta de plantilla {% trans %}.

Paso 1: Actualiza tu plantilla con etiquetas {% trans %}

Abre tu plantilla home.html y modifícala para incluir las etiquetas {% trans %} alrededor del texto que deseas traducir. Aquí tienes un ejemplo: recuerda agregar {% load i18n %} al principio del archivo HTML:

{% load i18n %}<!DOCTYPE html><html><head>    <title>{% trans "Proyecto de localización" %}</title></head><body>    <h1>{{ greeting }}</h1>    <p>{% trans "Número" %}: {{ large_number }}</p>    <p>{% trans "Fecha" %}: {{ current_date }}</p>    <!-- Formulario de cambio de idioma -->    <!-- ... --></body></html>

En este ejemplo, las palabras “Proyecto de localización”, “Número” y “Fecha” en la plantilla están marcadas para ser traducidas.

Paso 2: Crea/actualiza los archivos de mensajes en el idioma

Ejecuta el comando makemessages para actualizar los archivos .po de cada idioma.

  • Para español: django-admin makemessages -l es
  • Para francés: django-admin makemessages -l fr

Paso 3: Traduce las nuevas cadenas en los archivos .po

En cada archivo .po, encontrarás las cadenas recién agregadas. Agrega sus traducciones debajo de msgstr para cada idioma. Por ejemplo, aquí está el contenido relacionado para el archivo .po en español:

#: .\homepage\templates\home.html:10msgid "Número"msgstr "Número"#: .\homepage\templates\home.html:11msgid "Fecha"msgstr "Fecha"

A continuación, ejecuta el comando django-admin compilemessages para compilar los archivos de mensajes y ejecuta el servidor de desarrollo para probar la aplicación web actualizada. Ahora podrás ver el siguiente resultado:

36WBImqij72SZsdYIff9LbyEWz2NIiKQCy5Zqh0cGfhxfTwFHh7783qZ_cnyrQ4E7asEbbAg4GMdrwssghE38mMBgIgz52j4Y_6kCPy-YzJ2398j3_PSkZVjMYHK52oj8JXnZZS0h22wXYu4PZNeigc
El mensaje de saludo completamente en español
x4Dt7zWoVjaFct9qlaHOIc4BVUQjLkufn-_Efl9hr8GcQIg52XDGilPykw-C3DA3arbny8CinIHaJzGPbT7xdNmGkB19CpjXlRieSwOH4wd9gwdf8WeNJJUblGvAf2UP8pLAZw4CKpuxXzGpv5vWNvg
El mensaje de saludo completamente en francés

Pluralización

La pluralización en el framework de Django es una forma de manejar diferentes traducciones basadas en un valor numérico. Es esencial porque, en muchos idiomas, la forma de una palabra cambia dependiendo del número que la describe.

Django proporciona una forma de manejar esto utilizando la etiqueta de plantilla {% blocktrans %} con una forma en plural. Veamos esto en nuestra aplicación de Django. Supongamos que quieres mostrar un mensaje sobre el número de visitantes en tu sitio, que cambia dinámicamente.

Paso 1: Actualiza tu vista para pasar el número de visitantes

Primero, modifica tu home_view en views.py para incluir una variable que represente el número de visitantes. Para fines de demostración, esto puede ser un número estático.

from django.shortcuts import renderfrom django.utils import timezonefrom django.utils.translation import gettext as _def home_view(request):    num_visitors = 5    context = {        'greeting': _("¡Bienvenido a nuestro Proyecto de Localización!"),        'num_visitors': num_visitors,    }    return render(request, 'home.html', context)

Paso 2: Actualiza la plantilla con pluralización

En tu home.html, utiliza la etiqueta {% blocktrans %} con una forma en plural para manejar la pluralización, como se muestra a continuación:

<!-- Otros contenidos de la plantilla -->       <h1>{{ greeting }}</h1>    <p>    {% blocktrans count counter=num_visitors %}        Hay {{ counter }} visitante.    {% plural %}        Hay {{ counter }} visitantes.    {% endblocktrans %}    </p>    <!-- Resto de los contenidos de la plantilla -->

Aquí, se utiliza {% blocktrans count counter=num_visitors %} para manejar el caso singular, y la sección {% plural %} es para el caso plural.

Paso 3: Actualiza los archivos de mensajes

Ejecuta el comando makemessages para actualizar tus archivos .po para cada idioma: django-admin makemessages -l es para español, y django-admin makemessages -l fr para francés.

Paso 4: Traduce y maneja las formas plurales en los archivos .po

En cada archivo .po, encontrarás entradas para las formas singular y plural.

Por ejemplo, el archivo .po en español debería tener el siguiente contenido:

msgid "There is %(counter)s visitor."msgid_plural "There are %(counter)s visitors."msgstr[0] "Hay %(counter)s visitante."msgstr[1] "Hay %(counter)s visitantes."

A continuación, ejecuta el comando django-admin compilemessages para compilar los archivos de mensajes. Ejecuta tu servidor y deberías ver el mensaje en forma singular o plural dependiendo del número de visitantes. Cambia el número en num_visitors en tu vista y observa cómo cambia el mensaje.

0MLly1OjdLtGZ86I5wfGxcSOw36WoQFSIR-awU40fKB1xwrMOPV7M9GlT2hAD3YFmBeFkUeSxhG7eisZ7x_SCkjbMKZWI8Hox_4Z79ggwdR362xG3By6d4f3yoplWEiCRGDZWPd5eDaAAsQSiBoUZXU
El mensaje en forma singular o plural dependiendo del número de visitantes. Versión en inglés
efgAT1-V3Eh_7QbiOLL0KHo2rEI2xh32A2y1oWXCf8lH1TNADoFF7H1PFT3tNbzt-_N5ss1D94pOK2m6b6Cx5dqIqTcvBjpxYadPUswCS4GCUky_Wj9ZgaBu1eCvDbcs9cYVyrr--aI-CferSD7j8FE
El mensaje en forma singular o plural dependiendo del número de visitantes. Versión en francés

Conclusión

Y ahí lo tienes, una guía completa para localizar una aplicación Django. Con el diseño accesible de Django, tienes todas las herramientas necesarias para traducir números y valores de DateTime al alcance de tu mano. Además, hemos visto cómo la línea de comandos de Django-admin puede facilitar la gestión de los archivos de traducción.

Pero es fundamental recordar que localizar un sitio web va más allá de simplemente traducir palabras. Para aprovechar al máximo las capacidades de localización de Django, sumérgete en su documentación, profundiza tu comprensión y sigue practicando.

¡Gracias por leer! Soy Jess y soy una experta en Hyperskill. Puedes echar un vistazo a una sección de Django en la plataforma.


Leave a Reply

Your email address will not be published. Required fields are marked *