11/13/2014 TUTORIAL CSS FRAMEWORK NAMA : DUWI PARYANTO NIM : 12141367 MATA KULIAH : PEMROGRAMAN WEB STATIS DOSEN : 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/font- Awesome/, 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 <head> </head> <link href= style/fontawesome.css type= text/css rel= stylesheet > 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 <body>. </body>. <div style="font-size: 22px; color: #333;"> <h2> Contoh Penggunaan icon Font Awesome </h2> <h4>web Application Icons</h4> <div class="list-group"> <a class="list-group-item" href="#"><i class="fa fa-home fa-lg"></i> Home</a> <br> <a class="list-group-item" href="#"><i class="fa fa-book fa-2x"></i> Library</a><br> <a class="list-group-item" href="#"><i class="fa fa-pencil fa-3x"></i> Applications</a><br> <a class="list-group-item" href="#"><i class="fa fa-cog fa-4x"></i> Settings</a><br> </div>
.. Screenshot : Syntax dasar pada Font Awesome adalah <i class= fa fa-code ></i> atau bisa juga menggunakan <span>. </span> Fungsi sintak diatas adalah untuk memilih icon yang ada di Font Awesome, contohnya icon home dibawah ini: Fa-lg, fa-2x, fa-3x, dan fa-5x untuk ukuran icon yang ditampilkan. Jika anda ingin lebih jelas icon apa saja yang diinginkan, silahkan dilihat di http://fortawesome.github.io/font-awesome/icons/
7. Menyisipkan Medical Icons Screenshot : Cara memanggil class CSS Di bagian awal telah disebutkan cara untuk menghubungkan HTML dan CSS, atau memanggil CSS frameworknya dengan sintak dibawah ini : <link href= style/fontawesome.css type= text/css rel= stylesheet > Pada sintak diatas, kita memanggil CSS frameworknya yang bernama fontawesome.css difolder style. Selector class digunakan untuk menentukan style dari sebuah group elemen, bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen-elemen yang ada pada sebuah halaman web. Selector class dituliskan dengan ditandai dengan tanda titik. Langkah-langkah : 1. Buka Netbeans IDE 8.0, kemudian pilih file open file 2. Pilih tempat dimana anda menyimpan project anda 3. Buka folder style, pilih fontawesome.css kemudian open
Maka akan tampil seperti ini : Contoh : Penggunaan class menggunakan. dalam CSS ( menambah bayangan warna icon ).fa { Display : inline-block; Font : normal normal normal 14px/1 fontawesome; Font-size : inherit; text-shadow: 0 0 10px #f02d95; } Sintak tersebut berfungsi untuk memanggil class CSS yang diterapkan di dalam HTML yang mempunyai class = fa sebagai berikut : <i class= fa fa-ambulance ></i> fa-ambulance </br> <i class= fa fa-h-square ></i> fa-h-square </br>
... Sehingga ketika anda merubah sintak (.fa ) di CSS, maka yang mempunyai class Fa di dalam HTML akan berubah. Screenshoot :
Screenshot sintak HTML :
Screenshot sintak CSS :
Hasil di browser penggunaan Framework CSS Font Awesome
SEKIAN ~SEMOGA BERMANFAAT ~