Drücke die Tasten ◄ ► für weitere Artikel  

Ratchet: Rapid Prototyping für iOS Apps

Mit Ratchet können Webworker Prototypen von iPhone Apps schnell und einfach mit HTML, CSS und JavaScript erstellen. Viele wichtige Elemente einer App bringt das Framework schon mit. Wir zeigen euch, was Ratchet für euch zu bieten hat.

Ratchet: Rapid Prototyping für iOS Apps

Ratchet ist ein Framework für die schnelle Entwicklung von Prototypen für iOS-Applikationen auf HTML-Basis, mit dem Webworker vollwertig wirkende Dummys von iOS-Applikation entwerfen können.

Ratchet Screenshot
Ratchet Demo

Ratchet simuliert native iOS-Elemente wie Navigations-Leiste, Buttons, Listen und Schalter. Das tolle an Ratchet: Man muss nicht zu tief unter die Haube blicken, um funktionierende Dummys zu bauen. HTML-Grundkenntnisse dürften für die meisten Ansätze ausreichen.

Nach dem Download steht euch eine Beispiel-Datei zur Verfügung, deren Quellcode einen guten Ausgangspunkt bietet, um die einzelnen Komponenten von Ratchet auszuprobieren. So könnt ihr ohne großen Aufwand Header, Navigations-Elemente und weitere typische iOS-Elemente hinzufügen, sodass in wenigen Minuten ein Interface entsteht, wie das im folgenden Screenshot.

Ratchet Interface
Ratchet Interface in 5 Minuten

Welcher Code welche Elemente erzeugt ist äußerst übersichtlich und verständlich mit Beispielen direkt auf der Startseite des Projekts erklärt.

Aus dem Folgenden Quellcode entsteht beispielsweise der Schalter-Teil des Beispiels im Screenshot:

<ul class="list">
<li>
Einstellung 1
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
Einstellung 2
<div class="toggle active">
<div class="toggle-handle"></div>
</div>
</li>
<li>
Einstellung 3
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>

Übergangs-Effekte mit Push.js

Mit Push.js verfügt Ratchet über eine Engine, die Unterseiten der Applikationen über miteinander verbindet. So lassen sich verschiedene Übergangs-Effekte wie „fade", „slide" oder „slide-out" in den Dummy integrieren. Dadurch fühlt sich der Prototyp bei Tests auf dem iPhone noch realistischer an.

Testen wie eine native App

Um den Prototypen zu Testen, empfiehlt sich die „Add To Homescreen”-Funktion des iPhones. So macht ihr von der WebApp-Funktion von iOS Gebrauch und blendet die Browser-Oberfläche von Safari einfach aus. Daraus ergibt sich ein sehr natives Gefühl bei der Nutzung des Prototypen.

Ratchet: Schnelle Lösung, nicht nur für Prototyping

Zwar mag Ratchet durch die Web-Technologien ohne entsprechende Anpassungen einige Schwächen bei der Usability aufweisen. Um einen App-Entwurf zu demonstrieren, bevor es ans teuere Entwickeln mit nativen Werkzeugen geht, ist das Tool aber extrem praktisch. Für einige Projekte dürfte der Leistungsumfang sogar soweit ausreichen, um Ratchet mit einigen Erweiterungen als Ausgangspunkt für eine HTML-App zu nutzen und diese in Kombination mit wie PhoneGap auch irgendwann in den AppStore zu bringen.

Für erweiterte Ansprüche lohnt sich vielleicht eher ein Blick auf Frameworks wie SideTap oder jQuery Mobile.

56 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
7 Antworten
  1. von Stefan Natter via facebook am 29.01.2013 (14:04Uhr)

    Danke für den Tipp.

  2. von Christopher Wals via facebook am 29.01.2013 (14:16Uhr)

    jetzt brauch ich nur noch ein mac zum entwickeln ;)

  3. von Daniel Sigl via facebook am 29.01.2013 (14:22Uhr)

    Gibt es sowas auch für Android?

  4. von Christoph Tatiamaz via facebook am 29.01.2013 (14:36Uhr)

    Kennt ihr die App "Interface HD"? Meiner Meinung nach das beste Prototyping Tool für iOS auf dem iPad.
    http://interface2.lesscode.co.nz/

  5. von Christoph Tatiamaz via facebook am 29.01.2013 (14:36Uhr)

    kann sogar nach xcode exportieren. und das gar nicht mal so schlecht ...

  6. von Flinto: Online-Editor für iOS-App-Proto… am 23.04.2013 (15:58Uhr)

    [...] Ratchet: Rapid Prototyping für iOS Apps - t3n News [...]

  7. von iOS-Prototyping: Tools und Tutorials fü… am 19.06.2013 (13:01Uhr)

    [...] Ratchet ermöglicht schnelles und einfaches iOS-Prototyping mit CSS, HTML und JavaScript. Das Framework beinhaltet viele grundlegende Elemente einer App und simuliert native iOS-Bausteine wie Buttons, Schalter, Navigationsleisten und Listen. Wer über grundlegende HTML-Kenntnisse verfügt, dürfte mit Ratchet problemlos funktionierende Prototypen erstellen können. Für das Anlegen stark angepasster eigener Designs eignet sich Ratchet hingegen weniger. Mehr Informationen zu dem Framework finden sich in einem entsprechenden Artikel auf t3n.de. [...]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Apps
Google: So könnt ihr Chrome-Apps in native iOS- und Android-Apps umwandeln
Google: So könnt ihr Chrome-Apps in native iOS- und Android-Apps umwandeln

Google zeigt euch, wie ihr eure Chrome-Web-Apps mit Hilfe von Apache Cordova in native Android- oder iOS-Apps umwandelt. Die fertigen Apps können anschließend in Apples App Store beziehungsweise... » weiterlesen

Ein Programm für Smartphone, Desktop und Xbox One: Microsoft stellt Universal Windows Apps vor
Ein Programm für Smartphone, Desktop und Xbox One: Microsoft stellt Universal Windows Apps vor

Auf ihrer Entwicklerkonferenz //build/ 2014 hat Microsoft Universal Windows Apps vorgestellt. Dank einer vereinheitlichen Windows-Runtime sollen Entwickler auf einfache Art und Weise Apps für die... » weiterlesen

Android laut Studie stabiler als iOS
Android laut Studie stabiler als iOS

Android-Geräte stürzen seltener ab als die Konkurrenzprodukte von Apple. Das besagt eine aktuelle Studie. Allerdings sollen Android und iOS eine generell hohe Stabilität aufweisen. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen