Insbesondere die Unterstützung von Windows Azure wurde nochmals verbessert.

In diesem Artikel werden wir das Open Source ASP.NET CMS Composite C1 mit WebMatrix 3 installieren und direkt als Windows Azure Website veröffentlichen.

Beim ersten Start von WebMatrix 3 haben wir die Möglichkeit, uns mit unserem Windows Azure Konto anzumelden:

Um Composite C1 zu installieren, erstellen wir eine neue Seite mit Hilfe des AppKatalogs:

In diesem Webkatalog wählen wir dann Composite C1 als Anwendung aus und legen einen Namen für die Website fest – in diesem Beispiel ‘Omnicorp’:

Jetzt kommt die erste Neuerung in WebMatrix 3 – wir haben im nächsten Schritt die Möglichkeit, direkt eine Windows Azure Website für unsere Composite C1 Installation anzulegen. Auch dort legen wir den Namen ‘Omnicorp’ sowie einen Speicherort für die Website fest:

Nachdem die Installation beendet ist, befinden wir uns im Hauptfenster unseres Webprojektes und erhalten den Hinweis, dass unsere Azure Website ‘omnicorp.azurewebsites.net‘ bereit ist und wir unsere lokalen Änderungen hochladen können:

Bevor wir die Website veröffentlichen, füge ich zur Demonstration im Razor-Template der Startseite noch eine H1-Überschrift mit dem Text “Composite C1 – published with Microsoft WebMatrix 3″ ein:

Jetzt können wir die Seite durch einen Klick auf ‘Veröffentlichen’ auf die von WebMatrix 3 angelegte Azure Website deployen:

Nach der Fertigstellung des Veröffentlichungsassistenten können wir die neu erstellte Windows Azure Website über http://omnicorp.azurewebsites.net aufrufen und uns das Ergebnis anschauen:

Bei den nächsten Änderungen wird der WebMatrix Veröffentlichungsassistent dann nur noch geänderte Dateien an unsere Azure Website übertragen.

Um schnelle Änderungen an unserer Live-Seite durchzuführen, können wir den Veröffentlichungsmechanismus auch umgehen, in dem wir unsere Azure Website direkt aus Webmatrix heraus öffnen:

Zusammenfassend kann mal sagen, dass WebMatrix 3 nochmals eine weitere Vereinfachung im Management von auf Azure gehosteten Webseiten bietet.

In diesem Artikel möchte ich zeigen, wie sie Ihre Composite C1 Website mit Hilfe des Packages Composite.Tools.XMLBasedSiteBackup  sichern können.

Insbesondere bei Installationen, die als Windows Azure Cloud Service laufen, ist dieses Tool ein hilfreiches Werkzeug, um “on-the-fly” ein Backup der kompletten Website anzulegen.

Zunächst installieren wir das Tool unter ‘System’ -> ‘Verfügbare Pakete’ -> ‘Composite.Tools’ -> ‘XMLBasedSiteBackup’:

Nachdem die Installation fertiggestellt und die C1-Konsole neu gestartet wurde, finden wir im Bereich ‘System’ einen neuen Menüpunkt mit dem Namen ‘XML-based site backup’:

Durch einen Klick auf ‘Open’ starten wir das Tool.
Um ein komplettes Backup unserer Website anzulegen, klicken wir einfach auf ‘Create Backup now’:

Das fertige Backup wird anschließend mit Downloadlink, Erstelldatum und Dateigröße des Zip-Archivs in der Übersicht angezeigt:

Wenn wir weitere Backups anlegen, erscheinen diese ebenfalls in der Übersicht:

Das so erstellte Backup ist ein ZIP-Archiv der kompletten Website, welches sich ohne Probleme sofort wieder deployen lässt.

Zunächst erstellen wir mehrere Clouddienste in geografisch verteilten Datencentern.

Die Erstellung dieser C1-Clouddienste wird in dem Artikel ‘Installation von Composite C1 auf Windows Azure‘ ausführlich beschrieben.

Die wichtige Änderung für diese Mehrfachinstallation ist, dass wir vor der Bereitstellung dieser Dienste in der Konfigurationsdatei ‘ServiceConfiguration.cscfg’ einen eindeutigen Namen für jeden einzelnen Dienst definieren müssen, um unsere Standorte eindeutig identifizieren zu können.

In diesem Szenario verwenden wir dazu folgende DNS-Namen:

• c1azure-northeurope.cloudapp.net
• c1azure-usawest.cloudapp.net
• c1azure.asiaeast.cloudapp.net

Nachdem die einzelnen Clouddienste erstellt worden sind, erscheinen Sie so in unserem Portal:

Um diese noch eigenständigen Clouddienste nun zu einem loadbalanced Dienst zusammenzufassen, nutzen wir den Windows Azure Trafficmanager, den wir im Portal im Bereich ‘Virtuelle Netzwerke’ finden:

Mit einem Klick auf ‘Create’ können wir nun eine neue Policy erstellen. Neben der Loadbalancing-Methode “Performance” wählen wir die DNS-Namen unserer neu erstellten Clouddienste aus und legen einen gemeinsamen DNS-Namen fest – in diesem Beispiel ‘c1azure.trafficmanager.net’.

Die so erstellte Trafficmanager-Policy erscheint mit den zugehörigen Diensten nun in dieser Form in der Übersicht:

Da das Publishing über unsere lokale Stagingwebsite mit dem Azure Publisher erfolgen soll, müssen wir verhindern, dass die erstellten Cloud-Instanzen selbst in den Blobstorage schreiben können.

Greifen Sie dazu mit einem Verwaltungstool wie z.B. dem Cloudberry Explorer auf Ihren Storage zu und stellen Sie in der Datei ‘compositec1/Configuration/Websites.xml’ die Einstellung ‘enableBlobWriteBacks’ auf ‘false’.

Jetzt kommen wir zur eigentlichen Installation des Composite Azure Publisher.

Wir melden uns dazu im Backend unserer lokalen Website an und installieren das Paket ‘Composite.Azure.Publisher’:

Nach der Installation des Pakets und dem Neustart der C1-Konsole wählen wir durch einen Rechtsklick auf das neue Symbol ‘Windows Azure Publisher’ die Option ‘Configure’ aus:

Als Konfigurationsoptionen benötigen wir nun den ‘Blob Connection String’ sowie den ‘Website Container Name’, die wir beide der Konfigurationsdatei ‘ServiceConfiguration.cscfg’, welche wir bereits für die Bereitsstellung der Cloudservices verwendet haben, entnehmen:

Nach dem Speichern der Konfigurationsinformationen ist der Azure Publisher einsatzbereit und wir können das erste Deployment unserer lokalen Website durch einen Klick auf ‘Publish’ starten. Nach kurzer Zeit sind unsere – in drei geografisch verteilten Datencentern – erstellten Cloudservices ‘Up to Date’:

Um dieses auch live zu überprüfen, rufen wir die Loadbalancing-URL http://c1azure.trafficmanager.net auf und sehen eine exakt synchronisierte Kopie unsere lokalen Stagingwebsite, welche von dem nächstgelegenen unserer 3 Datencenter ausgeliefert wird:

Die Websites der einzelnen Datencenter lassen sich natürlich auch durch Aufruf der entsprechenden DNS-Namen auch separat aufrufen:

• http://c1azure-northeurope.cloudapp.net
• http://c1azure-usawest.cloudapp.net
• http://c1azure-asiaeast.cloudapp.net

Um den den Deployment- bzw. Publishingprozess zu veranschaulichen, habe ich dieses Video erstellt, in dem eine lokale Website bearbeitet wird und die Änderungen dann mittels des Azure Publishers an unsere drei Cloudservices verteilt werden:

Der Azure Publisher ist ein komfortables Werkzeug, um Composite C1 in Verbindung mit Windows Azure zu betreiben.

Neben dem hier gezeigten Szenario mit mehreren Cloudservices lässt sich das Tool natürlich auch mit nur einem Dienst – ohne den Trafficmanager – einsetzen.

Versionsvergleich

Angeboten wird der Azure Publisher in 4 Versionen:

• Single (free)
  für 1 Instanz in 1 Azure-Datencenter
