View
196
Download
0
Category
Tags:
Preview:
DESCRIPTION
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
Citation preview
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
• Previous Incarnations: News Editor (newspaper), X-ray Technician, Professional Caterer, Chiropractic Assistant• Twitter @EchefJosef• Blog http://echef.chaosfarm.net• http://www.itgsharepoint.com
Overview• Branding Sites• HTML MasterPages• Custom MasterPages
• Publishing Features• The Page Content Type• Page Layouts
• Managed Metadata Navigation• Setup• Use
• Responsive Design (Mobile Views)• Why Responsive• How it is done
SharePoint 2013 Design Manager1. Design Manager is a publishing feature that is available in publishing
sites in both SharePoint Server 2013 and Office 365.2. 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:1. Mockup HTML Pages2. Map design folder to the Master page gallery3. Upload Design Files4. Convert HTML file to a Master Page5. Preview the Master Page and fix issues6. Add any desired SharePoint snippetshttp://msdn.microsoft.com/en-us/library/jj822363.aspx
HTML Page Preparation
• 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 Sharepoint Nav• Add ms-design-css-conversion="no"
to the <CSS link> 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 <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.
Snippets:
• SharePoint Controls• Custom ASP.NET Markup• Search Box Example…
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
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
HTML MasterPages - Demo• The HTML• Creating the MasterPage• Adding SharePoint Elements• Other Design Manager Features
Classic MasterPages• Pros• Power• Performance (Sever and Client)• Flexibility
• Cons• Steep Learning Curve• More Work• Easier to Break
Classic MasterPages - Demo• The minimal.master• From HTML to MasterPage in 5
minutes• The role of Page Controls
Publishing Features• The Page Content Type• Page Template Associations• Additional Site Settings tabs• Managed Navigation
Publishing Features – Content Types• Page• Extending Page
Publishing Features – Page Layouts• Associating a Content Type to a
Page Layout• Fields• Editor View• Security Trimming
• Controls• Web Part Zones• Publishing content controls
Publishing Features - Demo• Extending “Page”• Creating and associating a Page
Layout
Publishing 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 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.
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)
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)
Responsive Design - How• Mobile Implications –
Performance• Media Queries• Alternate Images• Less content (hidden or modified)• Positions• Boundary sizes
Responsive Design - Demo• How it works• Making changes
Q&A
Recommended