30 Mei 2014

Pengenalan Javascript

Jika java merupakan bahasa pemrogram dan HTML  merupakan 'pengkodean' maka perpaduan antara keduanya disebut Javascript Hybrid.
Javascript merupakan bahasa pemrograman yang dibuat untuk memudahkan setiap orang untuk mempelajari bahasa Java. Akan tetapi javascript tidak memiliki kompiler seperti halnya java. Namun begitu javascript yang bersifat interpreter, yaitu script yang telah dibuat dengan text editor seperti notepad atau wordpad memiliki sifat yang sama dengan java.

Beberapa keunggulan javascript dalam mengolah dan mengkondisikan sebuah web antara lain ukuran filenya yang kecil. Ketika user merequest sebuah web dari webserver dimana didalam web tersebut memuat sebuah javascript maka javascript tersebut akan cepat di aplikasikan di browser tanpa harus diolah terlebih dahulu di server (Cient Side). User juga dapat melihat sourcenya dengan mudah tanpa ter-enkripsi oleh server. Selain itu javascript juga mampu membuat aplikasi menarik yang dapat kita letakkan di website kita.

Berikut beberapa kelebihan dan kekurangan javacsript :

Kelebihan

- Ukuran File Kecil
Javascript memiliki ukuran yang kecil, sehingga akan lebih cepat ditampilkan ketika anda mengakses web yang memiliki javascript di browser.

- Mudah Dipelajari
Javascript merupakan bahasa pemrograman yang merupakan gabungan antara Java dan HTML. Walaupun javascript merupakan turunan java, tetapi javascript tidak memiliki aturan serumit java.

- Terbuka
Javascript tidak terikat oleh hardware maupun software tertentu, maka ia dapat dibuat maupun dibaca di semua jenis komputer.

Kekurangan

- Script tidak Terenkripsi
Meskipun merupakan keuntungan karena script yang dibuat tidak perlu diolah server, tapi user bisa meniru script yang anda buat. Karena, ketika mengakses web yang memuat javascript user dapat melihat sourcenya.

- Kemampuan Terbatas
Walaupun bisa membentuk web interaktif maupun dinamis, namun javascript tidak mampu membuat program aplikasi sendiri seperti java.

- Keterbatasan Objek
Javascript tidak mampu membuat kelas - kelas untuk menampung objek - objek tambahan seperti java karena javascript telah memiliki objek yang built-in pada struktur bahasanya.

Fitur-fitur Bootstrap

Source Bootstrap

Yang perlu anda lakukan untuk bisa memanfaatkan bootstrap ini adalah mendownload file-file bootstrap dari Twitter, anda dapat mendownloadnya di sini.
Jika anda sudah mendownloadnya, maka anda akan melihat sebuah file zip, bernama bootstrap.zip, yang mana jika di-extract akan menjadi sebuah folder Bootstrap, yang terdiri atas beberapa file berikut :


Struktur Bootstrap
Struktur bootstrap tersebut dapat digambarkan sebagai berikut :
bootstrap/

+-- css/
¦ +-- bootstrap.css
¦ +-- bootstrap.min.css
+-- js/
¦ +-- bootstrap.js
¦ +-- bootstrap.min.js


Dari struktur bootstrap di atas, maka jika kita ingin memanfaatkan Bootstrap untuk layout website kita, kita pasti faham, di mana seharusnya file kita diletakkan.

Docs Section

Berikut adalah beberapa fitur untuk layout website yang disediakan oleh bootstrap :

  • Scaffoling : Bagian yang mengatur background, link styles, grid system, dan two simple layouts
  • Base CSS : Bagian yang mengatur tampilan elemen HTML seperti typography, code, table, form, dan button. Termasuk Glyphicons, sebuah kumpulan ikon-ikon kecil.
  • Components : Bagian yang mengatur tampilan component, seperti tab, navbar, alerts, page headers, dst.
  • Javascript Plugins: Menyediakan beberapa component interaktif, seperti tooltips, popovers, modals, dan seterusnya.

Daftar Component Bootstrap

Berikut adalah Component dan Javascript plugin yang didukung oleh Bootstrap:
  •  Button groups
  • Button dropdowns
  • Navigational tabs, pills, and lists
  • Navbar
  • Labels
  • Badges
  • Page headers and hero unit
  • Thumbnails
  • Alerts
  • Progress bars
  • Modals
  • Dropdowns
  • Tooltips
  • Popovers
  • Accordion
  • Carousel
  • Typeahead

Cara menggunakan Boostrap

Untuk membuat layout website menggunakan bootstrap, sama dengan ketika mendesain menggunakan HTML dan CSS biasa. Pada dokumen HTML, kita hanya perlu menambahkan pada bagian <head> </head> dan pada bagian <body> </body> beberapa elemen berikut :

Elemen-elemen diatas digunakan untuk merelasikan dokumen HTML kita dengan file bootstrap yang telah ada.

Pengenalan Bootstrap

Jika anda seorang pengembang web, pastilah tidak asing dengan beberapa program aplikasi web desain seperti Dreamweaver, Flash dst. Atau bagi yang suka nye-cript…pasti hafal dengan elemen-elemen HTML, CSS bahkan Javascript atau JQuery.

