September 30, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Fine Tuning the Development Process: Adding a Web Interface to the Electronic Notebook

  • November 13, 2007
  • By Matt Weisfeld
  • Send Email »
  • More Articles »

The file, notebook.html (Listing 3), creates the content frame. This frame will simply display any information that is desired. In this case, you simply display the title page for the specific course.

<HTLM>
<HEAD>
<TITLE>City College</title>
</HEAD>
<BODY background="images/notebook.gif">
<BODY>
<P align="center"><B><font size="4">City College</font></B></P>
<P align="center"><B><font size="4">Main Campus</font></B></P>
<P align="center"><I><B><font size="4">Fall 2007
   </font></B></I></P>
<P>
<P align="center"><font size="7" color="#000080">
   Electronic Notebook</font></P>
<P align="center"><font size="5" color="#FF0000">
   History 101</font></P>
<P>
<P>
</BODY>
</HTML>

Listing 3: Notebook.html

Now you can drill down to the specific course content by using the navigation bar. As an example, select the Notes link and navigate to that page, as seen in Figure 4. At this point, you can see a list of all of the notes files that were created to this point in the course.



Click here for a larger image.

Figure 4: Engineering Notebook Directory Structure.

The final step is to select the desired notes file. In this case, you decide that you want to look at the notes from September 4. This is captured in Figure 5's screen shot. An added advantage of this approach is that you can navigate back and forth between the pages.



Click here for a larger image.

Figure 5: Engineering Notebook Directory Structure.

At this point, you have a web-based notebook implemented for a single class. As mentioned earlier, you now have an infrastructure in place so that you can propagate the directory structure in a very flexible manner.

For example, you can propagate the system horizontally by adding other classes, or you can propagate the system vertically by adding other levels, such as a level containing all the classes of various semesters.

Extensibility

Now, you can apply the propagation technique across multiple academic (and non-academic) disciplines. For example, as a student, you can combine all of your classes in a single place, as seen in Figure 6. As a professional, you could have separate directories for each customer. As a sports league commissioner, you could have separate directories for each team (or league, for that matter).



Click here for a larger image.

Figure 6: Engineering Notebook Directory—multiple classes.





Page 3 of 5



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel