Kellermeister mit Weinasche

Ich arbeite gerade an einem neuen Shop und dem Kollegen auf seinem Ubuntu 10.10 ist dabei aufgefallen, dass Buchstaben fehlen. Das Produkt heißt dann eben nicht mehr Kellermeister mit Weinflasche, sondern Kellermeister mit Weinasche und auch nicht Hirt mit Vogelkäfig, sondern Hirt mit Vogelkäg.

Ziemlich eindeutig ein Problem mit Ligaturen. Ich hab’s dann erstmal auf Linux geschoben und ignoriert. Dann hat mich aber doch der Ehrgeiz gepackt. Das ganze auf Firefox als schuldigen eingegrenzt und tatsächlich auf einen alten Beitrag von Peter Kröner gestoßen. text-rendering: optimizeSpeed; bringt dann auch das gewünschte Ergebnis unter Ubuntu 10.10 und der Käfig heißt nicht mehr Käg. Die Gegenkontrolle im Firefox auf dem Mac zeigt, dass das Problem weiterhin besteht, also die Lösung von Peter nur auf alte Firefox-Versionen eine Auswirkung haben. Will man auch den aktuellen Versionen diese Unart austrieben braucht man noch zusätzlich:

-moz-font-feature-settings: "liga=0";

Das schaltet die Ligaturen dann wirklich ab. Das Problem scheint nur bei manchen Webfonts aufzutreten, bei denen von Google konnte ich es bislang nicht beobachten, bei der hier verwendeten LHF Hensler von Letterhead Fonts hingegen schon.

Webseiten-Infektion mit gestohlenen Plesk-Passwörtern

Oder auch: The Sicherheitslücke strikes back. Im März machten Meldungen die Runde, dass eine Lücke im Plesk-Admin dazu genutzt werden konnte, um administrativen Zugriff auf das System zu erhalten. Wie sich jetzt zeigt hätte Plesk den Hinweis, doch man nach dem Einspielen des Patches alle Passwörter zu resetten, wesentlich plakativer auf die Seite schreiben sollen.

Wieso? Während wir uns vor kurzem noch darüber kaputt gelacht haben, dass LinkedIn Passwörter mit SHA1 ohne Salt verschlüsselt geht Plesk noch einen Schritt weiter, um es dem Angreifer möglichst einfach zu machen: Sie verschlüsseln die Passwörter erst gar nicht (bzw. erst seit Version 11). Wer also gedacht hat, dass das Problem mit dem Einspielen des Patches aus der Welt sei, weil eventuell gestohlene Passwörter ja erst geknackt werden müssten: Think again.
Besitzer von Plesk bis zur Version 10 können zur Beweisführung folgendes machen:

cat /etc/psa/.psa.shadow

präsentiert das Root-Passwort für die MySQL-Datenbank (das auch gleichzeitig das Admin-Passwort für Plesk ist) im Klartext. Und das ist nicht einmal ein Geheimnis, in der Plesk-KB wird genau das als Lösung beschrieben, sollte man mal sein Passwort vergessen haben!
Und auch sämtliche Passwörter für das Admin-Panel stehen unverschlüsselt in der Datenbank. Wer also einen Blick in psaaccounts wirft sollte sicherstellen, dass er sitzt.

Passwörter, die durch die Lücke im März gewonnen wurden, werden derzeit aktiv genutzt, um Webseiten zu kompromitieren. Aktuell wohl überall mit dem gleichen Schadcode, der in php, asp(x), html und js-Dateien eingefügt wird und bislang noch ziemlich eindeutig daran zu erkennen ist, dass er zwischen den Kommentaren /*km0ae9gr6m*/ und /*qhk6sa6g1c*/ eingeschlossen ist.
Da der Angriff über den Plesk-Admin stattfindet zeigen sich in den Logfiles der betroffenen Webauftritte keinerlei Auffälligkeiten. Die findet man aber in den Plesk-Access-Logs unter /usr/local/psa/admin/logs/ bzw. im Activity-Log, das man sich über die Plesk-Oberfläche laden kann. Aus letzterem geht auch hervor, mit welchem Benutzernamen zugegriffen wurde. Anders als bei UnmaskParasites aber vermutet gehe ich von automatisierten Angriffen aus, die Einträge im Log sind viel zu dicht beieinander als das da jemand manuell klicken würde.

Abhilfe

Nach meinem aktuellen Kentnisstand wird außer dem Einschleußen des Codes nichts weiter mit dem Server gemacht – obwohl man quasi alle Möglichkeiten hätte.

  • Zunächst gilt es also, sofern noch nicht geschehen, den Patch einzuspielen.
  • Danach durchsucht man den Server nach infizierten Dateien und säubert diese. Unter Linux kann man dazu grep und sed benutzen. Unter Windows wird man um eine Analyse des Plesk-Access-Logs nicht herumkommen.
  • Abschließend setzt man alle Passwörter zurück. Von Plesk gibt es ein entsprechendes Script.

Zusätzlich kann man noch folgendes machen:

  • Wer die Netze, von denen Zugriffe auf den Plesk-Admin erfolgen, klar definieren kann, kann den Zugriff auf dem Admin entsprechend einschränken: EinstellungenAdministratorzugriff einschränken.
  • Den Plesk-Admin mit einem serverseitigen Passwortschutz versehen. Eine entsprechende Anleitung findet sich hier.

Relaunch Weingut Apotheker Bartz

Den ein oder anderen Kontakt von meiner Zeit an der Mosel habe ich ja noch und manch einer ist auch noch Kunde. Wie das Weingut Apotheker Bartz. Und für die Homepage stand jetzt der Relaunch an.

Es galt nicht nur, das alte Layout durch ein neues, frisches und gleichzeitig edel aussehndes optisches Erscheinungsbild zu ersetzen, sondern auch die im Hintergrund werkelnde veraltete Technik mit Frames endlich ins 21. Jahrhundert zu bringen. Darüber hinaus musste noch der Shop mit übernommen werden, der technisch nicht modifiziert wurde und noch aus einer Zeit stammt, in der php4 der letzte heiße Scheiß war. Legacy-Code wie aus dem Bilderbuch quasi.

Als technische Grundlage wurde WordPress gewählt, die Texte wurden aus dem bestehenden Auftritt übernommen. Für den Shop wurde ebenfalls ein der neuen Optik angepasstes Template entwickelt.

Gehostet wird auf Uberspace und damit ist es mein erstes Kundenprojekt dort. Ich bin jedes Mal wieder begeistert vom Uberspace-Hosting. Es fühlt sich etwas an wie zu seligen Bürgernetzzeiten. Alles ist da, man kann sich fast nach belieben austoben, darüber hinaus ist alles spitzenmäßig dokumentiert und selbst den Legacy-Code vom Shop zum laufen zu bekommen, war, inklusive dem Nachinstallieren diverser PEAR-Pakete, so unglaublich einfach und schmerzfrei, man muss es selber gemacht haben, um es zu glauben.

Umziehen Part 4: Richtiges Zertifikat für den Proxy

Beim Umzug des Erzgebirge-Palastes ist noch etwas aufgefallen, das ich bislang im Rahmen der Umzugsservice-Reihe noch nicht behandelt hatte:

Wenn die umzuziehende Seite (auch) unter https erreichbar ist muss der Proxy ebenfalls mit dem richtigen Zertifikat ausgestatt sein. Glücklich, wer noch eine IPv4-Adresse frei hat. Ansonsten hagelt es Fehlermeldungen. Bedenken sollte man auch, dass es hinter dem Proxy unverschlüsselt weitergeht, ein solches Vorgehen ist also nur wirklich angebracht, wenn man sich anschließend in einer vertrauenswürdigen Umgebung bewegt.

Kostenlose Icons von Versandunternehmen

Quasi als kleines Zusatzprojekt zu den Payment-Icons gibt es jetzt auch Icons für die gebräuchlichsten Versanddienstleister.

Update v10

Auch dieses kleine Projekt feiert in Kürze seinen fünften Geburtstag. Als vorgezogenes Geburtstagsgeschenk gibt’s daher heute einen kleinen Speditionsrundumschlag.
Von der Wunschliste kommt Schenker. Also eigentlich ja DB Schenker. Da ich aber ein großer Fan des grün/gelben Schenker-Designs bin und das charakteristische S (früher mit, später dann ohne Weltkugel) jahrzehntelang das Straßenbild in ganz Europa geprägt hat habe ich noch ein paar Hertige-Icons mit dazugepackt.
Und weil ich eh grad bei den Speditionen war wurde das noch mit Dachser und Kühne+Nagel ergänzt.
Kostenlose PNG-Icons für Versandunternehmen (v10) (zip, 3.4MB)

Enthaltene Icons:
DB Schenker
DB Schenker (alternativ)
Schenker Hertiage
Schenker Hertiage II
Schenker Hertiage III
Dachser
Dachser (alternativ)
Dachser (alternativ II)
Dachser (alternativ III)
Dachser (alternativ IV)
Kühne+Nagel
Kühne+Nagel (alternativ)
Kühne+Nagel Anker
Kühne+Nagel Anker (alternativ)

Update v9

Das meiste in diesem Update ist gar nicht von mir sondern von Christin. Vielen Dank dafür. Von mir ist nur das bestellte DHL Freight und die neuen UPS-Logos. Außerdem, weil immer wieder bestellt, ein UPS-Logo mit zusützlichem Express-Schriftzug.

Enthaltene Icons:
DHL Freight
UPS
UPS Express
UPS Express (altes Logo)
Air New Zealand
Fastway Couriers
GEL
NOX Nachtexpress
Night Star Express
Tiramizoo (Großstadt-Direkt-Kurier)

Update v8

So 25-Stunden-Tage haben schon ihre Vorteile, man kommt mal zu Sachen, die sonst liegen bleiben. Und daher gibt es heute ein kleines Update.

Enthaltene Icons:
Asendia
Asendia (alternativ)
postnl (Niederlande)
Südmail
Südmail (alternativ)
bpost (Belgien)

Update v7

Neben den sich angesammelten Länder-Logos hat dieses Update vor allem einen Grund: Die Neugestaltung des dpd-Logos.

Enthaltene Icons:
DPD
DPD Express
Azərpoçt (Aserbaidschan)
Correos (Spanien)
Makedonska Posta (Mazedonien)

Update v6

Drei neue Länder sind heute im Programm und ein paar generische Icons, die man beispielsweise für Versand nach Zonen oder tabellarischen Versand verwenden kann.

Enthaltene Icons:
Versand nach Zonen
Versand nach Zonen (alternativ)
Tabellarische Versandkosten
Abholung
Lietuvos Paštas (Litauen)
El Correo (Guatemala)
Posta Kenya

Update v5

Und weiter geht die Reise um den Erdball. Ich habe mittlerweile Zugriff auf die Track&Trace-API von DHL und da kann man noch viel weiter zurückgehen als auf der Website. Dadurch bin ich noch auf ein paar mehr Länder gestoßen, die für die Integration in die Warenwirtschaft natürlich ein Logo brauchen.

Enthaltene Icons:
PTT (Türkei)
Korea Post
OPT (Französisch-Polynesien)
Pos Indonesia
Saudi Post
Emirates Post Group
Vietnam Post
Liban Post
Japan Post
Pos Malaysia
Correo Argentino
Taiwan Post

Update v4

Eine kleine postalische Reise um die Welt. Wir versenden primär mit DHL, d.h. im Zielland übernimmt dann der lokale, meist (ex-)staatliche Betrieb, die Sendung. Von der DHL gibt es dann einen sog. Matchcode und man kann, zumindest in der Theorie, die Sendung dann weitertracken. Genau das habe ich in unsere neue Warenwirtschaft implementiert und dazu braucht es natürlich auch passende Icons. Außerdem enthält das Update das schon länger bestellte DHL-Express-Icon.

Enthaltene Icons:
United States Postal Service
Correios (Brasilien)
South African Postal Service
Thailand Post
Russian Post
Singapore Post
New Zealand Post
Correos de México
India Post
Israel Post
Hong Kong Post
Correos del Ecuador
4-72 (Kolumbien)
China Post
Correos Chile
Australian Post
Post Canada
DHL Express

Update v3

Die per E-Mail eingegangen Wünsche finden sich in diesem Update.

Enthaltene Icons:
General Overnight
TNT Express
GLS Express
DPD Express
Trans-o-flex
Trans-o-flex (alternativ)

Update v2

Auch die Versandicons gehen in die zweite Runde und werden ergänzt um die österreichische und schweizer Post.

Enthaltene Icons:
Österreichische Post
Österreichische Post (alternativ)
Schweizer Post

Release

Format:
PNG, 512px
Enthaltene Icons:
DHL
DPD
GLS
UPS
FedEx
TNT
Hermes
Deutsche Post

Weiterentwicklung

Ich glaube, dass auch diese Icons für viele Shopbetreiber hilfreich sind. Mir ist aber auch klar, dass es weitere Versandunternehmen gibt, die noch nicht berücksichtigt sind. Gerne füge ich weitere Logos hinzu. Dazu einfach einen Kommentar hinterlassen oder mich über das Kontaktformular kontaktieren.

Lizenz

Die Icons sind kostenlos für private und kommerzielle Nutzung und stehen unter der CC BY Lizenz.
Das Copyright der einzelnen Logos liegt bei den jeweiligen Gesellschaften.

Download

Kostenlose PNG-Icons für Versandunternehmen (v10) (zip, 3.4MB)

OXID commons 2012

Kurz entschlossen sind wir vergangenen Donnerstag zur OXID commons 2012 gefahren. Vorangegangen war die Entscheidung, Magento den Rücken zu kehren und zu OXID zu wechseln.

OXID commons ist sowas wie ein Hybrid aus Konferenz und Messe. Diverse Dienstleister aus dem OXID-Umfeld hatten sich in der Rothaus-Arena eingefunden und stellten auch den Großteil der Speaker. Mitunter hatte man daher schon das Gefühl, dass während der Sessions oben rechts eigentlich ein Schild mit ‘Dauerwerbesendung’ hängen müsste.

So aus der Sicht anderer Konferenzen, die ich bisher besucht habe, hat das ganze auch etwas von omnipräsentem Buzzwordbingo und Schlipsträgerveranstaltung, etwa beim ‘rituellen’ Visitenkartentausch.
Insgesamt haben wir aber sehr viel mitgenommen, nicht nur gute Kontakte zu Dienstleistern. Ein paar Verbesserungsvorschläge hätte ich dennoch:

  • Geskriptete ‘Podiumsdiskussionen’ haben was von ‘Scripted Reality’. Geht gar nicht.
  • In eine einzelne Session von einer Stunde drei oder vier Speaker reinzuquetschen ist einfach zu viel. Mehr als allgemeine Informationen kommen dabei leider nicht rüber. Vielleicht sollte man sich überlegen, Workshops am Vortag anzubieten, damit man da mehr in die Tiefe gehen kann.
  • Die Pausen hätten etwas länger sein können, damit man mehr Zeit hat, sich mit den Dienstleistern zu unterhalten.

Vielleicht fällt der ein oder andere Punkt weg, wenn wir dann nächstes Jahr auch an der Unconference teilnehmen, die wir dieses Mal aus Gründen ausfallen lassen mussten. Am meisten Spaß gemacht hat mir nämlich die Session, bei der es um Erweiterungen aus der Community ging (u.a. GoodRelations und der Admin 2.0).

Die Videoaufzeichnungen des Konferenzteils kann man übrigens hier ansehen und den Vortrag von Martin Hepp zu GoodRelations gibt es außerdem hier.

Telefon als Pflichtfeld in Magento – the ultimate solution

Es sind die kleinen Dinge, die nerven. Und davon hat Magento reichlich.

Man sollte meinen, dass es bei einem derart hochgezüchteten Shopsystem mit einem Klick getan ist, ein Feld im Checkout nicht zum Pflichtfeld zu machen. Im konkreten Fall die Telefonnummer, die aus unerfindlichen Gründen in so ziemlich jedem Shopsystem ein Pflichtfeld ist.

Der erste Blogpost dazu gibt Hoffnung. Aber so einfach ist es nicht. Also halt so gar nicht. Diese Änderung in der Datenbank ist mehr oder weniger nutzlos.
In den Templates wird nämlich gar nicht erst darauf geprüft, welches Feld ein Pflichtfeld ist. Man muss also an allen möglichen Stellen händisch alles entfernen, was auf ein Pflichtfeld hindeutet. Und neben den hier genannten Templatedateien kommt, zumindest in 1.6, auch noch /template/persistent/checkout/onepage/billing.phtml dazu.
Außerdem muss man noch die Mage_Customer_Model_Address_Abstract anpassen, auch hier folgt man am besten der Anleitung hier.

Fertig. Fertig!? Guter Witz, Rechnung ohne Magento gemacht!
Wenn man sich auf der Suche nach dem Fehler weiter durch den Magento-Core hackt trifft man früher oder später auf /app/code/core/Mage/Eav/Model/Attribute/Data/Text.php. Und hier liefert $attribute->getIsRequired() weiterhin treudoof true zurück, als ob man die Datenbankänderung nie gemacht hätte. Ein Blick in selbige führt aber zu der Erkenntnis, dass dort alles stimmt. Alle Caches leeren bringt exakt gar nichts. Erst das ausführen des folgenden Codeschnipsels:

$telephone = Mage::getModel('eav/entity_attribute')
           ->loadByCode('customer_address', 'telephone')
           ->setIsRequired(false)
           ->save();

überzeugt Magento endlich davon, dass die Telefonnummer im Checkout kein Pflichtfeld mehr ist. Herzlicher Dank auch an die Magento-Entwickler, man verbrät doch immer mal wieder gern ne Stunde für so einen Scheiß!

Kostenlose Payment-Icons für den europäischen Markt

Wir haben den Checkout-Prozess in unseren Shops überarbeitet und dazu auch neue Icons für die einzelnen Zahlungsarten entworfen. Diese sind stark abgestimmt auf den deutschen und europäischen Markt und die hier gebräuchlichen Zahlarten. Da ich der Meinung bin, dass diese auch für andere Shopbetreiber nützlich sein könnten biete ich hier das komplette Set zum Download an.

Update v17

Klarna sucht nach „seiner“ Farbe im E-Commerce. Und jetzt ist es also Pink geworden. Da mach aber mal nen Punkt!
Genug der Anspielungen, zu den Fakten: Komplettes Rebranding bei Klarna und der Tochter Sofort. Neue Schrift, neue Farbe und immer ein Punkt hinter der Zahlart. Das erfordert natürlich neue Icons. Damit ist zumindest die optische Integration von Sofort in den Klarna-Kosmos abgeschlossen, jetzt muss nur noch die technische folgen.
Außerdem gibt es noch das neue Twint-Logo für die Schweiz, vielen Dank an den immer rührigen José, auch wenn ich mitunter etwas länger brauche um die Icons hochzuladen.

Enthaltene Icons:
Twint
Klarna
Klarna (alternativ)
Klarna Sofort
Klarna Sofort (alternativ)
Klarna Rechnung
Klarna Rechnung (alternativ)
Klarna Ratenkauf
Klarna Ratenkauf (alternativ)

Kostenlose PNG-Icons für Kreditkarten und Zahlarten (v17) (zip, 12,2MB)

Update v16

Diesen Monat feiert mein kleines Iconset tatsächlich schon seinen fünften Geburtstag. Statt Torte gibt es drei neue Icons, heißt doch Amazon payments neuerdings Amazon pay und ein paar Sachen von der Wunschliste habe ich dann auch gleich noch mit abgearbeitet.

Enthaltene Icons:
Amazon pay
Stripe
Ratenkauf

Update v15

Da ist mir doch tatsächlich das neue MasterCard-Logo durchgerutscht. Das betrifft gleichzeitig auch Maestro und Cirrus und eigentlich auch MasterPass. Für letzteren ist aber außer einem bemitleidenswerten Bildchen, das MasterCard höchstpersönlich auf flickr veröffentlicht hat, kein brauchbares Grundmaterial zu finden und so ist erstmal bis auf weiteres das alte MasterPass-Icon enthalten.

Aufgefallen ist mir das neue MasterCard-Logo durch ein Schreiben unseres Aquirers. Denn VISA und MasterCard tun jetzt endlich was gegen den Kreditkartenmissbrauch. Auf der letzten Checkout-Seite muss jetzt das Herkunftsland, die Anschrift und die Telefonnummer des Händlers stehen. Endlich mal eine wirksame Maßnahme. Nicht.

Enthaltene Icons:
MasterCard
Maestro
Cirrus

Update v14

Es hatte sich so einiges angesammelt im E-Mail-Postfach und in den Kommentaren. Und daher kommen hier gleich 33 neue Icons. Oft geäußerte Wünsche sind ebenso dabei wie eher selteneres. Zu ersterem zählt sicherlich das Icon für paydirekt und die beiden PayPal-Icons für PayPal Express und PayPal Plus. Beides sind reine Fantasieprodukte, da PayPal keinen Bedarf dafür sieht. Die Shopbetreiber aber sehr wohl.

Unterstützung kam unter anderem wieder von José, der mich darauf aufmerksam machte, dass VISA ein neues Logo hat. Jetzt ist es ja so, dass sich das neue, das nur noch den blauen VISA-Schriftzug mit der gelben Ecke im V hat, irgendwie flächendeckend durchgesetzt hat. Da ist es natürlich ne völlig geniale Idee erneut ein geändertes Logo einzuführen. Die gelbe Ecke fällt weg, dafür hat der Schriftzug jetzt einen Farbverlauf. Und wenn das noch nicht genug Verwirrung wäre sieht das neue VISA-Electron-Logo dem ganz alten VISA-Logo deutlich ähnlicher als dem neuen. Daher gibt es im Set auch ein alternatives Electron-Logo, das besser in die neue Bildsprache passt. Und auch eine Variante ohne Farbverlauf, für alle, denen Farbverläuf zu 90er sind.

Apropos neues Logo: Die UPS-Nachnahme zeigt jetzt das neue, flache UPS-Logo und apropos Nachname: Christin hat mich darauf hingewiesen, dass es ja gar kein Icon für Deutsche Post Nachnahme gibt. Das ist hier auch enthalten.

Und dann haben wir noch fünf neue Texticons, einfach schwarze Schrift mittig.

Enthaltene Icons:
Nachnahme UPS
Nachnahme UPS (alternativ)
PayPal Express
PayPal PLUS
Bancontact
Bancontact/Mister Cash
Belfius
Mollie
Bankomat
Sodexo
Accor Services
Unionpay
Unionpay (alternativ)
VISA
VISA (alternativ)
V-Pay
Visa Electron
VISA Electron (alternativ)
Billpay (alternativ)
Swisscom Easypay
Swisscom Natel® Pay
Swisscom Natel® Pay (alternativ)
Nachnahme Post Deutschland
Nachname Post Deutschland (alternativ)
Nachnahme Post Schweiz
Nachnahme Post Schweiz (alternativ)
Nachname Post Österreich (alternativ)
Texticon schwarz „Überweisung“
Texticon schwarz „Rechnung“
Texticon schwarz „Lastschrift“
Texticon schwarz „Nachnahme“

Update v13

Ich hab mich dann mal nochmal mit dem Thema Rechnungs-Icon auseinandergesetzt und bin dabei etwas über das Ziel hinausgeschossen. Das Update enthält neben den von Alex beigesteuerten Text-Icons für „Rechnung“ und „auf Rechnung“ ein alternatives Mastercard-Icon, ein optimiertes PostPay-Icon und, ähm, 136 weitere Icons für Rechnung.

Obwohl ich kein Freund von Skeuomorphismus bin habe ich doch mal ein Rechnungskuvert auf’s Icon gebaut. Das ganze gibt es mit und ohne Banner „Rechnung inliegend“, mit deutscher, österreichischer und schweizer Briefmarke, einer weiteren Edition mit der deutschen Briefmarke zur Fußball-Weltmeisterschaft inkl. Sonderstempel und mit passenden Anschriften auf den Kuverts. Und da hat es dann angefangen, das hinausschießen über das Ziel. Es gibt für jedes Land sowohl eine weibliche als auch eine männliche Empfängeranschrift und in Deutschland gibt es das auch noch für jedes Bundesland. Macht am Ende 136 Icons. Und wenn dann doch nicht das passende dabei sein sollte – das PSD enthält jetzt auch dieses Rechnungsicon.
Ob das aber so bleibt weiß ich noch nicht, die Datei ist dadurch immerhin auf 11,2MB angewachsen.

Für die Schweiz außerdem noch dabei: Ein Icon für Twint, das Marco beigesteuert hat. Allen Zulieferern an dieser Stelle vielen Dank.

Enthaltene Icons:
Rechnung (136 Varianten)
Texticon „Rechnung“
Texticon „auf Rechnung“
Mastercard (alternativ)
PostPay
TWINT

Update v12

Da ich heute eine Stunde mehr Zeit hatte habe ich mal die offenen Requests soweit abgearbeitet. Herausgekommen sind zwei Versionen für yapital und zwei für micropayment.

Enthaltene Icons:
micropayment
micropayment (alternativ)
yapital
yapital (alternativ)

Update v11

Kleiner Rundumschlag zu Ostern: Barzahlen in zwei Varianten, ServiRed in zwei Varianten, MasterPay in zwei Varianten (Danke an José für den Hinweis und das eine davon), ebenfalls von José das neue Diners-Club-Logo und das neue dpd-Logo mit Nachnahme-Ecke in zwei Varianten.

Enthaltene Icons:
Diners Club
Nachnahme DPD
Nachnahme DPD (alternativ)
ServiRed
ServiRed (alternativ)
Barzahlen
Barzahlen (alternativ)
Masterpass
Masterpass (alternativ)

Update v10

PayPal hat ein neues Logo. Neue Schriftart, leicht geänderte Farben und ineinanderfließende P’s.

Enthaltene Icons:
PayPal
PayPal (alternativ)
PayPal (alternativ 2)

Update v9

Ein kleines Update mit allem, was sich hier so in den letzten Monaten an Wünschen und Anregungen angesammelt hat:
Von José habe ich wieder einige Icons für Zahlungsarten aus den Nachbarländern erhalten: iDeal (Niederlande), Carte Blanche (Frankreich), Manor MyOne (Schweiz) und Paysafecard (ebenfalls Schweiz inkl. einer Variante von mir). Darüber hinaus wurden Wünsche laut nach Bitcoin (drei Varianten), Nachnahme durch die österreichische Post und Barzahlung bei Abholung, die sich auch alle in diesem Update wiederfinden. Das letztgenannte Icon ist auch in der PSD enthalten, damit man es sich nach eigenen Wünschen umfärben kann.

Enthaltene Icons:
Paysafecard
Paysafecard (alternativ)
Nachnahme Post Österreich
Bitcoin
Bitcoin (alternativ)
Bitcoin (alternativ 2)
Carte Blanche
Barzahlung bei Abholung
Manor MyOne

Update v8

2014 wirft seine Schatten voraus und mit ihm SEPA, die Single Euro Payments Area. Aus diesem Grund gibt es hier kurz vor dem Jahreswechsel ein passendes SPEA-Logo.

Enthaltenes Icon:
SEPA

Update v7

Von José habe ich ein PostFinance-Icon bekommen. Dazu habe ich noch zwei alternativen erstellt und außerdem gibt’s noch das schon länger gewünschte VR-Pay-Icon.

Enthaltene Icons:
PostFinance
PostFinance (alternativ)
PostFinance (alternativ 2)
VR-Pay

Update v6

Großes Kino von Sofortüberweisung. Es scheint echt zu viel verlangt zu sein, vorher zu prüfen, ob das neue Logo irgendwelche bestehenden Copyrights verletzt. Deshalb gibt es schon wieder ein neues. Einmal, nur einmal mit Profis arbeiten…

Enthaltenes Icon:
Sofortüberweisung

Update v5

Klarna hat ebenfalls sein Logo überarbeitet.

Enthaltene Icons:
Klarna
Klarna (alternativ)
Klarna (Rechnung)
Klarna (Ratenkauf)

Update v4

Sofortüberweisung hat ein neues Logo, das ab sofort im Icon-Set enthalten ist.

Enthaltenes Icon:
Sofortüberweisung

Update v3


Ich hab mal die Vorschläge aus den Kommentaren aufgegriffen und das Set etwas ergänzt.

Enthaltene Icons:
UPS Nachnahme
UPS Nachnahme (alternativ)
amazon payments

Außerdem gibt es jetzt ein neues Set mit Logistikdienstleistern.

Update v2

Kaum einen Tag alt gibt es schon das erste Update, in diesem sind enthalten:

Enthaltene Icons:
Billpay
Billsafe
klarna
paymorrow
Nachnahme GLS
Nachnahme GLS (alternativ)
Nachnahme Hermes (siehe auch den Kommentar von Martin)
sage pay
Skrill

Außerdem enthält die Datei jetzt generische Icons mit Text für Überweisung, Vorkasseskonto oder beliebige andere Zahlungsarten. Da nicht jeder was mit Kuckucksuhren-Grün oder rein deutschsprachigen Icons anfangen kann ist im Zip eine PSD-Datei, mit deren Hilfe man sich die benötigten Icons schnell selber machen kann. Als Schrift kommt Aller bzw. Aller Display zum Einsatz. Wer mehr zu dieser Schrift wissen will wird bei Gerrit fündig.

