En Google, los widgets son aplicaciones HTML y JavaScript que se pueden incorporar en la Web. páginas y otras apps, incluida Sites. Estos gadgets ofrecen la posibilidad de incluir contenido contenido dinámico dentro de su sitio, como aplicaciones en miniatura y listas basadas en bases de datos, incorporando texto e imágenes para brindar una experiencia del usuario fluida.
Cada página de Sites es un posible contenedor de gadgets. Además, Sites ofrece un API de datos que puede usarse en conjunto con gadgets para crear aplicaciones potentes. Eso significa que, como desarrollador de gadgets, puedes aprovechar la API de la versión clásica de Sites para crear herramientas atractivas para otros desarrolladores web y su público, así como para tu propio uso.
Cuando creas un gadget para Sites, está disponible para millones de usuarios individuales. Simplemente envíanos tu gadget y aparecerá en el lugar donde los usuarios podrán navegar, configurar y agregar el gadget fácilmente a sus Sites.
Ahora que ya sabes que {sites_name_short} es una gran plataforma de distribución para tu gadget, ¿cuáles son las que esperas? Empieza a crear gadgets para Sites ahora mismo.
Descripción general del gadget de Google Sites
Por lo general, los gadgets son pequeñas utilidades que generan o extraen información externa a la Web. páginas. En su forma más sencilla, un gadget es un pequeño archivo .xml que recupera información con el para que estén disponibles en varias páginas web a la vez. En Sites, incluidos los resultados de un gadget en un iframe que actúa como el conducto para esta información externa. Algunos gadgets ya no existen. iframes que pasan información de otro sitio web.
Los gadgets más avanzados recopilan contenido dinámico y ofrecen aplicaciones interactivas dentro de tus páginas de Sites. Consulta Ejemplo de gadget.
Los gadgets consisten en 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. En este caso, es un sitio de Google Sites.
- Fuente de datos externa: esta opción es opcional y puede encontrarse en la misma ubicación que el archivo .xml, aunque las especificaciones del gadget a menudo lo llaman por HTTP para proporcionar sus resultados.
Widgets diseñados para Todos los usuarios de un sitio pueden usar Sites. Suelen ser interactivos, se centran en extraer en el contenido dinámico en lugar de la presentación, y están diseñadas para complementar el contenido del .
Un gadget de calendario es un buen ejemplo de esta distinción. Un gadget de calendario personalizado en mostraría de forma predeterminada el calendario del usuario que inició sesión, mientras que un gadget de calendario en Sites pueden permitir que los colaboradores seleccionen entre diversos calendarios de ubicaciones específicas.
Los gadgets de Google Sites te permiten presentar información de fuentes externas (por ejemplo, diagramas en vivo de paneles de rendimiento distintos pero relacionados) en una sola página, junto con texto explicativo publicado directamente en Sites. Esto ahorra espacio visual mientras realizas las recopilaciones información dispar sobre el mismo tema en la misma vista. Los gadgets también te permiten incluir contenido dinámico que, de lo contrario, los controles de seguridad de Sites podrían impedir.
Advertencia: Widgets diseñados con la versión heredada
La API de gadgets de Google puede funcionar en Google Sites, pero no es compatible oficialmente. Widgets integrados y basados en feeds
tampoco se admiten. Por lo tanto, Google recomienda crear todos los gadgets de Sites con la
widgets* actuales Recommender. 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, te mostramos un widget Incluir simple pero popular, que no hace 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 Introducción: 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 lo que haga tu gadget, los archivos deben estar en la World Wide Web para que los usuarios puedan encontrarlos y que se usan. Cualquier ubicación en línea a la que se pueda acceder a través de HTTP sin autenticación tareas. Sólo recuerda que tu gadget tendrá que estar publicado en un directorio público para ser elegido. De lo contrario, los usuarios deberán insertarlo ingresando directamente su URL.
Éstas son las opciones de alojamiento para tu gadget:
- App Engine: Es capaz de almacenar todos los archivos que necesitan tus gadgets. Requiere cierta configuración, en particular, la creación de proyectos y la posterior carga de archivos. Sin embargo, escalará con facilidad 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 al siguiente:
application: <your app name> version: 1 runtime: python api_version: 1 handlers: - url: /.* static_dir: static
Si colocas todos los archivos de los gadgets en el directorio estático, podrás editarlos en tu directorio local y, luego, implementarlos en App Engine cada vez que realices cambios. Si tienes un archivo /static/widget.xml, la 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 de responsabilidad total. El tiempo de inactividad en tu servidor puede provocar una interrupción para los usuarios de tus gadgets.
Cómo crear un gadget
Los gadgets son solo HTML y (opcionalmente) JavaScript, Flash o Silverlight dentro de XML. La Guía para desarrolladores de gadgets proporciona toda la información necesaria para crear tus propios gadgets. Además, las plantillas de OpenSocial se pueden usar para crear aplicaciones sociales en gadgets.
A continuación, se indican los pasos de alto nivel para crear un gadget para Google Sites:
- Decide dónde se alojará tu gadget. Para conocer las descripciones de las opciones, consulta la sección Cómo alojar tu gadget .
- Crea un nuevo archivo .xml que funcionará como especificación con el editor de texto que prefieras.
- Decide el tipo de contenido, ya sea HTML o URL, y especifícalo en el archivo .xml del gadget, como se muestra a continuación:
<Content type="html">
Esto casi siempre será HTML, lo que 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 sus diferencias. - Crea contenido en el archivo .xml del gadget o en archivos separados que se requieran según las especificaciones. Consulta la sección Cómo ver gadgets de ejemplo para conocer las formas de examinar los gadgets existentes.
- Definir las preferencias básicas del gadget que los usuarios pueden modificar. Consulta Cómo definir las preferencias del usuario para obtener instrucciones. Para proporcionar una configuración más avanzada, consulta la sección Cómo permitir la configuración avanzada de usuario.
- Define las preferencias de módulo que solo el autor del gadget puede cambiar. Para obtener más información, consulta Definición de las preferencias de los gadgets.
- Prueba el gadget. Para obtener instrucciones, consulta la sección Cómo probar tu gadget.
Inserción de tu gadget
Los gadgets se pueden insertar en las páginas de Google Sites, ya sea seleccionándolos desde el directorio de gadgets de Google Sites (que se sincroniza con el directorio de gadgets de Google Sites) o incluyendo directamente su URL.
Para insertar un gadget en Google Sites:
- Accede a la página Sitios que contendrá el nuevo gadget.
- Abre la página para editarla.
- Selecciona Insertar > Más gadgets.
- Busca el gadget, selecciónalo en las categorías que aparecen a la izquierda o haz clic en Agregar gadget por URL y pega la URL en tu archivo .xml. Luego, haz clic en Add.
Sugerencia: Este mismo método Agregar un gadget mediante URL se puede utilizar para insertar gadgets de Google Noticias y de cualquier otro sitio en línea. - Especifica las dimensiones del gadget, selecciona una de las opciones de configuración disponibles y haz clic en Aceptar. Se agregó el gadget a tu página.
- Guarda la página para ver y probar tu gadget en el sitio.
Probando tu gadget
Después de crear tu gadget, debes probarlo exhaustivamente antes de usarlo y permitir que otros hacen lo mismo. Prueba tu gadget manualmente al crear uno o más sitios de prueba de Google Sites, e insértalos. tu gadget. Consulta la sección Cómo incorporar tu gadget para conocer los pasos precisos. El la funcionalidad y el aspecto de tu gadget dependen del sitio que contenga que la modifica. Por lo tanto, la mejor manera de depurar tu gadget es probarlo en el contexto de un sitio de Google. Prueba cambiar entre varios temas de Sites para asegurarte de que tu gadget aparezca correctamente en cada uno.
Cuando pruebes tu gadget, inevitablemente descubrirás errores y tendrás que hacer correcciones. al archivo .xml de tu gadget. Debes inhabilitar el almacenamiento en caché de gadgets mientras estés sin modificar 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 los sitios que no lo hagan. Para evitar la memoria caché durante el desarrollo, agrega esto al final de la URL de la página Sitios que contiene el gadget (y no la URL del archivo .xml de especificaciones del gadget):
?nocache=1
Sites ofrece una interfaz de usuario 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 el gadget al sitio de prueba. Confirma que tu gadget funcione según lo previsto en la
sitio en sí. Deberías probar eso
El administrador del sitio puede configurar correctamente todos los UserPref que hayas definido.
A continuación, consulta la sección Cómo prepararse para la publicación de la sección Cómo publicar un gadget para realizar otras pruebas.
Permitir la configuración avanzada de usuario
Todos los gadgets pueden ofrecer la posibilidad de definir preferencias básicas del usuario a través de 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:
Sin embargo, hay muchos casos en los que los gadgets se benefician de preferencias más avanzadas que los componentes estándar de UserPref. A menudo, las preferencias deben incluir funciones como lógica empresarial personalizada, validaciones o selectores. La interfaz generada a partir de las secciones del gadget UserPref admite una cantidad limitada de tipos de datos (cadena, enumeración, etc.), por lo que no es posible validar entradas como URL o fechas.
Además, en los contenedores, como por ejemplo, el editor de gadgets, donde el visualizador y el editor son los mismos, los autores de gadgets pueden ampliar la configuración como parte de la vista estándar. En Google Sites, el lector no siempre es el editor, por lo que el autor del gadget no puede garantizar que el usuario que visualiza tiene acceso a las preferencias de actualización. Los contenedores sociales como Sites no permiten que ningún usuario modifique las preferencias, solo el autor.
En Sites, la interfaz de preferencias básicas de gadgets generada por UserPref puede reemplazarse por una vista de configuración donde se pueden proporcionar muchas preferencias y tipos de datos adicionales, como se muestra en la siguiente captura de pantalla:
La vista de configuración se muestra en lugar de los parámetros de UserPref en el momento de la inserción o la edición, y te permite configurar las preferencias del usuario con una interfaz personalizada. Y puedes tener elementos de entrada personalizados, como para elegir una posición en un mapa en lugar de ingresar coordenadas del mapa.
Los desarrolladores pueden usar las APIs de setprefs estándar para guardar las preferencias en esta vista. Para obtener más información, consulta la Referencia de XML de gadgets y la sección de estado de guardado de Developer Fundamentals. Estas vistas permiten que la aplicación contenedora proporcione información de configuración complementaria y se establecen en los archivos de especificaciones .xml del gadget que siguen a las secciones 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
.
Prácticas recomendadas para los gadgets de Sites
Sitios que los usuarios quieren verse bien en la Web Sigue estas prácticas recomendadas para que tus este gadget se integra a la perfección con los diversos temas de Google Sites. Consulta Descripción general de gadgets para obtener información detallada sobre la creación de gadgets. El resto de esta sección presenta las pautas específicas para los gadgets de Sites.
- No incluyas información confidencial en las especificaciones ni en los títulos de los gadgets porque el público puede ver el tuyo. Por ejemplo, no incluyas nombres de proyectos internos.
- Para minimizar el nivel de visibilidad de tu gadget, no lo envíes al directorio de gadgets de JavaScript ni a ningún otro servicio de lista pública. En su lugar, solicita a todos los usuarios que la incluyan solo por su URL. Además, puedes crear un gadget tipo URL (en lugar del típico tipo de HTML que incluye todo el contenido) que simplemente llame a otro archivo para obtener 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 de URL, y la sección Los gadgets son públicas de Cómo escribir tus propios gadgets para conocer otras formas de enmascarar un gadget.
- Lo más importante es que pruebes tu gadget en distintos 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.