Wenig Erfahrung mit CMS Systemen und kaum Zeit zur Inhaltspflege?

Tipp der Woche

Dann ist die Inline Editing Funktion des Page Editors von Sitecore genau das richtige für Sie oder Ihre Mitarbeiter.  So kann der Autor, nach erfolgreichem Login, die einzelnen Elemente der Webseite direkt bearbeiten (siehe Screenshot). Es sind hier weder spezifische CMS noch Programmierkenntnisse notwendig. Neben den klassischen Editiermöglichkeiten (fett, kursiv, unterstreichen und Hyperlinks setzen) können im Editor unter anderem auch Personalisierungen und A/B Tests vorgenommen werden.

Page Editor für jedes Bedürfnis!

Custom Dialogs im Rich Text Editor

Sitecore bietet Dank des RadEditors von Telerik standardmässig einen mächtigen Rich Text Editor. Durch die starke Vernetzung mit Sitecore kann dieser sehr einfach erweitert werden. So können beispielsweise in der Core-Datenbank neue Rich Text Profile erstellt werden, welche die Möglichkeit bieten, dem Autor im Editor komplett unterschiedliche Buttons zur Verfügung zu stellen. Ebenfalls können auf einfache Weise Snippets erstellt werden, die das Einfügen von statischem HTML-Code in den Editor per Klick ermöglichen. Dies funktioniert bei wenig komplexen Strukturen, wie Tabellen und Listen, ziemlich gut. Bei komplexeren Strukturen, wie beispielsweise einem Youtube-Iframe, kommt diese Technik jedoch an ihre Grenzen, da der Benutzer hier gezwungen ist, die Youtube-ID manuell in den Code einzufügen. Für Autoren ohne HTML-Kenntnisse ist dies oftmals mit Problemen verbunden. Es wäre daher sehr hilfreich, wenn der Autor die Möglichkeit hat, konfigurierbare Werte zunächst in ein Formular einzutragen und der richtige HTML-Code dann per Knopfdruck erzeugt wird. Für die Lösung dieses Problems bietet Sitecore ebenfalls eine Möglichkeit, die jedoch etwas Programmieraufwand erfordert. Der im Folgenden beschriebene Custom Dialog erzeugt genau den oben angesprochenen Youtube-Iframe.

Schritt 1:

Als erstes muss ein neuer Html Editor Button im gewünschten Rich Text Editor Profil erzeugt werden. Dies kann in der Core-Datenbank unter dem Pfad \sitecore\system\settings\Html Editor Profiles\My Rich Text Profile\Toolbar X bewerkstelligt werden.

Schritt 2:

Nun muss das User Interface des Dialogs erstellt werden. Dies wird mittels XML realisiert und im Ordner /sitecore/shell/Controls/Rich Text Editor/InsertYoutubeVideo erstellt. Im SDN ist mehr zu diesem Thema beschrieben.

<?xml version="1.0" encoding="utf-8" ?>

<control xmlns="http://schemas.sitecore.net/Visual-Studio-Intellisense">
    <RichText.InsertYoutubeVideo>

        <FormDialog Icon="Multimedia/32x32/film_clip.png" Header="Insert a youtube video"
     Text="You can insert a youtube video as an iframe." OKButton="Insert Video">
           
            <script Type="text/javascript" Language="javascript" Src="Controls/Rich Text Editor/InsertYoutubeVideo/InsertYoutubeVideo.js">.</script>

            <CodeBeside Type="Sitecore.CustomCode.InsertYoutubeVideoDialog,Sitecore.CustomCode"/>

            <GridPanel Width="100%" Columns="2">
                <Border Width="100%" GridPanel.Width="20%" Padding="0px 4px 0px 0px">
                    <Literal Text="YouTube ID:"/>
                </Border>
                <Edit ID="YoutubeId" Width="95%"/>

                <Border Width="100%" GridPanel.Width="20%" Padding="0px 4px 0px 0px">
                    <Literal Text="Video Width:"/>
                </Border>
                <Edit ID="VideoWidth" Width="95%"/>

                <Border Width="100%" GridPanel.Width="20%" Padding="0px 4px 0px 0px">
                    <Literal Text="Video Height:"/>
                </Border>
                <Edit ID="VideoHeight" Width="95%"/>
            </GridPanel>

        </FormDialog>

    </RichText.InsertYoutubeVideo>
</control>

Schritt 3:

Der nächste Schritt ist die Erstellung des Code-Behind für das Dialog Control.

// --------------------------------------------------------------------------------------------------------------------
// <copyright file="InsertYoutubeVideoDialog.cs" company="Namics AG">
//   (c) Namics AG
// </copyright>
// <summary>
//   Dialog form to insert a youtube video.
// </summary>
// --------------------------------------------------------------------------------------------------------------------

namespace Sitecore.CustomCode
{
    using System;

    using Sitecore;
    using Sitecore.Web;
    using Sitecore.Web.UI.Pages;
    using Sitecore.Web.UI.Sheer;

    /// <summary>
    /// Dialog form to insert a youtube video.
    /// </summary>
    public class InsertYoutubeVideoDialog : DialogForm
    {
        /// <summary>
        /// The youtube id.
        /// </summary>
        protected Sitecore.Web.UI.HtmlControls.Edit YoutubeId;

        /// <summary>
        /// The video width.
        /// </summary>
        protected Sitecore.Web.UI.HtmlControls.Edit VideoWidth;

        /// <summary>
        /// The video height.
        /// </summary>
        protected Sitecore.Web.UI.HtmlControls.Edit VideoHeight;

        /// <summary>
        /// Gets or sets the mode.
        /// </summary>
        protected string Mode
        {
            get
            {
                string modeString = StringUtil.GetString(ServerProperties["Mode"]);
                if (!string.IsNullOrEmpty(modeString))
                {
                    return modeString;
                }

                return "shell";
            }

            set
            {
                ServerProperties["Mode"] = value;
            }
        }

        /// <summary>
        /// The on load.
        /// </summary>
        /// <param name="pE">
        /// The e.
        /// </param>
        protected override void OnLoad(EventArgs pE)
        {
            base.OnLoad(pE);
            if (Context.ClientPage.IsEvent)
            {
                return;
            }

            Mode = WebUtil.GetQueryString("mo");
            YoutubeId.Value = WebUtil.GetQueryString("id");
            VideoWidth.Value = WebUtil.GetQueryString("width");
            VideoHeight.Value = WebUtil.GetQueryString("height");
        }

        /// <summary>
        /// The ok event.
        /// </summary>
        /// <param name="pSender">
        /// The sender.
        /// </param>
        /// <param name="pArgs">
        /// The args.
        /// </param>
        protected override void OnOK(object pSender, EventArgs pArgs)
        {
            if (string.IsNullOrEmpty(YoutubeId.Value) || string.IsNullOrEmpty(VideoWidth.Value) || string.IsNullOrEmpty(VideoHeight.Value))
            {
                SheerResponse.Alert("Please enter values for the fields YouTube ID, Video Width and Video Height.");
                return;
            }
           
            string outputYoutubeId = StringUtil.EscapeJavascriptString(YoutubeId.Value, true);
            string outputVideoWidth = StringUtil.EscapeJavascriptString(VideoWidth.Value, true);
            string outputVideoHeight = StringUtil.EscapeJavascriptString(VideoHeight.Value, true);
            if (Mode == "webedit")
            {
                SheerResponse.SetDialogValue(outputYoutubeId);
                base.OnOK(pSender, pArgs);
                return;
            }

            SheerResponse.Eval("scClose(" + outputYoutubeId + ", " + outputVideoWidth + ", " + outputVideoHeight + ")");
        }

        /// <summary>
        /// The cancel event.
        /// </summary>
        /// <param name="pSender">
        /// The sender.
        /// </param>
        /// <param name="pArgs">
        /// The args.
        /// </param>
        protected override void OnCancel(object pSender, EventArgs pArgs)
        {
            if (Mode == "webedit")
            {
                base.OnCancel(pSender, pArgs);
                return;
            }

            SheerResponse.Eval("scCancel()");
        }
    }
}

Schritt 4:

