Guía de inicio rápido: Complemento de traducción para Presentaciones de Google

Completa los pasos descritos en el resto de esta página y, en unos cinco minutos, habrás creado un complemento de Presentaciones de Google que traduce el texto de tu presentación.

Configurar

  1. Crea una nueva presentación de Google.
  2. Desde tu nueva presentación, selecciona el elemento de menú Herramientas > Script editor. Si aparece una pantalla de bienvenida, haz clic en Proyecto en blanco (Blank Project).
  3. Borra cualquier código en el editor de secuencias de comandos y cambia el nombre de Code.gs a translate.gs.
  4. Para crear un archivo nuevo, seleccione el elemento de menú Archivo > Nuevo > archivo HTML. Asigna el nombre sidebar a este archivo (Apps Script agrega la extensión .html automáticamente).
  5. Reemplace cualquier código de estos dos archivos por el siguiente contenido, respectivamente:

translate.gs

Slides/translate/translate.gs.
/**
 * @OnlyCurrentDoc Limits the script to only accessing the current presentation.
 */

/**
 * Create a open translate menu item.
 * @param {Event} event The open event.
 */
function onOpen(event) {
  SlidesApp.getUi().createAddonMenu()
      .addItem('Open Translate', 'showSidebar')
      .addToUi();
}

/**
 * Open the Add-on upon install.
 * @param {Event} event The install event.
 */
function onInstall(event) {
  onOpen(event);
}

/**
 * Opens a sidebar in the document containing the add-on's user interface.
 */
function showSidebar() {
  const ui = HtmlService
      .createHtmlOutputFromFile('sidebar')
      .setTitle('Translate');
  SlidesApp.getUi().showSidebar(ui);
}

/**
 * Recursively gets child text elements a list of elements.
 * @param {PageElement[]} elements The elements to get text from.
 * @return {Text[]} An array of text elements.
 */
function getElementTexts(elements) {
  let texts = [];
  elements.forEach((element)=> {
    switch (element.getPageElementType()) {
      case SlidesApp.PageElementType.GROUP:
        element.asGroup().getChildren().forEach((child)=> {
          texts = texts.concat(getElementTexts(child));
        });
        break;
      case SlidesApp.PageElementType.TABLE:
        const table = element.asTable();
        for (let y = 0; y < table.getNumColumns(); ++y) {
          for (let x = 0; x < table.getNumRows(); ++x) {
            texts.push(table.getCell(x, y).getText());
          }
        }
        break;
      case SlidesApp.PageElementType.SHAPE:
        texts.push(element.asShape().getText());
        break;
    }
  });
  return texts;
}

/**
 * Translates selected slide elements to the target language using Apps Script's Language service.
 *
 * @param {string} targetLanguage The two-letter short form for the target language. (ISO 639-1)
 * @return {number} The number of elements translated.
 */
function translateSelectedElements(targetLanguage) {
  // Get selected elements.
  const selection = SlidesApp.getActivePresentation().getSelection();
  const selectionType = selection.getSelectionType();
  let texts = [];
  switch (selectionType) {
    case SlidesApp.SelectionType.PAGE:
      selection.getPageRange().getPages().forEach((page)=> {
        texts = texts.concat(getElementTexts(page.getPageElements()));
      });
      break;
    case SlidesApp.SelectionType.PAGE_ELEMENT:
      const pageElements = selection.getPageElementRange().getPageElements();
      texts = texts.concat(getElementTexts(pageElements));
      break;
    case SlidesApp.SelectionType.TABLE_CELL:
      selection.getTableCellRange().getTableCells().forEach((cell)=> {
        texts.push(cell.getText());
      });
      break;
    case SlidesApp.SelectionType.TEXT:
      selection.getPageElementRange().getPageElements().forEach((element) =>{
        texts.push(element.asShape().getText());
      });
      break;
  }

  // Translate all elements in-place.
  texts.forEach((text)=> {
    text.setText(LanguageApp.translate(text.asRenderedString(), '', targetLanguage));
  });

  return texts.length;
}

sidebar.html

Slides/translate/sidebar.html
<html>
<head>
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  <style>
    .logo { vertical-align: middle; }
    ul { list-style-type: none; padding: 0; }
    h4 { margin: 0; }
  </style>
</head>
<body>
<form class="sidebar branding-below">
  <h4>Translate selected slides into:</h4>
  <ul id="languages"></ul>
  <div class="block" id="button-bar">
    <button class="blue" id="run-translation">Translate</button>
  </div>
  <h5 class="error" id="error"></h5>
</form>
<div class="sidebar bottom">
  <img alt="Add-on logo" class="logo"
       src="https://www.gstatic.com/images/branding/product/1x/translate_48dp.png" width="27" height="27">
  <span class="gray branding-text">Translate sample by Google</span>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  $(function() {
    // Add an input radio button for every language.
    const languages = {
      ar: 'Arabic',
      zh: 'Chinese',
      en: 'English',
      fr: 'French',
      de: 'German',
      hi: 'Hindi',
      ja: 'Japanese',
      pt: 'Portuguese',
      es: 'Spanish'
    };
    const languageList = Object.keys(languages).map((id)=> {
      return $('<li>').html([
        $('<input>')
                .attr('type', 'radio')
                .attr('name', 'dest')
                .attr('id', 'radio-dest-' + id)
                .attr('value', id),
        $('<label>')
                .attr('for', 'radio-dest-' + id)
                .html(languages[id])
      ]);
    });

    $('#run-translation').click(runTranslation);
    $('#languages').html(languageList);
  });

  /**
   * Runs a server-side function to translate the text on all slides.
   */
  function runTranslation() {
    this.disabled = true;
    $('#error').text('');
    google.script.run
            .withSuccessHandler((numTranslatedElements, element) =>{
              element.disabled = false;
              if (numTranslatedElements === 0) {
                $('#error').empty()
                        .append('Did you select elements to translate?')
                        .append('<br/>')
                        .append('Please select slides or individual elements.');
              }
              return false;
            })
            .withFailureHandler((msg, element)=> {
              element.disabled = false;
              $('#error').text('Something went wrong. Please check the add-on logs.');
              return false;
            })
            .withUserObject(this)
            .translateSelectedElements($('input[name=dest]:checked').val());
  }
</script>
</body>
</html>
  1. Selecciona el elemento de menú Archivo > Guardar todo. Asigna un nombre a la nueva secuencia de comandos "Translate Quickstart" y haz clic en OK. El nombre de la secuencia de comandos se muestra a los usuarios finales en varios lugares, incluido el diálogo de autorización.

Probarlo

  1. Vuelve a tu presentación y vuelve a cargar la página.
  2. Después de unos segundos, aparecerá un submenú Guía de inicio rápido para Traductor debajo del menú Complementos. Haz clic en Complementos > Traductor de inicio rápido > Iniciar.
  3. Un cuadro de diálogo indica que la secuencia de comandos requiere autorización. Haga clic en Continuar. Un segundo cuadro de diálogo solicita autorización para servicios de Google específicos. Haz clic en Permitir.
  4. Aparecerá una barra lateral. Para probarlo, escribe texto en tu presentación, selecciónalo y haz clic en el botón azul Traducir. Para reemplazar el texto en la presentación, haz clic en Insertar.

Publicar

Como este es un complemento de ejemplo, nuestro instructivo termina aquí. Si desarrollas un complemento real, el último paso es publicarlo para que otras personas lo encuentren y lo instalen.

Más información

Para obtener más información sobre cómo extender Presentaciones de Google con Apps Script, consulta los siguientes recursos: