Fork me on GitHub
2sxc 8.9 for DNN 7 to 9
Website Builder, Content Manager, App-System: free and amazing - done your way
You are here: Home  >  Learn  >  Blog Deutsch
von Raphael Müller am 19.10.2015

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


von iJungleBoy am 24.4.2013

We’re really excited! We just published 2SexyContent 5.0 beta with some really great features. Actually too much to list all, so just the initial basics:

  1. Foremost: Standardized, documented API, so that all coding with 2SexyContent-Data will look and feel the same – in [Tokens], @Razor and…drumroll…JavaScript 🙂
  2. Freaky-cool DataSource and Pipelining system, so that you can configure data retrieval, filtering, sorting and more just by configuration and without any code whatsoever. This will promote more no-code solutions that don’t risk server stability and don’t need extra modules to be installed just to achieve that neat gallery/news/whatever effect.
  3. …and the Pipeline-Configuration will be by drag-and-drop 🙂 really awesome, kind of like Yahoo-Pipes!
  4. …and the Pipeline goes all the way from the backend to the template and to javascript. So it’s a seamless data selection, filter/sort, join/merge, cache and delivery mechanism all the way to the JavaScript-API. We’re really proud of this feature 🙂
  5. …and the Pipeline is itself configured using a recursive Token-System. I can’t tell you more about this yet, it doesn’t quite work yet, but it’s a beta – und know that it will work, and it will be good.
  6. Crazy caching: after an initial load, all requests will not require any database access at all.

Just so you know: it’s already in production on a customer website, and the result rocks! Details will follow…

Want to see some documentation – visit http://2sexycontent.org/Documentation/RazorJSAPI.aspx or download – visit https://sexycontent.codeplex.com/releases/view/105604

Yours truly,
Daniel, Raphael, Benjamin


von iJungleBoy am 20.3.2013

We’re living in exciting times :).

After publishing our open source DotNetNuke module 2SexyContent 4.0 Beta with multil-language support (in a way we believe surpasses everything available out there :)), we’re now developing our standadized API, so that C# and JavaScript developers alike will be able to leverage 2SexyContent for their needs.

When that is done, we’ll publish all of it ASAP – time scope is 1 week from now. If anybody has some final input – especially if you’ve published your own API and made hugh mistakes we shouldn’t imitate – please drop me a note!

Just fyi, our goals for the API are:

  1. Lightweight and easy to understand
  2. Read-Only API
  3. For Razor and JavaScript
  4. Interface-based, so that implementations can change
  5. Stable, so that developers trusting 2SexyContent can rely on their tool working in the future – as long as they stick to the API

Yours,
Daniel Mettler and the 2sic geeks

PS: In the meantime, we’ll publish 4.0.4 as stable, because it will take another while till 5.0 is ready.


von iJungleBoy am 3.11.2012

Ich lerne nie aus :). Vor zwei Wochen dachte ich noch, alles zu wissen was es zu DotNetNuke Mobile zu wissen gibt. Und dann durfte ich einen Vortrag vorbereiten für die DotNetNuke 7.0 Party in Zürich, und musste feststellen, dass sich alles wieder geändert hatte!

Eigentlich ein Frust – und doch nicht. Denn alles, was wir vorher zusammengebastelt hatten, ist jetzt standardmässig bei DotNetNuke dabei. Geräteerkennung, automatische umleitung, die möglichkeit, ohne Umleitung zurück zu kehren, usw. Das einzige was fehlt, ist der original-URL, den man manchmal noch haben möchte.

Noch was: mit 2SexyContent und Razor kann jeder sehr einfach wirklich Responsive-Output erstellen, der beispielsweise nicht nur die Darstellung ändert, sondern sogar bereits serverseitig andere Daten liefert wie ein Low-Res Image oder nur ein Textauszug.

Links zum Thema

  1. DotNetNuke 7.0 Party http://www.dnn.ch/DNN7Party
  2. Mobile Infos zu DNN 5, 6.x und 7.0 http://mobile.dnn.ch/
  3. 2SexyContent http://2sexycontent.org/ oder das Responsive-Template-Demo mit Razor http://mobile.dnn.ch/MobilewithDotNetNuke70.aspx

Liebe Grüsse vom iJungleBoy


von damianarn am 20.7.2012

QR-Codes sind heute omnipräsent auf Werbeplakaten, in Zeitschriften, Gebäuden oder auf Autos und erlauben eine schnell interaktion mit dem Smartphone. Das mühsame abtippen von URLs, Kontaktdaten etc. entfällt und verringert so die Hürde für eine Aktion.

Ich habe mir die Frage gestellt in welchen Szenarien ein QR-Code auf einer Website sinnvoll ist? Auf den ersten Blick scheint ein QR-Code auf der Website ziemlich unnütz, da wir ja bereit an einem vollwertigen Computer sitzen und Video etc. direkt anschauen können. Trotzdem habe ich ein paar spannende Einsatzmöglichkeiten gefunden.

Link zu einer mobile Website

Du möchtest Kunden auf die mobile Website hinweisen damit Sie diese für unterwegs in den Favoriten speichern können.

Link zu einer App

Du beschreibst ein tolles App auf der Website und mit dem QR-Code gelangt er direkt in den AppStore.

Kontaktdaten

Auf der Kontaktseite finden sich deine Kontaktdaten inkl. Adresse als QR-Code. Einmal scannen und direkt auf dem Handy erfasst.

Event mit Kalendereintrag

Ein tolles Event das ich nicht verpassen will mit einem Foto im Terminkalender.

Wireless Zugang

Du besuchste eine Messe und kannst dir vorabschon per QR-Code das Wifi einrichten.

Sicher gibt es noch weitere gute Möglichkeiten um ein QR-Code einzusetzen, falls du eine hast poste sie als Kommentar.

Wie integriere ich den QR-Code in meine Website?

