Transcript Brand my SharePoint

Brand my SharePoint
Grafische Gestaltung von SharePoint-Webseiten
Formatvorlage des Untertitelmasters durch Klicken bearbeiten
Fabian Moritz | SharePoint MVP
Platin-Partner:
Gold-Partner:
Veranstaltungs-Partner:
Medien-Partner:
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 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
•
Nicht vergessen: Daten im TFS abspeichern!
 SharePoint Designer 2013
 3rd Party Tools
 Browser Tools
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 umsetzen
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
•
…
Demo
Wireframes umsetzen
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 des UI Customizings
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 mit SharePoint
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
•
Machen Sie sich mit dem Design Manager vertraut
•
Nutzen Sie Wireframing Tools während der Planung
•
Beschäftigen Sie sich mit Client Side Rendering
•
Besuchen Sie BrandMySharePoint.de
http://sharepointcommunity.de/fabianm
http://msdn.microsoft.com/en-us/library/jj822363.aspx
http://www.balsamiq.com
http://msdn.microsoft.com/en-us/library/jj220045.aspx
http://www.brandmysharepoint.de
Fabian Moritz
ITaCS GmbH
MVP SharePoint Server
[email protected]
http://www.itacs.de
http://sharepointcommunity.de/fabianm
@FabianMoritz