Руководство по созданию ускорителя для IE8

Автор: Topol Среда, Май 2nd, 2012 Нет комментариев

Рубрика: Операционные системы

Введение
В Интернете существует масса хороших веб-служб и я думаю, что многие из них отлично бы работали с ускорителями. Но несмотря на то, что при создании ускорителей требуется знать ряд тонкостей, я не думаю, что мы когда-либо публиковали в этом блоге пошаговую инструкцию для этого. Я надеюсь, что данная статья вам поможет.

Я работал над функцией ускорителей некоторое время назад, поэтому у меня скопился ряд полезных советов и рекомендаций, которые помогли мне более эффективно создавать ускорители. Есть также несколько ошибок, которые я видел (и с которыми я сталкивался!) много раз, поэтому я расскажу о них с целью сделать процесс создания ускорителя проще.

Создание ускорителя
Ускорители упрощают выполнение общих операций копирования-навигации-вставки путем, позволяя пользователям передавать выбранный контент с текущей веб-страницы одной из выбранных веб-служб. К счастью, несмотря на то, что эта функция весьма удобна и мощна, написать код для нее достаточно просто. Вот пошаговое руководство для создания простого ускорителя.

Для начала я создал шаблон ускорителя в качестве образца. Все, что вам необходимо сделать, — просто заменить информацию в нем на свою. Обратите внимание, что для создания ускорителя вам не обязательно быть провайдером службы, взаимодействующего с Вашим сервисом. Если вы сможете найти указанную информацию, вы сможете создать ускоритель практически для любой веб-службы.

Вот, что необходимо предпринять:

1. Для начала выберите <homepageUrl> для вашего ускорителя. Это важное поле — все другие URL в манифесте должны соответствовать этому домену. Вообще говоря, для этой цели лучше выбрать домен верхнего уровня.

Пример: <homepageUrl>http://www.example.com</homepageUrl>

2. Введите абсолютный путь к значку favicon внутри поля <icon>. Здесь есть маленькая хитрость: щелкните правой кнопкой мыши на странице службы, выберите пункт «Просмотреть исходный код» и найдите файл с расширением .ico.

Пример: <icon>http://www.example.com/favicon.ico</icon>

3. Под полем <display> введите в поле <name> описание службы в пределах 50 символов. Мы рекомендуем, чтобы в описание была включена категория ускорителя, вслед за которым идет имя провайдера службы.

<display>
<name>Act with Example.com</name>
</display>

4. Выберите атрибут «category» для поля <activity>. Категориям посвящена отдельная статья, но в данном случае мы рекомендуем выбирать из следующих категорий:

  • Blog - служба блогов, позволяющая создавать новое сообщение в блоге на базе ссылки или выбранного фрагмента текста
  • Bookmark - служба, добавляющая ссылку в список избранного
  • Define - служба, дающая определения выделенным на странице словам
  • Email - служба, позволяющая создать новое электронное сообщение
  • Find - служба, осуществляющая поиск связанного контента в пределах сайта
  • Map - служба, выводящая местонахождение на карте на базе выделенного пользователем адреса
  • Send - служба, конвертирующая веб-данные в данные приложения
  • Share - служба, позволяющая открыть общий доступ к ссылке (с дополнительными комментариями) сообществу или целой сети
  • Translate - служба для перевода текущей страницы или выделенного фрагмента текста с одного языка на другой

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

5. Выберите, с какими значениями должен оперировать ускоритель — «selection», «link», и/или «document» — и затем добавьте их в качестве атрибутов к одному или многим элементам <ActivityAction>.

К примеру: <activityAction context=»selection»> … </activityAction>

Содержимое ссылки и документа могут использовать краткое дополнительное описание. Содержимое ссылки активировано, когда пользователь щелкает правой кнопкой мыши по ссылке и затем запускает ускоритель из возникшего контекстного меню. Точно так же содержимое документа активируется, когда пользователь щелкает правой кнопкой мыши непосредственно на странице и использует контекстное меню, или открывает меню Страница и запускает что-нибудь из подменю «Все ускорители».

6. Далее заполните атрибут «action» элемента <execute> URL-адресом службы, которую вы хотите использовать. Для того, чтобы передать данные вашей службе, смотрите раздел про переменные.

Пример: <execute action=»http://example.com/default.aspx?sel={selection}&amp;src=IE8″>

7. Окна предварительного просмотра — отличный способ вывода результата работы ускорителя пользователю, также это отличный способ перейти на домашнюю страницу службы.

Вы можете добавить окно предварительного просмотра через элемент <preview>. Я написал фрагмент кода окна с предварительным просмотром ниже.

Пример: <previewaction=»http://example.com/default.aspx?sel={selection}&amp;src=IE8″>

В последующих разделах приведена более подробная информация вышесказанного.

Переменные
IE предлагает ряд переменных, используемых с ускорителями. Ниже приведен список наиболее распространенных из них:

  • {selection} — выделение пользователем внутри страницы. Доступен только контесте выделенного фрагмента.
  • {documentUrl} — URL веб-страницы, откуда вызывается ускоритель
  • {documentTitle} — представляет заголовок веб-страницы, откуда вызывается ускоритель
  • {link} — URL страницы, выбранной пользователем
  • {linkText} — текст выбранной пользователем URL-страницы.

