Con el API AJAX de idiomas, puedes traducir y detectar el idioma de bloques de texto de un sitio web utilizando JavaScript.
El API es nueva, por lo que es posible que se produzcan errores y puede que la documentación no sea totalmente perfecta. Te rogamos que seas paciente mientras solucionamos estos fallos, y te invitamos a unirte al foro de desarrolladores de las API AJAX, donde podrás aportar tus comentarios y discutir sobre el API.
Esta documentación está diseñada para personas familiarizadas con programación JavaScript y conceptos de programación relacionados con objetos. Existen muchos tutoriales sobre JavaScript disponibles en Internet.
La forma más sencilla de empezar a conocer esta API es consultar un ejemplo sencillo. El ejemplo siguiente detecta el idioma del texto determinado y, a continuación, lo traduce al inglés.
| 
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var text = document.getElementById("text").innerHTML;
google.language.detect(text, function(result) {
if (!result.error && result.language) {
google.language.translate(text, result.language, "en",
function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="text">??????????</div>
<div id="translation"></div>
</body>
</html>
Puedes ver este ejemplo aquí o editar y hacer pruebas con un ejemplo similar en Code Playground.
Para incluir el API AJAX de idiomas en tu página, debes utilizar el cargador de API AJAX de Google. El cargador habitual te permite cargar todas las API AJAX que necesites, incluida el API de idiomas. Debes incluir la llamada al API AJAX de Google y su etiqueta de secuencia de comandos google.load("language",
"1"):
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load("language", "1");
</script>
La primera etiqueta script carga la función google.load, que permite cargar API de Google individuales. google.load("language", "1") carga la versión 1 del API de idiomas. Actualmente sólo está disponible la versión 1 del API AJAX para feeds, pero es posible que en un futuro se creen nuevas versiones. Para obtener más información, consulta el foro sobre versiones .
El segundo argumento de google.load es la versión del API AJAX de idiomas que estás utilizando. Actualmente sólo está disponible la versión 1 del API AJAX de idiomas, pero es posible que en un futuro se creen nuevas versiones.
Si aparece una actualización significativa en el futuro y cambia el número de versión, se publicará una nota en Google Code y en el grupo de debate de las API AJAX. Cuando esto suceda, pensamos mantener ambas versiones disponibles durante al menos un mes para que puedas migrar tu código.
OAEl equipo del API AJAX de idiomas actualiza periódicamente el API con las mejoras de rendimiento y las correcciones de errores más recientes. Estas correcciones sólo deberían mejorar el rendimiento y solucionar errores, pero es posible que rompamos por error algunos clientes del API. Infórmanos de estos problemas a través del grupo de debate de las API AJAX.
Puedes consultar varios ejemplos en Code Playground, además de editarlos y hacer pruebas con ellos para entender mejor el funcionamiento de esta API.
En el ejemplo siguiente se muestra una traducción sencilla de una cadena JavaScript:
google.language.translate("Hello world", "en", "es", function(result) {
if (!result.error) {
var container = document.getElementById("translation");
container.innerHTML = result.translation;
}
});
En el ejemplo siguiente se muestra la detección de idiomas de una cadena JavaScript: Se devuelve el código de idioma:
var text = "¿Dónde está el baño?";
google.language.detect(text, function(result) {
if (!result.error) {
var language = 'unknown';
for (l in google.language.Languages) {
if (google.language.Languages[l] == result.language) {
language = l;
break;
}
}
var container = document.getElementById("detection");
container.innerHTML = text + " is: " + language + "";
}
});
Los navegadores y los sistemas operativos pueden ser o no ser compatibles con determinadas fuentes Unicode. Puedes detectar si el usuario que utiliza tu página web puede ver las fuentes de un idioma determinado de una manera legible o no utilizando el API de detección de compatibilidad con fuentes. Ten en cuenta que esto sólo funciona correctamente con fuentes Unicode. Si tu página web se muestra con fuentes que no utilizan Unicode, esta función no te será útil. Si la compatibilidad de fuentes no está disponible para un idioma determinado, puedes solucionarlo de varias formas. Lee este artículo para obtener más información.
En el ejemplo siguiente se muestra la detección de la compatibilidad de fuentes:
var result = google.language.isFontRenderingSupported("hi");
var resultStr = "";
if (result == google.language.FontRenderingStatus.SUPPORTED) {
resultStr = "Rendering for " + lang + " is supported.";
} else if (result == google.language.FontRenderingStatus.UNSUPPORTED) {
resultStr = "Rendering for " + lang + " is not supported.";
} else {
resultStr = "Unsupported language " + lang + " for font detection API.";
}
var resultDiv = document.getElementById("displayResultsDiv");
resultDiv.innerHTML += resultStr;
Ver ejemplo (fontdetection.html)
El ejemplo siguiente es similar al ejemplo de traducción básica, pero muestra cómo se puede traducir texto sin conocer el idioma de origen. Al especificar una cadena vacía como desconocida para el idioma de origen, el sistema detectará y traducirá en una llamada.
google.language.translate("Hello world", "", "es", function(result) {
if (!result.error) {
var container = document.getElementById("translation");
container.innerHTML = result.translation;
}
});
Ver ejemplo (autotranslate.html)
Cuando una aplicación utiliza las API AJAX de idiomas de Google, es importante comunicar la marca de Google a los usuarios. El método google.language.getBranding() está diseñado para ayudarte con esto. El método acepta un elemento DOM HTML o la ID correspondiente, así como opciones opcionales. La marca se adjunta al elemento proporcionado.
// attach a "powered by Google" branding
<div id='branding'> </div>
...
google.language.getBranding('branding');
La marca se puede personalizar a través de CSS y aparece en los formatos base 'vertical' y 'horizontal'. A continuación aparece un ejemplo en el que se muestran los distintos formatos y la personalización CSS.
A continuación se muestran dos ejemplos con los que se puede interactuar. En el primero se detecta el idioma con una cadena de texto predeterminada pero se permite la introducción de otro texto. También se muestran factores de veracidad y seguridad. Puedes probar ejemplos similares en Code Playground.
En el segundo ejemplo adicional se realiza una traducción. Sin embargo, también se puede interactuar con él del mismo modo que con el ejemplo anterior.
El API AJAX de idiomas de Google admite actualmente los idiomas siguientes: La tecnología mejora constantemente y el equipo se esfuerza por ampliar esta lista, por lo que debes consultarla a menudo. También puedes consultar la página del Traductor de Google para ver una lista de idiomas compatibles.
El API AJAX de idiomas de Google detecta actualmente todos los idiomas indicados anteriormente. El subconjunto de esos idiomas que se muestra a continuación además se puede traducir. Se puede traducir cualquier pareja de idiomas de la lista siguiente. Para comprobar si un idioma se puede traducir, utiliza google.language.isTranslatable(languageCode);.
Para los desarrolladores Flash y para aquellos desarrolladores que necesitan acceder al API AJAX de idiomas de Google desde otros entornos que no utilizan JavaScript, el API muestra una sencilla interfaz REST. En todos los casos, el método admitido es GET y el formato de respuesta es un resultado con codificación JSON con códigos de estado insertados. Para google.language.translate, está disponible el método POST. Las aplicaciones que utilizan esta interfaz deben cumplir todas las condiciones del servicio existentes. Es importante que prestes especial atención a la forma de identificarte correctamente en tus solicitudes. Las aplicaciones DEBEN incluir siempre un encabezado de referencia http válido y exacto en sus solicitudes. También te pedimos, aunque no es obligatorio, que incluyas en cada solicitud una clave de API válida. Al proporcionarnos esta clave, tu aplicación nos proporcionará un mecanismo de identificación secundario que nos resultará útil si necesitamos ponernos en contacto contigo para corregir algún problema.
La forma más fácil de aprender a utilizar esta interfaz es probarla. En la herramienta de línea de comandos curl o wget, ejecuta el siguiente comando:
curl -e http://www.my-ajax-site.com \
'http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=hello%20world&langpair=en%7Cit'
Este comando realiza una traducción (/ajax/services/language/translate), para Hello World (q=hello%20world) de inglés a italiano (langpair=en%7Cit). La respuesta tiene Content-Type configurado como text/javascript; charset=utf-8. En la respuesta que aparece a continuación, puedes ver que responseData es idéntico a las propiedades descritas en la documentación sobre los objetos de resultados.
{"responseData": {
"translatedText":"Ciao mondo"
},
"responseDetails": null, "responseStatus": 200}
Además de este formato de respuesta, el protocolo también es compatible con una función de devolución de llamada de estilo JSON-P clásico que se activa al especificar el argumento callback. Cuando aparece este argumento, el objeto JSON se envía como argumento a la devolución de llamada especificada.
callbackFunction(
{"responseData": {
"translatedText":"Ciao mondo"
},
"responseDetails": null, "responseStatus": 200})
Y, por último, el protocolo admite los argumentos callback y context. Cuando se especifican estos argumentos de URL, la respuesta se codifica como una llamada JavaScript directa con una firma de: callback(context, result, status, details, unused). Observa la pequeña diferencia en el siguiente comando y la siguiente respuesta.
curl -e http://www.my-ajax-site.com \ 'http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=hello%20world&langpair=en%7Cit&callback=foo&context=bar'
Este comando realiza una traducción y es idéntico a la llamada anterior, PERO se ha alterado para incluir callback y context. Con estos argumentos en funcionamiento, en lugar de un objeto JSON, se devuelve una llamada JavaScript como respuesta y se incluye el objeto JSON a través del parámetro result.
foo('bar', {"translatedText":"Ciao mondo"}, 200, null)
Para consultar la documentación completa sobre esta interfaz, visita la página del manual de referencia de clases.
Si detectas problemas con tu código:
Con el API AJAX de idiomas para transliteración, puedes habilitar la transliteración en cualquier área o en cualquier campo de texto de tu página web. Esto ayudará a los usuarios de tu página web a escribir cualquier idioma con un teclado inglés.
¿Qué es la transliteración? La transliteración es el proceso de convertir fonéticamente una palabra escrita en un alfabeto a otro. La transliteración no se debe confundir con la traducción, que implica un cambio de idioma conservando el significado. Con la transliteración, lo que se convierte es el sonido de las palabras de un alfabeto a otro.
Esta documentación está diseñada para personas familiarizadas con programación JavaScript y conceptos de programación relacionados con objetos. Existen muchos tutoriales sobre JavaScript disponibles en Internet. También debes estar familiarizado con la transliteración desde el punto de vista del usuario. Consulta la transliteración índica o la transliteración árabe para obtener información sobre el uso de la transliteración. Consulta este artículo para obtener más información.
Esta documentación conceptual no es completa ni exhaustiva, ya que está diseñada para que puedas comenzar a explorar la transliteración e incorporarla rápidamente a tu página.
La forma más sencilla de empezar a conocer esta API es consultar un ejemplo sencillo. En el ejemplo siguiente se habilita la transliteración en un área de texto con el idioma hindi, de modo que los usuarios pueden escribir en hindi con un teclado en otro idioma. El usuario también puede utilizar la combinación de teclas de acceso directo "ctrl+g" para alternar entre los idiomas de escritura. Si deseas obtener información sobre la selección de un idioma diferente, consulta la referencia de clases del API.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.HINDI],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textbox with id
// 'transliterateTextarea'.
control.makeTransliteratable(['transliterateTextarea']);
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
Type in Hindi (Press Ctrl+g to toggle between English and Hindi)<br>
<textarea id="transliterateTextarea" style="width:600px;height:200px"></textarea>
</body>
</html>
Ver ejemplo en Code Playground
El API AJAX de transliteración está incluido en el módulo "elements". Para incluir el API de transliteración de Google en tu página, necesitas en primer lugar la etiqueta de secuencia de comandos del API AJAX de Google.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
Esta etiqueta de secuencia de comandos cargará la función google.load, que permite cargar las API de Google individuales. Para cargar el API de transliteración de Google, las llamadas a google.load se realizarán como se muestra a continuación:
<script type="text/javascript">
google.load("elements", "1", {
packages: "transliteration"
});
</script>
De este modo, se carga la versión 1 del API de transliteración. Actualmente sólo está disponible la versión 1 del API de transliteración, pero es probable que en un futuro se creen nuevas versiones. Para obtener más información, consulta el foro sobre versiones .
El segundo argumento de google.load es la versión del API AJAX de idiomas que estás utilizando. Actualmente sólo está disponible la versión 1 del API de transliteración, pero es probable que en un futuro se creen nuevas versiones.
Cuando se cree una actualización significativa en el futuro y cambie el número de versión, se publicará una nota en Google Code y en el grupo de debate de las API AJAX. Cuando esto suceda, pensamos mantener ambas versiones disponibles durante al menos un mes para que puedas migrar tu código.
El equipo del API AJAX de idiomas actualiza periódicamente el API con las mejoras de rendimiento y las correcciones de errores más recientes. Estas correcciones sólo deberían mejorar el rendimiento y solucionar errores, pero es probable que rompamos por error algunos clientes del API. Infórmanos de estos problemas a través del grupo de debate de las API AJAX.
El ejemplo siguiente es muy similar a los ejemplos básicos que se muestran en la sección de introducción, pero muestra un control para alternar entre los modos de escritura. También habilita la transliteración en dos campos de texto.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage: 'en', // or google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage: ['hi'], // or [google.elements.transliteration.LanguageCode.HINDI],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textfields with the given ids.
var ids = [ "transl1", "transl2" ];
control.makeTransliteratable(ids);
// Show the transliteration control which can be used to toggle between
// English and Hindi.
control.showControl('translControl');
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
<center>Type in Hindi (Press Ctrl+g to toggle between English and Hindi)</center>
<div id='translControl'></div>
<br>Title : <input type='textbox' id="transl1"/>
<br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
</body>
</html>
Ver ejemplo (singlelangtransliteration.html)
El ejemplo siguiente es muy similar al anterior pero muestra un control en el que se puede elegir el idioma de destino. En este ejemplo, la opción destinationLanguage como ['te', 'ta', 'ml'].
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage: 'en',
destinationLanguage: ['hi','kn','ml','ta','te'],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textfields with the given ids.
var ids = [ "transl1", "transl2" ];
control.makeTransliteratable(ids);
// Show the transliteration control which can be used to toggle between
// English and Hindi and also choose other destination language.
control.showControl('translControl');
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
<center>Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)</center>
<div id='translControl'></div>
<br>Title : <input type='textbox' id="transl1"/>
<br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
</body>
</html>
Ver ejemplo (multilangtransliteration.html)
A continuación se muestra un ejemplo avanzado en el que se te indica cómo puedes crear tus propios controles personalizados para controlar la transliteración. Se utiliza una casilla de verificación para alternar entre los modos de escritura y un menú desplegable para cambiar el idioma de destino. También se registran controladores de eventos de varios eventos que se pueden activar con "TransliterationControl". Para obtener información detallada sobre posibles eventos, consulta la referencia de clase del API.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
var transliterationControl;
function onLoad() {
var options = {
sourceLanguage: 'en',
destinationLanguage: ['ar','hi','kn','ml','ta','te'],
transliterationEnabled: true,
shortcutKey: 'ctrl+g'
};
// Create an instance on TransliterationControl with the required
// options.
transliterationControl =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textfields with the given ids.
var ids = [ "transl1", "transl2" ];
transliterationControl.makeTransliteratable(ids);
// Add the STATE_CHANGED event handler to correcly maintain the state
// of the checkbox.
transliterationControl.addEventListener(
google.elements.transliteration.TransliterationControl.EventType.STATE_CHANGED,
transliterateStateChangeHandler);
// Add the SERVER_UNREACHABLE event handler to display an error message
// if unable to reach the server.
transliterationControl.addEventListener(
google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE,
serverUnreachableHandler);
// Add the SERVER_REACHABLE event handler to remove the error message
// once the server becomes reachable.
transliterationControl.addEventListener(
google.elements.transliteration.TransliterationControl.EventType.SERVER_REACHABLE,
serverReachableHandler);
// Set the checkbox to the correct state.
document.getElementById('checkboxId').checked =
transliterationControl.isTransliterationEnabled();
// Populate the language dropdown
var destinationLanguage =
transliterationControl.getLanguagePair().destinationLanguage;
var languageSelect = document.getElementById('languageDropDown');
var supportedDestinationLanguages =
google.elements.transliteration.getDestinationLanguages(
google.elements.transliteration.LanguageCode.ENGLISH);
for (var lang in supportedDestinationLanguages) {
var opt = document.createElement('option');
opt.text = lang;
opt.value = supportedDestinationLanguages[lang];
if (destinationLanguage == opt.value) {
opt.selected = true;
}
try {
languageSelect.add(opt, null);
} catch (ex) {
languageSelect.add(opt);
}
}
}
// Handler for STATE_CHANGED event which makes sure checkbox status
// reflects the transliteration enabled or disabled status.
function transliterateStateChangeHandler(e) {
document.getElementById('checkboxId').checked = e.transliterationEnabled;
}
// Handler for checkbox's click event. Calls toggleTransliteration to toggle
// the transliteration state.
function checkboxClickHandler() {
transliterationControl.toggleTransliteration();
}
// Handler for dropdown option change event. Calls setLanguagePair to
// set the new language.
function languageChangeHandler() {
var dropdown = document.getElementById('languageDropDown');
transliterationControl.setLanguagePair(
google.elements.transliteration.LanguageCode.ENGLISH,
dropdown.options[dropdown.selectedIndex].value);
}
// SERVER_UNREACHABLE event handler which displays the error message.
function serverUnreachableHandler(e) {
document.getElementById("errorDiv").innerHTML =
"Transliteration Server unreachable";
}
// SERVER_UNREACHABLE event handler which clears the error message.
function serverReachableHandler(e) {
document.getElementById("errorDiv").innerHTML = "";
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
<center>Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)</center>
<div id='translControl'>
<input type="checkbox" id="checkboxId" onclick="javascript:checkboxClickHandler()"></input>
Type in <select id="languageDropDown" onchange="javascript:languageChangeHandler()"></select>
</div>
<br>Title : <input type='textbox' id="transl1"/>
<br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
<br><div id="errorDiv"></div>
</body>
</html>
Ver ejemplo (customtransliteration.html)
El API de nivel básico para transliteración utiliza el API AJAX de idiomas (no el paquete de elementos que utilizan el resto de las API de transliteración). Para incluir el API AJAX de idiomas en tu página, debes utilizar el cargador de API AJAX de Google y seguir las instrucciones que se especifican en esta página.
En el ejemplo siguiente se muestra una transliteración sencilla de una cadena JavaScript:
google.language.transliterate(["Namaste"], "en", "hi", function(result) {
if (!result.error) {
var container = document.getElementById("transliteration");
if (result.transliterations && result.transliterations.length > 0 &&
result.transliterations[0].transliteratedWords.length > 0) {
container.innerHTML = result.transliterations[0].transliteratedWords[0];
}
}
});
Ver ejemplo (transliterate.html)
Actualmente, el API de transliteración admite la transliteración de la versión inglesa en el alfabeto latino a las secuencias de comandos de los siguientes idiomas:
Para ajustar el estilo del control de transliteración que se muestra mediante el método showControl de modo que aparezca en tu página, se deben ampliar las clases CSS definidas en el archivo CSS predeterminado. El archivo CSS se carga de forma automática en la llamada a google.load() y define los estilos del control y el menú de sugerencias de transliteración que aparece al hacer clic en una palabra transliterada o editarla. Si no quieres cargar el archivo CSS predeterminado, debes establecer "nocss" como "true".
google.load("elements", "1", {packages: "transliteration", "nocss" : true});
El menú de selección de idioma, el botón que indica el idioma predeterminado por el usuario y el menú de sugerencias están incluidos en elementos "div" marcados con clases de archivo CSS específicas. Puedes definir la anulación de las reglas de archivo CSS aplicadas a estos elementos para cambiarles el estilo de acuerdo con tu página. Consulta este archivo CSS de transliteración documentado para obtener más detalles sobre el archivo CSS predeterminado cargado con el paquete de API de transliteración. A continuación se muestra una lista de clases de archivo CSS útiles para la personalización:
Por ejemplo, al definir el parámetro goog-transliterate-indic-suggestion-menu's background-color, el fondo del menú de sugerencias mostrado cambiará del valor predeterminado #F0A000 al valor nuevo.
Para los sistemas de escritura de derecha a izquierda como, por ejemplo, el árabe, el API ajusta de forma automática y predeterminada la dirección del área de texto en función de la dirección del sistema de escritura que se utilice y del contenido del área de texto. (La dirección del área de texto se configura en HTML y en JavaScript mediante direction, que puede tener los valores 'ltr' o 'rtl'. Esto afecta a la alineación del área de texto y el cursor).
Consultar un ejemplo de transliteración árabe (arabictransliteration.html)
El API de transliteración es compatible con Firefox 1.5 o superior en Windows y Linux e Internet Explorer 6.0 o superior en Windows (preferiblemente Windows XP). El API de transliteración se puede cargar sin errores en casi todos los navegadores, de modo que puedes cargarlo con seguridad antes de comprobar la compatibilidad.
En algunas ocasiones, las diferentes aplicaciones requieren distintos comportamientos cuando los usuarios utilizan navegadores incompatibles. El API de transliteración ofrece un método global google.elements.transliteration.isBrowserCompatible() de comprobación de la compatibilidad, pero no dispone de ningún comportamiento automático para los casos en los que detecta un navegador incompatible. En la mayor parte de los ejemplos de este documento no se comprueba la compatibilidad del navegador ni se muestra un mensaje de error cuando se utilizan navegadores de versiones anteriores. Obviamente, las aplicaciones reales deben desarrollar un comportamiento más adecuado con los navegadores incompatibles, pero hemos omitido esas comprobaciones para que los ejemplos sean más legibles.
El API de transliteración procesa mucho texto UTF-8, por lo que debes establecer el tipo de contenido de tu página en UTF-8 mediante la adición de la metaetiqueta <meta
http-equiv="Content-Type" content="text/html; charset=utf-8"/>. Sin esta metaetiqueta, el API de transliteración no funcionará correctamente en tu página web.
Si detectas problemas con tu código:
Mediante el API AJAX de idiomas para teclado virtual, puedes habilitar el teclado en pantalla en cualquier área de texto o campo de texto de tu página web. Esto ayudará a los usuarios de tu página web a escribir cualquier idioma con el diseño de teclado al que estén acostumbrados.
¿Qué es un teclado virtual? El teclado virtual se utiliza para traducir una entrada del diseño de un teclado a otro.
Esta documentación está diseñada para personas familiarizadas con programación JavaScript y conceptos de programación relacionados con objetos. Existen muchos tutoriales sobre JavaScript disponibles en Internet.
Esta documentación conceptual no es completa ni exhaustiva, ya que está diseñada para que puedas comenzar a explorar el teclado virtual e incorporarlo rápidamente a tu página.
La forma más sencilla de empezar a conocer esta API es consultar un ejemplo sencillo. El siguiente ejemplo habilita el teclado virtual en un área de texto con un diseño de teclado ruso para que los usuarios puedan escribir en ese idioma mediante un teclado físico inglés o un ratón. El usuario también puede mostrar/ocultar el teclado virtual haciendo clic en los botones+/- en el teclado en pantalla. Si deseas obtener información acerca de la selección de un diseño diferente, consulta la referencia de clases del API
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Google Onscreen Keyboard API
google.load("elements", "1", {
packages: "keyboard"
});
function onLoad() {
var kbd = new google.elements.keyboard.Keyboard(
[google.elements.keyboard.LayoutCode.RUSSIAN],
['t1']);
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
Type in Russian<br/>
<textarea id="t1" style="width: 600px; height: 200px;"></textarea>
</body>
</html>
Puedes hacer pruebas con un ejemplo diferente en Code Playground.
El API AJAX de teclado virtual está incluido en el módulo "elements". Para incluir el API de teclado virtual de Google en tu página, necesitas en primer lugar la etiqueta de secuencia de comandos del API AJAX de Google:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
Esta etiqueta de secuencia de comandos cargará la función google.load, que permite cargar las API de Google individuales. Para cargar el API de teclado virtual de Google, las llamadas a google.load se realizarán como se muestra a continuación:
<script type="text/javascript">
google.load("elements", "1", {
packages: "keyboard"
});
</script>
De esta forma, se carga la versión 1 del API de teclado virtual. Actualmente sólo está disponible la versión 1 del API de teclado virtual, pero es posible que en un futuro se creen nuevas versiones. Para obtener más información, consulta el foro sobre versiones .
El segundo argumento de google.load es la versión del API AJAX de idiomas que estás utilizando. Actualmente sólo está disponible la versión 1 del API de teclado virtual, pero es posible que en un futuro se creen nuevas versiones.
Cuando se cree una actualización significativa en el futuro y se actualice el número de versión, se publicará una nota en Google Code y en el grupo de debate de las API AJAX. Cuando esto suceda, pensamos mantener ambas versiones disponibles durante al menos un mes para que puedas migrar tu código.
El equipo del API AJAX de idiomas actualiza periódicamente el API con las mejoras de rendimiento y las correcciones de errores más recientes. Estas correcciones sólo deberían mejorar el rendimiento y solucionar errores, pero es posible que rompamos por error algunos clientes del API. Infórmanos de estos problemas a través del grupo de debate de las API AJAX.
El ejemplo siguiente ilustra cómo mostrar u ocultar el teclado en tu código. Cuando el teclado virtual permanece oculto, el usuario utiliza el diseño de teclado físico para escribir.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Google Onscreen Keyboard API
google.load("elements", "1", {
packages: "keyboard"
});
var kbd; // A Keyboard object.
function onLoad() {
// Create an instance on Keyboard.
kbd = new google.elements.keyboard.Keyboard([
google.elements.keyboard.LayoutCode.POLISH],
['t1']);
}
// If the keyboard is visible, hide it.
// If the keyboard is invisible, show it.
function toggleVisible() {
var button = document.getElementById("btVisible");
if (kbd.isVisible()) {
kbd.setVisible(false);
document.getElementById('btVisible').value = "Show";
} else {
kbd.setVisible(true);
document.getElementById('btVisible').value = "Hide";
}
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
This is a demo for setVisible/isVisible.<br/>
<input type="button" onclick="toggleVisible()" id="btVisible" value="Hide"></input><br/>
<textarea type="text" id="t1" style="width: 600px; height: 200px;"></textarea>
</body>
</html>
Puedes hacer pruebas con un ejemplo diferente en Code Playground.
El ejemplo siguiente es parecido al ejemplo básico que se muestra en la sección de introducción, pero además muestra cómo cambiar el diseño del teclado virtual en tu código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Google Onscreen Keyboard API
google.load("elements", "1", {
packages: "keyboard"
});
var kbd; // A Keyboard object.
function onLoad() {
// Create an instance on Keyboard.
kbd = new google.elements.keyboard.Keyboard([
google.elements.keyboard.LayoutCode.RUSSIAN],
['t1']);
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
This is a demo for setLayout/getLayout.<br/>
<script type="text/javascript">
</script>
<input type="button" onclick="kbd.setLayout('ru')" value="Russian" /><br/>
<input type="button" onclick="kbd.setLayout('hi')" value="Hindi" /><br/>
<input type="button" onclick="kbd.setLayout('th')" value="Thai" /><br/>
<input type="button" onclick="kbd.setLayout('ar')" value="Arabic" /><br/>
<input type="button" onclick="kbd.setLayout('pl')" value="Polish" /><br/>
<input type="button" onclick="kbd.setLayout('fa')" value="Persian" /><br/>
<input type="text" id="t1" style="width: 600px"></input>
</body>
</html>
Puedes hacer pruebas con un ejemplo diferente en Code Playground.
En el siguiente ejemplo se indican los diseños de teclado compatibles y se muestra un diseño de menú para la página:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Google Onscreen Keyboard API
google.load("elements", "1", {
packages: "keyboard"
});
var kbd; // A Keyboard object.
// Draw a list of keyboard layouts in their native languages.
// User can click any of them to switch to that keyboard layout.
function drawMenu() {
html = ["<ul>"];
for (var i in google.elements.keyboard.LayoutCode) {
var code = google.elements.keyboard.LayoutCode[i];
var name = google.elements.keyboard.getLayoutName(code);
html.push("<li><a href='#' onclick='kbd.setLayout(\"", code, "\")'>",
name, "</a></li>");
}
html.push("</ul>");
document.getElementById("menu").innerHTML = html.join('');
}
function onLoad() {
kbd = new google.elements.keyboard.Keyboard(
[google.elements.keyboard.LayoutCode.RUSSIAN],
['t1']);
drawMenu();
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
This is a demo for LayoutCode and getLayoutName.<br/>
<div id="menu"></div><br/>
<textarea id="t1" style="width: 600px; height: 200px;"></textarea>
</body>
</html>
El ejemplo siguiente es parecido al ejemplo básico que se muestra en la sección de introducción, pero además incluye dos objetos de teclado para controlar dos grupos de campos de texto cada uno. En la página se incluyen cuatro campos de texto. Dos de ellos utilizan un teclado virtual tailandés y los otros dos un teclado virtual árabe.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Google Onscreen Keyboard API
google.load("elements", "1", {
packages: "keyboard"
});
function onLoad() {
var kbd1 = new google.elements.keyboard.Keyboard(
[google.elements.keyboard.LayoutCode.THAI],
['th1', 'th2']);
var kbd2 = new google.elements.keyboard.Keyboard(
[google.elements.keyboard.LayoutCode.ARABIC],
['ar1', 'ar2']);
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
Type in Thai and Arabic<br/>
<textarea id="th1" style="width: 300px; height: 80px;"></textarea>
<textarea id="ar1" style="width: 300px; height: 80px;"></textarea>
<textarea id="th2" style="width: 300px; height: 80px;"></textarea>
<textarea id="ar2" style="width: 300px; height: 80px;"></textarea>
</body>
</html>
Puedes hacer pruebas con un ejemplo diferente en Code Playground.
Actualmente, el API de teclado virtual admite los siguientes diseños de teclado:
Tenemos previsto el lanzamiento gradual de más diseños de teclado en un futuro cercano, así que mantente atento y vuelve a consultar este documento para obtener información actualizada.
El API de teclado virtual es compatible con Firefox 3 o superior en Windows y Linux e Internet Explorer 6.0 o superior en Windows (preferiblemente Windows XP). El API de teclado virtual se puede cargar sin errores en casi todos los navegadores, de modo que puedes cargarlo con seguridad antes de comprobar la compatibilidad.
Si detectas problemas con tu código: