Skip to content
Snippets Groups Projects
Commit 3649beaa authored by Marta Vila Fernandes's avatar Marta Vila Fernandes :game_die:
Browse files

Merge branch 'checklinks' into 'master' 

add check links and remove the old training link

See merge request !3
parents cc98efb3 1391b1c2
Branches test
No related tags found
1 merge request!3add check links and remove the old training link
Pipeline #5808888 passed
Stage: validation
Stage: pages
Hide whitespace changes
Inline Side-by-side
Showing
with 12 additions and 735 deletions
.gitlab-ci.yml
+ 12
− 0
View file @ 3649beaa
include: include:
- project: 'authoring/documentation/mkdocs-ci' - project: 'authoring/documentation/mkdocs-ci'
file: 'mkdocs-gitlab-pages.gitlab-ci.yml' file: 'mkdocs-gitlab-pages.gitlab-ci.yml'
check_links:
stage: pages
image: becheran/mlc:0.16.1
script:
- mlc . | tee output.log | grep -v '\[\(WARN\|Warn\| OK \)\]'
# For now...
when: manual
artifacts:
paths:
- output.log
when: always
docs/index.md
+ 0
− 2
View file @ 3649beaa
...@@ -9,8 +9,6 @@ Finally, users will get a better understanding about our choices around the supp ...@@ -9,8 +9,6 @@ Finally, users will get a better understanding about our choices around the supp
A number of links to more specific CERN trainings will be given when necessary. A number of links to more specific CERN trainings will be given when necessary.
The latest version of the training material will always be found at <https://cern.ch/linuxtraining/>
## What this guide will not do ## What this guide will not do
* This guide will not mention unsupported distributions. It will focus on the newest supported version at CERN: i.e. _CERN CentOS 7_. * This guide will not mention unsupported distributions. It will focus on the newest supported version at CERN: i.e. _CERN CentOS 7_.
......
slides/index.html deleted 100644 → 0
+ 0
− 268
View file @ cc98efb3
<!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>Linux survival kit training</title>
<!-- metadata -->
<meta name="generator" content="S5" />
<meta name="version" content="S5 1.1" />
<meta name="presdate" content="20181113" /> <!-- FIXME -->
<meta name="author" content="Linux Team" />
<meta name="company" content="linux.support@cern.ch" />
<!-- 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>lsk training</h1>
<h2>http://linux.cern.ch &#8226; 2018</h2> <!-- FIXME -->
</div>
</div>
<div class="presentation">
<div class="slide">
<h1>Linux survival kit training</h1>
<h3>Thomas Oulevey</h3> <!-- FIXME -->
<h4><a href="http://cern.ch/it" rel="external">CERN IT Departement</a></h4>
<div class="handout"></div>
</div>
<div class="slide">
<h1>1. Introduction</h1>
<ul>
<li>Hands-on training <a href=http://cern.ch/linuxtraining>website</a></li>
<li>Training computer: login with keyboard username</li>
<li>Let's check your permissions </li>
<ul>
<li>lxplus.cern.ch</li>
<li>Openstack</li>
<li>CERNBox</li>
</ul>
<li>Slides navigation and tips</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>
</div>
<div class="slide">
<h1>2. Lxplus </h1>
<ul>
<li>Cluster of Linux machines maintained by IT Departement</li>
<li>lxplus.cern.ch</li>
<li>lxplus7.cern.ch</li>
</ul>
</div>
<div class="slide">
<h1>3. Linux @ CERN </h1>
<ul>
<li>Getting help</li>
<li>Official Website <a href="http://linux.cern.ch">http://linux.cern.ch</a></li>
</ul>
</div>
<div class="slide">
<h1>3. Linux @ CERN </h1>
<ul>
<li>As of January 2018, at CERN, we support two distributions: Scientific Linux CERN 6 and CERN CentOS 7.</li>
<li>Scientific Linux and CentOS are derived from Red Hat Enterprise Linux (RHEL), with Red Hat trademarks removed, thus making it freely available.</li>
<li>New releases are typically produced about few weeks after each Red Hat release. The distributions lifecycle can be consulted on our website.</li>
<li>Technical support is primarily provided, at CERN, by Linux Support and outside by the community.</li>
<li>Open source projects: everybody can participate.</li>
</ul>
</div>
<div class="slide">
<h1>3. Scientific Linux 6</h1>
<p style="text-align: center;">
<img src="pix/slc6.png" alt="" title="Scientific Linux 6" />
</p>
</div>
<div class="slide">
<h1>3. CERN CentOS 7</h1>
<p style="text-align: center;">
<img src="pix/cc7.png" alt="" title="CERN CentOS 7" />
</p>
</div>
<div class="slide">
<h1>3. Linux @ CERN </h1>
<ul>
<li>Policy to stay compatible with upstream Red Hat Linux Enterprise.No package will be upgraded to newer version unless it's done by Red Hat.</li>
<li>Reports bugs through SNOW, and we can ask Red Hat to fix it.</li>
<li>If your package in not available, you have few way to publish it:</li>
<ul>
<li>Package it for EPEL</li>
<li>Package it in a Special Interest Group (CC7)</li>
<li>Package it in our internal repo</li>
</ul>
<li>Both distributions are integrated with Active Directory and we provide tools to access common resources : calendaring/email with Thunderbird, chat with Pidgin, user authentication with sssd. `man locmap`. More on our website.</li>
</ul>
</div>
<div class="slide">
<h1>3. Installation </h1>
<ul>
<li>Let's install together a supported CC7 !</li>
<li>Website reference : <a href="http://linux.web.cern.ch/linux/centos7/docs/install.shtml">http://linux.web.cern.ch/linux/centos7/docs/install.shtml</a></li>
<li>We will be using an Openstack VM <a href="http://openstack.cern.ch">http://openstack.cern.ch</a></li>
</ul>
</div>
<div class="slide">
<h1>3. Automated Installation </h1>
<ul>
<li>Let's re-install together a supported CC7 !</li>
<li>We will be using a kickstart file and aims2 tools</li>
</ul>
</div>
<!--
<div 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>
</div>
<div 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 (&raquo;)</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>
</div>
<div class="slide">
<h1>Incremental Display II</h1>
<ul class="incremental">
<li>Keep hitting/clicking "next" as long as it isn't the control link (&raquo;)</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>
</div>
<div 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>
</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 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>
</div>
<div 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>
</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>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>
</div> -->
</div>
</body>
</html>
slides/pix/.DS_Store deleted 100644 → 0
+ 0
− 0
View file @ cc98efb3
File deleted
slides/pix/S501.jpg deleted 100644 → 0
+ 0
− 0
View file @ cc98efb3
slides/pix/S501.jpg

