Smartphones gewinnen aktuell immer mehr an Bedeutung. Große E-Commerce Versandhäuser, wie z.B. Amazon, optimieren Ihre Web-Auftritte mittlerweile alle für dieses Medium. Es werden sogar eigene Apps für den schnellen Einkauf angeboten. Betreibern kleiner Shops fehlen da größten Teils die finanziellen Mittel für eine solche Optimierung. Da die Shop-Anwendung xt:Commerce (v3)  mit zu den meist genutzten Online-Shop-Lösungen gehört, habe ich mir gedacht, ich entwickle ein Modul, mit dem jeder XTC-Shopbetreiber seinen Shop für die gängigsten Smartphones optimieren kann. Herausgekommen ist das Modul: MobileST.

MobileST ist ein Modul für xt:Commerce, das den Online-Shop-Besuchern ein komfortables Einkaufserlebnis bietet, die mit Ihrem Smartphone unterwegs sind. Alle Seiten sind so optimiert, dass der Besucher schnell und einfach durch die einzelnen Shopseiten navigieren kann und sofort alle nötigen Informationen auf einem Blick hat. Die Navigation ist Touch-optimiert und die Darstellung so gewählt, dass nicht mehr in die Seite hereingezoomt werden muss.

Das Modul ermöglicht es mit dem Smartphone, einfach nach gewünschten Artikeln zu suchen, diese aufzurufen, und sich Produktangaben auf Artikel-Detailseiten anzuschauen. Dort findet der Kunde Produktbeschreibungen, ähnliche Angebote, die Option, den Artikel in den Warenkorb zu legen und anschließend zu bestellen. Weiterhin können das Kundenkonto verwaltet werden und getätigte Bestellungen eingesehen werden.

Im Folgenden sind eingige Screenshots von MobileST zu sehen:

Unterstützte Smartphones sind: Geräte mit iOS, Android, BlackBerry, Windows Phone, Palm web OS, Symbian (stark eingeschränkt)

Wer das Ganze mal testen und live sehen möchte, kann dieses in diesem Testshop machen. Beachten Sie die Hinweise auf der Startseite wenn Sie es direkt am PC und nicht mit dem Smartphone testen wollen.

Preis & Support:

MobileST wird unter der Creative Commons Attribution 3.0 Lizenz (CC-BY 3.0) veröffentlicht, welche die kostenlose Nutzung sowohl im privaten Bereich, als auch für die kommerzielle Anwendung gestattet.

Bedingung: Für die kostenfreie Nutzung des MobileST Moduls ist eine Rückverlinkung zur Phodana-Homepage (http://www.phodana.de) im Impressum und im mobile Template unter ‘Mehr -> Über MobileST’ vorgeschrieben.

Für den Einsatz des Moduls ohne die Einschränkungen der Creative Commons Lizenz (Namensnennung/Rückverlinkung) steht alternativ ein kostenpflichtiges Lizenzmodell zur Verfügung:

Für 39,- € erhält der Lizenznehmer ein projektgebundenes Nutzungsrecht für die Verwendung des Moduls ohne Namensnennung des Autors/Rückverlinkung zur Homepage. Das Nutzungsrecht ist an eine Projektdomain gebunden und gilt zeitlich unbegrenzt. Die Lizenz schließt auch die Nutzung zukünftiger Versionen des Moduls mit ein.

Damit keiner im Regen stehen gelassen wird, wenn es mal Probleme geben sollte, biete ich natürlich auch Support für das Modul an. Man kann mich jederzeit gerne per E-Mail kontaktieren, ich versuche dann schnellst möglichst zu helfen. Wer sich nicht traut die einfache Installation von dem Modul vorzunehmen, da kann ich das gerne gegen einen Aufpreis von 20€ übernehmen. Wer das Modul noch angepasst haben möchte, sprich mit eigenem Logo und anderen Änderungen, da kann ich das ebenfalls gerne gegen einen Aufpreis machen.

Wer nun bis hier gelesen hat und das Modul gerne haben möchte, kann es nun im folgenden herunterladen. Wer das Modul uneingeschränkt nutzen möchte, schreibt mir bitte eine Mail über dieses Kontaktformular. Alles weitere wird dann abgesprochen.

UPDATE (27.06.11): Nun ist auch eine xtcMobile Version für den original xt:Commerce 3.0.4 SP2.1 da. Gleichzeitig hab ich die Version für xtcModified geupdated. Dort wurden kleinere Korrekturen vorgenommen.

UPDATE (07.07.11): Neue Version 1.4.0 online. Änderungen: xtcMobile wurde in MobileST umbenannt, da ich von den xt:Commerce Entwicklern angemailt wurde, dass es sich bei xtcMobile um eine markenrechtliche Abwandlung handelt, was nicht gestattet ist. Weiterhin wurden einige Kleinigkeiten verbessert und überarbeitet. U.a. wurde auf das neue jQuery Mobile Framework umgestellt. Genauere Infos steht in der Changelog.txt des jeweiligen Download-Archives.

UPDATE (12.09.11): Es ist soweit, ein ähnliches Modul wie MobileST ist nun auch für Gambio GX2 verfügbar. Dieses Modul ist jedoch nicht über mich zu beziehen, sondern über die Firma Dupp Datensysteme GmbH. Wer Interesse an dem Modul bzw. Template hat, schreibt bitte eine E-Mail an info@sync4.de und verweist auf mich zurück. Die Kosten liegen bei 99€.

Spenden:

Wenn Sie mit dem MobileST Modul zufrieden sind und mich gerne für die Weiterentwicklung unterstützen möchten, bin ich über jede Spende sehr erfreut!

Felix Niklas hat sich gedacht, warum nicht einen ähnlich gestallteten Dialog zum generieren von CSS Code erstellen. Was daraus entstanden ist, siehst du hier. Ähnlich wir in Photoshop können verschiedene Attribute über einen Dialog aktiviert und verändert werden. Auch Presets lassen sich erstellen und wiederverwenden, so wie man es auch aus Photoshop kennt.

Ebenenstile zur CSS Generierung

Folgende CSS Attribute können generiert werden:

• drop shadow
• inner shadow
• background
• border
• border-radius

Diese Webanwendung funktioniert so, wie man es von dem Ebenenstilen von Photoshop her kennt. Definiv ein Tool, dass man sich als Webdesigner mal anschauen sollte.

Das WebResources Depot hat eine nette Liste zusammengestellt mit insgesamt 8 solcher Dienste, die kostenlos Platzhalterbilder erstellen. Flickholdr ist einer diese Dienste, der mit persönlich am besten gefällt.

Platzhalterbilder von Flickr

CSS3 Verlaufs Generator

Wer sich in Zukunft ganz einfach CSS3 Verläufe erstellen möchte, so wie er das vielleicht aus Photshop kennt, sollte sich unbedingt mal diese Seite anschauen. Dort kann über einen einfachen grafischen Editor der gewünschte Verlauf erstellt werden, wo dann automatisch der passende CSS Code dazu generiert wird. Wer sich bei seinen Verläufen noch etwas unentschlossen ist, kann sich über eine große Auswahl vordefinierter Verläufe den passenden heraussuchen. Aus meiner Sicht ein sehr nützliches Werkzeug!!

Lösen lässt sich dieses kleine Problem, indem man folgende Zeilen einmalig in die wp-config.php einfügt und dort seine entsprechenden Daten eingibt:

define('FTP_HOST', 'ftp.yoursite.com');
define('FTP_USER', 'Your_FTP_Username');
define('FTP_PASS', 'Your_FTP_password');
define('FTP_SSL', false); // true bei SSL Unterstützung

Es gibt zahlreiche Anbieter, die Bilder und Illustrationen anbieten, jedoch sind diese nicht kostenlos. So kann ein Bild, je nach Zweck, dann schon mal bis zu 10€ und mehr kosten. Je nach Umfang kann dies dann auch schon mal schnell ins Geld gehen, das wiederum auch nicht gewünscht ist.

Es gibt natürlich Anbieter, die kostenlos Bilder und Illustrationen anbieten, doch unter allen Anbietern ein passenden Bild zu finden kann sich als schwierig herausstellen. Zahlreiche Webseiten müssen durchstöbert werden, die auch erst einmal gefunden werden müssen.

Veezzle, eine Suchmaschine für kostenlosen Stock Fotos, umgeht all die genannten Probleme. Ähnlich wie bei der Google Bildersuche wird ein Suchbegriff eingeben und als Ergebnis werden Bilder geliefert. Der Unterschied besteht nur darin, dass diese Bilder dann frei für eigene Zwecke genutzt werden dürfen und hochauflösend sind. Statt mehrere Webseiten zu durchsuchen, die kostenlose Bilder anbieten, ist durch Veezzle nun eine zentrale Anlaufstelle geboten.

Veezzle: Suchmaschine für kostenlose Stock Bilder

Weltraum-Szene

UPDATE: Ich habe selbst mal ein Hintergrund nach dem Tutorial mit anderen Texturen und einer leicht abgeänderten Vorgehensweisen erstellt. Du kannst es im folgenden herunterladen. Das Hintergrundbild ist in einer Auflösung von 1920×1200 und 1680×1050 vorhanden.

Eigenes Weltraum Hintergrundbild

Schritt 1:

Über “Datei – Öffnen” oder Doppelklick auf den grauen Arbeitsbereich von Photoshop den “Öffnen Dialog” aufrufen.

"Öffnen Dialog" aufrufen

Schritt 2:

Eine Datei mit Ebenen suchen, diese aber noch nicht öffnen.

Datei suchen

Schritt 3:

“Shift+Alt” gedrückt halten und dann die entsprechende Datei öffnen.

"Shift + Alt" gedrückt halten

Photoshop öffnet durch bestätigen mit “OK” darauf hin die Datei als reduzierte Version. Alle Ebenen sind dort auf die Hintergrundebene reduziert.

Datei reduziert geöffnet