Antary

Kategorie: Coding

Webseite optimieren – HTTP-Requests reduzieren

3. Januar 2010, 12:32 · von · 4 Kommentare

Viele Webseiten besitzen oft lange Ladezeiten. Das kann mitunter viele Ursachen haben. Ein häufig augtretendes Problem ist aber, dass oft recht viele HTTP-Requests gemacht werden werden. Heutzutage benötigen größere Seiten locker 40 Requests und mehr.

Es muss für jedes Bild, jede JS- und CSS-Datei eine neue HTTP-Verbindung zwischen Browser und Server geöffnet werden. Da viele Browser oft nur 2-4 parallele HTTP-Requests zulassen, ist dies ein deutlicher Flaschenhals.

Um eine Beschleunigung des Ladevorgangs zu erreichen, könnte man nun entweder die Anzahl der parallelen Requests erhöhen oder die Anzahl der benötigten Requests verringern.

Eine recht einfache Lösung, um die Requests bereits als Developer niedrig zu halten, ist die Kombination von CSS- und JavaScript-Dateien. Auch nachträglich lassen sich mit entsprechenden PHP-Tools deutliche Performancezuwächse erziehlen.

Empfehlenswert ist vor allem minify. Es fügt alle CSS- und JavaScript-Dateien zu jeweils einer Datei zusammen. Beispielsweise hat man im Ursprungszustand drei CSS- und sieben JavaScript-Dateien eingebunden. minify macht daraus eine CSS- und eine JavaScript-Datei. Zusätzlich werden unnötige Leerzeichen und Tabs entfernt und die Dateien werden gzip-kodiert mit optimalen HTTP-Cache-Headern gesendet.
Den Download und eine Dokumentation zu dem Tool findet ihr direkt auf der minify-Homepage.

Kategorien: Coding Internet

XHTML 2.0 wird eingestellt – es lebe HTML 5

3. Juli 2009, 11:04 · von · 0 Kommentare

Zum Jahresende wird die World Wide Web Consortium (W3C) seine XHTML-2-Arbeitsgruppe schließen. Die Ressourcen sollen allesamt auf HTML 5 konzentriert werden, was die Entwicklung deutlich beschleunigen dürfte.

Dennoch wird es in Zukunft eine XML-basierte Formulierung von HTML geben. Die HTML 5 Spezifikation enthält sowohl einen Teil zur XML-Darstellung als auch zur text/html-Darstellung. An beiden will das W3C im Rahmen der HTML-Arbeitsgruppe weiterarbeiten, so dass die nächste Version einer in XML formulierten Version von HTML voraussichtlich in der HTML-5-Spezifikation enthalten sein wird.

Eine sehr positive Nachricht, wie ich finde. Man vermeidet zwei unterschiedliche Spezifikationen und kann gleichzeitig auf eine schnellere Entwicklung hoffen.

Kategorien: Coding HTML5 & CSS3

Basis Theme für WordPress

15. Juni 2009, 21:23 · von · 0 Kommentare

Wer ein eigenes Theme für WordPress entwickelt oder entwickeln möchte, weiß am Anfang meistens nicht wirklich wo er anfangen soll. Frank Bültge, seinerseits Fachmann im Bereich WordPress, hat in seinem Blog nun ein Basis Theme bereit gestellt.  Es ist mit der aktuellen Version 2.7 bzw. 2.8 von WordPress kompatibel. Ebenso besteht Abwärtskompatibilität bis Version 1.5.

Es bringt keinerlei überflüssiges Markup mit und kann optimal als Grundlagen eines eigenen Themes genutzt werden.

Zur Projektseite des Basis Themes
SVN Repository mit Diskussionsplattform

Kategorien: Coding Wordpress

Funken-Effekt mit jQuery und rf.Sparks

14. Juni 2009, 12:52 · von · 1 Kommentare

Matt Kirman hat ein jQuery-Plugin geschrieben, welches eine Art Funken-Effekt erzeugt. Das Plugin erstellt eine Reihe von DIVs mit Bildern darin, die anschließend animiert werden und sich dementsprechend bewegen.

Alles was man dazu benötigt ist jQuery und das rf.Sparks Plugin, welches man bei GitHub in der aktuellen Version vorfinden kann.

(mehr …)

Kategorien: Coding Tutorials

E-Mail-Adressen mit jQuery schützen

9. Juni 2009, 18:53 · von · 3 Kommentare

Immer mehr Bots durchsuchen das Internet nach E-Mail-Adressen. Möchte man beispielsweise im Impressum seine Adresse hinterlegen, sollte man sie schützen bzw. tarnen, sodass Bots nichts damit anfangen können.

Es existieren viele Möglichkeiten seine E-Mail-Adresse zu schützen, doch alle haben Nachteile:

  1. Methoden sind nicht effizient (Unicode, HEX)
  2. Benutzerfreundlichkeit bleibt auf der Strecke (Bild, Nutzung von Phrasen wie PUNKT)
  3. Nicht für alle Browser geeignet (CSS-Techniken)

Mittlerweile setzt fast jede Homepage Javascript voraus und es sollte nicht mehr viele Leute geben, die Javascript generell deaktiviert haben. Diese Eigenschaft kann man sich zunutze machen und seine E-Mail-Adressen per Javascript schützen. Für den minimalen Anteil mit deaktiviertem Javascript kann man noch eine Ausweichlösung einbauen.

Als erstes benötigen wir den HTML-Code:

[javascript]<a class="email" rel="tobi/antary.de" href="#"></a>;
<noscript>tobi (AT) antary (PUNKT) de</noscript>[/javascript]

Falls Javascript deaktiviert ist, erscheint “tobi (AT) antary (PUNKT) de”.

Anschließend wird jQuery eingebunden und das erforderliche Javascript ausgeführt:

[javascript]<script type="text/javascript" src="/PfadZu/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

// E-Mail Adresse anzeigen
$(‘a.email’).each(function() {
e = this.rel.replace(‘/’,’@’);
this.href = ‘mailto:’ + e;
$(this).text(e);
});

});
</script>[/javascript]

jQuery sucht nach allen Links mit der Klasse “email”. Nun wird bei jedem dieser Links das “rel-Attribut” geparst und der “Slash” durch ein “At-Zeichen” ersetzt. Anschließend wird das “href-Attribut” mit dem korrekten E-Mail-Link versehen und die Adresse als Linkname eingefügt.

Kategorien: Coding Tutorials