design manager 2013
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.TRANSCRIPT
The New Design Manager!
Louis-Philippe LavoieSharePoint SpecialistGSoft@lplavoie / [email protected]
What does it mean for you?
November 23rd, 2013
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.
Thank you to all of our Sponsors!!
twitter.com/bniaulin
ca.linkedin.com/in/bniaulin
bniaulin.wordpress.com
en.share-gate.com/blog
Original Slides by: Benjamin Niaulin
Who am I?
Louis-Philippe LavoieSharePoint Specialist
lplavoie
http://ca.linkedin.com/in/lplavoie/
Agenda
Introduction – Problems and Previous SolutionsThe Design Manager
Requirements and working with itConvert HTML to Master PageDevice ChannelsDisplay TemplatesPage LayoutsDesign Packages
Composed Looks
INTRODUCTION
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
New Problems
The Design Manager
Requirements
SharePoint Server Publishing Infrastructure
This means nothing for FoundationAnd it also adds a other Web Parts and Features
Working with the Design Files
DEMO
ACTIVATE FEATURECONNECT FILES
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
DEMOCONVERT HTML TO MASTER PAGE
DEVICE CHANNELS
Device Channels
Change Master Page based on user agent string
Pros vs. Cons
Will not replace CSS Media Queries!
DISPLAY TEMPLATES
Display Template
One of the most valuable new features in SharePoint 2013
No more XSLT!
Categories of Display Templates
ControlSimilar to ContentQueryMain.xsl
Filter, Group and Hover PanelSimilar to Header.xsl +more
ItemSimilar to itemstyle.xsl
Control
The container for the “Groups, Filters and Items” to comeBest way to reference custom files (JavaScript, CSS, etc…)
Item
Controls what happens to each item rendered through the queryUse Managed Properties to show the content you want where you want using HTML
Editing a Display Template
Always comes in 2; a HTML and JS fileNEVER edit the JS file – it is automatically generated
What is it made of?
The Content Search Web Part is essentially 2 things
1. Query Builder
2. Display Templates
DESIGN PACKAGES
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
COMPOSED LOOKS
NOT REALLY DESIGNMANAGER BUT CLOSE
Composed Looks
Step by Step Composed LooksPreview Files - understanding them
Composed Look step by step
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!&