Vielseitige Möglichkeiten für Mobiles Surfen

Immer mehr Menschen nutzen die Möglichkeit mit dem Handy oder Notebook unabhängig vom Standort im Internet zu surfen. Handliche Geräte mit großen Displays, schnellere Übertragungsraten per UMTS und individuell zugeschnittene Tarife für die mobile Internetnutzung machen das Mobile Surfen immer interessanter und massentauglicher.

UMTS und Co. - Die Übertragungsgeschwindigkeiten

Für die Herstellung einer mobilen Verbindung mit dem Internet gibt es heute gleich mehrere Möglichkeiten. Je nach dem, welche man wählt, kann man schneller oder auch langsamer surfen. Dementsprechend sollte man auch bei der Wahl eines internetfähigen Mobilfunkgerätes darauf achten, auf welche Übertragungsart dieses zurückgreifen kann.
Die erste Möglichkeit ist hierbei GSM. GSM ist zwar am weitesten verbreitet, bietet allerdings eine vergleichsweise langsame Übertragungsgeschwindigkeit, da die Übertragung von Daten über GPRS erfolgt und dementsprechend nur eine Geschwindigkeit von knapp 54 Kilobit pro Sekunde erzeugen kann.

HTML CSS Style: Element auf ein anderes verschieben…

…, ohne dass ein störender Platzhalter zurück bleibt

Das Problem:

Sie wollen bei der HTML-Seitengestaltung ein Element über ein anderes verschieben. Das Problem dabei kann manchmal sein, dass das verschobene Bild an der ursprünglichen Stelle einen unschönen Platzhalter hinterlässt.

Zur besseren Beschreibung habe ich folgendes, an der Praxis angelehntes, Problem konstruiert: (siehe Skizzen)

In einem Element (schwarzer Rahmen) befinden sich 2 weitere Elemente, zum Beispiel ein Bild (blauer Rahmen) und ein kleines weiteres Bild (roter Rahmen).

Die beiden inneren Elemente (rot und blau) sind mittig im äußeren Element (schwarz) ausgerichtet. (Bild 1)

Das kleine Bild (zum Beispiel eine Lupe), soll jetzt auf das große Bild platziert werden.

Bekannt ist, dass dies mit der Style-Möglichkeit „position” geschehen kann. Bei dem HTML-Element, dass man verschieben möchte fügt man zum Beispiel folgendes CSS-Angabe hinzu:

style=”position: relative; left:50px; top:40px;”

Das bewirkt, dass das Element relativ zu seiner aktuellen Position um 50 Pixel nach unten und 40 Pixel nach rechts verschoben wird.

Häufig kommt es vor das man den Platz (auf Bild 2), wo sich das kleine Bild (roter Rahmen) ursprünglich befunden hatte als störend empfindet.

Wie kann man diesen Platz verschwinden lassen?

Die Lösung:

Des Rätsels Lösung ist ein sogenannter negativer Margin. Man fügt dem verschobenen Element einen negativen Abstand (margin) hinzu.

Beispiel:

Das kleine Element (roter Rahmen) hat eine Höhe von 20px. So fügt man ihm folgendes hinzu:

style=”margin-top: -20px;”

Dies bewirkt, dass der Abstand um 20 Pixel nach oben hin verkleinert wird. Somit verschwindet der störende Abstand.

Diese Lösung habe ich mit mehreren Browsern getestet.

Sie funktioniert mit: Mozilla Firefox 3.0.5, Internet Explorer (IE) 7.0, Google Chrome 1.0.153.43, Safari 3.2.1

Sie funktioniert nicht mit: Opera 9.6.3

Paypal als Zahlungslösung für den Onlineshop

Hinweis: Dies ist kein offizielles Dokument von Paypal. (www.paypal.de, www.paypal.com)

Paypal ist ein Online-Zahlungsdienstleister mit dem „kleinere” Beträge auf schnelle und einfache Art und Weise über das Internet beglichen werden können.

Paypal bietet seinen Kunden die Integration der Zahlungsabwicklung auf der eigene Website an. Dafür stehen verschiedene Möglichkeiten zur Verfügung. Entweder bindet man vorgefertigte Lösungen auf seine Seite ein, oder man programmiert die Zahlung über Schnittstelle zu Paypal.

Eine detaillierte Beschreibung ist unter https://www.paypal-deutschland.de/haendler/integration.html zu finden.

Neben der Möglichkeiten der selbstständigen Integration von Paypal in das eigene Shopsystem, können auch Lösungen von Drittanbietern verwendet werden. So gibt es zum Beispiel für viele vorhandene Shopsysteme bereits Erweiterungen mit der Integration von Paypal. Zum Beispiel gibt es für os- und xt-Commerce bereits ein PlugIn, welches die Zahlung mittels Paypal pder Kredit integriert.

Die Express Kaufabwicklung
Die Zahlungsabwicklung per Paypal wird direkt auf die eigene Website eingebunden. Das Shopsystem, die Zahlung, die Verfolgung der offenen Zahlungen, alle Schritte können mit dieser Methode voll automatisiert werden.

Paypal stellt 2 Schnittstellen für die API-Programmierung zur Verfügung:

• Name-Value-Pair-API: Hier werden festgelegte Parameter (Names) und zugehörige Variablen (Values) über HTTP ausgetauscht. Diese Programmierschnittstelle eignet sich am besten für die unkomplizierte Webentwicklung mit herkömmlichen Server-Scriptsprachen.
• SOAP-API: Daten werden hier über SOAP (Simple Object Access Protocol) ausgetauscht. Diese Programmierschnittstelle ist besonders für objektorientierte Webentwicklung geeignet.

Für die Entwicklung der Zahlungslösungen stellt Paypal sogenannte Software Development Kits (SDKs) und Beispielanwendungen für gängige Programmiersprachen zur Verfügung.

Die Standard Zahlungslösung
Bei dieser Methode wird der Nutzer zur Bezahlung auf die Paypal-Webseite weitergeleitet. Er tätigt dort seine Zahlung und wird anschließend auf die Ausgangsseite, den Shop zurück geleitet.

Die nötigen Informationen zur Bezahlung werden an Paypal übermittelt, so dass Paypal weiß, wieviel Geld vom Käufer einzubehalten ist. Dafür empfiehlt sich die Verschlüsselung der erforderlichen Daten, so dass sie, insbesondere der Preis, nicht vom Käufer oder von Dritten verändert werden können.

Mit der Standard-Zahlungslösung kann Paypal auch als Warenkorbsystem eingesetzt werden. Es können einzelne Artikel in unterschiedlichen Mengen einem Warenkorb in Paypal hinzugefügt werden. Dies ist aber nicht zwingend nötig. Es ist vollkommen ausreichend, wenn der Endbetrag an Paypal übermittelt wird und dort vom Käufer beglichen wird.

Der Käufer wird auf die Paypal-Seite weitergeleitet und tätigt dort seine Zahlung. Nach erfolgter oder abgebrochener Zahlung kehrt der Käufer auf die Shop-Seite zurück.

Es stehen noch weitere optionale Möglichkeiten zur Verfügung, die genutzt werden können. So können die Daten verschlüsselt übermittelt werden, so dass sie, insbesondere der Preis, nicht verändert werden können. Auch Informationen zur Zahlung können an die Website zurück übermittelt werden.

Ein großer Vorteil dieser Methode ist die schnelle und einfache Integration in die eigene Website. Es sind außer HTML-Kenntnisse keine weiteren Programmierkentnisse nötig.

Im Gegensatz zur API-Lösung (Express-Kaufabwicklungen) müssen mit dieser Methode die Zahlungen teilweise per Hand überwacht werden.

Test: Einbindung der Paypal-Standard-Zahlungslösung auf unsere Website
Für unseren Fall habe ich mich für die Standard-Zahlungslösung entschieden. Der Grund ist die einfache und schnelle Integration dieser Lösung. Der Nachteil ist, dass die Zahlungen teilweise manuell überwacht werden müssen. Wenn in Zukunft die Anzahl der getätigten Zahlungen über Paypal auf unserer Website enorm ansteigt, dann ist die Nutzung Express-Kaufabwicklung in Erwägung zu ziehen.

An dieser Stelle habe ich die einzelnen Schritte zusammengetragen, die nötig sind, um Paypal mit Hilfe der Standard-Zahlungslösung auf einer Webseite einzubinden.

Jetzt-Zahlen-Button
Wenn der Käufer auf der eigenen Seite seinen Warenkorb gefüllt hat, erscheint ein Button, der den Käufer zur Paypal-Seite weiterleiten lässt, auf der dann die eigentliche Zahlung durchgeführt wird. Nach der erfolgten Zahlung kehrt der Käufer wieder zurück auf die Shop-Seite.

Im Warenkorb wird ein Formular hinterlegt, dass mit allen notwendigen Daten bestückt wird. Dies sind unter anderem der Preis und die Paypal-Adresse des Verkäufers. Das Formular sieht ungefähr so aus:

<form action=”https://www.paypal.com/cgi-bin/webscr” method=”post”>

<input type=”hidden” name=”cmd” value=”_xclick”>
<input type=”hidden” name=”business” value=”verkaeufer-paypal-adresse@email.de”>
<input type=”hidden” name=”item_name” value=”Artikelkauf”>
<input type=”hidden” name=”item_number” value=”Artikelnummer”>
<input type=”hidden” name=”amount” value=”10.00″> <!– Preis →
<input type=”hidden” name=”cancel_return” value=”http://www.beispiel.de/abgebrochen.htm”>
<input type=”hidden” name=”return” value=”http://www.beispiel.de/erfolg.htm”>
<input type=”hidden” name=”cbt” value=”Weiter im Shop”> <!– Aufschrift fuer “Fertig-Button” →
<input type=”hidden” name=”cpp_header_image” value=”http://www.beiepiel.de/logo.gif”>