Nun wird der Javascript-Controller erstellt, der clientseitig für die Abarbeitung der Click-Events zuständig ist. Dieser muss im bereits erstellten XML-Control referenziert werden. Diese Javascript-Datei wird im selben Ordner angelegt wie die XML-Datei.

function GetDialogArguments() {
    return getRadWindow().ClientParameters;
}

function getRadWindow() {
  if (window.radWindow) {
        return window.radWindow;
  }
   
    if (window.frameElement && window.frameElement.radWindow) {
        return window.frameElement.radWindow;
    }
   
    return null;
}

var isRadWindow = true;

var radWindow = getRadWindow();

if (radWindow) {
  if (window.dialogArguments) {
    radWindow.Window = window;
  }
}

function scClose(youtubeId, videoWidth, videoHeight) {
    var returnValue = {
        youtubeId: youtubeId,
        videoWidth: videoWidth,
        videoHeight: videoHeight
    };

    getRadWindow().close(returnValue);
}

function scCancel() {
  getRadWindow().close();
}

function scCloseWebEdit(url) {
  window.returnValue = url;
  window.close();
}

if (window.focus && Prototype.Browser.Gecko) {
  window.focus();
}

Schritt 5:

Zu guter Letzt wird der erstellte Button in die Command-Liste des RadEditors eingetragen. Diese befindet sich in der Datei /sitecore/shell/Controls/Rich Text Editor/RichText Commands.js

RadEditorCommandList["InsertYoutubeVideo"] = function (commandName, editor, tool) {
    var html = editor.getSelectionHtml();
   
    var attributes = GetYoutubeVideoAttributes(html);

    scEditor = editor;

    editor.showExternalDialog(
            "/sitecore/shell/default.aspx?xmlcontrol=RichText.InsertYoutubeVideo&id=" + attributes.youtubeId + "&width=" + attributes.videoWidth + "&height=" + attributes.videoHeight,
            null, //argument
            500,
            400,
            scInsertYoutubeVideoDialog,
            null,
            "Insert youtube video");
};


// CallBack function for InsertYoutubeVideo window
function scInsertYoutubeVideoDialog(sender, returnValue) {
    if (!returnValue) {
        return;
    }
   
    var htmlCode = "<iframe width="" + returnValue.videoWidth + "" height="" + returnValue.videoHeight + "" src="http://www.youtube.com/embed/" + returnValue.youtubeId + "" frameborder="0" allowfullscreen="true"></iframe>";

    scEditor.pasteHtml(htmlCode, "DocumentManager");
}

GetYoutubeVideoAttributes = function (html) {
    var returnValue = {
        youtubeId: "",
        videoWidth: "",
        videoHeight: ""
    };
   
    var pattern = "<iframe width="(.*)" height="(.*)" src="http://www.youtube.com/embed/(.*)" frameborder="0" allowfullscreen="true"></iframe>";
    var regex = new RegExp(pattern, 'm');
    var match = regex.exec(html);
    if (match && match.length >= 1) {
        if (match[1]) {
            returnValue.videoWidth = match[1];
        }
        if (match[2]) {
            returnValue.videoHeight = match[2];
        }
        if (match[3]) {
            returnValue.youtubeId = match[3];
        }
    }

    return returnValue;
}

Resultat:

Der erstellte Dialog bietet den Autoren eine komfortable Möglichkeit, Youtube-Videos als Iframe in einen Text einzufügen. Wird ein eingefügtes Video selektiert und erneut der Button betätigt, so sind die zuvor eingetragenen Werte im Dialog bereits automatisch eingetragen.

Die Schritte zur erfolgreichen Personalisierung Ihrer Webseite

Tipp der Woche

Sie wollten die Inhalte Ihrer Webseite immer schon Real-Time an die Wünsche Ihres Kunden, abhängig von dessen Surfverhalten, anpassen?
Mit der DMS (Digital Marketing Suite) von Sitecore ist dies möglich!

Die DMS bietet:

  • GEOIP LookUp
  • Marketing Automation
  • Visitor & Content Profiling

Welche Voraussetzungen sind erforderlich?

