Editor Vorlagen Programmier-Richtlinien

Größe: px
Ab Seite anzeigen:

Download "E-Mail Editor Vorlagen Programmier-Richtlinien"

Transkript

1 Editor Vorlagen Programmier-Richtlinien 1

2 Inhaltsverzeichnis 1. Einleitung Code erstellen für Vorlagen Code für mobile Vorlagen (Responsive Design) Editor Klassen (Tags) für Vorlagen erstellen Editor Tags Fazit Zusammenfassung

3 1. Einleitung Dieses Dokument soll Ihnen dabei helfen, Ihre eigene Vorlage mit Html zu programmieren um diese in unserem Editor nutzen zu können. Um diese Hilfe-Datei zu nutzen, benötigen Sie Grundlagenwissen in Html sowie in CSS. Das Programmieren von einer Vorlage für den Editor ist ein drei-stufen-prozess. Notiz: Wir haben Screenshots von einzelnen Code-Ausschnitten für Sie zusammengestellt, um den Prozess für Sie so einfach wie möglich zu gestalten. Einschränkungen sind mit einem NB gekennzeichnet. Zudem haben wir einige Tipps für Sie eingefügt um das Ganze zu vereinfachen. 3

4 2. Code erstellen für Vorlagen Als erstes erstellen Sie einen Code in dem Sie <table> Tags und <style> inline Tags benutzen. Denken Sie daran, stets festgelegte Werte wie zum Beispiel: <td width= 100 >Hallo Welt</td> einzugeben, mit dem Zusatz eines Style Tags gehen Sie sicher, dass Ihr gewünschtes Format auch dargestellt wird. Z.B.: <td width= 100 style= width: 100px >Hallo Welt</td> Wenn das Grundgerüst Ihres Codes fertig ist, werden wir sogenannte Hacks in die <head> tags </head> einfügen, damit Ihre Vorlage in den gängigen Klienten richtig dargestellt wird und das Design, wie zum Beispiel die Hintergrundfarbe, beibehalten wird. Tipp:.ReadMsgBody {width: 100%; background-color: #ffffff; }.ExternalClass {width: 100%; background-color: #ffffff; } Wenn Sie dies erledigt haben, können Sie zum nächsten Schritt übergehen. IHRE VORLAGE SOLLTE KEINE <A HREF= # ></A> ENTHALTEN! 4

5 3. Code für mobile Vorlagen (Responsive Design) erstellen Im nächsten Schritt fügen Sie CSS für die mobile Ansicht hinzu. Damit responsive Design Tags auch wirksam sind, nutzen wir CSS-Media- Queries (Medienabfragen). Media Queries sind CSS3 Module, die es dem Newsletter-Inhalt erlauben, sich an unterschiedliche Bedingungen wie beispielsweise der Bildschirmauflösung anzupassen. Schauen Sie sich zunächst den Aufbau Ihrer Vorlage an und wählen Sie dann eine der unten gelisteten CSS3 Medienabfragen aus. So ist ein Query-Tag only screen and (max-device-width: 480px) { Max-device-width bedeutet, dass alle Styles welche dieser Medienabfrage zugeordnet werden, in Kraft treten, wenn das Endgerät eine Maximum-Breite von (in unserem Beispiel) 480px erreicht hat. Wenn Sie dieses Tag kreiert haben, können Sie darauf aufbauen und neue Klassen hinzufügen, welche das Layout verändern, wenn der Newsletter mit einem mobilen Gerät geöffnet wird. Beispiel: Wenn das mobile Gerät erkannt wurde, soll die Breite der Vorlage auf 320px verkleinert only screen and (max-device-width: 480px) { 5

6 table[class= wrappertable ] { width: 320px!important; } Beispiel: Fügen Sie die Klasse wrappertable zu dem <table> Tag hinzu um diese Abfrage zu erstellen. <table cellpadding= 0 cellspacing= 0 width= 648 class= wrappertable style= border-collapse:collapse; border:0; > Es können nun verschiedene Klassen mit wrappertable erstellt werden, um eine Basis für Ihre Vorlage zu schaffen. Dabei ist es jedoch wichtig, stets an die verschiedenen Endgeräte zu denken. Wenn also Ihre Schriftgröße in der Vorlage für mobile Geräte 14px ist, kreieren Sie eine Klasse für das <font> tag und stellen Sie die Schriftgröße auf 12px etc. Als nächstes erklären wir, wie Sie aus zwei Spalten, eine einzelne Spalte machen, wenn Sie Medienabfragen für mobile Endgeräte nutzen. Tipp: Dies kann auch für mehr als zwei Spalten angewendet werden, gehen Sie jedoch sicher, dass die maximale Breite der Vorlage gleichmäßig aufgeteilt ist. table[class=contenttable] { } width:320px!important; (CSS wird benötigt) 6

7 <table width= 640 border= 0 cellpadding= 0 cellspacing= 0 class= contenttable > <tr> <td> <table class= contenttable width= 320 border= 0 cellspacing= 0 cellpadding= 20 align= left > <tr> <td><p>column Left Content</p></td> </tr> </table> <table class= contenttable width= 320 border= 0 cellspacing= 0 cellpadding= 20 align= right > <tr> <td><p>column Right Content</p></td> </tr> </table> </td> </tr> </table> 7

8 Indem Sie diese Klassen hinzufügen und die innere Tabellen-Breite teilen, werden die Tabellen, wie Sie auf dem Bild sehen, untereinander dargestellt. Lorem ipsum dolor sit amet Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim Consectetur adipisicing elit, sed do eiusmod Image (Zweispaltige Tabelle ) Lorem ipsum dolor sit amet Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim Consectetur adipisicing elit, sed do eiusmod Image 8

9 Der nächste Schritt, wenn es um Medienabfragen geht, ist die Anpassung von Bildern in Ihrer Newsletter Vorlage. Dies ist ein tatsächlicher Prozess, wie auch zuvor, wird mit CSS3, wie unten dargestellt, begonnen: td[class= headercell ] { background-image: url(your-image.jpg); width: 380px!important; height: 130px!important; } Durch das CSS wird veranlasst, dass wenn die Medienabfrage eine Bildschirmgröße von mind. 320px vorfindet, das Hintergrundbild eingesetzt und an die entsprechende Größe angepasst wird. Damit dies vorrangig behandelt und unterstützt wird, fügen wir important Tags ein. Als nächstes muss diese Klasse in den HTML-Code eingefügt werden, wie in dem Beispiel unten dargestellt. <tr> <td class= headercell > <img src= your-image.jpg width= 648 height= 217 /> </td> </tr> Fügen Sie die Klassen zu dem <td> Tag hinzu und behalten Sie das original Image Tag bei. 9

10 Diese Bildtechnik kann für jedes Bild angewendet werden, vorausgesetzt das erforderliche Bild wird dementsprechend in der Größe angepasst und auch im Dateiarchiv gespeichert. Tipp: Versuchen Sie die Bildgröße so klein wie möglich zu halten, Png oder Gif Dateien funktionieren hier gewöhnlich am besten. Mit Blick auf das Responsive Newsletter Design, gibt es einige Faktoren, die hiermit zusammenhängen. Die folgenden Techniken werden nicht universell von allen Mobilen Klienten unterstützt. Nicht alle Klienten sind gleich aufgebaut - sogar auf dem gleichen Endgerät kann ein HTML Newsletter von Posteingang zu Posteingang sehr verschieden aussehen. Beispiel: Während der Standard Android Klient welcher auf einem Google Nexus erscheint, für seine hervorragende CSS Unterstützung bekannt ist, kann es bei Gmail durchaus zu Problemen kommen, da Styles in den Tags ignoriert werden oder Gmail gewöhnliche CSS2 Eigenschaften nicht auslesen kann. Das Iphone und auch andere Apple ios Produkte gelten als beinahe fehlerfrei wenn es um die Anzeige geht. Zudem geht eine hohe Prozentzahl der mobilen Newsletter Öffnungen auf das Iphone zurück. Mit diesen Informationen im Hinterkopf, haben wir eine grobe Liste von mobilen Endgeräten zusammengestellt, die deren Unterstützung für Medienabfragen darstellt. Die Unterstützung von Media Queries erlaubt die Nutzung von einer Vielzahl an responsive Design Techniken. 10

11 Standardgeräte für mobile Klienten Gerät Medienabfrage Amazon Kindle Fire Amazon Kindle Fire HD Android 2.1 Eclair Android 2.2+ Apple iphone Apple ipad Apple ipod Touch BlackBerry OS 5 BlackBerry OS 6+ BlackBerry Playbook Microsoft Windows Mobile 6.1 Microsoft Windows Phone 7 Microsoft Windows Phone 7.5 Microsoft Windows Phone 8 Microsoft Surface Palm Web OS

12 Sie haben jetzt eine Basis für Bild- und Layoutanpassungen; hier sehen Sie die drei meist genutzen und allgemeinsten max-widths, welche beispielhaft für eine Vielzahl von Endgeräten only screen and (max-device-width: 480px) { styles here... only screen and (max-device-width: 640px) { styles here... only screen and (max-device-width: 479px) { styles here... } Tipp: Weitere Breiten können genutzt werden, um eine zusätzliche Stabilität zu erzeugen, jedoch kann dies in eine Zwickmühle führen. Jetzt wo Sie die Grundlagen für die mobile Optimierung haben, wird es einfach sein, diese Techniken auszuweiten und auf andere Situationen anzuwenden. Denken Sie daran, Testen ist enorm wichtig. Für gewöhnlich testen wir unsere Software auf den weiter oben dargestellten, kompartiblen Geräten. 12

13 4. Editor Klassen (Tags) für Vorlagen erstellen Wenn Sie die mobil optimierte Version Ihrer Vorlage getestet und für gut empfunden haben, können Sie die Tags einfügen, die für die Funktionalität im Editor benötigt werden. Als erstes werden alle Styles (wie unten dargestellt), die für den Kopfteil des Codes benötigt werden, eingefügt. NB: Diese Tags sind sehr speziell und Groß- und Kleinschreibung ist wichtig, bitte überprüfen Sie also die Schreibweise. Hier sehen Sie eine Liste mit Tags und Definitionen für alle Styles gm-template - Diese Klasse MUSS im ersten DOM Element in der Vorlage eingefügt werden (nach dem Style Element) - diese Klasse ist mit einem <div> Tag definiert, welches den ganzen Newsletter umschließt. gm-editable - Eine veränderbare Box, welche Drops von einen Gm- Element annimmt - dadurch kann das Element von der Funktionen Gebrauch machen, die der Editor anbietet. gm-element - Alle veränderbaren Elemente müssen diese Basis Klasse haben - denn diese Funktion aktiviert das Element gm-element-html - Erlaubt HTML Bearbeitungs-Tool - der Nutzer kann dadurch den Inhalt in speziellen Inhaltsblöcken bearbeiten. 13

14 Die unten abgebildeten Styles stellen die oben abgebildeten Klassen dar und können so definiert werden. Diese Klassen werden hier repräsentiert..gm-template,.gm-template p,.gm-template a,.gm-template span {font-family:arial,helvetica,sans-serif; font-size:14px;}.gm-template p {margin:0 0 1em 0;} Wenn Sie Ihre Styles platziert haben, können Sie mit den <body> Elementen weiter machen und ein <table> Element einfügen, welches genauso funktioniert wie das <div> Tag, und den Newsletter oder Teile daraus umschließt. Fügen Sie zusätzlich 100% Breite zu Ihrer Tabelle und den Style= border-collapse:collapse; border:0 hinzu. Dies wird die Rahmen entfernen und die Tabelle dehnbar machen. Beispiel: <table width= 100% border= 0 cellpadding= 0 cellspacing= 0 align= center style= bordercollapse:collapse; border:0; > <tr> <td> NB: Besonders wichtig, wenn Sie gm-element Tags hinzufügen, ist dass alle Elemente mit <div class= >item>/div> Tags umschlossen sind. NB: Dieses Tag bindet zudem auch swatch hex values in Ihre Vorlage ein. 14

15 Beispiel: <div class= gm-template data-color-swatches= [ Black, White, #1E90FF, #00008B, #778899, #4682B4, Red ] > Beispiel: Tags werden für simple Texteingaben genutzt: sans- <div class= gm-element gm-element-html > <font class= contenttext style= font-family: Verdana, Geneva, serif; font-size: 28px; font-weight: bold >LOGO HERE</font> </div> Mit dem gleichen Code, wie oben dargestellt, lässt sich auch eine andere Regel für ein Element, welches Sie veränderbar machen wollen bzw. Funktionalität im Editor bekommen soll, demonstrieren. Sie fügen einfach die gm-editable Klasse zu dem <td> Tag in dem entsprechenden Code, hinzu. <tr> <td class= gm-editable >(Added class to <td> tag) <div class= gm-element gm-element-html > <font class= contenttext style= font-family: Verdana, Geneva, sansserif; font-size: 28px; font-weight: bold >LOGO HERE </font> </div> </td> </tr> Benutzen Sie diese gm-tags jedoch strategisch. Legen Sie keine gmelement-html Klasse für ein Bild an. Ein Bild Wrapper benötigt lediglich eine gm-element Klasse und eine gm-editable Klasse - da das Bild 15

16 nicht aus Text besteht, ist auch keine HTML-Formatierung nötig. Wenn Sie alle diese Tags an den gewünschten Stellen in Ihrer Vorlage eingefügt haben, testen Sie das Ganze noch einmal! 5. Editor Tags CSS wird in den Head Tags von Ihrer HTML benötigt Der weiter unten abgebildete CSS Ausschnitt soll zu der Seite hinzugefügt werden. Jegliche Stylings können dann hierzu verlinkt werden, da dies sogenannte Calling Tags sind, welche für den Editor genutzt werden. NB: Nutzen Sie diese Styles in Verbindung mit Ihren Responsive Style Media Queries etc. NB: Wenn Sie ältere Styles nutzen, achten Sie darauf, diese besonders zu verstärken, damit diese auch wirklich angenommen werden und Sie eine maximale Style Struktur im Editor haben. NB: Testen Sie weiter im Umfeld. 16

17 Beispiel: /*editor specific styles start here*/ <style type= text/ss >.gm-template,.gm-template p,.gm-template a,.gm-template span {font-family:arial,helvetica,sans-serif; font-size:14px;}.gm-template p {margin:0 0 1em 0;} </style> /*editor specific styles ends here*/ Klassen/Tags, die in HTML benutzt werden Die folgenden Tags/Klassen haben alle verschiedene Funktionen, die für die Funktionalität des Editors von Bedeutung sind. Wichtig dabei ist, dass diese Klassen zu dem <td> Tag hinzugefügt, sowie zusätzlich in die <td> </td> als <div> Tag eingepflegt werden. Insgesamt gibt es 4 Tags, wie Sie unten sehen können. Tags:.gm-template & swatch count: Dieses Element umschließt den ganzen Newsletter als eine <div class> und mit dieser Klasse werden die swatch values hinzugefügt. 17

18 Beispiel: <div class= gm-template data-color- swatches= [ Black, White, #1E90FF, #00008B, #778899, #4682B4, Red ] > Content goes here </div>.gm-editable Dieses Tag übermittelt dem Editor die Nachricht, dass Funktionen verfügbar gemacht werden müssen, wie zum Beispiel die Drag and Drop Funktion oder dass ein Inhaltsblock gelöscht oder dupliziert werden soll etc. Beispiel: <tr> <td class= gm-editable > <div class= gm-element gm-element-html > <font class= contenttext style= font-family: Verdana, Geneva, sans-serif; font-size: 28px; ont-weight: bold >LOGO HERE </font> </div> </td> </tr>.gm-element Auch dieses Tag lässt den Editor Funktionen verfügbar machen, jedoch mit der Möglichkeit, dies an ein anderes e.g. editable zu richten. 18

19 Beispiel: <tr> <td class= gm-editable > <div class= gm-element gm-element-html > <font class= contenttext style= font-family: Verdana, Geneva, sans-serif; font-size: 28px; font-weight: bold >LOGO HERE </font> </div> </td> </tr>.gm-element-html Dieses Tag erlaubt dem Nutzer den Inhalt des Newsletters zu ändern. In der Regel geht es dabei um ein <td> Tag, welches Text oder Links enthält. Beispiel: <tr> <td class= gm-editable > <div class= gm-element gm-element-html > <font class= contenttext style= font-family: Verdana, Geneva, sans-serif; font-size: 28px; font-weight: bold >LOGO HERE </font> </div> </td> </tr> 19

20 Die zuvor erläuterten Tags können als Kombination bestehend aus maximal zwei Klassen pro <td> oder <div> Tag, genutzt werden. Zusätzlich können diese Klassen auch mit Ihren gängigen Inline-Styles für Klienten hinzugefügt werden. Denken Sie stets daran <div> Tags hinzuzufügen, um diese einzunisten. 6. Fazit Die Techniken und Informationen in dieser Toolbox werden in Zusammenhang von HTML und CSS Grundlagen- sowie bewährten Praktiken verwendet. Testen Sie Ihre Vorlage Schritt für Schritt, denn es kann immer vorkommen dass sich Rechtschreibfehler einschleichen. Denken Sie daran, dass jedes Layout unterschiedlich ist und Strategie und Planung beim Erstellen und Gestalten eines Codes daher sehr wichtig sind. 20

21 7. Spickzettel gm-template - Diese Klasse MUSS im ersten DOM Element in der Vorlage eingefügt werden (nach dem Style Element) - zudem ist sie mit einem <div> Tag definiert, welches den ganzen Newsletter umschließt. gm-editable - Eine veränderbare Box, welche Drops von einen Gm- Element annimmt - dadurch kann das Element von der Funktionen Gebrauch machen, die der Editor anbietet. gm-element - Alle veränderbaren Elemente müssen diese Basis Klasse haben - denn diese Funktion aktiviert das Element. gm-element-html - Erlaubt HTML Bearbeitung-Tool - der Nutzer kann kann dadurch den Inhalt in speziellen Inhaltsblöcken bearbeiten. data-color-swatches= [ Black, White, #1E90FF, #00008B, # , #4682B4, Red ] > - wird genutzt um Newsletter für Editor Funktionalitäten zugänglich zu only screen and (max-width: 320px) - Abfrage für dynamische Endgeräte. body[yahoo].devicewidth { width:280px!important; } - CSS geht sicher, dass zukünftige Breiten auf mobilen Endgeräten wie gewünscht dargestellt werden, dies funktioniert in Verbindung mit dem Viewpoint body[yahoo].center { text-align: center!important; } - CSS Klasse um 21

22 durchzusetzen, dass der Text mittig (enter-alignment) auf dem Endgerät dargestellt wird. body[yahoo].footerlinks { width:32%; margin-bottom:40px; } - dieses Tag erzeugt ein flüssiges Layout. Indem % statt px für die Breite genutzt wird, wird das Layout responsive. <meta name = viewport content = width = device-width > - wird ebenfalls für responsive Design genutzt, in dem vom Ausgangspunkt die Breite des Endgeräts automatisch erkannt wird. <meta name= viewport content= width = 320 > - wird ebenfalls für responsive Design genutzt, damit die Breite des Endgeräts vom Ausgangspunkt festgelegt werden kann. img, table { max-width: 320px; } - Nicht nur die Bildschirm-Breite für das Endgerät kann auf 320 px festgelegt werden, auch Bilder oder Tabellen können mit Hilfe von CSS Tags eine maximale Größe zugeordnet bekommen..mobile_hidden { display: none; } - Falls Sie Elemente auf Ihrer Hauptseite haben, die in der mobilen Ansicht nicht erscheinen sollen, fügen Sie einfach CSS Tags mit display to none für eben diese Elemente hinzu..readmsgbody { width: 100%; background-color: #ffffff; } - Hotmail Style lässt die Breite der äußeren Tabelle zu 100% erscheinen, damit Hintergrundfarbe und Ausrichtung wiederhergestellt werden können. 22

Typo & Layout CHRISTOPH RAUSCHER

Typo & Layout CHRISTOPH RAUSCHER Typo & Layout CHRISTOPH RAUSCHER Typo & Layout CHRISTOPH RAUSCHER Interface Design, Berlin www.christowski.de mail@christowski.de ? WORUM ES HEUTE GEHT Schrift & Buchstaben Texte & Inhalte Layout & Grundwissen

Mehr

Responsive Webdesign

Responsive Webdesign ebusiness Praxistag Thüringen 2014 Responsive Webdesign BASISWISSEN UND MÖGLICHKEITEN DER UMSETZUNG Maik Grunitz Geschäftsführer Forward Marketing GbR Inhalte 1. Warum Responsive Design? 2. Geschichte

Mehr

Beispiel-Formulare für das SEPA-Firmenlastschrift-Mandat Grundlage: SEPA-Firmenlastschrift, Regelwerk Version 1.2

Beispiel-Formulare für das SEPA-Firmenlastschrift-Mandat Grundlage: SEPA-Firmenlastschrift, Regelwerk Version 1.2 Z E N T R A L E R K R E D I T A U S S C H U S S MITGLIEDER: BUNDESVERBAND DER DEUTSCHEN VOLKSBANKEN UND RAIFFEISENBANKEN E.V. BERLIN BUNDESVERBAND DEUTSCHER BANKEN E.V. BERLIN BUNDESVERBAND ÖFFENTLICHER

Mehr

M U S T E R G M B H, R O S E N W E G 2, 00000 IR G E N D W O. Gläubiger-Identifikationsnummer DE99ZZZ05678901234 Mandatsreferenz 66443

M U S T E R G M B H, R O S E N W E G 2, 00000 IR G E N D W O. Gläubiger-Identifikationsnummer DE99ZZZ05678901234 Mandatsreferenz 66443 M U S T E R G M B H, R O S E N W E G 2, 00000 IR G E N D W O Mandatsreferenz 66443 SEPA-Lastschriftmandat Ich ermächtige die Muster GmbH, E INM ALIG EINE ZAHLUNG von meinem Konto mittels Lastschrift einzuziehen.

Mehr

1.1 SEPA-Lastschriftmandat als separates Formular

1.1 SEPA-Lastschriftmandat als separates Formular Seite 4 von 13 1.1 SEPA-Lastschriftmandat als separates Formular 1.1.1 Standardfall einer wiederkehrenden Lastschrift Mandatsreferenz 987543CB2 SEPA-Lastschriftmandat Ich ermächtige die Muster GmbH, Zahlungen

Mehr

2 SEPA-Lastschriftmandat als separates Formular

2 SEPA-Lastschriftmandat als separates Formular 2 SEPA-Lastschriftmandat als separates Formular 2.1 Standardfall einer wiederkehrenden Lastschrift M U S T E R G M B H, R O S E N W E G 2, 0 0 0 0 0 I R G E N D W O Mandatsreferenz 987 543 CB2 SEPA-Lastschriftmandat

Mehr

Mobile UX Konzepte: Wie man vermeidet, vom User gehasst zu werden. Johannes Fahrenkrug @jfahrenkrug springenwerk.com

Mobile UX Konzepte: Wie man vermeidet, vom User gehasst zu werden. Johannes Fahrenkrug @jfahrenkrug springenwerk.com Mobile UX Konzepte: Wie man vermeidet, vom User gehasst zu werden Johannes Fahrenkrug @jfahrenkrug springenwerk.com : t, u Johannes Fahrenkrug @jfahrenkrug springenwerk.com Was User hassen 10 Wege, nicht

Mehr

GUIDELINE. Variante 1 auf Basis des VMI-Template Baukastens 2

GUIDELINE. Variante 1 auf Basis des VMI-Template Baukastens 2 Standalone- E-Mail-Marketing mit VMI 2 Anlieferung 5 Variante 1 auf Basis des VMI-Template Baukastens 2 Ihre Vorteile 3 Anlieferung 3 Abstimmung / Vorlaufzeit 3 Unsere Leistung 3 Variante 2 auf Basis eines

Mehr

Fünf-Minuten

Fünf-Minuten <div> Anlage mit KompoZer Fünf-Minuten Anlage mit KompoZer Fabien Cazenave (Kazé), KompoZer entwickler. Warum statt ? Ertes Layout «from scratch» Neue Seite erstellen 5. 6. 7. 8. Menü-Listen einfügen Erstes

Mehr

Beispiel-Formulare für das SEPA-Firmenlastschrift-Mandat Grundlage: SEPA-Firmenlastschrift, Regelwerk Version 1.2

Beispiel-Formulare für das SEPA-Firmenlastschrift-Mandat Grundlage: SEPA-Firmenlastschrift, Regelwerk Version 1.2 Z E N T R A L E R K R E D I T A U S S C H U S S MITGLIEDER: BUNDESVERBAND DER DEUTSCHEN VOLKSBANKEN UND RAIFFEISENBANKEN E.V. BERLIN BUNDESVERBAND DEUTSCHER BANKEN E.V. BERLIN BUNDESVERBAND ÖFFENTLICHER

Mehr

Responsive Webdesign. IHK-Arbeitskreis Software. Prof. Dr. Manfred Wojciechowski 18.02.2014

Responsive Webdesign. IHK-Arbeitskreis Software. Prof. Dr. Manfred Wojciechowski 18.02.2014 IHK-Arbeitskreis Software Prof. Dr. Manfred Wojciechowski 18.02.2014 Aufbau Vorstellung Responsive Webdesign Motivation Technologien Frameworks 2 Vorstellung Zur Person 1991 1996: Studium Informatik an

Mehr

Z E N T R A L E R K R E D I T A U S S C H U S S

Z E N T R A L E R K R E D I T A U S S C H U S S Z E N T R A L E R K R E D I T A U S S C H U S S MITGLIEDER: BUNDESVERBAND DER DEUTSCHEN VOLKSBANKEN UND RAIFFEISENBANKEN E.V. BERLIN BUNDESVERBAND DEUTSCHER BANKEN E.V. BERLIN BUNDESVERBAND ÖFFENTLICHER

Mehr

Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK

Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel XDK und dem Responsive Webdesign vertraut. Es wird

Mehr

Responsive Webdesign

Responsive Webdesign Responsive Webdesign Anlass sind 2 Probleme: 1. Darstellung der HU-Homepage auf mobilen Geräten ist nicht optimal (Überprüfung der Anzeige mit Strg+Shift+M oder Simulatoren www.responsinator.com) 2. Summe

Mehr

Beispiel-Formulare. für das SEPA-Firmenlastschrift-Mandat. Grundlage: Regelwerk für die SEPA-Firmen-Lastschrift. Berlin, 20.

Beispiel-Formulare. für das SEPA-Firmenlastschrift-Mandat. Grundlage: Regelwerk für die SEPA-Firmen-Lastschrift. Berlin, 20. Beispiel-Formulare für das SEPA-Firmenlastschrift-Mandat Grundlage: Regelwerk für die SEPA-Firmen-Lastschrift Berlin, 20. Juli 2012 Das Dokument beschreibt die Nutzung der SEPA-Firmen-Lastschrift und des

Mehr

Responsive Web Design

Responsive Web Design Responsive Web Design mit APEX Theme 25 Christian Rokitta APEX UserGroup NRW Treffen 20.01.2014 Oracle DB & APEX Entwickler (selbstständig) Deutschland ( 1996) Niederlanden ( 1996) themes4apex: APEX UI

Mehr

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG Von Markus Stauffiger / 4eyes GmbH STRUKTUR UND ZIELE DES HEUTIGEN TAGES Repetition CSS Grundlagen CSS Eigenschaften Wie komme

Mehr

Leitfaden Adobe Premiere export - Pro Tools import

Leitfaden Adobe Premiere export - Pro Tools import LOREM IPSUM Leitfaden Adobe Premiere export - Pro Tools import DOMINIK DI ROSA KAPITEL 1 Adobe Premier export Man kann alle aktiven Audiospuren aus einer gesamten Sequenz von Premiere Pro in eine OMF-Datei

Mehr

Seite 2 von 13. Inhalt

Seite 2 von 13. Inhalt Beispiel-Formulare für das SEPA-Lastschriftmandat und das Kombimandat sowie Beispielschreiben zur Umstellung auf das SEPA-Basis-Lastschriftverfahren Grundlage: Regelwerk für die SEPA-Basis-Lastschrift

Mehr

Richtlinie zur Markenidentität 2015

Richtlinie zur Markenidentität 2015 Richtlinie zur Markenidentität 2015 DE Bild: David Lliff EVP-Fraktion im Europäischen Parlament Rue Wiertz 60 1047 Brüssel, Belgien Redakteur Inhaltsverzeichnis Einleitung... 2 Grafische Kohärenz... 2

Mehr

Mini-Dokumentation zur Bearbeitung der Website massweiler.de

Mini-Dokumentation zur Bearbeitung der Website massweiler.de Mini-Dokumentation zur Bearbeitung der Website massweiler.de 10. März 2015 Die Website massweiler.de Die Website massweiler.de wird mit dem Content Management System (CMS) Joomla betrieben. Joomla ist

Mehr

Aufbau einer HTML Seite:

Aufbau einer HTML Seite: 1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,

Mehr

Das Favicon. Kleines Bild große Wirkung. Langner Marketing Unternehmensplanung Metzgerstraße 59 72764 Reutlingen

Das Favicon. Kleines Bild große Wirkung. Langner Marketing Unternehmensplanung Metzgerstraße 59 72764 Reutlingen Kleines Bild große Wirkung Stand Mai 2015 Langner Marketing Unternehmensplanung Metzgerstraße 59 72764 Reutlingen T 0 71 21 / 2 03 89-0 F 0 71 21 / 2 03 89-20 www.langner-beratung.de info@langner-beratung.de

Mehr

Publizieren im Internet

Publizieren im Internet Publizieren im Internet Eine eigene Homepage erstellen Teil 2 Margarita Esponda esponda@inf.fu-berlin.de Ein Bild als Hintergrund Webseite mit einen Bild als Hintergrund

Mehr

AdOps Technische Spezifikationen

AdOps Technische Spezifikationen AdOps Technische Spezifikationen HTML5-Werbemittel (Desktop) Bei der Verwendung von Redirects müssen diese Spezifikationen nicht beachtet werden. Physische Anlieferung von HTML5-Werbemitteln + Trackings.

Mehr

Erstellen eines HTML-Templates mit externer CSS-Datei

Erstellen eines HTML-Templates mit externer CSS-Datei Erstellen eines HTML-Templates mit externer CSS-Datei Eigenschaften der Lösung Menü mit 2 Ebenen ohne Bilder, Menü besteht aus Text (Links) Durch CSS kann das Menü aber auch die Seite angepasst werden

Mehr

Visual Web Developer Express Jam Sessions

Visual Web Developer Express Jam Sessions Visual Web Developer Express Jam Sessions Teil 1 Die Visual Web Developer Express Jam Sessions sind eine Reihe von Videotutorials, die Ihnen einen grundlegenden Überblick über Visual Web Developer Express,

Mehr

Tipps und Tricks. für die PDF-Präsentation

Tipps und Tricks. für die PDF-Präsentation Tipps und Tricks für die PDF-Präsentation Um die Wirkung der einzelnen Punkte sehen zu können, muss die Präsentation zuerst heruntergeladen und dann mit folgenden Einstellungen im Adobe Acrobat Reader

Mehr

Health made in Germany The export initiative for Germany s health care industry and its German-Israeli dialogue on Biomanufacturing

Health made in Germany The export initiative for Germany s health care industry and its German-Israeli dialogue on Biomanufacturing Chris Schmidt - istockphoto Health made in Germany The export initiative for Germany s health care industry and its German-Israeli dialogue on Biomanufacturing Dr. Tilo Mandry Tel Aviv - November 23, 2011

Mehr

Hypertext Markup Language (HTML) Stefan Rothe, Thomas Jampen

Hypertext Markup Language (HTML) Stefan Rothe, Thomas Jampen Hypertext Markup Language (HTML) Stefan Rothe, Thomas Jampen 2013 09 13 Rechtliche Hinweise Dieses Werk von Stefan Rothe steht unter einer Attribution-NonCommercial-ShareAlike 3.0 License. Zudem verzichtet

Mehr

Einführung in die Cross-Plattform Entwicklung Das Intel App Framework

Einführung in die Cross-Plattform Entwicklung Das Intel App Framework Einführung in die Cross-Plattform Entwicklung Das Intel App Framework Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel App Framework vom Intel XDK vertraut. Es wird Schritt für Schritt

Mehr

Gliederung. Responsive Design Begriffserklärung und Übersicht. Frameworks Einführung in HTML / CSS Frameworks.

Gliederung. Responsive Design Begriffserklärung und Übersicht. Frameworks Einführung in HTML / CSS Frameworks. Gliederung Responsive Design Begriffserklärung und Übersicht. Frameworks Einführung in HTML / CSS Frameworks. Präsentationsplattform Vorstellung der Präsentationsplattform Setzkasten. 1 / 14 Responsive

Mehr

Interface-Optimierung bei mobilen Endgeräten

Interface-Optimierung bei mobilen Endgeräten Interface-Optimierung bei mobilen Endgeräten Darauf sollte man achten Darstellung über CSS anpassen Durch optimierte Breiten kann man sehr einfach für Mobiltelefon oder ipad optimierte Seiten ausliefern.

Mehr

Seminar DWMX 2004. DW Session 004

Seminar DWMX 2004. DW Session 004 Seminar DWMX 2004 DW Session 004 Eigene Site aufbauen Aufbau einer persönlichen Site: Auswahl einer bestimmten Dateiorganisation Statische HTML Site Vorlagenbasierte Site Framebasierte Site Erstellen der

Mehr

Selbständige Projektarbeit 2008. Drogensucht. Kurzes Glück, langes Leiden. Anja Neuhaus Oberstufenzentrum Stockhorn Konolfingen. März 2008, Klasse s9b

Selbständige Projektarbeit 2008. Drogensucht. Kurzes Glück, langes Leiden. Anja Neuhaus Oberstufenzentrum Stockhorn Konolfingen. März 2008, Klasse s9b Selbständige Projektarbeit 2008 Drogensucht Kurzes Glück, langes Leiden Anja Neuhaus Oberstufenzentrum Stockhorn Konolfingen März 2008, Klasse s9b Drogensucht Selbständige Projektarbeit im Rahmen des Abschlussprojektes

Mehr

Slices und Rollover für die Startseite einer Bildergalerie

Slices und Rollover für die Startseite einer Bildergalerie Slices und Rollover für die Startseite einer Bildergalerie Die größte Frage bei einer Webseite ist es, auf ggf. viele Informationen von der relativ kleinen Fläche eines Bildschirmes zu verweisen. Dabei

Mehr

This manual cannot be redistributed without permission from joomla-monster.com or vorlagenstudio.de

This manual cannot be redistributed without permission from joomla-monster.com or vorlagenstudio.de This manual cannot be redistributed without permission from joomla-monster.com or vorlagenstudio.de Visit the official website vorlagenstudio.de of this Joomla template and other thematic and high quality

Mehr

Workshop I. Technische Differenzierung mobiler Kommunikationslösungen am Beispiel NPO/NGO Kommunikation. 7. Juni 2011

Workshop I. Technische Differenzierung mobiler Kommunikationslösungen am Beispiel NPO/NGO Kommunikation. 7. Juni 2011 Workshop I Technische Differenzierung mobiler Kommunikationslösungen am Beispiel NPO/NGO Kommunikation 7. Juni 2011 Übersicht è Native Apps è Web-Apps è Mobile Websites è Responsive Design Mobile Kommunikation

Mehr

Skyfillers Hosted SharePoint. Kundenhandbuch

Skyfillers Hosted SharePoint. Kundenhandbuch Skyfillers Hosted SharePoint Kundenhandbuch Kundenhandbuch Inhalt Generell... 2 Online Zugang SharePoint Seite... 2 Benutzerpasswort ändern... 2 Zugriff & Einrichtung... 3 Windows... 3 SharePoint als

Mehr

Was ist Quark DesignPad?

Was ist Quark DesignPad? U S E R G U I D E Was ist Quark DesignPad? Quark DesignPad ist eine spannende neue App, mit der Sie Broschüren, Display-Ads, Flyer, Grußkarten, Newsletter, Poster und mehr auf Ihrem ipad erstellen können.

Mehr

Einführung in die Webentwicklung

Einführung in die Webentwicklung Einführung in die Webentwicklung Mit HTML5 und CSS3 auf dem Weg zur eigenen Website Kerstin Blumenstein EXPOSEE Dieses Script beinhaltet alle in dem Kurs durchgenommenen - Teile mit Erklärungen von Tag

Mehr

Spamschutz bei TYPO3. von Bernd Warken bei Fa. Netcos AG

Spamschutz bei TYPO3. von Bernd Warken bei Fa. Netcos AG Spamschutz bei TYPO3 von Bernd Warken bei Fa. Netcos AG Kapitel 0: Einleitung 3 0.1 Vorwort 3 0.2 Lizenz 3 Kapitel 1: Aktivierung und Konfiguration 4 1.1 config.spamprotectemailaddresses 4 1.2 config.spamprotectemailaddresses_atsubst

Mehr

Süddeutsche Zeitung als digitale Ausgabe

Süddeutsche Zeitung als digitale Ausgabe Süddeutsche Zeitung als digitale Ausgabe Technische Spezifikationen für SZ-App- Anzeigen, Stand: 27.03.2015 Inhaltsübersicht 1. Einleitung und Anlieferungstermine S. 1 2. Anzeigen 2.1. Bildanzeigen statisch

Mehr

Designänderungen mit CSS und jquery

Designänderungen mit CSS und jquery Designänderungen mit CSS und jquery In der epages-administration gibt es in den Menüpunkten "Schnelldesign" und "Erweitertes Design" umfangreiche Möglichkeiten, das Design der Webseite anzupassen. Erfahrene

Mehr

Kapitel 1 2 14. Februar 2010

Kapitel 1 2 14. Februar 2010 1 14. Februar 2010 Kapitel 1 2 14. Februar 2010 E-BusinessMarketing KPI MarketingOnline KPI Marketing Web Web Assessment Usability Benchmarking Controlling Controlling Benchmarking Usability E-Business

Mehr

Newsletter mit TYPO3. TYPO3 Usergroup Bodensee #3tsee 13. Dezember 2012 - Singen (D) Lars Messmer - comsolit AG

Newsletter mit TYPO3. TYPO3 Usergroup Bodensee #3tsee 13. Dezember 2012 - Singen (D) Lars Messmer - comsolit AG Newsletter mit TYPO3 TYPO3 Usergroup Bodensee #3tsee 13. Dezember 2012 - Singen (D) Lars Messmer - comsolit AG www.comsolit.com Newsletter Version: 1 Seite 1 / 20 Inhalt 1. Sinnvoller Einsatz eines Newsletters

Mehr

Übung zur Vorlesung Digitale Medien. Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012

Übung zur Vorlesung Digitale Medien. Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012 Übung zur Vorlesung Digitale Medien Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012 1 Pfadangaben (1) Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL:

Mehr

Die eigene Website. Zusatzkapitel CSS mobile Geräte & Ausdruck

Die eigene Website. Zusatzkapitel CSS mobile Geräte & Ausdruck Die eigene Website Zusatzkapitel CSS mobile Geräte & Ausdruck Im Folgenden finden Sie einige Zusatztipps zu Kapitel 6 des Buchs Die eigene Website. Mehr Infos zum Buch auf der Website zum Buch. CSS für

Mehr

Signatur mit Formatierung

Signatur mit Formatierung Bedienungstip: Signatur mit Formatierung Seite 1 Signatur mit Formatierung Es können Signaturen hinterlegt werden, die beim Erstellen von Nachrichten automatisch angehängt werden. Das ist sehr praktisch,

Mehr

Inhalt. Hintergrund HTML CSS. JavaScript und das Document Object Model

Inhalt. Hintergrund HTML CSS. JavaScript und das Document Object Model Andreas Heß Inhalt Hintergrund HTML CSS JavaScript und das Document Object Model Netz-Protokolle Schichtenmodell OSI DoD Beispiele 7 Anwendung 6 Darstellung 5 Sitzung Anwendungen HTTP, HTTPS, SMTP,

Mehr

Software EMEA Performance Tour 2013. 17.-19 Juni, Berlin

Software EMEA Performance Tour 2013. 17.-19 Juni, Berlin Software EMEA Performance Tour 2013 17.-19 Juni, Berlin Effektives Projekt und Portfolio Management Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject

Mehr

Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten.

Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten. Benutzerhandbuch Gästebuch Software - YellaBook v1.0 http://www.yellabook.de Stand: 01.08.2012 Inhalt 1 Funktionen... 3 2 Systemanforderungen... 4 3 Installation... 4 4 Einbinden des Gästebuchs... 5 5

Mehr

Hintergrundgrafik im Default Body

Hintergrundgrafik im Default Body Hintergrundgrafik im Default Body In unserem Beispiel legen wir eine Hintergrundgrafik in den Default Body des Templates. Das Logo und die Navigation werden dann transparent über das Bild gelegt. Öffnen

Mehr

Kurzeinführung in HTML

Kurzeinführung in HTML Kurzeinführung in HTML (Grundlage: SelfHTML: http://de.selfhtml.org/) Autor: Jan-Willem Waterböhr (webmaster-geschichte@uni-bielefeld.de) Stand: 23.12.2011 Inhaltsverzeichnis Kurzeinführung in HTML...1

Mehr

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ADC 106 W 29 th St, New York, NY United States of America ADC Awards Saison 2015 is offiziell eröffnet! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Diese incididunt

Mehr

Das Favicon. Kleines Bild große Wirkung. Langner Marketing Unternehmensplanung Metzgerstraße 59 72764 Reutlingen

Das Favicon. Kleines Bild große Wirkung. Langner Marketing Unternehmensplanung Metzgerstraße 59 72764 Reutlingen Kleines Bild große Wirkung Stand April 2016 Langner Marketing Unternehmensplanung Metzgerstraße 59 72764 Reutlingen T 0 71 21 / 2 03 89-0 F 0 71 21 / 2 03 89-20 www.langner-beratung.de info@langner-beratung.de

Mehr

Formatierungsmöglichkeiten

Formatierungsmöglichkeiten Formatierungsmöglichkeiten Text, den Sie in ein Formularfeld eingeben, können Sie auf vielfältige Weise formatieren. Das kann insbesondere beim Erstellen von Materialien sinnvoll sein, aber auch, um z.b.

Mehr

Die wichtigsten HyperTextMarkupLanguage tags 1(6)

Die wichtigsten HyperTextMarkupLanguage tags 1(6) Die wichtigsten HyperTextMarkupLanguage tags 1(6) HTML ist entgegen vielen Gerüchten keine Programmiersprache, sondern lediglich ein Hilfsmittel um Text und Bild zu formatieren, welche in einem Browser

Mehr

Crashkurs Webseitenerstellung mit HTML

Crashkurs Webseitenerstellung mit HTML Ziel Crashkurs Webseitenerstellung mit HTML Das Ziel dieser Einführung in die Webseitenerstellung ist das Kennenlernen der Seitenbeschreibungssprache HTML und die Nutzung für einfach strukturierte Seiten,

Mehr

Easy Mobile Homepage. Nützliche Tipps für die Nutzung der Software. 2011 Die Software ist urheberrechtlich geschützte Freeware - all rights reserved

Easy Mobile Homepage. Nützliche Tipps für die Nutzung der Software. 2011 Die Software ist urheberrechtlich geschützte Freeware - all rights reserved Easy Mobile Homepage Nützliche Tipps für die Nutzung der Software Danke für Ihr Interesse! Danke für Ihr Interesse an unserer neuen Software und wir freuen uns darüber, dass Sie die Tutorials angefordert

Mehr

Mitschrift HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.

Mitschrift HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01. 1. Stunde Mitschrift HTML Bildbearbeitung in Hinblick auf HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.jpg Verstehen des Unterschiedes

Mehr

Digitale Medien. Übung

Digitale Medien. Übung Digitale Medien Übung HTML Heute Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält die Struktur eines Dokuments und teilweise die Darstellung. ich bin eine Überschrift

Mehr

Herbert Steurer. Service und Reparatur von Kellereimaschinen

Herbert Steurer. Service und Reparatur von Kellereimaschinen Seit der Firmengründung im Jahr 1999 bin ich stets bemüht auf die Wünsche und Bedürfnisse meiner Kunden speziell einzugehen. aller Art - aber auch Service und Wartungsarbeiten werden von mir übernommen.

Mehr

PRAXISBUTLER ANPASSUNG DER VORLAGEN

PRAXISBUTLER ANPASSUNG DER VORLAGEN Praxisbutler Anpassung der Vorlagen 1 PRAXISBUTLER ANPASSUNG DER VORLAGEN Die Vorlagen werden hauptsächlich in den Bereichen Klienten und Fakturierung benutzt. Die Anpassung dieser Vorlagen ist wichtig,

Mehr

HTL-Website. TYPO3- Skriptum II. Autor: RUK Stand: 02.06.2010 Gedruckt am: - Version: V0.1 Status: fertig. Qualitätsmanagement

HTL-Website. TYPO3- Skriptum II. Autor: RUK Stand: 02.06.2010 Gedruckt am: - Version: V0.1 Status: fertig. Qualitätsmanagement HTL-Website TYPO3- Skriptum II Autor: RUK Stand: 02.06.2010 Gedruckt am: - Version: V0.1 Status: fertig Qualitätsmanagement Erstellt Geprüft Freigegeben Name RUK Datum 02.06.2010 Unterschrift Inhaltsverzeichnis

Mehr

TIMERATE AG Tel 044 422 65 15 Falkenstrasse 26 timerate@timerate.ch 8008 Zürich www.timerate.ch. Joomla Templates Kursunterlagen

TIMERATE AG Tel 044 422 65 15 Falkenstrasse 26 timerate@timerate.ch 8008 Zürich www.timerate.ch. Joomla Templates Kursunterlagen TIMERATE AG Tel 044 422 65 15 Falkenstrasse 26 timerate@timerate.ch 8008 Zürich www.timerate.ch Joomla Templates Kursunterlagen Ordnerstruktur in Joomla Inhaltsverzeichnis Ordnerstruktur in Joomla... 3

Mehr

Flexibles HTML. christian.cueni@bfh.ch

Flexibles HTML. christian.cueni@bfh.ch Flexibles HTML christian.cueni@bfh.ch Inhalt Desktop & Mobile Strategien Responsive Design HTML5 Feature Detektion mit Modernizr Desktop & Mobile Strategien Wie bringe ich mobile Nutzer zum (UI) optimierten

Mehr

Manual WordPress. Was ist WordPress?

Manual WordPress. Was ist WordPress? Was ist WordPress? Seite: 1 WordPress ist ein System zur Verwaltung der Inhalte einer Website. Es bietet sich besonders zum Aufbau und Pflege eines Weblogs (Onlinetagebuch) an, da es erlaubt, jeden Beitrag

Mehr

Online-Publishing mit HTML und CSS für Einsteigerinnen

Online-Publishing mit HTML und CSS für Einsteigerinnen Online-Publishing mit HTML und CSS für Einsteigerinnen Dipl. Math. Eva Dyllong, Universität Duisburg Dipl. Math. Maria Oelinger, spirito GmbH IF MYT 07 2002 CSS-Einführung Vorschau CSS Was ist das? Einbinden

Mehr

Meine erste Homepage - Beispiele

Meine erste Homepage - Beispiele Meine erste - Beispiele 1. Beispiel meine Willkommen auf meiner Befehle nicht über Hier ist ein Senior, der noch fit für's Internet ist. Probieren wir

Mehr

CloudMatic V1.0. Inhalt

CloudMatic V1.0. Inhalt CloudMatic V1.0 Inhalt Einleitung... 2 CCUs hinzufügen... 3 meine-homematic.de... 4 Eigenes VPN... 4 View Editor... 5 Übersicht... 5 Allgemeine Einstellungen... 6 Kanäle hinzufügen... 6 Spezielle Kanäle...

Mehr

Internetseiten selbst erstellt

Internetseiten selbst erstellt Internetseiten selbst erstellt Vorüberlegungen: Übersichtsplan aller geplanten Seiten zeichnen und bereits logische Dateinamen überlegen. Inhalt der Seite Willkommen/Was gibt es zu sehen und was will ich

Mehr

Inhalt. Technische Beschreibung - MEDIA3000 NEWSLETTERMODUL-PRO

Inhalt. Technische Beschreibung - MEDIA3000 NEWSLETTERMODUL-PRO Inhalt 01. Nachrichten (Newsletter erstellen) 02. Empfänger 03. Newsletter (Gruppen anlegen) 04. Nachrichtenvorlagen 05. Mailvorlagen 06. Einstellungen 07. Steuerzeichen 08. Newsletter testen Tipps und

Mehr

Manual WordPress - ContentManagementSystem

Manual WordPress - ContentManagementSystem Was ist WordPress? WordPress ist ein ContentManagementSystem (CMS) zur Verwaltung der Inhalte einer Website. Es bietet sich besonders zum Aufbau und Pflege eines Weblogs (Online-Tagebuch) an. Funktionsschema

Mehr

Einführung Responsive Webdesign

Einführung Responsive Webdesign Einführung Responsive Webdesign Aktuelle Situation Desktop Webseiten Umsetzungen auch heute noch in den meisten Fällen Pixelbasiert JavaScript schafft Dynamik CSS schafft Trennung von Inhalt und Layout

Mehr

Ideen Visualisierung Realisation

Ideen Visualisierung Realisation Ideen Visualisierung Realisation Am Anfang steht das Wort Austausch und Dialog Lorem ipsum dolor sit amet, consectetuer Interesse elit, sed diam Planung nibh euismod tincidunt ut laoreet dolore magna aliquam

Mehr

Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes)

Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!doctype html> <html lang=de> <head> Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) name Ihres HTML-Dokumentes

Mehr

Cascading Style Sheets

Cascading Style Sheets CSS Cascading Style Sheets von Carsten Euwens CSS Vortragsgliederung Grundlagen Bedeutung Wie binde ich CSS überhaupt ein Wie weise ich Styles den einzelnen Elementen zu Was kann man damit machen Text

Mehr

Handbuch für ios 1.4 1

Handbuch für ios 1.4 1 Handbuch für ios 1.4 1 Inhaltsverzeichnis 1. Leistungsumfang... 3 1.1 Über Boxcryptor Classic... 3 1.2 Über dieses Handbuch... 4 2. Installation... 5 3. Grundfunktionen... 6 3.1. Einrichtung von Boxcryptor

Mehr

Crashkurs HTML und CSS

Crashkurs HTML und CSS Crashkurs HTML und CSS HTML und CSS Hinweis: Dieser Crashkurs liefert einen Überblick und Kriterien für die sachgerechte Verwendung von HTML und CSS. Zum Lernen, Nachschlagen und Ausprobieren verweise

Mehr

Erste Schritte mit Elvis 3 ein Beispielprojekt

Erste Schritte mit Elvis 3 ein Beispielprojekt Erste Schritte mit Elvis 3 ein Beispielprojekt Um Sie mit Elvis 3 vertraut zu machen möchten wir mit Ihnen mit diesem Kapitel ein Beispielprojekt vom ersten Aufruf von Elvis 3 bis zum Testlauf aufbauen.

Mehr

InfoSphere goes Android Hallo InfoSphere

InfoSphere goes Android Hallo InfoSphere Während des gesamten Moduls führen euch die Arbeitsblätter durch die Erstellung eurer ersten eigenen Apps. Achtet dabei einfach auf folgende Symbole, die euch kurz erklären, was das Ziel des Arbeitsblattes

Mehr

CSS. Cascading Stylesheets

CSS. Cascading Stylesheets CSS Cascading Stylesheets Themen Was sind Cascading Stylesheets? Vorteile von CSS Nachteile von CSS CSS: Versionen Regelsyntax für Stylesheets Einem HTML-Dokument Styles hinzufügen und Numerische

Mehr

Inhalte mit DNN Modul HTML bearbeiten

Inhalte mit DNN Modul HTML bearbeiten Einführung Redaktoren Content Management System DotNetNuke Inhalte mit DNN Modul HTML bearbeiten DNN Version ab 5.0 w3studio GmbH info@w3studio.ch www.w3studio.ch T 056 288 06 29 Letzter Ausdruck: 22.08.2011

Mehr

responsive-web 31.10.2012 giordano.ch Oktober 31, 2012 1

responsive-web 31.10.2012 giordano.ch Oktober 31, 2012 1 responsive-web 31.10.2012 giordano.ch Oktober 31, 2012 1 perspektiven bruno giordano. // giordano.ch online.ch Oktober 31, 2012 2 giordano.ch Oktober 31, 2012 3 www.leo.org giordano.ch Oktober 31, 2012

Mehr

Hier mal einige Tipps zum Einbau vom "Anfy" Applets. Hier die Seite von "Anfy" und zum Download des Programms: http://www.anfyteam.

Hier mal einige Tipps zum Einbau vom Anfy Applets. Hier die Seite von Anfy und zum Download des Programms: http://www.anfyteam. Hier mal einige Tipps zum Einbau vom "Anfy" Applets. Hier die Seite von "Anfy" und zum Download des Programms: http://www.anfyteam.com/... ich habe "Version 2.1" und zeige hier Bilder und Beschreibungen

Mehr

Einrichten eines News-Systems in Typo3

Einrichten eines News-Systems in Typo3 Einrichten eines News-Systems in Typo3 Generelles: tt_news ist eine der beliebtesten Erweiterungen für Typo3 und wir bereits auf vielen Sites Vorarlberger Schulen verwendet: Beispiele: http://www.vobs.at/hsl

Mehr

VideoPlus. Shopware Video-Plugin. Handbuch

VideoPlus. Shopware Video-Plugin. Handbuch VideoPlus Shopware Video-Plugin Handbuch VideoPLUS SHOPWARE PlugIn Inhaltsverzeichnis Wo erhalte ich den Code des von mir gewünschten Videos 04 Youtube MyVideo vimeo Sevenload Yahoo! Screen Netzr Allg.

Mehr

Textverarbeitung 1. 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung

Textverarbeitung 1. 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung Informatik - Text / HTML 1 Textverarbeitung 1 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung Leistungsmerkmale Textverarbeitung ist Standardsoftware - nutzerorientiert,

Mehr

Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...}

Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...} Cascading StyleSheets (CSS) Allgemein CSS (aufeinander aufbauende Stilvorlagen) wurden 1996 vom W3C standardisiert. dienen der Ergänzung strukturierter Dokumente wie HTML oder XML. Ermöglichen die Trennung

Mehr

ARCWAY Cockpit 3.4. Standardbericht und Formatvorlagen. ReadMe

ARCWAY Cockpit 3.4. Standardbericht und Formatvorlagen. ReadMe ARCWAY Cockpit 3.4 Standardbericht und Formatvorlagen ReadMe Inhaltsverzeichnis 1. Einleitung... 4 2. Format- und Berichtsvorlagen in ARCWAY Cockpit... 4 3. ARCWAY Cockpit 3.4 Standard-Berichtsvorlage...

Mehr

Multivariate Tests mit Google Analytics

Multivariate Tests mit Google Analytics Table of Contents 1. Einleitung 2. Ziele festlegen 3. Einrichtung eines Multivariate Tests in Google Analytics 4. Das JavaScript 5. Die Auswertung der Ergebnisse Multivariate Tests mit Google Analytics

Mehr

Sylvia Achenbach SAMedienberatung. Jürgen Walleneit MSH AND MORE Werbeagentur GmbH

Sylvia Achenbach SAMedienberatung. Jürgen Walleneit MSH AND MORE Werbeagentur GmbH Auswahl und Realisierung sinnvoller online Werbemittel und Social Media am Beispiel Referenten: SAMedienberatung Eupener Str. 135-137, 50933 Köln 0221/4924-884, E-Mail, samedienberatung.de Jürgen Walleneit

Mehr

Projektarbeit Multimedia-Technologien Erstellung eines E-Learnings zum Online-Tool WireWax

Projektarbeit Multimedia-Technologien Erstellung eines E-Learnings zum Online-Tool WireWax Projektarbeit Multimedia-Technologien Erstellung eines E-Learnings zum Online-Tool WireWax 5.11.2015 bis 21.01.2016 Carolin Schneider (Matrikelnummer: 40127) Inhaltsverzeichnis Ziel des Projekts... 3 Projektverlauf...

Mehr

Selektoren in CSS. HTML/CSS 21. November 2013 E1. 1. Beispiel: Kinder und Enkel

Selektoren in CSS. HTML/CSS 21. November 2013 E1. 1. Beispiel: Kinder und Enkel Selektoren in CSS 1. Beispiel: Kinder und Enkel universal Selektor body { font family: sans serif; color : #666; div { border:

Mehr

WEBSITE ERSTELLEN mit DREAMWEAVER MX

WEBSITE ERSTELLEN mit DREAMWEAVER MX WEBSITE ERSTELLEN mit DREAMWEAVER MX Inhalt: WEBSITE ERSTELLEN mit DREAMWEAVER MX... 1 Neue Site anlegen... 2 Neue HTML-Seite erstellen... 2 Seiteneigenschaften... 2 Webseite speichern... 2 CSS (Cascading

Mehr

Mobile (R)evolution - Mobile Fusion? NIX Solution

Mobile (R)evolution - Mobile Fusion? NIX Solution Mobile (R)evolution - Mobile Fusion? NIX Solution Praxistipps zum Einsatz von Newsletter-Technologien Ein Fachbeitrag von Katrin Krenn, Team Lead Service bei Commerce Plus und Leiterin der Task Force Newsletter

Mehr

Vorlagen in MediaWiki

Vorlagen in MediaWiki Vorlagen in MediaWiki Dieses Handout beschreibt, wie Sie Vorlagen in Ihr MediaWiki-System einbinden können. 1. Was sind Vorlagen? Eine Vorlage ist ein vorgefertigter Textbaustein, der in einen Artikel

Mehr

Schiller-Gymnasium Hof 20.12.2004

Schiller-Gymnasium Hof 20.12.2004 Erstellen eines HTML-Dokumentes Zum Erstellen einer Homepage benötigen wir lediglich einen Editor. Zum Ansehen der fertigen Site benötigen wir wir natürlich auch einen Browser, z.b. Firefox oder Netscape

Mehr