<!– Adresse, falls Nutzer noch kein Paypal-Account hat, werden die Daten gleich vorgetragen →
<input type=”hidden” name=”first_name” value=”Vorname”>
<input type=”hidden” name=”last_name” value=”Nachname”>
<input type=”hidden” name=”address1″ value=”Straße1″>
<input type=”hidden” name=”address2″ value=”Straße2″>
<input type=”hidden” name=”city” value=”Stadt”>
<input type=”hidden” name=”zip” value=”01234″>
<input type=”hidden” name=”country” value=”DE”>

<input type=”hidden” name=”no_shipping” value=”1″> <!– keine Lieferadresse in Paypal angeben →

<input type=”hidden” name=”currency_code” value=”EUR”>

<input type=”image” src=”https://www.paypal.com/de_DE/i/btn/x-click-but01.gif” name=”submit” alt=”Bezahlen Sie mit PayPal - schnell, einfach und sicher!”>

</form>

Eine Übersicht aller Variablen finden Sie unter: https://www.paypal.com/IntegrationCenter/ic_std-variable-ref-buy-now.html

Bei Klick auf den Zahl-Button wird der Nutzer auf die Paypal-Website weitergeleitet, um dort die Zahlung vornehmen zu können.

Ergebnis der Zahlung
Nach der Zahlung auf Paypal wird der Nutzer zum Shop zurückgeleitet. Wenn man im Paypal-Verkäufer-Account „automatische Rückleitung” und „Übertragung der Zahlungsdaten” aktiviert, kann man auf der eigenen Shopseite die ersten Informationen der Zahlung bereits auswerten. So weiß man zum Beispiel sofort, ob die Zahlung eingegangen ist, ob sie noch offen ist und den Grund, warum die Zahlung noch offen ist.

Ein Beispiel für die sofort überlieferten Daten sieht in etwa so aus: (Die Daten werden mittels der GET-Methode an die URL angehängt)

tx=54A251615R035833P                        (Transaktionsnummer)
st=Completed                                           (Zahlstatus, hier: fertig)
amt=10.00                                                (Preis)
item_number=ARTIKELNUMMER       (Artikelnummer)

Zahlungsdetails abfragen
Wenn Sie unabhängig von und nach der Bezahlung Informationen von Paypal schnell und einfach, ohne sich bei Paypal einloggen zu müssen, abrufen wollen, können Sie mit Hilfe der Transaktionsnummer den Status der Zahlung sowie weitere Informationen zur Zahlung abfragen.

Mit folgendem Formular können Informationen, unter anderem auch der Zahlstatus, zur Zahlung abgerufen werden:

<form method=post
action=”https://www.paypal.com/cgi-bin/webscr”>
<input type=”hidden” name=”cmd” value=”_notify-synch” />
Transaktionsnummer: <input type=”text” name=”tx” value=”" />
<input type=”hidden” name=”at” value=”IHRIDENTITÄTSTOKEN” />
<input type=”submit” value=”PDT” />
</form>

Die Abfrage ist auch über die GET-Methode möglich. Es muss lediglich folgende URL aufgerufen werden:

https://www.paypal.com/cgi-bin/webscr?cmd=_notify-synch&tx=TRANSAKTIONSNUMMER&at= IHRIDENTITÄTSTOKEN

Die Transaktionsnummer ist eine eindeutige Nummer, die von Paypal für die jeweilige Zahlungs-Transaktion vergeben wurden ist. Den Identitätstoken erhalten Sie von Paypal, wenn Sie im Paypal-Verkäufer-Konto „Übertragung der Zahlungsdaten” aktivieren.

Mit „Zahlungsdetails abfragen” erhält man die zum aktuellen Zeitpunkt erhältlichen Daten.

Die Liste der zurückgelieferten Variablen und der möglichen Werte finden Sie unter: http://www.paypal.com/de_DE/html/IntegrationCenter/ic_ipn-pdt-variable-reference.html

PayPal-Logos
Paypal bietet auf der Webseite Logos zum Herunterladen und Verwenden auf der eigenen Internetseite an.

Bitte berücksichtigen Sie bei der Einbindung der Logos die Richtlinien zur Logo-Integration.

• Es dürfen nur die von Paypal vorgegebenen Logos verwendet werden.
• Die Logos dürfen nicht verändert oder verzerrt werden.
• Sie dürfen nicht in einem Kasten oder auf einem Button eingesetzt werden.
• Außerdem darf ein Logo nicht invers verwendet werden.

Bitte beachten Sie auch die Lizenzvereinbarung.

Paypal bietet die Logos unter folgender Adresse an:

https://www.paypal-deutschland.de/logocenter/start.html

Eine Übersicht der Logos finden Sie unter:

http://www.funkymonkey.ie/integration/guido/debuttons.htm