Download - Design Manager 2013
![Page 1: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/1.jpg)
The New Design Manager!
Louis-Philippe LavoieSharePoint SpecialistGSoft@lplavoie / [email protected]
What does it mean for you?
November 23rd, 2013
![Page 2: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/2.jpg)
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 conversionDevice ChannelsDisplay TemplatesCreating 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.
![Page 3: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/3.jpg)
Thank you to all of our Sponsors!!
![Page 4: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/4.jpg)
twitter.com/bniaulin
ca.linkedin.com/in/bniaulin
bniaulin.wordpress.com
en.share-gate.com/blog
Original Slides by: Benjamin Niaulin
![Page 5: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/5.jpg)
Who am I?
Louis-Philippe LavoieSharePoint Specialist
lplavoie
http://ca.linkedin.com/in/lplavoie/
![Page 6: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/6.jpg)
Agenda
Introduction – Problems and Previous SolutionsThe Design Manager
Requirements and working with itConvert HTML to Master PageDevice ChannelsDisplay TemplatesPage LayoutsDesign Packages
Composed Looks
![Page 7: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/7.jpg)
INTRODUCTION
![Page 8: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/8.jpg)
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> <!-- When empty result set is returned from search --> <xsl:template name="dvt_1.empty"> <div class="srch-results"> <xsl:if test="string-length($SrchRSSLink) > 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">&nbsp;</xsl:text> <xsl:value-of select="$SrchRSSText"/> </a> <xsl:if test="string-length($SearchProviderLink) > 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">&nbsp;</xsl:text> <xsl:value-of select="$SearchProviderText"/> </a> </xsl:if> </xsl:if> </div>
Shar
ePoint
Design
er
XSLT
DIV ID=54rffvrh2dh238q7r772wdg8wucduasc
![Page 9: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/9.jpg)
New Problems
![Page 10: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/10.jpg)
The Design Manager
![Page 11: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/11.jpg)
Requirements
SharePoint Server Publishing Infrastructure
This means nothing for FoundationAnd it also adds a other Web Parts and Features
![Page 12: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/12.jpg)
Working with the Design Files
![Page 13: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/13.jpg)
DEMO
ACTIVATE FEATURECONNECT FILES
![Page 14: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/14.jpg)
Convert HTML to Master Page
Work with Dreamweaver or any editor nowEdit HTML and SharePoint will turn into
Master Page!Using Snippets instead of coding:
Step-by-Step convert HTML to Master Page
![Page 15: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/15.jpg)
DEMOCONVERT HTML TO MASTER PAGE
![Page 16: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/16.jpg)
DEVICE CHANNELS
![Page 17: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/17.jpg)
Device Channels
Change Master Page based on user agent string
Pros vs. Cons
Will not replace CSS Media Queries!
![Page 18: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/18.jpg)
DISPLAY TEMPLATES
![Page 19: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/19.jpg)
Display Template
One of the most valuable new features in SharePoint 2013
No more XSLT!
![Page 20: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/20.jpg)
Categories of Display Templates
ControlSimilar to ContentQueryMain.xsl
Filter, Group and Hover PanelSimilar to Header.xsl +more
ItemSimilar to itemstyle.xsl
![Page 21: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/21.jpg)
Control
The container for the “Groups, Filters and Items” to comeBest way to reference custom files (JavaScript, CSS, etc…)
![Page 22: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/22.jpg)
Item
Controls what happens to each item rendered through the queryUse Managed Properties to show the content you want where you want using HTML
![Page 23: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/23.jpg)
Editing a Display Template
Always comes in 2; a HTML and JS fileNEVER edit the JS file – it is automatically generated
![Page 24: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/24.jpg)
What is it made of?
The Content Search Web Part is essentially 2 things
1. Query Builder
2. Display Templates
![Page 25: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/25.jpg)
DESIGN PACKAGES
![Page 26: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/26.jpg)
Design Packages
Used to be complicated (Unless you had Visual Studio and knew how to use it)Makes it easy to work withthird partyCreates a WSP for you todeploy in SharePoint
Watch out… it’s not perfect
![Page 27: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/27.jpg)
COMPOSED LOOKS
NOT REALLY DESIGNMANAGER BUT CLOSE
![Page 28: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/28.jpg)
Composed Looks
![Page 29: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/29.jpg)
Step by Step Composed LooksPreview Files - understanding them
Composed Look step by step
![Page 30: Design Manager 2013](https://reader036.vdocument.in/reader036/viewer/2022062702/554bebc9b4c9056b348b501c/html5/thumbnails/30.jpg)
Join us for SharePint today!
Date & Time: Nov 23rd, 2013 @6:00 pmLocation: The Observatory Pub,
Algonquin Student’s AssociationAddress: A-170 on Algonquin CampusParking: No need to move your car!*Site: http://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!&