Meine Webseite

Die Seite

Fertigstellung: September 2014

Der Inhalt

Auf meiner Webseite dreht sich Vieles um das Thema Webentwicklung und Informatik. Neben von mir umgesetzten Webseiten präsentiere ich Tipps, Tricks, Tutorials und Code Snippets für Webapplikationen, Programme und Browsergames. Zudem gibt es kurze von mir produzierte Segel- und Skifilme.

Die Technik

Als CMS wird Wordpress verwendet. Ein Großteil der Funktionalität im Front- sowie im Backend ist von mir mit objektorientiertem PHP5 für diese Webseite entwickelt worden. Das Theme ist eine Eigenentwicklung und full-responsive.

Auf der Webseite wird die HTML5 History API im Zusammenspiel mit AJAX verwendet, was nicht nur Performancevorteile bringt. Die Seite verhält sich wie eine Single-Page und beim Laden einer neuen Seite sind nette Animationseffekte per JavaScript implementiert. Prinzipiell ist Vieles modular mit JavaScript realisiert um die Benutzerfreundlichkeit zu steigern. Jedoch auch User mit deaktiviertem JavaScript können die Seite ohne große Einschränkungen nutzen. Die JavaScript/jQuery Codes sind fast alle selbstgeschrieben um zielgerichtete Funktionalitäten ohne Overhead fertiger, umfangreicher JS Skripte nutzen zu können.

Für Suchmaschinen wurden alle Seiten mit Open-Graph Daten und Richsnippets ausgestattet. Die gängigen Meta-Daten sind im Head-Bereich des HTML-Dokuments hinterlegt. Eine XML-Sitemap und eine XML-Videositemap werden automatisch immer frisch für Google generiert. Bei der Erstellung von Inhalten wird auf Suchmaschinenfreundlichkeit und Keyword-Dichte geachtet. Ausagekräftige, sprechende URLs, der Einsatz von HTML5 Elementen und einem strukturiertem Quellcode mit strukturierten Überschriften runden die SEO ab.

Die W3C Konformität des HTML Dokuments wird bei Änderungen stichpunktartig geprüft.

Die Performance

Durchschnittliche Bewertung von Yahoo's YSlow (3.1.4 - Rulesets YSlow(V2)): A Performance Score 91

CSS at top und JS at bottom
Automatisiertes CSS und JS minify mit Caching
Lazy Loading von Bildern mittels JavaScript
Jede Menge AJAX Requests und HTML5 History API
Serveroptimierungen mittels htaccess
Reduzierung von HTTP Request durch Spritesheets und base64-codierten CSS inline Bildern
Server- und clientseitiges Caching
Datenbankoptimierungen
Optimierung aller Bilder mittels freien Bildbearbeitungsprogrammen und TinyPNG

Die Webtechnologien

HTML5
CSS3
jQuery
PHP5
MySQL
Wordpress
AJAX

Die Zukunft

Tag Clouds
Automatisch generierte Vorschläge für Eingaben in der Suchbox abhängig von den bisher eingegebenen Zeichen
Sortierung und Filterung auf den Übersichtsseiten
Überblick über neue Inhalte seit dem letzten Besuch
... und natürlich immer neue Inhalte

Webprojekte

Patrick Saar