Создание собственной фирменной символики в Интернете с помощью SharePoint 2013 и уже знакомых веб-технологий

Исходная статья опубликована в понедельник, 25 февраля 2013 г.

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

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

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

Используйте знакомые веб-технологии

В SharePoint еще поддерживаются главные страницы и макеты страниц в ASP.NET, но теперь можнотакже конструировать главные страницы и макеты страниц в HTML, включая использование фрагментов HTML-кода элементов управления SharePoint. На заднем плане SharePoint создает соответствующий файл ASP.NET, который ему нужен, но который вы игнорируете.

Прежде вы должны были использовать CSS и JavaScript для задания стиля сайта, но теперь это все полностью интегрировано в интерфейс веб-разработки SharePoint. Мы много поработали с предварительным просмотром HTML, так что вы можете создавать стиль в HTML напрямую, без необходимости использования сервера для его просмотра. И если вы выполняете предварительный просмотр на сервере, то можете делать это в контексте любой страницы SharePoint по вашему выбору!

Работа с веб-технологиями, как вы знаете, не ограничивается уровнем макета страницы. Веб-часть запроса контента, для которой требовалось проектирование в XSLT, все еще используется, но новая веб-часть поиска контента является важным структурным элементом для создания взаимодействия на основе поиска в SharePoint 2013. Уверенность, что большой дизайнерский опыт позволяет согласиться с этим, была очень важна для нас, так что существует возможность настройки с помощью JavaScript, HTML и CSS.

Поскольку мы не рассчитываем на какие-либо знания SharePoint с вашей стороны, у нас есть Дизайнер, помогающий пройти весь путь по созданию фирменной символики вашего сайта публикации. Интерфейс этого Дизайнера аналогичен интерфейсу мастера и позволяет давать пошаговые инструкции по разработке в SharePoint с точками входа, чтобы вы могли просматривать ваши файлы структуры и работать с ними. Для каждого из этапов также имеется соответствующая описательная статья в библиотеке MSDN:

• Обзор
• Управление каналами устройств
• Отправка файлов структуры
• Редактирование главных страниц
• Редактирование шаблонов для отображения
• Редактирование макетов страниц
• Публикация и применение структуры
• Создание пакета структуры

Настраивайте SharePoint средствами, которые вам нравятся

Настройка структуры сайта — это не просто преобразование HTML в ASP.NET. Чтобы помочь вам успешно создать свой сайт, предусмотрены популярные заполнители, которые уже готовы и ждут от вас контент. Когда дело дойдет до макетов страниц, вы увидите, что мы вставили все поля страницы, присущие только выбранному вами типу контента; таким образом, создание файлов структуры SharePoint становится скорее не созданием, а чем-то вроде редактирования и доработки.

Коллекция фрагментов кода представляет хорошую отправную точку для добавления на ваш сайт функциональных возможностей SharePoint. Те, кто хорошо знаком с предыдущими версиями SharePoint, могут воспринимать эти фрагменты кода как набор элементов управления, доступ к которым осуществляется через SharePoint Designer, но на самом деле это немного больше, чем элементы управления. Коллекция фрагментов кода предоставляет HTML-версию набора распространенных компонентов (во многих случаях со статическим просмотром, чтобы показать, с чем вы работаете, когда редактируете файл, в чем-нибудь типа комбинированного режима Dreamweaver) — включая все веб-части из коллекции веб-частей. Для каждого фрагмента кода вы можете настроить его свойства и просто скопировать его в свою главную страницу HTML или в макет страницы, и SharePoint в фоновом режиме преобразует этот фрагмент в необходимый ему элемент управления ASP.NET.

Рис. 1. Вверху страницы коллекции фрагментов кода размещается лента со всеми фрагментами. В основной части страницы находится описание фрагмента кода, его свойства и HTML-код, а также динамический просмотр. Все главные страницы имеют одну и ту же коллекцию фрагментов кода, которая слегка отличается от коллекций фрагментов кода для макетов страницы, и коллекция фрагментов кода макета страницы зависит от его типа контента (поскольку изменяются поля страницы.

Работайте с SharePoint с любого устройства

Люди уже не посещают веб-сайты только с помощью мыши своего ПК или ноутбука. Теперь в мире существует множество разных устройств: планшеты, телефоны, поверхности, подумать только! Как создать для пользователей такой интерфейс, чтобы их размер экрана использовался наилучшим образом? А как оптимизировать для сенсорных устройств? В SharePoint 2013 каналы устройств помогают представить сайт способом, лучше всего подходящим для устройства, которое использует посетитель вашего сайта. Как дизайнер вы получаете возможность подумать, какой интерфейс должен иметь ваш сайт при разных конструктивных характеристиках, которые различаются по подстроке пользовательского агента, назначаемой до 10 разным каналам.

Каждый канал может быть ориентирован на несколько устройств. Например, можно иметь один канал для Windows Phone и iPhone, поскольку у них похожий размер экрана, и отдельный канал для iPad. Для каждого канала можно использовать отдельную главную страницу и CSS, а также можно предназначать контент для конкретных каналов, при этом весь такой контент будет иметь один и тот же URL-адрес (что прекрасно работает для удобства и оптимизации поисковой системы).

Благодаря инфраструктуре каналов устройств вы получаете возможность использовать панели каналов устройств, что является огромным преимуществом для настройки целевой аудитории контента. Контент, размещенный в одной из таких панелей, отображается только в указанных вами каналах на основе серверной логики, что сокращает время загрузки страницы и количество байт, отправленных по сети. Сочетание этих панелей с адаптивным дизайном CSS способствует созданию более быстрого и гибкого взаимодействия с пользователем. Вместо разных каналов в зависимости от размера экрана, как в предыдущем примере, можно задать канал на основе подстроки "iOS", охватывающий iPad, iPhone и iPad mini и отправляющий единую главную страницу, которая загружает разные CSS в зависимости от разрешения экрана устройства. Например, если бы вы входили в группу Windows Phone, то могли бы выбрать в качестве цели устройства iOS и создать панель для рекламирования Windows Phone. 

Рис. 2 и рис. 3. Пошаговая разработка макетов взаимодействия через браузер и мобильные устройства для новостного сайта на основе функции публикации в нескольких семействах сайтов с использованием адаптивных CSS, панелей каналов устройств и шаблона для отображения, который изменяет внешний вид результатов веб-части поиска контента в зависимости от канала устройств.

В этой публикации было в общих чертах показано, как можно легко определить фирменную символику вашей компании в Интернете с помощью наиболее удобных для вас инструментов и мощной системы управления контентом SharePoint 2013. Чтобы узнать больше, ознакомьтесь с документацией, созданной для вас нашими авторами, в библиотеке MSDN. Статьи Построение сайтов для SharePoint 2013, Обзор Дизайнера в SharePoint 2013 и Разработка структуры сайта в SharePoint 2013 неплохо подходят для начала. Удачи!

— Алисса Левиц (Alyssa Levitz), Руководитель программы, SharePoint 

Это локализованная запись блога. Оригинал статьи см. по ссылке Create your online brand with a combination of SharePoint 2013 and the web technologies you already know