├── assets ├── examples │ ├── reveal.js │ │ ├── .gitignore │ │ ├── lib │ │ │ ├── font │ │ │ │ ├── league_gothic_license │ │ │ │ ├── league_gothic-webfont.eot │ │ │ │ ├── league_gothic-webfont.ttf │ │ │ │ └── league_gothic-webfont.woff │ │ │ ├── js │ │ │ │ ├── html5shiv.js │ │ │ │ ├── data-markdown.js │ │ │ │ ├── classList.js │ │ │ │ ├── head.min.js │ │ │ │ └── highlight.js │ │ │ └── css │ │ │ │ └── zenburn.css │ │ ├── package.json │ │ ├── LICENSE │ │ ├── plugin │ │ │ └── speakernotes │ │ │ │ ├── client.js │ │ │ │ ├── index.js │ │ │ │ └── notes.html │ │ ├── css │ │ │ ├── reset.css │ │ │ ├── print-pdf.css │ │ │ └── print.css │ │ ├── js │ │ │ └── reveal.min.js │ │ ├── index.html │ │ └── README.md │ ├── latexbeamer.pdf │ └── impress.js │ │ ├── favicon.png │ │ ├── apple-touch-icon.png │ │ ├── lib │ │ ├── dataset.js │ │ └── classList.js │ │ ├── README.md │ │ └── index.html └── images │ ├── bulb.jpg │ ├── dbppt-1.jpg │ ├── dbppt-2.jpg │ ├── dbppt-3.jpg │ ├── header.jpg │ ├── deadbulb.jpg │ ├── thumbs_down_sign.svg │ └── cc.by-nc-sa.eu.svg ├── lib ├── cccs │ ├── logo.png │ ├── cccs.css │ └── chaosknoten.svg └── styles.css ├── .gitmodules ├── README.md └── index.html /assets/examples/reveal.js/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .svn 3 | log/*.log 4 | tmp/** 5 | node_modules/ 6 | -------------------------------------------------------------------------------- /lib/cccs/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/LightningTalk-PraesentierenOhnePPT/master/lib/cccs/logo.png -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "lib/animate"] 2 | path = lib/animate 3 | url = https://github.com/daneden/animate.css.git 4 | -------------------------------------------------------------------------------- /assets/images/bulb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/LightningTalk-PraesentierenOhnePPT/master/assets/images/bulb.jpg -------------------------------------------------------------------------------- /assets/images/dbppt-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/LightningTalk-PraesentierenOhnePPT/master/assets/images/dbppt-1.jpg -------------------------------------------------------------------------------- /assets/images/dbppt-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/LightningTalk-PraesentierenOhnePPT/master/assets/images/dbppt-2.jpg -------------------------------------------------------------------------------- /assets/images/dbppt-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/LightningTalk-PraesentierenOhnePPT/master/assets/images/dbppt-3.jpg -------------------------------------------------------------------------------- /assets/images/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/LightningTalk-PraesentierenOhnePPT/master/assets/images/header.jpg -------------------------------------------------------------------------------- /assets/images/deadbulb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/LightningTalk-PraesentierenOhnePPT/master/assets/images/deadbulb.jpg -------------------------------------------------------------------------------- /assets/examples/latexbeamer.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/LightningTalk-PraesentierenOhnePPT/master/assets/examples/latexbeamer.pdf -------------------------------------------------------------------------------- /assets/examples/impress.js/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/LightningTalk-PraesentierenOhnePPT/master/assets/examples/impress.js/favicon.png -------------------------------------------------------------------------------- /assets/examples/reveal.js/lib/font/league_gothic_license: -------------------------------------------------------------------------------- 1 | SIL Open Font License (OFL) 2 | http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | -------------------------------------------------------------------------------- /assets/examples/impress.js/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/LightningTalk-PraesentierenOhnePPT/master/assets/examples/impress.js/apple-touch-icon.png -------------------------------------------------------------------------------- /assets/examples/reveal.js/lib/font/league_gothic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/LightningTalk-PraesentierenOhnePPT/master/assets/examples/reveal.js/lib/font/league_gothic-webfont.eot -------------------------------------------------------------------------------- /assets/examples/reveal.js/lib/font/league_gothic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/LightningTalk-PraesentierenOhnePPT/master/assets/examples/reveal.js/lib/font/league_gothic-webfont.ttf -------------------------------------------------------------------------------- /assets/examples/reveal.js/lib/font/league_gothic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/LightningTalk-PraesentierenOhnePPT/master/assets/examples/reveal.js/lib/font/league_gothic-webfont.woff -------------------------------------------------------------------------------- /assets/examples/reveal.js/lib/js/html5shiv.js: -------------------------------------------------------------------------------- 1 | document.createElement('header'); 2 | document.createElement('nav'); 3 | document.createElement('section'); 4 | document.createElement('article'); 5 | document.createElement('aside'); 6 | document.createElement('footer'); 7 | document.createElement('hgroup'); -------------------------------------------------------------------------------- /assets/examples/reveal.js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": "Hakim El Hattab", 3 | "name": "reveal.js", 4 | "description": "HTML5 Slideware with Presenter Notes", 5 | "version": "1.5.0", 6 | "repository": { 7 | "type": "git", 8 | "url": "git://github.com/hakimel/reveal.js.git" 9 | }, 10 | "engines": { 11 | "node": "~0.6.8" 12 | }, 13 | "dependencies": { 14 | "underscore" : "1.3.3", 15 | "express" : "2.5.9", 16 | "socket.io" : "0.9.6", 17 | "mustache" : "0.4.0" 18 | }, 19 | "devDependencies": {} 20 | } 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Vortragsfolien "Präsentieren ohne Powerpoint" 2 | ========================================= 3 | 4 | Lightning-Talk beim CCC Stuttgart, 9.8.2012. 5 | 6 | 7 | Referenzen 8 | ---------- 9 | 10 | Folientemplate basiert auf den [html5-Folien von Benjamin Erb](https://github.com/berb/html5slides-uulm). 11 | 12 | Bildreferenzen: Siehe Ende des Foliensatzes. 13 | 14 | 15 | Lizenz 16 | ------ 17 | 18 | Autor: Stefan Schlott, PGP 0x75FD7074 19 | 20 | Soweit bei Einzelteilen nicht anders angegeben, steht dieses Werk unter 21 | einer Creative Commons Namensnennung-Nicht-kommerziell-Weitergabe unter 22 | gleichen Bedingungen 3.0 Unported Lizenz [(CC BY-NC-SA)](http://creativecommons.org/licenses/by-nc-sa/3.0/). 23 | 24 | -------------------------------------------------------------------------------- /assets/examples/reveal.js/lib/js/data-markdown.js: -------------------------------------------------------------------------------- 1 | // From https://gist.github.com/1343518 2 | // Modified by Hakim to handle markdown indented with tabs 3 | (function(){ 4 | 5 | var slides = document.querySelectorAll('[data-markdown]'); 6 | 7 | for( var i = 0, len = slides.length; i < len; i++ ) { 8 | var elem = slides[i]; 9 | 10 | // strip leading whitespace so it isn't evaluated as code 11 | var text = elem.innerHTML; 12 | 13 | var leadingWs = text.match(/^\n?(\s*)/)[1].length, 14 | leadingTabs = text.match(/^\n?(\t*)/)[1].length; 15 | 16 | if( leadingTabs > 0 ) { 17 | text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' ); 18 | } 19 | else if( leadingWs > 1 ) { 20 | text = text.replace( new RegExp('\\n? {' + leadingWs + '}','g'), '\n' ); 21 | } 22 | 23 | // here, have sum HTML 24 | elem.innerHTML = (new Showdown.converter()).makeHtml(text); 25 | } 26 | 27 | })(); -------------------------------------------------------------------------------- /assets/examples/reveal.js/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. -------------------------------------------------------------------------------- /assets/examples/reveal.js/plugin/speakernotes/client.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | // don't emit events from inside the previews themselves 3 | if ( window.location.search.match( /receiver/gi ) ) { return; } 4 | 5 | var socket = io.connect(window.location.origin); 6 | var socketId = Math.random().toString().slice(2); 7 | 8 | console.log('View slide notes at ' + window.location.origin + '/notes/' + socketId); 9 | 10 | Reveal.addEventListener( 'slidechanged', function( event ) { 11 | var nextindexh; 12 | var nextindexv; 13 | var slideElement = event.currentSlide; 14 | 15 | if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') { 16 | nextindexh = event.indexh; 17 | nextindexv = event.indexv + 1; 18 | } else { 19 | nextindexh = event.indexh + 1; 20 | nextindexv = 0; 21 | } 22 | 23 | var notes = slideElement.querySelector('aside.notes'); 24 | var slideData = { 25 | notes : notes ? notes.innerHTML : '', 26 | indexh : event.indexh, 27 | indexv : event.indexv, 28 | nextindexh : nextindexh, 29 | nextindexv : nextindexv, 30 | socketId : socketId 31 | }; 32 | 33 | socket.emit('slidechanged', slideData); 34 | } ); 35 | }()); 36 | -------------------------------------------------------------------------------- /assets/examples/impress.js/lib/dataset.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var forEach = [].forEach, 3 | regex = /^data-(.+)/, 4 | dashChar = /\-([a-z])/ig, 5 | el = document.createElement('div'), 6 | mutationSupported = false, 7 | match 8 | ; 9 | 10 | function detectMutation() { 11 | mutationSupported = true; 12 | this.removeEventListener('DOMAttrModified', detectMutation, false); 13 | } 14 | 15 | function toCamelCase(s) { 16 | return s.replace(dashChar, function (m,l) { return l.toUpperCase(); }); 17 | } 18 | 19 | function updateDataset() { 20 | var dataset = {}; 21 | forEach.call(this.attributes, function(attr) { 22 | if (match = attr.name.match(regex)) 23 | dataset[toCamelCase(match[1])] = attr.value; 24 | }); 25 | return dataset; 26 | } 27 | 28 | // only add support if the browser doesn't support data-* natively 29 | if (el.dataset != undefined) return; 30 | 31 | el.addEventListener('DOMAttrModified', detectMutation, false); 32 | el.setAttribute('foo', 'bar'); 33 | 34 | Element.prototype.__defineGetter__('dataset', mutationSupported 35 | ? function () { 36 | if (!this._datasetCache) { 37 | this._datasetCache = updateDataset.call(this); 38 | } 39 | return this._datasetCache; 40 | } 41 | : updateDataset 42 | ); 43 | 44 | document.addEventListener('DOMAttrModified', function (event) { 45 | delete event.target._datasetCache; 46 | }, false); 47 | })(); 48 | -------------------------------------------------------------------------------- /assets/examples/reveal.js/lib/js/classList.js: -------------------------------------------------------------------------------- 1 | /*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/ 2 | if(typeof document!=="undefined"&&!("classList" in document.createElement("a"))){(function(j){var a="classList",f="prototype",m=(j.HTMLElement||j.Element)[f],b=Object,k=String[f].trim||function(){return this.replace(/^\s+|\s+$/g,"")},c=Array[f].indexOf||function(q){var p=0,o=this.length;for(;p 4 | based on dark.css by Ivan Sagalaev 5 | 6 | */ 7 | 8 | pre code { 9 | display: block; padding: 0.5em; 10 | background: #3F3F3F; 11 | color: #DCDCDC; 12 | } 13 | 14 | pre .keyword, 15 | pre .tag, 16 | pre .django .tag, 17 | pre .django .keyword, 18 | pre .css .class, 19 | pre .css .id, 20 | pre .lisp .title { 21 | color: #E3CEAB; 22 | } 23 | 24 | pre .django .template_tag, 25 | pre .django .variable, 26 | pre .django .filter .argument { 27 | color: #DCDCDC; 28 | } 29 | 30 | pre .number, 31 | pre .date { 32 | color: #8CD0D3; 33 | } 34 | 35 | pre .dos .envvar, 36 | pre .dos .stream, 37 | pre .variable, 38 | pre .apache .sqbracket { 39 | color: #EFDCBC; 40 | } 41 | 42 | pre .dos .flow, 43 | pre .diff .change, 44 | pre .python .exception, 45 | pre .python .built_in, 46 | pre .literal, 47 | pre .tex .special { 48 | color: #EFEFAF; 49 | } 50 | 51 | pre .diff .chunk, 52 | pre .ruby .subst { 53 | color: #8F8F8F; 54 | } 55 | 56 | pre .dos .keyword, 57 | pre .python .decorator, 58 | pre .class .title, 59 | pre .haskell .label, 60 | pre .function .title, 61 | pre .ini .title, 62 | pre .diff .header, 63 | pre .ruby .class .parent, 64 | pre .apache .tag, 65 | pre .nginx .built_in, 66 | pre .tex .command, 67 | pre .input_number { 68 | color: #efef8f; 69 | } 70 | 71 | pre .dos .winutils, 72 | pre .ruby .symbol, 73 | pre .ruby .symbol .string, 74 | pre .ruby .symbol .keyword, 75 | pre .ruby .symbol .keymethods, 76 | pre .ruby .string, 77 | pre .ruby .instancevar { 78 | color: #DCA3A3; 79 | } 80 | 81 | pre .diff .deletion, 82 | pre .string, 83 | pre .tag .value, 84 | pre .preprocessor, 85 | pre .built_in, 86 | pre .sql .aggregate, 87 | pre .javadoc, 88 | pre .smalltalk .class, 89 | pre .smalltalk .localvars, 90 | pre .smalltalk .array, 91 | pre .css .rules .value, 92 | pre .attr_selector, 93 | pre .pseudo, 94 | pre .apache .cbracket, 95 | pre .tex .formula { 96 | color: #CC9393; 97 | } 98 | 99 | pre .shebang, 100 | pre .diff .addition, 101 | pre .comment, 102 | pre .java .annotation, 103 | pre .template_comment, 104 | pre .pi, 105 | pre .doctype { 106 | color: #7F9F7F; 107 | } 108 | 109 | pre .xml .css, 110 | pre .xml .javascript, 111 | pre .xml .vbscript, 112 | pre .tex .formula { 113 | opacity: 0.5; 114 | } 115 | 116 | -------------------------------------------------------------------------------- /assets/examples/reveal.js/plugin/speakernotes/notes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | reveal.js - Slide Notes 7 | 8 | 75 | 76 | 77 | 78 | 79 |
80 | 81 |
82 | 83 |
84 | 85 | UPCOMING: 86 |
87 |
88 | 89 | 90 | 91 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /assets/examples/reveal.js/lib/js/head.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | Head JS The only script in your 3 | Copyright Tero Piirainen (tipiirai) 4 | License MIT / http://bit.ly/mit-license 5 | Version 0.96 6 | 7 | http://headjs.com 8 | */(function(a){function z(){d||(d=!0,s(e,function(a){p(a)}))}function y(c,d){var e=a.createElement("script");e.type="text/"+(c.type||"javascript"),e.src=c.src||c,e.async=!1,e.onreadystatechange=e.onload=function(){var a=e.readyState;!d.done&&(!a||/loaded|complete/.test(a))&&(d.done=!0,d())},(a.body||b).appendChild(e)}function x(a,b){if(a.state==o)return b&&b();if(a.state==n)return k.ready(a.name,b);if(a.state==m)return a.onpreload.push(function(){x(a,b)});a.state=n,y(a.url,function(){a.state=o,b&&b(),s(g[a.name],function(a){p(a)}),u()&&d&&s(g.ALL,function(a){p(a)})})}function w(a,b){a.state===undefined&&(a.state=m,a.onpreload=[],y({src:a.url,type:"cache"},function(){v(a)}))}function v(a){a.state=l,s(a.onpreload,function(a){a.call()})}function u(a){a=a||h;var b;for(var c in a){if(a.hasOwnProperty(c)&&a[c].state!=o)return!1;b=!0}return b}function t(a){return Object.prototype.toString.call(a)=="[object Function]"}function s(a,b){if(!!a){typeof a=="object"&&(a=[].slice.call(a));for(var c=0;c article:not(.fill):not(.title-slide):before{ 2 | content:""; 3 | display:block; 4 | /* border-top:6px solid rgb(145,181,215); */ 5 | position: absolute; 6 | width: 77%; 7 | height: 2px; 8 | min-height: 2px; 9 | left: 0; 10 | top: 24px; 11 | } 12 | 13 | 14 | 15 | .slides.template-cccs-in section > article:not(.fill):not(.title-slide) .slide-nr{ 16 | display:inline; 17 | position: absolute; 18 | color: #dde; 19 | font-size:18px; 20 | line-height: 18px; 21 | font-weight: 600; 22 | letter-spacing: -1px; 23 | left: 78%; 24 | width: 20%; 25 | min-width: 20%; 26 | height: 20%; 27 | min-height: 20%; 28 | top: 24px; 29 | padding:0px; 30 | padding-left:6px; 31 | padding-right:6px; 32 | margin:0; 33 | text-align:right; 34 | background-image: url(chaosknoten.svg); 35 | background-repeat: no-repeat; 36 | background-size: 100% 100%; 37 | -webkit-background-size: 100% 100%; 38 | } 39 | 40 | 41 | 42 | .slides.template-cccs-in section > article.title-slide img { 43 | position: absolute; 44 | left: 0; 45 | top: 20%; 46 | 47 | min-width: 100%; 48 | min-height: 50%; 49 | width:100%; 50 | height:50%; 51 | 52 | 53 | 54 | z-index: -1; 55 | } 56 | 57 | .slides.template-cccs-in section > article h1, .slides.template-cccs-in section > article h2, .slides.template-cccs-in section > article h3{ 58 | color: rgb(92,136,179); 59 | } 60 | .slides.template-cccs-in section > article.title-slide #title{ 61 | font-size: 48px; 62 | position: absolute; 63 | left: 50%; 64 | top: 75%; 65 | text-align:left; 66 | margin:0; 67 | padding:0; 68 | } 69 | 70 | 71 | .slides.template-cccs-in section > article.title-slide #subtitle{ 72 | font-size: 28px; 73 | position: absolute; 74 | left: 50%; 75 | bottom: 3%; 76 | text-align:left; 77 | margin:0; 78 | padding:0; 79 | } 80 | 81 | .slides.template-cccs-in section > article.title-slide #author{ 82 | font-size: 28px; 83 | position: absolute; 84 | left: 5%; 85 | bottom: 3%; 86 | text-align:left; 87 | margin:0; 88 | padding:0; 89 | } 90 | 91 | .slides.template-cccs-in section > article.title-slide #cccs-logo { 92 | position: absolute; 93 | left: 50%; 94 | top: 4%; 95 | z-index: -2; 96 | width: 48%; 97 | min-width: 48%; 98 | min-height: 13%; 99 | height: 13%; 100 | } 101 | 102 | 103 | 104 | .slides.template-cccs-in section > article:not(.fill){ 105 | padding-top: 100px; 106 | padding-left: 80px; 107 | padding-right: 80px; 108 | padding-bottom: 32px; 109 | } 110 | 111 | .slides.template-cccs-in section > article:not(.nobackground):not(.biglogo) { 112 | background-color: white; 113 | } 114 | 115 | .slides.template-cccs-in li::before { 116 | color: rgb(92,136,179); 117 | } 118 | 119 | .slides.template-cccs-in td{ 120 | background: rgba(169,162,141,0.4); 121 | padding: 5px 10px; 122 | vertical-align: top; 123 | } 124 | 125 | .slides.template-cccs-in th{ 126 | background: rgba(169,162,141,0.8); 127 | padding: 5px 10px; 128 | vertical-align: top; 129 | color:#eee; 130 | } 131 | 132 | .slides.template-cccs-in iframe { 133 | height: 580px; 134 | } 135 | 136 | .slides.template-cccs-in h3 + iframe { 137 | margin-top: 40px; 138 | height: 480px; 139 | } 140 | 141 | .slides.template-cccs-in section article.fill iframe { 142 | position: absolute; 143 | left: 0; 144 | top: 0; 145 | width: 100%; 146 | height: 100%; 147 | 148 | border: 0; 149 | margin: 0; 150 | 151 | border-radius: 10px; 152 | -o-border-radius: 10px; 153 | -moz-border-radius: 10px; 154 | -webkit-border-radius: 10px; 155 | 156 | z-index: -1; 157 | } 158 | 159 | 160 | .cccs-color { 161 | color: rgb(145,181,215); 162 | } 163 | 164 | .mawi-color { 165 | color: rgb(179,72,55); 166 | } 167 | 168 | .in-color { 169 | color: rgb(92,136,179); 170 | } 171 | 172 | .nawi-color { 173 | color: rgb(55,179,133); 174 | } 175 | 176 | .med-color { 177 | color: rgb(55,101,144); 178 | } 179 | 180 | .accent-color { 181 | color: rgb(169,162,141); 182 | } 183 | 184 | .slides.template-cccs-in a{ 185 | color: rgb(125,154,170); 186 | } 187 | 188 | a{ 189 | text-decoration: none; 190 | } 191 | -------------------------------------------------------------------------------- /assets/examples/reveal.js/css/print-pdf.css: -------------------------------------------------------------------------------- 1 | /* Default Print Stylesheet Template 2 | by Rob Glazebrook of CSSnewbie.com 3 | Last Updated: June 4, 2008 4 | 5 | Feel free (nay, compelled) to edit, append, and 6 | manipulate this file as you see fit. */ 7 | 8 | 9 | /* SECTION 1: Set default width, margin, float, and 10 | background. This prevents elements from extending 11 | beyond the edge of the printed page, and prevents 12 | unnecessary background images from printing */ 13 | * { 14 | -webkit-print-color-adjust: exact; 15 | } 16 | 17 | body { 18 | font-size: 22pt; 19 | width: auto; 20 | height: auto; 21 | border: 0; 22 | margin: 0 5%; 23 | padding: 0; 24 | float: none !important; 25 | overflow: visible; 26 | background: #333; 27 | } 28 | 29 | html { 30 | width: auto; 31 | height: auto; 32 | overflow: visible; 33 | } 34 | 35 | /* SECTION 2: Remove any elements not needed in print. 36 | This would include navigation, ads, sidebars, etc. */ 37 | .nestedarrow, 38 | .controls a, 39 | .reveal .progress, 40 | .reveal.overview, 41 | .fork-reveal, 42 | .share-reveal, 43 | .state-background { 44 | display:none; 45 | } 46 | 47 | /* SECTION 3: Set body font face, size, and color. 48 | Consider using a serif font for readability. */ 49 | body, p, td, li, div, a { 50 | font-size: 22pt; 51 | } 52 | 53 | /* SECTION 4: Set heading font face, sizes, and color. 54 | Diffrentiate your headings from your body text. 55 | Perhaps use a large sans-serif for distinction. */ 56 | h1,h2,h3,h4,h5,h6 { 57 | text-shadow: 0 0 0 #000 !important; 58 | } 59 | 60 | /* SECTION 5: Make hyperlinks more usable. 61 | Ensure links are underlined, and consider appending 62 | the URL to the end of the link for usability. */ 63 | a:link, 64 | a:visited { 65 | font-weight: bold; 66 | text-decoration: underline; 67 | } 68 | 69 | 70 | /* SECTION 6: more reveal.js specific additions by @skypanther */ 71 | ul, ol, div, p { 72 | visibility: visible; 73 | position: static; 74 | width: auto; 75 | height: auto; 76 | display: block; 77 | overflow: visible; 78 | margin: auto; 79 | } 80 | .reveal .slides { 81 | position: static; 82 | width: 100%; 83 | height: auto; 84 | 85 | left: auto; 86 | top: auto; 87 | margin-left: auto; 88 | margin-top: auto; 89 | padding: auto; 90 | 91 | overflow: visible; 92 | display: block; 93 | 94 | text-align: center; 95 | -webkit-perspective: none; 96 | -moz-perspective: none; 97 | -ms-perspective: none; 98 | perspective: none; 99 | 100 | -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */ 101 | -moz-perspective-origin: 50% 50%; 102 | -ms-perspective-origin: 50% 50%; 103 | perspective-origin: 50% 50%; 104 | } 105 | .reveal .slides>section, .reveal .slides>section>section, 106 | .reveal .slides>section.past, .reveal .slides>section.future, 107 | .reveal.linear .slides>section, .reveal.linear .slides>section>section, 108 | .reveal.linear .slides>section.past, .reveal.linear .slides>section.future { 109 | 110 | visibility: visible; 111 | position: static; 112 | width: 100%; 113 | height: auto; 114 | min-height: initial; 115 | display: block; 116 | overflow: visible; 117 | 118 | left: 0%; 119 | top: 0%; 120 | margin-left: 0px; 121 | margin-top: 50px; 122 | padding: 20px 0px; 123 | 124 | opacity: 1; 125 | 126 | -webkit-transform-style: flat; 127 | -moz-transform-style: flat; 128 | -ms-transform-style: flat; 129 | transform-style: flat; 130 | 131 | -webkit-transform: none; 132 | -moz-transform: none; 133 | -ms-transform: none; 134 | transform: none; 135 | } 136 | .reveal section { 137 | page-break-after: always !important; 138 | display: block !important; 139 | } 140 | .reveal section.stack { 141 | margin: 0px !important; 142 | padding: 0px !important; 143 | page-break-after: avoid !important; 144 | } 145 | .reveal section .fragment { 146 | opacity: 1 !important; 147 | } 148 | .reveal img { 149 | box-shadow: none; 150 | } 151 | .reveal .roll { 152 | overflow: visible; 153 | line-height: 1em; 154 | } 155 | 156 | .reveal small a { 157 | font-size: 16pt !important; 158 | } -------------------------------------------------------------------------------- /assets/examples/reveal.js/css/print.css: -------------------------------------------------------------------------------- 1 | /* Default Print Stylesheet Template 2 | by Rob Glazebrook of CSSnewbie.com 3 | Last Updated: June 4, 2008 4 | 5 | Feel free (nay, compelled) to edit, append, and 6 | manipulate this file as you see fit. */ 7 | 8 | 9 | /* SECTION 1: Set default width, margin, float, and 10 | background. This prevents elements from extending 11 | beyond the edge of the printed page, and prevents 12 | unnecessary background images from printing */ 13 | body { 14 | background: #fff; 15 | font-size: 13pt; 16 | width: auto; 17 | height: auto; 18 | border: 0; 19 | margin: 0 5%; 20 | padding: 0; 21 | float: none !important; 22 | overflow: visible; 23 | } 24 | html { 25 | background: #fff; 26 | width: auto; 27 | height: auto; 28 | overflow: visible; 29 | } 30 | 31 | /* SECTION 2: Remove any elements not needed in print. 32 | This would include navigation, ads, sidebars, etc. */ 33 | .nestedarrow, 34 | .controls a, 35 | .reveal .progress, 36 | .reveal.overview, 37 | .fork-reveal, 38 | .share-reveal, 39 | .state-background { 40 | display:none; 41 | } 42 | 43 | /* SECTION 3: Set body font face, size, and color. 44 | Consider using a serif font for readability. */ 45 | body, p, td, li, div, a { 46 | font-size: 13pt; 47 | font-family: Georgia, "Times New Roman", Times, serif !important; 48 | color: #000; 49 | } 50 | 51 | /* SECTION 4: Set heading font face, sizes, and color. 52 | Diffrentiate your headings from your body text. 53 | Perhaps use a large sans-serif for distinction. */ 54 | h1,h2,h3,h4,h5,h6 { 55 | color: #000!important; 56 | height: auto; 57 | line-height: normal; 58 | font-family: Georgia, "Times New Roman", Times, serif !important; 59 | text-shadow: 0 0 0 #000 !important; 60 | text-align: left; 61 | letter-spacing: normal; 62 | } 63 | /* Need to reduce the size of the fonts for printing */ 64 | h1 { font-size: 26pt !important; } 65 | h2 { font-size: 22pt !important; } 66 | h3 { font-size: 20pt !important; } 67 | h4 { font-size: 20pt !important; font-variant: small-caps; } 68 | h5 { font-size: 19pt !important; } 69 | h6 { font-size: 18pt !important; font-style: italic; } 70 | 71 | /* SECTION 5: Make hyperlinks more usable. 72 | Ensure links are underlined, and consider appending 73 | the URL to the end of the link for usability. */ 74 | a:link, 75 | a:visited { 76 | color: #000 !important; 77 | font-weight: bold; 78 | text-decoration: underline; 79 | } 80 | .reveal a:link:after, 81 | .reveal a:visited:after { 82 | content: " (" attr(href) ") "; 83 | color: #222 !important; 84 | font-size: 90%; 85 | } 86 | 87 | 88 | /* SECTION 6: more reveal.js specific additions by @skypanther */ 89 | ul, ol, div, p { 90 | visibility: visible; 91 | position: static; 92 | width: auto; 93 | height: auto; 94 | display: block; 95 | overflow: visible; 96 | margin: auto; 97 | text-align: left !important; 98 | } 99 | .reveal .slides { 100 | position: static; 101 | width: auto; 102 | height: auto; 103 | 104 | left: auto; 105 | top: auto; 106 | margin-left: auto; 107 | margin-top: auto; 108 | padding: auto; 109 | 110 | overflow: visible; 111 | display: block; 112 | 113 | text-align: center; 114 | -webkit-perspective: none; 115 | -moz-perspective: none; 116 | -ms-perspective: none; 117 | perspective: none; 118 | 119 | -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */ 120 | -moz-perspective-origin: 50% 50%; 121 | -ms-perspective-origin: 50% 50%; 122 | perspective-origin: 50% 50%; 123 | } 124 | .reveal .slides>section, .reveal .slides>section>section, 125 | .reveal .slides>section.past, .reveal .slides>section.future, 126 | .reveal.linear .slides>section, .reveal.linear .slides>section>section, 127 | .reveal.linear .slides>section.past, .reveal.linear .slides>section.future { 128 | 129 | visibility: visible; 130 | position: static; 131 | width: 90%; 132 | height: auto; 133 | display: block; 134 | overflow: visible; 135 | 136 | left: 0%; 137 | top: 0%; 138 | margin-left: 0px; 139 | margin-top: 0px; 140 | padding: 20px 0px; 141 | 142 | opacity: 1; 143 | 144 | -webkit-transform-style: flat; 145 | -moz-transform-style: flat; 146 | -ms-transform-style: flat; 147 | transform-style: flat; 148 | 149 | -webkit-transform: none; 150 | -moz-transform: none; 151 | -ms-transform: none; 152 | transform: none; 153 | } 154 | .reveal section { 155 | page-break-after: always !important; 156 | display: block !important; 157 | } 158 | .reveal section.stack { 159 | page-break-after: avoid !important; 160 | } 161 | .reveal section .fragment { 162 | opacity: 1 !important; 163 | } 164 | .reveal section img { 165 | display: block; 166 | margin: 15px 0px; 167 | background: rgba(255,255,255,1); 168 | border: 1px solid #666; 169 | box-shadow: none; 170 | } -------------------------------------------------------------------------------- /lib/cccs/chaosknoten.svg: -------------------------------------------------------------------------------- 1 | 2 | 16 | 18 | 19 | 21 | image/svg+xml 22 | 24 | 25 | 26 | 27 | 29 | 49 | 52 | 56 | 60 | 64 | 68 | 72 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /assets/images/thumbs_down_sign.svg: -------------------------------------------------------------------------------- 1 | 2 | 26 | 28 | 29 | 31 | image/svg+xml 32 | 34 | 35 | 36 | 37 | 61 | 62 | 64 | 67 | 69 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /assets/examples/reveal.js/js/reveal.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * reveal.js 1.5 r15 3 | * http://lab.hakim.se/reveal-js 4 | * MIT licensed 5 | * 6 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 7 | */ 8 | var Reveal=(function(){var j=".reveal .slides>section",a=".reveal .slides>section.present>section",e=!!("ontouchstart" in window),K={controls:true,progress:true,history:false,keyboard:true,loop:false,autoSlide:0,mouseWheel:true,rollingLinks:true,theme:"default",transition:"default"},k=0,c=0,v,C,W=[],d={},M="WebkitPerspective" in document.body.style||"MozPerspective" in document.body.style||"msPerspective" in document.body.style||"OPerspective" in document.body.style||"perspective" in document.body.style,l="WebkitTransform" in document.body.style||"MozTransform" in document.body.style||"msTransform" in document.body.style||"OTransform" in document.body.style||"transform" in document.body.style,y=!!document.body.classList; 9 | mouseWheelTimeout=0,autoSlideTimeout=0,writeURLTimeout=0,touch={startX:0,startY:0,startSpan:0,startCount:0,handled:false,threshold:40};function h(Y){if((!l&&!M)||!y){document.body.setAttribute("class","no-transforms"); 10 | return;}d.wrapper=document.querySelector(".reveal");d.progress=document.querySelector(".reveal .progress");d.progressbar=document.querySelector(".reveal .progress span"); 11 | if(K.controls){d.controls=document.querySelector(".reveal .controls");d.controlsLeft=document.querySelector(".reveal .controls .left");d.controlsRight=document.querySelector(".reveal .controls .right"); 12 | d.controlsUp=document.querySelector(".reveal .controls .up");d.controlsDown=document.querySelector(".reveal .controls .down");}A();q(K,Y);F();E();H();if(navigator.userAgent.match(/(iphone|ipod|android)/i)){document.documentElement.style.overflow="scroll"; 13 | document.body.style.height="120%";window.addEventListener("load",S,false);window.addEventListener("orientationchange",S,false);}}function F(){if(M===false){K.transition="linear"; 14 | }if(K.controls&&d.controls){d.controls.style.display="block";}if(K.progress&&d.progress){d.progress.style.display="block";}if(K.transition!=="default"){d.wrapper.classList.add(K.transition); 15 | }if(K.theme!=="default"){document.documentElement.classList.add("theme-"+K.theme);}if(K.mouseWheel){document.addEventListener("DOMMouseScroll",m,false); 16 | document.addEventListener("mousewheel",m,false);}if(K.rollingLinks){G();}}function A(){document.addEventListener("touchstart",w,false);document.addEventListener("touchmove",U,false); 17 | document.addEventListener("touchend",O,false);window.addEventListener("hashchange",t,false);if(K.keyboard){document.addEventListener("keydown",V,false); 18 | }if(K.controls&&d.controls){d.controlsLeft.addEventListener("click",n(x),false);d.controlsRight.addEventListener("click",n(i),false);d.controlsUp.addEventListener("click",n(r),false); 19 | d.controlsDown.addEventListener("click",n(B),false);}}function N(){document.removeEventListener("keydown",V,false);document.removeEventListener("touchstart",w,false); 20 | document.removeEventListener("touchmove",U,false);document.removeEventListener("touchend",O,false);window.removeEventListener("hashchange",t,false);if(K.controls&&d.controls){d.controlsLeft.removeEventListener("click",n(x),false); 21 | d.controlsRight.removeEventListener("click",n(i),false);d.controlsUp.removeEventListener("click",n(r),false);d.controlsDown.removeEventListener("click",n(B),false); 22 | }}function q(Z,Y){for(var aa in Y){Z[aa]=Y[aa];}}function L(aa,Y){var ab=aa.x-Y.x,Z=aa.y-Y.y;return Math.sqrt(ab*ab+Z*Z);}function n(Y){return function(Z){Z.preventDefault(); 23 | Y.call();};}function S(){setTimeout(function(){window.scrollTo(0,1);},0);}function V(Z){if(Z.target.contentEditable!="inherit"||Z.shiftKey||Z.altKey||Z.ctrlKey||Z.metaKey){return; 24 | }var Y=false;switch(Z.keyCode){case 80:case 33:Q();Y=true;break;case 78:case 34:u();Y=true;break;case 72:case 37:x();Y=true;break;case 76:case 39:i();Y=true; 25 | break;case 75:case 38:r();Y=true;break;case 74:case 40:B();Y=true;break;case 36:I(0);Y=true;break;case 35:I(Number.MAX_VALUE);Y=true;break;case 32:R()?T():u(); 26 | Y=true;break;case 13:if(R()){T();Y=true;}break;}if(Y){Z.preventDefault();}else{if(Z.keyCode===27&&M){P();Z.preventDefault();}}H();}function w(Y){touch.startX=Y.touches[0].clientX; 27 | touch.startY=Y.touches[0].clientY;touch.startCount=Y.touches.length;if(Y.touches.length===2){touch.startSpan=L({x:Y.touches[1].clientX,y:Y.touches[1].clientY},{x:touch.startX,y:touch.startY}); 28 | }}function U(ad){if(!touch.handled){var ab=ad.touches[0].clientX;var aa=ad.touches[0].clientY;if(ad.touches.length===2&&touch.startCount===2){var ac=L({x:ad.touches[1].clientX,y:ad.touches[1].clientY},{x:touch.startX,y:touch.startY}); 29 | if(Math.abs(touch.startSpan-ac)>touch.threshold){touch.handled=true;if(actouch.threshold&&Math.abs(Z)>Math.abs(Y)){touch.handled=true;x();}else{if(Z<-touch.threshold&&Math.abs(Z)>Math.abs(Y)){touch.handled=true;i();}else{if(Y>touch.threshold){touch.handled=true; 31 | r();}else{if(Y<-touch.threshold){touch.handled=true;B();}}}}}}ad.preventDefault();}}function O(Y){touch.handled=false;}function m(Y){clearTimeout(mouseWheelTimeout); 32 | mouseWheelTimeout=setTimeout(function(){var Z=Y.detail||-Y.wheelDelta;if(Z>0){u();}else{Q();}},100);}function t(Y){E();}function G(){if(M&&!("msPerspective" in document.body.style)){var Z=document.querySelectorAll(".reveal .slides section a:not(.image)"); 33 | for(var aa=0,Y=Z.length;aa'+ab.innerHTML+"";}}}}function D(){d.wrapper.classList.add("overview");var Y=Array.prototype.slice.call(document.querySelectorAll(j)); 35 | for(var ad=0,ab=Y.length;ad3?"none":"block"; 44 | }ad[ac].classList.remove("past");ad[ac].classList.remove("present");ad[ac].classList.remove("future");if(acab){ad[ac].classList.add("future"); 45 | }}if(Y.querySelector("section")){ad[ac].classList.add("stack");}}ad[ab].classList.add("present");var aa=ad[ab].getAttribute("data-state");if(aa){W=W.concat(aa.split(" ")); 46 | }}else{ab=0;}return ab;}function b(ae,ai){v=C;var ab=W.concat();W.length=0;var ah=k,Z=c;k=X(j,ae===undefined?k:ae);c=X(a,ai===undefined?c:ai);stateLoop:for(var ac=0,af=W.length; 47 | ac0,right:k0,down:c0||c>0){Y+=k;}if(c>0){Y+="/"+c;}window.location.hash=Y; 55 | }}function o(Z,Y){var aa=document.createEvent("HTMLEvents",1,2);aa.initEvent(Z,true,true);q(aa,Y);d.wrapper.dispatchEvent(aa);}function s(){if(document.querySelector(a+".present")){var Z=document.querySelectorAll(a+".present .fragment:not(.visible)"); 56 | if(Z.length){Z[0].classList.add("visible");o("fragmentshown",{fragment:Z[0]});return true;}}else{var Y=document.querySelectorAll(j+".present .fragment:not(.visible)"); 57 | if(Y.length){Y[0].classList.add("visible");o("fragmentshown",{fragment:Y[0]});return true;}}return false;}function J(){if(document.querySelector(a+".present")){var Z=document.querySelectorAll(a+".present .fragment.visible"); 58 | if(Z.length){Z[Z.length-1].classList.remove("visible");o("fragmenthidden",{fragment:Z[Z.length-1]});return true;}}else{var Y=document.querySelectorAll(j+".present .fragment.visible"); 59 | if(Y.length){Y[Y.length-1].classList.remove("visible");o("fragmenthidden",{fragment:Y[Y.length-1]});return true;}}return false;}function H(){clearTimeout(autoSlideTimeout); 60 | if(K.autoSlide){autoSlideTimeout=setTimeout(u,K.autoSlide);}}function I(Z,Y){b(Z,Y);}function x(){if(R()||J()===false){b(k-1,0);}}function i(){if(R()||s()===false){b(k+1,0); 61 | }}function r(){if(R()||J()===false){b(k,c-1);}}function B(){if(R()||s()===false){b(k,c+1);}}function Q(){if(J()===false){if(f().up){r();}else{var Y=document.querySelector(".reveal .slides>section.past:nth-child("+k+")"); 62 | if(Y){c=(Y.querySelectorAll("section").length+1)||0;k--;b();}}}}function u(){if(s()===false){f().down?B():i();}H();}function P(){if(R()){T();}else{D(); 63 | }}return{initialize:h,navigateTo:I,navigateLeft:x,navigateRight:i,navigateUp:r,navigateDown:B,navigatePrev:Q,navigateNext:u,toggleOverview:P,addEventListeners:A,removeEventListeners:N,getIndices:function(){return{h:k,v:c}; 64 | },getPreviousSlide:function(){return v;},getCurrentSlide:function(){return C;},getQueryHash:function(){var Y={};location.search.replace(/[A-Z0-9]+?=(\w*)/gi,function(Z){Y[Z.split("=").shift()]=Z.split("=").pop(); 65 | });return Y;},addEventListener:function(Z,aa,Y){if("addEventListener" in window){(d.wrapper||document.querySelector(".reveal")).addEventListener(Z,aa,Y); 66 | }},removeEventListener:function(Z,aa,Y){if("addEventListener" in window){(d.wrapper||document.querySelector(".reveal")).removeEventListener(Z,aa,Y);}}}; 67 | })(); -------------------------------------------------------------------------------- /assets/examples/reveal.js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - HTML5 Presentations 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 25 | 26 | 29 | 30 | 31 | 32 | 33 |
34 | 35 | 36 |
37 | 38 | 39 |
40 |
41 |

Reveal.js

42 |

HTML Presentations Made Easy

43 |
44 | 45 |
46 |

Heads Up

47 |

48 | reveal.js is an easy to use, HTML based, presentation tool. You'll need a modern browser with 49 | support for CSS 3D transforms to see it in its full glory. 50 |

51 |

52 | - Hakim El Hattab / @hakimel 53 |

54 | 55 | 58 |
59 | 60 | 61 |
62 |
63 |

Vertical Slides

64 |

65 | Slides can be nested inside of other slides, 66 | try pressing down. 67 |

68 | 69 | Down arrow 70 | 71 |
72 |
73 |

Basement Level 1

74 |

Press down or up to navigate.

75 |
76 |
77 |

Basement Level 2

78 |

Cornify

79 | 80 | Unicorn 81 | 82 |
83 |
84 |

Basement Level 3

85 |

That's it, time to go back up.

86 | 87 | Up arrow 88 | 89 |
90 |
91 | 92 |
93 |

Holistic Overview

94 |

95 | Press ESC to enter the slide overview! 96 |

97 |
98 | 99 |
100 |

Works in Mobile Safari

101 |

102 | Try it out! You can swipe through the slides pinch your way to the overview. 103 |

104 |
105 | 106 |
107 |

Marvelous Unordered List

108 |
    109 |
  • No order here
    • 110 |
  • Or here
    • 111 |
  • Or here
    • 112 |
  • Or here
    • 113 |
114 |
115 | 116 |
117 |

Fantastic Ordered List

118 |
    119 |
  1. One is smaller than...
    2. 120 |
  2. Two is smaller than...
    3. 121 |
  3. Three!
    4. 122 |
123 |
124 | 125 |
126 | ## Markdown support 127 | 128 | For those of you who like that sort of thing. Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown). 129 | 130 | 
<section data-markdown>
131 |   ## Markdown support
132 | 
133 |   For those of you who like that sort of thing. 
134 |   Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
135 | </section>
136 |
137 |
138 | 139 |
140 |

Transition Styles

141 |

142 | You can select from different transitions, like: 143 |

144 | 150 |
151 | 152 |
153 |
154 |

Global State

155 |

156 | Set data-state="something" on a slide and "something" 157 | will be added as a class to the document element when the slide is open. This let's you 158 | apply broader style changes, like switching the background. 159 |

160 | 161 | Down arrow 162 | 163 |
164 |
165 |

"blackout"

166 | 167 | Down arrow 168 | 169 |
170 |
171 |

"soothe"

172 | 173 | Up arrow 174 | 175 |
176 |
177 | 178 |
179 |

Custom Events

180 |

181 | Additionally custom events can be triggered on a per slide basis by binding to the data-state name. 182 |

183 | 
Reveal.addEventListener( 'customevent', function() {
184 | 	console.log( '"customevent" has fired' );
185 | } );
186 |
187 |
188 | 189 |
190 |

Clever Quotes

191 |

192 | These guys come in two forms, inline: 193 | The nice thing about standards is that there are so many to choose from and block: 194 |

195 |
196 | For years there has been a theory that millions of monkeys typing at random on millions of typewriters would 197 | reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue. 198 |
199 |
200 | 201 |
202 |

Pretty Code

203 | 

204 | function linkify( selector ) {
205 |   if( supports3DTransforms ) {
206 |     
207 |     var nodes = document.querySelectorAll( selector );
208 | 
209 |     for( var i = 0, len = nodes.length; i < len; i++ ) {
210 |       var node = nodes[i];
211 | 
212 |       if( !node.className ) ) {
213 |         node.className += ' roll';
214 |       }
215 |     };
216 |   }
217 | }
218 |
219 |

Courtesy of highlight.js.

220 |
221 | 222 |
223 |

Intergalactic Interconnections

224 |

225 | You can link between slides internally, 226 | like this. 227 |

228 |
229 | 230 |
231 |

Fragmented Views

232 |

Hit the next arrow...

233 |

... to step through ...

234 |
    235 |
  1. any type
    2. 236 |
  2. of view
    3. 237 |
  3. fragments
    4. 238 |
239 |
240 | 241 |
242 |

Spectacular image!

243 | 244 | BreakDOM game screenshot 245 | 246 |
247 | 248 |
249 |

Export to PDF

250 |

Presentations can be exported to PDF, below is an example that's been uploaded to SlideShare.

251 | 252 |
253 | 254 |
255 |

Stellar Links

256 | 261 |
262 | 263 |
264 |

THE END

265 |

BY Hakim El Hattab / hakim.se

266 |
267 |
268 | 269 | 270 | 276 | 277 | 278 |
279 | 280 |
281 | 282 | 283 | 284 | 342 | 343 | 344 | 345 | -------------------------------------------------------------------------------- /assets/examples/reveal.js/README.md: -------------------------------------------------------------------------------- 1 | # reveal.js 2 | 3 | A CSS 3D slideshow tool for quickly creating good looking HTML presentations. Doesn't _rely_ on any external libraries but [highlight.js](http://softwaremaniacs.org/soft/highlight/en/description/) is included by default for code highlighting. 4 | 5 | Note that this requires a browser with support for CSS 3D transforms and ``classList``. If CSS 3D support is not detected, the presentation will degrade to less exciting 2D transitions. A [classList polyfill](http://purl.eligrey.com/github/classList.js/blob/master/classList.js) is incuded to make this work in < iOS 5, < Safari 5.1 and IE. 6 | 7 | Curious about how it looks in action? [Check out the demo page](http://lab.hakim.se/reveal-js/). 8 | 9 | ## Usage 10 | 11 | ### Markup 12 | 13 | Markup heirarchy needs to be ``
`` where the ``
`` represents one slide and can be repeated indefinitely. If you place multiple ``
``'s inside of another ``
`` they will be shown as vertical slides. For example: 14 | 15 | ```html 16 |
17 |
18 |
Single Horizontal Slide
19 |
20 |
Vertical Slide 1
21 |
Vertical Slide 2
22 |
23 |
24 |
25 | ``` 26 | 27 | ### Markdown 28 | 29 | It's possible to write your slides using Markdown. To enable Markdown simply add the ```data-markdown``` attribute to your ```
``` elements and reveal.js will automatically load the JavaScript parser. 30 | 31 | This is based on [data-markdown](https://gist.github.com/1343518) from [Paul Irish](https://github.com/paulirish) which in turn uses [showdown](https://github.com/coreyti/showdown/). This is sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks). Updates to come. 32 | 33 | ```html 34 |
35 | ## Page title 36 | 37 | A paragraph with some text and a [link](http://hakim.se). 38 |
39 | ``` 40 | 41 | 42 | ### Configuration 43 | 44 | At the end of your page, after ````, you need to initialize reveal by running the following code. Note that all config values are optional and will default as specified below. 45 | 46 | ```javascript 47 | Reveal.initialize({ 48 | // Display controls in the bottom right corner 49 | controls: true, 50 | 51 | // Display a presentation progress bar 52 | progress: true, 53 | 54 | // Push each slide change to the browser history 55 | history: false, 56 | 57 | // Enable keyboard shortcuts for navigation 58 | keyboard: true, 59 | 60 | // Loop the presentation 61 | loop: false, 62 | 63 | // Number of milliseconds between automatically proceeding to the 64 | // next slide, disabled when set to 0 65 | autoSlide: 0, 66 | 67 | // Enable slide navigation via mouse wheel 68 | mouseWheel: true, 69 | 70 | // Apply a 3D roll to links on hover 71 | rollingLinks: true, 72 | 73 | // UI style 74 | theme: 'default', // default/neon/beige 75 | 76 | // Transition style 77 | transition: 'default' // default/cube/page/concave/linear(2d) 78 | }); 79 | ``` 80 | 81 | ### API 82 | 83 | The Reveal class provides a minimal JavaScript API for controlling navigation and reading state: 84 | 85 | ```javascript 86 | // Navigation 87 | Reveal.navigateTo( indexh, indexv ); 88 | Reveal.navigateLeft(); 89 | Reveal.navigateRight(); 90 | Reveal.navigateUp(); 91 | Reveal.navigateDown(); 92 | Reveal.navigatePrev(); 93 | Reveal.navigateNext(); 94 | Reveal.toggleOverview(); 95 | 96 | // Retrieves the previous and current slide elements 97 | Reveal.getPreviousSlide(); 98 | Reveal.getCurrentSlide(); 99 | 100 | Reveal.getIndices(); // { h: 0, v: 0 } } 101 | ``` 102 | 103 | ### States 104 | 105 | If you set ``data-state="somestate"`` on a slide ``
``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide. 106 | 107 | Furthermore you can also listen to these changes in state via JavaScript: 108 | 109 | ```javascript 110 | Reveal.addEventListener( 'somestate', function() { 111 | // TODO: Sprinkle magic 112 | }, false ); 113 | ``` 114 | 115 | ### Slide change event 116 | 117 | An 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes. 118 | 119 | ```javascript 120 | Reveal.addEventListener( 'slidechanged', function( event ) { 121 | // event.previousSlide, event.currentSlide, event.indexh, event.indexv 122 | } ); 123 | ``` 124 | 125 | ### Fragment events 126 | 127 | When a slide fragment is either shown or hidden reveal.js will dispatch an event. 128 | 129 | ```javascript 130 | Reveal.addEventListener( 'fragmentshown', function( event ) { 131 | // event.fragment = the fragment DOM element 132 | } ); 133 | Reveal.addEventListener( 'fragmenthidden', function( event ) { 134 | // event.fragment = the fragment DOM element 135 | } ); 136 | ``` 137 | 138 | ### Folder Structure 139 | - **css/** Core styles without which the project does not function 140 | - **js/** Like above but for JavaScript 141 | - **plugin/** Components that have been developed as extensions to reveal.js 142 | - **lib/** All other third party assets (JavaScript, CSS, fonts) 143 | 144 | 145 | ## PDF Export 146 | 147 | Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome). 148 | Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-13872948. 149 | 150 | 1. Open the desired presentation with *print-pdf* anywhere in the query, for example: [lab.hakim.se/reveal-js?print-pdf](http://lab.hakim.se/reveal-js?print-pdf) 151 | 2. Open the in-browser print dialog (CMD+P). 152 | 3. Change the **Destination** setting to **Save as PDF**. 153 | 4. Change the **Layout** to **Portrait**. 154 | 5. Change the **Margins** to **None**. 155 | 6. Click **Save**. 156 | 157 | ![Chrome Print Settings](https://s3.amazonaws.com/hakim-static/reveal-js/pdf-print-settings.png) 158 | 159 | ## Speaker Notes 160 | 161 | If you're interested in using speaker notes, reveal.js comes with a Node server that allows you to deliver your presentation in one browser while viewing speaker notes in another. 162 | 163 | To include speaker notes in your presentation, simply add an `