Transcript Branding SharePoint 2013

XSLT? Where we are going, we don’t need XSLT.
About me
French, SharePoint Developer and Food Lover
Khoa Quach
SharePoint Technologies MCTS,
MCPD, MCSE
Co-founded NIFTIT in Brooklyn
Specializes in SharePoint
Integration
Application Development
Branding Solution
Mobile Solution
@niftykhoa
@NIFTIT
Who is the session for?
Wait, Don’t leave yet!
This session will be mainly for:
Front-End Developers
SharePoint 2013 Developers
There will be some tricks and tips for:
SharePoint 2010 Developers
Agenda
Let’s get started!
This session will cover:
Differences between SP 2010 & SP 2013
Tools and Libraries
Basic SharePoint Branding Knowledge
Review of Design Manager
Demo & Best Practices
Differences
Between 2010 & 2013!
From a Branding Development Prospective:
No More Table Markup
Say Bye to XSLT
Use your favorite Web Editor
Introduce Design Manager
Client Side Improvements
Image Rendition
Minimal Download Strategies
REST
Methodology
Introduction
Most SharePoint Intranet portals looks like this…
Successful branding examples
This is a majority of the intranet site at the moment
A look back
Designing your web site in SharePoint 2010
HTML
Comps
CSS,
JS, etc.
Dreamweaver /
Photoshop / etc.
SharePoint Designer
New methodology
Designing your web site in SharePoint 2013
SharePoint
HTML
Comps
Upload
CSS,
JS,
etc.
Auto
Convert
Dreamweaver / etc.
Add
controls
Snippet
Gallery
Tools and Libraries
Sorry, No Hoverboard Allowed!
Here are the tools you can use to brand your site:
Visual Studio 2012/2013
SharePoint Designer 2013
Web Development Editor/Tool
And some optional libraries:
JQuery +1.7.1
Bootstrap.js
Angular.js, Backbone.JS, Ember.JS
Knockout.JS
CoffeeScript.js
SharePoint page model
Some 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)
Analyzing the design
Let’s see if we get it right!
Elements of the master page
Let’s see if we get it right!
Site Icon
Search Bar
Global
Navigation
Footer
Elements of the page layout and page
Let’s see if we get it right!
Image Slider
Content Search
WebPart
Content
from
Content
Type
Design Manager
Under the hood!
Access/Upload to assets and pages
Convert HTML to ASP.NET master page
Snippet Gallery
Design Packages
Device Channels
Display templates (No more XSLT)
Access network map
As 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/71
991/office-365-sharepoint-access-denied-errorwhen-mapping-webdav)
HotFix for IE10/Win7
(http://support.microsoft.com/kb/2846960)
The “Keep me signed in” option
(http://support.microsoft.com/kb/2616712)
Snippet gallery
Sorry, No Hoverboard Allowed!
Site Icon
Global Navigation
Search Box
Site Title
Edit Mode
Trim Security
Device Channel Panel
Media and Content
OOB Web Parts
Custom ASP.Net Markup
Recap for the master page
If it was too fast!
Analyze your design and define SP page model
elements to be used
For 2013:
Simply copy and paste your HTML markup into the
master page but analyze
Segregate the master page elements from the page
layout(s)
Stick to one methodology: HTML or SP
Branding search components
Search-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 links
Item display templates: which control how each
search result is displayed and repeated for each
result
Device Channels
Search-driven web parts and display templates
For content negotiations
Use to differentiate master page
Target different content with device channel panels
Good to inform older browsers users to update or
be aware
Minimal download strategy
Search-driven web parts and display templates
New feature in SP 2013
Reduce Page Load time
Only send the difference when users navigate to
new page
Branding search components
Search-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 links
Item display templates: which control how each
search result is displayed and repeated for each
result
<thank
you all>