Erstellen Ihrer Onlinemarke mit einer Kombination aus SharePoint 2013 und bereits bekannten Webtechnologien
Veröffentlichung des Originalartikels: 25.02.2013
In diesem als Einführung konzipierten Beitrag erfahren Sie, wie einfach Sie den Entwurfs-Manager mit den von Ihnen bevorzugten Designtools kombinieren und so beim Definieren der Online-Marke Ihres Unternehmens von den leistungsfähigen Content-Management-Funktionen von SharePoint 2013 profitieren können.
Mit SharePoint 2013 können Sie Ihre SharePoint-Veröffentlichungswebsite mit eigenem Branding versehen.Da Sie hierbei auf vertraute Webtechnologien, bevorzugte Tools und die gewünschten Geräte zurückgreifen können, waren die ersten Schritte als SharePoint-Designer oder -Entwickler nie einfacher. Aber auch SharePoint-Spezialisten müssen sich keine Sorgen machen: Ihre bereits erworbenen SharePoint-Kenntnisse sind nach wie vor anwendbar, und Ihre Vertrautheit mit dem Modell der SharePoint-Veröffentlichungswebsite ist auch weiterhin überaus hilfreich.
Dieser Beitrag bietet einen Überblick darüber, wie einfach Sie mithilfe des Entwurfs-Managers und der Gerätekanäle von SharePoint 2013 sowie mit Ihren bevorzugten Webdesigntools die Onlinemarke Ihres Unternehmens definieren können. Die Infrastruktur für das Seitenrendering wurde beibehalten, wir haben jedoch drei bedeutende Verbesserungen für das Branding einer SharePoint-Veröffentlichungswebsite vorgenommen.
Verwenden vertrauter Webtechnologien
Die Verwaltung der Masterseiten und Seitenlayouts von SharePoint erfolgt auch weiterhin in ASP.NET, jetztkönnen Sie Ihre Masterseiten und Seitenlayouts allerdings auch in HTML gestalten – sogar HTML-Codeausschnitte von SharePoint-Steuerelementen können verwendet werden. SharePoint erstellt dann die benötigte ASP.NET-Datei ohne Ihr Zutun im Hintergrund.
In der Vergangenheit konnten Sie Ihre Website mit CSS und JavaScript gestalten. Diese sind jetzt vollständig in die SharePoint-Webentwicklungsumgebung integriert. Wir haben sehr viel Arbeit in die HTML-Vorschau gesteckt, damit Sie den HTML-Code direkt und ohne Verwendung des Servers gestalten können. Und sollten Sie doch den Server zum Anzeigen der Vorschau verwenden, ist dies im Kontext jeder beliebigen SharePoint-Seite möglich.
Die Verwendung der von Ihnen bevorzugten Webtechnologien beschränkt sich nicht allein auf das Seitenlayout. Das Webpart für Inhaltsabfragen, das eine Gestaltung in XSLT erforderte, gibt es zwar immer noch, das neue Webpart für Inhaltsabfragen ist jedoch ein wichtiger Baustein für die Erstellung suchbasierter Vorgänge in SharePoint 2013, und da uns die Bereitstellung einer komfortablen Entwicklerumgebung überaus wichtig war, sind Anpassungen nun mit JavaScript, HTML und CSS möglich.
Wir setzen bei Ihnen keinerlei SharePoint-Kenntnisse voraus. Daher stellen wir den Entwurfs-Manager zur Verfügung, der Sie Schritt für Schritt beim Branding Ihrer Veröffentlichungswebsite unterstützt. Dieser Entwurfs-Manager ist ähnlich aufgebaut wie ein Assistent und bietet SharePoint-Entwicklungsanleitungen und Einstiegspunkte für die Arbeit mit Ihren Designdateien. Für jeden der Schritte steht ein eigener MSDN-Dokumentationsartikel zur Verfügung:
- Übersicht
- Verwalten von Gerätekanälen
- Hochladen von Designdateien
- Bearbeiten von Masterseiten
- Bearbeiten von Anzeigevorlagen
- Bearbeiten von Seitenlayouts
- Veröffentlichen und Anwenden des Designs
- Erstellen des Designpakets
Anpassen von SharePoint mit den bevorzugten Tools
Die Anpassung des Designs Ihrer Website erschöpft sich nicht in der Umwandlung von HTML in ASP.NET. Zur Unterstützung bei der Websiteerstellung stehen häufig verwendete Platzhalter zur Verfügung, die Sie mit Ihren Inhalten füllen können. Für das Seitenlayout haben wir alle spezifischen Seitenfelder für den jeweils ausgewählten Inhaltstyp eingefügt. Dadurch können Sie sich bei der Erstellung Ihrer SharePoint-Designdateien mehr auf die Bearbeitung und den Feinschliff konzentrieren und müssen sich weniger mit der Erstellung an sich beschäftigen.
Der Codeausschnittkatalog ist ein praktischer Startpunkt für das Hinzufügen von SharePoint-Funktionen für Ihre Website. Wenn Sie bereits mit älteren Versionen von SharePoint vertraut sind, können Sie sich den Katalog als den Steuerelementesatz vorstellen, den Sie über SharePoint Designer aufrufen können – allerdings mit ein paar Extras. Der Codeausschnittkatalog bietet eine HTML-Version für eine Gruppe allgemeiner Komponenten (häufig mit einer statischen Vorschau, um zu veranschaulichen, womit Sie arbeiten, wenn Sie Ihre Dateien beispielsweise in der geteilten Ansicht von Dreamweaver bearbeiten). Hierzu zählen auch sämtliche Webparts aus dem Webpartkatalog. Sie können die Eigenschaften für jeden Ausschnitt anpassen und ihn dann einfach in Ihre HTML-Masterseite oder in Ihr HTML-Seitenlayout einfügen. Die Umwandlung in das von SharePoint benötigte ASP.NET-Steuerelement erfolgt im Hintergrund.
Abbildung 1. Am Seitenanfang des Codeausschnittkatalogs befindet sich ein Menüband mit allen Ausschnitten. Der Text auf der Seite enthält die Beschreibung, die Eigenschaften und den HTML-Code des Ausschnitts sowie eine Livevorschau. Jede Masterseite besitzt den gleichen Codeausschnittkatalog. Dieser unterscheidet sich geringfügig vom Katalog für Seitenlayouts. Der Codeausschnittkatalog eines Seitenlayouts ist abhängig vom jeweiligen Inhaltstyp, da sich je nach Inhaltstyp die Seitenfelder ändern.
Verwenden von SharePoint auf einem beliebigen Gerät
Die Besucher Ihrer Website verwenden nicht mehr ausschließlich ihre Maus und ihren Desktopcomputer oder Laptop. Heutzutage steht mit Tablets, Smartphones und Surfaces eine wahre Flut von Geräten zur Verfügung! Wie schaffen Sie also eine Umgebung für Ihre Benutzer, bei der die jeweils verwendete Bildschirmgröße optimal ausgenutzt wird? Optimiert für Touch-basierte Geräte? In SharePoint 2013 ermöglichen Gerätekanäle eine bestmögliche Darstellung Ihrer Website auf dem Gerät, das der jeweilige Besucher gerade verwendet. Als Designer können Sie sich überlegen, wie Ihre Website auf sämtlichen unterschiedlichen Formfaktoren aussehen soll. Die Abgrenzung erfolgt mittels Benutzer-Agent-Teilzeichenfolge, die bis zu zehn verschiedenen Kanälen zugewiesen werden kann.
Jeder Kanal kann auf mehrere Geräte ausgerichtet werden. So können Sie beispielsweise einen Kanal für Windows Phones und iPhones verwenden, da diese eine ähnliche Bildschirmgröße besitzen, und einen separaten Kanal für das iPad. Für jeden Kanal können Sie eine andere Masterseite und ein anderes CSS verwenden. Zudem können Sie Inhalte bestimmten Kanälen vorbehalten. Und das alles mit exakt derselben URL (ein großer Vorteil für den Komfort und die Suchmaschinenoptimierung).
Die Gerätekanalinfrastruktur ermöglicht die Verwendung von Gerätekanalbereichen – eine praktische Ressource für die gezielte Verwendung von Inhalten. Inhalte, die sich in einem dieser Bereiche befinden, werden auf der Grundlage serverseitiger Logik nur für die angegebenen Kanäle gerendert. Dadurch verringern sich Seitenladezeiten und die Menge der gesendeten Bytes. In Kombination mit einem reaktionsschnellen CSS-Design lässt sich mit diesen Bereichen eine schnellere und optimierte Benutzeroberfläche schaffen. Statt der Verwendung unterschiedlicher Kanäle für unterschiedliche Bildschirmgrößen (wie im vorherigen Beispiel) können Sie hier einen auf der Teilzeichenfolge „iOS“ basierenden Kanal verwenden, der iPads, iPhones und iPad Minis umfasst und eine einzelne Masterseite sendet, die je nach Bildschirmauflösung des Geräts ein anderes CSS lädt. Als Mitglied des Windows Phone-Teams können Sie so beispielsweise iOS-Geräte als Ziel festlegen und einen Bereich mit Werbung für Windows Phone erstellen.
Abbildung 2 und Abbildung 3. Gegenüberstellung von Designmodellen der Browserumgebung und der Umgebung für mobile Geräte für eine Nachrichtenseite auf der Grundlage der websiteübergreifenden Veröffentlichung von Sammlungen. Hierbei werden ein reaktionsschnelles CSS, Gerätekanalbereiche und eine Anzeigevorlage verwendet, die die Darstellung von Ergebnissen des Inhaltssuche-Webparts abhängig vom Gerätekanal anpasst.
In diesem Einführungsbeitrag haben Sie erfahren, wie einfach Sie die Onlinemarke Ihres Unternehmens unter Verwendung Ihrer bevorzugten Tools und dem leistungsfähigen Content-Management-System von SharePoint 2013 definieren können. Weitere Informationen finden Sie in den restlichen Inhalten und Dokumentationen auf der MSDN-Website. Die Artikel Erstellen von Websites für SharePoint 2013, Übersicht über den Design-Manager in SharePoint 2013 und Entwickeln des Websitedesigns in SharePoint 2013 eignen sich hervorragend für den Einstieg. Viel Spaß beim Designen!
– Alyssa Levitz, SharePoint Program Manager
Dies ist ein übersetzter Blogbeitrag. Den Originalartikel finden Sie unter Create your online brand with a combination of SharePoint 2013 and the web technologies you already know