Boehrsi.de - Blog

Nach einigen Wochen Programmierung und mindestens der selben Zeit um diverse Fehler rund um die Homepage zu beheben, ist die neue Seite nun online. Allerdings werde ich vermutlich noch bis Ende nächster Woche diverse kleinere Änderungen und Verbesserungen im Detail vornehmen. Also bitte nicht wundern wenn sich noch etwas ändert. Ändern wird sich auf jeden Fall die Anzahl meiner News, denn aufgrund des Umbaus schrieb ich in den letzten Tagen nichts mehr und das soll ja nicht zum Standard werden. In den nächsten Tagen werde ich sowohl auf alle Änderungen der neuen Seite, wie auch auf die Durchführung von manchen von diesen eingehen.

Es geht voran und aus diesem Grund hat die Anzahl der News in der letzten Zeit auch etwas abgenommen, denn eine Seite komplett neu zu schreiben bedarf nun einmal etwas Zeitaufwand. Denn aus meiner Idee die Seite in HTML5 neu zu erstellen wurde eine grundsätzliche Neuentwicklung von HTML, CSS, PHP und der Datenbank. Dabei setze ich nun auf neue Techniken, aktuelle Entwicklungsparadigmen und vor allem auf einen übersichtlichen und auch noch später verständlichen Code. Denn dies soll mir die spätere Weiterentwicklung vereinfachen. Der Status sieht wie folgt aus:

• HTML5 Layout neu entwickeln - Abgeschlossen
• CSS3 Anpassungen erstellen - Abgeschlossen
• Grafiken anpassen - Zu 0% abgeschlossen
• Datenbank Struktur neu erstellen (MySQL) - Abgeschlossen
• Öffentlichen Bereich neu programmieren (PHP) - Zu 80% abgeschlossen
• Private Bereiche neu programmieren (PHP) - Zu 10% abgeschlossen
• Datenbankkonvertierung auf die neue Struktur (MySQL) - Zu 0% abgeschlossen

Der Plan war es das Design meiner Homepage neu zu gestalten und mittels CSS3 zu optimieren. Dies konnte ich in einer ersten Version wesentlich schneller als gedacht umsetzen. Verbunden mit dem neuen Design war es mein Plan auch etwas an der PHP Struktur im Hintergrund zu machen. Die Änderungen werden allerdings wesentlich umfangreicher und betreffen auch die zugrunde liegende Datenbank. Denn selbige werde ich zusammen mit dem Design und dem PHP Code nun auch überholen. Man merkt einfach das ich die Seite über Jahre aufgebaut habe und mein Grundwissen bezüglich der genutzten Techniken erst mit der Zeit angestiegen ist. Somit gibt es mittlerweile diverse unnütze Felder oder gar ganze Tabellen. Im Bereich der PHP - MySQL Verbindung werde ich die kompletten Bereiche zur Nutzung der Datenbank neu schreiben und auf PHP Data Objects (PDO) open_in_new umsteigen, da die alten DB Routinen ab PHP 5.5 als veraltet gelten. Mit PDO muss ich mir eine komplett neue Syntax für die Nutzung der Datenbank aneignen und auch dies wird natürlich etwas Zeit kosten. Man sieht also aus einem schlichten Re-Design wird eine quasi komplett neue Seite. Somit dürfte der Sprung auf Version 7 die mit größten Änderungen an der Seite seit entstehen beinhalten. Ihr werdet davon wohl vorrangig das neue Design sehen und vielleicht eine Verbesserung der Geschwindigkeit bemerken aber so soll es auch sein. Sollte Interesse bestehen werde ich die geplante Tutorial-Reihe auch auf einige PHP / MySQL Dinge ausweiten.

Der erste Schritt ist getan und das wesentlich schneller als erwartet. Denn nachdem ich die Entscheidung bezüglich der Neuerstellung oder Weiternutzung des Design getroffen hatte, bin ich jetzt auf dem Stand das mein neues Design im Grundsatz steht.

Dabei habe ich die folgende Dinge getan bzw. genutzt:

• HTML5 - Die neue Seite nutzt die neuen HTML5 Tags sofern sinnvoll und soll somit übersichtlicher (im Code) werden.
  • Semantische Objekte - Die neuen Tags, welche anstatt von diversen DIV Objekten genutzt werden, setzte ich entsprechend der Spezifikation ein.
  • Korrekte Tags in Beiträgen - Anstatt von dick geschriebenen Text und ähnlichem wird an entsprechenden Stellen nun ein H Tag oder ähnliches verwendet.
  • Multimedia - Je nachdem welche Quellen eingebunden werden, kommen die neuen AUDIO und VIDEO Tags zum Einsatz.
  • Formulare - In diesem Bereich sieht die Unterstützung in den Browsern für die neuen Input Elemente noch nicht so gut aus aber ich werde sie trotzdem schon einsetzen und mit Fall Back Optionen versehen.
• CSS3 - Ich nutze die Möglichkeiten von CSS3, versuche dabei das Dokument möglichst übersichtlich zu halten und effektiv zu Gliedern.
  • Media Queries - Ein wichtiger Teil der neuen Seite um selbige für Desktop, Tablets und Smartphones gleichermaßen nutzbar zu machen (Responsive Webdesign open_in_new).
  • Gezeichnete Objekte - Durch die neuen Border Eigenschaften werden z.B. Dreiecke bzw. Pfeile nicht als Bilder sondern via CSS eingebunden
  • Schatten - Genau wie die gezeichneten Objekte werden Schatten auf der neuen Seite direkt via CSS eingebunden und nicht als Bilder.
  • Kompatibilität - Ich versuche mit keinen bzw. möglichst wenigen Hacks auszukommen und trotzdem eine große Zahl an Browsern zu erreichen. Allerdings werde ich mich davon entfernen sehr ausgefallene oder alte System zu unterstützen (z.B. IE 6 oder 7).
• Bilder - Aufgrund der umfangreichen Möglichkeiten von CSS3 werde ich versuchen bis auf das Header Bild und die Social Bilder keine Bilder für das Design zu nutzen. Die kommt mir selbst auch zu gute denn ich bin leider unfassbar unfähig in Sachen Design.

Die Eclipse Foundation hat mal wieder einen neuen Release der freien IDE Eclipse online gestellt, wie ich gestern bei Heise lesen konnte open_in_new. Die aktuelle Version hat die Nummer 4.3 und hört auf den Namen Kepler, die nächste Version wird vermutlich den Namen Luna tragen. Innerhalb von Eclipse sind 71 feste Projekte involviert. Insgesamt hat das Projekt mittlerweile ca. 58 Millionen Zeilen Code, was durchaus ein riesiger Wert ist. Die neue Version soll durch eine bessere Performance und weniger Bugs auftrumpfen können. Außerdem gibt es natürlich Unterstützung für verschiedene neue Umgebungen oder APIs, dazu gehört z.B. das Eclipse Web Tools Project 3.5 mit Java EE 7.

Ich selber habe am gestrigen Donnerstag etwas mehr als eine Stunde investiert und mein produktiv genutztes Eclipse aktualisiert. Eigentlich soll man dies ja nicht tun, sondern eine neue frische Eclipse Version herunterladen und dort alles entsprechend einrichten und importieren. Auf diese Art kann man erst einmal prüfen ob alles in der neuen Version noch ohne Problem genutzt werden kann. Ich war etwas wagemutig und habe trotz diverser Plugins ein Update durchgeführt. Meine ersten Tests zeigen keine Probleme und ich konnte ohne irgendwelche Aussetzer weiterarbeiten. Im unteren Teil der News könnt ihr einen kurzen Auszug meiner Plugins sehen, sodass ihr wisst welche Tools vermutlich auch bei euch ohne Probleme weiterhin laufen werden.

Youtube Videos werden quasi überall im Netz eingebunden und natürlich auch auf meiner Seite. Denn Reviews oder Vorstellungsvideos von Hardware oder Gaming Videos vermitteln einfach ein besseres Bild als reiner Text und Bilder. Somit ist es mir auch ziemlich wichtig das ich viele Videos ohne Probleme einbinden kann. Youtube Videos kann man an sich recht einfach einbinden, einfach den Code auf der Youtube Seite des entsprechenden Videos kopieren und alles wird erledigt. Aber dabei werden relativ viele Informationen und Daten von der Youtube Seite geladen und dies bremst bei vielen Videos manchmal sehr stark. Zumindest konnte ich einen messbaren Unterschied feststellen.

Die Lösung für dieses Problem ist weniger Daten direkt von Youtube zu beziehen und etwas mehr Arbeit “selbst” zu erledigen. Dies kann man durch externe Bibliotheken (php-youtube-easy-embed-manager open_in_new, YouTube-Lite-Embed open_in_new) lösen die man auf dem eigenen Webspace ablegt und einbindet. Ich selber wollte aber nicht wegen ein paar Youtube Videos eine extra Bibliothek einbinden, denn dies wiederum war mir etwas zu viel. Die Lösung für mich ist ein kleines selbst erstelltes JavaScript, dieses nutzt die Youtube API und bindet Videos sehr simpel und sparsam ein. Wen interessiert wie ich dies umsetze, der sollte im unteren Teil der News weiterlesen.

Eine Homepage besteht aus vielen Komponenten und damit alles wirklich gut läuft muss man auch möglichst viele dieser Komponenten beachten. Dazu eine kleine Infografik welche einen groben Überblick geben soll aber keinen Anspruch auf komplette Vollständigkeit hat.

open_in_new

Ich werde über eine Reihe von Optimierungen schreiben und heute beginne ich mit den CSS Sprites open_in_new und wie man sie, meiner Meinung nach sehr einfach nutzen kann. Im Bezug auf die obere Grafik sind CSS Sprites sowohl im Server Bereich verankert, wie auch im Coding Bereich. Dies ist dadurch begründet was CSS Sprites eigentlich sind. Denn es handelt sich hierbei um eine optimierte Art viele kleine Bilder, wie z. B. Icons oder kleinere Info-Bilder, auszuliefern die häufig auch mehrfach auf einer Seite angezeigt werden.
Es geht darum den Aufwand beim laden zu reduzieren, indem man nicht sehr viele kleine Bilder lädt, sondern ein großes mit allen Icons und über CSS die einzelnen Bereiche, welche gezeigt werden sollen, angibt. Dies reduziert die Requests welche zum laden der Seite benötigt werden und spart häufig sogar noch Traffic, außerdem werden Bildwechsel flüssiger dargestellt. Bildlich dargestellt wird der im folgenden blaue Bereich um diverse Abfragen verkleinert, während der grüne Bereich nur geringfügig mehr zu tun hat. Wie man das ganze nun umsetzen kann ohne wirklich viel Aufwand zu betreiben erläutere ich im unteren Teil der News.

Bereits seit einiger Zeit überlegte ich mir ob Umfragen nicht praktisch auf meiner Seite wären, auch wenn ich sie wohl nicht so extrem häufig nutzen würde. Aber es wäre einfach ein guter Weg euch, den Lesern die Chance zu geben direkt mitzubestimmen und das ohne das man direkt einen Kommentar schreiben muss. Es fiel die Entscheidung Votes einzubinden, doch nun folgte natürlich die Frage ob ich einen externen Dienst oder eine selbst programmierte Lösung nutzen will. Ersteres ist natürlich wesentlich simpler und die meisten Dienste bieten diverse Funktionen aber die Integrierung in die Homepage ist natürlich meistens nicht optimal. Außerdem melde ich mich ungern bei allen möglichen Diensten im Netz an. Bleibt noch das Ganze selbst zu implementieren und da kam mir zu gute das ich bereits ein Umfragen-Modul im Freunde Bereich eingebunden habe. Dieses ist allerdings an Logins und ähnliches gebunden und benötigte daher einige Anpassungen. Diese habe ich nun umgesetzt und in der nächsten Zeit teste ich ob das System entsprechend funktioniert, sollte also jemand Fehler entdecken bitte ich um Rückmeldung in den Kommentaren. Das Umfrage-System kann sich aktuell noch jederzeit ändern, gerade vom aussehen her. Somit bitte nicht wundern wenn alles plötzlich anders aussieht. Nun aber zur ersten Umfrage, da ich aktuell meine Android App in der finalen Version online stelle überlege ich ob ich auf verschiedene Coding Probleme hier im Blog eingehen sollte. Dafür würde mich interessieren ob so etwas euer Interesse wecken würde oder eher nicht. Also frohes voten und ich hoffe auf rege Beteiligung.

Man schreibt ein umfangreiches Programm und damit man zumindest im Ansatz auch noch nach längerer Zeit versteht was man mal getan hat, kommentiert man brav alles. Das ist natürlich häufig nicht der Fall aber wenn es doch mal so ist so erhält man in Eclipse erst einmal jede Menge rot unterstrichene Worte und das nervt. Dies liegt daran das Eclipse zwar mit einer Rechtschreibkontrolle kommt, diese aber nur auf englisch verfügbar ist. Um jetzt auch die deutsche Sprache einzubauen nutzt man die persönlichen Wörterbücher. Diese sind eigentlich dafür gedacht Wörter zu enthalten die das jeweilige vorhandene Wörterbuch nicht kennt, häufig so etwas wie Steigerungsformen oder einfach Eigennamen. Wir nutzen das ganze nun um eine komplette Sprache einzubinden.

Benötigt wird dafür natürlich ein entsprechend umfangreiches Wörterbuch und dieses habe ich nach einiger Suche mit dem Free German Dictionary open_in_new gefunden. Es enthält über 1.3 Millionen Einträge und liegt im richtigen Format vor. Um das Wörterbuch einzubinden muss lediglich via Window / Preferences das Hauptmenü von Eclipse geöffnet werden. Dort geht es an den Punkt General / Editors / Text Editors / Spelling. In diesem Menü angekommen tragt ihr den Pfad zum Wörterbuch beim Punkt User defined dictionary ein und bestätigt das Ganze nur noch. Nachdem ihr das Menü schließt sollten die roten Striche direkt weniger werden und ihr könnt beginnen fröhlich zu kommentieren.

Heute habe ich die Funktionen meines Blogs etwas erweitert. Denn in der letzten Zeit steigt die Anzahl der Kommentare und auch der Gespräche in diesen. Somit kann es für den einen oder anderen vielleicht hilfreich sein über neue Kommentare informiert zu werden. Aus diesem Grund habe ich nun die Möglichkeit hinzugefügt einzelne News per Mail zu abonnieren. Sobald in einer abonnierten News dann ein Kommentar erstellt wird, erhält man eine E-Mail.

Damit kein Schindluder getrieben wird muss man nachdem man die Anfrage bezüglich eines Abonnements gestellt hat, dass Ganze noch bestätigen. Zu diesem Zweck erhält man an die eingetragene E-Mail Adresse eine Nachricht. Sollte man später kein Interesse mehr an dem Abonnement haben, kann man es mit zwei Klicks wieder löschen. Der Link dazu befindet sich in jeder E-Mail die man im Rahmen des Abonnements erhält. Ich habe das Script ausführlich getestet und hoffe es startet direkt ohne Kinderkrankheiten. Sollten dennoch Fehler auffallen, am besten einfach direkt hier in den Kommentaren melden.