branding share point 2013

24
XSLT? Where we are going, we don’t need XSLT.

Upload: khoa-quach

Post on 19-May-2015

611 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Branding share point 2013

XSLT? Where we are going, we don’t need XSLT.

Page 2: Branding share point 2013

About meFrench, SharePoint Developer and Food Lover

Khoa QuachSharePoint Technologies MCTS, MCPD, MCSECo-founded NIFTIT in BrooklynSpecializes in SharePoint

IntegrationApplication DevelopmentBranding SolutionMobile Solution

@niftykhoa

@NIFTIT

Page 3: Branding share point 2013

Who is the session for?Wait, Don’t leave yet!

This session will be mainly for:Front-End DevelopersSharePoint 2013 Developers

There will be some tricks and tips for:SharePoint 2010 Developers

Page 4: Branding share point 2013

AgendaLet’s get started!

This session will cover:Differences between SP 2010 & SP 2013Tools and LibrariesBasic SharePoint Branding KnowledgeReview of Design ManagerDemo & Best Practices

Page 5: Branding share point 2013

DifferencesBetween 2010 & 2013!

From a Branding Development Prospective:No More Table MarkupSay Bye to XSLTUse your favorite Web EditorIntroduce Design ManagerClient Side Improvements

Image RenditionMinimal Download StrategiesREST

Methodology

Page 6: Branding share point 2013

IntroductionMost SharePoint Intranet portals looks like this…

Page 7: Branding share point 2013

Successful branding examplesThis is a majority of the intranet site at the moment

Page 8: Branding share point 2013

A look backDesigning your web site in SharePoint 2010

Comps

CSS, JS, etc.

HTML

Integrate Ribbon

Master

Pages

Roll-up

controls

Dreamweaver / Photoshop / etc.

SharePoint Designer

Navigation

Custom Catalog

Catalog Integration

Page 9: Branding share point 2013

New methodologyDesigning your web site in SharePoint 2013

SharePoint

Dreamweaver / etc.

• Ribbon

• Placeholder Main

• Minimal Master • Navigation

• Web parts

• Controls

Auto Convert

SnippetGallery

Add controlsUpload

Comps

CSS, JS,

etc.

HTML

Page 10: Branding share point 2013

Tools and LibrariesSorry, No Hoverboard Allowed!

Here are the tools you can use to brand your site:Visual Studio 2012/2013SharePoint Designer 2013Web Development Editor/Tool

And some optional libraries:JQuery +1.7.1Bootstrap.jsAngular.js, Backbone.JS, Ember.JSKnockout.JSCoffeeScript.js

Page 11: Branding share point 2013

SharePoint page modelSome basic concept

SharePoint uses templates to define and render the pages that a site displays.

Master pages define the shared framing elements (AKA the chrome) for all pages in your site.Page layouts define the layout for a specific class of pages.Pages are created from a page layout by authors who add content to page fields.

RENDERED PAGE =

Master page + Page layout + page (content)

Page 12: Branding share point 2013

Analyzing the designLet’s see if we get it right!

Page 13: Branding share point 2013

Elements of the master pageLet’s see if we get it right!

Site Icon Search Bar

Global Navigation

Footer

Page 14: Branding share point 2013

Elements of the page layout and pageLet’s see if we get it right!

Image Slider

Content Search WebPart

Content from

Content Type

Page 15: Branding share point 2013

Design ManagerUnder the hood!

Access/Upload to assets and pagesConvert HTML to ASP.NET master pageSnippet GalleryDesign PackagesDevice ChannelsDisplay templates (No more XSLT)

Page 16: Branding share point 2013

Access network mapAs requested for NYCSDUG 2014

This should be straight forward for on-prems but here are possible solution for online.

Internet Explorer Configuration Answer(click here)The “WebDav” Fix(http://sharepoint.stackexchange.com/questions/71991/office-365-sharepoint-access-denied-error-when-mapping-webdav)HotFix for IE10/Win7(http://support.microsoft.com/kb/2846960)The “Keep me signed in” option (http://support.microsoft.com/kb/2616712)

Page 17: Branding share point 2013

Snippet gallerySorry, No Hoverboard Allowed!

Site IconGlobal NavigationSearch BoxSite TitleEdit ModeTrim SecurityDevice Channel PanelMedia and ContentOOB Web PartsCustom ASP.Net Markup

Page 18: Branding share point 2013
Page 19: Branding share point 2013

Recap for the master pageIf it was too fast!

Analyze your design and define SP page model elements to be usedFor 2013:

Simply copy and paste your HTML markup into the master page but analyzeSegregate the master page elements from the page layout(s)Stick to one methodology: HTML or SP

Page 20: Branding share point 2013

Display templates control which managed properties appear in the search results of a search-driven Web Part and the styling and behavior of those search results.

Control display templates: control the layout of search results and any elements common to all results such as paging, sorting, and other linksItem display templates: which control how each search result is displayed and repeated for each result

Branding search componentsSearch-driven web parts and display templates

Page 21: Branding share point 2013

Device ChannelsSearch-driven web parts and display templates

For content negotiationsUse to differentiate master pageTarget different content with device channel panelsGood to inform older browsers users to update or be aware

Page 22: Branding share point 2013

Minimal download strategySearch-driven web parts and display templates

New feature in SP 2013Reduce Page Load timeOnly send the difference when users navigate to new page

Page 23: Branding share point 2013

Branding search componentsSearch-driven web parts and display templates

Display templates control which managed properties appear in the search results of a search-driven Web Part and the styling and behavior of those search results.

Control display templates: control the layout of search results and any elements common to all results such as paging, sorting, and other linksItem display templates: which control how each search result is displayed and repeated for each result

Page 24: Branding share point 2013

<thankyou all>