mirror of
https://github.com/adobe/brackets.git
synced 2024-11-20 18:02:54 +01:00
197 lines
10 KiB
HTML
197 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title>MEMULAI DENGAN BRACKETS</title>
|
|
<meta name="description" content="An interactive getting started guide for Brackets.">
|
|
<link rel="stylesheet" href="main.css">
|
|
</head>
|
|
<body>
|
|
|
|
<h1>MEMULAI DENGAN BRACKETS</h1>
|
|
<h2>Inilah panduan anda!</h2>
|
|
|
|
<!--
|
|
DIBUAT DENGAN <3 DAN JAVASCRIPT
|
|
-->
|
|
|
|
<p>
|
|
Selamat datang di versi preview awal dari Brackets, sebuah editor baru dan open-source yang didesain
|
|
untuk generasi baru web. Kami sangat menyukai standar, dan kami ingin membangun perangkat yang lebih baik
|
|
untuk JavaScript, HTML dan CSS serta teknologi web lainnya. Inilah permulaan kami.
|
|
</p>
|
|
|
|
<!--
|
|
APA ITU BRACKETS?
|
|
-->
|
|
<p>
|
|
<em>Brackets berbeda dari editor lainnya.</em>
|
|
Perbedaan utama adalah editor ini dibuat dengan JavaScript, HTML dan CSS.
|
|
Ini berarti para pengguna Brackets mempunyai skill yang cukup untuk memodifikasi dan memperluas
|
|
editor ini.
|
|
Bahkan, kami selalu menggunakan Brackets dalam pengembangan Brackets. Brackets juga memiliki
|
|
fitur unik seperti Edit Cepat, Preview Langsung masih banyak lagi yang mungkin anda tidak temukan
|
|
di editor lainnya.
|
|
Untuk mengetahui lebih lanjut mengenai bagaimana cara menggunakan fitur-fitur tersebut, bacalah
|
|
lebih lanjut.
|
|
</p>
|
|
|
|
|
|
<h2>Kami mencoba fitur-fitur baru</h2>
|
|
|
|
<!--
|
|
HTML, CSS DAN JAVASCRIPT SALING BERHUBUNGAN
|
|
-->
|
|
<h3>Edit Cepat untuk CSS dan JavaScript</h3>
|
|
<p>
|
|
Tidak perlu lagi repot-repot berpindah dari satu dokumen ke dokumen lainnya. Ketika meng-edit
|
|
HTML, gunakan shortcut <kbd>Cmd/Ctrl + E</kbd> untuk membuka ketak Edit Cepat yang menampilkan
|
|
semua CSS yang sesuai.
|
|
Ubah CSS anda, kemudian tekan <kbd>ESC</kbd> dan anda kembali lagi meng-edit HTML, atau tetap
|
|
dibuka dan kotak tersebut akan menjadi satu dengan editor anda. Jika anda menekan
|
|
<kbd>ESC</kbd> diluar kotak Edit Cepat, semuanya akan langsung di-collapse.
|
|
</p>
|
|
|
|
<samp>
|
|
Mau lihat cara kerjanya? Tempatkan kursor anda di tag <!-- <samp> --> di atas kemudian tekan
|
|
<kbd>Cmd/Ctrl + E</kbd>. Anda akan melihat editor CSS muncul, menunjukkan atribut CSS yang
|
|
relevan. Edit Cepat juga bisa dipakai untuk atribut class dan id.
|
|
|
|
Anda juga bisa membuat atribut baru dengan cara yang sama. Klik salah satu tag <!-- <p> -->
|
|
di atas dan tekan <kbd>Cmd/Ctrl + E</kbd>. Saat ini tidak ada atribut yang di-set, namun
|
|
anda bisa klik tombol Atribut Baru untuk menambahkan atribut untuk <!-- <p> -->.
|
|
</samp>
|
|
|
|
<a href="screenshots/quick-edit.png">
|
|
<img alt="Screenshot menunjukkan Edit Cepat CSS" src="screenshots/quick-edit.png" />
|
|
</a>
|
|
|
|
<p>
|
|
Anda juga bisa menggunakan shortcut yang sama untuk meng-edit hal-hal lainnya--seperti
|
|
function di JavaScript, warna, dan fungsi animasi--dan kami terus menambahkan fitur
|
|
lain setiap saat.
|
|
Saat ini Edit Cepat tidak dapat di-nest, jadi anda hanya bisa menggunakan Edit Cepat
|
|
ketika kursor berada dalam editor "full size".
|
|
</p>
|
|
|
|
<!--
|
|
PREVIEW LANGSUNG
|
|
-->
|
|
<h3>Preview perubahan HTML dan CSS secara langsung di dalam browser</h3>
|
|
<p>
|
|
Anda tahu kan mengenai teknik "save/reload dance" yang sering kita lakukan? Dimana kita merubah
|
|
file, kemudian kita save, lalu pindah ke browser kemudian refresh page-nya lalu baru kita bisa
|
|
lihat hasilnya? Dengan Brackets, tidak perlu lagi.
|
|
</p>
|
|
<p>
|
|
Brackets akan membuka <em>koneksi langsung</em> ke browser anda dan merubah HTML dan CSS secara
|
|
langsung, bahkan ketika anda mengetik! Mungkin anda sudah pernah melakukan hal yang sama dengan
|
|
perangkat dari browser, namun di Brackets tidak perlu lagi meng-copy dan paste kode yang diubah
|
|
kembali ke editor. Kode anda dijalankan di browser, namun tetap hidup di editor anda!
|
|
</p>
|
|
|
|
<h3>Highlight langsung elemen HTML dan atribut CSS</h3>
|
|
<p>
|
|
Dengan Brackets, menganalisa dampak perubahan HTML dan CSS terhadap halaman lebih mudah. Ketika
|
|
kursor anda berada dalam atribut CSS, Brackets akan meng-highlight semua elemen yang berefek di
|
|
dalam browser. Sama juga ketika meng-edit file HTML, Brackets akan meng-highlight elemen HTML
|
|
yang sesuai dalam browser.
|
|
</p>
|
|
|
|
<samp>
|
|
Jika anda menggunakan Google Chrome, anda bisa mencoba ini sendiri. Klik pada ikon petir di
|
|
sebelah kanan atas pada jendela Brackets anda atau tekan <kbd>Cmd/Ctrl + Alt + P</kbd>.
|
|
Ketika Preview Langsung dijalankan di dokumen HTML, semua CSS yang berhubungan bisa di-edit
|
|
secara langsung. Ikon petir akan berubah warna dari abu-abu menjadi emas ketika Brackets
|
|
menjalankan koneksi ke browser anda.
|
|
|
|
Sekarang, tempatkan kursor anda di tag <!-- <img> --> di atas. Perhatikan highlight warna biru yang
|
|
muncul di sekeliling gambar pada Chrome. Lalu, tekan <kbd>Cmd/Ctrl + E</kbd> untuk membuka atribut
|
|
CSS yang ada. Cobalah merubah ukuran border dari 10px ke 20px atau ubah warna background dari
|
|
"transparent" ke "hotpink". Jika Brackets dan browser berjalan berdampingan, anda akan dapat melihat
|
|
perubahannya secara langsung di browser anda. Keren, kan?
|
|
</samp>
|
|
|
|
<p class="note">
|
|
Saat ini, Brackets hanya mendukung Preview Langsung untuk HTML dan CSS. Namun di versi ini,
|
|
perubahan terhadap JavaScript akan di-load ulang ketika anda melakukan save. Saat ini kami
|
|
berusaha menambahkan support Preview Langsung untuk JavaScript. Preview langsung juga hanya bisa
|
|
dijalankan di browser Google Chrome, namun kita berharap agar kita bisa membawa fitur ini ke
|
|
browser lainnya di masa yang akan datang.
|
|
</p>
|
|
|
|
<h3>Quick View</h3>
|
|
<p>
|
|
Buat yang belum hafal nilai RGB dan HEX sebuah warna, dengan Brackets mengetahui warna apa yang
|
|
benar-benar dipakai semakin mudah. Di CSS atau HTML, tempatkan kursor di atas nilai warna atau gradien
|
|
dan Brackets akan menampilkan preview warna/gradien tersebut secara otomatis. Sama halnya dengan gambar:
|
|
taruh kursor di atas link gambar pada editor Brackets dan preview thumbnail dari gambar tersebut akan
|
|
ditampilkan.
|
|
</p>
|
|
|
|
<samp>
|
|
Untuk mencobanya sendiri, tempatkan kursor anda pada tag <!-- <body> --> di atas dokumen ini dan tekan
|
|
<kbd>Cmd/Ctrl + E</kbd> untuk membuka editor cepat CSS. Setelah itu, tempatkan kursor di atas nilai
|
|
warna apapun di dalam CSS tersebut. Anda juga bisa mencoba sendiri untuk gradien dengan membuka editor
|
|
cepat CSS pada tag <!-- <html> --> dan menempatkan kursor pada nilai background image manapun.
|
|
Untuk mencoba preview gambar, tempatkan kursor anda di atas gambar screenshot yang ada di dokumen ini.
|
|
</samp>
|
|
|
|
<h3>Mau fitur lain? Tambahkan ekstensi!</h3>
|
|
<p>
|
|
Selain semua fitur-fitur keren yang ada di dalam Brackets, kami mempunyai komunitas pengembang ekstensi
|
|
yang terus berkembang jumlahnya dan sudah membuat ratusan ekstensi yang menambah fitur berguna lainnya.
|
|
Apabila anda mau menambahkan fitur yang belum ada di Brackets, mungkin seseorang sudah membuat ekstensi
|
|
untuk fitur tersebut. Untuk melihat daftar ekstensi yang tersedia, klik <strong>Berkas > Pengaturan
|
|
Ekstensi</strong> lalu klik di tab "Tersedia". Ketika anda menemukan ekstensi yang anda inginkan,
|
|
tinggal klik tombol "Instal" di sebelahnya.
|
|
</p>
|
|
|
|
<!--
|
|
KAMI INGIN DENGAR PENDAPAT ANDA
|
|
-->
|
|
<h2>Ikut terlibat</h2>
|
|
<p>
|
|
Brackets adalah proyek open-source. Developer web dari seluruh dunia berkontribusi untuk membangun editor
|
|
yang lebih baik. Dan juga ada banyak orang yang menembangkan ekstensi yang meningkatkan kemampuan Brackets.
|
|
Kami ingin mendengar pendapat anda, ide dan saran-saran dari anda atau berkontribusilah secara langsung
|
|
kepada kode Brackets.
|
|
</p>
|
|
<ul>
|
|
<li><a href="http://brackets.io">Brackets.io</a></li>
|
|
<li><a href="http://blog.brackets.io">Blog Tim Brackets</a></li>
|
|
<li><a href="http://github.com/adobe/brackets">Brackets di GitHub</a></li>
|
|
<li><a href="https://brackets-registry.aboutweb.com">Daftar Ekstensi Brackets</a></li>
|
|
<li><a href="http://github.com/adobe/brackets/wiki">Wiki Brackets</a></li>
|
|
<li><a href="http://groups.google.com/group/brackets-dev">Mailing List Developer Brackets</a></li>
|
|
<li><a href="https://twitter.com/#!/brackets">@brackets di Twitter</a></li>
|
|
<li>Mengobrol dengan developer Brackets di IRC dalam channel #brackets di Freenode</li>
|
|
</ul>
|
|
|
|
</body>
|
|
</html>
|
|
<!--
|
|
|
|
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
|
|
[:::::::::::::: ::::::::::::::]
|
|
[:::::::::::::: ::::::::::::::]
|
|
[::::::[[[[[[[: :]]]]]]]::::::]
|
|
[:::::[ ]:::::]
|
|
[:::::[ ]:::::]
|
|
[:::::[ ]:::::]
|
|
[:::::[ ]:::::]
|
|
[:::::[ CODE THE WEB ]:::::]
|
|
[:::::[ http://brackets.io ]:::::]
|
|
[:::::[ ]:::::]
|
|
[:::::[ ]:::::]
|
|
[:::::[ ]:::::]
|
|
[:::::[ ]:::::]
|
|
[::::::[[[[[[[: :]]]]]]]::::::]
|
|
[:::::::::::::: ::::::::::::::]
|
|
[:::::::::::::: ::::::::::::::]
|
|
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
|
|
|
|
-->
|