Hinterlasse einen Kommentar

Migration einer SharePoint Website auf eine andere Websitevorlage

Im Microsoft SharePoint ist es grundsätzlich nicht möglich, bei einer bestehenden Website die Website-Vorlage auszutauschen. Der einzige Weg dies zu erreichen, ist eine neue Website mit der gewünschten Vorlage zu erstellen und den gewünschten Inhalt irgendwie übernommen. In diesem Beitrag zeige ich, welche Möglichkeiten es gibt und wie dieser Schritt mit zwei PowerShell-Scripts sehr einfach automatisiert werden kann. weiterlesen »

Hinterlasse einen Kommentar

SEO für JavaScript-Applikationen mit AngularJS

Bisher haben wir unsere Applikation immer so gebaut, dass ein Crawler den wichtigen Inhalt auch im Quelltext vorfindet. Das führt insbesondere bei modernen Webseiten (z.B. durch die Nutzung von AJAX und dynamischem Austausch von Inhalten) zu Mehraufwand, weil sichergestellt werden muss, dass neben dem Client auch der Server das HTML rendern können muss. Es gibt einige Ansätze, die das Problem serverseitig lösen – z.B. PhantomJS – aber es führt unweigerlich dazu, dass sich der Aufwand für SEO massiv erhöht.

Bereits seit längerer Zeit wird gemunkelt, dass Google während dem Indexieren von Webseiten auch JavaScript ausführen würde. Im Mai 2014 klärte ein Post im offiziellen Google Webmaster Blog auf: Google führt tatsächlich JavaScript aus! Was möglich ist, wurde unter anderem in einem Artikel auf searchengineland.com genau untersucht. Wir haben uns entschieden, die neuen Möglichkeiten mit einer bestehenden AngularJS-Applikation zum Darstellen von Referenzen zu testen. Es waren einige Anpassungen nötig, aber wertvoll: Google hat die Inhalte mittlerweile korrekt indexiert (inkl. Seitentitel, Meta-Description, Bilder, …). Es ist also möglich, eine moderne Webseite mit dynamischen Inhalten einwandfrei von Google indexieren zu lassen, auch wenn das HTML erst auf dem Client generiert wird.

Folgende Schritte waren nötig (ausgehend von einer funktionierenden AngularJS-App):

  • ngRoute einbinden – ein AngularJS-Modul, welches das view-routing löst
  • Applikation in Views aufteilen – z.B. Listenansicht, Detailansicht etc. und das Routing einrichten (routeProvider)
  • html5Mode für ngRoute aktivieren (ohne diesen Modus wird nicht mit HTML5 pushState gearbeitet, sondern mit Hash # – so werden die Seiten bei Google nicht korrekt indexiert) – mehr dazu hier
  • Links anpassen: Alle Links zwischen den Views der Applikation müssen als Links ohne Hash angegeben werden: z.B. <a href=“/referenzen/id/289/seo-fuer-javascript-applikationen-mit-angularjs“>Zum Beitrag</a> (wobei /referenzen in unserem Beispiel die Hauptseite für die Referenzen war) 
  • Base-Tag einfügen <base href=“/referenzen/“> – dieser muss sich innerhalb des ng-app Knotens befinden
  • Sicherstellen, dass der Server dasselbe liefert für alle „Unterseiten“ von /referenzen (denn Google wird jede verlinkte Seite besuchen, zudem ermöglicht man so das direkte Verlinken auf spezifische Views)
  • Testen der Seite in allen relevanten Browsern – Insbesondere IE 9 muss getestet werden, weil dieser pushState nicht unterstützt. Es wird stattdessen mit Hash-Links gearbeitet (z.B. /referenzen/#/id/289/beispiel-titel).

Eine wichtige Erkenntnis war auch, dass man Google per JavaScript einen neuen Titel für die Seite zuweisen kann ($window wird dem ngController via dependency injection als Abhängigkeit mitgegeben):

$window.document.title = currentReference.title;

Der Titel wird jedes Mal angepasst, wenn die Route sich ändert. Google nimmt den veränderten Titel mit in die Suchresulate auf. Auch Weiterleitungen folgt Google (via document.location.href = ‚…‘).

Wichtig: Viele Suchmaschinen unterstützen JavaScript nicht (Google ist anderen einen Schritt voraus). Diese haben keine Möglichkeit, den Inhalt zu indexieren. Wir hoffen dennnoch, eure Neugierde geweckt zu haben, das auch mal auszuprobieren.
Viel Spass!

Raphael Müller, 2sic internet solutions GmbH

Hinterlasse einen Kommentar

Ansicht-Filter in SharePoint 2013 Task-Listen funktionieren nicht mehr nach SharePoint-Updates vom März 2015

Die Microsoft/SharePoint Updates vom März 2015 verursachen, dass in Aufgabenlisten in sämtlichen Ansichten die Filter nicht mehr angewendet werden. Der Fehler tritt in Standard- und Benutzerdefinierten Ansichten/Views auf, egal nach welchem Feld gefiltert wird. Betroffen sind SharePoint Foundation 2013 und SharePoint Server 2013.

Das Problem tritt auf, nachdem das letzte Windows Update KB 2956175 vom 10.3.2015 installiert wurde (MS15-022, Build 15.0.4701.1000) oder das März 2015 CU (KB 2956159, Build 15.0.4701.1001). weiterlesen »

Hinterlasse einen Kommentar

Responsive und Retina Bilder mit DotNetNuke

Wer bereits responsive Webseiten umgesetzt hat, weiss, dass Bilder eine Herausforderung darstellen. Bisher gab es nur das img-Element, bei welchem die Grösse eines Bildes über den src-Tag in Stein gemeisselt ist. Allen Besuchern musste unabhängig von der Auflösung des Gerätes das gleiche Bild übermittelt werden (es sei denn, man hätte das Problem mit JavaScript umgangen). Das Problem wird mit hochauflösenden Displays wie dem Retina-Display von Apple-Geräten noch schlimmer, denn diese Geräte benötigen das Bild in einer noch höheren Auflösung.

Die Erweiterungen des img-Tags (Attribute srcset sowie sizes) sowie das picture-Element liefern mögliche Lösungen dazu. Um dem Problem trotz mangelnder Browser-Unterstützung Herr zu werden, gibt es den Picturefill 2.0 – ein Polyfill für das responsive Bilder. Das kleine JavaScript imitiert den Syntax der img-Attribute und des picture-Elements – auch in Browsern, welche responsive Bilder noch nicht nativ verstehen.

Syntax des picture-Elements bzw. von Picturefill

Bevor der Syntax des picture-Elements bzw. srcset funktionieren, muss Picturefill eingebunden werden. Anschliessend kann folgendes HTML für ein responsives Bild verwendet werden:

<picture>
<!–[if IE 9]><video style=“display: none;“><![endif]–>
<source srcset=“/Portals/0/bild-medium-800.jpg, /Portals/0/bild-big-1600.jpg 2x“ media=“(min-width: 800px)“>
<source srcset=“/Portals/0/bild-small-400.jpg, /Portals/0/bild-medium-800.jpg 2x“>
<!–[if IE 9]></video><![endif]–>
<img srcset=“/Portals/0/bild-small-400.jpg, /Portals/0/bild-medium-800.jpg 2x“ alt=“Some alt text describing the image“>
</picture>

Das HTML-Snippet kann folgendermassen beschrieben werden:

  1. Wenn die Viewport-Breite (Breite des Browser-Fensters) mindestens 800px breit ist wie im media-Attribut definiert, wird das erste source-Element gewählt. Anschliessend wird je nach dem, ob das Gerät einen hochauflösenden Display besitzt oder nicht, wird das Bild mit 800 oder 400 px Breite geladen.
  2. Wenn 1. nicht zutrifft, wird das zweite source-Element behandelt. Hat das Gerät einen hochauflösenden Display, wird das Bild mit 800 px geladen, ansonsten mit 400 px.
  3. Das img-Element sollte von Suchmaschinen korrekt indexiert werden, weil das srcset-Attribut mittlerweile verstanden wird.
  4. Der <!–[if IE 9]> Kommentar wird benötigt, damit der Picturefill im IE9 funktioniert.

Stellt sich nur noch die Frage, wie das im DNN gelöst werden kann. Einem Kunden möchte ich nicht die Aufgabe aufbürden, diesen Code im HTML-Modul einzufügen… wir verwenden für solche Templates in der Regel unser Modul 2SexyContent.

Responsive Image Template für 2sxc (2SexyContent)

Achtung: Wenn du noch nie mit 2SexyContent gearbeitet hast, empfehle ich dir einen Blick auf meinen Einführungs-Artikel ins 2SexyContent Templating.

Als erstes erstellen wir einen Content Type namens Image. Als Felder erstellen wir lediglich Title und Image. Das Template sieht dann eigentlich gleich aus wie das Snippet oben – mit dem Unterschied, dass ImageResizer für uns die Bildgrössen-Thematik löst und der Inhalt einfach vom Kunden bzw. Redaktor eingefügt werden kann:

<picture>
<!–[if IE 9]><video style=“display: none;“><![endif]–>
<source srcset=“[Content:Image]?w=800, [Content:Image]?w=1600 2x“ media=“(min-width: 800px)“>
<source srcset=“[Content:Image]?w=400.jpg, [Content:Image]?w=800.jpg 2x“>
<!–[if IE 9]></video><![endif]–>
<img srcset=“[Content:Image]?w=400.jpg, [Content:Image]?w=800.jpg 2x“ alt=“[Content:Title]„>
</picture>

(Wichtig: Dieses Code-Snippet funktioniert nur in allen Browsern zuverlässig, wenn das Picturefill-JavaScript auf der Seite eingebunden ist)

Als Beispiel hier ein 2sxc-App, welches das Template und den Content Type beinhaltet: Download. Das App beinhaltet zwar das Picturefill-JavaScript, wir würden aber empfehlen den Picturefill im Skin einzubinden, damit alle Vorlagen damit arbeiten können.

Bei Fragen kannst du den Beitrag gerne kommentieren.

Liebe Grüsse
Raphael

Ein Kommentar

Use INCLUDEPICTURE Field-Code in Microsoft Word for cool Letterheads and workaround some issues

In Microsoft Word you can do very cool stuff using Field Codes (Formulas). For example you could create a condition to show a Picture and with a few of them you’ll have a nice Picture Randomizer for your Document Header and Footer.

After you finished such an amazing Field Code you probably want to reuse it in other Documents but ran into some issues. Even in small documents Microsoft Word might become not responding, show totally or partially blank Pages or other strange display Issues. I’ll explain you what it causes and how to work around it. weiterlesen »

Hinterlasse einen Kommentar

DNN: Allow Non-Admins to do Page Management

In DNN 5.0 the artificial differences between Regular and Admin pages was removed. All Modules showed in the Admin-Menu can now also be placed on any custom page and basically everyone could use them. This article gives you instructions how to allow Non-Admins to access the DNN Page Management and workaround some limitations. weiterlesen »

Hinterlasse einen Kommentar

Possible SharePoint Issues after Windows Updates on the Web Server

After Windows Updates ran on a Windows Server 2008 R2 with WSS3 SP3 we ran into a few issues caused by the Configuration Cache. This post shows you lessons learned and recommendations in case you have similar issues, especially if the Configuration Wizard crashes the entire SharePoint Farm. weiterlesen »