¿Tienes una idea para una aplicación pero te falta el conocimiento de programación para empezar a construirla? En esta serie semanal de blogs, te llevaré a ti, el no-programador, paso a paso a través del proceso de creación de aplicaciones para el iPhone, iPod touch y iPad. Acompáñame cada semana en esta aventura y experimentarás lo divertido que puede ser convertir tus ideas en realidad! Esta es la parte 30 de la serie. Si recién estás comenzando, mira el comienzo de la serie aquí.

Para la gran mayoría de las aplicaciones que construye, tiene mucho sentido asegurarse de que su aplicación pueda ser vendida al mayor número de usuarios de iOS en tantos países e idiomas como sea posible. La App Store está disponible en más de 150 países en 40 idiomas y se encarga automáticamente de los pagos internacionales y de la conversión actual por usted. Todo lo que necesitas hacer es asegurarte de que tu aplicación es compatible con una variedad de idiomas. Te mostraré los pasos básicos en este post mientras hacemos que el proyecto iAppsReview sea multilingüe.

Internacionalización y Localización

Antes de empezar, aclaremos algunos términos. La internacionalización es el proceso de diseñar tu aplicación de tal manera que pueda soportar múltiples idiomas. Localización es el proceso de adaptar la aplicación a un idioma y cultura específicos.

Básicamente, internacionalizas tu aplicación una vez, pero la localizas para cada idioma y cultura que apoyas.

¿Qué incluye la localización?

Cuando piensas en localizar una aplicación, lo más probable es que te imagines el proceso de traducir el texto visible a otro idioma. Aunque esto es ciertamente una gran parte del proceso, la localización incluye:

  1. Traducir el texto estático en la interfaz de usuario.
  2. Formateando y traduciendo el texto dinámico generado por tu aplicación en tiempo de ejecución.
  3. Proporcionar múltiples versiones de imágenes que contengan texto o contenido específico de una cultura.
  4. Grabación de archivos de sonido para cada idioma soportado.

En este correo, voy a tratar los tres primeros puntos de esta lista.

Internacionalizando paso a paso

Vamos a sumergirnos e internacionalizar el proyecto iAppsReview . Puedes obtener la última versión del proyecto en este enlace. Si te quedas atascado mientras sigues los pasos de este post, puedes obtener la versión completa del proyecto desde este enlace.

Ten en cuenta que si creas un proyecto nuevo en Xcode 5, todos los pasos de esta sección ya están realizados para ti. Sin embargo, como hemos movido iAppsReview de iOS 6 y Xcode 4 a iOS 7 y Xcode 5, necesitamos realizar estos pasos manualmente.

  1. En primer lugar, me gustaría que miraras la estructura de carpetas del proyecto antes de hacer cualquier cambio. Si lanzas la aplicación Finder y examinas el proyecto verás la estructura de carpetas que se muestra en Figura 1 . Fíjate que sólo hay una subcarpeta, en.lproj , que contiene un archivo InfoPlist.strings . La primera parte del nombre de la carpeta indica mi idioma predeterminado (inglés o «en»). Aprenderemos más sobre el archivo de cadenas más adelante en este post. También noten que el archivo Mainstoryboard se encuentra en la carpeta raíz del proyecto.

Figura 1 – La estructura de la carpeta del proyecto

  1. Dado que toda la interfaz de usuario de mi aplicación se encuentra en el archivo del storyboard, necesitamos internacionalizar este archivo para poder después localizarlo para idiomas específicos. Para ello, vamos al Project Navigator de Xcode y seleccionamos el archivo MainStoryboard .
  1. A continuación, vaya al Inspector de Archivos seleccionando el botón del extremo izquierdo de la barra de herramientas del Inspector, y luego haga clic en el Localizar… ( Figura 2 ).

Figura 2 – Localizando el storyboard

  1. Presionando el Localizar… se muestra el diálogo que se muestra en Figura 3 . Confirma la operación pulsando el botón Localizar .

Figura 3 – El diálogo de confirmación de localización

  1. Si regresas al Finder, verás la estructura de carpetas que se muestra en Figura 4 , donde el archivo del storyboard se ha movido bajo la carpeta en.lproj .

