Kategorien
Apps Programmierung

Aufgabenverwaltung mit erstaunlichen 10 Millionen Nutzern: Any.do jetzt auch als Web-App

Ich gebe zu, da staune ich. Dass Any.do mittlerweile mehr als 10 Millionen Nutzer hat, war mir neu. Damit dürfen sie sich zur größten mobilen Todo-App der Welt ausrufen. Ihre mobilen Apps gibt es sowohl für Android, wie auch für iOS. Vor kurzem fügten sie eine Chrome Extension hinzu und gestern veröffentlichte Any.do eine Web-App. Die ist allerdings reichlich ungewöhnlich und machte mir wieder klar, warum ich Any.do nicht nutze…

anydo-landing

Any.do: Minimalistisch wie kaum ein zweiter

Vor einer Weile war Any.do in aller Munde. Es war die Rede von der schönsten, revolutionärsten, einfachsten, elegantesten Aufgabenliste der Welt. Nach ganz kurzem Test war mir klar, ist nicht meins. Nicht nur die Funktionalität war mir zu rudimentär, auch das Design fand ich viel zu minimalistisch. Wie schon Einstein sagte: Macht die Dinge so einfach wie möglich, aber nicht einfacher.

Dabei übersah ich offenbar eines. Nämlich, dass für mich als Digitalnomaden eine Aufgaben-App ganz andere Dinge leisten muss als für Otto Normalverbraucher. Und auf genau den letztgenannten scheint Any.do mit Erfolg ausgerichtet zu sein. Man sieht es schon auf der Homepage. Die zeigt eine Großaufnahme einer sportlich, man könnte auch sagen häuslich bekleideten Dame mittleren Alters, die, in der Küche stehend, auf ihr iPad schaut. Eventuell hat sie soeben Toilettenpapier ihrer Einkaufsliste in Any.do hinzugefügt. Nicht etwa sieht man einen Manager im Anzug, der durch den Flughafen rennt, um seinen Flieger nicht zu verpassen oder einen zugewachsenen Programmierer vor seinen fünf Bildschirmen mit acht Deadlines im Nacken.

Ich blickte seither nie wieder auf Any.do zurück und hatte eigentlich schon gedacht, der Sand der Zeit hätte die App verschüttet und dem Vergessen anheim gestellt. Aber da irrte ich mich gewaltig, zumindest mal mittelfristig. Offenbar fanden regelrechte Massen an Normalverbrauchern Any.dos Einfachheit extrem attraktiv und integrierten die App fest in ihren Alltag.

Any.do: Aufgabenverwaltung auf niedrigstem Niveau

Zugegeben, in Any.do ist es so einfach wie in keiner anderen mir bekannten App, Aufgaben anzulegen. Schreiben Sie einfach Ihren Text, in riesiger Schriftgröße übrigens. Dann wählen Sie ein Fälligkeitsdatum mit Uhrzeit oder auch nicht. Wenn Sie wollen, setzen Sie noch eine Erinnerung und Unteraufgaben oder kleine Notizen. Die Aufgaben können in Ordner, wie etwa Persönliches und Geschäftliches abgelegt werden. Eigene Ordner legen Sie ebenfalls sehr einfach an.

Any.do's Minimal Web Version + Mobile Apps

Any.dos minimalistische Web-Version, rechts die mobilen Vertreter

Das ist alles. Anfügen von Dateien oder URLs ist nicht vorgesehen. Aufgaben an andere delegieren ist nicht vorgesehen. Sie können allerdings in den mobilen Apps einzelne Aufgaben an Ihre Kontakte versenden. Erinnerungen gibt es nur als Tonsignal, nicht als SMS oder E-Mail. Man kann Aufgaben nicht kommentieren. Unteraufgaben können keine eigenen Fälligkeitsdaten oder Erinnerungen erhalten. Alles sehr rudimentär…

Mich verschlug es zuerst zu Wunderlist. Dort hielt es mich allerdings auch nicht lange. Schlussendlich landete ich bei Todoist. Sowohl Wunderlist wie auch Todoist sind schön gestaltete Produkte, dabei aber weit weniger minimalistisch in Design und Funktionalität als Any.do. Im direkten Vergleich muss man deren Feature-Sets als geradezu beeindruckend bezeichnen. Dennoch bringt es Todoist nur auf etwas mehr als zwei Millionen Nutzer und Wunderlist zählt derer etwas mehr als sechs Millionen. Beide Apps unterstützen deutlich mehr Plattformen als Any.do das tut.

Wunderlist on Mobile
Wunderlist: Web-App

Todoist: Web App
Todoist: Web-App

Übrigens, für Teams gibt es da ein feines Tool namens BamBam. Dazu schrieb ich für unsere große Schwester Noupe Magazine vor ein paar Monaten diesen Beitrag.

So sind die Fakten. Dennoch schaffte es Any.do, weit mehr Sympathien für sich zu gewinnen. Offenbar gibt es sehr viele Nutzer, die einfach ihre bisherigen Haftnotizen und Einkaufszettel gegen etwas digitales ersetzen wollen. Und damit kann Any.do natürlich dienen. Verschwenden Sie nie wieder einen kleinen Schnipsel Papier, nutzen Sie stattdessen Any.do. Natürlich könnten Sie auch funktionsreichere Vertreter, wie eben Wunderlist oder Todoist nutzen. Aber wenn Sie partout nicht mehr wollen, dann bleiben Sie halt bei Any.do.

Any.do für Chrome und als Web-App

Erstaunlicherweise liefert die Chrome-Extension für Any.do Funktionalitäten, die ich auch für meine Zwecke oder – genereller – professionelle Zwecke nützlich finde. So lassen sich E-Mails sehr einfach zu Aufgaben machen, was Todoist in gleicher Weise bietet. Es können aber auch Nachverfolgungsaufgaben aus E-Mails angelegt werden. Das habe ich so noch nirgendwo anders gesehen. Was nützt es aber, wenn die App ansonsten so gar nicht auf professionelle Bedarfe ausgerichtet ist. Da laufen die schicken GMail-Features komplett ins Leere.

