408 lines
16 KiB
HTML
408 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="en" prefix="og: http://ogp.me/ns#">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<!-- SEO -->
|
|
<title>Beer and Open Source</title>
|
|
<meta name="description" content="Presentation about Beer and Open Source">
|
|
|
|
<!-- URL CANONICAL -->
|
|
<!-- <link rel="canonical" href="http://freibier.cc/"> -->
|
|
|
|
<!-- CSS WebSlides -->
|
|
<link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css">
|
|
|
|
<!-- Optional - CSS SVG Icons (Font Awesome) -->
|
|
<link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
|
|
|
|
|
|
<!-- Android -->
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="theme-color" content="#333333">
|
|
|
|
</head>
|
|
<body>
|
|
<header role="banner">
|
|
<nav role="navigation">
|
|
<p class="logo"><a href="index.html" title="Beer and Open Source">Beer and Open source</a></p>
|
|
</nav>
|
|
</header>
|
|
|
|
<main role="main">
|
|
<article id="webslides" class="vertical">
|
|
<section>
|
|
<div class="wrap aligncenter">
|
|
<h1><strong>Beer and Open Source</strong></h1>
|
|
<p class="text-intro">
|
|
Sven Wagner
|
|
</p>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap aligncenter">
|
|
<h2>Who Am I?</h2>
|
|
<p class="text-intro">
|
|
Sven Wagner
|
|
</p>
|
|
</div>
|
|
<div class="wrap alignleft">
|
|
<ul>
|
|
<li>
|
|
<h3>Open Source</h3>
|
|
<ul>
|
|
<li>Linux User >20years</li>
|
|
<li>Running several web, mail, XMPP server</li>
|
|
<li>After many trials, nearly every computer runs Debian</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<h3>Beer</h3>
|
|
<ul>
|
|
<li>Started apprenticeship in a small brewery in 1996</li>
|
|
<li>TU München Weihenstephan from 1998 - 2002 </li>
|
|
<li>Nearly 20 years commissioning of brewerys world wide</li>
|
|
<li>2017 Co-founder of Waschraumbrauerei</li>
|
|
<li>2020 Co-founder of freibier.cc </li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
|
|
<section>
|
|
<div class="wrap aligncenter">
|
|
<h2>How all began?</h2>
|
|
<p class="text-intro">
|
|
It all began with planned MiniDebConf Regensburg 2020
|
|
</p>
|
|
</div>
|
|
<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>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>
|
|
|
|
|
|
<section>
|
|
<div class="wrap aligncenter">
|
|
<h2>License for beer recipes</h2>
|
|
<p class="text-intro">
|
|
Why we use CC-0
|
|
</p>
|
|
</div>
|
|
<div class="wrap alignleft">
|
|
<ul>
|
|
<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>
|
|
|
|
<section>
|
|
<div class="wrap aligncenter">
|
|
<h2>Open Knowledge and Hobby Brewer</h2>
|
|
<p class="text-intro">
|
|
Everybody shares everything
|
|
</p>
|
|
</div>
|
|
<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>
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
<div class="wrap aligncenter">
|
|
<h2>Open Knowledge and Pro-Brewer</h2>
|
|
</div>
|
|
<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>
|
|
</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>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
|
|
</article>
|
|
<!-- end article -->
|
|
</main>
|
|
<!-- end main -->
|
|
|
|
<!-- A global footer
|
|
|
|
<footer 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>
|
|
</footer> -->
|
|
|
|
<!-- Required -->
|
|
<script src="static/js/webslides.js"></script>
|
|
<script>
|
|
window.ws = new WebSlides();
|
|
</script>
|
|
|
|
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
|
<script defer src="static/js/svg-icons.js"></script>
|
|
|
|
</body>
|
|
</html>
|