Algo más que traducir
Blog sobre traducción profesional, localización de videojuegos, software, aplicaciones móviles, sitios web y tecnologías de la traducción por Pablo MuñozTraductor inglés-español especializado en localización

Las herramientas para desarrolladores de Chrome como aliadas de la localización

Hoy quiero compartir con vosotros un truquillo avanzado para los que suelen trabajar en la localización de sitios web y no están seguros de cómo se implementará algo en la versión final, pues normalmente los clientes no nos darán la oportunidad de comprobar el sitio final con nuestra traducción implementada. Asimismo, también os ofrezco un consejo sobre cómo impresionar a un cliente potencial que esté interesado en vuestros servicios de traducción y localización para que no tenga dudas de que vosotros sois la mejor elección. Para ello, todo lo que necesitaremos será utilizar el navegador web Chrome, aunque hay diversos complementos para Firefox como Firebug que también cumplen esta misma función.

Cómo editar el texto de una página web en tiempo real

A menos que se trate de una imagen, en teoría siempre es posible modificar el texto de la web que estés viendo en tiempo real. Evidentemente, esto es solo para probar, pues tan pronto como actualicemos el sitio web, nuestros cambios se perderán. El objetivo de seguir estos pasos es saber cómo quedará texto que quizás no sabemos muy bien cómo aparecerá, como es el caso de los títulos con fuente grande. Aunque el responsable del diseño web será el encargado de comprobar que el texto localizado quede bien, nunca viene mal saber cómo va a quedar algo. Personalmente utilizo esta técnica para títulos largos o menús.

Vamos a usar como ejemplo la ficha del luchador Bayman de Dead or Alive 5. De forma resumida, todo lo que necesitamos es hacer clic con el botón derecho sobre el texto que deseamos modificar en la ventana del navegador y luego hacer clic en “Inspeccionar elemento”. Esto dividirá la pantalla en dos: arriba veremos la web y abajo el editor de HTML/CSS. Generalmente tendremos suerte y nos seleccionará la línea donde está el texto; si no, podemos usar el cuadro de búsqueda que aparece en la esquina superior derecha del editor de código.

Una vez encontrado el texto, deberemos hacer doble clic en él y modificarlo. Si todo ha ido bien, el texto habrá cambiado y sabremos cómo quedará nuestra traducción. 🙂

Cómo impresionar a un cliente con esta técnica

Supongamos que una agencia está buscando traductores para localizar el sitio web del Metal Gear Solid. Queremos hacer la mejor propuesta posible para que el cliente note nuestra profesionalidad y que no somos unos novatos en esto de la localización, así que vamos a la página principal del sitio web en cuestión y localizamos el texto para hacer una captura del resultado final. Esto supongo que funciona mejor con clientes directos (que es para lo que lo he usado) que para agencias, pero nunca se sabe.

Solo tenemos que repetir los pasos que hemos descrito en el apartado anterior, es decir, hacer clic con el botón derecho en el texto que queremos cambiar (sobre la web) para que aparezca el editor de código y hacer doble clic en el texto para modificarlo. Si no nos aparece seleccionado a la primera, recordad que podemos usar el cuadro de búsqueda de la derecha.

Si lo hacemos bien, tendremos un resultado como este:

 ¡Un momento! Vaya, parece que tendremos que modificar el texto que aparece en “Localize“, porque es tan largo que hace que el triángulo rojo se salga de la caja. No obstante, si sabemos algo de CSS, podemos ir con el cursor del ratón línea por línea haciendo clic para ver en la parte derecha del editor si hay algo como “width” (ancho) y probar a cambiar el número de píxeles para ver si funciona. Esto requiere ciertos conocimientos técnicos, claro está, pero por suerte no será necesario en la mayoría de los casos. Si he elegido este ejemplo ha sido precisamente para explicar lo más avanzado. 😉

Si tenemos paciencia, habremos visto lo siguiente:

Si cambiamos “70px” por “80px”, finalmente tendremos esto:

¡Voilà! Ya podemos hacer una captura “real” (y no Photoshopeada) para enviársela a nuestro potencial cliente para decirle cómo quedará su sitio web si nos contrata. Por supuesto, cuanta más creatividad, mejor.

Y bien, ¿qué os ha parecido? 🙂

¡Comparte esta entrada! 🙂
Share on Facebook
Facebook
0Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Pablo Muñoz Sánchez

Pablo Muñoz Sánchez

English > Spanish Game Translator
Soy traductor inglés > español con más de 15 años de experiencia especializado en localización de videojuegos y software. He traducido juegos como Metroid y Fire Emblem y ahora trabajo, entre otras cosas, como especialista en control de calidad para Google a través de Vistatec. También soy cofundador de Traduversia, una plataforma de cursos online para traductores. Más sobre mí | Mi libro de localización | Mi Instagram

¡Apúntate GRATIS al curso online «Localización y traducción audiovisual: primeros pasos y trucos ninja» de Traduversia!

Localización y traducción audiovisual: primeros pasos y trucos ninja

21 comentarios

  1. ¡Hola, Pablo!

    Gracias por compartir tu sabiduría. Yo descubrí este truco por casualidad pura y dura (vamos, por apretar un botón sin querer, que ya es triste) y corroboro su utilidad, me ha salvado la vida un millón de veces, pero nunca se me había ocurrido utilizarlo de cara a un cliente. Es una idea muy interesante, sobre todo si no has localizado nada y no tienes ninguna web que mostrar como ejemplo de tus habilidades o no estás particularmente orgulloso de tus trabajos anteriores. Y tampoco se me había ocurrido compartirlo, así que te alabo eso.

    A veces resulta más cómodo desplegar la siguiente línea del código si el texto no sale en la primera que hacer la búsqueda, suele estar ahí. También está bien ir trasteando con las pestañas que aparecen en la parte inferior, que abarcan del elemento más pequeño (el que has seleccionado) al más grande. Da mucho juego cuando tienes una cadena de texto en un PO que sabes en qué parte del sitio está gracias al programa que uses, pero que igual no está visible. Me pasó con un término que podía ser un adjetivo o un verbo según el contexto y, a simple vista, no estaba por ningún lado. Resultó formar parte del texto alternativo y estaba en un sitio verdaderamente retorcido. Lo encontré gracias a esta ventanita y problema resuelto. Aprender estas cosas en ratos muertos va muy bien, porque acabas teniendo mucha independencia y solucionando muchas dudas por tu cuenta, y eso los clientes también lo valoran.

    ¡Saludos!

    Nieves

    • ¡Hola, Nieves! Por fin aparece tu comentario. 😛

      Pues fíjate que esto lo usé por primera vez para la página principal de Tumblr. 😛 Y bueno, aunque los dos conocemos la historia, de primeras sí parece que causé buena impresión, je, je. Sinceramente, no sé muy bien cómo se me ocurrió.

      Ya veo que te gusta trastear para bien, ¿eh? Efectivamente, viene bien cuando a veces ni el cliente sabe dónde está algo, pues no olvidemos que a veces nos encontramos con cadenas “hardcoded” que ni el desarrollador sabía que existían… ¡Pues no habré metido yo bugs de esos en mi vida! Lo mejor es que eso en general los clientes lo agradecen mucho, así que, si lo piensas, hasta los ratos muertos son productivos (lo digo porque yo creo que también aprendí esto hace tiempo de casualidad xD).

      Un saludo,

      Pablo

  2. Anónimo dice:

    También puedes utilizar el siguiente bookmarklet para editar cualquier página directamente:

    javascript:document.body.contentEditable%20=%20’true’;%20document.designMode=’on’;%20void%200

    En Firefox tienes que guardarlo como un marcador (si lo pegas en la barra de direcciones no funciona).

    Aunque este método no te permite editar el código CSS.

    • ¡Hola!

      Vaya, he probado ese código en la versión que tengo de Chrome (21), pero no he visto que funcionara. Sé que debería porque he leído sobre ese código en Internet, pero bueno, quizás no sirva para esta última versión.

      ¡Muchas gracias igualmente!

      Pablo

  3. Como alternativa a Firebug, a mi me gusta más Web Developper Toolbar para Firefox. Pablo. Cada uno tiene sus ventajas, pero para mí WDT te ofrece más opciones para un diseño más avanzado y si tienes ganas de gitanear imágenes protegidas.

    Un saludo,

    Álvaro

    • Hola, Álvaro:

      Sí, también conozco el WDT: personalmente uso siempre Chrome y creo que poco a poco mucha gente empieza a utilizarlo, por eso me decanté por explicar cómo hacer esa operación de forma sencilla con Chrome. Desde luego, para usuarios avanzados, Firefox sigue siendo una gran opción para el desarrollo.

      Un saludo,

      Pablo

  4. Es de los mejores artículos en blogs de esta industria que he leído. Mis conocimientos sobre programación con lenguaje HTML son intermedios, pero este truquito con el Chrome no me lo sabía. Me encantó! Muchas gracias y sigue con los buenos artículos que te acabo de agregar a mi lista de bloggeros.

    Saludos desde México!

  5. Ya aviso desde el principio que es una entrada para gente a la que le gusta esto. Seguro que en un tiempo lo entiendes sin problema, Merche. 😉

    Pablo

  6. Buena idea lo de toquetear la web del cliente para que vea los resultados: transmites ilusión y resultados reales. Bueno, si no se lo toma a juanqueo y monta en cólera, claro, que hay mucho loco por ahí.

    Yo utilizo esta función para arreglar destrozos de diseño o para saltarme restricciones en webs. Me colocas un elemento de publicidad o una barrera de paywall imposible de sortear: me cargo el elemento.

    • Ja, ja, sí, imagino que habrá de todo, pero espero que la gran mayoría se lo tome a bien por eso que dices: transmites ilusión. 🙂

      Me gusta ver cómo cada uno aplica estas técnicas para lo que necesita en ese momento… ¡Con los juanquers hemos topado!

      Un saludo,

      Pablo

  7. ¡Hola, Pablo!

    Yo lo uso para hacer el mono: corregir faltas, tocar el ancho o el alto para que quepan mejor las cosas, cambiar los colores, hacer desaparecer partes, meter frases absurdas o palabrotas… Aunque sea todo una ilusión xD
    Es genial darse cuenta de que también tiene una utilidad, y es verdad que se aprende. Chrome FTW.

    ¡Saludos!

    Judit

  8. !Holaa¡

    La verdad que cada vez que entro a este blog aprendo algo nuevo, todas las entradas son muy interesantes. ¡Si casi parece un tutorial! Yo siempre uso el DejaVu X para traducir páginas web, y en muchos casos resulta algo incompleto ya que no permite acceder al código html.

    Un saludo.

    • ¡Hola, David!

      Je, je, pues mira que iba a hacer un vídeo y todo, pero llevaba ya bastante tiempo y preferí hacerlo así mejor. 🙂

      ¡Me alegro de que te guste el blog! Yo ya he visto que acabas de estrenar uno, a ver qué tal te va. 🙂

      Un saludo,

      Pablo

  9. Marina dice:

    Hola, Pablo. Muy bueno este tema y todo tu blog. El tema de la localización me parece sumamente interesante, pero desgraciadamente soy una completa analfabeta en todo este ámbito. Siempre leo blogs y notas sobre localización pero al fin de cuentas nunca termino haciendo nada. ¿Podrías recomendarme algún programa para empezar a localizar de cero? ¿O un buen tutorial?
    Muchas gracias.

  10. Realmente interesante esta herramienta.

  11. Estupendo. Gracias por compartir tus conocimientos. 🙂

  12. Patricia Aleixandre dice:

    ¡Hola, Pablo!

    ¡Me encanta este truco! Voy a probarlo ya mismo. Ojalá en el próximo curso que des sea más largo y puedas enseñarnos aún más cosas. ¡Muchas gracias y un saludo desde Valencia! 😀

    • Je, je, ¡gracias, Patricia! Yo la verdad es que lo uso mucho a pesar de que no veo que otros lo hagan. 😛 Me sirve mucho para saber cómo va a quedar un texto en una web y así asegurarme de que quedaría “bonito” y ahorrarme un poco de testing luego de cara a prevenir posibles bugs. 🙂

      Un saludo,

      Pablo

Speak Your Mind

Responsable » Pablo Muñoz Sánchez (servidor).
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de Dinahosting (proveedor de hosting de Algo más que traducir) dentro de la UE. Ver política de privacidad de Dinahosting. (https://dinahosting.com/legal/proteccion-datos).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

*