Versión 1 — Traductor Básico
La versión básica del Traductor Multilingüe Instantáneo Autónomo integra el widget oficial de Google Translate en su forma más pura y directa. Esta versión demuestra el funcionamiento esencial del módulo: un contenedor HTML, un archivo CSS para estilo institucional y un archivo JavaScript que inicializa el traductor habilitando todos los idiomas disponibles. Es la base formativa sobre la cual evolucionarán las versiones intermedia, avanzada, formativa e institucional.
Explicación técnica de la versión
La versión básica del Traductor Multilingüe Instantáneo Autónomo se compone de tres archivos fundamentales: index.html, traductor.css y traductor.js. Cada uno cumple una función específica dentro del módulo institucional.
1. Archivo index.html
Este archivo actúa como estructura base del recurso. Contiene:
- El contenedor
<div id="google_translate_element">donde Google insertará el widget. - La llamada al archivo traductor.css para aplicar estilo institucional.
- La llamada al archivo traductor.js que inicializa el traductor.
- La llamada al script oficial de Google con el callback googleTranslateElementInit.
2. Archivo traductor.css
Este archivo define la estética institucional del módulo. Sus características principales son:
- Uso de colores claros e intermedios para máxima visibilidad.
- Bordes suaves y radios redondeados para estilo gerencial.
- Tipografía institucional basada en system-ui.
- Estructura adaptable a dispositivos móviles y hardware diverso.
3. Archivo traductor.js
Este archivo contiene la función clave del recurso: googleTranslateElementInit(). Esta función:
- Define el idioma base de la página (
pageLanguage: 'es'). - Activa el modo global de idiomas (
includedLanguages: ''). - Establece el layout simple del widget.
- Indica el contenedor donde Google debe insertar el traductor.
4. Motor Google Translate
Google Translate funciona mediante un script externo que carga el widget y ejecuta la función callback especificada en la URL. Este motor:
- Traduce la página completa dinámicamente.
- No requiere configuración adicional.
- Es compatible con todos los navegadores modernos.
- Se integra sin conflictos en recursos institucionales.
🌍 Traducción Global Automática
Selecciona tu idioma para traducir esta página completa.
<div class="traductor-box">
<h3>🌍 Traducción Global Automática</h3>
<p>Selecciona tu idioma para traducir esta página completa.</p>
<!-- Nodo donde Google pintará el widget -->
<div id="google_translate_element"></div>
</div>
<!-- Script propio -->
<script src="traductor.js"></script>
<!-- Script oficial de Google -->
<script async src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>.traductor-box {
margin: 25px auto;
padding: 20px;
max-width: 600px;
border: 1px solid #cbd5e1;
border-radius: 12px;
background-color: #f8fafc;
font-family: system-ui, sans-serif;
}
.traductor-box h3 {
margin: 0 0 10px 0;
font-size: 1.2rem;
color: #1f2937;
}
.traductor-box p {
margin: 0 0 12px 0;
font-size: 0.95rem;
color: #4b5563;
}function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'es', // Idioma nativo de la página
includedLanguages: '', // Vacío = Google habilita TODOS los idiomas disponibles
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}