1. The New Design Manager! Louis-Philippe Lavoie SharePoint Specialist GSoft @lplavoie / louis-philippe.lavoie@gsoft.com What does it mean for you? November 23 rd, 2013

2. Description SharePoint Designer no longer has the Design view to help you build your brand in SharePoint. However SharePoint 2013 now offers the new Design Manager to help you convert your Designer’s HTML design into a Master Page. In this session, we will cover the features the Design Manager introduces: HTML to Master Page conversion Device Channels Display Templates Creating Design Packages This session will help you get ahead by understanding what comes out out-of-the-box with the Design Manager to help you build your brand on SharePoint.

3. Thank you to all of our Sponsors!!

4. twitter.com/bniaulin ca.linkedin.com/in/bniaulin benjamin.niaulin@share-gate.com bniaulin.wordpress.com en.share-gate.com/blog Original Slides by: Benjamin Niaulin

5. Who am I? Louis-Philippe Lavoie SharePoint Specialist louis-philippe.lavoie@gsoft.com lplavoie http://ca.linkedin.com/in/lplavoie/

6. Agenda Introduction – Problems and Previous Solutions The Design Manager Requirements and working with it Convert HTML to Master Page Device Channels Display Templates Page Layouts Design Packages Composed Looks

7. INTRODUCTION

8. Old problems   |   XSLT DIV ID=54rffvrh2dh238q7r7 72wdg8wucduasc

9. New Problems

10. The Design Manager

11. Requirements SharePoint Server Publishing Infrastructure This means nothing for Foundation And it also adds a other Web Parts and Features

12. Working with the Design Files

13. DEMO ACTIVATE FEATURE CONNECT FILES

14. Convert HTML to Master Page Work with Dreamweaver or any editor now Edit HTML and SharePoint will turn into Master Page! Using Snippets instead of coding: Step-by-Step convert HTML to Master Page

15. DEMO CONVERT HTML TO MASTER PAGE

16. DEVICE CHANNELS

17. Device Channels Change Master Page based on user agent string Pros vs. Cons Will not replace CSS Media Queries!

18. DISPLAY TEMPLATES

19. Display Template One of the most valuable new features in SharePoint 2013 No more XSLT!

20. Categories of Display Templates Control Similar to ContentQueryMain.xsl Filter, Group and Hover Panel Similar to Header.xsl +more Item Similar to itemstyle.xsl

21. Control The container for the “Groups, Filters and Items” to come Best way to reference custom files (JavaScript, CSS, etc…)

22. Item Controls what happens to each item rendered through the query Use Managed Properties to show the content you want where you want using HTML

23. Editing a Display Template Always comes in 2; a HTML and JS file NEVER edit the JS file – it is automatically generated

24. What is it made of? The Content Search Web Part is essentially 2 things 1. Query Builder 2. Display Templates

25. DESIGN PACKAGES

26. Design Packages Used to be complicated (Unless you had Visual Studio and knew how to use it) Makes it easy to work with third party Creates a WSP for you to deploy in SharePoint Watch out… it’s not perfect

27. COMPOSED LOOKS NOT REALLY DESIGN MANAGER BUT CLOSE

28. Composed Looks

29. Step by Step Composed Looks Preview Files - understanding them Composed Look step by step

30. Join us for SharePint today! Date & Time: Nov 23 rd, 2013 @6:00 pm Location: The Observatory Pub, Algonquin Student’s Association Address: A-170 on Algonquin Campus Parking: No need to move your car! * Site: http://www.algonquinsa.com/ob.aspxhttp://www.algonquinsa.com/ob.aspx *Please drive responsibly! We are happy to call you a cab Remember to fill out your evaluation forms to win some great prizes! &