-<?xml version="1.0" encoding="utf-8" ?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
+<!DOCTYPE html ""
[
- <!ENTITY global-title "Programmation Internet Cours 1">
+ <!ENTITY global-title "<h1>SimpleWebSlides</h1><h1>An HTML5 presentation framework</h1>">
]>
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html>
<head>
<title>&global-title;</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta name="copyright"
content="Copyright © 2013 Kim Nguyễn" />
- <link rel="stylesheet" href="print_style.css" type="text/css"
- media="print" />
- <link rel="stylesheet" href="screen_style.css" type="text/css"
- media="screen, projection" />
- <link rel="stylesheet" href="common_style.css" type="text/css"
+ <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"
media="all" />
+ <!-- allows to switch themes in firefox -->
- <link rel="stylesheet" href="theme.css" type="text/css"
- media="all" />
- <script src="jquery-1.9.1.min.js" type="text/javascript" ></script>
- <script src="simpleWebSlides.js" type="text/javascript" ></script>
+ <link rel="stylesheet" title="Default" href="../themes/default.css"
+ type="text/css" />
+ <link rel="alternate stylesheet" title="Web 2.0"
+ href="../themes/webTwoPointO.css"
+ type="text/css" />
+ <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
+ <script src="../simpleWebSlides.js" type="text/javascript" ></script>
</head>
<body>
<div class="slide cover nofooter">
- <div class="title">
- <h1>&global-title;</h1>
- <h2>Kim Nguyễn</h2>
- <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
- <h3>17/09/2012</h3>
+ <div class="centerbox">
+ &global-title;
+ <a href="mailto:kim@nguyen.vg">kim@nguyen.vg</a>
</div>
</div>
- <h1>Remarques préliminaires</h1>
-
- <div class="slide">
- <h1>Contenu du cours</h1>
- <ol>
- <li><em>Comprendre les bases du Web</em>
- <ul>
- <li>Fonctionnement du système Unix (cours 1-2)</li>
- <li>Notions de réseau (cours 3-4)</li>
- </ul>
- </li>
+ <h1>Introduction</h1>
- <li><em>Programmer (pour) le Web</em>
- <ul>
- <li>Pages statiques en HTML et CSS (cours 5)</li>
- <li>Programmation côté serveur avec PHP (cours 6-7)</li>
- <li>Programmation côté client avec Javascript (cours 8-9)</li>
- <li>Sécurité des sites Web (cours 10)</li>
- </ul>
- </li>
- </ol>
+ <div class="slide" data-foo="44">
+ <h1>What is it?</h1>
+ <em>SimpleWebSlides</em> is an HTML5 framework that allows
+ you to build presentation slides:<i class="pause"/>
+ <ul>
+ <li>Write your slides in HTML5!</li>
+ <li>Script your slides with Javascript!</li>
+ <li>Theme your slides with CSS!</li>
+ </ul>
</div>
<div class="slide">
_self.lastSlide = function () { return _self.getNumSlides() - 1; };
_self.refresh = function () {
var cur = _self.getCurrentSlide();
- $(".slide").each (function (i) {
+ $(".canvas").each (function (i) {
if (i == cur){
$(this).removeClass("other_slides").addClass("current_slide");
} else if ($(this).hasClass("current_slide")) {
var cur = _self.getCurrentSlide();
$(".slide").each (function (i) {
- if (i == cur) {
- $(this).addClass("current_slide").removeClass("other_slides");
- } else {
- $(this).addClass("other_slides").removeClass("current_slide");
- };
var elem = '<div class="footer"><span class="current_slide_num">' + (i+1);
elem += '</span><span class="slide_num_sep"/><span class="total_slide_num">';
elem += _self.getNumSlides() + '</span></div>';
if (!($(this).hasClass("nofooter"))) {
$(this).append($(elem));
};
+ var par = $(this).parent();
+ $(this).remove();
+ var canvas = $('<div class="canvas"/>');
+ canvas.append($(this));
+ par.append(canvas);
+ if (i == cur) {
+ canvas.addClass("current_slide").removeClass("other_slides");
+ } else {
+ canvas.addClass("other_slides").removeClass("current_slide");
+ };
+
});
};
-@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic&subset=latin,greek-ext,greek,latin-ext);
-
+/* Default document properties */
body {
- font-family: 'Ubuntu', sans-serif;
+ font-family: sans-serif;
font-size: 18pt;
}
-@media screen {
- body {
- background: black;
- color: white;
- }
-}
-@media print {
- body {
- background: white;
- color: black;
- }
-}
-
-
-a, a:visited, em {
- color:orange;
+/* The slide should be positioned w.r.t. to the canvas.
+ The canvas takes up the whole window in screen mode and a
+ whole page in print mode
+*/
+.slide {
+ margin: 10pt;
+ border-width:1mm;
+ border-radius:5mm;
+ border-color:black;
+ border-style:solid;
+ left:0pt;
+ right:0pt;
+ top:0pt;
+ bottom:0pt;
+ padding:5mm;
}
+/* slide title */
+.slide h1 {
+ font-size: xxx-large;
+ font-weight: bolder;
-ul {
- list-style-type: square;
}
span.slide_num_sep:after {
content : "/";
}
.footer {
- text-align: right;
+ text-align: center;
}
-
.alert {
- color: green;
+ color: red;
}
+/* Simple transition in presentation mode */
@media screen {
-/* Slide transitions, only for screen */
-.other_slides {
- opacity: 0.0;
- transition: opacity 0.25s ease-in;
-}
-
-.current_slide {
- opacity: 1.0;
- transition: opacity 0.25s ease-out 0.25s;
-}
-
+ .other_slides {
+ visibility: hidden;
+ }
+ .current_slide {
+ visibility: visible;
+ }
}
\ No newline at end of file
projects / hacks / simpleWebSlides.git / commitdiff