HTML

Traducción con IA para archivos HTML con Lingo.dev CLI

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje de marcado estándar para crear páginas web y aplicaciones web. Utiliza etiquetas para estructurar el contenido y definir elementos como encabezados, párrafos, enlaces, imágenes y formularios.

¿Qué es Lingo.dev CLI?

Lingo.dev CLI es una CLI gratuita y de código abierto para traducir aplicaciones y contenido con IA. Está diseñada para reemplazar el software tradicional de gestión de traducciones mientras se integra con los pipelines existentes.

Para obtener más información, consulta Descripción general.

Acerca de esta guía

Esta guía explica cómo traducir archivos HTML con Lingo.dev CLI.

Aprenderás a:

  • Crear un proyecto desde cero
  • Configurar un pipeline de traducción
  • Generar traducciones con IA

Requisitos previos

Para usar Lingo.dev CLI, asegúrate de tener instalado Node.js v18+:

❯ node -v
v22.17.0

Paso 1. Configurar un proyecto

En el directorio de tu proyecto, crea un archivo i18n.json:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Este archivo define el comportamiento del pipeline de traducción, incluyendo qué idiomas traducir y dónde existe el contenido localizable en el sistema de archivos.

Para obtener más información sobre las propiedades disponibles, consulta i18n.json.

Paso 2. Configurar el locale de origen

El locale de origen es el idioma y región originales en los que se escribió tu contenido. Para configurar el locale de origen, establece la propiedad locale.source en el archivo i18n.json:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

El locale de origen debe proporcionarse como una etiqueta de idioma BCP 47.

Para ver la lista completa de códigos de locale que Lingo.dev CLI admite, consulta Códigos de locale admitidos.

Paso 3. Configurar los locales de destino

Los locales de destino son los idiomas y regiones a los que deseas traducir tu contenido. Para configurar los locales de destino, establece la propiedad locale.targets en el archivo i18n.json:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Paso 4. Crear el contenido de origen

Si aún no lo has hecho, crea uno o más archivos HTML que contengan el contenido a traducir. Estos archivos deben estar ubicados en una ruta que incluya el locale de origen en algún lugar de la ruta (por ejemplo, como un nombre de directorio como en/ o como parte del nombre del archivo como messages.en.html).

Para archivos HTML, el contenido traducible incluye:

  • Contenido de texto dentro de elementos HTML
  • Valores de atributos incluyendo:
    • Atributos alt (descripciones de imágenes)
    • Atributos title (tooltips)
    • Atributos placeholder (sugerencias de entrada)
    • Atributos value (valores de botones y entradas)
    • Atributos content de meta tags
  • El atributo lang se actualiza automáticamente para coincidir con el locale de destino

Los script tags, style tags y atributos no traducibles se conservan.

Por ejemplo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MyApp - Hello World</title>
    <meta name="description" content="A simple demo app" />
  </head>
  <body>
    <h1>Welcome to MyApp</h1>
    <p>Hello, world! This is a simple demo with <strong>bold text</strong>.</p>
    <img src="example.jpg" alt="Example image" />
  </body>
</html>

Paso 5. Crear un bucket

  1. En el archivo i18n.json, añade un objeto "html" al objeto buckets:

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "html": {}
  }
}

  2. En el objeto "html", define un array de uno o más patrones include:

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "html": {
      "include": ["./[locale]/example.html"]
    }
  }
}

    Estos patrones definen qué archivos traducir.

    Los patrones en sí:

    • deben contener [locale] como marcador de posición para el locale configurado
    • pueden apuntar a rutas de archivos (por ejemplo, "[locale]/config.html")
    • pueden usar asteriscos como marcadores de posición comodín (por ejemplo, "[locale]/*.html")

    Los patrones glob recursivos (por ejemplo, **/*.html) no son compatibles.

Paso 6. Configurar un LLM

Lingo.dev CLI utiliza modelos de lenguaje grandes (LLM) para traducir contenido con IA. Para usar uno de estos modelos, necesitas una clave API de un proveedor compatible.

Para empezar a trabajar lo más rápido posible, recomendamos usar Lingo.dev Engine, nuestra propia plataforma alojada que ofrece 10 000 tokens de uso mensual gratuito:

  1. Regístrate para obtener una cuenta de Lingo.dev.

  2. Ejecuta el siguiente comando:

    npx lingo.dev@latest login

    Esto abrirá tu navegador predeterminado y te pedirá que te autentiques.

  3. Sigue las instrucciones.

Paso 7. Genera las traducciones

En el directorio que contiene el archivo i18n.json, ejecuta el siguiente comando:

npx lingo.dev@latest run

Este comando:

  1. Lee el archivo i18n.json.
  2. Encuentra los archivos que necesitan ser traducidos.
  3. Extrae el contenido traducible de los archivos.
  4. Utiliza el LLM configurado para traducir el contenido extraído.
  5. Escribe el contenido traducido de vuelta en el sistema de archivos.

La primera vez que se generan las traducciones, se crea un archivo i18n.lock. Este archivo realiza un seguimiento del contenido que ha sido traducido, evitando retraducciones innecesarias en ejecuciones posteriores.

Ejemplo

en/example.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MyApp - Hello World</title>
    <meta name="description" content="A simple demo app" />
  </head>
  <body>
    <h1>Welcome to MyApp</h1>
    <p>Hello, world! This is a simple demo with <strong>bold text</strong>.</p>
    <img src="example.jpg" alt="Example image" />
    <input type="text" placeholder="Enter text here" />
    <a href="#" title="Click for more">Learn more</a>
  </body>
</html>

es/example.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>MyApp - Hola Mundo</title>
    <meta name="description" content="Una aplicación de demostración simple" />
  </head>
  <body>
    <h1>Bienvenido a MyApp</h1>
    <p>¡Hola, mundo! Esta es una demostración simple con <strong>texto en negrita</strong>.</p>
    <img src="example.jpg" alt="Imagen de ejemplo" />
    <input type="text" placeholder="Ingresa texto aquí" />
    <a href="#" title="Haz clic para más">Saber más</a>
  </body>
</html>

i18n.json

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "html": {
      "include": ["./[locale]/example.html"]
    }
  }
}

i18n.lock

version: 1
checksums:
  ab95e8c959a889717f02a05af5c5b1e6:
    head/0/0: 7d39787547365ee4194f29f3f54e5c05
    head/1#content: 49f8864eb0e53903f04532bf33e1e4fa
    head/2#content: c2a1da93efb7e744d100df705e5fcbfd
    head/3#content: d94b318cb327f61f1aea44a6cb1fdcad
    body/0/0: d1c3a9f35e377554a4ccaa467ca26614
    body/1/0: e19afd1952881bdf10063f9478980147
    body/1/1/0: 7cd9256312384858ecba6c29d3c2e550
    body/1/2: ce8b9bb44f031705708a70e068bb73c8
    body/1/3/0: 037d114f19b882f08994712b8d9c1e37
    body/1/4: f05f450fffcb17520c441ab9789f40ce
    body/2/0/0/0: 57d373bcffe2d376cbf9919da30ca30b
    body/3#alt: 68f95fca639f8bf72a4796b6734b02d5
    body/4#alt: cb7d920c3bbcade1c8e0307093f58573
    body/5#placeholder: a05ce3b4578f55e41bd2ad4964f966b4
    body/6#placeholder: a4554ed67c02872e302b0042724f859d
    body/7#title: c903c6985a40ce02d65c90229de35a4e
    body/7/0: e598091d132f890c37a6d4ed94f6d794
    body/8#title: d656021ba5f485fa1a82f8aac6ecc5de
    body/8/0: 1c6856488bd34ad87fcacce2d8e66a0b
    body/9/0: 862964e6cd73cdffdcac622406c6bac9