Web-centric Computing

Assignment 3: Ajax

Dates

Officially Assigned: Mon 09 Nov.

Due: Mon. 23 Nov.

Description

Write an essay about the AJAX WWW technology. The essay should be 1000 words long (give or take 250 words). The essay must be in encoded as one or more XHTML files. The essay must include:

demonstration of AJAX technologies: some of your own code and some using a library;
examination of advantages of the technology for at least two groups (for example, website owners, and WWW surfers.

Choose one browser (Firefox ≥ 3.5, Opera version ≥ 10; Internet Explorer version ≥ 8, for example) to display your essay. You must specify which browser it is designed for in the intial webpage. Your webpage will be tested with that browser if it is available in the laboratories in the Goldberg Computer Science building.

Recommended Outline

Introduction
- What the technology enables (why it is interesting)
- Brief overview of the rest of the essay
What is it
How it functions
Relationship to the Client-Server model
Concluding summary
- Advantages to two, or more, groups

Examples and Advice

A simple example of an essay in HTML format is at <URL:http://www.csd.uwo.ca/~jamie/CHI98/CHI.html>.

More complex examples are

One techique that can be especially effective is to use CSS to make citation links less distracting. Specifically, you can arrange it so that some links only appear as links (that is blue and underlined) when the cursor is over the paragraph in which those links appear. From Blustein and Noor's article:

first, links in the class cite (<a class="cite" href="…" >…<) are made to look like all other text
second, when the element containing the link (e.g. a paragraph (<p>) is in the pseudo-class :hover (that is, when the mouse cursor is inside that element) then change the formatting of the link
p:hover a.cite {text-decoration:underline; color:blue}

Details from the base.css file follow:

       /* Citations are either anchors or spans 
            the spans are used when the link is only in one part,
            perhaps the year, but the rest should be highlighted
            to show context 
    
            cites in headings are always on
    
            cites within lists require special processing because
            of deficient parsing in Netscape 7.1
        */
    
    a:link, a:visited {font-weight: bold}
    a.citation        {font-weight: normal}

    h1 a.citation, h1 span.citation,  h2 a.citation, h2 span.citation,
    h3 a.citation, h3 span.citation,  h4 a.citation, h4 span.citation,
    h5 a.citation, h5 span.citation,  h6 a.citation, h6 span.citation,
    li.hascite:hover a.citation, li.hascite:hover span.citation,
    pre:hover a.citation,  pre:hover span.citation,
    dt:hover a.citation,   dt:hover span.citation,
    dd:hover a.citation,   dd:hover span.citation,
    p:hover a.citation,    p:hover span.citation
                      {border-bottom:thin dotted blue}
    
    span:hover a.citation, pre:hover a.citation,
    h1 a.citation, h2 a.citation, h3 a.citation, 
    h4 a.citation, h5 a.citation, h6 a.citation, 
    dt:hover a.citation, dd:hover a.citation,
    li.hascite:hover a.citation,
    p:hover          a.citation
                      {color:blue}

Toolkits

See the list of Javascript websites in the Reousces section.

Version:: 15 October 2009
CSCI 3172 Prof.:: J. Blustein <jamie@cs.dal.ca>