Damit der Webserver weniger Daten an den Webbrowser übermitteln muss, sollte man die Daten komprimiert ausliefern. So müssen weniger Daten aus dem Internet geladen werden, was wiederum zu schnellerer Ladezeit führt. Es gibt mehrere Möglichkeiten die Daten komprimiert auszugeben. Hier will ich aber nur eine Methode erklären: mittels .htaccess
Ich freue mich darüber, dass ich einen neuen URL Shortener vorstellen darf. Es handelt sich dabei um http://xurl.ch/ Mit diesem URL Shortener lassen sich innehalb von Sekunden, sehr lange Internetadressen in kurze Xurls mit nur 20 Zeichen umwandeln. Nützlich wird eine solche URL, wenn nur kurze Nachrichten verfasst werden können, wie z.B. in SMS und Twitter. Die kurze Xurl darf als eine Weiterleitung verstanden werden. Denn genau das tut sie – weiterleiten. Natürlich wurde das Design an das der Schweiz angelehnt. Immerhin sind wir die ersten, die einen Swiss-Made-URL-Shortener ins Leben gerufen haben und darauf sind wir stolz.
Über Kommentare und Verbesserungsvorschläge würden wir (die Macher) uns sehr freuen.
Patrick
Update: ExtJS 3.1 ist mittlerweile erschienen und lässt sich auf dieselbe Art und Weise installieren wie sein Vorgänger. Es müssen nur die Pfade entsprechen angepasst werden.
ExtJS ist ein in Javascript programmiertes Ajax-Framework, das zum Erzeugen von “echten” Webanwendungen verwendet werden kann. Es bietet nette Features wie Windows, Grids, schöne MessageBoxes und vieles mehr an. In diesem Artikel möchte ich zeigen, wie einfach das Framework zu installieren und zu nutzen ist.
Damit eine erste kleine “Hallo Welt” Applikation mit ExtJS geschrieben werden kann, sind einige Voraussetzungen zu erfüllen. Zunächst muss die ExtJS Bibliothek heruntergeladen und in ein Verzeichnis entpackt werden. Ich schlage eine Verzeichnisstruktur wie auf dem Bild vor:
Ausserdem empfehle ich dringend Firebug. Ein Webentwickler sollte heutzutage ohne Firebug Plugin nicht mehr arbeiten. Es erleichtert das Finden von Fehlern, das direkte Anpassen von CSS und HTML und das Analysieren vom Datenverkehr zwischen Server und Browser. Jetzt wird noch ein Webserver zum hosten und ein FTP-Zugang zum speichern der HTML-Dateien benötigt.
Ich gehe ab hier davon aus, dass grundlegende HTML-Kenntnisse vorhanden sind. Damit ExtJS überhaupt funktionieren kann, braucht man natürlich eine HTML-Seite, die das Framework lädt. Nachfolgend ein kleines Grundgerüst, dass ExtJS nutzbar macht.
<html> <head> <link rel="stylesheet" type="text/css" href="/js/ext-3.0.3/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="/js/ext-3.0.3/resources/css/xtheme-blue.css" /> <script src="/js/ext-3.0.3/adapter/ext/ext-base.js" type="text/javascript"></script> <script src="/js/ext-3.0.3/ext-all-debug.js" type="text/javascript"></script> <title>Tutorial: ExtJS HTMl-Grundgerüst</title> </head> <body> Willkommen beim ExtJS Tutorial: Wie richtet man ExtJS 3.0 ein. </body> </html>
Zunächst müssen wir die CSS-Dateien laden, damit die ExtJS-Elemente auch so aussehen, wie sie sollen. Ich habe mich für das blaue Theme entschieden. und daher mit
<link rel="stylesheet" type="text/css" href="/js/ext-3.0.3/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="/js/ext-3.0.3/resources/css/xtheme-blue.css" />
erst das “Grund-CSS” geladen und danach aufbauend das XTheme-Blue geladen. Evtl. werde ich ein Tutorial verfassen, wie man seine eigenen Themes erstellt und in ExtJS einbindet.
Die Zeilen
<script src="/js/ext-3.0.3/adapter/ext/ext-base.js" type="text/javascript"></script> <script src="/js/ext-3.0.3/ext-all-debug.js" type="text/javascript"></script>
laden zunächst den ExtJS Basisadapter und danach die gesamte ExtJS Bibliothek in der Debugversion. Während der Entwicklung sollte die Debugversion verwendet werden, da sie in Firebug (oder jeder anderen Javascriptkonsole) “schönere” Fehlermeldungen anzeigt. Sobald das Projekt in einer Produktivumgebung laufen soll, ist es ratsam ext-all.js zu verwenden. Diese Version ist kompakter und enthält nur sehr stark verkürzte Fehlermeldungen. Ausserdem wurden die Variablennamen häufig auf einen Buchstaben verkürzt und unnötige Zeichen wie Leerzeichen entfernt. Diesen Vorgang des “Komprimierens” nennt man auch minifying. Es verringert die Ladezeit erheblich und die Geschwindigkeit beim Ausführen von ExtJS wird um einiges höher.
Nachdem das HTML-Grundgerüst steht und es auf einen Webserver gespeichert wurde, wird die Seite aufgerufen. Ich habe sie in das Rootverzeichnis (oberhalb vom js-Verzeichnis) als index.html gespeichert. Wenn in Firebug unter dem Reiter “Netzwerk” das Resultat in etwa so aussieht, wie auf dem Screenshot, dann ist ExtJS installiert und bereit genutzt zu werden.
Damit die versprochene “Hallo Welt” im Browser erscheint, werde ich die den body-Bereich der Webseite etwas erweitern. Und zwar so:
<script type="text/javascript">
Ext.onReady(function() {
Ext.MessageBox.show({
title : 'Willkommen zu ExtJS',
msg : 'Hallo Welt!',
buttons : Ext.MessageBox.OK,
minWidth : 250,
modal : false
});
});
</script>
Das Ergebnis diese kleinen Code-Schnipsels sieht dann so aus:
Was dieser Code genau macht, werde ich in einem weiteren Tutorial erläutern, da dieses hier ausschliesslich dem Einrichten von ExtJS gewidmet ist.
Verbesserungsvorschläge, Kritik oder Lob bitte als Kommentar hinterlassen. Um immer auf dem Laufenden zu bleiben, einfach kostenlos und unverbindlich den RSS-Feed abbonieren. Danke für die Mithilfe,
Patrick