Гаджеты для сайтов Google

Обзор гаджетов сайтов
Пример гаджета
Размещение вашего гаджета
Создание вашего гаджета
Встраивание вашего гаджета
Тестирование вашего гаджета
Разрешение расширенной пользовательской конфигурации
Следуя рекомендациям для гаджетов сайтов

В Google, гаджеты являются приложениями HTML и JavaScript, которые могут быть встроены в веб-страницы и другие приложения, включая сайты. Эти гаджеты предоставляют возможность включать в ваш сайт внешний и динамический контент, такой как миниатюрные приложения и списки на основе базы данных, объединенные с текстом и изображениями для удобного взаимодействия с пользователем.

Каждая страница Сайтов является потенциальным контейнером гаджетов. Более того, сайты предлагают API данных это может использоваться в сочетании с гаджетами для создания мощных приложений. Это означает, что, как разработчик гаджетов, вы можете использовать API сайтов для создания привлекательных инструментов для других веб-разработчиков и их аудитории, а также для собственного использования.

Когда вы создаете гаджет для сайтов, он становится доступным миллионам активных пользователей . Просто отправьте нам свой гаджет, и он появится там, где пользователи смогут легко просматривать, настраивать и добавлять гаджет на свои сайты.

Итак, теперь вы знаете, что Sites - отличная платформа для распространения вашего гаджета, чего вы ждете? Начните создавать гаджеты для сайтов сейчас!

Обзор гаджетов сайтов

Обычно гаджеты - это небольшие утилиты, которые генерируют или извлекают внешнюю информацию на веб-страницы. В простейшем виде гаджет - это небольшой XML-файл, который извлекает информацию с возможностью сделать ее доступной на нескольких веб-страницах одновременно. На сайтах включение гаджета приводит к созданию iframe, который служит проводником для этой внешней информации. Некоторые гаджеты - это не более того, фреймы, которые передают информацию с другого веб-сайта.

Более продвинутые гаджеты собирают динамический контент и предоставляют интерактивные приложения на страницах ваших сайтов. Увидеть Пример гаджета ,

Гаджеты состоят из следующих компонентов:

Файл спецификации гаджета - XML-файл, содержащий функции HTML и JavaScript.
Страница контейнера - веб-страница, на которую вставлен гаджет, в данном случае это сайт Google.
Внешний источник данных - это необязательный параметр, который может находиться в том же месте, что и файл .xml, но часто вызывается спецификацией гаджета через HTTP для предоставления результатов.

Гаджеты, созданные для Сайтов, могут использоваться всеми посетителями сайта. Они, как правило, интерактивны, ориентированы на извлечение динамического контента, а не на презентацию, и предназначены для дополнения контента сайта.

Гаджет календаря является хорошим примером этого различия. Гаджет для персонализированного календаря, скорее всего, будет отображать календарь вошедшего в систему пользователя по умолчанию, а гаджет календаря на сайтах может позволить соавторам выбирать из множества календарей, зависящих от местоположения.

Гаджеты "Сайты" позволяют представлять на одной странице несколько фрагментов информации из внешних источников (например, оперативные диаграммы из отдельных, но связанных панелей мониторинга производительности) вместе с пояснительным текстом, опубликованным непосредственно на Сайтах. Это экономит визуальную недвижимость, собирая разрозненную информацию по одной и той же теме в одном представлении. Гаджеты также позволяют включать динамическое содержимое, которое в противном случае было бы предотвращено проверками безопасности сайтов.

Предупреждение : гаджеты построены с наследие API гаджетов может работать на сайтах, но официально не поддерживается. Встроенные и основанные на каналах гаджеты также не поддерживаются. Поэтому Google рекомендует создавать все гаджеты Сайтов, используя текущие гаджеты. * 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 = "Включить гаджет (iframe)" title_url = "http://sites.google.com/" description = "Включить другой веб-страница на вашем сайте Google "thumbnail =" http://www.gstatic.com/sites-gadgets/common/images/sites-icon-gadget-thumb.png "screenshot =" http://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 к содержимому" обязательно = "true" /> <UserPref name = "scroll" display_name = "Показать полосу прокрутки" default_value = "auto" datatype = "enum"> <EnumValue value = " auto "display_value =" Автоматически "/> <значение EnumValue =" нет "display_value =" Нет "/> <значение EnumValue =" да "display_value =" Да "/> </ UserPref> <тип контента =" 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 () {// установка переменных var prefs = new gadgets.Prefs (); var iframeURL = prefs.getString ('iframeURL'); var scroll = prefs.getString ('scroll'); высота вар = 800; ширина ширины = 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', 'нет'); if (scroll) {iframe.setAttribute ('прокрутка', прокрутка); } iframe.setAttribute ('src', iframeURL); // установить слайдшоу в качестве заполнителя div var dest = document.getElementById ('dest'); dest.innerHTML = ''; dest.appendChild (IFrame); } </ script> </ Content> </ Module>

