Post on 13-Dec-2014
description
Fabian Moritz | MVP SharePoint Server
Brand My SharePoint – Gestaltung und Anpassung von SharePoint-Webseiten
Die Ebenen des Branding
Standard UI Themes Design Manager& Master Pages
UI-Customizings
Einheitliche Plattform + Standards
> Aufwand: 0
> Skills: wenig
> Aufwand: klein
> Skills: SP-Standard
> Aufwand: hoch
> Skills: HTML, CSS, SP
> Aufwand: rel. klein
> Skills: SP, JavaScript
Die Evolution von SharePoint
2003 2007
2010 2013
2001
Minimale Download Strategie (MDS)
DemoMDS in SharePoint 2013
Die Ebenen des Branding
Standard UI Themes Design Manager& Master Pages
UI-Customizings
Einheitliche Plattform + Standards
> Aufwand: 0
> Skills: wenig
> Aufwand: klein
> Skills: SP-Standard
> Aufwand: hoch
> Skills: HTML, CSS, SP
> Aufwand: rel. klein
> Skills: SP, JavaScript
Designs (Composed Looks)
v
Farben und Schriften
DemoDesigns in SharePoint 2013
Die Ebenen des Branding
Standard UI Themes Design Manager& Master Pages
UI-Customizings
Einheitliche Plattform + Standards
> Aufwand: 0
> Skills: wenig
> Aufwand: klein
> Skills: SP-Standard
> Aufwand: hoch
> Skills: HTML, CSS, SP
> Aufwand: rel. klein
> Skills: SP, JavaScript
Design Manager
• Neues UI Management Tool• Erstellung, Bereitstellung und
Verwaltung von Design-Elementen
• Einfache Master Page-Generierung mit beliebigen Tools
• Export und Import
Einfache HTM
Snippet Gallery
Master Pages umsetzen
• 3 Optionen:– HTML Master Page– Minimal Master Page– Starter Master Pages (Codeplex)
startermasterpages.codeplex.com
• Tools– SharePoint Designer 2013– 3rd Party Tools– Browser Tools
• Nicht vergessen: Daten im TFS abspeichern!
Device Manager
• Verschiedene “Channels” für mobile Geräte• Definition auf Basis des User Agent Strings• Zuordnung einer Master Page• Spezielle Controls für Channels
DemoSharePoint Master Pages
Branding Projekte
Ziele und Anforderungen
Wireframes und Scribbles
Designentwürfe und Styleguide
HTML-GerüsteMaster Pages, Page Layouts
(inkl. Platzhalter)
Webparts und Controls
Optimierung, Nachjustierung Testing & QS
Features, Solutions und Deployment
Wireframing
Wireframing Tools
• Blend + Sketch Flow for Visual Studio 2012
• Balsamiq Mockups
• Microsoft Visio 2013
• …
Die Ebenen des Branding
Standard UI Themes Design Manager& Master Pages
UI-Customizings
Einheitliche Plattform + Standards
> Aufwand: 0
> Skills: wenig
> Aufwand: klein
> Skills: SP-Standard
> Aufwand: hoch
> Skills: HTML, CSS, SP
> Aufwand: rel. klein
> Skills: SP, JavaScript
Möglichkeiten beim UI Customizing
HTML, CSS, XSLT, JavaScript
.NET
Browser SharePoint Designer
Browser AppsHTML5, CSS3,
JavaScript.NET
2010
2013
Client Side Rendering (CSR)
• Daten + .JS = HTML• XSLT ist Vergangenheit• Technologien:
– JavaScript– HTML– CSS
• Deployment via App, Solution oder manuell
DemoClient Side Rendering
Die Ebenen des Branding
Standard UI Themes Design Manager& Master Pages
UI-Customizings
Einheitliche Plattform + Standards
> Aufwand: 0
> Skills: wenig
> Aufwand: klein
> Skills: SP-Standard
> Aufwand: hoch
> Skills: HTML, CSS, SP
> Aufwand: rel. klein
> Skills: SP, JavaScript
Und jetzt?
• Laden Sie sich die Präsentation und Beispiele herunterhttp://sharepointcommunity.de/fabianm
• Machen Sie sich mit dem Design Manager vertrauthttp://msdn.microsoft.com/en-us/library/jj822363.aspx
• Nutzen Sie Wireframing Tools während der Planunghttp://www.balsamiq.com
• Beschäftigen Sie sich mit Client Side Renderinghttp://msdn.microsoft.com/en-us/library/jj220045.aspx
• Besuchen Sie BrandMySharePoint.dehttp://www.brandmysharepoint.de
Fabian MoritzITaCS GmbHMVP SharePoint Server
Fabian.Moritz@itacs.dehttp://www.itacs.de
@FabianMoritz
http://sharepointcommunity.de/fabianm