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
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
(Kostenlose) Services Essentials

Serie: Markdown-Editoren für das iPad – Elements und Writing Kit (2/3)

Im Rahmen unserer Reihe „iOS for Creative Professionals“ befassen wir uns 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. Im ersten Teil unserer Serie befassten wir uns mit Byword und dem iA Writer. Heute stelle ich Ihnen Elements und Writing Kit vor…

Elements: Optimierter Workflow für Markdown-Enthusiasten

Elements hat vermutlich kaum einer auf dem Radar. Während sich Byword und iA Writer schon wegen ihrer Vormachtstellung auf dem Mac OS eines hohen Bekanntheitsgrades erfreuen, ist Elements eher ein Außenseiter im Markdown-Reigen. Dabei ist die App ein ernsthafter Wettbewerber.

Anders als Byword und iA Writer startet Elements mit der Dateiauswahl und kann lediglich mit der Dropbox synchronisieren. Dabei wird ein konkreter Ordner vorgegeben. Neue können angelegt werden. Die Sortierung der Dateien in der Auswahlansicht ist anpassbar, ein Standardsuffix kann vorgegeben werden.

Im Editorfenster unterscheidet sich Elements durch ausgeprägte Möglichkeiten, selbiges zu konfigurieren, was Schriftart, -größe, Schrift, Textbreite, Theme, sowie die Möglichkeiten der Rechtschreibkorrektur betrifft. Hier schlägt Elements die beiden bekannteren Vertreter.

Tastaturerweiterungen gibt es keine. Elements verlässt sich voll auf den iOS-Standard, inklusive der schwachen Zeichennavigation in der Nähe des Tastaturfeldes. Diese Schwäche hatte ich schon bei Byword bemängelt.

Die über ein Sternsymbol oben rechts in der dauerhaft sichtbaren Top-Bar erreichbare Preview ist die einzige im Testfeld, die den Namen verdient. Aus der Preview heraus kann direkt das HTML in die Zwischenablage exportiert werden. Ein (für mich wenig sinnvoll erscheinender) Notizblock soll spontane Notizen und Ideen aufnehmen. Warum nicht…

Die übrige Funktionalität ist Standard. Export ist als HTML und PDF vorgesehen. RTF steht nicht zur Verfügung. Gedruckt werden kann wie in den übrigen Vertretern auch. Eine manuelle Speichermöglichkeit ist nur auf den ersten Blick nicht vorgesehen. Zieht man jedoch den Text über den unteren oder oberen Rand hinaus, erscheint die Synchronisationsanimation, die man aus dem iOS ansonsten bereits kennt.

Elements kommt aus dem Hause Second Gear und liegt mit 4,49 Euro (iTunes-Link) als Universal-App oberhalb der Preise der Wettbewerber Byword und iA Writer, aber auf Augenhöhe mit dem folgenden Writing Kit.

Blättern Sie weiter zum Test von Writing Kit >>

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