Google-এ, গ্যাজেট হল HTML এবং জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন যা Sites সহ ওয়েব পেজ এবং অন্যান্য অ্যাপে এম্বেড করা যেতে পারে। এইসব গ্যাজেট আপনার সাইটে এক্সটার্নাল ও ডায়নামিক কন্টেন্ট যোগ করার সুবিধা দেয়, যেমন মিনি অ্যাপ্লিকেশন ও ডেটাবেস-চালিত তালিকা, যা টেক্সট ও ছবির সাথে যুক্ত থাকে এবং ব্যবহারকারীর জন্য বাধাহীন অভিজ্ঞতা প্রদান করে।
Sites-এর প্রতিটি পৃষ্ঠা সম্ভাব্য গ্যাজেট কন্টেনার। এছাড়াও, Sites-এ একটি Data API আছে যা গ্যাজেটের সাথে একসাথে ব্যবহার করে শক্তিশালী অ্যাপ্লিকেশন তৈরি করা যেতে পারে। এর অর্থ হল, একজন গ্যাজেট ডেভেলপার হিসেবে আপনি অন্যান্য ওয়েব ডেভেলপার ও তাদের দর্শকদের জন্য আকর্ষণীয় টুল তৈরি করতে ক্লাসিক Sites API ব্যবহার করতে পারবেন, সেইসাথে নিজের ব্যবহারের জন্যও তৈরি করতে পারবেন।
আপনি Sites-এর জন্য কোনও গ্যাজেট তৈরি করলে, এটি লক্ষ লক্ষ অ্যাক্টিভ ব্যবহারকারীর জন্য উপলভ্য হয়ে যায়। আমাদের কাছে আপনার গ্যাজেট জমা দিন এবং এটি এমন জায়গায় দেখানো হবে যেখানে ব্যবহারকারীরা সহজেই আপনার গ্যাজেট ব্রাউজ, কনফিগার করতে এবং তাদের সাইটে যোগ করতে পারবেন।
সুতরাং, এখন আপনি জানেন যে {sites_name_short} হল আপনার গ্যাজেটের জন্য একটি দুর্দান্ত ডিস্ট্রিবিউশন প্ল্যাটফর্ম, তাহলে আপনি কীসের জন্য অপেক্ষা করছেন? এখনই Sites-এর জন্য গ্যাজেট তৈরি করা শুরু করুন!
সাইট গ্য়াজেট এক নজরে
সাধারণভাবে, গ্যাজেট হল ছোট ছোট ইউটিলিটি যা ওয়েব পেজে এক্সটার্নাল তথ্য জেনারেট বা পুল করে। সহজভাবে বলতে গেলে, গ্যাজেট হল একটি ছোট .xml ফাইল যা একাধিক ওয়েবপেজে একসাথে উপলভ্য করার ক্ষমতা সহ তথ্য পুনরুদ্ধার করে। Sites-এ, গ্যাজেট অন্তর্ভুক্ত করা হলে সেটি একটি iframe-এ দেখানো হয় যা এই এক্সটার্নাল তথ্যের জন্য একটি কন্ড্যুইট হিসেবে কাজ করে। কিছু গ্যাজেট এর থেকে বেশি কিছু নয় অর্থাৎ, অন্য কোনও ওয়েবসাইট থেকে তথ্য পাস করা iframe।
আরও উন্নত গ্যাজেট ডায়নামিক কন্টেন্ট সংগ্রহ করে এবং আপনার Sites পৃষ্ঠায় ইন্ট্যার্যাক্টিভ অ্যাপ্লিকেশন প্রদান করে। গ্যাজেটের উদাহরণ দেখুন।
গ্যাজেটে নিম্নলিখিত কম্পোনেন্ট থাকে:
- গ্যাজেট স্পেক ফাইল - একটি .xml ফাইল যা HTML এবং JavaScript ফাংশনকে র্যাপ করে।
- কন্টেনার পৃষ্ঠা - যে ওয়েবপেজে গ্যাজেট যোগ করা হয়েছে, এই ক্ষেত্রে এটি হল Google সাইট।
- এক্সটার্নাল ডেটা সোর্স - এটি ঐচ্ছিক এবং .xml ফাইলের মতো একই লোকেশনে থাকতে পারে, তবে প্রায়শই HTTP-এর মাধ্যমে গ্যাজেট স্পেক দ্বারা এর ফলাফল প্রদান করার জন্য কল করা হয়।
সাইটের জন্য তৈরি করা গ্যাজেট সাইটের সব দর্শক ব্যবহার করতে পারেন। এগুলি সাধারণত ইন্ট্যার্যাক্টিভ হয়, প্রেজেন্টেশনের পরিবর্তে ডায়নামিক কন্টেন্ট দেখানোর উপর ফোকাস করে এবং সাইটের কন্টেন্টকে আরও আকর্ষণীয় করে তোলার জন্য ডিজাইন করা হয়।
ক্যালেন্ডার গ্যাজেট হল এই পার্থক্যের একটি ভাল উদাহরণ। কোনও কাস্টমাইজ করা ক্যালেন্ডার গ্যাজেট সাধারণত লগ-ইন করা ব্যবহারকারীর ক্যালেন্ডার ডিফল্ট হিসেবে দেখায়, তবে Sites-এ থাকা ক্যালেন্ডার গ্যাজেট হয়ত কোলাবরেটরদের বিভিন্ন লোকেশন-নির্দিষ্ট ক্যালেন্ডার থেকে বেছে নেওয়ার অনুমতি দেয়।
Sites গ্যাজেট আপনাকে এক্সটার্নাল সোর্স থেকে একাধিক তথ্য (যেমন আলাদা কিন্তু সম্পর্কিত পারফর্ম্যান্স ড্যাশবোর্ড থেকে লাইভ ডায়াগ্রাম) একটি পৃষ্ঠায় Sites-এ সরাসরি প্রকাশিত ব্যাখ্যা সহ টেক্সট সহ দেখাতে দেয়। একই ভিউতে একই বিষয়ে আলাদা আলাদা তথ্য সংগ্রহ করার সময় এটি ভিজ্যুয়াল রিয়েল এস্টেট সেভ করে। এছাড়াও, Sites-এর নিরাপত্তা যাচাইয়ের কারণে ব্লক করা হতে পারে এমন ডায়নামিক কন্টেন্ট গ্যাজেট আপনাকে যোগ করতে দেয়।
সতর্কতা: লেগ্যাসি
গ্যাজেট API দিয়ে তৈরি গ্যাজেট Sites-এ কাজ করতে পারে, তবে সেগুলি অফিসিয়ালি কাজ করে না। একইভাবে, বিল্ট-ইন ও ফিড-ভিত্তিক গ্যাজেট
কাজ করে না। তাই, Google আপনাকে বর্তমান gadgets.*
ব্যবহার করে সব Sites গ্যাজেট তৈরি করার জন্য সাজেস্ট করে। 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-এর মাধ্যমে অ্যাক্সেস করা যায় এমন যেকোনও অনলাইন লোকেশন হলেই চলবে। শুধু মনে রাখবেন, বেছে নেওয়ার জন্য আপনার গ্য়াজেটকে সর্বজনীন ডিরেক্টরিতে প্রকাশ করতে হবে। অন্যথায়, ব্যবহারকারীকে সরাসরি URL যোগ করে এটি এম্বেড করতে হবে।
আপনার গ্যাজেট হোস্টিং বিকল্পগুলি এখানে দেওয়া হল:
- App Engine - আপনার গ্যাজেটের প্রয়োজনীয় সব ফাইল স্টোর করতে পারে। কিছু সেট-আপ করতে হয়, যেমন প্রজেক্ট তৈরি করা এবং ফাইল আপলোড করা। তবে, এটি সহজেই বিপুল সংখ্যক ব্যবহারকারীর জন্য স্কেল করা যাবে। আপনি নিজের সব গ্য়াজেট স্টোর করার জন্য একটি অ্যাপ্লিকেশন এবং অ্যাপ.yaml ফাইলের মতো স্ট্যাটিক ফাইল পরিবেশন করার জন্য আরেকটি অ্যাপ্লিকেশন তৈরি করতে পারেন:
application: <your app name> version: 1 runtime: python api_version: 1 handlers: - url: /.* static_dir: staticআপনি যদি স্ট্যাটিক ডিরেক্টরিতে সমস্ত গ্যাজেট ফাইল রাখেন, তাহলে আপনি নিজের স্থানীয় ডিরেক্টরিতে ফাইলগুলি এডিট করতে পারেন এবং প্রতিবার পরিবর্তন করার সময় App Engine-এ ডেপ্লয় করতে পারেন। আপনার কাছে /static/gadget.xml ফাইল থাকলে, এর URL হবে: http://<your-app-name>.appspot.com/static/gadget.xml
- আপনার বেছে নেওয়া যেকোনও অনলাইন লোকেশন - সম্পূর্ণভাবে আপনার নিয়ন্ত্রণে থাকে, তবে এর সম্পূর্ণ দায়িত্বও আপনার। আপনার সার্ভার ডাউন হয়ে গেলে, আপনার গ্যাজেট ব্যবহারকারীদের জন্য পরিষেবা বন্ধ হয়ে যেতে পারে।
আপনার গ্যাজেট তৈরি করা
গ্যাজেট হল XML-এ মোড়ানো HTML এবং (ঐচ্ছিকভাবে) JavaScript, Flash বা Silverlight। গ্যাজেট ডেভেলপার গাইড থেকে নিজের গ্যাজেট তৈরি করার জন্য প্রয়োজনীয় সব বিবরণ পাবেন। এছাড়াও, গ্যাজেটে দ্রুত সোশ্যাল অ্যাপ্লিকেশন তৈরি করতে OpenSocial টেমপ্লেট ব্যবহার করা যেতে পারে।
Sites-এর জন্য গ্যাজেট তৈরি করার হাই-লেভেল ধাপগুলি এখানে দেওয়া হল:
- আপনার গ্যাজেট কোথায় হোস্ট করা হবে তা ঠিক করুন। আপনার বিকল্পের বিবরণ পেতে আপনার গ্যাজেট হোস্টিং বিভাগ দেখুন।
- আপনার পছন্দের টেক্সট এডিটর ব্যবহার করে একটি নতুন .xml ফাইল তৈরি করুন যা আপনার স্পেসিফিকেশন হিসেবে কাজ করবে।
- কন্টেন্টের ধরন, HTML বা URL, যেকোনও একটি ঠিক করুন এবং গ্যাজেটের .xml ফাইলের মধ্যে এটি নির্দিষ্ট করুন, যেমন:
<Content type="html">
এটি প্রায় সবসময়ই HTML হবে, যা ধরে নেয় যে সমস্ত কন্টেন্ট সরাসরি .xml ফাইলে প্রদান করা হয়েছে। কিন্তু আপনি যদি আলাদা ফাইলে কন্টেন্ট সাপ্লাই করতে চান, তাহলে URL কন্টেন্ট টাইপ ব্যবহার করুন। দু'টির মধ্যে পার্থক্য সম্পর্কে সম্পূর্ণ বিবরণ পেতে কন্টেন্টের ধরন বেছে নেওয়া দেখুন। - গ্যাজেট .xml ফাইলে বা স্পেসিফিকেশন দ্বারা কল করা আলাদা ফাইলে কন্টেন্ট তৈরি করুন। আগে থেকে থাকা গ্যাজেট পরীক্ষা করার উপায় জানতে গ্যাজেটের উদাহরণ দেখা বিভাগ দেখুন।
- ব্যবহারকারীরা পরিবর্তন করতে পারেন এমন গ্যাজেটের প্রাথমিক পছন্দগুলি সংজ্ঞায়িত করুন। নির্দেশাবলীর জন্য ব্যবহারকারীর পছন্দ নির্ধারণ করা দেখুন। আরও উন্নত কনফিগারেশন প্রদান করতে, উন্নত ব্যবহারকারী কনফিগারেশনের অনুমতি দেওয়া বিভাগটি দেখুন।
- মডিউল সংক্রান্ত পছন্দ নির্ধারণ করুন যা শুধুমাত্র গ্য়াজেট লেখক পরিবর্তন করতে পারেন। অতিরিক্ত বিবরণের জন্য গ্যাজেট সংক্রান্ত পছন্দ নির্ধারণ করা দেখুন।
- গ্যাজেট পরীক্ষা করুন। নির্দেশাবলীর জন্য আপনার গ্যাজেট পরীক্ষা করা বিভাগটি দেখুন।
আপনার গ্যাজেট এম্বেড করা
Sites গ্যাজেট ডিরেক্টরি (যা iGoogle গ্যাজেট ডিরেক্টরির সাথে সিঙ্ক করা হয়) থেকে এটি বেছে নিয়ে অথবা সরাসরি এর URL যোগ করার মাধ্যমে Sites পৃষ্ঠায় গ্যাজেট এম্বেড করা যেতে পারে।
Sites-এ কোনও গ্যাজেট এম্বেড করতে:
- নতুন গ্যাজেট যে Sites পৃষ্ঠায় থাকবে সেখানে যান।
- এডিট করার জন্য পৃষ্ঠাটি খুলুন।
- 'যোগ করুন > আরও গ্যাজেট' বিকল্প বেছে নিন।
- গ্যাজেট সার্চ করুন, বাঁদিকে থাকা বিভাগ থেকে এটি বেছে নিন অথবা URL দিয়ে গ্যাজেট যোগ করুন বিকল্পে ক্লিক করে আপনার .xml ফাইলের URL পেস্ট করুন। তারপর যোগ করুন বিকল্পে ক্লিক করুন।
পরামর্শ: URL-এর মাধ্যমে গ্যাজেট যোগ করার এই একই পদ্ধতি iGoogle ও অনলাইন থেকে অন্য যেকোনও জায়গা থেকে গ্যাজেট এম্বেড করার জন্য ব্যবহার করা যেতে পারে। - গ্যাজেটের ডাইমেনশন নির্দিষ্ট করুন, উপলভ্য সেটিংস থেকে বেছে নিন এবং ঠিক আছে বিকল্পে ক্লিক করুন। আপনার পৃষ্ঠায় গ্যাজেট যোগ করা হয়েছে।
- সাইটে আপনার গ্যাজেট দেখতে ও পরীক্ষা করতে পৃষ্ঠাটি সেভ করুন।
আপনার গ্যাজেট পরীক্ষা করা
আপনার গ্যাজেট তৈরি করার পরে, এটি ব্যবহার করার আগে এবং অন্যদের এটি ব্যবহার করার অনুমতি দেওয়ার আগে আপনাকে এটি পুঙ্খানুপুঙ্খভাবে পরীক্ষা করে দেখতে হবে। এক বা একাধিক টেস্ট Google Sites তৈরি করে এবং আপনার গ্যাজেট এম্বেড করে ম্যানুয়ালি আপনার গ্যাজেট পরীক্ষা করুন। সুনির্দিষ্ট ধাপের জন্য আপনার গ্যাজেট এম্বেড করা বিভাগ দেখুন। গ্যাজেটের কার্যকারিতা ও চেহারা সেই সাইটের উপর নির্ভর করে যেখানে এটি থাকে। তাই, আপনার গ্যাজেট ডিবাগ করার সবচেয়ে ভালো উপায় হল, কোনও প্রকৃত Google সাইটের প্রসঙ্গে এটি পরীক্ষা করে দেখা। প্রতিটি থিমে আপনার গ্যাজেট সঠিকভাবে দেখা যাচ্ছে কিনা তা নিশ্চিত করতে বিভিন্ন Sites থিমের মধ্যে পরিবর্তন করে দেখুন।
আপনার গ্যাজেট পরীক্ষা করার সময়, আপনি অনিবার্যভাবে বাগ খুঁজে পাবেন এবং আপনার গ্যাজেটের .xml ফাইলে সংশোধন করতে হবে। XML পরিবর্তন করার সময় আপনাকে গ্যাজেট ক্যাশিং বন্ধ করে দিতে হবে। অন্যথায়, আপনার করা পরিবর্তন পৃষ্ঠায় দেখা যাবে না। আপনি Sites-কে না বলা পর্যন্ত গ্যাজেট স্পেসিফিকেশন ক্যাশে করা হয়। ডেভেলপমেন্টের সময় ক্যাশে বাইপাস করতে, গ্যাজেট থাকা সাইট পৃষ্ঠার URL-এর শেষে এটি যোগ করুন (এবং গ্যাজেট স্পেক .xml ফাইলের URL নয়):
?nocache=1
সাইট, গ্যাজেট যোগ করা ও কনফিগার করার জন্য একটি স্ট্যান্ডার্ড UI প্রদান করে। আপনি কোনও গ্যাজেট যোগ করলে, এটি একটি প্রিভিউ দেখাবে এবং কনফিগার করা যায় এমন যেকোনও UserPref প্যারামিটার দেখাবে। বিভিন্ন কনফিগারেশন ভ্যালু আপডেট করা এবং
আপনার টেস্ট সাইটে গ্যাজেট যোগ করা পরীক্ষা করে দেখুন। সাইটে আপনার গ্যাজেট প্রত্যাশা মতো কাজ করছে কিনা তা কনফার্ম করুন।
সাইট অ্যাডমিনিস্ট্রেটর আপনার সংজ্ঞায়িত যেকোনও UserPref সঠিকভাবে কনফিগার করতে পারেন কিনা তা আপনাকে পরীক্ষা করে দেখতে হবে।
তারপর, অন্যান্য পরীক্ষা চালানোর জন্য আপনার গ্যাজেট প্রকাশ করার জন্য প্রস্তুতি বিভাগ দেখুন।
উন্নত ব্যবহারকারী কনফিগারেশনের অনুমতি দেওয়া
সব গ্যাজেটেই ব্যবহারকারীর প্রাথমিক পছন্দ সেট করার সুবিধা থাকতে পারে, যা গ্যাজেট স্পেক ফাইলের UserPref বিভাগের মাধ্যমে করা হয়। এগুলি সাধারণত ডাইমেনশন, স্ক্রলবার, বর্ডার, শিরোনাম এবং গ্যাজেট-নির্দিষ্ট সেটিংসকে প্রভাবিত করে, যেমনটি এখানে স্ক্রিনশটে দেখানো হয়েছে:
তবে, এমন অনেক ক্ষেত্র আছে যেখানে স্ট্যান্ডার্ড UserPref কম্পোনেন্ট অফারের চেয়ে আরও উন্নত পছন্দ থেকে গ্যাজেট উপকৃত হয়। পছন্দের মধ্যে প্রায়শই কাস্টম বিজনেস লজিক, যাচাইকরণ বা পিকারের মতো ফিচার অন্তর্ভুক্ত করতে হয়। গ্যাজেট UserPref বিভাগ থেকে তৈরি ইন্টারফেস সীমিত সংখ্যক ডেটা টাইপ (স্ট্রিং, এনুম ইত্যাদি) সাপোর্ট করে, তাই URL বা তারিখের মতো ইনপুট ভ্যালিডেশন করা যায় না।
এছাড়াও, iGoogle-এর মতো কন্টেনারে যেখানে দর্শক ও এডিটর একই ব্যক্তি, সেখানে গ্যাজেট লেখকরা স্ট্যান্ডার্ড ভিউয়ের অংশ হিসেবে বর্ধিত কনফিগারেশন দেখতে পাবেন। Sites-এ, দর্শক সবসময় এডিটর হন না, তাই গ্যাজেট লেখক দেখার জন্য ব্যবহারকারীর কাছে আপডেট সংক্রান্ত পছন্দ অ্যাক্সেস করার সুবিধা আছে কিনা তা নিশ্চিত করতে পারেন না। Sites-এর মতো সোশ্যাল কন্টেনারে কোনও ব্যবহারকারীকে পছন্দমতো পরিবর্তন করার অনুমতি দেওয়া হয় না, শুধুমাত্র লেখককে দেওয়া হয়।
Sites-এ, UserPref-এর তৈরি করা প্রাথমিক গ্যাজেট সংক্রান্ত পছন্দ ইন্টারফেসের পরিবর্তে কনফিগারেশন ভিউ ব্যবহার করা যেতে পারে, যেখানে অনেক অতিরিক্ত পছন্দ ও ডেটার ধরন প্রদান করা যেতে পারে, যেমন এখানে দেখানো স্ক্রিনশটে দেখা যাচ্ছে:
ইনসার্ট বা এডিট করার সময় UserPref সেটিংসের পরিবর্তে কনফিগারেশন ভিউ দেখানো হয় এবং কাস্টম ইন্টারফেসের মাধ্যমে ব্যবহারকারীর পছন্দ সেট করার সুবিধা দেয়। এছাড়াও, আপনি কাস্টম ইনপুট এলিমেন্ট ব্যবহার করতে পারেন, যেমন, ম্যাপ কোঅর্ডিনেট লেখার পরিবর্তে ম্যাপে কোনও পজিশন বেছে নেওয়া।
এই ভিউতে পছন্দ সেভ করার জন্য ডেভেলপাররা স্ট্যান্ডার্ড setprefs API ব্যবহার করতে পারবেন। অতিরিক্ত বিবরণের জন্য গ্যাজেট 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 গ্যাজেটের জন্য পেশাদার পদ্ধতি অনুসরণ করা
ব্যবহারকারীরা চান যে তাদের সাইট ওয়েব দুনিয়ায় ভালো দেখাক। এইসব পেশাদার পদ্ধতি মেনে চলুন যাতে আপনার গ্যাজেট Sites-এ ব্যবহৃত বিভিন্ন থিমের সাথে নির্বিঘ্নে মিশে যায়। গ্যাজেট তৈরি করার ব্যাপারে আরও জানতে গ্যাজেট ওভারভিউ দেখুন। এই বিভাগের বাকি অংশে Sites গ্যাজেট সম্পর্কিত নির্দেশিকা দেওয়া আছে।
- গ্যাজেট স্পেসিফিকেশন বা শিরোনামে সংবেদনশীল তথ্য দেবেন না, কারণ আপনার গ্যাজেট সবাই দেখতে পাবেন। যেমন, ইন্টার্নাল প্রোজেক্টের নাম অন্তর্ভুক্ত করবেন না।
- আপনার গ্যাজেটের দৃশ্যমানতা কমিয়ে আনার জন্য, এটি iGoogle গ্যাজেট ডিরেক্টরি বা অন্য কোনও সর্বজনীন তালিকা পরিষেবাতে জমা দেবেন না। পরিবর্তে, সব ব্যবহারকারীকে শুধুমাত্র URL যোগ করতে বলুন। এছাড়াও, আপনি URL-এর ধরন অনুযায়ী গ্যাজেট তৈরি করতে পারেন (সাধারণ HTML ধরনের পরিবর্তে, যাতে সব কন্টেন্ট থাকে) যা শুধুমাত্র কন্টেন্টের জন্য অন্য ফাইলকে কল করে। এই পাস-থ্রু বিকল্পের মাধ্যমে, শুধুমাত্র দ্বিতীয় ফাইলের URL প্রকাশ করা হয়। HTML ও URL গ্যাজেটের মধ্যে পার্থক্য জানতে ডেভেলপার ফান্ডামেন্টাল থেকে কন্টেন্টের ধরন বেছে নেওয়া বিভাগ এবং আপনার গ্যাজেট মাস্ক করার অন্যান্য উপায় জানতে আপনার নিজস্ব গ্যাজেট লেখা থেকে গ্যাজেট হল পাবলিক বিভাগ দেখুন।
- সবচেয়ে গুরুত্বপূর্ণ হল, বিভিন্ন সাইটে আপনার গ্যাজেট পরীক্ষা করে দেখুন। আপনার গ্যাজেট যাতে বিভিন্ন ধরনের টেমপ্লেটের সাথে মানানসই হয়, তা নিশ্চিত করতে সাইটের ব্যাকগ্রাউন্ডের রঙ, টেক্সটের রঙ ও ফন্ট ফেস পরিবর্তন করুন।