Brand my SharePoint Grafische Gestaltung von SharePoint-Webseiten

1. Brand my SharePointGrafische Gestaltung von SharePoint-Webseiten Fabian Moritz | SharePoint MVP

3. Die Ebenen des Branding Standard UI Themes Design Manager & Master Pages UI-Customizings > Aufwand: 0 > Skills: wenig > Aufwand: klein > Skills: SP-Standard > Aufwand: hoch > Skills: HTML, CSS, SP > Aufwand: rel. klein > Skills: SP, JavaScript EinheitlichePlattform + Standards

4. Die Evolution von SharePoint 2001 2003 2007 2010 2013

5. Minimale Download Strategie (MDS)

6. Demo MDS in SharePoint 2013

7. Die Ebenen des Branding Standard UI Themes Design Manager & Master Pages UI-Customizings > Aufwand: 0 > Skills: wenig > Aufwand: klein > Skills: SP-Standard > Aufwand: hoch > Skills: HTML, CSS, SP > Aufwand: rel. klein > Skills: SP, JavaScript EinheitlichePlattform + Standards

8. Designs (Composed Looks)

9. v

10. Farben und Schriften

11. Demo Designs in SharePoint 2013

12. Die Ebenen des Branding Standard UI Themes Design Manager & Master Pages UI-Customizings > Aufwand: 0 > Skills: wenig > Aufwand: klein > Skills: SP-Standard > Aufwand: hoch > Skills: HTML, CSS, SP > Aufwand: rel. klein > Skills: SP, JavaScript EinheitlichePlattform + Standards

13. Design Manager • Neues UI Management Tool • Erstellung, Bereitstellung und Verwaltung von Design-Elementen • Einfache Master Page-Generierung mit beliebigen Tools • Export und Import

14. Einfache HTM

17. Snippet Gallery

18. 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!

19. Device Manager • Verschiedene “Channels” fürmobile Geräte • Definition auf Basis des User Agent Strings • ZuordnungeinerMaster Page • Spezielle Controls für Channels

20. Demo SharePoint Master Pages umsetzen

21. Branding Projekte

22. Wireframing

23. Wireframing Tools • Blend + Sketch Flow for Visual Studio 2012 • BalsamiqMockups • Microsoft Visio 2013 • …

24. Demo Wireframes umsetzen

25. Die Ebenen des Branding Standard UI Themes Design Manager & Master Pages UI-Customizings > Aufwand: 0 > Skills: wenig > Aufwand: klein > Skills: SP-Standard > Aufwand: hoch > Skills: HTML, CSS, SP > Aufwand: rel. klein > Skills: SP, JavaScript EinheitlichePlattform + Standards

26. Möglichkeiten des UI Customizings 2010 2013

27. Client Side Rendering (CSR) • Daten + .JS = HTML • XSLT ist Vergangenheit • Technologien: • JavaScript • HTML • CSS • Deployment via App, Solution oder manuell

28. Demo Client Side Rendering mit SharePoint

29. Die Ebenen des Branding Standard UI Themes Design Manager & Master Pages UI-Customizings > Aufwand: 0 > Skills: wenig > Aufwand: klein > Skills: SP-Standard > Aufwand: hoch > Skills: HTML, CSS, SP > Aufwand: rel. klein > Skills: SP, JavaScript EinheitlichePlattform + Standards

30. 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 WireframingTools 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

32. Fabian Moritz ITaCS GmbH MVP SharePoint Server Fabian.Moritz@itacs.de http://www.itacs.de http://sharepointcommunity.de/fabianm @FabianMoritz