source: stylesheets/lfs-xsl/docbook-xsl-1.78.1/slides/s5/index-xoxo.html@ c158fe6

7.5-systemd 7.6-systemd 7.7-systemd 7.8-systemd 7.9-systemd
Last change on this file since c158fe6 was b1a51ac1, checked in by Krejzi <krejzi@…>, 11 years ago

Import new branch

git-svn-id: ​http://svn.linuxfromscratch.org/LFS/branches/systemd/BOOK@10389 4aa44e1e-78dd-0310-a6d2-fbcd4c07a689
  • Property mode set to 100755
File size: 6.8 KB
RevLine 
[b1a51ac1]1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3
4<html xmlns="http://www.w3.org/1999/xhtml">
5
6<head>
7<title>S5: An Introduction</title>
8<!-- metadata -->
9<meta name="generator" content="S5" />
10<meta name="version" content="S5 1.2a2" />
11<meta name="author" content="Eric A. Meyer" />
12<meta name="company" content="Complex Spiral Consulting" />
13<!-- configuration parameters -->
14<meta name="defaultView" content="slideshow" />
15<meta name="controlVis" content="hidden" />
16<!-- style sheet links -->
17<link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" />
18<link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" />
19<link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" />
20<link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" />
21<!-- embedded styles -->
22<style type="text/css" media="all">
23.imgcon {width: 525px; margin: 0 auto; padding: 0; text-align: center;}
24#anim {width: 270px; height: 320px; position: relative; margin-top: 0.5em;}
25#anim img {position: absolute; top: 42px; left: 24px;}
26img#me01 {top: 0; left: 0;}
27img#me02 {left: 23px;}
28img#me04 {top: 44px;}
29img#me05 {top: 43px;left: 36px;}
30</style>
31<!-- S5 JS -->
32<script src="ui/default/slides.js" type="text/javascript"></script>
33</head>
34<body>
35
36<div class="layout">
37<div id="controls"><!-- DO NOT EDIT --></div>
38<div id="currentSlide"><!-- DO NOT EDIT --></div>
39<div id="header"></div>
40<div id="footer">
41<h1>S5 Testbed</h1>
42<h2>Your computer &#8226; Today's date</h2>
43</div>
44</div>
45
46<ol class="xoxo presentation">
47
48<li class="slide">
49<h1>S5 Testbed</h1>
50<h3>Eric A. Meyer</h3>
51<h4><a href="http://www.complexspiral.com/" rel="external">Complex Spiral Consulting</a></h4>
52<div class="handout"></div>
53</li>
54
55
56<li class="slide">
57<h1>What Is S5?</h1>
58<ul>
59<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>
60<li>One XHTML document provides all of the slide show's content</li>
61<li>CSS handles the layout and look of the slides</li>
62<li>JavaScript handles the dynamic aspects of the show</li>
63<li>That's all there is to it! (<a href="#slide10">skip to summary</a>; demonstrates links internal to the slide show)</li>
64</ul>
65
66<div class="notes">
67<ul>
68<li>I have notes here!</li>
69<li>Keen.</li>
70<li>Remember to tell people that notes are a new feature in 1.2</li>
71</ul>
72</div>
73
74</li>
75
76
77<li class="slide">
78<h1>Operatic Origins</h1>
79<ul>
80<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>
81<li>Allows a single XHTML document to be turned into a PowerPoint-like slide show</li>
82<li>Adding screen and print style sheets allows for multi-medium views of a single document</li>
83<li>Highly efficient, but highly browser centric...</li>
84</ul>
85
86<div class="notes">
87<ul>
88<li>S5 and OperaShow diverged greatly in S5 1.1</li>
89<li>S5 1.2 should (we hope) bring them into harmony once more</li>
90</ul>
91</div>
92
93</li>
94
95
96<li class="slide">
97<h1>Incremental Display</h1>
98<ul class="incremental show-first">
99<li>Keep hitting/clicking "next" as long as it isn't the control link (&raquo;)</li>
100<li>Bullet points are revealed one by one
101<ul class="incremental">
102<li>All based on class name of <code>inc</code></li>
103<li>Lists can be classed to make items appear individually</li>
104<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>
105</ul>
106</li>
107<li>Let's try it again, but without the first bullet point being pre-highlighted...</li>
108</ul>
109</li>
110
111
112<li class="slide">
113<h1>Incremental Display II</h1>
114<ul class="incremental">
115<li>Keep hitting/clicking "next" as long as it isn't the control link (&raquo;)</li>
116<li>Bullet points are revealed one by one
117<ul>
118<li>All based on class name of <code>incremental</code></li>
119<li>Lists can be classed to make items appear individually</li>
120<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>
121</ul>
122</li>
123<li>Notice how the sub-list was part of the parent bullet point; that was done on purpose</li>
124<li>Now to move on to other test slides!</li>
125</ul>
126</li>
127
128
129<li class="slide">
130<h1>PNG Alpha Tests</h1>
131<div style="width: 400px; height: 150px; text-align: center; background: url(ui/bg-shade.png)">
132<p>DIV with PNG background followed by foreground PNG</p>
133<img src="ui/bg-shade.png" alt="" title="A translucent image" />
134</div>
135<div style="width: 100%; height: 150px; text-align: center; background: url(ui/bg-shade.png)">
136<p>DIV with PNG background followed by foreground PNG</p>
137<img src="ui/bg-shade.png" alt="" title="A translucent image" />
138</div>
139</li>
140
141
142<li class="slide">
143<h1>S5 Default File Structure</h1>
144<p style="text-align: center;">
145<img src="pix/s5filemap.png" alt="" title="At a Glance" />
146</p>
147</li>
148
149
150<li class="slide">
151<h1>S5 Themes</h1>
152<p class="imgcon">
153<img src="pix/S501.jpg" alt="" title="Default" />
154<img src="pix/S502.jpg" alt="" title="I18N" />
155<img src="pix/S503.jpg" alt="" title="Blue" />
156<img src="pix/S504.jpg" alt="" title="Flower" />
157(one way of presenting multiple graphics)
158</p>
159</li>
160
161
162<li class="slide">
163<h1>Incremental S5 Themes</h1>
164<p class="imgcon">
165<img src="pix/S501.jpg" alt="" title="Default" class="incremental" />
166<img src="pix/S502.jpg" alt="" title="I18N" class="incremental" />
167<img src="pix/S503.jpg" alt="" title="Blue" class="incremental" />
168<img src="pix/S504.jpg" alt="" title="Flower" class="incremental" />
169(one by one!)
170</p>
171</li>
172
173
174<li class="slide">
175<h1>Incremental Animation</h1>
176<ul>
177<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>
178</ul>
179<p class="imgcon" id="anim">
180<img src="pix/mememe01.png" id="me01" alt="" />
181<img src="pix/mememe02.png" alt="" id="me02" class="incremental" />
182<img src="pix/mememe03.png" alt="" id="me03" class="incremental" />
183<img src="pix/mememe04.png" alt="" id="me04" class="incremental" />
184<img src="pix/mememe05.png" alt="" id="me05" class="incremental" />
185</p>
186</li>
187
188
189<li class="slide">
190<h1>In Summary</h1>
191<ul>
192<li>With minimal scripting, we have recreated and improved upon a (currently) browser-specific technology, making it cross-browser in the process</li>
193<li>The S5 format is OSF 1.0 compatible</li>
194<li>S5 is a very flexible and lightweight slide show system available for anyone to use</li>
195</ul>
196</li>
197
198</ol>
199
200</body>
201</html>
Note: See TracBrowser for help on using the repository browser.