Каналы устройств в компоненте "Дизайнер" SharePoint
Сведения о настройке и планировании использования каналов устройств на сайте SharePoint.
Важно!
Такая расширяемость доступна только для классического интерфейса SharePoint. Эту возможность нельзя использовать вместе с современным интерфейсом в SharePoint Online, например на сайтах для общения. Мы больше не рекомендуем использовать классический интерфейс и эти методы применения фирменной символики.
Общие сведения о каналах устройств
В настоящее время для просмотра веб-страниц все чаще используются мобильные устройства, поэтому сайт SharePoint должен быть оптимизирован для смартфонов и прочих мобильных устройств, например планшетных ПК. С помощью каналов устройств в SharePoint можно сделать так, что один сайт публикации будет отображаться по-разному в зависимости от устройства. Эта статья поможет вам спланировать использование каналов устройств в SharePoint. В ней приведены подробные сведения о самой возможности, а также необходимая информация о создании канала устройств. Кроме того, после прочтения этой статьи вы узнаете, какие каналы устройств вам нужны и как их реализовать.
Каналы устройств доступны только для сайтов публикации SharePoint. Прежде чем реализовывать каналы устройств, необходимо получить общее представление о функции "Дизайнер", о том, из чего состоит сайт SharePoint и как создать страницу SharePoint. Дополнительные сведения о модели страниц SharePoint, включая эталонные страницы и макеты страниц, см. в статье Обзор модели страниц SharePoint. Дополнительные сведения о дизайнере см. в статье Обзор конструктора в SharePoint.
Что такое канал устройств?
Канал устройств часть инфраструктуры публикации SharePoint, которая позволяет отображать определенный контент сайта, стилизовать контент и даже изменять изображения, используя при этом один и тот же URL-адрес для пула разных устройств. Если сравнивать классическую и мобильную версии сайта SharePoint, то последняя должна предусматривать отображение более узких страниц, меньшего объема информации, увеличенных элементов навигации (для прикосновений), чтобы сайт был удобным. Можно разработать один сайт, создав и отредактировав контент сразу для всех мобильных устройств. Когда пользователь просматривает сайт SharePoint с мобильного устройства, например смартфона или планшета, браузер мобильного устройства отправляет на сайт запрос HTTP GET, включающий строку агента пользователя. Эта строка содержит сведения о типе устройства, которое пытается получить доступ к сайту. В зависимости от того, какая подстрока используется, браузер может перенаправить пользователя к определенному представлению эталонной страницы. Если, например, у вас есть коллекция устройств с Windows Phone и устройств iPad, можно назначить каждому пулу уникальное отображение сайта публикации SharePoint с помощью каналов устройств. Каждому каналу устройств можно назначить отдельную эталонную страницу и CSV-файл, чтобы обеспечить оптимальное отображение. На рисунке 1 показано использование двух каналов устройств для обеспечения двух вариантов отображения сайта (для телефона и планшета).
Рис. 1. Использование каналов устройств на разных платформах устройств
Можно создать и настроить канал устройств через меню Параметры сайта в разделе Внешний вид и функции, а также с помощью параметра Дизайнер в том же разделе. При создании элемента канала устройств понадобится заполнить пять полей (как обязательных, так и необязательных). В таблице 1 перечислены эти поля и описаны сведения, которые необходимо предоставить.
Таблица 1. Обязательные и необязательные поля для создания канала устройств
| Поле | Обязательное значение | Значение |
|---|---|---|
| Имя |
Да |
Это имя вашего канала устройств. Можно использовать понятное имя, чтобы легко распознавать канал. |
| Псевдоним |
Да |
Псевдоним дает возможность определять канал устройств в коде, на панелях канала устройств (подробнее описаны ниже в статье), при предварительном просмотре и в другом контексте. Важно! Если вы позже измените псевдоним канала, необходимо будет вручную обновить сопоставления эталонной страницы, панели каналов устройств, а также пользовательский код или разметку. |
| Описание |
Нет |
Поле для указания общего описания канала устройств. |
| Правила включения устройств |
Да |
Поле для указания подстроки агента пользователя, например Windows Phone OS. От значения, введенного в это поле, зависит перенаправление устройств на определенную эталонную страницу. Дополнительные сведения о том, какие значения вводить в это поле, см. в разделе Подстроки агента пользователя и ранжирование каналов устройств этой статьи. |
| Активные |
Нет |
Установка этого флажка активирует канал устройств. Если вы работаете над действующим сайтом, лучше не активировать канал до завершения его разработки. Для тестирования можно использовать строку ?DeviceChannel=alias запроса в браузере для предварительного просмотра сайта для определенного канала. |
Примечание.
Дополнительные сведения и инструкции по созданию канала устройств см. в разделе Создание канала устройств этой статьи.
После создания и активации канала устройства возможно перенаправление устройства на определенную главную страницу, например на мобильную версию. Следующим шагом является указание главной страницы, отображаемой для мобильных устройств на уровне сайта, с помощью параметров главной страницы сайта или с помощью параметра Опубликовать и применить в Конструкторе.
Рис. 2. Настройка эталонных страниц для просмотра мобильных устройств и просмотра рабочего стола по умолчанию
Как показано на рисунке 2, можно назначить определенную эталонную страницу для обычного просмотра сайта на компьютере и эталонную страницу для перенаправления мобильных устройств. От настроенного и активного канала устройств зависит, какая именно эталонная страница будет отображаться: мобильная или по умолчанию. В частности, это зависит от подстроки правила включения устройств, заполняемой при создании канала устройств.
Подстроки агента пользователя и ранжирование каналов устройств
При создании канала устройств вам будет предложено указать подстроку агента пользователя, которая отвечает за перенаправление устройств на указанную эталонную страницу. Если не указать это значение в поле Правила включения устройств, перенаправление устройств не будет работать и канал невозможно будет создать. В таблице 2 приведены примеры значений подстроки агента пользователя, которые можно использовать при создании канала устройств.
Табл. 2. Примеры значений подстроки агента пользователя
| Устройство | Подстрока агента пользователя |
|---|---|
| Windows Phone |
Windows Phone OS 7.5 (только для телефонов с Windows Phone 7.5) Windows Phone OS (универсальная подстрока для всех версий Windows Phone) |
| iPhone |
iPhone |
| iPad |
iPad |
| Android |
Android |
В поле Правила включения устройств указываются значения подстроки, соответствующие нужным устройствам.
Важно!
Значения подстроки агента пользователя отличаются в зависимости от производителя устройства, но могут также отличаться и на устройствах с одной торговой маркой, как в приведенном выше случае с Windows Phone. Для успешного перенаправления трафика в конкретный пул необходимо назначить подстроке агента пользователя уникальный идентификатор. Дополнительные сведения о том, как изолировать подстроку на различных устройствах, см. в разделе Планирование использования каналов устройств этой статьи.
После создания каналов устройств они упорядочиваются и хранятся в списке. SharePoint поддерживает до 10 каналов устройств для одного сайта, поэтому для корректной маршрутизации трафика может понадобиться ранжировать каналы. Следует поставить наиболее уникальные правила в верхнюю часть списка, чтобы указать их более высокую важность. Это нужно сделать, если, например, в организации есть устройства с разными версиями Windows Phone, а вы хотите, чтобы на устройствах с Windows Phone 7.5 отображалась уникальная эталонная страница. На всех остальных устройствах с Windows Phone будет отображаться другая мобильная эталонная страница. В таблице 3 показаны три схемы упорядочивания, которыми можно воспользоваться, и описано их влияние на маршрутизацию.
Примечание.
Дополнительные сведения об изменении порядка каналов устройств см. в разделе Создание канала устройств этой статьи.
Табл. 3. Пример упорядочивания каналов устройств
| Порядок 1 (каналы устройств) | Порядок 2 (каналы устройств) |
|---|---|
| Канал устройств 1: Windows Phone OS 7.5 |
Канал устройств 1: Windows Phone OS |
| Канал устройств 2: Windows Phone OS |
Канал устройств 2: Windows Phone OS 7.5 |
| Канал устройств 3: Default |
Канал устройств 3: Default |
При выборе порядка 1, в котором подстроке правила включения устройств присвоено значение Windows Phone OS 7.5, пользователь с устройством с Windows Phone 7.5 будет перенаправлен на канал устройств 1 при переходе на сайт. Пользователь с любой другой версией Windows Phone будет перенаправлен на канал устройств 2, а пользователь, не использующий Windows Phone, перейдет на канал 3. Но при выборе порядка 2, в котором высший приоритет присвоен универсальной подстроке Windows Phone OS, весь трафик Windows Phone будет направляться на канал устройств 1. Устройства с Windows Phone 7.5 не будут перенаправлены на канал устройств 2 из-за того, что приоритет назначен каналу устройств 1, относящемуся к Windows Phone в общем. При создании нескольких каналов устройств очень важно понимать, как порядок и ранжирование влияют на перенаправление трафика для пулов устройств.
Примечание.
Дополнительные сведения и инструкции для упорядочивания каналов устройств см. в разделе Изменение порядка каналов устройств этой статьи.
Панели каналов устройств
Панель канала устройства — это контейнер, который можно использовать на главной странице или макете страницы, если требуется, чтобы определенное содержимое отображалось на основе псевдонима заданного канала устройства или набора каналов. Например, у вас может быть веб-часть или элемент управления, которые должны отображаться только на рабочем столе сайта, а не на любом мобильном устройстве. Панель канала устройства позволяет инкапсулировать эту веб-часть в коде и отображать ее только через указанный канал устройства. Основное преимущество панелей каналов устройств по сравнению с использованием Display:None в классе CSS заключается в том, что содержимое внутри панели канала устройства не отображается вообще по не указанным каналам. Кроме того, панели каналов устройств можно использовать для уменьшения размера отрисовки страницы для устройств, устраняя громоздкое содержимое. Это позволяет повысить скорость реагирования сайта на устройствах с ограниченной пропускной способностью.
Фрагмент панели каналов устройств можно создать с помощью коллекции фрагментов кода при просмотре эталонной страницы или макета страницы. В приведенном ниже примере HTML показано, как создать панель каналов устройств. В этом сценарии есть абзац со вставленным текстом, который отображается только для определенного канала устройств. Псевдоним настроенного канала устройств нужно указывать в атрибуте IncludedChannels. Опять же, псевдоним это имя, которое назначается при создании канала устройств и может указываться в коде.
<div data-name="DeviceChannelPanel">
<!--CS: Start device channel panel snippet.-->
<!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=62TDCXXXXXXXXXX
<!--MS:<Publishing:MobilePanel runat="server" IncludedChannels="DEFAULT">-->
<p>
This paragraph of content shows up only in the default channel, which means that you can use the same page layout for all your different devices. You can put HTML content, page fields, web parts, or CSS/JavaScript links within a device channel panel so that the content loads only on your specified channels.
</p>
<!--ME:</Publishing:MobilePanel>-->
<!--CE: End Device Channel Panel Snippet-->
</div>
Если вы хотите, чтобы содержимое отображалось в нескольких каналах, псевдонимы должны быть разделены запятыми в кавычках. IncludedChannels="alias1, alias2" Дополнительные сведения о контейнере панели канала устройства см. в статье Обзор модели страницы SharePoint. Дополнительные сведения об использовании фрагментов Конструктора см. в статье Фрагменты кода SharePoint Design Manager.
Планирование использования каналов устройств
Существует несколько вопросов и фрагментов информации, на которые необходимо ответить и собрать, прежде чем вы реализуете каналы устройств в организации. Этот раздел поможет вам спланировать использование каналов устройств, задавая актуальные вопросы о вашем устройстве и потребностях в использовании, а также предлагая рекомендации по подходу к этой функции. Вопросы в этом разделе предназначены для чтения по порядку, а не по отдельности.
Как сайт в результате должен отображаться на компьютере и других устройствах?
Как правило, каждая организация определяет уникальные требования к работе сайта в зависимости от своих потребностей. В идеале сайт должен соответствовать этим требованиям при отображении на любом устройстве, а не только на компьютере. Но несмотря на такое широкое обобщение, это по-прежнему сложный процесс, особенно при работе с различными разрешениями и меньшими областями для сенсорного ввода на экране. Кроме того, возможно, некоторым из имеющихся телефонов нужны уникальные настройки пользовательского интерфейса, которые другим не подходят или не нужны. В этих случаях разработка веб-страниц усложняется, особенно если вы не можете назначить одну эталонную страницу устройствам с различными торговыми марками.
Одной из первых задач должно быть запись того, что должно быть достигнуто функционально для создания успешного взаимодействия с пользователем на разных устройствах. Что ожидает пользовательская база, чтобы иметь возможность делать с сайтом публикации SharePoint на рабочем столе, телефоне или планшете? Вы можете обнаружить различные проблемы, включая возможные ограничения и рекомендации по отдельным устройствам, которые необходимо учитывать. Записать все эти сведения в любом формате; он поможет вам понять конкретные цели с помощью функции канала устройств и ответить на приведенные ниже вопросы, например, какие устройства вы готовы поддерживать и сколько каналов устройств следует реализовать.
Кроме того, важно помнить о некоторых ключевых возможностях каналов устройств, с помощью которых можно решить различные проблемы планирования. Один из примеров — это поддержка нескольких каналов устройств для уникального сопоставления эталонных страниц с несколькими устройствами. Другой — использование панелей каналов устройств для выборочного отображения различных элементов контента для разных пулов устройств.
Сколько каналов устройств нужно?
Вы можете создать до 10 каналов устройств, включая заданный по умолчанию на определенном сайте для локальной среды и один или два канала устройств для SharePoint Online. Возможно, для вашей организации достаточно будет создать один канал устройств и применить несколько правил включения устройств, которые относятся ко всем устройствам и перенаправляют их на заданную эталонную страницу. Чем меньше каналов устройств, тем лучше. Но из-за различий между устройствами или уникальных настроек HTML и CSS могут понадобиться дополнительные каналы устройств.
Чтобы определить необходимое количество каналов устройств, следует обратиться к собранным ранее сведениям насчет поддерживаемых устройств, целей в отношении этого сайта для различных устройств и необходимого уровня настройки. С помощь этой информации создайте список нужных каналов. Может ли одна мобильная эталонная страница, привязанная к одному каналу устройств, удовлетворить все требования? Или же нужна отдельная эталонная страница для планшетов, и, соответственно, несколько каналов? На этом этапе следует также назвать каналы и придумать для них подходящие псевдонимы, чтобы их можно было указывать в коде. Если псевдоним канала изменить позже, придется вручную изменить также и все ссылки на него.
Где найти список всех возможных подстрок устройств?
Существуют некоторые универсальные подстроки агента пользователя производителя, которые можно использовать для перенаправления устройств, например Windows Phone ОС или iPhone, как показано в таблице 2. Подстрока, необходимая в поле Правила включения устройств , обычно представляет собой подмножество гораздо большей строки агента пользователя, предоставляемой при подключении устройства к сайту. Рекомендуется найти строку для конкретного устройства, найдя ее на веб-сайте производителя или поставщика программного обеспечения или с помощью общего веб-поиска. Иногда определенную подстроку с управлением версиями может быть трудно изолировать, учитывая сходство в построении строки агента пользователя. В таблице 4 приведены два примера строк агента пользователя для Windows 8 рабочего стола и планшетного устройства.
Примечание.
Приведенные ниже строки — примеры, а не подлинные строки для указанных устройств с Windows. Они предназначены для демонстрации того, как выделить подстроку при необходимости.
Табл. 4. Различение строк агента пользователя
| Устройство | Строка агента пользователя |
|---|---|
| Компьютер с Windows 8 |
(compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0) |
| Планшет с Windows 8 (пример) |
(compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; touch) |
Эти строки очень похожи по формату; единственным отличием является включение touch для примера Windows 8 планшета. Для этого конкретного сценария, если требуется отрисовка конкретной главной страницы для планшетного устройства, при создании правила включения устройства в качестве подстроки следует указать touch . При таких ситуациях важно найти точку различия между похожими строками. Если бы вы создали канал устройства с правилом включения устройств, используя общее значение , например MSIE 10.0, невозможно будет различить настольный компьютер и планшет.
Нужно ли использовать панели каналов устройств?
Нет. Панели каналов устройств удобны, если нужно разрешить, настроить или запретить отображение некоторых элементов пользовательского интерфейса для разных устройств. К примеру, на сайте может быть текст или элемент управления, который должен отображаться на iPhone, но не на устройстве с Android. Причиной этого может быть, например, то, что у форм-фактора меньший размер экрана, что влияет на удобство использования. Для псевдонима созданного канала устройств можно назначить панели каналов устройств вне зависимости от условий и обеспечить гибкость, необходимую для этого уровня отличения. Хороший вопрос: почему бы не применить одну эталонную страницу к группе разных устройств в организации? В этом случае панель каналов устройств может быть лучшим вариантом для получения более тщательно проработанного результата, соответствующего требованиям конкретных устройств. Кроме того, панели каналов устройств можно использовать для добавления в макеты страниц CSS-кода, относящегося к конкретным каналам.
Можно ли использовать файлы cookie для выбора канала устройств?
Да, можно принудительно выполнить или отменить выбор каналов устройств с помощью файлов cookie. Для этого нужно создать файл cookie с названием deviceChannel для браузера и внести в него псевдоним указанного канала устройств. Кроме того, каналам устройств можно задать переменную JavaScript под названием effectiveDeviceChannel, которая содержит псевдоним текущего канала. Эту переменную можно использовать, чтобы показать, какой канал используется в текущий момент. Чтобы ваш сайт выводил переменную JavaScript, добавьте свойство, приведенное ниже, в контейнер свойств корневого веб-сайта.
key = PublishingInformationControlIncludeEffectiveDeviceChannel, value = true
Эту переменную также можно использовать, чтобы повлиять на отображение контента и веб-частей на странице.
Создание канала устройств
Эта процедура используется для создания нового канала устройств.
Чтобы создать канал устройств:
Запустите "Дизайнер". (Например, выберите Дизайнер в меню Параметры.)
Выберите Управление каналами устройств в нумерованном списке.
На странице компонента "Дизайнер" "Управление каналами устройств" выберите Создать канал.
На странице "Каналы устройств: новый элемент" введите имя канала устройств в текстовом поле Имя.
Введите псевдоним канала устройств в текстовом поле Псевдоним. Псевдоним должен состоять только из букв и цифр и не должен содержать пробелов. Он будет использоваться для ссылок на канал устройств в коде и другом контексте.
В текстовом поле Описание введите краткое описание устройств или браузеров, которые будет охватывать канал.
В текстовом поле Правила включения устройств введите подстроки агента пользователя для канала. Этот канал будет использован при запросе веб-страницы, если одна из введенных вами строк совпадет со строкой агента пользователя запроса.
Если вы готовы позволить каналу обрабатывать страницы, установите флажок Активировать.
Нажмите кнопку Сохранить.
Изменение канала устройств
Выполните указанные ниже действия, чтобы изменить существующий канал устройств.
Примечание.
Канал по умолчанию невозможно изменить.
Чтобы изменить канал устройств:
Запустите "Дизайнер". (Например, выберите Дизайнер в меню Параметры.)
Выберите Управление каналами устройств в нумерованном списке.
На странице компонента "Дизайнер" "Управление каналами устройств" выберите Редактирование существующих каналов или изменение их порядка.
В списке Каналы устройств выберите канал устройств, который требуется изменить, а затем откройте вкладку Элементы и выберите пункт Изменить элемент.
Чтобы изменить имя канала устройств, введите новое имя в текстовом поле Имя.
Чтобы изменить псевдоним канала устройств, введите новый псевдоним в поле Псевдоним.
Примечание.
При изменении псевдонима канала устройств необходимо вручную изменить его в других местах, где он используется. Например, вручную придется изменить псевдоним в пользовательском коде или разметке, а также поменять сопоставления между каналом устройств и эталонными страницами.
Чтобы изменить описание канала устройств, введите новое описание в текстовом поле Описание.
Чтобы изменить правила включения устройств, измените строки в текстовом поле Правила включения устройств.
Чтобы активировать канал устройств, установите флажок Активировать. Чтобы сделать канал устройств неактивным, снимите флажок Активировать.
Нажмите кнопку Сохранить.
Удаление канала устройств
Выполните указанные ниже действия, чтобы удалить существующий канал устройств.
Примечание.
Канал по умолчанию невозможно удалить.
Чтобы удалить канал устройств:
Запустите "Дизайнер". (Например, выберите Дизайнер в меню Параметры.)
Выберите Управление каналами устройств в нумерованном списке.
На странице компонента "Дизайнер" "Управление каналами устройств" выберите Редактирование существующих каналов или изменение их порядка.
В списке Каналы устройств выберите канал, который нужно удалить.
Откройте вкладку Элементы и выберите пункт Удалить элемент.
Нажмите кнопку OK.
Изменение порядка каналов устройств
Чтобы изменить порядок каналов устройств, следуйте этой процедуре.
Чтобы изменить порядок каналов устройств:
Запустите "Дизайнер". (Например, выберите Дизайнер в меню Параметры.)
Выберите Управление каналами устройств в нумерованном списке.
На странице компонента "Дизайнер" "Управление каналами устройств" выберите Редактирование существующих каналов или изменение их порядка.
Откройте вкладку Элементы и выберите пункт Изменить порядок каналов.
На странице "Изменение порядка каналов" выберите канал, положение которого нужно изменить, и щелкните Вверх или Вниз.
Упорядочив каналы, нажмите кнопку ОК.