Gadżety to aplikacje HTML i JavaScript, które można umieszczać w internecie stron i innych aplikacji, w tym Witryn. Gadżety te umożliwiają umieszczanie w witrynie dynamiczne treści w witrynie, takie jak miniaturowe aplikacje i listy oparte na bazach danych, dołączane do tekstu i obrazów, co zwiększa wygodę użytkowników.
Każda strona w witrynie może być kontenerem gadżetów. Co więcej, Witryny oferują Interfejs API danych, który może być używany w połączeniu za pomocą gadżetów do tworzenia zaawansowanych aplikacji. Oznacza to, że jako twórca gadżetów wykorzystują klasyczny interfejs API Witryn do tworzenia atrakcyjnych narzędzi dla innych programistów stron internetowych i ich odbiorców, do wykorzystania na własny użytek.
Gdy utworzysz gadżet do Witryn, staje się on dostępny dla milionów aktywnych użytkowników. Po prostu prześlij nam swój gadżet, a pojawi się on w miejscu, w którym użytkownicy będą mogli łatwo przeglądać, konfigurować i dodawać go do swoich Witryny.
Wiesz już, że {sites_name_short} to doskonała platforma dystrybucji gadżetów. na co czekasz? Rozpocznij tworzenie gadżetów do Witryn już teraz!
Omówienie gadżetów witryn
Ogólnie gadżety to małe narzędzia, które generują lub pobierają informacje zewnętrzne do sieci . W najprostszej postaci gadżet to mały plik .xml, który pobiera informacje za pomocą udostępnianie ich na wielu stronach internetowych jednocześnie. w Witrynach (z uwzględnieniem wyników z gadżetów) w ramce iframe, która pełni rolę kanału dla tych informacji zewnętrznych. Niektóre gadżety zostały usunięte a także elementy iframe, które przekazują informacje z innej witryny.
Bardziej zaawansowane gadżety zbierają dynamiczną zawartość i udostępniają interaktywne aplikacje Twoich stronach Witryn. Zobacz Przykładowy gadżet.
Gadżety składają się z tych komponentów:
- Plik specyfikacji gadżetów – plik .xml, który opakowuje funkcje HTML i JavaScript.
- Strona kontenera – strona internetowa, na której umieszcza się 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 jest często wywoływane przez specyfikację gadżetów przez HTTP w celu dostarczenia wyników.
Gadżety stworzone z myślą Z witryn mogą korzystać wszyscy użytkownicy witryny. Są interaktywne i skupiają się na przyciąganiu dynamiczne, a nie prezentacji. Mają na celu uzupełnienie treści witrynie.
Dobrym przykładem tego rozróżnienia jest gadżet kalendarza. Spersonalizowany gadżet kalendarza w najprawdopodobniej domyślnie wyświetli kalendarz zalogowanego użytkownika, podczas gdy w gadżecie kalendarza w Witrynach Google może umożliwiać współpracownikom wybieranie z różnych kalendarzy związanych z lokalizacją.
Gadżety witryn umożliwiają prezentowanie wielu informacji ze źródeł zewnętrznych (na przykład aktywne diagramy z różnych, ale powiązanych ze sobą paneli wyników) na jednej stronie, a także publikowane bezpośrednio w Witrynach. Pozwala to zmniejszyć ilość treści wizualnych podczas zbierania danych rozbieżne informacje na dany temat w tym samym widoku. Gadżety umożliwiają też dodawanie dynamiczne treści, które w innym przypadku byłyby blokowane przez testy zabezpieczeń Witryn.
Ostrzeżenie: gadżety utworzone w starszej wersji
interfejs API do obsługi gadżetów może działać w Witrynach, ale nie jest oficjalnie obsługiwany. Gadżety wbudowane i działające z kanałem RSS
nie są obsługiwane w inny sposób. Dlatego Google zaleca tworzenie wszystkich gadżetów Witryn za pomocą
obecne gadżety*. a także przy użyciu Google Cloud CLI
lub Compute Engine 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 Dołącz, który nie tylko zapewnia element iframe, ale także przepuszcza inne treści internetowe:
<?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>
Więcej informacji znajdziesz w artykule Pierwsze kroki: gadżety*. API zapewniający pełny opis tagów gadżetów i oczekiwanej zawartości.
Twój gadżet na serwerze
Niezależnie od tego, do czego służy Twój gadżet, jego pliki muszą znajdować się w sieci WWW, aby można było je znaleźć . Każda lokalizacja online dostępna za pośrednictwem protokołu HTTP bez uwierzytelnienia będzie robisz. Pamiętaj, że aby można było wybrać gadżet, musi on zostać opublikowany w katalogu publicznym. W przeciwnym razie użytkownicy będą musieli umieścić ją bezpośrednio, wstawiając jej adres URL.
Dostępne opcje hostingu gadżetów:
- App Engine – może przechowywać wszystkie pliki wymagane przez gadżety. Wymaga wstępnej konfiguracji, czyli tworzenia projektów i przesyłania plików. ale bez problemu trafi do dużej liczby użytkowników. Możesz utworzyć aplikację do przechowywania wszystkich swoich gadżetów i drugą do obsługi plików statycznych, w tym pliku app.yaml podobnego do:
application: <your app name> version: 1 runtime: python api_version: 1 handlers: - url: /.* static_dir: static
Jeśli umieścisz wszystkie pliki gadżetów w katalogu statycznym, możesz je edytować 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 następujący: http://<nazwa-aplikacji>.appspot.com/static/gadget.xml
- Dowolna wybrana przez Ciebie lokalizacja online – w pełni pod Twoją kontrolą, ale pełną odpowiedzialność. Czas przestoju na serwerze może nie być dostępny dla użytkowników Twoich gadżetów.
Tworzę gadżet
Gadżety to tylko kod HTML i (opcjonalnie) JavaScript, Flash lub Silverlight w kodzie XML. Przewodnik programisty gadżetów zawiera wszystkie informacje niezbędne do tworzenia własnych gadżetów. Dodatkowo szablony OpenSocial mogą być używane do szybkiego tworzenia aplikacji społecznościowych w gadżetach.
Oto ogólne kroki tworzenia gadżetów do Witryn:
- Wybierz miejsce, w którym będzie hostowany gadżet. W sekcji Hostowanie gadżetu znajdziesz opisy dostępnych opcji.
- W wybranym edytorze tekstu utwórz nowy plik .xml, który będzie działać jako specyfikacja.
- Wybierz typ treści (HTML lub URL) i wskaż go w pliku XML gadżetu .Na przykład:
<Content type="html">
Niemal zawsze będzie to kod HTML, który zakłada, że cała zawartość znajduje się bezpośrednio w pliku XML. Jeśli jednak zamierzasz dostarczyć zawartość w osobnym pliku, użyj typu treści URL. Pełny opis różnic znajdziesz w artykule Wybieranie typu treści. - Utwórz treść w pliku .xml gadżetu lub w oddzielnych plikach wywoływanych zgodnie ze specyfikacją. Sposoby sprawdzania 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ą zmieniać. Instrukcje znajdziesz w punkcie Definiowanie preferencji użytkownika. Aby udostępnić bardziej zaawansowaną konfigurację, zapoznaj się z sekcją Zezwalanie na zaawansowaną konfigurację użytkowników.
- Określ ustawienia modułu, które może zmieniać tylko autor gadżetu. Dodatkowe informacje znajdziesz w punkcie Definiowanie ustawień gadżetów.
- Przetestuj gadżet. Instrukcje znajdziesz w sekcji Testowanie gadżetu.
Umieszczanie gadżetu
Gadżety można umieszczać na stronach Witryn. Można to zrobić przez wybranie ich z katalogu gadżetów Witryn (który jest synchronizowany z katalogiem gadżetów strony głównej) lub przez bezpośrednie umieszczenie adresu URL.
Aby umieścić gadżet w Witrynach:
- Przejdź do strony w Witrynach, która będzie zawierać nowy gadżet.
- Otwórz stronę do edycji.
- Wybierz Wstaw > Więcej gadżetów.
- Wyszukaj gadżet, wybierz go spośród kategorii po lewej stronie lub kliknij Dodaj gadżet według adresu URL i wklej adres URL do pliku .xml. Następnie kliknij Dodaj.
Wskazówka: tej samej metody dodawania gadżetów przez adres URL można używać do umieszczania gadżetów ze strony głównej Google i innych miejsc online. - Określ wymiary gadżetu, wybierz je z dostępnych ustawień i kliknij OK. Gadżet został dodany do swojej strony.
- Zapisz stronę, aby wyświetlić i przetestować gadżet w witrynie.
Testowanie gadżetu
Po utworzeniu gadżetu należy go dokładnie przetestować, zanim użyjesz go i zezwolisz innym na jego wykorzystanie zrobić to samo. Przetestuj swój gadżet ręcznie, tworząc co najmniej jedną testową witrynę w Witrynach Google i osadzoną treść Twój gadżet. Szczegółowe instrukcje znajdziesz w sekcji Umieszczanie gadżetu. funkcjonalność i wygląd gadżetu zależy od witryny, w której . Dlatego najlepszym sposobem debugowania gadżetu jest przetestowanie go w kontekście w Witrynach Google. Spróbuj przełączać się między różnymi motywami Witryn, aby mieć pewność, że Twoje gadżety będą wyświetlane poprawnie w każdym z nich.
Podczas testowania gadżetu na pewno zauważysz błędy i musisz wprowadzić poprawki do pliku .xml gadżetu. Wyłącz buforowanie gadżetów na czas gdy zmodyfikujesz kod XML. W przeciwnym razie zmiany nie będą widoczne na stronie. Specyfikacje gadżetów są przechowywane w pamięci podręcznej, chyba że zezwolisz witrynom na to. Aby pominąć pamięć podręczną w trakcie tworzenia aplikacji, dodaj ten ciąg na końcu adresu URL strony w Witrynach zawierającego gadżet (a nie adresu URL pliku .xml specyfikacji gadżetów):
?nocache=1
Witryny mają standardowy interfejs użytkownika służący do dodawania i konfigurowania gadżetów. Gdy dodasz gadżet, pojawi się jego podgląd oraz wszystkie parametry UserPref, które można skonfigurować. Przetestuj aktualizację różnych wartości konfiguracyjnych
dodając go do witryny testowej. Sprawdź, czy gadżet działa zgodnie z oczekiwaniami
w samej witrynie. Trzeba to sprawdzić
wszystkie zdefiniowane przez Ciebie UserPref mogą być prawidłowo skonfigurowane przez administratora witryny.
Następnie zapoznaj się z sekcją Przygotowanie do publikacji w artykule Publikowanie gadżetu, aby przeprowadzić pozostałe testy.
Zezwalanie na zaawansowaną konfigurację użytkowników
Wszystkie gadżety mogą umożliwiać ustawianie podstawowych preferencji użytkownika w sekcji UserPref pliku specyfikacji gadżetów. Zazwyczaj wpływają one na wymiary, paski przewijania, obramowanie, tytuły i ustawienia gadżetów, jak widać na zrzucie ekranu poniżej:
W wielu przypadkach gadżety mogą jednak korzystać z bardziej zaawansowanych ustawień niż standardowe komponenty UserPref. Ustawienia często muszą zawierać takie funkcje, jak niestandardowa logika biznesowa, walidacje lub selektory. Interfejs wygenerowany z sekcji gadżetów 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 strona {5}, w których przeglądający i edytujący są tacy sami, autorzy gadżetów mogą rozszerzać konfigurację jako część widoku standardowego. W Witrynach osoba przeglądająca nie zawsze jest edytorem, więc autor gadżetu nie może zagwarantować, że użytkownik wyświetlający gadżet będzie miał prawo do aktualizowania ustawień. Kontenery mediów społecznościowych, takie jak Witryny, nie mogą zmieniać preferencji żadnemu użytkownikowi – tylko jego autorowi.
W Witrynach podstawowy interfejs ustawień gadżetów wygenerowany przez usługę UserPref można zastąpić widokiem konfiguracji, w którym można podać wiele dodatkowych ustawień i typów danych, tak jak na tym zrzucie ekranu:
Podczas wstawiania lub edytowania ustawień wyświetlany jest widok konfiguracji zamiast ustawień UserPref. Pozwala on określić preferencje użytkownika za pomocą niestandardowego interfejsu. Możesz też korzystać z niestandardowych elementów wejściowych, np. do wybierania pozycji na mapie, zamiast wpisywania jej współrzędnych.
Deweloperzy mogą używać standardowych interfejsów API setprefs, aby zapisywać ustawienia w tym widoku. Więcej szczegółów znajdziesz w materiałach dotyczących formatu XML gadżetów i sekcji Stan zapisywania w artykule Podstawy dla programistów. Widoki te umożliwiają aplikacji kontenera dostarczanie dodatkowych informacji konfiguracyjnych. Są one ujmowane w plikach specyfikacji gadżetów .xml po sekcjach UserPref, przy czym otwierający tag wygląda podobnie do tego:
<Content type="html" view="configuration" preferred_height="150">
Na przykład w gadżecie news.xml, który udostępnia widok konfiguracji powyżej, znajduje się ta sekcja:
<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 i inne gadżety typowe dla Witryn wraz z widokami konfiguracji znajdziesz tutaj:
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
Stosując sprawdzone metody dotyczące gadżetów Witryn
Użytkownicy witryn chcą wyglądać dobrze w internecie. Postępuj zgodnie z tymi sprawdzonymi metodami, płynnie łączy się z wieloma motywami używanymi w Witrynach. Zobacz Omówienie gadżetów, w którym znajdziesz szczegółowe informacje na temat tworzenia gadżetów. Pozostała część W tej sekcji znajdziesz wskazówki dotyczące gadżetów Witryn.
- Nie umieszczaj informacji poufnych w specyfikacjach ani tytułach gadżetów, ponieważ są one publicznie dostępne. Nie podawaj na przykład wewnętrznych nazw projektów.
- Aby zminimalizować widoczność swoich gadżetów, nie przesyłaj go do katalogu gadżetów strony głównej ani żadnej innej publicznej usługi wykazu. Poproś wszystkich użytkowników o uwzględnianie go tylko za pomocą adresu URL. Ponadto możesz utworzyć gadżet w postaci adresu URL (zamiast typowego kodu HTML zawierającego całą zawartość), który będzie jedynie wywołaniem innego pliku w celu uzyskania informacji na temat jego zawartości. W przypadku tej opcji przekazywania ujawniany jest tylko adres URL drugiego pliku. Zapoznaj się z sekcją Wybór typu treści w artykule Podstawy dla programistów, aby poznać różnice między gadżetami HTML i URL, a w sekcji Gadżety są publiczne w artykule Tworzenie własnych gadżetów, aby poznać inne sposoby maskowania gadżetów.
- Przede wszystkim przetestuj swój gadżet w kilku różnych witrynach. Modyfikuj kolor tła, kolor tekstu oraz krój czcionki w witrynie, aby gadżet komponował się z szerokim wachlarzem szablonów.