Convertir HTML a .po y a la inversa - Historial de revisiones

Miguelbf en 09:39 17 jun 2012

2012-06-17T09:39:47Z

← Revisión anterior		Revisión del 09:39 17 jun 2012
Línea 39:		Línea 39:
	Examinando el archivo de fuentes ''tupi_0.1-git12.tar.gz'' (una vez descomprido se llama ''tupi-0.1'') encontramos la carpeta '''help'''		Examinando el archivo de fuentes ''tupi_0.1-git12.tar.gz'' (una vez descomprido se llama ''tupi-0.1'') encontramos la carpeta '''help'''

	:<code> /~~hombre~~/usuario/Tupi/tupi-0.1/src/components/help/help$</code>		:<code> /home/usuario/Tupi/tupi-0.1/src/components/help/help$</code>

	haciendo un «''ls''» vemos que contiene las siguientes carpetas		haciendo un «''ls''» vemos que contiene las siguientes carpetas
Línea 73:		Línea 73:

	Fijémonos en un detalle, tenemos dos carpetas con el nombre «images»		Fijémonos en un detalle, tenemos dos carpetas con el nombre «images»
	*una en la ruta      → <code> /~~hombre~~/usuario/Tupi/tupi-0.1/src/components/help/help</code>		*una en la ruta      → <code> /home/usuario/Tupi/tupi-0.1/src/components/help/help</code>
	*y otra en la ruta  → <code> /~~hombre~~/usuario/Tupi/tupi-0.1/src/components/help/help/en</code>		*y otra en la ruta  → <code> /home/usuario/Tupi/tupi-0.1/src/components/help/help/en</code>

	<br><center>		<br><center>
Línea 236:		Línea 236:

	Estas capturas, una vez «procesadas» (cómo se puede ver a continuación) irán en una carpeta llamada ''images'', incluída en la carpeta que creamos anteriormente. En nuestro ejemplo en:		Estas capturas, una vez «procesadas» (cómo se puede ver a continuación) irán en una carpeta llamada ''images'', incluída en la carpeta que creamos anteriormente. En nuestro ejemplo en:
	:<code>/~~hombre~~/usuario/Tupi/tupi-0.1/src/components/help/help/gl/images</code>		:<code>/home/usuario/Tupi/tupi-0.1/src/components/help/help/gl/images</code>

	'''Importante''': las imágenes deben respetar '''exactamente''' el mismo nombre. Cualquier cambio en él hará que no se encuentre esa imagen.		'''Importante''': las imágenes deben respetar '''exactamente''' el mismo nombre. Cualquier cambio en él hará que no se encuentre esa imagen.

Miguelbf en 08:40 12 may 2012

2012-05-12T08:40:17Z

