Проектирование и разработка веб-приложений на основе технологий Microsoft

Спецификация 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>

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

  • В тегэ Head страницы указать тэг link, сообщающий браузеру, что данная веб - страница содержит поисковый механизм, который можно добавить:
    <link rel="search" type="application/opensearchdescription+xml"
       href="http://example.com/opensearch.xml" 
       title="example Search" 
/>
  • Реакция на событие "нажатие кнопки" -код 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

  • Для простоты создадим веб сайт на основе готового шаблона
  • В качестве шаблона в окне New выберем, к примеру

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

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

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

  • В качестве примера, создадим поисковый механизм, осуществляющий поиск по 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.

  • Поисковый механизм готов, теперь мы должны добавить его нашему сайту. Для этого нужно добавить соответствующий тэг

    добавим следующий тэг 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>
  • Запустим наш сайт, нажмем на стрелочку справа от поисковой строки визуального поиска и добавим новый поисковый провайдер Yandex Search
  • Как мы видим, новая поисковая система добавлена к визуальному поиску
  • Результат поиска
    •

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

    Чтобы добавить поисковую подсказку нужно в 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>
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^