Erstellen einer Slide Show mit personalisierten Bildern

Auf unserer Webseite gibt es nun eine neue Anzeige von personalisierten Vorschau-Bildern welche ausschließlich mit Hilfe des Cross Media Designers erstellt wurde. Die Vorschau der Bilder ist jetzt viel größer, ohne Wasserzeichen und man kann sich nach der Eingabe seines Namens zurücklehnen und in Ruhe die Slide-Show genießen. Es ist eine sehr schöne Idee seinem Kunden die neuesten Sets auf der Firmen-Webseite zu präsentieren. Ein riesiger Vorteil gegenüber der alten Vorschau ist die Pflege der DirectSmile Motive. Durch Drag&Drop können die Sets für die Vorschau einfach ausgetauscht werden. Wie der Aufbau einer solchen Seite funktioniert werde ich Euch heute in diesem Artikel zeigen.
Wie unsere Slide-Show später in etwa aussehen soll, ist hier zu sehen: http://www.imagepersonalization.com/

Was brauchen wir?

Wir benötigen zwei HTML-Seiten für die Slide-Show. Eine ‘Static Home Page’, auf die der Besucher beim Aufruf der Seite seinen Namen eintragen kann und eine ‘Personal Home Page’, welche nur die Aufgabe hat den soeben angelegten Eintrag in der Datenbank zu überschreiben. Weiterhin benötigen wir eine Auswahl an Sets die in unserer Slide-Show platziert werden sollen und eine Datenbank mit nur einer Spalte für den Namen. Mehr ist nicht notwendig.

Nützliche Hinweise vorab

  • Damit alle Preview-Bilder mit der gleichen Auflösung angezeigt werden, sollten Gruppen und platzierte Sets eine feste Höhe und Weite eingestellt haben. Für eine optimale Anzeige habe ich 600px für die Weite und 450px für die Höhe gewählt.
  • Wähle für das erste Bild-Set ein schnelles Motiv, das macht die Slide-Show flüssiger und garantiert dass alle Sets auf dem Server bereits gerendert wurden.
  • Ich empfehle für die Anzeige der Vorschau-Bilder auf hochaufgelösten Sets zu verzichten. Es macht keinen Sinn extrem große Sets in einer Preview-Slide-Show zu verwenden. Es würde unter Umständen das Produktions-system ausbremsen. Abhilfe schafft entweder die DSMI-Autoskalierung oder man lässt die Slide-Show unter einem neu angelegten Designer-Account laufen und transferiert skalierte Sets auf diesen Account. Dabei sollte darauf geachtet werden, dass die Sets nicht kleiner skaliert werden, als die definierte Höhe und Weite der Slide-Show. Es gilt: so groß wie nötig und so klein wie möglich.

Aufbau der Static Home Page

Auf der ‘Static Home Page’ platzieren wir eine Gruppe, richten diese nach unseren Wünschen aus und platzieren darin das Slide-Show Item. In dem Slide-Show-Item befinden sich standardmäßig drei Gruppen in denen sich jeweils ein Text-Item befindet. Diese Gruppen können wir alle mit Strg selektieren und mit der Entf-Taste löschen. Die jetzt leere Slide-Show kann nun per drag&drop mit Sets gefüllt werden.

Als nächstes platzieren wir außerhalb der Slide-Show ein Text-Eingabefeld für die Eingabe des Namen und direkt daneben ein Button oder ein Bild zum Bestätigen der Eingabe. Damit das Eingabe-Menü für die Slide-Show einheitlich aussieht habe ich die Caption für das Eingabefeld gelöscht und ein Text-Item davor platziert in dem ich das Eingabefeld beschreibe.

Bevor wir zu den Zuweisungen der einzelnen Items kommen kopieren wir uns die komplette Page und fügen sie als ‘Personal Home Page’ wieder ein. Damit haben wir beide Seiten für unsere Slide-Show.
image

Definieren aller Item-Zuweisungen

