cvi CVI-Projects
Valid RSS? Valid RSS?
Valid CSS? Valid CSS?
Valid HTML (4.01 Transitional)? Valid HTML (4.01 Transitional)?
Obstruct-fair Entrance: Level-A Obstruct-fair Entrance: Level-A

Page: References

S5 1.1 OSF Reference (can be found on meyerweb.com)

S5 1.1 XOXO Reference (can be found on meyerweb.com)

S5 is compatible with the Opera Show Format 1.0
my.opera.com/community/dev/operashow/documentation/doc_fileformat.html


S5 1.3 additional References


S5 1.3 HTML skeleton

The following elements are all required

# snippet start ================================================ <html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
  <head> </head>
 
  <body>
  
    <div class="layout"> </div>
    
    <div class="presentation">
    
      <div class="slide"> </div>
      
    </div>
    
  </body>
 
</html>
# snippet end ================================================= </html>

References

S5 1.3 HEAD section

Document's metadata and configuration parameters

# snippet start ================================================ <head>
<head>
<title>[slide show title]</title>
<!-- meta data -->
<meta name="version" content="S5 1.3" />
<meta name="generator" content="[generating program]" />
<meta name="presdate" content="[presentation date]" />
<meta name="author" content="[author's name]" />
<meta name="company" content="[author's employer]" />
<meta http-equiv="Content-Type" content="[content-type]" />
<!-- configuration parameters -->
<meta name="defaultView" content="[value]" />
<meta name="controlVis" content="[value]" />
<!-- configuration transition parameters -->
<meta name="tranSitions" content="[value]" />
<meta name="fadeDuration" content="[value]" />
<meta name="incrDuration" content="[value]" />
<!-- configuration autoplay parameters -->
<meta name="autoMatic" content="[value]" />
<meta name="playLoop" content="[value]" />
<meta name="playDelay" content="[value]" />
<!-- configuration audio parameters -->
<meta name="audioSupport" content="[value]" />
<meta name="audioVolume" content="[value]" />
<meta name="audioError" content="[value]" />
<!-- configuration audio debug -->
<meta name="audioDebug" content="[value]" />
<!-- style sheet links -->
<link rel="stylesheet" href="ui/default_utf/slides.css" ...
... type="text/css" media="projection" id="slideProj" />
<link rel="stylesheet" href="ui/default_utf/outline.css" ...
... type="text/css" media="screen" id="outlineStyle" />
<link rel="stylesheet" href="ui/default_utf/print.css" ...
... type="text/css" media="print" id="slidePrint" />
<link rel="stylesheet" href="ui/default_utf/opera.css" ...
... type="text/css" media="projection" id="operaFix" />
<!-- S5 main JS -->
<script src="ui/default_utf/slides.js" type="text/javascript">
</script>
</head>
# snippet end ================================================= </head>

References

S5 1.3 optional settings

<meta name="tranSitions" content="[value]" />
Optional. Sets the transiton support to be either true or false. The default value is false. Transiton is a smooth fade in/out of slide content and incremental images/objects! Can be overwritten through the control panel.
<meta name="fadeDuration" content="[value]" />
Optional. Sets the slide transiton duration to a value between 200 and 2000 milliseconds. The default value is 500.
<meta name="incrDuration" content="[value]" />
Optional. Sets the incremental image/object transiton duration to a value between 50 and 500 milliseconds. The default value is 250.
<meta name="autoMatic" content="[value]" />
Optional. Sets the default auto play support to be either true or false. The default value is false. Can be overwritten through the control panel.
<meta name="playLoop" content="[value]" />
Optional. Sets the default auto play looping to be either true or false. The default value is false. Can be overwritten through the control panel.
<meta name="playDelay" content="[value]" />
Optional. Sets the default auto play delay for a slide to a value between 5 and 60 seconds. The default value is 5 seconds. This delay value can be overwritten through the control panel!
<meta name="audioSupport" content="[value]" />
Optional. Sets the default audio support to be either true or false. The default value is false. Can be overwritten through the control panel.
<meta name="audioVolume" content="[value]" />
Optional. Sets the default audio volume to a value between 0 and 100 percent. The default value is 100. This value is the overall volume and affects the individual volume settings of the audio objetcs [formula: (overall_volume/100)*individual_volume]! Can be overwritten through the control panel.
<meta name="audioError" content="[value]" />
Optional. Sets the default audio error display to be either true or false. The default value is false. The error display shows up only on slide0 and is maybe important to foreign users.
<meta name="audioDebug" content="[value]" />
Optional. Sets the default audio debug display to be either true or false. The default value is false. The debug display shows up as an overlay div and is therefor always visible. The debug display shows debugging output from the audio engine SoundManager 2!

You have to know that if you like to hear sounds even localy ("file://" - instead of - "http://") you must go to the Flash Player Settings Manager / Global Security Settings panel [www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html] and change the settings. Click the pop-up menu and select Add Location. The Add Location box opens. You can add an individual file or an entire directory. If you add an entire directory, all the files and subdirectories in that directory are trusted. Type in the url scheme "file://" for general access or "file:///user/directoryname/filename.swf" for restricted access.

References

S5 1.3 DIV section

Slide structure and audio/chart configuration

# snippet start ================================================ <div>
<div class="presentation">
 
  <!-- optional background sound played during the slide show -->
  <object data="[mp3 file]" archive="volume:80,loop" type="audio/mp3" ...
  ... class="handout" declare="declare" width="0" height="0"></object>
 
  <div class="slide">
  
    <h1>[slide title]</h1>
	
    [content displayed in this slide]
    
    <!-- optional dynamically generated pie|bar chart -->
    <table id="chart_data" summary="" class="[pie|bar]chart" border="0">
      <tr><td bgcolor="#923033"></td><td>Lamb:</td><td>66</td></tr>
      <tr><td    bgcolor="#ad3"></td><td>Beef:</td><td>99</td></tr>
      <tr><td     bgcolor="red"></td><td>Pork:</td><td>15</td></tr>
    </table>
    <!-- or optional dynamically generated line chart -->
    <table id="chart_data" summary="" class="linechart" border="0">
      <tr><td bgcolor="red"></td><td>x:</td><td>7</td><td>9</td></tr>
    </table>
    <div>
      <canvas id="chart_canvas" width="80" height="80" class="scale">
      </canvas>
    </div>
    
    <div class="slidecontent">
    [optional wrapper for slide content]
    </div>
	
    <div class="handout">
    [optional extra content not displayed in slide show]
    </div>
	  
    <div class="notes">
    [optional extra content that shows up in notes window]
    </div>
    
    <div class="hide">
    [optional content not displayed at all]
    </div>
    	  
    <!-- optional background sound played during this slide -->
    <object data="[mp3 file]" archive="volume:50" type="audio/mp3" ...
    ... class="handout" declare="declare" width="0" height="0"></object>
    
  </div>
  
</div>
# snippet end ================================================= </div>

References

S5 1.3 optional audio objects

<object data="[value]" archive="[values]" ... ></object>
Optional. To set a background sound to the slide show and/or to a specific slide insert the complete object exactly as shown above and then modify the data and archive values. The first [value] must include the path and file of the mp3 to be played. The second [values] could include the attribute:value pair volume:100 and if you need the sound to loop add ,loop. Volume default is 100 percent. loop is off by default.

S5 1.3 optional dynamically generated pie/bar/line charts

<table id="[name]_data" class="piechart" summary="[values]">
  <tr>
    <td bgcolor="[value]"></td><td>[value]</td><td>[value]</td>
  </tr>
</table>
<canvas id="[name]_canvas" width="[value]" height="[value]" />
Optional. To create a pie/bar/line chart for a slide, insert the source exactly as shown above and then modify the attribute values. The tables font-size could be set by adding a style sheet class like fs75, fs66 or fs50 (percentage of normal font size). The table could be set invisible by adding the style sheet class hide, or if it should be visible in outline mode add class handout and if it should be incremental add class incremental. The summary [values] could include the following keywords: noshadow, noshade, notext and exclusive imgtext or htmltext for pie/bar charts and noshadow or nofill for line charts.

Most of the keywords are self-describing. The canvas element do not support text natively. So you have 3 opinions to write text to the canvas element. Without one of the keywords imgtext or htmltext the text is drawn through lines. imgtext is drawn through scaled images. This works well but the scaling of opera and gecko driven browsers looks poore. htmltext is not part of the canvas element instead drawn over the canvas through style sheets. It's not only a matter of taste which kind of text you prefer because htmltext needs much more resources.

If your pie/bar/line chart shoul'd not have transparent background, then add a bgcolor="[value]" to your <table></table>. The accepted color values are: 6 digit #000000, 3 digit #fff or VGA and Netscape color names like cornflowerblue.

The pie/bar/line chart values are parsed through the <tr></tr> table rows. The first <td></td> must include the color as bgcolor attribute. The second <td></td> must include the name and the third <td></td> must include the value. The value of all following <td></td> will be summed for pie/bar charts. If the first <td> do not include a bgcolor the <tr> is ignored. Also every <th></th> is ignored.

The <table> and <canvas> objects are bundled via the corresponding id prefixes. Put class="scale" on the canvas, and it'll be shown scaled. "scale" should always be the first class and the <canvas> must include width and height attributes. If you wan't to use htmltext the <canvas> must be surrounded by a <div></div>. The positioning of the table and canvas objects are up to you.

References

S5 1.3 Keyboard controls

The following apply in any supporting browser (Opera additionally uses the default Opera Show controls).

Action Key(s)
Go to next slide
  • Space bar
  • Return
  • Enter
  • Right arrow
  • Down arrow
  • Page down
  • Click left mouse button outside of control area or object
Go to previous slide
  • Left arrow
  • Up arrow
  • Page up
Go to title (first) slide
  • H
  • Home
Go to last slide
  • E
  • End
Jump directly to slide
  • Type slide number, then hit Return or Enter
Skip forward n slides
  • Type number of slides to skip, hit any "go to next" key except Return or Enter
Skip backward n slides
  • Type number of slides to skip, hit any "go to previous" key
Exit slideshow
  • Q
  • Escape
Open notes window
  • N
Switch between slideshow and outline view
  • T
Toggle transition support
  • F
Toggle sound support
  • S
Toggle auto play support
  • A
Toggle pausing auto play
  • P
  • Space Bar
Toggle auto play looping
  • L
Show / hide slide controls
  • C
  • Move mouse pointer over control area
Show keyboard help
  • Backspace
  • Move mouse pointer over control area and double click

S5 1.3 Keyboard controls

The following apply only in Auto Play mode.

Action Key(s)
Switch between slideshow and outline view
  • T
Show / hide slide controls
  • C
Toggle transition support
  • F
Toggle sound support
  • S
Toggle auto play support
  • A
Toggle pausing auto play
  • P
  • Space Bar
Toggle auto play looping
  • L

References

S5 1.3 Unicode Panel controls

Symbol & Action Unicode Key(s)
× Exit slideshow
  • &times;
  • &#215;
  • Q
  • Escape
Open notes window
  • &#10063;
  • &#x274f;
  • N
± Switch slideshow style
  • &plusmn;
  • &#177;
  • T
|< Go to title (first) slide
  • |&lt;
  • &#124;&#60;
  • H
  • Home
< Go to previous slide
  • &gt;
  • &#60;
  • Left arrow
  • Up arrow
  • Page up
> Go to next slide
  • &gt;
  • &#62;
  • Space bar
  • Return
  • Enter
  • Right arrow
  • Down arrow
  • Page down
>| Go to last slide
  • &gt;|
  • &#62;&#124;
  • E
  • End
Ξ Pop up slide lister
  • &Xi;
  • &#926;
  • &#x39e;
  • mouse move/click
Toggle transition support
  • &#9640;
  • &#x25a8;
  • F
Toggle sound support
  • &#9835;
  • &#x266b;
  • S
Pop up volume lister
  • &#9698;
  • &#x25e2;
  • mouse move/click
Toggle auto play support
  • &#9654;
  • &#x25b6;
  • A
|| Toggle pausing auto play
  • &#124;&#124;
  • P
  • Space Bar
Toggle auto play looping
  • &infin;
  • &#8734;
  • &#x221e;
  • L
5·10·15·30·60
Adjust auto play delay

References

S5 1.3 Graphical Panel controls

Image & Action Key(s)
exit Exit slideshow
  • Q
  • Escape
notes Open notes window
  • N
toggle Switch slideshow style
  • T
zero Go to title (first) slide
  • H
  • Home
prev Go to previous slide
  • Left arrow
  • Up arrow
  • Page up
next Go to next slide
  • Space bar
  • Return
  • Enter
  • Right arrow
  • Down arrow
  • Page down
last Go to last slide
  • E
  • End
list Pop up slide lister
  • mouse click
fade Toggle transition support
  • F
audio Toggle sound support
  • S
volume Pop up volume lister
  • mouse click
auto Toggle auto play support
  • A
pause Toggle pausing auto play
  • P
  • Space Bar
loop Toggle auto play looping
  • L
delay Adjust auto play delay
  • mouse click

References

S5 1.3 Footer display

Transition/Audio Status
  • [––] Transions & Audio OFF
  • [F–] Transions ON (Fading)
  • [–S] Audio ON (Sound)
  • [FS] Transions & Audio ON
Progress Indicator
  • X/N current Slide of Slides total
Auto Play Status
  • [––] Auto Play OFF
  • [>|] Auto Play ON
  • [>0] Looping ON
  • [||] Pausing ON

Bookmark this page with:   delicious   digg   reddit   magnoliacom   newsvine   furl   google   yahoo