Branding SharePoint 2013
•Transferir como PPTX, PDF•
2 gostaram•3,831 visualizações
Khoa Quach's presentation on Branding SharePoint 2013 at SharePoint Saturday NYC 2014
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a Branding SharePoint 2013
Semelhante a Branding SharePoint 2013 (20)
Mais de NIFTIT
Mais de NIFTIT (9)
Último
Último (20)
Branding SharePoint 2013
- 1. by Khoa Quach SPS NYC 2014
- 2. 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
- 3. THIS SESSION IS FOR Front-End Developers SharePoint 2013 Developers SharePoint 2010 Developers
- 4. Differences between SP 2010 & SP 2013 Tools and Libraries Basic SharePoint Branding Knowledge Review of Design Manager Demo & Best Practices Agenda
- 5. 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 SP 2010 v.s SP 2013 From Branding Development Perspective
- 6. Introduction What most SharePoint Intranet portals look like
- 7. Branding Examples What successful intranet sites look like
- 8. A Look Back Designing your website in SharePoint 2010 Dreamweaver / Photoshop / etc. SharePoint Designer Roll-up controls Comps HTML Java, HTML, etc.
- 9. New Methodology Designing your website in SharePoint 2013 Dreamweaver, etc. Comps HTML Java, HTML, etc. Auto Convert Snippet Gallery Upload Add Control • Ribbon • Placeholder Main • Minimal Master • Navigation • Web parts • Controls SharePoint
- 10. Support Browser Supported Not supported Internet Explorer 11 X Internet Explorer 10 X Internet Explorer 9 X Internet Explorer 8 X 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
- 11. Tools & Libraries Tools you can use to brand your site Visual Studio 2012/2013 SharePoint Designer 2013 Web Development Editor/Tool JQuery +1.7.1 Bootstrap.js Angular.js, Backbone.JS, Ember.JS, Knockout.JS Optional Libraries
- 12. SharePoint Page Model 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. Master Page Page Layout Page (Content) RENDERED PAGE
- 14. Elements of Master Page Site Icon Search Bar Global Navigation Footer
- 15. Elements of Page Layout & Page Image Slider Content Search Web Part Content from Content Type
- 16. 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)
- 17. 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-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)
- 18. 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
- 20. 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
- 21. Branding Search Components 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 Search-driven web parts and display templates
- 22. 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
- 23. 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
Notas do Editor
- Resources: http://msdn.microsoft.com/en-us/library/jj163942.aspx No more tables: - Huge markups improvements Design Package: A design package does not include pages, navigation settings, or the term store. Design Manager: - Helps you create branding with HTML, CSS and JS available in publishing sites in both SharePoint Server 2013 and Office 365 Client Site: rendering controls such as image renditions Minimal Download strategies REST In terms of authoring, SP 2013 introduces some great feaures: Cross site publishing utilizes the search service application and index. I will provide demo on authoring capabilities at a later date. Managed navigation. This is a very cool features tool. Not only it allows you to have “pretty” URLs but you will be able to work with one page design concept that dynamically loads content. In other words, one page to manage and develop from a front end prospective. Content Search Web Part. Although not available throughout the platform and versions of SP2013, this is a key components of the new SP version that will be demo in session 2.
- Most of enterprise looking to develop branding solution will start with the Out of the Box (OOB) branding solution provided by MS SP. This is not necessarily due to a lack of branding solution development knowledge but a lack of priority. In fact, most new implementation will focus on the architecture, topology, business intelligence development, search configuration or any other pillars that makes SharePoint a great products… but will always leave branding as secondary priority. And no, just changing the logo to your company logo does not create a branding solution Although you have the option to create a theme, this will not answer all the business requirements. This is an excellent blog on how to customize the SP2013 composed look step by step by Benjamin Niaulin http://en.share-gate.com/blog/create-sharepoint2013-theme-using-color-palette-tool
- Most of enterprise looking to develop branding solution will start with the Out of the Box (OOB) branding solution provided by MS SP. This is not necessarily due to a lack of branding solution development knowledge but a lack of priority. In fact, most new implementation will focus on the architecture, topology, business intelligence development, search configuration or any other pillars that makes SharePoint a great products… but will always leave branding as secondary priority. And no, just changing the logo to your company logo does not create a branding solution Although you have the option to create a theme, this will not answer all the business requirements. This is an excellent blog on how to customize the SP2013 composed look step by step by Benjamin Niaulin http://en.share-gate.com/blog/create-sharepoint2013-theme-using-color-palette-tool
- From Ethan Gur-esh and Alyssa Levitz’s SP Tech Conf 2012 slide. Developing SharePoint branding solution for 2010 was tedious. You had the distinction between the front end developer that will take the comps and prepare the HTML, CSS, JS elements and the SharePoint developer that will analyze and review the elements developed and translate it to a SharePoint page model “language”.
- From Ethan Gur-esh and Alyssa Levitz’s SP Tech Conf 2012 slide. Now, you can have the front end developer develop the most of the branding solution with very little knowledge of SharePoint. They are trying to: Get Branding SharePoint sites gets easier and more familiar for Web Designers Branding SharePoint intranet to look more like internet sites For Web Designers: Convert HTML into SharePoint master page but not page layout In previous versions of SharePoint, branding a site required specific technical expertise about things like what content placeholders are required on a master page, or how a master page implements certain classes of styles. SharePoint 2013 introduces Design Manager—a new interface and central hub for managing all aspects of branding your SharePoint site. You can find the Design Manager in the top-level site for your site collection. It is a part of the Publishing Portal site collection template in SharePoint 2013.
- http://technet.microsoft.com/en-us/library/cc263526(v=office.15).aspx http://technet.microsoft.com/en-us/library/cc263526(v=office.15).aspx
- Tools Notes SPD 2013 is free Web Development Tool such as NotePad++, Sublime Text 2, Dreamweaver Libraries: Spservices is more powerful in the context of SharePoint 2010 and deprecated in 2013. Specifically for branding solutions where developers have no central administration access (and search service application), non publishing server sites or sandbox solution. Bootstrap.js is a very commonly used library in the WWW but not in SharePoint. Challenges comes from the fact that most of the default components (navigation, web parts ….) are not mobile friendly As we are leaning forward client side coding (This is available via the CSOM and JSOM on the development for SharePoint 2013…) it is important to elaborate proper strategies developing JS solutions. One of the solution is to use the Angular.js platform. It allows to structure very efficiently JS code as a MVC model and can be a very powerful assets for the display templates. Alternative to Angular are Ember.JS, Backbone.JS, Knockout.JS Read here the differences between the platform: http://www.100percentjs.com/backbone-or-angular-or-ember-here-is-my-choice-and-why/ Read here a comparison between Angular VS Knockout: http://blog.nebithi.com/knockoutjs-vs-angularjs/
- Tools Notes SPD 2013 is free Web Development Tool such as NotePad++, Sublime Text 2, Dreamweaver Libraries: Spservices is more powerful in the context of SharePoint 2010 and deprecated in 2013. Specifically for branding solutions where developers have no central administration access (and search service application), non publishing server sites or sandbox solution. Bootstrap.js is a very commonly used library in the WWW but not in SharePoint. Challenges comes from the fact that most of the default components (navigation, web parts ….) are not mobile friendly As we are leaning forward client side coding (This is available via the CSOM and JSOM on the development for SharePoint 2013…) it is important to elaborate proper strategies developing JS solutions. One of the solution is to use the Angular.js platform. It allows to structure very efficiently JS code as a MVC model and can be a very powerful assets for the display templates. Alternative to Angular are Ember.JS, Backbone.JS, Knockout.JS Read here the differences between the platform: http://www.100percentjs.com/backbone-or-angular-or-ember-here-is-my-choice-and-why/ Read here a comparison between Angular VS Knockout: http://blog.nebithi.com/knockoutjs-vs-angularjs/
- First steps is to review the composition file that will be provided by your design/creative team. You will have to identify the parts of the composition that fits each SharePoint page model elements.
- First steps is to review the composition file that will be provided by your design/creative team. You will have to identify the parts of the composition that fits each SharePoint page model elements.
- First steps is to review the composition file that will be provided by your design/creative team. You will have to identify the parts of the composition that fits each SharePoint page model elements.
- Access/Upload assets: Direct access Here are some links to resolve the Access Mapping Network Issue Here are the steps for all platform: http://msdn.microsoft.com/en-us/library/office/jj733519.aspx Resolve issue: http://tommdaly.wordpress.com/2012/11/07/sharepoint-2013-design-manager-unable-to-map-network-drive-while-working-on-the-server/ About Converting: - After you convert your HTML files, you can use your HTML editor to continue to refine your design, preview your files, and save them. Every time you save the HTML versions of the master page or page layout files, SharePoint 2013 automatically updates the associated SharePoint master page and page layouts to reflect your changes. - With Design Manager, you only have to edit the HTML files—while you can continue to write custom master pages and page layouts using your ASP.NET and SharePoint development skills, Design Manager enables you to design great sites without SharePoint developer expertise. If you prefer, SharePoint 2013 also includes HTML versions of several master pages and page layouts that you can use as starter templates. If you want to start from these files, create a copy of the HTML file (the associated ASP.NET file will be taken care of for you), and then edit the HTML file as you normally would. You can also start from just a basic template by using the master page from minimal template option, which automatically creates the associated .master file. Design Manager enables a step-by-step approach for creating design assets that you can use to brand sites. Upload design assets—images, HTML, CSS, and so on—and then create your master pages and page layouts. You can preview how your design looks either in a client-side code editor or on the server as you are designing it. Snippets: add custom SharePoint components and ribbon elements by using the Design Manager UI. HTML snippets that can be used by any web design tool—it renders HTML and ignores ASP.NET and SharePoint markup (while SharePoint renders only ASP.NET and SharePoint markup and ignores HTML).
- All the following items are available for the master page snippet gallery. Note: same principle apply for page layout snippet gallery but you have access to your content type fields.
- This is a new feature available to create powerful branding solution. In 2010, you had to create CQWP and then modify XLST files to enhance the branding solution. However, 2013 changes this. We will review in session 2.
- Good tool: www.useragentstring.com You can have up to 10 Device Channels defined in your Site Collection and per Device Channel you can specify up to 150 Device Inclusion Rules. Those are hard limits enforced by the code. The Publishing Output Cache which is a part of the Publishing infrastructure in SharePoint 2013 has built-in support for Device Channel so you don’t have to worry of much performance impact when working with Device Channels http://www.mavention.nl/blog/device-channels-sharepoint-2013
- Image rendition is very cool. It allows you to set predefined scale for images and use them to define what type and part of the images you will display at different resolution. I ran into an issue “he blob cache is not enabled in this web application. Image renditions will not be generated until the blob cache is enabled. For information on turning on the blob cache, please review the product documentation.” that was easily solve with this article: http://sureshpydi.blogspot.com/2013/05/sharepoint-2013-blob-cache-is-not.html