Die neue Web-App überrascht nach dem bisher Gesagten auch nicht. Es ist ein Beispiel dafür, wie wenig man liefern kann, ohne gleich komplett unbrauchbar zu werden. Any.dos Web-App ist, wenn man ehrlich ist, eine reine Design-Katastrophe. Sie arbeitet auch auf großen Monitoren schlichtweg so, wie sie das auf kleinen Touchscreens auch tut. Angepasste Layouts sind Fehlanzeige und auch ansonsten tut Any.do nichts, um sich die Stärken größerer Bildschirmdiagonalen irgendwie zunutze zu machen.

Schauen Sie sich diesen Screenshot an. Ich erstelle eine Aufgabe auf meinem 27" Dell-Monitor:

anydo-taskenter-27inch

Sie sehen es auf dem kleinen Shot nicht so deutlich, können es sich aber vielleicht denken. Trotzdem die Buchstaben groß sind wie Dackel, gibt es mehr Whitespace als sich selbst Johny Ive trauen würde, zu verdesignen. Die Listenansicht ist nicht viel anders. Schlussendlich habe ich das Browserfenster kleiner skaliert, damit ich mir nicht ganz so verapplet vorkam beim Arbeiten mit Any.do.

Sei’s drum: Zehn Millionen Nutzer können ja nicht vollkommen daneben liegen. Deshalb, mögen Sie Ihr Any.do, dann verwenden Sie es halt. Erledigen Sie Ihre Einkäufe damit. Vergessen Sie keinen Arzttermin mehr und stellen Sie sicher, dass Sie Ihren Kleinen rechtzeitig aus der Tagesstätte abholen.

Alles Gute…

Übrigens: Wenn Sie doch mehr wollen, dann lesen Sie doch diese Dr. Web-Artikel: “Aufgabenplaner Online – eine nicht ganz vollständige Liste” und „Wunderlist Pro ist da! Wir zeigen Alternativen!

Kategorien
Essentials Freebies, Tools und Templates

Publ.com: Offline-Inhalte schnell und komfortabel im Netz veröffentlichen

Der Katalog ist fertig und liegt in der Druckerei. Wäre es jetzt nicht gut, wenn man die gleiche Datei nehmen könnte, um den Katalog auch online zugänglich zu machen? Stattdessen wird man entweder eine PDF zum Download anbieten oder den Offline-Inhalt gleich gar nicht online stellen. Publ.com kann für diesen und andere Bedarfe eine sehr gute Alternative sein, zumal das Publizieren von Offline-Inhalten wirklich extrem einfach und schnell vonstatten geht.

publcom-landingpage

Publ.com und FlippingBook in kurzen Worten

Publ.com ist ein cloud-basierter Dienst, der aus zwei wesentlichen Teilen besteht. Da ist zum einen der FlippingBook Publisher, eine Windows-Software, die lokal installiert wird und fast beliebigen auf der Festplatte bereits vorhandenen Content importieren und in ein FlippingBook umwandeln kann. Und da ist zum anderen Publ.com selber, die Cloud, in der die lokal erstellten Publikationen gehostet werden. Publ.com arbeitet mit Amazons Web Services und bietet so eine stabile, schnelle und zuverlässige Umgebung, auch für größere Projekte. Reader-Apps für Android und iOS runden das Angebot ab.

Der Produktionsprozess ist in wenigen Schritten erledigt. In unserem Katalogbeispiel aus der Einleitung würde man lediglich sämtliche zum Projekt gehörenden Druckdateien, heutzutage fast immer PDF, in den FlippingBook Publisher importieren, ein paar Parameter anpassen und das Ergebnis wieder exportieren lassen. Herauskäme ein FlippingBook, das seinen Namen dem charakterischen Pageflip-Effekt verdankt, mit dem Seiten realitätsgetreu umgeblättert werden.

publcom-complete-toolkit

Dieses FlippingBook kann man nun auf verschiedene Weisen zugänglich machen. Entweder Sie publizieren es aus dem Publisher direkt per FTP auf Ihren Webspace oder legen es zunächst lokal in ein Verzeichnis ab. Oder Sie wollen direkt eine Publikation auf CD/DVD erstellen. FlippingBook stellt Ihnen für Windows eine .exe und für Mac eine .app zur Verfügung. Die letzte und beste Alternative stellt allerdings der Onlinedienst Publ.com selber dar. Publizieren Sie Ihren Content direkt in die Cloud, was verschiedene Vorteile hat.

Ich weiß nicht, welche Kapazität Ihr FTP-Server hat, weder was Geschwindigkeit, noch was Speicherplatz betrifft. Publizieren Sie über diesen Server nun populäre, dabei große Inhalte, kann es schnell eng werden und die Auslieferung wird zu einem zähen Unterfangen. Publ.com lebt in der Amazon-Cloud, die nach Bedarf skaliert und dabei die Inhalte stets ortsnah ausliefert. Mit Publ.com wird zudem sicher gestellt, dass nicht zunächst alle 2.500 Seiten Ihres Katalogs für Fliegenfischerzubehör heruntergeladen sein müssen, bevor der Interessent darin stöbern kann. Vielmehr erfolgen Download und Anzeige seitenweise, während im Hintergrund weiter geladen wird.

Über Publ.com gehostete Inhalte stehen außerdem über kostenfreie Apps für Android und iOS zur Verfügung. Der sog. Publ.com-Reader passt die Inhalte perfekt auf das Display der mobilen Geräte an. Auf diese Weise erreichen Ihre über Publ.com veröffentlichten Inhalte das breitest mögliche Publikum. Um es nochmal klar zu stellen. Der Publ.com-Reader ist nicht unbedingt erforderlich, da man ohne ihn direkt im Browser die HTML-Versionen verwenden kann. Wenn man aber die vollständige Desktop-Optik bevorzugt und die Publikation offline lesen möchte, dann sollte man sich die kostenlose App durchaus installieren.

publcom-android-app-01
Screenshot aus der Android-App
publcom-android-app-02
Und noch ein Screenshot aus der Android-App

FlippingBook Publisher, das Autorenwerkzeug des Bundles

FlippingBook Publisher steht in verschieden befähigten Versionen für die Windows-Plattform bereit. Wollen Sie sich ein eigenes Bild von dem Werkzeug machen, so lohnt sich der Download der 30-Tage-Testversion, die allerdings auf 10-seitige Präsentationen limitiert ist und auf jeder Seite ein FlippingBook-Branding einblendet. Dafür können Sie aber bereits den Cloud-Service mitnutzen. Das Konto erlischt automatisch nach 30 Tagen.

publcom-sample

Der Publisher ist in den verschiedenen Bezahlvarianten von Publ.com stets eingepreist, allerdings mit unterschiedlichen Fähigkeiten. Die Varianten Basic, Professional und Business unterscheiden sich dabei deutlich. Allen gemeinsam ist, dass die erzeugten Inhalte auch auf den mobilen Plattformen funktionieren, volltext-durchsuchbar, werbefrei und SEO-optimiert sind.

Will man beliebige Dateiformate importieren, Google Analytics einbinden, ein Bücherregal für die eigenen Publikationen integrieren, über HTTPS ausliefern oder den Zugriff insofern beschränken, dass nur Personen, denen man den entsprechenden Link nennt, auf die Inhalte zugreifen können, ist mindestens der FlippingBook Publisher Professional erforderlich. Mit dieser Variante lassen sich die INhalte zudem auf einer Subdomain von Publ.com hosten. Kommt noch der Bedarf an in sich mehrsprachigen Inhalten dazu oder will man seine Inhalte mit einem Passwort schützen oder einen Redaktionsworkflow mit mehreren Editoren abbilden, wird der Griff zur höchsten Version, dem FlippingBook Publisher Business erforderlich.

Ich habe mir die Testversion des Publishers herunter geladen und einen schnellen Test mit einer druckfähigen PDF-Datei gemacht. Obschon die Datei etliche Megabyte Gewicht hatte, importierte Publisher sie schnell, völlig klaglos und ohne Fehler. Über die links im Programm angeordnete Eigenschaftenleiste sind die wesentlichen Optionen schnell zurecht konfiguriert. Über verschiedene vordefinierte Skins legt man die grundlegende Optik, die durchweg ansprechend wirkt, fest.

publ-com-publisher-screenshot

Schon während der Arbeit zeigt Publisher konsequent im WYSIWYG-Modus das spätere End-Produkt an. Sämtliche Änderungen wirken sich direkt auf die Optik des zentral angezeigten, zukünftigen Onlineinhalts aus. Rechts neben dem Inhaltsbereich finden Sie eine Möglichkeit schnell zwischen den einzelnen Seiten des Projekts zu wechseln und schnell einzelnen Seiten abweichende Optionen zu verpassen, etwa was die Hintergrundfarbe betrifft. Letzteres funktioniert natürlich nur bei ansonsten transparenten Vorlagen, also nicht bei meiner importierten PDF-Datei. Bei verschiedenen Dateiformaten, wie etwa bei dem von mir verwendeten PDF können Sie entscheiden, ob die Ursprungsdatei zusätzlich zur Publikation als FlippingBook zum Download angeboten werden soll.

Mit etwas Geduld und Spucke können Sie sich ein Dokument hinbasteln, dass sich von der visuellen Anmutung her kaum noch von einem Buch unterscheiden lässt. Skeuomorphismus hat ein Refugium gefunden, jetzt, wo Johny Ive dem Konzept den Garaus machen will. Sie können indes nicht nur Bücher mit Publisher erstellen. Der Eingangs-Bildschirm des Publisher macht Ihnen bereits einige Vorschläge.

publcom-neues-projekt

Ich entschied mich für den Typ "Katalog", der empfohlen wird, wenn man Geschäftsunterlagen, etwa Jahresberichte und anderes, sowie – natürlich – Kataloge publizieren will. Andere Projekttypen sind besser geeignet für Magazine oder Bücher. Eine Projektvorlage erlaubt die Erstellung einer Fotogalerie, bei der nicht das Risiko des Bilddiebstahls besteht…

Einige Beispiele für die unterschiedlichen Projekttypen können Sie sich direkt bei Publ.com ansehen.

FlippingBook Publisher: Wo Licht ist, …

Das Publisher-Werkzeug liegt gut in der Hand, ist schnell und zuverlässig und verhilft sehr schnell zu sehr ansprechenden Ergebnissen. Das will ich hier durchaus noch einmal vorweg schicken. Aber, auch hier ist nicht alles Gold was glänzt und so dürfen ein paar Schwächen nicht unerwähnt bleiben.

Als Wermutstropfen ist sicherlich zu bezeichnen, dass FlippingBooks auf Flash basieren. Man dachte es sich schon, als man erstmals den Pageflip-Effekt sah. Der Rechtsklick auf einer beliebigen Publikation bringt die Gewissheit. Natürlich kann nahezu jeder real installierte Browser mit dem Format umgehen. Die mobilen Plattformen werden über die dedizierte Reader-App entsprechend fit gemacht. Nur, die Zukunft gehört Flash sicherlich nicht. Da dürfte man schnell Einigkeit erzielen.

Da ist es gut, dass Publ.com automatisch auch HTML-Varianten der Inhalte erstellt. Davon kann man sich schnell überzeugen, wenn man etwa mit mobile Safari eine der Beispielpublikationen öffnet. Entsprechend fähige Browser sehen eine HTML5-Version, ältere Browser erhalten immerhin eine abgespeckte Basis-Fassung. Niemand wird demnach zurück gelassen.

Für Kunden, die ihre Publikationen kostenpflichtig an den Start bringen wollen, ihre Inhalte also verkaufen wollen, ist Publ.com ebenfalls weniger geeignet. Sicherlich, man kann in der höchsten Version einen Passwort-Schutz definieren und so steuern, wer die Inhalte lesen können darf. Kein Passwort, kein Lesen. Indes, zeitgemäß und etabliert ist die Vorgehensweise im Markt der Self-Publisher nicht. Hier müssen Inhalte direkt über die einschlägigen Plattformen, akzeptabel wären allenfalls noch App- und Play-Store, gekauft werden können.

