git.plutz.net Git - clickslide/blob - example/demo.short

   1 [html [head
   2   [title ClickSlide Demo]
   3 ] [body
   4   [footer Clickslide Demo]
   5
   6   [slide [h1 Clickslide]
   7     a Compiler for Browser based Slideshows
   8   ]
   9
  10   [slide
  11     [ul
  12       [li Why would I write another Slideshow system]
  13       [li What's wrong with JavaScript?]
  14       [li How do you simplify HTML?]
  15     ]
  16   ]
  17
  18   [slide [h2 Why Write another Slideshow System?]
  19     [ul .uncover
  20       [li WYSIWYG Slideshow applications are annoying [ul
  21         [li too much fiddling, not straight to point]
  22       ]]
  23       [li [em LaTeX] is not exactly casual]
  24       [li Existing browser slideshows are [ul
  25         [li based on JavaScript]
  26         [li Either verbous HTML, or unflexible markup]
  27       ]]
  28     ]
  29   ]
  30
  31   [slide [h2 Why avoid JavaScript]
  32     [ul .uncover
  33       [li Nothing wrong with JS as a programming language, [strong but...]]
  34       [li Freedom to [em Use], [em Study], [em Share], and [em Improve] can in practice not be applied to code served from another computer (regardless of the license this code is under)]
  35       [li Impossible to get browser security straight for Turing complete programs [ul
  36         [li &#8594; Massive security problems, which are fundamentally unresolvable]
  37         [li HTML and CSS are not Turing complete (CSS is a [em regular] language)]
  38       ]]
  39       [li Performance killer in practice]
  40     ]
  41   ]
  42
  43   [slide [h1 Usage and Features]]
  44
  45   [slide [h2 Simplifying HTML]
  46     Maintain the flexibility of plain HTML. Decrease verbosity of the code. [br]
  47     [pre style="display: inline-block; width: 46%; background-image: linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.5)), url(exb0.jpg);"
  48 \<html\>
  49   \<head\>
  50     \<title\>Demo\</title\>
  51   \</head\>
  52   \<body id="frontpage"\>
  53     \<h1 class="top"\>Headline\</h1\>
  54   \</body\>
  55 \</html\>
  56     ]
  57     [pre style="display: inline-block; width: 46%; background-image: linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.5)), url(exb3.jpg);"
  58 \[html
  59   \[head
  60     \[title Demo\]
  61   \]
  62   \[body \#frontpage
  63     \[h1 .top Headline\]
  64   \]
  65 \]
  66     ]
  67   ]
  68
  69   [slide [h2 Example Slide Show]
  70     [pre
  71 \[html \[head
  72   \[title Example Slideshow\]
  73 \]\[body
  74   \[footer Title | Author | Date and Place\]
  75   \[slide \[h1 Title\]\]
  76   \[slide \[h2 A Slide\]
  77     \[ul .uncover
  78       \[li This list\]
  79       \[li gets uncovered\]
  80       \[li item by item\]
  81 \]\]\]\]
  82     ]
  83   ]
  84
  85   [slide [h2 Syntax]
  86     [ul
  87       [li Clickslide uses [a "//plutz.net/software/shorthand.html" Shorthand] syntax]
  88       [li it introduces the [code slide]-tag to make up a single slide]
  89       [li lists belonging to the [code \.uncover]-class will be uncovered item by item when the list is clicked]
  90       [li You can view the source code of this presentation: [a "demo.short" click here]]
  91     ]
  92   ]
  93
  94   [slide [h2 Features]
  95     [ul
  96       [li Whole slideshow is contained in one document]
  97       [li Images get embedded into the document via base64-coding]
  98       [li Slideshow can be put on a website, emailed, or passed around on a thumbdrive]
  99       [li Slideshow can be viewed on virtually all desktop and mobile devices]
 100       [li Source files can be easily tracked via version control]
 101     ]
 102   ]
 103
 104   [slide [h1 Thank you for listening!]]
 105 ]