Mobile

1. Think of an idea for an app, here are some suggestions if you can’t think of any:

• Candy Ratings
• My Favorite Things (food, car, colors, stores, restaurants, brands, video games, apps etc.)
• My Photo Collection
• Study Guide (Math, spelling bee, etc.)

2. Plan out your app

 

• App Name
• Colors
• App layout
• Storyboard / navigation
• Basic info: about, help, contact, etc.
• App Content

3. Create the page to house your new app

1. Login to your tech rocks! site  ( e.g. http://alvin.techrocks.com/wp-admin )
2. On your left panel, hover to PAGE then click Add New
3. Insert “Basic App” as your title.
4. Under Page Attributes , go to Template then select Mobile App Template
5. For the main content, use and copy the sample code below to start:
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<h1>INSERT APP TITLE HERE</h1>
</div>
<div data-role="content" data-theme="a">INSERT CONTENT HERE</div>
<div data-role="header" data-position="inline">
<h1>INSERT FOOTER HERE</h1>
</div>
</div>

6. Click Publish button, then preview it in browser.

4. Updating the Cascading Style Sheet (CSS) of your app

1. Using the colors your chose in step 2, modify the colors of your app using the CSS
2. ??

5. Updating your app

1. For different elements you will use, visit demo page of JQM for references (click here).
2. Click Update button after applying changes.
3. Preview on your browser to test.