From 17470c738558740aa2b3cb754bf38bad52157816 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Kim=20Nguy=E1=BB=85n?= Date: Mon, 25 Feb 2013 14:17:08 +0100 Subject: [PATCH] WIP. --- doc/sample.xhtml | 64 +++++++++++++++---------------------- simpleWebSlides.css | 36 ++++++++------------- simpleWebSlides.js | 18 +++++++---- simpleWebSlides_print.css | 6 ++-- simpleWebSlides_screen.css | 2 ++ themes/default.css | 65 ++++++++++++++++++-------------------- 6 files changed, 87 insertions(+), 104 deletions(-) diff --git a/doc/sample.xhtml b/doc/sample.xhtml index 6a02df7..01a9d6d 100644 --- a/doc/sample.xhtml +++ b/doc/sample.xhtml @@ -1,63 +1,49 @@ - - + SimpleWebSlides

An HTML5 presentation framework

"> ]> - + &global-title; - - - + - - - + + + +
-
-

&global-title;

-

Kim Nguyễn

- http://www.lri.fr/~kn -

17/09/2012

+
+ &global-title; + kim@nguyen.vg
-

Remarques préliminaires

- -
-

Contenu du cours

-
    -
  1. Comprendre les bases du Web -
      -
    • Fonctionnement du système Unix (cours 1-2)
      • -
    • Notions de réseau (cours 3-4)
      • -
    -
    2. +

    Introduction

    -
  2. Programmer (pour) le Web -
      -
    • Pages statiques en HTML et CSS (cours 5)
      • -
    • Programmation côté serveur avec PHP (cours 6-7)
      • -
    • Programmation côté client avec Javascript (cours 8-9)
      • -
    • Sécurité des sites Web (cours 10)
      • -
    -
    3. -
+
+

What is it?

+ SimpleWebSlides is an HTML5 framework that allows + you to build presentation slides: +
    +
  • Write your slides in HTML5!
    • +
  • Script your slides with Javascript!
    • +
  • Theme your slides with CSS!
    • +
diff --git a/simpleWebSlides.css b/simpleWebSlides.css index 323b8d0..1ebd3f7 100644 --- a/simpleWebSlides.css +++ b/simpleWebSlides.css @@ -1,34 +1,26 @@ @import url(simpleWebSlides_screen.css) screen; @import url(simpleWebSlides_print.css) print; -.cover { - text-align: center; - vertical-align: middle; -} -.cover .title { - display:inline-block; - vertical-align:middle; -} -.cover:before { - content: ""; - display: inline-block; - height:100%; - width:0pt; - vertical-align:middle; +body { + overflow:hidden; } -.slide { - top: 0pt; - left:0pt; - right:0pt; - bottom:0pt; +.canvas { + top: 0pt; + left:0pt; + right:0pt; + bottom:0pt; } -.slide h1 { + +.centerbox { + display:block; text-align: center; + vertical-align: middle; } -.slide li { - padding: 0.25em; + +.slide { + position:absolute; } .slide .footer { diff --git a/simpleWebSlides.js b/simpleWebSlides.js index 71f8e64..a80dfad 100644 --- a/simpleWebSlides.js +++ b/simpleWebSlides.js @@ -28,7 +28,7 @@ var SimpleWebSlides = new function () { _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")) { @@ -84,17 +84,23 @@ var SimpleWebSlides = new function () { 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 = '
' + (i+1); elem += ''; elem += _self.getNumSlides() + '
'; if (!($(this).hasClass("nofooter"))) { $(this).append($(elem)); }; + var par = $(this).parent(); + $(this).remove(); + var 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"); + }; + }); }; diff --git a/simpleWebSlides_print.css b/simpleWebSlides_print.css index 2aadd96..862b455 100644 --- a/simpleWebSlides_print.css +++ b/simpleWebSlides_print.css @@ -3,13 +3,15 @@ body { padding: 0pt 0pt 0pt 0pt; border-width: 0pt; } + .canvas { overflow:hidden; - width: 100%; - heigth: 100%; position:relative; border-width: 0cm; border-style: none; margin:0pt 0pt 0pt 0pt; page-break-after:always; + width: 297mm; + height: 209.8mm; /* not 210 due to rounding errors */ + padding:0pt; } diff --git a/simpleWebSlides_screen.css b/simpleWebSlides_screen.css index 5241196..ea0a15c 100644 --- a/simpleWebSlides_screen.css +++ b/simpleWebSlides_screen.css @@ -1,3 +1,5 @@ .canvas { position: absolute; + width:100%; + height:100%; } diff --git a/themes/default.css b/themes/default.css index bb509da..fcf1c4f 100644 --- a/themes/default.css +++ b/themes/default.css @@ -1,54 +1,49 @@ -@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 -- 2.17.1