1 / 27

Extreme Makeover:

Extreme Makeover:. SharePoint 2013 Edition 801-555-1212. ITG - Brad Wilcox. Sr. Consultant at ITG MS SharePoint Dev Certified Freaking Awesome http://www.itgsharepoint.com. ITG - Josef Nielsen. VP of Engineering at ITG President of UG Uber-Nerd Amateur Gunsmith Chef.

sheryl
Download Presentation

Extreme Makeover:

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Extreme Makeover: SharePoint 2013 Edition 801-555-1212

  2. ITG - Brad Wilcox • Sr. Consultant at ITG • MS SharePoint Dev Certified • Freaking Awesome • http://www.itgsharepoint.com

  3. ITG - Josef Nielsen • VP of Engineeringat ITG • President of UG • Uber-Nerd • Amateur Gunsmith • Chef • Previous Incarnations: News Editor (newspaper), X-ray Technician, Professional Caterer, Chiropractic Assistant • Twitter @EchefJosef • Blog http://echef.chaosfarm.net • http://www.itgsharepoint.com

  4. Overview • Branding Sites • HTML MasterPages • CustomMasterPages • Publishing Features • The Page Content Type • Page Layouts • Managed Metadata Navigation • Setup • Use • Responsive Design (Mobile Views) • Why Responsive • How it is done

  5. SharePoint 2013 Design Manager • Design Manager is a publishing feature that is available in publishing sites in both SharePoint Server 2013 and Office 365. • You can create a visual design using only HTML and CSS, and then upload that design into SharePoint(using any HTML Editor).

  6. What is an HTML MasterPage? • With Design Manager, you can convert an.html file into a SharePoint 2013 master page, a .master file. After the conversion, the HTML file and master page are associated, so that when you edit and save the HTML file, the changes are synced to the associated master page. http://msdn.microsoft.com/en-us/library/jj822370.aspx#Prepare

  7. 2 Choices for HTML MasterPage Design: • Mockup HTML page with CSS / HTML / Javascript and convert to Masterpage. • Create a Minimal master page that renders all the base controls needed for a SharePoint page to load. Also creates a minimal html master page.

  8. Steps Using the Design Manager: • Mockup HTML Pages • Map design folder to the Master page gallery • Upload Design Files • Convert HTML file to a Master Page • Preview the Master Page and fix issues • Add any desired SharePoint snippets http://msdn.microsoft.com/en-us/library/jj822363.aspx

  9. HTML Page Preparation http://msdn.microsoft.com/en-us/library/jj822370.aspx#Prepare • Make sure your HTML file is XML-compliant. • Get rid of any Form tags. • Don't put <style> blocks in the <head> tag. These styles are removed during conversion. Instead, link from your HTML file to an external CSS file. • Be cautious about applying styles to general HTML tags like <body>, <div>, and < img>. • Be prepared for Navigation changes for the SharepointNav • Add ms-design-css-conversion="no" to the <CSS link> tag if you're using a web font.

  10. Auto Generated Tags: • SharePoint namespace registration The <SPM> tag ("SharePoint markup") provides a line registering a SharePoint namespace. • The <CS> and <CE> ("Comment start" and "comment end") tags are ignored during the conversion process. • The <PS> and <PE> ("Preview start" and "preview end") tags surround a section of HTML code that you shouldn't edit because this section affects only the design-time preview. • The <MS> and <ME> ("markup start" and "markup end") tags denote the beginning and end of a SharePoint control or a snippet.

  11. Snippets: • SharePoint Controls • Custom ASP.NET Markup • Search Box Example…

  12. What happens if I want to edit the MasterPage directly? • The syncing goes in one direction only. Changes to the HTML master page are synced to the associated .master file, but if you choose to edit the .master file directly the changes are not synced to the HTML file. • If you have a pair of associated files (HTML and .master) and you edit the .master file without breaking the association, the changes to the .master file will be saved, but you can't check in or publish the .master file, so those changes are not saved in a meaningful way. • Any changes to the HTML file override the .master file. If you check in or publish the HTML file, the HTML file changes override any changes that were made to the .master file. The changes to the .master file are lost. http://msdn.microsoft.com/en-us/library/jj822370.aspx#Prepare

  13. HTML MasterPages • Pros • No custom coding through Visual Studio • Snippets make for easy SharePoint controls • Packages can be downloaded and uploaded to any site collection. • Cons • Scaling across hundred of sites • Restructuring a page (i.e. Ribbon) • Only works with Publishing features

  14. HTML MasterPages - Demo • The HTML • Creating the MasterPage • Adding SharePoint Elements • Other Design Manager Features

  15. Classic MasterPages • Pros • Power • Performance (Sever and Client) • Flexibility • Cons • Steep Learning Curve • More Work • Easier to Break

  16. Classic MasterPages - Demo • Theminimal.master • From HTML to MasterPage in 5 minutes • The role of Page Controls

  17. Publishing Features • The Page Content Type • Page Template Associations • Additional Site Settings tabs • Managed Navigation

  18. Publishing Features – Content Types • Page • Extending Page

  19. Publishing Features – Page Layouts • Associating a Content Type to a Page Layout • Fields • Editor View • Security Trimming • Controls • Web Part Zones • Publishing content controls

  20. Publishing Features - Demo • Extending “Page” • Creating and associating a Page Layout

  21. Publishing Features – Managed Navigation 1. Setup Navigation enabled term sets in Managed Metadata Service 2. Go to Site > Site Settings > Navigation 3. Select Managed Navigation for Header or Side Bar. 4. Select the term set and click save.

  22. Publishing Features – Managed Navigation • Pros: • No Visual Studio coding • Uses a global service available across the farm and not a list or set of lists on a single site. • Quick • Cons • Only works with Publishing Features. • Not as customizable – flyouts, sub menus, sites with sub sets of the same menus, etc.

  23. Responsive Design – Why? • One size fits all • Simpler and easier to use than multiple sites • Does not rely on Variations • Enables targeting of content via design to mobile platforms (iPage, tablets, smartphones, netBooks, etc)

  24. Responsive Design – What • Browsers • Desktop (old to new IE,Firefox, Chrome, Safari, Opera) • Laptop (same as desktop) • Tablet (similar to desktop, but generally newer) • Phone (Opera-based, Firefox, Safari) • Primary Tools • CSS3 • Media Queries • Columns and Gutters • Stackable Containers (think WPF)

  25. Responsive Design - How • Mobile Implications – Performance • Media Queries • Alternate Images • Less content (hidden or modified) • Positions • Boundary sizes

  26. Responsive Design - Demo • How it works • Making changes

  27. Q&A

More Related