extreme makeover:

of 27 /27
Extreme Makeover: SharePoint 2013 Edition 801-555-1212

Author: sheryl

Post on 24-Feb-2016




0 download

Embed Size (px)


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. - PowerPoint PPT Presentation


Extreme Makeover:

Extreme Makeover:SharePoint 2013 Edition801-555-1212ITG - Brad WilcoxSr. Consultant at ITGMS SharePoint Dev CertifiedFreaking Awesomehttp://www.itgsharepoint.comITG - Josef NielsenVP of Engineering at ITGPresident of UGUber-NerdAmateur GunsmithChefPrevious Incarnations: News Editor (newspaper), X-ray Technician, Professional Caterer, Chiropractic AssistantTwitter @EchefJosefBlog http://echef.chaosfarm.nethttp://www.itgsharepoint.comOverviewBranding SitesHTML MasterPagesCustom MasterPagesPublishing FeaturesThe Page Content TypePage LayoutsManaged Metadata NavigationSetupUseResponsive Design (Mobile Views)Why ResponsiveHow it is doneSharePoint 2013 Design ManagerDesign 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).

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 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.Steps Using the Design Manager:Mockup HTML PagesMap design folder to the Master page galleryUpload Design FilesConvert HTML file to a Master PagePreview the Master Page and fix issuesAdd any desired SharePoint snippetshttp://msdn.microsoft.com/en-us/library/jj822363.aspx HTML Page PreparationMake sure your HTML file is XML-compliant.Get rid of any Form tags.Don't put blocks in the 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 , , and < img>. Be prepared for Navigation changes for the Sharepoint NavAdd ms-design-css-conversion="no" to the tag if you're using a web font.

http://msdn.microsoft.com/en-us/library/jj822370.aspx#Prepare Auto Generated Tags:SharePoint namespace registration The tag ("SharePoint markup") provides a line registering a SharePoint namespace.The and ("Comment start" and "comment end") tags are ignored during the conversion process.The and ("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 and ("markup start" and "markup end") tags denote the beginning and end of a SharePoint control or a snippet.

Snippets:SharePoint ControlsCustom ASP.NET MarkupSearch Box ExampleWhat 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 HTML MasterPagesProsNo custom coding through Visual StudioSnippets make for easy SharePoint controlsPackages can be downloaded and uploaded to any site collection.

ConsScaling across hundred of sitesRestructuring a page (i.e. Ribbon)Only works with Publishing featuresHTML MasterPages - DemoThe HTMLCreating the MasterPageAdding SharePoint ElementsOther Design Manager FeaturesClassic MasterPagesProsPowerPerformance (Sever and Client)FlexibilityConsSteep Learning CurveMore WorkEasier to BreakClassic MasterPages - DemoThe minimal.masterFrom HTML to MasterPage in 5 minutesThe role of Page ControlsPublishing FeaturesThe Page Content TypePage Template AssociationsAdditional Site Settings tabsManaged NavigationPublishing Features Content TypesPageExtending PagePublishing Features Page LayoutsAssociating a Content Type to a Page LayoutFieldsEditor ViewSecurity TrimmingControlsWeb Part ZonesPublishing content controlsPublishing Features - DemoExtending PageCreating and associating a Page LayoutPublishing Features Managed Navigation1. Setup Navigation enabled term sets in Managed Metadata Service2. Go to Site > Site Settings > Navigation3. Select Managed Navigation for Header or Side Bar.4. Select the term set and click save.Publishing Features Managed NavigationPros:No Visual Studio codingUses a global service available across the farm and not a list or set of lists on a single site.QuickConsOnly works with Publishing Features.Not as customizable flyouts, sub menus, sites with sub sets of the same menus, etc.

Responsive Design Why?One size fits allSimpler and easier to use than multiple sitesDoes not rely on VariationsEnables targeting of content via design to mobile platforms (iPage, tablets, smartphones, netBooks, etc)Responsive Design WhatBrowsersDesktop (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 ToolsCSS3Media QueriesColumns and GuttersStackable Containers (think WPF)Responsive Design - HowMobile Implications PerformanceMedia QueriesAlternate ImagesLess content (hidden or modified)PositionsBoundary sizesResponsive Design - DemoHow it worksMaking changesQ&A