Webdesign mit SharePoint 2013
-
Upload
digicomp-academy-ag -
Category
Technology
-
view
479 -
download
1
description
Transcript of Webdesign mit SharePoint 2013
![Page 1: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/1.jpg)
SharePoint 2013
![Page 2: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/2.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/3.jpg)
Markus Hintner
Inhalt
3
![Page 4: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/4.jpg)
Markus Hintner
Design Manager
҉ HTML Dateien werden in Master Pages
konvertiert
4
![Page 5: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/5.jpg)
Markus Hintner
Design Manager
҉ Aus HTML-Datei wird Master Page erzeugt
҉ .html und .master bilden ein Paar
5
![Page 6: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/6.jpg)
Markus Hintner
Master Page
҉ ASP.NET 2.0 Konzept
҉ Master Page gibt Layout und Default-
Inhalt vor
6
![Page 7: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/7.jpg)
Demo
![Page 8: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/8.jpg)
Markus Hintner
Design Manager
҉ Snippets erlauben das Einfügen von
vorgefertigtem Code
8
![Page 9: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/9.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/10.jpg)
Demo
![Page 11: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/11.jpg)
Markus Hintner
Inhalt
11
![Page 12: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/12.jpg)
Markus Hintner
Device Channels
҉ Alternative Masterpages für verschiedene
Endgeräte
҉ Device Channels definieren „Browser
Inclusion Rules“
12
![Page 13: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/13.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/14.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/15.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/16.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/17.jpg)
Demo
![Page 18: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/18.jpg)
Markus Hintner
Inhalt
18
![Page 19: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/19.jpg)
Markus Hintner
Display Templates
҉ Display Templates erlauben einfache
Anpassung der Suchergebnisse
19
![Page 20: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/20.jpg)
Markus Hintner
Display Template
҉ Erzeugen auf Basis eines vorhandenen Templates
20
![Page 21: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/21.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/22.jpg)
Markus Hintner
Display Template
22
![Page 23: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/23.jpg)
Markus Hintner
Result Type
23
![Page 24: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/24.jpg)
Markus Hintner
Fertiges Display Template
24
![Page 25: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/25.jpg)
Demo
![Page 26: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/26.jpg)
Markus Hintner
Inhalt
26
![Page 27: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/27.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/28.jpg)
Markus Hintner
JSLink
28
![Page 29: Webdesign mit SharePoint 2013](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/29.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022052601/558ea8b21a28abe2118b46e5/html5/thumbnails/30.jpg)
Vielen Dank