A powerful tool for promoting websites-DIY personalized igoogle topic favorites

From Google API Daquan-programming-Development-Example
Chapter 4 "igoogle theme design" section 10th

10.2 create a topic

Creating themes for igoogle requires not only artistic talent, but also computer-related knowledge such as web design, code writing, and debugging.

To put it simply, there are three steps to create a topic:

• Visual Design. It includes the design of the header and footer banners and the color of each module. Designers who are not familiar with web design and have artistic talent may not be so easy to understand about the requirements of Banner Design. This chapter will focus on the introduction.
• Code implementation. Converts a visual design to an XML file that can be read by igoogle.
• Test and submit.

The following describes the latest global version of igoogle. This version has been significantly improved in the original version, and the API has also changed significantly. This section describes the differences between new and old APIs. Igoogle (Chinese Version (Www.google.cn/ig
) Currently, it is applicable to earlier APIs.

10.2.1 Visual Design

Open igoogle and you can see that the interface consists of four parts: Header, footer, content area, and left-side navigation (new version), which can be customized in the topic.

According to igoogle's guidance on theme content (Http://code.google.com/apis/themes/programpolicy. html
. The author believes that the following rules are most easily overlooked by developers:

• Do not place brand elements outside the specified region. That is to say, you cannot advertise in the banner image of the header. The text required by the idea can be placed in the banner image of the header, but the maker's name, logo, and advertisement cannot be placed in it, because the footer has a special signature position.
• Do not add igoogle and Google logos in the design.
• The design of the background image cannot interfere with the igoogle logo-igoogle 7 letters on the page. That is to say, the igoogle logo cannot contain complex patterns, and the background image cannot seem like interacting with the igoogle logo, the logo cannot be too similar to the background color.
• The design must not affect the availability of igoogle. It mainly means that the text and links must be clearly identifiable and will not bring difficulties to users.

Details can be viewedHttp://code.google.com/apis/themes/programpolicy.html
.

Header design

The header area is the most noticeable and easily recognized part of an igoogle topic. In the UI implementation, the header consists of four layers, from bottom to top:

• Background color. If no image or image cannot be loaded due to network reasons, the background color is displayed.
• A background image that is repeatedly tiled from the center.
• A foreground image displayed in the center.
• Igoogle logo, search box, and link text.

Figure 10-1 describes the relationship with "Jiangnan" as the subject:

Next, we will focus on the relationship between tiled images and central images. For a carefully designed igoogle subject, the header image looks like an image, which is actually composed of two images: One
Tiled behind, centered. Why? Because the igoogle design is adaptive to the browser width, that is to say, how wide the user's display is, the position occupied by this image may be
Width. If you do not want to leave the two sides blank, the easiest solution is to design a large image. However, large images mean that users need to wait for a longer time, especially for users with low screen resolution.
Time-consuming.

Figure 10-1 Example of the topic "Jiangnan"

In the actual application of igoogle, the tiled image of the background is loaded first. This image starts from the center of the page and is tiled infinitely on both sides, the tiled effect perfectly links the left border and right border of the image, as shown in Figure 10-2.

Figure 10-2 load the background tile Image

After the background image is paved, a foreground image is loaded in the center. The foreground image is not tiled, but its left and right boundary must be perfectly connected to the background image below it, as shown in Figure 10-3.

Figure 10-3 loading foreground images

No matter how high the resolution is, the background image should be a big image and there should be no obvious seams. Designers can meet this requirement in a more flexible way, for example:

• Only one background image is used, and no foreground image is needed. Ensure that the background image can be spliced. The following simplicity is complex subject is about 3000 pixels in width (the same below), as shown in Figure 10-4.

Figure 10-4 Background Image

• Use only one foreground image without a background image. Make sure that the foreground image is gradient to the solid color of the background at the edge. For example, the Earth Hour topic is shown in Figure 10-5.

Figure 10-5 foreground images

• The foreground image uses a GIF or PNG image with a transparent background, and the background part uses both the background image and background color. The transparent part of the foreground image directly shows the background. You only need to integrate the background perfectly. In general, this is easier than ensuring the convergence of seams. This method is used for the topic of bus stop. For more information, seeHttp://code.google.com/apis/themes/docs/dev_guide.html#Header
  .

After applying these themes, you can use tools such as firebug to view how these layers are combined.

The height of the header image is set to 175 pixels. jpg, PNG, or GIF images can be used. When using PNG images, note that some old browsers such as IE6 have limited support for PNG images with transparent channels.

Next, let's talk about the logo selection.

You can select a matched igoogle logo for your subject. Google has 24 logos of different colors for designers to choose from. For more information, seeHttp://code.google.com/apis/themes/docs/reference.html#Ref_Logos
.

For more information about how to select a logo, see the previous section.

Footer Design

The structure of the footer part is similar to that of the header. We also need to use two images for unlimited extension. We will not repeat them here, but the image height requirement will be changed to 140 pixels.

In the footer, you can also place a signature image with a width of 100 pixels and a height of 50 pixels. The signature will appear in the upper right corner of the footer area. The content can be the designer's name, signature, or logo. For more information, see the policy page (Http://code.google.com/apis/themes/programpolicy.html
To avoid rejection when submitting a topic.

Color Scheme

Igoogle allows you to specify the color of many elements on a page. The color value can be a 6-digit hexadecimal value (# xxxxxx) or a general color name In css. A total of 28 color values can be specified by users, as shown below:

(1) header part: background color, link text color, non-link text color.

(2) left navigation (new version): background color, border color, icon color, link text color in the selected tab, link text color in the unselected tab, the border color of unselected labels.

(3) top navigation tab bar (old version): tab border color, Selected tab background color and text color, unselected tab background color and text color.

(4) chat tool: contact name color, contact status color, background color when the mouse slides over the contact, floating contact card border color, the background color, border color, link text color, and non-link text color invited by the new contact, the background color of the chat window, and the background color of the chat window in highlighted state.

(5) content section: border color of the content area, the border color, Title Bar background color, title bar text color, title bar icon color, and link color in the content of each widget are only valid for inline gadgets.

(6) footer: background color, link text color, and non-link text color.

For the icon color in the title bar of a widget, the new and old versions of APIs are specified in a slightly different way. In the old version of the API, three operation buttons in the upper-right corner of each widget must be specified to be lowered in different statuses.
The image address used. In the four buttons, each button has two statuses. A total of eight image addresses must be specified. In the new API version, you only need to specify a title bar icon color. Not all colors can be used
Title bar -- for available colors, see references (Http://code.google.com/apis/themes/docs/reference.html#Ref_Icons
).

Dynamic topic

Each topic can contain multiple skins. When designing a theme, you can specify different skins for display at different time periods. With this function, you can design many interesting theme. For example, if the design can reflect the mood at different times every day or tell a complete story at different times, the user will be more friendly.

However, since users of igoogle do not spend so much time in the middle of the night, Theme Changes during this period can be slowed down to reduce the workload. Data indicates that igoogle has the most users during lunch break and dusk.

10.2.2 compile XML documents

After completing the above work, you can start to write code. The theme of each igoogle is represented by an XML document. The key-value pairs in this XML document represent various design attributes, such as the header background image and contact name color. The basic structure of a theme file is as follows:
<? 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"> Rowan </meta>
<Meta name = "author_email"> Rowan@gmail.com </meta>
<Meta name = "thumbnail"> http://gmodules.com/ig/images/skins/ig_thumb_beach

. Jpg </meta>
</Configmap>
<Configmap type = "skin">
<Attribute name = "header. background_color"> teal </attribute>
<Attribute name = "header. logo"> White </attribute>
<Attribute name = "header. link_color"> blue </attribute>
<Attribute name = "header. text_color"> black </attribute>
<Attribute name = "gadget_area.gadget.header.background_color"> teal </attribute>
</Configmap>
</Configmaps>

Each theme file must contain at least two configurations.
Map, one of which is the attributes of theme, and the other is the specific design. If a theme contains multiple skins, that is, the so-called dynamic theme, it can contain multiple skin designs and
Specify the time range for different skins Based on the tag and timeof day attributes. The command is as follows:
<Configmap type = "skin">
<Trait name = "timeofday"> 12am-1am </trait>
... Attributes...
</Configmap>
<Configmap type = "skin">
<Trait name = "timeofday"> 1am-2am </trait>
... Attributes...
</Configmap>

Each skin can have multiple time periods, but they cannot overlap each other. Igoogle also specifies that the time period cannot cross midnight (12 am ). If you really need to spend the night, you can split it into two to write. To indicate PM to pm next day, you can write as follows:
<Trait name = "timeofday"> 10pm-12am </trait>
<Trait name = "timeofday"> 12am-6am </trait>

You can also use multiple config maps to represent the basic theme information of different languages and regions. You can use tags and the timeof day attribute to specify the language and country for different configurations. Run the following command:
<Configmaps>
<Configmap type = "skin">
... Meta attributes...
</Configmap>
<Configmap type = "skin">
<Trait name = "language"> ZH-CN </trait>
... Meta attributes...
</Configmap>
</Configmaps>

The previous config map indicates the default theme information, and the later config map specifies the information in the Simplified Chinese version.

For specific design elements and corresponding XML attributes, see the API documentation (Http://code.google.com/apis/ themes/docs/reference.html
). But there are two considerations:

1. The color code cannot be abbreviated as three-digit. That is to say, it cannot be written as #123, but must be written as #112233.

2. All URLs must be absolute URLs.

10.2.3 development, testing, and submission

After the XML is complete, you can debug it in the actual environment of igoogle.

First, you need to upload XML files and images to a public web server. You must check whether the image URL address specified in XML is consistent with the uploaded image URL. If there is no suitable server, Google Code's project hosting service is a good choice.

Then, open igoogle and add? Skin = parameter. The absolute URL of the XML file to be tested. If theme works properly, you can see the effect of theme. If you see the default blue style of igoogle, it indicates that theme has problems. Check the syntax carefully and check whether the above format is violated.

Carefully check the effect of theme, especially some functions that are invisible at the first glance and easy to be ignored. If a small prompt appears in the header after deleting a small tool and asks the user whether to cancel the operation, the text will not be easily identified at this time. Details are very important. Users tend to discard a topic because of a specific topic, no matter how good the rest of the topic is.

After the test is complete, goHttp://www.google.com/ig/skin_submit
Submit. When submitting the file, the program checks whether the XML file has syntax errors and whether the image is accessible. If no problem exists, the program submits the file to the background for review. If there are no non-technical issues ~ Within two working days, theme designed by the designer will appear in the igoogle topic directory.

After the igoogle topic passes, all images will be crawled by igoogle and cached, so you don't have to worry about your server traffic. On the other hand, if you want to update the design of a topic, even if you only want to update the image, you must resubmit the topic.

Related reading:
Unlimited prospects for technical platforms for cloud computing Development
(Yan Yue, Chief Manager of the Chinese market of Google Development Technology Promotion Department, is recommended)
Product original read instances enjoy Internet Development Interests
(Recommended by Google senior researcher Wu Jun)
Google API Daquan --
Programming · Development · example
Please click here for an Internet Reservation
For more information about Amazon excellence, please click here