Gadgets para Google Sites

Gadgets de Google Sites

En Google, los widgets son aplicaciones de HTML y JavaScript que se pueden incorporar en páginas web y en otras apps, incluido Sites. Estos gadgets permiten incluir contenido externo y dinámico en tu sitio, como aplicaciones en miniatura y listas basadas en bases de datos, incorporado con imágenes y texto para ofrecer una experiencia del usuario fluida.

Cada página de Sites es un posible contenedor de gadgets. Además, Sites ofrece una API de datos que se puede usar en conjunto con gadgets para crear aplicaciones potentes. Eso significa que, como desarrollador de gadgets, puedes aprovechar la API clásica de Sites para crear herramientas atractivas para otros desarrolladores web y sus públicos, y para tu propio uso.

Cuando creas un gadget para Sites, estará disponible para millones de usuarios activos. Simplemente envíanos tu gadget, y aparecerá donde los usuarios puedan navegar, configurar y agregar fácilmente tu gadget a sus sitios.

Ahora que sabes que {sites_name_short} es una excelente plataforma de distribución para tu gadget, ¿qué estás esperando? Comienza a crear gadgets para Sites ahora mismo.

Descripción general del gadget de Sites

En términos generales, los gadgets son pequeñas utilidades que generan o extraen información externa a páginas web. En su forma más simple, un gadget es un pequeño archivo .xml que recupera información con la capacidad de hacer que esté disponible en varias páginas web a la vez. En Sites, incluir un gadget genera un iframe que actúa como conducto para esa información externa. Algunos gadgets son simples iframes que pasan información de otro sitio web.

Los gadgets más avanzados recopilan contenido dinámico y proporcionan aplicaciones interactivas en las páginas de Sites. Consulta Ejemplo de gadget.

Los gadgets incluyen los siguientes componentes:

  • Archivo de especificaciones del gadget: Es un archivo .xml que une las funciones HTML y JavaScript.
  • Página del contenedor: Es la página web en la que se inserta el gadget, que en este caso es un sitio de Google.
  • Fuente de datos externa: Es opcional y puede residir en la misma ubicación que el archivo .xml, pero a menudo se llama por la especificación del gadget a través de HTTP para proporcionar los resultados.

Todos los usuarios de un sitio pueden utilizar los gadgets diseñados para Sites. Por lo general, son interactivos, se centran en incorporar contenido dinámico en lugar de presentarse, y están diseñados para complementar el contenido del sitio.

Un gadget de calendario es un buen ejemplo de esta distinción. Es probable que un gadget de calendario personalizado muestre el calendario del usuario que accedió de forma predeterminada, mientras que un gadget de calendario en Sites podría permitir que los colaboradores seleccionen entre varios calendarios específicos de la ubicación.

Los gadgets de Sites te permiten presentar varios datos de fuentes externas (como diagramas en tiempo real de paneles de rendimiento distintos pero relacionados) en una sola página junto con un texto explicativo publicado directamente en Sites. De esta manera, se ahorra espacio visual mientras se recopila información dispar sobre el mismo tema en la misma vista. Los gadgets también te permiten incluir contenido dinámico que los controles de seguridad de Sites evitarían de otra manera.

Advertencia: Es posible que los gadgets creados con la API de gadgets heredado funcionen en Sites, pero no son compatibles oficialmente. Tampoco se admiten los gadgets integrados y basados en feeds. Por lo tanto, Google recomienda que crees todos los gadgets de Sites con los widgets* actuales. API. Consulta esta publicación para ver una explicación:
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html

Ejemplo de gadget

A continuación, se muestra un simple pero popular Incluir gadget que no hace mucho más que proporcionar un iframe para pasar por otro contenido web:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Include gadget (iframe)" title_url="http://sites.google.com/"
          description="Include another web page in your Google Site"
          thumbnail="https://www.gstatic.com/sites-gadgets/common/images/sites-icon-gadget-thumb.png"
          screenshot="https://www.gstatic.com/sites-gadgets/common/images/sites-icon-gadget-ss.png"
          height="800" width="600" author="Google">
    <Require feature="dynamic-height"/>
  </ModulePrefs>
  <UserPref name="iframeURL" display_name="URL to content" required="true"/>
  <UserPref name="scroll" display_name="Display scrollbar" default_value="auto" datatype="enum">
    <EnumValue value="auto" display_value="Automatic"/>
    <EnumValue value="no" display_value="No"/>
    <EnumValue value="yes" display_value="Yes"/>
  </UserPref>
  <Content type="html" view="default,canvas">
  <div id='dest'><img src="http://www.google.com/ig/images/spinner.gif"></div>
  <script type="text/javascript">
  gadgets.util.registerOnLoadHandler(doRender);

  function doRender(){
    // setup variables
    var prefs = new gadgets.Prefs();
    var iframeURL = prefs.getString('iframeURL');
    var scroll = prefs.getString('scroll');
    var height = 800;
    var width = 600;

    if (gadgets.window) {
      var viewport = gadgets.window.getViewportDimensions();
      if (viewport.width) {
        var width = viewport.width;
      }
      if (viewport.height) {
        var height = viewport.height;
      }
    }

    var iframe = document.createElement('iframe');
    iframe.setAttribute('width', width + 'px');
    iframe.setAttribute('height', height + 'px');
    iframe.setAttribute('frameborder','no');
    if(scroll){
      iframe.setAttribute('scrolling', scroll);
    }
    iframe.setAttribute('src', iframeURL);

    // set the slideshow to the placeholder div
    var dest = document.getElementById('dest');
    dest.innerHTML = '';
    dest.appendChild(iframe);
  }
  </script>
  </Content>
</Module>

Consulta Cómo comenzar: gadgets.* API para obtener una descripción completa de las etiquetas de los gadgets y el contenido esperado.

Cómo alojar tu gadget

Independientemente de la función de tu gadget, sus archivos deben encontrarse en la World Wide Web para poder encontrarlo y utilizarlo. Cualquier ubicación en línea a la que se pueda acceder a través de HTTP sin autenticación será suficiente. Solo recuerda que para que puedas seleccionar tu gadget, debes publicar tu gadget en un directorio público. De lo contrario, los usuarios deberán incorporar la URL directamente.

Estas son las opciones de alojamiento del gadget:

  • App Engine: Es capaz de almacenar todos los archivos que necesitan tus gadgets. Requiere cierta configuración, es decir, la creación de proyectos y las cargas de archivos posteriores. Sin embargo, escalará fácilmente a una gran cantidad de usuarios. Puedes crear una aplicación para almacenar todos tus gadgets y otra para entregar archivos estáticos, incluido un archivo app.yaml similar a lo siguiente:

    application: <your app name>
    version: 1
    runtime: python
    api_version: 1
    
    handlers:
    - url: /.*
      static_dir: static
    

    Si colocas todos los archivos de gadgets en el directorio estático, podrás editar los archivos en tu directorio local e implementarlos en App Engine cada vez que realices cambios. Si tienes un archivo /static/widget.xml, su URL será: http://<nombre-de-tu-app>.appspot.com/static/widget.xml.

  • Cualquier ubicación en línea que elijas: completamente bajo tu control, pero también con tu responsabilidad total. El tiempo de inactividad en el servidor puede provocar que se interrumpan los usuarios de tus gadgets.

Creando tu gadget

Los gadgets son solo HTML y (opcionalmente) JavaScript, Flash o Silverlight envueltos en XML. La Guía para desarrolladores de gadgets brinda toda la información necesaria para crear tus propios gadgets. Además, las plantillas de OpenSocial se pueden usar para crear rápidamente aplicaciones sociales en gadgets.

Estos son los pasos de alto nivel para crear un gadget para Sites:

  1. Decide dónde se alojará tu gadget. Consulta la sección Cómo alojar tu gadget para ver descripciones de las opciones disponibles.
  2. Crea un nuevo archivo .xml que funcione como la especificación con el editor de texto que prefieras.
  3. Elige el tipo de contenido, ya sea HTML o URL, y especifícalo en el archivo .xml del gadget de la siguiente manera:
    <Content type="html">
    Casi invariablemente, será HTML, lo cual supone que todo el contenido se proporciona directamente en el archivo .xml. Sin embargo, si quieres proporcionar el contenido en un archivo separado, usa el tipo de contenido de URL. Consulta Cómo elegir un tipo de contenido para obtener una descripción completa de las diferencias que presentan.
  4. Crea contenido en el archivo .xml del gadget o en archivos separados a los que llame la especificación. Consulta la sección Cómo ver los gadgets de ejemplo para conocer las formas de examinar los gadgets existentes.
  5. Define preferencias básicas para el gadget que los usuarios pueden modificar. Consulta Definición de preferencias del usuario para obtener instrucciones. Para proporcionar una configuración más avanzada, consulta la sección Cómo permitir la configuración de usuario avanzada.
  6. Define las preferencias del módulo que solo puede cambiar el autor del gadget. Consulta Definición de las preferencias del gadget para obtener más información.
  7. Prueba el gadget. Consulta la sección Cómo probar tu gadget para obtener instrucciones.

Cómo insertar tu gadget

Los gadgets se pueden insertar en las páginas de Sites seleccionándolos del directorio de gadgets de Google Sites (que se sincroniza con el directorio de gadgets de iGoogle) o incluyendo directamente su URL.

Para insertar un gadget en Sites:

  1. Accede a la página de Sitios que tendrá el gadget nuevo.
  2. Abre la página para editarla.
  3. Selecciona Insertar > Más gadgets.
  4. Busca el gadget, selecciónalo en las categorías de la izquierda o haz clic en Agregar gadget por URL y pega la URL en tu archivo .xml. A continuación, haz clic en Agregar.
    Sugerencia: Puedes usar el mismo método para agregar un gadget mediante la URL para incorporar gadgets de Picasa y de otros sitios en línea.
  5. Especifica las dimensiones del gadget, selecciónalos en los parámetros de configuración disponibles y haz clic en Aceptar. El gadget se agregará a tu página.
  6. Guarda la página para ver y probar tu gadget en el sitio.

Cómo probar tu gadget

Después de crear tu gadget, debes probarlo en detalle antes de usarlo y permitir que otros hagan lo mismo. Para probar tu gadget manualmente, crea uno o más sitios de prueba de Google Sites e incorpóralo. Consulta la sección Cómo insertar un gadget para ver pasos precisos. La funcionalidad y el aspecto de tu gadget dependen del sitio que lo contenga. Por lo tanto, la mejor manera de depurar tu gadget es probarlo en el contexto de un sitio de Google real. Intenta cambiar entre varios temas de Sites para asegurarte de que tu gadget aparezca correctamente en cada uno.

A medida que pruebes tu gadget, inevitablemente descubrirás errores y deberás realizar correcciones en el archivo .xml. Debes inhabilitar el almacenamiento en caché de los gadgets mientras ajustas el XML. De lo contrario, los cambios no se mostrarán en la página. Las especificaciones de los gadgets se almacenan en caché a menos que indiques a Sites que no lo hagan. Para evitar la caché durante el desarrollo, agrega esto al final de la URL de la página de Sites que contiene el gadget (y no la URL del archivo .xml con las especificaciones del gadget):

 ?nocache=1

Sites proporciona una IU estándar para agregar y configurar gadgets. Cuando agregues un gadget, se mostrará una vista previa y los parámetros UserPref que se pueden configurar. Prueba actualizar varios valores de configuración y agregar tu gadget a tu sitio de prueba. Confirma que tu gadget funcione como se espera en el sitio. Debes probar que el administrador del sitio pueda configurar correctamente cualquier UserPref que hayas definido.

A continuación, consulta la sección Preparación para la publicación de Publicar tu gadget para realizar otras pruebas.

Permite la configuración de usuario avanzada

Todos los gadgets pueden ofrecer la capacidad de establecer preferencias de usuario básicas, mediante la sección UserPref del archivo de especificaciones del gadget. Por lo general, afectan las dimensiones, las barras de desplazamiento, los bordes, los títulos y la configuración específica de los gadgets, como se muestra en la siguiente captura de pantalla:

Preferencias del usuario del gadget de Sites

Sin embargo, existen muchos casos en los que los gadgets se benefician de preferencias más avanzadas que las que ofrecen los componentes UserPref estándar. A menudo, las preferencias deben incluir funciones como lógica empresarial personalizada, validaciones o selectores. La interfaz generada en las secciones UserPref del gadget admite una cantidad limitada de tipos de datos (cadena, enumeración, etc.), por lo que no se puede realizar la validación de entradas, como URL o fechas.

Es más, en contenedores como iGoogle, en los que el visualizador y el editor son el mismo, los autores de gadgets pueden ampliar la configuración como parte de la vista estándar. En Google Sites, el usuario no siempre es el editor, por lo que el autor del gadget no puede garantizar que dicho usuario tenga acceso para actualizar las preferencias. Los contenedores sociales, como Sites, no pueden permitir que ningún usuario modifique las preferencias, solo el autor.

En Sites, es posible reemplazar la interfaz de preferencias básicas de gadgets generadas por UserPref por una vista de configuración en la que se pueden proporcionar muchos tipos de datos y preferencias adicionales, como se muestra en la captura de pantalla que se muestra a continuación:

Vista de configuración del gadget de Sites

La vista de configuración se muestra en lugar de los parámetros de UserPref en el momento de la inserción o de edición, y te permite establecer las preferencias del usuario con una interfaz personalizada. Además, puedes tener elementos de entrada personalizados, como elegir una posición en un mapa en lugar de ingresar coordenadas.

Los desarrolladores pueden usar las APIs estándar de setprefs para guardar las preferencias en esta vista. Para obtener más información, consulta la Referencia de XML de gadgets y la sección Estado de guardado de Conceptos básicos para desarrolladores. Estas vistas permiten que la aplicación del contenedor proporcione información de configuración complementaria y se establecen en los archivos de especificaciones del gadget .xml después de las secciones de UserPref con una etiqueta de apertura similar a la siguiente:

  <Content type="html" view="configuration" preferred_height="150">

Por ejemplo, el gadget news.xml que proporciona la vista de configuración anterior contiene esta sección:

<Content type="html" view="configuration" preferred_height="300">
<style type="text/css">
  .config-options {
    margin: 10px;
  }
  .label {
    font-weight: bold;
    width: 35%;
    vertical-align: top;
  }
  .gray {
    color:#666666;
  }
  html {
    font-family:arial,sans-serif;
    font-size:0.81em;
    font-size-adjust:none;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:1.5;
  }
  a:link, a:visited, a:active { text-decoration: none }
</style>
  <img alt="Google Web Elements" src="http://www.google.com/webelements/images/web_elements_logo.gif"/>
  <table class="config-options">
  <tr>
  <td align="left" class="label">Size:</td>
  <td align="left">
  <select id="size" onchange="Update()">
  <option selected="selected" value="300x250">Medium rectangle (300x250)</option>
  <option value="728x90">Leaderboard (728x90)</option>
  </select>
  </td>
  </tr>
  <tr>
  <td align="left" class="label">Select sections:</td>
  <td align="left">
  <table>
  <tbody><tr>
  <td><input type="checkbox" onclick="Update()" id="sec_h" value="h"/> Top Stories</td>
  <td><input type="checkbox" onclick="Update()" id="sec_w" value="w"/> World</td>
  <td><input type="checkbox" onclick="Update()" id="sec_b" value="b"/> Business</td>
  </tr><tr>
  <td><input type="checkbox" onclick="Update()" id="sec_p" value="p"/> Politics</td>
  <td><input type="checkbox" onclick="Update()" id="sec_n" value="n"/> Nation</td>
  <td><input type="checkbox" onclick="Update()" id="sec_e" value="e"/> Entertainment</td>
  </tr><tr>
  <td><input type="checkbox" onclick="Update()" id="sec_t" value="t"/> Technology</td>
  <td><input type="checkbox" onclick="Update()" id="sec_s" value="s"/> Sports</td>
  <td><input type="checkbox" onclick="Update()" id="sec_m" value="m"/> Health</td>
  </tr></tbody>
  </table>
  </td>
  </tr>
  <tr>
  <td align="left" class="label">Or create one:</td>
  <td align="left">
  <input type="text" id="query" onchange="Update()"/>
  <br/>
  <span class="gray">Example: 2010 Olympics</span>
  </td>
  </tr>
  <tr>
  <td colspan="2">
  <div id="preview" style="margin-top:10px;overflow:auto;width:100%;">
  <iframe id="preview_ifr" frameborder="0" marginwidth="0" marginheight="0" border="0"
  style="border:0;margin:0;"
  scrolling="no" allowtransparency="true"></iframe>
  </div>
  </td>
  </tr>
  </table>
  <script type="text/javascript">
  var prefs = new gadgets.Prefs();

  function getSelectedTopics() {
    var selected = [];
    var topics = ['h', 'w', 'b', 'p', 'n', 'e', 't', 's', 'm'];
    for (var i = 0; i < topics.length; i++) {
      if (document.getElementById('sec_' + topics[i]).checked) {
        selected.push(topics[i]);
      }
    }
    return selected.join(',');
  }

  function setSelectedTopics(selected) {
    if (selected && selected.length >= 0) {
      var topics = selected.split(',');
      for (var i = 0; i < topics.length; i++) {
        document.getElementById('sec_' + topics[i]).checked = true;
      }
    }
  }

  function Update() {
    var topic = getSelectedTopics();
    var query = document.getElementById('query').value;
    var size = document.getElementById('size').value;
var url = 'http://www.google.com/uds/modules/elements/newsshow/iframe.html?rsz=large&' + 'format=SIZE&element=true'; var iframe = document.getElementById('preview_ifr'); url = url.replace(/SIZE/, size); if (topic.length > 0) { url += '&topic=' + topic; } if (query.length > 0) { url += '&q=' + encodeURIComponent(query); } iframe.src = url; if (size == '728x90') { iframe.style.width = '728px'; iframe.style.height = '90px' } else { iframe.style.width = '300px'; iframe.style.height = '250px'; } prefs.set('size', size); prefs.set('topic', topic); prefs.set('query', query); gadgets.window.adjustHeight(); } function Initialize() { var size = '__UP_size__'; if (size.length > 0) { document.getElementById('size').value = size; } var query = '__UP_query__'; if (query.length > 0) { document.getElementById('query').value = query; } setSelectedTopics('__UP_topic__'); Update(); } gadgets.util.registerOnLoadHandler(Initialize); </script> </Content>

Puedes encontrar este ejemplo y otros gadgets específicos de Sites con vistas de configuración aquí:
https://www.gstatic.com/sites-gadgets/news/news.xml
http://gadgets.pardonmyzinger.org/static/qrcode.xml
https://www.gstatic.com/sites-gadgets/news/youtube_news.xml

Seguir las prácticas recomendadas para los gadgets de Sites

Sitios que los usuarios desean verse bien en la Web Sigue estas prácticas recomendadas para que tu gadget se adapte a la perfección a los numerosos temas que se utilizan en Sites. Consulta la Descripción general de gadgets para obtener más información sobre la creación de gadgets. En el resto de esta sección, se presentan lineamientos específicos para los gadgets de Sites.

  • No incluyas información confidencial en las especificaciones ni en los títulos de un gadget porque el público podrá verlo. Por ejemplo, no incluyas nombres de proyectos internos.
  • Para minimizar la visibilidad de tu gadget, no lo envíes al directorio de gadgets de iGoogle ni a ningún otro servicio de directorio público. En su lugar, solicita a todos los usuarios que la incluyan solo por URL. Además, puedes crear un gadget de tipo URL (en lugar del tipo de HTML típico que incluye todo el contenido) que simplemente llame a otro archivo para su contenido. Con esta opción de transferencia, solo se expone la URL del segundo archivo. Consulta la sección Cómo elegir un tipo de contenido de Conceptos básicos para desarrolladores para conocer las diferencias entre los gadgets HTML y URL, y la sección Los gadgets son públicos de Escribir tus propios gadgets para conocer otras formas de enmascarar un gadget.
  • Lo más importante es que pruebes tu gadget en diferentes sitios. Modifica el color de fondo, el color del texto y el tipo de fuente del sitio para asegurarte de que tu gadget se combine con una amplia gama de plantillas.

Volver al principio