Опубликован: 24.05.2010 | Уровень: специалист | Доступ: платный
Самостоятельная работа 10:

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

Аннотация: В рамках данного практического занятия будет рассмотрен пример создания визуального поиска для 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-файлы с описанием поисковой системы.
  • Стандартизованный синтаксис запросов, описывающий, где и как получать результаты поиска.
  • RSSOpenSearch 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>