• Redundant (kommerziell)
  für 2 Instanzen in 1 Azure-Datencenter
• Elastic (kommerziell)
  für beliebig viele Instanzen in 1 Azure-Datencenter
• Wordwide (kommerziell)
  für beliebig viele Instanzen in beliebig vielen Azure-Datencentern

Was können wir neben den Neuerungen der kommenden Version 4.0 noch erwarten:

• Eine in HTML/Javascript und C1-Komponenten geschriebene Windows-8-App, um Windows-8- Content-Apps zu erstellen, die Composite C1 als Backend verwenden.
• Eine neugestaltete Package-Übersicht auf www.composite.net und ein neuer Add-On-Markt, der es Entwicklern ermöglicht, ihre eigenen Packages zu vermarkten.
• Eine verbesserte Setup-Routine mit mehr Optionen bei der Auswahl von Starter-Sites und der Möglichkeit, oft genutzte Features direkt mitinstallieren zu können.
• Neue, verbesserte Starter-Sites, die auf responsive Templates wie z.B. Twitter Bootstrap basieren.
• Support für IE10 – möglicherweise jedoch auf Kosten des IE8. Geplant ist die Unterstützung von IE10 im vollen Standard-Mode um auch neue Features wie z.B. HTML5-Canvas in künftigen Features nutzen zu können.
• Direkter Zugriff zu personalisierten Demo-Sites (gehostet auf Windows Azure)
• 30-tägiger Demo-Zugang zu allen Windows-Azure-Features wie z.B. dem Windows Azure Publisher, der die Möglichkeit bietet, C1-Websites parallel in mehreren Datencentern rund um den Globus zu betreiben und Updates dieser Seiten mit einem einzigen Klick in der lokalen C1-Konsole durchzuführen.
• Broken-Links-Checker Eine neue Feature-Palette im Visual Editor, der es Redakteuren erleichtern soll, C1-Features in Seiten zu nutzen. Allgemeine Verbesserungen am Visual Editor, um mehr Möglichkeiten zu haben, das Aussehen und Verhalten von <div/>’s zu steuern und auch komplexere responsive Layouts im Inhaltsbereich besser nutzen zu können.

Am Montag, den 26.11.2012 ist die erste öffentliche Beta von Composite C1 4.0 erschienen.

Ich habe mir das System mal angeschaut und möchte einige der neuen Funktionen hier kurz vorstellen:

Razor und Master-Pages Templates

Syntax-Highlightning in Razor Templates

Page Template Features

Razor- und UserControl Funktionen

Kopieren von XSLT-Funktionen

Bildgrößenänderung durch “Ziehen” im Visual Editor

Spell-Checking im Internet Explorer 10

URLComboBox-Widget für Datentypen

Verwendung des Menütitels als Bezeichnung im Seitenbaum

Neben den hier vorstellten neuen Features gibt es noch eine Reihe weiterer Neuerungen – eine komplette Liste sowie die Möglichkeit zum Download des Systems finden Sie hier.

Voraussetzung dafür ist das kostenpflichtige Package ‘Composite.Tools.C1Console.ActiveDirectoryValidation‘.

Zunächst legen wir einen neuen Benutzer mit dem Namen an, der unserem Benutzernamen im Active Directory entspricht. Ein Passwort muss zwar aus Kompatiblitätsgründen eingegeben werden, hat aber für den späteren Authentifizierungsprozess keine Bedeutung mehr.

In der Domäne bin ich als C1Admin eingeloggt – also nennen wir unseren Benutzer auch C1Admin:

Anschließend legen wir die Berechtigungen und Ansichten für den Benutzer fest:

Als nächstes installieren wir unter ‘System’ das kostenpflichte Package ‘Composite.Tools.C1Console.ActiveDirectoryValidation‘, welches wir in einem 30-tägigen Testzeitraum kostenlos nutzen können:

Nachdem das Paket heruntergeladen und installiert wurde, erscheint ein C1-Login-Dialog. Das liegt daran, dass die Authentifizierungsmethode bereits in Composite C1 auf ‘Active-Directory’ umgestellt wurde, wir diese aber noch nicht im IIS konfiguriert haben.

