Sencha Touch – Ein Erfahrungsbericht

Sencha Touch League4u iPhone HomeSchon seit längerem stört es mich, dass es sehr schwierig ist League4u.de mit einem Smartphone (in meinem Fall das iPhone) zu bedienen. Es war schnell klar: Eine für Smartphones optimierte Version musste her! Allerdings ist es gar nicht so einfach die Elemente zur Steuerung einer solchen Anwendung für so einen kleinen Bildschirm zu programmieren. Ich habe mich daher entschieden League4u mit einem Framework für mobile Webapplikationen umzusetzen.

Sencha Touch League4u iPhone AufstellungMir war ziemlich schnell klar, dass ich mit Sencha Touch arbeiten will, weil es schick aussieht und die Steuerungselemente professionell wirken. Das User Interface ist dem iPhone sehr gut nachempfunden und lässt sich auch ähnlich flüssig bedienen. Viele der Bedienelemente wurden vom iPhone sogar direkt entnommen. Und da Sencha Touch in JavaScript programmiert ist, muss ich keine neue Sprache lernen und die Anwendung bleibt plattformunabhängig.

Gewöhnungsbedürftig ist dagegen der Aufbau einer Applikation. Die Elemente werden ineinander verschachtelt. Es gibt zum Beispiel ein Tabmenü und diesem können so genannte Items hinzugefügt werden. Ein Item kann ein Panel sein, eine Liste, ein Formular o.Ä., welches wiederum mehrere Items beinhalten kann. Wenn man sich aber auf diesen Aufbau einlässt, kommt man relativ schnell damit klar.

Wie bei jedem Framework ist eine gewisse Einarbeitungszeit vonnöten, aber Dank der vielen Beispiele aus der Kitchen Sink Demo und der Video-Tutorials kann man schnell Erfolge verbuchen. Ich glaube wer bereits mit ExtJS (dem JavaScript Desktop-Framework von Sencha) gearbeitet hat, dem fällt der Einstieg leichter, weil der oben beschriebene Aufbau bei beiden Frameworks sehr ähnlich ist. Bei mir war das nicht der Fall, dementsprechend lange hat es gedauert, bis ich mich eingearbeitet habe. Trotzdem bleibt die gute und vollständige Sencha Touch Referenz ein ständiger Begleiter während der Entwicklung.

Fazit

Ich bin mit Sencha Touch sehr zufrieden. Die Programmierung ist komplett Objektorientiert und daher entsprechend sauber. Meine League4u-Applikation (befindet sich derzeit in der Testphase) sieht sehr professionell aus, lässt sich leicht bedienen und ist mit vergleichbar wenig Aufwand entstanden. Das einzig negative ist, dass die zur Verfügungstehenden Elemente begrenzt sind, aber ich bin damit trotzdem gut ausgekommen. Sencha Touch bekommt von mir daher eine fette Empfehlung für alle, die eine professionelle mobile Webapp bauen wollen!

Sencha Touch League4u iPhone Statistiken

HTML/CSS > Unisichtbarer Text

Manchmal braucht man einen unsichtbaren Text, der nur von Suchmaschinen (aus SEO-Gründen) oder Screenreadern gelesen werden kann, normale Besucher der Webseite sollen stattdessen ein Bild sehen können. Um das zu bewerkstelligen verwenden viele die CSS-Eigenschaft display: none;. Die wenigsten wissen allerdings, dass Google den Inhalt anschließend nicht mehr interessiert und auch die meisten Screenreader ignorieren den Text einfach.
Also muss eine andere Lösung her: Opacity. Mit dieser CSS-Eigenschaft lässt sich der Text durchsichtig darstellen und wird somit von Google als normaler Text behandelt.

Beispiel: Eine Überschrift soll den Namen der Webseite enthalten, der normale Seitenbesucher soll aber stattdessen das Logo der Webseite sehen können. Unser HTML-Code dafür sieht so aus:

View Code HTML5
<h1 id="logo"><span>Unsichtaber Name der Webseite</span></h1>

Über CSS wird der Text durchsichtig gemacht und das h1-Element bekommt als Hintergrundbild das gewünschte Logo:

View Code CSS
#logo {
	background: url(alternativ-bild.png);
	width: 200px;
	height: 203px;
}
#logo span {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	-moz-opacity: 0;
	zoom: 1;
	display: block;
	overflow: hidden;
}

Der Trick funktioniert in allen bekannten Browsern – selbst im Internet Explorer 6.

Eine Demo dazu gibt es natürlich auch:
Demo: HTML/CSS > Unsichtbarer Text