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

(1)

Nama: ahmad edi purwanto

Nim:12111027

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 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

berbeda-beda. 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.

(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 .

(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.

(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>

<title>Tutorial framework</title>

<body>// bagian tubuh program

<body bgcolor="blue"> // backgroud tema

<h1>Tutorial cara penggunaan suatu framework CSS</h1>// sebagai judul

<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>

<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> <form class="form-horizontal"> <fieldset> <legend>Legend</legend> <div class="form-group">

<label for="inputEmail" class="col-lg-2 control-label">Masukkan Email</label> <div class="col-lg-10">

</div>

<label for="inputPassword" class="col-lg-2 control-label">Masukkkan Password</label> <div class="col-lg-10">

(14)

<input type="checkbox"> Checkbox </label> </div> </div> </div> <div class="form-group">

<label for="textArea" class="col-lg-2 control-label">Textarea</label> <div class="col-lg-10">

</div> </div>

<label class="col-lg-2 control-label">Radios</label> <div class="col-lg-10">

Option one is this </label>

</div>

(15)

<input name="optionsRadios" id="optionsRadios2" value="option2" type="radio"> Option two can be something else

</label> </div> </div> </div>

<label for="select" class="col-lg-2 control-label">Selects</label> <div class="col-lg-10">

<button class="btn btn-default">Cancel</button>

(16)

</div> </div> </fieldset> </form> <section id="portfolio"> <figure><center>

<a href="#" class="link-thumbs"><img src="images/ae.png" alt="Nome do projeto"></a> </section> </div> <footer> <p>Design by ediyogya<br/> 2014 -cosmodesaig</p> </footer> </body> </html>

(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; }