[an error occurred while processing this directive] File: index.shtml Creator: George Ferguson Created: Fri Nov 16 10:05:57 2012 Time-stamp: [an error occurred while processing this directive] File: templates/doc-start.shtml Creator: George Ferguson Created: Tue Dec 6 12:31:29 2011 Time-stamp: [an error occurred while processing this directive] File: site-settings.shtml Creator: George Ferguson Created: Tue Dec 6 13:49:49 2011 Time-stamp: Site (or subsite)-wide settings. [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] File: head.shtml Creator: George Ferguson Created: Tue Dec 6 12:34:15 2011 Time-stamp: SSI variables for this template: head_title if given, else ``sitename | title'' [an error occurred while processing this directive] File: head-title.shtml Creator: George Ferguson Created: Tue Dec 6 14:29:52 2011 Time-stamp: SSI variables for this template: head_title: complete content of title element if given site_title trailing part of title (if given) section_title middle part of title (if given) page_title leading part of title (if given) title title shown on page, also used as leading part of title (if given) [an error occurred while processing this directive] (none) [an error occurred while processing this directive] File: head-meta.shtml Creator: George Ferguson Created: Tue Dec 6 14:29:18 2011 Time-stamp: SSI variables for this template: meta_description meta_keywords meta_generator [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] File: head-stylesheets.shtml Creator: George Ferguson Created: Tue Dec 6 14:22:58 2011 Time-stamp: SSI variables for this template: site_stylesheet, page_stylesheet stylesheet0, stylesheet1, ...: URL for stylesheets [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] File: head-scripts.shtml Creator: George Ferguson Created: Tue Dec 6 14:23:19 2011 Time-stamp: SSI variables for this template: site_script, page_script script0, script1, ...: URLs of javascript scripts [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] File: body-start.shtml Creator: George Ferguson Created: Tue Dec 6 13:20:46 2011 Time-stamp: SSI variables for this template: body_class page_class page_id [an error occurred while processing this directive] [an error occurred while processing this directive] File: body-header.shtml Creator: George Ferguson Created: Tue Dec 6 13:46:12 2011 Time-stamp: Content above banner, if any. [an error occurred while processing this directive] File: body-banner.shtml Creator: George Ferguson Created: Tue Dec 6 13:27:12 2011 Time-stamp: Duplicate URCS Drupal banner.

Computer Science Department : Hajim School of Engineering & Applied Sciences Skip to main content

Page does not exist.

Missing Page

Sorry. The page that you requested does not exist on the Department of Computer Science web site.

Return to the CS Homepage

[an error occurred while processing this directive] File: body-title.shtml Creator: George Ferguson Created: Tue Dec 6 14:34:49 2011 Time-stamp: SSI variables for this template: section_name First line of title on page (if any) title Title shown on page

[an error occurred while processing this directive] DMS102/CSC170D: Introduction to Web Development
Spring 2013 [an error occurred while processing this directive]
Assignment 10: Dynamic Web Application

What Do I Need To Do?

For this assignment, you will need to design and develop a dynamic web application using any or all of the techniques we have seen in class: HTML, CSS, Javascript, the DOM, and JavaScript event handlers. You will also need to document your work in a report included in the webapp itself.

You get to choose exactly what your application will be. I provide a list of possible applications below, but you are free to choose something that would interest you, provided it uses the techniques we have learned.

Choose your topic wisely and scope its requirements carefully. You only have a short time to finish the project. If your vision is ambitious, pick a subset of things to implement first, and discuss the extensions in your project report (see below).

Because of its breadth, this assignment will be worth two assignments in the weighting for your course grade.

What Do I 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.

Project Report Requirements

Your application must include an About page, clearly linked from the main page. This page is your project report and must 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. This is a narrative description (meaning not bullet points) of the requirements for the application, usually created by or in consultation with the customer for whom you're developing the webapp.
Design: How you turned the requirements into a set of pages and scripts. You can include sketches or diagrams if you used them for your design (especially if the final result didn't quite turn out the way you wanted). What were the key functionalities and how would they work together? What sorts of things would typical users do with your webapp? This would be your response to the customer's requirements, probably before you got the rest of the contract.
Implementation: Details of how the application's functionality was programmed. You don't have to go over every detail, since your code will have comments. But emphasize the things we did in class, and how you used what you learned in class to do a good job (e.g., using functions to encapsulate shared functionality). You should have a list or table describing every file in the project and its purpose.
Analysis: What worked and what didn't? What would you do differently and why? It's ok if not all of your vision got implemented in the time available. You can explain your future work in this section. But make sure you design your project so that something works nicely in the time available. All ideas and no working code equals poor grade.

This project report must be nicely presented using HTML and/or CSS. The equivalent of several printed pages is probably the minimum you could do for this.

Don't leave the writing to the last minute. In fact, if you write the sections as you do the work, you'll only have the final analysis to write at the end.

A poor writeup will result in a poor grade for even the greatest web application. Conversely, a good writeup can help salvage a poor application.

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.

Do not simply copy an application from the textbook or from the web. 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) 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:
- 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.
- Battleship: Fairly simple HTML UI. Requires Math.random() to position the ships. In fact, many games require some randomness.
- 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.

If you want feedback on your idea, you are welcome to send me a short description. Do not wait until the last minute to do this, however.

[an error occurred while processing this directive] File: doc-finish.shtml Creator: George Ferguson Created: Tue Dec 6 13:46:48 2011 Time-stamp: [an error occurred while processing this directive] File: body-footer.shtml Creator: George Ferguson Created: Tue Dec 6 14:43:56 2011 Time-stamp: Content at bottom of page, if any.

Last update: Friday, 05-Apr-2013 14:47:56 EDT