iGoogle

iGoogle в прошлом — Google Portal, Google Fusion и Personalized Homepage доступен по адресу http://igoogle.com/

Google представила сервис персонализированных домашних страниц Personalized Homepage, дав возможность пользователям настраивать под себя домашнюю страницу Google. Для использования этого сервиса, требуется создать учётную запись Gmail. Позднее сервис был официально переименован в iGoogle, также появилась возможность создавать свои собственные элементы домашней страницы (портлеты).

15 января 2008 года был представлен iGoogle Themes API: возможность создания персональных тем для iGoogle. Стала доступна документация (на английском языке). Существует также перевод документации на русский.

Ниже приводится материал по созданию собственной темы в iGoogle

Создаем свою тему iGoogle

Что такое тема?

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

Каждая оболочка отображается в спецификации темы через <ConfigMap> (карту настроек). По существу, тема — это собрание карт настроек.

Вот пример простой темы, имеющей всего одну оболочку, описанную в теге <ConfigMap>:

<?xml version="1.0" encoding="UTF-8" ?>

<ConfigMaps>

<ConfigMap type="Skin">

<Meta name="title">Simple Theme</Meta>

<Meta name="description">Simple theme example.</Meta>

<Meta name="author">Katie M.</Meta>

<Attribute name="header.background_color">teal</Attribute>

<Attribute name="header.logo">white</Attribute>

<Attribute name="header.link_color">#ffffff</Attribute>

<Attribute name="header.text_color">#ffffff</Attribute>

<Attribute name="gadget_area.gadget.body.link_color">#8B4513</Attribute>

<Attribute name="gadget_area.tab.unselected.text_color">gray</Attribute>

</ConfigMap>

</ConfigMaps>

Вы можете посмотреть подробной список всех аттрибутов на странице справки - http://code.google.com/apis/themes/docs/reference.html

Создание и тестирование тем

XML файл может быть создан в любом текстовом редакторе, например, в Блокноте.

Чтобы протестировать тему, вы должны разместить XML файл и изображения на публичном сервере, например, на Google Gadgets Editor или Google Code. После того, как ресурсы размещены, вы можете начать тестирование, добавив

?skin=[URL темы]

в конце ссылки iGoogle, например так:

http://www.google.com/ig?skin=http://gadget-doc-examples.googlecode.com/svn/trunk/themes/theme_simple.xml

Основные шаги

Тема для iGoogle состоит из изображений для «шапки» и «подвала» и стилей, которые вы описываете в шаблоне XML для разных частей страницы. Весь процесс создания темы можно разделить на три шага:

• Создание визуального дизайна
• Заполнение шаблона темы

• Загрузка темы на iGoogle

  Эти три шага будут подробнее описаны далее.

  Перед тем, как начать работу над созданием темы, пожалуйста, прочтите правила. Они включают в себя:

• Отсутствие трейдмарков, копирайтов, логотипов вне предназначенной для этого площади
• Все логотипы iGoogle, ссылки и текст на странице должны оставаться полностью видимыми и используемыми
• Вы не должны изменять, удалять, или пренебрежительно относится к логотипу iGoogle
• Google оставляет за собой право выбирать темы, которые будут приняты и добавлены в набор

Создание визуального дизайна

Страница iGoogle состоит из трех секций: «шапки», области для контента и «подвала».

Помните, что тема может меняться в течении дня, поэтому не останавливайтесь после того, как сделаете один дизайн — создайте динамическую тему

Создание «шапки»

«Шапка» — это графическая область вверху iGoogle. Она содержит в себе логотип iGoogle, панель поиска, вкладки, текст, ссылки и тому подобное.
«Шапка» составляется из нескольких слоев по типу плиток, шаблоны которых выровнены так, чтобы они выглядели как одно изображение. Использование «плиточного» подхода делает возможным подстройку «шапки» под размер окна браузера.

Перед тем, как вы начнете конструировать дизайн «шапки» и создадите ваши плитки, полезно будет знать, как огранизованы слои на странице. Элементы расположены в следующем порядке:
Фоновый цвет. Это самый нижний слой.
Изображение из плиток. «Шапка» кажется пользователю одной картинкой, однако на самом деле она составлена из плиток. Сначала ложится фоновое изображение, остальные выравниваются по краям окна браузера. Помните, что набор плиток должен быть идентичен и выровнен для создания эффекта одного изображения.
Изображение темы. Помещается в центр «шапки», может быть как прозрачным, так и непрозрачным. Если оно непрозрачно, то должно совпадать с лежащими ниже плитками.
Логотип и панель поиска, ссылки и текст.

Изображение в «шапке» должно быть 175 пикселей в высоту и, по крайне мере, 640 пикселей в ширину. Вы можете сделать его настолько широким, насколько захотите, главное правило — размер меньше 40 КБ (примечание: меньшие изображения, естественно, загружаются быстрее и такие темы обычно более популярны). Это изображение зафиксировано по центру за логотипом iGoogle, панелью поиска, ссылками и вкладками.

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

Чуть подробнее опишем эти техники:
Заполнение фона таким же цветом

По мере того, как страница становится шире, фоновый цвет покажется по сторонам от вашей картинки.

Вы можете создать плитку, которая будет использоватся как фон для всей «шапки». Она должна сходиться по краям, чтобы её многократное повторение не создавало видимых границ или разрывов. Изображение поверх может помещать какие-то объекты поверх фоновой плитки, при этом оставляя часть площади прозрачной. Ширина этого изображения должна совпадать с таковой для фоновой плитки.

Выбираем цвета

API позволяет вам выбирать цвет текста и ссылок в «шапке» (header), «подвале» (footer), вкладках (tabs) и области для контента (gadget area). Этот пример устанавливает белый цвет для ссылок и текста в «шапке» и красный для ссылок в области для контента:

<Attribute name="header.link_color">white</Attribute>

<Attribute name="header.text_color">white</Attribute>

<Attribute name="gadget_area.gadget.body.link_color">red</Attribute>

Ссылки

Все ссылки должны быть видимы на странице и иметь один цвет. Они включают в себя:

Расширенный поиск
Настройки поиска
Языковые инструменты
Выберите тему
Добавить материал »
Добавить вкладку
Простой текст

Выберите цвет для текста на странице, включая:
Выберите тему (после того, как выбор был сделан)
Выбираем логотип iGoogle

Каждая тема должна содержать логотип iGoogle, и он должен быть хорошо различим на странице. Для выбора логотипа используйте аттрибут header.logo. Он может принимать следующие значения:
original — оригинальный многоцветный логотип iGoogle, но с прозрачным фоном. Если вы не укажете логотип, то будет использован оригинальный логотип с белым фоном, что не подойдет в большинстве случаев.
beveled_original — оригинальный многоцветный логотип iGoogle, объемный.
color — один из поддерживаемых логотипом цветов.
beveled_color — один из поддерживаемых цветов с объемной границей.

Создание вкладок

API позволяет вам изменять следующие характеристики вкладок:
Цвет текста выбранной вкладки
Цвет фона выбранной вкладки
Цвет текста не выбранной вкладки. Все не выбранные вкладки имеют один цвет текста.
Цвет фона не выбранной вкладки. Все не выбранные вкладки имеют один цвет фона.
Цвет контура для выбранных и не выбранных вкладок. Все вкладки имеют один цвет контура.

Например, этот код:

<Attribute name="gadget_area.tab.selected.background_color">white</Attribute>

<Attribute name="gadget_area.tab.selected.text_color">blue</Attribute>

<Attribute name="gadget_area.tab.unselected.background_color">gray</Attribute>

<Attribute name="gadget_area.tab.unselected.text_color">black</Attribute>

<Attribute name="gadget_area.tab.border_color">navy</Attribute>

Конструирование области для контента

API позволяет вам изменять следующие характеристики области для контента (одинаковы для всех гаджетов):
Цвет заголовков гаджета
Цвет фона для заголовка
Цвет контура гаджета
Цвет ссылок внутри гаджета

Например, этот код:

<Attribute name="gadget_area.gadget.body.link_color">#00B366</Attribute>

<Attribute name="gadget_area.border_color">#007D48</Attribute>

<Attribute name="gadget_area.gadget.border_color">#007D48</Attribute>

