design manager 2013

The New Design Manager!

Louis-Philippe LavoieSharePoint SpecialistGSoft@lplavoie / louis-philippe.lavoie@gsoft.com

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

benjamin.niaulin@share-gate.com

bniaulin.wordpress.com

en.share-gate.com/blog

Original Slides by: Benjamin Niaulin

Who am I?

Louis-Philippe LavoieSharePoint Specialist

louis-philippe.lavoie@gsoft.com

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) &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>

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!&