Nama: ahmad edi purwanto. Nim: Tugas uts web statis. Tutorial cara penggunaan suatu framework CSS

Transkripsi

1 Nama: ahmad edi purwanto Nim: Tugas uts web statis. Tutorial cara penggunaan suatu framework CSS Pengertian dasar dari Framework itu sendiri adalah; sebuah konsep yang memiliki struktur serta terorganisir dalam satu paket atau library. Dengan konsep ini, diharapkan agar desainer dan developer lebih fokus pada projek yang sedang dikerjakannya tanpa harus memulainya dari awal. - sumber Gary Barber dan Wikipedia Sebelum kita mempergunakan CSS Framework ada baiknya apabila kita mengetahui kelebihan dan kekurangannya terlebih dahulu. Dan apabila misalnya kita baru saja mengenal atau mempelajari CSS, lebih baik tidak perlu menggunkan CSS Framework. Kenapa? Karena CSS Framework adalah kumpulan sintak dari bahasa CSS yang telah diorganisir secara tersusun. Sehingga dibutuhkan pemahaman bahasa CSS agar dapat mengetahui fungsi dari framework tersebut. Keuntungan Menggunakan CSS Framework 1. lebih cepat Membuat sebuah website membutuhkan waktu yang tidak sebentar. Tapi dengan menggunakan Framework kita tidak harus memulai semuanya dari awal untuk setiap projek. 2. Tableless

2 Tableless ini adalah sebuah teknik dimana struktur website tidak menggunakan table untuk melayout, melainkan dengan cara memisahkan data antara html dan css. Hal ini dilakukan agar lebih mudah dimaintenance dan diakses oleh berbagai media aplikasi, berkurangnya kebutuhan bandwidth, dan yang lebih utama adalah lebih SEO friendly. 3. Cross-browser compatibility Cross-browser compatibility ini memiliki pengertian bahwa website dapat diakses oleh berbagai browser. 4. Team Work menjadi lebih komunikatif Setiap desain dan developer memiliki teknik atau cara yang berbedabeda. Dengan framwork ini maka kesalahpahaman atau miskomunikasi antar team dapat diminimalisir. 5. Lebih sedikit kesalahan Membuat sebuah website yang besar membutuhkan pengorganisiran kode yang baik dan jelas. Dengan framework, setiap kesalahan akan lebih sedikit dikarenakan sudah ada patokan dari framework tersebut. 6. Kebersihan dan Kerapihan

3 Maksud dari kebersihan dan kerapihan disini adalah; kode menjadi lebih mudah dibaca dan lebih jelas, baik itu oleh kita sendiri maupun oleh team kita. Kekurangan Menggunakan CSS Framework 1. Membutuhkan waktu untuk mempelajari framework Mempelajari dan membuat CSS Framework menjadi lebih familiar memang membutuhkan waktu. Karena framework adalah buatan orang lain. 2. Berkurangnya fleksibilitas Kebebasan kita dalam mengkoding menjadi berkurang akibat dari sintak yang sudah terpatok. Sehingga setiap projek yang kita buat akan tidak jauh berbeda. Walaupun berbeda, mungkin kesempatannya akan akan lebih kecil. 3. Kode menjadi mubazir Tidak semua kode yang ada pada framework kita gunakan dalam projek kita. Hal ini mengakibatkan code menjadi tidak berguna dan membuat data menjadi besar 4. HTTP request yang berlebihan Biasanya CSS framework memiliki data yang terpisah-pisah. Hal ini membuat loading website menjadi lama.

4 5. Bugs CSS framework adalah buatan manusia yang tidak luput dari kesalahan. Terkadang kita menjadi kesulitan apabila suatu saat kita menemukan sebuah bugs pada CSS framework pilihan kita dan terkadang menjadi kerepotan untuk diperbaiki dan mencari solusinya.setelah melihat kelebihan dan kekurangan CSS Framework, kita dapat mempertimbangkan antara ya dan tidaknya dalam mempergunakan CSS Framework untuk projek yang akan kita kerjakan. Dan sudah tentu pilihan ada di tangan Anda Gambar 1.1 Gambar 1.1 ini adalah tampilan utama ketika kita memulai menjalankan booswatch. Gambar 1.2

5 Gambar diatas adalah tampilan tema dan template dimana kita dapat dengan mudahnya mengambil tema dan template yang ingin di dan kita bisa log in dengan facebook atau twitter sehingga dapat memudahkan mengaksesnya. 1.3 StyleBootstrap adalah salah satu yang lebih rinci dengan pemetik warna dan kemampuan untuk gaya masing-masing komponen berbeda. Dan, untuk setiap gaya yang dihasilkan, aplikasi menghasilkan URL unik jika Anda ingin berbagi

6 dengan orang lain atau kembali dan mengedit kapan saja nanti. Gambar diatas menunjukkan sebuah file tema dengan nama celuren dan cosmo dan kita dapat mendonwload tema tersebut

7 Tema default twitter Bootstrap adalah sangat bagus, namun, kami mungkin ingin memiliki tampilan yang lain tetapi masih mendapatkan kedahsyatan yang ditawarkan oleh kit. Bootswatch menyediakan free-to-menggunakan tema untuk Bootstrap Twitter dan mereka dapat digunakan dengan hanya men-download dan mengganti file CSS.