Am einfachsten ist den Code mit einem QR-Code Generator (http://keremerkan.net/qr-code-and-2d-code-generator/ der Beste meiner Meinung nach) zu erstellen und dann als Bild in die Website einzufügen.

Einen eleganteren Weg gibt es wenn du DotNetNuke als CMS verwendest. Mit unserem 2Sexy Content Modul wird der Code automatisch generiert und kann ganz einfach geändert werden. Hier ist der Link zur Demo: http://2sexycontent.org/Demos/ExternalContent/QRCodes.aspx

Viel Spass mit den QR-Codes und einem schönen Sommer

Euer Damian


von rebeccameier am 28.6.2012

Es war eine Vision von Tom Berners-Lee, dem Erfinder des World Wide Webs. Nach seiner Definition sollte es „ein Netz von Daten, die direkt und indirekt von Maschinen verarbeitet werden können“ geben, dass sich Semantic Web nennt. Heute ist es folgendes:

Das Semantic Web oder Semantische Web umfasst als Schlagwort eine Reihe von Techniken, die Inhalte von Websites und Webservices mit Hilfe von formaler Semantik, also logischen Beziehungen, zu strukturieren. So können die Daten von Computerprogrammen problemlos verarbeitet werden und der Nutzer profitiert von „intelligenteren“ Diensten. Dazu gehört die „Semantische Suche“: Suchmaschinen, die nicht nur nach Wörtern, sondern auch nach Bedeutungen suchen können.

Was ist damit gemeint? Viele Websites enthalten heute hauptsächlich Texte in natürlicher Sprache, die von Menschen verstanden werden, von Software jedoch nur sehr schwer interpretiert werden können. Die menschliche Sprache ist voll von Doppeldeutigkeiten und anderen Komplikationen. Der Clou beim Semantic Web besteht nun darin, schon auf der Website selbst Angaben über die Bedeutung zu machen. So kann bei jedem Wort markiert werden, um welche „Art von Ding“ es sich handelt, sowie welche Beziehungen es zu anderen Worten sowie Daten (etwa Zahlen oder andere Werte) hat. So wird aus dem Semantic Web ein Netzwerk von logischen Beziehungen zwischen Begriffen. (Quelle)

Ein Beispiel:

Buchs SG <Stadt> liegt am Rhein<Fluss>. Max Meier<Familienname> wurde 1987<Geburtsdatum>in Österreich<Geburtsort> geboren.

Semantic Web in 2SexyContent

Auch bei unserem neusten Angebot, dem 2SexyContent, kann mit Semantischem Web gearbeitet werden. So ist es zum Beispiel möglich, einer digitalen Visitenkarte einer Person verschiedene Elemente hinzuzufügen. Das können in unserem Fall bis zu 15 verschiedene Felder sein. In unserem Beispiel mit Einfügen von Semantic Web Attributen sieht das wie folgt aus:

Der optimierte Code „dahinter“ dazu folgendermassen

  • <link rel=“stylesheet“ href=“[Portal:HomeDirectory]2sexy/Person Demo Simple/Assets/Style.css“ />
  • <div class=“dnnClear vcard“>
  • <a href=“mailto:[Content:EMailAddress]“>
  • <img class=“PersonSimple2Image“ src=“/DesktopModules/ToSic_SexyContent/Extensions/Thumbnailer.aspx?Image=[Content:Image]&Width=75&Height=2000″ />
  • </a>
  • <span class=“fn“><span class=“given-name“>[Content:FirstName]</span> <span class=“family-name„>[Content:LastName]</span></span><br />
  • <span class=“tel“>[Content:BusinessPhone]</span><br />
  • <a class=“email“ href=“mailto:[Content:EMailAddress]“>[Content:EMailAddress]</a>
  • </div>

Und was bringt das nun?

Eine Suchmaschine sucht gezielt nach Code-Schnipseln, die am Besten zur Suchanfrage passen. In unserem Fall sucht sie also nicht nur nach „FirstName“ und „LastName“ sondern auch nach allen Seiten, die „given-name“ oder „family-name“ enthalten haben. Anders als bei traditionellen Suchmaschinen, wo alle Vorkommen von First & LastName ignoriert werden.

Ein weiteres, einfaches Beispiel für Web 3.0:

Sie sind gerade umgezogen, nehmen wir einmal an nach Chur. Jetzt suchen Sie im Internet nach einem guten italienischen Restaurant in Ihrer Nähe. Als Ergebnis bekommen Sie die kleine Pizzeria um die Ecke empfohlen, so als hätten Sie mit einem Menschen gesprochen.

Was ist hier passiert ist?

Ihr Suchdienst kennt Ihren Standort, misst die Entfernungen und empfiehlt daher nur in Ihrer Nähe und weiß dank den Bewertungen von bisherigen Gästen (User Generated Content) aus anderen Netzwerken, welches Restaurant gut ist und empfiehlt daher nicht die Kette in gleicher Entfernung mit schlechteren Bewertungen. Und es wird eine Pizzeria empfohlen, weil es dank der Semantik auch weiß, dass eine Pizzeria ein italienisches Restaurant ist. (Quelle)


von Raphael Müller am 29.5.2012

Was ist 2SexyContent

2SexyContent ist eine DotNetNuke Erweiterung, die es dem Webdesigner erlaubt, perfekte Vorlagen zu erstellen. Der Endanwender | Kunde | Content Editor füllt schussendlich nur ein vordefiniertes Formular aus. Das Template erledigt den Rest. Damit der Output immer einheitlich und wie vorgegeben aussieht.

Beachte: Das Modul ist momentan noch im Beta-Stadium. Vorteilhaft ist es dehalb, das Modul auf einer Testseite zu installieren, oder zumindest ein Backup der Webseite zu erstellen, bevor das Modul installiert wird.

Vorbereitungen

Als erstes musst du das Modul selbstverständlich installieren. Die Voraussetzungen dafür sind:

  • ASP.NET 4
  • DotNetNuke 6 oder neuer
  • SQL Server 2008 oder neuer
  • Razor Komponenten installiert – am Besten installiert man dazu das Razor Host Modul von DotNetNuke (über Host > Extensions > Available Extensions)

Wenn die Voraussetzungen erfüllt sind, kannst du das Modul auf http://sexycontent.codeplex.com/ herunterladen und installieren. Weitere Informationen hier (auf Englisch).

Erstellen eines Templates

Schritt 1: Einfügen eines Content Types

Ein ContentType (z.T. auch Inhaltstyp genannt) definiert, welche Formular-Felder ein Template zur Verfügung stellen wird. Bei einem Mitarbeiter beispielsweise könnte der ContentType die Felder Vorname, Nachname, Adresse enthalten. Für dein erstes Template brauchst du nur zwei Felder: Titel und Inhalt.

Wenn du es dir zutraust, kannst du den ContentType händisch erstellen. Du kannst ihn aber auch über unsere Vorlage herunterladen und importieren: BeispielContentType.xml

Hilfe beim Importieren:

  1. Lade unsere Vorlage auf deinen Computer herunter (xml Datei) – Rechtsklick, Ziel speichern unter
  2. Wähle über den Manage-Button Templates verwalten aus.
  3. Klicke unten auf Importieren
  4. Wähle die Datei auf deinem Computer aus
  5. Klicke auf Importieren.

Schritt 2: Hinzufügen eines Templates

Öffne die Template-Verwaltung (Manage-Button > Templates verwalten). Über Neues Template kann ein Template erstellt werden. Füll das Formular wie folgt aus:

Screenshot erstes Template 2SexyContent

Bei Template Datei kannst du zuerst auf Neu erstellen klicken – so wird dir gleich eine Template-Datei erzeugt (im Ordner /Portals/[PortalOrdner]/2Sexy). Bei Inhaltstyp wählst du den ContentType, den du vorhin importiert / erstellt hast.

Schritt 3: Erster Einsatz des neuen Templates

Zurück beim Modul kannst du nun dein Template auswählen. Nach einem Klick auf Manage -> Bearbeiten siehst du folgendes Formular:

Das Formular, von 2SexyContent generiert.

2SexyContent erstellt dir ein einfaches Eingabe-Formular für den ContentType, welchen du erstellt hast. Du kannst hier einfach mal einen Beispiel-Titel und einen Beispiel-Inhalt eingeben und Einfügen klicken.

Schritt 4: Template verändern

Öffne den „Template bearbeiten“-Dialog über Manage -> Template bearbeiten. Hier wird dir die Template-Datei angezeigt und du kannst sie deinen Bedürfnissen anpassen. Platzhalter werden ersetzt durch die eingegebenen Feldwerte. Als Hilfestellung dient dir die Template-Hilfe (unter dem Speichern-Knopf).

  • [Content:Titel] wird ersetzt mit dem eingegebenen Titel
  • [Content:Inhalt] wird ersetzt mit dem Text

Schreib in dein Template beispielsweise nur:

[Content:Inhalt]

Nach dem speichern wird dir schlussendlich der Inhalt angezeigt, den du eingegeben hast.

Schritt 5: Selbst ausprobieren!

2SexyContent schränkt dich nicht ein. Probiere es aus und erstelle deine eigenen Templates! Für weitere Demos, Instruktionen und Infos (englisch): http://2sexycontent.org.

Bei Fragen kommentiere diesen Post oder schreib mir eine E-Mail: raphael.mueller@2sic.com.


von iJungleBoy am 12.5.2012

Deutsch: Habe noch ein Screen-Cast erstellt, welches das Backend zeigt und alles grob erklärt. Denke das ist ideal für den Webdesigner und Gestalter, der mehr mit 2Sexy Content arbeiten wird.

English: Just created another screen-cast showing the back end and roughly explaining the features. Probably the fastest way to get started with 2Sexy Content.

http://2sexycontent.org/Introduction/Videos/BackEndforDesigners.aspx


von iJungleBoy am 4.5.2012

Habe gerade das Einleitungsvideo fertig aufgenommen, mit dem neuen Equipment. Macht Spass. Wenn du auch mehr zur Filosofie (Philosophie) von 2Sexy Content für DotNetNuke erfahren möchtest – schau das Video hier: http://2sexycontent.org/


2serve . 2invent . 2create is 2be.