Bevor Sie mit der Personalisierung im System beginnen, sollten Sie folgende Grundfragen klären:

  1. Was sind die Ziele Ihrer Webseite?
  2. Wer ist Ihre Zielgruppe?
  3. Welche Schritte durchlaufen die Zielgruppen bevor sie z.B. den Kauf / die Registration abschliessen?
  4. Welcher Inhalt ist relevant für welche Zielgruppe?
  5. Welche Bereiche der Webseite wollen Sie personalisieren?

Die Schritte zur Personalisierung in der DMS

DMS Personalisierung
Wenn Sie sich also über das Ziel, Ihre Zielgruppe, deren Verhalten etc. bewusst sind, können Sie beginnen Profile Keys (1), die Attribute für Zielgruppen, anzulegen.
Mit Hilfe von Pattern Cards (2) können Sie dann Verhaltensweisen von Usern festlegen. Diese werden verwendet um in Real-Time das naheliegendste Pattern, basierend auf dem Surfverhalten, zu identifizieren. Zusätzlich zu den Pattern Cards sollten auch Profile Cards(3) definiert werden, die detaillierte Informationen über die Attribute einzelner Persona enthalten. Haben Sie die Profile Keys, Pattern Cards, Profile Cards/Persona definiert, können Sie die Ziele (4) im System festlegen und die gewünschten Inhalte personalisieren (5). Damit das System auch weiss, bei welchem Verhalten welcher Persona, welcher Inhalt angezeigt werden sollte, müssen Personalisierungsregeln (5) im Editor festgelegt werden (z.B. wenn das derzeitige Verhalten dem XYZ Pattern des Profils XYZ entspricht, so wird der Inhalt X angezeigt). Ein wichtiger Schritt nach der Personalisierung der Inhalte ist dann das Testing und Reporting (6) mittels verfügbarer Tools, u.a. dem A/B Testing. So können Sie die Zielerreichung überprüfen und optimieren, indem Sie basierend auf den Resultaten die Inhalte gegebenenfalls neu anpassen und neue Profile Keys / Profile Cards / Profile Patterns definieren.

Welche zusätzlichen Lizenzkosten fallen an?

Zusätzliche Lizenzkosten fallen keine an, da dies in der O.O.B. (Out of the Box) Sitecore Lösung integriert ist.

Überzeugen Sie Ihre Kunden mit personalisierten Webseiten – Wir unterstützen Sie gerne!

Viele Neuigkeiten auf dem Sitecore-Partnertag

Am 18. Oktober war es wieder einmal soweit: Sitecore Partnertag in Bremen. Zusammen mit ca. 60 Partnern konnte Namics  sich einen Einblick in die Entwicklung Sitecores verschaffen. Sven Lehmkuhl, Sitecore President, informierte die Besucher mit Zahlen zur beeindruckenden Entwicklung des Unternehmens: die aktuell 470 Mitarbeiter werden im kommenden Jahr mit weiteren 180 verstärkt –„Jedes Jahr eine zweistellige Wachstumsrate“, so Lehmkuhl. Und dass Sitecore auch positiv zur Entwicklung anderer Unternehmen beiträgt zeigt Sven Lehmkuhl am Beispiel Easyjet: „Nach der Einführung von Sitecore beim Relaunch der Easyjet-Website, ist der Aktienkurs gestiegen.“ Auch wenn Ursache und Wirkung nicht nur auf einem Faktor beruhen, zeigt dies deutlich das Potenzial für Unternehmen, die ihren Umsatz fast ausschließlich über ihre Website generieren.

Spannende Themen gab es auch im Bereich der Produktentwicklung. So zeigte Sitrion, wie einfach und schnell SAP-Geschäftsprozesse und -daten in Sitecore integriert werden können. Mit Siteport von Oshyn führte Diego Rebosio die Migration von Inhalten und Templates anderer CMS-Produkte vor. Die Integration von Social Media Anwendungen in Sitecore wurde von Catrine Enna Bay vorgestellt – die Komfo-Plattform ermöglicht es, Facebook und Twitter Inhalte und Kampagnen in Sitecoreumgebungen zu managen.

