vesper/slides20211003
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Erste "fertige" Version der Folien

Browse source
This commit is contained in:
Gitea 2021-10-01 17:34:27 +02:00
parent af57b5758e
commit 693c786348
2 changed files with 149 additions and 252 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

397
index.html
View file

@ -35,6 +35,7 @@
<section> <section>
<div class="wrap aligncenter"> <div class="wrap aligncenter">
<h1><strong>Beer and Open Source</strong></h1> <h1><strong>Beer and Open Source</strong></h1>
<h2>Free as in beer</h2>
<p class="text-intro"> <p class="text-intro">
Sven Wagner Sven Wagner
</p> </p>
@ -69,11 +70,26 @@
</ul> </ul>
</li> </li>
</ul> </ul>
</p>
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </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> <section>
<div class="wrap aligncenter"> <div class="wrap aligncenter">
<h2>How all began?</h2> <h2>How all began?</h2>
@ -84,10 +100,9 @@
<div class="wrap alignleft"> <div class="wrap alignleft">
<ul> <ul>
<li>Plan to make beer, company founded, but no idea at all about a concept.</li> <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> <li>On week later, Tobi mentioned, that if we brew a beer for the MiniDebConf, it has to comply with the DFSG</li>
</ul> </ul>
</p>
</div> </div>
</section> </section>
@ -104,7 +119,6 @@
<li>In germany recipes have no threshold of originality by law</li> <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> <li>Only possible way was to hide it or release it to the public domain</li>
</ul> </ul>
</p>
</div> </div>
</section> </section>
@ -118,10 +132,9 @@
<div class="wrap alignleft"> <div class="wrap alignleft">
<ul> <ul>
<li>If you ask, everybody will tell you his recipe.</li> <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>A lot of people publish theire recipes in billboards, blogs, recipe databases.</li>
<li>Even on tournaments and championships, everybody is explainign you to the detail, how he made his beer</li> <li>Even on tournaments and championships, everybody is explaining you to the detail, how he made his beer</li>
</ul> </ul>
</p>
</div> </div>
<div class="wrap aligncenter"> <div class="wrap aligncenter">
<h2>Open Knowledge and Pro-Brewer</h2> <h2>Open Knowledge and Pro-Brewer</h2>
@ -129,256 +142,140 @@
<div class="wrap alignleft"> <div class="wrap alignleft">
<ul><li>If you ask, everybody will tell you his recipe.</li></ul> <ul><li>If you ask, everybody will tell you his recipe.</li></ul>
</div> </div>
</section> </section>
<section> <section>
<!--.wrap = container (width: 90%) --> <div class="wrap aligncenter">
<div class="wrap size-50 aligncenter"> <h2>Do we use Open Source Software?</h2>
<h2><strong>Why WebSlides?</strong></h2> <p class="text-intro">
<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> Yes we do!
<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>&lt;section&gt;</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>&lt;article id="webslides"&gt;
<span class="code-comment">&lt;!-- Slide 1 --&gt;</span>
&lt;section&gt;
&lt;h1&gt;Design for trust&lt;/h1&gt;
&lt;/section&gt;
<span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
&lt;section class="bg-primary"&gt;
&lt;div class="wrap"&gt;
&lt;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/article&gt;
</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>&rarr;</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 &rsaquo;</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>
</p> </p>
</div> </div>
<!-- .end .wrap --> <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>
<section class="slide-bottom">
<div class="wrap"> <section>
<div class="content-right text-serif"> <div class="wrap aligncenter">
<h2> <h2>Are We the First / Only / Open Source Brewery</h2>
<strong>Thanks.</strong> <p class="text-intro">
<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&mdash;%20https://webslides.tv"> No, and that is a good thing!
<svg class="fa-twitter"> </p>
<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> </div>
<!-- .end .content-right --> <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> </div>
<!-- .end .wrap -->
</section> </section>
</article> </article>
@ -388,7 +285,7 @@
<!-- A global footer <!-- A global footer
<footer role="contentinfo"> <footr role="contentinfo">
<div class="wrap"> <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> <p>An <a href="https://github.com/webslides/webslides">open source solution</a>, by <a href="https://twitter.com/webslides">@webslides</a>.</p>
</div> </div>

BIN
static/images/brewpi.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 80 KiB