← Revisión anterior		Revisión del 08:40 12 may 2012
Línea 2:		Línea 2:
	<center>		<center>
	Este como está dispoñíbel en [[File:flag_gl.png]] galego no [http://wiki.trasno.net/Converter_HTML_a_.po_e_%C3%A1_inversa ''wiki'' de '''Trasno''']<br>		Este como está dispoñíbel en [[File:flag_gl.png]] galego no [http://wiki.trasno.net/Converter_HTML_a_.po_e_%C3%A1_inversa ''wiki'' de '''Trasno''']<br>
	This HowTo is available in [[File:flag_en.png]] english in the [ '''Tupi''' ''wiki''].		This HowTo is available in [[File:flag_en.png]] english in the [http://www.maefloresta.com/wiki/index.php?title=Main_Page '''Tupi''' ''wiki''].
	</center>		</center>

Miguelbf en 07:16 12 may 2012

2012-05-12T07:16:56Z

← Revisión anterior		Revisión del 07:16 12 may 2012
Línea 1:		Línea 1:
	__NOTOC__		__NOTOC__
			<center>
	~~{{Nota\|nota=~~Este como está ~~disponible~~ en ~~gallego en el~~ [http://wiki.trasno.net/Converter_HTML_a_.po_e_%C3%A1_inversa ''wiki'' de '''Trasno'''] ~~y en inglés en el~~ [ ''~~wiki~~'' de '''~~Tupí~~'''].}}		Este como está dispoñíbel en [[File:flag_gl.png]] galego no [http://wiki.trasno.net/Converter_HTML_a_.po_e_%C3%A1_inversa ''wiki'' de '''Trasno''']<br>
			This HowTo is available in [[File:flag_en.png]] english in the [ '''Tupi''' ''wiki''].
			</center>

	== Introducción ==		== Introducción ==

Miguelbf en 09:38 10 may 2012

2012-05-10T09:38:59Z

← Revisión anterior		Revisión del 09:38 10 may 2012
Línea 71:		Línea 71:

	Fijémonos en un detalle, tenemos dos carpetas con el nombre «images»		Fijémonos en un detalle, tenemos dos carpetas con el nombre «images»
	*una en la ruta~~   ~~      → <code> /hombre/usuario/Tupi/tupi-0.1/src/components/help/help</code>		*una en la ruta      → <code> /hombre/usuario/Tupi/tupi-0.1/src/components/help/help</code>
	*y otra en la ruta  → <code> /hombre/usuario/Tupi/tupi-0.1/src/components/help/help/en</code>		*y otra en la ruta  → <code> /hombre/usuario/Tupi/tupi-0.1/src/components/help/help/en</code>

Línea 220:		Línea 220:
	<br><center>		<br><center>
	[[File:vista-xml.png\|center\|border\|400px]]<br>		[[File:vista-xml.png\|center\|border\|400px]]<br>
	'''Fig. num. 6''' ─ Vista del ~~ficheiro~~ «help.xml»<br>		'''Fig. num. 6''' ─ Vista del archivo «help.xml»<br>
	se destacan los elementos que se traducen		se destacan los elementos que se traducen
	</center><br>		</center><br>

Miguelbf en 09:32 10 may 2012

2012-05-10T09:32:13Z

← Revisión anterior		Revisión del 09:32 10 may 2012
Línea 1:		Línea 1:
	__NOTOC__		__NOTOC__

	{{Nota\|nota=Este como está disponible en gallego en el [http://wiki.trasno.net/Converter_HTML_a_.po_e_%C3%A1_inversa ''wiki'' de '''Trasno''']~~. Y~~ en inglés en el [ ''wiki'' de '''Tupí'''].}}		{{Nota\|nota=Este como está disponible en gallego en el [http://wiki.trasno.net/Converter_HTML_a_.po_e_%C3%A1_inversa ''wiki'' de '''Trasno'''] y en inglés en el [ ''wiki'' de '''Tupí'''].}}

	== Introducción ==		== Introducción ==

Miguelbf en 09:24 10 may 2012

2012-05-10T09:24:00Z

← Revisión anterior		Revisión del 09:24 10 may 2012
Línea 1:		Línea 1:
	__NOTOC__		__NOTOC__

	{{Nota\|nota=Este como está disponible en gallego en el [http://wiki.trasno.net/Converter_HTML_a_.po_e_%C3%A1_inversa ''wiki'' de '''Trasno''']. E en inglés no [ ''wiki'' do '''Tupí'''].}}		{{Nota\|nota=Este como está disponible en gallego en el [http://wiki.trasno.net/Converter_HTML_a_.po_e_%C3%A1_inversa ''wiki'' de '''Trasno''']. Y en inglés en el [ ''wiki'' de '''Tupí'''].}}

	== Introducción ==		== Introducción ==

Miguelbf en 09:22 10 may 2012

2012-05-10T09:22:12Z

← Revisión anterior		Revisión del 09:22 10 may 2012
Línea 1:		Línea 1:
	__NOTOC__		__NOTOC__

	{{Nota\|nota=Este como está disponible en gallego en el [http://wiki.trasno.net/Converter_HTML_a_.po_e_%C3%A1_inversa ''wiki'' de '''Trasno'''].}}		{{Nota\|nota=Este como está disponible en gallego en el [http://wiki.trasno.net/Converter_HTML_a_.po_e_%C3%A1_inversa ''wiki'' de '''Trasno''']. E en inglés no [ ''wiki'' do '''Tupí'''].}}

	== Introducción ==		== Introducción ==

Miguelbf en 09:16 10 may 2012

2012-05-10T09:16:23Z

← Revisión anterior		Revisión del 09:16 10 may 2012
Línea 1:		Línea 1:
	__NOTOC__		__NOTOC__

			{{Nota\|nota=Este como está disponible en gallego en el [http://wiki.trasno.net/Converter_HTML_a_.po_e_%C3%A1_inversa ''wiki'' de '''Trasno'''].}}

	== Introducción ==		== Introducción ==

Miguelbf: Página creada con 'NOTOC == Introducción == Este '''como''' nace de la necesidad de disponer de una forma sencilla de traducción, de archivos de ayuda y de páginas web, hechas con HTML (...'

2012-05-10T09:13:08Z

Página creada con '__NOTOC__ == Introducción == Este '''como''' nace de la necesidad de disponer de una forma sencilla de traducción, de archivos de ayuda y de páginas web, hechas con HTML (...'

Página nueva

__NOTOC__
== Introducción ==

Este '''como''' nace de la necesidad de disponer de una forma sencilla de traducción, de archivos de ayuda y de páginas web, hechas con HTML (.htm, .html, .xhtml).

Pensado, inicialmente, para que los desarrolladores faciliten un método estándar para la traducción, a los traductores sin perfil técnico, sirve también para aquellos traductores más avanzados que quieren simplificar procesos, o facilitar métodos más sencillos a compañeros de equipo.

En este documento vamos a ver los siguientes pasos para completar el proceso:

:'''Trabajo a cargo del(os) desarrollador(es) o del coordinador de traducciones'''
::'''1''' [[#Preparación de las herramientas y archivos|Preparación de las herramientas y archivos]]
::'''2''' [[#Conversión de HTML a .po|Conversión de HTML a .po]]
:'''Trabajo a cargo del(os) traductor(es)'''
::'''3''' [[#Proceso de traducción|Proceso de traducción]]
:'''Trabajo a cargo del(os) desarrollador(es) o del coordinador de traducciones'''
::'''4''' [[#Conversión de .po a HTML|Conversión de .po a HTML]]
::'''5''' [[#Traducción de .xml|Traducción de .xml]]
:'''Trabajo que debe definirse si lo hace el traductor o el desarrollador/coordinador'''
::'''6''' [[#Traducción (?) de imágenes|Traducción (?) de imágenes]]

Documentación de base
*http://translate.sourceforge.net/wiki/toolkit/html2po
*http://opensource.bureau-cornavin.com/html2pot-po2html/index.html

== Preparación de las herramientas y archivos ==

Necesitamos tener instalado:
*el paquete de herramientas de traducción «''translate-toolkit''» y las de desarrollo «''python''» y «''python-dev''»
*En Debian: <code>apt-get install translate-toolkit python python-dev</code>

Empleo como ejemplo la aplicación '''Tupí''' en la que estuve trabajando estos días pasados y que fue lo que me dio la idea de hacer este manual. El objetivo es convertir a archivos '''.po''' los archivos de la ayuda integrada en la aplicación, que están construidos con HTML.

Examinando el archivo de fuentes ''tupi_0.1-git12.tar.gz'' (una vez descomprido se llama ''tupi-0.1'') encontramos la carpeta '''help'''

:<code> /hombre/usuario/Tupi/tupi-0.1/src/components/help/help$</code>

haciendo un «''ls''» vemos que contiene las siguientes carpetas

:<code> css en es examples images man ru</code>

destaco en <color font color="#FF0000">rojo los paquetes de idioma

veamos el contenido de la carpeta «''en''»

:<code> ls en</code>

que nos da la siguiente salida:

<pre>
adding_frames.html drawing.html player.html
animation.html first.html preview_time.html
chapter0.html help.html shortcuts.html
chapter1.html help.xml stop_motion.html
chapter2.html how_to_help.html thanks.html
chapter3.html images translations.html
chapter4.html init.html tupi.html
chapter5.html links.html tupi_short.html
components.html new.html video_file.html
cover.html philosophy.html
</pre>

 <center>
[[File:Tupi-help_1a_gl.png|center|border|400px]] 
'''Fig. num. 1''' ─ Vista de la carpeta «help» y el destaque 
de la carpeta «en» en un explorador gráfico
</center> 

Fijémonos en un detalle, tenemos dos carpetas con el nombre «images»
*una en la ruta         → <code> /hombre/usuario/Tupi/tupi-0.1/src/components/help/help</code>
*y otra en la ruta  → <code> /hombre/usuario/Tupi/tupi-0.1/src/components/help/help/en</code>

 <center>
[[File:Tupi-help_1b.png|center|border|400px]] 
'''Fig. num. 2''' ─ Observad lo marcado en verde
</center> 

Normalmente, en la primera, se encuentran las imágenes inamovibles o genéricas, y en la segunda las imágenes que cambian en función de la traducción, como son las capturas de interfaz, las de mensajes, etc. De estas segundas [[#Traducción (?) de imágenes|hablaremos más adelante]].

<center>[[#Introducción|Volver al inicio]]</center>

== Conversión de HTML a .po ==

Crear los archivos de traducción «''.po''» a partir de los «''.html''» originales

<pre>
html2po en l10n

↓ ↓ ↓
↓ ↓ nombre que le damos a la carpeta en el que vamos a guardar los «.po»
↓ nombre de la carpeta en la que están los «.html» originales
orden de conversión html a(to) po
</pre>

hecho esto facemo otra vez un «''ls''»

:<code> css en es examples images l10n man ru</code>

y comprobamos que ahora tenemos una nueva carpeta «''l10n''»

veamos su contenido con un «''ls l10n''»

<pre>
adding_frames.po chapter5.po init.po stop_motion.po
animation.po components.po links.po thanks.po
chapter0.po cover.po new.po translations.po
chapter1.po drawing.po philosophy.po tupi.po
chapter2.po first.po player.po tupi_short.po
chapter3.po help.po preview_time.po video_file.po
chapter4.po how_to_help.po shortcuts.po
</pre>

 <center>
[[File:Tupi-help_2a_gl.png|center|border|400px]] 
'''Fig. num. 3''' ─ Vista de la carpeta «help» y el destaque 
de la carpeta «l10n» en un explorador gráfico
</center> 

Observemos, en diferencia con el listado anterior, que no existe el archivo/carpeta «''images''» ni el archivo correspondiente al «''help.xml''»

{{Nota|nota=
'''Nota:''' Existe otra posibilidad, extraer los archivos HTML a «'''.pot'''» esta es una buena forma de generar «''actualizadores''». Es más sencilla para el desarrollador/coordinador, sin embargo algo más compleja de uso para los traductores con un bajo perfil técnico.

La orden sería: <code>  html2po -P en l10n  </code> en la que la opción ''-P'' indica que la extracción se haga a archivos ''.pot''
}} 

<center>[[#Introducción|Volver al inicio]]</center>

== Proceso de traducción ==

Una vez que ya disponemos de los archivos «''.po''» procedemos a traducirlos como solemos hacerlo, empleando las herramientas de CAT (Traducción Asistida por Computador) que mejor se adapten a nosotros. Otra posibilidad es enviar estos archivos a algún servicio de Traducción en Web, como [http://translate.sourceforge.net/wiki/pootle/index Pootle] o [https://www.transifex.net/ Transifex].

 <center>
[[File:poedit.png|border|400px]] [[File:virtaal.png|border|400px]] 
[[File:lokalize.png|border|400px]] [[File:omegat.png|border|400px]] 
'''Fig. num. 4''' ─ Vista de distintas interfaces de traducción: 
PoEdit, Virtaal, Lokalize y OmegaT
</center> 

En este punto es importante destacar que '''no es necesario''' generar los archivos binarios «''.mo''».

<center>[[#Introducción|Volver al inicio]]</center>

== Conversión de .po a HTML ==

Crear los archivos «''.html''» ya traducidos a partir de los «''.po''» que estuvimos (o estuvieron) traduciendo
<pre>
po2html -t en l10n gl

↓ ↓ ↓ ↓ ↓
↓ ↓ ↓ ↓ nombre que le damos a la carpeta de destino
↓ ↓ ↓ ↓ en este caso empleamos el indicador del idioma gallego «gl»
↓ ↓ ↓ carpeta en la que están los archivos «.po» ya traducidos
↓ ↓ carpeta en la que están los originales, para ser empleados cómo «modelos»
↓ opción de uso de modelo (t de template)
orden de conversión po a(to) html
</pre>

Un nuevo «''ls''>» nos dirán que fue creada la carpeta «''gl''»

:<code> css en es examples gl images l10n man ru</code>

veamos ahora el contenido de esta carpeta «gl» con la orden «<code>ls gl</code>»

<pre>
adding_frames.html cover.html player.html
animation.html drawing.html preview_time.html
chapter0.html first.html shortcuts.html
chapter1.html help.html stop_motion.html
chapter2.html how_to_help.html thanks.html
chapter3.html init.html translations.html
chapter4.html links.html tupi.html
chapter5.html new.html tupi_short.html
components.html philosophy.html video_file.html
</pre>

 <center>
[[File:Tupi-help_3a_gl.png|center|border|400px]] 
'''Fig. num. 5''' ─ Vista de la carpeta «help» y el destaque 
de la carpeta «gl» en un explorador gráfico
</center> 

Quedamos en que en esta carpeta nos faltan la carpeta «''images''» y el archivo «''help.xml''». Para el caso del archivo «''.xml» [[#Traducción de .xml|veremos a continuación como proceder]], para el caso de la carpeta«''images''» lo veremos [[#Traducción (?) de imágenes|más adelante]], finalizando este manual.

<center>[[#Introducción|Volver al inicio]]</center>

== Traducción de .xml ==

La traducción de un archivo «''.xml''» deberemos hacerla empleando un editor de texto sencillo, nunca editores de texto con formato, como pueden ser Abiword, LibreOffice, Apache-Openoffice, etc.

Un archivo «''.xml''» suele tener un esquema semejante la este:

<pre>
<?xml version = '1.0' encoding = 'UTF-8'?>
<KHelpSystem>
<Section title="Capa" file="cover.html" />
<Section title="Introducción" file="chapter0.html">
<SubSection title="Nuestra visión y la Licencia" file="philosophy.html" />
<SubSection title="Animación para principiantes" file="init.html" />
</Section>
<Section title="Tupí? Que es eso?" file="chapter1.html">
<SubSection title="Componentes principales" file="components.html" />
<SubSection title="Módulo de animación" file="animation.html" />
<SubSection title="Módulo de reproducción" file="player.html" />
<SubSection title="Módulo de ayuda" file="help.html" />
</Section>
</pre>

Sólo se debe traducir '''el contenido entre comillas''' «"» de los títulos (''Section title, SubSection title'') y respetar rigurosamente las dobles comillas inglesas que delimitan el texto. '''Nunca''' debemos traducir los nombres de archivos (''file="cover.html"'' p.ej.) ni ninguna otra etiqueta.

Aconsejamos que empleéis un editor de texto sencillo que emplee coloreado en función del código, hoy en día lo hacen la mayoría de los que acompañan a una distribución, o, en el peor de los casos, emplean un añadido para hacerlo. El ejemplo siguiente es una captura del editor ''Gedit''.

 <center>
[[File:vista-xml.png|center|border|400px]] 
'''Fig. num. 6''' ─ Vista del ficheiro «help.xml» 
se destacan los elementos que se traducen
</center> 

<center>[[#Introducción|Volver al inicio]]</center>

== Traducción (?) de imágenes ==

Esto es algo muy sencillo de entender, y no muy facil de hacer, ya que requiere de bastante paciencia y, a veces, de algún conocimiento de tratamiento de imágenes.

Todo comienza con la instalación de la aplicación en el idioma objeto de la traducción y su correcta ejecución. Deberemos ir aplicando las acciones tal y como aparecen en las imágenes del original e iremos haciendo las oportunas capturas.

Estas capturas, una vez «procesadas» (cómo se puede ver a continuación) irán en una carpeta llamada ''images'', incluída en la carpeta que creamos anteriormente. En nuestro ejemplo en:
:<code>/hombre/usuario/Tupi/tupi-0.1/src/components/help/help/gl/images</code>

'''Importante''': las imágenes deben respetar '''exactamente''' el mismo nombre. Cualquier cambio en él hará que no se encuentre esa imagen.

Simplemente una captura de un recorte

 <center>
[[File:top_menu_es.png]] 
[[File:top_menu_gl.png]] 
'''Fig. num. 7''' ─ Vista del menú superior de la aplicación en castellano y en gallego 
Nota: la diferencia que se observa en el contenido se debe a que corresponden a versiones diferentes.
</center> 

O, a veces, tendremos que emplear alguna herramienta de dibujo como el ''Gimp'' o ''Inkscape''.

 <center>
[[File:tupi_gui_components_es.png|400px]][[File:tupi_gui_components_gl.png|400px]] 
'''Fig. num. 5''' ─ Vista del esquema de la aplicación en castellano y en gallego
</center> 

<center>[[#Introducción|Volver al inicio]]</center>