Mendesain website menggunakan program aplikasi, memang terasa lebih mudah dan cepat, dibandingkan dengan cara menuliskan kode-kode (tag/elemen) HTML/CSS/Javascript yang rumit. Namun, ada beberapa fasilitas tertentu yang tidak didukung oleh beberapa program aplikasi tersebut, yang memaksa seorang web developer untuk mengetikkan kode-kode tertentu untuk mengatasinya.

Jika sudah begini, maka scripting adalah satu-satunya alternatif yang harus dilakukan :( Twitter bootstrap adalah suatu cara mendesain web atau membuat aplikasi berbasis web
dengan cara scripting yang sangat mudah dilakukan. Kenapa saya bilang mudah? Karena eh..karena anda tidak perlu menghafalkan banyak kode HTML/CSS/Javascript untuk membuat tampilannya, namun hasilnya sangat bagus dan menarik. Tak kalah dengan template2 buatan CMS terkemuka, seperti Joomla dan WordPress.

Dengan menggunakan Boostrap, kita dapat dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website, dengan cara yang mudah, hanya dengan memanggil fungsi CSS (class yang sudah disediakan oleh Bootstrap) dari berkas HTML yang telah didefinisikan. Bootstrap juga menyediakan komponen-komponen lain yang dibangun dengan menggunakan JavaScript.

Bootstrap ini sendiri dikembangkan oleh Mark Otto (@mdo) dan Jacob Thornton (@fat) dan didukung oleh hampir semua browser, baik Mozilla, Chrome, Safari, Opera, bahkan Internet Explorer.

Selector dan Grouping Element Pada CSS

Jenis-Jenis Selektor

Selektor atau pemisah dalam CSS, dibagi menjadi beberapa bagian, antara lain:

Tag / elemen HTML

Menggunakan tag yang terdapat pada HTML. Setiap tag yang ada dalam HTML bisa dijadikan selector.
Contoh :



Kelas

Penggunaan selektor kelas akan diawali pengan tanda titik ( . ) di awal penulisannya, kemudian pada tag HTML ditambahkan class = (nama kelas).
Contoh :

 ID

Selektor ID digunakan untuk mendefinisikan tag secara individual atau spesifik. Penggunaan selector ID akan diawali dengan tanda pagar ( # ).
Contoh :



Grouping Element

Tag DIV dan SPAN digunakan untuk mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan inline content, sementara div digunakan untuk block level content. Perbedaan dari kedua tag tersebut adalah sebagai berikut:
  • Tag div akan membagi halaman web secara otomatis meskipun di dalam tag div tersebut tidak diatur format stylenya (css).
  • Tag span hanya akan mengatur konten/isi yang dilingkupinya tanpa membagi halaman web ke dalam bagian-bagian kecil (seperti yang dilakukan tag div).

Pengenalan CSS

CSS merupakan singkatan dari Cascading Style Sheet. Menurut wikipedia, CSS adalah aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Css saat ini di kembangkan oleh World Wide Web Consortium atau yang biasa lebih dikenal dengan istilah W3C. Css bukan menggantikan kode html, tetapi hanya di fungsikan sebagai penopang atau pendukung dari file html yang berperan dalam penataan kerangka dan layout web.
1. Aturan Penulisan CSS
Prinsip dasar penggunaan CSS di dalam dokumen HTML adalah untuk menyediakan style yang digunakan untuk mengatur bagian-bagian HTML. Contoh, suatu style dapat di pakai untuk mengatur jenis, ukuran, dan bahkan warna suatu teks. Style mengandung dua bagian yaitu selektor dan deklarasi properti. Selektor untuk menyatakan bagian dalam HTML yang akan diatur melalui style. Sedangkan properti untuk menyatakan sifat dalam tag HTML yang diatur melalui style.


2. Css Bersifat Case Sensitive
Maksud case sensitive disini membedakan huruf kapital dan huruf kecil. Hal ini penting diketahui karena kalau kita ingin menulis nama kelas atau nama ID dalam style. Contoh :

Maka nim akan dibedakan dengan Nim ataupun NIM.
Untuk memberikan nama dalam CSS misalnya untuk nama kelas atau nama ID agar mudah dipahami gunakan penamaan yang mengandung makna dan mudah dipahami oleh orang.Contoh :
  • nama seperti warna Merah lebih baik dari pada wmr.
  • warnaMerah bisa juga ditulis menjadi warna-merah atau warna_merah. Tanda minus (-) ataupun garis bawah ( _ ) boleh dipakai untuk nama.
  • Namun yang perlu di ingat, warnaMerah, warna-merah, warna_merah adalah tiga nama yang berbeda.
  • Penulisan nama boleh menggunakan angka, tetapi spasi atau tanda-tanda lain tidak boleh digunakan untuk nama.
3. Komentar
Komentar adalah suatu bagian dalam kode yang diperlakukan bukan sebagai kode, melainkan berfungsi sebagai keterangan bagi pembaca kode. Pada dokumen HTML, komentar diawali dengan <!-- dan diakhiri dengan -->. Adapun pada CSS, komentar ditulis dengan awalan /* dan diakhiri */.


Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | coupon codes