Let’s brand it! Корпоративный стиль для SharePoint портала

1. Let’s brand it!Корпоративный стиль для SharePoint портала Артем Уткин, Lizard Soft

2. Design Manager • Доступность:SharePoint Server 2013—Standard Edition;SharePoint Server 2013—Enterprise Edition. • Активация:Site collection feature: SharePoint Server Publishing InfrastructureSite feature: SharePoint Server Publishing

3. Design Manager • Возможности: • управление главными страницами (master pages), • управление макетами страниц (page layouts), • html варианты мастер-страниц и макетов-страниц, • управление шаблонами отображения (display templates) для search driven веб-частей, • управление каналами устройств (Device Channels), • создание пакета решения.

4. Device Channels • Каналы устройств: • предназначение:разделение дизайна для разных устройств (браузеров): мастер-страницы или device channel panels; • создание:указание фрагмента строки агента браузера (например, MSIE 9.0 для Internet Explorer 9); • очередность: • лимит: 10 каналов

5. Adaptive / Responsive Design • в отзывчивом дизайне: • применение гибкого макета на основе сетки (grid-basedlayout): использование пропорций в размерах (width: 25%); • использование гибких изображений (flexibleimages): max-width: 100%; • работа с медиа-запросами (mediaqueries):@media only screen and (min-width: 480px) {div.welcomeTitle { float:none; }}@media only screen and (min-width: 1300px){div.welcomeTitle{ float:left; }} • в дополнение к этому в адаптивном дизайне: • применение постепенного улучшения (Progressive enhancement).

6. Adaptive / Responsive Design • Почему это всё не работало в SharePoint 2010: • <meta http-equiv="X-UA-Compatible" content="IE=8"/>, • IE8 не поддерживает медиа-запросы, • ошибки в режиме IE9, • неполная кроссбраузерность.

7. Общие недостатки адаптивного дизайна • Трудно умещать в одной странице полную версию сайта и упрощённую для мобильных устройств. • Большой вес страницы, что влияет на скорость загрузки данных в условиях EDGE или 3G.

8. Device Channelsand Master Pages Когда нужны каналы устройств (мои рекомендации): • для не более, чем 2-ух мастер-страниц: • облегчённая мастер-страница для мобильных устройств, • основная мастер-страница, использующая медиа-запросы и спроектированная с использованием прогрессивного улучшения. • для панелей каналов устройств (Device Channel Panel): • применение специфических css, javascript; • отображение или скрывание определённого контента в зависимости от устройства.

9. HTML5 template

10. HTML5 template @media only screen and ( min-width: 768px) and ( max-width: 980px ) @media only screen and ( max-width: 767px)

11. Snippets

12. Snippets

13. Snippet structure .html .master

14. Device Channel Panel * Нельзяпомещать display templates или Web Part Zone

15. Master page before CSSing

16. CSS Specificity На один и тот же элемент могут указывать множество css-селекторов. Например, div > input или input.class1 Селектор с наибольшей специфичностью побеждает.CSSспецифичность представляет собой группу из 4 чисел: a c b d

17. CSS Specificity <input id="loginName" type="text"class="namelogin" style=" " />

18. Web-developer tools

19. CSS overriding

20. Советы

21. Советыэлементы страницы SharePoint divid="s4-workspace" Рабочее пространство страницы. Область с вертикальной и горизонтальной прокруткой. Её размеры устанавливаются с помощью javascript при загрузке страницы и изменении размера окна.

22. Советыэлементы страницы SharePoint input id="_maintainWorkspaceScrollPosition" Хранение scrollTopсвойства области s4-workspace при PostBack’е страницы

23. Советыэлементы страницы SharePoint divid="s4-titlerow" Шапка страницы. При открытии риббона происходит скрывание элемента с ID "s4-titlerow". Указывайте такой ID шапке, иначе риббон будет смещать всю страницу вниз.

24. Советы Делайте высоту шапки 91px, что равно высоте риббона. Это нужно для того, чтобы страница не прыгала при открытии/закрытии риббона

25. Советы Не делайте фиксированную ширину страницы. Если требуется фиксированная ширина для определённых страниц, сделайте для них отдельную версию мастер-страницы. Для остальных же страниц используйте резиновую ширину страницы.

26. Советы Используйте класс "ms-dialogHidden" для элементов, которые не должны быть в модальном окне. Продумывайте, что должно отображаться в модальном окне.

27. Советы Предусматривайте отдельные css-правила для режима "Focusonconent". При включении этого режима тэгу body добавляется класс "ms-fullscreenmode".

28. Советы Не меняйте стандартные изображения SharePoint, которые находятся в общих для всей фермы папках layouts или images. Например, для картинки внутри ссылки: <ahref=""><imgsrc=""/></a> Используйте css-правила: a {display:block;background-image:url('image_url'); } a > img{display:none;}

29. Советы Знакомьте дизайнера с основными элементами страницы, которые должны присутствовать, так как без них теряется возможность нормально работать с сайтом.

30. Советы Например: 1. Риббон. 2. Кнопка "Siteactions". 3. Меню пользователя. 4. Bradcrumbs (хлебные крошки). 4. Блок нотификации, который выезжает справа. 5. Блок "pageStatusBar" - горизонтальная полоска с информацией под шапкой. 6. Quicklaunch - из-за дополнительных компонентов, которые появляются в зоне быстрого запуска в зависимости от контекста.

31. Советы Учитывайте разметку многих стандартных контроловSharePoint. Например, TreeView или SPGridViewрендерятся таблицами, а не div’ами. Ищите компромисс между дизайном таких контролов и потребностью в дополнительной разработке.

32. Советы Учитывайте, что у пользователя на ПК может быть увеличен размер шрифтов в ОС, что влияет на масштаб просматриваемой страницы в браузере.

33. Советы Всегда разделяйте html, css и javascript. Не используйте embeddedstyle или script. Не используйте inline style.