[slides.git] / linuxwochen2018 / index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="Author" content="KaiRo - Robert Kaiser">
  <title>Mozilla Emerging Technologies</title>
  <link rel="stylesheet" type="text/css" href="slides.css">
  <script type="text/javascript" src="slides.js"></script>
  <link rel="contents" href="#index" title="Überblick">
  <link rel="index" id="link-toc" href="#toc" title="Inhalt">
  <link rel="start" id="link-start" href="#index" title="Start">
</head>
<body onload="docLoaded();">
<header id="header"><div id="header-text">Emerging Tech</div>
  <div id="subheader-text"></div>
  <a id="headerlogo" href="#index" title="Startseite">Mozilla</a>
</header>
<nav id="slidenav">
  <a href="#toc" id="nav-toc" accesskey="t">toc</a> ||
  <a href="#index" id="nav-start" accesskey="s">start</a> ||
  <a href="#" id="nav-prev" accesskey="p" hidden>&lt; back</a>
  <span id="nav-prev-nolink" class="nolink">&lt; back</span> |
  <a href="#" id="nav-next" id="goNext" accesskey="n" hidden>fwd &gt;</a>
  <span id="nav-next-nolink" class="nolink">fwd &gt;</span>
</nav>

<article id="toc" data-title="Inhalt">
<h1><span>Inhalt</span></h1>
<h2>Mozilla Emerging Technologies</h2>

<div class="captionedbox">
<p class="captionedbox-caption">The following slides are available in this presentation:</p>
<div class="captionedbox-content">
<ul id="toc-list">
</ul>
</article>

<article id="index" data-title="Start Page" data-seconds="600">
<h1><span>Mozilla Emerging Technologies</span></h1>
<h2>New Technologies for the Open Web</h2>

<div class="simplebox decofont">
<mark><a href="http://home.kairo.at/">Robert Kaiser</a></mark>,
"KaiRo" &lt;kairo@kairo.at&gt;
<br><small>Mozilla Tech Speaker</small>
</div>

<div class="captionedbox">
<p class="captionedbox-caption decofont">Slides:
  <a href="https://slides.kairo.at/linuxwochen2018/">https://slides.kairo.at/linuxwochen2018/</a></p>
<div class="captionedbox-content small">
<ul class="small">
  <li>Created for a
    <a href="https://cfp.linuxwochen.at/de/LWW18/public/events/741">presentation</a>
    at <a href="http://www.linuxwochen.at/">Linuxwochen 2018</a> in Wien/Vienna.</li>
  <li>Written in HTML 5 with CSS 3 and JavaScript.</li>
  <li>Navigation via links on all slides, via access keys
   (e.g. "n"/Alt+Shift+N for "next") or back/forward arrow keys</li>
  <li><a href="#toc">Contents</a></li>
  <li><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img
      alt="Lizenziert unter CC-BY-SA," class="ccinline" src="cc-by-sa.svg"></a>
    04/2018 Robert Kaiser -
    "Mozilla", "Firefox" and their logos are
    <a href="http://www.mozilla.org/foundation/trademarks/list.html">trademarks
    of Mozilla Foundation</a>.</li>
</ul>
</div>
</div>
</article>

<article id="mozet" data-title="Emerging Technologies Group">
<h1><span>Emerging Technologies Group</span></h1>

<div class="simplebox">
<ul>
  <li>R&amp;D organization @ Mozilla, a.k.a. <mark>Mozilla Research</mark></li>
  <li><a href="https://research.mozilla.org/">research.mozilla.org</a></li>
  <li><a href="https://www.mozilla.org/en-US/technology/">mozilla.org/technology</a></li>
  <li>Multiple teams for different technologies</li>
</ul>
</div>
</article>

<article id="webxr" data-title="Mixed Reality">
<h1><span>Mixed Reality (XR)</span></h1>

<div class="simplebox">
<img src="vrheadset-boy.png" class="slidepic"
 alt="A-Frame - aframe-io">
<ul>
  <li>WebXR - <mark>Virtual &amp; Augmented Reality</mark> (WebVR &amp; AR)</li>
  <li><a href="https://research.mozilla.org/mixed-reality/">research.mozilla.org/mixed-reality</a></li>
  <li><a href="https://webvr.info/">webvr.info</a> - WebVR API, <mark>Open Standard</mark></li>
  <li>In concert with WebGL, WebAudio and Gamepad APIs</li>
  <li>Windows: Firefox release, Mac: Nightly, Linux: in development</li>
</ul>
<p class="ensurepicinbox"></p>
</div>
</article>

<article id="aframe" data-title="A-Frame">
<h1><span>A-Frame - XR Made Simple</span></h1>

<div class="simplebox">
<img src="aframe-sticker.png" class="slidepic"
 alt="A-Frame - aframe-io">
Example:
<pre>
&lt;<mark>a-scene</mark>&gt;
  &lt;a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"&gt;&lt;/a-sphere&gt;
  &lt;<mark>a-cube</mark> position="-1 0.5 1" rotation="0 0 0" width="1" height="1" depth="1" color="#4CC3D9"&gt;
    &lt;<mark>a-animation</mark> attribute="rotation" repeat="indefinite" to="0 360 0"&gt;&lt;/a-animation&gt;
  &lt;/a-cube&gt;
  &lt;a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"&gt;&lt;/a-cylinder&gt;
  &lt;a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"&gt;&lt;/a-plane&gt;
  &lt;a-sky color="#ECECEC"&gt;&lt;/a-sky&gt;
&lt;/a-scene&gt;
</pre>
<p><a href="https://codepen.io/mozvr/pen/jqERjQ">edit/view</a>
- More at <a href="https://aframe.io/">aframe.io</a>
<p class="ensurepicinbox"></p>
</div>
</article>

<article id="codecs" data-title="Open Media Codecs">
<h1><span>Open Media Codecs - Daala &amp; AV1</span></h1>

<div class="simplebox">
<img src="av1-comingsoon.png" class="slidepic" alt="AV1 - Coming Soon">
<ul>
  <li><a href="https://www.opus-codec.org/">Opus</a>: <mark>royalty-free, open, universal</mark> audio codec</li>
  <li>Next target: do the same with video</li>
  <li>Mozilla/Xiph: Daala + Google: VP9 + Cisco: Thor</li>
  <li><a href="http://aomedia.org/">Alliance for Open Media (AOMedia)</a> for collaboration</li>
  <li>AV1 bitstream frozen since April 2018</li>
  <li>Next: De-/Encoding perf, hardware support, ...</li>
</ul>
<p class="ensurepicinbox"></p>
</div>
</article>

<article id="speech" data-title="Speech &amp; Learning">
<h1><span>Speech &amp; Machine Learning</span></h1>

<div class="simplebox">
<img src="speechlearning.png" class="slidepic" alt="Speech Recording + Learning">
<ul>
  <li><a href="https://voice.mozilla.org/">Common Voice</a>: Open repository for <mark>voice recordings</mark></li>
  <li>Machine learning to train speech-to-text (STT) systems</li>
  <li>DeepSpeech / Pipsqueak: Mozilla STT, open source</li>
  <li><mark>Offline speech recognition</mark> engine, for security + privacy, can run on RPi3</li>
  <li><a href="https://blog.mozilla.org/blog/2017/11/29/announcing-the-initial-release-of-mozillas-open-source-speech-recognition-model-and-voice-dataset/">Only
    6.5% error rate on first released model</a></li>
  <li><a href="https://research.mozilla.org/machine-learning/">research.mozilla.org/machine-learning</a></li>
</ul>
<p class="ensurepicinbox"></p>
</div>
</article>

<article id="rust" data-title="Rust">
<h1><span>Programmiersprache - Rust</span></h1>

<div class="simplebox">
</div>
</article>

<article id="servo" data-title="Servo Web-Engine">
<h1><span>Web-Engine - Servo</span></h1>

<div class="simplebox">
</div>
</article>

<article id="wasm" data-title="WebAssembly">
<h1><span>WebAssembly</span></h1>

<div class="simplebox">
</div>
</article>

<article id="iot" data-title="Web of Things">
<h1><span>IoT - Things Gateway</span></h1>

<div class="simplebox">
</div>
</article>

<article id="end" data-title="Ende">

<div class="simplebox">
<h1 class="cent" style="position: relative; z-index: 3; color: #FFFFFF; font-size: 2.5em;">Fragen?</h1>
<img src="mister_tricorder.jpg" class="sshot"
     style="width: 100%; margin-top: -4.5em; position: relative; z-index: 1;"
     alt="Data &amp; Mister Tricorder">
</div>
</article>

</body>
</html>
Commit	Line	Data
16daf33f RK	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	5	<meta name="Author" content="KaiRo - Robert Kaiser">
	6	<title>Mozilla Emerging Technologies</title>
	7	<link rel="stylesheet" type="text/css" href="slides.css">
	8	<script type="text/javascript" src="slides.js"></script>
	9	<link rel="contents" href="#index" title="Überblick">
	10	<link rel="index" id="link-toc" href="#toc" title="Inhalt">
	11	<link rel="start" id="link-start" href="#index" title="Start">
	12	</head>
	13	<body onload="docLoaded();">
	14	<header id="header"><div id="header-text">Emerging Tech</div>
	15	<div id="subheader-text"></div>
	16	<a id="headerlogo" href="#index" title="Startseite">Mozilla</a>
	17	</header>
	18	<nav id="slidenav">
	19	<a href="#toc" id="nav-toc" accesskey="t">toc</a> \|\|
	20	<a href="#index" id="nav-start" accesskey="s">start</a> \|\|
	21	<a href="#" id="nav-prev" accesskey="p" hidden>< back</a>
	22	<span id="nav-prev-nolink" class="nolink">< back</span> \|
	23	<a href="#" id="nav-next" id="goNext" accesskey="n" hidden>fwd ></a>
	24	<span id="nav-next-nolink" class="nolink">fwd ></span>
	25	</nav>
	26
	27	<article id="toc" data-title="Inhalt">
	28	<h1><span>Inhalt</span></h1>
	29	<h2>Mozilla Emerging Technologies</h2>
	30
	31	<div class="captionedbox">
	32	<p class="captionedbox-caption">The following slides are available in this presentation:</p>
	33	<div class="captionedbox-content">
	34	<ul id="toc-list">
	35	</ul>
	36	</article>
	37
	38	<article id="index" data-title="Start Page" data-seconds="600">
	39	<h1><span>Mozilla Emerging Technologies</span></h1>
	40	<h2>New Technologies for the Open Web</h2>
	41
	42	<div class="simplebox decofont">
	43	<mark><a href="http://home.kairo.at/">Robert Kaiser</a></mark>,
	44	"KaiRo" <kairo@kairo.at>
	45	<br><small>Mozilla Tech Speaker</small>
	46	</div>
	47
	48	<div class="captionedbox">
	49	<p class="captionedbox-caption decofont">Slides:
	50	<a href="https://slides.kairo.at/linuxwochen2018/">https://slides.kairo.at/linuxwochen2018/</a></p>
	51	<div class="captionedbox-content small">
	52	<ul class="small">
	53	<li>Created for a
	54	<a href="https://cfp.linuxwochen.at/de/LWW18/public/events/741">presentation</a>
	55	at <a href="http://www.linuxwochen.at/">Linuxwochen 2018</a> in Wien/Vienna.</li>
	56	<li>Written in HTML 5 with CSS 3 and JavaScript.</li>
	57	<li>Navigation via links on all slides, via access keys
	58	(e.g. "n"/Alt+Shift+N for "next") or back/forward arrow keys</li>
	59	<li><a href="#toc">Contents</a></li>
	60	<li><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img
	61	alt="Lizenziert unter CC-BY-SA," class="ccinline" src="cc-by-sa.svg"></a>
	62	04/2018 Robert Kaiser -
	63	"Mozilla", "Firefox" and their logos are
	64	<a href="http://www.mozilla.org/foundation/trademarks/list.html">trademarks
65	of Mozilla Foundation</a>.</li>
66	</ul>
67	</div>
68	</div>
69	</article>
70
71	<article id="mozet" data-title="Emerging Technologies Group">
72	<h1><span>Emerging Technologies Group</span></h1>
73
74	<div class="simplebox">
75	<ul>
76	<li>R&D organization @ Mozilla, a.k.a. <mark>Mozilla Research</mark></li>
77	<li><a href="https://research.mozilla.org/">research.mozilla.org</a></li>
78	<li><a href="https://www.mozilla.org/en-US/technology/">mozilla.org/technology</a></li>
79	<li>Multiple teams for different technologies</li>
80	</ul>
81	</div>
82	</article>
83
84	<article id="webxr" data-title="Mixed Reality">
85	<h1><span>Mixed Reality (XR)</span></h1>
86
87	<div class="simplebox">
88	<img src="vrheadset-boy.png" class="slidepic"
89	alt="A-Frame - aframe-io">
90	<ul>
91	<li>WebXR - <mark>Virtual & Augmented Reality</mark> (WebVR & AR)</li>
92	<li><a href="https://research.mozilla.org/mixed-reality/">research.mozilla.org/mixed-reality</a></li>
93	<li><a href="https://webvr.info/">webvr.info</a> - WebVR API, <mark>Open Standard</mark></li>
94	<li>In concert with WebGL, WebAudio and Gamepad APIs</li>
95	<li>Windows: Firefox release, Mac: Nightly, Linux: in development</li>
96	</ul>
97	<p class="ensurepicinbox"></p>
98	</div>
99	</article>
100
101	<article id="aframe" data-title="A-Frame">
102	<h1><span>A-Frame - XR Made Simple</span></h1>
103
104	<div class="simplebox">
105	<img src="aframe-sticker.png" class="slidepic"
106	alt="A-Frame - aframe-io">
107	Example:
108	<pre>
109	<<mark>a-scene</mark>>
110	<a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
111	<<mark>a-cube</mark> position="-1 0.5 1" rotation="0 0 0" width="1" height="1" depth="1" color="#4CC3D9">
112	<<mark>a-animation</mark> attribute="rotation" repeat="indefinite" to="0 360 0"></a-animation>
113	</a-cube>
114	<a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
115	<a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
116	<a-sky color="#ECECEC"></a-sky>
117	</a-scene>
118	</pre>
119	<p><a href="https://codepen.io/mozvr/pen/jqERjQ">edit/view</a>
120	- More at <a href="https://aframe.io/">aframe.io</a>
121	<p class="ensurepicinbox"></p>
122	</div>
123	</article>
124
125	<article id="codecs" data-title="Open Media Codecs">
126	<h1><span>Open Media Codecs - Daala & AV1</span></h1>
127
128	<div class="simplebox">
129	<img src="av1-comingsoon.png" class="slidepic" alt="AV1 - Coming Soon">
130	<ul>
131	<li><a href="https://www.opus-codec.org/">Opus</a>: <mark>royalty-free, open, universal</mark> audio codec</li>
132	<li>Next target: do the same with video</li>
133	<li>Mozilla/Xiph: Daala + Google: VP9 + Cisco: Thor</li>
134	<li><a href="http://aomedia.org/">Alliance for Open Media (AOMedia)</a> for collaboration</li>
135	<li>AV1 bitstream frozen since April 2018</li>
136	<li>Next: De-/Encoding perf, hardware support, ...</li>
137	</ul>
138	<p class="ensurepicinbox"></p>
139	</div>
140	</article>
141
142	<article id="speech" data-title="Speech & Learning">
143	<h1><span>Speech & Machine Learning</span></h1>
144
145	<div class="simplebox">
146	<img src="speechlearning.png" class="slidepic" alt="Speech Recording + Learning">
147	<ul>
148	<li><a href="https://voice.mozilla.org/">Common Voice</a>: Open repository for <mark>voice recordings</mark></li>
149	<li>Machine learning to train speech-to-text (STT) systems</li>
150	<li>DeepSpeech / Pipsqueak: Mozilla STT, open source</li>
151	<li><mark>Offline speech recognition</mark> engine, for security + privacy, can run on RPi3</li>
152	<li><a href="https://blog.mozilla.org/blog/2017/11/29/announcing-the-initial-release-of-mozillas-open-source-speech-recognition-model-and-voice-dataset/">Only
153	6.5% error rate on first released model</a></li>
154	<li><a href="https://research.mozilla.org/machine-learning/">research.mozilla.org/machine-learning</a></li>
155	</ul>
156	<p class="ensurepicinbox"></p>
157	</div>
158	</article>
159
160	<article id="rust" data-title="Rust">
161	<h1><span>Programmiersprache - Rust</span></h1>
162
163	<div class="simplebox">
164	</div>
165	</article>
166
167	<article id="servo" data-title="Servo Web-Engine">
168	<h1><span>Web-Engine - Servo</span></h1>
169
170	<div class="simplebox">
171	</div>
172	</article>
173
174	<article id="wasm" data-title="WebAssembly">
175	<h1><span>WebAssembly</span></h1>
176
177	<div class="simplebox">
178	</div>
179	</article>
180
181	<article id="iot" data-title="Web of Things">
182	<h1><span>IoT - Things Gateway</span></h1>
183
184	<div class="simplebox">
185	</div>
186	</article>
187
188	<article id="end" data-title="Ende">
189
190	<div class="simplebox">
191	<h1 class="cent" style="position: relative; z-index: 3; color: #FFFFFF; font-size: 2.5em;">Fragen?</h1>
192	<img src="mister_tricorder.jpg" class="sshot"
193	style="width: 100%; margin-top: -4.5em; position: relative; z-index: 1;"
194	alt="Data & Mister Tricorder">
195	</div>
196	</article>
197
198	</body>
199	</html>