webdesign mit sharepoint 2013

30
SharePoint 2013

Upload: digicomp-academy-ag

Post on 27-Jun-2015

479 views

Category:

Technology


1 download

DESCRIPTION

Referent: Markus Hintner

TRANSCRIPT

Page 1: Webdesign mit SharePoint 2013

SharePoint 2013

Page 2: Webdesign mit SharePoint 2013

Markus Hintner

Über mich

҉ Microsoft Certified

Solution Master | SharePoint

҉ http://www.entos.at

҉ http://blog.entos.at

҉ @MarkusHintner

҉ Profile im Web:MCP Virtual Business Card

http://www.xing.com/profile/Markus_Hintner

http://at.linkedin.com/in/markushintner

2

Page 3: Webdesign mit SharePoint 2013

Markus Hintner

Inhalt

3

Page 4: Webdesign mit SharePoint 2013

Markus Hintner

Design Manager

҉ HTML Dateien werden in Master Pages

konvertiert

4

Page 5: Webdesign mit SharePoint 2013

Markus Hintner

Design Manager

҉ Aus HTML-Datei wird Master Page erzeugt

҉ .html und .master bilden ein Paar

5

Page 6: Webdesign mit SharePoint 2013

Markus Hintner

Master Page

҉ ASP.NET 2.0 Konzept

҉ Master Page gibt Layout und Default-

Inhalt vor

6

Page 7: Webdesign mit SharePoint 2013

Demo

Page 8: Webdesign mit SharePoint 2013

Markus Hintner

Design Manager

҉ Snippets erlauben das Einfügen von

vorgefertigtem Code

8

Page 9: Webdesign mit SharePoint 2013

Markus Hintner

Design Manager

҉ Nicht alle Controls sind in den Snippets

vorhanden -> z.B. fehlt Breadcrumb

҉ Im HTML File können keine ASP.NET

Controls hinzugefügt werden

҉ <!-- MS:… -->

҉ <!-- ME:… -->

9

Page 10: Webdesign mit SharePoint 2013

Demo

Page 11: Webdesign mit SharePoint 2013

Markus Hintner

Inhalt

11

Page 12: Webdesign mit SharePoint 2013

Markus Hintner

Device Channels

҉ Alternative Masterpages für verschiedene

Endgeräte

҉ Device Channels definieren „Browser

Inclusion Rules“

12

Page 13: Webdesign mit SharePoint 2013

Markus Hintner

Device Channels erstellen

҉ Site Settings | Look and Feel | Device

Channels

҉ Nur bei aktiviertem Publishing Feature

҉ Für Nicht-Publishing-Sites muss verstecktes

Feature „PublishingMobile“ aktiviert werden

13

Page 14: Webdesign mit SharePoint 2013

Markus Hintner

Device Channels

҉ Reihenfolge der Channels relevant für die

Ermittlung des zu verwendenden Channels

҉ Übersicht über User Agent Strings:

҉ http://www.useragentstring.com/

14

Page 15: Webdesign mit SharePoint 2013

Markus Hintner

Zuweisen einer Master Page

҉ Pro Channel kann eine Master Page

ausgewählt werden

҉ max. 10 Channels pro Site Collection

15

Page 16: Webdesign mit SharePoint 2013

Markus Hintner

Device Channels testen

҉ Testen:

҉ User Agent Switcher von Firefox

https://addons.mozilla.org/de/firefox/addon/u

ser-agent-switcher/

҉ Hinzufügen von

„?DeviceChannel=DeviceChannelAlias“ an die

URL

16

Page 17: Webdesign mit SharePoint 2013

Demo

Page 18: Webdesign mit SharePoint 2013

Markus Hintner

Inhalt

18

Page 19: Webdesign mit SharePoint 2013

Markus Hintner

Display Templates

҉ Display Templates erlauben einfache

Anpassung der Suchergebnisse

19

Page 20: Webdesign mit SharePoint 2013

Markus Hintner

Display Template

҉ Erzeugen auf Basis eines vorhandenen Templates

20

Page 21: Webdesign mit SharePoint 2013

Markus Hintner

Display Template

҉ .html Datei kann mit jedem Editor modifiziert werden

҉ ManagedProperties erweitern

҉ <style> Tags im Head werden beim Hochladen entfernt -> CSS Datei

҉ JavaScript muss nach dem ersten DIV Tag stehen und eingeschlossen sein durch:<!--#_ und _#-->.

21

Page 22: Webdesign mit SharePoint 2013

Markus Hintner

Display Template

22

Page 23: Webdesign mit SharePoint 2013

Markus Hintner

Result Type

23

Page 24: Webdesign mit SharePoint 2013

Markus Hintner

Fertiges Display Template

24

Page 25: Webdesign mit SharePoint 2013

Demo

Page 26: Webdesign mit SharePoint 2013

Markus Hintner

Inhalt

26

Page 27: Webdesign mit SharePoint 2013

Markus Hintner

JSLink

҉ Client-side Rendering von SharePoint

Feldern mit Hilfe von JavaScript

҉ JSLink-Property der SPField-

Klasse, XSLTListViewWebPart,…

27

Page 28: Webdesign mit SharePoint 2013

Markus Hintner

JSLink

28

Page 29: Webdesign mit SharePoint 2013

Markus Hintner

Beispiel

҉ http://www.sharepointnutsandbolts.com/2

013/01/using-jslink-to-change-ui-of-

sharepoint_20.html

29

Page 30: Webdesign mit SharePoint 2013

Vielen Dank