15 января на официальном блоге Google был анонсирован Google Themes API. Тогда же была опубликована документация, благодаря которой каждый пользователь 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>

Вы можете посмотреть подробной список всех аттрибутов на странице справки.

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

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, панелью поиска, ссылками и вкладками.

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

• Заполнение фона таким же цветом, в который переходит изображение по краям
• Использование большей плитки для фона и добавление изображения поверх
• Одно фоновое изображение и плитка с каждой стороны

Чуть подробнее опишем эти техники:

Заполнение фона таким же цветом

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

Использование плитки для фона и добавление полупрозрачного центрального изображения

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

Одно фоновое изображение и плитка с каждой стороны

Этот вариант похож на второй, разница в том, что в центре одно изображение. Для получения невидимого перехода правый край «шапки» и левый плитки (а также левый край «шапки» и правый плитки) должны подогнаны друг к другу. Чтобы сделать переход незаметным, вы должны убедиться, что плитка полностью умещается за «шапкой»: если «шапка» 900 пикс шириной, то плитка должна быть также 900 пикс шириной (умещается один раз), 300 пикс (умещается 3 раза) и так далее: Фон чайного домика: Плитка, которая будет добавляться с каждой стороны по мере увеличения размера окна:

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

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 — один из поддерживаемых цветов с объемной границей.

Вот лишь несколько примеров:

Белый плоский логотип: <Attribute name="header.logo">white</Attribute> Желтый объемный логотип: <Attribute name="header.logo">beveled_yellow</Attribute> Желтый плоский логотип: <Attribute name="header.logo">yellow</Attribute> Оригинальный объемный логотип: <Attribute name="header.logo">beveled_original</Attribute>

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

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 недели.

Опубликовано 27 марта 2008 года в категории Google, перевод, статья с тегами: Google, iGoogle, дизайн, тема