Use your left/right keys to browse tutorials
Prototype iPhone apps with Javascript and HTML

Prototype iPhone apps with Javascript and HTML

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on January 23, 2013

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.


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

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

<header class="bar-title">
  <a href="#myPopover">
    <h1 class="title">Title</h1>
  </a>
</header>

<!-- The Popover -->

<div id="myPopover" class="popover">
  <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>

Slider

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


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

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.



More tutorials from Papermashup
Comments
3 discussions around Prototype iPhone apps with Javascript and HTML
  1. vinay says:

    This is really cool one man….

  2. Pingback: Raymon Schouwenaar.nl | Prototype iPhone apps with Javascript and HTML - Raymon Schouwenaar.nl

  3. gooooooooooooooooood and nice tutorial post





Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.