Mercurial > hg > Papers > 2010 > jsst-shinya
changeset 15:b3b5bcbba089
add slide: presen/index.html
line wrap: on
line diff
--- a/paper.tex Fri Aug 27 22:52:54 2010 +0900 +++ b/paper.tex Sat Sep 11 23:46:30 2010 +0900 @@ -471,8 +471,7 @@ は構造体よって表され, 状態遷移は各状態毎に保持している遷移先ポインタによ る配列を,1Byte単位でテーブルルックアップを行うことで実装されている. -{\bf UTF-8対応}\\ - +{\bf UTF-8対応} \begin{figure}[!t] \begin{center} \scalebox{0.40}{\includegraphics{fig6.eps}} @@ -502,7 +501,7 @@ さらに,本実装から動的に生成されるコードも,コードセグメント/関数とswitch を基準としたシンプルな記述で高い可読性を持ちつつ, 細かい最適化をGCC/LLVMの最適 化技術を利用することで実行速度も非常に高速なものとなっていることが実験結 -果から分かる. +果から分かった. \section{まとめと今後の課題} 本実験では, 正規表現をコードセグメント/関数による状態遷移を行うコードに
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/features.html Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,222 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" + "http://www.w3.org/TR/REC-html40/loose.dtd"> +<html> +<head> +<title>S5 Features</title> + +<style type="text/css" media="all"> +dt {margin-top: 1.5em; font-weight: bold;} +dd p {margin: 0.25em 0 1em;} +table.chart tbody td {vertical-align: top; padding: 1em 0;} +table.chart tbody td ul {margin-top: 0;} +#main div.aside {margin-top: 5em;} +</style> +</head> +<body id="www-meyerweb-com" class="tools"> + + + +<h2>S5 Features</h2> + +<p> +Note that most of these features are not present in Opera, which displays an S5 slide show as a normal Opera Show document. +</p> + +<dl> + +<dt>Auto-scaling of text</dt> +<dd> +<p> +If you're setting up to present your 1024x768 slide show and find out the projector available to you only goes up to 800x600, don't worry. S5 will auto-scale the text in the presentation to match the browser window, no matter what size you make it. On the down side, images are not scaled (as of S5 1.1). +</p> +</dd> + +<dt>Incremental display</dt> +<dd> +<p> +If you're a "show the bullet points one at a time" kind of person, S5 has you covered. Put <code>class="incremental"</code> on any list, and its list items will be revealed one at a time. Just use the usual forward/backward keys! If you want to make other kinds of elements appear in sequence, just <code>class</code> each one <code>incremental</code>, and you're all set. Combine this with some overlapping images and you can get some basic animation effects. +</p> +</dd> + +<dt>Progress indicator</dt> +<dd> +<p> +Wonder how far you've gotten into a long presentation? Thanks to the progress indicator, you can keep track of how well you're staying on schedule. The "X of Y" text (where "X" is the current slide's number, and "Y" is the total number of slides) tells you exactly where you are, and how far you have to go. +</p> +</dd> + +<dt>Slide bookmarks</dt> +<dd> +<p> +If you want to point at a specific slide, just add a fragment identifier with <code>slide</code> and the slide number you want. For example, if you wanted to point straight to slide 7 of a presentation found at <code>http://example.org/preso.html</code>, you'd use the URL <code>http://example.org/preso.html#slide7</code>. +</p> +</dd> + +<dt>Comprehensive keyboard controls</dt> +<dd> +<p> +There are a bunch of ways to move forward and backward in a slide show, including everyone's favorite advancer, the space bar. You can make the navigation controls appear and disappear with the "C" key or flip between slide show and outline views with the "T" key. There are also ways to go straight to a specific slide, or skip forward or backward a certain number of slides. See the <a href="#controlchart">control chart</a> at the end of this document for details. +</p> + +</dd> + +<dt>Click to advance</dt> +<dd> +<p> +If you have one of those super-cool 3D gestural mice, not to worry. Click on a slide and you'll advance to the next slide (or move forward an incremental step). Works with everyday mice, too! Even better, clicks within movies, Flash animations, and the navigation controls do <em>not</em> cause the slide show to advance. +</p> +</dd> + +<dt>Author customization features</dt> +<dd> +<p> +Slide show authors can set two basic parameters in the markup of a slide show: whether the presentation defaults to slide show view or outline view, and whether or not the navigation controls are hidden or visible by default in the slide show view. +</p> +</dd> + +<dt>Based on open standards</dt> +<dd> +<p> +One of the S's in "S5" stands for Standards-based, and that's exactly what it is: a combination of XHTML, CSS, and JavaScript. If you can create a Web page, you can create an S5 presentation. If you can create a CSS design, you can create an S5 theme. +</p> +</dd> + +<dt><acronym title="Opera Show Format">OSF</acronym> and <acronym title="Extensible Open XHTML Outlines">XOXO</acronym> compatible</dt> +<dd> +<p> +By default, S5 files are compatible with the <a href="http://my.opera.com/community/dev/operashow/documentation/doc_fileformat.html">Opera Show Format</a>—but you can also create an <a href="http://microformats.org/wiki/XOXO">XOXO</a>-based slide show and have it work, too! +</p> +</dd> + +<dt>Public domain technology</dt> +<dd> +<p> +S5 has been officially released into the Public Domain, so you can always use it without any fear of license restrictions. +</p> +</dd> + +</dl> + + + +<div class="aside"> +<h4><a id="controlchart">Keyboard controls</a></h4> + +<p> +The following apply in any supporting browser besides Opera, which uses the default Opera Show controls instead. +</p> + +<table cellspacing="0" class="chart"> +<thead> +<tr> +<th>Action</th> +<th>Key(s)</th> +</tr> +</thead> + +<tbody> + +<tr> +<td>Go to next slide</td> +<td> +<ul> +<li>Space bar</li> +<li>Return</li> +<li>Enter</li> +<li>Right arrow</li> +<li>Down arrow</li> +<li>Page down</li> +<li>Click left mouse button outside of control area, Flash object, or movie</li> +</ul> +</ul> +</td> +</tr> + +<tr> +<td>Go to previous slide</td> +<td> +<ul> +<li>Left arrow</li> +<li>Up arrow</li> +<li>Page up</li> +</ul> +</td> +</tr> + +<tr> +<td>Go to title (first) slide</td> +<td> +<ul> +<li>Home</li> +</ul> +</ul> +</td> +</tr> + +<tr> +<td>Go to last slide</td> +<td> +<ul> +<li>End</li> +</ul> +</ul> +</td> +</tr> + +<tr> +<td>Jump directly to slide</td> +<td> +<ul> +<li>Type slide number, then hit Return or Enter</li> +</ul> +</td> +</tr> + +<tr> +<td>Skip forward <i>n</i> slides</td> +<td> +<ul> +<li>Type number of slides to skip, hit any "go to next" key <strong>except</strong> Return or Enter</li> +</ul> +</td> +</tr> + +<tr> +<td>Skip backward <i>n</i> slides</td> +<td> +<ul> +<li>Type number of slides to skip, hit any "go to previous" key</li> +</ul> +</td> +</tr> + +<tr> +<td>Switch between slideshow and outline view</td> +<td> +<ul> +<li>T</li> +</ul> +</td> +</tr> + +<tr> +<td>Show / hide slide controls</td> +<td> +<ul> +<li>C</li> +<li>Move mouse pointer over control area</li> +</ul> +</td> +</tr> + +</tbody> + +</table> + +</div> + + + + +</body> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/fig.graffle Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,1171 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> +<plist version="1.0"> +<dict> + <key>ActiveLayerIndex</key> + <integer>0</integer> + <key>ApplicationVersion</key> + <array> + <string>com.omnigroup.OmniGraffle</string> + <string>129.18</string> + </array> + <key>AutoAdjust</key> + <false/> + <key>CanvasColor</key> + <dict> + <key>w</key> + <string>1</string> + </dict> + <key>CanvasOrigin</key> + <string>{0, 0}</string> + <key>CanvasScale</key> + <real>1</real> + <key>ColumnAlign</key> + <integer>1</integer> + <key>ColumnSpacing</key> + <real>36</real> + <key>CreationDate</key> + <string>2010-09-07 05:31:30 +0900</string> + <key>Creator</key> + <string>ryoma</string> + <key>DisplayScale</key> + <string>1 cm = 1 cm</string> + <key>FileType</key> + <string>flat</string> + <key>GraphDocumentVersion</key> + <integer>5</integer> + <key>GraphicsList</key> + <array> + <dict> + <key>Class</key> + <string>LineGraphic</string> + <key>ID</key> + <integer>67</integer> + <key>Points</key> + <array> + <string>{422.5, 250}</string> + <string>{549.5, 250}</string> + </array> + <key>Style</key> + <dict> + <key>stroke</key> + <dict> + <key>Color</key> + <dict> + <key>b</key> + <string>0</string> + <key>g</key> + <string>0</string> + <key>r</key> + <string>1</string> + </dict> + <key>HeadArrow</key> + <string>0</string> + <key>TailArrow</key> + <string>0</string> + <key>Width</key> + <real>3</real> + </dict> + </dict> + </dict> + <dict> + <key>Class</key> + <string>LineGraphic</string> + <key>ID</key> + <integer>23</integer> + <key>Points</key> + <array> + <string>{-21, 212}</string> + <string>{50, 212.25}</string> + </array> + <key>Style</key> + <dict> + <key>stroke</key> + <dict> + <key>Color</key> + <dict> + <key>b</key> + <string>0</string> + <key>g</key> + <string>0</string> + <key>r</key> + <string>1</string> + </dict> + <key>HeadArrow</key> + <string>0</string> + <key>TailArrow</key> + <string>0</string> + <key>Width</key> + <real>3</real> + </dict> + </dict> + </dict> + <dict> + <key>Class</key> + <string>LineGraphic</string> + <key>Head</key> + <dict> + <key>ID</key> + <integer>65</integer> + </dict> + <key>ID</key> + <integer>66</integer> + <key>Points</key> + <array> + <string>{481.818, 190.125}</string> + <string>{483.834, 210}</string> + </array> + <key>Style</key> + <dict> + <key>stroke</key> + <dict> + <key>HeadArrow</key> + <string>FilledArrow</string> + <key>LineType</key> + <integer>1</integer> + <key>TailArrow</key> + <string>0</string> + </dict> + </dict> + <key>Tail</key> + <dict> + <key>ID</key> + <integer>57</integer> + </dict> + </dict> + <dict> + <key>Class</key> + <string>Group</string> + <key>Graphics</key> + <array> + <dict> + <key>Bounds</key> + <string>{{421.5, 228}, {115, 23}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>FitText</key> + <string>YES</string> + <key>Flow</key> + <string>Resize</string> + <key>ID</key> + <integer>64</integer> + <key>Shape</key> + <string>Rectangle</string> + <key>Style</key> + <dict> + <key>fill</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>shadow</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>stroke</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + </dict> + <key>Text</key> + <dict> + <key>Text</key> + <string>{\rtf1\ansi\ansicpg1252\cocoartf949\cocoasubrtf540 +{\fonttbl\f0\fnil\fcharset128 HiraKakuProN-W3;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural + +\f0\fs30 \cf0 \'90\'b3\'8b\'4b\'95\'5c\'8c\'bb\'95\'5d\'89\'bf\'8a\'ed}</string> + </dict> + <key>Wrap</key> + <string>NO</string> + </dict> + <dict> + <key>Bounds</key> + <string>{{420.5, 210}, {129, 23}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>FitText</key> + <string>YES</string> + <key>Flow</key> + <string>Resize</string> + <key>ID</key> + <integer>65</integer> + <key>Shape</key> + <string>Rectangle</string> + <key>Style</key> + <dict> + <key>fill</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>shadow</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>stroke</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + </dict> + <key>Text</key> + <dict> + <key>Text</key> + <string>{\rtf1\ansi\ansicpg1252\cocoartf949\cocoasubrtf540 +{\fonttbl\f0\fnil\fcharset128 HiraKakuProN-W3;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural + +\f0\fs30 \cf0 \'83\'52\'83\'93\'83\'70\'83\'43\'83\'8b\'82\'b3\'82\'ea\'82\'bd}</string> + </dict> + <key>Wrap</key> + <string>NO</string> + </dict> + </array> + <key>ID</key> + <integer>63</integer> + </dict> + <dict> + <key>Class</key> + <string>Group</string> + <key>Graphics</key> + <array> + <dict> + <key>Bounds</key> + <string>{{433, 144.125}, {95, 26}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>FitText</key> + <string>YES</string> + <key>Flow</key> + <string>Resize</string> + <key>ID</key> + <integer>56</integer> + <key>Shape</key> + <string>Rectangle</string> + <key>Style</key> + <dict> + <key>fill</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>shadow</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>stroke</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + </dict> + <key>Text</key> + <dict> + <key>Text</key> + <string>{\rtf1\ansi\ansicpg1252\cocoartf949\cocoasubrtf540 +{\fonttbl\f0\fnil\fcharset128 HiraKakuProN-W3;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural + +\f0\fs34 \cf0 \expnd0\expndtw0\kerning0 +\'83\'52\'83\'93\'83\'70\'83\'43\'83\'89}</string> + </dict> + <key>Wrap</key> + <string>NO</string> + </dict> + <dict> + <key>Bounds</key> + <string>{{420.5, 164.125}, {120, 26}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>FitText</key> + <string>YES</string> + <key>Flow</key> + <string>Resize</string> + <key>ID</key> + <integer>57</integer> + <key>Shape</key> + <string>Rectangle</string> + <key>Style</key> + <dict> + <key>fill</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>shadow</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>stroke</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + </dict> + <key>Text</key> + <dict> + <key>Text</key> + <string>{\rtf1\ansi\ansicpg1252\cocoartf949\cocoasubrtf540 +{\fonttbl\f0\fnil\fcharset128 HiraKakuProN-W3;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural + +\f0\fs34 \cf0 \expnd0\expndtw0\kerning0 +(GCC, LLVM)}</string> + </dict> + <key>Wrap</key> + <string>NO</string> + </dict> + </array> + <key>ID</key> + <integer>55</integer> + </dict> + <dict> + <key>Class</key> + <string>LineGraphic</string> + <key>Head</key> + <dict> + <key>ID</key> + <integer>5</integer> + </dict> + <key>ID</key> + <integer>51</integer> + <key>Points</key> + <array> + <string>{389, 165}</string> + <string>{417, 165.25}</string> + </array> + <key>Style</key> + <dict> + <key>stroke</key> + <dict> + <key>HeadArrow</key> + <string>FilledArrow</string> + <key>LineType</key> + <integer>1</integer> + <key>TailArrow</key> + <string>0</string> + </dict> + </dict> + <key>Tail</key> + <dict> + <key>ID</key> + <integer>49</integer> + </dict> + </dict> + <dict> + <key>Bounds</key> + <string>{{295, 128.5}, {90, 24}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>FitText</key> + <string>YES</string> + <key>Flow</key> + <string>Resize</string> + <key>ID</key> + <integer>50</integer> + <key>Shape</key> + <string>Rectangle</string> + <key>Style</key> + <dict> + <key>fill</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>shadow</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>stroke</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + </dict> + <key>Text</key> + <dict> + <key>Text</key> + <string>{\rtf1\ansi\ansicpg1252\cocoartf949\cocoasubrtf540 +{\fonttbl\f0\fnil\fcharset128 HiraKakuProN-W3;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural + +\f0\fs32 \cf0 \'90\'b6\'90\'ac\'83\'52\'81\'5b\'83\'68}</string> + </dict> + <key>Wrap</key> + <string>NO</string> + </dict> + <dict> + <key>Class</key> + <string>LineGraphic</string> + <key>Head</key> + <dict> + <key>ID</key> + <integer>11</integer> + </dict> + <key>ID</key> + <integer>48</integer> + <key>Points</key> + <array> + <string>{49, 203.5}</string> + <string>{92.5, 203.5}</string> + </array> + <key>Style</key> + <dict> + <key>stroke</key> + <dict> + <key>HeadArrow</key> + <string>FilledArrow</string> + <key>LineType</key> + <integer>1</integer> + <key>TailArrow</key> + <string>0</string> + </dict> + </dict> + <key>Tail</key> + <dict> + <key>ID</key> + <integer>47</integer> + </dict> + </dict> + <dict> + <key>Bounds</key> + <string>{{-21, 192}, {70, 23}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>FitText</key> + <string>YES</string> + <key>Flow</key> + <string>Resize</string> + <key>ID</key> + <integer>47</integer> + <key>Shape</key> + <string>Rectangle</string> + <key>Style</key> + <dict> + <key>fill</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>shadow</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>stroke</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + </dict> + <key>Text</key> + <dict> + <key>Text</key> + <string>{\rtf1\ansi\ansicpg1252\cocoartf949\cocoasubrtf540 +{\fonttbl\f0\fnil\fcharset128 HiraKakuProN-W3;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural + +\f0\fs30 \cf0 \'90\'b3\'8b\'4b\'95\'5c\'8c\'bb}</string> + </dict> + <key>Wrap</key> + <string>NO</string> + </dict> + <dict> + <key>Class</key> + <string>LineGraphic</string> + <key>Head</key> + <dict> + <key>ID</key> + <integer>42</integer> + </dict> + <key>ID</key> + <integer>43</integer> + <key>Points</key> + <array> + <string>{265, 244.482}</string> + <string>{294.714, 244.489}</string> + </array> + <key>Style</key> + <dict> + <key>stroke</key> + <dict> + <key>HeadArrow</key> + <string>FilledArrow</string> + <key>LineType</key> + <integer>1</integer> + <key>TailArrow</key> + <string>0</string> + </dict> + </dict> + <key>Tail</key> + <dict> + <key>ID</key> + <integer>30</integer> + </dict> + </dict> + <dict> + <key>Class</key> + <string>Group</string> + <key>Graphics</key> + <array> + <dict> + <key>Bounds</key> + <string>{{291, 238.5}, {97.9999, 23}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>FitText</key> + <string>Vertical</string> + <key>Flow</key> + <string>Resize</string> + <key>ID</key> + <integer>41</integer> + <key>Shape</key> + <string>Rectangle</string> + <key>Style</key> + <dict> + <key>fill</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>shadow</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>stroke</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + </dict> + <key>Text</key> + <dict> + <key>Text</key> + <string>{\rtf1\ansi\ansicpg1252\cocoartf949\cocoasubrtf540 +{\fonttbl\f0\fnil\fcharset128 HiraKakuProN-W3;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural + +\f0\fs30 \cf0 LLVM - IR}</string> + </dict> + </dict> + <dict> + <key>Bounds</key> + <string>{{295.214, 231}, {89.5697, 27}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>ID</key> + <integer>42</integer> + <key>Shape</key> + <string>Rectangle</string> + </dict> + </array> + <key>ID</key> + <integer>40</integer> + </dict> + <dict> + <key>Class</key> + <string>LineGraphic</string> + <key>Head</key> + <dict> + <key>ID</key> + <integer>38</integer> + </dict> + <key>ID</key> + <integer>39</integer> + <key>Points</key> + <array> + <string>{265, 165.482}</string> + <string>{314.279, 165.827}</string> + </array> + <key>Style</key> + <dict> + <key>stroke</key> + <dict> + <key>HeadArrow</key> + <string>FilledArrow</string> + <key>LineType</key> + <integer>1</integer> + <key>TailArrow</key> + <string>0</string> + </dict> + </dict> + <key>Tail</key> + <dict> + <key>ID</key> + <integer>30</integer> + <key>Info</key> + <integer>1</integer> + </dict> + </dict> + <dict> + <key>Class</key> + <string>Group</string> + <key>Graphics</key> + <array> + <dict> + <key>Bounds</key> + <string>{{312.5, 160}, {53, 23}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>FitText</key> + <string>Vertical</string> + <key>Flow</key> + <string>Resize</string> + <key>ID</key> + <integer>37</integer> + <key>Shape</key> + <string>Rectangle</string> + <key>Style</key> + <dict> + <key>fill</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>shadow</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>stroke</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + </dict> + <key>Text</key> + <dict> + <key>Text</key> + <string>{\rtf1\ansi\ansicpg1252\cocoartf949\cocoasubrtf540 +{\fonttbl\f0\fnil\fcharset128 HiraKakuProN-W3;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural + +\f0\fs30 \cf0 C}</string> + </dict> + </dict> + <dict> + <key>Bounds</key> + <string>{{314.779, 152.5}, {48.4408, 27}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>ID</key> + <integer>38</integer> + <key>Shape</key> + <string>Rectangle</string> + </dict> + </array> + <key>ID</key> + <integer>36</integer> + </dict> + <dict> + <key>Class</key> + <string>LineGraphic</string> + <key>ID</key> + <integer>30</integer> + <key>Points</key> + <array> + <string>{265, 244.482}</string> + <string>{265, 165.482}</string> + </array> + <key>Style</key> + <dict> + <key>stroke</key> + <dict> + <key>HeadArrow</key> + <string>0</string> + <key>TailArrow</key> + <string>0</string> + </dict> + </dict> + </dict> + <dict> + <key>Class</key> + <string>LineGraphic</string> + <key>ID</key> + <integer>46</integer> + <key>Points</key> + <array> + <string>{229.5, 203.713}</string> + <string>{266, 204}</string> + </array> + <key>Style</key> + <dict> + <key>stroke</key> + <dict> + <key>HeadArrow</key> + <string>0</string> + <key>TailArrow</key> + <string>0</string> + </dict> + </dict> + <key>Tail</key> + <dict> + <key>ID</key> + <integer>9</integer> + </dict> + </dict> + <dict> + <key>Class</key> + <string>LineGraphic</string> + <key>Head</key> + <dict> + <key>ID</key> + <integer>17</integer> + </dict> + <key>ID</key> + <integer>22</integer> + <key>Points</key> + <array> + <string>{265, 203.993}</string> + <string>{314.279, 203.831}</string> + </array> + <key>Style</key> + <dict> + <key>stroke</key> + <dict> + <key>HeadArrow</key> + <string>FilledArrow</string> + <key>LineType</key> + <integer>1</integer> + <key>TailArrow</key> + <string>0</string> + </dict> + </dict> + <key>Tail</key> + <dict> + <key>ID</key> + <integer>30</integer> + <key>Position</key> + <real>0.51251417398452759</real> + </dict> + </dict> + <dict> + <key>Class</key> + <string>LineGraphic</string> + <key>Head</key> + <dict> + <key>ID</key> + <integer>9</integer> + </dict> + <key>ID</key> + <integer>19</integer> + <key>Points</key> + <array> + <string>{146.5, 203.5}</string> + <string>{175.5, 203.5}</string> + </array> + <key>Style</key> + <dict> + <key>stroke</key> + <dict> + <key>HeadArrow</key> + <string>FilledArrow</string> + <key>LineType</key> + <integer>1</integer> + <key>TailArrow</key> + <string>0</string> + </dict> + </dict> + <key>Tail</key> + <dict> + <key>ID</key> + <integer>11</integer> + </dict> + </dict> + <dict> + <key>Class</key> + <string>Group</string> + <key>Graphics</key> + <array> + <dict> + <key>Bounds</key> + <string>{{312.5, 197.75}, {53, 23}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>FitText</key> + <string>Vertical</string> + <key>Flow</key> + <string>Resize</string> + <key>ID</key> + <integer>16</integer> + <key>Shape</key> + <string>Rectangle</string> + <key>Style</key> + <dict> + <key>fill</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>shadow</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>stroke</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + </dict> + <key>Text</key> + <dict> + <key>Text</key> + <string>{\rtf1\ansi\ansicpg1252\cocoartf949\cocoasubrtf540 +{\fonttbl\f0\fnil\fcharset128 HiraKakuProN-W3;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural + +\f0\fs30 \cf0 CbC}</string> + </dict> + </dict> + <dict> + <key>Bounds</key> + <string>{{314.779, 190.25}, {48.4408, 27}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>ID</key> + <integer>17</integer> + <key>Shape</key> + <string>Rectangle</string> + </dict> + </array> + <key>ID</key> + <integer>15</integer> + </dict> + <dict> + <key>Bounds</key> + <string>{{93, 190}, {53, 27}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>ID</key> + <integer>11</integer> + <key>Shape</key> + <string>Rectangle</string> + <key>Text</key> + <dict> + <key>Text</key> + <string>{\rtf1\ansi\ansicpg1252\cocoartf949\cocoasubrtf540 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural + +\f0\fs24 \cf0 NFA}</string> + </dict> + </dict> + <dict> + <key>Bounds</key> + <string>{{176, 190}, {53, 27}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>ID</key> + <integer>9</integer> + <key>Shape</key> + <string>Rectangle</string> + <key>Text</key> + <dict> + <key>Text</key> + <string>{\rtf1\ansi\ansicpg1252\cocoartf949\cocoasubrtf540 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural + +\f0\fs24 \cf0 DFA}</string> + </dict> + </dict> + <dict> + <key>Bounds</key> + <string>{{68, 155}, {173, 24}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>FitText</key> + <string>YES</string> + <key>Flow</key> + <string>Resize</string> + <key>ID</key> + <integer>7</integer> + <key>Shape</key> + <string>Rectangle</string> + <key>Style</key> + <dict> + <key>fill</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>shadow</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>stroke</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + </dict> + <key>Text</key> + <dict> + <key>Text</key> + <string>{\rtf1\ansi\ansicpg1252\cocoartf949\cocoasubrtf540 +{\fonttbl\f0\fnil\fcharset128 HiraKakuProN-W3;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural + +\f0\fs32 \cf0 \'83\'52\'81\'5b\'83\'68\'90\'b6\'90\'ac\'8c\'6e(Python)}</string> + </dict> + <key>Wrap</key> + <string>NO</string> + </dict> + <dict> + <key>Bounds</key> + <string>{{168, 59}, {81, 39}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>ID</key> + <integer>6</integer> + <key>Shape</key> + <string>Rectangle</string> + <key>Text</key> + <dict> + <key>Text</key> + <string>{\rtf1\ansi\ansicpg1252\cocoartf949\cocoasubrtf540 +{\fonttbl\f0\fnil\fcharset128 HiraKakuProN-W3;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural + +\f0\fs24 \cf0 \'90\'b3\'8b\'4b\'95\'5c\'8c\'bb}</string> + </dict> + </dict> + <dict> + <key>Bounds</key> + <string>{{417, 142.25}, {127, 46}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>ID</key> + <integer>5</integer> + <key>Magnets</key> + <array> + <string>{-0.5, 0}</string> + </array> + <key>Shape</key> + <string>Rectangle</string> + </dict> + <dict> + <key>Bounds</key> + <string>{{64, 140}, {181, 89}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>ID</key> + <integer>3</integer> + <key>Shape</key> + <string>Rectangle</string> + </dict> + <dict> + <key>Bounds</key> + <string>{{291, 120}, {98, 147}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>ID</key> + <integer>49</integer> + <key>Magnets</key> + <array> + <string>{0.5, -0.193878}</string> + </array> + <key>Shape</key> + <string>Rectangle</string> + <key>Style</key> + <dict> + <key>stroke</key> + <dict> + <key>CornerRadius</key> + <real>5</real> + </dict> + </dict> + </dict> + </array> + <key>GridInfo</key> + <dict/> + <key>GuidesLocked</key> + <string>NO</string> + <key>GuidesVisible</key> + <string>YES</string> + <key>HPages</key> + <integer>1</integer> + <key>ImageCounter</key> + <integer>1</integer> + <key>IsPalette</key> + <string>NO</string> + <key>KeepToScale</key> + <false/> + <key>Layers</key> + <array> + <dict> + <key>Lock</key> + <string>NO</string> + <key>Name</key> + <string>Layer 1</string> + <key>Print</key> + <string>YES</string> + <key>View</key> + <string>YES</string> + </dict> + </array> + <key>LayoutInfo</key> + <dict/> + <key>LinksVisible</key> + <string>NO</string> + <key>MagnetsVisible</key> + <string>NO</string> + <key>MasterSheets</key> + <array> + <dict> + <key>ActiveLayerIndex</key> + <integer>0</integer> + <key>AutoAdjust</key> + <false/> + <key>CanvasColor</key> + <dict> + <key>w</key> + <string>1</string> + </dict> + <key>CanvasOrigin</key> + <string>{0, 0}</string> + <key>CanvasScale</key> + <real>1</real> + <key>ColumnAlign</key> + <integer>1</integer> + <key>ColumnSpacing</key> + <real>36</real> + <key>DisplayScale</key> + <string>1 cm = 1 cm</string> + <key>GraphicsList</key> + <array/> + <key>GridInfo</key> + <dict/> + <key>HPages</key> + <integer>1</integer> + <key>IsPalette</key> + <string>NO</string> + <key>KeepToScale</key> + <false/> + <key>Layers</key> + <array> + <dict> + <key>Lock</key> + <string>NO</string> + <key>Name</key> + <string>Layer 1</string> + <key>Print</key> + <string>YES</string> + <key>View</key> + <string>YES</string> + </dict> + </array> + <key>LayoutInfo</key> + <dict/> + <key>Orientation</key> + <integer>2</integer> + <key>RowAlign</key> + <integer>1</integer> + <key>RowSpacing</key> + <real>36</real> + <key>SheetTitle</key> + <string>Master 1</string> + <key>UniqueID</key> + <integer>1</integer> + <key>VPages</key> + <integer>1</integer> + </dict> + </array> + <key>ModificationDate</key> + <string>2010-09-11 12:17:03 +0900</string> + <key>Modifier</key> + <string>ryoma</string> + <key>NotesVisible</key> + <string>NO</string> + <key>Orientation</key> + <integer>2</integer> + <key>OriginVisible</key> + <string>NO</string> + <key>PageBreaks</key> + <string>YES</string> + <key>PrintInfo</key> + <dict> + <key>NSBottomMargin</key> + <array> + <string>coded</string> + <string>BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFklySG</string> + </array> + <key>NSLeftMargin</key> + <array> + <string>coded</string> + <string>BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFklySG</string> + </array> + <key>NSPaperSize</key> + <array> + <string>size</string> + <string>{595, 842}</string> + </array> + <key>NSRightMargin</key> + <array> + <string>coded</string> + <string>BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFklySG</string> + </array> + <key>NSTopMargin</key> + <array> + <string>coded</string> + <string>BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFklySG</string> + </array> + </dict> + <key>ReadOnly</key> + <string>NO</string> + <key>RowAlign</key> + <integer>1</integer> + <key>RowSpacing</key> + <real>36</real> + <key>SheetTitle</key> + <string>Canvas 1</string> + <key>SmartAlignmentGuidesActive</key> + <string>YES</string> + <key>SmartDistanceGuidesActive</key> + <string>NO</string> + <key>UniqueID</key> + <integer>1</integer> + <key>UseEntirePage</key> + <false/> + <key>VPages</key> + <integer>1</integer> + <key>WindowInfo</key> + <dict> + <key>CurrentSheet</key> + <integer>0</integer> + <key>DrawerTab</key> + <string>Outline</string> + <key>DrawerWidth</key> + <real>209</real> + <key>Frame</key> + <string>{{134, 39}, {1033, 707}}</string> + <key>VisibleRegion</key> + <string>{{-244, 0}, {1018, 593}}</string> + <key>Zoom</key> + <real>1</real> + </dict> +</dict> +</plist>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/filemap.html Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,84 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" + "http://www.w3.org/TR/REC-html40/loose.dtd"> +<html> +<head> +<title>S5 File Map</title> + +</head> +<body id="www-meyerweb-com" class="tools"> + + + +<h2>S5 File Map</h2> + +<p> +Pretty much everything you need outside of the slide file itself is found in the <tt>ui</tt> directory, which sits next to the slide file. That's where, if you dig into the <code>default</code> subdirectory, you find the various CSS files and JavaScript that makes S5 work. +</p> +<p> +The critical files in the <tt>ui/default</tt> directory are: +</p> + +<dl> +<dt><tt>slides.js</tt></dt> +<dd> +<p> +The JavaScript that drives the dynamic side of the slide show. It automatically IDs the slides when the document loads, builds the navigation menu, handles the hiding and showing of slides, and so on. The script also manages the fallback to Opera Show if you're using Opera. +</p> +</dd> +<dt><tt>slides.css</tt></dt> +<dd> +<p> +This is really just a hub file that points to the three files that drive S5. Those files are: +</p> +<dl> +<dt><tt>s5-core.css</tt></dt> +<dd> +<p> +Contains a few rules that make the system run. If you mess with this file, you're likely to break the slide show unless you really know what you're doing. +</p> +</dd> +<dt><tt>framing.css</tt></dt> +<dd> +<p> +Contains some rules that place and size the various slide components—things like the header, footer, slide controls, and so on. If you want to change the basic slide layout, this is where to go. +</p> +</dd> +<dt><tt>pretty.css</tt></dt> +<dd> +<p> +The CSS that adds the visual pizazz to the slide show—colors, fonts, text alignment, margins, and all that other good stuff. You can make a whole new theme just by editing this file, and not touching the others. +</p> +</dd> +</dl> +</dd> +<dt><tt>opera.css</tt></dt> +<dd> +<p> +This file is what allows Opera Show to do its thing, assigning a few CSS rules that break the file up into slides. It should never have to be edited unless you go messing with the rules in <tt>s5-core.css</tt> (not recommended, but hey, it's your slide show). +</p> +</dd> +<dt><tt>outline.css</tt></dt> +<dd> +<p> +The styles that are applied when the slide show is in the outline view. These are largely meant to make the document a little bit more readable as an outline. +</p> +</dd> +<dt><tt>print.css</tt></dt> +<dd> +<p> +This is what makes the printer-friendly version work. There are a couple of rules at the beginning of the file you should be careful about changing, but otherwise, it's all up to you. +</p> +</dd> +<dt><tt>iepngfix.htc</tt></dt> +<dd> +<p> +A Microsoft behavior file which adds support for PNG alpha channels to IE/Win; this is called via style rules added via the JavaScript. This file is skipped over by all other browsers, which don't need hackery to honor PNG alpha channels. +</p> +</dd> +</dl> + + + + +</body> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/index.html Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,249 @@ +<?xml version="1.0" encoding="utf-8"?> +<!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" lang="ja" xml:lang="ja"> + <head> + <title>Implimentation of Regular Expression Engine with Dynamic Code Generation.</title> + <!-- metadata --> + <meta name="generator" content="S5" /> + <meta name="version" content="S5 1.1" /> + <meta name="presdate" content="20101014" /> + <meta name="author" content="Ryoma SHINYA" /> + <meta name="company" content="University of the Ryukyu" /> + <!-- configuration parameters --> + <meta name="defaultView" content="slideshow" /> + <meta name="controlVis" content="hidden" /> + <!-- style sheet links --> + <link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" /> + <link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" /> + <link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" /> + <link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" /> + <!-- embedded styles --> + <style type="text/css" media="all"> + .imgcon {width: 525px; margin: 0 auto; padding: 0; text-align: center;} + #anim {width: 270px; height: 320px; position: relative; margin-top: 0.5em;} + #anim img {position: absolute; top: 42px; left: 24px;} + img#me01 {top: 0; left: 0;} + img#me02 {left: 23px;} + img#me04 {top: 44px;} + img#me05 {top: 43px;left: 36px;} + </style> + <!-- S5 JS --> + <script src="ui/default/slides.js" type="text/javascript"></script> + </head> + <body> + <div class="layout"> + <div id="controls"><!-- DO NOT EDIT --></div> + <div id="currentSlide"><!-- DO NOT EDIT --></div> + <div id="header"></div> + <div id="footer"> + <h1>Implimentation of Regular Expression Engine with Dynamic Code Generation.</h1> + <h2>ソフトウェア科学会; 2010/10/14</h2> + </div> + </div> + <div class="presentation"> + <div class="slide"> + <h1>動的なコード生成を用いた<br/>正規表現評価器の実装</h1> + <h3>新屋 良磨, 河野 真治</h3> + <h4><a href="http://ie.u-ryukyu.ac.jp/" rel="external">琉球大学 並列信頼研究室</a></h4> + <div class="handout"></div> + </div> + <!-- PAGE --> + <div class="slide"> + <h1>研究目的と背景 *</h1> + <ul> + <li>現在C言語のような静的な言語では, 実行中に内部表現となるデータを生成し, それを操作していくデータ主導のプログラミング手法が基本である.</li> + <li>データである内部表現をコードに変換して再度コンパイルすることで, コード主導のプログラミング手法が取れる.</li> + <li>この手法では, 生成系を高級な言語で実装しても最終的にはコンパイルされたプログラムとなるので性能を保ったまま<blue>開発効率に優れるという</blue>利点がある.</li> + </ul> + </div> + <!-- PAGE --> + <div class="slide"> + <h1>研究目的と背景 **</h1> + <ul> + <li>本研究では生成的プログラミングの有効性を示す例題として, 正規表現をコードに変換し, コンパイルして実行する正規表現評価器を実装した.</li> + </ul> + </div> + <!-- PAGE --> + <div class="slide"> + <h1>例題: 正規表現</h1> + <ul> + <li>テキストのパターンマッチング記法.</li> + <p>ex: "<blue>(A|B)*C</blue>" -> "A"または"B", の0回以上の繰り返し直後に"C"</p> + <li>GNU grep などのテキスト検索ツールや各言語のライブラリで利用されている.</li> + <br/><br/> + <li class="incremental">正規表現は等価な有限オートマトンに変換可能.</li> + <li class="incremental">状態遷移を関数遷移に変換することで, コード主導のプログラムとなる..</li> + </ul> + </div> + <!-- PAGE --> + <div class="slide"> + <h1>本実装の特徴</h1> + <ul> + <li>生成系は<strong>Python</strong>で実装.</li> + <li><strong>連接</strong>, <strong>集合和</strong>, <strong>閉包</strong> の基本演算に対応.</li> + <li>DFAの状態遷移に対応した, 関数遷移を行うコードを生成.</li> + <img src="pix/flow.png" style="height: 7em;"/> + <li>マルチバイト文字: <strong>UTF-8</strong> に対応.</li> + </ul> + </div> + <!-- PAGE --> + <div class="slide"> + <h1>正規表現からDFAへの変換</h1> + <ul> + <li>正規表現を等価な<red>NFA</red>に変換.</li> + <li>NFAを部分集合構成法を用いて<red>DFA</red>に変換.</li> + <p>図: 正規表現"<blue>(A|B)*C</blue>"と等価なDFA</p> + <img src="pix/dfa.png" style="height: 7em;"/> + </ul> + </div> + <!-- PAGE --> + <div class="slide"> + <h1>DFA変換のコスト</h1> + <ul> + <li>変換のコストは, DFAの状態数に比例.</li> + <img src="pix/bench_translation.png" style="height: 12em;"/> + <li class="incremental">通常の正規表現の変換では<strong>数十~数百ms</strong>程度.</li> + </ul> + </div> + <!-- PAGE --> + <div class="slide"> + <h1>コード生成: <red>CbC</red> *</h1> + <ul> + <li></li> + </ul> + </div> + <!-- PAGE --> + <div class="slide"> + <h1>コード生成: <red>CbC</red> **</h1> + <ul> + <li>DFAの状態遷移をCbCのコードセグメントによる軽量継続で表現.</li> + <p>コード: 正規表現"<blue>(A|B)*C</blue>"から生成されたCbCコード</p> + <pre style="font-size: 0.6em;"> +__code state_0(unsigned char *s, unsigned char* cur,\ + unsigned char* buf, FILE *f, char* filename) { + switch(*s++) { + case 'A': + goto state_0(s, cur, buf, f, filename); + case 'B': + goto state_0(s, cur, buf, f, filename); + case 'C': + goto state_1(s, cur, buf, f, filename); + default: goto reject(s, cur, buf, f, filename); + } +} + +__code state_1(unsigned char *s, unsigned char* cur,\ + unsigned char* buf, FILE *f, char* filename) { + goto accept(s, cur, buf, f, filename); +} + </pre> + </ul> + </div> + <!-- PAGE --> + <div class="slide"> + <h1>比較対象: GNU grep</h1> + <ul> + <li>本実装と同様にDFAベースのマッチングを行う.</li> + <li>C言語による実装 -> DFAを構造体で構築.</li> + </ul> + </div> + <!-- PAGE --> + <div class="slide"> + <h1>ベンチマーク: vs GNU grep.</h1> + <ul> + <li>本実装により生成したCコードとGNU grep 2.6.3/2.5.4 の検索時間を計測.</li> + <li>生成コード, GNU grep は共にGCC 4.4.1(-O3) でコンパイル.</li> + <li> + 3つのパターンによるベンチマーク.<br/> + <table> + <tr><th><blue>fixed-string</blue></th><td>: 固定文字列</td></tr> + <tr><th><blue>simple-regex</blue></th><td>: 単純な正規表現</td></tr> + <tr><th><blue>complex-regex</blue></th><td>: 複雑な正規表現</td></tr> + </table> + </li> + <li class="incremental">ここでいう"複雑さ"とは, DFAに変換した時の分岐の多さで定義する.</li> + <!-- + <li>実験環境.</li><br/> + <table style="border: solid black 1px;"> + <tr> + <th style="border: solid black 1px;">CPU</th> + <td style="border: solid black 1px;">Intel Core i7 950 @3.0GHz</td> + </tr> + <tr style="border: solid black 1px;"> + <th style="border: solid black 1px;">Memory</th> + <td style="border: solid black 1px;">16GB</td> + </tr> + <tr style="border: solid black 1px;"> + <th style="border: solid black 1px;">Compiler</th> + <td style="border: solid black 1px;">GCC 4.4.1</td> + </tr> + <tr style="border: solid black 1px;"> + <th style="border: solid black 1px;">Text</th> + <td style="border: solid black 1px;">Wikipedia 日本語版全記事<br/>XML, UTF-8, 4.7GB (8000万行)</td> + </tr> + </table> + --> + </ul> + </div> + <!-- PAGE --> + <div class="slide"> + <h1>テストケース</h1> + <ul> + <li> + <strong>fixed-string</strong> - 固定文字列でのマッチング<br/> + パターン : "<blue>Wikipedia</blue>"<br/> + マッチ行数: 348936行 + </li> + <li> + <strong>simple-regex</strong> - 単純な正規表現でのマッチング<br/> + <span class="incremental">Wikipediaの記事のカテゴリタグ記述にマッチ</span><br/> + パターン : "<blue>^\*+ \[\[</blue>"<br/> + マッチ行数: 1503行 + </li> + <li> + <strong>complex-regex</strong> - 複雑な正規表現でのマッチング<br/> + パターン : "<blue>(Python|Perl|Pascall|Prolog|PHP|Ruby|Haskell|Lisp|Scheme)</blue>"<br/> + マッチ行数: 3439028行 + </li> + </ul> + </div> + <!-- PAGE --> + <div class="slide"> + <h1>ベンチマーク: 結果</h1> + <img src="pix/bench_grep.png" style="height: 12em;"/> + <ul> + <li>は</li> + </ul> + </div> + <!-- PAGE --> + <div class="slide"> + <h1>まとめ</h1> + <ul> + <li>生成系を開発効率に優れた言語であるPythonで実装することで, 少ない記述量で正規表現評価器を実装した.</li> + <table> + <tr><th><blue>本実装 (Python)</blue></th><td>: 3000行 (テスト含む全コード)</td></tr> + <tr><th><blue>GNU grep (C)</blue></th><td>: 15000行 (コアのみ)</td></tr> + </table> + <li>最終的に得られた正規表現評価器の性能は, GNU grep に勝る部分もあり, 性能も非常に高いものであった.</li> + </ul> + </div> + <!-- PAGE --> + <div class="slide"> + <h1>今後の課題</h1> + <ul> + <li>固定文字列フィルタリング(Boyer-Moore等)の実装.</li> + <li>バックリファレンスの実装.</li> + </ul> + </div> + <div class="slide"> + <h1>予想される質問</h1> + <ul> + <li>CbCコード生成の利点(Cでは? 他の静的言語では?)</li> + <li>正規表現->DFA変換のオーバーヘッド</li> + <li>コンパイルのオーバーヘッド</li> + </ul> + </div> + </div> + </body> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/primer.html Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,187 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" + "http://www.w3.org/TR/REC-html40/loose.dtd"> +<html> +<head> +<title>A Basic Primer in Using S5</title> +<!--#include virtual="/inc/head.html" --> +<link rel="stylesheet" type="text/css" href="s5.css" media="screen"> +<style type="text/css" media="all"> +.figure img {display: block; border: 1px solid; border-bottom: 3px double;} +.figure b {border: 1px solid; border-width: 0 0 1px 1px; + padding: 0.25em 0.25em 0; font-style: italic; font-size: smaller;} +#main div.aside {width: 33%; float: right; + margin: 0 -2em 1.5em 1em; padding: 0 0 1em; + border: 1px solid #999; + background: #EAEAF0; color: #222430;} +#main div.aside h4 {margin: 0 0 0.5em; padding: 1em 1em 0; + border-bottom: 1px solid #BABAC0;} +#main div.aside h5 {margin: 1em 1.5em 0.2em; font-style: italic; line-height: 1.1;} +#main div.aside p {margin: 0 1.5em; line-height: 1.1;} +</style> +</head> +<body id="www-meyerweb-com" class="tools"> + +<!--#include virtual="/inc/page-top.html" --> + +<h2>A Basic Primer in Using S5</h2> + +<p> +For a newcomer, creating a presentation in S5 may seem a bit daunting at first. Don't panic! Writing your own presentation is very, very easy. In order to help smooth the way, here's a short primer on what to change and what to leave alone in an S5 presentation file. +</p> + + +<h3>First steps</h3> +<p> +First, download the <a href="s5-blank.zip">S5 blank template archive</a>. This is a 26KB ZIP archive that contains everything you'll need to create a basic slide show: the presentation file itself, the style sheets that make it look pretty, and the JavaScript that drives the actual slide showing (and hiding). +</p> +<p> +Once you've downloaded the archive and uncompressed it, you should find two things: a file named <tt>s5-blank.html</tt> and a folder (directory) called <tt>ui</tt>. Inside that folder are all the CSS and JavaScript bits that make the slide show work. We're not going to mess with those; if you want more information on them, see the file map, or ponder <a href="s5-intro.html#slide7">slide 7 of the introductory slide show</a>. All we're going to do is edit the file <tt>s5-blank.html</tt>. Go ahead and load it up into your favorite editor, whether that's Dreamweaver, GoLive, Notepad, TopStyle, or BBEdit. I'll use BBEdit. +</p> + + +<h3>Boot to the head</h3> +<p> +The first part of the presentation file, at least the part after the <tt>DOCTYPE</tt> and the <tt><html></tt> tag, is the <tt>head</tt> element, shown in Figure 1. +</p> + +<div class="figure"> +<img src="primer/s5-primer01.png" alt=""> +<b>Figure 1. The first part of the presentation file.</b> +</div> + +<p> +For the most part, you shouldn't have to ever touch this part of the file. In fact, it's better to avoid it. If you changed any of the <tt>link</tt> elements, for example, you might break the slide show! So you'll want to just skip past it... except for one thing. See the <tt>title</tt> element? Change its contents from "[slide show title]" to the title of the slide show. So if you're doing a presentation on the benefits of respiration, you might call the slide show "Breathing Easy: Why Air Is Good For You". Go ahead and change the <tt>title</tt> contents to say that, as shown in Figure 2. +</p> + +<div class="figure"> +<img src="primer/s5-primer02.png" alt=""> +<b>Figure 2. Filling in the title.</b> +</div> + +<p> +Other than that, you don't need to make any changes to this part of the file. Let's move on to the next part. +</p> + + +<h3>Slide headers and footers</h3> +<p> +If you move downward in the presentation file, you'll find a <tt>div</tt> with an <tt>id</tt> of <tt>layout</tt>. Inside that <tt>div</tt> are a number of slide components; these appear on every slide in the slide show. This is where we find things like the header, footer, slide controls, and so forth, as shown in Figure 3. +</p> + +<div class="figure"> +<img src="primer/s5-primer03.png" alt=""> +<b>Figure 3. The header, footer, and other slide components.</b> +</div> + +<p> +There are really only two parts we need to worry about: the two sets of bracketed text. Replace the first one with "Anytown, USA &#8226; 1 August 2005". (Although you can certainly fill in today's date if you prefer; that just happens to be the date on which I updated this primer.) For the second bit, just fill in the slide show title. You can copy it from the <tt>title</tt> element at the top of the file, if you want to save some keystrokes. +</p> + +<p> +A few words on the XHTML structures seen here. Many of them are necessary for the slide show to work, and should not be altered; an example is <tt><div id="controls"></div></tt>. Inside the header and footer, however, you can insert whatever XHTML and content you like. The only real restriction is that these are expected to be fairly small, because the larger the header and footer, and less space there will be for slide content. If you change the markup inside the header and footer, you may also have to modify the CSS files to handle whatever you put in there. We aren't going to get into all that now. Let's just leave things as-is and continue on to our first actual slide. +</p> + + +<h3>The title slide</h3> +<p> +Typically, the first slide in the slide show will be a title slide. This doesn't have to be the case, of course; you can just jump right into the slides without having a title card. Most people prefer having one, though. The template contains a typical title slide, which is highlighted in Figure 4. +</p> + +<div class="figure"> +<img src="primer/s5-primer04.png" alt=""> +<b>Figure 4. The first slide's markup.</b> +</div> + +<div class="aside"> +<h4>XOXO Differences</h4> +<p> +If you're writing an XOXO-based slide show, the markup here will be a little different: the presentation <code>div</code> will be an <code>ol</code> with a different <code>class</code> value, and all the slides will be <code>li</code> elements. See the page <a href="xoxo-structure-min.html">Minimal S5+XOXO Structure</a> for details. +</p> +</div> + +<p> +So let's replace the bracketed text with our own information. For the slide show title and subtitle, let's actually break up the title we've been using into two parts: "Breathing Easy" and "Why Air Is Good For You". Fill in these bits for the title and subtitle, respectively. Then, for the author name and affiliation, use your own name and employer (or whatever affiliation you'd prefer to admit). I'll use my own name and affiliation in creating the figures, such as Figure 6. +</p> + +<p> +Having done that, let's take a peek at how the slide show is going. Load the file <tt>s5-blank.html</tt> into a Web browser such as Firefox, Safari, or Internet Explorer. Those aren't the only browsers you can use; in general, if it was released in the 21st Century (by the Gregorian Calendar), then it's probably okay to use. You should immediately see the title slide appear. A scaled-down version appears in Figure 5, along with some highlight boxes. +</p> + +<div class="figure"> +<img src="primer/s5-primer05.png" alt=""> +<b>Figure 5. The title slide (annotated).</b> +</div> + +<p> +Box #1 marks the footer content, which was the first thing you edited in the slide show. Box #2 surrounds the content of the title slide, which you just now edited. Box #3 points out the slide controls, which are automatically created by the JavaScript when the presentation is loaded. +</p> + +<p> +Pretty easy so far, eh? Just wait: it gets even easier. +</p> + + +<h3>Creating a slide</h3> + +<p> +Again, move down in <tt>s5-slide.html</tt>. After the first slide, the one we made a title slide, you'll find another slide. It's shown in Figure 6. +</p> + +<div class="figure"> +<img src="primer/s5-primer06.png" alt=""> +<b>Figure 6. The first slide after the title slide.</b> +</div> + +<p> +At this point, you've probably figured out what to do. Just replace the bracketed text with your own content, and there you go: you have a slide. So the title might be "An Introduction to Air" and the five points would be various facts about air, or perhaps would be a preview summary of what the rest of the slide show will discuss. Since most slides are just a set of bullet points, using an unordered list is definitely the way to go. You can have a different number of points than five, of course, but remember that if the slide gets too long, content will disappear behind the footer. +</p> +<p> +Now, after the list, see the <tt>div</tt> with a <tt>class</tt> of <tt>handout</tt>? That's where you put any extra notes or information related to the slide content that should appear in printed handouts, but not go on the slide when it's given as a presentation. You could put URLs for more information, include code snippets, or anything else that would be useful to someone looking at the handout. If a slide doesn't have any handout material, you can delete the <tt>div</tt>, or else leave it in place but empty—it's up to you. +</p> +<p> +Go ahead and put something in the handout section for the current slide, then reload the presentation file in a Web browser. Once the title slide comes up, advance to the next slide by pressing the space bar on your keyboard (or hitting page down, right arrow, or down arrow; or by clicking the mouse button while the pointer is somewhere over the slide). You should see something like what's in Figure 7. +</p> + +<div class="aside"> +<h4>Get Keyed Up</h4> +<p> +For a complete listing of the keyboard controls in S5, see the <a href="features.html">Features page</a>. +</p> +</div> + +<div class="figure"> +<img src="primer/s5-primer07.png" alt=""> +<b>Figure 7. Viewing the new slide in a browser.</b> +</div> + +<p> +Notice that the handout material doesn't appear in the slide. If you were to print out <tt>s5-blank.html</tt>, though, it would show up at the end of this slide. +</p> +<p> +In order to create a new slide, you can either type in the markup to create a new one, or (more conveniently) copy the slide you just finished, paste it into the file after the last slide, and change the content. There is no defined limit to the number of slides in a given presentation, so you shouldn't have any problems with running out of space. (Your audience might have problems if you subject them to a 100-slide presentation, though.) +</p> + + +<h3>Miscellaneous Notes</h3> + +<ul> +<li>It isn't necessary to have every slide be a list of bullet points. You can instead drop in an image, a quote, or anything else that strikes you as useful. See <a href="s5-intro.html#slide7">slide 7 of "S5: An Introduction"</a> for an example of how a large image might be included. Then advance to the next slide to see how several small images can be included. What you put into a slide, and how you structure it, is largely up to you.</li> +<li>Remember that if a slide gets too long, content will disappear behind the footer! So if you're planning to project at 1024x768 and have an image that's 1000 pixels tall, it isn't going to fit on a slide (unless you scale it yourself). If you have too many points on a slide, consider breaking it up into two slides with the same title. You can also edit the CSS to make fonts smaller and adjust content spacing, if you like, but that isn't nearly as easy.</li> +<li>On a related note, if you assume one resolution and then get another, things can go seriously awry. Be prepared to edit the CSS in such cases. (The usual workaround for this situation is to change the <code>font-size</code> of the <code>body</code> element, although in some browsers you can simply scale the text size from the keyboard.)</li> +<li>You don't have to leave the presentation file name as <tt>s5-blank.html</tt>. You can rename to anything you like, such as <tt>talk.html</tt> or <tt>preso.html</tt>.</li> +<li>Changing the theme involves replacing the default files with new ones. Creating your own theme involves writing new style sheets. Both are more complex topics, best saved for another day.</li> +</ul> + +<h3>In Summary</h3> +<p> +As you've seen in this quick primer, creating your own presentation is pretty simple. In the majority of cases, all you need is to have a short unordered list in each slide, but you can certainly include other kinds of material if you like. +</p> +<p> +Hopefully this primer has helped you get started creating your own presentation. If there's anything missing or unclear, please <a href="http://meyerweb.com/eric/">let me know</a>. +</p> + + +<!--#include file="inc/extra.html" --> +<!--#include virtual="/inc/page-end.html" --> +</body> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/s5-blank.html Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,66 @@ +<!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> +<title>S5: An Introduction</title> +<!-- metadata --> +<meta name="generator" content="S5" /> +<meta name="version" content="S5 1.1" /> +<meta name="presdate" content="20050728" /> +<meta name="author" content="Eric A. Meyer" /> +<meta name="company" content="Complex Spiral Consulting" /> +<!-- configuration parameters --> +<meta name="defaultView" content="slideshow" /> +<meta name="controlVis" content="hidden" /> +<!-- style sheet links --> +<link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" /> +<link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" /> +<link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" /> +<link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" /> +<!-- S5 JS --> +<script src="ui/default/slides.js" type="text/javascript"></script> +</head> +<body> + +<div class="layout"> +<div id="controls"><!-- DO NOT EDIT --></div> +<div id="currentSlide"><!-- DO NOT EDIT --></div> +<div id="header"></div> +<div id="footer"> +<h1>[location/date of presentation]</h1> +<h2>[slide show title here]</h2> +</div> + +</div> + + +<div class="presentation"> + +<div class="slide"> +<h1>[slide show title here]</h1> +<h3>[name of presenter]</h3> +<h4>[affiliation of presenter]</h4> +</div> + + +<div class="slide"> +<h1>[slide title]</h1> +<ul> +<li>[point one]</li> +<li>[point two]</li> +<li>[point three]</li> +<li>[point four]</li> +<li>[point five]</li> +</ul> +<div class="handout"> +[any material that should appear in print but not on the slide] +</div> +</div> + + +</div> + +</body> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/s5-intro.html Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,215 @@ +<!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> +<title>S5: An Introduction</title> +<!-- metadata --> +<meta name="generator" content="S5" /> +<meta name="version" content="S5 1.1" /> +<meta name="presdate" content="20050728" /> +<meta name="author" content="Eric A. Meyer" /> +<meta name="company" content="Complex Spiral Consulting" /> +<!-- configuration parameters --> +<meta name="defaultView" content="slideshow" /> +<meta name="controlVis" content="hidden" /> +<!-- style sheet links --> +<link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" /> +<link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" /> +<link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" /> +<link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" /> +<!-- embedded styles --> +<style type="text/css" media="all"> +.imgcon {width: 525px; margin: 0 auto; padding: 0; text-align: center;} +#anim {width: 270px; height: 320px; position: relative; margin-top: 0.5em;} +#anim img {position: absolute; top: 42px; left: 24px;} +img#me01 {top: 0; left: 0;} +img#me02 {left: 23px;} +img#me04 {top: 44px;} +img#me05 {top: 43px;left: 36px;} +</style> +<!-- S5 JS --> +<script src="ui/default/slides.js" type="text/javascript"></script> +</head> +<body> + +<div class="layout"> +<div id="controls"><!-- DO NOT EDIT --></div> +<div id="currentSlide"><!-- DO NOT EDIT --></div> +<div id="header"></div> +<div id="footer"> +<h1>S5 Testbed</h1> +<h2>Your computer • Today's date</h2> +</div> + +</div> +<div class="presentation"> + +<div class="slide"> +<h1>S5: An Introduction</h1> +<h3>Eric A. Meyer</h3> +<h4><a href="http://www.complexspiral.com/">Complex Spiral Consulting</a></h4> +</div> + + +<div class="slide"> +<h1>What Is S5?</h1> +<ul> +<li>It's a <strong>S</strong>imple <strong>S</strong>tandards-based <strong>S</strong>lide <strong>S</strong>how <strong>S</strong>ystem</li> +<li>One XHTML document provides all of the slide show's content</li> +<li>CSS handles the layout and look of the slides</li> +<li>JavaScript handles the dynamic aspects of the show</li> +<li>That's all there is to it!</li> +</ul> +</div> + + +<div class="slide"> +<h1>Operatic Origins</h1> +<ul> +<li>Opera 4 introduced <a href="http://www.opera.com/support/tutorials/operashow/">Opera Show</a>, a projection-mode style sheet technology</li> +<li>Allows a single XHTML document to be turned into a PowerPoint-like slide show</li> +<li>Adding screen and print style sheets allows for multi-medium views of a single document</li> +<li>Highly efficient, but highly browser centric...</li> +</ul> +</div> + + +<div class="slide"> +<h1>Expanding The Field</h1> +<ul> +<li>When Opera 7.5 for OS X came out, the banner ads persisted in projection mode</li> +<li><a href="http://tantek.com/" rel="friend colleague met">Tantek Çelik</a> created a JavaScript-driven slide show technique that worked on multiple browsers +<ul> +<li>Unfortunately, it required each slide to be ID'ed ahead of time, making additions and rearrangement difficult</li> +<li>Navigation was only linear; no way to jump to an arbitrary slide</li> +<li>There was also no facility to "switch off" the slide show styles short of killing all CSS</li> +</ul> +</li> +<li>Motive and opportunity combined to point the way...</li> +</ul> +</div> + + +<div class="slide"> +<h1>Where We Are Now</h1> +<ul> +<li>S5 builds on Tantek's scripts and ideas, with input and ideas from several other people</li> +<li>Each slide is enclosed in a classed element; IDs are dynamically assigned via JavaScript</li> +<li>Navigation menu is automatically built at run time</li> +<li>The S5 format is compatible with <a href="http://my.opera.com/community/dev/operashow/documentation/doc_fileformat.html">Opera Show Format 1.0</a>, making it easy to move slides between the two formats as needed</li> +<li>S5 can also run slide shows based on <a href="http://microformats.org/wiki/XOXO">XOXO</a></li> +</ul> +</div> + + +<div class="slide"> +<h1>How It Works</h1> +<ul> +<li>Controls are... +<ul> +<li>Next slide: Space bar, return, right arrow, down arrow, page down, click anywhere in slide that isn't in the control area (lower right corner), click "arrow" in lower right corner, accesskey "X"</li> +<li>Previous slide: Up arrow, left arrow, page up, click "arrow" in lower right corner, accesskey "Z"</li> +<li>Toggle the slide styles: Click on the toggle button (to the left of the arrows), press "t", accesskey "T"</li> +</ul> +...<a href="http://meyerweb.com/eric/tools/s5/features.html#controlchart" rel="external">plus more</a>! +</li> +<li>To invoke the navigation menu: mouse into the lower right corner of the slide (below the navigation arrows)</li> +</ul> +</div> + + +<div class="slide"> +<h1>The Advantages</h1> +<ul> +<li>With one file, you get a slide show, a printable outline, and a screen presentation</li> +<li>Files are incredibly lightweight and compress easily</li> +<li>Thanks to being semantic XHTML, slideshow files are also highly accessible</li> +<li>New slide themes can be created simply by writing new style sheets</li> +<li>Unlike Opera Show, which has all of the above advantages, S5 works in multiple browsers</li> +</ul> +</div> + + +<div class="slide"> +<h1>S5 Default File Structure</h1> +<p style="text-align: center;"> +<img src="pix/s5filemap.png" alt="" title="At a Glance" /> +</p> +</div> + + +<div class="slide"> +<h1>S5 Themes</h1> +<p style="width: 520px; margin: 0 auto; text-align: center;"> +<img src="pix/S501.jpg" alt="" title="Default" /> +<img src="pix/S502.jpg" alt="" title="I18N" /> +<img src="pix/S503.jpg" alt="" title="Blue" /> +<img src="pix/S504.jpg" alt="" title="Flower" /> +(just a sampling) +</p> +</div> + + +<div class="slide"> +<h1>Features New to 1.1</h1> +<ul class="incremental"> +<li>Incremental display of slide content</li> +<li>Font scaling based on window size</li> +<li>Support for PNG alpha channels in all supporting browsers, including IE/Win</li> +<li>Ability to jump to any slide, or skip a number of slides, via keyboard commands</li> +</ul> +</div> + +<div class="slide"> +<h1>Incremental Animation</h1> +<ul> +<li>A demonstration of just one of the many ways to accomplish simple animation-like effects <small>(using a diagram from <a href="http://gmpg.org/xfn/and/" rel="external">"XFN and..."</a>)</small></li> +</ul> +<p class="imgcon" id="anim"> +<img src="pix/mememe01.png" id="me01" alt="" /> +<img src="pix/mememe02.png" alt="" id="me02" class="incremental" /> +<img src="pix/mememe03.png" alt="" id="me03" class="incremental" /> +<img src="pix/mememe04.png" alt="" id="me04" class="incremental" /> +<img src="pix/mememe05.png" alt="" id="me05" class="incremental" /> +</p> +</div> + +<div class="slide"> +<h1>Current Limitations</h1> +<ul> +<li>Only one author can be listed in the metadata</li> +<li>Opera falls back to use OperaShow; thus no extras (like the navigation menu or progress indication) are available</li> +<li>Images are not scaled along with the text when the window size changes</li> +</ul> +</div> + + +<div class="slide"> +<h1>Open To The Public</h1> +<ul> +<li>S5 1.1 is released under an explicit Public Domain license</li> +<li>Contributors to S5 <strong>must</strong> be willing to accept those terms +<ul> +<li>In other words: if you submit a contribution, you are agreeing to abide by and place your contributions into the Public Domain along with S5</li> +<li>On the other hand, anyone can freely use S5 for their own presentations or modify S5 to suit their needs</li> +</ul></li> +</ul> +</div> + + +<div class="slide"> +<h1>In Summary</h1> +<ul> +<li>With minimal scripting, we have recreated and improved upon a (currently) browser-specific technology, making it cross-browser in the process</li> +<li>New themes are just a matter of writing a new style sheet</li> +<li>The S5 format is OSF 1.0 and XOXO compatible</li> +<li>S5 is a very flexible and lightweight slide show system available for anyone to use</li> +</ul> +</div> + +</div> + +</body> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/src/regllvm_abstract.txt Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,9 @@ +新屋良磨 + +Subject +LLVMを用いた正規表現コンパイラの実装と検証 +Implementation and Evaluation of Regular Expression Compiler using LLVM + +内容 +正規表現は等価なオートマトンに変換できる. 当研究室では Continuation based C という状態遷移記述に適したCの下位言語を提案している. +本研究では, 文字列として与えられた正規表現から,CbCで記述された状態遷移ベースの正規表現マッチャの生成, 及びコンパイラ基盤LLVMを利用したJITコンパイルによるマッチャの実行バイナリを生成するコンパイラを実装し、マッチングにおけるベンチマークを行い性能を評価する。
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/structure-min.html Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,112 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" + "http://www.w3.org/TR/REC-html40/loose.dtd"> +<html> +<head> +<title>Minimal S5 Structure</title> + +<style type="text/css" media="all"> +pre {padding: 1em 0.2em; border: 1px dotted gray; border-width: 1px 0;} +</style> +</head> +<body id="www-meyerweb-com" class="tools"> + + + +<h2>Minimal S5 Structure</h2> + +<p> +This document provides the details of the S5 markup structure. This will first present the minimum required structure, and then discuss optional bits of markup. Note that S5 1.1 is intentionally compatible with <a href="http://my.opera.com/community/dev/operashow/documentation/doc_fileformat.html" title="Opera Show Format 1.0"><acronym title="Opera Show Format">OSF</acronym> 1.0</a>, which will be referred to at times in this document. It is also capable of conforming to the <a href="http://microformats.org/wiki/xoxo">XOXO microformat</a>. +</p> + +<h3>The Bare Minimum</h3> +<p> +What follows is an example of the absolute minimum markup required to be considered a valid S5 file. The italicized text indicates technically optional but strongly recommended content. +</p> + +<pre> +<!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> +<title><i>[slide show title]</i></title> +<meta name="version" content="S5 1.1" /> +<link rel="stylesheet" href="ui/slides.css" type="text/css" + media="projection" id="slideProj" /> +<link rel="stylesheet" href="ui/opera.css" type="text/css" + media="projection" id="operaFix" /> +<link rel="stylesheet" href="ui/print.css" type="text/css" + media="print" id="slidePrint" /> +<script src="ui/slides.js" type="text/javascript"></script> +</head> +<body> + +<div class="layout"> + +<div id="currentSlide"></div> +<div id="header"></div> +<div id="footer"> +<div id="controls"></div> +</div> + +</div> +<div class="presentation"> + +<div class="slide"> +<h1><i>[slide title]</i></h1> +</div> + +</div> + +</body> +</html> +</pre> + + +<h4>The first lines</h4> +<p> +The first lines of an S5 presentation file <strong>must</strong> contain an XHTML 1.0 Strict DOCTYPE declaration and a properly namespaced <code>html</code> element. These are both <strong>required</strong>. Although the S5 CSS and JavaScript is compatible with any well-formed HTML or XHTML document, XHTML 1.0 Strict was chosen in order to be compatible with OSF 1.0. +</p> +<p> +Because of the compatibility problems present in IE6/Win, the XML prolog should <strong>not</strong> be placed at the top of the document. +</p> + + +<h4>The <code>head</code> element</h4> + +<p> +In addition to the title of the slide show, the <code>head</code> element <strong>must</strong> contain a <code>meta</code> element that describes the file format. This is OSF 1.0 compatible. +</p> +<p> +The <code>head</code> element also <strong>must</strong> contain the <code>link</code> elements and <code>script</code> element shown. The JavaScript file is what drives the labelling of slides, the transition from slide to slide, the creation of the navigation menu, and more. The CSS files, on the other hand, are required to set things so that the JS will work, and also to make the slides look pretty. +</p> +<p> +As of S5 1.1, CSS and JavaScript should not be embedded into the document. It is expected that a future version of S5 will change to allow embedded style sheets and scripts. +</p> + + +<h4>The <code>body</code>'s beginning</h4> + +<p> +At the very beginning of the <code>body</code> is the "layout" <code>div</code>. This is the same structure found in OSF 1.0, and can accept the same elements. S5 adds the markup shown above, which <strong>must</strong> be included in the document. The "controls" <code>div</code> is where the slide show navigation controls appear, and "currentSlide" is the spot where the "slide X of Y" information appears. The "header" and "footer" <code>div</code>s <strong>must</strong> be included as well. Authors are free to add markup and content to the "header" and "footer" <code>div</code>s, but not to remove them entirely. +</p> + + +<h4>The presentation</h4> + +<p> +As in OSF 1.0, all of the slides are contained within a "presentation" <code>div</code>. It begins immediately after the close of the "layout" <code>div</code> and contains one or more slides. +</p> +<p> +Every slide in the presentation file <strong>must</strong> be enclosed in a <code>div</code> with a <code>class</code> containing the word <code>slide</code> in its value. While a slide <code>div</code> can be given an <code>id</code>, the value will be overwritten by the S5 JavaScript routines. Thus in S5, <code>id</code> attributes on slide <code>div</code>s are discouraged. +</p> +<p> +The title of a slide should be contained by an <code>h1</code> element, as in OSF 1.0. In S5, authors are strongly encouraged to have a slide title element, even if its content is empty. This will help keep the navigation menu working as expected. The markup of content for each slide is up to the individual author. Blank slides are certainly permitted, although would seem to be sort of useless. +</p> + + + + + + +</body> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/structure-ref.html Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,395 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" + "http://www.w3.org/TR/REC-html40/loose.dtd"> +<html> +<head> +<title>S5 1.1 Reference</title> + +<style type="text/css" media="all"> + +h3 {margin-top: 3em; padding: 0.33em 0.2em 0.1em; + border: 1px solid gray; border-width: 1px 0;} + +p code, dd code {color: #333; background: #EEE; padding: 0 0.33em;} +pre, code {font: 1em Courier, monospace; letter-spacing: -0.05em;} +pre {padding: 0.33em 1em; font-weight: bold; color: #500;} +pre.example {color: #333; font-weight: normal;} + + +pre i, dt i {font-weight: normal; color: #AAA;} +p i {color: #666;} +p {margin: 1em;} + +dl {margin: 1em 1em 1.5em 2em;} +dt {margin-top: 1.5em; font: 1em Courier, monospace; + letter-spacing: -0.05em; white-space: pre;} +dd {margin: 0.5em 0 0 2.5em;} +dl dl {margin: 0.5em 1em 1em 0.5em;} +dl dl dt {margin-top: 0.75em;} +dl dl dd {margin: 0.25em 0 0 1.5em;} + +pre > span, +.optional {color: #337; font-weight: normal;} +.recommended {color: #000; font-weight: bold;} +.required {color: #500; font-weight: bold;} +.generated {color: #666; font-style: italic;} + +dt[class] {border-left: 1em solid; padding-left: 0.66em;} +dt.required {border-color: #500; color: #500;} +dt.optional {border-color: #77B;} +dt.recommended {border-color: gray;} +dt.generated {border-color: #CCC;} +dt.generated + dd {color: #999;} +dt.required + dd:before {content: "Required. "; font-weight: bold; +color: #500;} +dt.optional + dd:before {content: "Optional. "; font-style: italic; +color: #333;} +dt.recommended + dd:before {content: "Recommended. "; + color: #000; font-weight: bold;} +dt.generated + dd:before {content: "[generated] "; + color: #666;} + +hr {margin-top: 5em;} + +</style> +</head> +<body id="www-meyerweb-com" class="tools"> + + + + +<h2>S5 1.1 Reference</h2> + +<p> +This document provides a full reference to the S5 presentation file format. The following conventions are used: +</p> + +<ul> +<li>Content <span class="required">styled in this manner</span> indicates something that is required by the S5 1.1 format.</li> +<li>Content <span class="recommended">styled in this manner</span> indicates something that is recommended in the S5 1.1 format.</li> +<li>Content <span class="optional">styled in this manner</span> indicates something that is optional in the S5 1.1 format.</li> +<li>Content <span class="generated">styled in this manner</span> indicates something that is generated by the S5 1.1 JavaScript. These are not provided in the code listings.</li> +</ul> + +<p> +S5 1.1 is compatible with the <a href="http://my.opera.com/community/dev/operashow/documentation/doc_fileformat.html">Opera Show Format 1.0</a> (hereafter OSF 1.0). It is also capable of conforming to the <a href="http://microformats.org/wiki/xoxo">XOXO microformat</a>. +</p> +<p> +A complete example file can be found at the end of this document. +</p> + + +<h3>Document Skeleton</h3> +<pre> +<!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> +</body> + +</html> +</pre> + +<p> +This is the basic top-level skeleton for an article file. Most of these top-level elements all have descendent elements, which are explained by the rest of this document. +</p> + +<dl> + +<dt class="required"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></dt> +<dd>The document type used for S5 slide shows. XHTML 1.0 Strict was chosen to allow compatibility with OSF 1.0.</dd> + +<dt class="required"><html xmlns="http://www.w3.org/1999/xhtml"> </html></dt> +<dd>The root element of the document, which contains pretty much everything else. Required by the DOCTYPE.</dd> + +<dt class="required"><head> </head></dt> +<dd>This element contains the header information for the presentation, such as title of the presentation, metadata about the presentation's author, links to style sheets and scripts, and so on.</dd> + +<dt class="required"><body> </body></dt> +<dd>The actual body of the presentation, containing all of the content and components that will be displayed to the viewer. Not required by the DOCTYPE, but required for S5 compliance.</dd> + +<dt class="required"><div class="layout"> </div></dt> +<dd>This element contains all of the bits of layout that appear on every slide, including the header and footer and the navigation controls.</dd> + +<dt class="required"><div class="presentation"> </div></dt> +<dd>A container for all of the individual slides.</dd> + +</dl> + + +<h3><code>head</code> — The Document's Metadata</h3> +<pre> +<head> +<title><i>[slide show title]</i></title> +<meta name="version" content="S5 1.1" /> +<span class="optional"><meta name="generator" content="<i>[generating program]</i>" /> +<meta name="presdate" content="<i>[presentation date]</i>" /> +<meta name="author" content="<i>[author's name]</i>" /> +<meta name="company" content="<i>[author's employer]</i>" /> +<meta http-equiv="Content-Type" content="<i>[content-type]</i>" /> +<meta name="defaultView" content="<i>[value]</i>" /> +<meta name="controlVis" content="<i>[value]</i>" /></span> +<link rel="stylesheet" href="v11b1/slides.css" type="text/css" media="projection" id="slideProj" /> +<link rel="stylesheet" href="v11b1/outline.css" type="text/css" media="screen" id="outlineStyle" /> +<link rel="stylesheet" href="v11b1/print.css" type="text/css" media="print" id="slidePrint" /> +<link rel="stylesheet" href="v11b1/opera.css" type="text/css" media="projection" id="operaFix" /> +<script src="ui/slides.js" type="text/javascript"></script> +</head> +</pre> + +<p> +intro +</p> + +<dl> + +<dt class="required"><title><i>[slide show title]</i></title></dt> +<dd>Contains the title of the presentation.</dd> + +<dt class="required"><meta name="version" content="S5 1.1" /></dt> +<dd>Provides the exact markup format being used for the presentation file. Copied from OSF 1.0.</dd> + +<dt class="optional"><meta name="generator" content="<i>[generating program]</i>" /></dt> +<dd>Indicates the tool that was used to create the presentation file. If a tool was used, this element is <strong>required</strong>. If the presentation was authored by hand, the value can be set to the author's name or the text editor they used; otherwise, the element can be omitted. Copied from OSF 1.0.</dd> + +<dt class="optional"><meta name="presdate" content="<i>[presentation date]</i>" /></dt> +<dd>The date on which the presentation was (or is to be) delivered. Copied from OSF 1.0.</dd> + +<dt class="optional"><meta name="author" content="<i>[author's name]</i>" /></dt> +<dd>The name of the presentation's primary author. There is currently no ability to designate secondary authors. Copied from OSF 1.0.</dd> + +<dt class="optional"><meta name="company" content="<i>[author's employer]</i>" /></dt> +<dd>The company for which the primary presenter works. This could be more broadly construed to be the author's primary affiliation, whether or not it is a corporate entity. Copied from OSF 1.0.</dd> + +<dt class="optional"><meta http-equiv="Content-Type" content="<i>[content-type]</i>" /></dt> +<dd>Indicates the presentation file's content type. One possible value is <code>application/xhtml+xml;charset=utf-8</code>.</dd> + +<dt class="optional"><meta name="defaultView" content="<i>[value]</i>" /></dt> +<dd>Sets the initial view for the presentation using one of two values: <code>slideshow</code> and <code>outline</code>. The default value is <code>slideshow</code>.</dd> + +<dt class="optional"><meta name="controlVis" content="<i>[value]</i>" /></dt> +<dd>Sets the default presentation of the controls to be either <code>visible</code> or <code>hidden</code>. The default value is <code>visible</code>.</dd> + +<dt class="required"><link rel="stylesheet" href="ui/slides.css" type="text/css" media="projection" id="slideProj" /></dt> +<dd>This links to the CSS that drives the visual presentation of the slide show. The referenced file consists of three <code>@import</code> directives that point to still other style sheets; see the <a href="filemap.html">file map</a> for more details.</dd> + +<dt class="required"><link rel="stylesheet" href="ui/outline.css" type="text/css" media="print" id="outlineStyle" /></dt> +<dd>This links to the style sheet used to present the outline view of the slide show.</dd> + +<dt class="required"><link rel="stylesheet" href="ui/print.css" type="text/css" media="print" id="slidePrint" /></dt> +<dd>This links to the print-medium style sheet, which contains directives that format the presentation for printing.</dd> + +<dt class="required"><link rel="stylesheet" href="ui/opera.css" type="text/css" media="projection" id="operaFix" /></dt> +<dd>This links to the style sheet that allows Opera to run the slide show through Opera Show.</dd> + +<dt class="required"><script src="ui/slides.js" type="text/javascript"></script></dt> +<dd>This references the JavaScript file that make the slide show work.</dd> + +</dl> + + +<h3>Layout Information</h3> + +<pre> +<div class="layout"> + + <div id="controls"></div> + <div id="currentSlide"></div> + <div id="header"><i>[any header content]</i></div> + <div id="footer"><i>[any footer content]</i></div> + <span class="optional"><div class="topleft"><i>[top left layout bit]</i></div> + <div class="topright"><i>[top right layout bit]</i></div> + <div class="bottomleft"><i>[bottom left layout bit]</i></div> + <div class="bottomright"><i>[bottom right layout bit]</i></div></span> + +</div> +</pre> + +<dl> + +<dt class="required"><div id="controls"></div></dt> +<dd> +This is the structural hook into which the slide navigation controls are filled in by the JavaScript. This includes the popup navigation menu, the forward/backward links, and the "style toggle" link. If no controls are desired, leave the markup in place and suppress its display via CSS, although doing so is <strong>strongly</strong> discouraged. It is strongly recommended that this element be left unfilled, since any content in the XHTML file will be overwritten by the JavaScript. +The markup generated by the JavaScript includes a few elements: + +<dl> +<dt class="generated"><form id="controlForm"> </form></dt> +<dd> +This element encloses all the of the slide controls. Within it are two <tt>div</tt> elements, each of which contains the actual controls. + +<dl> +<dt class="generated"><div id="navLinks"> </div></dt> +<dd> + +<dl> +<dt class="generated"><a id="toggle">&#216;</a></dt> +<dd>The link used to switch the slide styles off and on.</dd> +<dt class="generated"><a id="prev">&laquo;</a></dt> +<dd>The link used to move to the previous slide.</dd> +<dt class="generated"><a id="next">&raquo;</a></dt> +<dd>The link used to move to the next slide.</dd> +</dl> + +</dd> +<dt class="generated"><div id="navList"> </div></dt> +<dd> + +<dl> +<dt class="generated"><select id="jumplist"></select></dt> +<dd>The foundation of the slide navigation list. The JavaScript generates a number of <tt>option</tt> elements within this <tt>select</tt>.</dd> +</dl> + +</dd> +</dl> + +</dd> + +<dt class="required"><div id="currentSlide"></div></dt> +<dd>This is the structural hook into which the current progress indicator (e.g., "5 / 21") is filled in by the JavaScript. If no progress information is desired, leave the markup in place and suppress its display via CSS. It is strongly recommended that this element be left unfilled, since any content in the XHTML file will be overwritten by the JavaScript. +The markup generated by the JavaScript includes three elements: + +<dl> +<dt class="generated"><span id="csHere"><i>[current slide number]</i></span></dt> +<dd>The number of the slide currently being displayed.</dd> +<dt class="generated"><span id="csSep"><i>/</i></span></dt> +<dd>The separator character between the current slide number and the total slides number; the character currently is a forward slash. A future version of S5 may allow this to be changed by a means other than editing the JavaScript file.</dd> +<dt class="generated"><span id="csTotal"><i>[total slides]</i></span></dt> +<dd>The total number of slides in the slide show. This count does not include the first slide in the presentation, which is numbered zero.</dd> +</dl> + +</dd> + +<dt class="required"><div id="header"><i>[any header content]</i></div></dt> +<dd>Any header content or effects are placed inside this element. Even if the header has no content, it should remain as an unfilled element.</dd> + +<dt class="required"><div id="footer"> </div></dt> +<dd> +Any footer content or visual effects are placed inside this element. +</dd> + +</dl></dd> + +<dt class="optional"><div class="topleft"><i>[top left layout bit]</i></div> +<div class="topright"><i>[top right layout bit]</i></div> +<div class="bottomleft"><i>[bottom left layout bit]</i></div> +<div class="bottomright"><i>[bottom right layout bit]</i></div></dt> +<dd>These elements have a <tt>class</tt> attribute containing a value indicating their layout position, such as <code><div class="topleft"></code>. They may also be given an optional <tt>id</tt> attribute that refers to the relevant <tt>meta</tt> element, so editors can determine what information was positioned and use this to their advantage in the editing UI. Copied from OSF 1.0.</dd> + +</dl> + + +<h3>The Slides</h3> + +<pre> +<div class="presentation"> + + <div class="slide"> + <span class="recommended"><h1><i>[slide title]</i></h1></span> + <span class="optional"><div class="slidecontent"></span> + <i>[slide content]</i> + <span class="optional"></div></span> + <span class="optional"><div class="handout"> + <i>[extra content not displayed in slide show]</i> + </div></span> + </div> + +</div> +</pre> + +<dl> + +<dt class="required"><div class="slide"> </div></dt> +<dd> +The presentation section of the file contains one or more slides. The contents of each slide are obviously up to the author of the presentation. This element contains a number of descendants. + +<dl> + +<dt class="recommended"><h1><i>[slide title]</i></h1></dt> +<dd>The contents of this element give the title of the individual slide. These contents are collected by the JavaScript and used to build the slide show's navigation menu. If the slide is untitled, it is recommended that an unfilled <tt>h1</tt> element be left in place.</dd> + +<dt class="optional"><div class="slidecontent"> </div></dt> +<dd>The contents of the slide can optionally be wrapped in this <tt>div</tt>, although a slide can have content without having it placed inside this <tt>div</tt>. Note that while use of this element is optional, having actual content for a slide is highly recommended. The content of the slide can be any valid XHTML markup and content. A common slide would contain an unordered list of five or so talking points.</dd> + +<dt class="optional"><div class="handout"> </div></dt> +<dd>This is used to enclose any extra information that should be included in the printed version of the presentation, but should not appear in the slide show. The contents can be any valid XHTML markup and content, and there is no restriction on length. As an example, a presentation on CSS might place examples of CSS techniques in one of these <tt>handout</tt> sections.</dd> + +</dl> + +</dd> + +</dl> + + + +<h3>Complete Example</h3> + +<pre> +<!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> +<title><i>[slide show title]</i></title> +<meta name="version" content="S5 1.1" /> +<span class="optional"><meta name="generator" content="<i>[generating program]</i>" /> +<meta name="presdate" content="<i>[presentation date]</i>" /> +<meta name="author" content="<i>[author's name]</i>" /> +<meta name="company" content="<i>[author's employer]</i>" /> +<meta http-equiv="Content-Type" content="<i>[content-type]</i>" /> +<meta name="defaultView" content="<i>[value]</i>" /> +<meta name="controlVis" content="<i>[value]</i>" /></span> +<link rel="stylesheet" href="v11b1/slides.css" type="text/css" media="projection" id="slideProj" /> +<link rel="stylesheet" href="v11b1/outline.css" type="text/css" media="screen" id="outlineStyle" /> +<link rel="stylesheet" href="v11b1/print.css" type="text/css" media="print" id="slidePrint" /> +<link rel="stylesheet" href="v11b1/opera.css" type="text/css" media="projection" id="operaFix" /> +<script src="ui/slides.js" type="text/javascript"></script> +</head> +<body> + +<div class="layout"> + + <div id="controls"></div> + <div id="currentSlide"></div> + <div id="header"><i>[any header content]</i></div> + <div id="footer"><i>[any footer content]</i></div> + <span class="optional"><div class="topleft"><i>[top left layout bit]</i></div> + <div class="topright"><i>[top right layout bit]</i></div> + <div class="bottomleft"><i>[bottom left layout bit]</i></div> + <div class="bottomright"><i>[bottom right layout bit]</i></div></span> + +</div> +<div class="presentation"> + + <div class="slide"> + <span class="optional"><h1><i>[slide show title]</i></h1> + <h2><i>[slide show subtitle]</i></h2> + <h3><i>[author's name]</i></h3> + <h4><i>[author's employer]</i></h4></span> + </div> + + <div class="slide"> + <span class="recommended"><h1><i>[slide title]</i></h1></span> + <span class="optional"><div class="slidecontent"></span> + <i>[slide content]</i> + <span class="optional"></div></span> + <span class="optional"><div class="handout"> + <i>[extra content not displayed in slide show]</i> + </div></span> + </div> + +</div> + +</body> +</html> +</pre> + + + + + +</body> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/ui/default/framing.css Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,23 @@ +/* The following styles size, place, and layer the slide components. + Edit these if you want to change the overall slide layout. + The commented lines can be uncommented (and modified, if necessary) + to help you with the rearrangement process. */ + +/* target = 1024x768 */ + +div#header, div#footer, .slide {width: 100%; top: 0; left: 0;} +div#header {top: 0; height: 3em; z-index: 1;} +div#footer {top: auto; bottom: 0; height: 2.5em; z-index: 5;} +.slide {top: 0; width: 92%; padding: 3.5em 4% 4%; z-index: 2; list-style: none;} +div#controls {left: 50%; bottom: 0; width: 50%; z-index: 100;} +div#controls form {position: absolute; bottom: 0; right: 0; width: 100%; + margin: 0;} +#currentSlide {position: absolute; width: 10%; left: 45%; bottom: 1em; z-index: 10;} +html>body #currentSlide {position: fixed;} + +/* +div#header {background: #FCC;} +div#footer {background: #CCF;} +div#controls {background: #BBD;} +div#currentSlide {background: #FFC;} +*/
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/ui/default/iepngfix.htc Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,42 @@ +<public:component> +<public:attach event="onpropertychange" onevent="doFix()" /> + +<script> + +// IE5.5+ PNG Alpha Fix v1.0 by Angus Turnbull http://www.twinhelix.com +// Free usage permitted as long as this notice remains intact. + +// This must be a path to a blank image. That's all the configuration you need here. +var blankImg = 'ui/default/blank.gif'; + +var f = 'DXImageTransform.Microsoft.AlphaImageLoader'; + +function filt(s, m) { + if (filters[f]) { + filters[f].enabled = s ? true : false; + if (s) with (filters[f]) { src = s; sizingMethod = m } + } else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")'; +} + +function doFix() { + if ((parseFloat(navigator.userAgent.match(/MSIE (\S+)/)[1]) < 5.5) || + (event && !/(background|src)/.test(event.propertyName))) return; + + if (tagName == 'IMG') { + if ((/\.png$/i).test(src)) { + filt(src, 'image'); // was 'scale' + src = blankImg; + } else if (src.indexOf(blankImg) < 0) filt(); + } else if (style.backgroundImage) { + if (style.backgroundImage.match(/^url[("']+(.*\.png)[)"']+$/i)) { + var s = RegExp.$1; + style.backgroundImage = ''; + filt(s, 'crop'); + } else filt(); + } +} + +doFix(); + +</script> +</public:component> \ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/ui/default/opera.css Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,7 @@ +/* DO NOT CHANGE THESE unless you really want to break Opera Show */ +.slide { + visibility: visible !important; + position: static !important; + page-break-before: always; +} +#slide0 {page-break-before: avoid;}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/ui/default/outline.css Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,15 @@ +/* don't change this unless you want the layout stuff to show up in the outline view! */ + +.layout div, #footer *, #controlForm * {display: none;} +#footer, #controls, #controlForm, #navLinks, #toggle { + display: block; visibility: visible; margin: 0; padding: 0;} +#toggle {float: right; padding: 0.5em;} +html>body #toggle {position: fixed; top: 0; right: 0;} + +/* making the outline look pretty-ish */ + +#slide0 h1, #slide0 h2, #slide0 h3, #slide0 h4 {border: none; margin: 0;} +#slide0 h1 {padding-top: 1.5em;} +.slide h1 {margin: 1.5em 0 0; padding-top: 0.25em; + border-top: 1px solid #888; border-bottom: 1px solid #AAA;} +#toggle {border: 1px solid; border-width: 0 0 1px 1px; background: #FFF;}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/ui/default/pretty.css Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,89 @@ +/* Following are the presentation styles -- edit away! */ + +body {background: #FFF url(bodybg.gif) -16px 0 no-repeat; color: #000; font-size: 2em;} +:link, :visited {text-decoration: none; color: #00C;} +#controls :active {color: #88A !important;} +#controls :focus {outline: 1px dotted #227;} +h1, h2, h3, h4 {font-size: 100%; margin: 0; padding: 0; font-weight: inherit;} +ul, pre {margin: 0; line-height: 1em;} +html, body {margin: 0; padding: 0;} + +blockquote, q {font-style: italic;} +blockquote {padding: 0 2em 0.5em; margin: 0 1.5em 0.5em; text-align: center; font-size: 1em;} +blockquote p {margin: 0;} +blockquote i {font-style: normal;} +blockquote b {display: block; margin-top: 0.5em; font-weight: normal; font-size: smaller; font-style: normal;} +blockquote b i {font-style: italic;} + +kbd {font-weight: bold; font-size: 1em;} +sup {font-size: smaller; line-height: 1px;} + +.slide code {padding: 2px 0.25em; font-weight: bold; color: #533;} +.slide code.bad, code del {color: red;} +.slide red {color: red;} +.slide black {color: black;} +.slide blue {color: blue;} +.slide code.old {color: silver;} +.slide pre {padding: 0; margin: 0.25em 0 0.5em 0.5em; color: #533; font-size: 90%;} +.slide pre code {display: block;} +.slide ul {margin-left: 5%; margin-right: 7%; list-style: disc;} +.slide li {margin-top: 0.75em; margin-right: 0;} +.slide ul ul {line-height: 1;} +.slide ul ul li {margin: .2em; font-size: 85%; list-style: square;} +.slide img.leader {display: block; margin: 0 auto;} + +div#header, div#footer {background: #005; color: #AAB; + font-family: Verdana, Helvetica, sans-serif;} +div#header {background: #005 url(bodybg.gif) -16px 0 no-repeat; + line-height: 1px;} +div#footer {font-size: 0.5em; font-weight: bold; padding: 1em 0;} +#footer h1, #footer h2 {display: block; padding: 0 1em;} +#footer h2 {font-style: italic;} + +div.long {font-size: 0.75em;} +.slide h1 {position: absolute; top: 0.7em; left: 87px; z-index: 1; + margin: 0; padding: 0.3em 0 0 50px; white-space: nowrap; + font: bold 150%/1em Helvetica, sans-serif; text-transform: capitalize; + color: #DDE; background: #005;} +.slide h3 {font-size: 130%;} +h1 abbr {font-variant: small-caps;} + +div#controls {position: absolute; left: 50%; bottom: 0; + width: 50%; + text-align: right; font: bold 0.9em Verdana, Helvetica, sans-serif;} +html>body div#controls {position: fixed; padding: 0 0 1em 0; + top: auto;} +div#controls form {position: absolute; bottom: 0; right: 0; width: 100%; + margin: 0; padding: 0;} +#controls #navLinks a {padding: 0; margin: 0 0.5em; + background: #005; border: none; color: #779; + cursor: pointer;} +#controls #navList {height: 1em;} +#controls #navList #jumplist {position: absolute; bottom: 0; right: 0; background: #DDD; color: #227;} + +#currentSlide {text-align: center; font-size: 0.5em; color: #449;} + +#slide0 {padding-top: 3.5em; font-size: 90%;} +#slide0 h1 {position: static; margin: 1em 0 0; padding: 0; + font: bold 2em Helvetica, sans-serif; white-space: normal; + color: #000; background: transparent;} +#slide0 h2 {font: bold italic 1em Helvetica, sans-serif; margin: 0.25em;} +#slide0 h3 {margin-top: 1.5em; font-size: 1.5em;} +#slide0 h4 {margin-top: 0; font-size: 1em;} + +ul.urls {list-style: none; display: inline; margin: 0;} +.urls li {display: inline; margin: 0;} +.note {display: none;} +.external {border-bottom: 1px dotted gray;} +html>body .external {border-bottom: none;} +.external:after {content: " \274F"; font-size: smaller; color: #77B;} + +.incremental, .incremental *, .incremental *:after {color: #DDE; visibility: visible;} +img.incremental {visibility: hidden;} +.slide .current {color: #B02;} + + +/* diagnostics + +li:after {content: " [" attr(class) "]"; color: #F88;} + */
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/ui/default/print.css Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,1 @@ +/* The following rule is necessary to have all slides appear in print! DO NOT REMOVE IT! */ .slide, ul {page-break-inside: avoid; visibility: visible !important;} h1 {page-break-after: avoid;} body {font-size: 12pt; background: white;} * {color: black;} #slide0 h1 {font-size: 200%; border: none; margin: 0.5em 0 0.25em;} #slide0 h3 {margin: 0; padding: 0;} #slide0 h4 {margin: 0 0 0.5em; padding: 0;} #slide0 {margin-bottom: 3em;} h1 {border-top: 2pt solid gray; border-bottom: 1px dotted silver;} .extra {background: transparent !important;} div.extra, pre.extra, .example {font-size: 10pt; color: #333;} ul.extra a {font-weight: bold;} p.example {display: none;} #header {display: none;} #footer h1 {margin: 0; border-bottom: 1px solid; color: gray; font-style: italic;} #footer h2, #controls {display: none;} /* The following rule keeps the layout stuff out of print. Remove at your own risk! */ .layout, .layout * {display: none !important;} \ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/ui/default/s5-core.css Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,9 @@ +/* Do not edit or override these styles! The system will likely break if you do. */ + +div#header, div#footer, div#controls, .slide {position: absolute;} +html>body div#header, html>body div#footer, + html>body div#controls, html>body .slide {position: fixed;} +.handout {display: none;} +.layout {display: block;} +.slide, .hideme, .incremental {visibility: hidden;} +#slide0 {visibility: visible;}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/ui/default/slides.css Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,3 @@ +@import url(s5-core.css); /* required to make the slide show run at all */ +@import url(framing.css); /* sets basic placement and size of slide components */ +@import url(pretty.css); /* stuff that makes the slides look better than blah */ \ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/ui/default/slides.js Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,552 @@ +// S5 v1.1 slides.js -- released into the Public Domain +// +// Please see http://www.meyerweb.com/eric/tools/s5/credits.html for information +// about all the wonderful and talented contributors to this code! + +var undef; +var slideCSS = ''; +var snum = 0; +var smax = 1; +var incpos = 0; +var number = undef; +var s5mode = true; +var defaultView = 'slideshow'; +var controlVis = 'visible'; + +var isIE = navigator.appName == 'Microsoft Internet Explorer' ? 1 : 0; +var isOp = navigator.userAgent.indexOf('Opera') > -1 ? 1 : 0; +var isGe = navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('Safari') < 1 ? 1 : 0; + +function hasClass(object, className) { + if (!object.className) return false; + return (object.className.search('(^|\\s)' + className + '(\\s|$)') != -1); +} + +function hasValue(object, value) { + if (!object) return false; + return (object.search('(^|\\s)' + value + '(\\s|$)') != -1); +} + +function removeClass(object,className) { + if (!object) return; + object.className = object.className.replace(new RegExp('(^|\\s)'+className+'(\\s|$)'), RegExp.$1+RegExp.$2); +} + +function addClass(object,className) { + if (!object || hasClass(object, className)) return; + if (object.className) { + object.className += ' '+className; + } else { + object.className = className; + } +} + +function GetElementsWithClassName(elementName,className) { + var allElements = document.getElementsByTagName(elementName); + var elemColl = new Array(); + for (var i = 0; i< allElements.length; i++) { + if (hasClass(allElements[i], className)) { + elemColl[elemColl.length] = allElements[i]; + } + } + return elemColl; +} + +function isParentOrSelf(element, id) { + if (element == null || element.nodeName=='BODY') return false; + else if (element.id == id) return true; + else return isParentOrSelf(element.parentNode, id); +} + +function nodeValue(node) { + var result = ""; + if (node.nodeType == 1) { + var children = node.childNodes; + for (var i = 0; i < children.length; ++i) { + result += nodeValue(children[i]); + } + } + else if (node.nodeType == 3) { + result = node.nodeValue; + } + return(result); +} + +function slideLabel() { + var slideColl = GetElementsWithClassName('*','slide'); + var list = document.getElementById('jumplist'); + smax = slideColl.length; + for (var n = 0; n < smax; n++) { + var obj = slideColl[n]; + + var did = 'slide' + n.toString(); + obj.setAttribute('id',did); + if (isOp) continue; + + var otext = ''; + var menu = obj.firstChild; + if (!menu) continue; // to cope with empty slides + while (menu && menu.nodeType == 3) { + menu = menu.nextSibling; + } + if (!menu) continue; // to cope with slides with only text nodes + + var menunodes = menu.childNodes; + for (var o = 0; o < menunodes.length; o++) { + otext += nodeValue(menunodes[o]); + } + list.options[list.length] = new Option(n + ' : ' + otext, n); + } +} + +function currentSlide() { + var cs; + if (document.getElementById) { + cs = document.getElementById('currentSlide'); + } else { + cs = document.currentSlide; + } + cs.innerHTML = '<span id="csHere">' + snum + '<\/span> ' + + '<span id="csSep">\/<\/span> ' + + '<span id="csTotal">' + (smax-1) + '<\/span>'; + if (snum == 0) { + cs.style.visibility = 'hidden'; + } else { + cs.style.visibility = 'visible'; + } +} + +function go(step) { + if (document.getElementById('slideProj').disabled || step == 0) return; + var jl = document.getElementById('jumplist'); + var cid = 'slide' + snum; + var ce = document.getElementById(cid); + if (incrementals[snum].length > 0) { + for (var i = 0; i < incrementals[snum].length; i++) { + removeClass(incrementals[snum][i], 'current'); + removeClass(incrementals[snum][i], 'incremental'); + } + } + if (step != 'j') { + snum += step; + lmax = smax - 1; + if (snum > lmax) snum = lmax; + if (snum < 0) snum = 0; + } else + snum = parseInt(jl.value); + var nid = 'slide' + snum; + var ne = document.getElementById(nid); + if (!ne) { + ne = document.getElementById('slide0'); + snum = 0; + } + if (step < 0) {incpos = incrementals[snum].length} else {incpos = 0;} + if (incrementals[snum].length > 0 && incpos == 0) { + for (var i = 0; i < incrementals[snum].length; i++) { + if (hasClass(incrementals[snum][i], 'current')) + incpos = i + 1; + else + addClass(incrementals[snum][i], 'incremental'); + } + } + if (incrementals[snum].length > 0 && incpos > 0) + addClass(incrementals[snum][incpos - 1], 'current'); + ce.style.visibility = 'hidden'; + ne.style.visibility = 'visible'; + jl.selectedIndex = snum; + currentSlide(); + number = 0; +} + +function goTo(target) { + if (target >= smax || target == snum) return; + go(target - snum); +} + +function subgo(step) { + if (step > 0) { + removeClass(incrementals[snum][incpos - 1],'current'); + removeClass(incrementals[snum][incpos], 'incremental'); + addClass(incrementals[snum][incpos],'current'); + incpos++; + } else { + incpos--; + removeClass(incrementals[snum][incpos],'current'); + addClass(incrementals[snum][incpos], 'incremental'); + addClass(incrementals[snum][incpos - 1],'current'); + } +} + +function toggle() { + var slideColl = GetElementsWithClassName('*','slide'); + var slides = document.getElementById('slideProj'); + var outline = document.getElementById('outlineStyle'); + if (!slides.disabled) { + slides.disabled = true; + outline.disabled = false; + s5mode = false; + fontSize('1em'); + for (var n = 0; n < smax; n++) { + var slide = slideColl[n]; + slide.style.visibility = 'visible'; + } + } else { + slides.disabled = false; + outline.disabled = true; + s5mode = true; + fontScale(); + for (var n = 0; n < smax; n++) { + var slide = slideColl[n]; + slide.style.visibility = 'hidden'; + } + slideColl[snum].style.visibility = 'visible'; + } +} + +function showHide(action) { + var obj = GetElementsWithClassName('*','hideme')[0]; + switch (action) { + case 's': obj.style.visibility = 'visible'; break; + case 'h': obj.style.visibility = 'hidden'; break; + case 'k': + if (obj.style.visibility != 'visible') { + obj.style.visibility = 'visible'; + } else { + obj.style.visibility = 'hidden'; + } + break; + } +} + +// 'keys' code adapted from MozPoint (http://mozpoint.mozdev.org/) +function keys(key) { + if (!key) { + key = event; + key.which = key.keyCode; + } + if (key.which == 84) { + toggle(); + return; + } + if (s5mode) { + switch (key.which) { + case 10: // return + case 13: // enter + if (window.event && isParentOrSelf(window.event.srcElement, 'controls')) return; + if (key.target && isParentOrSelf(key.target, 'controls')) return; + if(number != undef) { + goTo(number); + break; + } + case 32: // spacebar + case 34: // page down + case 39: // rightkey + case 40: // downkey + if(number != undef) { + go(number); + } else if (!incrementals[snum] || incpos >= incrementals[snum].length) { + go(1); + } else { + subgo(1); + } + break; + case 33: // page up + case 37: // leftkey + case 38: // upkey + if(number != undef) { + go(-1 * number); + } else if (!incrementals[snum] || incpos <= 0) { + go(-1); + } else { + subgo(-1); + } + break; + case 36: // home + goTo(0); + break; + case 35: // end + goTo(smax-1); + break; + case 67: // c + showHide('k'); + break; + } + if (key.which < 48 || key.which > 57) { + number = undef; + } else { + if (window.event && isParentOrSelf(window.event.srcElement, 'controls')) return; + if (key.target && isParentOrSelf(key.target, 'controls')) return; + number = (((number != undef) ? number : 0) * 10) + (key.which - 48); + } + } + return false; +} + +function clicker(e) { + number = undef; + var target; + if (window.event) { + target = window.event.srcElement; + e = window.event; + } else target = e.target; + if (target.getAttribute('href') != null || hasValue(target.rel, 'external') || isParentOrSelf(target, 'controls') || isParentOrSelf(target,'embed') || isParentOrSelf(target,'object')) return true; + if (!e.which || e.which == 1) { + if (!incrementals[snum] || incpos >= incrementals[snum].length) { + go(1); + } else { + subgo(1); + } + } +} + +function findSlide(hash) { + var target = null; + var slides = GetElementsWithClassName('*','slide'); + for (var i = 0; i < slides.length; i++) { + var targetSlide = slides[i]; + if ( (targetSlide.name && targetSlide.name == hash) + || (targetSlide.id && targetSlide.id == hash) ) { + target = targetSlide; + break; + } + } + while(target != null && target.nodeName != 'BODY') { + if (hasClass(target, 'slide')) { + return parseInt(target.id.slice(5)); + } + target = target.parentNode; + } + return null; +} + +function slideJump() { + if (window.location.hash == null) return; + var sregex = /^#slide(\d+)$/; + var matches = sregex.exec(window.location.hash); + var dest = null; + if (matches != null) { + dest = parseInt(matches[1]); + } else { + dest = findSlide(window.location.hash.slice(1)); + } + if (dest != null) + go(dest - snum); +} + +function fixLinks() { + var thisUri = window.location.href; + thisUri = thisUri.slice(0, thisUri.length - window.location.hash.length); + var aelements = document.getElementsByTagName('A'); + for (var i = 0; i < aelements.length; i++) { + var a = aelements[i].href; + var slideID = a.match('\#slide[0-9]{1,2}'); + if ((slideID) && (slideID[0].slice(0,1) == '#')) { + var dest = findSlide(slideID[0].slice(1)); + if (dest != null) { + if (aelements[i].addEventListener) { + aelements[i].addEventListener("click", new Function("e", + "if (document.getElementById('slideProj').disabled) return;" + + "go("+dest+" - snum); " + + "if (e.preventDefault) e.preventDefault();"), true); + } else if (aelements[i].attachEvent) { + aelements[i].attachEvent("onclick", new Function("", + "if (document.getElementById('slideProj').disabled) return;" + + "go("+dest+" - snum); " + + "event.returnValue = false;")); + } + } + } + } +} + +function externalLinks() { + if (!document.getElementsByTagName) return; + var anchors = document.getElementsByTagName('a'); + for (var i=0; i<anchors.length; i++) { + var anchor = anchors[i]; + if (anchor.getAttribute('href') && hasValue(anchor.rel, 'external')) { + anchor.target = '_blank'; + addClass(anchor,'external'); + } + } +} + +function createControls() { + var controlsDiv = document.getElementById("controls"); + if (!controlsDiv) return; + var hider = ' onmouseover="showHide(\'s\');" onmouseout="showHide(\'h\');"'; + var hideDiv, hideList = ''; + if (controlVis == 'hidden') { + hideDiv = hider; + } else { + hideList = hider; + } + controlsDiv.innerHTML = '<form action="#" id="controlForm"' + hideDiv + '>' + + '<div id="navLinks">' + + '<a accesskey="t" id="toggle" href="javascript:toggle();">Ø<\/a>' + + '<a accesskey="z" id="prev" href="javascript:go(-1);">«<\/a>' + + '<a accesskey="x" id="next" href="javascript:go(1);">»<\/a>' + + '<div id="navList"' + hideList + '><select id="jumplist" onchange="go(\'j\');"><\/select><\/div>' + + '<\/div><\/form>'; + if (controlVis == 'hidden') { + var hidden = document.getElementById('navLinks'); + } else { + var hidden = document.getElementById('jumplist'); + } + addClass(hidden,'hideme'); +} + +function fontScale() { // causes layout problems in FireFox that get fixed if browser's Reload is used; same may be true of other Gecko-based browsers + if (!s5mode) return false; + var vScale = 22; // both yield 32 (after rounding) at 1024x768 + var hScale = 32; // perhaps should auto-calculate based on theme's declared value? + if (window.innerHeight) { + var vSize = window.innerHeight; + var hSize = window.innerWidth; + } else if (document.documentElement.clientHeight) { + var vSize = document.documentElement.clientHeight; + var hSize = document.documentElement.clientWidth; + } else if (document.body.clientHeight) { + var vSize = document.body.clientHeight; + var hSize = document.body.clientWidth; + } else { + var vSize = 700; // assuming 1024x768, minus chrome and such + var hSize = 1024; // these do not account for kiosk mode or Opera Show + } + var newSize = Math.min(Math.round(vSize/vScale),Math.round(hSize/hScale)); + fontSize(newSize + 'px'); + if (isGe) { // hack to counter incremental reflow bugs + var obj = document.getElementsByTagName('body')[0]; + obj.style.display = 'none'; + obj.style.display = 'block'; + } +} + +function fontSize(value) { + if (!(s5ss = document.getElementById('s5ss'))) { + if (!isIE) { + document.getElementsByTagName('head')[0].appendChild(s5ss = document.createElement('style')); + s5ss.setAttribute('media','screen, projection'); + s5ss.setAttribute('id','s5ss'); + } else { + document.createStyleSheet(); + document.s5ss = document.styleSheets[document.styleSheets.length - 1]; + } + } + if (!isIE) { + while (s5ss.lastChild) s5ss.removeChild(s5ss.lastChild); + s5ss.appendChild(document.createTextNode('body {font-size: ' + value + ' !important;}')); + } else { + document.s5ss.addRule('body','font-size: ' + value + ' !important;'); + } +} + +function notOperaFix() { + slideCSS = document.getElementById('slideProj').href; + var slides = document.getElementById('slideProj'); + var outline = document.getElementById('outlineStyle'); + slides.setAttribute('media','screen'); + outline.disabled = true; + if (isGe) { + slides.setAttribute('href','null'); // Gecko fix + slides.setAttribute('href',slideCSS); // Gecko fix + } + if (isIE && document.styleSheets && document.styleSheets[0]) { + document.styleSheets[0].addRule('img', 'behavior: url(ui/default/iepngfix.htc)'); + document.styleSheets[0].addRule('div', 'behavior: url(ui/default/iepngfix.htc)'); + document.styleSheets[0].addRule('.slide', 'behavior: url(ui/default/iepngfix.htc)'); + } +} + +function getIncrementals(obj) { + var incrementals = new Array(); + if (!obj) + return incrementals; + var children = obj.childNodes; + for (var i = 0; i < children.length; i++) { + var child = children[i]; + if (hasClass(child, 'incremental')) { + if (child.nodeName == 'OL' || child.nodeName == 'UL') { + removeClass(child, 'incremental'); + for (var j = 0; j < child.childNodes.length; j++) { + if (child.childNodes[j].nodeType == 1) { + addClass(child.childNodes[j], 'incremental'); + } + } + } else { + incrementals[incrementals.length] = child; + removeClass(child,'incremental'); + } + } + if (hasClass(child, 'show-first')) { + if (child.nodeName == 'OL' || child.nodeName == 'UL') { + removeClass(child, 'show-first'); + if (child.childNodes[isGe].nodeType == 1) { + removeClass(child.childNodes[isGe], 'incremental'); + } + } else { + incrementals[incrementals.length] = child; + } + } + incrementals = incrementals.concat(getIncrementals(child)); + } + return incrementals; +} + +function createIncrementals() { + var incrementals = new Array(); + for (var i = 0; i < smax; i++) { + incrementals[i] = getIncrementals(document.getElementById('slide'+i)); + } + return incrementals; +} + +function defaultCheck() { + var allMetas = document.getElementsByTagName('meta'); + for (var i = 0; i< allMetas.length; i++) { + if (allMetas[i].name == 'defaultView') { + defaultView = allMetas[i].content; + } + if (allMetas[i].name == 'controlVis') { + controlVis = allMetas[i].content; + } + } +} + +// Key trap fix, new function body for trap() +function trap(e) { + if (!e) { + e = event; + e.which = e.keyCode; + } + try { + modifierKey = e.ctrlKey || e.altKey || e.metaKey; + } + catch(e) { + modifierKey = false; + } + return modifierKey || e.which == 0; +} + +function startup() { + defaultCheck(); + if (!isOp) createControls(); + slideLabel(); + fixLinks(); + externalLinks(); + fontScale(); + if (!isOp) { + notOperaFix(); + incrementals = createIncrementals(); + slideJump(); + if (defaultView == 'outline') { + toggle(); + } + document.onkeyup = keys; + document.onkeypress = trap; + document.onclick = clicker; + } +} + +window.onload = startup; +window.onresize = function(){setTimeout('fontScale()', 50);} \ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/ui/i18n/00_head.txt Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,8 @@ +<!-- style sheet links --> +<link rel="stylesheet" href="ui/i18n/slides.css" type="text/css" media="projection" id="slideProj" /> +<link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" /> +<link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" /> +<link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" /> + +<!-- S5 JS --> +<script src="ui/default/slides.js" type="text/javascript"></script>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/ui/i18n/framing.css Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,23 @@ +/* The following styles size and place the slide components. + Edit them if you want to change the overall slide layout. + The commented lines can be uncommented (and modified, if necessary) + to help you with the rearrangement process. */ + +div#header, div#footer, .slide {width: 100%; top: 0; left: 0;} +div#header {top: 0; left: 0; z-index: 1;} +div#footer {top: auto; bottom: 0; width: 100%; z-index: 5;} +.slide {top: 0; width: 88%; padding: 1em 7% 2em 5%; z-index: 2;} + +div#controls {bottom: 1em; left: 0; width: 100%; text-align: center; z-index: 1000;} +div#controls form {margin: 0; padding: 0;} + +#currentSlide {position: absolute; left: 0; bottom: 0.5em; z-index: 10; + width: 100%; text-align: center;} +html>body #currentSlide {position: fixed;} + +/* +div#header {background: #FCC;} +div#footer {background: #CCF;} +div#controls {background: #BBD;} +div#currentSlide {background: #FFC;} +*/
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/ui/i18n/pretty.css Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,44 @@ +/* + Theme: i18n + Eric A. Meyer (http://meyerweb.com/) + Theme placed under CC by-sa 2.0 license +*/ + +body {background: #95A7D4 url(bg-slide.jpg) 100% 100% no-repeat; color: #210; font: 28px Arial, sans-serif;} +a {text-decoration: none; color: #336; border-bottom: 1px dotted;} +h1, h2, h3, h4, h5, h6 {font-size: 1em; margin: 0;} +sup {font-size: 0.75em; font-weight: normal; + vertical-align: 0.5em; line-height: 1px;} +ul {margin-left: 1em; padding-left: 0;} +li {margin-bottom: 0.66em;} +li li {margin: 0.33em 0; font-size: smaller;} + +#header {background: url(bg-shade.png); border-bottom: 1px solid #333; + padding-bottom: 2em;} +#footer {background: url(bg-shade.png); color: #BBB; border-top: 1px solid #333;} +#header, #footer {font-size: 0.5em;} +#footer h1, #footer h2 { padding: 0.5em 0.75em; + font-weight: normal; font-style: italic;} +#footer h1 {left: 0; font-size: 1em; letter-spacing: 1px;} +#footer h2 {position: absolute; bottom: 0; right: 0;} + +#controls {font-size: 0.75em;} +#navList {margin-top: 3px;} +#navLinks a {margin: 0 0.33em; padding: 0 0.25em; + border: 1px solid; border-color: #CCD #556 #556 #CCD; + background-color: #8597C4;} + +#currentSlide {font-size: 0.5em;} +#currentSlide span {font-size: 13px; color: rgb(49%,47%,66%);} +#currentSlide #csSep {display: none;} +#currentSlide #csHere {font-weight: bold;} +#currentSlide #csHere:before {content: "#"; font-weight: normal;} +#currentSlide #csTotal:before {content: " of ";} + +.slide h1 {font-size: 1.66em; line-height: 1; letter-spacing: -1px; + margin: 0 -15% 1em 0; padding: 0.5em 15% 0.06125em 0; border-bottom: 0.06125em solid rgb(90,94,120);} +#slide0 h1 {border: none; font-size: 2.25em; letter-spacing: 0; margin: 3em 0 1.5em;} +#slide0 h3 {margin: 0.5em 0 0;} +#slide0 h4 {margin-top: 0; font-size: smaller;} + +.slide .current {color: #003; text-shadow: 0 0 0.25em #9AABD7;}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/ui/i18n/s5-core.css Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,9 @@ +/* Do not edit or override these styles! The system will likely break if you do. */ + +div#header, div#footer, div#controls, div.slide {position: absolute;} +html>body div#header, html>body div#footer, + html>body div#controls, html>body div.slide {position: fixed;} +.handout {display: none;} +.layout {display: block;} +div.slide, .hideme, .incremental {visibility: hidden;} +#slide0 {visibility: visible;}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/ui/i18n/slides.css Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,3 @@ +@import url(s5-core.css); /* required to make the slide show run at all */ +@import url(framing.css); /* sets basic placement and size of slide components */ +@import url(pretty.css); /* stuff that makes the slides look better than blah */ \ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/xoxo-s5-demo.html Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,185 @@ +<!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> +<title>S5: An Introduction</title> +<!-- metadata --> +<meta name="generator" content="S5" /> +<meta name="version" content="S5 1.1" /> +<meta name="presdate" content="20050128" /> +<meta name="author" content="Eric A. Meyer" /> +<meta name="company" content="Complex Spiral Consulting" /> +<!-- configuration parameters --> +<meta name="defaultView" content="slideshow" /> +<meta name="controlVis" content="hidden" /> +<!-- style sheet links --> +<link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" /> +<link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" /> +<link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" /> +<link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" /> +<!-- embedded styles --> +<style type="text/css" media="all"> +.imgcon {width: 525px; margin: 0 auto; padding: 0; text-align: center;} +#anim {width: 270px; height: 320px; position: relative; margin-top: 0.5em;} +#anim img {position: absolute; top: 42px; left: 24px;} +img#me01 {top: 0; left: 0;} +img#me02 {left: 23px;} +img#me04 {top: 44px;} +img#me05 {top: 43px;left: 36px;} +</style> +<!-- S5 JS --> +<script src="ui/default/slides.js" type="text/javascript"></script> +</head> +<body> + +<div class="layout"> +<div id="controls"><!-- DO NOT EDIT --></div> +<div id="currentSlide"><!-- DO NOT EDIT --></div> +<div id="header"></div> +<div id="footer"> +<h1>S5 Testbed</h1> +<h2>Your computer • Today's date</h2> +</div> +</div> + +<ol class="xoxo presentation"> + +<li class="slide"> +<h1>S5 Testbed</h1> +<h3>Eric A. Meyer</h3> +<h4><a href="http://www.complexspiral.com/" rel="external">Complex Spiral Consulting</a></h4> +<div class="handout"></div> +</li> + + +<li class="slide"> +<h1>What Is S5?</h1> +<ul> +<li>It's a <strong>S</strong>imple <strong>S</strong>tandards-based <strong>S</strong>lide <strong>S</strong>how <strong>S</strong>ystem</li> +<li>One XHTML document provides all of the slide show's content</li> +<li>CSS handles the layout and look of the slides</li> +<li>JavaScript handles the dynamic aspects of the show</li> +<li>That's all there is to it! (<a href="#slide9">skip to summary</a>; demonstrates links internal to the slide show)</li> +</ul> +</li> + + +<li class="slide"> +<h1>Operatic Origins</h1> +<ul> +<li>Opera 4 introduced <a href="http://www.opera.com/support/tutorials/operashow/" rel="external">Opera Show</a>, a projection-mode style sheet technology (link demonstrates external link styling and window spawning)</li> +<li>Allows a single XHTML document to be turned into a PowerPoint-like slide show</li> +<li>Adding screen and print style sheets allows for multi-medium views of a single document</li> +<li>Highly efficient, but highly browser centric...</li> +</ul> +</li> + + +<li class="slide"> +<h1>Incremental Display</h1> +<ul class="incremental show-first"> +<li>Keep hitting/clicking "next" as long as it isn't the control link (»)</li> +<li>Bullet points are revealed one by one +<ul class="incremental"> +<li>All based on class name of <code>inc</code></li> +<li>Lists can be classed to make items appear individually</li> +<li>Individual items can be classed as well to create "animations"; see <a href="http://boxofchocolates.ca/projects/s5-incremental-graphics/" rel="external">Derek Featherstone's example</a></li> +</ul> +</li> +<li>Let's try it again, but without the first bullet point being pre-highlighted...</li> +</ul> +</li> + + +<li class="slide"> +<h1>Incremental Display II</h1> +<ul class="incremental"> +<li>Keep hitting/clicking "next" as long as it isn't the control link (»)</li> +<li>Bullet points are revealed one by one +<ul> +<li>All based on class name of <code>incremental</code></li> +<li>Lists can be classed to make items appear individually</li> +<li>Individual items can be classed as well to create "animations"; see <a href="http://boxofchocolates.ca/projects/s5-incremental-graphics/" rel="external">Derek Featherstone's example</a></li> +</ul> +</li> +<li>Notice how the sub-list was part of the parent bullet point; that was done on purpose</li> +<li>Now to move on to other test slides!</li> +</ul> +</li> + + +<li class="slide"> +<h1>PNG Alpha Tests</h1> +<div style="width: 400px; height: 150px; text-align: center; background: url(ui/i18n/bg-shade.png)"> +<p>DIV with PNG background followed by foreground PNG</p> +<img src="ui/i18n/bg-shade.png" alt="" title="A translucent image" /> +</div> +<div style="width: 100%; height: 150px; text-align: center; background: url(ui/i18n/bg-shade.png)"> +<p>DIV with PNG background followed by foreground PNG</p> +<img src="ui/i18n/bg-shade.png" alt="" title="A translucent image" /> +</div> +</li> + + +<li class="slide"> +<h1>S5 Default File Structure</h1> +<p style="text-align: center;"> +<img src="pix/s5filemap.png" alt="" title="At a Glance" /> +</p> +</li> + + +<li class="slide"> +<h1>S5 Themes</h1> +<p class="imgcon"> +<img src="pix/S501.jpg" alt="" title="Default" /> +<img src="pix/S502.jpg" alt="" title="I18N" /> +<img src="pix/S503.jpg" alt="" title="Blue" /> +<img src="pix/S504.jpg" alt="" title="Flower" /> +(one way of presenting multiple graphics) +</p> +</li> + + +<li class="slide"> +<h1>Incremental S5 Themes</h1> +<p class="imgcon"> +<img src="pix/S501.jpg" alt="" title="Default" class="incremental" /> +<img src="pix/S502.jpg" alt="" title="I18N" class="incremental" /> +<img src="pix/S503.jpg" alt="" title="Blue" class="incremental" /> +<img src="pix/S504.jpg" alt="" title="Flower" class="incremental" /> +(one by one!) +</p> +</li> + + +<li class="slide"> +<h1>Incremental Animation</h1> +<ul> +<li>A demonstration of just one of the many ways to accomplish simple animation-like effects <small>(using a diagram from <a href="http://gmpg.org/xfn/and/" rel="external">"XFN and..."</a>)</small></li> +</ul> +<p class="imgcon" id="anim"> +<img src="pix/mememe01.png" id="me01" alt="" /> +<img src="pix/mememe02.png" alt="" id="me02" class="incremental" /> +<img src="pix/mememe03.png" alt="" id="me03" class="incremental" /> +<img src="pix/mememe04.png" alt="" id="me04" class="incremental" /> +<img src="pix/mememe05.png" alt="" id="me05" class="incremental" /> +</p> +</li> + + +<li class="slide"> +<h1>In Summary</h1> +<ul> +<li>With minimal scripting, we have recreated and improved upon a (currently) browser-specific technology, making it cross-browser in the process</li> +<li>The S5 format is OSF 1.0 compatible</li> +<li>S5 is a very flexible and lightweight slide show system available for anyone to use</li> +</ul> +</li> + +</ol> + +</body> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/xoxo-s5-intro.html Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,215 @@ +<!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> +<title>S5: An Introduction</title> +<!-- metadata --> +<meta name="generator" content="S5" /> +<meta name="version" content="S5 1.1" /> +<meta name="presdate" content="20050728" /> +<meta name="author" content="Eric A. Meyer" /> +<meta name="company" content="Complex Spiral Consulting" /> +<!-- configuration parameters --> +<meta name="defaultView" content="slideshow" /> +<meta name="controlVis" content="hidden" /> +<!-- style sheet links --> +<link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" /> +<link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" /> +<link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" /> +<link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" /> +<!-- embedded styles --> +<style type="text/css" media="all"> +.imgcon {width: 525px; margin: 0 auto; padding: 0; text-align: center;} +#anim {width: 270px; height: 320px; position: relative; margin-top: 0.5em;} +#anim img {position: absolute; top: 42px; left: 24px;} +img#me01 {top: 0; left: 0;} +img#me02 {left: 23px;} +img#me04 {top: 44px;} +img#me05 {top: 43px;left: 36px;} +</style> +<!-- S5 JS --> +<script src="ui/default/slides.js" type="text/javascript"></script> +</head> +<body> + +<div class="layout"> +<div id="controls"><!-- DO NOT EDIT --></div> +<div id="currentSlide"><!-- DO NOT EDIT --></div> +<div id="header"></div> +<div id="footer"> +<h1>S5 Testbed</h1> +<h2>Your computer • Today's date</h2> +</div> + +</div> +<ol class="presentation xoxo"> + +<li class="slide"> +<h1>S5: An Introduction</h1> +<h3>Eric A. Meyer</h3> +<h4><a href="http://www.complexspiral.com/">Complex Spiral Consulting</a></h4> +</li> + + +<li class="slide"> +<h1>What Is S5?</h1> +<ul> +<li>It's a <strong>S</strong>imple <strong>S</strong>tandards-based <strong>S</strong>lide <strong>S</strong>how <strong>S</strong>ystem</li> +<li>One XHTML document provides all of the slide show's content</li> +<li>CSS handles the layout and look of the slides</li> +<li>JavaScript handles the dynamic aspects of the show</li> +<li>That's all there is to it!</li> +</ul> +</li> + + +<li class="slide"> +<h1>Operatic Origins</h1> +<ul> +<li>Opera 4 introduced <a href="http://www.opera.com/support/tutorials/operashow/">Opera Show</a>, a projection-mode style sheet technology</li> +<li>Allows a single XHTML document to be turned into a PowerPoint-like slide show</li> +<li>Adding screen and print style sheets allows for multi-medium views of a single document</li> +<li>Highly efficient, but highly browser centric...</li> +</ul> +</li> + + +<li class="slide"> +<h1>Expanding The Field</h1> +<ul> +<li>When Opera 7.5 for OS X came out, the banner ads persisted in projection mode</li> +<li><a href="http://tantek.com/" rel="friend colleague met">Tantek Çelik</a> created a JavaScript-driven slide show technique that worked on multiple browsers +<ul> +<li>Unfortunately, it required each slide to be ID'ed ahead of time, making additions and rearrangement difficult</li> +<li>Navigation was only linear; no way to jump to an arbitrary slide</li> +<li>There was also no facility to "switch off" the slide show styles short of killing all CSS</li> +</ul> +</li> +<li>Motive and opportunity combined to point the way...</li> +</ul> +</li> + + +<li class="slide"> +<h1>Where We Are Now</h1> +<ul> +<li>S5 builds on Tantek's scripts and ideas, with input and ideas from several other people</li> +<li>Each slide is enclosed in a classed element; IDs are dynamically assigned via JavaScript</li> +<li>Navigation menu is automatically built at run time</li> +<li>The S5 format is compatible with <a href="http://my.opera.com/community/dev/operashow/documentation/doc_fileformat.html">Opera Show Format 1.0</a>, making it easy to move slides between the two formats as needed</li> +<li>S5 can also run slide shows based on <a href="http://microformats.org/wiki/XOXO">XOXO</a></li> +</ul> +</li> + + +<li class="slide"> +<h1>How It Works</h1> +<ul> +<li>Controls are... +<ul> +<li>Next slide: Space bar, return, right arrow, down arrow, page down, click anywhere in slide that isn't in the control area (lower right corner), click "arrow" in lower right corner, accesskey "X"</li> +<li>Previous slide: Up arrow, left arrow, page up, click "arrow" in lower right corner, accesskey "Z"</li> +<li>Toggle the slide styles: Click on the toggle button (to the left of the arrows), press "t", accesskey "T"</li> +</ul> +...<a href="http://meyerweb.com/eric/tools/s5/features.html#controlchart" rel="external">plus more</a>! +</li> +<li>To invoke the navigation menu: mouse into the lower right corner of the slide (below the navigation arrows)</li> +</ul> +</li> + + +<li class="slide"> +<h1>The Advantages</h1> +<ul> +<li>With one file, you get a slide show, a printable outline, and a screen presentation</li> +<li>Files are incredibly lightweight and compress easily</li> +<li>Thanks to being semantic XHTML, slideshow files are also highly accessible</li> +<li>New slide themes can be created simply by writing new style sheets</li> +<li>Unlike Opera Show, which has all of the above advantages, S5 works in multiple browsers</li> +</ul> +</li> + + +<li class="slide"> +<h1>S5 Default File Structure</h1> +<p style="text-align: center;"> +<img src="pix/s5filemap.png" alt="" title="At a Glance" /> +</p> +</li> + + +<li class="slide"> +<h1>S5 Themes</h1> +<p style="width: 520px; margin: 0 auto; text-align: center;"> +<img src="pix/S501.jpg" alt="" title="Default" /> +<img src="pix/S502.jpg" alt="" title="I18N" /> +<img src="pix/S503.jpg" alt="" title="Blue" /> +<img src="pix/S504.jpg" alt="" title="Flower" /> +(just a sampling) +</p> +</li> + + +<li class="slide"> +<h1>Features New to 1.1</h1> +<ul class="incremental"> +<li>Incremental display of slide content</li> +<li>Font scaling based on window size</li> +<li>Support for PNG alpha channels in all supporting browsers, including IE/Win</li> +<li>Ability to jump to any slide, or skip a number of slides, via keyboard commands</li> +</ul> +</li> + +<li class="slide"> +<h1>Incremental Animation</h1> +<ul> +<li>A demonstration of just one of the many ways to accomplish simple animation-like effects <small>(using a diagram from <a href="http://gmpg.org/xfn/and/" rel="external">"XFN and..."</a>)</small></li> +</ul> +<p class="imgcon" id="anim"> +<img src="pix/mememe01.png" id="me01" alt="" /> +<img src="pix/mememe02.png" alt="" id="me02" class="incremental" /> +<img src="pix/mememe03.png" alt="" id="me03" class="incremental" /> +<img src="pix/mememe04.png" alt="" id="me04" class="incremental" /> +<img src="pix/mememe05.png" alt="" id="me05" class="incremental" /> +</p> +</li> + +<li class="slide"> +<h1>Current Limitations</h1> +<ul> +<li>Only one author can be listed in the metadata</li> +<li>Opera falls back to use OperaShow; thus no extras (like the navigation menu or progress indication) are available</li> +<li>Images are not scaled along with the text when the window size changes</li> +</ul> +</li> + + +<li class="slide"> +<h1>Open To The Public</h1> +<ul> +<li>S5 1.1 is released under an explicit Public Domain license</li> +<li>Contributors to S5 <strong>must</strong> be willing to accept those terms +<ul> +<li>In other words: if you submit a contribution, you are agreeing to abide by and place your contributions into the Public Domain along with S5</li> +<li>On the other hand, anyone can freely use S5 for their own presentations or modify S5 to suit their needs</li> +</ul></li> +</ul> +</li> + + +<li class="slide"> +<h1>In Summary</h1> +<ul> +<li>With minimal scripting, we have recreated and improved upon a (currently) browser-specific technology, making it cross-browser in the process</li> +<li>New themes are just a matter of writing a new style sheet</li> +<li>The S5 format is OSF 1.0 and XOXO compatible</li> +<li>S5 is a very flexible and lightweight slide show system available for anyone to use</li> +</ul> +</li> + +</ol> + +</body> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/xoxo-structure-min.html Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,112 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" + "http://www.w3.org/TR/REC-html40/loose.dtd"> +<html> +<head> +<title>Minimal S5 Structure</title> + +<style type="text/css" media="all"> +pre {padding: 1em 0.2em; border: 1px dotted gray; border-width: 1px 0;} +</style> +</head> +<body id="www-meyerweb-com" class="tools"> + + + +<h2>Minimal S5 Structure</h2> + +<p> +This document provides the details of the S5 presentation file format based on the <a href="http://microformats.org/wiki/xoxo">XOXO microformat</a>. This will first present the minimum required structure, and then discuss optional bits of markup. +</p> + +<h3>The Bare Minimum</h3> +<p> +What follows is an example of the absolute minimum markup required to be considered a valid S5 file. The italicized text indicates technically optional but strongly recommended content. +</p> + +<pre> +<!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> +<title><i>[slide show title]</i></title> +<meta name="version" content="S5 1.1" /> +<link rel="stylesheet" href="ui/slides.css" type="text/css" + media="projection" id="slideProj" /> +<link rel="stylesheet" href="ui/opera.css" type="text/css" + media="projection" id="operaFix" /> +<link rel="stylesheet" href="ui/print.css" type="text/css" + media="print" id="slidePrint" /> +<script src="ui/slides.js" type="text/javascript"></script> +</head> +<body> + +<div class="layout"> + +<div id="currentSlide"></div> +<div id="header"></div> +<div id="footer"> +<div id="controls"></div> +</div> + +</div> +<ol class="presentation xoxo"> + +<li class="slide"> +<h1><i>[slide title]</i></h1> +</li> + +</ol> + +</body> +</html> +</pre> + + +<h4>The first lines</h4> +<p> +The first lines of an S5 presentation file <strong>must</strong> contain an XHTML 1.0 Strict DOCTYPE declaration and a properly namespaced <code>html</code> element. These are both <strong>required</strong>. Although the S5 CSS and JavaScript is compatible with any well-formed HTML or XHTML document, XHTML 1.0 Strict was originally chosen in order to be compatible with OSF 1.0. +</p> +<p> +Because of the compatibility problems present in IE6/Win, the XML prolog should <strong>not</strong> be placed at the top of the document. +</p> + + +<h4>The <code>head</code> element</h4> + +<p> +In addition to the title of the slide show, the <code>head</code> element <strong>must</strong> contain a <code>meta</code> element that describes the file format. This is OSF 1.0 compatible. +</p> +<p> +The <code>head</code> element also <strong>must</strong> contain the <code>link</code> elements and <code>script</code> element shown. The JavaScript file is what drives the labelling of slides, the transition from slide to slide, the creation of the navigation menu, and more. The CSS files, on the other hand, are required to set things so that the JS will work, and also to make the slides look pretty. +</p> +<p> +As of S5 1.1, CSS and JavaScript should not be embedded into the document. It is expected that a future version of S5 will change to allow embedded style sheets and scripts. +</p> + + +<h4>The <code>body</code>'s beginning</h4> + +<p> +At the very beginning of the <code>body</code> is the "layout" <code>div</code>. This is the same structure found in OSF 1.0, and can accept the same elements. S5 adds the markup shown above, which <strong>must</strong> be included in the document. The "controls" <code>div</code> is where the slide show navigation controls appear, and "currentSlide" is the spot where the "slide X of Y" information appears. The "header" and "footer" <code>div</code>s <strong>must</strong> be included as well. Authors are free to add markup and content to the "header" and "footer" <code>div</code>s, but not to remove them entirely. +</p> + + +<h4>The presentation</h4> + +<p> +In keeping with XOXO, all of the slides are contained within a "presentation" <code>ol</code>. It begins immediately after the close of the "layout" <code>div</code> and contains one or more slides. +</p> +<p> +Every slide in the presentation file <strong>must</strong> be enclosed in an <code>li</code> with a <code>class</code> containing the word <code>slide</code> in its value. While a slide <code>li</code> can be given an <code>id</code>, the value will be overwritten by the S5 JavaScript routines. Thus in S5, <code>id</code> attributes on slide <code>li</code>s are discouraged. +</p> +<p> +The title of a slide should be contained by an <code>h1</code> element, as in OSF 1.0. In S5, authors are strongly encouraged to have a slide title element, even if its content is empty. This will help keep the navigation menu working as expected. The markup of content for each slide is up to the individual author. Blank slides are certainly permitted, although would seem to be sort of useless. +</p> + + + + + + +</body> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/xoxo-structure-ref.html Sat Sep 11 23:46:30 2010 +0900 @@ -0,0 +1,346 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" + "http://www.w3.org/TR/REC-html40/loose.dtd"> +<html> +<head> +<title>S5 1.1 Reference (XOXO Version)</title> + +<link rel="stylesheet" type="text/css" href="s5.css" media="screen"> +<link rel="stylesheet" type="text/css" href="s5ref.css" media="screen"> +</head> +<body id="www-meyerweb-com" class="tools"> + + + + +<h2>S5 1.1 Reference (XOXO Version)</h2> + +<p> +This document provides a full reference to the S5 presentation file format based on the <a href="http://microformats.org/wiki/xoxo">XOXO microformat</a>. The following conventions are used: +</p> + +<ul> +<li>Content <span class="required">styled in this manner</span> indicates something that is required by the S5 1.1 format.</li> +<li>Content <span class="recommended">styled in this manner</span> indicates something that is recommended in the S5 1.1 format.</li> +<li>Content <span class="optional">styled in this manner</span> indicates something that is optional in the S5 1.1 format.</li> +<li>Content <span class="generated">styled in this manner</span> indicates something that is generated by the S5 1.1 JavaScript. These are not provided in the code listings.</li> +</ul> + +<p> +A complete example file can be found at the end of this document. +</p> + + +<h3>Document Skeleton</h3> +<pre> +<!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> + <ol class="presentation xoxo"> </ol> +</body> + +</html> +</pre> + +<p> +This is the basic top-level skeleton for an article file. Most of these top-level elements all have descendent elements, which are explained by the rest of this document. +</p> + +<dl> + +<dt class="required"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></dt> +<dd>The document type used for S5 slide shows. XHTML 1.0 Strict was chosen to allow compatibility with OSF 1.0.</dd> + +<dt class="required"><html xmlns="http://www.w3.org/1999/xhtml"> </html></dt> +<dd>The root element of the document, which contains pretty much everything else. Required by the DOCTYPE.</dd> + +<dt class="required"><head> </head></dt> +<dd>This element contains the header information for the presentation, such as title of the presentation, metadata about the presentation's author, links to style sheets and scripts, and so on.</dd> + +<dt class="required"><body> </body></dt> +<dd>The actual body of the presentation, containing all of the content and components that will be displayed to the viewer. Not required by the DOCTYPE, but required for S5 compliance.</dd> + +<dt class="required"><div class="layout"> </div></dt> +<dd>This element contains all of the bits of layout that appear on every slide, including the header and footer and the navigation controls.</dd> + +<dt class="required"><ol class="presentation xoxo"> </ol></dt> +<dd>A container for all of the individual slides.</dd> + +</dl> + + +<h3><code>head</code> — The Document's Metadata</h3> +<pre> +<head> +<title><i>[slide show title]</i></title> +<meta name="version" content="S5 1.1" /> +<span class="optional"><meta name="generator" content="<i>[generating program]</i>" /> +<meta name="presdate" content="<i>[presentation date]</i>" /> +<meta name="author" content="<i>[author's name]</i>" /> +<meta name="company" content="<i>[author's employer]</i>" /> +<meta http-equiv="Content-Type" content="<i>[content-type]</i>" /> +<meta name="defaultView" content="<i>[value]</i>" /> +<meta name="controlVis" content="<i>[value]</i>" /></span> +<link rel="stylesheet" href="v11b1/slides.css" type="text/css" media="projection" id="slideProj" /> +<link rel="stylesheet" href="v11b1/outline.css" type="text/css" media="screen" id="outlineStyle" /> +<link rel="stylesheet" href="v11b1/print.css" type="text/css" media="print" id="slidePrint" /> +<link rel="stylesheet" href="v11b1/opera.css" type="text/css" media="projection" id="operaFix" /> +<script src="ui/slides.js" type="text/javascript"></script> +</head> +</pre> + +<p> +intro +</p> + +<dl> + +<dt class="required"><title><i>[slide show title]</i></title></dt> +<dd>Contains the title of the presentation.</dd> + +<dt class="required"><meta name="version" content="S5 1.1" /></dt> +<dd>Provides the exact markup format being used for the presentation file. Copied from OSF 1.0.</dd> + +<dt class="optional"><meta name="generator" content="<i>[generating program]</i>" /></dt> +<dd>Indicates the tool that was used to create the presentation file. If a tool was used, this element is <strong>required</strong>. If the presentation was authored by hand, the value can be set to the author's name or the text editor they used; otherwise, the element can be omitted. Copied from OSF 1.0.</dd> + +<dt class="optional"><meta name="presdate" content="<i>[presentation date]</i>" /></dt> +<dd>The date on which the presentation was (or is to be) delivered. Copied from OSF 1.0.</dd> + +<dt class="optional"><meta name="author" content="<i>[author's name]</i>" /></dt> +<dd>The name of the presentation's primary author. There is currently no ability to designate secondary authors. Copied from OSF 1.0.</dd> + +<dt class="optional"><meta name="company" content="<i>[author's employer]</i>" /></dt> +<dd>The company for which the primary presenter works. This could be more broadly construed to be the author's primary affiliation, whether or not it is a corporate entity. Copied from OSF 1.0.</dd> + +<dt class="optional"><meta http-equiv="Content-Type" content="<i>[content-type]</i>" /></dt> +<dd>Indicates the presentation file's content type. One possible value is <code>application/xhtml+xml;charset=utf-8</code>.</dd> + +<dt class="optional"><meta name="defaultView" content="<i>[value]</i>" /></dt> +<dd>Sets the initial view for the presentation using one of two values: <code>slideshow</code> and <code>outline</code>. The default value is <code>slideshow</code>.</dd> + +<dt class="optional"><meta name="controlVis" content="<i>[value]</i>" /></dt> +<dd>Sets the default presentation of the controls to be either <code>visible</code> or <code>hidden</code>. The default value is <code>visible</code>.</dd> + +<dt class="required"><link rel="stylesheet" href="ui/slides.css" type="text/css" media="projection" id="slideProj" /></dt> +<dd>This links to the CSS that drives the visual presentation of the slide show. The referenced file consists of three <code>@import</code> directives that point to still other style sheets; see the <a href="filemap.html">file map</a> for more details.</dd> + +<dt class="required"><link rel="stylesheet" href="ui/outline.css" type="text/css" media="print" id="outlineStyle" /></dt> +<dd>This links to the style sheet used to present the outline view of the slide show.</dd> + +<dt class="required"><link rel="stylesheet" href="ui/print.css" type="text/css" media="print" id="slidePrint" /></dt> +<dd>This links to the print-medium style sheet, which contains directives that format the presentation for printing.</dd> + +<dt class="required"><link rel="stylesheet" href="ui/opera.css" type="text/css" media="projection" id="operaFix" /></dt> +<dd>This links to the style sheet that allows Opera to run the slide show through Opera Show.</dd> + +<dt class="required"><script src="ui/slides.js" type="text/javascript"></script></dt> +<dd>This references the JavaScript file that make the slide show work.</dd> + +</dl> + + +<h3>Layout Information</h3> + +<pre> +<div class="layout"> + + <div id="controls"></div> + <div id="currentSlide"></div> + <div id="header"><i>[any header content]</i></div> + <div id="footer"><i>[any footer content]</i></div> + <span class="optional"><div class="topleft"><i>[top left layout bit]</i></div> + <div class="topright"><i>[top right layout bit]</i></div> + <div class="bottomleft"><i>[bottom left layout bit]</i></div> + <div class="bottomright"><i>[bottom right layout bit]</i></div></span> + +</div> +</pre> + +<dl> + +<dt class="required"><div id="controls"></div></dt> +<dd> +This is the structural hook into which the slide navigation controls are filled in by the JavaScript. This includes the popup navigation menu, the forward/backward links, and the "style toggle" link. If no controls are desired, leave the markup in place and suppress its display via CSS, although doing so is <strong>strongly</strong> discouraged. It is strongly recommended that this element be left unfilled, since any content in the XHTML file will be overwritten by the JavaScript. +The markup generated by the JavaScript includes a few elements: + +<dl> +<dt class="generated"><form id="controlForm"> </form></dt> +<dd> +This element encloses all the of the slide controls. Within it are two <tt>div</tt> elements, each of which contains the actual controls. + +<dl> +<dt class="generated"><div id="navLinks"> </div></dt> +<dd> + +<dl> +<dt class="generated"><a id="toggle">&#216;</a></dt> +<dd>The link used to switch the slide styles off and on.</dd> +<dt class="generated"><a id="prev">&laquo;</a></dt> +<dd>The link used to move to the previous slide.</dd> +<dt class="generated"><a id="next">&raquo;</a></dt> +<dd>The link used to move to the next slide.</dd> +</dl> + +</dd> +<dt class="generated"><div id="navList"> </div></dt> +<dd> + +<dl> +<dt class="generated"><select id="jumplist"></select></dt> +<dd>The foundation of the slide navigation list. The JavaScript generates a number of <tt>option</tt> elements within this <tt>select</tt>.</dd> +</dl> + +</dd> +</dl> + +</dd> + +<dt class="required"><div id="currentSlide"></div></dt> +<dd>This is the structural hook into which the current progress indicator (e.g., "5 / 21") is filled in by the JavaScript. If no progress information is desired, leave the markup in place and suppress its display via CSS. It is strongly recommended that this element be left unfilled, since any content in the XHTML file will be overwritten by the JavaScript. +The markup generated by the JavaScript includes three elements: + +<dl> +<dt class="generated"><span id="csHere"><i>[current slide number]</i></span></dt> +<dd>The number of the slide currently being displayed.</dd> +<dt class="generated"><span id="csSep"><i>/</i></span></dt> +<dd>The separator character between the current slide number and the total slides number; the character currently is a forward slash. A future version of S5 may allow this to be changed by a means other than editing the JavaScript file.</dd> +<dt class="generated"><span id="csTotal"><i>[total slides]</i></span></dt> +<dd>The total number of slides in the slide show. This count does not include the first slide in the presentation, which is numbered zero.</dd> +</dl> + +</dd> + +<dt class="required"><div id="header"><i>[any header content]</i></div></dt> +<dd>Any header content or effects are placed inside this element. Even if the header has no content, it should remain as an unfilled element.</dd> + +<dt class="required"><div id="footer"> </div></dt> +<dd> +Any footer content or visual effects are placed inside this element. +</dd> + +</dl></dd> + +<dt class="optional"><div class="topleft"><i>[top left layout bit]</i></div> +<div class="topright"><i>[top right layout bit]</i></div> +<div class="bottomleft"><i>[bottom left layout bit]</i></div> +<div class="bottomright"><i>[bottom right layout bit]</i></div></dt> +<dd>These elements have a <tt>class</tt> attribute containing a value indicating their layout position, such as <code><div class="topleft"></code>. They may also be given an optional <tt>id</tt> attribute that refers to the relevant <tt>meta</tt> element, so editors can determine what information was positioned and use this to their advantage in the editing UI. Copied from OSF 1.0.</dd> + +</dl> + + +<h3>The Slides</h3> + +<pre> +<ol class="presentation xoxo"> + + <li class="slide"> + <span class="recommended"><h1><i>[slide title]</i></h1></span> + <span class="optional"><div class="slidecontent"></span> + <i>[slide content]</i> + <span class="optional"></div></span> + <span class="optional"><div class="handout"> + <i>[extra content not displayed in slide show]</i> + </div></span> + </li> + +</ol> +</pre> + +<dl> + +<dt class="required"><li class="slide"> </li></dt> +<dd> +The presentation section of the file contains one or more slides, each one a list item. The contents of each slide are obviously up to the author of the presentation. This element contains a number of descendants. + +<dl> + +<dt class="recommended"><h1><i>[slide title]</i></h1></dt> +<dd>The contents of this element give the title of the individual slide. These contents are collected by the JavaScript and used to build the slide show's navigation menu. If the slide is untitled, it is recommended that an unfilled <tt>h1</tt> element be left in place.</dd> + +<dt class="optional"><div class="slidecontent"> </div></dt> +<dd>The contents of the slide can optionally be wrapped in this <tt>div</tt>, although a slide can have content without having it placed inside this <tt>div</tt>. Note that while use of this element is optional, having actual content for a slide is highly recommended. The content of the slide can be any valid XHTML markup and content. A common slide would contain an unordered list of five or so talking points.</dd> + +<dt class="optional"><div class="handout"> </div></dt> +<dd>This is used to enclose any extra information that should be included in the printed version of the presentation, but should not appear in the slide show. The contents can be any valid XHTML markup and content, and there is no restriction on length. As an example, a presentation on CSS might place examples of CSS techniques in one of these <tt>handout</tt> sections.</dd> + +</dl> + +</dd> + +</dl> + + + +<h3>Complete Example</h3> + +<pre> +<!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> +<title><i>[slide show title]</i></title> +<meta name="version" content="S5 1.1" /> +<span class="optional"><meta name="generator" content="<i>[generating program]</i>" /> +<meta name="presdate" content="<i>[presentation date]</i>" /> +<meta name="author" content="<i>[author's name]</i>" /> +<meta name="company" content="<i>[author's employer]</i>" /> +<meta http-equiv="Content-Type" content="<i>[content-type]</i>" /> +<meta name="defaultView" content="<i>[value]</i>" /> +<meta name="controlVis" content="<i>[value]</i>" /></span> +<link rel="stylesheet" href="v11b1/slides.css" type="text/css" media="projection" id="slideProj" /> +<link rel="stylesheet" href="v11b1/outline.css" type="text/css" media="screen" id="outlineStyle" /> +<link rel="stylesheet" href="v11b1/print.css" type="text/css" media="print" id="slidePrint" /> +<link rel="stylesheet" href="v11b1/opera.css" type="text/css" media="projection" id="operaFix" /> +<script src="ui/slides.js" type="text/javascript"></script> +</head> +<body> + +<div class="layout"> + + <div id="controls"></div> + <div id="currentSlide"></div> + <div id="header"><i>[any header content]</i></div> + <div id="footer"><i>[any footer content]</i></div> + <span class="optional"><div class="topleft"><i>[top left layout bit]</i></div> + <div class="topright"><i>[top right layout bit]</i></div> + <div class="bottomleft"><i>[bottom left layout bit]</i></div> + <div class="bottomright"><i>[bottom right layout bit]</i></div></span> + +</div> +<ol class="presentation xoxo"> + + <li class="slide"> + <span class="optional"><h1><i>[slide show title]</i></h1> + <h2><i>[slide show subtitle]</i></h2> + <h3><i>[author's name]</i></h3> + <h4><i>[author's employer]</i></h4></span> + </li> + + <li class="slide"> + <span class="recommended"><h1><i>[slide title]</i></h1></span> + <span class="optional"><div class="slidecontent"></span> + <i>[slide content]</i> + <span class="optional"></div></span> + <span class="optional"><div class="handout"> + <i>[extra content not displayed in slide show]</i> + </div></span> + </li> + +</ol> + +</body> +</html> +</pre> + + + + +</body> +</html>