QR-Code

Visuelles Beispiel

Allgemein

Dieses Modul wird mit dem Build 2967 neu eingeführt. Dieses Modul wird mit dem Grundsystem ausgeliefert, ist aber erst mit der „Advanced“ Lizenz nutzbar.

Was ist ein QR Code

Ein QR Code ist ein zweidimensionaler Code, der als Bild auf Webseiten, Zeitschriften oder auf ähnlichen Medien verfügbar gemacht wird.
Durch diesen QR Code (Quick Response – Code) ist es möglich viele Daten wie z. B. lange Links, dem Benutzer einfach zur Verfügung zu stellen.

Ein QR Code kann dann als Inhalt einen Link enthalten z. B.: http://www.contentxxl.com

Wird der zweidimensionale Code nun durch einen entsprechenden QR Code Reader ausgelesen, leitet er sofort auf den enthaltenen Link weiter. Somit müssen mögliche Kunden nicht erst einen Link in Ihren Browser auf dem Smartphone eingeben, sondern lediglich das Bild abfotografieren.

Durch das entwickelte Modul ist es nun möglich, von der aktuell angezeigten Seite oder aber eines individuell eingegebenen Links, einen QR Code einzugeben und abzuspeichern.

Unter „Moduleinstellungen“ ist das QR Code Modul zu finden:

Nachdem Sie eine neue Modulinstanz angelegt haben, gehen Sie unter Spez. Einstellungen.

Abb.: .: Menü „Content“ im Sitemanager – Modul „QR Code“ – Spez. Einstellungen

Hier haben Sie verschiedene Parameter zum Einstellen verfügbar.

Weite/Größe: Hier können Sie einen Wert zwischen 1-1000 auswählen. Standardmäßig ist hier der Wert 5 ausgewählt.

Achtung: Dieser Wert wird mit dem Fehlerkorrektur-Level zusammenbenutzt, d. h. wählen Sie den Wert 5 aus und benutzen das Fehlerkorrektur-Level „M“ wird das QR Code-Bild kleiner ausfallen als bei einem Level „H“.

Fehlerkorrektur-Level: Hier können Sie das gewünschte Level auswählen. Das ausgewählte Level besagt, wie viele Codewörter/Daten bei Beschädigung des Codes wiederhergestellt werden können.

Level L: 7% der Codewörter/Daten können wiederhergestellt werden.
Level M: 15% der Codewörter/Daten können wiederhergestellt werden.
Level Q: 25% der Codewörter/Daten können wiederhergestellt werden.
Level H: 30% der Codewörter/Daten können wiederhergestellt werden.

Randzone: Dieser Wert gibt an, wie viel Abstand zwischen Bildrand und QR Code an den Seiten vorhanden sein soll.

ZERO

TWO

FOUR

Dateityp: Hier können Sie den Dateityp hinterlegen. Unter dem ausgewählten Typ, wird der QR Code abgespeichert. (z. B. JPEG, BMP, PNG, WDP, GIF, TIFF, EPS)

Das Format „EPS“ ist eine Vektorgrafik, dieses Format ist besonders für große Abzüge des QR Codes gedacht, da durch Änderungen der Seitenverhältnisse keine Verzerrung des QR Codes zustande kommt.

Weitere Informationen zu dem EPS Format finden Sie unter: http://de.wikipedia.org/wiki/Encapsulated_PostScript

Block Farbe: Hier kann eine Blockfarbe (z. B. schwarz) hinterlegt werden.

Hintergrundfarbe: Hier kann eine Hintergrundfarbe (z. B. gelb) hinterlegt werden.

Weiterführende Informationen über QR Code im Allgemeinen finden Sie unter: http://de.wikipedia.org/wiki/QR-Code

Beispiele für QR-Code Reader:

iOS:

http://itunes.apple.com/de/app/qr-lesegerat/id368494609?mt=8

Android:

https://play.google.com/store/apps/details?id=appinventor.ai_progetto2003.SCAN

PC:

http://www.bctester.de/download.htm

Browser:

Templating

Um das QR Code den Benutzer im Frontend benutzbar machen zu können, muss ein Control in das Template auf dem Reiter: Spez. Einstellungen in das Feld „Modultemplate für QR Code“ eingefügt werden.

Dieses Control muss die ID „GenerateQRCode“ besitzen.

[ibn:GenerateQRCode:text="Generate QR-Code"]
[bn:GenerateQRCode:text="Generate QR-Code"]
[lbn:GenerateQRCode:text="Generate QR-Code"]

Dieses Control muss als Button, ImageButton oder LinkButton implementiert werden.

Weitere Informationen können Sie unter http://support.contentxxl.com/desktopdefault.aspx/tabid-74/71_read-40/ finden.

Falls Sie nur dieses Control in Ihrem Modul-Template eingebaut haben, wird der aktuelle Link Ihrer Seite benutzt.

Um einen individuellen Link vergeben zu können, bzw. um dem Benutzer anzeigen zu können welchen Link er als QR Code generieren lassen würde, können Sie ein zweites Control ein-bauen.

Dieses zweite Control muss die ID „URL“ besitzen.

[tb:Url]
[lb:Url]

Dieses Control muss als Textbox oder Label implementiert werden.

Bitte beachten Sie, dass wenn Sie dieses Control als Label implementieren, kann der Benutzer den angezeigten Link nicht mehr editieren.

Um weitere Informationen zu dem QR-Code auf der Webseite darstellen zu können, sind in dem Template Platzhalter verfügbar:

Platzhaltername	Type	Platzhalterbeschreibung
QRCode_BackgroundColor	string	Gibt die Hintergundfarbe aus
QRCode_BlockColor	string	Gibt die Blockfarbe aus
QRCode_ErrorCorrectionLevel	string	Gibt den Fehlerkorrektur-Level aus
QRCode_FileType	string	Gibt den Dateityp aus
QRCode_ModuleSize	string
QRCode_QuietZone	string

Ein komplettes Template könnte dann so aussehen:

</br>Aktueller Link: </br> [lb:Url]</br>
[bn:GenerateQRCode:text="Generiere QR-Code"]
</br></br>
QR-Code Dateityp: [QRCode_FileType]
</br>
QR-Code Größe: [QRCode_ModuleSize]

Unser obiges Beispiel ist wie folgt getemplatet:

Allgemein - Layout: Modultitel-Template

<div class="panel-heading">
   [popupmenu]<h3 class="panel-title">[ModuleTitle] </h3>
</div>

Allgemein - Layout: Modultemplate

<div class="panel panel-default">
   [moduletitle]
  <div class="panel-body">[content]</div>
</div>

Anwendung:

Um QR Codes für Werbekampangen oder für Flyer zu bekommen, können Sie auf die jeweilige Seite gehen, von der Sie ein QR Code benötigen, dies ist abhängig auf welcher Seite der Templater dieses Modul eingebaut hat.

Der Einbau des QR Code Moduls auf der Webseite könnte in etwa so aussehen:

Hier können Sie, je nachdem, ob der Link abänderbar ist oder nicht, Ihren eigenen Link eintragen oder den aktuellen Link benutzten.

Um einen QR-Code erzeugen zu können, müssen Sie in diesem Beispiel auf den Button „Generiere QR-Code“ drücken. Danach kommt ein Browser-Dialog, indem Sie gefragt werden, unter welchem Pfad Sie die Datei speichern möchten:

Der abgespeicherte QR Code kann dann z. B. so aussehen: