W Google gadżety to aplikacje HTML i JavaScript, które można umieszczać na stronach internetowych i w innych aplikacjach, w tym w Witrynach. Gadżety te pozwalają umieszczać w witrynie treści zewnętrzne i dynamiczne, takie jak miniaturowe aplikacje i listy oparte na bazach danych, a także zintegrowane z tekstem i obrazami w celu zapewnienia wygody użytkownikom.
Każda strona w Witrynach to potencjalny kontener gadżetów. Co więcej, Witryny oferują interfejs Data API, którego można używać w połączeniu z gadżetami do tworzenia zaawansowanych aplikacji. Oznacza to, że jako twórca gadżetów możesz używać klasycznej wersji Witryn API, aby tworzyć interesujące narzędzia dla innych programistów internetowych i ich odbiorców, a także do użytku własnego.
Gdy utworzysz gadżet na potrzeby Witryn, staje się on dostępny dla milionów aktywnych użytkowników. Wystarczy, że prześlesz nam swój gadżet, a pojawi się on w miejscach, w których użytkownicy będą mogli łatwo przeglądać, konfigurować i dodawać gadżety do swoich Witryn.
{sites_name_short} to świetna platforma dystrybucji gadżetów, na co czekasz? Zacznij tworzyć gadżety do Witryn już teraz!
Omówienie gadżetu Witryny
Gadżety to zwykle małe narzędzia generujące lub pobierające informacje zewnętrzne na strony internetowe. W najprostszej postaci gadżet to niewielki plik .xml, który pobiera informacje, które można udostępnić na wielu stronach internetowych jednocześnie. W Witrynach Google dodanie gadżetu skutkuje elementem iframe, który pełni rolę kanału dla tych informacji zewnętrznych. Niektóre gadżety mogą mieć tylko elementy iframe przekazujące informacje z innej witryny.
Bardziej zaawansowane gadżety zbierają zawartość dynamiczną i udostępniają interaktywne aplikacje na stronach Witryn. Zobacz Przykładowy gadżet.
Gadżety składają się z następujących elementów:
- Plik specyfikacji gadżetu – plik .xml wbudowany w funkcje HTML i JavaScript.
- Strona kontenera – strona internetowa, na której wstawiono gadżet, w tym przypadku witryna Google.
- Zewnętrzne źródło danych – jest opcjonalne i może znajdować się w tej samej lokalizacji co plik .xml, ale często jest wywoływane przez specyfikacji gadżetu przez HTTP w celu dostarczenia wyników.
Gadżety utworzone w przypadku Witryn mogą być używane przez wszystkich użytkowników witryny. Zwykle są interaktywne, skupiają się na przyciąganiu zawartości dynamicznej, a nie prezentacji, i zostały zaprojektowane tak, aby uzupełniać zawartość witryny.
Dobrym przykładem takiego rozwiązania jest gadżet kalendarza. Spersonalizowany kalendarz w kalendarzu domyślnie pokazuje kalendarz zalogowanego użytkownika, a gadżet w Witrynach Google może umożliwiać współpracownikom wybieranie spośród różnych kalendarzy odpowiednich dla lokalizacji.
Gadżety w Witrynach umożliwiają prezentowanie wielu elementów pochodzących z zewnętrznych źródeł (np. diagramów na żywo z różnych, ale powiązanych paneli wydajności) na jednej stronie wraz z wyjaśnieniami opublikowanymi bezpośrednio w Witrynach. Pozwala to zaoszczędzić prawdziwą przestrzeń reklamową, a jednocześnie gromadzić w tym samym widoku różne informacje na ten sam temat. Gadżety umożliwiają też uwzględnianie treści dynamicznych, które w przeciwnym razie byłyby blokowane w ramach kontroli bezpieczeństwa Witryn.
Ostrzeżenie: gadżety utworzone przy użyciu starszego interfejsu API gadżetów mogą działać w Witrynach, ale nie są oficjalnie obsługiwane. Gadżety wbudowane i kanały nie są obsługiwane. Dlatego Google zaleca tworzenie wszystkich gadżetów za pomocą obecnych gadżetów*. API. Wyjaśnienie znajdziesz w tym poście:
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html
Przykładowy gadżet
Oto prosty, ale popularny Gadżet zawierający treści, który nie udostępnia więcej niż elementu iframe do przekazywania innych treści internetowych:
<?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>
Zobacz Pierwsze kroki: gadżety*. API, by uzyskać pełny opis tagów gadżetu i oczekiwanej zawartości.
Hosting gadżetu
Niezależnie od tego, co robi Twój gadżet, jego pliki muszą być dostępne w sieci WWW, aby można było je znaleźć i z nich korzystać. Wszystkie miejsca online dostępne przez HTTP bez uwierzytelniania będą dozwolone. Pamiętaj, że Twój gadżet musi być opublikowany w katalogu publicznym, zanim będzie można go wybrać. W przeciwnym razie użytkownicy muszą umieścić go bezpośrednio, wprowadzając jego adres URL.
Oto opcje hostingu gadżetów:
- App Engine – możliwość przechowywania wszystkich plików wymaganych przez gadżety. Wymaga wstępnej konfiguracji, czyli tworzenia projektów i przesyłania kolejnych plików. Możesz ją jednak łatwo skalować do dużej liczby użytkowników. Możesz utworzyć aplikację do przechowywania wszystkich gadżetów i drugą do wyświetlania plików statycznych, np. app.yaml:
application: <your app name> version: 1 runtime: python api_version: 1 handlers: - url: /.* static_dir: static
Jeśli wszystkie pliki gadżetów umieścisz w katalogu statycznym, możesz edytować je w katalogu lokalnym i wdrażać w App Engine po każdym wprowadzeniu zmian. Jeśli masz plik /static/gadget.xml, jego adres URL będzie wyglądać tak: http://<nazwa-aplikacji>.appspot.com/static/gadget.xml
- Dowolna wybrana lokalizacja online – zależy od Ciebie, ale ponosi pełną odpowiedzialność. Awarie na serwerze mogą spowodować przerwanie działania użytkowników Twoich gadżetów.
Tworzenie gadżetu
Gadżety to tylko kod HTML i opcjonalnie zawiera kod JavaScript, Flash lub Silverlight zakodowane w formacie XML. Przewodnik dla programistów gadżetów zawiera wszystkie szczegóły potrzebne do tworzenia własnych gadżetów. Dodatkowo szablony OpenSocial mogą służyć do szybkiego tworzenia aplikacji społecznościowych w gadżetach.
Aby utworzyć gadżet Witryn, wykonaj te ogólne czynności:
- Zdecyduj, gdzie będzie hostowany Twój gadżet. Opis opcji znajdziesz w sekcji Hosting gadżetów.
- Utwórz nowy plik .xml, który będzie działać jako specyfikacja w dowolnym edytorze tekstu.
- Wybierz typ treści (HTML lub URL) i określ go w pliku .xml gadżetu:
<Content type="html">
Niemal zawsze będzie to HTML, który zakłada, że cała treść jest podana bezpośrednio w pliku .xml. Jeśli jednak chcesz przesłać treści w osobnym pliku, użyj typu adresu URL. Pełen opis różnic znajdziesz w artykule Wybór typu treści. - Twórz zawartość pliku .xml gadżetu lub w osobnych plikach wywoływanych przez specyfikację. Informacje o sposobach analizowania istniejących gadżetów znajdziesz w sekcji Wyświetlanie przykładowych gadżetów.
- Określ podstawowe ustawienia gadżetu, które użytkownicy mogą zmienić. Instrukcje znajdziesz w sekcji Definiowanie ustawień użytkownika. Aby przeprowadzić konfigurację zaawansowaną, przejdź do sekcji Zezwalanie na zaawansowaną konfigurację użytkownika.
- Określ ustawienia modułu, które mogą zostać zmienione tylko przez autora gadżetu. Więcej informacji znajdziesz w sekcji Definiowanie preferencji gadżetów.
- Przetestuj gadżet. Instrukcje znajdziesz w sekcji Testowanie gadżetu.
Umieszczanie gadżetu
Gadżety można umieszczać na stronach w witrynie. Można to zrobić, wybierając go z katalogu gadżetów Witryn (który jest zsynchronizowany z katalogiem gadżetów iGoogle) lub bezpośrednio podając jego adres URL.
Aby umieścić gadżet w Witrynach:
- Przejdź na stronę Witryny, która będzie zawierać nowy gadżet.
- Otwórz stronę edycji.
- Wybierz Wstaw > Więcej gadżetów.
- Wyszukaj gadżet, wybierz go z kategorii po lewej stronie lub kliknij Dodaj gadżet przez adres URL i wklej adres URL do pliku .xml. Następnie kliknij Dodaj.
Wskazówka: tej samej metody dodawania gadżetów przy użyciu adresu URL można używać do umieszczania gadżetów z iGoogle i innych miejsc online. - Określ wymiary gadżetu, wybierz jedną z dostępnych ustawień i kliknij OK. Gadżet zostanie dodany do Twojej strony.
- Zapisz stronę, aby wyświetlić i przetestować gadżet w witrynie.
Testowanie gadżetu
Po utworzeniu gadżetu przetestuj go dokładnie, zanim zaczniesz z niego korzystać, aby umożliwić innym korzystanie z niego. Przetestuj gadżet ręcznie, tworząc co najmniej 1 testową wersję Witryn Google i umieszczając go. Szczegółowe instrukcje znajdziesz w sekcji Umieszczanie gadżetu. Funkcje i wygląd Twojego gadżetu zależą od witryny, w której się on znajduje. Dlatego najlepiej jest przetestować go w kontekście prawdziwej strony w Witrynach Google. Spróbuj przełączyć się między różnymi motywami Witryn, aby mieć pewność, że gadżet będzie prawidłowo wyświetlany w każdym z nich.
Podczas testowania gadżetu odkryjesz błędy i musisz wprowadzić poprawki w pliku .xml gadżetu. Podczas edytowania pliku XML należy wyłączyć buforowanie gadżetu. W przeciwnym razie zmiany nie będą widoczne na stronie. Specyfikacje gadżetów są przechowywane w pamięci podręcznej, chyba że polecisz witryny, aby tego nie robiły. Aby podczas korzystania z pamięci podręcznej omijać pamięć podręczną, dodaj ten fragment na końcu adresu URL strony w Witrynach zawierającej gadżet (a nie adres URL pliku specyfikacji gadżetu w formacie xml):
?nocache=1
Witryny zapewniają standardowy interfejs dodawania i konfigurowania gadżetów. Gdy dodasz gadżet, zobaczysz podgląd i wszystkie parametry UserPref, które można skonfigurować. Przetestuj aktualizację różnych wartości konfiguracyjnych i dodaj gadżet do witryny testowej. Upewnij się, że Twój gadżet działa w witrynie zgodnie z oczekiwaniami. Musisz sprawdzić, czy każdy zdefiniowany przez Ciebie element UserPref może być poprawnie skonfigurowany przez administratora witryny.
Następnie przeprowadź weryfikację w sekcji Przygotowywanie do publikacji.
Zezwolenie na zaawansowaną konfigurację użytkowników
Wszystkie gadżety mogą umożliwiać wprowadzanie podstawowych ustawień użytkownika zrobionych w sekcji UserPref pliku specyfikacji. Zazwyczaj wpływają one na wymiary, paski przewijania, obramowanie, tytuły i ustawienia związane z gadżetami, co pokazano na zrzucie ekranu:
Jednak w niektórych przypadkach gadżety są bardziej zaawansowane niż standardowe komponenty UserPref. Preferencje często muszą obejmować takie funkcje jak niestandardowa logika działalności, sprawdzanie poprawności lub selektory. Interfejs wygenerowany z sekcji gadżetu UserPref obsługuje ograniczoną liczbę typów danych (ciąg znaków, wyliczenie itp.), dlatego nie można weryfikować danych wejściowych, takich jak adresy URL czy daty.
Ponadto w kontenerach, takich jak iGoogle, w których widz i edytor są identyczne, autorzy gadżetów mogą rozszerzyć konfigurację w widoku standardowym. W Witrynach użytkownik nie zawsze jest edytorem, więc autor gadżetu nie może zagwarantować, że użytkownik przeglądający będzie miał uprawnienia do aktualizowania ustawień. Kontenery społecznościowe, takie jak Witryny, nie mogą zmieniać żadnych ustawień, a jedynie ich autora.
W Witrynach podstawowy interfejs preferencji gadżetów wygenerowany przez UserPref może zostać zastąpiony widokiem konfiguracji, w którym można podać wiele dodatkowych ustawień i typów danych, tak jak na tym zrzucie ekranu:
Widok konfiguracji jest wyświetlany zamiast ustawień UserPref w czasie wstawiania lub edycji i umożliwia ustawienie preferencji użytkownika za pomocą interfejsu niestandardowego. Możesz też użyć niestandardowych elementów wejściowych, np. wybierać położenie na mapie, zamiast wpisywać współrzędne.
Deweloperzy mogą zapisywać ustawienia w tym widoku, korzystając ze standardowych interfejsów API setprefs. Więcej informacji znajdziesz w materiałach referencyjnych w formacie XML gadżetów oraz w sekcji Stan zapisywania. Te widoki umożliwiają aplikacji kontenera udostępnianie dodatkowych informacji konfiguracyjnych i są umieszczane w plikach specyfikacji gadżetu .xml w sekcjach UserPref przypominających tag otwierający:
<Content type="html" view="configuration" preferred_height="150">
Na przykład gadżet news.xml z widokiem powyżej konfiguracji zawiera tę sekcję:
<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>
Ten przykład oraz inne gadżety dotyczące Witryn z widokami konfiguracji znajdziesz tutaj:
https://www.gstatic.com/sites-tools/news/news.xml
http://tools.pardonmyzinger.org/static/qrcode.xml
https://www.gstatic.com/sites-tools/news/youtube_news.xml
Sprawdzone metody dotyczące gadżetów w Witrynach
Witryny, które chcą dobrze wyglądać w internecie. Stosuj sprawdzone metody, aby gadżet płynnie łączył się z wieloma motywami używanymi w Witrynach. Szczegółowe informacje o tworzeniu gadżetów znajdziesz w artykule Omówienie gadżetów. W pozostałej części tej sekcji znajdziesz wytyczne dotyczące gadżetów w Witrynach Google.
- Nie zamieszczaj informacji poufnych w specyfikacji ani tytułach gadżetów, ponieważ jest on dostępny publicznie. Nie uwzględniaj na przykład nazw projektów wewnętrznych.
- Aby ograniczyć widoczność swojego gadżetu, nie przesyłaj go do katalogu gadżetów iGoogle ani do żadnej innej usługi publicznej. Zamiast tego uwzględnij wszystkich użytkowników tylko na podstawie adresu URL. Ponadto możesz utworzyć gadżet typu adresu URL (zamiast typowego typu HTML zawierającego całą zawartość), który tylko wywołuje inny plik dla jego zawartości. W przypadku tej opcji przekazywania widoczny jest tylko adres URL drugiego pliku. Różnicę między gadżetami HTML i URL-ami a sekcją poświęconą gadżetom publicznym w sekcji Pisanie własnych gadżetów znajdziesz w innych sekcjach o maskowaniu gadżetów w sekcji Wybieranie typu treści.
- Przede wszystkim przetestuj swój gadżet na wielu różnych stronach. Zmień kolor tła, kolor tekstu i krój czcionki witryny, aby dopasować go do różnorodnych szablonów.