
ב-Google, גאדג'טים הם אפליקציות HTML ו-JavaScript שאפשר להטמיע בדפי אינטרנט ובאפליקציות אחרות, כולל באתרים. הגאדג'טים האלה מאפשרים לכם לכלול באתר תוכן חיצוני ודינמי, כמו אפליקציות בגודל מיני ומידע שמבוסס על מסדי נתונים, בשילוב עם טקסט ותמונות, כדי לספק למשתמשים חוויית שימוש חלקה.
כל דף ב-Google Sites הוא מאגר פוטנציאלי של גאדג'טים. בנוסף, ב-Sites יש Data API שאפשר להשתמש בו בשילוב עם גאדג'טים כדי ליצור אפליקציות חזקות. כלומר, מפתחי גאדג'טים יכולים להשתמש ב-Sites API הקלאסי כדי ליצור כלים מרתקים למפתחי אתרים אחרים ולקהלים שלהם, וגם לשימוש שלהם.
כשאתם יוצרים גאדג'ט ל-Sites, הוא הופך לזמין למיליוני משתמשים פעילים. פשוט שולחים לנו את הגאדג'ט, והוא יופיע במקום שבו המשתמשים יוכלו לעיין בו בקלות, להגדיר אותו ולהוסיף אותו לאתרים שלהם.
עכשיו ברור לך ש-{sites_name_short} היא פלטפורמת הפצה מצוינת לגאדג'ט שלך, אז למה אתם מחכים? מתחילים עכשיו ליצור גאדג'טים ב-Sites
סקירה כללית על הגאדג'ט 'אתרים'
באופן כללי, גאדג'טים הם כלי עזר קטנים שיוצרים או שולפים מידע חיצוני לדפי אינטרנט. בצורתו הפשוטה ביותר, גאדג'ט הוא קובץ xml .קטן שמאחזר מידע ומאפשר לו להפוך אותו לזמין במספר דפי אינטרנט בבת אחת. ב-Sites, הוספת גאדג'ט יוצרת iframe שמשמש כצינור להעברת המידע החיצוני הזה. חלק מהגאדג'טים הם לא יותר מ-iframes שמעבירים מידע מאתר אינטרנט אחר.
גאדג'טים מתקדמים יותר אוספים תוכן דינמי ומאפשרים להציג אפליקציות אינטראקטיביות בדפי האתרים שלכם. ראו גאדג'ט לדוגמה.
הגאדג'טים מורכבים מהרכיבים הבאים:
- קובץ מפרט של גאדג'ט – קובץ XML שמכיל פונקציות HTML ו-JavaScript.
- דף המכיל – דף האינטרנט שבו מוטמע הגאדג'ט, במקרה הזה אתר Google.
- מקור נתונים חיצוני – הפרמטר הזה הוא אופציונלי, והוא יכול להיות באותו מיקום שבו נמצא קובץ ה-.xml, אבל לרוב הוא נקרא על ידי מפרט הגאדג'ט דרך HTTP כדי לספק את התוצאות שלו.
כל הצופים באתר יכולים להשתמש בגאדג'טים שנוצרו ב-Google Sites. הן בדרך כלל אינטראקטיביות, מתמקדות בהצגת תוכן דינמי ולא בפרזנטציה, ונועדו להשלים את התוכן של האתר.
ניוזלטר של יומן הוא דוגמה טובה להבדל הזה. סביר להניח שגאדג'ט יומן מותאם אישית יציג כברירת מחדל את היומן של המשתמש המחובר, ואילו גאדג'ט יומן ב-Google Sites עשוי לאפשר לשותפי עריכה לבחור מתוך מגוון יומנים ספציפיים למיקום.
גאדג'טים של Sites מאפשרים להציג כמה קטעי מידע ממקורות חיצוניים (למשל, תרשימים בזמן אמת ממרכזי בקרה נפרדים אך קשורים של ביצועים) בדף אחד, יחד עם טקסט הסבר שפורסם ישירות ב-Sites. כך אפשר לחסוך מקום במסך ולקבץ מידע שונה באותו נושא באותה תצוגה. גאדג'טים מאפשרים לכם גם לכלול תוכן דינמי, שאחרת לא ניתן יהיה להציג בגלל בדיקות האבטחה של Sites.
אזהרה: גאדג'טים שנוצרו באמצעות ה-API הקודם של גאדג'טים עשויים לפעול ב-Sites, אבל הם לא נתמכים באופן רשמי. אין תמיכה דומה בגאדג'טים מובנים ומבוססי-פיד. לכן, Google ממליצה ליצור את כל הגאדג'טים של Sites באמצעות 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 בלי אימות יתאים. חשוב לזכור: כדי שהגאדג'ט ייכלל בבחירה, צריך לפרסם אותו במאגר ציבורי. אחרת, המשתמשים יצטרכו להטמיע אותו על ידי הוספת כתובת ה-URL שלו ישירות.
אלה אפשרויות אירוח הגאדג'טים שלכם:
- App Engine – יכול לאחסן את כל הקבצים הנדרשים לגאדג'טים. נדרש תהליך הגדרה מסוים, כלומר יצירת פרויקטים והעלאות של קבצים לאחר מכן. אבל הוא יתאים בקלות למספר גדול של משתמשים. ניתן ליצור אפליקציה לאחסון כל הגאדג'טים שלכם ואפליקציה נוספת כדי להציג קבצים סטטיים, כולל קובץ app.yaml שנראה כמו:
application: <your app name> version: 1 runtime: python api_version: 1 handlers: - url: /.* static_dir: static
אם תשמרו את כל קובצי הגאדג'טים בספרייה הסטטית, תוכלו לערוך את הקבצים בספרייה המקומית ולפרוס אותם ב-App Engine בכל פעם שתבצעו שינויים. אם יש לך קובץ /static/engine.xml, כתובת ה-URL שלו תהיה: http://<your-app-name>.appspot.com/static/engine.xml
- כל מיקום באינטרנט לבחירתך – בשליטתך המלאה וגם האחריות המלאה שלך. זמן השבתה בשרת עלול לגרום להפסקה זמנית בשירות למשתמשים בגאדג'טים שלכם.
פיתוח הגאדג'ט
גאדג'טים הם רק HTML ו-JavaScript, Flash או Silverlight (אופציונלי) עטופים ב-XML. המדריך למפתחי גאדג'טים מספק את כל הפרטים הנחוצים לבניית גאדג'טים משלכם. בנוסף, אפשר להשתמש בתבניות של OpenSocial כדי ליצור במהירות אפליקציות חברתיות בגאדג'טים.
אלו השלבים הכלליים לבניית גאדג'ט עבור Google Sites:
- מחליטים איפה יתארח הגאדג'ט. בקטע אירוח הגאדג'ט מפורטות התיאורים של האפשרויות.
- יוצרים קובץ xml .חדש שישמש כמפרט שלכם באמצעות כלי לעריכת טקסט שתבחרו.
- בוחרים את סוג התוכן, HTML או כתובת URL, ומציינים אותו בקובץ ה-.xml של הגאדג'ט, כך:
<Content type="html">
סוג התוכן יהיה כמעט תמיד HTML, מתוך הנחה שכל התוכן מסופק ישירות בקובץ ה-.xml. עם זאת, אם אתם מתכוונים לספק את התוכן בקובץ נפרד, עליכם להשתמש בסוג התוכן של כתובת ה-URL. לתיאור מלא של ההבדלים בין סוגי התוכן השונים, אפשר לעיין במאמר בחירת סוג התוכן. - יוצרים תוכן בקובץ ה-XML של הגאדג'ט או בקבצים נפרדים שנקראים על ידי המפרט. בקטע הצגת דוגמאות לגאדג'טים מפורטות דרכים לבדוק גאדג'טים קיימים.
- הגדרת העדפות בסיסיות לגאדג'ט שהמשתמשים יכולים לשנות. להוראות, ראו הגדרת העדפות משתמש. כדי להגדיר הגדרות מתקדמות יותר, אפשר לעיין בקטע מתן הרשאה להגדרות מתקדמות של משתמשים.
- הגדרת העדפות של מודולים שרק מחבר הגאדג'ט יכול לשנות. פרטים נוספים זמינים במאמר הגדרת ההעדפות של הגאדג'ט.
- בודקים את הגאדג'ט. הוראות מופיעות בקטע בדיקת הגאדג'ט.
הטמעת הגאדג'ט
אפשר להטמיע גאדג'טים בדפי Sites על ידי בחירה שלהם מתוך ספריית הגאדג'טים של Sites (שסונכרנת עם ספריית הגאדג'טים של iGoogle) או על ידי הכללת כתובת ה-URL שלהם ישירות.
כדי להטמיע גאדג'ט ב-Google Sites:
- עוברים לדף האתרים שבו יופיע הכלי החדש.
- פותחים את הדף לצורך עריכה.
- בוחרים באפשרות 'הוספה' > 'עוד גאדג'טים'.
- מחפשים את הגאדג'ט, בוחרים אותו מהקטגוריות שבצד ימין או לוחצים על הוספת גאדג'ט לפי כתובת אתר ומדביקים את כתובת ה-URL בקובץ ה- .xml שלכם. אחר כך לוחצים על הוספה.
טיפ: אפשר להשתמש באותה שיטה להוספת גאדג'טים לפי כתובת URL כדי להטמיע גאדג'טים מ-iGoogle ומכל מקום אחר באינטרנט. - מציינים את מידות הגאדג'ט, בוחרים מתוך ההגדרות הזמינות ולוחצים על אישור. הגאדג'ט יתווסף לדף שלך.
- שומרים את הדף כדי להציג ולבדוק את הגאדג'ט באתר.
בדיקת הגאדג'ט
אחרי שתיצרו את הגאדג'ט, כדאי לבדוק אותו היטב לפני שתשתמשו בו ותאפשרו לאחרים לעשות את אותו הדבר. כדי לבדוק את הגאדג'ט באופן ידני, יוצרים אתר אחד או יותר ב-Google Sites לצורך בדיקה ומטמיעים את הגאדג'ט. הוראות מפורטות מופיעות בקטע הטמעת הגאדג'ט שלך. הפונקציונליות והמראה של הגאדג'ט תלויים באתר שבו הוא מופיע. לכן, הדרך הטובה ביותר לנפות באגים בגאדג'ט היא לבדוק אותו בהקשר של אתר Google בפועל. כדאי לנסות לעבור בין נושאים שונים של Sites כדי לוודא שהגאדג'ט מופיע בצורה תקינה בכל אחד מהם.
במהלך הבדיקה של הגאדג'ט, סביר להניח שתגלו באגים ותצטרכו לבצע תיקונים בקובץ ה-.xml של הגאדג'ט. צריך להשבית את שמירת הגאדג'טים במטמון תוך כדי שינוי ה-XML. אחרת, השינויים לא יופיעו בדף. מפרטי הגאדג'טים נשמרים במטמון, אלא אם להורות ל-Google Sites לא לעשות זאת. כדי לעקוף את המטמון במהלך הפיתוח, יש להוסיף את הקוד הזה לסוף כתובת ה-URL של דף Google Sites שמכיל את הגאדג'ט (ולא לכתובת ה-URL של קובץ ה-xml .מפרט הגאדג'ט):
?nocache=1
Google Sites מספק ממשק משתמש סטנדרטי להוספה ולהגדרה של גאדג'טים. כשמוסיפים גאדג'ט, מוצגת תצוגה מקדימה שלו ומוצגים כל הפרמטרים של UserPref
שאפשר להגדיר. בודקים את עדכון ערכי ההגדרה השונים ומוסיפים את הגאדג'ט לאתר הבדיקה. מוודאים שהגאדג'ט פועל כצפוי באתר עצמו. כדאי לבדוק שאדמין האתר יכול להגדיר בצורה נכונה כל UserPref
שהגדרתם.
לאחר מכן, אפשר לעיין בקטע הכנה לפרסום במאמר 'פרסום הגאדג'ט' כדי לקבל מידע על בדיקות נוספות שאפשר לבצע.
מתן הרשאה להגדרות משתמש מתקדמות
כל הגאדג'טים עשויים להציע את היכולת להגדיר העדפות משתמש בסיסיות, באמצעות הקטע UserPref
בקובץ מפרט הגאדג'טים. בדרך כלל המאפיינים האלה משפיעים על מאפיינים, סרגלי גלילה, גבולות, כותרות והגדרות ספציפיות לגאדג'טים, כפי שמתואר בצילום המסך כאן:
עם זאת, יש מקרים רבים שבהם גאדג'טים יכולים ליהנות מהעדפות מתקדמות יותר מאשר הרכיבים הרגילים של UserPref
. לרוב, ההעדפות צריכות לכלול תכונות כמו לוגיקה עסקית מותאמת אישית, אימותים או בוררים. הממשק שנוצר מהקטעים UserPref
של הגאדג'ט תומך במספר מוגבל של סוגי נתונים (מחרוזת, enum וכו'), ולכן אי אפשר לבצע אימות של קלט כמו כתובות URL או תאריכים.
בנוסף, במאגרים כמו iGoogle שבהם הצופה והעורך הם אותו משתמש, מחברי הגאדג'טים יכולים להרחיב את ההגדרות כחלק מהתצוגה הרגילה. ב-Google Sites, הצופה הוא לא תמיד העורך, ולכן מחבר הגאדג'ט לא יכול להבטיח שלמשתמש הצופה תהיה גישה לעדכון העדפות. בקונטיינרים חברתיים כמו Sites, אף משתמש לא יכול לשנות את ההעדפות, רק המחבר.
ב-Sites, אפשר להחליף את ממשק ההעדפות הבסיסי של הגאדג'טים שנוצר על ידי UserPref
בתצוגת הגדרות שבה אפשר לספק הרבה העדפות וסוגי נתונים נוספים, כמו בצילום המסך שמוצג כאן:
תצוגת ההגדרות מוצגת במקום ההגדרות של UserPref
בזמן ההוספה או העריכה, ומאפשרת להגדיר העדפות משתמש באמצעות ממשק מותאם אישית. אפשר גם להשתמש ברכיבי קלט מותאמים אישית, למשל כדי לבחור מיקום במפה במקום להזין קואורדינטות של מפה.
מפתחים יכולים להשתמש בממשקי ה-API הרגילים של setprefs כדי לשמור העדפות בתצוגה הזו. פרטים נוספים זמינים בחומר העזר בנושא XML של גאדג'טים ובקטע 'שמירה של מצב' במאמר 'היסודות למפתחים'. התצוגות האלה מאפשרות לאפליקציית הקונטיינר לספק פרטי הגדרה נוספים, והן נוצרות בקובצי המפרט של ה-gadget בפורמט .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>
ניתן למצוא את הדוגמה הזו וגאדג'טים אחרים שספציפיים ל-Google Sites עם תצוגות הגדרות כאן:
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
משתמשים רוצים שהאתרים שלהם ייראו טוב באינטרנט. כדאי לפעול לפי השיטות המומלצות הבאות כדי שהגאדג'ט שלך ישתלב בצורה חלקה עם העיצובים הרבים שנמצאים בשימוש ב-Google Sites. במאמר סקירה כללית על גאדג'טים מוסבר איך יוצרים גאדג'טים. שאר הסעיף מפרט הנחיות ספציפיות לגאדג'טים של Google Sites.
- אל תכללו מידע רגיש במפרטים או בשמות של הגאדג'טים, כי הגאדג'טים גלויים לכולם. לדוגמה, אין לכלול שמות של פרויקטים פנימיים.
- כדי לצמצם את החשיפה של הגאדג'ט, אל תשלחו אותו למאגר הגאדג'טים של iGoogle או לכל שירות אחר של רישום ציבורי. במקום זאת, צריך לבקש מכל המשתמשים לכלול אותה לפי כתובת URL בלבד. בנוסף, אפשר ליצור גאדג'ט מסוג כתובת URL (במקום סוג HTML טיפוסי שמכיל את כל התוכן) שמפעיל רק קובץ אחר כדי לקבל את התוכן שלו. באפשרות העברה הזו, רק כתובת ה-URL של הקובץ השני נחשפת. עיין בקטע בחירת סוג תוכן ביסודות למפתחים לעיון בהבדלים בין גאדג'טים של HTML לבין גאדג'טים של כתובות אתרים, וקטע גאדג'טים הם ציבוריים במאמר כתיבת גאדג'טים משלך לקבלת מידע על דרכים אחרות להסוות של הגאדג'ט.
- חשוב ביותר לבדוק את הגאדג'ט בכמה אתרים שונים. אפשר לשנות את צבע הרקע, צבע הטקסט וסוג הגופן של האתר כדי לוודא שהמכשיר יתמזג עם מגוון רחב של תבניות.