Idiomas disponibles

La lista de idiomas disponibles actualmente y sus códigos de idioma («en», «fr», «de», ...) se puede consultar aquí: https://conword.io/sprachen/

Requisitos previos

El frontend de conword está escrito en javascript plano, por lo que no depende de ningún framework. Aunque no depende de código de terceros, funciona bien con jquery y otras herramientas de uso común.

Conword ofrece traducciones en tiempo real sin almacenar ningún dato en el servidor del cliente. Esto hace que Conword sea independiente del CMS subyacente.

Configuración básica

Incrusta el código JS en tu HTML

Conword funciona en su sitio web con esta única línea de código:

<script id="conword-root" charset="utf-8" src="https://static.conword.io/js/v2/[client-id]/conword.js"></script>

Opciones de configuración

Si quieres configurar Conword, hay un objeto de JavaScript llamado «conword_config» que puedes utilizar para pasar tus ajustes a la instancia de Conword.

Conword funciona en su sitio web con esta única línea de código:

<script>
	var conword_config={
		disable_rtl_attribute:false,
		disable_language_switcher:false,
		ai_notification:false,
		skip_classes:[]
	};
</script>

<script id="conword-root" charset="utf-8" src="https://static.conword.io/js/v2/[client-id]/conword.js"></script>

Configuraciones disponibles

Ejemplo: Desactivación del widget estándar de cambio de idioma

<script>
	var conword_config={
		disable_language_switcher:true
	};
</script>

<script id="conword-root" charset="utf-8" src="https://static.conword.io/js/v2/[client-id]/conword.js"></script>

Notificación de IA

Algunos sitios web están obligados a informar a sus visitantes de que el contenido que están leyendo ha sido generado por IA. Con la opción «ai_notification», Conword muestra automáticamente dicha notificación cuando la página se traduce por primera vez.

La notificación se muestra una vez por navegador (Conword lo recuerda en el almacenamiento local). El texto se inserta en el idioma de origen de tu sitio web (alemán o inglés; en otros idiomas de origen se muestra el texto en inglés) justo antes de que comience la traducción, de modo que se traduce junto con el resto de la página. En él se indica el idioma original de tu sitio web.

Valores de las opciones

• falso – sin notificación. Esta es la opción predeterminada, incluso si no aparece en tu configuración.
• «top» – En la parte superior de la página aparece una barra de notificación que se puede cerrar. Permanece fija en la parte superior de la ventana de visualización mientras se desplaza la página, hasta que el visitante la cierre.
• «modal» – Se abre un cuadro de diálogo modal que el visitante debe confirmar.

Barra de notificaciones en la parte superior de la página

El visitante puede cerrar la barra pulsando el «✕»:

<script>
	var conword_config={
		ai_notification:"top"
	};
</script>

<script id="conword-root" charset="utf-8" src="https://static.conword.io/js/v2/[client-id]/conword.js"></script>

Cuadro de diálogo modal

El visitante debe confirmar el cuadro de diálogo:

<script>
	var conword_config={
		ai_notification:"modal"
	};
</script>

<script id="conword-root" charset="utf-8" src="https://static.conword.io/js/v2/[client-id]/conword.js"></script>

Volver a mostrar la notificación

Si quieres volver a mostrar la notificación (por ejemplo, al hacer clic en un enlace de «más información»), utiliza Conword.show_ai_notification(). El evento «Conword:ai_notification_shown» se activa cada vez que se muestra la notificación.

Estilo

La barra de notificaciones tiene el identificador «cnw_ai_notification», y el cuadro de diálogo modal, el identificador «cnw-ai-dialog». Ambos tienen la clase «cnw_ai_notification», por lo que puedes personalizar su aspecto con tu propio CSS.

API Javascript de Conword

Si quieres incorporar la funcionalidad de Conword en tu diseño, puedes utilizar la API de JavaScript de Conword. Para utilizar la API, solo tienes que integrar el archivo conword.js en tu página. Consulta Configuración básica

