Tworzenie własnych motywów iGoogle…

iGoogle to nic innego jak możliwość personalizacji strony głównej najpopularniejszej sieciowej wyszukiwarki.

Usługa miała swoją premierę 20 maja 2005. Do niedawna możliwości personalizacji sprowadzały się do tylko wyboru i rozmieszczenia gadżetów ( które swoją drogą da się również samodzielnie tworzyć) oraz wyboru jednego z kilku, przygotowanych przez Google, motywów graficznych. Do pełni możliwości personalizacyjnych brakowało API, pozwalającego nadać swojej stronie iGoogle oryginalny wygląd…

Teoria

Wygląd iGoogle opisany jest za pomocą dokumentu xml. Wiedza, chociażby w stopniu podstawowym, na temat budowy dokumentów tego typu jest wymagana. Próba wyświetlania iGoogle z błędnie zbudowanym motywem skończy się wyświetleniem iGoogle bez najmniejszego ładu i składu.

Dokument motywu budowany jest z następujących znaczników:

• ConfigMaps
• ConfigMap
• Meta
• Trait
• Attribute

ConfigMaps jest głównym znacznikiem, występującym tuż po deklaracji wersji używanego przez nas xml’a oraz kodowania znaków dokumentu, w którym zawierają się wszystkie inne znaczniki.

Znacznik ConfigMap jest pewnego rodzaju kontenerem, grupującym inne znaczniki. Służy między innymi do deklaracji różnych wariantów motywu. W przypadku motywów występuje zawsze z atrybutem type o wartości „Skin”.

Za pomocą znacznik Meta, opisuje się ogólne informacje o motywie takie jak tytuł motywu, autor czy jego adres e-mail. Znacznik ten jako wartość atrybutu name przyjmuje „nazwę informacji” przez nas podawanej. Nazwy te są ściśle określone, podobnie jak i maksymalna długość wartości znacznika. Przykładowe dopuszczalne wartości atrybutu name

Nazwa	Opis
title	Tytuł motywu
description	Słowy opis motywu
author	Autor
author_email	Adres e-mail autora
thumbnail	URL do obrazka o wymiarach 410×70 px wyświetlany na liście opublikowanych motywów
screenshot	URL do obrazka o wymiarach 680×116 px wyświetlany w szczegółach motywu

Przykładowo wypełniony zestaw znaczników Meta:

<Meta name="title">Mój pierwszy motyw</Meta>
<Meta name="description">To jest mój pierwszy stworzony motyw dla iGoogle</Meta>
<Meta name="author">Jan Kowalski</Meta>
<Meta name="author_email">Jan@Kowalski.pl</Meta>
<Meta name="thumbnail"><a href="http://www.mysite.com/theme/thumbnail410x70.jpg">http://www.mojastrona.pl/theme/thumbnail.jpg</a></Meta>
<Meta name="screenshot">http://www.mojastrona.pl/theme/screenshot.jpg</Meta>

Znacznik Trait ściśle związany z podziałem na sekcje za pomocą ConfigMap. Definiuje się za jego pomocą przedział czasowy w którym aktywna jest dana sekcja ConfigMap. Pozwala to na tworzenie motywów kolorystycznie zależnych od pory doby. Trait jako wartość atrybutu name przyjmuje wartość „TimeOfDay”, natomiast wartością znacznika jest przedział czasowy podany w formacie 12 godzinnym (od godzimy – do godziny). W jednym znaczniku ConfigMap możemy zdefiniować więcej niż jeden przedział aktywności skórki, przy czym należy zachować chronologie podawanych czasów.

<Trait name="TimeOfDay">12am-6am</Trait>
<Trait name="TimeOfDay">12pm-6pm</Trait>

Znacznik Attribute jest właściwym znacznikiem definiowania wyglądu. To za jego pomocą określamy że „czarne jest czarne a białe jest białe”.
Wartości atrybutu name jest identyfikator elementu wyglądu któremu określamy wygląd. Identyfikatory te mają dość charakterystyczną budowę. Poszczególne człony identyfikatora elementu oddzielone są od siebie znakiem kropi. Przykładowo:

header.background_color

Jeśli miałeś/aś lub masz styczność z programowaniem to możesz to porównać z operatorem kropki używanym do dobrania się do pola rekordu czy metody klasy;)

Według pierwszej części identyfikatora możemy je wszystkie podzielić na 3 części: header, gadget_area i footer, czyli kolejno: nagłówek, obszar gadżetów, stopka.

Najczęstszą wymaganą wartością znacznika jest kolor elementu. Kolory można podawać jako wartość heksadycalna koloru, przykładowo: #eeeeee, wartość w formacie RGB(x,x,x) lub jako anglojęzyczna nazwa koloru.

Drugą najczęściej spotykana wymaganą wartości jest URL do obrazka. Obrazki stosowane w motywie muszą być w jednym z sieciowych formatów, o określonych rozmiarach. Więcej o przygotowaniu obrazków znajdziesz w Creating the visual designs przygotowanym przez Google. Przykładowe wartości atrybutu name wymagające podania URL obrazka:

Nazwa	Opis
header.center_image.url	Obrazek środkowy nagłówka (640px x 170px ).
header.tile_image.url	Obrazek tła nagłówka (Wysokość 170px)
footer.center_image.url	Centralny obrazek stopki (640px x 140px)
footer.tile_image.url	Tło stopki (Wysokość: 100px)
footer.attribution.image.url	Podpis autora (Wysokość: 140px)

Jako URL do obrazka przyjmuje także znacznik Attribute wraz z atrybutem name o wartości „serii” identyfikatorów ikon gadżetów, gadget_area.x_icon.y.url gdzie x to jedna z nazw przycisków służących do wyświetlenia menu, zamknięcia, minimalizacji itp danego gadżetu :

• menu
• delete
• collapse
• expand

a y to icon lub hover_icon, określających kolejno daną ikonę oraz tą ikone po najechaniu na nią kursorem.

Wyjątkiem wymagającym podania wartości nie będącej kolorem bądź adresem obrazka jest znacznik Attribute z wartości atrybutu name równa header.logo. Identyfikator ten odpowiedzialny jest za logo Google, wyświetlane w naszym motywie. W tym przypadku jesteśmy skazani na jedną z wersji przygotowanych przez Google. Ich lista znajduje się pod tym adresem.

Pełny spis możliwych wartości atrybutu name znacznika Attribute znajdziesz w Themes API Reference (en).

Praktyka

Wymagane do tworzenia motywu będą: miejsce w sieci do przechowywania plików szablonu, coś do tworzenia grafiki, najzwyklejszy edytor tekstowy lub lepszy edytor z kolorowaniem składni oraz pomysł.

W praktyce nie opłaca się tworzyć motywu od podstaw, gdyż jest to dość pracochłonne zajęcie. Żeby go uniknąć najlepiej skorzystać z szablonu motywu przygotowanego przez Google po prostu edytując go.

Testowanie motywu

Aby przetestować nasz motyw wystarczy do adresu naszej strony iGoogle dopisać “?skin=” po znaku równości podając adres pliku xml z naszym motywem. W przypadku błędnego adresu zostanie przywrócony domyślny motyw iGoogle.

Więcej informacji:

• Themes API Reference (en) – lista wszystkich atrybutów opisujących wygląd wraz z krótkim opisem, typem przyjmowanych wartość itd., iGoogle
• Themes Developer’s Guide (en) – krótki przewodnik od Google opisujący tworzenie motywówte mają dość specyficzna budowę.
• Szkic szablonu przygotowanego przez Google