Die Seite
Link: www.wer-kauft-meinen-alten-pelz.de, www.wer-kauft-meinen-alten-pelz.ch
Fertigstellung: September 2013
Der Inhalt
Eigentümer alter, geschenkter, geerbter oder einfach aus der Mode gekommener Pelzmäntel können auf wer-kauft-meinen-alten-pelz Ihren Kürschner in Ihrer Nähe finden. Über die Eingabe der eigenen Postleitzahl wird der nächstgelegene Kürschner mit allen Kontaktdaten, Google Maps Kartenausschnitt und Link zum Routenplaner von Google Maps mit vordefinierter Zieladresse ausgegeben. Dieser Pelzspezialist bewertet Ihre Pelzmode, nimmt sie in Zahlung, modernisiert sie oder verwandelt sie in ein Kissen oder eine Felldecke.
Die Technik
Herzstück dieser Webseite bildet die Suchfunktion über die Eingabe der eigenen Postleitzahl. Hinterlegt sind dafür ca. 65.000 Postleitzahlen und Koordinaten deutscher und schweizer Orte. Ein PHP Programm berechnet die nächstgelegenen Kürschner und gibt sie nach Entfernung sortiert aus der Datenbank aus. Mit Hilfe der Google Maps API wird beim ersten Treffer zusätzlich ein Kartenausschnitt mit Marker angezeigt. Weiter berechnet das Programm die ungefähre Fahrstrecke zwischen den zwei Orten. Die Fahrstrecke wird durch das Produkt der Luftlinie und 1,33 approximiert.
Die Webseite nutzt mein jQuery Tooltip Plugin. Sie ist zudem Full-Responsive, also für alle Smartphones und Tablets optimiert. Für alle Nutzer von Touch-Geräten gibt es außerdem die bekannten Touch Icons in einem unverwechselbaren Design.
Inhalte für Verlinkungen der Seite auf Facebook werden über Open Graph bereitgestellt.
In Hinblick auf die Suchmaschinenoptimierung habe ich per mod_rewrite sogenannte "speaking URLs" eingebaut. Individuelle Fehlerseiten runden dieses Webprojekt ab.
Die Performance
Durchschnittliche Bewertung von Yahoo's YSlow (3.1.4 - Rulesets YSlow(V2)): A Performance Score 95
Noch einen Punkt besser als mein letztes Webprojekt schneidet dieser Internetauftritt ab. Alle Register für eine schnelle Seite wurden gezogen, sei es die Aktivierung der gzip-Komprimierung, Optimierung aller Bilder, Einsparung von HTTP-Requests, Einsatz von AJAX uvm.
Die Webtechnologien
- HTML5
- CSS3
- PHP
- MySQL
- AJAX
- jQuery
