Chapter 4: Creating the Prototype

The rest of this book gives you a guided tour of building your own web app based on all the latest HTML5, JS, and CSS3 features. The app that you build in this book is a wine app called Corks. Corks enables you to keep a cellar, or local database of all your wines, share to your social networks, and use geolocation to scan around you for wineries. All these features are built using the HTML5 technologies I discuss in Chapter 2.

This chapter discusses mockups, design, and wire framing for the different pages and navigational elements. It also introduces an HTML5 mobile boilerplate that can help you define the structure of the HTML elements and offer some handy JavaScript functions to get you started very quickly. Finally, it discusses using HTML5 hash change events that can help control the use of a user’s Back button on the web browser.

In the demo used in this chapter, you use jQuery Mobile for the CSS3, jQuery as your JavaScript framework, and iOS Simulator as your testing ground. By the end of this chapter, you will be able to:

Identify the required pages and HTML5 elements

Design and mock up the user interface for each page

Understand the navigation using HTML5 hash change events

Get Smashing Mobile Web Development now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.