-
Notifications
You must be signed in to change notification settings - Fork 158
/
index.html
266 lines (264 loc) · 15.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="assets/img/favicon.png">
<title>Besut Kode 2017</title>
<!-- Fonts and icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
<!-- CSS Files -->
<link href="assets/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/css/material-kit.css" rel="stylesheet" />
</head>
<body class="landing-page" style="overflow: scroll">
<nav class="navbar navbar-fixed-top navbar-color-on-scroll navbar-transparent">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#head">Besut Kode 2017</a>
</div>
<div class="collapse navbar-collapse" id="navigation-example">
<ul class="nav navbar-nav navbar-right">
<li><a href="#tentang">Tentang</a></li>
<li><a href="#tugas">Tugas</a></li>
<li><a href="#hadiah">Hadiah</a></li>
<li><a href="#kontak">Kontak</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
<div class="header header-filter" style="background-image: url(assets/img/landing_header.jpg);" id="head">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="title">Kompetisi retas kode Indonesia</h1>
<h4>Besut Kode adalah kompetisi <i>online</i> pengembangan perangkat lunak bebas dan sumber terbuka untuk pelajar SMA, SMK, dan MA berumur 15-17 tahun (pada 30 November 2017) yang menargetkan pelajar untuk berpartisipasi dalam Google Code-In / Google Summer of Code.</h4>
<br />
<h6>Program ini <b>gratis</b> dan <b>tidak memungut biaya</b></h6>
</div>
</div>
</div>
</div>
<div class="main">
<div class="container">
<div class="section text-center" id="tentang">
<div class="row">
<h1 class="title">Tentang Besut Kode 2017</h1>
<h5 class="description">Besut Kode adalah kompetisi <i>online</i> pengembangan perangkat lunak bebas dan sumber terbuka untuk pelajar SMA, SMK, dan MA berumur 15-17 tahun (pada 30 November 2017). Peserta diminta untuk mengerjakan tugas yang diberikan, dan mentor akan menyatakan peserta tersebut lolos ke putaran selanjutnya atau gugur. Mentor akan menganalisa peserta yang berbakat, apabila terpilih, mentor akan membimbing peserta untuk dapat mengikuti <a href="https://developers.google.com/open-source/gci/">Google Code-In</a> / <a href="https://developers.google.com/open-source/gsoc/">Google Summer of Code.</a></h5>
</div>
<div class="team">
<div class="row">
<div class="col-md-6">
<div class="team-player">
<img src="assets/img/John.jpg" alt="Thumbnail Image" class="img-raised img-circle">
<h4 class="title">John Vandenberg<br />
<small class="text-muted">Mentor</small>
</h4>
<p class="description">John Vandenberg adalah lulusan dari Queensland University of Technology, Australia dan telah menjadi mentor untuk Google Code-in dan Google Summer of Code sejak tahun 2015.</p>
<a href="https://github.com/jayvdb" class="btn btn-simple btn-just-icon"><i class="fa fa-github"></i></a>
<a href="https://www.facebook.com/johnmark.vandenberg" class="btn btn-simple btn-just-icon"><i class="fa fa-facebook-square"></i></a>
</div>
</div>
<div class="col-md-6">
<div class="team-player">
<img src="assets/img/Yana Agun Siswanto.jpeg" alt="Thumbnail Image" class="img-raised img-circle">
<h4 class="title">Yana Agun Siswanto<br />
<small class="text-muted">Mentor</small>
</h4>
<p class="description">Yana Agun Siswanto adalah pemenang Grand Prize Besut Kode Universitas 2016. Dikenal juga sebagai <em>bekicot</em> dan <em>yana_agun</em> di berbagai media sosial dan profil publik. Kini berkuliah di Universitas Telkom.</p>
<a href="https://github.com/bekicot" class="btn btn-simple btn-just-icon"><i class="fa fa-github"></i></a>
<a href="https://twitter.com/yana_agun" class="btn btn-simple btn-just-icon"><i class="fa fa-twitter-square"></i></a>
</div>
</div>
</div>
</div>
<hr>
<div class="team">
<div class="row">
<div class="col-md-6">
<div class="team-player">
<img src="assets/img/Kaisar.jpg" alt="Thumbnail Image" class="img-raised img-circle">
<h4 class="title">M. Kaisar Arkhan<br />
<small class="text-muted">Mentor & <strong>Google Code In 2016 Winner</strong></small>
</h4>
<p class="description">M. Kaisar Arkhan atau dikenal dengan alias <i>yuki_is_bored</i> adalah salah satu pemenang Google Code-In 2016 untuk organisasi <a href="https://fossasia.org">FOSSASIA</a> dan telah menjadi mentor Google Summer of Code untuk organisasi
<a href="https://coala.io">coala</a>.</p>
<a href="https://github.com/yukiisbored" class="btn btn-simple btn-just-icon"><i class="fa fa-github"></i></a>
<a href="https://twitter.com/yuki_is_bored" class="btn btn-simple btn-just-icon"><i class="fa fa-twitter-square"></i></a>
</div>
</div>
<div class="col-md-6">
<div class="team-player">
<img src="assets/img/Scott.jpg" alt="Thumbnail Image" class="img-raised img-circle">
<h4 class="title">Scott M. Sunarto<br />
<small class="text-muted">Mentor & <strong>Google Code In 2016 Winner</strong></small>
</h4>
<p class="description">Scott M. Sunarto adalah salah satu pemenang Google Code-In 2016 untuk organisasi <a href="https://terasology.org">MovingBlocks</a> dan telah menjadi mentor Google Summer of Code untuk organisasi yang sama.</p>
<a href="https://github.com/smsunarto" class="btn btn-simple btn-just-icon"><i class="fa fa-github"></i></a>
<a href="https://facebook.com/scott.sunarto" class="btn btn-simple btn-just-icon"><i class="fa fa-facebook-square"></i></a>
</div>
</div>
</div>
</div>
<hr>
</div>
<div class="section text-center" id="tugas">
<div class="row">
<h1>Tugas-tugas Besut Kode 2017</h1>
<h5 class="description">Besut Kode 2017 memperluas bidang hingga mencakup berbagai bidang studi yang berhubungan dengan pengembangan perangkat lunak bebas dan sumber terbuka. Bidang yang kami dalami adalah:</h5>
<div class="features">
<div class="row">
<div class="col-md-4">
<div class="info">
<div class="icon icon-primary">
<i class="fa fa-cube" aria-hidden="true"></i>
</div>
<h4 class="info-title">Pemaketan</h4>
<p>Pemaketan adalah proses memaketkan perangkat lunak dari kode sumber ke sebuah paket yang dapat didistribusikan dan dipasang oleh pengguna perangkat lunak tersebut.</p>
</div>
</div>
<div class="col-md-4">
<div class="info">
<div class="icon icon-success">
<i class="fa fa-cogs" aria-hidden="true"></i>
</div>
<h4 class="info-title">CI/Docker</h4>
<p>CI atau <i>Continuous Integration</i> adalah sebuah perangkat lunak yang dipakai dalam proses pengembangan lunak untuk mengotomatiskan pengujian untuk setiap perubahan yang terjadi. Docker adalah salah satu sistem kontainer
Linux yang sangat populer dan memudahkan tugas tim operator untuk mengirimkan perangkat lunak dari fase-fase kode, pengujian, dan produksi.</p>
</div>
</div>
<div class="col-md-4">
<div class="info">
<div class="icon icon-danger">
<i class="fa fa-paint-brush" aria-hidden="true"></i>
</div>
<h4 class="info-title">Desain grafis</h4>
<p>Selain pemrograman, desain grafis adalah hal yang tidak kalah penting dalam pengembangan perangkat lunak. Desain grafis memfasilitasi pengguna dan pengembang untuk berinteraksi dengan perangkat lunak yang akan mereka gunakan/kembangkan.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="info">
<div class="icon icon-info">
<i class="fa fa-globe" aria-hidden="true"></i>
</div>
<h4 class="info-title">Data/Pemetaan</h4>
<p>Open Data dan Pemetaan yang terbuka mempunyai peran penting di zaman informasi ini. Mereka memberikan kebebasan bagi seluruh orang untuk menganalisis, membuktikan fakta, dan mengambilkan makna dari data dan peta yang terbuka tersebut. Dengan memberi kebebasan bagi orang untuk menambah dan memodifikasi data berdasarkan sumber publik yang terpercaya, dapat dipastikan bahwa data tidak dapat dipalsukan.</p>
</div>
</div>
<div class="col-md-4">
<div class="info">
<div class="icon icon-default">
<i class="fa fa-book" aria-hidden="true"></i>
</div>
<h4 class="info-title">Dokumentasi</h4>
<p>Dokumentasi merupakan hal yang sangat penting dalam pengembangan perangkat lunak. Dokumentasi mencakup berbagai hal mulai dari catatan pengembang, cara pemakaian, sampai cara berkontribusi.</p>
</div>
</div>
<div class="col-md-4">
<div class="info">
<div class="icon icon-warning">
<i class="fa fa-language" aria-hidden="true"></i>
</div>
<h4 class="info-title">Translasi</h4>
<p>Translasi membuat perangkat lunak dapat digunakan oleh pengguna-pengguna yang tidak mahir dalam berbahasa Inggris sehingga memperluas basis pengguna.</p>
</div>
</div>
</div>
<div class="spoiler">
<div class="spoiler-btn">
<button type="submit" class="btn btn-danger btn-raised btn-lg">Flowchart Kompetisi</button>
</div>
<div class="spoiler-body collapse">
<a href="assets/img/flowchart.jpg"><img src="assets/img/flowchart.jpg" class="img-responsive center-block"></a>
</div>
</div>
</div>
</div>
<hr>
</div>
<div class="section text-center" id="hadiah">
<div class="row">
<h1 class="title">Hadiah Besut Kode 2017</h1>
<h5 class="description">Berikut adalah hadiah-hadiah yang dapat Anda dapatkan setelah berhasil menyelesaikan beberapa tahap Besut Kode:</h5>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-image">
<img src="assets/img/gci.jpg" class="img-responsive center-block">
</div>
<div class="card-description">
<a href="#"><h4>Pembinaan untuk Google Code-In</h4></a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-image">
<img src="assets/img/wmid.jpg" class="img-responsive center-block">
</div>
<div class="card-description">
<a href="#"><h4>Sertifikat dari Wikimedia Indonesia</h4></a>
</div>
</div>
</div>
</div>
<div class="row">
<h5 class="description">Untuk mengetahui lebih lanjut mengenai Google Code-In, kami sarankan Anda melihat penjelasan pemenang Google Code-In 2014 dari Indonesia, Tasya Rukmana. Berikut adalah video wawancara tim Besut Kode dengan Tasya.</h5>
<div class="col-md-6 col-md-offset-3">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Sj_NST0OhUc"></iframe>
</div>
</div>
</div>
<hr>
</div>
<div class="section text-center" id="kontak">
<div class="row">
<h1 class="title">Hubungi Kami</h1>
<h5 class="description">Untuk pertanyaan seputar Besut Kode 2017, Anda dapat menghubungi komunitas kami melalui berbagai pranala di bawah ini:</h5>
<div class="row">
<div class="col-md-3 col-md-offset-3">
<a href="https://github.com/BesutKode"><i class="fa fa-github fa-5x"></i></a>
</div>
<div class="col-md-3">
<a href="https://www.facebook.com/groups/gci.indo/"><i class="fa fa-facebook-square fa-5x"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- Core JS Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-datepicker.js"></script>
<script src="assets/js/material.min.js"></script>
<script src="assets/js/material-kit.js"></script>
<script src="assets/js/nouislider.min.js"></script>
<script src="assets/js/b24-form-interactions.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-104499174-1', 'auto');
ga('send', 'pageview');
</script>
</html>