5 alternativních systémů jak tvořit slidy
Pokud občas nebo více přednášíte, určitě jste zkusili nějaký tento program na tvorbu slidů. Já žádný z nich nepovažuji za ideální, hlavně pokud potřebujete mít ve slidech zdrojové kódy. Pokud máte slidy v html nebo xml můžete je verzovat pomocí například Gitu nebo SVN, to vám půjde s binárními formáty také, ale neuvidíte ty diffy, které jsou užitečné.
- Microsoft PowerPoint
- OpenOffice Impress
- Apple Keynote
- Prezi - více v článku Martina Hassmana Umí tohle i váš prezentační systém? Aneb jak jsem zkoušel Prezi
Určitě jich bude ještě více. Pokud pracujete s HTML a XML máte další možnosti, ať jsou to Docbook slides nebo některá varianta založená na HTML nebo markupu (Markdown, Textile, Texy).
Dnes tu představím 5 systémů, které generují HTML nebo se slidy v HTML přímo píšou.
- S5
- Swinger
- Slidedown
- W3C (Slidy, B5, slidemaker)
- JUSH slides
1. S5
Klasické slidy v HTML dole je vidět jak vypadá jednoduchý předpis.
<!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>[slide show title]</title> <meta name="version" content="S5 1.0" /> <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> <div id="currentSlide"></div> <div id="header"></div> <div id="footer"> <div id="controls"></div> </div> </div> <div> <div> <h1>[slide title]</h1> </div> </div> </body> </html>
Demo je k dispozici na http://meyerweb.com/eric/tools/s5/s5-intro.html
2. Swinger
Toto řešení je zajímavé, že máte k dispozici celý editor markupu a všechny data jsou uloženy v CouchDb. Aplikace i prohlížení slidů je jen HTML a Javascript.
Online verze http://swinger.quirkey.com/
3. Slidedown
Řešení založené na Ruby, které podle předpisu v markdownu vygeneruje html prezentaci včetně zvýraznění ruby syntaxe i šablon.
!SLIDE
# This is my talk
!SLIDE
## I hope you enjoy it
!SLIDE code
def foo
:bar
end
!SLIDE
Google is [here](http://google.com)
!SLIDE
# Questions?
Zvýraznění syntaxe se dělá takto, například pro javascript.
@@@ js
function foo() {
return 'bar';
}
@@@
Demo je dostupné zde http://nakajima.github.com/slidedown/
4. W3C Talks Tools (Slidy, B5, Slidemaker/slideme)
Struktura je velmi jednoduchá, základní část je tvořena tagem <div class=“slide“ ></div>
a jsou přidané třídy pro speciální chování.
<div>
<h1>Analysts - "Open standards programming will become
mainstream, focused around VoiceXML"</h1>
<!-- use CSS positioning and scaling for adaptive layout -->
<img src="trends.png" width="50%" style="float:left"
alt="projected growth of VoiceXML" />
<blockquote style="float:right;width: 35%">
VoiceXML will dominate the voice environment, due to its
flexibility and eventual multimodal capabilities
</blockquote><br clear="all" />
<p style="text-align:center">Source Data Monitor, March
2004</p>
</div>
5. JUSH Slides
Poslední je moje vlastní řešení je založené na W3C Slidy a je doplněné o JUSH zvýrazňovač, který pomůže v tom co já nejvíce potřebuji.
Kromě zvýraznění přidá JUSH linky na dokumentaci u klíčových slov pro html, javascript, php a další. To udělá ze slidů dobrý studijní materiál.
Za další výhodu vidím jednoduchý předpis v html, jen používání xmp tagu není ideální.
<div class="slide">
<h1>Filter Input</h1>
<pre class="jush jush-php"><xmp><form method="post">
<label for="username">Username:</label><input type="text" name="username" />
<label for="password">Password:</label><input type="text" name="password" />
<label for="color">Select:</label><select name="colour">
<option>Red</option>
<option>Blue</option>
</select>
<input type="submit" />
</form></xmp></pre>
<pre class="jush-php"><xmp>// c_type extension
$clean = array();
if (c_type_aplha($_POST['username']) {
$clean['username'] = $_POST['username'];
}
// filter
$args = array('username' => FILTER_SANITIZE_STRING, ...);
$myinputs = filter_input_array(INPUT_POST, $args);
</xmp></pre>
<ul>
<li><a href="http://cz.php.net/manual/en/filter.filters.validate.php">Validate filters</a></li>
<li><a href="http://cz.php.net/manual/en/filter.filters.sanitize.php">Sanitize filters</a></li>
</ul>
</div>
Pokud máte nějaké další zajímavé řešení podělte se s námi v komentářích.Pokud občas nebo více přednášíte, určitě jste zkusili nějaký tento program na tvorbu slidů. Já žádný z nich nepovažuji za ideální, hlavně pokud potřebujete mít ve slidech zdrojové kódy. Pokud máte slidy v html nebo xml můžete je verzovat pomocí například Gitu nebo SVN, to vám půjde s binárními formáty také, ale neuvidíte ty diffy, které jsou užitečné.
- Microsoft PowerPoint
- OpenOffice Impress
- Apple Keynote
- Prezi - více v článku Martina Hassmana Umí tohle i váš prezentační systém? Aneb jak jsem zkoušel Prezi
Určitě jich bude ještě více. Pokud pracujete s HTML a XML máte další možnosti, ať jsou to Docbook slides nebo některá varianta založená na HTML nebo markupu (Markdown, Textile, Texy).
Dnes tu představím 5 systémů, které generují HTML nebo se slidy v HTML přímo píšou.
- S5
- Swinger
- Slidedown
- W3C (Slidy, B5, slidemaker)
- JUSH slides
1. S5
Klasické slidy v HTML dole je vidět jak vypadá jednoduchý předpis.
<!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>[slide show title]</title> <meta name="version" content="S5 1.0" /> <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> <div id="currentSlide"></div> <div id="header"></div> <div id="footer"> <div id="controls"></div> </div> </div> <div> <div> <h1>[slide title]</h1> </div> </div> </body> </html>
Demo je k dispozici na http://meyerweb.com/eric/tools/s5/s5-intro.html
2. Swinger
Toto řešení je zajímavé, že máte k dispozici celý editor markupu a všechny data jsou uloženy v CouchDb. Aplikace i prohlížení slidů je jen HTML a Javascript.
Online verze http://swinger.quirkey.com/
3. Slidedown
Řešení založené na Ruby, které podle předpisu v markdownu vygeneruje html prezentaci včetně zvýraznění ruby syntaxe i šablon.
!SLIDE
# This is my talk
!SLIDE
## I hope you enjoy it
!SLIDE code
def foo
:bar
end
!SLIDE
Google is [here](http://google.com)
!SLIDE
# Questions?
Zvýraznění syntaxe se dělá takto, například pro javascript.
@@@ js
function foo() {
return 'bar';
}
@@@
Demo je dostupné zde http://nakajima.github.com/slidedown/
4. W3C Talks Tools (Slidy, B5, Slidemaker/slideme)
Struktura je velmi jednoduchá, základní část je tvořena tagem <div class=“slide“ ></div>
a jsou přidané třídy pro speciální chování.
<div>
<h1>Analysts - "Open standards programming will become
mainstream, focused around VoiceXML"</h1>
<!-- use CSS positioning and scaling for adaptive layout -->
<img src="trends.png" width="50%" style="float:left"
alt="projected growth of VoiceXML" />
<blockquote style="float:right;width: 35%">
VoiceXML will dominate the voice environment, due to its
flexibility and eventual multimodal capabilities
</blockquote><br clear="all" />
<p style="text-align:center">Source Data Monitor, March
2004</p>
</div>
5. JUSH Slides
Poslední je moje vlastní řešení je založené na W3C Slidy a je doplněné o JUSH zvýrazňovač, který pomůže v tom co já nejvíce potřebuji.
Kromě zvýraznění přidá JUSH linky na dokumentaci u klíčových slov pro html, javascript, php a další. To udělá ze slidů dobrý studijní materiál.
Za další výhodu vidím jednoduchý předpis v html, jen používání xmp tagu není ideální.
<div class="slide">
<h1>Filter Input</h1>
<pre class="jush jush-php"><xmp><form method="post">
<label for="username">Username:</label><input type="text" name="username" />
<label for="password">Password:</label><input type="text" name="password" />
<label for="color">Select:</label><select name="colour">
<option>Red</option>
<option>Blue</option>
</select>
<input type="submit" />
</form></xmp></pre>
<pre class="jush-php"><xmp>// c_type extension
$clean = array();
if (c_type_aplha($_POST['username']) {
$clean['username'] = $_POST['username'];
}
// filter
$args = array('username' => FILTER_SANITIZE_STRING, ...);
$myinputs = filter_input_array(INPUT_POST, $args);
</xmp></pre>
<ul>
<li><a href="http://cz.php.net/manual/en/filter.filters.validate.php">Validate filters</a></li>
<li><a href="http://cz.php.net/manual/en/filter.filters.sanitize.php">Sanitize filters</a></li>
</ul>
</div>
Pokud máte nějaké další zajímavé řešení podělte se s námi v komentářích.
Nejnovější komentáře