Увидеть Начало работы: гаджеты. * API для полного описания тегов гаджета и ожидаемого содержания.

Размещение вашего гаджета

Независимо от того, что делает ваш гаджет, его файлы должны находиться во Всемирной паутине, чтобы их можно было найти и использовать. Подойдет любая онлайн-локация, доступная по HTTP без аутентификации. Просто помните, ваш гаджет должен быть опубликован в общедоступном каталоге, чтобы быть выбранным. В противном случае пользователи должны встраивать его, непосредственно вставляя его URL.

Вот ваши варианты размещения гаджетов:

App Engine - Возможность хранить все файлы, необходимые для ваших гаджетов. Требуется некоторая настройка, а именно создание проектов и последующая загрузка файлов. Но это будет легко масштабироваться для большого количества пользователей. Вы можете создать приложение для хранения всех ваших гаджетов, а другое - для обслуживания статических файлов, включая файл app.yaml, похожий на: application: <имя вашего приложения> версия: 1 среда выполнения: python api_version: 1 обработчики: - url: /.* static_dir: статический
Если вы поместите все файлы гаджетов в статический каталог, вы сможете редактировать файлы в локальном каталоге и развертывать их в App Engine каждый раз, когда вы вносите изменения. Если у вас есть файл /static/gadget.xml, его URL будет следующим: http: // <your-app-name> .appspot.com / static / gadget.xml.
Любое место по вашему выбору онлайн - полностью под вашим контролем, но также под вашей полной ответственностью. Время простоя на вашем сервере может привести к отключению пользователей ваших гаджетов.

Создание вашего гаджета

Гаджеты - это просто HTML и (необязательно) JavaScript, Flash или Silverlight, завернутые в XML. Руководство разработчика гаджета предоставляет все необходимые детали для создания собственных гаджетов. К тому же, OpenSocial Шаблоны могут быть использованы для быстрого создания социальных приложений в гаджетах.

Вот общие шаги по созданию гаджета для сайтов:

Решите, где будет размещен ваш гаджет. Увидеть Размещение вашего гаджета раздел для описания ваших вариантов.
Создайте новый XML-файл, который будет действовать как ваша спецификация, используя выбранный вами текстовый редактор.
Выберите тип содержимого, HTML или URL, и укажите его в XML-файле гаджета, например:
<Content type = "html">
Это почти всегда будет HTML, который предполагает, что весь контент предоставляется непосредственно в XML-файле. Но если вы намереваетесь предоставить контент в отдельном файле, используйте тип контента URL. Увидеть Выбор типа контента для полного описания их различий.
Создайте контент в файле гаджета .xml или в отдельных файлах, вызываемых спецификацией. Увидеть Просмотр примеров гаджетов раздел о способах изучения существующих гаджетов.
Определите основные настройки для гаджета, которые могут быть изменены пользователями. Увидеть Определение пользовательских настроек для инструкций. Чтобы обеспечить более сложную настройку, см. Разрешение расширенной пользовательской конфигурации раздел.
Определите настройки модуля, которые может изменить только автор гаджета. Увидеть Определение настроек гаджета для дополнительных деталей.
Проверьте гаджет. Увидеть Тестирование вашего гаджета раздел для инструкций.

Встраивание вашего гаджета

Гаджеты могут быть встроены в страницы сайтов, либо выбрав их из каталога гаджетов сайтов (который синхронизирован с каталогом гаджетов iGoogle), либо напрямую включив их URL.

Чтобы вставить гаджет в сайты:

Перейдите на страницу "Сайты", которая будет содержать новый гаджет.
Откройте страницу для редактирования.
Выберите «Вставка»> «Другие гаджеты».
Найдите гаджет, выберите его в категории слева или нажмите Добавить гаджет по URL-адресу и вставьте URL-адрес в XML-файл. Затем нажмите Добавить .
Совет . Этот же метод добавления гаджета по URL-адресу можно использовать для встраивания гаджетов из iGoogle и из любого другого места в Интернете.
Укажите размеры гаджета, выберите один из доступных параметров и нажмите « ОК» . Гаджет добавлен на вашу страницу.
Сохраните страницу, чтобы просмотреть и протестировать свой гаджет на сайте.

Тестирование вашего гаджета

Создав свой гаджет, вы должны тщательно его протестировать, прежде чем использовать и позволить другим делать то же самое. Протестируйте свой гаджет вручную, создав один или несколько тестовых сайтов Google и вставив гаджет. Увидеть Встраивание вашего гаджета раздел для точных шагов. Функциональность и внешний вид вашего гаджета зависит от сайта, на котором он находится. Поэтому лучший способ отладить гаджет - это протестировать его в контексте реального сайта Google. Попробуйте переключаться между различными темами сайтов, чтобы обеспечить правильное отображение гаджета в каждой из них.

При тестировании вашего гаджета вы неизбежно обнаружите ошибки и должны будете внести исправления в XML-файл гаджета. Вы должны отключить кеширование гаджетов во время настройки XML. В противном случае ваши изменения не будут отображаться на странице. Спецификации гаджета кэшируются, если вы не скажете Сайты не делать этого. Чтобы обойти кеш во время разработки, добавьте его в конец URL-адреса страницы сайтов, содержащей гаджет (а не URL-адрес XML-файла спецификации гаджета):

? NoCache = 1

Сайты предоставляют стандартный интерфейс для добавления и настройки гаджетов. Когда вы добавляете гаджет, он будет отображать предварительный просмотр и показывать любые параметры UserPref, которые можно настроить. Протестируйте обновление различных значений конфигурации и добавьте свой гаджет на свой тестовый сайт. Убедитесь, что ваш гаджет работает, как и ожидалось, на самом сайте. Вы должны проверить, что любой определенный вами UserPref может быть правильно настроен администратором сайта.

Затем обратитесь к Подготовка к публикации раздела публикации вашего гаджета для других испытаний, чтобы выполнить.

Разрешение расширенной пользовательской конфигурации

Все гаджеты могут предлагать возможность установки основных пользовательских настроек через раздел UserPref файла спецификации гаджета. Как правило, они влияют на размеры, полосы прокрутки, границы, заголовки и специфичные для гаджета настройки, как показано на скриншоте здесь:

Но во многих случаях гаджеты получают преимущества от более сложных настроек, чем стандартные компоненты UserPref. Предпочтения часто должны включать такие функции, как настраиваемая бизнес-логика, проверки или средства выбора. Интерфейс, созданный из разделов UserPref гаджета, поддерживает ограниченное количество типов данных (строка, перечисление и т. Д.), Поэтому проверка входных данных, таких как URL-адреса или даты, не может быть проведена.

Кроме того, в таких контейнерах, как iGoogle, где средство просмотра и редактор одинаковы, авторы гаджетов могут расширять конфигурацию как часть стандартного представления. На сайтах средство просмотра не всегда является редактором, поэтому автор гаджета не может гарантировать, что пользователь, имеющий доступ к просмотру, имеет доступ к настройкам обновления. Социальные контейнеры, такие как Сайты, не могут позволить любому пользователю изменять настройки, только автору.

На сайтах интерфейс основных настроек гаджета, сгенерированный UserPref, может быть заменен представлением конфигурации, в котором может быть указано много дополнительных настроек и типов данных, как на скриншоте, показанном здесь:

Представление конфигурации отображается вместо настроек UserPref во время вставки или редактирования и позволяет вам устанавливать пользовательские настройки с помощью пользовательского интерфейса. И вы можете иметь пользовательские элементы ввода, например, для выбора позиции на карте, а не для ввода координат карты.

Разработчики могут использовать стандартные API-интерфейсы setprefs для сохранения настроек в этом представлении. Увидеть Справочник по гаджетам XML и Раздел «Сохранение состояния» Основ разработчика для дополнительных деталей. Эти представления позволяют приложению-контейнеру предоставлять дополнительную информацию о конфигурации и устанавливаются в XML-файлах гаджета после разделов UserPref с открывающим тегом, напоминающим:

Например, news.xml Гаджет, который обеспечивает представление конфигурации выше, содержит этот раздел:

<Content type = "html" view = "configuration" privile_height = "300"> <style type = "text / css"> .config-options {margin: 10px; } .label {font-weight: bold; ширина: 35%; выравнивание по вертикали: верх; } .gray {color: # 666666; } html {font-family: arial, sans-serif; Размер шрифта: 0.81em; размер шрифта-регулируйте: нет; стиль шрифта: нормальный; вариант шрифта: нормальный; начертание шрифта: нормальный; высота строки: 1,5; } a: ссылка, a: посещенный, a: активный {text-ornament: 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 "> Размер: </ td> <td align =" left "> <select id =" size "onchange =" Update () "> <option selected =" selected "value =" 300x250 "> Средний прямоугольник (300x250) </ option> <option value =" 728x90 "> Таблица лидеров (728x90) </ option> </ select> </ td> </ tr> <tr> <td align = "left" class = "label"> Выбрать разделы: </ td> <td align = "left"> <таблица> <tbody> <tr> <td> <input type = "checkbox" onclick = "Update ()" id = "sec_h" value = "h" /> Основные новости </ 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> <тип ввода = "checkbox" onclick = "Update ()" id = "sec_n" value = "n" /> Нация </ td> <td> <input type = "checkbo x "onclick =" Update () "id =" sec_e "value =" e "/> Развлечения </ td> </ tr> <tr> <td> <input type =" checkbox "onclick =" Update () " id = "sec_t" value = "t" /> Технология </ td> <td> <input type = "checkbox" onclick = "Update ()" id = "sec_s" value = "s" /> Спорт </ 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"> Или создайте его: </ td> <td align = "left"> <input type = "text" id = "query" onchange = "Update ()" /> <br/> <span class = "grey"> Пример: Олимпийские игры 2010 года </ span> </ td> </ tr> <tr> <td colspan = "2"> <div id = "Предварительный просмотр" стиль = "margin-top: 10px; переполнение: авто; ширина: 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 themes = ['h', 'w', 'b', 'p', 'n', 'e', 't', 's', 'm']; for (var i = 0; i <themes.length; i ++) {if (document.getElementById ('sec_' + themes [i]). check) {selected.push (themes [i]); }} return selected.join (','); } function setSelectedTopics (selected) {if (selected && selected.length> = 0) {var themes = selected.split (','); for (var i = 0; i <themes.length; i ++) {document.getElementById ('sec_' + themes [i]). check = true; }}} функция 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 /, размер); 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 ('размер', размер); prefs.set ('тема', тема); prefs.set ('запрос', запрос); 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__'); Обновить(); } gadgets.util.registerOnLoadHandler (Initialize); </ script> </ Content>

Вы можете найти этот пример и другие гаджеты для сайтов с представлениями конфигурации здесь:
http://www.gstatic.com/sites-gadgets/news/news.xml
http://gadgets.pardonmyzinger.org/static/qrcode.xml
http://www.gstatic.com/sites-gadgets/news/youtube_news.xml

Следуя рекомендациям для гаджетов сайтов

Пользователи сайтов хотят хорошо выглядеть в Интернете. Следуйте этим рекомендациям, чтобы ваш гаджет гармонично сочетался со многими темами, используемыми на сайтах. Увидеть Обзор гаджетов для деталей о создании гаджетов. В оставшейся части этого раздела представлены рекомендации для гаджетов Сайтов.

Не помещайте конфиденциальную информацию в спецификации или заголовки гаджетов, потому что ваш гаджет доступен для просмотра широкой публике. Например, не включайте внутренние имена проектов.
Чтобы свести к минимуму видимость вашего гаджета, не отправляйте его в каталог гаджетов iGoogle или в любую другую общедоступную службу листинга. Вместо этого пусть все пользователи включают его только по URL. Кроме того, вы можете создать гаджет типа URL (а не типичный тип HTML, содержащий все содержимое), который просто вызывает другой файл для своего содержимого. С этой опцией сквозного доступа открывается только URL второго файла. Увидеть Выбор раздела «Тип контента» в Основах разработчика для различий между гаджетами HTML и URL и Гаджеты - это общедоступный раздел написания собственных гаджетов. для других способов замаскировать ваш гаджет.
Самое главное, протестируйте свой гаджет на нескольких разных сайтах. Измените цвет фона сайта, цвет текста и шрифт, чтобы гаджет сочетался с широким спектром шаблонов.

Вернуться к началу

Как создать контент в Google Direct Answer?
Как создать контент в Google Direct Answer? Если вы ищете вдохновение для создания нового контента на сайте, ознакомьтесь с доступными онлайн-инструментами, которые помогут вам. Прежде всего, это поиск по фразе, такой как Инструмент подсказки ключевых слов или Ubersuggest , Выбрав польский язык в качестве диапазона, вы узнаете, какие слова или вопросы связаны с выбранной вами фразой. Если ваш бренд специализируется

Кто угодно может высказать свое мнение о чем угодно, поэтому хорошо, что Google заранее оценил этот контент для читателя и отсортировал его… верно?
Кто угодно может высказать свое мнение о чем угодно, поэтому хорошо, что Google заранее оценил этот контент для читателя и отсортировал его… верно? Понять SEO как возможность Пожалуйста, не поймите это неправильно: миллиарды проиндексированных страниц должны быть как-то отсортированы, поэтому необходимо ранжирование. Благодаря SEO у всех есть одинаковые возможности катапультироваться в Google. Оптимизация веб-сайта - это методология, которая соответствует Интернету и сравнима

Можете ли вы разделить автоматическое и ручное тестирование, сфокусировав его на новых функциях?
Можете ли вы разделить автоматическое и ручное тестирование, сфокусировав его на новых функциях? Вы постоянно тестируете то, что никогда не меняется? Если вы часто тестируете, можете ли вы протестировать пропорцию каждой части продукта или случайно выбрать функции для тестирования? Групповые устройства по приоритету Теперь, когда мы разбираемся с теорией, давайте рассмотрим пример на практике. Группы устройств, определенные ниже, относятся к статистике для BBC News,

Допустим, вы не хотите блокировать определенные страны, а хотите, чтобы только некоторые страны из вашего списка могли общаться с вашим сервером и блокировали остальные?
Можете ли вы разделить автоматическое и ручное тестирование, сфокусировав его на новых функциях? Вы постоянно тестируете то, что никогда не меняется? Если вы часто тестируете, можете ли вы протестировать пропорцию каждой части продукта или случайно выбрать функции для тестирования? Групповые устройства по приоритету Теперь, когда мы разбираемся с теорией, давайте рассмотрим пример на практике. Группы устройств, определенные ниже, относятся к статистике для BBC News,

Netflix доступен только через Google Chrome?
Netflix доступен только через Google Chrome? На момент написания этой статьи, да, Google Chrome на данный момент является единственным браузером, который обеспечивает воспроизведение контента Netflix изначально в Linux. Это не будет иметь место слишком долго, так как Firefox реализовал поддержку EME в версиях Firefox для Windows, поэтому поддержка Firefox в Linux на этом этапе неизбежна. NSS, последняя часть головоломки была предоставлена Mozilla, но Firefox не может

Итак, теперь вы знаете, что Sites - отличная платформа для распространения вашего гаджета, чего вы ждете?
Quot; encoding = "UTF-8"?
Html?
Как создать контент в Google Direct Answer?
Кто угодно может высказать свое мнение о чем угодно, поэтому хорошо, что Google заранее оценил этот контент для читателя и отсортировал его… верно?
Можете ли вы разделить автоматическое и ручное тестирование, сфокусировав его на новых функциях?
Вы постоянно тестируете то, что никогда не меняется?
Если вы часто тестируете, можете ли вы протестировать пропорцию каждой части продукта или случайно выбрать функции для тестирования?
Можете ли вы разделить автоматическое и ручное тестирование, сфокусировав его на новых функциях?
Вы постоянно тестируете то, что никогда не меняется?

Статьи