10.2 KiB

slides/pix/S502.jpg deleted 100644 → 0
+ 0
− 0
View file @ cc98efb3
slides/pix/S502.jpg

9.83 KiB

slides/pix/S503.jpg deleted 100644 → 0
+ 0
− 0
View file @ cc98efb3
slides/pix/S503.jpg

9.41 KiB

slides/pix/S504.jpg deleted 100644 → 0
+ 0
− 0
View file @ cc98efb3
slides/pix/S504.jpg

9.83 KiB

slides/pix/cc7.png deleted 100644 → 0
+ 0
− 0
View file @ cc98efb3
slides/pix/cc7.png

35.5 KiB

slides/pix/lsk_pxe.png deleted 100644 → 0
+ 0
− 0
View file @ cc98efb3
slides/pix/lsk_pxe.png

172 KiB

slides/pix/mememe01.png deleted 100644 → 0
+ 0
− 0
View file @ cc98efb3
slides/pix/mememe01.png

27.4 KiB

slides/pix/mememe02.png deleted 100644 → 0
+ 0
− 0
View file @ cc98efb3
slides/pix/mememe02.png

8.5 KiB

slides/pix/mememe03.png deleted 100644 → 0
+ 0
− 0
View file @ cc98efb3
slides/pix/mememe03.png

5.1 KiB

slides/pix/mememe04.png deleted 100644 → 0
+ 0
− 0
View file @ cc98efb3
slides/pix/mememe04.png

4.44 KiB

slides/pix/mememe05.png deleted 100644 → 0
+ 0
− 0
View file @ cc98efb3
slides/pix/mememe05.png

3.34 KiB

slides/pix/s5filemap.png deleted 100644 → 0
+ 0
− 0
View file @ cc98efb3
slides/pix/s5filemap.png

41.6 KiB

slides/pix/slc6.png deleted 100644 → 0
+ 0
− 0
View file @ cc98efb3
slides/pix/slc6.png

34.9 KiB

slides/s5-blank.html deleted 100644 → 0
+ 0
− 66
View file @ cc98efb3
<!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>
slides/s5-demo.html deleted 100644 → 0
+ 0
− 184
View file @ cc98efb3
<!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 &#8226; Today's date</h2>
</div>
</div>
<div class="presentation">
<div 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>
</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! (<a href="#slide9">skip to summary</a>; demonstrates links internal to the slide show)</li>
</ul>
</div>
<div 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>
</div>
<div 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 (&raquo;)</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>
</div>
<div class="slide">
<h1>Incremental Display II</h1>
<ul class="incremental">
<li>Keep hitting/clicking "next" as long as it isn't the control link (&raquo;)</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>
</div>
<div 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>
</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 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>
</div>
<div 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>
</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>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>
</div>
</div>
</body>
</html>
slides/s5-intro.html deleted 100644 → 0
+ 0
− 215
View file @ cc98efb3
<!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 &#8226; 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 &Ccedil;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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment