Outlook Termine als Anhang in E-Mails versenden

Weiterführend zum Blog-Artikel “Outlook Termine erstellen mit DirectSmile Cross Media” zeigt Ihnen dieser Artikel, wie simpel es ist, Termine für den Outlook Kalender als Anhang in einer E-Mail zu versenden.

Im Grunde haben wir bereits alle Informationen die für das Erstellen der ICS Datei benötigt werden, so dass wir uns direkt dem E-Mailing widmen können.

Fügen Sie Ihrer Kampagne eine E-Mail Seite hinzu, wechseln Sie anschließend in den Einstellungen der E-Mail zum Reiter Misc und klicken Sie auf das grüne Plus um einen Anhang hinzuzufügen.

image

Geben Sie dem Anhang einen aussagekräftigen Namen und klicken Sie danach auf das Datenbank Icon um die notwendigen Zuweisungen vornehmen zu können.

Kopieren Sie den unten stehenden Code und fügen ihn direkt in Ihr geöffnetes Zuweisungsfenster ein. Anschließend passen Sie Serverinformation und Datenbankvariablen an.

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

image

Sie benötigen noch einen Button oder Link auf einer Seite Ihrer Webseite, um das Versenden der E-Mail auszulösen. Fügen Sie dem Button die Aktion ‘Send E-Mail’ hinzu und wählen im Datenbank-Zuweisungsfenster die E-Mail aus, die versendet werden soll.

image

Nach dem klick auf den Button ‘Send E-Mail’ wird die E-Mail Terminbestaetigung.html mit der ICS Datei im Anhang versendet.

Beispiel wie es aussehen könnte:

image

 

 

Sets und Bilder für globale Bibliotheken hinzufügen (Cross Media v6)

Grundsätzlich gilt: Sets werden über den DirectSmile Integration Server (DSMI) hochgeladen, Bilder über den DirectSmile Cross Media Designer (DSMX).

Möchte man all seinen Cross Media Usern immer wieder frische neue Sets zur Verfügung stellen, so muss dies über das DSMI geschehen. Dafür meldet man sich mit dem Designer User an das DSMI an und lädt die gewünschten Sets in dessen Repository. Mehr ist dafür nicht notwendig. Danach sind die Sets für die Verwendung im Designer für jeden Account unter Global, frei zugänglich.

Um Bilder im Cross Media Designer global zur Verfügung zu stellen, meldet man sich mit dem Super User an den Cross Media Designer an und lädt unter ‚Global Images‘ die gewünschten Bilder hoch.

 

 

Google Web Fonts in Cross Media Kampagnen verwenden

Der Cross Media Designer bringt von Hause aus nur eine gewisse Anzahl an verfügbaren Fonts mit. Nun kann es aber sein, dass genau der Font der für das Kampagnen Design angedacht war nicht in der Auswahl der Standard Fonts enthalten ist. Durch die Implementierung der Google Web Font in den Cross Media Designer haben Sie die Möglichkeit spezielle Fonts für Ihr Design zu laden. Ich werde Ihnen daher heute zeigen, wie Sie Google Web Fonts Ihrer Kampagne hinzufügen und für ihr Design verwenden.

Bitte beachten Sie, dass Google Web Fonts nur auf Kampagnen Webseiten, mobilen Seiten und in dynamischen Dokumenten verwendet werden können.

 

Google Fonts auf Kampagnen Webseiten

Sie haben an mehreren Stellen im Cross Media Designer die Möglichkeit Google Web Fonts hinzuzufügen. Die einfachste Art ist es über den Reiter ‘GoogleFonts’ einen Web Font zu laden. Klicken Sie auf das grüne Plus in der Auswahl und markieren Sie einen Font der für die Kampagnen Webseite verwendet werden soll.

image

 

Nach dem Bestätigen des ausgewählten Web Fonts wird er der Google Font Liste und der klassischen Font Liste zur Auswahl hinzugefügt.

image

 

Jetzt können Sie wie gehabt ihren Text entsprechend formatieren. Ein kleiner Tipp: Wenn Sie auf mehreren Seiten Ihrer Kampagne den Font benutzen wollen, bietet es sich an, einen Text Style zu erstellen. Diesen brauchen Sie dann nur noch für das jeweilige platzierte Item auswählen. Zum Erstellen eines Text Style wechseln Sie zu dem Reiter ‘Styles’ und klicken auf das kleine ‘+’. Editieren Sie den Text Style und wählen Sie Ihren hinzugefügten Web Font aus.