Wir arbeiten uns von oben nach unten durch beide Seiten und beginnen mit der ‘Static-Home-Page’.
Das Textfeld-Item hat die Funktion ‘DataInput’ und soll in das Datenbank-Feld ‘name’ unserer Datenbank schreiben. Die Validation sollte auf ‘NotEmpty’ stehen um zu vermeiden, dass die Eingabe leer ist. Die Message wird bei Fehleingabe dem Benutzer angezeigt und sollte daher aussagekräftig formuliert werden (z.B.: ‘Bitte geben Sie Ihren Namen ein!’).
image

 

Beim Klick auf das platzierte Bild soll ein ‘Submit’ ausgelöst und der eingegebene Name, mit der Funktion ‘Register new user’, in die Datenbankspalte ‘name’ geschrieben werden. Weiterhin löst der Klick ein Seitenwechsel auf die ‘Personal Home Page’ aus, damit die Slide-Show die angezeigten Bilder mit dem übergebenen Namen anzeigt.
image

 

Die Sets die sich auf der ‘Static Home Page’ befinden müssen einen festen Text enthalten, da zu dem Zeitpunkt für den neuen Besucher noch kein Datenbankfeldeintrag in ‘name’ existiert. Ich belasse es bei ‘Smile’.
image

 

Nachdem wir die ‘Static Home Page’ definiert haben können wir uns nun der Personal Home Page widmen. Da sich am Design der Seite nichts ändern soll, müssen wir nur noch ein paar Einstellungen anpassen.
Als erstes entfernen wir die Aktion ‘New User’ von den Items Textfeld und Bild in dem wir im Textfeld Item auf das kleine Männchen image klicken, so dass wir ein Männchen ohne dem ‘New’ erhalten image.
Das Bild soll jetzt ein ‘Submit data’ ausführen um den Datenbankeintrag ‘name’ zu aktualisieren und auf sich selbst verlinken.
image

 

Den Sets weisen wir die Datenbankspalte ‘name’ zu, damit die Bilder mit dem eingegebenen Namen angezeigt werden können.
image

 

Um die Slide-Show testen zu können, speichern wir alles und lassen uns die Vorschau anzeigen. Wenn alle Einstellungen richtig sind sollte die Slide-Show ohne Probleme funktionieren.
http://dsmx2.directsmile.de/WordPress_SlideShow

image

Advertisements

Outlook Termine erstellen mit DirectSmile Cross Media

Sie haben in einer Kampagne Ihre Kunden zu einer bevorstehenden Messe oder zu einem Seminar eingeladen, vielleicht sogar feste Gesprächstermine vereinbart. Nun stellt sich Ihnen die Frage, wie bekommt man die Termine aus der Cross Media Datenbank in den Outlook-Kalender.

Dafür gibt es im DirectSmile Cross Media einen Handler der Ihnen eine *.ics Datei aus den Informationen der Datenbank zusammenbaut und als Link zur Verfügung stellt. Klickt man auf den Link wird die Datei zum Öffnen angeboten. Nach dem Öffnen der Datei wird der Termin in den persönlichen Kalender von MS Outlook eingetragen.

Beispiel-Link:
http://dsmx2.directsmile.de/getvcf.ashx?date=01/02/2012&h=9:00h&hs=33&s=Training:+Cross-Media&d=Cross+Media+Training,+Mr.+Fechner&l=Berlin;+Alt-Moabit+60

Zur Veranschaulichung habe ich eine kleine Beispielkampagne gebaut, in der durch die Eingabefelder alle Termininformationen abgefragt werden. Nach dem Klick auf “create appointment” wird ein Link bereitgestellt, der die ics Datei für den Outlook Kalender bereithält.

zur Beispielkampagne

Wie funktioniert das Ganze?

Sie platzieren ein Link-Item im Cross Media Designer und wechseln zu “External” Link.

image

Die URL muss wie folgt aufgebaut sein:

