In Google, i widget sono applicazioni HTML e JavaScript che possono essere incorporate nel web pagine e altre app, tra cui Sites. Questi gadget offrono la possibilità di includere contenuti dinamici all'interno del sito, come applicazioni in miniatura ed elenchi basati su database, incorporati con testo e immagini per un'esperienza utente fluida.
Ogni pagina di Sites è un potenziale contenitore di gadget. Inoltre, Sites offre un API di dati che può essere utilizzata insieme con gadget per creare potenti applicazioni. Ciò significa che in qualità di sviluppatore di gadget puoi sfruttano l'API della versione classica di Sites per creare strumenti coinvolgenti per altri sviluppatori web e per il loro pubblico, anche per l'uso personale.
Quando crei un gadget per Sites, questo diventa disponibile per milioni di utenti utenti. Ti basta inviarci il tuo gadget e verrà visualizzato dove gli utenti potranno facilmente sfogliare, configurare e aggiungere il tuo gadget al proprio Siti.
Ora sai che {sites_name_short} è una grande piattaforma di distribuzione per i tuoi gadget, quali sono che stai aspettando? Inizia subito a creare gadget per Sites.
Panoramica dei gadget di Sites
In genere, i gadget sono piccole utilità che generano o ricavano informazioni esterne sul web pagine. Nella forma più semplice, un gadget è un piccolo file .xml che recupera informazioni con di renderlo disponibile su più pagine web contemporaneamente. In Sites, inclusi i risultati di un gadget in un iframe che funge da canale per queste informazioni esterne. Alcuni gadget non sono più da quelli di questo tipo, iframe che trasmettono informazioni da un altro sito web.
I gadget più avanzati raccolgono contenuti dinamici e offrono applicazioni interattive all'interno le tue pagine Sites. Vedi Gadget di esempio.
I gadget sono costituiti dai seguenti componenti:
- File delle specifiche del gadget: un file .xml che aggrega le funzioni HTML e JavaScript.
- Pagina contenitore: la pagina web in cui è inserito il gadget, in questo caso un sito Google.
- Origine dati esterna: questa opzione è facoltativa e può trovarsi nella stessa posizione del file .xml, ma viene spesso richiamata dalle specifiche del gadget tramite HTTP per fornire i risultati.
Gadget creati per I siti possono essere utilizzati da tutti i visualizzatori di un sito. Tendono a essere interattivi, incentrati sull'estrazione nei contenuti dinamici piuttosto che nella presentazione e sono progettati per integrare i contenuti dei sito.
Un gadget di calendario è un buon esempio di questa distinzione. Un gadget calendario personalizzato in probabilmente mostrerà il calendario dell'utente che ha effettuato l'accesso per impostazione predefinita, mentre un gadget calendario in Sites potrebbe consentire ai collaboratori di scegliere tra una varietà di calendari specifici per la propria località.
I gadget di Google Sites consentono di presentare diverse informazioni provenienti da fonti esterne (ad esempio, diagrammi in tempo reale da dashboard sul rendimento distinte ma correlate) in un'unica pagina insieme testo esplicativo pubblicato direttamente in Sites. In questo modo si salvano proprietà visive mentre si raccolgono informazioni più disparate sullo stesso argomento nella stessa vista. I gadget consentono anche di includere contenuti dinamici che altrimenti verrebbero bloccati dai controlli di sicurezza di Sites.
Avviso: i gadget creati con la versione legacy
Le API per i gadget possono funzionare in Sites, ma non sono ufficialmente supportate. Gadget integrati e basati su feed
non sono supportate in modo simile. Pertanto, Google consiglia di creare tutti i gadget di Sites utilizzando il
widget attuali.* tramite Google Cloud CLI
o tramite l'API Compute Engine. Per una spiegazione, vedi questo post:
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html
Gadget di esempio
Ecco un widget Includi semplice ma popolare che offre poco più che un iframe per il passaggio attraverso altri contenuti 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 la Guida introduttiva: gadget.* API per una descrizione completa dei tag dei gadget e dei contenuti previsti.
Hosting del gadget
Indipendentemente dalla funzione del gadget, i suoi file devono risiedere nel World Wide Web per essere trovati e in uso. Qualsiasi posizione online accessibile tramite HTTP senza autenticazione che possono fare. Ricorda che il tuo gadget dovrà essere pubblicato in una directory pubblica per essere selezionato. In caso contrario, gli utenti dovranno incorporarlo inserendo direttamente il relativo URL.
Di seguito sono riportate le opzioni di hosting per i gadget:
- App Engine: in grado di archiviare tutti i file richiesti dai tuoi gadget. Richiedono una certa configurazione, in particolare la creazione di progetti e i successivi caricamenti di file. ma sarà subito in grado di adattarsi a un gran numero di utenti. Puoi creare un'applicazione per archiviare tutti i tuoi gadget e un altro per pubblicare file statici, incluso un file app.yaml simile al seguente:
application: <your app name> version: 1 runtime: python api_version: 1 handlers: - url: /.* static_dir: static
Se inserisci tutti i file dei gadget nella directory statica, puoi quindi modificare i file nella directory locale ed eseguirne il deployment in App Engine ogni volta che apporti modifiche. Se hai un file /static/widget.xml, l'URL sarà: http://<nome-app>.appspot.com/static/widget.xml
- Qualsiasi posizione online di tua scelta - Completamente sotto il tuo controllo, ma anche il tuo completa responsabilità. Un tempo di inattività del server potrebbe causare un'interruzione del servizio per gli utenti dei tuoi gadget.
Creazione del tuo gadget
I gadget sono solo in formato HTML e (facoltativamente) JavaScript, Flash o Silverlight racchiusi in XML. La Guida per gli sviluppatori di gadget fornisce tutti i dettagli necessari per creare i tuoi gadget. Inoltre, i modelli OpenSocial possono essere utilizzati per creare rapidamente applicazioni social all'interno dei gadget.
Di seguito sono riportati i passaggi generali per creare un gadget per Sites:
- Decidi dove verrà ospitato il tuo gadget. Per le descrizioni delle opzioni, consulta la sezione Hosting del gadget .
- Crea un nuovo file .xml che fungerà da specifica utilizzando l'editor di testo di tua scelta.
- Decidi il tipo di contenuti (HTML o URL) e specificalo all'interno del file .xml del gadget, in questo modo:
<Content type="html">
Quasi sempre sarà HTML, che presuppone che tutti i contenuti siano forniti direttamente nel file .xml. Se, invece, intendi fornire i contenuti in un file separato, utilizza il tipo di contenuti URL. Consulta la sezione Scegliere un tipo di contenuti per una descrizione completa delle differenze. - Crea contenuti nel file .xml del gadget o in file separati richiamati dalle specifiche. Per scoprire come esaminare i gadget esistenti, consulta la sezione Visualizzazione di gadget di esempio.
- Definisci le preferenze di base per i gadget che possono essere modificati dagli utenti. Per le istruzioni, consulta Definizione delle preferenze utente. Per fornire una configurazione più avanzata, consulta la sezione Consentire la configurazione avanzata degli utenti.
- Definisci le preferenze del modulo che possono essere modificate solo dall'autore del gadget. Per ulteriori informazioni, consulta Definizione delle preferenze dei gadget.
- Prova il gadget. Per istruzioni, consulta la sezione Test del gadget.
Incorporamento del gadget
I gadget possono essere incorporati nelle pagine di Sites selezionandoli dalla directory dei gadget di Sites (che è sincronizzata con la directory dei gadget di Google) o includendo direttamente il relativo URL.
Per incorporare un gadget in Sites:
- Vai alla pagina Siti che conterrà il nuovo gadget.
- Apri la pagina da modificare.
- Seleziona Inserisci > Altri gadget.
- Cerca il gadget, selezionalo dalle categorie a sinistra o fai clic su Aggiungi gadget tramite URL e incolla l'URL al tuo file .xml. Quindi, fai clic su Aggiungi.
Suggerimento: lo stesso metodo Aggiungi gadget in base all'URL può essere utilizzato per incorporare gadget da iCloud e altrove online. - Specifica le dimensioni del gadget, seleziona una delle impostazioni disponibili e fai clic su OK. Il gadget è stato aggiunto alla tua pagina.
- Salva la pagina per visualizzare e testare il tuo gadget nel sito.
Test del gadget in corso...
Dopo aver creato il tuo gadget, dovresti testarlo accuratamente prima di utilizzarlo e consentire ad altri di fai lo stesso. Testa manualmente il tuo gadget creando uno o più siti di prova di Google Sites e incorporandoli il tuo gadget. Per la procedura precisa, consulta la sezione Incorporamento del gadget. La la funzionalità e l'aspetto del tuo gadget dipendono dal sito che contiene li annotino. Pertanto, il modo migliore per eseguire il debug del tuo gadget è testarlo nel contesto di una sito Google effettivo. Prova a passare da un tema di Sites all'altro per assicurarti che il tuo gadget venga visualizzato correttamente in ciascuno di essi.
Durante il test del gadget, scoprirai inevitabilmente bug e dovrai apportare correzioni al file .xml del gadget. Devi disabilitare la memorizzazione nella cache dei gadget mentre modificare il file XML. In caso contrario, le modifiche non verranno visualizzate sulla pagina. Le specifiche dei gadget vengono memorizzate nella cache a meno che tu non indichi a Sites di non farlo. Per ignorare la cache durante lo sviluppo, aggiungi questo alla fine dell'URL della pagina di Sites contenente il gadget (e non l'URL del file .xml delle specifiche del gadget):
?nocache=1
Sites fornisce un'interfaccia utente standard per l'aggiunta e la configurazione di gadget. Quando aggiungi un gadget, verrà visualizzata un'anteprima e verranno mostrati tutti i parametri UserPref che possono essere configurati. Testare l'aggiornamento di vari valori di configurazione
aggiungendo il tuo gadget al sito di test. Verifica che il tuo gadget funzioni come previsto nella
sito stesso. Dovresti verificarlo
tutti i UserPref che hai definito possono essere configurati correttamente dall'amministratore del sito.
Consulta quindi la sezione Preparazione per la pubblicazione di Pubblicazione del gadget per altri test da eseguire.
Consentire la configurazione utente avanzata
Tutti i gadget possono offrire la possibilità di impostare preferenze utente di base, da eseguire tramite la sezione UserPref del file delle specifiche del gadget. Questi elementi in genere hanno effetto su dimensioni, barre di scorrimento, bordi, titoli e impostazioni specifiche per i gadget, come illustrato nel seguente screenshot:
Tuttavia, in molti casi i gadget beneficiano di preferenze più avanzate rispetto a quelle offerte dai componenti standard di UserPref. Spesso le preferenze devono includere funzionalità quali logica di business personalizzata, convalide o selettori. L'interfaccia generata dalle sezioni del gadget UserPref supporta un numero limitato di tipi di dati (stringa, enum e così via), pertanto non è possibile eseguire la convalida di input come URL o date.
Inoltre, nei contenitori in cui il visualizzatore e l'editor sono gli stessi, gli autori dei gadget possono estendere la configurazione come parte della visualizzazione standard. In Sites, il visualizzatore non è sempre l'editor, quindi l'autore del gadget non può garantire che l'utente che visualizza il gadget abbia accesso all'aggiornamento delle preferenze. I contenitori social come i siti non possono consentire a nessun utente di modificare le preferenze, ma solo all'autore.
In Sites, l'interfaccia delle preferenze di base per i gadget generata da UserPref può essere sostituita da una vista di configurazione in cui è possibile specificare molti tipi di dati e preferenze aggiuntivi, come illustrato nello screenshot seguente:
La visualizzazione della configurazione viene mostrata al posto delle impostazioni di UserPref al momento dell'inserimento o della modifica e consente di impostare le preferenze utente con un'interfaccia personalizzata. Inoltre, puoi avere elementi di input personalizzati, ad esempio scegliere una posizione su una mappa anziché inserire le coordinate della mappa.
Gli sviluppatori possono utilizzare le API setprefs standard per salvare le preferenze in questa visualizzazione. Per ulteriori dettagli, consulta la pagina Riferimento XML per i gadget e la sezione relativa allo stato di salvataggio di Developer Fundamentals. Queste visualizzazioni consentono all'applicazione container di fornire informazioni di configurazione supplementari e vengono stabilite nei file di specifica .xml del gadget seguendo le sezioni UserPref con un tag di apertura simile:
<Content type="html" view="configuration" preferred_height="150">
Ad esempio, il gadget news.xml che fornisce la visualizzazione di configurazione sopra riportata contiene questa sezione:
<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>
Qui puoi trovare questo esempio e altri gadget specifici di Sites con visualizzazioni di configurazione:
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
Seguendo le best practice per i gadget di Sites
Gli utenti dei siti vogliono avere un bell'aspetto sul web. Segui queste best practice per il gadget si integra perfettamente con i numerosi temi utilizzati in Sites. Consulta: Panoramica dei gadget per informazioni dettagliate sulla creazione di gadget. Il resto dei questa sezione presenta linee guida specifiche per i gadget di Sites.
- Non inserire informazioni sensibili nelle specifiche o nei titoli dei gadget perché questi sono visualizzabili dal pubblico. Ad esempio, non includere i nomi interni dei progetti.
- Per ridurre al minimo la visibilità del tuo gadget, non inviarlo alla directory dei gadget di Blogger o a qualsiasi altro servizio di pubblicazione pubblica. Chiedi a tutti gli utenti di includerlo solo tramite URL. Inoltre, puoi creare un gadget di tipo URL (invece del tipico tipo HTML che include tutti i contenuti) che si limita a richiamare un altro file per i suoi contenuti. Con questa opzione passthrough, viene esposto solo l'URL del secondo file. Per scoprire altri modi di mascherare i tuoi gadget, consulta la sezione Scelta del tipo di contenuto del corso Developer Fundamentals per scoprire le differenze tra i gadget HTML e URL e la sezione I gadget sono pubblici di Scrittura di gadget personalizzati.
- Ma soprattutto, prova il tuo gadget su diversi siti. Modifica il colore dello sfondo, il colore del testo e il tipo di carattere del sito per assicurarti che il tuo gadget si integri con una vasta gamma di modelli.