Nach den Produktvorstellungen konnten einige Partner mit ihren Sitecore Usecases das Publikum beeindrucken. Hier zeigt sich einmal mehr die weltweite Erfolgsgeschichte von Sitecore. Namics konnte hier bereits als Partner viele seiner Kunden davon überzeugen.

Zum Abschluss gab John Field, Sitecores European Product Marketing Manager, noch einen Ausblick auf die Roadmap. Nicht nur Namics freut sich auf die spannenden Sitecore Produkte und Neuerungen, die dort vorgestellt wurden. Hier auf unserem Sitecore-Blog werden wir darüber berichten.

Vielen Dank für den gelungen Partnertag mit interessanten Einblicken und anregenden Gesprächen in den Pausen!

Welche Möglichkeiten bietet Sitecore externe Daten zu integrieren?

Tipp der Woche

Die einfachste Integration von externen Daten ist via Link oder iFrame. Darüber hinaus bietet Sitecore zahlreiche Möglichkeiten Verbindungen zu Datenbanken, Web-Services oder anderen externen Services einschliesslich SharePoint herzustellen. Der Enterprise Integration Layer ermöglicht es, externe Daten in Sitecore einzubinden als wären es Sitecore Inhalte.

Hilfreich in diesem Zusammenhang sind auch die „Shared Source Module“, welche auf dem Opensource Gedanke basieren. Alle Module werden vor der Publikation durch Sitecore geprüft und können jetzt neu unter Sitecore Marketplace (http://marketplace.sitecore.net) heruntergeladen werden. Hier finden Sie unter anderem Module für Youtube Integration, Data Import oder die Anbindungen an SQL / XML Datenbanken. Weiters wurden auch spezielle Module für Multimedia Inhalte entwickelt.

Hier
finden Sie einen Überblick (aus technischer Perspektive) über die Integration von externen Daten mit Sitecore

Vereinfachen Sie Ihren Verwaltungsaufwand und integrieren Sie Ihre bestehenden Systeme in ein Sitecore CMS!

Sitecore Architektur-Varianten

Nach der Entscheidung, ein neues  Content Management System einzuführen, stellt sich früher oder später die Frage, welche Netzwerk-Architektur Verwendung finden soll. Die Entscheidungsgrundlage für die Auswahl der Architektur-Variante ist insbesondere:

  • die Anforderung an die Verfügbarkeit des Systems
  • die Anforderung an die Laststabilität des Systems
  • die Anforderung an die Sicherheit des Systems
  • die bereits bestehende Infrastruktur
  • das zur Verfügung stehende Budget

Nachfolgend werden mögliche Sitecore Netzwerk-Architekturen für verschiedene Internet Szenarien vorgestellt und deren Vorteile und Nachteile kurz beleuchtet.

Eine Sitecore Netzwerk-Architektur besteht aus mehreren Komponenten: dem sogenannten Content Management Server (nachfolgend CM genannt), der primär für die Erfassung von Content für die Autoren dient und dem Content Delivery Server (nachfolgend CD genannt), der als sogenannter Front-End Server fungiert. Weiterhin erforderlich ist ein SQL Server, der den Content sowie die Konfigurationseinstellungen beinhaltet. Der SQL-Server enthält dafür drei Sitecore Datenbanken: Master, Web und Core. Der Content wird in der Master-Datenbank verwaltet und im Rahmen des Veröffentlichungsprozesses auf die Web-Datenbank transferiert. Die Core-Datenbank beinhaltet die Sitecore Einstellungen sowie die Security Informationen von Sitecore.

Stand-Alone-Architektur

Hierbei übernimmt ein einzelner Server sowohl die Funktion des CM als auch des CD.

Vorteile dieser Architektur:

  • Einfache Installation und Administration
  • Keine Load-Balancer Konfiguration notwendig
  • Schnelle Inbetriebnahme möglich

Nachteile dieser Architektur:

  • Aus Gründen der Performance sollte CM und CD nicht zusammen auf einem Server installiert werden. Denn sobald die Autoren ihre erstellten Seiten veröffentlichen, wird der Server für einen kurzen Moment ausgelastet. Dies könnte die Performance des Internet Auftritts beeinträchtigen.
  • Sollte der Server ausfallen, ist die Erreichbarkeit des Internet-Auftritts nicht mehr gewährleistet.
  • Beim Veröffentlichen von Seiten durch die Autoren wird zudem der Cache geleert, dies bedingt eine längere Ladezeit der Webseiten beim erstmaligen Aufruf nach der Veröffentlichung.

Netzwerk-Architektur mit separatem CM und CD

Diese Architekturvariante sieht jeweils einen separaten Server für CM und CD vor:

Vorteile dieser Architektur:

  • Autoren greifen auf einen dedizierten CM Server zu und belasten somit nicht den CD Server. Der Veröffentlichungsprozess beeinträchtigt die Performance der Website nicht.
  • Der Cache wird durch den Veröffentlichungsprozess nur inkrementell geleert. Damit bleiben kurze Ladezeiten für den übrigen Internet-Auftritt gewährleistet.
  • Bei einem Ausfall des CM kann der CD kurzzeitig die Aufgaben des CM übernehmen. Der Internet-Auftritt bleibt also weiterhin kontrollierbar. Allerdings gelten die Einschränkungen eines Stand-Alone-Systems.

Nachteile dieser Architektur:

  • Bei einem Ausfall des CD ist der Internet-Auftritt für Besucher nicht mehr erreichbar.

Netzwerk-Architektur  mit einer durch eine Firewall getrennten CM und CD Umgebung

Bei dieser System-Architektur liegt das Augenmerk auf der Sicherheit des Systems. Dazu werden die CD und die CM Server durch eine Firewall getrennt. Der CD und der SQL-Server (Database1) befinden sich in der DMZ und der CM und der SQL-Server (Database2) im LAN.

Vorteile dieser Architektur:

  • Der CM ist nicht von aussen zugänglich und wird durch eine Firewall geschützt.
  • Der CD verfügt über einen eigenen SQL-Server. Dies dient der Optimierung der Performance.
  • Bei einem Ausfall des CM kann der CD kurzzeitig die Aufgaben des CM übernehmen. Der Internet-Auftritt bleibt also weiterhin kontrollierbar. Allerdings gelten die Einschränkungen eines Stand-Alone-Systems.

Nachteile dieser Architektur:

  • Bei Ausfall des CD können die Benutzer auch hier nicht auf den Internet Auftritt zugreifen.

Architektur mit zwei CD und Load-Balancing (Hochverfügbarkeit)

Diese Sitecore Architektur gewährleistet sowohl eine hohe Verfügbarkeit als auch eine hohe Sicherheit. Dabei befinden sich zwei CD Server mit Load-Balancer sowie der SQL-Server (Database 1) in der DMZ. CM-Server und SQL-Server (Database 2) befinden sich im LAN.

Vorteile dieser Architektur:

  • Der CM ist von aussen nicht zugänglich und wird durch eine Firewall geschützt.
  • Der CD verfügt über einen eigenen SQL-Server. Dies dient der Optimierung der Performance.
  • Die beiden CD gewährleisten eine hohe Verfügbarkeit, da bei dem Ausfall eines CD der andere noch von aussen erreichbar bleibt und somit die Verfügbarkeit des Internet-Auftritts weiterhin gewährleistet.
  • Bei einem Ausfall des CM kann einer der CD kurzzeitig die Aufgaben des CM übernehmen. Der Internet-Auftritt bleibt also weiterhin kontrollierbar.

Nachteile dieser Architektur:

  • Variante erfordert mehr Aufwand für die Konfiguration.
  • Diese Lösung stellt umfangreichere Hardware-Anforderungen als die vorgenannten Varianten.

Fazit und Empfehlung

Nachdem nun mehrere mögliche Sitecore Architekturen mitsamt ihren Vor- und Nachteilen vorgestellt wurden, wird deutlich, dass das Aussprechen einer generellen Empfehlung nicht sehr sinnvoll ist. Vielmehr hängt die Auswahl der geeigneten Architektur-Variante sehr stark von den individuellen Anforderungen an das System und der verfügbaren Infrastruktur ab. Allerdings kann festgehalten werden, dass zum einen der gemeinsame Betrieb von CM und CD auf einem Server aufgrund der hohen Lastspitzen im Veröffentlichungsprozess nicht empfehlenswert ist und zum anderen der Einsatz von einem CM-Server und mehreren CD-Servern mit Load-Balancing eine nahezu beliebige Skalierbarkeit und Performance sowie eine enorme Flexibilität des Systems ermöglichen.

 

Der Namics Sitecore Showcase

 

Ich habe mir vor längerer Zeit, als ich in unserem Sitecore Team angefangen habe, ein Projekt geschnappt, welches mir helfen sollte Sitecore kennen zu lernen.

Vorstellungen und Aufbau

Ziel des Projektes war, eine saubere und gut funktionierende Demo-Umgebung von Sitecore zur Verfügung zu haben. Schlussendlich sollte die Lösung aus einem Blog bestehen, den man auch mit anderen Modulen oder Features erweitern könnte.

Der Blog sollte in verschiedene Kategorien eingeteilt werden können. Vom Design her sollte er ähnlich wie die übrigen Namics-Seiten aufgebaut sein. Ebenfalls sollte er vollständig über den Sitecore Page-Editor bedienbar sein.

In einem weiteren Release sollte aus der Lösung eine Multisite entstehen und mehrere Sprachen integriert werden.

Der Showcase besteht aus drei verschiedenen Seitentypen. Diese sind die Übersichtsseite, die Kategorie Übersicht und der Blogeintrag. Das Frontend wurde mit Terrific umgesetzt. Im Sitecore-Backend habe ich versucht eine möglichst logische Struktur zu erstellen.

JSON Service

Ich wollte für den Blog unbedingt auch eine dynamische Wortmarke haben. Dazu habe ich mir das Terrific-Modul von einem anderen Projekt kopiert und es dann integriert. Damit wurden jedoch die Wörter direkt in das JavaScript File hineingeschrieben. Damit ich dies im Backend steuern konnte, habe ich einen JSON-Service erstellt.

Auf einem Sitecore-Item habe ein einfaches Textfeld erstellt, in dem ich alle Tags definieren konnte. Im Service habe ich dann die Wörter ausgelesen und in einen Array gespeichert. Zusätzlich habe ich einen Counter erstellt, mit dem ich festlegen kann ,wie viele Wörter angezeigt werden sollen. Weiterhin wird der Array wird noch zufällig sortiert und immer die ersten Wörter (Counter) des Arrays an ein JavaScript zurückgegeben.

Fazit

Ich habe es geschafft, mich mit diesem Projekt näher an die .NET Technologien und Sitecore heran zu arbeiten. Diese Arbeit hat mein Interesse für die Backend-Entwicklung ebenfalls gestärkt. In der nächsten Zeit soll der Blog so erweitert werden, dass dieser möglichst viele Funktionen von Sitecore wird beinhalten können.

Starter Paket für Sitecore Entwickler

In der Präsentation wird vermittelt, was Sitecore Software Engineers grundlegendes über das CMS wissen sollten, um mit der Entwicklung zu starten.

Nachfolgende Themen werden behandelt:

  • Einrichten
  • Authoring
  • Development
  • Deployment
  • Ressourcen

Haben wir Dein Interesse geweckt für die Sitecore CMS-Entwicklung? Namics hat fortlaufend spannende Stellen im .NET Umfeld in der Schweiz und Deutschland zu besetzen. Wir freuen uns auf Deine Bewerbung!

Broken Links? Wie entdecke ich sie vor den Kunden?

Tipp der Woche

Mit einem einfachen Rechtsklick (links neben der Seitenstruktur) können Sie die Anzeige von „Broken Links“ aktivieren. So werden alle Seiten bzw. Items, welche „Broken Links“ enthalten, mit einem „gebrochenen Link-Symbol“ gekennzeichnet.
Broken Links Anzeige aktivieren
Weiters besteht die Möglichkeit einen „Broken Link Report“ zu integrieren, bei welchem Sie auf einen Blick alle „Broken Links“ einsehen und diese z.B. in eine Excel-Datei exportieren können.

Wie kann ich das Entstehen von „Broken Links“ vermeiden?

Mit dem Real-Time Link-Handler von Sitecore vermeiden Sie grundsätzlich die Entstehung von Broken Links.  Dieser ermöglicht, dass die Links immer aktuell gehalten werden und die Seitenkonsistenz erhalten wird. So werden sie bereits beim Löschen oder Verschieben von Seiten und Items auf bestehende Verlinkungen hingewiesen und können direkt bestimmen, ob diese neu verlinkt, gelöscht oder „broken“ sein sollen. Häufige Ursache für „Broken Links“ ist neben der Verschiebung und Löschung von Inhalten auch die Verlinkung auf unpublished Seiten oder Items.

Kontrollieren Sie regelmässig Ihre Broken Links und treffen Sie vorbeugende Massnahmen. Ein überschaubarer Zeitaufwand für Sie  – ein grosser Gewinn für Ihre Kunden.

Type Safe Programming mit Sitecore

Das Ablegen der strukturierten Inhalte in Sitecore erfolgt in vordefinierten Templates. Die Items speichern die nach dem zugeordneten Template strukturierten Informationen ab, welche anschliessend für das Rendern der Webseite verwendet werden können.

Problematik

Im Sitecore Backend wird diese Struktur/Templates für das Editieren der Informationen herangezogen. Dem Programmierer bleibt die Struktur der Templates während der Design Time (Entwicklung) immer verwehrt. Erst zur Runtime sind diese Informationen verfügbar. Dies führt dazu, dass beim kompilieren keine Validierung des Zugriffes auf die Daten erfolgen kann, was z.B. beim Umbenennen oder Typenändern eines Feldes nicht sofort zu einer Exception führt. Weiter muss der Entwickler immer den jeweiligen Feldnamen und Typen kennen/nachschlagen.

Lösung

Extrahieren der gesamten Sitecore Template Struktur zur Entwicklungszeit ins Visual Studio. Dabei gibt es unterschiedliche Varianten wie dies erfolgen kann:

Methode Beschreibung Vorteile Nachteile
dynamic Mit .Net 3.0 wurden dynamische Objekte eingeführt die erst zur Runtime bestimmt werden.
  • sehr einfache Implementation
  • Kein Intellisense zur Design Time
  • Keine Validierung zum Kompilierzeitpunkt
F# Typeprovider F# bietet die Möglichkeit beim Kompilieren dynamisch statische Typen aus externen definitionen zu erstellen
  • F# Klassen lassen sich nahtlos in C# verwenden
  • Voller Funktionsumfang
  • Automatisches Update bei Änderungen
  • Intellisense nur in F# vorhanden
T4 Templates Mittels T4 Templates werden zur Design Time statische Klassen generiert, welche den Zugriff auf die Sitecore Items stark typisiert wrappen
  • Intellisense
  • Validierung zum Kompilierzeitpunkt
  • Manuelles Anstossen des Generiervorganges bei Änderungen (könnte durch PreBuild Action erfolgen)
Project Roslyn Spracherweiterung für C# welche zur Design und Runtime den Zugriff auf die Item Definition in Sitecore sicherstellt
  • Optimale Integration
  • Änderungen im Sitecore sind sofort erkennbar
  • LINQ Funktionalität
  • Sehr komplex
Wir haben uns für die T4 Template Lösung entschieden, da alle aktuellen Codegerneratoren im Visualstudio darauf basieren und es sich um eine bewährte Technologie handelt (Microsoft Entity Framework, SOAP, usw). Um den Zugriff auf Sitecore stark zu kapseln wurden für alle Standardfeldtypen aus Sitecore Helperklassen erstellt die z.B. den Zugriff auf die Url direkt über ein Property möglich machen.

Sitecore Template

Generiertes Interface

Datenzugriff (Razor)

Durch die weitere Integration von Razor als Render Engine kann nun stark typisiert sauberer Render-Code erstellt werden und gänzlich auf den Stringbuilder und dergleichen verzichtet werden.

Durch den Aufbau dieser beiden Verbesserungen konnte das Entwickeln/Debuggen mit Sitecore massiv verbessert und beschleunigt werden.