techtalk-pse - Man Page

To display or run a talk, change into the directory containing all those files and run the techtalk-pse command:

 cd /path/to/talk/; techtalk-pse

You can also run techtalk-pse without changing directory, instead specifying the path to the talk:

 techtalk-pse /path/to/talk/

--help

Display brief help and exit.

--last

Start at the last slide.

You cannot use this with the -n / --start option.

-n SLIDE | --start SLIDE

Start at the named slide.  SLIDE is the shortest unique prefix of the slide name, so to start at a slide named 00010-introduction.html, you could use -n 00010 or -n 00010-intro, or give the full filename -n 00010-introduction.html.

The default is to start at the first slide in the talk.

--verbose

Display verbose messages, useful for debugging or tracing what the program is doing.

--version

Display version number and exit.

[Before you start writing your real talk, I urge you to read "What Makes a Good Talk" below].

To start your talk, all you have to do is to make a new directory somewhere:

 mkdir talk
 cd talk

A tech talk consists of HTML files ("slides") and shell scripts.  The filenames must start with a number, followed optionally by a description, followed by the extension (.html, .sh or .term). So to start our talk with two slides:

 echo "This is the introduction" > 0010-introduction.html
 echo "This is the second slide" > 0020-second.html

To run it, run the command from within the talk directory:

 techtalk-pse

Any other file in the directory is ignored, so if you want to add Makefiles, version control files etc, just go ahead.

You may have your own techniques and tools for writing HTML, so this section is just to share my ideas.  I start every HTML file with a standard stylesheet and Javascript header:

 <link rel="stylesheet" href="style.css" type="text/css"/>
 <script src="code.js" type="text/javascript"></script>

That just ensures that I can put common styling instructions for all my slides in a single file (style.css), and I have one place where I can add all Javascript, if I need to use any (code.js).

BACKGROUNDS, FONTS AND LOGOS

To add a common background and font size to all slides, put this in style.css:

 body {
     font-size: 24pt;
     background: url(background-image.jpg) no-repeat;
 }

To add a logo in one corner:

 body {
     background: url(logo.jpg) top right no-repeat;
 }

SCALING AND CENTERING

Scaling slide text and images so that they appear at the same proportionate size for any screen resolution can be done using Javascript.  (See <https://developer.mozilla.org/En/DOM/window.innerHeight>).

If you want to center text horizontally, use CSS, eg:

 p.center {
     text-align: center;
 }

To center text vertically, CSS3 is supposed to offer a solution some time, but while you're waiting for that try <http://www.w3.org/Style/Examples/007/center#vertical>.

PREVIEWING HTML

I find it helpful to have Firefox open to display the HTML files and styles as I edit them.  Just start firefox in the talk directory:

 firefox file://$(pwd) &

When you edit an HTML file, click the Firefox reload button to immediately see your changes.

Tech Talk PSE uses WebKit embedding to display HTML.  HTML is standardized enough nowadays that what you see in Firefox and other browsers should be the same as what Tech Talk PSE displays. WebKit-based browsers (Chrome, Safari) should be identical.

Use your favorite tool to draw the figure, convert it to an image (in any format that the Mozilla engine can display) and include it using an <img> tag, eg:

 <img src="fig1.gif">

Suitable tools include: Inkscape, XFig, GnuPlot, GraphViz, and many TeX tools such as PicTex and in particular TikZ.

Using HTML 5, embedding videos in the browser is easy.  See: <https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox>

For animations, you could try Haxe <http://haxe.org/> which has a Javascript back-end.  There are many other possibilities.

If you are sure that the venue will have an internet connection, why not embed a YouTube video.

Obviously you could just have an HTML file that contains a redirect to the public web page:

 <meta http-equiv="Refresh" content="0; url=http://www.example.com/">

However if you want your talk to work offline, then it's better to download the web page in advance, eg. using Firefox's "Save Page As -> Web Page, complete" feature, into the talk directory, then either rename or make a symbolic link to the slide name:

 ln -s "haXe - Welcome to haXe.html" 0010-haxe-homepage.html

Make sure each *.sh or *.term file you write is executable, otherwise Tech Talk PSE won't be able to run it.  (The program gives a warning if you forget this).

The difference between *.sh (shell script) and *.term (a terminal script) is that a shell script runs any commands, usually graphical commands, whereas a terminal script runs in a full screen terminal.

A good idea is to start each script by sourcing some common functions. All my scripts start with:

 #!/bin/bash -
 source functions

where functions is another file (ignored by Tech Talk PSE) which contains common functions for setting shell history and starting a terminal.

In functions, I have:

 # -*- shell-script -*-
 
 # Place any local environment variables required in 'local'.
 if [ -f local ]; then source local; fi
 
 export PS1="$ "
 
 export HISTFILE=$talkdir/history
 
 rm -f $HISTFILE
 touch $HISTFILE
 
 add_history ()
 {
     echo "$@" >> $HISTFILE
 }
 
 terminal ()
 {
     # Make $HISTFILE unwritable so the shell won't update it
     # when it exits.
     chmod -w $HISTFILE
 
     # Execute a shell.
     bash --norc "$@"
 }

By initializing the shell history, during your talk you can rapidly recall commands to start parts of the demonstration just by hitting the Up arrow.  A complete terminal script from one of my talks would look like this:

 #!/bin/bash -
 source functions
 add_history guestfish -i debian.img
 terminal

This is just a starting point for your own scripts.

Tech Talk PSE displays the slides in the directory in lexicographic order (the same order as LANG=C ls -1).  Only files matching the following regexp are considered:

 ^(\d+)(?:-.*)\.(html|sh|term)$

For future compatibility, you should ensure that every slide has a unique numeric part (ie. don't have 0010-aaa.html and 0010-bbb.html).  This is because in future we want to have the ability to display multiple files side by side.

Also for future compatibility, don't use file names that have an uppercase letter immediately after the numeric part.  This is because in future we want to allow placement hints using filenames like 0010L-on-the-left.html and 0010R-on-the-right.html.

The base URL is set to the be the directory containing the talk files. Thus you should use relative paths, eg:

 <img src="fig1.gif">

You can also place assets into subdirectories, because subdirectories are ignored by Tech Talk PSE, eg:

 <img src="images/fig1.gif">

When running shell scripts, the current directory is also set to be the directory containing the talk files, so the same rules about using relative paths apply there too.

The environment variable $talkdir is exported to scripts and it contains the absolute path of the directory containing the talk files. When a script is run, the current directory is the same as $talkdir, but if your script changes directory (eg. into a subdirectory containing supporting files) then it can be useful to use $talkdir to refer back to the original directory.