image

 

Nach dem Bestätigen des erstellten Text Style markieren Sie in Ihrer Kampagnen Webseite ein Item ihrer Wahl und wählen unter ‘Style’ den angelegten Text Style aus.

image

Google Web Fonts einem jQuery Style zuweisen

Sie haben eine neue Kampagnen-Webseite erstellt in der Sie sowohl GoogleFonts für ihre Texte als auch ein bestimmtes jQuery Theme benutzen wollen.

image

 

Damit das ausgewählte jQuery Theme, welches auch die Schriftart u.a. von Buttons bestimmt, den selben GoogleFont benutzt, müssen Sie das jQuery Theme entsprechend anpassen.

image

 

Wählen Sie im Menü unter Options “jQuery Styles” aus.

image

 

In dem geöffneten jQuery Style Fenster klicken Sie auf den Link “jQuery Theme Roller”.

image

 

Suchen Sie unter “Gallery” ihren jQuery Style aus und editieren ihn.

image

 

In der Auswahl Font Settings fügen Sie den Namen des GoogleFonts an erster Stelle hinzu und klicken anschließend auf ‘Download theme’. Vergeben Sie ihrem Theme einen aussagekräftigen Namen und klicken anschließend auf ‘Download’.

imageimage

 

Wechseln Sie zurück zum Cross Media Designer und wählen Sie unter ‘Add Style’ ihr heruntergeladenes jQuery Theme aus.

image

 

Wählen Sie für die Webseite das neue jQuery Theme aus.

image

 

Nachdem Sie das neu angepasste jQuery Theme der Webseite zugewiesen haben werden alle Items die die Auswahl jQuery zugeschalten haben mit dem richtigen GoogleFont dargestellt.

image

Nützliches für die Anzeige von mobilen jQuery Seiten

 

Trennlinien zwischen Items entfernen

Mit dem DirectSmile Cross Media Designer kann man neben der normalen Webseitengestaltung für Kampagnen auch mobile Seiten (mobile pages) erstellen. Der Besucher hat somit die Möglichkeit mit seinem mobilen Gerät auf angepasste Inhalte von Webseiten zuzugreifen.

Platziert man einige Items wie Bilder, Texte oder ein Eingabefeld auf einer mobilen Seite werden vom jQuery Mobile Framework automatisch Trennlinien zwischen den einzelnen Items angezeigt. Diese Linien dienen der optischen Abgrenzung der Items, wenn das mobile Gerät vertikal ausgerichtet ist. Sobald man das Gerät dreht und horizontal hält, verschwinden diese Linien automatisch, da die Items dann für diese Darstellung optimiert ausgerichtet werden. Bei einer vertikalen Ausrichtung können diese Linien jedoch recht störend sein. Um sie zu entfernen, platziert man einfach ein HTML-Item auf einer Seite, in welches man folgendes Script einfügt:

<!-- Script zum Ausblenden der Gruppen Linien -->
<script type="text/javascript">

$('[data-role*="page"]').live("pageshow", function(event, ui) {
$('[class*="ui-br"]').removeClass('ui-br');
});
</script>

 

ohne Skript mit Skript
image image

 

Ränder von platzierten jQuery Items entfernen

Items die auf einer mobilen Seite platziert werden sind grundsätzlich immer mit Rändern versehen. Um diese zu entfernen fügt man auf der mobilen Seite ein CSS Item hinzu und platziert darin den folgenden Code:

.ui-content, .ui-field-contain{
	margin: 0 !important;
	padding: 0 !important;
}

 

ohne CSS mit CSS
image image

Einbinden von Schriften in DirectSmile Cross Media Webseiten / Embedding Fonts in DirectSmile Cross Media Webpages

Letztens kam die Frage auf wie man hauseigene Fonts, beziehungsweise Fonts eines Auftraggebers, für das Web im DirectSmile Cross Media bereitstellen kann, so dass für alle Besucher der Webseite die gleiche Typografie dargestellt wird.

Um einen TTF oder OTF Font für das Web vorzubereiten muss dieser im ersten Schritt in ein brauchbares Format konvertiert werden. Die gängigsten Formate sind Web Open Font Format (WOFF), Embedded Open Type (EOT) und Scalable Vector Graphics (SVG).

Für das Konvertieren der Fonts habe ich folgenden @font-face Generator benutzt:

http://www.fontsquirrel.com/fontface/generator

Stellen Sie sicher, dass Sie keine Urheberrechtsverletzung begehen, wenn Sie Schriften einbinden.

Wählen Sie einen Font aus und laden Sie die Datei hoch. Nach Bestätigung der Vereinbarung wird der Font in alle gängigen Webformate konvertiert und Ihnen als Download angeboten.

 

Nach dem Herunterladen und Entpacken der Zip Datei importieren Sie die Fonts in Ihre DirectSmile Cross Media Kampagne über den Bereich Content, Auswahl Account.

imageBild1

Um auf jeder Seite Ihrer Kampagne auf das Stylesheet zugreifen zu können, empfiehlt es sich den Style für die Kampagne im Head fest zu hinterlegen. Dazu öffnen Sie den Editor für den Head-Bereich. Diesen finden Sie im Menü Campaign und wählen HTML head.

imageBild2

Bevor Sie den Style einfügen, definieren Sie den Bereich für CSS-Format. Mit <style type=“text/css“> und </style> definieren Sie einen Bereich für die Stylesheet-Formatdefinitionen.
Zwischen dem einleitenden Tag <style...> und dem abschließenden Tag </style> können Sie nun Ihre CSS-Formate definieren. Kopieren Sie den Code aus der Stylesheet.css Datei und fügen ihn ein. Passen Sie den Pfad an, damit der Font beim Aufruf gefunden werden kann. Geben Sie der Font-Family einen Namen und bestätigen Sie die Anpassungen mit OK.

imageBild3

Erstellen Sie einen Stil im Bereich Styles (Bild4) um Ihren Items später dieses CSS zuweisen zu können. Dazu editieren Sie den hinzugefügten Style und ändern den font-family Namen in Example (Bild5), wie in Bild3 definiert.

imageBild4 imageBild5

Platzieren Sie ein beliebiges Layout Item auf Ihrer Seite, indem Sie mit gedrückter Maustaste das Item in die noch leere Baumstruktur (Tree) ziehen.

imageBild6

Selektieren Sie das platzierte Item im Tree und wählen den neuen Style aus. Nun wird der hinterlegte Font automatisch auf Ihrer Seite angezeigt.

imageBild7

 

 

Embedding Fonts in DirectSmile Cross Media Webpages

We recently received a question on how one can make their own in house fonts, respectively fonts from a client, available for the web in DirectSmile Cross Media so that the same typography is presented for all visitors of the webpage.

In order to prepare a TTF or OTF font for the web, it must first be converted into a usable format. The most common formats are the Web Open Font Format (WOFF), Embedded Open Type (EOT), and Scalable Vector Graphics (SVG).

In order to convert the fonts I used the following @font-face Generator:

http://www.fontsquirrel.com/fontface/generator

Make sure that you are not committing copyright infringement when embedding the font.

Select a font and upload the file. After the agreement of terms has been confirmed, the font will be converted into all common formats and be available to you as a download.

 

After you have imported and unpacked the ZIP file, import the fonts in your DirectSmile Cross Media campaign by selecting Account in the Content area.

clip_image001Image 1

In order to access the style sheet on every page in your campaign, it is recommended that you set the style for the campaign in the Head. To do so, open the editor for the Head area. This is located in the Campaign menu under the selection HTML Head.

clip_image002Image 2

Before you insert the style, define the area for the CSS format. With <style type=“text/css“> and </style> you define an area for the style sheet format definitions.
Between the opening tag <style...> and the final tag </style> you can define your CSS formats. Copy the code from the Stylesheet.css file and insert it. Modify the path so that the font may be found when requested. Give the font family a name and confirm the modifications by clicking OK.

clip_image003Image 3

Create a style in the ‘Styles’ area (Image 4) in order to be able to allot your items to this CSS later. Edit the added style and change the font family names to Example (Image 5) as defined in Image 3.

clip_image004Image 4 clip_image005Image 5

Place any layout item on your page by dragging the item onto the empty Tree while pressing the mouse button.

clip_image006Image 6

Select the item that was placed in the Tree and select the new style. Now the added font will automatically be displayed on your page.

clip_image007Image 7

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

 

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

 

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

 

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

 

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