<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ZedBlog &#187; Javascript</title>
	<atom:link href="http://blog.zedplan.com/tag/javascript/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.zedplan.com</link>
	<description></description>
	<lastBuildDate>Mon, 31 May 2010 14:57:21 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.4</generator>
		<item>
		<title>Internacionalización en Javascript usando Poedit</title>
		<link>http://blog.zedplan.com/internacionalizacion-en-javascript-usando-poedit/143</link>
		<comments>http://blog.zedplan.com/internacionalizacion-en-javascript-usando-poedit/143#comments</comments>
		<pubDate>Mon, 31 May 2010 14:57:21 +0000</pubDate>
		<dc:creator>Demián Rodríguez</dc:creator>
				<category><![CDATA[Desarrollo Web]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[gettext]]></category>
		<category><![CDATA[internacionalización]]></category>
		<category><![CDATA[localización]]></category>
		<category><![CDATA[poedit]]></category>

		<guid isPermaLink="false">http://blog.zedplan.com/?p=143</guid>
		<description><![CDATA[Gettext es uno de los sistemas mas utilizados para internacionalizar aplicaciones. Básicamente, un programa (xgettext) analiza el codigo fuente de los archivos de la aplicación, extrae las cadenas  y genera un catálogo que permite al usuario realizar la traducción usando una aplicación, como por ejemplo Poedit. Luego el catálogo (archivo .po) se compila y se crea [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://es.wikipedia.org/wiki/Gettext" target="_blank">Gettext</a> es uno de los sistemas mas utilizados para internacionalizar aplicaciones. Básicamente, un programa (xgettext) analiza el codigo fuente de los archivos de la aplicación, extrae las cadenas  y genera un catálogo que permite al usuario realizar la traducción usando una aplicación, como por ejemplo <a href="http://www.poedit.net/" target="_blank">Poedit</a>. Luego el catálogo (archivo .po) se compila y se crea un archivo binario con extensión .mo, el cual posee todas las traducciones en un formato optimizado.<br />
Lamentablemente, el comando xgettext carece de soporte para Javascript. El intérprete de Python es lo mas cercano posible, pero a mi no me ha funcionado correctamente porque no analiza bien las expresiones regulares y algunas cadenas.</p>
<p>Hasta ahora la forma mas común de internacionalizar una aplicación en Javascript era identificar cada una de las frases con una clave o variable, pero el problema de esta técnica es que hay que agregar las frases manualmente.</p>
<p>He decidido desarrollar un pequeño script en PHP que se utiliza en conjunto con Poedit y facilita esta tarea. Éste funciona como intérprete Javascript y analiza el codigo fuente para extraer las cadenas y generar un catálogo,  luego se utiliza otro script para convertirlo a formato JSON, el cual se incluye en nuestra página como un archivo externo. De esta manera tenemos disponible las frases traducidas en una variable global.</p>
<p>El intérprete es lo suficientemente inteligente para detectar cadenas con o sin comillas escapadas y excluir las expresiones regulares y comentarios.</p>
<p>Para utilizarlo, primero debemos instalar Poedit. Abrimos la aplicación, vamos a Archivo -&gt; Nuevo catálogo y completamos los datos:</p>
<p style="text-align: center;"><a href="http://blog.zedplan.com/wp-content/uploads/Settings_001.png"><img class="size-medium wp-image-147 aligncenter" title="Settings_001" src="http://blog.zedplan.com/wp-content/uploads/Settings_001-300x255.png" alt="" width="300" height="255" /></a></p>
<p>Cambiamos a la solapa Rutas y agregamos la ruta de la carpeta que contiene nuestros archivos Javascript:</p>
<p style="text-align: center;"><a href="http://blog.zedplan.com/wp-content/uploads/Settings_002.png"><img class="size-medium wp-image-148 aligncenter" title="Settings_002" src="http://blog.zedplan.com/wp-content/uploads/Settings_002-300x255.png" alt="" width="300" height="255" /></a></p>
<p>Cambiamos a la última solapa y agregamos los nombres de las funciones que usaremos para invocar una traducción. En este caso usamos el guión bajo y como alias &#8220;jsgettext&#8221;:</p>
<p style="text-align: center;"><a href="http://blog.zedplan.com/wp-content/uploads/Settings_003.png"><img class="size-medium wp-image-149 aligncenter" title="Settings_003" src="http://blog.zedplan.com/wp-content/uploads/Settings_003-300x255.png" alt="" width="300" height="255" /></a></p>
<p>La magia ocurre cuando agregamos el nuevo intérprete. Vamos a Editar -&gt; Preferencias, seleccionamos la solapa de intérpretes y hacemos click en &#8220;Agregar&#8221;:</p>
<p style="text-align: center;"><a href="http://blog.zedplan.com/wp-content/uploads/Parser-setup_005.png"><img class="size-medium wp-image-153  aligncenter" title="Parser setup_005" src="http://blog.zedplan.com/wp-content/uploads/Parser-setup_005-215x300.png" alt="" width="215" height="300" /></a></p>
<p>Luego simplemente debemos actualizar el catálogo haciendo click en el botón &#8220;Actualizar catálogo&#8221; y nos aparecerán las frases extraídas de los archivos JS. Nos tomamos el trabajo de traducirlas y guardamos el catálogo.<br />
<span style="font-size: 13.3333px;">Descartamos el archivo .mo que nos genera el programa ya que a continuación vamos a transformar el archivo .po en un .js usando la utilidad po2json.php:</span></p>
<p><code>php /ruta/a/jsgettext/po2json.php -i catalog.po -o l10n.js -k l10n</code></p>
<p>Eso nos genera un archivo con la variable global &#8220;l10n&#8221;, cuyo valor es un objeto que contiene las frases traducidas.<br />
Podemos acceder a una traducción usando la función &#8220;_&#8221;:</p>
<p><code>function _(s) {<br />
return typeof l10n[s] != 'undefined' ? l10n[s] : s;<br />
}<br />
alert(_("Hello world"))<br />
</code></p>
<p>El código esta alojado en Google Code: <a href="http://code.google.com/p/jsgettext/">http://code.google.com/p/jsgettext/<br />
</a><span style="font-size: 13.3333px;">Pueden reportar bugs o enviar alguna sugerencia o mejora <img src='http://blog.zedplan.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </span></p>
<p><a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://blog.zedplan.com/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share"/></a> </p>]]></content:encoded>
			<wfw:commentRss>http://blog.zedplan.com/internacionalizacion-en-javascript-usando-poedit/143/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

