Bei der Preisverleihung des ersten t3n Web Awards in Hannover wurden aus insgesamt 21 Kategorien die besten Web-Projekte des Jahres gekürt. Die Sieger aus den Bereichen E-Commerce- und Content Management-Systeme sind zwei gute Bekannte: Magento und WordPress.

Magento, der Shooting Star im E-Commerce-Himmel, begeistert immer wieder unsere Programmierer und Kunden zugleich. Für Entwickler wartet das System mit einer sehr gut durchdachten Code-Basis und hohen Modularität auf, was uns erlaubt selbst bei fremden Projekten einen schnellen Einstieg zu finden und bestehende Systeme konsequent und problemlos zu erweitern. Gleichzeitig lässt es für Shop-Betreiber keine Wünsche offen, da es individuell an die eigenen Geschäftsprozesse angepasst werden kann.

WordPress, der lange unterschätze CMS-Veteran, hat ebenfalls eine ausgereifte Flexibilität erreicht. Es taugt längst nicht mehr nur als reines Blog-System, sondern glänzt auch als leicht erlernbares CMS. Mit seinen zahlreichen Plugins sind Anforderungen wie Mehrsprachigkeit oder ausgefeilte Bildergalerien leicht umzusetzen. Die Zeiten, in denen Redakteure teure Seminare besuchen müssen, sind damit endlich vorbei. Für Ihre professionelle Internet-Präsenz genau das richtige.

Für uns als Agentur ist die Siegerehrung selbstverständlich eine durchaus schmeichelhafte Bestätigung unserer Entscheidungen. Was uns aber noch viel wichtiger ist: für Sie als unser Kunde ist es die Gewissheit, mit uns an Ihrer Seite auf zukunftsfähige Projekte gesetzt zu haben. Sie profitieren aus unserer mehrjähriger Erfahrung mit den derzeit beliebtesten Web-Frameworks und stehen auch in Zukunft auf der sicheren Seite.

Manchmal ist es nützlich, ein System wie Magento auf dem Live-Server zu spiegeln, um gewisse Tests wie z.B. ein Upgrade auf eine neue Version durchzuführen. Da eine Magento-Installation aus den zwei Komponenten Dateisystem und Datenbank besteht, heißt Spiegeln hierbei für uns, dass wir natürlich beides so kopieren, dass das Original unberührt bleibt und bei einem Live-Shop ohne Unterbrechung weiterlaufen kann.

Wenn möglich, sollte der Shop während des Spiegelns natürlich trotzdem kurzzeitig in den Wartungsmodus versetzt werden, sicher ist sicher. Dazu muss einfach im root-Verzeichnis der Installation die Datei maintenance.flag erstellt werden. Die index.php prüft dann auf deren Existenz und leitet dementsprechend um.

Das Kopieren selbst sollte am besten über die Konsole erfolgen. Also per SSH einloggen und zum Kopieren der Magento-Dateien folgendes eingeben:

cp -R /pfad/magento /pfad/magento-TEST

Optimalerweise ist dabei Magento im Unterordner magento installiert und nicht im root-Verzeichnis des htdoc-Ordners selbst. Der Befehl kopiert den vorhandenen Ordner in den neuen Test-Ordner.

Das Spiegeln der Datenbank ist ähnlich einfach. Wir wollen hierbei die Datenbank usr_pxxx_1 in die Datenbank usr_pxxx_2 kopieren. Dazu verwenden wir das Konsolentool mysqldump. Wenn nicht vorhanden, kann es bei einem guten Hoster im control panel aktiviert werden.

Der folgende Befehl führt die Spiegelung durch:

mysqldump -u xxx -pxxxxx -hdbxxx.mydbserver.com usr_pxxx_1 | mysql -u xxx -pxxxxx -hdbxxx.mydbserver.com usr_pxxx_2

Dieser Schnipsel besteht eigentlich aus zwei Befehlen. mysqldump erstellt ein Backup von usr_pxxx_1, der daraus resultierende Output landet über die Pipe (dem “|”-Zeichen) direkt in mysql, dem Konsolen-Tool von MySQL.

Die mysqldump- und mysql-Parameter im Einzelnen (bei beiden identisch):

• -u der Benutzername für die Datenbank
• -p das Passwort, wobei zu beachten ist, dass das Passwort ohne Leerzeichen direkt an -p angehängt wird
• -h bei einigen Hostern muss der Datenbank-Host mit angegeben werden, auch hier kein Leerzeichen zwischen Parameter und Wert
• als letztes folgt die Datenbank als eigener Parameter

Je nach Datenbank-Größe kann der Prozess unterschiedlich lange dauern. Bei einem kleineren Shop mit nur tausend Artikeln (wobei natürlich auch noch andere Einflüsse eine Rolle spielen) dauert das Spiegeln nur wenige Augenblicke.

Um den Shop selbst dann auch zu nutzen, bietet es sich an, eine subdomain einzurichten und diese auf den neuen Unterordner zeigen zu lassen. Die Domain muss Magento dann noch in der Datenbank bekannt gemacht werden. Dazu z.B. mit phpMyAdmin die Tabelle core_config_data aufsuchen und die beiden Einträge web/secure/base_url und web/unsecure/base_url entsprechend setzen.

Das hier Beschriebene geht mit etwas Routine für gewöhnlich ziemlich flott, so dass man einen laufenden Shop bequem auf Herz und Pankreas prüfen kann, ohne den Shopbetreiber in Angstzustände zu versetzen. Versprochen!

Wir bedanken uns bei unseren Kunden für das Vertrauen in unsere Kreativität und die Offenheit vieler unserer Auftraggeber für neue Konzepte und kreative Kampagnen, ohne die dieser Beitrag in Band 6 nicht möglich gewesen wäre.

Das Agentur-Jahrbuch “Selection – Germany’s Finest Agencies” ist mit seiner fünften Ausgabe erschienen und zeigt wieder individuelle Selbstdarstellungen der besten deutschen Agenturen aus Werbung, Design und Internet. Diesmal auf 368 Seiten im goldenen Einband.

So einfach die Überschrift klingen mag, viele Entwickler die ich kenne beklagen sich über ihre vielen Projekte im Explorer-Fenster von Eclipse (Helios). Mit der Zeit wächst die Anzahl der Projekte und es wird schnell unübersichtlich wenn zwei oder drei gleichzeitig offen gehalten werden müssen, diese aber alphabetisch betrachtet weit auseinander liegen.

Da ich viele Aha’s erntete nachdem sich die simple Lösung offenbarte, ist mir dieser kleine Tipp einen Beitrag wert.

1. Man öffne einfach das Menü des Explorer-Fensters:

2. Im Menü dann auf “Filters” klicken.

3. Im folgenden Fenster den zweiten Eintrag “Closed projects” antickern und dann auf “ok” drücken.

4. Wenn ihr danach wieder das Menü öffnet, seht ihr den eben gewählten Eintrag aufgeführt, und zwar mit einem Haken. In der Ansicht werden also nur noch offene Projekte angezeigt. Den Haken könnt ihr im Menü schnell wieder entfernen um mal eben ein anderes Projekt zu öffnen und dann den Filter wieder setzen.

Aha!

Den CSS Browser Selector habe ich in diesem Beitrag schon einmal erwähnt. Leider ist das letzte Update vom November 2010 und berücksichtigt nicht den Firefox 4. Da das Skript aber nicht sonderlich schwer zu verstehen ist, hier ein Tipp wie ihr den FF4 mit in die Liste der bekannten Browser aufnehmen könnt.

Den Download zum Original-Skript findet ihr hier.

Öffnet die Datei und ihr werdet sehen, dass sich der ganze Code nur auf einer Zeile befindet. Um einen Anhaltspunkt für das Einfügen des neuen Browsers zu haben, benutzt ihr die Suchfunktion eures Editors und sucht nach ff3. Ihr kommt an eine Codestelle die an der Stelle etwa so aussieht:

:is('firefox/3.5')?g+' ff3 ff3_5'

Das ist die Bedingung die erfüllt ist, wenn es sich beim Browser um den Firefox 3.5 handelt. Der Doppelpunkt und das Fragezeichen sind Teil einer riesigen verschachtelten Abfrage mit Hilfe des ternären Operators (?:) und regulärer Ausdrücke.

Genau hinter dem String, den ich oben geschrieben habe, könnt ihr nun folgenden String setzen:

:is('firefox/4')?g+' ff4'

Dadurch setzt das Skript im FF4 die Zeichenkette ff4 in das class-Attribut des html-Elements ein:

Firebug

Auf diese Weise könnt ihr auch andere Browser hinzufügen, die das Skript vielleicht noch nicht kennt. Ich hoffe natürlich dass der Autor sein Skript weiterpflegt. Falls nicht, wisst ihr ja nun wie es funktioniert.

Bei Magento handelt es sich ohne Frage um eines der flexibelsten E-Commerce Shopsysteme überhaupt. Wer einen professionellen Onlineshop betreiben möchte, kommt an Magento kaum vorbei.

Magento Agentur-Leistungen

Die Empfehlung von Freunden ist die am häufigsten genutzte Grundlage für aktive Kaufentscheidungen. Nutzen Sie unsere Erfahrung in den sozialen Netzwerken und steigern Sie die Bekanntheit Ihrer Produkte.

Social Media Agentur-Leistungen

Unser ganzheitlicher Ansatz in der Konzeption von E-Commerce Plattformen und unser Gespür für die Bedürfnisse unserer Kunden helfen uns zukunftsweisende Lösungen zu entwickeln, für mehr Reichweite und gesteigerte Umsätze.

E-Consulting Agentur-Leistungen

Um ein Layout mit einer fixen Breite in einem Browserfenster zu zentrieren gibt es zwei Möglichkeiten.
Bei der ersten Methode wird das Layout auf eine Basisbox aufgebaut, die mit den CSS-Eigenschaften position, margin-left, margin-top und left, top versehen wird. Um nun die Basisbox zu zentrieren, werden diese Werte wie folgt verwendet. Ich setze die Basisbox auf eine feste Breite sowie die CSS-Eigenschaft top und left auf 50%. Die Box richtet sich nun um diese Koordinaten aus, da ich aber noch nicht die Breite mit berechnet habe, ist die Basisbox jetzt zu weit rechts, da immer von der oberen, linken Ecke berechnet wird. Um nun die Box korrekt auszurichten teile die Breite der Basisbox durch 2 und setze diesen Wert als negativen Wert in die CSS Eigenschaft margin-left ein.

Methode 1

#basisbox{
 width:900px;
 position:absolute;
 left:50%;
 margin-left:-450px;
}

Methode 2

Bei dieser Methode nutze ich die auto Funktion des Browsers zum Positionieren. Die Basisbox benötigt eine feste Breite um ein korrekte Positionierung durchzuführen. Durch die CSS-Eigenschaft margin:auto auto, richtet sich die Basisbox automatisch zentriert im Doukment aus.

#basisbox{
 position:relative;
 width:900px:
 margin:auto auto;
}

Wer bei der Entwicklung eines Magento Shops der gängigen Empfehlung folgt, seine Themes auf dem default-Theme von Magento aufzubauen, der ist natürlich dankbar für das bestehende html-Gerüst. Eine Sache hat mich aber schon öfter gezwickt, nämlich die unterschiedliche Darstellung der Button-Elemente in den verschiedenen Browsern.

Vor meiner Magento-Zeit habe ich button-Elemente nicht so gern verwendet, da z.B. der IE den Button bei einem Mausklick animiert, der Firefox aber nicht. Doch aufgrund der Menge an buttons im Magento Theme habe ich mich für’s erste damit angefreundet.

Als Beispiel für die verschiedenen Darstellungen habe ich mir hier Firefox 4 und Safari 5.0.5 angesehen. Als Beispiel-Design habe ich mir das Standard Theme auf demo.magentocommerce.com zur Brust genommen und Screenshots vom gleichen Button in beiden Browsern erstellt.

l. Firefox, r. Safari (Photoshop)

In der Vergrößerung und mit Hilfslinien erkennt man es ganz deutlich, 1px Versatz!

Für den typischen Programmierer nur ein müdes Achselzucken wert, für unsere Screendesigner der blanke Horror. Doch da ein Progger nichts mehr fürchtet als den Zorn eines aufgebrachten Grafikers, der sich in seiner Arbeit nicht erkannt sieht, muss natürlich eine Lösung her.

Nun kann man zwar auf CSS-Hacks zurückgreifen, doch ausgerechnet der für Webkit-Browser zuständige ist nicht w3c-valide. Zudem gilt der Hack für alle Webkits, also auch für Google Chrome, der buttons wiederum ganz anders darstellt als der Safari (trotz gleicher Engine wohlgemerkt).

Eine spezifische Lösung muss also her. Die für mich eleganteste ist die Benutzung einer kleinen JavaScript-Datei namens CSS Browser Selector. Das Skript wertet den user agent des Browsers aus und schreibt entsprechende Kürzel als Klassennamen in das html-Element einer jeden Seite.

Firebug

Durch diese Klassen in oberster Ebene könnt ihr nicht nur den Browser und dessen Version gezielt ansprechen, sondern auch das Betriebssystem. Um also dem Safari pauschal zu sagen, er soll die Buttons bitte schön einen Pixel höher ansetzen, schreibt ihr einfach folgendes:

.safari button {
   margin-top: -1px;
}

Natürlich müsst ihr dabei die üblichen CSS-Regeln beachten wie z.B. die Spezifizität, das Beispiel hier dient nur der Veranschaulichung.

Mit 1,3 KB ist das Skript ein Fliegengewicht, weshalb der Mehrwert deutlich überwiegt. Mit diesem wunderschönen Skript könnt ihr eure zukünftigen Websites also völlig valide und sehr gezielt stylen.