add dashboards link
[slides.git] / fosdem2014 / index.html
CommitLineData
46d23c7b
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>Developing Webapps for Firefox OS</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="Overview">
10 <link rel="index" id="link-toc" href="#toc" title="Contents">
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">Web App Dev</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>&lt; back</a>
22 <span id="nav-prev-nolink" class="nolink">&lt; back</span> |
23 <a href="#" id="nav-next" id="goNext" accesskey="n" hidden>fwd &gt;</a>
24 <span id="nav-next-nolink" class="nolink">fwd &gt;</span>
25</nav>
26
27<article id="toc" title="Table of Contents">
28<h1>Table of Contents</h1>
29<h2>Developing Webapps for Firefox OS</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" title="Start Page">
39<h1>Developing Webapps for Firefox OS</h1>
40<h2>The Efficient &amp; Simplistic Approach</h2>
41
42<div class="simplebox">
43<mark><a href="http://home.kairo.at/">Robert Kaiser</a></mark>,
44"KaiRo" &lt;kairo@kairo.at&gt;
45<br><small>Project Manager, Mozilla QA</small>
46</div>
47
48<div class="simplebox">
eec8c873
RK
49<mark><a href="http://sayak.in/">Sayak Sarkar</a></mark>
50<br><small>Mozilla Reps Mentor, India</small>
46d23c7b
RK
51</div>
52
53<div class="captionedbox">
54<p class="captionedbox-caption">Slides:
55 <a href="http://slides.kairo.at/fosdem2014/">http://slides.kairo.at/fosdem2014/</a></p>
56<div class="captionedbox-content small">
57<ul class="small">
58 <li>Created for
59 <a href="http://fosdem.org/2014/schedule/track/mozilla/">Mozilla
60 Developer Room</a> at <a href="http://www.fosdem.org/">FOSDEM 2014</a> in
61 Brussels.</li>
62 <li>Written in HTML 5 with CSS 3 and JavaScript.</li>
63 <li>Navigation via links on all slides, via access keys
64 (e.g. "n"/Alt+Shift+N for "next") or back/forward arrow keys</li>
65 <li><a href="#toc">Contents</a></li>
66 <li><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/at/"><img
67 alt="Licensed under CC-BY-SA," style="border-width:0;vertical-align:bottom;"
68 src="cc-by-sa-80x15.png"></a> 01/2014 Robert Kaiser &amp; Sayak Sarkar -
69 "Mozilla", "Firefox" and their logos are
70 <a href="http://www.mozilla.org/foundation/trademarks/list.html">trademarks
71 of the Mozilla Foundation</a>.</li>
72</ul>
73</div>
74</div>
75</article>
76
77<article id="webapp" title="Web Apps">
78<h1>What is a Web App?</h1>
79
80<div class="simplebox">
81<ul>
82<li>hosted / packaged</li>
83<li>"web site" (HTML/CSS/JS) + app manifest</li>
84</ul>
85</div>
86</article>
87
88<article id="manifest" title="App Manifest">
89<h1>App Manifest</h1>
90
91<div class="simplebox">
92<pre class="small"><code>{
93 "name": "Lantea Maps",
94 "description": "Display maps and record (GPS) tracks of your location.",
95 "launch_path": "/index.html",
96 "appcache_path": "/manifest.appcache",
97 "permissions": {
98 "storage": {
99 "description": "Required for saving settings, tracks, and the tile cache."
100 },
101 "geolocation": {
102 "description": "Required record tracks."
103 }
104 },
105 "developer": {
106 "name": "Robert Kaiser",
107 "url": "http://www.kairo.at/"
108 },
109 "icons": {
110 "16": "/style/lanteaIcon16.png",
111 "32": "/style/lanteaIcon32.png",
112 "64": "/style/lanteaIcon64.png",
113 "128": "/style/lanteaIcon128.png"
114 }
115}
116</code></pre>
117</div>
118</article>
119
120<article id="bestpractices" title="Best Practices">
121<h1>Best Practices for Development</h1>
122
123<div class="simplebox">
124<p>When writing, think of later maintenance:</p>
125<ul class="arrows">
126 <li>Readable for someone unfamiliar with that code</li>
127 <li>Variable names that explain themselves</li>
128 <li>Comments with explanations for anything non-obvious</li>
129 <li>That's true for CSS and HTML as well!</li>
130 <li>Group thing in logical ways</li>
131</ul>
132</div>
133</article>
134
135<article id="practices-conclusion" title="Conclusion on Practices">
136<h1>Best Practices for Development</h1>
137
138<div class="simplebox">
139<p>How should code look like when you want to write a patch?</p>
140<ul class="arrows">
141 <li>Write your own code like that!</li>
142</ul>
143</div>
144</article>
145
146<article id="libraries" title="Careful with Libraries">
147<h1>Be Careful with Libraries</h1>
148
149<div class="simplebox">
150<ul>
151 <li>When starting to learn things, you should know what every line does</li>
152 <li>Due to e.g. CSP restrictions, libraries can give odd errors in apps</li>
153 <li>Size &amp; efficiency: How much of the library do you actually use?</li>
154 <li>It's easier to patch your own code than a library</li>
155 <li>Be aware of licenses!</li>
156</ul>
157
158</div>
159</article>
160
161<article id="libraries-conclusion" title="Conclusions on Libraries">
162<h1>Be Careful with Libraries</h1>
163
164<div class="simplebox">
165<ul class="arrows">
166 <li>Only use libraries if you really trust them, use a big enough portion of them, and really know what you are doing.</li>
167 <li>Also, ideally, the basic logic of your app stands without libraries and they are only helpers.</li>
168</ul>
169</div>
170</article>
171
172<article id="devtools" title="Developer Tools">
173<h1>Web App Development Tools</h1>
174
175<div class="simplebox">
176<img src="devtools.png" alt="Firefox DevTools" class="slidepic">
177<p class="cent">App Manager - and more!</p>
178<p class="cent largetext"><strong>DEMO TIME!</strong></p>
179<p class="ensurepicinbox"></p>
180</div>
181</article>
182
183<article id="end" title="The End">
184
185<div class="simplebox">
186<img src="be-the-future.png" alt="Firefox OS - Be The Future" class="slidepic">
187<p class="cent largetext"><strong>Questions?</strong></p>
188<p class="ensurepicinbox"></p>
189</div>
190</article>
191
192</body>
193</html>