Dass das mobile Zeitalter bereits da ist, merkt man am grossen Angebot der Endgeräte. IPhones, Blackberrys, Palms usw. Die Netzbetreiber locken mit immer erschwinglicheren Angeboten. Es gibt sogar eine .mobi Domainendung.

Durch immer grösser werdende Handydisplays und ausgereiften Bedienmöglichkeiten wird es auch immer einfacher Internetseiten zu benutzen. Dabei spielt es kaum eine Rolle, wie „gross“ sie sind. Dank Zoomfunktionen, kann man trotzdem alles gut erkennen.

Ich will hier aber nicht von den Fähigkeiten der Handys reden, sondern von den Möglichkeiten der mobilen Internetseiten.

Was haben Sie denn nun für Vorteile?

• Meistens einfache zu bedienen/navigieren..
• In der Regel werden weniger Daten übermittelt, was kürzere Ladenzeiten zur Folge hat.
• Die Inhalte sind meistens auf das Wesentliche reduziert
• Man respektiert die „reduzierten“ Möglichkeiten der Mobiluser.

Auf was sollte man bei einer mobilen Version achten?

• Der Inhalt sollte für mobile Endgeräte entwickelt worden sein.
• Javascript und Flash sollte man möglichst verbannen.
• Wenige Bilder, da es die zu übertragende Datenmenge „unnötig“ aufbläht.
• Keinen „Schnickschnack“ auf der Seite.
• Grosse Schaltflächen und Eingabefelder, da meist über Touchscreens bedient wird.

Wer sollte eine mobile Internetseite betreiben?

• Suchmaschinen.
• Nachrichtenseiten.
• Banken (aber ohne den Bereich Onlinebanking).
• Blogs mit Ihren Einträgen in Listenform.
• Öffentliche Einrichtungen wie die Post und Ämter um Informationen wie Öffnungszeiten und Preise anzubieten.
• Bus-, Bahn- und Fluglinien.
• Ärzte und Krankenhäuser mit Ihren Öffnungszeiten und Notfallrufnummern.
• Hotels, Restaurants und Kinos, um schnelle Reservierungsmöglichkeiten zu bieten.
• Wetterseiten.
• Karten- und Navigationsdienste.
• Micropayment-Anbieter.

Ich werde mir zu diesem Thema weiterhin Gedanken machen und wahrscheinlich einen weiteren Artikel darüber schreiben, wie man seinen Blog in einer mobilen Version ausliefern kann.

Habe ich etwas vergessen? Wenn, ja, dann freue ich mich über ein paar Kommentare.

Bis zum nächsten Artikel,

Patrick

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

Um den Webserver die Daten komprimiert ausgeben zu lassen, schreibt man folgendes in die .htaccess Datei:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/x-javascript application/x-httpd-php application/rss+xml application/atom_xml text/javascript

Nähere Informationen findet man in der Dokumentation zu mod_deflate.

Gruss,
Patrick

Heute stand ich vor dem Problem, dass ich eine Volltextsuche mit Coldfusion 8 auf einer MS-SQL 2008 Datenbank realisieren musste. Im ersten Moment dachte ich, dass darin kein Problem besteht. Spätestens als ich versuchte eine Volltextsuche inklusive Stopwort (Wörter wie in, um, und, mit, bei, uns, usw.) mit Coldfusions <cfquery> zu machen, stiess ich auf leere Resultsets. Das gleiche Query im QueryAnalizer oder im SQL Server Management Studio brachte mir die gewünschten Ergebnisse.

Das Problem ist, dass MS-SQL 2008 zwei Resultsets zurückliefert. Das erste ist leer bzw. es enthält die Information, dass der SQL-Server mindestens ein Füllwort gefunden hat und es darum ignoeriert und das zweite enthält das gewünschte Ergebnis der Suche. Nachdem Coldfusions DataDirect Treiber diese “Information” nicht verarbeiten kann, geht es einfach davon aus, dass das Ergbnis ein leeres Resultset ist. Mit diesem Wissen stand ich vor einem neuen Problem: Wie bekomme ich das zweite Resultset von der Abfrage?

Lösung

Die Lösung ist relativ einfach. Ich speichere zunächst mein Query mit Hilfe von <cfsavecontent> in eine Variable. Danach rufe ich die gespeicherte Prozedur (stored Procedure) “sp_executesql” auf und übergebe als Parameter mein zuvor gespeichertes Query.

Etwas Code hilft:

<cfset mySearchString = "Hund, Katze und Maus" />
<cfsavecontent variable="queryString">
	<cfoutput>
SELECT * FROM CONTAINSTABLE(searchTable,searchColumn, '#mySearchString#', LANGUAGE 'GERMAN')
	</cfoutput>
</cfsavecontent>

<cfstoredproc datasource="myDB" procedure="sp_executesql">

      <cfprocparam  cfsqltype="CF_SQL_VARCHAR" value="#queryString#">
      <cfprocresult name="VARIABLES.result1" resultset="1">
      <cfprocresult name="VARIABLES.result2" resultset="2">

</cfstoredproc>

<cfdump var="#VARIABLES#">

Wenn VARIABLES.result2 gesetzt ist und das gewünschte Resultset enthält, dann wurde mit einem Stopwort gesucht. Ansonsten steht das Resultset in VARIABLES.result1.

Jetzt muss nur noch eine Sache geklärt werden: Wie macht man das Query resistent gegen SQL-Injection-Attacken? Ich habe da schon eine Idee. Diese werde ich aber erst nach erfolgreichem Testen hier anfügen, um nicht für unnötige Verwirrung zu sorgen.

Ideen? Verbesserungsvorschläge? Bitte einen Kommentar hinterlassen.

Danke und Gruss,
Patrick

Wer das Apple Betriebssystem OSX 10.6 (Snow Leopard) benutzt und Skype 2.8, könnte evtl. Probleme mit der iSight Kamera vom iMac bekommen. Dafür ist ein Codec von Quicktime verantwortlich. Dieser scheint nicht kompatibel mit dem neusten OSX von Apple zu sein. Sobald Skype eingeschaltet wird funktioniert der Videochat nicht mehr. Anstatt der Bildübertragung sieht man nur noch einen grünen Bildschrim. Folgende Lösung erscheint mir am sinnvollsten und funktioniert auch wirklich.

1. Skype schliessen.
2. Ordner /Library/Quicktime öffnen.
3. Folgende Datei zuerst sichern, dann löschen: CamCamX5.component.
4. Skype starten.

Dies sollte zum gewünschten Ergebnis führen. Bitte Erfahrungsberichte in den Kommentaren hinterlassen.

Gruss,
Rupert

Damit eine Session in Coldfusion erfolgreich gelöscht wird, muss man zunächst das Session-Cookie löschen und danach die Session auf dem Server für ungültig erklären. Auf unseren Coldfusion8-Servern haben wir die Nutzung von JSESSIONID aktiviert.

Folgender Code entfernt eine Session:

<cfcookie expires="now" name="JSESSIONID" value="" />
<cfset getPageContext().getSession().invalidate() />

Diese zwei Zeilen funktionieren mit Coldfusion 7 und 8. Ob es auf früheren oder späteren Versionen möglich ist, weiss ich nicht, da ich nicht testen kann.

Patrick

Update: Mittlerweile ist die Webseite wieder in vollem Umfang erreichbar.

Scheinbar wurde die Domain extjs.com gedropped. Somit ist sie nicht mehr erreichbar und damit auch die Dokumentation, der Premium Support, das Forum und die Downloadmöglichkeiten.

Damit man trotzdem keinen Entwicklungsengpass bekommt und Antworten auf seine Fragen findet, kann man die Dokumentation unter http://extjs.net/deploy/dev/docs/ benutzen. Generell ist unter http://extjs.net/ eine “Kopie” der .com Seite. Leider verweisen viele Links auf extjs.com und damit ins Leere.

Evtl. werde ich auf der Domain http://extjs.li/ ein Ersatzforum einrichten. Bitte sagt mir in den Kommentaren was ihr davon haltet.

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

Ich hatte gestern nach einer Lösung gesucht, mit der ich meine Bootcamp Partition vergrössern kann, ohne Windows auf dem Mac neu installieren zu müssen. Hier eine schnelle und sehr einfache Lösung.

1. Zuerst muss die FAT 32 Partition in NTFS umgewandelt werden. Dies wird mit dem Befehl convert c: /fs:ntfs (Console unter Windows) gemacht.
2. Mit Winclone (Freeware für Mac) ein Image der Windows Umgebung auf eine externe Festplatte speichern. http://www.twocanoes.com/winclone/
3. Mit dem Bootcamp Assistenten die Partition löschen und eine neue  mit der gewünschten Grösse anlegen.
4. Die Installation nicht ausführen, sondern abbrechen.
5. Mit Wincolne das eben erzeugte Image wieder auf die neu erstelle Partition einspielen.
6. Windows unter Mac starten und alles ist wieder so wie früher, einfach mit mehr Speicherplatz.

In diesem Sinne viel Erfolg!

Gruss Rupert S.

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.

Vorbereitungen

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.

Aufbau der HTML Seite

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

Ein Logo, das nicht auf die Startseite verlinkt empfinden die meisten Benutzer als störend. Dabei wäre es für einen Webdesigner doch extrem einfach und schnell  umzusetzen. User klicken mittlerweile intuitiv auf das (Firmen)Logo, das im besten Fall oben links platziert ist, um so wieder an den Anfang zu gelangen. Man kann behaupten, dass er es fast schon so erwartet.

Der Trend zu den „Home“ oder „Start“ Schaltflächen schwindet, weil ein Besucher der Webseite einfach das Logo klickt. Zumindest versuchet er es. Umso enttäuschter fühlt er sich (meist unbewusst), wenn es nicht funktioniert hat. Und sind wir ehrlich: besonders schön oder hilfreich sind die beiden erwähnten Navigationspunkte auch nicht.

Mein Rat an alle Webmaster: Verlinkt eure Logos mit der Startseite und helft eurem User. Er wird euch die verbesserte Usability danken und sich auf euren Seiten wohler fühlen, da er eine erwartete Funktion nutzen kann.