Fichier de contexte

Cette page explique comment personnaliser l'apparence de votre moteur de recherche à l'aide du fichier de contexte (spécification XML pour votre moteur de recherche).

1. Présentation
2. L'élément LookAndFeel
3. Attributs de l'élément LookAndFeel
4. Éléments enfants de LookAndFeel
5. Ajouter un logo à une page de résultats hébergée par Google

Présentation

Outre le panneau de configuration Programmable Search Engine, vous pouvez modifier l'apparence de votre moteur de recherche en modifiant le fichier XML de contexte. Pour en savoir plus sur les avantages et les inconvénients de chaque format, consultez la page Principes de base. Si vous ne maîtrisez pas les fichiers de contexte, consultez Contexte: définir un moteur de recherche.

Pour encore plus de flexibilité dans l'affichage de votre moteur de recherche, vous pouvez utiliser le Programmable Search Element, qui vous permet d'intégrer Programmable Search Engine à votre page Web et à d'autres applications à l'aide de JavaScript.

Si vos pages Web contiennent également des données structurées, vous pouvez créer des extraits avec une présentation plus riche et du contenu personnalisé. En savoir plus sur la personnalisation de vos extraits de résultats

Avant de commencer à concevoir l'apparence de votre Programmable Search Engine, consultez les Consignes d'implémentation d'un Programmable Search Engine. Il s'agit d'un document succinct qui vous explique comment gérer la marque et l'attribution Google.

Haut de page

L'élément LookAndFeel

Dans le fichier de contexte, toutes les spécifications d'apparence sont définies par l'élément LookAndFeel sous CustomSearchEngine. Cet élément détermine si les annonces sont affichées, le mode d'affichage de la section des résultats de recherche et la façon dont chacun s'affiche. L'exemple suivant présente tous les attributs et les éléments enfants de l'élément LookAndFeel.

<CustomSearchEngine ... >
  <Title>...</Title>
  <Description>...</Description>
  <Context>
     ...
  </Context>
  <LookAndFeel googlebranding="watermark"
      element_layout="1" theme="1" custom_theme="false" text_font="Arial, sans-serif"/>
    <Logo />
    <Colors url="#3366cc"
            background="#FFFFFF"
            border="#336699"
            title="#0000CC"
            text="#000000"
            visited="#ffbd10"
            title_hover="#0000CC"
            title_active="#0000CC"/>
    <Promotions title_color="#006600"
                title_visited_color="#663399"
                url_color="#3366ff"
                background_color="#FFFFFF"
                border_color="#ffff33"
                show_image="true"
                show_snippet="true"
                snippet_color="#330000"
                title_hover_color="#0000CC"
                title_active_color="#0000CC" />
    <SearchControls input_border_color="#BCCDF0"
                    button_border_color="#666666"
                    button_background_color="#CECECE"
                    tab_border_color="#E9E9E9"
                    tab_background_color="#E9E9E9"
                    tab_selected_border_color="#FF9900"
                    tab_selected_background_color="#FFFFFF" />
    <Results border_color="#FFFFFF"
             border_hover_color="#FFFFFF"
             background_color="#FFFFFF"
             background_hover_color="#FFFFFF" />
  </LookAndFeel>
  <AdSense />
  <EnterpriseAccount />
</CustomSearchEngine>

Les attributs et éléments LookAndFeel ne sont pas tous pertinents pour tous les types de moteurs de recherche. Par exemple, l'attribut googlebranding n'est utilisé que pour les moteurs de recherche hébergés par Google. Il est ignoré si votre moteur de recherche utilise l'option d'hébergement "Search Element".

Lorsque vous téléchargez le fichier de contexte du moteur de recherche depuis la page Présentation du panneau de configuration, vous trouverez une section LookAndFeel entièrement définie. Même les attributs et les éléments qui ne sont pas pertinents pour le type de moteur de recherche que vous avez choisi ont des valeurs définies. Ce ne sont que les valeurs par défaut. Vous pouvez les ignorer. Soyez attentif aux éléments et attributs qui ont une incidence sur votre type de moteur de recherche.

Les sections suivantes abordent les points suivants:

• Attributs de l'élément LookAndFeel
• Éléments enfants de l'élément LookAndFeel

Haut de page

Attributs de l'élément LookAndFeel

Tous les attributs LookAndFeel sont facultatifs. Si vous ne les spécifiez pas, Programmable Search Engine utilisera les valeurs par défaut. Par exemple, si vous ne définissez pas l'attribut element_layout de l'élément LookAndFeel, Programmable Search Engine interprétera cela comme signifie que la valeur element_layout est "1". Certains attributs ne sont pas pertinents pour tous les types de moteurs de recherche.

