First of all, you’ll be making this website for the same restaurant as the one you did with skeleton, so you should re-use all of the elements (pictures, menu items, etc.). You can also use the same color scheme and fonts, if you wish.
To get started, look through the available display options for content on the jquery mobile website. Listviews, for example, are practically custom-made for making a restaurant menu.
Once you have an idea of what you want to make, download the complete jQuery Mobile framework (“latest stable,” they call it on the website).
This framework comes with a LOT of files, only a few of which you need. Download our boilerplate from the IM server – already linked to jQuery, which you need – and rename the folder. You need to copy over and link to multiple files from the jQuery mobile download:
- The ‘images’ folder from the download
There are other files that you may want to link to, such as jQuery mobile theme files, but the above files are required to get the framework to function. In addition to copying the files into your working folder, you need to link to each one in your index.html file. Be sure to link to the jQuery mobile JS file after your link to jQuery. Also, link to the JQM stylesheet before the link to your own stylesheet.
JQM works in a strange way – you put all of your content in one big index.html file, designating ‘pages’ in your code. When loaded in a browser, the first ‘page’ shows up, and the others only show when you link to them (by replacing the start page). So, you’ll need a nav to be able to move between them.
Once you’ve thought out the page structure of your website, code unique pages like so:
<div data-role=”header”>header content </div>
<div data-role=”content”>main content here </div>
<div data-role=”footer”>footer content </div>
</div> <!— close page –>
Refer to this page to learn how to add particular forms of content. For instance, to add a nav bar, follow these instructions:
Once you’ve finished creating the layout and adding content, add three more things:
-A color scheme, via the ‘theme roller’ – I’ll show you how to do this in class on Wednesday.
-the ‘web app’ <meta> tags that make your page web-app capable – there is a file called ‘WebAppTemplate.html’ on the server that you can copy and paste from
-the ‘Add2Home.js’ script, which creates a pop-up telling iOS users to save the website to their homescreen. Fine it here: http://cubiq.org/add-to-home-screen
Upload the project to a server, test it (on a phone, that’s how I’ll grade it), and send me a link.