http://your-server.com/getvcf.ashx?[Parameter]

Parameter:

Parameter Beschreibung
date= Datum in amerikanischem Format mm/dd/yyyy
&h= Startzeit in hh:mm
&hs= Dauer in h (Eingabe als Dezimalzahl möglich, also 2.5 für zweieinhalb Stunden)
&s= Titel/Betreff
&d= Beschreibung
&l= Ort

image

Diese Werte können auch für jeden Kunden variabel aus der Datenbank ausgelesen werden. Dafür ist es wichtig, dass die Werte das korrekte Format haben (siehe Tabelle oben). In unserem Beispiel benutze ich folgende Datenbankspalten:

Werte:

Werte Beschreibung
[[Date]] für das Datum
[[Time]] Beginn Termins
[[Duration]] Dauer des Termins
[[Subject]] Titel/Betreff
[[Description]] Beschreibung
[[Location]] Ort

Dadurch ergibt sich folgende URL:

http://your-server.com/getvcf.ashx?date=[[Date]]&h=[[Time]]&hs=[[Duration]]&s=[[Subject]]&d=[[Description]]&l=[[Location]]

Hinweis: Bei Kombinationen von festem Text und Datenbankvariablen müssen Leerzeichen durch ein “+” Zeichen ersetzt werden, z.B.:

&s=Meeting+[[Subject]]

http://your-server.com/getvcf.ashx?date=[[Date]]&h=[[Time]]&hs=[[Duration]]&s=Meeting+[[Subject]]&d=[[Description]]&l=[[Location]]

vCard QR-Code mit Hilfe von DirectSmile

Was ist eine vCard?

Die vCard dient als elektronische Visitenkarte und ist ein praktisches Mittel Kontaktdaten einer Person mit einem klick in das Adressbuch eines E-Mail-Programms einzufügen. vCards können sowohl in HTML-Seiten eingebettet sein, als Anhang in einer Mail verschickt werden oder als QR-Code vorliegen.

Wie erstellt man einen vCard Code?

Wir brauchen als erstes die Informationen über den Aufbau einer vCard. Diese kann man sich über das Internet besorgen oder man erstellt sich eine vCard (vcf-Datei) mit Hilfe von MS Outlook.

Erstellen einer vCard mit Outlook

Gehen Sie folgendermaßen vor:

  • Markieren Sie einen Kontakt, für den Sie eine vCard erstellen möchten
  • Klicken Sie im Menü Datei auf Speichern unter
  • Klicken Sie im Feld Dateityp auf VCARD-Dateien (*.vcf)
  • Markieren Sie den Ordner, in dem Sie die vCard-Datei speichern möchten

Klicken Sie auf Speichern

Öffnen Sie diese vcf-Datei mit einem Editor, z.B. Notepad oder Editor.
Die vCard besteht aus einzelnen Eigenschaften und deren Attributen. Parameter dienen der Beschreibung der Eigenschaft.

EIGENSCHAFT[;PARAMETER]:Attribut[;Attribut]

BEGIN:VCARD
VERSION:2.1
N;LANGUAGE=de:Doe;John;Peter;Doktor;sen.
FN:Doktor John Peter Doe sen.
ORG:Doe Company
TEL;WORK;VOICE:(987) 123-4567
ADR;WORK;PREF;ENCODING=QUOTED-PRINTABLE:;;1234 North Street=0D=0A=
Anytown TX751234;United States of America;;;Deutschland
LABEL;WORK;PREF;ENCODING=QUOTED-PRINTABLE:1234 North Street=0D=0A=
Anytown TX751234=0D=0A=
United States of America
X-MS-OL-DEFAULT-POSTAL-ADDRESS:2
URL;WORK:http://www.doeweb.com
EMAIL;PREF;INTERNET:john.doe@nowhere.com
REV:20110921T113816Z
END:VCARD

Die Attribute unserer vCard Vorlage sind gefüllt mit den Informationen von Dr. Doe. Damit dieser vCard Code variabel genutzt werden kann, müssen die statischen Attribute durch Textvariablen ersetzt werden. Die Namen der Textvariablen entsprechen den Spaltenüberschriften der Datenbank. In unserem Beispiel wird eine Datenbank mit folgenden Spalten benutzt:

firstname, lastname, company, street, zip, city, country, email, website, phone

BEGIN:VCARD
VERSION:2.1
N;LANGUAGE=de:[[lastname]];[[firstname]]
FN:[[firstname]] [[lastname]]
ORG:[[company]]
TEL;WORK;VOICE:[[phone]]
ADR;WORK;PREF:;;[[street]];[[city]];;[[zip]];[[country]]
LABEL;WORK;PREF;ENCODING=QUOTED-PRINTABLE:[[street]]=0D=0A=
=0D=0A=
[[zip]] [[city]]=0D=0A=
[[country]]
X-MS-OL-DEFAULT-POSTAL-ADDRESS:2
URL;WORK:[[website]]
EMAIL;PREF;INTERNET:[[email]]
REV:[[TStamp]]
END:VCARD

Um einen funktionierenden vCard Code zu erhalten, müssen noch sämtliche Sonderzeichen encodiert werden, damit DirectSmile bei der Erstellung des QR Codes den Text korrekt interpretieren kann.

Dafür benötigen wir die folgenden Codes:

Code Beschreibung
%3A : Doppelpunkt
%2E . Punkt
%3B ; Semikolon
%3D = Gleich
%2D – Trennzeichen

Für eine schnelle Ersetzung der Sonderzeichen können Sie im Editor per STRG+H nach einem Zeichen suchen und es durch den entsprechenden Code ersetzen. Die einzigen Sonderzeichen die nicht ersetzt werden dürfen sind die eckigen Klammern, welche die Variablen umfassen.

BEGIN%3AVCARD
VERSION%3A2%2E1
N%3BLANGUAGE%3Dde%3A[[lastname]]%3B[[firstname]]
FN%3A[[firstname]]+[[lastname]]
ORG%3A[[company]]
TEL%3BWORK%3BVOICE%3A[[phone]]
ADR%3BWORK%3BPREF%3A%3B%3B[[street]]%3B[[city]]%3B%3B[[zip]]%3B[[country]]
LABEL%3BWORK%3BPREF%3BENCODING%3DQUOTED%2DPRINTABLE%3A[[street]]%3D0D%3D0A%3D
[[zip]]%20[[city]]%20%3D0D%3D0A%3D
[[country]]
X%2DMS%2DOL%2DDEFAULT%2DPOSTAL%2DADDRESS%3A2
URL%3BWORK%3A[[website]]
EMAIL%3BPREF%3BINTERNET%3A[[email]]
REV%3A[[TStamp]]
END%3AVCARD

Da wir am Ende eine Bildanfrage an das Barcode-Plug-In von DirectSmile senden, müssen alle Zeilenumbrüche ebenfalls encodiert und die Umbrüche entfernt werden. Dafür benutzen wir den folgenden Code:

Code Beschreibung
%0A Enter (LF)
BEGIN%3AVCARD%0AVERSION%3A2%2E1%0AN%3BLANGUAGE%3Dde%3A[[lastname]]%3B[[firstname]]%0AFN%3A[[firstname]]+[[lastname]]%0AORG%3A[[company]]%0ATEL%3BWORK%3BVOICE%3A[[phone]]%0AADR%3BWORK%3BPREF%3A%3B%3B[[street]]%3B[[city]]%3B%3B[[zip]]%3B[[country]]%0ALABEL%3BWORK%3BPREF%3BENCODING%3DQUOTED%2DPRINTABLE%3A[[street]]%3D0D%3D0A%3D%0A[[zip]]%20[[city]]%20%3D0D%3D0A%3D%0A[[country]]%0AX%2DMS%2DOL%2DDEFAULT%2DPOSTAL%2DADDRESS%3A2%0AURL%3BWORK%3A[[website]]%0AEMAIL%3BPREF%3BINTERNET%3A[[email]]%0AREV%3A[[TStamp]]%0AEND%3AVCARD