Punto final de la API

Puedes utilizar el objeto JavaScript «Conword» para invocar métodos de la API.
Consulta el capítulo siguiente para obtener más información.

Métodos API

Conword.translate(language_key)

Conword.translate('es');

Conword.retranslate()

Conword.retranslate();

Conword.set_user_language(language_key)

Conword.set_user_language('es');

Conword.unset_user_language()

Conword.unset_user_language();

Conword.get_current_language()

var current_langauge = Conword.get_current_language();

Conword.get_available_languages()

var language_data = Conword.get_available_languages();

Conword.show_ai_notification(mode)

Conword.show_ai_notification('modal');

Conword.close_ai_notification()

Conword.close_ai_notification();

Eventos personalizados

document.addEventListener("Conword:ready", function(){
	/* your code here */
});

Lista de eventos personalizados

• "Conword:ready" - se disparará cuando Conword se cargue e inicialice.
• "Conword:translation_started" - se disparará cuando Conword comience a traducir.
• "Conword:translation_done" - se disparará cuando Conword haya terminado una traducción.
• «Conword:translation_failed»: se activará cuando falle un intento de traducción.
• «Conword:ai_notification_shown»: se activará cuando se haya mostrado la notificación de IA (véase la opción ai_notification).

Objeto lingüístico

La API de Conword proporciona un objeto que contiene todos los idiomas disponibles y sus metadatos. El objeto se puede recuperar de la siguiente manera:

let languages=Conword.get_available_languages();

El objeto tiene este aspecto:

(En función de los idiomas disponibles con su licencia).

{
    "de": {
        "name_en": "German",
        "name_de": "Deutsch",
        "name": "Deutsch",
        "rtl": false,
        "text_title": "Sprache wählen:",
        "text_1": "Die Seite wird gerade übersetzt …",
        "text_2": "Einen Moment bitte.",
        "text_error": "Beim Übersetzen der Seite ist ein Fehler ist aufgetreten."
    },
    "en": {
        "name_en": "English",
        "name_de": "Englisch",
        "name": "English",
        "rtl": false,
        "text_title": "Select language:",
        "text_1": "The page is being translated ...",
        "text_2": "One moment please.",
        "text_error": "An error occurred while translating the page."
    },
    "tr": {
        "name_en": "Turkish",
        "name_de": "Türkisch",
        "name": "Türkçe",
        "rtl": false,
        "text_title": "Dil seçin:",
        "text_1": "Sayfa çevriliyor ...",
        "text_2": "Bir dakika lütfen.",
        "text_error": "Sayfa çevrilirken bir hata oluştu."
    },
    "it": {
        "name_en": "Italian",
        "name_de": "Italienisch",
        "name": "Italiano",
        "rtl": false,
        "text_title": "Selezionare la lingua:",
        "text_1": "La pagina è in corso di traduzione ...",
        "text_2": "Un momento, per favore.",
        "text_error": "Si è verificato un errore durante la traduzione della pagina."
    }
}
  					

Contenidos excluidos

Formularios

Conword ignorará los datos introducidos por el usuario en campos de formulario como y .</strong> No obstante, se traducirán las etiquetas y los atributos de marcador de posición.<br> Dado que Conword no puede saber cuándo se muestran los datos del usuario, es posible que desees excluir este código HTML de las traducciones realizadas por Conword. Por lo tanto, si al final de tu formulario hay un resumen de los datos introducidos, debes utilizar el siguiente método:

El atributo «translate»

Si quieres que algunos elementos no se traduzcan, puedes utilizar el atributo «translate». Al establecer su valor en «no», Conword ignorará ese elemento y todos sus elementos secundarios.

Por ejemplo:

<div>
	<p>I will be translated</p>
	<p translate="no">
		I will NOT be translated.
		<small>Me neither, since my parent element uses the transate attrube.</small>
	</p>
	I will be translated as well
