Спецификация 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. Из русских сайтов технологию активно использует Яндекс.
- 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 выберем, к примеру Organisation5
Предпросмотр сайта в 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 в раздел 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>
- Запустим наш сайт, нажмем на стрелочку справа от поисковой строки визуального поиска и добавим новый поисковый провайдер 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>