Google'daki widget'lar, web sayfalarına ve Sites da dahil olmak üzere diğer uygulamalara yerleştirilebilen HTML ve JavaScript uygulamalarıdır. Bu widget'lar, kusursuz bir kullanıcı deneyimi için metin ve resimlerle birleştirilen minyatür uygulamalar ve veritabanı tabanlı listeler gibi harici ve dinamik içerikleri sitenize ekleme olanağı sunar.
Her Sites sayfası potansiyel bir aygıt kapsayıcısıdır. Dahası, Sites güçlü uygulamalar oluşturmak için Gadget'larla birlikte kullanılabilecek bir Veri API'sı sunar. Diğer bir deyişle, bir cihaz geliştiricisi olarak, klasik Sites API'den hem diğer web geliştiricileri hem de onların kitleleri için ilgi çekici araçlar geliştirebileceğiniz ve kendi kullanımınız için yararlanabileceğiniz anlamına gelir.
Sites için bir widget oluşturduğunuzda bu cihaz milyonlarca etkin kullanıcının kullanımına sunulur. Gadget'ınızı bize göndermeniz yeterlidir. Bunu yaptığınızda, kullanıcılar kolayca göz atabilecekleri, bunları yapılandırabilecekleri ve Sites sitelerine ekleyebilecekleri yerlerde görünür.
Artık {sites_name_short} sitesinin, aygıtınız için harika bir dağıtım platformu olduğunu biliyorsunuz. Neyi bekliyorsunuz? Sites için Gadget oluşturmaya hemen başlayın!
Google Sites widget'ına genel bakış
Genel olarak Gadget'lar, harici bilgiler oluşturan veya web sayfalarına çeken küçük yardımcı programlardır. En basit haliyle Gadget, bilgileri alan küçük bir .xml dosyasıdır. Bu dosya, bilgileri aynı anda birden fazla web sayfasında kullanılabilir hale getirir. Google Sites'ta bir gadget dahil edildiğinde, bu harici bilgilere kanal görevi gören bir iframe oluşturulur. Bazı gadget'lar başka bir web sitesinden bilgi ileten iframe'lerden başka bir şey değildir.
Daha gelişmiş gadget'lar dinamik içerik toplar ve Sites sayfalarınızda etkileşimli uygulamalar sunar. Örnek aygıt sayfasına göz atın.
Gadget'lar aşağıdaki bileşenlerden oluşur:
- Gadget spesifikasyon dosyası - HTML ve JavaScript işlevlerini sarmalayan bir .xml dosyası.
- Kapsayıcı sayfası: Gadget'ın eklendiği web sayfasıdır (bu örnekte bir Google sitesi).
- Harici veri kaynağı - Bu, isteğe bağlıdır ve .xml dosyasıyla aynı konumda olabilir, ancak genellikle sonuçları sağlamak için HTTP üzerinden aygıt spesifikasyonu tarafından çağrılır.
Sites için oluşturulan widget'lar, siteyi görüntüleyen tüm kullanıcılar tarafından kullanılabilir. Bu reklamlar genellikle etkileşimlidir, sunum yerine dinamik içerik çekmeye odaklanır ve sitenin içeriğini tamamlayacak şekilde tasarlanmıştır.
Bir takvim aygıtı bu ayrımın iyi bir örneğidir. Kişiselleştirilmiş bir takvim aygıtı varsayılan olarak giriş yapmış kullanıcının takvimini gösterirken Google Sites'taki bir takvim widget'ı ortak çalışanların çeşitli konuma özgü takvimler arasından seçim yapmasına olanak tanıyabilir.
Google Sites widget'ları, doğrudan Sites'ta yayınlanan açıklayıcı metinle birlikte harici kaynaklardan gelen çeşitli bilgileri (ör. farklı ancak ilgili performans gösterge tablolarından alınan canlı diyagramlar) tek bir sayfada sunmanıza olanak tanır. Bu özellik, aynı konuda aynı konuda farklı bilgileri toplarken görsel alandan tasarruf sağlar. Gadget'lar, normalde Sites güvenlik kontrolleri tarafından engellenecek dinamik içeriği eklemenize olanak tanır.
Uyarı: Eski Gadget'lar API'si ile oluşturulan widget'lar Sites'ta çalışabilir ancak resmi olarak desteklenmez. Yerleşik ve feed tabanlı gadget'lar da benzer şekilde desteklenmez. Bu nedenle Google, tüm Sites gadget'larını mevcut widget'ları* kullanarak oluşturmanızı önerir. API. Açıklama için şu yayını inceleyin:
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html
Örnek aygıt
Diğer web içeriğinden geçmek için iframe sağlamaktan biraz fazlasını yapan basit ancak popüler bir Cihazı dahil et'i burada görebilirsiniz:
<?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>
Başlarken: Gadget'lar* bölümüne bakın. API'yi kullanın.
Gadget'ınızı barındırma
Gadget'ınızın işlevinden bağımsız olarak, bulunabilmesi ve kullanılabilmesi için dosyaları World Wide Web'de bulunmalıdır. Kimlik doğrulaması olmaksızın HTTP üzerinden erişilebilen herhangi bir çevrimiçi konum işe yarar. Unutmayın, seçilebilmek için aygıtınızın genel bir dizinde yayınlanması gerekir. Aksi takdirde, kullanıcılar URL'yi doğrudan ekleyerek gömmelidir.
Gadget barındırma seçenekleriniz şunlardır:
- App Engine: Gadget'larınızın gerektirdiği tüm dosyaları depolayabilme özelliği. Projelerin oluşturulması ve sonrasında dosya yüklemeleri gibi birtakım ayarlar gerektirir. Ancak, çok sayıda kullanıcıya göre kolayca ölçeklendirilebilir. Tüm araçlarınızı depolamak için bir uygulama, statik dosyalar sunmak için de aşağıdakine benzer app.yaml dosyası oluşturabilirsiniz:
application: <your app name> version: 1 runtime: python api_version: 1 handlers: - url: /.* static_dir: static
Tüm aygıt dosyalarını statik dizine koyarsanız, her değişiklik yaptığınızda yerel dizininizdeki dosyaları düzenleyebilir ve App Engine'e dağıtım yapabilirsiniz. Bir /static/widget.xml dosyanız varsa bu dosyanın URL'si şöyle olur: http://<uygulama-adınız>.appspot.com/static/widget.xml
- Seçtiğiniz herhangi bir çevrimiçi konum: Tamamen sizin kontrolünüzdedir, ancak aynı zamanda tüm sorumluluğu size aittir. Sunucunuzun kapalı kalması, aygıtlarınızın kullanıcılarının kesintiye uğramasına neden olabilir.
Gadget'ınızı oluşturma
Gadget'lar sadece HTML'dir ve (isteğe bağlı olarak) XML'e sarmalanmış JavaScript, Flash veya Silverlight'tır. Gadget Geliştirici Kılavuzu, kendi gadget'larınızı oluşturmak için gereken tüm ayrıntıları sağlar. Ayrıca, gadget'larda hızlı bir şekilde sosyal uygulamalar oluşturmak için OpenSocial şablonları da kullanılabilir.
Google Sites için bir gadget oluşturmaya yönelik üst düzey adımlar şunlardır:
- Gadget'ınızın nerede barındırılacağına karar verin. Seçeneklerinizin açıklamaları için Gadget'ınızı barındırma bölümüne bakın.
- İstediğiniz metin düzenleyiciyi kullanarak spesifikasyonunuzu yerine getirecek yeni bir .xml dosyası oluşturun.
- HTML veya URL içerik türüne karar verin ve bunu Gadget .xml dosyasında belirtin. Örneğin:
<Content type="html">
Bu, tüm içeriğin doğrudan .xml dosyasında sağlandığı varsayılır ve neredeyse her zaman HTML olacaktır. Ancak, içeriği ayrı bir dosyada sağlamak istiyorsanız URL içerik türünü kullanın. Aralarındaki farkın tam açıklaması için İçerik Türü Seçme bölümüne bakın. - Gadget .xml dosyasında veya spesifikasyon tarafından çağrılan ayrı dosyalarda içerik oluşturun. Mevcut gadget'ları inceleme yöntemleri için Örnek gadget'ları görüntüleme bölümüne bakın.
- Gadget için kullanıcılar tarafından değiştirilebilecek temel tercihleri tanımlayın. Talimatlar için Kullanıcı Tercihlerini Tanımlama bölümüne bakın. Daha gelişmiş yapılandırma sağlamak için Gelişmiş kullanıcı yapılandırmasına izin verme bölümüne bakın.
- Yalnızca Gadget yazarının değiştirebileceği modül tercihlerini tanımlayın. Daha fazla ayrıntı için Gadget Tercihlerini Tanımlama bölümüne bakın.
- Gadget'ı test edin. Talimatlar için Cihazınızı test etme bölümüne bakın.
Gadget'ınızı gömme
Gadget'lar, Google Sites gadget dizininden seçilerek (iGoogle Gadget dizini ile senkronize edilir) veya URL'sini doğrudan ekleyerek Sites sayfalarına gömülebilir.
Bir gadget'ı Google Sites'a yerleştirmek için:
- Yeni Gadget'ı içeren Sites sayfasına gidin.
- Düzenleme sayfasını açın.
- Ekle > Diğer gadget'lar 'ı seçin.
- Gadget'ı arayın, soldaki kategorilerden seçin veya URL ile Gadget ekle'yi tıklayıp URL'yi .xml dosyanıza yapıştırın. Ardından Ekle'yi tıklayın.
İpucu: Aynı "URL'yle Gadget ekle" yöntemi, iGoogle'dan ve çevrimiçi olarak başka herhangi bir yerden gadget yerleştirmek için kullanılabilir. - Gadget'ın boyutlarını belirtin, kullanılabilir ayarlar arasından seçim yapın ve Tamam'ı tıklayın. Gadget sayfanıza eklenir.
- Sitedeki Gadget'ı görüntülemek ve test etmek için sayfayı kaydedin.
Gadget'ınızı test etme
Gadget'ınızı oluşturduktan sonra, kullanmadan ve başkalarının da aynısını yapmasına izin vermeden önce iyice test etmelisiniz. Bir veya daha fazla test amaçlı Google Sites sitesi oluşturup gadget'ınızı yerleştirerek aygıtınızı manuel olarak test edin. Ayrıntılı adımlar için Cihazınızı yerleştirme bölümüne bakın. Gadget'ınızın işlevselliği ve görünümü, onu içeren siteye bağlıdır. Bu nedenle, Gadget'ınızda hata ayıklamanın en iyi yolu, onu gerçek bir Google Sitesi bağlamında test etmektir. Gadget'ınızın her bir temada doğru şekilde göründüğünden emin olmak için çeşitli Google Sites temaları arasında geçiş yapmayı deneyin.
Gadget'ınızı test ederken kaçınılmaz olarak hatalar keşfedecek ve aygıt .xml dosyanızda düzeltmeler yapmanız gerekecek. XML'de değişiklik yaparken widget'ı önbelleğe almayı devre dışı bırakmalısınız. Aksi takdirde, değişiklikleriniz sayfada görünmez. Siteler'e bunu yapmamaları yönünde bir uyarı göndermediğiniz sürece, aygıt özellikleri önbelleğe alınır. Geliştirme sırasında önbelleği atlamak için bunu, gadget'ı içeren Sites sayfasının URL'sinin sonuna ekleyin (widget spesifikasyon .xml dosyasının URL'sine eklemeyin):
?nocache=1
Google Sites, gadget eklemek ve yapılandırmak için standart bir kullanıcı arayüzü sağlar. Bir gadget eklediğinizde bir önizleme görüntülenir ve yapılandırılabilen tüm UserPref parametreleri gösterilir. Çeşitli yapılandırma değerlerini güncellemeyi ve aygıtınızı test sitenize eklemeyi test edin. Gadget'ınızın sitenin kendisinde beklendiği gibi çalıştığını
doğrulayın. Tanımladığınız tüm UserPref öğelerinin site yöneticisi tarafından doğru şekilde yapılandırılıp yapılandırılamayacağını test etmelisiniz.
Ardından, gerçekleştirilecek diğer testler için Cihazınızı Yayınlama'nın Yayına Hazırlık bölümüne bakın.
Gelişmiş kullanıcı yapılandırmasına izin verme
Tüm Gadget'lar, gadget özellik dosyasının UserPref bölümü üzerinden yapılan temel kullanıcı tercihlerini ayarlama olanağı sunabilir. Bu sorunlar genellikle aşağıdaki ekran görüntüsünde gösterildiği gibi boyutları, kaydırma çubuklarını, kenarlıkları, başlıkları ve cihaza özgü ayarları etkiler:
Ancak birçok durum vardır. Gadget'lar, standart UserPref bileşenlerinin sunduğundan daha gelişmiş tercihlerden faydalanabilir. Tercihlerin genellikle özel iş mantığı, doğrulamalar veya seçiciler gibi özellikleri içermesi gerekir. Gadget UserPref bölümlerinden oluşturulan arayüz, sınırlı sayıda veri türünü (dize, numaralandırma vb.) desteklediğinden URL veya tarih gibi girişlerin doğrulanması yürütülemez.
Ayrıca, görüntüleyen ve düzenleyenin aynı olduğu iGoogle gibi kapsayıcılarda, Gadget yazarları, yapılandırmayı standart görünümün parçası olarak genişletebilir. Google Sites'ta görüntüleyen her zaman düzenleyici değildir. Bu nedenle, gadget yazarı, görüntüleyen kullanıcının tercihleri güncelleme erişimine sahip olduğunu garanti edemez. Sites gibi sosyal kapsayıcılar herhangi bir kullanıcının tercihleri değiştirmesine izin veremez, yalnızca yazara izin verir.
Google Sites'ta, UserPref tarafından oluşturulan temel Gadget tercihleri arayüzü, burada gösterilen ekran görüntüsünde olduğu gibi pek çok ek tercihin ve veri türünün sağlanabileceği bir yapılandırma görünümü ile değiştirilebilir:
Yapılandırma görünümü, ekleme zamanında veya düzenleme zamanında UserPref ayarlarının yerine gösterilir ve kullanıcı tercihlerini özel bir arayüzle ayarlamanıza olanak tanır. Ayrıca, harita koordinatları girmek yerine harita üzerinde bir konum seçmek gibi özel giriş öğeleriniz de olabilir.
Geliştiriciler bu görünümdeki tercihleri kaydetmek için standart setprefs API'lerini kullanabilir. Daha fazla bilgi için Google Gadget'lar XML Referansı ve Geliştiriciyle İlgili Temel Bilgiler'in Kaydetme Durumu bölümünü inceleyin. Bu görünümler, kapsayıcı uygulamasının ek yapılandırma bilgileri sağlamasına olanak tanır ve aşağıdakine benzer bir açılış etiketiyle birlikte UserPref bölümlerinin ardından Gadget .xml spesifikasyon dosyalarında oluşturulur:
<Content type="html" view="configuration" preferred_height="150">
Örneğin, yukarıdaki yapılandırma görünümünü sağlayan news.xml widget'ı şu bölümü içerir:
<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>
Bu örneği ve yapılandırma görünümlerine sahip diğer Sites'a özgü Gadget'ları şurada bulabilirsiniz:
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
Sites widget'ları için en iyi uygulamaları takip etme
Kullanıcıların web'de iyi görünmek istediği siteler. Gadget'ınızın Sites'ta kullanılan birçok temayla sorunsuz bir şekilde birleştirilmesi için buradaki en iyi uygulamaları takip edin. Gadget oluşturmayla ilgili ayrıntılar için Gadget'lara Genel Bakış bölümüne bakın. Bu bölümün geri kalanında, Sites widget'larına özel yönergeler yer almaktadır.
- Gadget'ınız herkes tarafından görüntülenebileceğinden, cihazınızın özelliklerine veya başlıklarına hassas bilgiler eklemeyin. Örneğin, dahili proje adlarını eklemeyin.
- Aygıtınızın görünürlüğünü en aza indirmek için onu iGoogle aygıt dizinine veya başka herhangi bir genel liste hizmetine göndermeyin. Bunun yerine, tüm kullanıcıların içeriği yalnızca URL ile eklemesini sağlayın. Ayrıca, içeriği için yalnızca başka bir dosyayı çağıran (tüm içeriği barındıran tipik HTML türü yerine) URL türü bir aygıt oluşturabilirsiniz. Bu geçiş seçeneği ile yalnızca ikinci dosyanın URL'si gösterilir. Gadget'ınızı maskelemenin diğer yolları için Geliştirici Temel Bilgileri'nin İçerik Türü Seçme konusuna bakın. HTML ve URL gadget'ları arasındaki farklar için Kendi Gadget'larınızı Yazma hakkındaki Gadget'lar Herkese Açık bölümüne bakın.
- En önemlisi, aygıtınızı bir dizi farklı sitede test edin. Gadget'ınızın çok çeşitli şablonlarla uyumlu olması için sitenin arka plan rengini, metin rengini ve yazı tipi yüzünü değiştirin.