Post on 25-May-2015
description
The Design ManagerWhat does it mean for you?
with Benjamin NiaulinSharePoint GEEK
DescriptionSharePoint 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.
@bniaulin
Who is this guy?
Benjamin Niaulin
Speaker
Trainer
ConsultantGeek
en.share-gate.comBlog:
bniaulin.wordpress.com
@bniaulin
Our Agenda
1 2 3 4
5 6 7 8
Problems
ConvertHTML
2Master
DisplayTemplates
Requirements
DeviceChannels
DesignPackage
ComposedLook
Page Layouts
Our Agenda
1 2 3 4
5 6 7 8
ProblemsProblems
Situations we faced
!!!!<xsl:template!name="dvt_1.noKeyword">!!!!!!!!!<span!class="srch<descrip>on2">!!!!!!!!!!!!!<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!$ShowAc>onLinks">!!!!!!!!!!!!!!!!!<a!type="applica>on/rss+xml"!href!="{$SrchRSSLink}"!>tle="{$SrchRSSText}"!id="SRCHRSSL"!class="srch<ext<ac>on<margin">!!!!!!!!!!!!!!!!!!!!!<img!style="ver>cal<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}"!>tle="{$SearchProviderText}"!class="srch<ext<ac>on<margin"!>!!!!!!!!!!!!!!!!!!!!!!!!!<img!style="ver>cal<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>!!
XSLT
SharePoint
Designer
New Problems!
Where is the Design View!?
What will we do?
The Design Manager!
Requirements
1 2 3 4
5 6 7 8
Problems
Requirements
Requirements
This means nothing for FoundationAnd it also adds other Web Parts and Features
Work directly from your drive
Demo
time to tweet... @bniaulin
HTML to Master Page
1 2 3 4
5 6 7 8
Problems
Requirements ConvertHTML
2Master
Convert HTML to Master Page
Step-by-Step Convert HTML to Master Page
Like Magic!
Warning! Boring Slide
In the Design Manager
In SharePoint Designer
Snippets make it happen
Demo
time to tweet... @bniaulin
Device Channels
1 2 3 4
5 6 7 8
Problems
Requirements ConvertHTML
2Master Device
Channels
Device Channels
Change Master Page based on user agent stringWill not replace Media Queries - it’s different
Display Templates
1 2 3 4
5 6 7 8
Problems
Requirements ConvertHTML
2Master Device
Channels
DisplayTemplates
DisplayTemplates
NO MORE XSLT
it’s everywhere
Do not touch the JS
file
ControlTemplates
ItemTemplates
Demo
time to tweet... @bniaulin
Page Layouts
1 2 3 4
5 6 7 8
Problems
Requirements ConvertHTML
2Master Device
Channels
DisplayTemplates
DisplayTemplates
Page LayoutsPage Layouts
Page Layout
Work
with HTML
Add layout
snippets
Design Package
1 2 3 4
5 6 7 8
Problems
Requirements ConvertHTML
2Master Device
Channels
DisplayTemplates
DisplayTemplates
DesignPackageDesign
PackagePage Layouts
Design PackageCreates a WSP for you to deploy
Used to be complicated
(Unless you had Visual Studio and
knew how to use it)
Makes it easy to work with
third party
NOT PERFECT
Demo
time to tweet... @bniaulin
Composed Look
1 2 3 4
5 6 7 8
Problems
Requirements ConvertHTML
2Master Device
Channels
DisplayTemplates
DisplayTemplates
DesignPackageDesign
Package
ComposedLook
ComposedLook
Composed Look
step by step
Composed Look step by step
Understanding and creating Preview Files
Thank you
Benjamin Niaulin
Speaker
Trainer
ConsultantGeek
en.share-gate.comBlog:
bniaulin.wordpress.com
@bniaulin