Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
  • Apps
Denis Potschien 26. November 2012

Ratchet: Framework zur Erstellung von Prototypen für iPhone-Apps mit HTML5

Kein Beitragsbild

Mobile Apps für das iPhone sind mitt­ler­wei­le zu einer Art Statussymbol für Websites gewor­den, wie es einst die Flash-Intros waren. Sie erfreu­en sich gro­ßer Beliebtheit und auch als Webdesigner ist man immer öfter gefor­dert, sol­che Apps zu ent­wi­ckeln. 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 mobi­le Apps zu erar­bei­ten.


Ratchet

Und genau das ist das Schöne an Ratchet: Als Webdesigner erstellt man einen App-Protypen mit bekann­ten und ver­trau­ten Techniken und muss sich nicht mit Objective-C, der iOS-App-Programmiersprache, her­um­schla­gen. Für einen Prototypen, der zunächst ein­mal Konzept und Aussehen der App dar­stel­len soll, ist das in vie­len Fällen aus­rei­chend.

Wie funktioniert Ratchet?

Zunächst ein­mal müs­sen die Ratchet-Beispieldateien her­un­ter­ge­la­den wer­den. Diese bestehen aus einer HTML-, einer CSS- und einer JavaScript-Datei. Neben fes­ten Bedienelementen (zum Beispiel Titel- und Navigationsleiste) gibt es einen Content-Bereich, der scroll­bar ist. Über ent­spre­chen­de Klassen wird den ein­zel­nen Elementen Aussehen und Verhalten zuge­wie­sen:

<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-“ begin­nen, fest­ste­hend und müs­sen als ers­tes dekla­riert wer­den. Der eigent­li­che Inhalt erhält die Klasse „con­tent“. Für den Content-Bereich ste­hen wei­te­re vor­de­fi­nier­te Inhaltstypen zur Verfügung, bei­spiels­wei­se 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 mit­ge­lie­fer­te CSS-Datei kann man das Aussehen der ein­zel­nen Typen ver­än­dern und dem geplan­ten Design anpas­sen. Auf der Grundlage der Beispieldateien kann sehr schnell und ein­fach ein Prototyp für eine App zusam­men­ge­klickt wer­den. Eine Liste aller Komponenten mit Quelltextbeispiel wird sehr anschau­lich auf der Website von Ratchet vor­ge­stellt.


Komponentenübersicht mit anschau­li­chen Beispielen

Zusätzliche Meta-Angaben im HTML-Head sor­gen dafür, dass das HTML-Dokument – zumin­dest auf Apple-Geräten – vom Look-and-Feel wie eine App dar­ge­stellt wird:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Die ers­te Meta-Angabe bewirkt, dass die Webanwendung im Vollbildmodus aus­ge­führt wird, die zwei­te dafür, dass die Satusleiste schwarz dar­ge­stellt wird. Außerdem sind in der Beispieldatei Apple-Touch-Icons in unter­schied­li­chen Auflösungen ein­ge­bun­den.

Seitenübergänge mit Push.js

Jetzt ist man es von Apps ja gewohnt, dass Seitenübergänge per schi­cker Slider-Animation gesche­hen. Auch dies lässt sich auf den App-Prototypen über­tra­gen – mit Hilfe von Push.js. Die JavaScript-Bibliothek lädt ver­link­te Seiten per Ajax und ani­miert anschlie­ßend den Übergang zwi­schen den Seiten. Ist Push.js im Head ein­ge­bun­den, ist der Effekt schnell auf einen Link ange­wen­det:

<a href="seite2.html" data-transition="slide-in">

Neben dem Slide-Effekt kann ein Seitenübergang auch per ein­fa­chem Fade („fade“) rea­li­siert wer­den.

Fazit: Mit Ratchet kann jeder Webdesigner – ohne Kenntnisse in App-Entwicklung – schnell sehr ein­drucks­vol­le Prototypen ent­wi­ckeln, die beim Kunden einen rea­lis­ti­schen Eindruck der App hin­ter­las­sen.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.