גאדג'טים ל-Google Sites

גאדג'טים של Google Sites

ב-Google, גאדג'טים הם אפליקציות HTML ו-JavaScript שאפשר להטמיע בדפי אינטרנט ובאפליקציות אחרות, כולל Google Sites. הגאדג'טים האלה מאפשרים לכלול תוכן חיצוני ודינמי באתר שלך, כמו אפליקציות מיניאטוריות ורשימות שמבוססות על מסד נתונים, המשולבים בטקסט ובתמונות כדי לספק חוויית משתמש חלקה.

כל דף ב-Google Sites הוא מאגר פוטנציאלי של גאדג'טים. בנוסף, Google Sites כולל Data API שאפשר להשתמש בו בשילוב עם גאדג'טים ליצירת אפליקציות מתקדמות. משמעות הדבר היא, שמפתחי גאדג'טים יכולים למנף את ה-API הקלאסי של Google Sites כדי לבנות כלים מעניינים עבור מפתחי אתרים אחרים והקהלים שלהם, וכן לשימוש אישי.

כשיוצרים גאדג'ט ל-Google Sites, הוא הופך לזמין למיליוני משתמשים פעילים. פשוט שלח לנו את הגאדג'ט שלך, והוא יופיע במקום שבו המשתמשים יכולים לעיין בקלות, להגדיר ולהוסיף את הגאדג'ט שלך ל-Sites.

אז עכשיו אתם יודעים ש-{sites_name_short} היא פלטפורמת הפצה מעולה לגאדג'ט שלכם, למה אתם מחכים? אפשר להתחיל כבר עכשיו ליצור גאדג'טים ב-Google Sites!

סקירה כללית של גאדג'ט Google Sites

באופן כללי, גאדג'טים הם כלי שירות קטנים שיוצרים או מושכים מידע חיצוני לדפי אינטרנט. בצורתו הפשוטה ביותר, גאדג'ט הוא קובץ xml .קטן שמאחזר מידע עם היכולת להפוך אותו לזמין בדפי אינטרנט מרובים בבת אחת. ב-Google Sites, הכללת גאדג'ט גורמת ל-iframe שמשמש כרשת של המידע החיצוני הזה. יש גאדג'טים שאינם מעבר לכך, מסגרות iframe שמעבירים מידע מאתר אחר.

גאדג'טים מתקדמים יותר אוספים תוכן דינמי ומספקים אפליקציות אינטראקטיביות בדפי Google Sites שלך. גאדג'ט לדוגמה

הגאדג'טים מכילים את הרכיבים הבאים:

  • קובץ מפרט של גאדג'טים - קובץ xml .שממיר פונקציות HTML ו-JavaScript.
  • דף מאגר תגים - דף האינטרנט שבו נוסף הגאדג'ט, במקרה זה, אתר באמצעות Google Sites.
  • מקור נתונים חיצוני - זהו שדה אופציונלי ועשוי להימצא באותו המיקום של קובץ ה-XML .עם זאת, בדרך כלל הוא נקרא על ידי מפרט הגאדג'ט ב-HTTP כדי לספק את תוצאותיו.

כל הצופים באתר יכולים להשתמש בגאדג'טים שנוצרו עבור Google Sites. הן נוטות להיות אינטראקטיביות, שמתמקדות במשיכה של תוכן דינמי במקום במצגת, ונועדו להשלים את תוכן האתר.

דוגמה טובה להבחנה זו היא גאדג'ט של יומן. סביר להניח שגאדג'ט יומן מותאם אישית יציג את היומן של המשתמש המחובר כברירת מחדל, ואילו גאדג'ט של יומן Google ב-Google Sites עשוי לאפשר לשותפי העריכה לבחור מתוך מגוון של יומנים ספציפיים למיקום.

גאדג'טים של Google Sites מאפשרים לך להציג בדף יחיד קטעי מידע מרובים ממקורות חיצוניים (למשל, תרשימים פעילים ממרכזי שליטה נפרדים הקשורים לביצועים) בדף אחד, לצד הסברים שמופיעים ישירות ב-Google Sites. הפעולה הזו שומרת שטח חזותי, ובמקביל אוספת מידע שונה לגבי אותו נושא באותה תצוגה. בגאדג'טים אפשר גם לכלול תוכן דינמי שבדיקות האבטחה של Google Sites היו מונעות מ-Google Sites.

אזהרה: גאדג'טים שנוצרו באמצעות ממשק ה-API של גאדג'טים מדור קודם עשויים לפעול ב-Google Sites, אבל הם לא נתמכים באופן רשמי. באופן דומה, אין תמיכה בגאדג'טים מובנים ומבוססי עדכונים. לכן, Google ממליצה ליצור את כל הגאדג'טים של 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 – יכולת לאחסן את כל הקבצים שנדרשים על ידי הגאדג'טים שלכם. היא דורשת הגדרה מסוימת, כלומר יצירת פרויקטים והעלאת קבצים לאחר מכן. עם זאת, הגודל יהיה זמין למספר גדול של משתמשים. אתם יכולים ליצור אפליקציה לשמירת כל הגאדג'טים שלכם ואפליקציה נוספת להצגת קבצים סטטיים, כולל קובץ app.yaml שדומה לקובץ 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 ו-JavaScript (אופציונלי) ו-JavaScript, Flash או Silverlight שארוזים ב-XML. המדריך למפתחי גאדג'טים מספק את כל הפרטים הדרושים לבניית גאדג'טים משלכם. בנוסף, ניתן להשתמש בתבניות OpenSocial כדי לבנות במהירות אפליקציות חברתיות בגאדג'טים.

הנה השלבים הכלליים לבניית גאדג'ט ל-Google Sites:

  1. מחליטים איפה יתארח הגאדג'ט שלכם. לתיאור האפשרויות, יש לעיין בקטע אירוח הגאדג'ט .
  2. יוצרים קובץ xml .חדש שיפעל לפי המפרט שלכם באמצעות עורך טקסט לבחירתכם.
  3. בוחרים את סוג התוכן (HTML או URL) ומציינים אותו בקובץ ה-XML של הגאדג'ט, באופן הבא:
    <Content type="html">
    כמעט תמיד יהיה תוכן HTML, בהנחה שכל התוכן מסופק ישירות בקובץ ה-XML. עם זאת, אם אתם מתכוונים לספק את התוכן בקובץ נפרד, השתמשו בסוג התוכן של כתובת ה-URL. במאמר בחירת סוג תוכן תוכלו למצוא תיאור מלא של ההבדלים ביניהם.
  4. צור תוכן בקובץ ה-XML של הגאדג'ט או בקבצים נפרדים שנקראים על ידי המפרט. עיין בקטע הצגת גאדג'טים לדוגמה לקבלת דרכים לבחינת גאדג'טים קיימים.
  5. הגדר העדפות בסיסיות עבור הגאדג'ט, שהמשתמשים יכולים לשנות. לקבלת הוראות, ראו הגדרת העדפות משתמש. כדי לספק תצורה מתקדמת יותר, ראה את הקטע מאפשר הגדרות אישיות מתקדמות למשתמש.
  6. הגדר העדפות מודול שרק מחבר הגאדג'ט יכול לשנות. לפרטים נוספים, ראה הגדרת העדפות גאדג'טים.
  7. בדוק את הגאדג'ט. לקבלת הוראות, עיין בקטע בדיקת הגאדג'ט.

הטמעת הגאדג'ט שלך

ניתן להטמיע גאדג'טים בדפי Google Sites על ידי בחירתם מספריית הגאדג'טים של Google Sites (המסונכרנת עם ספריית הגאדג'טים של iGoogle) או על ידי הכללת כתובת האתר שלה באופן ישיר.

כדי להטמיע גאדג'ט ב-Google Sites:

  1. עבור לדף 'אתרים' שיכיל את הגאדג'ט החדש.
  2. יש לפתוח את הדף כדי לערוך אותו.
  3. בחר הוסף > גאדג'טים נוספים.
  4. מחפשים את הגאדג'ט, בוחרים אותו מהקטגוריות שבצד ימין או לוחצים על הוספת גאדג'ט לפי כתובת אתר ומדביקים את כתובת ה-URL בקובץ ה-XML. לאחר מכן לוחצים על הוספה.
    טיפ: ניתן להשתמש באותה שיטת 'הוספת גאדג'ט לפי כתובת URL' כדי להטמיע גאדג'טים מ-iGoogle ומכל מקום אחר באינטרנט.
  5. מציינים את המידות של הגאדג'ט, בוחרים מתוך ההגדרות הזמינות ולוחצים על אישור. הגאדג'ט יתווסף לדף שלכם.
  6. שמור את הדף כדי להציג ולבדוק את הגאדג'ט שלך באתר.

בדיקת הגאדג'ט

לאחר בניית הגאדג'ט, יש לבדוק אותו לעומק לפני שמשתמשים בו ולאפשר לאחרים לעשות אותו. בדוק את הגאדג'ט שלך באופן ידני על ידי יצירת אתר אחד או יותר לבדיקה של Google Sites והטמעת הגאדג'ט שלך. לשלבים מדויקים, עיין בקטע הטמעת הגאדג'ט שלך. הפונקציונליות והמראה של הגאדג'ט תלויים באתר שמכיל אותו. לכן הדרך הטובה ביותר לנפות באגים היא לבדוק את הגאדג'ט שלך בהקשר של אתר אמיתי שנוצר באמצעות Google Sites. נסה להחליף בין עיצובים שונים של Google Sites כדי לוודא שהגאדג'ט שלך יופיע כראוי בכל עיצוב.

כאשר תבדוק את הגאדג'ט, באופן בלתי נמנע תגלו באגים ותצטרך לבצע תיקונים בקובץ ה-XML של הגאדג'ט. יש להשבית את שמירת הגאדג'טים במטמון תוך שינוי ה-XML. אחרת, השינויים שלך לא יופיעו בדף. מפרטי הגאדג'טים נשמרים במטמון, אלא אם אתם מגדירים ל-Google Sites שלא לעשות זאת. כדי לעקוף את המטמון במהלך הפיתוח, מוסיפים את הטקסט הזה בסוף כתובת האתר של דף Google Sites שמכיל את הגאדג'ט (ולא את כתובת ה-URL של קובץ ה-XML מסוג מפרט הגאדג'ט):

 ?nocache=1

Google Sites מספק ממשק משתמש סטנדרטי להוספה ולהגדרה של גאדג'טים. כשמוסיפים גאדג'ט, הוא יציג תצוגה מקדימה ויציג את כל הפרמטרים של UserPref שניתן להגדיר. כדאי לבדוק לעדכן ערכים שונים של הגדרות ולהוסיף את הגאדג'ט לאתר הבדיקה. צריך לוודא שהגאדג'ט פועל כצפוי באתר עצמו. כדאי לבדוק שכל UserPref שהגדרת יכול להיות מוגדר כראוי על ידי מנהל האתר.

לאחר מכן, עיינו בקטע הכנה לפרסום של פרסום הגאדג'ט שלך כדי לבצע בדיקות נוספות.

מתן אפשרות להגדרות מתקדמות של משתמשים

כל הגאדג'טים עשויים להציע אפשרות להגדיר העדפות משתמש בסיסיות, המבוצעות בקטע UserPref של קובץ מפרט הגאדג'ט. הגדרות אלה בדרך כלל משפיעים על מימדים, סרגלי גלילה, גבולות, כותרות והגדרות ספציפיות לגאדג'טים, כפי שמתואר בצילום המסך כאן:

העדפות משתמש של גאדג&#39;ט ב-Google Sites

