Developing Branding Solutions for 2013

1. Developing Branding Solutions for 2013 Presented by Thomas Daly

2. About Me  SharePoint Consultant  Developer  Branding  Focused on the UI side of things  Community Involvement  Speaker  NJ SharePoint User Group  SharePoint Saturday NYC Organizer  SharePoint Saturday NJ Organizer  My SharePoint Blog  MSDN forums

3. Topics for Discussion  Branding Assets  Creating Branding Based Projects in Visual Studio 2013  Deploying Assets for On-Prem / O365  Themes  CSS, Images & JavaScript  Master Pages  Composed Looks  Additional Page Head  Feature Receivers  CSSRegistration, ScriptLink, Cache Busting  Tools for improved development

4. What are Branding Assets? Master Page CSS Composed Look Images Web Fonts JavaScript

5. Special Considerations  Are you On-Prem / O365?  Will it be a Sandbox or Farm level solution?  Will it be Site or Web based scoping?  Aka (SPSite, SPWeb)  Aka (Site Collection, Site)  Will you be auto applying master pages, themes or composed looks?  Will you be pushing branding down to sub sites?  Do you have Single Site Collection or Multiple?  Will you need any additional scripts to programmatically apply / un-apply?

6. Example 1 Deploying Master Pages, Images, CSS & JavaScript

7. Example 1 Deploying Master Page, Images, CSS, & Javascript  Mapped Images Folder  Feature Image  Mapped Layouts Folder / Style Library  CSS Files  Images  JS Files  Modules  Master Pages

8. Example 1 Review  Created Module to deploy .master file  Created Mapped folder for CSS, images & JavaScript  Create Module for Style Library

9. Example 1 Key Concepts Modules & Elements  There may be times when you may want to deploy files to the SharePoint server regardless of their file type, such as new master pages.  To do this, you can use Modules (not to be confused with Visual Basic code modules).  Modules are containers for files in a SharePoint solution. When the solution is deployed, the files in the module are copied to the specified folders on the SharePoint server.  An Element is an atomic unit within a Feature.  There are several types of elements that can be included in a Feature.  More info on Module Items and Elements  More info on Element Types

10. Example 1 Key Concepts Module – Master Page  Module  Path – Location in the Project  Url – Location on the Server  File  Type – GhostableInLibrary, can edit with Designer  Level – Published so it’s auto approved  ReplaceContent – True so future packages will overwrite  Properties  UIVersion – the targeted version of SP  ContentTypeId – value for Master Page content type  Title – Title of the master page

11. Example 1 Key Concepts Module – Style Library  Module  Path – Location in the Project  Url – Location on the Server  File  Type – GhostableInLibrary, can edit with Designer  Level – Published so it’s auto approved  ReplaceContent –True so future packages will overwrite

12. Example 2 Deploying a Composed Look

13. Composed Looks (Theming)  Theming provides a quick and easy way to apply lightweight branding to a SharePoint 2013 site  A composed look, or design, is the color palette, font scheme, background image, and master page that determine the look and feel of a site.

14. Example 2 Deploying a Composed Look  Components  Master Page  Theme Palette  Background Image [optional]  Font Scheme [optional]  Options  Declarative [Code – On-Prem]  Imperative [XML - Sandbox / O365] Deploying a custom Composed Look in SP2013 • Part 1 • Part 2

15. Example 2 Review  Create Module for .spcolor file (theme)  Create Element for Composed Look definition  Create Module for custom Master Page  Add and supporting images / fonts

16. Example 2 Key Concepts Module - Theme  Module  Path – Location in the Project  Url – Location on the Server  File  Type – GhostableInLibrary, can edit with Designer  Level – Published so it’s auto approved  ReplaceContent –True so future packages will overwrite

17. Example 2 Key Concepts Elements – Composed Look  The Definition of the Composed Look  Title & Name – Name of the Composed Look  MasterPageUrl – url of the master page  ThemeUrl – url of the .spcolor file  ImageUrl – url of background image  FontSchemeUrl –url of .spfont file  DisplayOrder – Order in which is will appear in the list

18. Example 3 Additional Page Head

19. Example 3 Additional Page Head  Additional Page Head is a delegate control located in the <HEAD> of SharePoint master pages. Can be used to load multiple controls via code without touching the master page directly.  What could is be used for?  Scenario 1 – Need a master page that is full width & one that is fixed width.  Scenario 2 – Need two create two distinct site brands and master page layout is the same or similar  Scenario 3 – Need to apply different style sheet on sub site to change fonts or colors  Additional Page Head can attach different style sheets to the same master page.  Minimize overhead of maintaining multiple master pages

20. Example 3 Review  Add Style Sheet / JavaScript  Create User Control  Link User Control to CSS / JS  Create Elements linked to User Control

21. Example 3 Key Concepts User Control [On-Prem]  Links to our additional style sheet or JavaScript  User Controls supported in On-Prem only

22. Example 3 Key Concepts Elements  Contains the point to the User Control  Id – where the control will be loaded  ControlSrc – path to the User Control  Sequence – Order in which is appears [if multiple]  For Sandbox / o365  Link directly to the CSS in the elements  Use JavaScript to write the link to the CSS [Hacky] <CustomAction Id="SiteCSS" Location="ScriptLink" ScriptBlock="document.write('<link rel="stylesheet" type="text/css" href="/_layouts/15/SPS.SP2013.Branding/example3/css/examp le3.cssquot;></' + 'link>');" Sequence="203" />

23. Example 4 Feature Receivers

24. Example 4 Feature Receivers  Feature event receivers are methods that execute when one of the following feature-related events occurs in SharePoint:  A feature is installed.  A feature is activated.  A feature is deactivated.  A feature is removed.  Feature Receivers in branding can be used for:  Apply Composed Look  Apply Master Page  Apply Site Logo  Apply branding to all sub sites  Auto Apply Parent Branding on New Site Creation  Feature Receivers are code so best for on-prem only.  At the moment Sandbox can run code but it’s depreciated in the next release.  Sandbox has a hard limit to how long a sandboxed solution can take to be completed.  By default, this is 30 seconds

25. Example 4 Review Feature Receiver – Activated & Deactivating  Add Master Page, CSS, Images & JavaScript like previous examples  Add Feature Receiver  Add code to enable specific branding features  Introduced public class to hold constants  Introduced helper class w/ common branding functions  Branding & Provisioning for SharePoint Online & Office 365

26. Example 4 Review Web Provisioned Event Receiver  By default, (Non-Publishing) SharePoint does not trickle down applied themes, master page & css  By creating Site Provisioned Event Handler we can make the new children sites have the same branding as their parent.  Common things to set are:  Apply Master Page (Site & System)  Apply Site Logo  Apply Alternative CSS  Apply Parent Navigation  Apply Composed Look  Added the Synchronous property to the Web Provisioned Event Receiver will ensure Composed Look is applied before the site is display after it’s initial creation.

27. Example 5 CSSRegistration, ScriptLink, Cache Busting

28. Example 5 CSS Registration  SharePoint:CSSRegistration  Used to register CSS files with SharePoint  Prevents loading file multiple times  Can control what file it will load after  Using with files in _layouts will produce Cache Busting effect  Supports Dynamic Urls for Site Collection / Site  Supports Conditional CSS  Good to use in Web Parts  More details on CSSRegistration

29. Example 5 ScriptLink  SharePoint:ScriptLink  Used to register JS files with SharePoint  Prevents loading file multiple times  Can control what file it will load after  Using with files in _layouts will produce Cache Busting effect  Supports Dynamic Urls for Site Collection / Site  Good to use in Web Parts

30. Example 5 Cache Busting  Using CSSRegistration & ScriptLink auto adds ?rev={hd5 hash}  Files must also be stored in the _layouts, using the Style Library or another folder will not generate a hash  This changes whenever the file is updated making the browser think that it doesn’t have it and forces a re-download  Cache Busting can be done manually – when you update css or javascript append a ?ver=x.x.x or anything different on the end of the url  This does not always update automatically. Sometimes it needs a IISRESET

31. Tools for improved development

32. Tools  CKS: Developer Tools - http://cksdev.codeplex.com/  Must have for Quick Deploy alone  Mindscape Web Work Bench - https://visualstudiogallery.msdn.microsoft.com/2b 96d16a-c986-4501-8f97-8008f9db141a  Sass / Less Support  Bundle  Minify

33. Questions?  Contact Info  Thomas M Daly  Website – http://thomasdaly.net  Twitter - _tomdaly_  Email  TDaly@BandRSolutions.com [work]  Tom.M.Daly@gmail.com [personal]  LinkedIn

Developing Branding Solutions for 2013

Du liest eine Vorschau.

Hier ansehen

Developing Branding Solutions for 2013

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie Developing Branding Solutions for 2013 (20)

Weitere von Thomas Daly (20)

Aktuellste (20)