در Google، ابزارکها برنامههای HTML و جاوا اسکریپت هستند که میتوانند در صفحات وب و برنامههای دیگر، ازجمله «سایتها»، جاسازی شوند. این ابزارکها امکان افزودن محتوای خارجی و پویا را به سایتتان ارائه میدهند، مثل برنامههای کوچک و فهرستهای پایگاه دادهمحور، که با نوشتار و تصاویر ترکیب شدهاند تا تجربه کاربری یکپارچهای ارائه دهند.
هر صفحه «سایتسازها» میتواند یک محفظه بالقوه ابزارک باشد. علاوهبراین، Sites یک Data API ارائه میدهد که میتواند در ترکیب با ابزارکها برای ایجاد برنامههای قدرتمند استفاده شود. این یعنی بهعنوان توسعهدهنده ابزارک میتوانید از «میانای برنامهسازی کاربردی» کلاسیک «سایتها» برای ساختن ابزارهای جذاب برای توسعهدهندگان وب دیگر و مخاطبان آنها، و همچنین برای استفاده خودتان بهره ببرید.
وقتی ابزاری برای «سایتساز» میسازید، این ابزار برای میلیونها کاربر فعال دردسترس قرار میگیرد. کافی است ابزارهتان را برای ما ارسال کنید تا در جایی که کاربران بتوانند بهراحتی ابزارهتان را مرور، پیکربندی، و به «سایتهای» خود اضافه کنند نمایش داده شود.
اکنون میدانید که {sites_name_short} پلاتفرم توزیع عالی برای ابزارک شما است، پس منتظر چه هستید؟ همین حالا ساختن ابزارک برای «سایتها» را شروع کنید!
نمای کلی ابزارک «سایتها»
بهطور کلی، ابزارکها برنامههای کمکی کوچکی هستند که اطلاعات خارجی را در صفحات وب تولید یا جذب میکنند. در سادهترین شکل، ابزارک یک فایل .xml کوچک است که اطلاعات را با قابلیت دردسترس قرار دادن آن در چندین صفحه وب بهطور همزمان بازیابی میکند. در «سایتها»، افزودن ابزارک منجر به ایفریمی میشود که بهعنوان مجرای این اطلاعات خارجی عمل میکند. برخیاز ابزارکها چیزی بیشتر از این نیستند، iframeهایی که اطلاعات را از وبسایت دیگری منتقل میکنند.
ابزارهای پیشرفتهتر محتوای پویا را جمعآوری میکنند و برنامههای تعاملی را در صفحههای «سایتسازها» ارائه میدهند. ابزارک نمونه را ببینید.
ابزارکها از اجزای زیر تشکیل شدهاند:
- فایل مشخصات ابزارک - فایل .xml که توابع HTML و JavaScript را دربرمیگیرد.
- صفحه محتوا - صفحه وبی که ابزارک در آن درج شده است، در این مورد «سایت Google».
- منبع داده خارجی - این مورد اختیاری است و ممکن است در همان مکان فایل .xml قرار داشته باشد اما اغلب ازطریق HTTP توسط مشخصات ابزارک فراخوانی میشود تا نتایج خود را ارائه دهد.
ابزارههای ساختهشده برای سایتها ممکن است توسط همه بینندگان سایت استفاده شود. این واحدها معمولاً تعاملی هستند، بهجای ارائه، بر کشیدن محتوای پویا تمرکز دارند، و برای تکمیل محتوای سایت طراحی شدهاند.
ابزارک تقویم نمونه خوبی از این تمایز است. ابزارک تقویم شخصیسازیشده در بهاحتمال زیاد تقویم کاربر واردشده به سیستم را بهطور پیشفرض نشان میدهد، درحالیکه ابزارک تقویم در «سایتساز» ممکن است به همیاران اجازه دهد از میان تقویمهای مختلف مختص مکان انتخاب کنند.
ابزارهایک سایت به شما امکان میدهد چندین بخش از اطلاعات را از منابع خارجی (مثلاً نمودارهای زنده از داشبوردهای عملکرد متمایز اما مرتبط) در یک صفحه بههمراه نوشتار توضیحی که مستقیماً در «سایتها» منتشر شده است ارائه دهید. این کار باعث صرفهجویی در فضای دیداری میشود و درعینحال اطلاعات متفاوت درباره یک موضوع را در یک نما جمعآوری میکند. ابزارکها همچنین به شما امکان میدهند محتوای پویایی را که درغیراینصورت توسط بررسیهای امنیتی «سایتها» مسدود میشود اضافه کنید.
هشدار: ابزارهایی که با قدیمی
API ابزارهها ساخته شدهاند ممکن است در «سایتساز» کار کنند اما بهطور رسمی پشتیبانی نمیشوند. ابزارهای داخلی و مبتنی بر فید نیز به همین ترتیب پشتیبانی نمیشوند. بنابراین، Google توصیه میکند همه ابزارهایک «سایتها» را بااستفاده از
gadgets.* کنونی بسازید. API. برای توضیح، این پست را ببینید:
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html
ابزارک نمونه
در اینجا یک ابزارک گنجاندن ساده اما محبوب وجود دارد که کاری بیشتر از ارائه یک iframe برای عبور از محتوای وب دیگر انجام نمیدهد:
<?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>
شروع به کار: ابزارکها.* را ببینید. API برای شرح کامل برچسبهای ابزارک و محتوای موردانتظار مراجعه کنید.
میزبانی ابزارک
صرفنظر از اینکه ابزارک شما چه کاری انجام میدهد، فایلهای آن باید در «وب جهانگستر» قرار داشته باشند تا پیدا و استفاده شوند. هر مکان آنلاینی که ازطریق HTTP بدون اصالتسنجی قابلدسترس باشد کافی است. فقط بهیاد داشته باشید که ابزارک شما باید در یک فهرست عمومی منتشر شود تا انتخاب شود. درغیراینصورت، کاربران باید آن را با درج مستقیم نشانی وب آن جاسازی کنند.
گزینههای میزبانی ابزارک شما در اینجا آمده است:
- App Engine - قابلیت ذخیره کردن همه فایلهای موردنیاز ابزارکهای شما را دارد. به مقداری راهاندازی نیاز دارد، یعنی ایجاد پروژهها و بارگذاری فایلهای بعدی. اما بهراحتی برای تعداد زیادی کاربر مقیاسپذیر خواهد بود. میتوانید برنامهای برای ذخیره کردن همه ابزارکهایتان و برنامهای دیگر برای ارائه فایلهای ایستا، ازجمله فایل app.yaml شبیه به این، ایجاد کنید:
application: <your app name> version: 1 runtime: python api_version: 1 handlers: - url: /.* static_dir: staticاگر همه فایلهای ابزارک را در فهرست راهنمای ایستا قرار دهید، میتوانید فایلها را در فهرست راهنمای محلیتان ویرایش کنید و هر بار که تغییراتی ایجاد میکنید، در App Engine مستقر کنید. اگر فایل /static/gadget.xml دارید، نشانی وب آن این خواهد بود: http://<your-app-name>.appspot.com/static/gadget.xml
- هر مکان آنلاینی که انتخاب کنید - کاملاً تحت کنترل شما است اما مسئولیت کامل آن نیز با شما است. ازکارافتادگی سرور شما ممکن است منجر به قطعی برای کاربران ابزارکهایتان شود.
درحال ساختن ابزارک
ابزارکها فقط HTML و (اختیاری) جاوا اسکریپت، Flash یا Silverlight هستند که در XML پیچیده شدهاند. راهنمای توسعهدهنده ابزارک همه جزئیات لازم برای ساختن ابزارکهای خودتان را ارائه میدهد. علاوهبراین، از الگوهای OpenSocial میتوان برای ساخت سریع برنامههای اجتماعی در ابزارکها استفاده کرد.
در اینجا مراحل سطح بالا برای ساختن ابزارک برای «سایتساز» آمده است:
- تصمیم بگیرید ابزارک شما کجا میزبانی شود. برای شرح گزینههایتان، بخش میزبانی ابزارک را ببینید.
- بااستفاده از ویرایشگر نوشتار دلخواهتان، فایل xml .جدیدی بسازید که بهعنوان مشخصات شما عمل کند.
- نوع محتوا را، HTML یا نشانی وب، تعیین کنید و آن را در فایل .xml ابزارک مشخص کنید، مانند این:
<Content type="html">
این تقریباً همیشه HTML خواهد بود، که فرض میکند همه محتوا مستقیماً در فایل .xml ارائه میشود. اما اگر قصد دارید محتوا را در فایل جداگانهای ارائه دهید، از نوع محتوای نشانی وب استفاده کنید. برای شرح کامل تفاوتهای آنها، به انتخاب نوع محتوا مراجعه کنید. - محتوا را در فایل .xml ابزارک یا در فایلهای جداگانهای که توسط مشخصات فراخوانی میشوند ایجاد کنید. برای آشنایی با روشهای بررسی ابزارهای موجود، بخش مشاهده ابزارهای نمونه را ببینید.
- اولویتهای پایه را برای ابزارک تعریف کنید که کاربران بتوانند آنها را تغییر دهند. برای دستورالعملها، به تعریف اولویتهای کاربر مراجعه کنید. برای ارائه پیکربندی پیشرفتهتر، به بخش مجاز کردن پیکربندی پیشرفته کاربر مراجعه کنید.
- اولویتهای واحد را تعریف کنید که فقط نویسنده ابزارک میتواند آنها را تغییر دهد. برای جزئیات بیشتر، به تعریف اولویتهای ابزارک مراجعه کنید.
- ابزارک را آزمایش کنید. برای دستورالعملها، بخش آزمایش ابزارک را ببینید.
درحال جاسازی ابزارک
ابزارکها را میتوان در صفحات «سایتها» جاسازی کرد، یا با انتخاب آن از فهرست راهنمای ابزارک «سایتها» (که با فهرست راهنمای ابزارک iGoogle همگامسازی میشود) یا با افزودن مستقیم نشانی وب آن.
برای جاسازی ابزارک در «سایتساز»:
- به صفحه «سایتها» که حاوی ابزارک جدید خواهد بود بروید.
- صفحه را برای ویرایش باز کنید.
- «درج کردن > ابزارهای بیشتر» را انتخاب کنید.
- ابزارک را جستجو کنید، آن را از دستههای سمت راست انتخاب کنید، یا روی افزودن ابزارک با نشانی وب کلیک کنید و نشانی وب فایل .xml خود را جایگذاری کنید. سپس روی افزودن کلیک کنید.
نکته: از همین روش «افزودن ابزارک با نشانی وب» میتوان برای جاسازی ابزارکها از iGoogle و هر جای دیگری در فضای آنلاین استفاده کرد. - ابعاد ابزارک را مشخص کنید، از تنظیمات دردسترس انتخاب کنید، و روی تأیید کلیک کنید. ابزارک به صفحه شما اضافه میشود.
- صفحه را ذخیره کنید تا ابزارک را در سایت ببینید و آزمایش کنید.
درحال آزمایش ابزارک
پساز ساختن ابزارک، باید آن را بهطور کامل آزمایش کنید و سپس از آن استفاده کنید و به دیگران اجازه دهید همین کار را انجام دهند. با ایجاد یک یا چند «سایت Google» آزمایشی و جاسازی ابزارک، ابزارک را بهصورت دستی آزمایش کنید. برای مراحل دقیق، به بخش جاسازی ابزارک مراجعه کنید. عملکرد و ظاهر ابزارک شما به سایتی که آن را دربرمیگیرد بستگی دارد. بنابراین، بهترین راه برای اشکالزدایی ابزارک، آزمایش آن در زمینه یک «سایت Google» واقعی است. بین زمینههای مختلف «سایتساز» جابهجا شوید تا مطمئن شوید ابزارک شما در هریک بهدرستی نمایش داده میشود.
همزمان با آزمایش ابزارک، ناگزیر اشکالاتی را کشف خواهید کرد و باید فایل .xml ابزارک خود را اصلاح کنید. هنگام تغییر دادن XML باید حافظه نهان ابزارک را غیرفعال کنید. درغیراینصورت، تغییرات شما در صفحه نشان داده نخواهد شد. مشخصات ابزارک ذخیره میشود مگر اینکه به «سایتساز» بگویید این کار را نکند. برای دور زدن حافظه نهان درطول توسعه، این را به انتهای نشانی وب صفحه «سایتها» حاوی ابزارک اضافه کنید (و نه نشانی وب فایل .xml مشخصات ابزارک):
?nocache=1
«سایتها» واسط کاربر استانداردی برای افزودن و پیکربندی ابزارکها ارائه میدهد. وقتی ابزاری اضافه میکنید، پیشنمایشی از آن نمایش داده میشود و هر UserPref پارامتری که قابل پیکربندی باشد نشان داده میشود. بهروزرسانی مقادیر پیکربندی مختلف و
افزودن ابزارک به سایت آزمایشیتان را آزمایش کنید. تأیید کنید که ابزارک شما در خود سایت
همانطور که انتظار میرود کار میکند. باید آزمایش کنید که
هر UserPref که تعریف کردهاید بتواند بهدرستی توسط سرپرست سایت پیکربندی شود.
سپس برای انجام آزمایشهای دیگر، به بخش آمادهسازی برای انتشار در انتشار ابزارک مراجعه کنید.
پیکربندی پیشرفته کاربر مجاز است
همه ابزارکها ممکن است امکان تنظیم اولویتهای کاربر پایه را ارائه دهند که ازطریق بخش UserPref فایل مشخصات ابزارک انجام میشود. این تنظیمات معمولاً بر ابعاد، نوار پیمایش، حاشیهها، عنوانها، و تنظیمات ویژه ابزارک تأثیر میگذارند، همانطور که در نماگرفت زیر نشان داده شده است:

اما موارد زیادی وجود دارد که ابزارکها از اولویتهای پیشرفتهتر نسبتبه آنچه عناصر استاندارد UserPref ارائه میدهند بهره میبرند. اولویتها اغلب باید شامل ویژگیهایی مانند منطق کسبوکار سفارشی، اعتبارسنجیها، یا انتخابگرها باشند. میانای تولیدشده از بخشهای ابزارک UserPref از تعداد محدودی نوع داده (رشته، شمارشی، و غیره) پشتیبانی میکند، بنابراین اعتبارسنجی ورودیهایی مثل نشانیهای وب یا تاریخها نمیتواند انجام شود.
علاوهبراین، در محفظههایی مثل iGoogle که بیننده و ویرایشگر یکسان هستند، نویسندگان ابزارک میتوانند پیکربندی گستردهای را بهعنوان بخشی از نمای استاندارد ارائه دهند. در «سایتساز»، بیننده همیشه ویرایشگر نیست، بنابراین نویسنده ابزارک نمیتواند تضمین کند که کاربر بیننده به بهروزرسانی اولویتها دسترسی دارد. محتویهای اجتماعی مثل «سایتها» نمیتوانند به هیچ کاربری اجازه دهند اولویتها را تغییر دهد، فقط نویسنده میتواند این کار را انجام دهد.
در «سایتها»، رابط اولویتهای ابزارک پایه تولیدشده توسط UserPref میتواند با نمای پیکربندی جایگزین شود که در آن میتوان اولویتها و انواع دادههای اضافی زیادی را ارائه کرد، مانند نماگرفت نشاندادهشده در اینجا:

نمای پیکربندی بهجای تنظیمات UserPref در زمان درج یا زمان ویرایش نشان داده میشود و به شما امکان میدهد اولویتهای کاربر را با یک میانای سفارشی تنظیم کنید. و میتوانید عناصر ورودی سفارشی داشته باشید، مثلاً برای انتخاب موقعیت در نقشه بهجای وارد کردن مختصات نقشه.
توسعهدهندگان میتوانند از میاناهای برنامهسازی کاربردی استاندارد setprefs برای ذخیره کردن ترجیحات در این نما استفاده کنند. برای جزئیات بیشتر، مرجع XML ابزارکها و بخش ذخیره وضعیت «اصول توسعهدهندگان» را ببینید. این نماها به برنامه محتوی اجازه میدهد اطلاعات پیکربندی تکمیلی ارائه دهد و در فایلهای مشخصات .xml ابزارک پساز بخشهای UserPref با برچسب بازکننده مشابه زیر ایجاد میشوند:
<Content type="html" view="configuration" preferred_height="150">
برای مثال، ابزارک news.xml که نمای پیکربندی بالا را ارائه میدهد حاوی این بخش است:
<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>
این مثال و ابزارهایکهای ویژه «سایتها» با نماهای پیکربندی را میتوانید در اینجا پیدا کنید:
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 را ارائه میدهد.
- اطلاعات حساس را در مشخصات یا عنوانهای ابزارک قرار ندهید زیرا ابزارک شما برای عموم قابل مشاهده است. برای مثال، نامهای پروژه داخلی را اضافه نکنید.
- برای بهحداقل رساندن رؤیتپذیری ابزارک، آن را به فهرستگان ابزارک iGoogle یا هر سرویس فهرستگان عمومی دیگری ارسال نکنید. بهجای آن، از همه کاربران بخواهید آن را فقط با نشانی وب اضافه کنند. علاوهبراین، میتوانید ابزاری از نوع نشانی وب (بهجای نوع معمول HTML که حاوی همه محتوا است) ایجاد کنید که صرفاً فایل دیگری را برای محتوای خود فراخوانی میکند. با این گزینه عبور، فقط نشانی وب فایل دوم آشکار میشود. برای اطلاع از تفاوت بین ابزارهای HTML و نشانی وب و روشهای دیگر برای پوشاندن ابزارک، به بخش انتخاب نوع محتوا در اصول اولیه توسعهدهنده و بخش ابزارکها عمومی هستند در نوشتن ابزارهای خودتان مراجعه کنید.
- مهمتر از همه، ابزارک خود را در تعدادی از سایتهای مختلف آزمایش کنید. رنگ پسزمینه، رنگ نوشتار، و نوع قلم سایت را تغییر دهید تا مطمئن شوید ابزارک شما با طیف گستردهای از الگوها ترکیب میشود.