Fabian Moritz | ITaCS | 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
> Aufwand: 0
> Aufwand: klein
> Aufwand: hoch
> Skills: wenig
> Skills: SP-Standard
> Skills: HTML, CSS, SP > Skills: SP, JavaScript
Einheitliche Plattform + Standards
> Aufwand: rel. klein
Die Evolution von SharePoint
2001
2003
2010
2013
2007
Minimale Download Strategie (MDS)
Demo MDS in SharePoint 2013
Die Ebenen des Branding
Standard UI
Themes
Design Manager & Master Pages
UI-Customizings
> Aufwand: 0
> Aufwand: klein
> Aufwand: hoch
> Skills: wenig
> Skills: SP-Standard
> Skills: HTML, CSS, SP > Skills: SP, JavaScript
Einheitliche Plattform + Standards
> Aufwand: rel. klein
Designs (Composed Looks)
v
Farben und Schriften
Demo Designs in SharePoint 2013
Die Ebenen des Branding
Standard UI
Themes
Design Manager & Master Pages
UI-Customizings
> Aufwand: 0
> Aufwand: klein
> Aufwand: hoch
> Skills: wenig
> Skills: SP-Standard
> Skills: HTML, CSS, SP > Skills: SP, JavaScript
Einheitliche Plattform + Standards
> Aufwand: rel. klein
Design Manager • Neues UI Management Tool • Erstellung, Bereitstellung und Verwaltung von DesignElementen • Einfache Master PageGenerierung 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
Demo SharePoint Master Pages
Branding Projekte Ziele und Anforderungen
Wireframes und Scribbles
Designentwürfe und Styleguide
Webparts und Controls
Master Pages, Page Layouts (inkl. Platzhalter)
HTML-Gerüste
Testing & QS
Features, Solutions und Deployment
Optimierung, Nachjustierung
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
> Aufwand: 0
> Aufwand: klein
> Aufwand: hoch
> Skills: wenig
> Skills: SP-Standard
> Skills: HTML, CSS, SP > Skills: SP, JavaScript
Einheitliche Plattform + Standards
> Aufwand: rel. klein
Möglichkeiten beim UI Customizing Browser
SharePoint Designer HTML, CSS, XSLT, JavaScript
Browser
Apps
.NET
HTML5, CSS3, JavaScript
.NET
Client Side Rendering (CSR) • Daten + .JS = HTML • XSLT ist Vergangenheit • Technologien: – JavaScript – HTML – CSS
• Deployment via App, Solution oder manuell
Demo Client Side Rendering
Die Ebenen des Branding
Standard UI
Themes
Design Manager & Master Pages
UI-Customizings
> Aufwand: 0
> Aufwand: klein
> Aufwand: hoch
> Skills: wenig
> Skills: SP-Standard
> Skills: HTML, CSS, SP > Skills: SP, JavaScript
Einheitliche Plattform + Standards
> Aufwand: rel. klein
Und jetzt? • Laden Sie sich die Präsentation und Beispiele herunter http://sharepointcommunity.de/fabianm
• Machen Sie sich mit dem Design Manager vertraut http://msdn.microsoft.com/en-us/library/jj822363.aspx
• Nutzen Sie Wireframing Tools während der Planung http://www.balsamiq.com
• Beschäftigen Sie sich mit Client Side Rendering http://msdn.microsoft.com/en-us/library/jj220045.aspx
• Besuchen Sie BrandMySharePoint.de http://www.brandmysharepoint.de
Fabian Moritz
ITaCS GmbH MVP SharePoint Server
[email protected] http://www.itacs.de
http://sharepointcommunity.de/fabianm @FabianMoritz
