This repository has been archived by the owner on Sep 6, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
181 changed files
with
13,180 additions
and
8,235 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,196 @@ | ||
| <!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 ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [::::::[[[[[[[: :]]]]]]]::::::] | ||
| [:::::::::::::: ::::::::::::::] | ||
| [:::::::::::::: ::::::::::::::] | ||
| [[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]] | ||
| --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| html { | ||
| background-color: #e6e9e9; | ||
| background-image: linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%); | ||
| background-image: -o-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%); | ||
| background-image: -moz-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%); | ||
| background-image: -webkit-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%); | ||
| background-image: -ms-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%); | ||
| -webkit-font-smoothing: antialiased; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0 auto; | ||
| padding: 2em 2em 4em; | ||
| max-width: 800px; | ||
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
| font-size: 16px; | ||
| line-height: 1.5em; | ||
| color: #545454; | ||
| background-color: #ffffff; | ||
| -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.06); | ||
| -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.06); | ||
| box-shadow: 0 0 2px rgba(0, 0, 0, 0.06); | ||
| } | ||
|
|
||
| h1, h2, h3, h4, h5, h6 { | ||
| color: #222; | ||
| font-weight: 600; | ||
| line-height: 1.3em; | ||
| } | ||
|
|
||
| h2 { | ||
| margin-top: 1.3em; | ||
| } | ||
|
|
||
| a { | ||
| color: #0083e8; | ||
| } | ||
|
|
||
| b, strong { | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| samp { | ||
| /* hide tutorial instructions so they don't show in the browser */ | ||
| display: none; | ||
| } | ||
|
|
||
| img { | ||
| background: transparent; | ||
| border: 10px solid rgba(0, 0, 0, 0.12); | ||
| border-radius: 4px; | ||
| display: block; | ||
| margin: 1.3em auto; | ||
| max-width: 95%; | ||
| -webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1; | ||
| } | ||
|
|
||
| @keyframes colorize { | ||
| 0% { | ||
| -webkit-filter: grayscale(100%); | ||
| } | ||
| 100% { | ||
| -webkit-filter: grayscale(0%); | ||
| } | ||
| } | ||
|
|
||
| @-webkit-keyframes colorize { | ||
| 0% { | ||
| -webkit-filter: grayscale(100%); | ||
| } | ||
| 100% { | ||
| -webkit-filter: grayscale(0%); | ||
| } | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.