personalisierte 3 dimensionale DirectSmile Sets

Heute möchte ich Euch zeigen wie man recht einfach aus einem vorhandenem DirectSmile Set ein 3D Set zaubern kann. Zwar ist das keine professionelle Lösung aber zumindest ein Ansatz für eine neue Marketing Idee die sich sehen lassen kann.

Bei der Auswahl der Sets sollte darauf geachtet werden, dass sich in dem Motiv Objekte befinden, die sich vom eigentlichen Hintergrund abheben und leichte Perspektiven vorhanden sind. Ich habe mir für unser Beispiel das SnowLetters Set ausgesucht. Zur Veranschaulichung könnt ihr euch auf der folgenden Seite eine kleine Slide-Show mit meinen bisherigen Ergebnissen ansehen.

zum Beispiel

Was wir brauchen:

- ein DirectSmile Set
- ein Bildbearbeitungsprogramm (Photoshop)
- eine 3D Brille

Los geht’s …

Als erstes rufe ich im Windows-Explorer das Verzeichnis des Sets auf und lege eine Sicherungskopie des Hintergrundbildes an. Danach öffne ich das kopierte Hintergrundbild in Photoshop und ändere den Zustand des Bildes von ‘Background’ in ‘Layer0’. Dafür klicke ich unter ‘Layers’ doppelt auf das Bild und bestätige mit ‘OK’.

 

Da wir zwei Bilder für ein 3D Set benötigen kopiere ich den ‘Layer 0’. Dafür ziehen ich den ‘Layer 0’, mit gedrückter linker Maustaste, auf das Icon ‘Create new Layer’ .

 

Per Doppelklick auf den kopierten Layer, mit der Bezeichnung ‘Layer 0 copy’, gelange ich in den ‘Layer Style’ und entferne den roten Kanal des Bildes und bestätige mit ‘OK’.

 

Jetzt verändere ich die Perspektive der beiden Layer. Ich selektiere den ‘Layer 0’ und wähle im Menü ‘Edit’ – ‘Transform’ – ‘Perspective’ aus. Ich halte mit der linken Maustaste die rechte obere Ecke des Bildes und ziehe diese vorsichtig aus dem Bild, so dass sich der Wert H: in der Menüleiste von 100% auf 100,8% verändert und bestätige die Änderung durch zweimaliges drücken der Enter-Taste.

 

Den Vorgang wiederhole ich mit dem ‘Layer 0 copy’, nur dass ich die Perspektive jetzt auf der linken Seite des Bildes anpasse und zwar ebenfalls auf 100,8%.

Natürlich ist das Anpassen der Perspektive reine Übungssache. Man kann den Wert zwar höher stellen, jedoch muss man daran denken, dass der Zuschauer keine Kopfschmerzen beim Betrachten des Bildes bekommen soll.
Jetzt speichere ich das Bild als JPG und lade danach das Set SnowLetters im DirectSmile SetEditor und tausche das Hintergrundbild gegen unser neu erstelltes 3D Bild aus, fertig.

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.

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!’).

 

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.

 

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’.

 

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 klicken, so dass wir ein Männchen ohne dem ‘New’ erhalten .
Das Bild soll jetzt ein ‘Submit data’ ausführen um den Datenbankeintrag ‘name’ zu aktualisieren und auf sich selbst verlinken.

 

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

 

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

DirectSmile Cross Media: Kundenzufriedenheitsumfrage – Part I

Einleitende Worte zur Kundezufriedenheit

Heutzutage können die Kunden aus einer Vielzahl von angebotenen Produkten und Dienstleistungen verschiedenster Anbieter wählen. Die Kundenzufriedenheit dient daher als wesentliches Merkmal für die Qualität von Kundenbindung und Qualitätsmanagement, auf die Wünsche und Bedürfnisse der Kunden einzugehen und durch Kundenorientierung ein hohes Maß an Zufriedenheit zu erreichen. Wie erhält man Informationen über die Wünsche der Kunden? Niemand kann besser darüber Auskunft geben, als die Kunden selbst.

Daher möchte ich Euch in den nächsten Blog-Artikeln an einem Beispiel zeigen, wie man mit Hilfe des Cross Media Designers eine Umfrage erstellt. Für das Beispiel werde ich das DirectSmile Support-Center als Thema für die Umfrage verwenden.

Zielsetzung

• Erstellen einer Support-Kundenzufriedenheitsumfrage

Bedingungen
• Die Kampagne startet mit der erfolgreichen Beantwortung einer Supportanfrage, indem der Supportmitarbeiter die Anfrage als gelöst markiert.
• In diesem Moment werden alle für die Kampagne relevanten Informationen des Kunden in die Datenbank der Kampagne geschrieben. In unserem Fall sind die Informationen E-Mail, Datum und Support-ThreadID der Kundenanfrage im Support-Center.
• Der Kampagnenmanager wacht über die neu angelegten Datensätze (via Filter) und versendet automatisch eine E-Mail mit der Einladung zur Supportumfrage an den Kunden.
• Der Kunde öffnet die Mail und gelangt über den enthaltenden Link zu der Umfrage.
• Auf der ersten Seite der Befragung hat der Kunde die Möglichkeit die Sprache auszuwählen, wie die Umfrage angezeigt werden soll. Auf den folgenden Seiten kann der Kunde seine Zufriedenheit zu der soeben gelösten Anfrage äußern.
• Die Fragen werden durch Radio-Buttons (Einzelauswahl) oder Checkboxen (Mehrfachauswahl) beantwortet. Zusätzlich gibt es bei einigen Fragen die Möglichkeit die Antwort in Textfeldern selber auszuformulieren.
• Mit Hilfe des „Bestätigen und Fortsetzen“ Button gelangt der Kunde auf die jeweils nächste Seite. Der Fortschritt der Befragung wird auf jeder Seite in Form von einem grünen Balken angezeigt. Die Fußzeile beinhaltet Links zu den öffentlichen DirectSmile-Webseiten.
• Nach der Befragung wird der Kunde auf die DirectSmile Webseite weitergeleitet.

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.

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

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%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&s=300″ />

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.