Transcript Document
by Khoa Quach About Me Khoa Quach SharePoint Technologies MCTS, MCPD, MCSE Co-founder of NIFTIT Specializes in SharePoint Integration Application Development Branding Solution Mobile Solution @niftykhoa @NIFTIT THIS SESSION IS FOR Front-End Developers SharePoint 2013 Developers SharePoint 2010 Developers Agenda Differences between SP 2010 & SP 2013 Tools and Libraries Basic SharePoint Branding Knowledge Review of Design Manager Demo & Best Practices SP 2010 v.s SP 2013 From Branding Development Perspective 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 What most SharePoint Intranet portals look like Branding Examples What successful intranet sites look like A Look Back Designing your website in SharePoint 2010 HTML Comps Java, HTML, etc. Dreamweaver / Photoshop / etc. Roll-up controls SharePoint Designer New Methodology Designing your website in SharePoint 2013 SharePoint HTML Comps Java, HTML, etc. Upload Auto Convert Add Control • Ribbon • Placeholder Main • Minimal Master Dreamweaver, etc. Snippet Gallery • Navigation • Web parts • Controls Support Browser Supported Internet Explorer 11 X Internet Explorer 10 X Internet Explorer 9 X Internet Explorer 8 X Not supported Internet Explorer 7 X Internet Explorer 6 X Google Chrome (latest released version) X Mozilla Firefox (latest released version) X Apple Safari (latest released version) X Tools & Libraries Tools you can use to brand your site Visual Studio 2012/2013 SharePoint Designer 2013 Web Development Editor/Tool Optional Libraries JQuery +1.7.1 Bootstrap.js Angular.js, Backbone.JS, Ember.JS, Knockout.JS SharePoint Page Model SharePoint uses templates to define and render the pages that a site displays. Master Page Page Layout Page (Content) RENDERED PAGE 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. Analyzin g the Design Site Icon Search Bar Global Navigation Elements of Master Page Footer Image Slider Elements of Page Layout & Page Content Search Web Part Content from Content Type Design Manager 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 Some online possible solutions: 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 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: Master Page 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 that is 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 Let’s connect! @niftykhoa @NIFTIT