Aus diesem Grunde schließen wir das Browserfenster mit dem C1-Backend und öffnen den ‘Internetinformationsdienste (IIS)-Manager’.

Im Ordner ‘Composite’ öffnen wir den Punkt ‘Authentifizierung’, aktivieren die ‘Windows-Authentifizierung’ und deaktivieren alle anderen Authentifizierungsmechanismen:

Jetzt haben wir alle Voraussetzungen geschaffen, um uns im Backend von Composite C1 automatisch mit unserem Active-Directory-Benutzerkonto anzumelden.

In diesem Beispiel habe ich bewusst Mozilla Firefox verwendet, da wir bei diesem Browser die Active-Directory-Authentifizierung vorher explizit zulassen müssen:

Wir öffnen dazu im Browser die URL ‘about:config’ und legen für den Einstellungsnamen ‘network.automatic-ntlm-auth.trusted-uris’ als Wert die URI unserer C1-Website fest (http://localhost). Mit dieser Einstellung erlauben wir in Firefox die AD-Authentifizierung für speziell diese Adresse:

Für Internet Explorer und Google Chrome in der jeweils aktuellen Version ist keine spezielle Einstellung notwendig – beide Browser unterstützen die Active-Directory-Authentifizierung bereits “out-of-the-box”.

Um zu testen, ob unsere automatische Anmeldung funktioniert, öffnen wir das Backend von C1. Zunächst begrüsst uns das Startfenster, mit dem wir das Backend wie gewohnt starten können:

Nachdem wir dort auf ‘Start Composite C1′ geklickt haben, erwartet uns jedoch kein Login-Fenster mehr, sondern wir sind automatisch im Backend von C1 mit unserem Active-Directory-Benutzernamen angemeldet:

Um weitere Redakteure oder Administratoren hinzuzufügen, müssen wir jetzt nur noch die entsprechenden Domänenbenutzer mit gleichem Namen in C1 anlegen.

Insbesondere im Intranetumfeld ist dieses Package eine sehr komfortable Lösung, um die CMS-Benutzer ohne zusätzlichen Aufwand zu verwalten.

Microsoft bietet unter dem Namen Windows Azure Websites einen neuen, sich derzeit noch in der Preview-Phase befindlichen Dienst an, mit dem sich in sekundenschnelle Webseiten anlegen und Applikationen deployen lassen.

Neben dem klassischen Publishing über TFS, Git oder FTP bietet Azure Websites jedoch auch zusätzlich eine Gallery, aus der sich populäre Systeme wie z.B. Composite C1 mit nur wenigen Klicks automatisch installieren lassen.

In diesem Artikel möchte ich die Installation von C1 über die Windows Azure Websites Gallery zeigen.

Zunächst loggen wir uns unter http://manage.windowsazure.com in das Preview-Portal ein, in dem wir die neuen Funktionen nutzen können.

Im Bereich Websites legen wir mit ‘Create Website’ eine neue Seite an:

Anschließend wählen wir über den Punkt ‘From Gallery’  die Applikationsgalerie aus:

Im nächsten Fenster können wir dann die gewünschte Anwendung – in diesem Beispiel Composite C1 – aus der Kategorie CMS auswählen:

Im abschließenden Dialog legen wir dann noch die URL fest, unter der die Website erreichbar sein soll, sowie die Region des Datencenters, in dem unsere Website gehostet wird:

Jetzt beginnt das eigentliche Deployment der neuen Website, dessen erfolgreicher Abschluss uns nach kurzer Zeit mit dem Status ‘Running’ bestätigt wird:

Nachdem wir die URL unserer neuen Website aufgerufen haben, können wir nun mit der Einrichtung von Composite C1 – wie in diesem Artikel beschrieben – beginnen:

Nach erfolgreicher Einrichtung finden wir uns im Backend des CMS wieder:

Die neue Website läuft jetzt auf Windows Azure unter der zuvor festgelegten URL http://compositec1.azurewebsites.net

Aus meiner Sicht beeindruckend an Windows Azure Websites ist der Komfort und die Einfachheit, wie sich mit quasi 2 Klicks ein ausgewachsenes Content Management System auf einer hoch skalierbaren Cloud-Plattform installieren lässt.

Nachdem wir im letzen Artikel die Einbindung von Facebook-Alben gezeigt haben, geht es in diesem Post um die Nutzung von Flickr in Composite C1.

Composite HQ hat zu diesem Zweck ein Package entwickelt, welches wir hier nutzen werden.

Wie beim Facebook-Package auch, installieren wir vorab das Slimbox-Package, welches die automatische Galeriedarstellung der Bilder auf unserer Website ermöglicht:

Anschließend installieren wir nun das eigentliche Flickr-Package ‘Composite.Media.ImageGallery.Flickr‘:

Für die Nutzung von Flickr ist ein sogenannter API Key notwendig, den wir im Bereich Inhalt / Website-Elemente mit einem Namen hinterlegen, um ihn später im Funktionsaufruf als Parameter nutzen zu können:

Der API Key selbst kann unter http://www.flickr.com/services/apps/create/apply/ generiert werden.

Für unsere Flickr-Galerie legen wir im Backend eine neue Seite an, auf der die Bilder später erscheinen sollen:

Nun können wir mit der Einbindung der einzelnen Funktionen des Packages beginnen:

Photostream

Um uns den sogenannten Photostream, also die neuesten Bilder eines Nutzers anzuzeigen, fügen wir auf der neu angelegten Seite die Funktion ‘Composite.Media.Flickr.Photostream’ ein:

Als Parameter für diese Funktion übergeben wir zunächst den zuvor unter Website-Elemente definierten API Key:

Weiterhin benötigen wir die Flickr User ID als Parameter. Diese muss jedoch zuvor für den entsprechenden Account ermittelt werden.

Ich empfehle zu diesem Zweck die Website http://idgettr.com, mit deren Hilfe wir aus der Adresse unseres öffentlichen Photostreams die User ID ermitteln können:

Anschließend übergeben wir die Flickr User ID an unsere Funktion:

Nachdem die Funktion eingefügt und die Seite gespeichert und veröffentlicht wurde, erscheint der Photostream des Flickr-Nutzers in Form einer anklickbaren Galerie auf unserer Website:

Favoriten

Die nächste Funktion ermöglicht das Anzeigen der sogenannten Favoriten, also der als solche markierten Fotos eines Flickr-Users.

Wir fügen dazu die Funktion ‘Composite.Media.Flickr.Favorites’ auf unserer Seite ein:

Wieder übergeben wir API Key und User ID als Parameter an die Funktion, fügen diese ein und veröffentlichen die Seite erneut:

Jetzt sehen wir die Favorites meines Flickr-Accounts auf unserer Seite – da ich bislang noch keine angelegt hatte, habe ich beispielhaft einige Fotos anderer User zum Thema Fahrräder als Favoriten in meinem Flickr-Account markiert:

Übersicht aller Alben

Bei Flickr können die Fotos in Alben organisiert werden. Um nun alle Alben eines bestimmten Nutzer darzustellen, fügen wir die Funktion ‘Composite.Media.Flickr.PhotoSets’ auf unserer Seite ein:

Neben den obligatorischen Parametern API Key und User ID können wir in dieser Funktion zusätzlich noch definieren, ob Kommentare anderer Flickr-Nutzer zu den einzelnen Fotos dargestellt werden sollen:

Nach dem Einfügen der Funktion und dem Veröffentlichen der Seite erhalten wir eine Übersicht aller Alben des angegebenen Flickr-Nutzers:

Bilder eines einzelnen Albums darstellen

Um nur Bilder eines einzelnen Albums darzustellen, benötigen wir die Funktion ‘Composite.Media.Flickr.PhotoSets.Photos’.

Zusätzlich zum API Key müssen wir jetzt die Set ID des gewünschten Albums definieren

Zur Ermittlung dieser ID lassen wir uns in unserem Flickr-Account das entsprechende Album anzeigen und kopieren den letzten Teil der Album-URL in die Zwischenablage – dies ist die Set ID:

Nun fügen wir die Funktion ein:

Neben dem API Key fügen wir jetzt noch die Set ID aus der Zwischenablage als Parameter ein:

Als Ergebnis erhalten wir nach dem Einfügen der Funktion und dem erneuten Veröffentlichen der Seite eine Galerie mit unserem gewünschten Flickr-Album:

Fazit

Neben Facebook ist auch Flickr eine effektive und komfortable Möglichkeit, Bilder auf einfache Art und Weise zu hosten und auf der eigenen Website mit Composite C1 für Galerien zu nutzen.

Warum also die Fotos der Facebook-Unternehmensseite nicht auch auf der eigenen Website verwenden ?

Composite C1 hat ein Package herausgebracht, mit dem sich die Fotos einer öffentlichen Facebook-Seite auch auf der eigenen C1-Website als Bildergalerie verwenden lassen.

Wir benötigen dazu zunächst das Package Composite.Media.ImageGallery.Slimbox2 um die Fotos in einer zeitgemäßen Galerieform inklusive Funktion zum Vor- und Zurückblättern auf der Seite erscheinen zu lassen:

Als nächstes installieren wir das Package Composite.Media.ImageGallery.FacebookAlbums:

Nun erstellen wir eine Seite, auf der die Facebook-Galerie erscheinen soll:

Dort fügen wir dann die Funktion Composite.Media.ImageGallery.Facebook.AlbumsGallery ein:

Als Parameterwert für ‘Object unique id’ geben wir den Namen der Facebook-Seite ein (z.B. cgncloud):

Über den nächsten Parameterwert ‘Album types’ können wir die Typen der anzuzeigenden Alben festlegen (Normal, Wall, Profile):

Zum Schluss können wir dann noch einstellen, ob wir zur Anzeige der Fotos auf die Facebook Seite geleitet werden wollen, oder die Fotos direkt auf der Website mittels Slimbox2 darstellen wollen. In unserem Fall möchten wir die Fotos direkt auf unserer Seite darstellen:

Nachdem wir die Funktion eingefügt haben, erhalten wir als Ergebnis eine Facebook-Galerie-Seite, auf der die Alben unserer Unternehmensseite dargestellt werden:

Um uns die Bilder anzuschauen, klicken wir auf das entsprechende Album und erhalten automatisch eine Galerie:

Über das zuvor installierte Slimbox2-Package können wir die Thumbnails natürlich auch vergrößern und innerhalb der Fotos auch vor- und zurückblättern:

Um nur Bilder aus einem einzigen Album z.B. auf einer Seite zu einem speziellen Thema anzuzeigen, legen wir eine neue Seite an und installieren dort das Package Composite.Media.ImageGallery.Facebook.PhotosList:

Um das richtige Album in der Funktion zu identifizieren, benötigen wir die AlbumID  von Facebook. Wir gehen dazu auf unsere Facebook-Seite und kopieren aus der URL des Albums den 2. Teil des durch ‘.’ getrennten Querystrings in die Zwischenablage:

In der Funktion selbst kopieren wir diese Information aus der Zwischenablage dann in das Textfeld für den Parameterwert ‘Album ID’ :

Nachdem die Funktion eingefügt sowie gespeichert und veröffentlicht wurde, erhalten wir nun eine neue Seite mit dem von uns gewünschten Facebook-Album:

Mit dem hier vorgestellten Package lassen sich natürlich auch Fotos aus persönlichen Facebook-Profilen darstellen. Vorraussetzung ist  jedoch die Verwendung eines Access-Tokens, welches vorher auf http://developers.facebook.com generiert werden muss.

Da dieses Token jedoch nach standardmässig 60 Tagen abläuft und danach neu generiert werden muss, empfehle ich die Verwendung dieses Packages eher in Verbindung mit öffentlichen Unternehmensseiten.

Das komplette Backend wurde von mir mit Ausnahme einiger Bereiche innerhalb der Funktionsansicht übersetzt. Die restlichen Teile werden jedoch im Laufe der nächsten Tage folgen.

Marcus Wendt (@CompositeC1) stellt das deutsche Sprachpaket in einem kurzen Video vor und erläutert dort auch die Installation und Aktivierung innerhalb des Backends: