32
Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint Grafische Gestaltung von SharePoint-Webseiten Fabian Moritz | SharePoint MVP

Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

Embed Size (px)

Citation preview

Page 1: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

Formatvorlage des Untertitelmasters durch Klicken bearbeiten

Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner:

Brand my SharePointGrafische Gestaltung von SharePoint-Webseiten

Fabian Moritz | SharePoint MVP

Page 2: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint
Page 3: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

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

Page 4: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

Die Evolution von SharePoint

2003 2007

2010 2013

2001

Page 5: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

Minimale Download Strategie (MDS)

Page 6: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

DemoMDS in SharePoint 2013

Page 7: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

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

Page 8: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

Designs (Composed Looks)

Page 9: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

v

Page 10: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

Farben und Schriften

Page 11: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

DemoDesigns in SharePoint 2013

Page 12: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

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

Page 13: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

• Neues UI Management Tool• Erstellung, Bereitstellung und

Verwaltung von Design-Elementen

• Einfache Master Page-Generierung mit beliebigen Tools

• Export und Import

Design Manager

Page 14: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

Einfache HTM

Page 15: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint
Page 16: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint
Page 17: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

Snippet Gallery

Page 18: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

• 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!

Master Pages umsetzen

Page 19: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

• Verschiedene “Channels” für mobile Geräte• Definition auf Basis des User Agent Strings• Zuordnung einer Master Page• Spezielle Controls für Channels

Device Manager

Page 20: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

DemoSharePoint Master Pages umsetzen

Page 21: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

Branding Projekte

Ziele und Anforderunge

n

Wireframes und Scribbles

Designentwürfe und

Styleguide

HTML-Gerüste

Master Pages, Page Layouts

(inkl. Platzhalter)

Webparts und Controls

Optimierung, Nachjustierun

gTesting & QS

Features, Solutions und Deployment

Page 22: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

Wireframing

Page 23: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

Wireframing Tools

• Blend + Sketch Flow for Visual Studio 2012

• Balsamiq Mockups

• Microsoft Visio 2013

• …

Page 24: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

DemoWireframes umsetzen

Page 25: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

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

Page 26: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

Möglichkeiten des UI Customizings

HTML, CSS, XSLT,

JavaScript

.NET

BrowserSharePoi

nt Designer

Browser Apps

HTML5, CSS3,

JavaScript

.NET

2010

2013

Page 27: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

Client Side Rendering (CSR)

• Daten + .JS = HTML• XSLT ist Vergangenheit• Technologien:

JavaScript HTML CSS

• Deployment via App, Solution oder manuell

Page 28: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

DemoClient Side Rendering mit SharePoint

Page 29: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

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

Page 30: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

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

Page 31: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint
Page 32: Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner: Brand my SharePoint

Fabian MoritzITaCS GmbHMVP SharePoint Server

[email protected]://www.itacs.de

@FabianMoritz

http://sharepointcommunity.de/fabianm