С полным списком переменных можно ознакомиться здесь.

Существует два метода передачи этих переменных службе через ускоритель. Первый метод осуществляется через строку запроса:

<executeaction=»http://www.example.com/script.aspx?foo=bar»>

Второй — через один или более тэг <parameter>:

<execute action=»http://www.example.com/script.aspx»>
<parameter name=»foo» value=»bar» />
</execute>

Обратите внимание, что использование элемента <parameter> является единственным способом вставить данные в тело HTTP-запроса. Также можно использовать POST с параметрами в строке запроса, но любые параметры, которые вы передаете, отобразятся в URL. Вы можете определить GET или POST-запрос через атрибут «method» элемента <activityAction>.

Добавление функции предварительного просмотра
Предварительный просмотр является, вероятно, наиболее заметной функцией ускорителей и одной из наиболее полезных в случае эффективной ее реализации.

Предварительный просмотр ускорителя представлен окном размером 320×240 пикселей. Учитывая это, большинство ускорителей, использующих данную функцию, создают специальное окно для предварительного просмотра.

Ключом к эффективному использования предварительного просмотра является отображение максимального количества важной информации на базе информации, отправленной пользователем, с последующей подгонкой результата под размер окна предварительного просмотра.

К примеру, ускоритель BingMaps отображает местоположение выбранного адреса с помощью собственного UI, масштабируемого до размера 320×240:

Код:
<preview method=»get» action=»http://www.bing.com/maps/geotager.aspx»>
<parameter name=»b» value=»{selection}» />
<parameter name=»clean» value=»true» />
<parameter name=»w» value=»320″ />
<parameter name=»h» value=»240″ />
<parameter name=»client» value=»ie» />
<parameter name=»format» value=»full» />
</preview>

Обратите внимание, что вы можете передать переменные к окну предварительного просмотра тем же самым путем, что и при запуске. Так, например, ускоритель выше использует параметр {selection}.

Другое полезное для миниатюры правило — время загрузки. Если окно предварительного просмотра загружается более, чем за половину секунды, то, возможно, это слишком много с точки зрения пользователя.

Один прием, который может оказаться полезным, предполагает использование мобильной версии службы для окна предварительного просмотра. Мы преднамеренно ограничили размеры окна предварительного просмотра, чтобы обеспечить совместимость с мобильными службами.

Тестирование ускорителя
Как только вы завершили создание ускорителя, самое время его протестировать. Для этой цели есть Javascript API. Нижеприведенный код создаст ссылку, вызывающую диалог установки ускорителя:

Код:
<a href=»javascript:window.external.addService(‘myAccelerator.xml’)»>Install me</a>

Чтобы все это заработало, вам понадобится рабочий веб-сервер, иначе попытка открыть ссылку со страницы на вашем жестком диске приведет к ошибке. Можно использовать любой локальный сервер, например сервер ASP.NET из Visual Studio.

Если попытка запуска прошла успешно, вы увидите диалог установки ускорителя. В обратном случае вы увидите примерно следующее:

Независимо от того, когда я вижу данный диалог, есть несколько ошибок, которые могут вызвать его появление.

  • Закодированные символы
    Первая ошибка имеет непосредственное отношение к XML. При прохождении строк запросов, очень часто в составных аргументах используется символ амперсанда. К сожалению, это зарезервированный символ в XML, но используя его в качестве литерала в строке запроса может привести к ошибке. Вместо этого следует заменить его на»&amp;», например, так:

    <executeaction=»http://www.microsoft.com/testscript.aspx?foo=test&amp;bar=test»>

  • Соответствие доменному требованию
    Вторая ошибка связана с тегом <homepageUrl>. Чтобы должным образом определить службу, требуется, чтобы ссылки, определенные в <homepageUrl>, атрибут действия <execute>, и атрибут действия <preview> — все находились в одном и том же домене. Если это не происходит, появляется ошибка.

Тестовые случаи
После того, как вы установили ускоритель, есть несколько сценариев, в которых желательно протестировать ускоритель, поскольку они часто являются причиной сбоев в работе существующих ускорителей:

  • Пустое содержимое — что произойдет, если вашей службе будет передано пустое сообщение? Предусмотрено ли у вас для этого подходящее сообщение?
  • Многострочное содержимое — умеет ли ваша служба обрабатывает переносы строк? Вы должны удостовериться в том, что служба правильно обрабатывает символ возврата каретки («%0d%0a» в URL) и заменить его на подходящий символ, к примеру, на пробел.
  • Скрипт — иногда выбранный пользователем фрагмент может быть связан со сценарием JavaScript. Если вы выбрали HTML, ваша служба должна отфильтровать этот сценарий на сервере из соображений безопасности.
  • Большое выделение — ускорители ограничивают запросы GET 2048 символами. Поэтому если вы желаете, чтобы ваш ускоритель мог работать с большими объемами данных, вам следует обратить свое внимание на использование POST.

Последующие шаги и заключение
Как только вы создали классный ускоритель, вы можете загрузить его в галерею дополнений IE. Это отличный способ продемонстрировать свои успехи и привлечь внимание общественности к ускорителю.

Я надеюсь, что данная статья поможет вам в создании ускорителей. Если у вас есть какие-нибудь вопросы по статье или мысли об ускорителях вообще, оставляйте свои комментарии.

Источник: thevista.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты