Kategorien
Apps HTML/CSS JavaScript & jQuery Responsive Design Webdesign

Progressive Web Apps: Mit HTML5 und JavaScript zur fast nativen App

Native Apps für Android- und iOS-Geräte haben in vielerlei Hinsicht große Vorteile gegenüber per HTML5 und JavaScript entwickelter Webanwendungen.

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
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)