Pfeil mit CSS erstellen
Mit dem border-Befehl lassen sich in CSS relativ einfach Pfeile erstellen. Dazu braucht man nichts weiter als drei HTML-Elemente und ein paar Zeilen CSS-Code.
Los geht’s mit dem HTML:
Dann das CSS:
#pfeil { width: 50px; height: 50px; position: relative; margin-left: 10px; } #pfeil .shape1, #pfeil .shape2 { border-width: 40px; border-style: solid; height: 0; width: 0; border-color: #000 transparent transparent transparent; top: 10px; position: absolute; } #pfeil .shape2 { top: 0px; border-color: #fff transparent transparent transparent; } |
Das Ergebnis:
Die Erklärung will euch natürlich nicht vorenthalten.
Im Grunde werden hier nur zwei Dreiecke erstellt – eins in schwarz und eins in weiß – und dann übereinander gelegt. Dadurch entsteht ein nach unten zeigender Pfeil, der ähnlich aussieht wie in einer Selectbox.
Die Dreiecke entstehen jeweils aus einem viereckigen Element ohne Höhe und Breite und mit einem 40 Pixel dicken Rahmen. Aber nur der obere Rahmen bekommt eine Farbe, alle anderen Seiten bleiben transparent. Dadurch entsteht die dreieckige Form.
Und die Demo dazu gibt es hier:
http://jsfiddle.net/pGanL/1/
Mit JavaScript zu einem Anker springen
Mit dem folgenden Code kann man mittels JavaScript zu einem bestimmten Anker-Punkt auf der Seite springen:
window.location.hash = "Ankername"; |
Sencha Touch – Ein Erfahrungsbericht
Schon 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.
Mir 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!
