Спецификация OpenSearch. Создание визуального поиска в IE8

OpenSearch — это коллекция технологий, которая позволяет получать поисковые данные, с сайтов и поисковых систем в удобном формате для публикации и агрегации. Технология была разработана компанией Amazon. OpenSearch версии 1.0 был представлена Джефри Безосом на конференции Web 2.0 в марте 2005. А черновик версии 1.1 был разработан в течении сентября-декабря 2005.

Данная технология реализована в браузерах Internet Explorer 7+ и Mozilla Firefox 2+. А из веб-платформ его поддерживает большинство популярных движков: Drupal, Wordpress, Plone, Moveable Type, MediaWiki и многие другие. Русских агрегаторов я не нашел, а из зарубежных можно назвать A9.com и TagJag. Из русских сайтов технологию активно использует Яндекс.

В OpenSearch входят:

• XML-файлы с описанием поисковой системы.
• Стандартизованный синтаксис запросов, описывающий, где и как получать результаты поиска.
• RSS (в OpenSearch 1.0) или более общий OpenSearch-ответ (в OpenSearch 1.1) — форматы, предоставляющие поисковые результаты.
• OpenSearch-агрегаторы — сайты, позволяющие отображать OpenSearch-результаты.
• Элементы на веб-странице для автоматического обнаружения пользовательским клиентом возможности использования OpenSearch на данном сайте.

Структура поискового механизма

Каждый поисковый механизм представляет собой xml - файл, который распознается браузером, следующего вида:

<?xml version="1.0" encoding="UTF-8"?> 
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"> 
	<ShortName>example Search</ShortName> 
	<Url type="text/html" template="http://www.example.com/results.aspx
		?q={searchTerms}" /> 
	<Url type="application/x-suggestions+json" template="http://suggestions.example.com/ 
		?q={searchTerms}"/> 
	<Url type="application/x-suggestions+xml" template="http://suggestions.example.com/ 
		?q={searchTerms}"/> 
	<Image height="16" width="16" type="image/icon">
		http://www.example.com/favicon.ico
	</Image>
</OpenSearchDescription>

• ShortName - имя поисковой системы
• Url type - путь к поисковому механизму
• Image - иконка поисковой системы

Структура xml - файла визуальных подсказок

<?xml version="1.0"?>
<SearchSuggestion>
  <Query>query</Query>
  <Section>
    <Item>
      <Text>Name</Text>
      <Url>http://www.example.com/name</Url>
      <Description>My name</Description>
      <Image width="100" height="134" align="middle"
      source="http://www.example.com/name.jpg" />
    </Item>
    <Separator/>
  </Section>
</SearchSuggestion>

Добавление поискового механизма браузеру пользователя:

1. В тегэ Head страницы указать тэг link, сообщающий браузеру, что данная веб - страница содержит поисковый механизм, который можно добавить:

   <link rel="search" type="application/opensearchdescription+xml"
          href="http://example.com/opensearch.xml" 
          title="example Search" 
   />
2. Реакция на событие "нажатие кнопки" -код javascript, где в качестве параметра указывается xml - файл, описывающий поисковый механизм:

   <a href="javascript:window.external.AddSearchProvider 
   	('/opensearch.xml')"> 
   	Click here to add my search engine to IE8! 
   </a>

Создание визуального поиска

В качестве инструмента создания веб - фрагмента воспользуемся Expression Studio web 2.0

1. Для простоты создадим веб сайт на основе готового шаблона
   

   
   
2. В качестве шаблона в окне New выберем, к примеру Organisation5
   

   
   увеличить изображение
   

   Предпросмотр сайта в IE8

   

   
   увеличить изображение
   
3. Добавим xml - файл к данному веб - порталу, выбрав в меню File-New-Page.
   

   
   

   В окне New выберем Xml

   

   
   увеличить изображение
   
