Slide Format for Public Talks

Background

Years ago, lecturers often wrote an outline of a talk on a blackboard during the introduction and then checked off each topic when it was covered. This provided a framework for the overall presentation and tied various pieces together.

Anecdotal observation suggests that talks using computer software for projection Sometimes, slides return to the same outline periodically, but such repetition seems inconsistent.

Use of Standard html

As an alternative, consider talk on "Getting Published at CS Education Conferences: Factors for Acceptance, Approaches, Reflections" that I gave at a CCSC Midwest Conference in 2003.

These slides have several useful characteristics:

Some Implementation Details

Implementation of this approach is relatively straightforward using html frames. The main page has the form


     <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
     <html>
     <head>
     <title>Main Page Template for Talk Slides</title>
     </head>
     
     <frameset cols="25%, 75%", *>
             <frame name="index" src="template-index.php">
             <frame name="talk" src="template-title.html">
     </frameset>
     <noframes>
     </noframes>
     </html>

This page has two elements, the "index" frame on the left and the "talk" frame on the right.

The "talk" frame contains the talk's content together with some navigation elements.

The "index" page uses a table, with each outline element in a different cell. Highlighting is achieved by changing the background color of the relevant table cell.

Although this approach works fairly simply within standard html, the question arises as to how to specify which table cell should be highlighted. This can be accomplished either with multiple index pages or with a php script. These approaches are illustrated with separate templates:

The reader may view each of these html pages by loading them into a browser and viewing the source. Since the last php file normally runs on the server to produce tailored html, the above link for that page shows the html/php directly.

Separate Index Pages

With separate index pages, each has a file name that is referenced within the body of a content "talk" page. Thus, a template title page might contain the following body tag:


     <body bgcolor="#EAEAEA" onload="top.index.location='template-index-title.html';">

A corresponding index page uses a gray background for the entire page, and then specifies a reasonably white background for a table cell with the appropriate title. Thus, the index page for the title might contain the following:


     <body bgcolor="#C0C0C0">
     
     <table>
     <tr>
     <td bgcolor="EAEAEA">
     <a href="template-title.html" target="talk">Title and Outline</a>
     <br><br>
     </tr>
     
     <tr>
     <td>
     <a href="template-middle.html" target="talk">
     Middle Section</a>
     <br><br>
     </tr>
     
     <tr>
     <td>
     <a href="template-conclusions.html" target="talk">
     Concluding Section</a>
     </tr>
          
     </table>
     
     </body>

In this format, the body has color "#C0C0C0", and the table element for the relevant table cell (here with the title entry) has color "EAEAEA".

This approach utilizes only standard html, and thus requires little software support. However, the approach requires a separate html file for each index heading, and this is somewhat cumbersome to organize and maintain.

A Single Index Page, using php

When a single index page is written with php, the page uses a query string to indicate what table cell to highlight. In this case, a blank query string (for the initial call to the talk) or a query string, such as "title", indicate the first cell is to be highlighted. Thus, a template page might contain the following body tag:


     <body bgcolor="#EAEAEA" onload="top.index.location='template-index.php?conclusions';">

Other labels are used for subsequent cells.

The index page uses a gray background for the entire page, and then analyzes a query string passed into the page to highlight the appropriate title. A typical index page might contain the following body:


     <body bgcolor="#C0C0C0">

     <?php
     $highlightField = $_SERVER['QUERY_STRING'];
     ?>

     <table>
     <tr>
     <td 
     <?php
       if (($highlightField == "title") || ($highlightField == NULL))
          print 'bgcolor="EAEAEA"';
     ?>
     >
     <a href="template-title.html" target="talk">Title and 
     Outline</a>
     <br><br>
     </tr>
     
     <tr>
     <td 
     <?php
       if ($highlightField == "middle")
          print 'bgcolor="EAEAEA"';
     ?>
     >
     <a href="template-middle.html" target="talk">
     Middle Section</a>
     <br><br>
     </tr>
     
     <tr>
     <td 
     <?php
       if ($highlightField == "conclusions")
          print 'bgcolor="EAEAEA"';
     ?>
     >
     <a href="template-conclusions.html" target="talk">
     Concluding Section</a>
     e<br><br>
     </tr>
     
     
     </table>
     
     </body>

Altogether, the php script retrieves the query string from the server. Then, for each table cell with an outline element, the php script checks if the query string matches the keyword for that element. If so, the background color for that cell element is set to a highlighted color.

Development Tip

When developing a talk, I find it helpful to write an index page first. This establishes the organization of the talk and also identifies the various URL strings for the various parts of the talk.


This document is available on the World Wide Web as

http://www.cs.grinnell.edu/~walker/talks/talk-templates/

created 15 January 2006
last revised 15 January 2006
Valid HTML 4.01!
For more information, please contact Henry M. Walker at walker@cs.grinnell.edu.