עם זאת, יש מקרים רבים שבהם גאדג'טים נהנים מהעדפות מתקדמות יותר מאלה שמוצעים על ידי רכיבי UserPref הרגילים. העדפות בדרך כלל צריכות לכלול תכונות כמו לוגיקה עסקית מותאמת אישית, אימותים או בוררים. הממשק שנוצר מהקטעים UserPref של הגאדג'ט תומך במספר מוגבל של סוגי נתונים (מחרוזת, טיפוסים בני מנייה וכו'), ולכן לא ניתן לבצע אימות של קלט כמו כתובות URL או תאריכים.

יתרה מכך, בקונטיינרים כמו iGoogle שבהם המציג והעורך זהים, מחברי גאדג'טים יכולים להרחיב את התצורה כחלק מהתצוגה הרגילה. ב-Google Sites, הצופה הוא לא תמיד העורך, כך שמחבר הגאדג'ט לא יכול להבטיח שלמשתמש שמציג תהיה גישה לעדכון ההעדפות. גורמים מכילים של רשתות חברתיות, כמו Google Sites, לא יכולים לאפשר לאף משתמש לשנות את ההעדפות, אלא רק למחבר.

ב-Google Sites, ממשק ההעדפות הבסיסי שנוצר על ידי UserPref יכול להיות מוחלף בתצוגת תצורה, שבה ניתן לספק העדפות וסוגי נתונים רבים נוספים, כמו בצילום המסך שמוצג כאן:

תצוגת תצורת גאדג&#39;ט של Google Sites

תצוגת ההגדרות האישיות מוצגת במקום ההגדרות של UserPref בזמן ההוספה או בזמן העריכה, ומאפשרת לכם להגדיר את העדפות המשתמש באמצעות ממשק בהתאמה אישית. בנוסף, תוכלו להשתמש ברכיבי קלט מותאמים אישית, כמו בחירת מיקום במפה במקום הזנת קואורדינטות של מפה.

מפתחים יכולים להשתמש בממשקי ה-API הרגילים של 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>

כאן אפשר למצוא את הדוגמה הזו וגאדג'טים אחרים הספציפיים ל-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

שימוש בשיטות מומלצות לגאדג'טים של Google Sites

משתמשי אתרים רוצים להיראות טוב באינטרנט. כדאי ליישם את השיטות המומלצות הבאות כדי שהגאדג'ט ישתלב באופן חלק עם העיצובים הרבים שבשימוש ב-Google Sites. לפרטים על יצירת גאדג'טים, קראו את המאמר סקירה כללית על גאדג'טים. בהמשך הקטע הזה מוצגות הנחיות ספציפיות לגאדג'טים ב-Google Sites.

  • אל תציינו מידע רגיש במפרטים או בכותרות של גאדג'טים, מכיוון שהגאדג'ט שלכם ניתן לצפייה על ידי הציבור. לדוגמה: אין לכלול שמות של פרויקטים פנימיים.
  • כדי לצמצם את החשיפה לגאדג'ט שלך, אל תשלח אותו לספריית הגאדג'טים של iGoogle או לכל שירות רישום ציבורי אחר. במקום זאת, צריך לבקש מכל המשתמשים לכלול את המידע הזה רק לפי כתובת URL. בנוסף, ניתן ליצור גאדג'ט מסוג כתובת URL (במקום סוג ה-HTML הטיפוסי שמכיל את כל התוכן) שפשוט קורא לקובץ אחר עבור התוכן שלו. באפשרות הזו, רק כתובת ה-URL של הקובץ השני תיחשף. לקבלת דרכים נוספות לבצע מסכה לגאדג'ט שלך, עיין בקטע 'בחירת סוג תוכן' ביסודות המפתח כדי לראות על הבדלים בין גאדג'טים של HTML ושל כתובות אתרים לבין הגאדג'טים הם 'ציבוריים' במאמר 'כתיבת גאדג'טים משלך'.
  • חשוב ביותר, עליך לבדוק את הגאדג'ט שלך במספר אתרים שונים. שנה את צבע הרקע, צבע הטקסט ופני הגופן של האתר כדי להבטיח שהגאדג'ט ישתלב עם מגוון רחב של תבניות.

חזרה למעלה