Figura 4 – El archivo MainStoryboard ha sido movido a la carpeta en.lproj .

  1. Nuestro siguiente paso implica la creación de una internacionalización de la base . Se trata de un mecanismo relativamente nuevo para internacionalizar su aplicación, introducido en Xcode 4.5. En lugar de tener un archivo de storyboard separado para cada idioma que admita, se crea un único archivo de storyboard de base y simplemente se crean archivos de traducción de cadenas separadas para cada idioma que admita.

Para configurar esta base, haga clic en el primer nodo del Navegador del Proyecto para mostrar el Editor del Proyecto. En el cuadro de lista de la parte superior izquierda del Editor de proyectos, en Project seleccione iAppsReview , y luego seleccione la casilla de verificación Use Base Internationalization ( Figura 5 ).

Figura 5 – Seleccione la casilla de verificación Usar la internacionalización de la base .

  1. Al seleccionar esta opción se inicia el diálogo que se muestra en Figura 6 . Por defecto, selecciona el archivo MainStoryboard para crear la localización base. Haz clic en el botón Finish para continuar.

Figura 6 – Elección de archivos para crear una localización base

Al hacer esto, se puede ver que se ha añadido un nuevo lenguaje base en la sección Localizaciones del Editor de Proyectos ( Figura 7 ). El guión gráfico en el idioma original se utilizará ahora como idioma base para todas las demás localizaciones.

Figura 7 – Se ha añadido un nuevo idioma base a las Localizaciones .

  1. Si examinas la estructura de carpetas del proyecto en el Finder, verás que se ha añadido una nueva carpeta Base.lproj y que el archivo MainStoryboard se ha movido a la nueva carpeta ( Figura 8 ).

Figura 8 – Una nueva carpeta Base.lproj contiene el archivo MainStoryboard .

Esto completa nuestra configuración básica de internacionalización. Ahora estamos listos para localizar el proyecto para un idioma específico.

Añadir un nuevo idioma

Añadamos al proyecto el apoyo al idioma español.

  1. Vuelva al Editor del Proyecto, haga clic en el signo más debajo de la lista de idiomas como se muestra en Figura 9 .

Figura 9 – Añadir el español como idioma soportado por el proyecto.

  1. Cuando lo hace, aparece un diálogo que le pide que elija los archivos y el idioma de referencia ( Figura 10 ). Acepta las selecciones predeterminadas y haz clic en el botón Finalizar .

Figura 10 – Seleccione las selecciones por defecto y haga clic en Finalizar .

Al hacer esto, Español se añade a la lista de Localizaciones en el Editor de Proyectos ( Figura 11 ).

Figura 11 – Se añade el español a la lista de Localizaciones .

  1. Si vas a la aplicación Finder, puedes ver la nueva estructura de carpetas que se muestra en Figura 12 . Como puedes ver, hay una nueva carpeta Spanish es.lproj que contiene un archivo InfoPlist.strings y Mainstoryboard.strings . Todos los archivos específicos del idioma español se ubicarán en esta nueva carpeta.

Figura 12 – La nueva carpeta española es.lproj

  1. A continuación, vuelva al Proyecto Navegador. Noten que ahora hay una flecha a la izquierda del archivo del storyboard. Si haces clic en esta flecha, se expande para revelar los archivos que se muestran en Figura 13 . Ahora hay un archivo español MainStoryboard.strings . Echemos un vistazo más de cerca a este archivo.

Figura 13 – El archivo de cuerdas del MainStoryboard español .

  1. En el Navegador del Proyecto, haga clic en el archivo MainStoryboard.strings (español) . Esto muestra el contenido del archivo en el Editor de código como se muestra en Figura 14 .

Figura 14 – El archivo español MainStoryboard.strings

Xcode buscó en todo el archivo del storyboard y encontró cada instancia de texto y lo escribió en este archivo de cuerdas. Cada entrada en este archivo de cadenas es un par clave/valor. La primera parte de la clave es el ID de objeto del elemento de la interfaz de usuario del que se extrajo el texto. Se puede ver el ID de un objeto seleccionándolo en la superficie de diseño y yendo a la sección de documentos del Inspector de identidad ( Figura 15 ).

Figura 15 – Puedes ver la identificación de un objeto de la UI en el Inspector de Identidad.

Localizando a un nuevo idioma

Ahora estamos listos para realizar la traducción real del texto de la interfaz de usuario del inglés al español. Como no soy hispano parlante, usé Google Translate para convertir algunas frases en inglés a español (¡mis disculpas a los hispano parlantes!). Definitivamente este no es el enfoque recomendado en una aplicación del mundo real. Necesitas encontrar a alguien que hable con fluidez tanto tu idioma base como el idioma al que estás traduciendo para que puedas ofrecer a tus usuarios la mejor experiencia posible. Sin embargo, por ahora usaremos esta técnica de fuerza bruta.

Busca en el archivo MainStoryboard.strings (español) las claves que se muestran en Figura 16 y sustituye el texto en inglés por el texto en español que se muestra allí.

Figura 16 – Traducir el texto en inglés al español.

Lo bueno de este nuevo modelo de localización es que los traductores sólo tienen que trabajar con los archivos que están en las carpetas específicas del idioma. No necesitan cambiar los archivos del storyboard (aunque sin duda deben tener en cuenta el contexto en el que se utiliza el texto para proporcionar una traducción precisa).

Probando la localización española

Ahora estamos listos para probar la localización española en el simulador. Para que esto funcione, normalmente hay que quitar la aplicación del Simulador, limpiar el proyecto y volver a instalar la aplicación de nuevo.

Para hacer esto:

  1. Lanza el Simulador seleccionando Xcode> Open Developer Tool> iOS Simulator en el menú Xcode.
  1. Haga clic a la derecha del control de página (los puntos blancos) en la parte inferior de la pantalla para ir a la segunda pantalla de iconos.
  1. Mantén el ratón sobre el icono iAppsReview hasta que todos los iconos empiecen a temblar.
  1. Haga clic en la X en la esquina superior izquierda del icono (Figura 17).

Figura 17 – Quitar la aplicación iAppsReview del Simulador.

  1. Cuando aparezca el cuadro de diálogo de confirmación, haga clic en el botón delete para eliminar la aplicación del Simulador.
  1. A continuación, presione Shift+Comando+H para salir del modo de edición.

Ahora estamos listos para cambiar el idioma por defecto del simulador al español.

  1. Haga clic a la izquierda del control de página en el Simulador para volver a la primera pantalla de iconos.
  1. Haz clic en el icono de la aplicación Settings .
  1. Seleccione General> Internacional> Idioma .
  1. En la lista Idioma , seleccione Español ( Figura 18 ).

Figura 18 – Seleccione Español de la lista de idiomas.

  1. Haz clic en el botón Hecho y verás un mensaje que dice «Cambiando idioma…», que se traduce como «Setting Language…».
  1. Sabrás que la selección ha surtido efecto cuando veas los iconos de la pantalla de inicio con nombres en español ( Figura 19 ).

Figura 19 – La pantalla de inicio en español

  1. Vuelve a Xcode y selecciona Producto> Limpiar en el menú.
  1. A continuación, haz clic en el botón Ejecutar y deberías ver el texto actualizado en español en la primera escena de la aplicación ( Figura 20 )!

Figura 20 – Texto en español en el Simulador!

Manejo de los cambios de texto del Storyboard

Todo esto funciona muy bien una vez que el polvo se ha asentado en tu storyboard. Sin embargo, ¿qué pasa si cambias el texto del guión gráfico en una fecha futura?

Apple tiene una herramienta de línea de comandos llamada ibTool que puedes usar para actualizar los archivos de cadenas. Para ejecutar esta herramienta:

  1. Haz clic en la carpeta Aplicaciones en el dock de tu Mac y luego haz clic en la carpeta Utilidades .
  1. Seleccione Terminal.app .
  1. Cuando se inicie la Terminal, escriba un comando de cambio de directorio (cd) para navegar a la carpeta de su proyecto Base.lproj . Por ejemplo, La Figura 21 muestra el comando cd que usé para navegar a la carpeta Base.lproj en mi máquina de desarrollo.

Figura 21 – En Terminal, cambia los directorios a la carpeta del proyecto Base.lproj .

  1. A continuación, es necesario ejecutar el comando ibtool en la aplicación Terminal como se muestra en Figura 22.

Figura 22 – Ejecuta ibtool desde una línea de comando de la Terminal.

Para ser claros, este comando es:

ibtool MainStoryboard.storyboard --generate-strings-file NewStrings.strings
  1. Ahora puedes ir a la carpeta Base.lproj, copiar las nuevas cadenas del archivo y luego pegarlas en cada archivo de cadenas del storyboard.

Para obtener más información, consulte el tema de ayuda de Apple Preparando sus archivos de plumilla para su localización en la sección Usando ibtool en este enlace.

Localización de imágenes

No es necesario que localices todas las imágenes de tu aplicación, pero sí las que contienen texto o tienen un contexto cultural específico. Resulta que hay una imagen en iAppsReview que contiene texto en inglés que necesitamos localizar.

  1. En el Project Navigator, amplíe el grupo Supporting Files y seleccione el archivo AddImage.png y verá que la imagen contiene el texto Add Image ( Figura 23 ).

Figura 23 – ¡Las imágenes que contienen texto deben ser localizadas!

  1. Vaya al Inspector de Archivos haciendo clic en el botón de la izquierda en la barra de herramientas del Inspector.
  1. Haz clic en el botón Localizar… que se muestra en Figura 24 .

Figura 24 – Localizar el archivo AddImage.png .

Esto muestra un diálogo de confirmación ( Figura 25 ).

Figura 25 – Confirmar la localización de AddImage.png .

  1. Haga clic en Localizar y luego verá varios idiomas en la sección Localización (Figura 26).

Figura 26 – Se listan múltiples idiomas para el archivo de imagen.

  1. Selecciona la casilla de verificación Español . Esto añade una copia del archivo de imagen al proyecto. Para ver esto, ve al Project Navigator, haz clic en la flecha a la izquierda del archivo AddImage.png y verás las versiones Base y Español del archivo ( Figura 27 ).

Figura 27 – Las imágenes de la base y del español .

  1. Si vas a la aplicación Finder y compruebas la estructura de carpetas del proyecto, verás que hay una copia del archivo AddImage.png almacenada en la carpeta Base.lproj y otra en la carpeta es.lproj .

Figura 28 – Nuevas copias del archivo AddImage.png

Como se puede imaginar, estas nuevas imágenes no están localizadas, son simplemente copias del archivo de imagen original. Necesitamos crear una versión del archivo de imagen que funcione bien en el idioma español. En lugar de traducir el texto de la imagen, decidí crear un botón sin texto que pueda usar para la versión en español así como en otros idiomas. Es simplemente una imagen de un signo más. Vamos a borrar el archivo AddImage.png existente en el directorio es.lproj y reemplazarlo por uno nuevo.

  1. Ve a la aplicación Finder y borra el archivo AddImage.png de la carpeta es.lproj .
  1. Arrastra el archivo AddImage-es.png desde la carpeta raíz del proyecto y suéltalo en la carpeta es.lproj .
  1. Cambie el nombre del archivo de imagen a AddImage.png . Esto reemplaza el archivo original.

Ahora siga estos mismos tres pasos para el archivo AddImage@2x.png (esta es la versión del archivo que se utiliza cuando se ejecuta en un dispositivo con pantalla de Retina).

Para probar la nueva imagen:

  1. Presiona el botón Run de Xcode .
  1. Cuando la aplicación aparezca en el Simulador, seleccione la opción Escribir una reseña .
  1. Deberías ver la imagen del signo más que se muestra en Figura 29!

Figura 29 – La imagen del signo más español en tiempo de ejecución.

Internacionalizar y localizar las cuerdas dinámicas

A menudo, las aplicaciones contienen un código de programa que establece dinámicamente el texto de los controles u otros mensajes en tiempo de ejecución. Obviamente, si tienes cadenas de código duro en tu aplicación, debes asegurarte de proporcionar traducciones de estas cadenas para todos los idiomas que tu aplicación soporta. Veamos un caso de este tipo de texto en iAppsReview .

  1. En el navegador del proyecto, seleccione el archivo SettingsViewController.m . Observe las cadenas de texto en inglés Done y Cancel mostradas en Figura 30 .

Figura 30 – Las cadenas Done y Cancelar están codificadas en inglés.

  1. Cambie el código del archivo como se muestra en la figura 31.

Figura 31 – Utilice NSLocalizedString para cualquier texto de código duro en su aplicación.

La función NSLocalizedString obtiene una cadena localizada de un archivo de cadenas para el idioma actual. Requiere dos argumentos:

  • Una llave
  • Un comentario