4. В качестве примера, создадим поисковый механизм, осуществляющий поиск по yandex. В качестве имени укажем Yandex Search, в качестве шаблона Urltype - поисковую строку yandex. Принцип формирования аналогичен формированию поисковой строки в практическом занятии №7, с той лишь разницей, что вместо {selection} мы указываем {searchTerms}

   <?xml version="1.0" encoding="UTF-8"?> 
   <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"> 
   	<ShortName>Yandex Search</ShortName> 
   
   	<Url type="text/html" 
   	    template="http://yandex.ru/yandsearch?text={searchTerms}" /> 
   </OpenSearchDescription

   Сохраним файл под именем Search.xml.
5. Поисковый механизм готов, теперь мы должны добавить его нашему сайту. Для этого нужно добавить соответствующий тэг link в раздел head для тех страниц. Сделаем это для мастер - страницы.
   

   
   

   добавим следующий тэг link:

   <link rel="search" type="application/opensearchdescription+xml" 
         href="http://localhost:65288/expression/YandexSearch.xml" 	
         title="Yandex Search" 
   />

   В разделе title укажем название нашего поиска, в разделе href - путь к xml - файлу поиска.

   Раздел head мастер - страницы:

   <head>
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
     <!-- #BeginEditable "doctitle" -->
     <title></title>
     <!-- #EndEditable -->
     <link href="styles/style2.css" rel="stylesheet" type="text/css" />
     <link 
   	rel="search" 	type="application/opensearchdescription+xml" 	
   	href="http://localhost:65288/expression/YandexSearch.xml" 
   	title="Yandex Search" 
    />
   </head>
6. Запустим наш сайт, нажмем на стрелочку справа от поисковой строки визуального поиска и добавим новый поисковый провайдер Yandex Search
   

   
   
7. Как мы видим, новая поисковая система добавлена к визуальному поиску
   

   
   
8. Результат поиска
   

   
   увеличить изображение
   

Добавление поисковых подсказок

Чтобы добавить поисковую подсказку нужно в xml - документ поискового механизма добавить строку вида:

<Url type="application/x-suggestions+json" 
	template="http://suggestions.example.com/ 	?q={searchTerms}"/>

В качестве шаблона нужно указать путь к xml - файлу поисковых подсказок:

<?xml version="1.0"?>
<SearchSuggestion>
  <Query>Запрос пользователя</Query>
  <Section>
    <Item>
      <Text>Название/Имя результата поиска</Text>
      <Url>ссылка на страницу результата поска</Url>
      <Description>Описание</Description>
      <Image width="100" height="134" align="middle"
      source="%путь к иконке%" />
    </Item>
    <Separator/>
  </Section>
</SearchSuggestion>

К примеру, создадим xml - файл подсказок, который будет выводить на запрос "Windows" две ссылки: на домашнюю страницу Windows и на соответствующую статью в Википедии.

В данном примере случае xml - файл подсказок yandexsuggestions.xml:

<?xml version="1.0"?>
<SearchSuggestion>
  <Query>Windows</Query>
  <Section>
    <Item>
      <Text>Windows Homepage</Text>
      <Url>http://www.microsoft.com/Rus/Windows/default.mspx</Url>
      <Description>Домашняя страница Windows</Description>
    </Item>
    <Separator/>
    <Item>
      <Text>Microsoft Windows</Text>
      <Url>http://ru.wikipedia.org/wiki/Microsoft_Windows</Url>
      <Description>Wikipedia</Description>
    </Item>
  </Section>
</SearchSuggestion>

xml - файл поискового механизма для данного примера:

<?xml version="1.0" encoding="UTF-8"?> 
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"> 
	<ShortName>Yandex Search</ShortName> 

	<Url type="text/html" 
	     template="http://yandex.ru/yandsearch?text={searchTerms}" /> 
	
	<Url type="application/x-suggestions+xml" 
	     template="http://localhost:65288/expression/yandexsuggestions.xml"/> 

</OpenSearchDescription>