Design Manager 2013

1,500
-1

Published on

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.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,500
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • At the end of the day, please ensure your evaluation is signed and handed in for door prizes. The draw takes place in Room 102A.
  • Design Manager 2013

    1. 1. November 23rd, 2013 The New Design Manager! What does it mean for you? Louis-Philippe Lavoie SharePoint Specialist GSoft @lplavoie / louis-philippe.lavoie@gsoft.com
    2. 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. 3. Thank you to all of our Sponsors!!
    4. 4. Original Slides by: Benjamin Niaulin     twitter.com/bniaulin ca.linkedin.com/in/bniaulin benjamin.niaulin@share-gate.com bniaulin.wordpress.com en.share-gate.com/blog
    5. 5. Who am I? Louis-Philippe Lavoie SharePoint Specialist louis-philippe.lavoie@gsoft.com lplavoie http://ca.linkedin.com/in/lplavoie/
    6. 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. 7. INTRODUCTION
    8. 8. Old problems <xsl:template name="dvt_1.noKeyword"> <span class="srch-description2"> <xsl:choose> <xsl:when test="$IsFixedQuery"> <xsl:value-of select="$NoFixedQuery" /> </xsl:when> <xsl:otherwise> <xsl:value-of select="$NoKeyword" /> </xsl:otherwise> </xsl:choose> </span> </xsl:template> DIV ID=54rffvrh2dh238q7r7 72wdg8wucduasc <!-- When empty result set is returned from search --> <xsl:template name="dvt_1.empty"> <div class="srch-results"> <xsl:if test="string-length($SrchRSSLink) &gt; 0 and $ShowActionLinks"> <a type="application/rss+xml" href ="{$SrchRSSLink}" title="{$SrchRSSText}" id="SRCHRSSL" class="srch-ext-action-margin"> <img style="vertical-align: middle;" border="0" src="/_layouts/images/rss.gif" alt=""/> <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text> <xsl:value-of select="$SrchRSSText"/> </a> <xsl:if test="string-length($SearchProviderLink) &gt; 0"> | <a href ="{$SearchProviderLink}" title="{$SearchProviderText}" class="srch-ext-action-margin" > <img style="vertical-align: middle;" border="0" src="/_layouts/images/searchfolder.png" alt=""/> <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text> <xsl:value-of select="$SearchProviderText"/> </a> </xsl:if> </xsl:if> </div>
    9. 9. New Problems
    10. 10. The Design Manager
    11. 11. Requirements SharePoint Server Publishing Infrastructure This means nothing for Foundation And it also adds a other Web Parts and Features
    12. 12. Working with the Design Files
    13. 13. DEMO ACTIVATE FEATURE CONNECT FILES
    14. 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. 15. DEMO CONVERT HTML TO MASTER PAGE
    16. 16. DEVICE CHANNELS
    17. 17. Device Channels Change Master Page based on user agent string Pros vs. Cons Will not replace CSS Media Queries!
    18. 18. DISPLAY TEMPLATES
    19. 19. Display Template One of the most valuable new features in SharePoint 2013 No more XSLT!
    20. 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. 21. Control The container for the “Groups, Filters and Items” to come Best way to reference custom files (JavaScript, CSS, etc…)
    22. 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. 23. Editing a Display Template Always comes in 2; a HTML and JS file NEVER edit the JS file – it is automatically generated
    24. 24. What is it made of? The Content Search Web Part is essentially 2 things 1. Query Builder 2. Display Templates
    25. 25. DESIGN PACKAGES
    26. 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. 27. COMPOSED LOOKS NOT REALLY DESIGN MANAGER BUT CLOSE
    28. 28. Composed Looks
    29. 29. Step by Step Composed Looks Preview Files - understanding them Composed Look step by step
    30. 30. Remember to fill out your evaluation forms to win some great prizes! & Join us for SharePint today! Nov 23rd, 2013 @6:00 pm 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.aspx Date & Time: Location: *Please drive responsibly! We are happy to call you a cab 
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×