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

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

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

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

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

אזהרה: גאדג'טים שנוצרו עם הדור הקודם ממשקי ה-API של הגאדג'טים עשויים לפעול ב-Google Sites, אבל הם לא נתמכים באופן רשמי. גאדג'טים מובנים ומבוססי-עדכונים גם לא נתמכות. לכן, Google ממליצה לבנות את כל הגאדג'טים של Google Sites באמצעות הנוכחי USERNAMEs.* API. יש הסבר בפוסט הזה:
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html

גאדג'ט לדוגמה

הנה גאדג'ט פשוט אך פופולרי שמספק iframe מעט יותר מאשר 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 לקבלת תיאור מלא של תגי הגאדג'ט והתוכן המצופה.

אירוח הגאדג'ט שלך

בלי קשר לפעולות של הגאדג'ט שלך, הקבצים שלו חייבים להימצא ברשת האינטרנט העולמית (World Wide Web) כדי שיוכלו למצוא אותו בשימוש. כל מיקום אונליין שניתן לגשת אליו באמצעות 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:

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

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

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

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

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

בדיקת הגאדג'ט שלך

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

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

 ?nocache=1

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

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

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

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

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

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

יתרה מכך, בקונטיינרים כגון BigQuery שבהם הצופה והעורך זהים, מחברי גאדג'טים יכולים להרחיב את התצורה כחלק מהתצוגה הרגילה. ב-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>

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

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

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

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

חזרה למעלה