Di Google, widget adalah aplikasi HTML dan JavaScript yang dapat disematkan di web halaman dan aplikasi lain, termasuk Sites. Gadget ini menawarkan kemampuan untuk menyertakan konten dinamis dalam situs Anda, seperti aplikasi miniatur dan daftar yang didorong database, digabungkan dengan teks dan gambar untuk pengalaman pengguna yang mulus.
Setiap halaman Sites adalah penampung gadget potensial. Selain itu, Sites menawarkan Data API yang dapat digunakan bersamaan dengan gadget untuk membuat aplikasi canggih. Itu berarti sebagai pengembang gadget Anda dapat manfaatkan Sites API klasik untuk membuat alat yang menarik bagi developer Web lain dan audiens mereka, serta cocok untuk Anda gunakan sendiri.
Jika Anda membuat gadget untuk Sites, gadget akan tersedia untuk jutaan pengguna aktif pengguna. Cukup kirimkan gadget Anda kepada kami, dan gadget akan muncul di mana pengguna dapat menjelajahi, mengonfigurasi, dan menambahkan gadget Anda ke Situs.
Jadi sekarang Anda tahu bahwa {sites_name_short} adalah platform distribusi hebat untuk gadget Anda, yang Anda tunggu? Mulailah membuat gadget untuk Sites sekarang!
Ikhtisar gadget Sites
Pada umumnya, gadget adalah utilitas kecil untuk membuat atau menarik informasi eksternal ke dalam web halaman. Dalam bentuk paling sederhana, gadget adalah file .xml kecil yang mengambil informasi dengan kemampuan untuk menyediakannya di beberapa laman web sekaligus. Di Sites, termasuk hasil gadget dalam iframe yang bertindak sebagai saluran untuk informasi eksternal ini. Beberapa gadget tidak ada lagi dari itu, iframe yang melewati informasi dari situs web lain.
Gadget yang lebih canggih mengumpulkan konten dinamis dan menyediakan aplikasi interaktif di dalamnya halaman Sites Anda. Lihat Contoh gadget.
Gadget terdiri dari komponen berikut:
- File spec gadget - File .xml yang menggabungkan fungsi HTML dan JavaScript.
- Halaman Penampung - Halaman web tempat gadget dimasukkan, dalam hal ini Situs Google.
- Sumber data eksternal - Ini opsional dan mungkin berada di lokasi yang sama dengan file .xml, namun sering kali dipanggil oleh spesifikasi gadget melalui HTTP untuk memberikan hasilnya.
Gadget yang dibuat untuk Sites dapat digunakan oleh semua pelihat situs. Mereka cenderung interaktif, fokus untuk menarik dalam konten dinamis, bukan dalam presentasi, dan dirancang untuk melengkapi konten situs Anda.
Gadget kalender adalah contoh yang baik dari perbedaan ini. Gadget kalender yang dipersonalisasi di mungkin akan menampilkan kalender pengguna yang masuk secara {i>default<i}, sementara gadget kalender di Sites memungkinkan kolaborator memilih dari berbagai kalender khusus lokasi.
Gadget Sites memungkinkan Anda menyajikan berbagai informasi dari sumber eksternal (misalnya diagram real-time dari dasbor performa yang berbeda tetapi saling terkait) dalam satu halaman bersama teks penjelasan yang dipublikasikan langsung di Sites. Hal ini menghemat ruang visual sekaligus mengumpulkan beragam informasi mengenai topik yang sama dalam sudut pandang yang sama. Gadget juga memungkinkan Anda memasukkan konten dinamis yang seharusnya dicegah oleh pemeriksaan keamanan Sites.
Peringatan: Gadget yang dibuat dengan versi lama
gadget API dapat berfungsi di Sites tetapi tidak didukung secara resmi. Gadget bawaan dan berbasis feed
juga tidak didukung. Oleh karena itu, Google menyarankan Anda untuk membuat semua gadget Sites menggunakan
gadget.* saat ini Compute Engine API. Lihat postingan ini untuk mengetahui penjelasannya:
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html
Contoh gadget
Berikut ini Sertakan gadget yang sederhana namun populer yang tidak hanya memberikan iframe untuk melewati konten web lainnya:
<?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>
Lihat Memulai: gadget.* API untuk deskripsi lengkap tag gadget dan konten yang diharapkan.
Menghosting gadget Anda
Terlepas dari apa yang dilakukan gadget Anda, file-nya harus berada di {i>World Wide Web<i} agar dapat ditemukan dan data Setiap lokasi online yang dapat diakses melalui HTTP tanpa otentikasi akan fungsi tersebut. Ingatlah, gadget Anda harus diterbitkan dalam direktori publik agar dapat dipilih. Jika tidak, pengguna harus menyematkannya dengan memasukkan URL-nya secara langsung.
Berikut adalah opsi hosting gadget Anda:
- App Engine - Mampu menyimpan semua file yang dibutuhkan oleh gadget Anda. Memerlukan beberapa penyiapan, yaitu pembuatan project dan upload file berikutnya. Tapi alat ini akan siap untuk digunakan dalam jumlah besar pengguna. Anda dapat membuat aplikasi untuk menyimpan semua gadget dan lainnya untuk menyalurkan file statis, termasuk file app.yaml yang menyerupai:
application: <your app name> version: 1 runtime: python api_version: 1 handlers: - url: /.* static_dir: static
Jika Anda menyimpan semua file gadget di direktori statis, Anda dapat mengedit file di direktori lokal Anda dan men-deploy-nya ke App Engine setiap kali Anda membuat perubahan. Jika Anda memiliki file /static/gadget.xml, URL-nya akan menjadi: http://<nama-aplikasi-Anda>.appspot.com/static/widget.xml
- Semua lokasi online yang Anda pilih - Sepenuhnya di bawah kendali Anda tetapi juga tanggung jawab penuh. Sistem mati di server Anda dapat mengakibatkan pemadaman pengguna gadget Anda.
Membuat gadget Anda
Gadget hanya berupa HTML dan (opsional) JavaScript, Flash, atau Silverlight yang dibungkus XML. Panduan Pengembang Gadget memberikan semua detail yang diperlukan untuk membuat gadget Anda sendiri. Selain itu, template OpenSocial dapat digunakan untuk membuat aplikasi sosial di gadget dengan cepat.
Berikut adalah langkah-langkah tingkat tinggi membuat gadget untuk Sites:
- Tentukan tempat gadget akan dihosting. Lihat bagian Menghosting gadget Anda untuk keterangan opsi Anda.
- Buat file .xml baru yang akan berfungsi sebagai spesifikasi Anda menggunakan editor teks pilihan Anda.
- Tentukan jenis konten, HTML atau URL, dan tentukan dalam file .xml gadget, seperti ini:
<Content type="html">
Ini hampir selalu berupa HTML, yang mengasumsikan semua konten disediakan langsung dalam file .xml. Namun, jika Anda ingin menyediakan konten dalam file terpisah, gunakan jenis konten URL. Baca Memilih Jenis Konten untuk deskripsi lengkap tentang perbedaannya. - Buat konten dalam file .xml gadget atau dalam file terpisah yang dipanggil berdasarkan spesifikasi. Lihat bagian Melihat contoh gadget untuk mengetahui cara memeriksa gadget yang ada.
- Menentukan preferensi dasar untuk gadget yang dapat diubah oleh pengguna. Baca petunjuk Menentukan Preferensi Pengguna. Untuk memberikan konfigurasi lanjutan lainnya, lihat bagian Mengizinkan konfigurasi pengguna lanjutan.
- Tentukan preferensi modul yang hanya dapat diubah oleh pembuat gadget. Lihat Menentukan Preferensi Gadget untuk detail selengkapnya.
- Uji gadget. Lihat bagian Menguji gadget untuk petunjuk.
Menyematkan gadget Anda
Gadget dapat disematkan di halaman Sites dengan memilihnya dari direktori gadget Sites (yang disinkronkan dengan direktori gadget iGoogle) atau dengan memasukkan URL-nya secara langsung.
Untuk menyematkan gadget di Sites:
- Buka halaman Sites yang akan berisi gadget baru.
- Buka halaman untuk mengedit.
- Pilih Sisipkan > Gadget lainnya.
- Telusuri gadget, pilih dari berbagai kategori di sebelah kiri, atau klik Tambahkan gadget menurut URL dan tempelkan URL ke file .xml Anda. Lalu, klik Add.
Kiat: Tambahkan gadget yang sama dengan metode URL ini dapat digunakan untuk menyematkan gadget dari iGoogle dan di mana pun secara online. - Tentukan dimensi gadget, pilih dari setelan yang tersedia, lalu klik OK. Gadget telah ditambahkan ke halaman Anda.
- Simpan halaman untuk melihat dan menguji gadget Anda di situs.
Menguji gadget Anda
Setelah membuat gadget, Anda harus mengujinya secara menyeluruh sebelum menggunakannya dan memungkinkan orang lain untuk lakukan hal yang sama. Uji gadget Anda secara manual dengan membuat satu atau beberapa Google Sites uji coba dan menyematkan gadget Anda. Lihat bagian Menyematkan gadget Anda untuk langkah yang tepat. Tujuan fungsionalitas dan tampilan gadget Anda tergantung pada situs yang berisi anotasi. Oleh karena itu, cara terbaik untuk men-debug gadget Anda adalah dengan mengujinya dalam konteks situs Google aktual. Cobalah beralih di antara berbagai tema Sites untuk memastikan bahwa gadget Anda muncul dengan benar di masing-masing tema.
Saat menguji gadget, Anda pasti akan menemukan bug dan perlu melakukan koreksi ke file .xml gadget Anda. Anda harus menonaktifkan penyimpanan gadget ke dalam cache saat mengubah XML. Jika tidak, perubahan Anda tidak akan muncul di halaman. Spesifikasi gadget di-cache kecuali jika Anda memberi tahu Sites untuk tidak melakukannya. Untuk mengabaikan cache selama pengembangan, tambahkan ini ke akhir URL halaman Sites yang berisi gadget (bukan URL file .xml spesifikasi gadget):
?nocache=1
Sites menyediakan UI standar untuk menambahkan dan mengonfigurasi gadget. Saat Anda menambahkan gadget, gadget akan menampilkan pratinjau dan menampilkan semua parameter UserPref yang dapat dikonfigurasi. Menguji pembaruan berbagai
nilai konfigurasi dan
menambahkan gadget Anda ke situs uji coba. Konfirmasi bahwa gadget Anda berfungsi seperti yang diharapkan pada
situs itu sendiri. Anda harus mengujinya
UserPref yang telah Anda tetapkan dapat dikonfigurasi dengan benar oleh administrator situs.
Lalu buka bagian Menyiapkan Publikasi pada Memublikasikan Gadget Anda untuk melakukan pengujian lain.
Mengizinkan konfigurasi pengguna lanjutan
Semua gadget dapat menawarkan kemampuan untuk menyetel preferensi pengguna dasar, melalui bagian UserPref dalam file spesifikasi gadget. Hal ini biasanya memengaruhi dimensi, scrollbar, batas, judul, dan setelan khusus gadget, seperti yang terlihat pada screenshot di sini:
Namun, ada banyak kasus ketika gadget diuntungkan dengan preferensi yang lebih canggih daripada yang ditawarkan komponen UserPref standar. Preferensi sering kali harus menyertakan fitur seperti logika bisnis kustom, validasi, atau pemilih. Antarmuka yang dihasilkan dari bagian UserPref gadget mendukung jenis data dalam jumlah terbatas (string, enum, dll.), sehingga validasi input seperti URL atau tanggal tidak dapat dilakukan.
Selanjutnya, dalam penampung seperti iGoogle di mana pemirsa dan editor yang sama, penulis gadget dapat memperluas konfigurasi sebagai bagian dari tampilan standar. Di Sites, pengguna tidak selalu menjadi editor, sehingga pembuat gadget tidak dapat menjamin bahwa pengguna yang melihat memiliki akses untuk memperbarui preferensi. Penampung sosial seperti Sites tidak dapat mengizinkan pengguna mengubah preferensi, hanya penulisnya.
Di Sites, antarmuka preferensi gadget dasar yang dihasilkan oleh UserPref dapat diganti dengan tampilan konfigurasi yang dapat menyediakan banyak preferensi dan jenis data tambahan, seperti pada screenshot yang ditampilkan di sini:
Tampilan konfigurasi ditampilkan sebagai pengganti setelan UserPref pada waktu penyisipan atau waktu edit dan memungkinkan Anda menetapkan preferensi pengguna dengan antarmuka kustom. Anda juga dapat memiliki elemen input kustom, seperti memilih posisi pada peta, bukan memasukkan koordinat peta.
Developer bisa menggunakan API setpref standar untuk menyimpan preferensi dalam tampilan ini. Lihat Referensi XML Gadget dan bagian Menyimpan Status di Dasar-Dasar Developer untuk detail tambahan. Tampilan ini memungkinkan aplikasi penampung untuk memberikan informasi konfigurasi tambahan dan ditetapkan dalam file spesifikasi .xml gadget mengikuti bagian UserPref dengan tag pembuka yang menyerupai:
<Content type="html" view="configuration" preferred_height="150">
Misalnya, gadget news.xml yang menyediakan tampilan konfigurasi di atas berisi bagian berikut:
<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>
Anda dapat menemukan contoh ini dan gadget khusus Sites lainnya dengan tampilan konfigurasi di sini:
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
Mengikuti praktik terbaik untuk gadget Sites
Pengguna situs ingin terlihat bagus di web. Ikuti praktik terbaik ini agar gadget menyatu dengan mulus dengan banyak tema yang digunakan di Sites. Lihat Ringkasan Gadget untuk detail tentang membuat gadget. Sisanya dari bagian ini menyajikan pedoman khusus untuk gadget Sites.
- Jangan masukkan informasi sensitif pada spesifikasi atau judul gadget karena gadget Anda dapat dilihat oleh publik. Misalnya, jangan sertakan nama project internal.
- Untuk meminimalkan visibilitas gadget Anda, jangan kirimkan ke direktori gadget iGoogle atau layanan listingan umum lainnya. Sebagai gantinya, minta semua pengguna menyertakannya hanya dengan URL. Selain itu, Anda dapat membuat gadget tipe URL (bukan tipe HTML biasa yang berisi semua konten) yang hanya memanggil file lain untuk kontennya. Dengan opsi pass-through ini, hanya URL file kedua yang akan ditampilkan. Lihat bagian Memilih Jenis Konten pada Dasar-Dasar Pengembang untuk perbedaan antara gadget HTML dan URL serta bagian Gadget adalah bagian Umum dalam Menulis Gadget Anda Sendiri untuk mengetahui cara lain menyamarkan gadget Anda.
- Yang terpenting, uji gadget Anda di sejumlah situs berbeda. Ubah warna latar belakang situs, warna teks, dan tampilan font untuk memastikan gadget Anda menyatu dengan berbagai template.