15
Code Longer
Hand Book Fast and easy code with code longer 1.0
Jambi, November 3, 2015
Thank you for all of PHP Indonesia Member and everyone who had participated in support and
donation to this project.
First in first, this book specially made for everyone who loves programming, and who wants to
know about programming, this book is free of charge and everyone can share or copy or print
this book without changing the title or the copyright of this book. NOT FOL SALE
WHAT IS CODE LONGER (COLON HTML) ?
Code longer atau juga dikenal dengan sebutan Colon adalah sebuah tools/teks editor yang
dibangun dengan teknologi web untuk mempermudah kegiatan membangun/mendesain sebuah
website. Berbeda dengan kebanyakan teks editor yang tidak dapat menampilkan secara langsung
perubahan yang terjadi di lembar kerja, colon dapat menampilkan secara simultan setiap
perubahan kode yang dituliskan di lembar kerja.
Code longer juga memberikan beberapa fitur yang sangat membantu sekali dalam
mendesign sebuah halaman web, diantaranya adalah fitur live preview, css framework yang
sudah built-in, juga fitur normalisasi dan animasi. Beberapa css framework yang sudah built-in
diantaranya :
1. Twitter Bootstrap 3
2. Foundation
3. MetroUI
Code longer berfokus pada kecepatan penulisan kode, oleh sebab itu juga disediakan fitur
snippets dan realtime autocomplete, code longer juga menyediakan beberapa tema interaktif dan
segar yang dapat kita gunakan agar tidak bosan saat menggunakan tools ini untuk bekerja.
Banyak orang kesulitan dalam memulai kode pertama mereka, lalu bagaimana ini bisa lebih
mudah? Ayo kita cek menu utamanya
A. HELLO WORLD
Silahkan buka software code longer anda, hingga menemukan tampilan seperti ini
Bagian paling kiri merupakan lembar kerja HTML, dimana anda dapat menuliskan
seluruh syntax HTML di lembar itu.
Bagian di tengah merupakan lembar kerja CSS, dimana anda dapat menuliskan syntax
CSS anda di lembar itu.
Bagian paling ujung kanan merupakan lembar kerja Javascript/JQuery, anda dapat
menuliskan syntax Javascript/JQuery di lembar tersebut.
Apakah bisa saya menulis seluruh syntax, HTML,CSS,JS dalam satu lembar kerja saja?
Ya bisa, anda bisa menulis seluruh syntax pada satu lembar kerja saja yaitu lembar kerja
HTML, namun hal demikian akan mempersulit anda jikalau kode yang anda tulis sudah
ratusan bahkan ribuan baris.
Untuk mulai menuliskan kode anda tidak harus lagi menuliskan syntax standar HTML
seperti:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Anda cukup langsung mengetikkan kode untuk bagian body atau head jika dibutuhkan,
untuk membuat hello world pertama anda tuliskan code seperti berikut :
Anda telah berhasil membuat hello world pertama anda, sekarang kita akan coba
aplikasikan model css framework yang kita inginkan, klik kanan pada lembar kerja dan
pilih css framework yang ingin anda gunakan kemudian tekan tombol run. Yeah…anda
telah berhasil membuat hello world pertama anda
B. CSS FRAMEWORK
1. Membuat Navigation Bar Metro Style
Seperti kita ketahui ada 3 css framework include di dalam code longer, untuk
pembahasan kali ini saya akan focus ke MetroUI, untuk syntax navigation bar dengan
Bootstrap dan Foundation dapat di lihat disitus resminya ataupun cari di google.
Pertama, klik kanan dan pilih CSS framework MetroUI kemudian ran dan ketikkan
kode ini di lembar HTML anda dan silahkan lihat hasilnya
Selanjutnya kita akan mencoba menambahkan element menu ke navbar yang baru
kita buat, ketikkan kode berikut dan lihat hasilnya
Sekarang kita coba manambahkan dropdown menu pada navbar kita, ketikkan kode
berikut dan lihat hasilnya
Bagaimana mudahkan?
Lalu bagaimana mengubah warna default dari navbar tersebut, cukup tambahkan
salah satu kode warna dibawah ini di sebelah kode app-bar, seperti ini
List kode warna :
Untuk mengubah background maka gunakan kode bg-warna yang dipilih, untuk
mengubah warna foreground gunakan kode fg-warna yang dipilih, bagaimana jika
ingin membuat ripped color? Gunakan kode ribbed-warna yang dipilih, hasil ribbed
color seperti ini
2. Membuat Form Metro Style
Untuk membuat form cukup ketikkan kode berikut di lembar HTML anda
Ada banyak sekali mode form yang dapat dibuat, namun karena keterbatasan waktu,
untuk saat ini penulis belum dapat menjabarkan secara full nya
3. Membuat Contdown Metro Style
Untuk membuat countdown cukup ketikkan kode berikut di lembar HTML anda
Beberapa kombinasi yang dapat dimasukkan kedalam fungsi countdown ini
diantaranya :
Sekarang kita coba menampilkan countdown untuk 3 jam, maka tambahkan kode ini
di lembar HTML anda : data-hours=”3”, ingat ! gunakan data- sebelum fungsi yang
digunakan
4. Membuat Progress Bar
Untuk membuat Progressbar cukup ketikkan kode berikut di lembar HTML anda
Sekarang kita akan bermain sedikit dengan javascript, ketikkan kode berikut di
lembar javascript untuk fungsi start progress barnya
Tambahkan kode stop dan reset seperti dibawah ini, coba jalankan dan lihat hasilnya
5. Membuat Date Picker Metro Style
Untuk membuat datepicker cukup ketikkan kode berikut di lembar HTML anda
Tanpa perlu mengetikkan sedikitpun kode javascript, tadaaa….anda telah berhasil
membuat date picker
Ada banyak sekali fitur lainnya yang dapat digunakan, namun tidak dapat dijabarkan
secara rinci disini dikarenakan waktu yang terbatas. Dan mudah – mudahan dapat
dijabarkan di buku selanjutnya
C. ANIMASI
Bagaimana membuat animasi/menganimasikan apa saja di web kita?, untuk membuat
animasi dengan Code Longer cukup dengan mengklik kanan di lembar kerja dan pilih
CSS Options, kemudian contreng Animate CSS, nah sekarang bagaimana
mengaplikasikannya? Untuk mengaplikasikannya cukup dengan penambahan sub class
pada class yang sudah kita buat seperti ini :
Dimana button merupakan class awal dan animated pulse merupakan sub classnya.
Nah, apakah sekarang button anda sudah beranimasi? Jika sudah maka silahkan coba ke
element lainnya, dan berikut daftar animasi yang dapat di aplikasikan
- Animated Hinge,
- Animated Bounce,
- Animated Flash,
- Animated Pulse,
- Animated rubberBand,
- Animated Shake,
- Animated Swing,
- Animated Tada,
- Animated Wobble,
- Animated bounceIn,
o Animated bounceInDown
o Animated bounceInUp
o Animated bounceInLeft
o Animated bounceInRight
- Animated bounceOut
o Animated bounceOutDown
o Animated bounceOutUp
o Animated bounceOutLeft
o Animated bounceOutRight
- Animated fadeIn
o Animated fadeInDown
Animated fadeInDownBig
o Animated fadeInUp
Animated fadeInUpBig
o Animated fadeInLeft
Animated fadeInLeftBig
o Animated fadeInRight
Animated fadeInRightBig
- Animated fadeOut
o Animated fadeOutDown
Animated fadeOutDownBig
o Animated fadeOutUp
Animated fadeOutUpBig
o Animated fadeOutLeft
Animated fadeOutLeftBig
o Animated fadeOutRight
Animated fadeOutRightBig
- Animated flip
o Animated flipIn
Animated flipInX
Animated flipInY
o Animated flipOut
Animated flipOutX
Animated flipoutY
- Animated lightSpeedIn
- Animated lightSpeedOut
- Animted rotateIn
o Animated rotateInDownLeft
o Animated rotateInDownRight
o Animated rotateInUpLeft
o Animated rotateInUpRight
- Animted rotateOut
o Animated rotateOutDownLeft
o Animated rotateOutDownRight
o Animated rotateOutUpLeft
o Animated rotateOutUpRight
- Animated rollIn
- Animated roolOut
- Animated zoomIn
o Animated zoonInDown
o Animated zoonInUp
o Animated zoonInLeft
o Animated zoonInRight
- Animated zoomOut
o Animated zoonInDown
o Animated zoonInUp
o Animated zoonInLeft
o Animated zoonInRight
- Animated slideIn
o Animated slideInDown
o Animated slideInUp
o Animated slideInLeft
o Animated slideInRight
- Animated slideOut
o Animated slideOutDown
o Animated slideOutUp
o Animated slideOutLeft
o Animated slideOutRight
D. SAVE
Inti dari semua pekerjaan ini adalah simpan, lalu bagaimana cara menyimpan hasil kerja
kita?
Ada dua opsi penyimpanan, pertama menyimpan sementara namun saat aplikasi di tutup
maka data akan hilang, caranya dengan menekan tombol save di Code Longer
Kedua save ke dalam file HTML dan simpan ke direktori kita, caranya dengan menekan
tombol getHTML
Nah, adapun langkah-langkah agar file HTML kita dapat sempurna berjalan maka ikuti
langkah berikut ini
Pertama, buatlah sebuah folder di disk mana saja dan beri nama sesuai dengan proyek
anda misal saya buat folder di disk D dengan nama HTMLKU :
Kemudian setelah selesai kode kita tuliskan di lembar Code Longer sekarang klik tombol
getHTML beri nama index.html dan save di folder yang baru kita buat tadi
Sekarang kita telah memiliki file bernama index.html di dalam folder yang kita buat,
tahap selanjutnya adalah kita buka direktori penyimpanan program kita biasanya di C:
Program Files\Code Longer
Setelah ketemu folder tersebut buka dan anda akan melihat tampilan seperti ini
Disana ada folder bernama include, tugas kita sekarang cukup mengkopi folder tersebut
dan pastekan kedalam folder proyek kita tadi, hingga hasil akhirnya seperti ini
Tugas kita telah selesai dan sekarang kita dapat membuka di browser file index.html yang
telah kita buat tadi… congratulations
Sekian dulu yang dapat saya jabarkan, kedepannya akan saya jabarkan secara lengkap.
Sekali lagi terima kasih telah menggunakan software ini dan semoga bermanfaat. Salam
Sukses, Irvan.
THANK YOU FOR
1000 + DOWNLOAD
Tunggu versi
selanjutnya
