Я работал над функцией ускорителей некоторое время назад, поэтому у меня скопился ряд полезных советов и рекомендаций, которые помогли мне более эффективно создавать ускорители. Есть также несколько ошибок, которые я видел (и с которыми я сталкивался!) много раз, поэтому я расскажу о них с целью сделать процесс создания ускорителя проще.
Создание ускорителя
Ускорители упрощают выполнение общих операций копирования-навигации-вставки путем, позволяя пользователям передавать выбранный контент с текущей веб-страницы одной из выбранных веб-служб. К счастью, несмотря на то, что эта функция весьма удобна и мощна, написать код для нее достаточно просто. Вот пошаговое руководство для создания простого ускорителя.
Для начала я создал шаблон ускорителя в качестве образца. Все, что вам необходимо сделать, - просто заменить информацию в нем на свою. Обратите внимание, что для создания ускорителя вам не обязательно быть провайдером службы, взаимодействующего с Вашим сервисом. Если вы сможете найти указанную информацию, вы сможете создать ускоритель практически для любой веб-службы.
Вот, что необходимо предпринять:
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}&src=IE8">
7. Окна предварительного просмотра - отличный способ вывода результата работы ускорителя пользователю, также это отличный способ перейти на домашнюю страницу службы.
Вы можете добавить окно предварительного просмотра через элемент <preview>. Я написал фрагмент кода окна с предварительным просмотром ниже.
Пример: <previewaction="http://example.com/default.aspx?sel={selection}&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>.
Добавление функции предварительного просмотра
Предварительный просмотр является, вероятно, наиболее заметной функцией ускорителей и одной из наиболее полезных в случае эффективной ее реализации.
Предварительный просмотр ускорителя представлен окном размером 320x240 пикселей. Учитывая это, большинство ускорителей, использующих данную функцию, создают специальное окно для предварительного просмотра.
Ключом к эффективному использования предварительного просмотра является отображение максимального количества важной информации на базе информации, отправленной пользователем, с последующей подгонкой результата под размер окна предварительного просмотра.
К примеру, ускоритель BingMaps отображает местоположение выбранного адреса с помощью собственного UI, масштабируемого до размера 320x240:
<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, но используя его в качестве литерала в строке запроса может привести к ошибке. Вместо этого следует заменить его на"&", например, так:
<executeaction="http://www.microsoft.com/testscript.aspx?foo=test&bar=test">
Соответствие доменному требованию
Вторая ошибка связана с тегом <homepageUrl>. Чтобы должным образом определить службу, требуется, чтобы ссылки, определенные в <homepageUrl>, атрибут действия <execute>, и атрибут действия <preview> - все находились в одном и том же домене. Если это не происходит, появляется ошибка.
Тестовые случаи
После того, как вы установили ускоритель, есть несколько сценариев, в которых желательно протестировать ускоритель, поскольку они часто являются причиной сбоев в работе существующих ускорителей:
- Пустое содержимое - что произойдет, если вашей службе будет передано пустое сообщение? Предусмотрено ли у вас для этого подходящее сообщение?
- Многострочное содержимое - умеет ли ваша служба обрабатывает переносы строк? Вы должны удостовериться в том, что служба правильно обрабатывает символ возврата каретки ("%0d%0a" в URL) и заменить его на подходящий символ, к примеру, на пробел.
- Скрипт - иногда выбранный пользователем фрагмент может быть связан со сценарием JavaScript. Если вы выбрали HTML, ваша служба должна отфильтровать этот сценарий на сервере из соображений безопасности.
- Большое выделение - ускорители ограничивают запросы GET 2048 символами. Поэтому если вы желаете, чтобы ваш ускоритель мог работать с большими объемами данных, вам следует обратить свое внимание на использование POST.
Последующие шаги и заключение
Как только вы создали классный ускоритель, вы можете загрузить его в галерею дополнений IE. Это отличный способ продемонстрировать свои успехи и привлечь внимание общественности к ускорителю.
Я надеюсь, что данная статья поможет вам в создании ускорителей. Если у вас есть какие-нибудь вопросы по статье или мысли об ускорителях вообще, оставляйте свои комментарии.
Комментарии (0)