Kategorien
Apps Programmierung

Schleifpapier im Lieferumfang? So unterscheiden sich Designs für iOS und Android aus App-Entwicklersicht

Im Oktober 2010, als das Samsung Galaxy Tab vorgestellt wurde, meldete sich Steve Jobs zu Wort, um seiner Meinung über 7“-Tablets Luft zu machen. Er bezeichnete diese Geräteklasse als ”dead on arrival“ – ”Totgeburt“ – und empfahl, jedem Gerät Schleifpapier beizulegen, um die Finger der Nutzer anzupassen. Nach Jobs Tod dann veröffentlichte auch Apple mit dem iPad mini ein Gerät der zuvor noch gescholtenen 7”-Klasse. Dass es sich bei der Geräteklasse offensichtlich nicht um eine Totgeburt gehandelt hat, wissen wir inzwischen. Mit dem Vorschlag der Anpassung der Nutzerfinger per Schleifpapier indes hatte der Apple-Gründer nicht ganz unrecht, zumal wenn es um die iOS-Geräte geht. Warum das so ist, will ich im folgenden Beitrag deutlich machen…

mobile-02

Vom Finger zum Touch Target

Zunächst stellt sich natürlich die Frage, wieso Steve Jobs nicht auch der Ansicht war, dem iPhone ebenso Schleifpapier mitliefern zu müssen? Immerhin ist ein (damals) 3,5 Zoll-, heute 4 Zoll-Display noch weit kleiner als die angesprochenen 7 Zoll.

Diese Frage lässt sich leicht beantworten, wenn man sich iOS einmal genauer anschaut. Dieses Betriebssystem wurde entwickelt, um auf einem 3,5 Zoll Display bei einer Auflösung von 480 x 320px mit dem Finger bedient werden zu können. Diese Eckdaten definierten die Größe der Arbeitsfläche. Diese Arbeitsfläche hängt bei einem Touch-Betriebssystem jedoch nicht nur von Werten ab, sondern auch vom “Eingabegerät”, in diesem Fall also den Fingern, genauer dem Zeigefinger und Daumen.

Finger haben eine bestimmte Größe und beanspruchen bei der Berührung des Displays eine bestimmte Fläche. Die so beanspruchte Fläche wird als “Touch-Target” bezeichnet. Die Größe des Touch-Targets beeinflusst, wie viele Bedienelemente auf der Arbeitsfläche angezeigt werden können. Apple gibt in seinen Richtlinien ein Touch-Target von mindestens 44 x 44px an, was einer Fläche von ca. 8 x 8mm entspricht.

hand-66631_640

Beim Wechsel auf die bekannte “Retina”-Auflösung hat Apple an diesem ganzen Konzept nichts geändert, stattdessen einen simplen und doch effizienten Trick angewandt. Ein Pixel wurde in 4 kleine Pixel aufgeteilt, die zusammen die Größe des ursprünglichen Pixel haben. Daraus ergibt sich genau die doppelte Auflösung auf jeder Achse: 960 x 640px. Dieses Vorgehen führt nicht zu mehr Platz auf dem Display, aber zu einer schärferen Darstellung.

Die Touch-Targets sind immer noch ca. 8 x 8mm groß, aber bestehen nun aus doppelt so vielen Pixeln (88 x 88px). Da iOS-Layouts nicht mit relativen, sondern mit absoluten Werten erstellt werden, hat diese Auflösungsänderung keine Auswirkung. Die Werte werden einfach nur verdoppelt, um das gleiche Ergebnis zu bekommen. Somit bleibt die Größe der Arbeitsfläche gleich, obwohl die Auflösung verändert wurde. Das iPhone 5 hat noch ein wenig mehr Veränderung gebracht, die aber nicht von großer Bedeutung sind und spielt daher in den weiteren Betrachtungen keine Rolle.

Der Unterschied beim iPad

Was hat sich nun beim iPad (2) geändert und was ist gleich geblieben? Verändert hat sich die Displaygröße auf 9,7 Zoll und die Auflösung auf 1024 x 768px. Das Eingabegerät ist jedoch gleich geblieben – der Finger. Er ist immer noch genauso groß wie zuvor, hat jetzt jedoch eine größere Fläche vor sich. Somit entsprechen die 8 x 8mm des Fingers ca. 44 x 44px auf dem Display. Durch den größeren Bildschirm passt nun aber mehr drauf. Dieses mehr an Platz definiert das Tablet-Layout.

Durch die vergrößerte Arbeitsfläche ist es möglich, mehr Inhalt darzustellen, welcher mit dem Finger immer noch bedienbar ist. Jedoch sollte man auf einem Tablet die Touch-Targets ein wenig größer gestalten, da das User Interface sonst schnell überladen wirkt und zu keiner angenehmen Erfahrung führt. Beim iPad 3 und 4 ist das Vorgehen (wie oben beschrieben) mit der Verdoppelung der Auflösung gleich.

hero_slide1-w640

Der Schleifpapier-Effekt

Kommen wir nun zum fiktiven Schleifpapier und wieso ein 7“-Tablet solches im Lieferumfang enthalten sollte, falls iOS das Betriebssystem der Wahl ist. Zuerst geht man davon aus, dass die Apps auf dem 7”-Tablet das Tablet-Layout benutzen sollen. Immerhin will man ja ein Tablet-Design und kein aufgeblasenes Telefon-Layout. An dieser Stelle entsteht die Schwierigkeit mit den pixelgenauen Layouts in iOS.

Man nimmt also ein Touch-Target (z.B. einen Button) mit der Größe von 44 x 44px, welches auf 9,7" zu einer realen Größe von 8 x 8mm führt, und verkleinert dieses auf ca. 70% dessen. Die Auflösung bleibt die Gleiche. Man erhält also ein Touch-Target, welches 5,6 x 5,6mm groß ist. Der Finger wird jedoch nicht kleiner, nur weil man sich ein kleineres Tablet gekauft hat. Somit bekommt man das Problem, die Touch Targets mit dem Finger nicht mehr so einfach treffen zu können.

medium_7995167940

Natürlich kann man durch Analyse der Berührungen auf dem Bildschirm versuchen, diese den kleineren Touch-Targets zuzuordnen. Jedoch muss das nicht immer zum Erfolg führen und kann bei Bedienelementen, die nahe zusammenstehen, zu unerwünschten Aktionen führen. Diese Fehleingaben verschlechtern die Benutzererfahrung mit dem Gerät bzw. der App.

Nun gibt es zwei Möglichkeiten dieses Problem zu lösen. Zum Einen kann man eine neue Auflösung und damit ein neues Layout definieren. Dieses Vorgehen führt jedoch dazu, keine kompatiblen Apps für diese neue Auflösung zu haben. Die Layouts müssten neu gedacht und erstellt werden. Was passiert, wenn das passiert, aber nicht passiert, sah man eine ganze Weile am neuen Display im iPhone 5 – Balken dominierten die zusätzliche Fläche.

Die zweite Möglichkeit ist eben das “Abschleifen” der Finger, um sie “präziser” zu machen (ein kapazitiver Stylus würde es wohl auch tun, aber das wäre ja nicht Sinn der Sache).

Die “Größe” des iPad Mini

thought_hero-w640

Apple entschied, das Display des iPad Mini auf 7,9“ zu verkleinern. So wurden aus den Touch-Targets mit 8 x 8mm nurmehr solche mit 6,5 x 6,5mm. Diese Maße wurden seitens der Apple-Ingenieure anscheinend als noch zumutbar erachtet. Es handelt sich hier ”nur" um Unterschiede im Millimeterbereich, was sich recht belanglos anhört. Jedoch merkt man bei der Bedienung eines Gerätes mit Toucheingabe schnell, wie wichtig Bedienelemente sind, die nicht zu klein ausfallen.

Doch keine Sorge. Die meisten Tablet-Apps sind auf dem iPad Mini noch gut bedienbar, da die Touch-Targets auf den 9,7“ Geräten selten die minimale Größe bekommen, sondern eher größer dimensioniert werden. Dies dient der erleichterten Bedienung. Beim iPad Mini führen diese größeren Bedienelemente zu ”genau der richtigen Größe" nach der Verkleinerung, kleinere jedoch zu Schwierigkeiten.

Android und die Vielfalt an Auflösungen

AndroidSlide3-w640

Kommen wir nun dazu, wie Android dieses Problem mit den verschiedenen Auflösungen und Displaygrößen handhabt. Wie kann bei dieser Fragmentierung die minimale Größe des Touch-Targets garantiert werden?

Android ist seit der Version 1.0 in der Lage auf verschiedenen Bildschirmgrößen und den dazugehörigen Auflösungen ein konsistentes Erlebnis zu bieten. Um als Programmierer nicht für jede Auflösung bei verschiedenen Displaygrößen Layouts erstellen zu müssen, wurde versucht, diese konkreten Variablen zu abstrahieren.

Zunächst führte man eine neue Einheit namens DIP (Density Indipendent Pixel) ein. Diese Einheit ist unabhängig von Auflösung bzw. Bildschirmgröße und liefert immer (ungefähr) die gleiche physikalische Größe auf dem Display.

So funktioniert es:

Definiert wird 1 DIP als 1 Pixel bei einer Pixeldichte von 160dpi (mdpi). Die Pixeldichte enthält die Bildschirmgröße und Auflösung im Verhältnis zueinander. Weiter werden Umrechnungsfaktoren definiert, um auch andere Pixeldichten abzudecken.

Bei der Verdoppelung der Pixeldichte auf 320dpi (xhdpi) wird ein Pixel eines 160dpi Display einfach nur in 4 kleinere Pixel unterteilt. Dieses Vorgehen gleicht dem bei iOS. Es ergibt sich der Umrechnungsfaktor 2. 1 DIP, bei einer Pixeldichte von 320dpi, entspricht also 2 Pixeln auf dem Display.

  • Bei einer Pixeldichte von 120dpi (ldpi) entspricht 1DIP = 0,75 Pixel.
  • Bei einer Pixeldichte von 240dpi (hpdi) entspricht 1DIP = 1,5 Pixel.
  • Seit Jelly Bean 4.1 wurde auch noch eine weitere Pixeldichte mit 480dpi (xxhdpi) eingeführt. Bei dieser entspricht 1DIP = 3 Pixel.
  • Beim 2012er Nexus 7 finden wir eine Pixeldichte von 217dpi (tvdpi). Dabei entspricht 1DIP = 1,33 Pixel. Das kommende Modell erhöht die Pixeldichte auf 323dpi, 1 DIP entspricht hier rund 2 Pixeln.

marquee_jb_4_3_flo-w640

Nun kann man also in den Layouts alle möglichen Elemente in DIP definieren und erhält auf jeden Bildschirm bzw. jeder Auflösung fast die gleiche physikalische Größe. Somit können Touch-Targets in der richtigen, weil bedienbaren Größe gehalten werden.

Und wo ist jetzt der versprochene Unterschied zwischen iPad Mini und Nexus 7?

Wir haben also festgestellt, dass ein iPad Mini die gleiche Arbeitsfläche hat wie ein 9,7" iPad und somit exakt das Gleiche darstellen kann. Es wird zwar alles kleiner, aber die Apps zeigen auf allen iPads den gleichen Inhalt.

Bei Android Tablets funktioniert die Bestimmung der Größe der Arbeitsfläche anders. Ich verdeutliche es mal an 2 Beispielen.

Nexus 7: Die Auflösung beträgt 1280x800px mit 7" Diagonale und führt zu einer Pixeldichte von 217dpi. Der Umrechnungsfaktor bei dieser Pixeldichte beträgt 1,33, da es sich um tvdpi handelt.

Wenn man nun die Auflösung durch diesen Faktor teil, erhält man die Größe der zur Verfügung stehenden Arbeitsfläche.

1280px / 1,33 = ca. 962dip | 800px / 1,33 = ca. 600dip

Die Arbeitsfläche beträgt also 962 x 600dip.

Google-Nexus-7-16GB-Tablet-PC

Nexus 10: Die Auflösung beträgt 2560 x 1600px mit 10,055" Diagonale und führt zu einer Pixeldichte von 300dpi. Damit fällt es in die Klasse xhdpi und der Umrechnungsfaktor beträgt hier 2.

2560px / 2 = 1280dip | 1600px / 2 = 800dip

Die Arbeitsfläche beträgt also 1280 x 800dip.

Dies ist genauso viel wie ein 10" Tablet mit 1280x800px (160dpi) Auflösung bis jetzt auch geboten hat. Dadurch müssen bei einer App für das Nexus 10 nur die Pixelgrafiken in der entsprechenden Auflösung neu hinterlegt werden. Das Layout bleibt das Gleiche.

Google_Nexus_10_16GB_271745.1

Wenn man sich die Arbeitsflächen jetzt anschaut und vergleicht, kommt man zu dem Schluss, dass das Nexus 7 eine kleinere Arbeitsfläche besitzt als ein 10" Android Tablet mit der gleichen Auflösung. Somit kann man eben nicht wie beim iPad die gleichen Apps mit den gleichen Layouts verwenden, da nicht genug Platz vorhanden ist.

Somit braucht das Nexus 7, wie auch andere 7“-Tablets, sein eigenes User Interface Layout und seine eigene Benutzerführung. Das ist der große Unterschied, wieso auf dem iPad Mini ”Tablet Apps" laufen und auf dem Nexus 7 ein eigenes Layout erstellt werden muss.

Vor- und Nachteile bei iOS

Pro:

  • Alle Apps des iPad bleiben mit dem iPad mini kompatibel.
  • Man kennt die Größe der Arbeitsfläche und hat nur 1 Layout als Entwickler zu erstellen. Das senkt die Entwicklungskosten für den Anbieter und den Anschaffungspreis für den User.
  • Bei der Verdoppelung der Auflösung müssen nur die Pixelgrafiken aktualisiert werden, was den Aufwand eines Updates minimiert.

Contra:

  • iOs ist “gefangen” in seinen Auflösungen oder dem Doppelten davon. Jedoch wird es schwierig werden, 2048 x 1536px oder 960 x 640px nochmals zu verdoppeln. Wir werden also für lange Zeit diese Auflösungen sehen und wohl auch keine anderen Größen bei Geräten.
  • Bei der Einführung einer neuen Auflösung werden alle vorhandenen Apps “nutzlos”. Man kann sie zwar noch ausführen, aber dies geschieht in einer “Letterbox”, wie beim iPhone 5 gut zu sehen ist (Schwarze Balken oben und unten).
  • Bei einfacher Verkleinerung der Bildschirmgröße ohne gleichzeitige Verkleinerung der Arbeitsfläche kann es zu Problemen mit den Touch Targets kommen, da sie zu klein ausfallen können -> kein konsistentes Nutzererlebnis.

Vor- und Nachteile bei Android

Pro:

  • Touch-Targets behalten immer die vorgesehene Größe.
  • Jede Auflösung und jede Bildschirmgröße ist möglich und führt zu einer Vielfalt von Geräten mit verschiedensten Formfaktoren.
  • Beim Programmieren muss man sich keine Gedanken über die Pixel machen, sondern nur über die verschieden großen Arbeitsflächen. Der Fokus kann auf die Nutzerführung und Ergonomie gelegt werden.
  • Das System kümmert sich darum, die richtigen Bilder und Layouts für das jeweilige Gerät darzustellen.

Contra:

  • Es müssen mehrere Layouts erstellt werden, was zu höheren Entwicklungskosten führt.
  • Layouts können nie pixelgenau sein, sondern müssen in der Höhe und Breite flexibel auf kleine Änderungen reagieren können. Dadurch kann man sich nie ganz sicher sein, wie das Layout beim User dargestellt wird.
  • Es besteht nicht nur ein höherer Aufwand beim Programmieren, sondern auch ein erhöhtes Fehlerpotential.

Sie sehen, beide Plattformen haben ihre eigene Vorgehensweise beim Umgang mit Auflösungen und Displaygrößen. Diese Vorgehensweisen haben Vor- und Nachteile, die sich sowohl auf das Nutzererlebnis, wie auch den Entwicklungsaufwand auswirken. Welches Konzept besser ist, kann nicht allgemeingültig und mit einfachen Worten definiert werden.

Am Ende ähnelt das Android-Konzept eher dem Konzept des modernen Web, in welchem pixelgenaue Layouts ebenfalls auf dem Rückmarsch sind, während iOS an die Glanzzeiten von Quark Xpress anknüpft. Der geringere Entwicklungsaufwand, nicht zuletzt wegen der überschaubareren Gerätezahl, liegt in jedem Falle bei iOS.

Über den Autor: Michael Panzer ist 28 Jahre alt und studiert Technische Redaktion an der HS Merseburg. In diesem Studiengang lernt man technische Sachverhalte einfach und verständlich wieder zu geben. Als kleine Übung verfasst er ab und an Artikel. Seit gut 1,5 Jahren programmiert für die Android-Plattform.

photo credit: dcysurfer / Dave Young via photopin cc

(dpe)

Kategorien
Apps Programmierung

MonstaFTP: FTP-Client als Cloud-App zum Selberhosten

Wer noch eine Ecke seines Webspace ungenutzt sieht und vielleicht noch eine Subdomain entbehren kann, sollte sich das kostenlose PHP-Script MonstaFTP auf jeden Fall einmal anschauen. Veröffentlicht unter Open Source-Lizenz erlaubt MonstaFTP komfortablen Zugriff auf beliebige FTP-Server. Unter Chrome unterstützt das Script sogar das Drag & Drop ganzer Ordner, generell ist die Verwendung in allen modernen Browsern möglich.

monstaftp

MonstaFTP: Schnell und unkompliziert, sowohl bei Installation, wie auch im Alltagseinsatz

MonstaFTP lief mir bereits vor gut zwei Wochen über den Weg. Seitdem begleitet es mich als FTP-Client auf Schritt und Tritt und ist überall dabei, wo ich eine Internetverbindung habe. MonstaFTP ist nämlich ein unter GPL-Lizenz veröffentlichtes PHP-Script, neuerdings auch Cloud-App genannt, das im Browser einen FTP-Client mit allen wichtigen Funktionen, inklusive Chmod zur Verfügung stellt.

monstaftp-chmod

Sowohl die Installation, wie der tägliche Einsatz laufen fast schon intuitiv ab. Letzteres gilt jedenfalls dann, wenn man bereits Erfahrungen mit FTP-Clients besitzt. Zur Installation ist es lediglich erforderlich, die entpackte Ordnerstruktur aus dem Download-Zip in ein Verzeichnis auf dem eigenen Webspace hochzuladen.

Ich installierte MonstaFTP unter einer Subdomain, was indes nicht zwingend erforderlich ist. Das Script läuft in jedem beliebigen, per URL erreichbaren Unterverzeichnis. Sämtliche Einstellungen von MonstaFTP werden über entsprechende Konfigurationseinträge direkt in der index.php erledigt. In meinem Falle waren keine Änderungen erforderlich.

Im Auslieferungszustand spricht die App nur englisch. Im Unterverzeichnis languages findet sich die Datei en_US.php, die die entsprechenden Texte enthält. Übersetzen Sie die paar Texte in die gewünschte Sprache, benennen die Datei z.B. in de_DE.php um und laden sie an entsprechender Stelle wieder hoch.

Wollen Sie von Ihrer Cloud-Installation aus auf außerhalb des gleichen Servers gelegene FTP-Lokationen zugreifen, stellen Sie sicher, dass Ihr Server externe FTP-Verbindungen zulässt. Ihr Hoster kann Ihnen da helfen. MonstaFTP kann zwar auf Windows-Server zugreifen, muss selbst jedoch zwingend unter Linux installiert sein. Da das mittlerweile bei rund 99 % aller Spaces der Fall sein dürfte, beeinträchtigt diese Voraussetzung wohl praktisch niemanden.

monstaftp-monsta

monstaftp-ocean

MonstaFTP kann sichere Verbindungen via SSL nutzen. Derzeit zwei Skins sind wählbar, eines in einem eleganten Grau, das andere in einem Windows-ähnlichen Blau. Die eigentlichen Credentials für den Zugriff auf die FTP-Server werden nicht in MonstaFTP hinterlegt, sondern müssen bei jedem Connect neu eingegeben werden.

monstaftp-login

MonstaFTP läuft am besten im Chrome. Hier können zusätzlich komplette Ordner per Drag and Drop hochgeladen werden. Der Upload einzelner Datei per Drag and Drop funktioniert indes auch mit Firefox, Safari und Internet Explorer. MonstaFTP folgt dem Trend zum Flat Design und sieht in der Metro-Umgebung des neuen Windows ausgesprochen gut aus.

Vor allem für Datennomaden ist MonstaFTP eine valide Alternative, denn der reine Internetzugang reicht von nun an aus, um Zugriff auf seine FTP-Sites zu nehmen. Das ist zum Beispiel ideal für den Noteinsatz von unterwegs. Ich persönlich verwende unter Windows aktuell nur noch MonstaFTP, unter Mac OS bleibe ich vorerst meinem Transmit treu.

Der Download des Scripts kann über die einschlägigen Directories, wie Hot Scripts, oder direkt über die MonstaApps-Website erfolgen. Nach einer E-Mail-Adresse wird zwar im Rahmen des Downloads gefragt, diese kann jedoch auch verweigert werden. Gibt man sie ein, wird man über neue Produkte des Hauses auf dem laufenden gehalten.

Von mir erhält MonstaFTP eine klare Empfehlung. Jetzt sind Sie an der Reihe…

Kategorien
Apps Programmierung

HTML5 Device Mockups: Populäre Geräte als Rahmen für Live-Webinhalte auf der eigenen Site nutzen

Das hier macht Freude. Wir kennen Finnland ja bereits für eine ganze Reihe toller Dinge, etwa Gummistiefel und – äh – Helsinki. Die Entwickler Angelos Arnis und Tomi Hiltunen wollen diesem famosen Portfolio finnischer Bekanntheit eine weitere Facette hinzufügen. Sie veröffentlichten vor wenigen Tagen auf Basis von PNG und HTML5/CSS3 einen Satz an Mockups verschiedener populärer, vor allem mobiler Geräte, nebst der Möglichkeit, den Viewports dieser Geräte echte Webinhalte, nicht etwa nur Screenshots, zu implementieren. Das ist ideal, wenn man demonstrieren will, wie das eigene Portfolio, etwa als Entwickler mobiler Web-Apps, auf verschiedenen Geräten angezeigt werden wird. Ich bin sicher, die Lösung von Arnis und Hiltunen wird schnell Freunde finden…

html5-device-mockups-w640

Pures CSS oder HTML5 Data-Attribute steuern das Look & Feel

Aktuell besteht das Set von HTML5 Device Mockups aus acht populären und verbreiteten (mit Ausnahme des Lumia 920 und des Surface-Tablets) Geräten. Es gibt das iPhone5 und das iPad in Hoch- und Querformat, jeweils in weiß und schwarz. Desweiteren steht ein iMac und ein MacBook Pro bereit. Die Android-Fraktion freut sich über das Galaxy S3 in blau und weiß und verschiedenen Ausrichtungen, sowie ein Nexus 7. Last und auch least ist es möglich, Webinhalte zusätzlich in den Viewport eines Lumia 920, sowie eines Surface-Tablet zu stecken. Schön am Lumia, es ist in gelb implementiert…

Neben den für die Darstellung erforderlichen PNGs mit Alpha-Transparenz liefern Arnis und Hiltunen die PSD-Dateien zu den einzelnen Geräten mit. Auf diese Weise kann man die Mockups auch für Druck-Präsentationen, Flyer und ähnliches nutzen.

Der Motor des Projekts, das auf Github gehostet wird, besteht aus zwei CSS-Dateien. Beide erledigen die gleiche Aufgabe. Der Unterschied besteht darin, dass die Datei device-mockups.css mit zusätzlichen CSS-Klassen arbeitet, während die Datei device-mockups2.css das gleiche Ergebnis unter Verwendung von HTML5 Data-Attributen erzielt.

Das folgende Beispiel arbeitet auf der Basis der zweiten Variante, aber greifen wir nicht zu weit vor. Als erstes bauen wir das entsprechende CSS in unsere Website ein:

Dann verwenden wir die mitgelieferte Mockup Device Generator.html, indem wir sie in einem Browser unserer Wahl aufrufen, alternativ verwenden wir den Generator der Demo-Site. Jetzt klicken wir das gewünschte Mockup zusammen und lassen uns den korrespondierenden Code anzeigen. Per Copy & Paste übernehmen wir diesen in unsere Website.

Ich wählte entsprechend ein weißes iPhone im Querformat. So sieht das aus:

white-iphone5-landscape-w640

Und dieser Code gehört dazu:

Wie Sie sehen, erfolgt die Definition des entsprechenden Geräts komplett mittels Data-Attributen. Die andere Variante hätte zusätzliche CSS-Klassen verwendet.

Der wichtigste Teil innerhalb dieses kleinen Code-Schnipsels findet sich als das div mit der Klasse screen. Hier können Sie den gewünschten Inhalt einfügen. Dieser Inhalt kann im Grunde alles sein, was man auch ansonsten auf Websites präsentieren würde, also beispielsweise Medien, wie Videos und Bilder, oder JavaScript-Anwendungen oder was auch immer man in einen iframe packen kann. Das div mit der Klasse button erlaubt es, dem Home-Button eine Funktionalität zuzuweisen. Kann man machen, oder man entfernt das Div komplett.

embedded-content-w640
Beispiele von der Projekt-Website

Viel Fantasie bedarf es nicht, den Nutzen der Lösung zu erkennen. Der offensichtlichste Anwendungsfall dürfte wohl der sein, für mobile Geräte konzipierte Lösungen auch außerhalb dieser Geräte auf der eigenen Website zu zeigen.

Die HTML5 Device Mockups, so der offizielle Projekt-Name, stehen kostenfrei, sowohl zur privaten, wie kommerziellen Nutzung zur Verfügung. Auch die Modifikation ist erlaubt, wie mir einer der beiden Entwickler eben per E-Mail bestätigte..

Was halten Sie von dem Projekt? Lassen Sie es mich wissen.

Links zum Beitrag

Kategorien
Apps Design HTML/CSS JavaScript & jQuery Programmierung

Fries: Kostenloses Framework für die Entwicklung von Android-Apps mit HTML, CSS und JavaScript

Fries von Jaune Sarmiento liegt seit wenigen Tagen in der Version 1.0 vor. Fries stellt ein Framework zur Entwicklung von Web Apps zur Verfügung, die dem Look and Feel der Android UI entsprechen. Verwender der 4er Linie von Android werden sich direkt heimisch fühlen, wenn sie sich die Demos ansehen. In der aktuellen Version ist Fries optimiert auf die Zusammenarbeit mit PhoneGap, kann also nativ wirkende Apps hervor bringen.

fries-homepage

Fries will nicht nur das Prototyping beschleunigen

Vorneweg sei erwähnt, dass Fries unter der liberalen MIT-Lizenz steht, mithin für private und kommerzielle Zwecke verwendet werden darf. Das Projekt wird auf Github gehostet, kann aber auch auf der eigens eingerichteten Demo-Website heruntergeladen werden.

Fries bringt im entpackten Zustand gerade mal runde 470 KB auf die Waage, wovon die eigentlichen Framework-Bestandteile nochmal 100 KB weniger benötigen. Der Rest wird von Beispiel-HTML-Dateien belegt. In Version 1 verwendet Fries die offiziellen Android-Icons, was den authentischen Look der mit Fries erstellten Apps garantiert.

Fries setzt auf HTML, CSS und JavaScript, das Framework besteht im Wesentlichen aus CSS-Dateien und einigen Funktionalitäten, die mit JavaScript realisiert sind und als entsprechende Script-Dateien vorliegen. Fries ist modular aufgebaut. Jede Funktion steckt in einer eigenen Scriptdatei, die erforderlichenfalls von einer korrespondierenden CSS-Datei ergänzt wird. So ist die kollaborative Entwicklung weiterer Features einfach möglich, Sarmiento selber hat auch schon ein gutes Dutzend Ideen für weitere Funktionen.

Die Grundfunktionalität, also das „Übereinanderladen“ der einzelnen Seiten einer App wird vom JavaScript Stacks.js geleistet, das Sarmiento aus Ratchets Push.js entlehnte. Push.js ist nur für iOS tauglich. Stacks.js also sorgt nun für das Laden der Seitenelemente, wie auch der Inhalte über Ajax.

Fries: Simples Komponentensystem mit klarer Aufgabenteilung

Der Aufbau einer Fries-App ist von der Theorie her simpel. Alle Befehlselemente werden in ein Div der Klasse page gepackt, alle Inhaltselemente werden in ein Div der Klasse content geschrieben. Stacks.js kümmert sich um Zuordnung und erforderliche Ladevorgänge. Zusätzlich sorgt es für die Android-typischen Übergangseffekte mittels CSS3 Transforms.

Grundsätzlich kann eine Fries-App via Web-Server ausgeliefert werden, was während der Entwicklungsphase sicherlich der gängigste Weg sein dürfte. Ist die Entwicklung abgeschlossen, empfiehlt es sich spätestens, die App nach Adobe PhoneGap zu überführen, weil dadurch verschiedene Beschränkungen umgangen werden können. Die wichtigste dürfte dabei der Umstand sein, dass sich der Android-Browser nicht komplett wegblenden lässt, so dass die eigene App nicht den vollen Bildschirm nutzen könnte. Das ist nicht kritisch, aber wirkt nicht so professionell, wie es könnte. Zudem unterstützt PhoneGap alle gerätespezifischen APIs, die Android bereit stellt.

Derzeit bietet Fries fertige Komponenten für Action-Bars, Tabs, Schaltflächen, Listen und Formulare. Mittels der Komponente Spinners lässt sich eine Auswahlliste platzsparend unterbringen.

fries-spinners
Spinner im Einsatz

Alle Komponenten können auf der Demo-Website im Einzelnen getestet werden. Wie erwähnt steht Fries unter MIT-Lizenz, PhoneGap unter Apache-Lizenz zum kostenlosen Download bereit. Damit bilden die beiden Projekte ein Team, das den ambitionierten Entwickler ohne zusätzliche Kosten in die Lage versetzt, professionell wirkende Apps im Android Look & Feel zu erstellen.

Wenn ich jetzt noch verstünde, was die Assoziation Fries, zu deutsch Fritten, bedeuten soll, dann bliebe für mich keine Frage offen…

Links zum Beitrag

Kategorien
Apps Design HTML/CSS Programmierung

Ratchet: Framework zur Erstellung von Prototypen für iPhone-Apps mit HTML5

Mobile Apps für das iPhone sind mittlerweile zu einer Art Statussymbol für Websites geworden, wie es einst die Flash-Intros waren. Sie erfreuen sich großer Beliebtheit und auch als Webdesigner ist man immer öfter gefordert, solche Apps zu entwickeln. Vor der Programmierung steht in der Regel die Konzeption und Gestaltung der App. Das Framework Ratchet hilft dabei, auf der Basis von HTML, CSS und JavaScript, Prototypen für mobile Apps zu erarbeiten.


Ratchet

Und genau das ist das Schöne an Ratchet: Als Webdesigner erstellt man einen App-Protypen mit bekannten und vertrauten Techniken und muss sich nicht mit Objective-C, der iOS-App-Programmiersprache, herumschlagen. Für einen Prototypen, der zunächst einmal Konzept und Aussehen der App darstellen soll, ist das in vielen Fällen ausreichend.

Wie funktioniert Ratchet?

Zunächst einmal müssen die Ratchet-Beispieldateien heruntergeladen werden. Diese bestehen aus einer HTML-, einer CSS- und einer JavaScript-Datei. Neben festen Bedienelementen (zum Beispiel Titel- und Navigationsleiste) gibt es einen Content-Bereich, der scrollbar ist. Über entsprechende Klassen wird den einzelnen Elementen Aussehen und Verhalten zugewiesen:

<header class="bar-title">
  <h1 class="title">Titel der App</h1>
</header>
<nav class="bar-standard">
  <ul class="segmented-controller">
    <li class="active"><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
</nav>

Grundsätzlich sind alle Elemente, die mit „bar-“ beginnen, feststehend und müssen als erstes deklariert werden. Der eigentliche Inhalt erhält die Klasse „content“. Für den Content-Bereich stehen weitere vordefinierte Inhaltstypen zur Verfügung, beispielsweise Listen mit Buttons:

<div class="content">
  <ul class="list">
    <li>List item 1 <a class="button">Button</a></li>
    <li>List item 2 <a class="button-main">Button</a></li>
    <li>List item 3 <a class="button-positive">Button</a></li>
    <li>List item 4 <a class="button-negative">Button</a></li>
  </ul>
</div>

Über die mitgelieferte CSS-Datei kann man das Aussehen der einzelnen Typen verändern und dem geplanten Design anpassen. Auf der Grundlage der Beispieldateien kann sehr schnell und einfach ein Prototyp für eine App zusammengeklickt werden. Eine Liste aller Komponenten mit Quelltextbeispiel wird sehr anschaulich auf der Website von Ratchet vorgestellt.


Komponentenübersicht mit anschaulichen Beispielen

Zusätzliche Meta-Angaben im HTML-Head sorgen dafür, dass das HTML-Dokument – zumindest auf Apple-Geräten – vom Look-and-Feel wie eine App dargestellt wird:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Die erste Meta-Angabe bewirkt, dass die Webanwendung im Vollbildmodus ausgeführt wird, die zweite dafür, dass die Satusleiste schwarz dargestellt wird. Außerdem sind in der Beispieldatei Apple-Touch-Icons in unterschiedlichen Auflösungen eingebunden.

Seitenübergänge mit Push.js

Jetzt ist man es von Apps ja gewohnt, dass Seitenübergänge per schicker Slider-Animation geschehen. Auch dies lässt sich auf den App-Prototypen übertragen – mit Hilfe von Push.js. Die JavaScript-Bibliothek lädt verlinkte Seiten per Ajax und animiert anschließend den Übergang zwischen den Seiten. Ist Push.js im Head eingebunden, ist der Effekt schnell auf einen Link angewendet:

<a href="seite2.html" data-transition="slide-in">

Neben dem Slide-Effekt kann ein Seitenübergang auch per einfachem Fade („fade“) realisiert werden.

Fazit: Mit Ratchet kann jeder Webdesigner – ohne Kenntnisse in App-Entwicklung – schnell sehr eindrucksvolle Prototypen entwickeln, die beim Kunden einen realistischen Eindruck der App hinterlassen.

(dpe)

Kategorien
Apps Programmierung

Social Magazine Flipboard: Erfolgsbilanz nach zwei Jahren [Infografik]

Flipboard ist neben Zite und Reeder meine absolute Lieblingsapp auf dem iPad, aber auch unter Android. Und eben diese App feiert soeben ihren zweiten Geburtstag, sowie ihren 20 Millionsten Nutzer. Jede Sekunde kommt ein weiterer Nutzer hinzu. Laut Betreiberangaben bleiben Nutzer pro Monat 86 Minuten innerhalb der App, ein guter Wert. Die wichtigsten Daten visualisiert eine aktuelle Infografik…

Flipboards Erfolgsgeschichte gewann seit der Android-App massiv an Fahrt

1,5 Millionen tägliche Nutzer rufen Flipboard auf. Ich bin einer davon. Spätestens seit der Einführung der “Titelstories” ist die App zu einem zentralen Angelpunkt meines Newskonsums geworden. Titelstories aggregiert die wichtigsten Infos des Tages nach einem Algorithmus, der nicht perfekt, aber immerhin gut genug arbeitet.

14,5 Millionen Inhaltsschnipsel werden monatlich aus der App in soziale Netzwerke geteilt, was wenig verwunderlich ist, wenn man bedenkt, dass 75% der iPad-Nutzer ihre Flipboard-Apps an eines oder mehrere soziale Netzwerke angebunden haben.

Obschon Flipboard nahezu überall auf der Welt genutzt wird, lassen sich natürlich Schwerpunktländer identifizieren, in denen ein besonders hoher Flipboard-Verbreitungsgrad zu verzeichnen ist. Gleich vorweg: Deutschland ist nicht dabei. Führend sind die USA, das vereinigte Königreich, China, Japan und Kanada. Japan führt klar bei der sozialen Interaktion, Brasilianer verbringen die meiste Zeit innerhalb der App und Mexikaner lesen die meisten Artikel.

Im Folgenden sehen die vollständige Infografik. Ein Klick darauf öffnet die originalgroße Variante:

(Quelle: Flipboard)

Kategorien
Apps E-Business Programmierung Social Media

Update: Google+ Apps für Android und iOS rüsten Hangouts On Air nach

Das ging schnell. Eben erst wurden Hangouts On Air auch für Deutschland verfügbar, schon schieben die Kalifornier ein Update der Apps zu Google+ für Android und iOS nach. Damit ist die Teilnahme an Hangouts On Air auch von unterwegs aus möglich. Zudem wurde die Altersbeschränkung bei mobilen Hangouts insgesamt gelockert.

Google+: Das hohe Update-Tempo bleibt erhalten

Seit etwas über einem Jahr ist das alternative soziale Netzwerk aus Mountain View nun am Markt und kann nach eigenen Angaben bereits mehr als 170 Millionen Nutzer zählen. Ich selbst gehöre seit dem Start des Dienstes zu den aktiven Verwendern der Plattform. Von Beginn an brachte Google in schneller Folge neue, interessante und stabile Features und hörte sehr genau auf das Feedback der Early Adopters. Bislang konnte Google+ zwar nicht erfolgreich in Facebooks Gefilden wildern. Allerdings wird das von vielen G+ Nutzern eher als Vorteil gesehen. Auf G+ stehen fachliche Informationen, sowie politischer Diskurs stark im Vordergrund, während viele in Facebook eher die private Lol-Cats-Kommunikation repräsentiert sehen.

Auch die mobilen Apps entwickelte das G+ Team rasant weiter, wenn es auch eine erhebliche Verzögerung in der Verfügbarkeit der tablet-optimierten Versionen gab. Erst anlässlich der letzten Google I/O vor wenigen Wochen rang sich der Suchmaschinenriese endlich dazu durch, die seit Monaten lang ersehnten Apps an den Start zu bringen. Insgesamt scheint die Google I/O neuen Schwung in die Entwickler geblasen zu haben, denn seither glänzt Google mit regelrechten Innovationsschüben in vielen Bereichen ihrer Tätigkeit.

Nun also bringt man die ebenfalls lang ersehnten Hangouts On Air auf die mobile Plattform. Allerdings kann man derzeit vom Smartphone oder Tablet aus nur an Hangouts On Air teilnehmen, nicht aber solche selber starten. Ich wüsste ohnehin nicht, wieso man einen Livebroadcast über Mobilfunknetze beginnen wollen sollte, aber sicherlich lassen sich dazu plausible Anwendungsfälle ersinnen. Die Erlaubnis, mobil an Hangouts teilnehmen zu können, erweitert Google mit dem neuen Update auch auf Teenager ab 13 Jahren, womit sie nur konsequent auf die mobile Plattform bringen, was bereits seit einiger Zeit über die Web-App möglich ist.

Kleiner Seitenhieb der iOS-Version: Sofern Chrome für iOS installiert ist, öffnen sich Weblinks aus G+ heraus jetzt in Googles Browser, nicht mehr im Mobile Safari. Die G+ App steht für iOS als Universal-App hier und ebenfalls als Universal-App für Android hier bereit.

Kategorien
Apps Design Essentials Freebies, Tools und Templates Programmierung UI/UX Webdesign

Sketchkit, iOS Design Stencils, iOS 5 GUI PSD: Wireframes für iPhone-Apps schnell erstellen

Bevor man mit dem Design einer Webseite beginnt, wird normalerweise ein Wireframe erstellt. Ohne Wireframe geht man das Risiko ein, die ganze Arbeit wieder von Anfang an machen zu müssen, falls dem Kunden etwas nicht gefällt. Ist allerdings ein fertiger Prototyp vorhanden, ändert man im Idealfall nur ein paar Kleinigkeiten, um den Kunden zufrieden zu stellen. Heute stelle ich Ihnen drei interessante Möglichkeiten vor, die eine qualitative Erstellung von Wireframes für iPhone 4S-Applikationen erlauben.


(Bildquelle: baldiri auf Flickr | CC-BY-SA)

Wireframes mit Keynote erstellen? Ja, das geht!

Apple’s Keynote ist ein Supertool, um schöne Präsentationen zu gestalten. Alles, was man braucht, ist hier geboten: eine grosse Auswahl an Vorlagen, Tabellen, Diagrammen, Graphiken uvm. Die Erstellung einer Präsentation in Keynote ist bequem und funktioniert sehr schnell. Aber in diesem Post soll es nicht darum gehen, sondern um Sketchkit. Sketchkit ist eine Reihe von Vorlagen, welche herunter geladen und in Keynote verwendet werden können. Mit Hilfe dieser Vorlagen ist es möglich, Wireframes für iPhone zu erstellen. Dabei können alle Beschriftungen und Elemente beliebig bearbeitet und angepasst werden.


Sketchkit Wireframes: ein Ausschnitt

Im Sketchkit sind vorgezeichnete iOS-Elemente enthalten. Diese erlauben eine qualitative Wireframe-Erstellung für iPhone 4S-Applikationen. Navjot Pawera, der Entwickler von Sketchkit, bietet Vorlagen auf Gumroad an. Aber keine Panik: erstens funktioniert es hier nach dem System „pay what you want“ und zweitens bekommt man die Vorlagen per Email zugeschickt, auch wenn einfach eine Null eingetippt und die eigene Emailadresse eingegeben wird.


Das Sketchkit wird bequem per Email zugeschickt. Keine Sorge: es funktioniert nach dem „pay what you want“-Prinzip

iOS Design Stencils

iOS Design Stencils sind die sogenannten Schablonen zur Entwicklung von Wireframes für iPhone-, iPad- und iPod-Applikationen. iOS Design Stencils wurden von David Morford per Hand entwickelt. Alle diese Schablonen können problemlos skaliert und angepasst werden. Exportiert werden können sie in jedes Vektor-Format, welches von OmniGraffle unterstützt wird.


iOS Design Stencils: ein Ausschnitt

iOS 5 GUI PSD

Bei iOS 5 GUI PSD handelt es sich um Photoshop-Templates, welche bei Entwicklungen von Apps für iPhone 4S eingesetzt werden können. Die Entwickler dieser Templates haben eine große Arbeit geleistet und jedes Detail von iPhone 4S in Photoshop nachgebaut. So lassen sich die Apps viel bequemer und qualitativer entwickeln. iOS 5 GUI PSD-Templates stehen Ihnen zum kostenlosen Download bereit.


iOS 5 GUI PSD: coole Photoshop-Templates, welche die Entwicklung von iPhone-Apps enorm erleichtern

Fazit:

Heute habe ich Ihnen drei Möglichkeiten vorgestellt, Wireframes für iPhone 4S zu erstellen. Natürlich findet man im Netz weit mehr Tools, Photoshop-Templates, Schablonen und Weiteres. Diese drei hielt ich persönlich jedoch für besonders hilfreich und zum anderen sind sie kostenlos.

(dpe)

Kategorien
Apps Programmierung

Little Big Details sammelt Kleinigkeiten, die Web Apps besser machen

Was wäre unser Leben ohne kleine Details, welche wir oft überhaupt nicht merken? Vielleicht sind nicht alle davon wirklich notwendig, aber sie machen den Alltag viel schöner, als er ohne sie wäre. Webentwicklung ist hier keine Ausnahme. Besonders im UI-Design sind die kleinen Details unentbehrlich. Sie machen das Ganze anwendbar und angenehm zu bedienen. Es ist sehr inspirierend, diese Details aufzuspüren und sich mit ihnen auseinander zu setzen. Heute stellen wir Ihnen eine Plattform vor, die sich genau damit beschäftigt: Little Big Details.


(Bildquelle: ruffrootcreative auf Flickr | CC-BY-SA)

Was ist „Little Big Details“?

Little Big Details ist eine Plattform, die kleine interessante Funktionen sammelt, welche im UI-Design verwendet werden. Die Plattform wird von Floris und Andrew betrieben. Die Funktionen werden anhand eines Screenshot und einer kurzen Beschreibung vorgestellt. Sie sind zusätzlich in verschiedene Rubriken unterteilt, was das Ganze übersichtlicher macht. Ich habe für Sie nach meinem Geschmack ein paar Beispiele rausgesucht:.

Rubrik „Flickr“

Bis jetzt wurden unter dieser Rubrik vier Funktionen präsentiert, welche bei Flickr, der bekannten Bilddatenbank, im Gebrauch sind.

Error message

Will man ein Foto aus Flickr auf Twitter posten und tippt man mehr als 140 Zeichen ein, erscheint eine ungewöhnliche Fehlermeldung. Sie zeigt einem sehr deutlich, dass Romane an der Stelle, wo nur ein paar Worte genügen, fehl am Platz sind.


Lustige Flickr-Error-Message

Prozentsatz beim Upload im Tab

Eine bequeme Sache: wenn Sie Ihre Fotos bei Flickr hochladen, können Sie direkt in einem Tab sehen, wie weit der Ladevorgang fortgeschritten ist. Dabei können Sie ruhig andere Webseiten besuchen und müssen nicht permanent nachschauen, ob das Bild nun endlich hochgeladen ist. Natürlich dürfen Sie den Tab nicht schließen…


Fotos hochladen bei Flickr: bequem im Tab den Fortschritt verfolgen

Rubrik „Favicons“

Unter dieser Rubrik werden ein paar Webseiten mit originellen Favicons vorgestellt. Mir persönlich hat folgendes von Mixcloud besonders gut gefallen.

Mixcloud-Favicon

Mixcloud ist das erste Beispiel mit einem sehr interessanten Favicon. Mixcloud ist eine Musikplattform und ihr Favicon stellt einen „Play“-Knopf dar. Dabei zeigt das Favicon, ob die Musik gerade abgespielt wird, oder nicht. Meiner Meinung nach eine sehr originelle Idee!


Favicon von Mixcloud

Google Kalender Favicon

Ein zweites Beispiel stammt aus dem bekannten Google Kalender. Das Favicon des Kalenders zeigt das aktuelle Datum an.


Google Kalender-Favicon

Rubrik „Upload“

Lustig fand ich auch die Idee von Dropbox. Verbleibt eine lange Ladezeit, so gibt der Dienst den mehr oder weniger nützlichen Tipp, sich ein Snickers zu nehmen, um die Wartezeiten erfolgreich zu überbrücken. Nett, hoffentlich werden aber die Ladezeiten nicht oft so lang sein, sonst leidet die Figur darunter!

Dropbox: lange Ladezeit? Nimm dir ein Snickers!


Dropbox: netter Tipp bei langen Ladezeiten

Rubrik „Submission“

Hier sind ein paar originelle Vorlagen aufgeführt. Mein erstes Beispiel ist die Vorlage von Pinterest, des nächsten Social Network-Superstars.

Pinterest: ein Foto posten

Postet man ein Bild, wird normalerweise eine Beschreibung hinzugefügt. Ist man allerdings etwas fantasielos, was die Beschreibung angeht, so ist es möglich, die ursprüngliche Beschreibung zu markieren. Diese wird sofort übernommen.


Pinterest macht einem die  Beschriftung leicht

Google Maps: ein Surfer als Icon

Und zum Schluss noch eine niedliche Kreation von Google Maps: ein ungewöhnliches Street-View-Icon von Honolulu.


Google Maps: ein süsses Street Icon

(dpe)

Kategorien
Apps Programmierung

Avatars.io für App-Entwickler – Alle Avatare zentral verwalten

Heutzutage verfügt der durchschnittlich aktive Netzbürger über mindestens ein halbes Dutzend verschiedener Profile bei unterschiedlichen Diensten. Der WordPress-Service Gravatar sorgt zusätzlich für ein globales Profilbild, gekoppelt an eine E-Mail-Adresse. App-Entwickler müssen sich mit etlichen Service-APIs herumschlagen, wollen sie in ihren Apps diverse soziale Netzwerke unterstützen. Avatars.io verspricht, die Handhabung deutlich zu vereinfachen.

Avatars.io – Alle URLs normalisiert, eigene Bilder hochladbar

Avatars.io wird vom Chute-Team auf der Basis eben dieses Hauptprodukts entwickelt. Avatars.io basiert technisch auf Ruby und Node.js. Bibliotheken zur Einbindung in eigene Apps stehen für iOS, Android, Ruby und Node.js bereits zur Verfügung. An einer Schnittstelle zu PHP wird gearbeitet.

App-Entwickler, die sich für Avatars.io entscheiden, haben folgende Vorteile im Vergleich zur Verwendung der einzelnen Service-APIs des jeweiligen Netzwerks:

Avatars.io normalisiert die URL zum Abruf des entsprechenden Avatars und macht sie lesbar. Die folgenden Beispiele lesen den Twitter, und den Facebook-Avatar eines Users, hier repräsentiert durch username:

http://avatars.io/twitter/:username
http://avatars.io/facebook/:username

Auch der Zugriff über die IDs ist vorgesehen. Gravatar-Profilbilder werden in ähnlicher Weise via Hash oder E-Mail-Adresse ausgelesen. Die Profilbilder werden auf Avatars.io gehostet und auf dem aktuellen Stand gehalten. Ebenso ist es möglich, den Nutzern der eigenen App das Feature zu bieten, ihre Profilbilder selbst hochzuladen und aus der App heraus zu verwalten.

Derzeit befindet sich der Dienst in öffentlicher Beta und ist komplett kostenfrei zu nutzen. Chute verspricht, auch künftig eine kostenfreie Variante zur Verfügung zu halten. Kostenpflichtig könnten allerdings bisher ungenannte Premium-Features für größere Apps werden.

Auf Hacker News findet eine fruchtbare Diskussion zum Dienst statt, an der sich auch Chute-Mitarbeiter beteiligen. Aus dieser Diskussion ging bereits die aufgegriffene Anregung einer Schnittstelle für PHP-Entwickler hervor, die allerdings derzeit noch nicht verfügbar ist.

Kategorien
Apps Programmierung

Aviary Photo Editor für iOS und Android: Kostenlos, leistungsfähig, intuitiv

Aviary ist ein amerikanisches Internetunternehmen, das sich bereits seit Jahren mit einer ganzen Palette von Online-Grafikanwendungen bemüht, nennenswerte Marktanteile zu erzielen. Für Dr. Web schrieb ich vor nahezu zwei Jahren im Rahmen einer Komplettübersicht über die Produktpalette, was von Aviarys Portfolio im Alltag zu halten ist. Damaliges Fazit: Muss man alles nicht haben, kann aber bisweilen nützlich sein. Gestern stellte Aviary nun seinen mobilen Photo Editor als eigenständige App für die beiden großen Smartphone-Plattformen vor. Hier lautet mein Fazit abweichend: Sollte man auf jeden Fall haben, ist sehr nützlich.

Aviary Photo Editor: Vom Plugin zu App

Der Aviary Photo Editor, der seit dem 13. Juni 2012 auf das iPhone oder den Androiden geladen werden kann, ist streng genommen keine Neuheit. Schon seit einer Weile stand die Funktionalität der App als Plugin zur Verfügung. Auf dem Androiden installiert, musste man über den Teilen-Befehl mit nachfolgender Anwahl von Aviary den Start des Editors erzwingen. Diese Vorgehensweise wurde von sehr vielen Zeitgenossen nicht verstanden, was zu wütenden Kommentaren und Ein-Sterne-Bewertungen in Googles Play Store führte.

Nicht zuletzt dieser Umstand dürfte Aviary dazu bewogen haben, den Editor als eigenständige App verfügbar zu machen. In der Tat gewinnt das Werkzeug dadurch deutlich an Handhabbarkeit. Immerhin muss man nicht ständig den Umweg über die Galerie nehmen, sondern kann die Fotos direkt aus der App heraus öffnen. Dabei unterstützt der Editor die volle Auflösung der Kamera. Auf Sonys Xperia sind das immerhin stolze 12 Megapixel, wobei die Bearbeitung dennoch flüssig erledigt ist. Auf älteren Geräten sollte man von der Option Gebrauch machen, die maximale Auflösung der Bilder in den Aviary-Einstellungen herunter zu regeln.

Mich persönlich überzeugt an der App weniger die zweifellos beachtliche Funktionalität, sondern die Einfachheit der Bedienung. Während ich mich mit der angeblich intuitiven Bedienung von iPhoto für iOS mehr als schwer tue, bin ich mit Aviarys Photo Editor sofort zurecht gekommen. Kontrollfreaks können die Funktionen der App sogar nach eigenem Gusto neu anordnen und den Photo Editor so auf ihre ganz persönlichen Anforderungen zuschneiden.


Aviary Photo Editor: Die UI unter Android ICS auf einem HTC One X

Aviary Photo Editor: Nur zusätzliche Effekte sind kostenpflichtig

Wie das heutzutage üblich ist, bringt auch Aviarys Tool neben allerlei Standardfunktionalitäten eine Reihe von Effektfiltern mit, wobei nur ein Teil davon kostenfrei ist. Weitere Effekte-Sets, von denen es derzeit allerdings nur drei Stück gibt, können über den Play Store für je 0,74 € bezogen werden. Auf diese Weise würde man die Zahl der Effekte von 10 auf 28 erhöhen können. Die mitgelieferten Effekte decken das gängige Spektrum schon ganz gut ab.


Aviary Photo Editor: Im Standardumfang enthaltene Effekte

Instagram lässt grüßen. Das folgende Bild wurde mit dem im Standardumfang enthaltenen Effekt „San Carmen“ versehen:


Aviary Photo Editor: Der Effekt San Carmen, angewendet auf das voll aufgelöste Bild, funktioniert nahezu in Echtzeit

Was Aviarys Photo Editor, ebenso wie alle anderen, die ich bisher testen konnte, nicht kann, ist die Größenänderung des gesamten Bildes vorzunehmen. Das wäre natürlich ein Knüller für den schreibenden Digitalnomaden: Bild geknipst, flink auf 640 Pixel Breite verkleinert und in den nächsten Dr. Web-Beitrag hoch geladen. Schade, aber ansonsten überzeugt die App in vollem Umfang. Übrigens benötigt man nicht etwa einen Aviary-Account oder dergleichen. Die App ist ein reiner Standalone-Editor, kein Vehikel, um Aviarys Onlinetools zu promoten.

Das folgende Video zeigt in etwas mehr als einer Minute einen Überblick der Möglichkeiten:

[youtube]http://www.youtube.com/watch?v=_awAJLCz-x0[/youtube]

Photo Editor steht zur Zeit nur für iOS und Android zur Verfügung. An einer Version für Windows Phone wird nach eigenen Angaben fieberhaft gearbeitet.

Links zum Beitrag:

Kategorien
Apps Programmierung

on{X} steuert Android-Smartphones per JavaScript

Dass ausgerechnet aus dem Hause Microsoft eine innovative Lösung zur Steuerung von Android-Smartphones kommt, damit haben wir nicht rechnen müssen. Und dass sie nicht proprietär daher kommt, sondern auf JavaScript basiert, ist ebenfalls erstaunlich. Unter dem Namen on{X} liefert die israelische Dependance des Redmonder Riesen eine Kombination aus App und Website, mit der es möglich ist, sein Android-Smartphone zu Dingen zu veranlassen, die es ansonsten so nicht könnte. Der Ansatz hat es in sich.

on{X}: Zunächst Android-only

Gleich zu Beginn soll geklärt werden, warum on{X} ausschließlich für die Android-Plattform existiert, wo doch das gesamte Design, sowohl der App, wie auch der Website ganz eindeutig nach Windows Phone aussieht. Es liegt ganz profan am Sicherheitskonzept. Das ist bekanntlich bei Android im Vergleich zu Windows Phone oder iOS etwas – sagen wir – weniger restriktiv. Mit Android kann man bereits ohne Rootrechte viel mehr tun als auf den Konkurrenzplattformen möglich wäre. So ist on{X} auf Android wohl als Testphase für eine spätere Umsetzung auf Windows Phone zu verstehen. Es war eben einfacher umzusetzen und die Verbreitung von Android verspricht wesentlich mehr Feedback, das für die weitere Entwicklung genutzt werden kann, als eine native Windows Phone App jemals bringen wird.

Wenn also die Motivation nun nicht unbedingt hehren Prinzipien stand hält, so wollen wir uns darüber doch nicht übermäßig lang beschweren. Denn das Potenzial, dass Microsofts neuestes Projekt in sich trägt, ist größer, als man auf den ersten Blick erkennen kann. Bislang kenne ich auf der mobilen Plattform nichts vergleichbares, der Power-Netznutzer kennt vielleicht das Tool IfTTT (If this then that), mit dessen Hilfe sich mehrere Webapplikationen miteinander verbinden und gegenseitig zu Aktionen veranlassen lassen. on{X} ist IfTTT nicht unähnlich, kann aber über eine JavaScript-API auch direkt auf Gerätefunktionen zugreifen und ist dadurch ungleich leistungsfähiger.

Auch im Sprachgebrauch lehnten sich die Microsoftler an IfTTT an. So heißen die generierten Aktionen auf beiden Plattformen Recipes (Rezepte).

on{X}: Schick meiner Frau ne SMS, wenn ich das Büro verlasse

Die Möglichkeiten der Rezepterstellung unter on{X} sind schier grenzenlos. Im einfachsten Falle könnte man sein Smartphone veranlassen, die Music App zu starten, wenn man beginnt zu rennen. So wie in diesem Rezept hier:

Aber auch komplexere Anweisungen und Abläufe sind machbar. So etwa würde man mit folgendem Code sein Smartphone veranlassen, jemanden, in diesem Falle der Ehefrau, eine SMS mit einer bestimmten Nachricht zu senden, wenn man einen bestimmten Ort, im Beispiel den Arbeitsplatz verlässt. Das hat schon ein bisschen was von Lifetracking.

// Initializing variables 

	var friend = { name : "my wife",phoneNumber : "+1234567890" } ;
	var messageText = "I'm on my way";
	var action = "exit" /* leave */;
	var location = { name : "work",latitude : "40.771442",longitude : "-73.974295" } ;

	// End of variables initializing 

	console.log('Started script: Text ' + friend.name + '  when I ' + action + ' ' + location.name);

    // create a geo region for the trigger to take place at
    var region = device.regions.createRegion({
        latitude: parseFloat(location.latitude, 10),
        longitude: parseFloat(location.longitude, 10),
        name: location.name,
        radius: 1000
    });

    // register a callback which sends a message when entering/exiting the region (depends on action)
    region.on(action, function (){
        device.messaging.sendSms({
                to: friend.phoneNumber,
                body: messageText
            },
            function (err) {
                if (err) {
                    console.error('Error sending text message: ' + JSON.stringify(err));
                }
            }
        );
    });

    // start monitoring the region
    device.regions.startMonitoring(region);
    console.log('Started script: Text ' + friend.name + '  when I ' + action + ' ' + location.name);

Der Zugriff auf den Ort erfolgt mit Hilfe des GPS-Moduls des Smartphones. Entsprechend ist es erstens erforderlich, das GPS-Modul eingeschaltet zu haben und zweitens, die korrekten Koordinaten zum jeweiligen Ort zu hinterlegen. Diese können beispielsweise in Bing-Maps recht einfach abgelesen werden.

In der frühen Beta führt übrigens ein abgeschaltetes GPS-Modul dazu, dass das Rezept nicht korrekt abgearbeitet wird. Eine Fehlermeldung erscheint aber auch nicht. Zudem lässt sich die App, einmal gestartet, nur noch über den Taskmanager beenden. Ebenfalls unnötig erscheint die Verpflichtung, sich mittels eines Facebook-Accounts bei on{X} anzumelden. Gerade der letztgenannte Punkt sorgt für extrem viel Kritik an der App und führte im Play Store bereits zu rund 900 1-Stern-Bewertungen.

Die Kinderkrankheiten wird das System sicherlich noch ablegen, was mit dem Facebook-Zwang ist, lässt sich derzeit nicht abschließend beurteilen. Microsofts Social Media Gehversuch So.cl besteht ebenfalls weiterhin auf das Vorhandensein eines Facebook-Login als Grundlage des So.cl-Accounts.

[youtube]http://www.youtube.com/watch?v=qfLMTsIJsoo[/youtube]

on{X}: Leistungsfähige JavaScript-API

Entwickler werden sich im weiter oben gezeigten Code direkt heimisch fühlen. Die gesamte Rezepterstellung läuft über Javascript. Für die korrekte Umsetzung der Javascript-Snippets auf dem Smartphone sorgt eine über den Play Store zu beziehende App. Die App bietet den Zugriff auf die Geräte-APIs und wacht im Hintergrund über die korrekte Ausführung anstehender Rezepte, wenn deren Bedingung(en) erfüllt sind. Sonstige Funktionalität bringt die App nicht. Auch das Erstellen der Rezepte kann nicht innerhalb der App, sondern ausschließlich über die Website erfolgen. Dafür werden auf der Website generierte Rezepte ohne Umschweife direkt mobil verfügbar gemacht.

Der Code jedes Rezepts ist frei zugänglich. So können bereits auf der Plattform verfügbare Codebeispiele sehr einfach in eigene Rezepte umgeschrieben und/oder erweitert werden. Insgesamt ist das Projekt gut durchdokumentiert. Zu jeder nutzbaren Gerätefunktion gibt es eine ausführliche Beschreibung nebst einem oder mehreren Codebeispielen. So sollte eine schnelle Einarbeitung gewährleistet sein.

Übrigens: Wer lediglich eine simplere Methode sucht, um seinen Androiden mittels verschiedener Trigger zu Aktionen zu veranlassen, auf Erweiterbarkeit verzichten kann und ohnehin lieber tappt oder klickt, anstatt zu coden, der sollte sich mal die App AutomateIt näher ansehen.

(do)

Kategorien
Apps Programmierung Webdesign

QR-Codes als digitale Überweisungsträger mit dem BezahlCode

Das Einsatzgebiet von QR-Codes weitet sich immer mehr aus. So lassen sich Kontaktdaten und Termine speichern und direkt ins Adressbuch beziehungsweise in den Kalender übertragen. Mit dem BezahlCode kann der QR-Code nun auch als digitaler Überweisungsvordruck verwendet werden.


Überweisungsvordruck, wie man ihn mit dem BezahlCode nicht mehr braucht

Wer Rechnungen online überweisen oder Geld spenden will, muss die entsprechenden Kontodaten und Beträge manuell in die eigene Homebanking-Oberfläche eingeben. Mit dem BezahlCode werden alle nötigen Informationen für eine Überweisung als QR-Code bereitgestellt. Der BezahlCode kann auf Rechnungen, Zahlungsaufforderungen oder Spendenaufrufen eingebunden werden.

Was ist der BezahlCode?

Der BezahlCode ist ein QR-Code, der alle Informationen für eine Überweisung beinhaltet – also Kontonummer, Bankleitzahl, Empfängername, Verwendungszweck und Betrag. Die Daten werden in einem speziellen Format hinterlegt, sodass diese von entsprechenden Anwendungen ausgelesen werden können:

bank://singlepayment?name=MAX+MUSTERMANN&account=12345&BNC=12345678&amount=5%2C99&reason=FIKTIV+SAGT+DANKE

Ist eine Anwendung auf dem Smartphone oder Tablet installiert, die das Format unterstützt, wird beim Aufruf des QR-Codes eine Überweisung mit den im BezahlCode hinterlegten Kontoinformationen vorbereitet, die nur noch ausgeführt werden muss.

Wer unterstützt den BezahlCode?

Erste Anwendungen, die das Bezahlen mit dem BezahlCode unterstützen, sind die Banking-App iOutBank für iPhone und iPad sowie die Apps iFinance Mobile und MoneyMoney. Die Entwickler der App iOutBank haben auch den BezahlCode entwickelt.

Wer einen BezahlCode selbst auf seine Rechnungen einsetzen möchte, kann diesen über einen Online-Generator erzeugen und den erzeugten QR-Code herunterladen. Der Online-Dienst Billomat ist in der Lage, BezahlCodes automatisiert auf ausgehende Rechnungen zu drucken. Der Generator steht zusätzlich als WordPress-Plugin für die eigene Website zur Verfügung.

Was kann der BezahlCode noch?

Neben einfachen Überweisungen können auch komplexe Überweisungsvorlagen erzeugt werden. So wäre es etwa möglich, Daueraufträge anzulegen, in denen sich unter anderem das Überweisungsintervall, sowie der Tag der ersten und letzten Überweisung festlegen lässt.

Fazit: Derzeit gibt es noch wenige Anwendungen, die den BezahlCode unterstützen. Es bleibt abzuwarten, ob die prominenteren Banking-Apps der Banken und Sparkassen das Einlesen und Verarbeiten der BezahlCodes zukünftig unterstützen werden.

(dpe)

Kategorien
Apps Programmierung

Google Currents: Individuelle Editionen erstellen und gestalten mit HTML und CSS

Seit einigen Tagen ist die Social-Reader-App Google Currents auch in Deutschland verfügbar. Mit der Anwendung lassen sich Nachrichten in Form von Editionen abonnieren. Anders als in Feed-Readern werden die Nachrichten bei Google Currents im Stile eines Magazines dargestellt. Außerdem können Medienanbieter ihre Editionen sehr individuell gestalten.


Google Currents: Producer mit Vorschau auf die Edition

Google Currents gibt es als App für Android, iPhone und iPad. Um eigene Editionen zu erstellen, braucht es nur einen Account bei Google sowie Chrome als Browser. Denn nur damit lässt sich der Google Currents Producer aufrufen, mit dem eigene Editionen erstellt werden können.

Eigene Editionen erstellen

Das Schöne an Google Currents ist, dass Editionen keinen großen Erstellungsaufwand bedeuten – inklusive der Inhalte, die sich der Producer von einem RSS-Feed holt. Es muss lediglich ein Name für die Edition, sowie die URL zu einem RSS-Feed angegeben werden. Die einzelnen Artikel werden auf einer Übersichtsseite mit Foto (falls vorhanden) magazinartig angeordnet. Die einzelnen Artikel werden mit Überschrift, Text und Fotos – je nach Gerät auch mehrspaltig – dargestellt. Für jede Edition lassen sich verschiedene Sektionen erstellen, die unterschiedliche Inhalte haben können (Artikel, Fotos, Videos etc.).

Artikel können auch direkt im Producer angelegt und mit HTML ausgezeichnet werden. Ein Import aus Google Docs ist möglich.


Maske zum Erstellen einer Edition: Mehr Angaben sind nicht nötig

Außerdem kann für eine Edition noch ein Cover-Bild hochgeladen werden, welches bei der Auswahl der Editionen beim Start von Google Currents angezeigt wird.

Editionen individualisieren

Standardmäßig stellt Google Currents die Inhalte schon sehr schön gestaltet dar, so dass nicht zwingend selbst Hand angelegt werden muss. Wer seine Edition jedoch individuell gestalten und sich so vom Einheitsdesign absetzen möchte, kann dies recht einfach machen. Lediglich Kenntnisse in HTML und CSS sind erforderlich.

Für jede Sektion lassen sich individuelle Vorlagen erstellen. Es gibt für jede Sektion ein „Section Template“ für die jeweilige Übersichtsseite (je eines für Tablet- und Smartphones), ein „Section header template“ sowie ein „Article template“.

Wer nur die Hintergrundfarbe eines Templates ändern will, kann in das entsprechende Eingabefeld einfach einen Farbwert eingeben. Wer mehr ändern will, kann das Template jeweils auf „Custom“ stellen. Anschließend lässt sich in einem Textfeld das Layout anpassen.

Templates werden als HTML und CSS in Kombination mit speziellen Google-Elementen (sogenannten Template Tags) zur Einbindung der Inhalte definiert. So lässt sich die Ausgabe des Editionsnamen mit folgendem Element realisieren:

<g:text textid="editionName"></g:text>

Über die Medienbibliothek können Bilddateien hochgeladen werden, die man anschließend in ein Template einbindet. Jedes hochgeladene Bild bekommt eine eigene URL, die über „insert tags“ abgerufen werden kann. Ein individueller „Section header template“ mit Grafik und Titel kann dann so aussehen:

<div id="header">
<img src="attachment/CAAqBwgKMOya4AEwh78N-drweb_logo.jpg" />
<g:text textid='editionName'></g:text>
</header>


Google Currents: Individuellen Header erstellen

Per CSS lässt sich der Header noch nach eigenen Wünschen gestalten. Die Vorlage „Section header template“ ändert den Header nur für die Übersichtsseite. Für die Artikelseiten muss der Header direkt im „Article template“ angepasst werden. Dort auch das Template auf „Custom“ stellen und den Inhalt zwischen „<g:header>“ und „<g:header>“ ersetzen:

<g:header>
<div id="header">
<img src="attachment/CAAqBwgKMOya4AEwh78N-drweb_logo.jpg" />
<g:text textid='editionName'></g:text>
</header>

</g:header>

Vorlagen für Landscape und Portrait optimieren

Vorlagen lassen sich auch unterschiedlich für Landscape- und Portraitdarstellung anpassen. Dazu gibt es das Element „<g:if>“, mit dem unter anderem die Geräteorientierung abgefragt werden kann:

<g:header>

<g:if device="tablet">
  …
</g:if">
<g:if device="phone">
  …
</g:if">

</g:header>

Wer will, kann seiner Edition nicht nur einen eigenen Header verpassen, sondern ein gänzlich eigenes Layout. In der Hilfe werden alle sogenannten Template Tags vorgestellt sowie der Aufbau der einzelnen Templates. Außerdem gibt es einige Code-Snippets für individuelle Templates und Übersichtsseiten („Table of Contents“).

(dpe)

Kategorien
Apps Design Programmierung

Paper für iPad: Neues Skizzenbuch mit intuitiver Nutzerführung

Eine brandneue iPad-App namens Paper will für das Apple-Device das sein, was Papier seit Jahrhunderten für die Menschen ist, nämlich eine einfache Möglichkeit, Gedanken, Bilder, Skizzen, Zeichnungen, Notizen und vieles mehr festzuhalten. Das klingt zunächst unspektakulär, ist aber bei näherem Hinsehen eine große Sache.


Paper erlaubt Skizzen schnell und einfach wie das holzene Vorbild

UI-Designer wissen es. Je einfacher die Oberfläche für den Bediener wird, desto mehr Hirnschmalz muss für die erforderlichen Hintergrundprozesse aufgewendet werden. Dabei gilt es, den guten alten Einstein zu beachten, der bekanntlich den Ratschlag erteilte: “Macht die Dinge so einfach wie möglich, aber nicht einfacher.”

Nach meiner Meinung haben die Entwickler von Paper, einer kleinen Softwareschmiede aus New York namens 53, im Sinne Einsteins ganze Arbeit geleistet. Paper ist ein Skizzen- und Notizbuch, das beliebig viele dieser Bücher mit beliebig vielen Seiten verwalten kann. So könnte man als Webentwickler beispielsweise für jedes Projekt ein Skizzenbuch anlegen, in welchem man die Rohskizzen des Interfaces zeichnet. Filmer könnten ihre Storybooks mit Paper vorzeichnen. Wer möchte, könnte auch einfach seinen Einkaufszettel auf Paper schreiben.


Ein Draft einer Sitestruktur aus den mitgelieferten Beispielskizzen

Paper: Das Bedienkonzept überzeugt mit frischen Ideen

Das Interface der erst seit dem 29. März am Markt befindlichen App setzt konsequent auf Touch- und Swipebedienung. Die Oberfläche ist nicht nur nicht überfrachtet, sie ist erstaunlicherweise fast völlig leer. Das Anlegen neuer Skizzenbücher und Skizzen gestaltet sich simpel. Auf dem Startbildschirm präsentiert Paper die vorhandenen Bücher, die mittels Swipes durchgescrollt werden können, ein Plus am unteren Bildschirmrand erzeugt ein weiteres Buch. Ein Tap auf ein Buch öffnet selbiges. In den Seiten blättert man wieder per Swipe. Mit einer Geste, die aus dem Zusammenziehen zweier Finger, typischerweise Daumen und Zeigefinger, besteht, schließt man das Buch.

Innerhalb eines Buches, das übrigens stets in einer iTunes-ähnlichen Coverflow-Optik dargestellt wird, trifft man wieder auf den Plus-Button, der nach einem Tap eine neue Seite anlegt. Ein Tap auf die neu angelegte, aber auch jede andere bereits vorhandene Seite, öffnet diese.


Auch solche Zeichnungen lassen sich mit Paper erstellen. Wenn man´s kann…

Auf der Seitenebene wird am unteren Bildschirmrand eine Werkzeugleiste eingeblendet, die fünf verschiedene Schreibwerkzeuge, ein Radiergummi und eine (sehr eingeschränkte) Farbpalette mit neun Farbtönen zeigt. Die Werkzeugleiste lässt sich per Swipe von oben nach unten aus- und umgekehrt wieder einblenden. Interessant gelöst ist die Funktion des Rückgängigmachens. Mit zwei Fingern dreht man auf dem Bildschirm gegen den Uhrzeigersinn und löscht so stufenlos die letzten Bearbeitungsschritte. Dreht man im Uhrzeigersinn holt man die Zeichnung schrittweise wieder zurück.

Paper: Nicht alle Werkzeuge sind kostenlos

In der kostenlosen Variante ist lediglich die Zeichenfeder und das Radiergummi aktiviert. Die Zeichenfeder ermöglicht, Skizzen zu zeichnen und dabei die Strichstärke zu variieren. Je schneller man die Feder über die Leinwand zieht, desto dicker wird der Strich. Das ist auf den ersten Blick ungewohnt, aber dem Umstand geschuldet, dass das iPad-Display nicht auf unterschiedlich starken Druck reagieren kann. Nach kurzer Eingewöhnungszeit funktioniert diese Art der Eingabe dennoch zufriedenstellend.

Spezielle Werkzeuge ermöglichen Zeichnungen, die wie mit dem Bleistift gemacht wirken. Ein weiterer Stift variiert die Strichstärke nicht und kann als Textmarker Verwendung finden. Es gibt einen dedizierten Schreibstift und der Pinsel ermöglicht Effekte, die man ansonsten nur aus der Aquarellmalerei kennt. Der Haken an der Sache: Jedes Werkzeug muss per In-App-Kauf für jeweils 1,59 € hinzugekauft werden, alternativ steht ein Paket namens Essentials mit allen Werkzeugen für 5,99 € bereit. So lassen sich knappe 40 Cent im Vergleich zu allen Einzelkäufen einsparen.


Für dieses Storyboard benötigt man alle Werkzeuge

Verständlicherweise ist nicht jeder Interessent mit dieser Vorgehensweise der Entwickler einverstanden und sicherlich wäre es möglicherweise eine klarere Lösung gewesen, neben einer kostenlosen Version schlicht eine kostenpflichtige anzubieten. Schlussendlich muss man jedoch zugeben, dass knappe 6 € für diese App nicht übertrieben sind, zumal schon das kostenlose Werkzeug viele Anforderungen von Skizzenzeichnern abzudecken vermag.

Paper: Skizzen teilen leicht gemacht

All das tut Paper in der Gesamtbewertung keinen Abbruch. Ich konnte schon mit vielen Skizzenbüchern Erfahrungen machen. Paper ist jedoch das einzige, mit dem ich auch in Zukunft noch arbeiten werde. Wenn ich was kritisieren muss, dann ist es der komplett fehlende Export in andere gängige Formate. Andererseits hat mein papiernes Moleskine-Notizbuch auch keine “Exportfunktion”

Paper verfügt indes über eine Anbindung an Facebook, Twitter und Tumblr. Das Teilen der Skizzen ist so schnell möglich. Auch der Versand per E-Mail kann direkt aus der App erfolgen. Die Qualität der exportierten Skizzen entspricht der Auflösung meines aktuellen iPad2 mit 1.024 x 768 Pixeln. 53 verspricht, dass Paper für das neueste iPad optimiert ist. Dort sollte dann die vierfache Pixelmenge entstehen. Ob das tatsächlich so ist, werde ich in ein paar Tagen berichten, wenn Apple mir das bestellte Gerät geliefert hat.


Tumblr, Twitter und Facebook können aus Paper heraus bestückt werden

Links zum Artikel

  • Im Blog zum Produkt stellen die Entwickler eingesandte Skizzen versierter Anwender vor – 53 Blog
  • Die Produkt-Website gefällt mit frischem Design – Paper by 53
  • Im iTunes Appstore kann Paper kostenlos geladen werden – iTunes-Link
  • Auf Vimeo findet sich ein aussagekräftiges Video zu Papers Featureset – Paper auf vimeo

(do)

Kategorien
Apps Programmierung

App-Design für Touchcomputing: Gesten und Symbole für gängige Aktionen

Je erfolgreicher Smartphones sind, um so wichtiger werden Apps für deren Nutzer. Egal, ob es sich um offene Webapplikationen handelt oder um Apps aus den jeweiligen Marketplaces. Eins haben Sie alle gemein: Sie wollen mit der Magie der Touch-Bedienung die User Experience verbessern.

Formen Sie mit der rechten Hand ein Symbol für „Viel Glück“. Haben Sie den nach oben gereckten Daumen gewählt? Eine Geste, die jeder versteht, möchte man meinen. Auch der Grieche wird sie verstehen, aber er wird sie nicht als Ermunterung empfinden. Der hochgereckte Daumen steht bei den Griechen für das gelungene Übertölpeln des Adressaten. Eine Beleidigung also.


Test am Dummy: Die Nutzer mussten die Gesten mit Kohlefingern auf eine Plexiglasscheibe malen.

Scrollen, Löschen, Auswählen – 28 Aufgaben im Test

Wenn Gesten in verschiedenen Kulturkreisen andere Bedeutungen haben, welche Auswirkungen hat das für ein Touchscreen-Interface? Löst das Zusammenziehen zweier Finger in Japan etwas anderes aus, als in den USA?

Die International Usability Partners (IUP) – eine internationale Vereinigung von Agenturen, die sich auf das Thema Usability spezialisiert haben – rief in neun Ländern, darunter Deutschland, insgesamt 340 Probanden vor die Kamera. Man schwärzte den Zeigefinger mit etwas Kohle, gab dem Probanden eine Aufgabe und ließ ihn dafür eine Geste auf einer Plexiglasscheibe ausführen.

Die Tests mit den deutschen Probanden übernahm in Zusammenarbeit mit IUP die User Interface Design GmbH (UID). Fragestellung der Untersuchung: Gibt es kulturell unterschiedliche Gesten beim Bedienen von Touchscreen-Geräten?

Gesten sind kulturell unterschiedlich besetzt

Bei diesem Testszenario konnte man natürlich nicht nur Unterschiede zwischen den Nationen ermitteln, sondern auch die Bedeutung der Vorbildung an SmartPhones. Und natürlich ergab sich ein Bild davon, welche Gesten heute als bekannt angesehen werden können und somit ohne viel Erklärung im Interaktionsdesign einsetzbar sind.
Die Probanden arbeiteten in Sessions von 20 bis 30 Minuten und hatten eine ganze Reihe von Standardaufgaben zu lösen. Neben Gesten für Scrollen, Löschen oder Auswählen kamen auch Browser-spezifische Fragestellungen zum Tragen. So suchte man beispielsweise nach einer Geste für das Zurückblättern auf die letzte im Browser angezeigte Seite. 37 Prozent der Nutzer wählte eine Wischbewegung nach links. In diesem Fall unterliegt der Proband möglicherweise der suggestiven Wirkung seines bekannten Browser-Interface. Der Zurückbutton ist in allen Browsern als Pfeil nach links angelegt.


„Nach unten wischen“ schiebt bei Webseiten den Inhalt nach oben (Scrollen), bei GoogleMaps aber nach unten.

Löschen und Auswählen

Beim Löschen von Objekten ist das nicht so. Überraschend homogen waren dennoch die Ergebnisse. 43 Prozent der Probanden zogen das zu löschende Objekt einfach aus dem Bildschirm.

Das Aufrufen einer Hilfe-Funktion wurde von 38 Prozent aller Probanden dadurch gelöst, dass sie auf eine leere Stelle im Bildschirm tippten. Sogar 47 Prozent der Nutzer waren sich einig darin, eine Mehrfachauswahl dadurch zu erreichen, dass man mit dem Finger über mehrere Objekte wischt.

Asiaten nutzen eher Symbole als Gesten

International betrachtet gab es kaum signifikante Unterschiede zwischen den Ländern, mit der Ausnahme, dass einige Kulturen, insbesondere die Chinesen, verstärkt abstrakte Symbole verwendeten. Die Asiaten würden zum Beispiel ein Objekt aus einer Liste löschen, in dem sie ein Kreuz daneben zeichneten. Die Mehrzahl der deutschen Nutzer wischt das zu löschende Objekt einfach aus dem Bildschirm.

Die Ergebnisse der UID-Studie mit Empfehlungen eines Gestensets für 28 gängige Aktionen beim Touchcomputing können Sie kostenfrei im Internet abrufen.

Ohne Erklärung geht es nicht

Für Interaktionsdesigner, die die Entwicklung von Apps als Chance begreifen, mit neuen Ideen auf die Nutzer zuzugehen, gibt es nur eine funktionierende Methode, nämlich die deutliche Erklärung des Interface und seiner Möglichkeiten. Entweder mit Icons, wie IUP vorschlägt oder mit Hilfe von Animationen.

Blättern und Scrollen kommen ohne aus

Die einzigen Gesten, die ohne gezielte Erklärung eingesetzt werden können, sind seitliches Blättern oder vertikales Scrollen, ausgelöst durch Wischbewegungen in die jeweilige Richtung. Doch auch hier muss es dem Nutzer klar gemacht werden, dass da überhaupt weiterer Inhalt zu finden ist. Usability-Guru Jakob Nielsen erklärt: „Der klassische Scrollbalken ist nicht nur ein Interface zum Benutzen sondern auch ein optischer Indikator dafür, dass es noch mehr Inhalte zu entdecken gibt“.

Mehr Raum für kreatives Webdesign

Hartmut Esslinger, Design-Urgestein aus Kalifornien fordert ein radikales Umdenken: „Das Design von Websites ist zur Zeit auf einem primitiven Level: Entweder wird einfach ein Print-Layout digital umgesetzt – Zeitung oder Photo-Album wie FaceBook – oder man hat eine „Liste“ was sich dann „blog“ nennt. Touch-Devices bieten mehr direkte Interaktion und ich denke, dass dadurch das WebDesign auch wieder kreativer und der Technologie entsprechend intelligenter werden wird.“

Erkenntisse der Studie fürs App-Design – Interview mit Sylvie Le Hong

Die Ergebnisse der Studie, sprich der Bekanntheit von Touch-Gesten sowie die intuitiven Impulse der Nutzer zur Berührungsbedienung, hat UID-Beraterin Sylvia Le Hong analysiert. drweb sprach mit ihr über die Möglichkeiten und Probleme von Touchcomputing:

drweb: Frau Le Hong, taugt Touch zur Erledigung alltäglicher Computerarbeiten?

Le Hong: Für einfache Aufgaben schon, aber wenn es etwas komplexer wird, dann funktioniert die Touchbedienung nicht mehr. Bereits rür ganz normale Arbeitsaufgaben, wie das Kopieren und Ausschneiden von Textpassagen konnten die Probanden keine intuitive Geste aus dem Ärmel schütteln.


Sylvie Le Hong

drweb: Ist das puristische Paradigma der Natural User Interfaces nämlich vollständige Intuitivität nicht etwas zu ambitioniert?

Le Hong: Es gibt eine Reihe von Aktionen, da sind die Gesten ja naheliegend. Aber die Tendenz den Nutzer zu überfordern ist groß. Denken Sie nur an die Geste des Fingerspreizens, um ein Bild zu vergrößern. Die ist nicht wirklich intuitiv, denn mit einem Foto wäre das ja real auch nicht möglich. Das ist schon weit hergeholt.

drweb: Dennoch funktioniert es.

Le Hong: Und zwar weil die Geste auf den SmartPhones gelernt wurde. Unsere Tests haben gezeigt, dass Iphone-Nutzer wesentlich mehr Gesten abrufen konnten als Novizen. Die Smartphones setzen hier die Standards, aber intuitiv sind sie deshalb nicht. Die Novizen hingegen haben sich sehr viele unterschiedliche Ideen einfallen lassen, um die gewünschte Aufgabe zu bewältigen. Für einen Interfacedesigner wäre das ein echtes Problem.

drweb: Mit welcher Geste könnte man denn Text kopieren?

Le Hong: Wie wäre es mit dem „Long Press“ und dann einem erscheinenden Kontextmenü, das eine Auswahl von Möglichkeiten bietet, was man mit der Datei oder einer ausgewählten Textpassage machen kann.

drweb: Was muss man etwas für die Novizen tun, damit Sie die Gesten schneller lernen?

Le Hong: Man muss ihnen die Gesten mit animierten Icons zeigen oder bestimmte Trigger ins Design einbauen, etwa einen Pfeil zur Seite, wenn man Objekte verschieben kann. Aber natürlich muss man auch bei der Konzeption auf Einfachheit achten und die verfügbaren Gesten möglichst sinnvoll einsetzen. Wenn der Nutzer Gesten kennt, dann wird er sie auch probieren. Es liegt dann am System, ihm das richtige Feedback zu geben.

Ron George hat ein Set möglicher Icons entwickelt – QUELLE: rongeorge.com

drweb: Auf dem iPhone navigiert der Nutzer Webseiten durch ZoomOut – ZoomIn. Ist das auch für den stationären Zugang zu Webseiten eine interessante Alternative?

Le Hong: Nein, ich glaube, die Leute nervt das auf die Dauer. Auf dem stationären Rechner und schon auf dem iPad habe ich mehr Bildschirmfläche zur Verfügung als auf dem Smartphone. Die will ich auch nutzen.

drweb: Sie glauben also nicht, das Touch-Konzepte das Webdesign beeinflussen werden?

„mobil“ und „stationär“ bleiben getrennte Welten

Le Hong: Das mobile Web natürlich. Aber ich bin der Meinung, dass mobil und stationär getrennte Welten bleiben. Ich bin sehr skeptisch, ob Touch einen Einfluss auf das „normale“ WebDesign haben wird. Der Komfort von Maus und Tastatur ist zu groß, als dass die Menschen darauf verzichten werden. Die Ressourcen an verfügbaren Metaphern für Gesten sind sehr gering.

drweb: Ihre Studie war international ausgelegt. Gab es große Unterschiede zwischen Benutzern aus verschiedenen Ländern?

Le Hong: Nein, eigentlich nicht. Auch hier merkt man, dass die Standards durch die Smartphones und vor allem das iPhone gesetzt werden. Die Gesten sind im Grunde Sprachraum-übergreifend. Die 38 häufigsten Gesten wiesen keine nennenswerten Diskrepanzen in der Statistik auf. Allerdings wurde deutlich dass die Chinesen weitaus häufiger auf Symbolik zurückgreifen, als andere Nationen. Zum Löschen eines Objekts zeichneten 40 Prozent der chinesischen Probanden ein „x“ neben das Objekt. In Europa sind die Deutschen wesentlich affiner zu symbolischen Gesten, als zum Beispiel die Franzosen oder Finnen.

Weiterführende Links:
  • Mögliches Icon-Set entwickelt von Ron George
  • Jakob Nielsen: iPad-Apps im Usability-Test
(mm),