Building the User Interface for a Web Site Indexing Application with Prototype

The first step that I'm going to take in developing this web site indexing application will be based primarily upon creating the corresponding user interface. Doing so, you'll have a clearer idea of how the different sections that compose the front-end of the application will work later on.

I want to complement the above explanation by including two screen shots which show clearly the layout for the distinct areas that integrate this web site index system.

Having said that, here are the two images that I mentioned above. Please take a look at them:

As you can see, the first image illustrates quite clearly the way that this application is going to work. It shows how the information on the different web sites previously submitted by users will be displayed within a specific container. As I said previously, the data that will be part of the pertinent web site index will consist of the respective URL, the web site's title, and lastly a brief description of its nature.

Finally, the second image shows a hypothetical situation, where information on a specific web site is about to be submitted by using a conventional web form. Logically, after the submission has been completed, the new data will be immediately shown as part of the index system, without having to reload the web page. Now do you see how AJAX plays a relevant role in getting this application to work?

So far, so good. Now that you understand how this Prototype-based web site index system is going to work, I think it's time to start creating the set of CSS styles and the corresponding structural markup that belong to this application, in this way defining the look and feel of its respective user interface.

Do you agree with me on this point? All right, to learn how this process will be achieved, please keep reading.