Передача в общий доступ ссылки на веб-страницу - распространенная операция на компьютере. В Internet Explorer 10 в Windows 8 она стала удобнее. Одна из новых возможностей в Windows 8 - чудо-кнопка "Общий доступ", которая позволяет без затруднений обмениваться данными между приложениями на вашем ПК. Прежде, если вы хотели поделиться интересной статьей с другом или разместить смешную фотографию у себя в блоге, вам нужно было скопировать ссылку из адресной строки, переключиться на другой сайт или перейти в другое приложение и вставить эту ссылку из буфера обмена. Теперь, благодаря чудо-кнопке "Общий доступ" в Windows 8, вы можете передавать в общий доступ ссылки из браузера, даже не покидая текущую страницу.
Когда вы передаете ссылку на сайт из браузера с использованием чудо-кнопки "Общий доступ", в Internet Explorer 10 создается два формата релевантных данных - идентификатор URI и определенный HTML-код, который включает расширенное представление страницы. Вот два примера данных о видеоролике на YouTube, которые передаются в общий доступ:
Идентификатор URI (текущего сайта)
http://www.youtube.com/watch?v=4DbgiOCTQts
HTML-код (с предварительным просмотром ссылки)
Пример расширенного предварительного просмотра веб-страниц в Internet Explorer 10
Оба эти формата данных создаются для "неявного" обмена (так называе��ся предоставление в общий доступ ссылки на сайт, просматриваемый в текущий момент). Поскольку веб-страницы могут быть представлены в виде гиперссылок или HTML-кода с расширенным предварительным представлением ссылки, в Internet Explorer 10 содержатся оба типа данных. Разумеется, если вы передаете в общий доступ не страницу целиком, а выделенный фрагмент контента, в Internet Explorer 10 будет передан HTML-код этого фрагмента вместо идентификатора URI и предварительного представления ссылки. В этом случае передача фрагмента называется "явным" обменом и не содержит ссылку. В этой статье рассматривается предоставление ссылки в общий доступ, а также участие Internet Explorer 10 в контракте общего доступа Windows 8 с использованием HTML. Кроме того, мы расскажем, как веб-разработчики могут создать предварительное представление ссылки с помощью всего лишь нескольких метатегов.
Чудо-кнопка "Общий доступ" и Internet Explorer 10
Вот видеоролик, демонстрирующий, как пользователь может передать ссылки из браузера в приложение, поддерживающее HTML.
Передача данных в общий доступ из Internet Explorer 10: предварительные представления ссылок в действии
На этом видео Stash - пример приложения, сохраняющего ссылку с помощью чудо-кнопки "Общий доступ" с HTML в Windows. Это демонстрационное приложение просто поддерживает обмен данными в формате HTML, а Internet Explorer обеспечивает предварительное представление ссылки. Предварительное представление ссылки - это HTML-код, который содержит заголовок, изображение и описание для каждой передаваемой ссылки. Это делает удобным распознавание контента на сайте. Если у вас установлены Windows 8 Consumer Preview и Visual Studio 11 Beta, вы можете загрузить и выполнить программу Stash на своем ПК. Как вы видите ниже, Stash интегрируется с контрактом общего доступа Windows 8 как целевое приложение. На обобщенной диаграмме, представленной ниже, показана передача ссылок в общий доступ из Internet Explorer 10.
Диаграмма: передача ссылок из Internet Explorer 10 в целевые приложения с использованием пакета данных чудо-кнопки "Общий доступ"
Чудо-кнопка "Общий доступ" в Windows 8 отвечает за координацию между исходными и целевыми приложениями для обеспечения интегрированного обмена данными между всеми приложениями. Это устраняет необходимость непосредственного взаимодействия между целевыми и исходными приложениями.
Обмен веб-контентом стал лучше во всех отношениях
Интернет построен на HTML. Именно поэтому HTML является одним из наиболее важных форматов данных для интеграции Internet Explorer 10 с контрактом общего доступа. В Internet Explorer 10 создаются предварительные представления ссылок, которые призваны одновременно сделать обмен данными удобнее для пользователей и помочь веб-разработчикам подключиться к контракту общего доступа, поддерживаемому Windows 8. С помощью небольшой дополнительной разметки с использованием метаданных на сайтах можно указывать, какая информация будет включаться в предварительное представление ссылок на этот сайт. Выступающие другой стороной контракта общего доступа целевые приложения, поддерживающие формат данных HTML, могут использовать все преимущества контекстных гиперссылок, не выполняя анализ отдельного сайта. В результате мы получаем богатый возможностями, современный и гибкий обмен данными.
Снимок экрана с целевыми приложениями, доступными на панели общего доступа
Снимок экрана с панелью общего доступа приложения Stash
При передаче веб-сайта в общий доступ в Internet Explorer 10 выполняется анализ этого сайта для создания предварительного представления ссылки. В приведенном выше примере это фрагмент контента, который представляет страницу фильма на сайте IMDb. Цель передачи HTML вместе с URI состоит в том, чтобы в общем доступе оказалось наилучшее представление того, что планировал передать пользователь, поэтому в Internet Explorer 10 создаются предварительные представления ссылок для всего неявного обмена. Преимущества HTML заключаются в том, что он может содержать больше информации, чем URI, и содержимое фрагмента HTML несет больше смысла, чем гиперссылка. Говоря словами Лесли Ноуп (Leslie Knope), никто не хочет предоставлять в общий доступ эту "абракадабру".
Сериал NBC Парки и зоны отдыха, сезон 4, серия 16
Вместе с тем, для некоторых целевых приложений полный контент - не лучший вариант данных и идентификатор URI был бы более полезен. Например, приложения для ведения блогов могут использовать преимущества полного HTML-контента, а для SMS-приложений оптимальным будет идентификатор URI. Разработчики приложений в стиле Metro выбирают форматы данных, оптимально подходящие для их приложений, следуя Руководству по общему доступу в Windows 8.
Для определения данных, передаваемых из Internet Explorer 10 в общий доступ, на сайтах используется разметка
Поскольку в Internet Explorer 10 используется существующая разметка, предназначенная для обмена данными в Интернете, многие сайты уже выглядят отлично при передаче в общий доступ предварительных HTML-представлений ссылок в Windows 8. Мы поддерживаем протокол Open Graph как простой способ добавления метаданных о странице. Когда пользователи обмениваются ссылками на веб-сайты в Facebook, а также в Windows 8 из Internet Explorer 10, с помощью OpenGraph можно настроить отображение своей веб-страницы.
Вот пример демонстрации работы Internet Explorer с использованием такой разметки:
<head>
<meta name="description" content="Brick Breaker TestDrive Demo Game, Performance and Touch benchmark" />
<title>Brick Breaker</title>
<meta property="og:image" content="Views/Homepage/Icons/BrickBreaker.png" />
</head>
Internet Explorer ищет следующие теги в разметке сайта при создании предварительного представления ссылки на страницу.
| Свойство | HTML-тег | Максимальное количество знаков |
|---|---|---|
| Title 1 | <meta name="title" content="Здесь находится заголовок сайта" /> | 160 |
| Title 2 | <title>Здесь находится заг��ловок сайта</title> | 160 |
| Description | <meta name="title" content="Здесь находится описание сайта" /> | 253 |
| Image 1 | <meta property="og:image" content="insert_image_link_here" /> | 2 048 (предел для URI изображения) |
| Image 2 | <link rel="image_src" href="insert_image_link_here" /> | 2 048 (предел для URI изображения) |
| Image 3 | <meta name="image" content="insert_image_link_here" /> | 2 048 (предел для URI изображения) |
| Image 4 | <meta name="thumbnail" content="insert_image_link_here" /> | 2 048 (предел для URI изображения) |
Обратите внимание, что именно в этом порядке ведется анализ для каждого из атрибутов. Например, если найдены одновременно теги Image 1 и Image 2, будет использоваться тег Image 1. Кроме того, при наличии нескольких тегов одного типа используется первый в разметке.
Что касается максимального количества знаков, если описание превышает максимально допустимую длину, Internet Explorer подставит "…" в конце предварительного представления.
Убедитесь, что вы включили в разметку сайта по меньшей мере одно свойство каждого типа. В этом случае ваши страницы будут отлично выглядеть при обмене ссылками в Windows 8. Чтобы подробнее узнать о том, как работает разметка, посмотрите эту демонстрацию на сайте тестирования Internet Explorer.
Приложения получают преимущества мощного веб-браузера
Если ваше приложение поддерживает контракт получателя данных, продумайте, может имеет смысл обеспечить в нем поддержку HTML как формата обмена данными. Приложения, поддерживающие HTML, могут использовать преимущества передаваемых из Internet Explorer 10 предварительных представлений ссылок, поскольку вся нагрузка по обработке придется на Internet Explorer 10. Здесь выполняется анализ сайта и совмещаются краткое и подробное представления ссылки, так что вашему приложению останется только отобразить и разместить полученный HTML. Гиперссылка встроена в предварительное представление, поэтому она действует в точности как URI, но при этом выглядит намного лучше. Таким образом, приложения, не располагающие ресурсами для анализа веб-контента с целью сжатия страниц в малоразмерные, но эффективные предварительные представления, смогут тем не менее отображать контекстные ссылки как HTML.
HTML-код передается из многих приложений помимо Internet Explorer 10. Для целевых приложений, которые принимают HTML-код, источник данных должен быть безразличен. Как упоминалось выше, Internet Explorer 10 передает HTML-код в сценариях неявного и явного обмена, поэтому иногда этот HTML-код является предварительным представлением ссылки, а иногда это выбранный пользователем фрагмент. В любом случае содержимое HTML-кода является наилучшим представлением того, что хотел передать пользователь. Вот пример фрагмента HTML-кода предварительного просмотра ссылки, созданного в Internet Explorer 10 при его добавлении в пакет данных чудо-кнопки "Общий доступ":
<html>
<body>
<!--StartFragment-->
<style>
/* IE10\uc1\u8217?s metro-style CSS attributes */
</style>
<a class="snippet-URL" href="http://site_link_goes_here">Website Title goes here</a>
<table>
<tr>
<td class="snippet-image">
<img src="image_link_goes_here" />
</td>
<td class="snippet-text">Website description goes here </td>
</tr>
</table>
<!--EndFragment-->
</body>
</html>
Чтобы ознакомиться с примером приложения, использующего HTML-код из Internet Explorer 10, скачайте демонстрационное приложение Stash, показанное в видеоролике выше. Это приложение демонстрирует использование HTML-данных в приложениях в стиле Metro, выступающих в качестве получателя данных.
Ниже приводится фрагмент кода из этого приложения. Здесь показано, как в Stash используется HTML-код, отправленный из чудо-кнопки "Общий доступ".
function activatedHandler(eventArgs) {
// In this sample we only do something if it was activated with the Share contract
if (eventArgs.detail.kind
=== Windows.ApplicationModel.Activation.ActivationKind.shareTarget) {
// We receive the ShareOperation object as part of the eventArgs
var shareOperation = eventArgs.detail.shareOperation;
if (shareOperation.data.contains(
Windows.ApplicationModel.DataTransfer.StandardDataFormats.html)) {
shareOperation.data.getHtmlFormatAsync().then(
function (htmlFormat) {
// Extract the HTML fragment from the HTML format
var htmlFragment = Windows.ApplicationModel.DataTransfer
.HtmlFormatHelper.getStaticFragment(htmlFormat);
// Display the HTML in the Share pane.
id("htmlArea").innerHTML = htmlFragment;
});
}
}
}
Приведенный выше код позволяет приложению Stash принимать HTML-код, если оно выбрано пользователем как получатель данных. Подробнее о разработке приложений-получателей данных в Windows 8 можно прочитать на странице краткого руководства по получению общего контента на сайте MSDN.
Счастливого обмена ссылками!
- Алекс Фельдман (Alex Feldman), руководитель программы, Internet Explorer