Brand My SharePoint Gestaltung und Anpassung von...
31
Fabian Moritz | ITaCS | MVP SharePoint Server Brand My SharePoint – Gestaltung und Anpassung von SharePoint-Webseiten
Transcript of Brand My SharePoint Gestaltung und Anpassung von...
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
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ürfeund Styleguide
HTML-GerüsteMaster Pages, Page Layouts
(inkl. Platzhalter)
Webparts und Controls
Optimierung, Nachjustierung
Testing & QSFeatures,
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
BrowserSharePoint Designer
Browser AppsHTML5, CSS3,
JavaScript.NET
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 GmbH
MVP SharePoint Server
http://www.itacs.de
@FabianMoritz
http://sharepointcommunity.de/fabianm
