Papermashup

Subscribe


Tweets


"@burgerbeartom @kycutwilson finally got around to using my free burgers for life! And we weren't disappointed. http://t.co/nJ6p2nLtg4"

@ashleyford 1 week ago

"RT @MAA: Insight from @CommunicatorHQ on the need for brands to take a long view on social responsibility http://t.co/4wWA3A2TOc"

@ashleyford 2 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

Prototype iPhone apps with Javascript and HTML

Build mobile apps with simple HTML‚ CSS‚ and JavaScript components using Ratchet

AshleyAshley

Ratchet is a great way of prototyping iPhone apps and has a whole host of functionality. It also takes advantage of Push.js which when connecting your pages allows you to create a prototype that feels like a real app when you save it to your phone. Push.js basically loads in the pages and animates between them much like the animation effects on native IOS apps. You’ll need to deploy the code on a server to get push working. You can download and check out Ratchet here.

Getting Started

Ratchet is not a complicated framework only for advanced developers. You can get up and running with it in minutes. It requires zero knowledge of any iOS programming and really only the tiniest bit of JavaScript.

1. All fixed bars (.bar-title, .bar-tab, .bar-header-secondary, .bar-footer) should always be the first thing in the of the page. This is really important!

2. Anything that’s not a .bar- should be put in a div with the class “content”. Put this div after the bars in the tag. The .content div is what actually scrolls in a Ratchet prototype.

3. They’re included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.

The Title Bar

The header is the container element for the title.

</pre>
<header class="bar-title">
<h1 class="title">Papermashup</h1>
</header>
<pre>

Adding A Popover

Popovers are designed to only fire from the title bar. Set the value of the title href to the id of a popover as shown below:


<!-- The Header Title Bar --></pre>
<header class="bar-title"><a href="#myPopover">
</a>
<h1 class="title">Title</h1>
<a href="#myPopover">
</a></header>
<pre>
<!-- The Popover --></pre>
<div class="popover" id="myPopover"><header class="popover-header"><a class="button" href="#">
Left
</a>
<h3 class="title">Popover title</h3>
<a class="button" href="#">
Right
</a></header>
<ul class="list">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div>
<pre>

Slider

The slider can be used for any type of content but it works great with images.

</pre>
<div class="slider">
<ul>
<li><img alt="" src="img/slide1.jpg" />
<span class="slide-text">← Slide me</span></li>
<li><img alt="" src="img/slide2.jpg" /></li>
<li><img alt="" src="img/slide3.jpg" /></li>
</ul>
</div>
<pre>

Linking Pages with Push.js

No working iPhone app prototype would be any good without the standard iPhone page transition. Fortunately the Push.js file takes care of this for you when you link pages together. You can even set up different transitions: without writing any JavaScript for example:



<a href="page-one.html" data-transition="fade">One</a>
<a href="page-two.html" data-transition="slide-in">Two</a>

The Conclusion

Ratchet is an amazing tool to put together prototypes. It’s effortless to get started with and i’d recommend it to anyone wanting to build an iPhone app demo. We’ve just touched the surface of what Ratchet can bo but it’s truly awesome.

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 5