CMSI 499

Interactive Web Technologies

Fall 2009

Note
This page is maintained as an archival record of the course shown above, and as such, some links on this page may no longer be valid nor accessible. They are kept here as a record of the resources that were available at the time of the course offering.

James Coleman, Edgardo Ineguez, and Mark Miscavage have chosen to study interactive web technologies this semester. Coverage will include current (and some future) standards for dynamic HTML (XHTML/CSS/JavaScript) and Flash.

All materials in PDF.

Milestones

In the spirit of independent study, no formal assignments are given. However, this list provides recommended milestones to assure a decent degree of progress.

  • 20091029: Now that you’ve had decent practice with a dynamic web page, it’s time to extend your experience further by working on an actual page for your senior project. Choose a page, describe its functionality, then implement it.
  • 20091022: To align the content here a little more with what you’re doing in your senior project, let’s redirect your activities somewhat toward Ajax. You have all gotten a rundown of the approach; this is how I’ve decided that you should apply it:
    • Make the following improvements to Ajax sample at http://javascript.cs.lmu.edu/ajax-sample. Copy the needed files to your own workspace, and do the following:
      • Add a timeout so that you don’t trigger a search after every single key (i.e., wait until the user seems to have paused before starting a search).
      • Add fade-in/fade-out effects to the dynamic parts of the page (i.e., the Searching element, the element where the search results appear, the element where the manual page appears).
      • Make the Searching element have a little animated image to give better feedback that the computer is doing something.
    • An advanced variation on this theme would be to make the keyword search results appear as a drop-down menu, which the user can then navigate using arrow keys (with the mouse or Enter key making a selection). Doable, but definitely more involved.
    • A few ground rules and guidelines:
      • Code the fade effects from scratch. There are “ready-to-go” libraries and scripts out there, but you won’t learn too much by just plopping them in. Plus, those scripts are usually quite generalized, meaning they probably do way more than what you actually need here, meaning that they’re probably more complicated than they have to be (for this particular web page). If anything, you can learn things from the ready-made scripts after you’ve tried your hand at it yourself.
      • Don’t worry too much about browser compatibility at this point. You probably haven’t worried about it anyway, but with Ajax and the fancier CSS effects, you’ll encounter a bit more variation across browsers than the standard stuff. Fortunately, the issue mainly has to do with browser age. If you stick with the latest browser versions, you should be alright.
  • 20091008: Now that you have a layout that’s ready for multiple pages of content, well...it’s time for multiple pages. So, start adding more pages, with the same navigational parts. The main specific page you will need is one marked off for demonstrating your Flash work (coming soon). Outside of that, an introduction page is probably called for, plus any other page that you would like to set up.

    Finally, as you work your way through this content, check to see if you’re feeling that there’s a better way to do all this. You would be right — I will want to hear what specifically gave you this queasy feeling, and what you perceive would be a solution to this issue.

  • 20091001: You have all generally converged on visually similar, but internally different, web page layouts. Now you need to work together to ensure that your XHTML uses corresponding classes and identifiers. The goal: give each of your web pages the ability to change styles, a la CSS Zen Garden, so that each of your pages can interchangeably use each of your CSS style sheets. Your pages should each have the code needed to change CSS on the fly.
  • 20090924: Now that you’re all set up in terms of a development workflow, refocus on your page. Figure out how to do one of the standardized layouts (e.g., header/sidebar/body, or something similar) without using tables. Continue exploring CSS. And, try injecting some JavaScript in there.

    As always, it has to keep validating. You may as well stick validator links permanently into your pages.

  • 20090917: Your web site files should be under version control, you are accustomed to the modify-deploy-commit cycle of updating your web site, and the XHTML and CSS in your pages consistently validate.
  • 20090910: Have a version 1.0 of your study journal web site, constructed initially on your own, ready at the syllabus-designated URL.

These links take you to Web sites beyond this server.