En tiempo de ejecución, NSLocalizedString utiliza la clave para buscar la traducción del idioma actual en un archivo de cadenas. El comentario es importante! Es usado por los traductores para proporcionar un contexto para el texto que se está traduciendo.

Al realizar este paso para todo el texto codificado en su aplicación, usted está internacionalizando estas cadenas, y obteniéndolas en un lugar donde pueden ser localizadas. Hagámoslo ahora.

  1. Ve a la aplicación Terminal y ejecuta los comandos que se muestran en Figura 32 .

Figura 32 – Ejecuta el comando genstrings .

Para mayor claridad, primero debe ejecutar un comando de cambio de directorio (cd) que lo lleve al directorio raíz de su proyecto:

cd Documents/iAppsReview/iAppsReview

A continuación, debes ejecutar el comando genstrings . Esta herramienta de línea de comandos lee todos los archivos de implementación (.m) de tu aplicación, busca la función NSLocalizedString y coloca todas las cadenas que encuentra en un archivo llamado Localized.strings . Aquí está el comando:

find . -nombre *.m | xargs genstrings -o es.lproj/
  1. Si vas a la aplicación Finder, puedes ver el archivo Localizable.strings que se ha añadido a la carpeta del proyecto en.lproj ( Figura 33 ).

Figura 33 – El archivo recién generado Localizable.strings .

  1. Añadamos este nuevo archivo al proyecto. Ve al navegador del proyecto, haz clic con el botón derecho del ratón en el grupo Supporting Files y selecciona Add Files to «iAppsReview»… del menú emergente. En el diálogo Add Files, selecciona el archivo Localizable.strings y luego haz clic en Add ( Figura 34 ).

Figura 34 – Añade el archivo Localizable.strings al proyecto.

  1. Echemos un vistazo al contenido de este archivo de cuerdas. Ve al Navegador del Proyecto y selecciona el archivo Localizable.strings . Verás el contenido que se muestra en Figura 35 .

Figura 35 – Localizable.strings contenido

Así que la utilidad genstrings encontró las dos ocurrencias de NSLocalizedString que añadimos al proyecto, extrajo los comentarios que añadimos así como la traducción base de cada uno. En el lado izquierdo del signo igual, la clave es «Cancelar» y el texto base es «Cancelar», y en la segunda línea la clave es «Hecho» y el texto base es «Hecho».

Ahora estamos listos para crear una versión en español de este archivo y traducirlo, o localizarlo.

  1. Con el archivo aún seleccionado en el Project Navigator, vaya al Inspector de Archivos (el botón de la izquierda en la barra de herramientas del Inspector) y bajo Localización , seleccione la casilla de verificación Español ( Figura 36 ).

Figura 36 – Seleccione una localización española del archivo Localizable.strings .

  1. Esto crea una versión en español del archivo Localizable.strings . Para ver esto, vaya al Project Navigator, expanda el archivo Localizable.strings y verá los archivos que se muestran en Figura 37 .

Figura 37 – El archivo español Localizable.strings

  1. Haga clic en el archivo Localizable.strings (español) para mostrar su contenido en el Editor de códigos. Traduce el texto al español como se muestra en Figura 38 .

Figura 38 – Traduce las cuerdas al español.

Ahora vamos a ejecutar la aplicación para ver cómo funcionan estas cuerdas españolas en tiempo de ejecución.

  1. Haz clic en el botón Run de Xcode .
  1. Cuando la aplicación aparezca en el Simulador, seleccione la opción Settings & Feedback .
  1. Haz clic en el botón Edit y deberías ver los botones Cancelar y OK que se muestran en Figura 38 !

Figura 39 – Los botones Cancelar y OK en tiempo de ejecución

¡Has conseguido que se realicen tres de las principales tareas para la localización de una aplicación!

Conclusión

Una vez que se familiarice con la internacionalización y localización de las aplicaciones del iOS, descubrirá que puede dominar el proceso y proporcionar una experiencia de alta calidad para usuarios de muchos idiomas diferentes. En lugar de dar a sus usuarios la impresión de que la aplicación fue traducida de otro idioma, puede ayudarles a sentir que la aplicación fue escrita específicamente para su idioma y localización.

<>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *