Skip to content
This repository was archived by the owner on Sep 6, 2021. It is now read-only.

Commit 0bf10cb

Browse files
ingorichteringorichter
committed
Merge pull request #7116 from resir014/locale_id
Added Indonesian translation to samples page.
2 parents f4e41e7 + 761a430 commit 0bf10cb

File tree

3 files changed

+270
-0
lines changed

3 files changed

+270
-0
lines changed

‎samples/id/Memulai/index.html‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7+
<title>MEMULAI DENGAN BRACKETS</title>
8+
<meta name="description" content="An interactive getting started guide for Brackets.">
9+
<link rel="stylesheet" href="main.css">
10+
</head>
11+
<body>
12+
13+
<h1>MEMULAI DENGAN BRACKETS</h1>
14+
<h2>Inilah panduan anda!</h2>
15+
16+
<!--
17+
DIBUAT DENGAN <3 DAN JAVASCRIPT
18+
-->
19+
20+
<p>
21+
Selamat datang di versi preview awal dari Brackets, sebuah editor baru dan open-source yang didesain
22+
untuk generasi baru web. Kami sangat menyukai standar, dan kami ingin membangun perangkat yang lebih baik
23+
untuk JavaScript, HTML dan CSS serta teknologi web lainnya. Inilah permulaan kami.
24+
</p>
25+
26+
<!--
27+
APA ITU BRACKETS?
28+
-->
29+
<p>
30+
<em>Brackets berbeda dari editor lainnya.</em>
31+
Perbedaan utama adalah editor ini dibuat dengan JavaScript, HTML dan CSS.
32+
Ini berarti para pengguna Brackets mempunyai skill yang cukup untuk memodifikasi dan memperluas
33+
editor ini.
34+
Bahkan, kami selalu menggunakan Brackets dalam pengembangan Brackets. Brackets juga memiliki
35+
fitur unik seperti Edit Cepat, Preview Langsung masih banyak lagi yang mungkin anda tidak temukan
36+
di editor lainnya.
37+
Untuk mengetahui lebih lanjut mengenai bagaimana cara menggunakan fitur-fitur tersebut, bacalah
38+
lebih lanjut.
39+
</p>
40+
41+
42+
<h2>Kami mencoba fitur-fitur baru</h2>
43+
44+
<!--
45+
HTML, CSS DAN JAVASCRIPT SALING BERHUBUNGAN
46+
-->
47+
<h3>Edit Cepat untuk CSS dan JavaScript</h3>
48+
<p>
49+
Tidak perlu lagi repot-repot berpindah dari satu dokumen ke dokumen lainnya. Ketika meng-edit
50+
HTML, gunakan shortcut <kbd>Cmd/Ctrl + E</kbd> untuk membuka ketak Edit Cepat yang menampilkan
51+
semua CSS yang sesuai.
52+
Ubah CSS anda, kemudian tekan <kbd>ESC</kbd> dan anda kembali lagi meng-edit HTML, atau tetap
53+
dibuka dan kotak tersebut akan menjadi satu dengan editor anda. Jika anda menekan
54+
<kbd>ESC</kbd> diluar kotak Edit Cepat, semuanya akan langsung di-collapse.
55+
</p>
56+
57+
<samp>
58+
Mau lihat cara kerjanya? Tempatkan kursor anda di tag <!-- <samp> --> di atas kemudian tekan
59+
<kbd>Cmd/Ctrl + E</kbd>. Anda akan melihat editor CSS muncul, menunjukkan atribut CSS yang
60+
relevan. Edit Cepat juga bisa dipakai untuk atribut class dan id.
61+
62+
Anda juga bisa membuat atribut baru dengan cara yang sama. Klik salah satu tag <!-- <p> -->
63+
di atas dan tekan <kbd>Cmd/Ctrl + E</kbd>. Saat ini tidak ada atribut yang di-set, namun
64+
anda bisa klik tombol Atribut Baru untuk menambahkan atribut untuk <!-- <p> -->.
65+
</samp>
66+
67+
<a href="screenshots/quick-edit.png">
68+
<img alt="Screenshot menunjukkan Edit Cepat CSS" src="screenshots/quick-edit.png" />
69+
</a>
70+
71+
<p>
72+
Anda juga bisa menggunakan shortcut yang sama untuk meng-edit hal-hal lainnya--seperti
73+
function di JavaScript, warna, dan fungsi animasi--dan kami terus menambahkan fitur
74+
lain setiap saat.
75+
Saat ini Edit Cepat tidak dapat di-nest, jadi anda hanya bisa menggunakan Edit Cepat
76+
ketika kursor berada dalam editor "full size".
77+
</p>
78+
79+
<!--
80+
PREVIEW LANGSUNG
81+
-->
82+
<h3>Preview perubahan HTML dan CSS secara langsung di dalam browser</h3>
83+
<p>
84+
Anda tahu kan mengenai teknik "save/reload dance" yang sering kita lakukan? Dimana kita merubah
85+
file, kemudian kita save, lalu pindah ke browser kemudian refresh page-nya lalu baru kita bisa
86+
lihat hasilnya? Dengan Brackets, tidak perlu lagi.
87+
</p>
88+
<p>
89+
Brackets akan membuka <em>koneksi langsung</em> ke browser anda dan merubah HTML dan CSS secara
90+
langsung, bahkan ketika anda mengetik! Mungkin anda sudah pernah melakukan hal yang sama dengan
91+
perangkat dari browser, namun di Brackets tidak perlu lagi meng-copy dan paste kode yang diubah
92+
kembali ke editor. Kode anda dijalankan di browser, namun tetap hidup di editor anda!
93+
</p>
94+
95+
<h3>Highlight langsung elemen HTML dan atribut CSS</h3>
96+
<p>
97+
Dengan Brackets, menganalisa dampak perubahan HTML dan CSS terhadap halaman lebih mudah. Ketika
98+
kursor anda berada dalam atribut CSS, Brackets akan meng-highlight semua elemen yang berefek di
99+
dalam browser. Sama juga ketika meng-edit file HTML, Brackets akan meng-highlight elemen HTML
100+
yang sesuai dalam browser.
101+
</p>
102+
103+
<samp>
104+
Jika anda menggunakan Google Chrome, anda bisa mencoba ini sendiri. Klik pada ikon petir di
105+
sebelah kanan atas pada jendela Brackets anda atau tekan <kbd>Cmd/Ctrl + Alt + P</kbd>.
106+
Ketika Preview Langsung dijalankan di dokumen HTML, semua CSS yang berhubungan bisa di-edit
107+
secara langsung. Ikon petir akan berubah warna dari abu-abu menjadi emas ketika Brackets
108+
menjalankan koneksi ke browser anda.
109+
110+
Sekarang, tempatkan kursor anda di tag <!-- <img> --> di atas. Perhatikan highlight warna biru yang
111+
muncul di sekeliling gambar pada Chrome. Lalu, tekan <kbd>Cmd/Ctrl + E</kbd> untuk membuka atribut
112+
CSS yang ada. Cobalah merubah ukuran border dari 10px ke 20px atau ubah warna background dari
113+
"transparent" ke "hotpink". Jika Brackets dan browser berjalan berdampingan, anda akan dapat melihat
114+
perubahannya secara langsung di browser anda. Keren, kan?
115+
</samp>
116+
117+
<p class="note">
118+
Saat ini, Brackets hanya mendukung Preview Langsung untuk HTML dan CSS. Namun di versi ini,
119+
perubahan terhadap JavaScript akan di-load ulang ketika anda melakukan save. Saat ini kami
120+
berusaha menambahkan support Preview Langsung untuk JavaScript. Preview langsung juga hanya bisa
121+
dijalankan di browser Google Chrome, namun kita berharap agar kita bisa membawa fitur ini ke
122+
browser lainnya di masa yang akan datang.
123+
</p>
124+
125+
<h3>Quick View</h3>
126+
<p>
127+
Buat yang belum hafal nilai RGB dan HEX sebuah warna, dengan Brackets mengetahui warna apa yang
128+
benar-benar dipakai semakin mudah. Di CSS atau HTML, tempatkan kursor di atas nilai warna atau gradien
129+
dan Brackets akan menampilkan preview warna/gradien tersebut secara otomatis. Sama halnya dengan gambar:
130+
taruh kursor di atas link gambar pada editor Brackets dan preview thumbnail dari gambar tersebut akan
131+
ditampilkan.
132+
</p>
133+
134+
<samp>
135+
Untuk mencobanya sendiri, tempatkan kursor anda pada tag <!-- <body> --> di atas dokumen ini dan tekan
136+
<kbd>Cmd/Ctrl + E</kbd> untuk membuka editor cepat CSS. Setelah itu, tempatkan kursor di atas nilai
137+
warna apapun di dalam CSS tersebut. Anda juga bisa mencoba sendiri untuk gradien dengan membuka editor
138+
cepat CSS pada tag <!-- <html> --> dan menempatkan kursor pada nilai background image manapun.
139+
Untuk mencoba preview gambar, tempatkan kursor anda di atas gambar screenshot yang ada di dokumen ini.
140+
</samp>
141+
142+
<h3>Mau fitur lain? Tambahkan ekstensi!</h3>
143+
<p>
144+
Selain semua fitur-fitur keren yang ada di dalam Brackets, kami mempunyai komunitas pengembang ekstensi
145+
yang terus berkembang jumlahnya dan sudah membuat ratusan ekstensi yang menambah fitur berguna lainnya.
146+
Apabila anda mau menambahkan fitur yang belum ada di Brackets, mungkin seseorang sudah membuat ekstensi
147+
untuk fitur tersebut. Untuk melihat daftar ekstensi yang tersedia, klik <strong>Berkas &gt; Pengaturan
148+
Ekstensi</strong> lalu klik di tab "Tersedia". Ketika anda menemukan ekstensi yang anda inginkan,
149+
tinggal klik tombol "Instal" di sebelahnya.
150+
</p>
151+
152+
<!--
153+
KAMI INGIN DENGAR PENDAPAT ANDA
154+
-->
155+
<h2>Ikut terlibat</h2>
156+
<p>
157+
Brackets adalah proyek open-source. Developer web dari seluruh dunia berkontribusi untuk membangun editor
158+
yang lebih baik. Dan juga ada banyak orang yang menembangkan ekstensi yang meningkatkan kemampuan Brackets.
159+
Kami ingin mendengar pendapat anda, ide dan saran-saran dari anda atau berkontribusilah secara langsung
160+
kepada kode Brackets.
161+
</p>
162+
<ul>
163+
<li><a href="http://brackets.io">Brackets.io</a></li>
164+
<li><a href="http://blog.brackets.io">Blog Tim Brackets</a></li>
165+
<li><a href="http://github.com/adobe/brackets">Brackets di GitHub</a></li>
166+
<li><a href="https://brackets-registry.aboutweb.com">Daftar Ekstensi Brackets</a></li>
167+
<li><a href="http://github.com/adobe/brackets/wiki">Wiki Brackets</a></li>
168+
<li><a href="http://groups.google.com/group/brackets-dev">Mailing List Developer Brackets</a></li>
169+
<li><a href="https://twitter.com/#!/brackets">@brackets di Twitter</a></li>
170+
<li>Mengobrol dengan developer Brackets di IRC dalam channel #brackets di Freenode</li>
171+
</ul>
172+
173+
</body>
174+
</html>
175+
<!--
176+
177+
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
178+
[:::::::::::::: ::::::::::::::]
179+
[:::::::::::::: ::::::::::::::]
180+
[::::::[[[[[[[: :]]]]]]]::::::]
181+
[:::::[ ]:::::]
182+
[:::::[ ]:::::]
183+
[:::::[ ]:::::]
184+
[:::::[ ]:::::]
185+
[:::::[ CODE THE WEB ]:::::]
186+
[:::::[ http://brackets.io ]:::::]
187+
[:::::[ ]:::::]
188+
[:::::[ ]:::::]
189+
[:::::[ ]:::::]
190+
[:::::[ ]:::::]
191+
[::::::[[[[[[[: :]]]]]]]::::::]
192+
[:::::::::::::: ::::::::::::::]
193+
[:::::::::::::: ::::::::::::::]
194+
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
195+
196+
-->

‎samples/id/Memulai/main.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
html {
2+
background-color: #e6e9e9;
3+
background-image: linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
4+
background-image: -o-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
5+
background-image: -moz-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
6+
background-image: -webkit-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
7+
background-image: -ms-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
8+
-webkit-font-smoothing: antialiased;
9+
}
10+
11+
body {
12+
margin: 0 auto;
13+
padding: 2em 2em 4em;
14+
max-width: 800px;
15+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
16+
font-size: 16px;
17+
line-height: 1.5em;
18+
color: #545454;
19+
background-color: #ffffff;
20+
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
21+
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
22+
box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
23+
}
24+
25+
h1, h2, h3, h4, h5, h6 {
26+
color: #222;
27+
font-weight: 600;
28+
line-height: 1.3em;
29+
}
30+
31+
h2 {
32+
margin-top: 1.3em;
33+
}
34+
35+
a {
36+
color: #0083e8;
37+
}
38+
39+
b, strong {
40+
font-weight: 600;
41+
}
42+
43+
samp {
44+
/* hide tutorial instructions so they don't show in the browser */
45+
display: none;
46+
}
47+
48+
img {
49+
background: transparent;
50+
border: 10px solid rgba(0, 0, 0, 0.12);
51+
border-radius: 4px;
52+
display: block;
53+
margin: 1.3em auto;
54+
max-width: 95%;
55+
-webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
56+
}
57+
58+
@keyframes colorize {
59+
0% {
60+
-webkit-filter: grayscale(100%);
61+
}
62+
100% {
63+
-webkit-filter: grayscale(0%);
64+
}
65+
}
66+
67+
@-webkit-keyframes colorize {
68+
0% {
69+
-webkit-filter: grayscale(100%);
70+
}
71+
100% {
72+
-webkit-filter: grayscale(0%);
73+
}
74+
}

‎samples/id/Memulai/screenshots/quick-edit.png‎

398 KB
Loading

0 commit comments

Comments
 (0)