===================
StarScream Tutorial
===================

.. info::
    
    author = Feihong Hsu
    venue = http://starscream-slideshow.googlecode.com
    location = Interweb
    date = March 30, 2007

What Is StarScream?
===================
StarScream lets you write your entire presentation using `reStructuredText`_.

Presentations made with StarScream are web pages that can be displayed in any modern web browser.

.. _reStructuredText: http://docutils.sourceforge.net/rst.html

Notes
-----
Because you write your entire presentation is in plain text, you can focus on your content.

One big advantage of StarScream is that if your laptop dies before your talk, you can borrow somebody else's laptop and the presentation will still look the same. Sweet!

Features
========
- Generates slides AND handouts
- Dynamic text zoom
- Syntax highlighting for code blocks
- Customizable through CSS
- Not fugly

Notes
-----
Slides and handouts are generated as two separate files.

The slides are generated into an HTML file called ``slides.html``. The actual contents of every slide are put into a separate file called ``slides.js``. 

Handouts are generated as a single HTML file called ``handout.html``.

A Tour of StarScream
====================
- Key controls
- ``info``, ``code``, ``cssfile``
- Lists, tables, images
- Raw HTML
- Command line usage

Key Controls
============
The slide show is completely controlled through key presses:

.. raw:: html

    <table border="1" cellpadding="15">
    <colgroup>
        <col width="20%"></col>
        <col width="80%"></col>
    </colgroup>
    <tbody valign="top">
    <tr>
    <td>
    <tt class="docutils literal">
    <span class="pre">
    j
    </span>
    </tt>
    </td>
    <td>
    next slide
    </td>
    </tr>
    <tr>
    <td>
    <tt class="docutils literal">
    <span class="pre">
    k
    </span>
    </tt>
    </td>
    <td>
    previous slide
    </td>
    </tr>
    <tr>
    <td>
    <tt class="docutils literal">
    <span class="pre">
    -
    </span>
    </tt>
    </td>
    <td>
    decrease text size
    </td>
    </tr>
    <tr>
    <td>
    <tt class="docutils literal">
    <span class="pre">
    =
    </span>
    </tt>
    </td>
    <td>
    increase text size
    </td>
    </tr>
    </tbody>
    </table>

Notes
-----
The ``+`` key can also be used to increase text size (but most laptops don't have a standalone ``+`` key).

Starscream's control system is designed to be useful even when you have to speak while holding a microphone and have only one free hand.

Why doesn't StarScream use the arrow keys or page(up|down) keys? Because in StarScream, those keys are used for scrolling. Slides in StarScream are not limited to the size of your display.

The info Directive
==================
.. code:: text

    .. info::
        
        author = Feihong Hsu
        venue = Chicago Python Users Group
        location = Chicago, USA
        date = April 10, 2007

Notes
-----
The ``info`` directive is a way of specifying the metadata for a presentation. The information you provide to this directive is used to generate the title slide.

The code Directive
==================
.. code:: text

    .. code:: xml

        <StackPanel Margin="5">
            <Label Margin="5">This is a label</Label>
            
            <ListBox Name="list" Margin="5"/>

            <ComboBox Name="combo" Margin="5" />

            <CheckBox Name="check" Margin="5">Check box</CheckBox>

            <StackPanel Margin="5" Orientation="Horizontal">
                <RadioButton Margin="5">X-Ray</RadioButton>
                <RadioButton Margin="5">Yoyo</RadioButton>
                <RadioButton Margin="5" IsChecked="true">Zebra</RadioButton>
            </StackPanel>
        </StackPanel>

Notes
-----
In addition to common programming languages, the ``code`` directive also supports various markup languages. See here_ for the full list of supported languages.

.. _here: http://pygments.org/languages/
        
The code Directive
==================
.. code:: xml

    <StackPanel Margin="5">
        <Label Margin="5">This is a label</Label>
        
        <ListBox Name="list" Margin="5"/>

        <ComboBox Name="combo" Margin="5" />

        <CheckBox Name="check" Margin="5">Check box</CheckBox>

        <StackPanel Margin="5" Orientation="Horizontal">
            <RadioButton Margin="5">X-Ray</RadioButton>
            <RadioButton Margin="5">Yoyo</RadioButton>
            <RadioButton Margin="5" IsChecked="true">Zebra</RadioButton>
        </StackPanel>
    </StackPanel>

Notes
-----
This is what we see when the markup from the previous slide is applied.
    
The code Directive
==================
.. code:: text

    .. code:: html
        :file: code/keypress.html

Notes
-----        
You can directly reference files. The ``code`` directive will insert the contents of the file into the presentation.
        
The cssfile Directive
=====================
.. code:: restructuredtext
    
    .. cssfile:: custom.css

Notes
-----
You specify links to your own CSS files using the ``cssfile`` directive. You will often use this directive in conjunction with reStructuredText_'s built-in ``class`` directive (you'll see an example of this later on).
    
Lists
=====
- This is my first point
- This is my second point
    
  #. This is point A
  #. This is point B
  #. This is point C

- This is my third point    

Notes
-----
The markup that generates the above is:

.. code:: restructuredtext

    - This is my first point
    - This is my second point
        
      #. This is point A
      #. This is point B
      #. This is point C
    
    - This is my third point

Tables
======
.. raw:: html
    
    <style>
        table.example-table { 
            border-collapse: collapse; 
            background-color: white; 
            border: 1px solid black; 
            }
        table.example-table th { 
            background-color: blue; 
            border: 4px solid black; 
            color: white;
            }
        table.example-table td { 
            padding: 0 5px 0 5px; 
            border: 1px solid black;
            }   
    </style>

.. class:: example-table
    
+------------------------+------------+----------+----------+
| Header row, column 1   | Header 2   | Header 3 | Header 4 |
| (header rows optional) |            |          |          |
+========================+============+==========+==========+
| body row 1, column 1   | column 2   | column 3 | column 4 |
+------------------------+------------+----------+----------+
| body row 2             | Cells may span columns.          |
+------------------------+------------+---------------------+
| body row 3             | Cells may  | - Table cells       |
+------------------------+ span rows. | - contain           |
| body row 4             |            | - body elements.    |
+------------------------+------------+---------------------+

Notes
-----
The markup that generated the above is:

.. code:: text

    .. class:: example-table
    
    +------------------------+------------+----------+----------+
    | Header row, column 1   | Header 2   | Header 3 | Header 4 |
    | (header rows optional) |            |          |          |
    +========================+============+==========+==========+
    | body row 1, column 1   | column 2   | column 3 | column 4 |
    +------------------------+------------+----------+----------+
    | body row 2             | Cells may span columns.          |
    +------------------------+------------+---------------------+
    | body row 3             | Cells may  | - Table cells       |
    +------------------------+ span rows. | - contain           |
    | body row 4             |            | - body elements.    |
    +------------------------+------------+---------------------+

We assume that the styling on the table is applied through a custom CSS file that was linked using the ``cssfile`` directive. The CSS code would look like this:

.. code:: css

    table.example-table { 
        border-collapse: collapse; 
        background-color: white; 
        border: 1px solid black; 
        }
    table.example-table th { 
        background-color: blue; 
        border: 4px solid black; 
        color: white;
        }
    table.example-table td { 
        padding: 0 5px 0 5px; 
        border: 1px solid black;
        }   
    
Images
======
.. image:: http://www.google.cn/intl/zh-CN/images/logo_cn.gif

.. image:: http://images.amazon.com/images/P/B000EUKRVI.01.LZZZZZZZ.jpg

Notes
-----
The markup that generated the above is:

.. code:: restructuredtext

    .. image:: http://www.google.cn/intl/zh-CN/images/logo_cn.gif

    .. image:: http://images.amazon.com/images/P/B000EUKRVI.01.LZZZZZZZ.jpg

Raw HTML
========
.. raw:: html

    <p style="border: 5px dashed #222; padding: 20px; 
              background-color: #fff; font-weight: bold">
        <span style="color:#0039b6; font-size:2em">你</span>
        <span style="color:#c41200; font-size:2.5em">好</span>
        <span style="color:#f3c518; font-size:3em">芝</span>
        <span style="color:#0039b6; font-size:3.5em">加</span>
        <span style="color:#30a72f; font-size:4em">哥</span>
    </p>

Notes
-----
The markup that generated the above is:

.. code:: text
    
    .. raw:: html

        <p style="border: 5px dashed #222; padding: 20px; 
                  background-color: #fff; font-weight: bold">
            <span style="color:#0039b6; font-size:2em">你</span>
            <span style="color:#c41200; font-size:2.5em">好</span>
            <span style="color:#f3c518; font-size:3em">芝</span>
            <span style="color:#0039b6; font-size:3.5em">加</span>
            <span style="color:#30a72f; font-size:4em">哥</span>
        </p>
    
    
Command Line Usage
==================
.. code:: text

    Usage: starscream.py action
    actions:
        all
          Generate files for both slides and handout

        slides
          Generate the files slides.html and slides.js

        handout
          Generate the handout.html file

        project
          Create the directory structure and initial files for a new
          presentation project
        
Look Ma, It's Unicode!
======================
- Python 是最好的編程語言！
- Pythonas yra žaviausia šneka
- Питон е най-добрия програмен език!
- Aš mėgstu šokoladą
- 파이썬은 최고의 프로그래밍 언어이다!
- Питон - лучший язык 
- программирования!        

Limitations
===========
- Display issues in Internet Explorer (surprise, surprise)

  - Bullet points are rendered very small
  - Gradients do not work
  
- No markup allowed in slide headers    
