Ormai tutti ci siamo abituati a personalizzare la nostra homepage di Google. In pochi anni la pagina da cui effettuavamo solo ricerche si è trasformata in uno strumento per avere sempre a portata di mano quello di cui abbiamo bisogno per la nostra navigazione quotidiana. Recentemente sono nati molti temi che ci hanno aiutato a personalizzare la nostra pagina iniziale. In questo CODE-IT mostreremo i primi passi utili a creare un tema personalizzato per iGoogle.
Come prima cosa clicchiamo sul link da cui cambiare lo stile della nostra home page. Da quel punto andiamo al link "Per gli sviluppatori". Qui ci troviamo in una pagina dove viene descritta passo dopo passo la procedura utile alla creazione di uno stile personalizzato.
Esistono diversi tipi di stili che possiamo creare. Il piu' semplice prevede la creazione di un'immagine di header e di una usata come footer. Altri riescono invece a geolocalizzarsi e a mutare a seconda dell'orario in cui l'utente sta visualizzando la pagina di Google. Infine, i stili piu' raffinati, riescono a modificarsi in base all'orario e al meteo associato alla città da cui l'utente ha scelto di visualizzarli.
Scopriremo che nessuno di questi tipi di skin è complesso da creare, quelli geolocalizzati e quelli collegati al meteo sono solo piu' lunghi da implementare, ma seguono la stessa procedura di quelli semplici composti da testata e piede.
Un tema è composto da delle immagini che devono rispettare alcuni prerequisiti grafici di dimensioni, e da un file che ne descrive le caratteristiche. Il file descrittore è un file xml, di cui possiamo scaricare un template dalla pagina "per sviluppatori"
Da qualche tempo Google ha introdotto un nuovo modo di gestire la nostra pagina iGoogle che va dietro al nome di sandbox. Al momento in cui è stato creato questo video, sandbox è ancora in via sperimentale, ma chi genera i propri temi o altri applicativi per Google, puo' registrarsi come sviluppatore nel programma sandbox e visualizzare fin da subito le funzionalita' che fra qualche mese saranno pubbliche. La visualizzazione a sandbox, permette di gestire meglio lo spazio della pagina, avendo a disposizione un'area maggiore per le proprie opere.
Il tema che abbiamo applicato e che rilasciamo da scaricare in questo esempio utilizza il file xml di descrizione, nella sua forma piu' semplice. Gli attributi piu' importanti sono quelli che puntano alle immagini del nostro tema che avremo messo su un sito internet. Gli altri attributi ci aiutano a configurare i colori usando la codifica esadecimale RGB che abbiamo visto gia' quando utilizziamo i fogli di stile.
<ConfigMaps>
<ConfigMap type="Skin">
<Meta name="title">Moonkiki Theme</Meta>
<Meta name="description">Moonkiki theme: going for a walk in web 2.0 world.</Meta>
<Meta name="author">Nunzio Fiore</Meta>
<Meta name="author_email">tempozero@gmail.com</Meta>
<Meta name="thumbnail">http://gmodules.com/ig/images/skins/ig_thumb_beach.jpg</Meta>
</ConfigMap>
<ConfigMap type="Skin">
<Attribute name="header.tile_image.url">http://www.moonkiki.com/ytheme/ytile.jpg</Attribute>
<Attribute name="header.center_image.url">http://www.moonkiki.com/ytheme/center_img.png</Attribute>
<Attribute name="header.logo">beveled_white</Attribute>
<Attribute name="header.link_color">#a2a2a3</Attribute>
<Attribute name="header.text_color">#a1a1a1</Attribute>
<Attribute name="gadget_area.gadget.header.background_color">#EDEDED</Attribute>
<Attribute name="gadget_area.tab.selected.background_color">#E1E1E1</Attribute>
<Attribute name="gadget_area.tab.selected.text_color">#1D1D1D</Attribute>
<Attribute name="gadget_area.tab.unselected.background_color">#EDEDED</Attribute>
<Attribute name="gadget_area.tab.unselected.text_color">#1D1D1D</Attribute>
<Attribute name="gadget_area.tab.border_color">#2A2A2A</Attribute>
<Attribute name="gadget_area.gadget.body.link_color">#1D1D1D</Attribute>
<Attribute name="gadget_area.border_color">#2A2A2A</Attribute>
<Attribute name="gadget_area.gadget.border_color">#1D1D1D</Attribute>
<Attribute name="gadget_area.gadget.header.background_color">#EDEDED</Attribute>
<Attribute name="gadget_area.gadget.header.text_color">#2A2A2A</Attribute>
<Attribute name="gadget_area.icons.icon_color">#2A2A2A</Attribute>
<Attribute name="header.background_color">#343445</Attribute>
<Attribute name="footer.center_image.url">http://www.moonkiki.com/ytheme/center_img3.png </Attribute>
<Attribute name="attribution.image.url">http://www.moonkiki.com/ytheme/my_attribution_image.gif</Attribute>
<Attribute name="footer.link_color">#212121</Attribute>
<Attribute name="footer.text_color">#232323</Attribute>
</ConfigMap>
</ConfigMaps>
Gli unici vincoli importanti da rispettare riguardano le dimensioni delle immagini e il peso.
Nel pacchetto che trovate associato a questo video potrete trovare un valido esempio di immagini che rispettano le dimensioni e il peso prestabiliti da Google. Sulla Developer Guide trovate indicazioni precise per ognuna delle immagini che volete inserire.
Una volta creato il vostro file xml, andrà caricato assieme alle immagini su internet, su un vostro sito o blog. A questo punto vi bastera' aggiungere all'url della vostra pagina iGoogle l'attributo skin uguale all'inidirizzo su cui avete messo il file xml, e il gioco è fatto. In questo modo potrete iniziare a diffondere il link del vostro tema.
È possibile utilizzare le API dei temi per creare semplici disegni da condividere con gli amici. Tuttavia, a meno che un tema non sia in iGoogle Temi directory, si può applicare solo in "modalità di prova", attraverso l'URL, come descritto in precedenza. Per condividere il tema con un pubblico più ampio e rendere possibile per gli utenti di memorizzare e applicare il tema al proprio iGoogle, si deve caricare sull'iGoogle Temi directory.
Una volta che il tema è pronto, si può inserire l'URL del tema nella pagina di Submit dei temi di iGoogle . Una volta che Google avrà accettato il tema e lo avrà inserito nel proprio database, le immagini da noi fornite vengono copiate e ospitate da Google, quindi non sarà necessario preoccuparsi del traffico per il vostro sito.
