Web Developer Blog

Coding, made in Germany.

15. Mai 2012
von Leo
Keine Kommentare

Kleine SEO Tipps

Ich habe in den letzten Wochen bereits zwei kleine Tutorials über “SEO URLs” geschrieben (Teil1 und Teil2), doch die URLs eurer Webseite sind nur ein Teil des großen ganzen.

SEO geht natürlich noch viel weiter – Suchmaschinen wie Google achten nämlich nicht nur auf doppelte Seiten/Inhalte und leserliche URLs sondern auch auf bewusstes “verstecken” von Elementen (weiße Schrift auf weißem Hintergrund) oder der Barrierefreiheit eurer Seite (ist die Seite sauber Strukturiert, werden für Listen die Listen-Elemente statt einfacher Spiegelstriche benutzt, …).

Heute möchte ich ein paar kleine Tipps zum groben Aufbau eurer Seite sowie dem Content geben.

Bevor wir eine HTML Seite mal von oben nach unten durchgehen, möchte ich euch von einer Regel erzählen die ihr auf beinahe alle Bereiche eurer Seite anwenden könnt und sollt:

Beschränkt euch auf das Wesentliche und benutzt eure Keywords.

Weiterlesen »

8. Mai 2012
von Leo
Keine Kommentare

Impress.js, die etwas andere Präsentation

Guten Abend zusammen, Heute möchte ich ein sehr entspanntes Thema ansprechen – Präsentationen mit impress.js.

Vielleicht erinnern sich nun einige unter euch an ihre Schulzeit zurück, als es hieß “Zu diesem Thema werdet ihr eine Präsentation vorbereiten (…)”. Wie gerne hätte ich damals ein Tool wie impress.js (und HTML5/CSS3 ;) ) gehabt. Weg von Powerpoint, OpenOffice Impress, LaTeX und den anderen Programmen und Formaten!

Impress.js macht von aktueller Technik Gebrauch und verbindet HTML5, CSS3 und Javascript zu einer sehr dynamischen Präsentation die komplett im Browser abgespielt wird und (auf Wunsch) mit sehr außergewöhnlichen Animationen protzt.
Die Idee ist nicht neu, so bietet der Dienst Prezi bereits seit längerem ähnlich animierte Präsentationen an, allerdings wird hier Flash benutzt und es gibt einige Begrenzungen sofern man keine Lizenz erwirbt.

Die Lösung von Bartek Szopka dagegen ist für jeden frei verfügbar und verfügt sogar über 3D Animationen (mit Hilfe von CSS Transforms) – Den Quellcode bekommt ihr auf github.

Weiterlesen »

1. Mai 2012
von Leo
Keine Kommentare

Interaktive Diagramme für alle Browser mit jqPlot

Hallo und willkommen zu einem neuen Blogposting!
Jeder von uns kommt früher oder später mal an den Punkt, an dem wir ein Diagramm darstellen möchten – Sei es für die einfache Darstellung von Daten oder komplexer Algorithmen, das warum soll nicht mein Thema sein.
Ich möchte mich stattdessen um das wie kümmern! Wir Entwickler stehen nun wieder vor der Qual der Wahl… Plugin? Selbst machen? Statisch oder generisch?

Weiterlesen »

24. April 2012
von Leo
6 Kommentare

Processwire, das geniale OpenSource CMS – Update

Heute möchte ich euch ein großartiges CMS (Content Management System) vorstellen: ProcessWire.

ProcessWire 2.2 ist kostenlos (GNU GPL v2 Lizenz) verfügbar und bietet eine offene API (und Dokumentation) um das entwickeln von Webseiten, Modulen und Templates möglichst einfach zu gestalten. Dieses CMS hat mir auf Anhieb sehr gut gefallen – Es ist sauber geschrieben, einfach zu benutzen, extrem modular und bietet eine nahezu perfekte API Dokumentation! Außerdem gibt es noch eine aktive Community und extrem viele Plugins (insgesamt über 100) die eigentlich kaum noch Wünsche offen lassen!

Auch wenn ich selbst erst “relativ kurz” mit ProcessWire arbeite möchte ich im heutigen Posting einige Codebeispiele vorstellen. Wenn ihr mehr über die ProcessWire API lernen wollt besucht bitte die offizielle Doku.

Weiterlesen »

17. April 2012
von Leo
Keine Kommentare

Performance von Schleifen und Frontends

Hallo zusammen!
Im heutigen Beitrag möchte ich kurz ein paar Sätze über die performance von Schleifen und euren Frontends schreiben. Beide hängen in der Regel nämlich voneinander ab und können schnell zu wahren performance-fressern ausarten!

Ich möchte kurz mit den Schleifen beginnen, denn da gibt es diverse Tricks mit denen wir arbeiten können – Ich möchte mit einem einfachen Beispiel anfangen:
Wir gehen davon aus das unsere Variable “$grosses_array“, wie der Name schon sagt, ein großes Array mit etwa 1000 Elementen ist.

// Ein negativ Beispiel für eine FOR-Schleife

for ($i = 0; $i < count($grosses_array); $i ++)
{
    // Weitere Logik...
}

Folgender Fehler kostet uns Wertvolle performance:
Die count() Funktion wird innerhalb der Schleifenprüfung aufgerufen – Das hat zur Folge, dass für jede Prüfung (und davon haben wir immerhin 1000 Stück) die Funktion ausgeführt wird.

// Das verbesserte negativ Beispiel.

$temp = count($grosses_array);
for ($i = 0; $i < $temp; $i ++)
{
    // Weitere Logik...
}


Im zweiten Beispiel haben wir die count() Funktion vor der Schleife ausgeführt – Hier wird sie nur ein einziges Mal aufgerufen. Der performance-Gewinn ist enorm! Je nach Logik innerhalb der Schleife (ggf. existiert in der Schleife ja eine weitere Schleife?) kann die Geschwindigkeit des Skripts um einige hundert Prozent erhöht werden! Die Benchmarks auf phpbench.com liefern euch zwar konkrete Zahlen – Allerdings solltet ihr beachten das ein reiner “Benchmark” nur wenig mit Situationen aus dem echten Leben gemein hat.

Weiterlesen »

10. April 2012
von Leo
Keine Kommentare

Tutorial: Originelle 3D Effekte Dank zepto.js

Hallo zusammen, im heutigen Eintrag möchte ich erneut auf das schlanke Zepto.js Framework eingehen und ein kleines Tutorial vorstellen!

Ziel des Tutorials ist es, mit Hilfe von CSS3 und zepto.js Elemente auf unserer Webseite mit einem 3D “Umdreh-Effekt” auszustatten! Idealerweise verbinden wir diese Effekte mit den Gesten, die uns ein mobiles Gerät zur Verfügung stellt (z.B. Elemente durch “wischen” umdrehen) – Für Desktop Rechner bauen wir einen Fallback (Klick auf das Element) ein.

Zunächst aber ein paar wichtige Punkte:

  • Zepto.js animiert mit Hilfe von CSS (-Transitions) und wird damit nur auf aktuellen Browsern (Chrome 5+, Safari 5+, FF 4+) funktionieren.
  • Die 3D Effekte funktionieren bisher nur in wenigen Browsern ohne Probleme
  • Zepto.js ist aktuell noch in der Beta-Phase! (Ich meine aber gelesen zu haben das in den kommenden Tagen ein neues Release ansteht!)

Aber genug der Vorworte, fangen wir an zu entwickeln!

Weiterlesen »

3. April 2012
von Leo
Keine Kommentare

CSS Rastersysteme für verschiedenste Bildschirmauflösungen

Diese Woche möchte ich einen kleinen Eintrag über einige verschiedene CSS Rastersysteme (CSS Grid System) schreiben. Und zwar über diejenigen, die uns Web-Entwicklern dabei helfen den Inhalt unserer Webseiten bei verschiedensten Bildschirmauflösungen immer optimal darzustellen (funktioniert bis hin zu Smartphones).

Viele Entwickler setzen bei diesen Systemen auf ein 12 spaltiges Layout – Denn aus diesen 12 Spalten lassen sich problemlos die folgenden gängigen Layouts erstellen:

  • Einspaltig (12)
  • Zweispaltig (6 + 6)
  • Dreispaltig (4 + 4 + 4)
  • Vierspaltig (3 + 3 + 3 + 3)

Es sind auch Mischformen wie “8 + 4 Spalten” möglich – Hauptsache die Summe der Spalten ergibt 12! Einige Rastersysteme setzen sogar auf 16 Spalten.

Weiterlesen »

27. März 2012
von Leo
Keine Kommentare

Tutorial: Einfache SEO URLs – Teil 2

Willkommen zum zweiten Tutorial bezüglich “SEO URLs”. Im Gegensatz zum ersten Tutorial möchte ich Heute etwas genauer auf die kleinen Feinheiten eingehen die es zu beachten gilt.

Hier ein paar Stichpunkte die unbedingt einzuhalten sind, wenn die URL Suchmaschinen-freundlich sein soll:

  • Es dürfen nicht mehrere URLs auf die gleichen Inhalte linken (Duplicate content).
  • Alte links (z.B. aus Twitter, Facebook, alte Blogs) sollten immer auf die entsprechend neuen Seiten verlinken (per 301 Header).
  • Keine Groß- und Kleinschreibung mischen
  • Keine Sonderzeichen verwenden

Ich denke mit diesen vier Punkten ist das wichtigste gesagt! Aber natürlich gehe ich auf diese einzelnen Punkte noch etwas genauer ein… Am Ende möchte ich eine kurze Funktion vorstellen um einen kompletten String in ein URL-taugliches Format zu bringen.

Weiterlesen »

22. März 2012
von Leo
Keine Kommentare

Der Web Developer Blog mit neuer Domain!

Eine kurze Ankündigung – Der Web Developer Blog ist ab sofort unter den Domains web-developer-blog.de und web-developer-blog.com erreichbar :)
Die alte Domain, blog.leonardfischer.de, bleibt zwar erhalten, leitet aber auf die neuen weiter.

Außerdem möchte ich mich in den nächsten Einträgen etwas mehr auf Benchmarks und Tutorials konzentrieren. Solltet ihr Wünsche oder Ideen haben würde ich mich freuen davon zu hören – Also ab an die Tastatur und fleißig Kommentare schreiben ;)

Ich hoffe auf diesem Weg mehr Leute da draußen zu erreichen und den Blog weiter nach vorne bringen zu können!

20. März 2012
von Leo
2 Kommentare

PHP 5.4.0: Traits

Hallo und willkommen zum zweiten Posting bezüglich der neuen PHP 5.4 Features. Heute möchte ich mich etwas genauer mit den “Traits” auseinander setzen. Traits sollen uns helfen Code wiederzuverwenden – Bisher ist es in der Objekt orientierten Programmierung mit PHP nur möglich Methoden von übergeordneten Klassen zu erben. Das “Problem” an der Sache: Eine Klasse kann nur von einer anderen Klasse erben. Hier sollen die Traits Abhilfe schaffen!

Mit Traits ist es möglich eine “Methodensammlung” an beliebig viele PHP Klassen zu übergeben – Es ist zudem möglich innerhalb einer Klasse beliebig viele Traits zu nutzen.

Weiterlesen »