8 Sebuah vektor sangat terorganisasi dengan baik citra set komponen Twitter Bootstrap ini. Setiap item dilengkapi dengan varietas negara yang berbeda dan semua komponen UI yang diselenggarakan di halaman dalam Fireworks. Itu sumber daya yang besar bagi siapa saja merancang pertama dalam Fireworks dan kemudian beralih ke HTML. Gunakan ikon FamFamFam diatur dalam Bootstrap Twitter, atau Anda dapat belajar bagaimana untuk mengintegrasikan set ikon lainnya dan memperluas perpustakaan Bootstrap ikon Twitter yang ada.

9 Jika Anda tidak ingin pergi melalui dokumentasi, Anda dapat menggunakan generator ini tombol. Anda dapat membuat berbagai jenis tombol dengan semua gaya yang telah ditetapkan dalam bootstrap Sebuah datepicker colorpicker licin dan dibangun untuk Bootstrap Twitter. Mereka mengintegrasikan ke dalam sistem sebagai komponen lainnya dan dapat melekat pada setiap bidang atau elemen HTML.

10 ootstrap-wysihtml5 adalah plugin javascript yang membuatnya mudah untuk membuat sederhana, editor WYSIWYG yang indah dengan bantuan wysihtml5 dan Bootstrap.

11 Serupa dengan tema jquery UI di atas, ini adalah tema yang dibangun untuk Mobile jquery. Ini adalah sumber daya yang berguna jika Anda memiliki web front-end dibangun dengan Bootstrap Twitter dan ingin menawarkan tampilan yang sama untuk Tema mobile.jquery Bootstrap Dan terakhir untuk tampilan nya dibawah ini: <!DOCTYPE html> <html lang="en">

12 <head> <meta charset="utf-8" /> <title>tutorial framework</title> <link rel="stylesheet" href="style.css"> </head> <body>// bagian tubuh program <body bgcolor="blue"> // backgroud tema <h1>tutorial cara penggunaan suatu framework CSS</h1>// sebagai judul <div id="main-content"> <section id="content"> <section class="one-col"> <h3>assalamualaikum</h3> <article> Pengertian dasar dari Framework itu sendiri adalah; sebuah konsep yang memiliki struktur serta terorganisir dalam satu paket atau library. Dengan konsep ini, diharapkan agar desainer dan developer lebih fokus pada projek yang sedang dikerjakannya tanpa harus memulainya dari awal. - sumber Gary Barber dan Wikipedia </article> <ul id="social-icons">// link buat ke sosmed <li class="bt-twitter"><a href="#">twitter</a></li> <li class="bt-facebook"><a href="#">facebook</a></li> <li class="bt-linkedin"><a href="#">linkedin</a></li>

13 </ul> </section> <section class="one-col"> <p>sebelum kita mempergunakan CSS Framework ada baiknya apabila kita mengetahui kelebihan dan kekurangannya terlebih dahulu. Dan apabila misalnya kita baru saja mengenal atau mempelajari CSS, lebih baik tidak perlu menggunkan CSS Framework. Kenapa? Karena CSS Framework adalah kumpulan sintak dari bahasa CSS yang telah diorganisir secara tersusun. Sehingga dibutuhkan pemahaman bahasa CSS agar dapat mengetahui fungsi dari framework tersebut..</p> </section> <fieldset> <form class="form-horizontal"> <legend>legend</legend> <div class="form-group"> <label for="input " class="col-lg-2 control-label">masukkan </label> <div class="col-lg-10"> <input class="form-control" id="input " placeholder=" " type="text"> <div class="form-group"> <label for="inputpassword" class="col-lg-2 control-label">masukkkan Password</label> <div class="col-lg-10"> <input class="form-control" id="inputpassword" placeholder="password" type="password"> <div class="checkbox"> <label>

14 <input type="checkbox"> Checkbox </label> <div class="form-group"> <label for="textarea" class="col-lg-2 control-label">textarea</label> <div class="col-lg-10"> <textarea class="form-control" rows="3" id="textarea"></textarea> <span class="help-block"> <div class="form-group"> <label class="col-lg-2 control-label">radios</label> <div class="col-lg-10"> <div class="radio"> <label> <input name="optionsradios" id="optionsradios1" value="option1" checked="" type="radio"> Option one is this </label> <div class="radio"> <label>

15 <input name="optionsradios" id="optionsradios2" value="option2" type="radio"> Option two can be something else </label> <div class="form-group"> <label for="select" class="col-lg-2 control-label">selects</label> <div class="col-lg-10"> <select class="form-control" id="select"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <br> <div class="form-group"> <div class="col-lg-10 col-lg-offset-2"> <button class="btn btn-default">cancel</button> <button type="submit" class="btn btn-primary">submit</button>

16 </fieldset> </form> <section id="portfolio"> <figure><center> alt="nome do projeto"></a> <a href="#" class="link-thumbs"><img src="images/ab.png" <a href="#" class="link-thumbs"><img src="images/ac.png" alt="nome do projeto"></a> alt="nome do projeto"></a> <a href="#" class="link-thumbs"><img src="images/ad.png" <a href="#" class="link-thumbs"><img src="images/ae.png" alt="nome do projeto"></a> </section> <footer> <p>design by ediyogya<br/> </footer> cosmodesaig</p> </body> </html> Dan kode cssnya

17 * Write code css here */ h1 { color:olive; } h3{ color:orphans; } article{ border-style:solid; border-width:2px; border-color:red; } p{ font-weight: normal; line-height: 1; } color: #999999; Legend{ border-style:relative; border-width:2px; border-color:0px; }