Richard Rasala @ Northeastern University


CCIS Quick Links goes to a page with links to:

Banner Course List Tool

This page uses the concept of expandable/collapsible sections. With this technique, an overview of the content of a site may be given using headers and the details may be revealed by opening particular sections.

Here are two other examples:

CS 1100 Excel Strings Tutorial

CS 1100 Access Queries Tutorial

To enable expandable/collapsible sections, you need one CSS file expandable.css, one Javascript file expandable.js, and two images: an expand-icon Expand or + and a collapse icon Collapse or -.

All “expandable” code files and images are in one subdirectory expandable of the top level directory.

This design makes it efficient to download, install, and use the “expandable” code.

To Download the “expandable” code, click on the Download link.

To see how to use expandable/collapsible sections on a typical web page, use your browser’s View Source menu item to see the html source of this web page.

The Story Utility enables a web-based slide show in which each slide is a fully functional web page. This utility is similar to PowerPoint but is much more powerful because each slide may have its own dynamic behavior. In many ways, this utility is a web-descendent of the Apple Hypercard program.

Each web-based slide show is driven by a story file that provides a list of the links to each web page that forms a slide in the slide show. Each link should be provided with a title that allows the slide to be identified.

Here is a link to the Story Utility that gives full directions and the ability to download the code as a zip file:

Story Utility

The link below provides examples of stories related to web development. Although you may not be interested in the details of the content, the examples show the potential of the Story Utility to organize lots of information.

Web Development Stories

The section below shows the Synchronized Google Maps web application in two flavors: Northeastern University maps and satellite views of the major league baseball parks. The section also documents the web application using the Story Utility.

Synchronized Google Maps Plain

Synchronized Google Maps for Northeastern University

Synchronized Google Maps for Major League Baseball Parks

Synchronized Google Maps for Northeastern University (standard and mobile)

The Synchronized Google Maps User Interface

The Synchronized Google Maps Story

Synchronized Google Maps to Explore Geography
Hint: Use Find Location to find a geographic location of interest.

Web Development Course Home

Web Development Course ASP.NET Demo Site

Personal Home Page on the CCIS Site

Rasala Favorites

JPT Home

JPT 2.7

The JPT 2.7 Library File jpt.jar

The JPT 2.7 API

The JPT 2.7 Annotated Tutorial and Source

Due to changes in browser behavior since 2008, the links to the JPT source files in the tutorial above may or may not be displayed in the browser. In some cases, the files may be downloaded instead.

The JPT 2.7 Source Files in a Zip File

The JPT Color Name Table

JPT 2.7 Applets

JPT 2.6 Applets

Bit Display Home

Bit Display Applet