Kategorien
E-Business Rechtliches

Apples iBeacons: Unbegrenzte Möglichkeiten oder haufenweise rechtliche Fallstricke?

Mit dem Launch von iOS 7 hat Apple vor einigen Monaten „iBeacon“ eingeführt. Besonders Einzelhändler und Marketers interessieren sich für die neue Technologie, verspricht sie doch die Chance, Online-Shopper zurück in den stationären Einzelhandel zu bringen. Den Ideen für iBeacon-basierte Geschäftsmodelle und Apps sind nahezu keine Grenzen gesetzt. Doch wo liegen die rechtlichen Grenzen?

20131228103926!Beacons-ble-module

Technischer Hintergrund

Ein iBeacon ist ein kleiner Funksender, dessen einzige Funktion im permanenten Aussenden einer aus Zahlen und Buchstaben bestehenden ID besteht. Sobald sich ein iBeacon-kompatibles Endgerät in Reichweite des Funksignals befindet, empfängt es die ID und reicht es an eine auf dem Gerät installierte App weiter, die daraufhin eine bestimmte, von der ID abhängige Aktion ausführt. Dies setzt voraus, dass die App programmiert worden ist, um auf genau dieses Signal zu reagieren. Bei den ausgelösten Aktionen kann es sich beispielsweise um das Auslösen und Anzeigen einer bestimmten Push-Mitteilung oder um die Gutschrift von Prämien handeln. Ein iBeacon kann allerdings – wie ein Radiosender – nur senden, aber keine Informationen empfangen. Aus datenschutzrechtlicher Sicht sind iBeacons daher an sich unproblematisch –rechtliche Probleme bereiten kann aber, was eine App mit den iBeacon-Signalen macht.

Wettbewerbsrecht

 Die Frage, unter welchen Voraussetzungen zu Werbezwecken eine iBeacon-basierte Push-Mitteilung auf dem Endgerät des Nutzers angezeigt werden darf, ist noch nicht gerichtlich geklärt. Nach § 7 UWG ist Werbung verboten, wenn sie eine „unzumutbare Belästigung“ des Empfängers darstellt. Werbung per SMS, MMS und E-Mail, die ohne vorherige Einwilligung des Empfängers versendet wird, wird vom Gesetz automatisch als „unzumutbare Belästigung“ angesehen. Dies wird damit begründet, dass die auf diesen Kommunikationswegen übertragenen Nachrichten typischerweise auf dem Endgerät des Nutzers gespeichert werden und dadurch Speicherplatz verbrauchen. Push-Mitteilungen sind aber nur auf den ersten Blick mit diesen Kommunikationsmitteln vergleichbar. Typischerweise werden sie nämlich nicht auf dem Endgerät gespeichert, sind also „flüchtig“. Allerdings mutet das Speicherplatz-Argument heutzutage überholt an, und für das Ausmaß der Belästigung spielt es bei lebensnaher Betrachtung keine Rolle, ob diese nun per SMS oder als Push-Mitteilung empfangen wird. Bis die Gerichte diese Frage geklärt haben, ist es daher ratsam, auch vor dem Versand von Push-Mitteilungen die Einwilligung des Empfängers einzuholen. Wichtig ist dabei, dass dem Nutzer eine einfache Möglichkeit zum Widerruf seiner Einwilligung angeboten wird – idealerweise innerhalb der App. Je nach der Gestaltung der App kann es aber auch ausreichen, den Nutzer innerhalb der App eine Anleitung zur Verfügung zu stellen, die ihm leicht verständlich erklärt, wie er die Anzeige von Push-Nachrichten in den Systemeinstellungen seines Geräts ausschalten kann.

shield-105499_640

Eine weitere wettbewerbsrechtliche Herausforderung stellt die inhaltliche Gestaltung der Push-Mitteilungen dar. So ist unter anderem das Verbot der sogenannten unsachlichen Beeinflussung von Verbrauchern zu beachten. Eine solche kann eintreten, wenn der Nutzer bei einer Kaufentscheidung einem besonderenZeitdruck unterworfen wird, ihm also beispielsweise per Push-Nachricht mitgeteilt wird, dass er nur dann in den Genuss eines besonderen Angebots kommt, wenn er es in den nächsten 10 Minuten annimmt. Wichtig ist auch das Verbot des irreführenden Verschweigens von wesentlichen Informationen sowie – wenn mit Preisangaben geworben wird – die Beachtung der Vorgaben der Preisangabeverordnung (PAngV). Da es sich bei Push-Mitteilungen um Telemediendienste handelt, müssen außerdem die Werbevorschriften des Telemediengesetzes beachtet werden. Diese verlangen unter anderem, dass Push-Werbebotschaften klar als Werbung zu erkennen sind und dass aus ihnen hervorgeht, wer Auftraggeber der Werbung ist. Noch schwieriger wird es, wenn die Push-Mitteilungen Werbung in Gestalt von Rabattgutscheinen, Prämien oder Gutscheinen enthalten. Dann müssen nämlich zugleich die Angebotsbedingungen auf klare und verständliche Weise zugänglich gemacht werden.

 Die Einhaltung dieser Vorschriften kann sich angesichts der kleinen Smartphone-Bildschirme als ziemlich kniffelig darstellen.

 Datenschutzrecht

 Die zweite Herausforderung für das iBeacon-basierte Marketing birgt das Datenschutzrecht. Es geht zum einen um die Frage, ob und ggf. wie eine Einwilligung des Nutzers eingeholt werden muss. Zum anderen ist zu klären, ob die Datenschutzerklärung der App angepasst werden muss.

 iBeacons können den Standort eines Nutzers nicht ermitteln. Insoweit unterscheidet sich die Technik von der Standortermittlung per GPS. Die per GPS ermittelten Standortdaten (Längen- und Breitengrade) sind aus sich heraus verständlich. Die Standortermittlung per iBeacon ist aber eher mit der Wi-Fi-Methode zu vergleichen. Sowohl bei der iBeacon- als auch bei der Wi-Fi-Methode werden die von den Funksendern (also den iBeacons bzw. WLAN-Zugangsstationen) ausgesendeten IDs mit einer Datenbank abgeglichen. In dieser Datenbank sind die zu den jeweiligen IDs gehörigen Standorte hinterlegt. Mittels der iBeacon-Technologie kann der Standort daher auch dann von einer App ermittelt werden, wenn der Nutzer die Ortungsfunktion für diese App in den iOS-Systemeinstellungen deaktiviert hat. Bei der Entwicklung der App ist daher unbedingt darauf zu achten, dass eine (versehentliche) Verarbeitung von Standorten über Umwege ausgeschlossen wird.

secret-205648_640

Aus Sicht der deutschen und europäischen Datenschutzbehörden dürfen Geodaten in der meisten Fällen nur mit vorheriger, ausdrücklicher Einwilligung des Nutzers erhoben und verarbeitet werden. Die Einwilligung muss freiwillig erfolgen und soll jederzeit „aus der Nutzungssituation heraus“ widerrufen werden können. Außerdem soll die Einwilligung nach einiger Zeit erneuert werden. Zumindest sollten daher Apps, die mit Standortdaten umgehen, entweder eine Opt-out-Möglichkeit innerhalb der App anbieten, oder aber es sollte – sofern die betriebssystemseitigen Opt-out-Möglichkeit benutzt werden – detailliert und verständlich (idealerweise bebildert) beschrieben werden, wie und wo der Nutzer die entsprechenden Einstellungen vornehmen kann.

Fazit

Die iBeacon-Technik hat großes Potenzial. Damit einem die rechtlichen Anforderungen keinen Strich durch die Rechnung machen, sollten diese schon in der Planungsphase der App beachtet und im Pflichtenheft festgeschrieben werden. Hierzu ist – wegen der derzeit noch unklaren Rechtslage – neben einer guten juristischen auch eine gute technische Kenntnis erforderlich. Mit dieser lassen sich dann aber auch die meisten App-Konzepte und Geschäftsmodelle ausreichend rechtskonform und zukunftssicher umsetzen. Ganz ohne eine gewisse Risikobereitschaft bei allen Beteiligten geht es zur Zeit aber noch nicht.

Die Autorin:

Die Rechtsanwältin Kathrin Schürmann ist seit 2007 in der Kanzlei Schürmann Wolschendorf Dreyer tätig und berät Unternehmen schwerpunktmäßig in Fragen des IT- und Datenschutzrechts sowie des Wettbewerbsrechts. Ein besonderer Fokus liegt dabei auf Unternehmen aus dem E-Business.

Die Expertin für Datenschutz und IT-Recht ist seit 2010 externe Datenschutzbeauftragte eines großen Online-Händlers.

In ihrer Funktion als Datenschutzexpertin arbeitet Kathrin Schürmann auch als Beraterin für die ISiCO Datenschutz GmbH, ein Unternehmen, welches Analyse, Auditierung, Beratung und Mitarbeiterschulung in den Bereichen Datenschutz, Datenschutz-Compliance und IT-Sicherheit anbietet.

(dpe)

Kategorien
Essentials Freebies, Tools und Templates

Apple Safari per Shortcut: Alle Tastenkürzel in deutscher Sprache

Die Steuerung Ihres Lieblingsbrowsers war noch nie so einfach, wie über diese Tastenkombinationen. Bei Apple Safari können Sie etwa mit der Kombi Strg+Alt+U den Quelltext anzeigen lassen, über Strg+Umschalttaste+R den Reader einblenden oder mit der Befehlstaste (cmd)+M Safari im Dock ablegen. Es gibt zahlreiche weitere Shortcuts zu entdecken, weshalb wir alle Tastaturkürzel in einer übersichtlichen Liste gesammelt haben.

safari-teaser

Aktion Tastaturbefehl Windows Tastaturbefehl OSX
Einstellungen Strg+, Befehlstaste (cmd)+,
Pop-Ups unterdrücken Umschalttaste+Strg-Taste+K Umschalttaste+Befehlstaste (cmd)+K
Cache leeren … Strg+Alt+E Befehlstaste (cmd)+Wahltaste (Alt)+E
Safari ausblenden – / – Befehlstaste (cmd)+H
Andere ausblenden – / – Befehlstaste (cmd)+Wahltaste (Alt)+H
Safari beenden Strg+Q Befehlstaste (cmd)+Q
Neues Fenster Strg+N Befehlstaste (cmd)+N
Neuer Tab Strg+T Befehlstaste (cmd)+T
Datei öffnen Strg+O Befehlstaste (cmd)+O
Adresse öffnen Strg+L Befehlstaste (cmd)+L
Fenster schließen – / – Umschalttaste+Befehlstaste (cmd)+W
Alle Fenster schließen – / – Umschalttaste+Wahltaste (Alt)+Befehlstaste (cmd)+W
Tab schließen Strg+W Befehlstaste (cmd)+W
Andere Tabs schließen Strg+Alt+W Wahltaste (Alt)+Befehlstaste (cmd)+W
Sichern unter … Strg+S Befehlstaste (cmd)+S
Inhalt der Seite als Email senden Strg+I Befehlstaste (cmd)+I
Link der Seite als Email senden Strg+Umschalttaste+I Umschalttaste+Befehlstaste (cmd)+I
Drucken Strg+P Befehlstaste (cmd)+P
Widerrufen Strg+Z Befehlstaste (cmd)+Z
Wiederholen Strg+Umschalttaste+Z Befehlstaste (cmd)+Umschalttaste+Z
Ausschneiden Strg+X Befehlstaste (cmd)+X
Kopieren Strg+C Befehlstaste (cmd)+C
Einfügen Strg+V Befehlstaste (cmd)+V
Alles auswählen Strg+A Befehlstaste (cmd)+A
Formular automatisch ausfüllen Strg+Umschalttaste+A Umschalttaste+Befehlstaste (cmd)+A
Sonderzeichen … – / – Befehlstaste (cmd)+Wahltaste (Alt)+T
Symbolleiste ausblenden – / – Umschalttaste+Wahltaste (Alt)+Befehlstaste (cmd)+Ü
Lesezeichenleiste ausblenden Strg+Umschalttaste+B Umschalttaste+Befehlstaste (cmd)+B
Tabtaste ausblenden Strg+Umschalttaste+T Umschalttaste+Befehlstaste (cmd)+T
Statusleiste ausblenden – / – Umschalttaste+Befehlstaste (cmd)+Ü
Reader einblenden Strg+Umschalttaste+R Umschalttaste+Befehlstaste (cmd)+R
Leseliste einblenden Strg+Umschalttaste+L Umschalttaste+Befehlstaste (cmd)+L
Stopp Esc Befehlstaste (cmd)+.
Seite neu laden Strg+R Befehlstaste (cmd)+R
Originalgröße Strg+O Befehlstaste (cmd)+O
Vergrößern Strg++ Befehlstaste (cmd)++
Verkleinern Strg+- Befehlstaste (cmd)+-
Quelltext anzeigen Strg+Alt+U Wahltaste (Alt)+Befehlstaste (cmd)+U
Top Sites einblenden Strg+Alt+1 Wahltaste (Alt)+Befehlstaste (cmd)+1
Gesamten Verlauf anzeigen Strg+H Wahltaste (Alt)+Befehlstaste (cmd)+2
Zurück Alt+Links Umschalttaste+Befehlstaste (cmd)+Ö
Vorwärts Alt+Rechts Umschalttaste+Befehlstaste (cmd)+Ä
Startseite Strg+Umschalttaste+H Umschalttaste+Befehlstaste (cmd)+H
SnapBack zur Suchergebnis-Seite Strg+Alt+S Wahltaste (Alt)+Befehlstaste (cmd)+S
Alle Lesezeichen einblenden Strg+Alt+B Wahltaste (Alt)+Befehlstaste (cmd)+B
Lesezeichen hinzufügen Strg+D Befehlstaste (cmd)+D
Lesezeichenordner hinzufügen Strg+Umschalttaste+N Umschalttaste+Befehlstaste (cmd)+Umschalttaste+N
Zur Leseliste hinzufügen Strg+Umschalttaste+D Umschalttaste+Befehlstaste (cmd)+D
Im Dock ablegen – / – Befehlstaste (cmd)+M
Alle im Dock ablegen – / – Wahltaste (Alt)+Befehlstaste (cmd)+M
Downloads Strg+Alt+L Wahltaste (Alt)+Befehlstaste (cmd)+L
Aktivität Strg+Alt+A Wahltaste (Alt)+Befehlstaste (cmd)+A
Webinformationen einblenden – / – Wahltaste (Alt)+Befehlstaste (cmd)+I
Fehlerkonsole einblenden – / – Wahltaste (Alt)+Befehlstaste (cmd)+C
JavaScript-Profilerstellung starten – / – Umschalttatste+Wahltaste (Alt)+Befehlstaste (cmd)+P
CSS-Animationen anhalten – / – Wahltaste (Alt)+Befehlstaste (cmd)+\
CSS-Animationen starten – / – Umschalttatste+Wahltaste (Alt)+Befehlstaste (cmd)+\
Page-Load-Test-Fenster – / – Befehlstaste (cmd)+\
Single-Process-Fenster – / – Wahltaste (Alt)+Befehlstaste (cmd)+N
Vorheriges Tab Strg+Umschalttaste+Tab Umschalttatste+Befehlstaste (cmd)+Linkspfeil
Nächstes Tab Strg+Tab Umschalttatste+Befehlstaste (cmd)+Rechtspfeil
Vorheriges Fenster – / – Umschalttatste+Befehlstaste (cmd)+<
Nächstes Fenster – / – Befehlstaste (cmd)+<

