TUTORIAL CSS FRAMEWORK

11/13/2014

TUTORIAL CSS FRAMEWORK

NAMA NIM MATA KULIAH DOSEN

: DUWI PARYANTO : 12141367 : PEMROGRAMAN WEB STATIS : WAHYU WIDODO

CSS FRAMEWORK FONT AWESOME

A. Pengertian Framework Sebelum mempelajari bagaimana menggunakan CSS Framework, dalam pembahasan ini adalah “Cara menggunakan Font Awesome”, tidak ada salahnya kita mengetahui pengertian framework. Adalah suatu pekerjaan yang membosankan, menulis script yang sangat banyak hanya untuk membuat tampilan website tampak indah dan menarik, untuk memudahkan serta meningkatkan kenyamanan dalam penulisan script telah disediakan Framework. Apa itu Framework ?? Jika dilihat dari asal kata Framework berarti kerangka kerja, sekumpulan script yang disediakan oleh pengembang framework untuk membantu dalam menangani berbagai masalah dalam pemrograman, sehingga lebih fokus dan cepat dalam membangun aplikasi. Secara sederhana bisa dijelaskan bahwa framework adalah kumpulan dari fungsi-fungsi, maka seorang programmer tidak perlu lagi membuat fungsi-fungsi tersebut dari awal, tinggal memanggil kumpulan fungsi yang sudah ada didalam framerwork, tentunya cara menggunakan fungsi-fungsi itu sudah ditentukan oleh framework. Ada beberapa kelebihan menggunakan framework antara lain mempermudah dan menghemat waktu pengerjaan.

CSS adalah kependekan dari Cascading Style Sheets, berfungsi untuk merubah tampilan halaman web, mempercantik penampilan HTML atau menentukan bagaimana elemen HTML ditampilkan, seperti merubah warna teks atau background, menentukan posisi, dan lain sebagainya.

Framework CSS adalah sekumpulan class CSS yang telah disediakan untuk memudahkan dalam pengembangan web secara default. Class CSS yang disediakan oleh vendor atau pembuat framework tentunya. Pada intinya framework CSS ini memudahkan kita untuk membuat tampilan web dengan cepat dan rapi (terstruktur), dengan hanya menuliskan CSS secara minimal.

Mengapa menggunakan Framework ? Dibawah ini adalah alasan-alasan mengapa sebuah software framework menjadi sangat penting didalam pemrograman CSS. 1. Dibutuhkan waktu yang tidak sebentar untuk membuat web. Tapi dengan

menggunakan Framework kita tidak harus memulai semuanya dari awal untuk setiap projek, menjadi lebih cepat. 2. Tableless adalah teknik dimana struktur website tidak menggunakan table untuk

melayout, tetapi dengan cara memisahkan data antara html dan css. Ini dilakukan agar berbagai media aplikasi lebih mudah maintenance dan mengakses, berkurangnya kebutuhan bandwidth, dan yang lebih utama adalah lebih SEO friendly.

3. Website dapat diakses oleh berbagai browser 4. Adanya patokan dari framework membuat setiap kesalahan akan lebih sedikit. 5. Kode menjadi lebih mudah dibaca dan lebih jelas, baik itu oleh kita sendiri maupun

oleh team kita, menjadi bersih dan rapi. Beberapa contoh CSS Framework : 1. Blueprintcss 2. 960.gs 3. Bootswatch 4. Bootsnipp 5. Font Awesome 6. Getskeleton 7. Getbootstrap 8. Metroui Dari beberapa contoh diatas, point kelima akan dibahas pada tutorial CSS Framework kali ini. B. FONT AWESOME

Font Awesome memberikan kemudahan dalam menggunakan icon di blog atau website, sehingga kita tidak perlu lagi menggunakan gambar-gambar dalam bentuk JPEG, PNG, GIF, dll yang tentunya tidak efektif dan efisien. Font awesome ini berarti kumpulan icon yang berbentuk font berupa vector dan scalable yang artinya gambar icon tidak akan pecah dengan ukuran berapapun, tidak seperti icon gambar lainnya. Kelebihan lain dari font awesome ialah icon yang berbentuk font , sehingga mudah mengubah icon-icon yang ditampilkan. Seperti ketika kita merubah font , merubah ukuran, merubah warna icon, menambahkan shadow, menambahkan efek animasi dan yang lain dengan dukungan CSS.

Kenapa Font Awesome? Seperti yang tertulis di website Font Awesome ( fontawesome.io ) , berikut ini adalah beberapa alasan menggunakan font awesome untuk website : 1. Satu font terdiri dari lebih 400 icon 2. Tidak membutuhkan javascript untuk penggunaanya 3. Infinite Scalability, ini berarti setiap ikon yang ditampilkan akan tetap terjaga kualitas

gambarnya berapapun ukuran diperbesar 4. Free, Font Awesome dapat Anda gunakan secara gratis 5. CSS Control, mudah di styling dengan CSS seperti icon color, size, shadow dan yang

lain 6. Perfect on Retina Displays, Font Awesome icons adalah vector yang berarti akan

terlihat sangat baik di tampilan dengan resolusi tinggi 7. Plays well with others, font awesome dapat bekerja sangat baik dengan semua

frameworks, karena memang dirancang untuk bootstrap. Tahapan Menggunakan Font Awesome Siapkan Alat dan bahan : a. Laptop atau Komputer b. Text editor c. Browser d. Font Awesome Langkah-langkah : 1. Download Font Awesome terlebih dahulu, di http://fortawesome.github.io/FontAwesome/ , kemudian ekstrak 2. Buka text editor, pada kesempatan ini saya gunakan Netbeans IDE 8.0, anda bisa juga menggunakan text editor lain seperti Notepad ++, Adobe Dreamweaver CS5, dll. 3. Buat project baru di Netbeans IDE 8.0, caranya : -

Pilih file  New project

-

Pilih HTML5 Apllication

-

Beri nama di project name dan pilih tempat menyimpan di project location

-

Next  finish

4. Buka folder Font Awesome yang sudah di ekstrak, copy folder “fonts dan style”, ke dalam project yang sudah anda buat tadi. misalnya : D/UTS/Tugas/public_html

5. Kembali ke Netbeans IDE 8.0 anda ! Ketikkan sintak di bawah pada elemen …

Screenshot :

Fungsi sintak di atas adalah untuk menghubungkan file HTML dengan file CSS, atau memanggil CSS Frameworknya.

6. Setelah itu, kita akan memilih “icon” yang diinginkan. Dengan mengetikkan sintak dibawah ini pada elemen …. .