</div>

La clase «cnw_skip_translation»

Conword omitirá todas las etiquetas HTML que contengan la clase «cnw_skip_translation».

Por ejemplo:

<div>
	<p>I will be translated</p>
	<p class="cnw_skip_translation">
		I will NOT be translated.
		<small>Me neither, since my parent element uses the cnw_skip_translation class.</small>
	</p>
	I will be translated as well
</div>

El atributo «data-conword-skip-translation»

Un atributo de datos sin valor. Conword omitirá el elemento y todos sus hijos, igual que con la clase anterior. Resulta útil si no quieres modificar las clases de un elemento.

Por ejemplo:

<div>
	<p>I will be translated</p>
	<p data-conword-skip-translation>
		I will NOT be translated.
		<small>Me neither, since my parent element uses the data-conword-skip-translation attribute.</small>
	</p>
</div>

Tus propias clases: la opción «skip_classes»

Si tu CMS o plantilla ya marca el contenido que no debe traducirse con su propia clase, no es necesario que añadas «cnw_skip_translation» en todas partes. En su lugar, incluye tus clases en la opción «skip_classes» (consulta Opciones de configuración). Los elementos que tengan una de estas clases, así como todos sus elementos secundarios, se tratan exactamente igual que los elementos con «cnw_skip_translation».

Por ejemplo:

<script>
	var conword_config={
		skip_classes:["no-translate", "legal-text"]
	};
</script>

<script id="conword-root" charset="utf-8" src="https://static.conword.io/js/v2/[client-id]/conword.js"></script>

<div>
	<p>I will be translated</p>
	<p class="legal-text">
		I will NOT be translated.
		<small>Me neither, since my parent element uses one of the configured classes.</small>
	</p>
</div>

Otras formas

También se reconoce la clase «notranslate». Los scripts, las hojas de estilo, el contenido SVG, las imágenes y los elementos «noscript» y «textarea» siempre se omiten. Los datos introducidos por el usuario en los campos de formulario nunca se traducen, mientras que las etiquetas y los marcadores de posición sí se traducen.

Nota: Las etiquetas vacías se omitirán automáticamente.

Es posible excluir páginas completas sin cargar Conword o utilizando la función conword.lock(), que está disponible en las versiones más recientes de Conword.

Ejemplos

Excluir dinámicamente el contenido con el nombre de clase «.formular_zusammenfassung»

Utiliza el evento «Conword:ready» para este tipo de marcado: se activa justo antes de que un idioma de usuario guardado desencadene la traducción automática, por lo que la clase ya está lista a tiempo. El evento «DOMContentLoaded» puede ser demasiado tardío, ya que el propio Conword se inicia con ese evento.

document.addEventListener("Conword:ready", function() {
	var formular_zusammenfassungen = document.querySelectorAll('.formular_zusammenfassung');
	for(var i = 0; i < formular_zusammenfassungen.length; i++){
		formular_zusammenfassungen[i].classList.add('cnw_skip_translation');
	}
});

Ejemplo: Enlace HTML para empezar a traducir la página al español

<a href="javascript:Conword.translate('en');">Translate to english</a>
						

Integración personalizada de Conword en su página:

Tres selectores de idioma completos (enlaces, menús desplegables, botones con banderas), en tiempo real y con código: demostración: cómo crear tu propio selector de idioma.

document.addEventListener("Conword:ready", function(){
	my_languages=Conword.get_available_languages();
	for (var langkey in my_languages) {

		language_meta=my_languages[langkey];

		// now you can make use of the language object - see the chapter above.
		// eg:  language_meta.name or language_meta.name_en ...
		console.debug(language_meta.name,language_meta.name_en);

		// to check if the langkey is the currently active language:
		active=false;
		if(Conword.get_current_language()==langkey) active=true;

		// jquery example of adding menu items
		$language_dropdown.append('<li><a class="'+active+'" href="javascript:start_conwordio_translation(\''+langkey+'\');" data-lang="'+langkey+'" data-langname="'+language_meta.name+'" title="Diese Seite auf \''+language_meta.name+'\' übersetzen">'+language_meta.name+'</a></li>');

	}
});