(dpe)

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
Design UI/UX

Noch besteht Hoffnung für iOS 7: Konzepte, von denen Jony Ive sich dringend inspirieren lassen sollte

Flach und sehr, sehr bunt ist das neue iOS 7 von Apple ausgefallen – und eher ausfallend sind die Meinungen dazu: „Love it or leave it“ scheint da die einzige Option zu sein. Doch noch ist es eine Beta-Version und zahlreiche Konzepte zeigen, wie es ähnlich, aber auch ganz anders gehen könnte; vor allem aber schöner: Wir haben die wichtigsten Beispiele für Sie gesammelt.

iPhone Flat UI Concept

Designer: Anton Kovalev
Beschreibung: Im Flat-Stil, doch mit weitaus dezenteren Farben

ios1

© Anton Kovalev

iOS 7 Concept design

Designer: Denes Farkas
Beschreibung: Cleaner, minimalistischer, reduziert auf wenige Farben

ios2

© Denes Farkas

IOS 7 Lockscreen Concept

Designer: Alexis Jossart
Beschreibung: Nur ein Konzept eines Lockscreens, doch inspirierend für eine dezente iOS-Version

ios3

© Alexis Jossart

iOS 7 icons

Designer: Sameer Ahmed
Beschreibung: Neugestaltung auf Basis des aktuellen Apple-Entwurfes.

ios4

© Sameer Ahmed

iOS 7: Just a concept

Designer: Peyman Eskandari
Beschreibung: Login-Screen, mit kreisförmigen Elementen

ios5

© Peyman Eskandari

iOS 7 Concept

Designer: Luca Abelardo
Beschreibung: Konzept mit einem radikal neuen Homescreen

ios6

© Luca Abelardo

Flat iPhone Concept

Designer: André Wyatt
Beschreibung: Flat, minimalistisch und gut

ios7

© André Wyatt

Icons iOS Flat design

Designer: Mohamed Kerroudj
Beschreibung: Flat-Design mit Glanzeffekt

ios8

© Mohamed Kerroudj

Flat iOS icons concept

Designer: Tom Arrowsmith
Beschreibung: Reduziertes 3D-Design

ios9

© Tom Arrowsmith

IOS7 Concept MCASE

Designer: Alexis Jossart
Beschreibung: Flacher und mit dezenten Verläufen

ios10

© Alexis Jossart

Stunning concept of iOS 7

Designer: Simply Zesty
Beschreibung: Widget-Center und Lockscreen, flacher und Verläufe

ios11

© Simply Zesty

Weather App Minimal Concept

Designer: Sanja Veljanoska
Beschreibung: Minimalistische Oberfläche für die Wetter-App

ios12

© Sanja Veljanoska

iOS 7 – Concept

Designer: Mads Bengtsson
Beschreibung: Runde Formen, Texturen und Social-Komponenten

ios13

© Mads Bengtsson

Interactive iPhone 5S & iOS7 Concept

Designer: recombu
Beschreibung: Interaktive iOS-Demo

ios14

© recombu

iOS 7 Concept

Designer: Moin Ahmad
Beschreibung: 2D, mit 3D-Touch

ios15

© Moin Ahmad

iOS 7: Redesigned Icons Free

Designer: Tim Degner
Beschreibung:

ios16

© Tim Degner

iOS 7 Mockup

Designer: Sam Waterbury
Beschreibung: 3D und Windows ähnlich

ios17

© Sam Waterbury

iOS 7 concept

Designer: Apfelpage
Beschreibung: Mix aus alten Formen und minimalistischen Ergänzungen

ios19

© Apfelpage

Re-imagining iOS

Designer: Tom Arrowsmith
Beschreibung: Variante der älteren Version

ios18

© Tom Arrowsmith

Baidu voice assistant concept design

Designer: Sky
Beschreibung: Voice-Assistent mit 2D-Feeling

ios20

© Sky

Und wer jetzt immer noch von Jony Ive überzeugt ist, der schaut sich Jony Ive Redesigns Things an, um die Kritik an Apples Variante zu verstehen.

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Sonstige Programme

Tayasui Sketches – iPad App für kreatives Zeichnen in direkter Konkurrenz zu Paper

Unsere Serie mit mit dem Titel „iOS for Creative Professionals“ hat schon seit längerer Zeit keinen Neuzugang mehr zu verzeichnen gehabt. Dabei gibt es beileibe keine Knappheit an Apps für mobile Apple-Geräte. Bekanntlich wurde erst kürzlich die Schwelle von 50 Milliarden heruntergeladenen Apps erreicht, womit rein rechnerisch jeder Weltbewohner im Schnitt knapp 7 Apps sein eigen nennen müsste. Trotz hunderttausenden Apps fällt es uns schwer, empfehlenswerte für das Kreativ-Gewerbe auszumachen. Heute jedoch ist es uns gelungen. Die brandneue Zeichen-App Tayasui Sketches ist es wert, näher betrachtet zu werden. Und wenn Sie sich dabei an Paper erinnert fühlen, dann ist das wohlmöglich Absicht…

tayasui-sketches-artistry-w640

Sketches – Japanischer Name, entworfen in Paris

Tayasui ist japanisch und bedeutet etwa „leicht und einfach“. Mit Blick auf Sketches mag man diese Bezeichnung auf das minimalistische, fast schon Zen-artige Interface und die intuitive Bedienung beziehen. In der Vergangenheit indes machte sich Tayasui vor allem unter Gamern und sonstige Spaß-Appern einen Namen.

Gegründet von Illustrator Yann Le Coroller fokussierte sich das Unternehmen lange Zeit eher nicht am seriösen Ende des App-Spektrums. Vielmehr verdiente es seine Brötchen mit Titels wie „Talking Carl“ oder „Mr. Goo“, die zwar erfolgreich, jedoch nicht sonderlich arbeitsorientiert waren. Sketches ist da ganz anders.

Sketches ist, da lügt der Name nicht, eine Anwendung zum Zeichnen. Natürlich kann man mit Sketches auch Strichmännchen oder Bilder im Stile der bisherigen Comic-Games aus dem Hause Tayasui erstellen, allerdings limitiert einen die App nicht darauf. Das Motto von Sketches lautet „schöne Apps erlauben schöne Zeichnungen“ und, ungeachtet der Holprigkeit dieses Spruches, tut zumindest Sketches das tatsächlich. Sowohl die Optik, wie die Bedienung, alles ist extrem schön und leicht.

tayasui-sketches-ipad-official-w640

Sketches – Gewinner im Paper-Look-Alike Contest, aber nicht nur das

Sketches erinnert deutlich an die großartige App Paper von FiftyThree, die wir hier im Dr. Web Magazin schon desöfteren behandelten. Es gibt allerdings auch Unterschiede. Bleiben wir zunächst bei den Ähnlichkeiten.

Nach dem ersten Start offeriert Sketches eine weiße Leinwand, sowie eine Auswahl an Zeichenwerkzeugen. Je nach Orientierung des iPad wird die Werkzeugleiste unten oder rechts angezeigt; Paper arbeitet ausschließlich im Querformat, mit der Toolbar unten. Bei Sketches ist im Querformat die Toolbar links.

Zur Verfügung stehen Bleistifte, Zeichenstifte, PInsel unterschiedlicher Arten und Sorten, alles, was für das Kritzeln, technische oder künstlerische Zeichnen benötigt wird. Farben werden über ein Farbrad gewählt und sind entsprechend nicht festgelegt. Aktionen werden nicht wie Paper per Drehung gegen den Uhrzeigersinn rückgängig gemacht, sondern indem man mit zwei Fingern nach links swiped. Rückgängig gemacht wird die letzte Aktion, Paper geht da weiter. Ein Pinch-Out, das Auseinanderziehen von Daumen und Zeigefinger auf der Zeichnung, bringt Sie in die Übersicht all ihrer erstellten Werke.

tayasui-sketches-startscreen-w640

Anders als Paper bringt Sketches ein Werkzeug mit, mit dem sich Muster als Zeichenstifte, aber auch als Flächenfüller verwenden lassen. Die Muster verwenden stets die aktuell gewählte Farbe aus der eingestellten Palette. Man kann in die Zeichnungen einzoomen, um so Details sauber nachzeichnen zu können. Beherztes Schieben nach oben mit einem Finger, öffnet die Möglichkeiten, die Zeichnung mit anderen zu teilen. Teilen lassen sich Zeichnungen via Facebook und Twitter, per E-Mail oder in die Fotogalerie des iPad hinein.

An der für das Teilen erforderlichen Vorgehensweise erkennt man den Gaming-Hintergrund Tayasuis. Ihre Zeichnung wird als halb in einen Briefumschlag eingeschoben visualisiert. Die Sharing-Ziele sind als Briefmarken dargestellt, die es mit dem Finger aufzukleben gilt. Ist das erledigt, schiebt man die Zeichnung komplett in den Umschlag und der Vorgang des Teilens läuft ab. Das sieht alles sehr schön aus, wie man einräumen muss, dass Sketches insgesamt eine schöne App ist!

Das folgende Video gibt einen guten Eindruck von den Zeichenmöglichkeiten in Sketches.

Sketches – Einige Features kosten extra

So, bis hierhin ist das komplette Featureset kostenlos erhältlich. Für einen kleinen Obulus von 1,79 € lässt sich In-App das ein oder andere nachbuchen. So wird man etwa in die Lage versetzt, die Größe und Form der Pinsel und anderer Werkzeuge zu ändern. Zwei weitere Zeichentools, ein Airbrush und ein Acrylpinsel, werden verfügbar. Farben können per Pipette direkt aus dem Bild aufgenommen werden und die Deckungsgrade der einzelnen Werkzeuge lassen sich einstellen.

tayasui-sketches-itunes-w640

Auf diese Weise erhält man schlussendlich mehr Funktionalität als bei Paper, noch dazu zu einem deutlich geringeren Preis. Es ist ziemlich offensichtlich, dass Sketches die gleiche Zielgruppe bedienen will. Probieren Sie einfach mal bei Apps aus und Sie werden sich ebenfalls des Eindrucks einer sehr großen Ähnlichkeit nicht entziehen können.

Es bleibt letztlich ein großer Unterschied. Paper arbeitet nicht mit einzelnen Zeichnungen, sondern fokussiert ganze Skizzenbücher, die man dann im besten Falle thematisch sortieren kann. Sketches arbeitet konsequent stets auf der Basis einzelner Zeichnungen, was bei sehr vielen Zeichnungen unübersichtlich geraten kann. Es ist indes nur eine Frage des individuellen Workflows, welche Arbeitsweise Ihnen näher liegt.

Sketches ist auf jeden Fall den Speicherplatz auf Ihrem iPad wert. Probieren Sie es aus.

Wie gefällt Ihnen Sketches? Kennen Sie weitere Apps der gleichen Art? Welche ist Ihr Favorit? Ist das iPad für Sie ein taugliches kreatives Werkzeug?

Links zum Beitrag

Kategorien
Essentials Icons & Fonts

Angebissen: 5 Iconsets für echte Apple-Fans

Heute stellen wir Ihnen ganz spezielle Icons vor, nämlich solche für wahre Apple-Fans. Wenn wir die Verkaufszahlen etwa des iPhone 5 als aussagekräftig definieren, dann können wir wohl als sicher annehmen: Wahre Apple-Fans gibt es ganz schön viele. Falls Sie sich angesprochen fühlen, wird Sie der folgende Beitrag besonders freuen. Wir stellen Ihnen nämlich fünf Iconsets in Apple-Optik vor. Alle sind völlig kostenfrei, aber nicht alle zu jedem Zweck verwendbar! Egal, schön sind sie alle. Und darauf kommt es bei echten Fans schließlich an!

appicns

Appicns ist ein Projekt, geführt von Kara und Andrew McCarthy. Die Icons erhalten Sie gegen eine ungewöhnliche Bezahlung. Sie müssen einen Tweet darüber versenden. Nachdem der Tweet abgeschickt ist, können alle Icons als Zip-Datei runtergeladen werden.


Einige Apple-Icons von appicns.com


So sieht der Download aus: Pay with a Tweet

Polestack

Das Polestack Icon-Set wurde von Delta Nine, einem User der deviantArt-Plattform, entwickelt. Im Paket sind drei Symbolsätze enthalten. Im ersten Set sind alle Icons in Schwarz dargestellt. Der zweite Satz beinhaltet Icons, welche im Stil einer Schultafel kreiert sind. Der dritte enthält Icons, welche wie ein Holzaufdruck aussehen. Jeder Satz enthält die Icons im ICNS-, PSD- und PNG-Format, alle sind in einer Zip-Datei verpackt. Die Größe der Icons in jedem Set beträgt 512×512 px. Der Download ist kostenlos, genutzt werden dürfen diese allerdings nur privat. Ich fand dieses Set dennoch sehr hübsch und als Inspirationsquelle gut geeignet.


Polestack-Set: ein Überblick


Black Stack: ein Beispiel


Schultafel-Style: ein Beispiel


Holz-Style: ein Beispiel

Holz-Laufwerke

Dieses Icon-Set enthält Symbole in der Optik hölzerner Laufwerke. Diese originelle Idee und ihre Umsetzung stammt von Thrasos Varnava, ebenfalls ein User von deviantArt. Die Icons sind im ICNS- und PNG-Format enthalten und in einer Zip-Datei verpackt. Die Größe aller Icons ist 512×512 px. Sie stehen unter der Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Lizenz.


Wooden-Slick-Drives-Set: ein Überblick


Wooden-Slick-Drive Icon: Movies

Mac USB Icons

Die Icons dieses Sets sehen aus wie USB-Stecker für den Mac. Meiner Meinung nach eine ebenfalls coole Idee. Der Designer des Set ist Ömer Cetin, ein Illustrator aus der Türkei. Die Icons sind im ICN- und PNG-Format enthalten und wiederum in einer zip-Datei verpackt. Die Größen der Icons im PNG-Format betragen 256×256 px, 128×128 px, 64×64px und 32×32 px. Icons im ICN-Format sind nur in der Größe von 256×256 px vorhanden. Das Set steht unter der Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Lizenz.


Mac USB Icon

Totem Pole Icons

Diese Icons sind von Talos Tsui kreiert. Allerdings dürfen Sie diese ausschliesslich zu privaten Zwecken verwenden. Die Icons liegen im dmg-Format in einer Zip-Datei verpackt vor und sind für die Betriebssysteme Mac und Windows verfügbar.


Totem Pole Icon Set

(dpe)

Kategorien
Inspiration Showcases

20 nicht alltägliche Wallpaper für iPads mit Retina-Display

Neben Hintergrundbildern für mein iPhone 5 benötigte ich dieser Tage auch einen neuen Satz von Wallpapers für mein iPad 3. Auch hier gibt es eine breite Vielfalt wählbarer Möglichkeiten. Es ist nicht schwierig, irgendwas zu finden. Es ist aber schwierig, Gutes zu finden. Und so suchte ich einige Stunden, die meiste Zeit vergeblich. In diesem Beitrag zeige ich Ihnen die Wallpaper, die mir am besten gefielen. Natürlich kann ich hier bloß meinen eigenen Geschmack repräsentieren, aber vielleicht gefällt dem einen oder anderen von Ihnen meine kleine Auswahl ja auch…

Alle Wallpaper im Überblick:

Nähere Informationen, nebst Links zum Download und zum Entwickler finden Sie auf den jeweiligen Detailseiten zum Wallpaper. Innerhalb der Galerie können Sie bequem von Wallpaper zu Wallpaper navigieren. Dazu klicken Sie entweder schlicht auf die Bilder oder verwenden die Navigationselemente unterhalb des Beschreibungstextes.

Kategorien
Inspiration Showcases

20 schicke Wallpaper für das iPhone 5

Wallpaper – völlig nutzlos, aber heißbegehrt. Von ganz schlicht bis hin zu grafischem Overload reicht die Palette. Für mein neues iPhone 5 begab ich mich auf die Suche nach modernen, nicht zu überladenen Hintergrundgrafiken. Hier ist, was ich fand. Vielleicht gefällt dem einen oder anderen von Ihnen meine kleine Auswahl ja auch…

Alle Wallpaper im Überblick:

Nähere Informationen, nebst Links zum Download und zum Entwickler finden Sie auf den jeweiligen Detailseiten zum Wallpaper. Innerhalb der Galerie können Sie bequem von Wallpaper zu Wallpaper navigieren. Dazu klicken Sie entweder schlicht auf die Bilder oder verwenden die Navigationselemente unterhalb des Beschreibungstextes.

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
Infografiken Inspiration

32.000 Kilometer: Die weite Reise eines iPhone 5 [Infografik]

Die Zubehörhersteller Mobile Madhouse haben sich anhand verschiedenster Quellen die Mühe gemacht, den weiten Weg eines einzelnen iPhone 5 über die gesamte Wertschöpfungskette nachzuvollziehen. Damit die Materie nicht so trocken wirkt, wie sie im Grunde ist, verpackte man die Informationen in eine schicke Infografik, die für den leichten sonntäglichen Konsum in nahezu idealer Weise geeignet ist.

Viele Köche verderben vielleicht den Brei, aber nicht das iPhone 5

Über 32.000 Kilometer legt jedes neue Smartphone aus dem Hause Apple zurück, zumindest wenn man so frei ist und die Wege aller Einzelteile kumuliert und das Apple Hauptquartier als Start- und Zielpunkt einrechnet. Mobile Madhouse war so frei ;-)

Ich finde an der folgenden Infografik besonders interessant, dass die jeweiligen Teilelieferanten in den unterschiedlichen Zulieferzonen benannt werden. So lässt sich mit einem schnellen Blick in Erfahrung bringen, dass nach wie vor die Overlays für die Touchscreens aus dem deutschen Unternehmen Balda stammen. Auch Infineon ist nach wie vor im Boot und liefert den integrierten Schaltkreis für die Baseband-Funktionalität, die Schnittstelle zum Mobilfunknetz.

Ein Klick auf die folgende Grafik führt zu Mobile Madhouse, wo man die Infografik in höherer Auflösung anschauen kann:

Link zum Beitrag:

  • The Journey of the iPhone 5! – Mobile Madhouse