branding share point 2013
TRANSCRIPT
![Page 1: Branding share point 2013](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/1.jpg)
XSLT? Where we are going, we don’t need XSLT.
![Page 2: Branding share point 2013](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/2.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/3.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/4.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/5.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/6.jpg)
IntroductionMost SharePoint Intranet portals looks like this…
![Page 7: Branding share point 2013](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/7.jpg)
Successful branding examplesThis is a majority of the intranet site at the moment
![Page 8: Branding share point 2013](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/8.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/9.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/10.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/11.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/12.jpg)
Analyzing the designLet’s see if we get it right!
![Page 13: Branding share point 2013](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/13.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/14.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/15.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/16.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/17.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/18.jpg)
![Page 19: Branding share point 2013](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/19.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/20.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/21.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/22.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/23.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052523/555a6a81d8b42a972b8b4b0b/html5/thumbnails/24.jpg)
<thankyou all>