// example of a wrapper to call multiple actions (translation, menu controls, tracking, ...) at the same time
function start_conwordio_translation(lang){
	Conword.translate(lang);
	hide_menu();
	matomo_track('Translation',lang);
}

Desplazar el selector de idioma predeterminado hacia la derecha, con CSS

<style>
	body .cnw_translationbox {
		right: 30px;
		left: auto;
	}
</style>

Más posiciones y combinaciones de colores para el selector predeterminado, aplicadas en tiempo real: demostración: rediseño del selector de idioma predeterminado.

Evita que se traduzcan todos los enlaces «mailto:» utilizando JavaScript y la clase cnw_skip_translation

document.addEventListener("Conword:ready", function() {
	var mailto_links = document.querySelectorAll('a[href^="mailto:"]');
	for(var i = 0; i < mailto_links.length; i++){
		if(mailto_links[i].innerHTML.indexOf('@')>-1) mailto_links[i].classList.add('cnw_skip_translation');
	}
});

Mostrar imágenes diferentes (u otro contenido) para cada idioma

Por motivos de localización, es posible que quieras cambiar el contenido de tu página web al cambiar de idioma.
Hay varias formas de controlar esto: por ejemplo, mediante atributos HTML. A continuación te mostramos un ejemplo de cómo cambiar las imágenes.

En primer lugar, crea una imagen con atributos de datos como esta:

<img src="bild_de.jpg" data-conword-src-de="bild_de.jpg" data-conword-src-en="image_en.jpg" data-conword-src-fr="fr.jpg" class="image_with_different_sources">

El código JavaScript detecta los cambios de idioma y sustituye la fuente (src) de la imagen por el valor del atributo.

document.addEventListener("Conword:translation_done", function(){
	current_language=Conword.get_current_language();
	images_with_different_sources = document.querySelectorAll('.image_with_different_sources'); // or select [data-conword-src-de]
	images_with_different_sources= [...images_with_different_sources]; // convert list to array
	images_with_different_sources.forEach(img => {
		img.src=img.getAttribute('data-conword-src-'+current_language); // change src
	});
});

Seguimiento

Para realizar un seguimiento de las solicitudes de Conword, recomendamos envolver la llamada de traducción javascript.

Script de ejemplo para rastrear traducciones con Matomo (Piwik):

<a href="javascript:custom_start_translation('en');">English</a>

<script>

	function custom_start_translation(languagekey){
		Conword.translate(language);
		matomo_track( 'Translation '+languagekey, location.href);

	}

	function matomo_track(category,action){
		if(typeof _paq !== 'undefined') {
			_paq.push(['trackEvent', category, action, 1]);
			return true;
		}
		return false
	}

</script>

Como alternativa, el seguimiento se puede realizar utilizando los eventos personalizados de Conword.
A continuación se muestra un ejemplo de cómo realizar el seguimiento de las traducciones de Conword con Piwik (Matomo):

<script>

	function matomo_track(category,action){
		if(typeof _paq !== 'undefined') {
			_paq.push(['trackEvent', category, action, 1]);
			return true;
		}
		return false
	}

	document.addEventListener("Conword:translation_started", function(){
		matomo_track( 'Translation '+Conword.get_current_language(), location.href);
	});

</script>

El siguiente ejemplo muestra cómo realizar un seguimiento de las traducciones de Conword con Google Analytics:

<script>

	document.addEventListener("Conword:translation_started", function(){
		gtag('event', 'translation', {
			'url': location.href,
			'language': Conword.get_current_language()
		});
	});

</script>