Google'da cihazlar, web içine yerleştirilebilen HTML ve JavaScript uygulamalarıdır ve Google Sites da dahil olmak üzere diğer uygulamalar için geçerlidir. Bu gadget'lar; harici ve harici sitenizdeki minyatür uygulamalar ve veritabanına dayalı listeler gibi dinamik içerik, metin ve resimlerle entegre edilerek sorunsuz bir kullanıcı deneyimi sunulur.
Her Sites sayfası olası bir widget kapsayıcısıdır. Dahası, Sites Birlikte kullanılabilen Data API güçlü uygulamalar oluşturmak için kullanın. Bu, bir aygıt geliştiricisi olarak diğer web geliştiricileri ve kitleleri için ilgi çekici araçlar oluşturmak üzere klasik Sites API'den sahip olursunuz.
Google Sites için oluşturduğunuz bir aygıt milyonlarca etkin daha fazla müşteri edinin. Tek yapmanız gereken bize göndermek Siteler.
Artık {sites_name_short} adlı sitenin widget'ınız için harika bir dağıtım platformu olduğunu biliyorsunuz. Peki, bekliyorsunuz? Sites için araç oluşturmaya hemen başlayın!
Google Sites widget'ına genel bakış
Genel olarak, araçlar, web'e harici bilgi oluşturan veya bu bilgileri çeken küçük yardımcı programlardır. sayfalar. En basit şekliyle, bir aldatmaca, ve aynı anda birden fazla web sayfasında kullanılabilir hale getirme olanağı sağlar. Sites'ta (cihaz sonuçları dahil) etiketi görevi gören bir iframe içinde oluşturulur. Bazı araçlar artık bulunmuyor başka bir web sitesinden bilgi geçen iframe'ler kullanılır.
Daha gelişmiş araçlar dinamik içerik toplar ve Google Play içinde etkileşimli uygulamalar sağlar. Google Sites sayfalarınız. Örnek widget'a bakın.
Gadget'lar aşağıdaki bileşenlerden oluşur:
- Looker özellik dosyası: HTML ve JavaScript işlevlerini sarmalayan bir .xml dosyası.
- Kapsayıcı sayfası - Gadget'ın eklendiği Web sayfası. Bu örnekte bir Google Sitesidir.
- Harici veri kaynağı - Bu isteğe bağlıdır ve .xml dosyasıyla aynı konumda bulunabilir, ancak genellikle sonuçlarını sağlamak için HTTP üzerinden widget spesifikasyonu tarafından çağrılır.
Şunun için geliştirilen’ler: Siteler, bir siteyi görüntüleyen tüm kullanıcılar tarafından kullanılabilir. Etkileşimlidirler ve ekip üyelerini çekmeye odaklanırlar. sunumdan ziyade dinamik içeriğe yer vermeli ve sunumun içeriğini tamamlayacak şekilde tasarlanmıştır. girin.
Takvim aygıtı bu ayrım için iyi bir örnektir. Şuradaki kişiselleştirilmiş takvim widget'ı: büyük olasılıkla, giriş yapmış olan kullanıcının takvimini gösterirken, bir takvim ortak çalışanların konuma özel çeşitli takvimler arasından seçim yapmasına izin verebilir.
Google Sites araçları, harici kaynaklardan gelen birden çok bilgiyi sunmanıza olanak tanır (ör. ayrı ancak alakalı performans kontrol panellerindeki canlı diyagramlar) tek bir sayfada Doğrudan Sites'ta yayınlanan açıklayıcı metinler. Böylece, görüntü toplama sırasında görsel öğelerden tasarruf edebilirsiniz. ve aynı görünümde farklı bilgilere sahip olabilir. Ayrıca, Dinamik Arama Ağı reklamlarını, aksi halde Sites güvenlik kontrolleri tarafından engellenecek dinamik içeriğe sahip olabilir.
Uyarı: Eski
Gadget'lar API'sı Sites üzerinde çalışabilir, ancak resmi olarak desteklenmemektedir. Yerleşik ve feed tabanlı araçlar
desteklenmez. Bu nedenle Google, tüm Sites widget'larını
Geçerli cihazlarda.* API'ye gidin. Açıklama için bu gönderiye göz atın:
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html
Örnek aygıt
Diğer web içeriklerinden geçmek için iFrame sağlamaktan çok daha fazlasını sunan basit ancak popüler bir Include widget'ı aşağıda verilmiştir:
<?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 inceleyin.
Aygıtınızı barındırma
Aygıtınızın ne yaptığı fark etmeksizin, içerdiği dosyaların World Wide Web'de bulunması ve bunların bulunması gerekir kullanılır. Kimlik doğrulama olmadan HTTP üzerinden erişilebilen herhangi bir online konum öğreteceğim. Unutmayın, aygıtınızın seçilmesi için genel bir dizinde yayınlanması gerekir. Aksi takdirde, kullanıcılar URL'yi doğrudan ekleyerek URL'yi yerleştirmelidir.
Aygıt barındırma seçenekleriniz şunlardır:
- App Engine: Gadget'larınızın gerektirdiği tüm dosyaları depolayabilir. Biraz kurulum, yani projelerin oluşturulması ve daha sonra dosya yüklemeleri gerektirir. Ancak çok sayıda kullanıcıya uyum sağlayacak şekilde ölçeklenebilir. Aşağıdaki gibi bir app.yaml dosyası da dahil olmak üzere tüm Chromebook'larınızı depolamak için bir uygulama, statik dosyalar sunmak için de başka bir uygulama oluşturabilirsiniz:
application: <your app name> version: 1 runtime: python api_version: 1 handlers: - url: /.* static_dir: static
Tüm widget dosyalarını statik dizine yerleştirirseniz, daha sonra yerel dizininizdeki dosyaları düzenleyebilir ve her değişiklik yaptığınızda App Engine'e dağıtabilirsiniz. /static/gadget.xml dosyanız varsa URL'si şu şekilde olacaktır: http://<uygulama-adınız>.appspot.com/static/gadget.xml
- Seçtiğiniz herhangi bir çevrimiçi konum - Tamamen sizin kontrolünüzdedir ancak aynı zamanda sorumluluğu da içerir. Sunucunuzdaki kapalı kalma süresi, widget'larınızın kullanıcılarının kesintiye uğramasına neden olabilir.
Aygıtınızı oluşturma
Gadget'lar yalnızca HTML ve (isteğe bağlı olarak) XML biçiminde sarmalanmış JavaScript, Flash veya Silverlight'tır. Cihaz Geliştirici Kılavuzu, kendi widget'larınızı oluşturmak için gereken tüm ayrıntıları sağlar. Buna ek olarak, OpenSocial şablonları araçta hızlı bir şekilde sosyal uygulamalar oluşturmak için kullanılabilir.
Burada, Google Sites için bir reklamveren oluşturmaya ilişkin üst düzey adımlar verilmiştir:
- Gadget'ınızın nerede barındırılacağına karar verin. Seçeneklerinizin açıklamaları için Öğenizi barındırma bölümüne bakın.
- İstediğiniz metin düzenleyiciyi kullanarak spesifikasyonunuz olarak işlev görecek yeni bir .xml dosyası oluşturun.
- İçerik türüne (HTML veya URL) karar verin ve .xml dosyasında aşağıdaki gibi bir içerik türü belirtin:
<Content type="html">
Bu, neredeyse her zaman HTML olacaktır. Bu durumda, tüm içeriğin doğrudan .xml dosyasında sağlandığı varsayılır. Ancak, içeriği ayrı bir dosyada sağlamak istiyorsanız URL içerik türünü kullanın. Farklılıklarının tam açıklaması için İçerik Türü Seçme bölümüne bakın. - Aygıt .xml dosyasında veya spesifikasyon tarafından çağrılan ayrı dosyalarda içerik oluşturun. Mevcut cihazları inceleme yöntemleri için Örnek widget'ları görüntüleme bölümüne bakın.
- Gadget'a ilişkin, 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 cihaz yazarının değiştirebileceği modül tercihlerini tanımlayın. Diğer ayrıntılar için Widget Tercihlerini Tanımlama bölümüne bakın.
- Gadget'ı test edin. Talimatlar için Öğenizi test etme bölümüne göz atın.
Aygıtınızı yerleştirme
Gadget'lar, Google Sites widget dizininden (iGoogle widget diziniyle senkronize edilir) seçilerek veya doğrudan URL'si eklenerek Google Sites sayfalarına gömülebilir.
Google Sites'a bir widget yerleştirmek için:
- Yeni aygıtı içerecek Google Sites sayfasına gidin.
- Düzenlemek için sayfayı açın.
- Ekle > Diğer gereçler'i tıklayın.
- Gadget'ı arayın, soldaki kategorilerden seçin veya URL ile URL ekle'yi tıklayıp URL'yi .xml dosyanızın URL'sine yapıştırın. Ardından Ekle'yi tıklayın.
. İpucu: Bu aynı "URL'ye göre ekle" yöntemi kullanıldığında, Google'dan ve çevrimiçi başka herhangi bir yerden widget'lar gömülebilir. - Gadget'ın boyutlarını belirtin, kullanılabilir ayarlar arasından seçim yapın ve Tamam'ı tıklayın. Aygıt eklendi .
- Sitede aygıtınızı görüntülemek ve test etmek için sayfayı kaydedin.
Aygıtınızı test etme
Aygıtınızı oluşturduktan sonra, kullanmadan önce tam olarak test etmeli ve başkalarının da denemesine izin vermelisiniz yapabilirsiniz. Bir veya daha fazla test Google Sites sitesi oluşturup Google Sites sitesine yerleştirerek düzenleyebilirsiniz. Ayrıntılı adımlar için Öğenizi yerleştirme bölümüne bakın. İlgili içeriği oluşturmak için kullanılan özellikleri ve görünümü, bilgisayarınızda bulunan somut olarak ortaya koyar. Dolayısıyla, widget'ınızdaki hataları ayıklamanın en iyi yolu, bunu bir gerçek Google Sites sitesi. Aygıtınızın her birinde doğru görünmesi için çeşitli Google Sites temaları arasında geçiş yapmayı deneyin.
Aygıtınızı test ederken kaçınılmaz olarak hataları keşfedeceksiniz ve gerekli düzeltmeleri yapmanız gerekiyor veya .xml dosyanıza ekleyin. veya XML'de ince ayar var. Aksi takdirde, yaptığınız değişiklikler sayfada gösterilmez. Google Sites'a bunu bildirmemesini söylemediğiniz sürece Gadget özellikleri önbelleğe alınır. Geliştirme sırasında önbelleği atlamak için, bunu (cihaz teknik özelliği .xml dosyasının URL'si değil) Google Sites sayfası URL'sinin sonuna ekleyin:
?nocache=1
Google Sites, widget'ların eklenmesi ve yapılandırılması için standart bir kullanıcı arayüzü sağlar. Gadget eklediğinizde bir önizleme gösterilir ve yapılandırılabilen tüm UserPref parametreleri gösterilir. Çeşitli yapılandırma değerlerini ve
test sitenize ekleyin. Aygıtınızın şurada beklendiği gibi çalıştığını doğrulayın:
olabilir. Test etmeniz gereken
Tanımladığınız herhangi bir UserPref, site yöneticisi tarafından doğru bir şekilde yapılandırılabilir.
Ardından, gerçekleştirilecek diğer testler için Öğenizi Yayınlama, Yayına Hazırlanma bölümüne bakın.
Gelişmiş kullanıcı yapılandırmasına izin verme
Tüm araçlar, cihaz özellik dosyasının UserPref bölümünden temel kullanıcı tercihlerini ayarlama olanağı sunabilir. Aşağıdaki ekran görüntüsünde gösterildiği gibi, bu genellikle boyutları, kaydırma çubuklarını, kenarlıkları, başlıkları ve aygıta özgü ayarları etkiler:
Ancak birçok durum, widget'ların standart UserPref bileşenlerinin sunduğundan daha gelişmiş tercihlerden yararlandığı durumlardır. Tercihlerin genellikle özel iş mantığı, doğrulamalar veya seçiciler gibi özellikler içermesi gerekir. Aygıt UserPref bölümlerinden oluşturulan arayüz sınırlı sayıda veri türünü (dize, numaralandırma vb.) desteklediğinden URL'ler veya tarihler gibi girişlerin doğrulaması gerçekleştirilemez.
Ayrıca, görüntüleyen ve düzenleyicinin aynı olduğu IMAP gibi kapsayıcılarda, widget yazarları standart görünümün bir parçası olarak yapılandırmayı genişletebilir. Sites'ta görüntüleyen kişi her zaman düzenleyici değildir. Bu nedenle, widget'ın 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 yazarı değiştirebilir.
Sites'ta, UserPref tarafından oluşturulan temel aygıt tercihleri arayüzü, burada gösterilen ekran görüntüsündeki gibi birç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 sırasında veya düzenleme zamanında UserPref ayarlarının yerine gösterilir ve özel bir arayüzle kullanıcı tercihlerini ayarlamanıza olanak tanır. Ayrıca, harita koordinatları girmek yerine haritada bir konum seçmek gibi özel giriş öğeleriniz de olabilir.
Geliştiriciler, bu görünümde tercihleri kaydetmek için standart setprefs API'lerini kullanabilir. Daha ayrıntılı bilgi için Öğe XML Referansı ve Geliştirici Temel Bilgileri'nin Koruma Durumu bölümüne bakın. 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ış etiketine sahip UserPref bölümlerinin ardından gereç .xml özellik dosyalarında kurulur:
<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ümü içeren Google Sites'a özel diğer araç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
Google Sites widget'ları için en iyi uygulamaları takip etme
Kullanıcıların web'de iyi görünmek istediği siteler. Bu en iyi uygulamaları izleyerek sağlayan, Google Sites'ta kullanılan birçok temayla mükemmel bir şekilde uyum sağlar. Görüntüleyin Gadget'ların oluşturulmasıyla ilgili ayrıntılar için Araçlara Genel Bakış başlıklı makaleyi inceleyin. Programın bu bölümde Google Sites widget'larına özel yönergeler yer almaktadır.
- Gadget'ınız herkes tarafından görüntülenebileceğinden, widget özelliklerine veya başlıklarına hassas bilgiler eklemeyin. Örneğin, dahili proje adlarını dahil etmeyin.
- Aygıtınızın görünürlüğünü en aza indirmek için söz konusu öğeyi Google widget dizinine veya başka bir genel liste hizmetine göndermeyin. Bunun yerine, tüm kullanıcıların içeriği yalnızca URL ile eklemelerini sağlayın. Ayrıca, yalnızca başka bir dosyayı içeriği için çağıran (tüm içerikleri barındıran tipik HTML türü yerine) URL türünde bir widget oluşturabilirsiniz. Bu geçiş seçeneğinde, yalnızca ikinci dosyanın URL'si gösterilir. HTML ve URL'ler arasındaki farklılıkları görmek için Geliştirici Temelleri'nin İçerik Türü Seçme bölümüne ve aygıtınızı maskelemenin diğer yollarını öğrenmek için Öğelerinizi Kendi Gadget'larınızı Yazmanın Herkese Açık bölümüne bakın.
- En önemlisi, aygıtınızı farklı sitelerde test edin. Aygıtınızın çok çeşitli şablonlarla uyumlu olmasını sağlamak için sitenin arka plan rengini, metin rengini ve yazı tipini değiştirin.