Selon la façon dont vous avez défini les valeurs des attributs, Programmable Search Engine génère un ensemble de code pour le champ et les résultats de recherche. Vous pouvez prévisualiser le code généré dans la section Obtenir le code de la page "Vue d'ensemble" de votre moteur de recherche. Vous pouvez copier l'extrait de code généré et l'insérer dans votre page Web.

Voici un exemple d'élément LookAndFeel avec des attributs complets:

<LookAndFeel googlebranding="watermark"
             element_layout="1"
             theme="1"
             custom_theme="false"
             text_font="Arial, sans-serif" />

Le tableau suivant répertorie les attributs de CustomSearchEngine et leurs valeurs.

Remarque:Ne définissez les valeurs que des attributs pertinents pour l'option d'hébergement sélectionnée. La colonne Options d'hébergement vous indique les options d'hébergement auxquelles ces attributs s'appliquent.

Haut de page

Attribut	Options d'hébergement	Description	Valeur
googlebranding	Hébergé par Google	Détermine le champ de recherche de votre moteur de recherche.	Utilisez l'une des valeurs suivantes: watermark : valeur par défaut. smnar smwide smwidg smnarg smnarb smwidb
element_layout	Élément de recherche	Détermine la disposition du champ de recherche et des résultats de recherche sur la page. Pour en savoir plus sur les différentes options de mise en page, consultez la section Mise en page de l'élément de recherche.	Utilisez l'une des valeurs suivantes : 1 : valeur par défaut. Pleine largeur. 2 : compacte. 3 : deux colonnes. 4 - Deux pages. 5 - Hébergé par Google: s'ouvre dans la fenêtre actuelle. 6 - Hébergé par Google: s'ouvre dans une nouvelle fenêtre. 7 : résultats uniquement.
theme	Élément de recherche	Détermine le style de votre champ de recherche et des résultats de recherche.	Utilisez l'une des valeurs suivantes: 1 : valeur par défaut. Il ressemble aux résultats de recherche Google. 2 : le style minimaliste est doté d'une palette de couleurs simple. 3 : Green Sky utilise la police Trebuchet. 4 : Bubblegum utilise la police Arial. 5 : Espresso utilise une police serif, Georgia, dans une palette de couleurs chaudes. 6 : Shiny utilise Verdana, une police Sans Serif, dans une palette de couleurs froides.
custom_theme	Élément de recherche	Pour personnaliser le thème afin d'afficher des couleurs et des familles de polices différentes de celles du thème standard, définissez la valeur sur true. Sinon, Programmable Search Engine ignore la personnalisation que vous effectuez sur les couleurs et les polices, qui sont définies dans les éléments enfants de LookAndFeel.	Spécifiez l'une des valeurs suivantes: false : valeur par défaut. Google affiche les thèmes standards. true : définit Programmable Search Engine pour accepter les valeurs que vous avez définies dans les éléments enfants de LookAndFeel.
text_font	Toutes	Définit la famille de polices du texte figurant dans les résultats de recherche.	Bien que le panneau de configuration ne vous permette de sélectionner que cinq familles de polices, vous pouvez en choisir une plus grande dans le fichier de contexte. Vous pouvez utiliser une liste de familles de polices séparées par une virgule comme valeur pour cet attribut, comme dans l'exemple suivant: text_font="Arial, sans-serif" Si vous avez indiqué plusieurs familles de polices, le navigateur utilise la première. Si le navigateur ne prend pas en charge la première police, il tente d'utiliser la police suivante. Commencez donc par la police de votre choix et terminez par une famille générique, telle que serif ou san-serif. La famille générique permet au navigateur de sélectionner une police similaire dans la famille générique lorsqu'aucune des polices listées n'est disponible. Si vous utilisez une famille de polices dont le nom est composé de plusieurs mots, placez-la entre guillemets ("). Par exemple, Trebuchet MS doit être écrit sous la forme "Trebuchet MS".

Éléments enfants de LookAndFeel

Tous les éléments enfants de LookAndFeel, à l'exception de l'élément Promotions, se rapportent uniquement à Search Element. La plupart des attributs de l'élément Promotions s'appliquent à tous les types de moteurs de recherche. Dans la plupart des cas, les éléments enfants contrôlent les couleurs des différents composants de votre moteur de recherche. Les valeurs des couleurs correspondent aux notations hexadécimales HTML standards. Si vous ne définissez pas les attributs de l'élément, Programmable Search Engine utilise les valeurs par défaut.

Remarque:Si vous souhaitez personnaliser un élément Search, vous devez d'abord définir l'attribut custom_theme de l'élément LookAndFeel sur true avant de définir les valeurs dans les éléments enfants. Si vous ne définissez pas l'attribut custom_theme sur true, toutes les valeurs que vous avez définies dans les éléments enfants (à l'exception de Promotions) sont ignorées par Programmable Search Engine.

LookAndFeel comporte les éléments enfants suivants.

• Colors : détermine les couleurs de l'élément de recherche.
• Promotions : détermine l'apparence des promotions. Ces paramètres s'appliquent à tous les types de moteurs de recherche.
• SearchControls : détermine les couleurs des composants du champ de recherche des éléments de recherche.
• Results : détermine les couleurs des composants de la section des résultats du Search Element.

Haut de page

Élément enfant Colors

L'élément Colors détermine la couleur du composant Search. Pour modifier les couleurs des sous-composants de l'élément Search, tels qu'un résultat de recherche ou des promotions, vous devez définir des valeurs dans d'autres éléments frères.

Voici un exemple d'élément Colors avec des attributs complets:

<Colors url="#3366cc"
        background="#FFFFFF"
        border="#336699"
        title="#0000CC"
        text="#000000"
        visited="#ffbd10"
        title_hover="#0000CC"
        title_active="#0000CC"/>

Le tableau suivant répertorie les attributs facultatifs de Colors et leurs valeurs.

Attribut	Couleur du composant
url	URL au bas de chaque extrait des résultats
background	Arrière-plan de l'ensemble de la section des résultats.
border	Bordure autour de l'élément de recherche.
title	Titre des extraits des résultats. Le titre est la première ligne de chaque résultat.
text	Corps du texte de l'extrait des résultats.
visited	Lien après que l'utilisateur a cliqué dessus.
title_hover	Couleur du titre lorsque l'utilisateur passe la souris sur le lien.
title_active	Couleur du titre lorsque l'utilisateur clique sur le lien.

Haut de page

Élément enfant Promotions

L'élément Promotions contrôle les couleurs de la promotion, et détermine si les images et les descriptions doivent être affichées. L'aspect général des promotions est défini dans le fichier de contexte, tandis que le contenu des promotions elles-mêmes est défini dans le fichier XML des promotions. Pour en savoir plus, consultez Promotions.

Voici un exemple d'élément Promotions avec des attributs complets:

<Promotions title_color="#006600"
            title_visited_color="#663399"
            url_color="#3366ff"
            background_color="#FFFFFF"
            border_color="#ffff33"
            snippet_color="#330000"
            show_image="true"
            show_snippet="true"
            title_hover_color="#0000CC"
            title_active_color="#0000CC" />  

Le tableau suivant répertorie les attributs facultatifs de Promotions et leurs valeurs.

Attribut	Couleur du composant
title_color	Titre de chaque promotion.
title_visited_color	Titre après que l'utilisateur a cliqué dessus.
url_color	URL en bas de chaque promotion
background_color	Couleur d'arrière-plan de l'ensemble de la section des promotions.
border_color	Bordure autour de l'ensemble de la section de promotion.
snippet_color	Description de la promotion. Si votre promotion ne comporte pas de description, ce paramètre ne change rien.
show_image	Pour afficher une image dans votre promotion, définissez cet attribut sur true. La valeur par défaut est false. L'image à afficher est définie dans le fichier des promotions.
show_snippet	Pour afficher une description dans votre promotion, définissez cet attribut sur true. La valeur par défaut est false. Le contenu de la description est défini dans le fichier des promotions.
title_hover_color	Titre lorsque l'utilisateur pointe sur le lien.
title_active_color	Titre lorsque l'utilisateur clique sur le lien.

Haut de page

Élément enfant SearchControls

L'élément SearchControls contrôle les couleurs du champ de recherche et des onglets des affinages dans un élément Search. Si vous avez créé des libellés de suggestion dans votre moteur de recherche, ils apparaissent sous forme d'onglets dans l'élément de recherche. Si vous n'avez pas de libellés de suggestion, les onglets ne s'affichent pas, et Programmable Search Engine ignore les valeurs des attributs.

Si vous souhaitez que Programmable Search Engine effectue la saisie semi-automatique des requêtes, consultez la section décrivant l'attribut autocompletions de l'élément CustomSearchEngine dans le fichier de contexte.

Voici un exemple d'élément SearchControls avec des attributs complets:

<SearchControls input_border_color="#BCCDF0"
                button_border_color="#666666"
                button_background_color="#CECECE"
                tab_border_color="#E9E9E9"
                tab_background_color="#E9E9E9"
                tab_selected_border_color="#FF9900"
                tab_selected_background_color="#FFFFFF" />

Le tableau suivant répertorie les attributs facultatifs de SearchControls et leurs valeurs.

Attribut	Couleur du composant
input_border_color	Bordure du champ de saisie pour les requêtes de recherche.
button_border_color	Bordure autour du bouton de recherche.
button_background_color	Bouton de recherche
tab_border_color	Bordure autour des onglets qui ne sont pas au premier plan (non sélectionnés par l'utilisateur).
tab_background_color	Onglets qui ne sont pas au premier plan.
tab_selected_border_color	Onglet que l'utilisateur vient de sélectionner. L'onglet sur lequel l'utilisateur a cliqué en dernier reprend l'état sélectionné.
tab_selected_background_color	Couleur de l'onglet actuellement sélectionné.

Haut de page

Élément enfant Results

L'élément Results contrôle la couleur de chaque résultat dans le composant Search. Chaque résultat individuel constitue une unité de titre, d'extrait et de lien. Définir cet élément enfant vous permet de délimiter visuellement les résultats individuels ou de mettre en évidence ceux qui sont sélectionnés par les utilisateurs. Si vous ne souhaitez pas délimiter des résultats individuels ni mettre en surbrillance un résultat, vous pouvez définir les bordures et les arrière-plans de sorte qu'ils correspondent à la couleur de l'arrière-plan de l'ensemble de la section de résultats.

Figure 1:Résultats avec des résultats individuels délimités et des résultats individuels mis en évidence lorsque l'utilisateur pointe dessus.

Les résultats présentent deux états:

• État normal : affichage d'un résultat individuel lorsque le curseur de la souris ne le survole pas.
• État de survol : apparence d'un résultat individuel lorsque le curseur de la souris le survole.

Cet élément contrôle la couleur des résultats individuels. Pour modifier l'arrière-plan de tous les résultats, consultez la section Élément enfant de couleur.

Voici un exemple d'élément Results avec des attributs complets:

<Results border_color="#FFFFFF"
         border_hover_color="#FFFFFF"
         background_color="#FFFFFF"
         background_hover_color="#FFFFFF" />

Le tableau suivant répertorie les attributs facultatifs de Results et leurs valeurs.

Attribut	Couleur du composant
border_color	La bordure de chaque individu affiche un état normal.
border_hover_color	Bordure du résultat lorsque l'utilisateur pointe dessus.
background_color	La couleur d'arrière-plan des individus donne un état normal.
background_hover_color	Arrière-plan du résultat lorsque l'utilisateur pointe dessus.

Haut de page

Ajout d'un logo à une page de résultats hébergée par Google

Si vous autorisez Google à héberger votre page de résultats, vous pouvez inclure un logo ou une petite image juste à côté du champ de recherche sur la page de résultats. L'image doit être un fichier .jpg, .png ou .gif hébergé sur un site Web (le vôtre ou un site qui n'est soumis à aucune restriction en matière de droits d'auteur). Vous pouvez associer une URL à l'image pour la rendre cliquable.

Remarque:Si vous utilisez Programmable Search Element pour héberger les résultats de recherche, vous ne pouvez pas ajouter d'image via le panneau de configuration ou le fichier de contexte.

Voici un exemple de page de résultats avec un logo.

Figure 3:Champ de recherche avec une image

L'image et son URL sont définies dans les attributs de l'élément Logo sous l'élément LookAndFeel. L'exemple suivant montre comment ajouter un logo à votre page de résultats hébergée par Google.

<LookAndFeel>
   <Logo url="http://www.ascii.com/logo.gif"
         destination="http://www.ascii.com/"
         height="90"/>
   ...
</LookAndFeel>

Le tableau suivant répertorie les attributs de l'élément Logo.

Attribut	Description et valeur
url	URL de l'image. Il peut s'agir d'un fichier .gif, .png ou .jpg.
destination	Si vous voulez que l'image soit un lien, définissez l'URL de destination.
height	Hauteur de l'image en pixels. La hauteur maximale est de 100 pixels. Il n'est pas nécessaire d'indiquer la largeur, car Programmable Search Engine conserve les proportions. Ne prenez pas la peine d'indiquer la hauteur, sauf si l'image est trop grande et que vous souhaitez que Programmable Search Engine la réduit.

Haut de page