1. Ghost, the blogging platform that I'm using doesn't have a way to create and use translations.
2. I can't detect on backend because this blog is on github pages.

That means the only way is to use javascript to detect user's language and localize.

Luckly Mozilla faced this issue so they create the webl10n proyect and the way to use it is really simple:

• You have to create a locales.ini file, where you're going to indicate all the languages that you want to detect and the path to files where translations are located.

@import url(es/app.properties)
[en]
@import url(en/app.properties)

• Then create translation files, in this case app.properties, inside you need to write the phrase id and translation.

read-more = Leer más  
share-it = ¿Te gusto el artículo? Compartelo.  

• You've to add the library and the locales.ini file to page.

<link rel="resource" type="application/l10n" href="locales/locales.ini">  
<script type="text/javascript" src="js/l10n.js">  

• Finally add phrase id to html using "data-l10n-id" attribute.

<h4 data-l10n-id="share-it">Liked this post ? Share it.</h4>  

If you want more info about this library you can check the github repo or you can also check the MDN page about localizing webapps.

But even if this library is easy to use It doesn't mean is free of issues:

• If user has javascript disabled (something really odd) or using No Script translations would not work, that's why you should write by default in a language that almost everybody can understand(english).

• If you have a html element in the middle of a phrase like a link, webl10n is just going to replace text before link.

  In order to translate link text you have to add a different phrase id, the same applies to text after link where you also need to wrap it with a html tag.

<p data-l10n-id="first">First part of text <a href="http://lcamacho.github.io" data-l10n-id="link">link to my blog</a> <span data-l10n-id="second"> text after link</span></p>  

The es-419 case

With translations ready the last step was testing and It works on most browsers, the only two that came as suprise were Chrome and the new Opera that now is based on Chromium.

Both were showing english version instead of spanish even though I were using them in spanish, so to be sure about browser language I executed in console navigator.language just to see what returns.

That was akward to me because browsers like Firefox returns "es-AR" (language id - country id), but then I found on IANA that "es-419" is the id for latin american spanish something like a neutral spanish for latam (if such thing really exists, let's remember how hard it is to speak spanish).

To make webl10n work with this language you need to add a couple of lines to locales.ini, first [es-419] and then the line to indicate the path to spanish translation file, but to avoid this I sended a pull request to allow webl10n to recognize language ids that contains numbers and redirect to base language, like in this case to be redirected to [es] translations.

1. Ghost, la plataforma de blogging que estoy usando aun no tiene una forma definida de como realizar traducciones.
2. No puedo detectar el idioma del usuario en backend ya que el blog esta en github pages.

De manera que solo queda la opción de usar javascript para detectar el idioma y realizar la localización.

Por fortuna ya la gente de Mozilla se habia topado con este problema de manera que crearon el proyecto webl10n y la forma de utilizarlo es muy sencilla:

• Creas un archivo locales.ini, donde vas a indicar los idiomas que vas a detectar asi como el archivo donde se encontraran las traducciones para cada idioma.

@import url(en/app.properties)
[es]
@import url(es/app.properties)

• Creas los archivos de traducciones, en este caso app.properties, aqui colocas el identificador de la oración y su traducción.

read-more = Leer más  
share-it = ¿Te gusto el artículo? Compartelo.  

• Se agrega la libreria y el locales.ini a la página.

<link rel="resource" type="application/l10n" href="locales/locales.ini">  
<script type="text/javascript" src="js/l10n.js">  

• Finalmente agregas el identificador de la oración al html utilizando el atributo "data-l10n-id".

<h4 data-l10n-id="share-it">Liked this post ? Share it.</h4>  

Si quieres más informacion de la librería puedes ver revisar el repositorio del proyecto o la página de localización de webapps en MDN.

A pesar de los fácil de usar, la librería tiene algunos problemas:

• Si el usuario tiene desactivado javascript (algo poco probable) o si esta usando No Script no se mostraran las traducciones, por esto es mejor escribir por defecto en un idioma que la mayoria entienda (ingles).

• Cuando se tiene un elemento html en medio de la oración por ejemplo un link, la traducción solo reemplaza la parte de la oración antes del link.

  Para poder traducir el texto del link se le debe tratar como una oración diferente agregandole un identificador e igualmente con el resto de la oración se le debe encerrar en otro elemento html para tratarlo como otra oración.

<p data-l10n-id="primero">Primera parte de la oracion <a href="http://lcamacho.github.io" data-l10n-id="link">el link a mi blog</a> <span data-l10n-id="segundo">y la segunda parte</span></p>  

El caso es-419

Ya con todas las traducciones restaba probarlo y en casi todos los navegadores funciono, la sorpresa vino con Chrome y el nuevo Opera que ahora usa el mismo motor de Chrome.

En ambos se mostraba la versión en ingles a pesar de estar usandolos en español; para estar seguro del idioma del navegador ejecute en consola navigator.language para ver el identificador que devuelve Chrome.

Lo cual me parecio un poco raro porque en otros navegadores como Firefox devuelve "es-AR" (identificador de idioma - identificador de pais), pero luego encontre en la IANA que "es-419" es el identificador para el español de latinoamerica algo asi como un español neutro para latinoamerica (si es que tal cosa existe, recordemos lo dificil que es hablar el español).

Para lograr que webl10n reconozca este idioma basta con colocar en el locales.ini un par de lineas, primero [es-419] y luego la linea para indicar donde esta el archivo de traducciones pero para evitar esto envie un pull request para lograr que la librería reconozca identificadores de idiomas que contengan números y sean correctamente dirigidos al idioma base, en este caso para ser dirigidos a las traducciones de [es].

Soy un adicto a twitter que como a muchos le gusta saber lo que esta pasando en este momento, pero que también disfruta de leer ya sea de programación (soy desarrollador y mucho de lo que escribire aquí sera para desarrolladores), una opinion o simplemente un buen articulo que me ayude a expandir mi punto de vista sobre las cosas.

Y ya que el internet me ha dado la posibilidad de leer sobre tantas cosas creo que puedo aportar algo en este espacio que precisamente el internet me da para expresarme.

Mientras me ajusto a esto de tener un blog seguramente varias cosas van a cambiar desde como se ven las cosas hasta como escribo pero es precisamente parte de las cosas que me motivan a tener el blog.

I'm a twitter addict that just like many other wants to know what's going on right now, but I also enjoy to read about programming (I'm a developer and many stuff I'm going to write here is for developers) or an opinnion or maybe a good article that helps me to expand my point of view about stuff.

And since the internet already gave me the chance to read so many things I think I can give back in this space that the same internet gives me to express.

While I'm getting use to have a blog surely many things are going to change from how this blog looks to the way I write but those are part of the reasons to have this blog.

PD: I'm not a native speaking English person so forgive me if I made some mistakes, from now on I'm going to improve.