Erste "fertige" Version der Folien
This commit is contained in:
Gitea
parent
af57b5758e
commit
693c786348
401
index.html
401
index.html
|
|
@ -35,6 +35,7 @@
|
|||
<section>
|
||||
<div class="wrap aligncenter">
|
||||
<h1><strong>Beer and Open Source</strong></h1>
|
||||
<h2>Free as in beer</h2>
|
||||
<p class="text-intro">
|
||||
Sven Wagner
|
||||
</p>
|
||||
|
|
@ -69,11 +70,26 @@
|
|||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="wrap aligncenter">
|
||||
<h2>freibier.cc</h2>
|
||||
<p class="text-intro">
|
||||
Open Source Beer from Regensburg
|
||||
</p>
|
||||
</div>
|
||||
<div class="wrap alignleft">
|
||||
<ul>
|
||||
<li>Beer recipes published in public domain (CC-0)</li>
|
||||
<li>Small single brew batches</li>
|
||||
<li>All used materials with supplier and batch number available</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="wrap aligncenter">
|
||||
<h2>How all began?</h2>
|
||||
|
|
@ -84,10 +100,9 @@
|
|||
<div class="wrap alignleft">
|
||||
<ul>
|
||||
<li>Plan to make beer, company founded, but no idea at all about a concept.</li>
|
||||
<li>On day, Cold Tobi asked, if we can brew a beer forr his planned MiniDebConf, we agreed.</li>
|
||||
<li>One day, Cold Tobi asked, if we can brew a beer for his planned MiniDebConf, we agreed.</li>
|
||||
<li>On week later, Tobi mentioned, that if we brew a beer for the MiniDebConf, it has to comply with the DFSG</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -104,7 +119,6 @@
|
|||
<li>In germany recipes have no threshold of originality by law</li>
|
||||
<li>Only possible way was to hide it or release it to the public domain</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -118,10 +132,9 @@
|
|||
<div class="wrap alignleft">
|
||||
<ul>
|
||||
<li>If you ask, everybody will tell you his recipe.</li>
|
||||
<li>A lot of people publish there recipes in billboards, blogs, recipe databeses.</li>
|
||||
<li>Even on tournaments and championships, everybody is explainign you to the detail, how he made his beer</li>
|
||||
<li>A lot of people publish theire recipes in billboards, blogs, recipe databases.</li>
|
||||
<li>Even on tournaments and championships, everybody is explaining you to the detail, how he made his beer</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
<div class="wrap aligncenter">
|
||||
<h2>Open Knowledge and Pro-Brewer</h2>
|
||||
|
|
@ -129,256 +142,140 @@
|
|||
<div class="wrap alignleft">
|
||||
<ul><li>If you ask, everybody will tell you his recipe.</li></ul>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<!--.wrap = container (width: 90%) -->
|
||||
<div class="wrap size-50 aligncenter">
|
||||
<h2><strong>Why WebSlides?</strong></h2>
|
||||
<p class="text-intro"><a href="demos/why-webslides.html" title="Why WebSlides?">Presentations</a>, <a href="demos/landings.html" title="Landings">landings</a>, <a href="demos/portfolios.html" title="Portfolios">portfolios</a>, and <a href="demos/longforms.html" title="Longforms">longforms</a>.</p>
|
||||
<div class="bg-white shadow">
|
||||
<ul class="flexblock reasons">
|
||||
<li>
|
||||
<h2>An opportunity to engage.</h2>
|
||||
<p>WebSlides is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h2>Work better, faster.</h2>
|
||||
<p>Designers, marketers, and journalists can now focus on the content. Simply <a href="demos/index.html" title="WebSlides Demos">choose a demo</a> and customize it in minutes.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .bg-white shadow -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<!--.wrap = container (width: 90%) -->
|
||||
<div class="wrap">
|
||||
<div class="grid vertical-align">
|
||||
<div class="column">
|
||||
<h3><strong>WebSlides is really easy</strong></h3>
|
||||
<p class="text-intro">Each parent <code><section></code> in the #webslides element is an individual slide. </p>
|
||||
<p>Code is clean and scalable. It uses <strong>intuitive markup</strong> with popular naming conventions. There's no need to overuse classes or nesting. <strong>Making an HTML presentation has never been so fast</strong>.</p>
|
||||
</div>
|
||||
<!-- .end .column -->
|
||||
<div class="column">
|
||||
<pre><article id="webslides">
|
||||
<span class="code-comment"><!-- Slide 1 --></span>
|
||||
<section>
|
||||
<h1>Design for trust</h1>
|
||||
</section>
|
||||
<span class="code-comment"><!-- Slide 2 --></span>
|
||||
<section class="bg-primary">
|
||||
<div class="wrap">
|
||||
<h2>.wrap = container (width: 90%)</h2>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</pre>
|
||||
</div>
|
||||
<!-- .end .column -->
|
||||
</div>
|
||||
<!-- .end .grid -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<h2>Features</h2>
|
||||
<ul class="flexblock features">
|
||||
<li>
|
||||
<div>
|
||||
<h2>
|
||||
<span>→</span>
|
||||
Simple Navigation
|
||||
</h2>
|
||||
with arrow keys, presenter...
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<h2>
|
||||
<svg class="fa-link">
|
||||
<use xlink:href="#fa-link"></use>
|
||||
</svg>
|
||||
Permalinks
|
||||
</h2>
|
||||
Go to a specific slide.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<h2>
|
||||
<svg class="fa-clock-o">
|
||||
<use xlink:href="#fa-clock-o"></use>
|
||||
</svg>
|
||||
Slide Counter
|
||||
</h2>
|
||||
Current/Total number.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<h2>
|
||||
<span>40<sup>+</sup></span>
|
||||
Beautiful Components
|
||||
</h2>
|
||||
Covers, cards, quotes...
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<h2>
|
||||
<svg class="fa-text-height">
|
||||
<use xlink:href="#fa-text-height"></use>
|
||||
</svg>
|
||||
Vertical Rhythm
|
||||
</h2>
|
||||
Use multiples of 8.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<h2>
|
||||
<span>500<sup>+</sup></span>
|
||||
SVG Icons
|
||||
</h2>
|
||||
Font Awesome Kit.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<h2><strong>WebSlides Demos</strong></h2>
|
||||
<p>Contribute on <a href="https://github.com/webslides/webslides" title="Contribute on Github">Github</a>. <span class="alignright"><a href="demos/index.html" title="WebSlides Demos">View all ›</a></span></p>
|
||||
<ul class="flexblock gallery">
|
||||
<li>
|
||||
<a href="demos/why-webslides.html" title="Why WebSlides?">
|
||||
<figure>
|
||||
<img alt="Thumbnail Why WebSlides?" src="https://webslides.tv/static/images/demos-why.png">
|
||||
<figcaption>
|
||||
<h2>Why WebSlides?</h2>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="demos/landings.html" title="Landings">
|
||||
<figure>
|
||||
<img alt="Thumbnail Landings" src="https://webslides.tv/static/images/demos-landings.png">
|
||||
<figcaption>
|
||||
<h2>Landings</h2>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="demos/portfolios.html" title="Portfolios">
|
||||
<figure>
|
||||
<img alt="Thumbnail Portfolios" src="https://webslides.tv/static/images/demos-portfolios.png">
|
||||
<figcaption>
|
||||
<h2>Portfolios</h2>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="demos/keynote.html" title="Apple Keynote">
|
||||
<figure>
|
||||
<img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-apple.png">
|
||||
<figcaption>
|
||||
<h2>Apple Keynote</h2>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<div class="grid vertical-align">
|
||||
<div class="column">
|
||||
<h4>
|
||||
<svg class="fa-life-ring">
|
||||
<use xlink:href="#fa-life-ring"></use>
|
||||
</svg>
|
||||
<strong>Guides</strong>
|
||||
</h4>
|
||||
<p>If you need help, here's just three tutorials. Just a basic knowledge of HTML is required:</p>
|
||||
<ul class="description">
|
||||
<li><a href="demos/components.html" title="WebSlides Components">WebSlides Components</a>.</li>
|
||||
<li><a href="demos/classes.html" title="WebSlides Classes">WebSlides Classes</a>.</li>
|
||||
<li><a href="demos/media.html" title="WebSlides Media">WebSlides Media: images, videos...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column">
|
||||
<figure><img class="aligncenter" src="static/images/setup.png" alt="WebSlides Files"></figure>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h4>
|
||||
<svg class="fa-cubes">
|
||||
<use xlink:href="#fa-cubes"></use>
|
||||
</svg>
|
||||
<strong>Built to expand</strong>
|
||||
</h4>
|
||||
<p>The best way to <strong>inspire with your content</strong> is to connect on a personal level:</p>
|
||||
<ul class="description">
|
||||
<li>Background images: <a href="http://unsplash.com">Unsplash</a>.</li>
|
||||
<li>CSS animations: <a href="https://daneden.github.io/animate.css/">Animate.css</a>.</li>
|
||||
<li>Longforms: <a href="http://michalsnik.github.io/aos/"> Animate on scroll</a>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--end .grid -->
|
||||
</div>
|
||||
</section>
|
||||
<section class="aligncenter">
|
||||
<!-- .wrap = container (width: 90%) -->
|
||||
<div class="wrap">
|
||||
<h2><strong>Ready to Start?</strong> </h2>
|
||||
<p class="text-intro">Create your own presentation instantly. <br>120+ premium slides ready to use.</p>
|
||||
<p>
|
||||
<a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
|
||||
<svg class="fa-cloud-download">
|
||||
<use xlink:href="#fa-cloud-download"></use>
|
||||
</svg>
|
||||
Free Download
|
||||
</a>
|
||||
<span class="try">
|
||||
<a href="https://www.paypal.me/jlantunez/8" title="Thanks :)">
|
||||
<svg class="fa-paypal">
|
||||
<use xlink:href="#fa-paypal"></use>
|
||||
</svg>
|
||||
Pay what you want.
|
||||
</a>
|
||||
</span>
|
||||
<div class="wrap aligncenter">
|
||||
<h2>Do we use Open Source Software?</h2>
|
||||
<p class="text-intro">
|
||||
Yes we do!
|
||||
</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="slide-bottom">
|
||||
<div class="wrap">
|
||||
<div class="content-right text-serif">
|
||||
<h2>
|
||||
<strong>Thanks.</strong>
|
||||
<a target="_blank" title="Share on Twitter" href="https://twitter.com/intent/tweet?text=Finally,%20everything%20you%20need%20to%20make%20HTML%20presentations%20in%20a%20fast/beautiful%20way.%20@WebSlides%20=%20Good%20karma%20—%20https://webslides.tv">
|
||||
<svg class="fa-twitter">
|
||||
<use xlink:href="#fa-twitter"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</h2>
|
||||
<p>People share content that makes them feel inspired. WebSlides is a very effective way to engage young audiences, customers, and teams.</p>
|
||||
<p>Best,<br> <a href="https://twitter.com/jlantunez">@jlantunez</a>, <a href="https://twitter.com/belelros">@belelros</a>, and <a href="https://twitter.com/luissacristan">@luissacristan</a>.</p>
|
||||
</div>
|
||||
<!-- .end .content-right -->
|
||||
<div class="wrap alignleft">
|
||||
<ul>
|
||||
<li>Webserver is running Debian Bullseye with Nginx</li>
|
||||
<li>Blog on Homepage is build with Pelican</li>
|
||||
<li>Font for labels and homepage is under OFL</li>
|
||||
<li>Collaboration with Nextcloud on web server</li>
|
||||
<li>Mailserver Debian Bullseye, Postfix, Dovecot, Rspamd, MariaDB</li>
|
||||
<li>Code organisation of Homepage and other projects done with Git and Gitea</li>
|
||||
<li>Other projects: PLC of our labeling machine is arduino compatible</li>
|
||||
<li>Backup of all that by rdiff-backup</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="wrap aligncenter">
|
||||
<h2>Are We the First / Only / Open Source Brewery</h2>
|
||||
<p class="text-intro">
|
||||
No, and that is a good thing!
|
||||
</p>
|
||||
</div>
|
||||
<div class="wrap alignleft">
|
||||
<ul>
|
||||
<li>FreeBeer.org -> CC BY-SA 4.0 since 2005</li>
|
||||
<li>Nerdbrewing.se -> no idea about license since 2015</li>
|
||||
<li>Modern Times beer since 2012</li>
|
||||
<li>Even Brewdog releases all recipes</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="wrap aligncenter">
|
||||
<h2>Open Source Projects for Brewers</h2>
|
||||
<p class="text-intro">
|
||||
Well, you find a lot of free as in beer stuff...
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="wrap aligncenter">
|
||||
<h2>ArdPressureFiller</h2>
|
||||
<p class="text-intro">
|
||||
pressure filler for beer botteling
|
||||
</p>
|
||||
</div>
|
||||
<div class="wrap alignleft">
|
||||
<ul>
|
||||
<li>Two github repositories, one for code, one for 3D printed parts</li>
|
||||
<ul><li><a href="https://github.com/cherryphilip74/ArdPressure_filler">Parts</a></li>
|
||||
<li><a href="https://github.com/MaxN68it/ArdPressure_software">Code</a></li></ul>
|
||||
<li>Like so often, no license mentioned, just released on github.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="wrap aligncenter">
|
||||
<h2>BrewPi</h2>
|
||||
<p class="text-intro">
|
||||
Automatisation of your home brewery with a RaspberryPi
|
||||
</p>
|
||||
</div>
|
||||
<div class="wrap alignleft">
|
||||
<ul>
|
||||
<li>GNU Affero General Public License v3.0</li>
|
||||
<li><a href="https://www.brewpi.com/">Homepage</a></li>
|
||||
<li><a href="https://github.com/BrewPi/firmware">Github</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--
|
||||
<div class="wrap alignright">
|
||||
<figure><img src="/slides/static/images/brewpi.png" alt="BrewPi" width="30%"></figure>
|
||||
</div> -->
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="wrap aligncenter">
|
||||
<h2>BrewUNO</h2>
|
||||
<p class="text-intro">
|
||||
Automatisation of your home brewery with an ESP 8266
|
||||
</p>
|
||||
</div>
|
||||
<div class="wrap alignleft">
|
||||
<ul>
|
||||
<li>Homemade License</li>
|
||||
<li>"It's permitted to modify for personal use. It's not permitted to distribute the modified project."</li>
|
||||
<li><a href="http://www.brewuno.com/">Homepage</a></li>
|
||||
<li><a href="https://github.com/uncodead/BrewUNO">Github</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="wrap aligncenter">
|
||||
<h2>iSpindel</h2>
|
||||
<p class="text-intro">
|
||||
Electronic Hydrometer with ESP 8266
|
||||
</p>
|
||||
</div>
|
||||
<div class="wrap alignleft">
|
||||
<ul>
|
||||
<li>Homemade License</li>
|
||||
<li>"It's permitted to modify for personal use. It's not permitted to distribute the modified project. Modification can be distributed via the official iSpindel release only."</li>
|
||||
<li><a href="https://www.ispindel.de/">Homepage</a></li>
|
||||
<li><a href="https://hackaday.com/2017/03/01/iot-device-pulls-its-weight-in-home-brewing/">Article in Hackaday</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="wrap aligncenter">
|
||||
<h2>EtiMa</h2>
|
||||
<p class="text-intro">
|
||||
Control for Chinese MT-50, LT-50 ....
|
||||
</p>
|
||||
</div>
|
||||
<div class="wrap alignleft">
|
||||
<ul>
|
||||
<li>GPL Version 3</li>
|
||||
<li><a href="https://git.freibier.cc/vesper/EtiMa">Git</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
|
||||
</article>
|
||||
|
|
@ -388,7 +285,7 @@
|
|||
|
||||
<!-- A global footer
|
||||
|
||||
<footer role="contentinfo">
|
||||
<footr role="contentinfo">
|
||||
<div class="wrap">
|
||||
<p>An <a href="https://github.com/webslides/webslides">open source solution</a>, by <a href="https://twitter.com/webslides">@webslides</a>.</p>
|
||||
</div>
|
||||
|
|
|
|||
BIN
static/images/brewpi.png
Normal file
BIN
static/images/brewpi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Loading…
Reference in a new issue