<Attribute name="gadget_area.gadget.header.background_color">#BFFFE4</Attribute>

<Attribute name="gadget_area.gadget.header.text_color">#00B366</Attribute>

Использование своих значков для кнопок

Вы можете использовать изображения размером 12х12 пикселей, чтобы заменить стандартные кнопки гаджетов на сделанные вами или какие-то из набора Google.

API позволяет вам предоставить следующие значки:
Значок меню (также используется для активной вкладки).
Значок меню при наведении (также используется для активной вкладки).
Значок сворачивания
Значок сворачивания при наведении
Значок разворачивания
Значок разворачивания при наведении
Значок закрытия
Значок закрытия при наведении

Например:

<Attribute name="gadget_area.menu_icon.image.url">http://igoogle-themes.googlecode.com/svn/trunk/ffaa00_menu.gif</Attribute>

<Attribute name="gadget_area.menu_icon.hover_image.url">http://igoogle-themes.googlecode.com/svn/trunk/ffaa00_menu_hover.gif</Attribute>

<Attribute name="gadget_area.delete_icon.image.url">http://igoogle-themes.googlecode.com/svn/trunk/ffaa00_delete.gif</Attribute>

<Attribute name="gadget_area.delete_icon.hover_image.url">http://igoogle-themes.googlecode.com/svn/trunk/ffaa00_delete_hover.gif</Attribute>

<Attribute name="gadget_area.collapse_icon.image.url">http://igoogle-themes.googlecode.com/svn/trunk/ffaa00_collapse.gif</Attribute>

<Attribute name="gadget_area.collapse_icon.hover_image.url">http://igoogle-themes.googlecode.com/svn/trunk/ffaa00_collapse_hover.gif</Attribute>

<Attribute name="gadget_area.expand_icon.image.url">http://igoogle-themes.googlecode.com/svn/trunk/ffaa00_expand.gif</Attribute>

<Attribute name="gadget_area.expand_icon.hover_image.url">http://igoogle-themes.googlecode.com/svn/trunk/ffaa00_expand_hover.gif</Attribute>

Создание «подвала»

Этот пункт является опциональным и очень схож с созданием «шапки». Ссылки и текст меняют цвета, существуют ограничения по ширине и высоте, как и в «шапке» могут использоваться плитки.

У вас есть три варианта конструирования «подвала»:
Использование белого, или другого фонового цвета Это обеспечит быструю загрузку страницы и простой дизайн. Например, этот код установит серый цвет фона:

<Attribute name="footer.background_color">gray</Attribute>

Использование только фонового изображения Одна плитка, заполняющая весь «подвал» — достаточно просто, и тоже быстро загружается. Как и для изображения в «шапке», удостоверьтесь в том, что совпадают края. Изображение должно быть 140 пикселей в высоту.
Фоновое изображение и плитки по сторонам от него Изображение в «подвале» должно быть 140 пикселей в высоту и, по крайне мере, 640 пикселей в ширину. Вы можете сделать его настолько широким, насколько захотите, главное правило — размер меньше 20 КБ (примечание: меньшие изображения, естественно, загружаются быстрее и такие темы обычно более популярны). Это изображение зафиксировано позади ссылок и текста. Правила насчет переходов те же.

Цвет текста и ссылок может быть изменен, например:

<Attribute name="footer.text_color">black</Attribute></code>

<Attribute name="footer.link_color">white</Attribute>

Создание динамической темы

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

Каждая из сменяющих друг-друга оболочек должна иметь описание всех аттрибутов. Тег <Trait> используется для задания временных промежутков каждой конкретной оболочки:

<ConfigMap type="Skin">

<Trait name="TimeOfDay">12am-1am</Trait>

...аттрибуты...

</ConfigMap>

<ConfigMap type="Skin">

<Trait name="TimeOfDay">1am-2am</Trait>

...аттрибуты...

</ConfigMap>

...

Загрузка темы

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

Если вы сделали некоторые изменения в тему, которая уже загружена, и хотите обновить её, всего лишь загрузите её еще раз, используя тот же URL, что и раньше. Она будет обновлена через 1-2 недели.

Опубликовано с разрешения сайта http://amaxskv.com/20/