Mobile Web Applications Development-

Group Assignment Requirements

In this group assignment (maximum 5 students) requirement, you are required to design and develop mobile web application using any or all of the techniques you have learned in the class for example: HTML, CSS, Javascript etc.

You need to choose your topic, something that would interest you and specify its requirements carefully, decide exactly what you would like to do and which application you need to design and develop.

You need also to document your group assignment work in a report included in the webapp itself.

Group Assignment Report Requirements

Group assignment report should include at least the following sections:

Overview: A description of what the web application is, what problem it is solving or what service it is providing..

Design: How you turned the requirements into a set of pages and scripts.

Implementation: Details of how the application's functionality was programmed.

Analysis: What worked and what didn't? What would you do differently and why?

This project report must be presented using HTML and/or CSS.

Some Project Topic Suggestions

Here are a few ideas for different possible web applications. You don't have to do any of them. And in fact it would probably be more interesting if you pick your own. Whatever you choose, plan your development carefully so you don't end up with nothing.

You won't learn anything and we will probably be able to find it online ourselves. If you want to use an idea from the web, be sure to cite the source of your inspiration in your report. Do not use other people's code.

• A dynamic Lineup Card, listing members of a team or other group. You'd want a nice design, that presented what's called a Master-Detail view: a list of the members of the group with a way to drill-down in details of an individual member. Thumbnail pictures in the master list, bigger pictures in the detail view perhaps. Name and number in the master list, season statistics or likes/dislikes in the detail view. And so on. You'd probably predefine the people and their details in Javascript data structures rather than loading them from a database.

• There are plenty of variations on the idea of a dynamic Shopping Cart. That is, an application where there's a list of things for the user to choose from, and they build up an order dynamically. A variation on this is selecting options for a product, for example a car with options or a pizza with toppings.

In real life, online shopping carts run with web server support for keeping track of the order. You would keep track on the client (in Javascript, perhaps using HTML5's Local Storage) and make sure the user interface (UI) was nice and dynamic. And as above, you'd predefine the possible choices using Javascript rather than getting them from the server on the fly.

• A dynamic web-based calculator. Could have buttons for numbers and functions, and also handle typed input (keypress events). The basic UI is pretty simple to do in HTML/CSS. There's plenty of scope for interesting extensions, such as memory features (saving and recalling values) and funky functions (like y to the x power). You could have different UIs for things like financial functions: computing the cost of a loan with interest, or the future value of an asset. This is one project that might actually be useful!

• Games can be fun to develop. Some have complicated graphics, but some can be done with basic HTML and CSS. Here are a few possibilities:

o Tic-tac-toe: Simple user interface (UI). We learn how to program a computer to play tic-tac-toe for real in CSC242 (Artificial Intelligence), but you could do something easier, like picking any open space. Document your strategy.

o Battleship: Fairly simple HTML UI. Requires Math.random() to position the ships. In fact, many games require some randomness.

o Angry Bird: Launch a projectile at a target. This type of game requires graphics (lookup the canvas element) and animation (done with timers in Javascript). You might have a simpler interface than the real game, for example using form fields for launch parameters. Similar animated games include Pong and BreakOut.

• You could make a dynamic hyperbook: a story that could go in different directions depending on user actions. You'd want to make sure the page itself was dynamic, with things appearing or disappearing, as well as presenting the content of the story dynamically as the user navigates through it.

• You could build some kind of collaborative workspace, where you and your friends could post and share ideas, maybe arranged by topic or something. As with many web application concepts, in real life this would be backed by a database. And in fact, to do this one you would probably have to learn and use some of the techniques for asynchronous (background) communication, also known as AJAX. These are the same techniques used to update feeds and walls, by the way, so those are also possibilities for your project.

What you need to submit

You need to submit a ZIP archive containing all the files needed for your application.

• The main page should be named index.html.

• Any other resources (stylesheets, scripts, images, etc.) must be included in the archive, possibly in sub-directories (recommended).

• Any of these resources should be linked using relative URLs. The application must load and work properly when we download it.

Format of Report

For the purpose of this project you are assumed to be a professional. As such, you should attempt at your best to reflect this quality in the preparation of the report. As a minimum, the report should contain the following:

1. Introduction/overview - State the purpose and objectives of the report.

2. Body of discussion - This is the main section where you should document the various stages and outcome of your design and Implementation activities.

3. Conclusion - This is basically a summation, consolidating the main points of the report.

4. A list of references

5. Appendix

PLEASE NOTE:

• Word limit for this assignment is between 2500 and 3000 words, excluding the Appendix.

• Figures or diagrams can be added if necessary

• References (a minimum of 10) must be provided in the Body of Discussion section.