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

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

2. About meFrench, 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

3. 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

4. AgendaLet’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

5. DifferencesBetween 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

6. IntroductionMost SharePoint Intranet portals looks like this…

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

8. A look backDesigning your web site in SharePoint 2010 Navigation Master Pages Custom Catalog HTML Comps Roll-up controls CSS, JS, etc. Integrate Ribbon Catalog Integration Dreamweaver / Photoshop / etc. SharePoint Designer

9. New methodologyDesigning your web site in SharePoint 2013 SharePoint Comps HTML Add controls Snippet Gallery Upload Auto Convert • Navigation • Web parts • Controls • Ribbon • Placeholder Main • Minimal Master CSS, JS, etc. Dreamweaver / etc.

10. Tools and LibrariesSorry, 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

11. 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)

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

13. Elements of the master pageLet’s see if we get it right! Site Icon Search Bar Global Navigation Footer

14. Elements of the page layout and pageLet’s see if we get it right! Image Slider Content Search WebPart Content from Content Type

15. Design ManagerUnder 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)

16. 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) • HotFixfor IE10/Win7(http://support.microsoft.com/kb/2846960) • The “Keep me signed in” option (http://support.microsoft.com/kb/2616712)

17. Snippet gallerySorry, 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

19. Recap for the master pageIf 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

20. 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 links • Item display templates: which control how each search result is displayed and repeated for each result

21. Device ChannelsSearch-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

22. Minimal download strategySearch-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

23. 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 links • Item display templates: which control how each search result is displayed and repeated for each result

24. <thankyou all>