Nun der letzte Schritt:

An einen DirectSmile Server soll die Bildanfrage gesendet werden, damit das Barcode-Plug-In einen QR Code zurückgeben kann. Dafür müssen wir unseren Code noch in ein IMG TAG packen und noch ein paar Parameter für den Server mitgeben. So dass das fertige IMG-TAG wie folgt aussieht.

<image src=“http://your-domain.com/GetBarCode.ashx?qrversion=V10&qrencoding=Byte&t=BEGIN%3AVCARDVERSION%3A2%2E1N%3BLANGUAGE%3Dde%3A%5B%5Blastname%5D%5D%3B%5B%5Bfirstname%5D%5DFN%3A%5B%5Bfirstname%5D%5D+%5B%5Blastname%5D%5DORG%3A%5B%5Bcompany%5D%5DTEL%3BWORK%3BVOICE%3A%5B%5Bphone%5D%5DADR%3BWORK%3BPREF%3A%3B%3B%5B%5Bstreet%5D%5D%3B%5B%5Bcity%5D%5D%3B%3B%5B%5Bzip%5D%5D%3B%5B%5Bcountry%5D%5DLABEL%3BWORK%3BPREF%3BENCODING%3DQUOTED%2DPRINTABLE%3A%5B%5Bstreet%5D%5D%3D0D%3D0A%3D%5B%5Bzip%5D%5D%20%5B%5Bcity%5D%5D%20%3D0D%3D0A%3D%5B%5Bcountry%5D%5DX%2DMS%2DOL%2DDEFAULT%2DPOSTAL%2DADDRESS%3A2URL%3BWORK%3A%5B%5Bwebsite%5D%5DEMAIL%3BPREF%3BINTERNET%3A%5B%5Bemail%5D%5DREV%3A%5B%5BTStamp%5D%5DEND%3AVCARD&s=300&#8243; />
Parameter Beschreibung
<image eröffnet das Image-Tag
src=” Quelle des Bildes
GetBarCode.ashx? Funktion die auf dem Server aufgerufen werden soll
qrversion= Barcode-Typ und –Verschlüsselung des Barcodes
qrencoding= Encoding für das Erstellen des Barcodes
t= Text der mit Barcode abgebildet werden soll
s= Größe des Barcodes in px

Ergebnis:

Diesen Barcode können Sie nun mit Hilfe eines QR to vCard Reader auslesen.

Der folgende Link führt Sie auf eine Seite auf der Sie Ihren ganz persönlichen vCard QR Code erstellen können. http://dsmx2.directsmile.de/Barcode

 

 

 

Haftungsausschluss

Die auf diesen Internetseiten veröffentlichten Inhalte sind sorgfältig recherchiert. Dennoch kann fdoerner.wordpress.com keine Gewähr für die Aktualität, Richtigkeit und Vollständigkeit der bereitgestellten Informationen übernehmen. Für Schäden, die sich aus der Verwendung der abgerufenen Informationen ergeben, wird keine Haftung übernommen.

Für Internetseiten Dritter, auf die durch Hyperlink verwiesen wird, tragen die jeweiligen Anbieter die Verantwortung. fdoerner.wordpress.com hat keinen Einfluss auf Inhalt und Gestaltung der verlinkten Seiten und übernimmt keine Verantwortung für diese Seiten. Wir weisen ausdrücklich darauf hin, dass wir uns mit Inhalten Dritter, die gegen die Rechtsordnung oder die guten Sitten verstoßen, nicht identifizieren, sondern ausdrücklich davon distanzieren. Die Nutzung von Hyperlinks, die zu Seiten Dritter führen, erfolgt auf eigene Verantwortung der Nutzer.