Fairerweise will ich aber doch herausstellen, dass die Zielgruppe von Publ.com schon eher die Anbieter von Produktkatalogen oder sonstigen kostenlosen Publikationen sind, die möglichst schnell und möglichst breit, dabei ohne großes Gefrickel verteilt werden sollen. Und genau das leistet Publ.com uneingeschränkt.

Publ.com, die Inhalte-Cloud

In Anlehnung an die verschiedenen Versionen des FlippingBook Publisher bietet Publ.com drei verschiedene Bezahlpläne an. Im Tarif Basic kostet Publ.com inklusive FlippingBook Publisher Basic monatlich 29 Euro. Darin enthalten sind alle weiter oben beschriebenen Features der Basic-Version, 1 GB Speicherplatz und 50 GB Datenverkehr. Das Produkt darf auf einem Computer eingesetzt werden.

Für monatlich 39 Euro erhalten Sie den Tarif "Professional" mit den weiter oben beschriebenen Features, 2 GB Speicherplatz und 100 GB Traffic. Sie dürfen das Produkt dann auf zwei Arbeitsplätzen einsetzen. 69 Euro müssen Sie berappen, wenn Sie den vollen Leistungsempfang im Tarif "Business" einkaufen wollen. 5 GB Speicherplatz und 250 GB Bandbreite dürften auch für anspruchsvolle und populäre Inhalte hinreichend sein. Sie dürfen das Produkt auf drei Arbeitsplätzen und in einem fünfköpfigen Redaktionsteam mit entsprechendem Workflow zum Einsatz bringen. Alle genannten Preise gelten für eine Bindungsfrist von sechs Monaten. Buchen Sie direkt längere Zeiträume gewährt der Betreiber bis zu 25% Rabatt.

Publ.com lehnt sich auf Dienstseite direkt an das einfache Konzept seiner begleitenden Publisher-App an. Mit einem einzelnen Klick publizieren Sie das fertige Werk auf Publ.com. Der Vorgang könnte einfacher nicht sein. Damit eignet sich die Gesamtlösung auch für technisch weniger versierte Zeitgenossen.

publcom-cloud

Nicht unerwähnt bleiben sollen die umfangreichen Möglichkeiten, den Content mit anderen zu teilen. Direkt in den entsprechenden Reader-Apps finden Sie Optionen zum Teilen auf Facebook, Twitter, Google+, LinkedIn, Tumblr oder vKontakte. Finden Sie eine fremde Publikationen besonders interessant und hat der Ersteller das zugelassen, so können Sie diese per Embed-Code auf Ihrer Website einbauen und so die Verbreitung unterstützen.

Besonders für Produktkataloge interessant sind die Features zum Einbinden von Videos und Weblinks, sowie die Möglichkeit, in die Publikation direkt Warenkorb-Funktionalität zu integrieren oder einen solchen direkt von dort aus anzusprechen. Es sind gerade die letztgenannten Features, die die Zielgruppe nochmal besonders deutlich definieren.

Fazit: Mit Publ.com wird jeder zum Publisher. Das Veröffentlichen der eigenen Publikationen geht sehr einfach von der Hand und ist auch von technischen Laien schnell erlernt. Hier hilft der schlanke, fast schon stromlinienförmige Workflow des sehr guten Werkzeugs FlippingBook Publisher. Mit Flash setzt Publ.com zwar nicht unbedingt auf eine Technologie der Zukunft, dafür sorgen aber automatisch erstellte HTML-Versionen für lückenlose Unterstützung auch älterer Browser. Darum muss sich der Inhalteersteller nicht einmal ausdrücklich kümmern.

Publ.com eignet sich vornehmlich für Anwendungsfälle, in denen große Mengen Content möglichst schnell und breit gefächert verteilt werden soll. Weniger bis gar nicht eignet sich der Service für Publisher, bei denen der Inhalt der Publikation auch das Produkt ist. Das Verkaufen der erzeugten Publikationen ist in Publ.coms Genen nicht angelegt. Gehört man jedoch zur Zielgruppe, macht man keinen Fehler mit einer Entscheidung für einen der – nicht ganz billigen – Bezahlpläne…

Weitere Links zum Beitrag

Kategorien
Essentials Freebies, Tools und Templates

Remote Debugging: Mobile Webseiten am PC oder Mac untersuchen

Beim Entwickeln von mobilen Webseiten kommt man irgendwann unweigerlich an den Punkt, an dem man auf dem Smartphone oder Tablet die Entwicklertools im Browser starten möchte, um das HTML und CSS genauer untersuchen zu können.

Dieser Beitrag zeigt Ihnen, wie Sie Webseiten auf Android- und iOS-Geräten mit den Browserentwicklertools auf einem PC oder Mac untersuchen können, und zwar weitgehend mit Bordmitteln und ohne die Installation zusätzlicher Software wie Android SDK, Adobe Edge Inspect oder Weinre (WEb INspector REmote).

Die Hardware

Bevor Sie loslegen, überprüfen Sie kurz die Hardware. Sie benötigen:

  • Smartphone oder Tablet mit Android oder iOS
  • USB-Kabel, um das Gerät mit dem Rechner zu verbinden
  • Mac mit OS X oder PC mit Windows (oder beides)

Am besten funktioniert die im Folgenden beschriebene Vorgehensweise auf Macs unter OS X ab 10.8, denn dort können Sie ohne viel Aufwand sowohl iOS- als auch Android-Geräte untersuchen. Auf PCs hingegen kann man nur Androids debuggen und muss zunächst einen USB-Treiber für das Gerät installieren, was Windows in der Regel allerdings automatisch erledigt.

Remote Debugging mit Android-Geräten (für Win und OS X)

Zum Debuggen von Webseiten auf Androids benötigen Sie folgende Software:

  • als Browser: Googles Chrome ab V28 auf beiden Geräten
  • auf dem PC oder Mac die Chrome-Erweiterung ADB
  • PC mit Windows (ideal 7) oder Mac mit OS X (ab 10.8)
  • unter Windows: USB-Treiber für das Android-Gerät

Und los geht’s.

1. Die Chrome-Erweiterung ADB installieren

Im Chrome auf dem PC oder Mac installieren Sie zunächst die Erweiterung mit dem schönen Namen „ADB“, die innerhalb von Chrome die „Android Debug Bridge“ zur Verfügung stellt und Ihnen damit die Installation des kompletten Android SDK erspart.

Zur Installation der Erweiterung suchen Sie im Chrome Web Store einfach nach den Buchstaben „ADB“ oder klicken auf den Direktlink, den Sie weiter unten bei den „Links zum Beitrag“ finden. Unter Windows 8 klappt die Installation aus dem Chrome Webstore nicht, aber bei Github gibt es genaue Anweisungen zur manuellen Installation. Einen Link dazu finden Sie ebenfalls am Ende des Beitrags.

Nach der Installation der ADB-Extension finden Sie im Chrome rechts oben einen kleinen grauen Androiden.

01-chrome-adb-installed

2. Debugging auf dem Android-Gerät erlauben

Auf dem mobilen Gerät müssen Sie das Debugging gleich zwei Mal erlauben, und zwar einmal in den Einstellungen des Gerätes und einmal im mobilen Chrome. Gehen Sie zunächst in die Einstellungen des Gerätes und erlauben bei den Entwickler-Optionen das USB-Debugging.

02-s2-usb-debugging-quer

Ab Android 4.2 sind die Entwickler-Optionen standardmäßig versteckt. Um sie einzublenden, rufen Sie in Einstellungen die Option Info zum Gerät (4.2) bzw. Über das Telefon (ab 4.3) auf. Dort tappen Sie dann sieben Mal auf die Buildnummer. Unglaublich aber wahr. Nach Absolvierung dieses Rituals gehen Sie wieder eine Seite zurück und finden dann dort die Entwickler-Optionen, in denen Sie wie oben beschrieben das USB-Debugging aktivieren können.

Starten Sie jetzt Chrome auf dem Android-Gerät und aktivieren Sie im Menü Einstellungen - Entwickler-Tools die Option Web-Debugging über USB, indem Sie auf die Option tappen und dann rechts oben den Schiebeschalter auf Ein stellen. [EDIT 2013-11-26: Falls diese Option nicht vorhanden sein sollte, machen Sie einfach mit Schritt 3 weiter. Siehe Kommentar weiter unten.]

03-s2-chrome-web-debugging-ein

Danach rufen Sie im mobilen Chrome die Seite auf, deren Quelltext Sie gleich am PC oder Mac untersuchen möchten.

3. Geräte verbinden und Quelltext untersuchen

Zum Verbinden der Geräte stöpseln Sie unter OS X einfach das USB-Kabel ein und bestätigen eventuelle Sicherheitsabfragen.
Auf dem Android-Gerät erscheint die Meldung Als Mediengerät verbunden und oben in der Statusleiste wird oben links das USB-Symbol sichtbar. Eine eventuelle Meldung „Es wurde keine Software auf Ihrem PC gefunden, die das Gerät erkennt“ können Sie ignorieren bzw. mit OK bestätigen. Es funktioniert trotzdem.

Unter Windows werden nach dem Einstöpseln des USB-Kabels zunächst die Treiber für das Android-Gerät installiert. Im Idealfall passiert dies automatisch und sie brauchen dafür nichts, außer ein paar Minuten Geduld. Falls die Installation aus irgendeinem Grunde nicht klappen sollte, müssen Sie den USB-Treiber für das Androidgerät manuell installieren. Einen Link für Windows OEM USB Treiber finden Sie am Ende des Beitrags.

Nach dem Verbinden der Geräte starten Sie im Chrome auf dem PC oder Mac die weiter oben installierte Erweiterung ADB, indem Sie zunächst auf den grauen Androiden klicken und dann auf den Befehl Start ADB. Daraufhin färbt sich der Android grün.

04-chrome-adb-view-targets

Klicken Sie auf das jetzt grüne Android-Symbol und wählen Sie im ADB-Menü die Option View Inspection Targets. Chrome öffnet die Seite chrome://inspect, auf der Sie eine URL eingeben und damit auf dem mobilen Chrome einen neuen Tab öffnen können. Darunter werden im mobilen Chrome bereits geöffnete Seite gelistet. Sie können sie untersuchen, indem Sie auf den Link Inspect hinter dem Namen der Seite klicken.

Die folgende Screenshot-Montage zeigt auf der linken Seite die Developer Tools im Chrome auf dem Desktop, in denen das HTML-Element für das Menü ausgewählt wurde. Auf der rechten Seiten sehen Sie, wie das auf dem Desktop-Chrome selektierte Element im Chrome auf dem Android-Gerät hervorgehoben wird. Änderungen in den Developer Tools auf dem Desktop werden live und in Farbe im mobilen Browser umgesetzt. Remote Debugging.

05-chrome-devtools-desktop-webseite-mobile

Remote Debugging mit iOS-Geräten (nur OS X)

Zu Analyse von Webseiten auf iOS-Geräten benötigen Sie mindestens iOS 6 und einen Mac. Der wesentliche Unterschied liegt darin, dass das Debugging im Safari stattfindet und nicht im Chrome.

Gleich zu Beginn der Hinweis, dass Sie statt eines echten iOS-Gerätes auch den in der Programmierumgebung Xcode enthaltenen iOS-Simulator benutzen können. Die folgenden Schritte können Sie also auch dann abarbeiten, wenn Sie gerade weder ein iPhone noch ein iPad zur Verfügung haben. Xcode selbst können Sie aus dem Appstore heraus installieren. Im Menü Xcode - Open Developer Tool wird dann der iOS-Simulator gestartet.

1. Im Safari die Entwicklertools aktivieren

Zunächst aktivieren Sie im Safari auf dem Mac und auf dem mobilen Gerät (oder im iOS-Simulator) die Entwicklertools. Auf dem Mac finden Sie dazu in den Einstellungen im Abschnitt Erweitert die Option Menü "Entwickler" in der Menüleiste anzeigen.

06-safari-einstellungen-erweitert

Im iOS-Gerät gehen Sie in die Einstellungen - Safari - Erweitert und aktivieren dort mit dem Schieberegler die Option mit dem unscheinbaren Titel Webinformationen. In der englischen Version heißt der Befehl Web Inspector.

07-ipad-einstellungen-safari-erweitert

2. Geräte verbinden und Quelltext untersuchen

In diesem Schritt verbinden Sie iOS-Gerät und Mac mit dem USB-Kabel. Danach öffnen Sie auf dem Mac den Safari und finden dort im Menü Entwickler relativ weit oben das per USB-Kabel angeschlossene Gerät und bzw. oder den iOS-Simulator.

08-safari-entwicklermenü-ios-devices

Für die gefundenen Geräte werden alle im Safari geöffneten Webseiten angezeigt. Ein Klick auf die gewünschte Seite, und schon sehen Sie auf dem Mac die Entwicklertools mit dem Quelltext der auf dem mobilen Safari geöffneten Webseite. Auch hier werden Änderungen in den Entwicklertools auf dem Mac sofort im mobilen Safari umgesetzt.

09-safari-devtools-ipad-simulator

Fazit

Das Debuggen von Webseiten auf mobilen Geräten von einem PC oder Mac aus ist auch ohne zusätzliche Software recht einfach möglich und erleichtert die Optimierung ganz enorm.

Links zum Beitrag

Remote Debugging für Android:
Chrome downloaden
Die Erweiterung ADB im Chrome Webstore
ADB unter Windows 8 – manuelle Installation.
Windows OEM USB Treiber für Android
– Artikel „Remote Debugging on Android“

Remote Debugging für iOS:
Safari 7
Xcode mit iOS Simulator
– Artikel „Using Web Inspector to Debug Mobile Safari“

Links zu weiteren Tools

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Sonstige Programme

Sketchology für iPad: Vektorbasiertes Zeichnen ohne Größenlimit

In unserer losen Reihe "iOS for Creative Professionals" stellen wir Ihnen heute die brandneue iPad-App Sketchology, das Erstlingswerk des Entwicklers Robin Mickle vor. Sketchology scheint auf den ersten Blick bloß eine weitere Zeichen-App unter den vielen bereits vorhandenen zu sein. Bei genauerem Hinsehen indes, ist sie ziemlich einzigartig. Denn sie erlaubt das Zeichnen ohne Größenbegrenzung. Die Leinwand kann dynamisch frei gezoomt werden. Beliebig große Werke sind so möglich.

sketchology-app-homepage

Sketchology: Vektoren statt Pixel

Man denkt es sich bereits. Zeichnen ohne Größenbegrenzung? Frei zoombar? Das kann kein Pixel-Knecht sein. In der Tat ist Sketchology eine Zeichen-App, die komplett auf Vektoren setzt. Auf diese Weise sind extrem detailreiche Werke möglich, von denen auf der Website zur App etliche, teils wirklich beeindruckende zu sehen sind.

sketchology-app-examples

Um nur mal einen Eindruck zu vermitteln, lassen Sie uns das folgende Bild mal etwas näher ranzoomen:

sketchology-app-examples-zoomed-out
sketchology-app-examples-zoomed-in

Ich denke, es wird visuell hinreichend deutlich, was mit Sketchology möglich ist.

Sketchology mit herkömmlichen Zeichenwerkzeugen

Dabei setzt Sketchology durchaus auf traditionelle Zeichenwerkzeuge, wie man sie auch in anderen Apps, etwa Paper oder Sketchbook vorfindet. Insgesamt bietet Sketchology fünf Pinsel und vier Werkzeuge, dazu verschiedene Strichstärken und Deckkraft-Einstellungen, sowie einen Farbmischer, der nicht auf Vorgaben beschränkt ist. Paper-Nutzer kennen letzteres erst seit einem der letzten Updates.

Dabei ist Sketchology kostenlos, dies jedoch nur im Grundausbau. Dieser besteht aus drei Pinseln, nur einem Werkzeug und elf wählbaren Grundfarben. Das reicht nur zum Testen, immerhin ist der Wasserfarbpinsel und die Kalligrafie-Feder, sowie ein Tintenwerkzeug bereits dabei. Schmerzhafter wirkt sich schon das Fehler der freien Farbmischung, aber auch das Fehlen von Werkzeugen, wie der Pipette, einer Flächenfüllfunktion und dem selektiven Weichzeichner aus.

Kurz und gut: Wer ernsthaft mit Sketchology arbeiten will, kommt um einen In-App-Kauf in der Größenordnung von 4,49 Euro nicht herum. Damit werden alle verfügbaren Funktionen frei geschaltet.

Sketchology macht einem den Einstieg leicht. Über eine zunächst leere Übersicht der bereits erstellten Werke begibt man sich zu einem leeren Canvas, dem am oberen Ende die Werkzeugleiste angefügt ist. Über "Hide" lässt sich diese zum Verschwinden bringen, ein kleines Plus am oberen linken Bildschirmrand erlaubt die Wiedereinblendung der Leiste mittels eines Tap.

sketchology-landscape-load-screen

Sketchology folgt dem Trend zum Flat Design und stellt durch seinen übersichtlichen Funktionsumfang und seine klare Formensprache auch absolute Neueinsteiger nicht vor Rätsel. Die einzelnen Buttons muss man indes etwas länger gedrückt halten, bevor weitere Optionen erscheinen, wie hier die verfügbaren Pinsel:

sketchology-brushes

Das Mischen der gewünschten Farben erfolgt vollständig visuell, was bei einer App, die sich ganz offensichtlich eher an Künstler, denn an Kommunikationsdesigner richtet, dann auch konsequent ist.

sketchology-colorselector
Die Verpixelung auf diesem Screenshot ist meinem PNG-Optimierer geschuldet. In Natura sieht das natürlich nicht so aus.

Zeichenschritte können rückgängig gemacht werden, allerdings nur in einer Größenordnung von rund einem Dutzend der zuletzt ausgeführten Aktionen. Ebenso kann das Rückgängigmachen rückgängig gemacht werden.

Grundsätzlich benötigt man in Sketchology nur zwei Finger. Mit zwei Fingern auf dem Display zoomt man ein und aus und bewegt den Bildausschnitt frei umher. Sobald nur ein Finger auf dem Display erkannt wird, wird wieder gezeichnet. Das ist simpel und bereitet schon nach kurzer Zeit einige Freude. Selbst weniger begabte Zeichner wie ich, können durch das extreme Ein- und Auszoomen schicke Details mit dicken Fingern zeichnen, die in der Gesamtschau wie filigrane Effekte wirken.

Sketchology: Der Haken an der Sache

Wer bereits beim Lesen ein wenig weiter gedacht hat, stellt sich womöglich jetzt bereits die wichtigste Frage: Wie speichert man diese Zeichnungen?

Nun, natürlich können Zeichnungen in ihrem jeweiligen Zoomstatus in die Camera-Roll gespeichert werden, wo sie dann als PNG in Retina-Auflösung liegen, also zu Pixeldateien werden. Damit ist der Vorteil des Zeichnens ohne Größenbeschränkung dahin.

Will man die Zeichnungen außerhalb von Sketchology betrachtbar machen, so ist man auf den Dienst des Entwicklers angewiesen. Entscheidet man sich in der App unter Options > Share für "Export super-resolution" und wählt danach eine der Share-Methoden (Twitter, Facebook oder E-Mail), so wird man ohne weitere Erläuterungen aufgefordert, einen Account anzulegen. Hierzu gibt man eine E-Mail-Adresse an und vergibt ein Passwort, sowie einen gewünschten Nutzernamen.

Danach kann man die Exportgröße wählen, die von 35 Megapixel bis zu 1,57 Gigapixel rangiert. Hat man sich für eine Auflösung entschieden, führt ein Tap auf Ok dazu, dass Sketchology die Datei berechnet und auf die Website hochlädt. Das erzeugte Format bleibt dabei im Dunkeln.

Nun stellt Sketchology Ihnen einen Link zur Verfügung, der Sie zu einer frei zoombaren Webansicht Ihres Kunstwerks führt. Besser als nichts, mag man sagen, aber natürlich keine gute Lösung. Klicken Sie hier für ein Beispiel.

Im Ergebnis erhalten Sie demnach für 4,49 Euro eine zweifellos beeindruckende App, die es Ihnen ermöglicht, beliebig große Kunstwerke mit erstaunlichem Detailgrad zu erzeugen. Allein, Sie können mit den so kreiierten Werken außerhalb der Sketchology-Website nichts anfangen. Zur Frage, ob sich das in Zukunft ändern soll, denkbar wäre ja mindestens eine Plugin-Lösung für beliebige Websites, ist nicht zu ermitteln.

Einstweilen müssen Sie sogar dem Betreiber im Zuge der Account-Erstellung die Genehmigung erteilen, Ihre Werke frei verwenden zu dürfen, was alles in allem ziemlich inakzeptabel ist. Solange Sie Sketchology (iTunes-Link) indes autark als App auf Ihrem iPad betreiben und als solches betrachten, ficht Sie das alles nicht an und Sie verfügen über eine der besten Zeichen-Apps, die ich bislang in die Finger bekam.

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
Essentials Icons & Fonts

Pixelglyph: 200 freie PNG-Icons für die Entwicklung mobiler Websites und Apps

Wer sich mit der Entwicklung mobiler Websites oder Apps für iOS und Android oder andere mobile Geräte beschäftigt, kommt um die Verwendung von Icons nicht herum. Der Bedarf an guten Icons steigt deshalb stetig. Wie in vielen Bereichen, ist es auch hier schwer, die Spreu vom Weizen zu trennen. Zudem sind viele ansehnliche Packs mit stattlichen Preisen versehen. Ein ganz frisches Pack namens Pixelglyph versucht es mit einem Freemium-Modell. Wir haben es uns angesehen…

Filesquare, Oursky und kostenlose Icons

Bringen wir mal ein bisschen Ordnung in die Sache. Das Icon-Set, um das es hier geht, wird unter dem Namen Pixelglyph von Filesquare angeboten. Filesquare ist dabei lediglich ein Produkt. Es handelt sich um eine Web-App, mit dessen Hilfe man erweiterte Mockups mit Durchklick-Funktionalität und direkten Feedback-Kanal erstellen kann. Von der Sorte gibt es einige, Filesquare reiht sich hier ein.

Hersteller von Filesquare und dementsprechend auch Pixelglyph ist die Firma Oursky mit Sitz in Hongkong. Oursky hat sich nach eigenen Angaben auf die Erstellung von Apps mit Fokus auf mobile Geräte spezialisiert. Icons benötigt man also schon für den Eigenbedarf.

Pixelglyph soll sicherlich zum einen den Bekanntheitsgrad der Mockup-Lösung Filesquare steigern, zum anderen verspricht man sich wohl den ein oder anderen Kaufumsatz durch die Bezahlversion des Iconsets.

Pixelglyph: 200 x 2 einfarbige Icons in 16 und 48 Pixeln zum Quadrat

Pixelglyph kommt in zwei Varianten, die beide kommerziell unter der CC-Lizenz genutzt werden können, wenn auf den Urheber des Iconsets verwiesen wird. Die kostenlose Variante beinhaltet 200 einfarbige Icons im PNG-Format. Diese liegen in 16 x 16 und 48 x 48 Pixeln Größe vor.


E-Mail-Adresse reicht, auch Wegwerf-Dienste funktionieren

Um das rund 4,2 MB große Zip mit den 400 Einzeldateien herunterladen zu können, ist es erforderlich, auf der eigens eingerichteten Website eine E-Mail-Adresse zu hinterlassen, an die dann der Download-Link gesendet wird. Da die Versendung unmittelbar erfolgt, funktioniert auch eine zeitlich begrenzte Wegwerf-Adresse. In der Mail findet sich ein Link, der ohne Umschweife über den Standardbrowser den Download initiiert. Weitere Daten werden nicht erhoben.

Wer sich für die Bezahlvariante entscheidet, erhält für 25 Dollar nicht nur den Umfang des kostenlosen Pakets. Zusätzlich werden die Quelldateien im Adobe Illustrator- und EPS-Format mitgeliefert, so dass eine flexible Skalierung der Icons auf die persönlich benötigten Maße erfolgen kann.


Alle 200 Icons im Überblick

Das Download-Paket ist sauber organisiert. Die Icons sind sinnvoll benannt und tragen ihre Maße direkt im Dateinamen. Für jede der beiden Größen gibt es einen eigenen Ordner. Das gefällt nicht nur dem Bürokraten in mir.

Von mir gibt es daher ein klares „Daumen hoch“ für die 200 frischen Icons aus Hongkong…

Links zum Beitrag:

  • 200 icons designed for your mobile apps – Pixelglyph
  • Filesquares Blog zur mobilen Web- und App-Entwicklung – Filesquare.Blog
  • Mockups zum Durchklicken mit Filesquare – Filesq.com
  • Die Köpfe hinter Filesquare und Pixelglyph – Oursky aus Hongkong
Kategorien
Essentials Freebies, Tools und Templates Webdesign

Serie: Markdown-Editoren für das iPad – Byword und iA Writer (1/3)

Im Rahmen unserer Reihe „iOS for Creative Professionals“ befassen wir uns ab heute mit verschiedenen Markdown-Editoren für das Tablet aus Cupertino. Während es in der Windows- und auch in der Android-Welt erstaunlich wenige Markdown-Editoren gibt, ist das Apple-Universum gut bestückt mit einer ganzen Reihe dieser Tools. Die Platzhirsche der Mac-Plattform stehen auch für das iPad zur Verfügung. Darüber hinaus gibt es einige iOS-exklusive, nicht minder interessante Vertreter. Ich habe sie mir näher angesehen.

Markdown – warum sollte man sich dafür entscheiden?

Markdown ist eine einfache Auszeichnungssprache, die als Rohmaterial für verschiedene Zielformate dienen kann. Jeder, der etwa für Online-Magazine schreibt, aber auch Print bedienen will oder muss, wird sich eher früher als später nach einem Format umsehen, dass ihn nicht von vornherein determiniert. Versuchen Sie mal, aus einem HTML-Dokument ein RTF, DOC oder anderes Format zu erzeugen. Das geht zwar, ist aber kein Vergnügen. Mit Markdown ist all das und noch viel mehr kein Problem, liegt quasi in den Genen dieser Auszeichnungssprache.

Auch Lektoren ziehen Markdown voll formatiertem HTML vor, da es sehr viel lesbarer ist. Entwickler setzen meist ebenfalls auf Markdown, auf Github ist es die Standardauszeichnungsprache. Für WordPress gibt es entsprechende Plugins zur automatischen Konvertierung von Markdown nach HTML zur Laufzeit. Der Shooting Star der Entwickler-Editoren, Sublime Text 2, etwa, kann zum wahren Markdown-Wunder ausgebaut werden. Kollege Peter Müller arbeitet gerade an einem Beitrag, in dem er erläutern wird, wie man das im Einzelnen macht.

Markdown wurde entwickelt von John Gruber und Aaron Swartz. Aaron hat sich leider dieser Tage zum Selbstmord entschlossen. Er wurde nur 26 Jahre alt.

Markdown auf dem iPad – sinnvoll und komfortabel nutzbar

Auf dem iPad ist Markdown ebenfalls das Format der Wahl, speziell wenn man mit der On-Screen-Tastatur schreibt, wie ich das gerade tue. Wir werden uns einig sein, dass es insbesondere, aber nicht nur auf dem Touchscreen einfacher ist, ein # vor eine Überschrift erster Ordnung zu setzen, anstatt vor die Überschrift <h1> und danach </h1> setzen zu müssen. Erst im Rahmen des Exports zu HTML verwandelt der Markdown-Editor die Raute in die korrekte HTML-Formatierung.

Die Apps für das iPad, die ich im folgenden vorstellen werde, können neben der Grundfunktionalität des HTML-Exports, für die Markdown ursprünglich entwickelt wurde, weitere Formate erzeugen. Die Unterschiede liegen im Detail. So könnte man das Fazit vorweg nehmen und konstatieren, es käme angesichts der Ähnlichkeiten im Funktionsumfang nicht darauf an, für welche App man sich letztlich entscheidet. Dem ist allerdings nicht so. Denn die Details wirken sich doch auf den Workflow aus. Und wenn man eines durch den Einsatz von Markdown erreichen will, dann ist es ein optimaler Workflow. Insofern sind die Details entscheidend.

Im Testfeld finden sich Byword, iA Writer, Writing Kit, WriteUp, Daedalus Touch und Elements. Bis hierhin entstand der Beitrag mit Byword, weil Byword auf dem Mac mein Editor der Wahl ist. Die folgenden Einzeltest verfasste ich mit der jeweiligen App.


Sublime Text 2 mit Markdown-Plugins

Die Schlussbearbeitung erfolgte übrigens mit Sublime Text 2, ausgestattet mit den Plugins aus Peter Müllers morgen erscheinendem Beitrag „Dreamteam: Texte schreiben mit Sublime Text 2 und Markdown“.

Im heutigen Teil 1 unserer dreiteiligen Serie befasse ich mich mit Byword und dem iA Writer. Der zweite Teil wird Elements und Writing Kit vorstellen, bevor der dritte Teil mit WriteUp und Daedalus Touch den Abschluss bildet.

Blättern Sie weiter zum Test von Byword >>

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)