Release

Format:
PNG, 512px
Enthaltene Icons:
American Express
CartaSI
Carte Bleue
Carte Bleue (altes Logo)
Cirrus
clickandbuy
Diners Club
Direct Debit
Discover
EC
eps netpay
girocard
giropay
JCB
Maestro
Mastercard
Moneybookers
Nachnahme DHL
Nachnahme DPD
Paypal
postepay
sofortüberweisung.de
Solo
Switch
Überweisung
V Pay
VISA Electron
VISA
Western Union
wirecard

Weiterentwicklung

Ich glaube, dass diese Icons für viele Shopbetreiber hilfreich sind. Mir ist aber auch klar, dass es zahlreiche Zahlungsarten gibt, die noch nicht berücksichtigt sind. Gerne füge ich weitere Logos hinzu. Dazu einfach einen Kommentar hinterlassen oder mich über das Kontaktformular kontaktieren.

Lizenz

Die Icons sind kostenlos für private und kommerzielle Nutzung und stehen unter der CC BY Lizenz.
Das Copyright der einzelnen Logos liegt bei den jeweiligen Gesellschaften.

Download

Kostenlose PNG-Icons für Kreditkarten und Zahlarten (v17) (zip, 12,2MB)

Baseball-Bundesliga.de

Es war ruhig hier die letzten Wochen. Die Baseballsaison 2012 wirft ihren Schatten voraus und in ihrem Windschatten kommt eine neue Website mit. Und diese Website war in den letzten Wochen mein liebstes Betätigungsfeld. Meistens jedenfalls.

Grundlage

Die Seite basiert auf WordPress. Was anderes darf man von mir derzeit auch nicht wirklich erwarten. Aufgrund des strammen Zeitplans (ein Monat, ein Entwickler, der zu allem Überfluss auch noch einem Beruf nachgeht) wurde ein fertiges Template als Grundlage herangezogen, das durch den grandiosen Christian Swoboda für die eigentliche Aufgabenstellung umgestaltet wurde.

Ausschlaggebend für die Wahl des Mediaflux-Templates war nicht nur die grundsätzliche optische Ausrichtung, sondern auch die Tatsache, dass es mehr oder weniger moderne WordPress-Features wie Menüs von Haus aus unterstützt. Der Quelltext ist aber leider nicht besonders hübsch und vor allem das CSS ist dermaßen überspezifiziert, da kann man mitunter schon mal zu viel bekommen.

Besonderheiten

Es gibt für WordPress ja Plugins für jeden (un)möglichen Anwendungsfall. Es gibt aber nichts für eine Ligaverwaltung. Aus diesem Grund ist der komplette spielbetriebsrelevante Teil selbst geschrieben. Für Spielpläne und Tabellen werden Schnittstellen verwendet, die ich bereits vor einigen Jahren in die Spielbetriebssoftware des DBV integriert habe und die für die neue Website entsprechend erweitert wurden. Gleiches gilt für Daten, die aus der Spielerpasssoftware opaso kommen. Auch hier wurden die Schnittstellen zum Teil beträchtlich erweitert und stehen in Kürze vermutlich auch allen Landesverbänden zur Verfügung.

Zum ersten Mal in einem meiner Projekte kommt auf dieser Seite leaflet zum Einsatz, nicht nur optisch das bessere Google Maps.

Eine besondere Herausforderung war die Anbindung des Livescoring und der daraus resultierenden Statistiken, bietet doch GameChanger keine API an. Ein Teil der Daten steht zwar als JSON zur Verfügung, manchmal hilft dann aber nur ein beherzter Griff zu PHP Simple HTML DOM Parser, um an die gewünschten Informationen zu kommen.
Ob und wie performant diese Lösung ist wird sich am 30. April zeigen, wenn die Saison mit dem Nightgame Mainz Athletics gegen die Buchinder Legionäre beginnt. Und ich werde am Mikro sitzen, also macht’s nicht gleich kaputt.

Geschwindigkeit

Performance ist natürlich ein gutes Stichwort.
Neben Caching- und Expire-Einstellungen, die man im Detail in meiner Artikelserie „xtcModified on steroids nachlesen kann, ist hier die Plugin-Schatulle von WordPress reich gefüllt:
Als Cache-Plugin kommt, wegen guter Erfahrungen bei Mister Baseball, WP Super Cache zum Einsatz.
Um Minimierung und Verknüpfung von Javascript- und CSS-Dateien kümmert sich Better WordPress Minify, das überragende Konfigurationsmöglichkeiten bietet, mir deren Hilfe man einstellen kann, was wie und wo minimiert wird.
Diese Maßnahmen bringen die Seite auf respektable 92 von 100 möglichen Page-Speed-Punkten.
Darüber hinaus werden die Informationen, die aus den APIs bezogen werden, mit Hilfe der Transients API von WordPress gechached.

Und jetzt: Play Ball!

Startseite


Clubs


Clubinfo


Roster


Liveticker

Hinten anstellen – xtcModified on steroids

Man kennt das aus dem Supermarkt: An der Kasse mal eben vordrängeln, um dann den Betrieb komplett aufzuhalten, weil man 14,83 Euro passend abgezählt in aller Seelenruhe aus dem Geldbeutel kramt. Gerne noch gepaart mit: „Ich hou mei Brilln daham vergessn, guggn sa amol, sinn des fünf odder zwaa Zent?”. Gibt’s bei der Geschwindigkeitsoptimierung im Web auch. Heißt da aber nicht Oma Meier sondern Javascript.

Javascript später parsen

Parsen Sie Javascript später, um die Blockierung der Seitendarstellung zu reduzieren.

Weil Javascript Inhalt und DOM der Seite verändern kann warten die Browser, sobald sie auf einen Script-Tag stoßen, bis das Javascript geladen, geparsed und gerendert ist, bevor sie mit dem eigentlichen Rendering der Seite fortfahren. Durch das Mischen von Javascript- und CSS-Tags kann das Laden noch einmal zusätzlich verlangsamt werden, Page Speed listet das unter ‘Reihenfolge der Formate und Skripts optimieren’. Eine Grafik, wie diese Verzögerung eben durch das Stoppen des eigentlichen Rendervorgangs aussehen kann, findet sich bei Google.

Heute geht es also darum, die Reihenfolge von CSS und Javascript im Hinblick auf Ladezeiten zu optimieren. Dabei gilt die Faustregel, CSS gleich zu Beginn und Javascript ganz am Ende zu laden. Allerdings muss man beachten, dass es Fälle gibt, bei denen man von dieser Regel abweichen muss, weil man Javascript-Funktionen schon vorher benötigt. Hat man beispielsweise einen SSL-Proxy und muss Cross-Domain-Tracking mittels Google Analytics implementieren, benötigt man das Analytics-Javascript vorher und kann es eben nicht ganz ans Ende verfrachten.
Auch die eigentliche Reihenfolge der Scripte ist wichtig, erfordern manche Funktionen bestimmte Bibliotheken, z.B. jQuery, muss dieses natürlich vorher geladen werden. Und vertauscht man die Reihenfolge bei CSS-Dateien könnte es aufgrund der Kaskade zu unerwarteten Darstellungsfehlern kommen.

Im Sourcecode von xtcModified finden sich Hinweise, dass man dieses Thema auch schon mal angegangen ist, aufgrund von Fehlern bei jQuery wurde das aber wieder rückgängig gemacht. Aktuell konnten ich bei Tests im Demoshop keine derartigen Probleme feststellen. In xtcModified findet sich außerdem noch sehr viel Javascript-Code, der nicht über eine externe Datei geladen wird. Hier aufzuräumen und den Code, der zum Teil noch aus dem originalen xt:Commerce stammt, gegen moderne, auf jQuery basierende Funktionen zu tauschen, würde eine eigene Serie gut füllen.

Daher beschränke ich mich hier mal auf das naheliegendste: In includes/header.php alles von Zeile 75 bis Zeile 278 in die Zwischenablage kopieren und dann löschen, ebenso Zeile 279 löschen. In includes/application_bottom.php die Zeilen 42 bis 46 markieren:

//BOF - DokuMan - 2010-02-25 - Enhance page loading time by putting CSS on TOP of page and JavaScript on BOTTOM of page
//BOF - web28 - 2010-07-14 -  change to TOP of page again because jquery view problems
//require('templates/'.CURRENT_TEMPLATE.'/javascript/general.js.php');
//EOF - web28 - 2010-07-14 -  change to TOP of page again because jquery view problems
//EOF - DokuMan - 2010-02-25 - Enhance page loading time by putting CSS on TOP of page and JavaScript on BOTTOM of page

und durch

?>

ersetzen. Anschließend den Inhalt der Zwischenablage einfügen.

Betrachtet man die reinen Zahlen könnte man meinen, diese Änderung bringt uns primär ein gutes Gefühl.

YSlow mit Javascript am Seitenende

Page Speed mit Javascript am Seitenende

Der eigentliche Erfolg ist hier aber eher offensichtlich, wenn man sich das Rendering ansieht. Mit Javascript im oberen Bereich der Seite wird der Browser sehr früh blockiert und beginnt erst nach ca 2,5 Sekunden mit dem Rendern. Hingegen beginnt dieser Prozess nach der Änderung gut eine Sekunde früher.

Weitere Artikel der Serie

  1. Höher, schneller, weiter
  2. Verfallsdatum überschritten
  3. Druck machen – xtcModified on steroids

Disclaimer: Ich bin nach wie vor der Meinung, dass viele der Einstellungen in der Serverkonfiguration besser aufgehoben sind als in der .htaccess-Datei, da aber sicherlich viele das ganze auch auf Shared Hosting umsetzen möchten werden alle Änderungen, die auch über die .htaccess durchgeführt werden können, im Rahmen dieser Artikelreihe dort vorgenommen.

Page 5 of 9« First...34567...Last »