Pengantar Teknologi Informasi: Bootstrap

MAKALAH

PENGANTAR TEKNOLOGI INFORMASI

Tentang : BOOTSRTAP

Dosen Pembimbing:

KEUKEU.R.KOM

Disusun Oleh :

RENI ANGGRAINI

NIM.14 205 095

PROGRAM STUDI MANAJEMEN INFORMATIKA JURUSAN SYARIAH

SEKOLAH TINGGI AGAMA ISLAM NEGERI (STAIN)

BATU SANGKAR

2014

KATA PENGANTAR

Bismillahhirrahmanirrahim

Alhamdulillah, puji syukur kami ucapkan kepada Allah SWT, karena rahmat dan karunianya saya dapat menyelesai kan MAKALAH ini sebagai tugas dan penunjang belajar. Shalawat dan salam kami sampaikan kepada Nabi kita Muhammad SAW, karena atas jasa dan pengorbanan beliau lah kita dapat berada di era ilmu pengetahuan saat ini. Makalah ini saya buat sebagai tugas dan penunjang untuk pembelajaran dalam bidang studi Pengantar Teknologi dan Informasi
Penyajian dalam makalah ini saya buat untuk dapat memudahkan dalam proses belajar. Dan saya menyadari bahwa penyajian dalam makalah ini sangat jauh dari kesempurnaan, karena saya yakin kesempurnaan itu hanya milik Allah SWT, maka dari itu kami kami sangat mengharapkan kritikan dan saran yang membangun dari teman teman dan dosen pembimbing untuk melengkapi makalah ini.

Semoga Ini Bermanfaat.

Batusangkar, 10 November2014

DAFTAR ISI

KATA PENGANTAR

DAFTAR ISI

BAB I PENDAHULUAN

A.Latar belakang………………………………………………....1

B.Rumusan masalah.......................................................................1

BAB II PEMBAHASAN

A.Pengertian bootstrap…………….....………………………....…2

B.Sejarah bootstrap……......…………………………………....….3

C.Kelebihan dan kekurangan bootstrap…………….………......….4

BAB III PENUTUP

A.Kesimpulan…………………………………………………………………………..7

B.Saran……………………………………………………………………………….....7

DAFTAR PUSTAKA

BAB I

PENDAHULUAN

A. LATAR BELAKANG

Twitter Bootstrap atau framework atau bisa dibilang kerangka untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website karena tidak dibutuhkan coding HTML, CSS, maupun JavaScript terlalu banyak.

Sesuai namanya, website yang dibuat dengan bootsrap memiliki tampilan halaman yang mirip dengan tampilan halaman Twitter. Tetapi kita juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan dan keinginan. Twitter Bootstrap terdiri atas HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Jadi anda tidak perlul lagi menuliskannya, Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript.

B. RUMUSAN MASALAH

1. Mengetahui pengertian bootstrap

2. Mengetahui sejarah bootstrap

3. Mengetahui kelebihan dan kekurangan bootstrap

BAB II

PEMBAHASAN

A. Pengertian bootstrap

Twitter Bootstrap adalah sebuah alat bantu atau framework atau bisa dibilang kerangka untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website karena tidak dibutuhkan coding HTML, CSS, maupun JavaScript terlalu banyak.

Beberapa Pengertian Bootstrap

Bootstrap merupakan sebuah toolkit yang dikembangkan oleh Twitter untuk mempermudah web developer dalam mendesain tampilan aplikasi. Bootstrap juga menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman website yang dikembangkan senada dengan komponen-komponen lainnya. Bootstrap dibuat untuk memberikan sekumpulan perangkat yang dapat digunakan untuk membangun website sederhana dengan mudah.
Bootstrap adalah CSS open-source dan kerangka Javascript yang dikembangkan oleh Tim Twitter. Ini berisi HTML dan CSS berbasis desain template untuk tipografi, bentuk, tombol, dan navigasi antar muka lainnya, serta optional ekstensi Javascript. Bootstrapt membuat front-end pengembangan web lebih cepat dan mudah.
Bootstrap merupakan sebuah framework CSS dari twitter, yang menyediakan kumpulan komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk digunakan bersama-sama. Selain komponen antarmuka, Bootstrap juga menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi, serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman web yang dikembangkan senada dengan komponen-komponen lainnya.

B. Sejarah bootstrap

   Diperkenalkan oleh Bradley Efron pada tahun 1979

Dinamakan dari kalimat " untuk menarik diri oleh bootstraps seseorang " , yang secara luas diyakini berasal dari " Adventures of Baron Munchausen " .

             Dipopulerkan di tahun 1980-an karena pengenalan komputer dalam praktek statistik.

             Memiliki latar belakang matematika yang kuat .

   Sementara itu adalah metode untuk meningkatkan estimator , itu adalah baik dikenal sebagaimetode untuk memperkirakan kesalahan standar , bias , dan membangun interval kepercayaan untuk parameter

               Sebuah tampilan cepat dari bootstrap ( cont )

Ini memiliki asumsi minimum . Hal ini semata-mata didasarkan pada asumsi bahwa sampel adalah representasi yang baik dari populasi yang tidak diketahui .

   Dalam prakteknya , hal ini menuntut komputasi , namun kemajuan pada kecepatan komputer     membuatnya mudah tersedia dalam praktek sehari-hari .

Fitur-fitur pada Bootstrap

css/bootstrap.cssberisi style dasar (reset, layout, typography, button) bawaan bootstrap.
css/bootstrap-responsive.cssberisi setting responsive desain. Kita bisa memakainya bersama bootstrap.css untuk membuat style bootstrap menjadi responsive.
css/bootstrap-min.cssdan
css/bootstrap-responsive-min.cssversi compressed dari bootstrap.css dan bootstrap-responsive.css
img/glyphicons-halflings.pngdan
img/glyphicons-halflings-white.png, adalah icon yang digunakan pada bootstrap dengan teknik spriting.
js/bootstrap.jsdan
js/bootstrap-min.jsadalah javascript untuk mengaktifkan berbagai fitur keren bawaan bootstrap.

c. Kelebihan Bootstrap dan kekurangan bootstrap

a. kelebihan bootstrap:

1. Dibangun menggunakan Less.

Kerangka ini dibangun menggunakan Less, sebuah teknologi CSS yang sederhana dan mudah untuk digunakan. Less juga menawarkan lebih banyak kekuatan dan fleksibilitas dari CSS pada umumnya. Dengan Less, pengembang dapat mengakses dengan mudah informasi dan fungsi warna, variabel, dan operasi penggunaan.

2. Responsive layout dan 12 column grid system.

Dengan responsive layout maka aplikasi web yang didesain dengan menggunakan Bootstrap akan langsung menyesuaikan dengan lebar dari media perambahnya. Sehingga tampilan web akan tetap rapih dibuka dengan media apapun baik itu handphone, tablet, laptop ataupun PC desktop. Jadi, tampilan tidak akan terganggu dengan resolusi dari layar. Sedangkan 12-column grid system sederhananya adalah Bootstrap akan membagi lebar layar menjadi 12 bagian. Sehingga pembagian kolom per kolom tampilan web akan menjadi lebih mudah

Teknologi CSS yang sederhana dan mudah digunakan.
Anda dapat mengakses dengan mudah informasi dan fungsi warna, variabel, dan operasi penggunaan.
Kekurangan Bootstrap
Minim gambar karena menggunakan CSS3.
Belum mampu memberikan tampilan yang sesuai di semua web browser.

b. Kekurangan

Salah satu kemampuan bootstrap adalah minim gambar karena memanfaatkan CSS3, namun disisi itu pula kekurangan dari bootstrap, CSS3 yang dikembangkan twitter dan yang lain, belum mampu menghasilkan tampilan yang seragam di berbagai peramban halaman web.

Beberapa alasan twiter menggunakan bootstrap

Waktu pembuatan yang lebih cepat

2. Karena elemen-elemen yang biasa ada dalam sebuah website pada umumnya sudah dibuatkan class-nya oleh Bootstrap ini, jadi kita tinggal memanggilnya dalam theme.

Template yang menggunakan Bootstrap lebih rapi

4. Mungkin ini akan sedikit relatif, karena kebiasaan masing-masing developer membuat coding pasti berbeda-beda. Namun pada dasarnya, karena bootstrap sudah terstruktur, untuk modifikasi class dan penambahan class memang sebaiknya mempertahankan kerapihan code yang sudah ada lebih dulu.

Template yang menggunakan Bootstrap lebih ringan.

6. Untuk developer yang efisien, mungkin akan mengatakan saya salah. Karena, tidak mungkin semua class CSS dalam Bootstrap yang akan dipakai. Tetapi juga seperti halnya pengguna WordPress yang belum tentu memerlukan seluruh fitur WordPress, tapi tetap menggunakannya dengan alasan fitur itu berguna dan ada jika suatu saat dibutuhkan. Begitulah juga kira-kira saya menganggap bootstrap lebih ‘ringan’.

Responsive dan tidak responsive.

8. Dengan sedikit modifikasi template, kita bisa memilih antara mengaktifkan sifat ‘responsive’ dan tidak ‘responsive’.

Banyak template bootstrap gratis dan contoh untuk belajar

10. Karena seperti wordpress dengan codex-nya, Twitter Bootstrap juga memiliki codex yang cukup mudah dipelajari. Template wordpress berbasis twitter bootstrap juga banyak yang gratis, jadi bisa sambil dipelajari karakteristik-nya.

Contoh Penggunaan Bootstrap

<!DOCTYPE html>

<html>

<head><title>Bootstrap V3 template</title>

<linkhref="bootstrap-3.0.0/dist/css/bootstrap.min.css"rel="stylesheet" media="screen">

<!--[if lt IE 9]>

<scriptsrc="bootstrap-3.0.0/assets/js/html5shiv.js"></script>

<scriptsrc="bootstrap-3.0.0/assets/js/respond.min.js"></script>

<![endif]-->

</head> <body>

<h1>Hello, world!</h1>

<scriptsrc="//code.jquery.com/jquery.js"></script>

<scriptsrc="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>

</body>

</html>

. Template Responsive

Template responsif adalah template yang bisa menyesuaikan lebar tampilannya secara otomatis sesuai gadget yang dipakainya.

Keunggulan Template Responsif

Dengan menggunakan template responsif, tampilan blog secara umum tidak berubah jika diakses melalui berbagai perangkat yang mempunyai ukuran layar kecil seperti pada Phonecell dan Tablet sehingga pengakses (pembaca) tidak perlu mengganti menjadi mode akses web ketika dibuka di perangkat dengan layar kecil. Situs yang tidak didesain dengan template blog responsive akan lebih lambat dibuka jika diubah menjadi mode akses web (bukan modemobile) sehingga biaya akses internet dapat lebih mahal karena bandwidth yang digunakan juga lebih besar.

Dengan template responsiv, navigasi halaman tetap mudah dan tidak terganggu meskipun dengan ukuran layar kecil baik potrait ataupun landscape seperti ukuran 240px (layar ponsel mini), 320px (layar ponsel), 480px (layar smartphone), 768px (layar tablet) dan 1024px (komputer dan laptop).

Karena tampilan tidak terganggu dengan ukuran layar yang digunakan, maka penggunaan template ini dapat meningkatkan trafik pengunjung yang datang dari perangkat mobile seiring dengan perkembangan teknologi di bidang itu.

Jika tema blog atau web adalah bisnis internet, maka dimungkinkan akan meningkatkan jumlah penjualan produk atau jasa seiring bertambahnya pengunjung yang datang.

Sebagai author akan lebih mudah menulis atau mengedit posting dari berbagai media dengan ukuran layar yang beragam. Meskipun Template Blogger Responsive memiliki beberapa keunggulan, tetapi bukan berarti template ini SEO Friendly karena untuk keperluan itu diperlukan beberapa pengeditan template yang tentunya harus mengacu pada konsep dasar metode SEO (Search Engine Optimization) yang baik dan bijak.

BAB III

PENUTUP

A. KESIMPULAN

kelebihan bootstrap:

1. Dibangun menggunakan Less.

2. Responsive layout dan 12 column grid system.

3. Teknologi CSS yang sederhana dan mudah digunakan.

4. Anda dapat mengakses dengan mudah informasi dan fungsi warna, variabel, dan operasi penggunaan.

5. Kekurangan Bootstrap

6. Minim gambar karena menggunakan CSS3.

7. Belum mampu memberikan tampilan yang sesuai di semua web browser

Kekurangan

B. SARAN

penulis menyadari bahwa dalam pembuatan makalah ini masih banyak kesalahan dan kekurangan , baik dari segi penulisan maupun dari segi pemaparan . maka dari itu pemakalah menerima dan mengharapkan kritik dan saran dari pembaca yang sifatnya membangun, agar makalah ini dapat menjadi lebih baik dan menjadi rujukan bagi pembaca nantinya.

DAFTAR PUSTAKA

http://dimasaresuki.blogspot.com/2014/06/pengertian-twitter-bootstrap-fungsi.html#ixzz3Ijp95Gbz

Pengantar Teknologi Informasi

Selasa, 11 November 2014

Bootstrap

DAFTAR ISI

KATA PENGANTAR

DAFTAR ISI

BAB I PENDAHULUAN

A.Latar belakang………………………………………………....1

B.Rumusan masalah.......................................................................1

BAB II PEMBAHASAN

A.Pengertian bootstrap…………….....………………………....…2

B.Sejarah bootstrap……......…………………………………....….3

C.Kelebihan dan kekurangan bootstrap…………….………......….4

BAB III PENUTUP

A.Kesimpulan…………………………………………………………………………..7

B.Saran……………………………………………………………………………….....7

DAFTAR PUSTAKA

Tidak ada komentar:

Posting Komentar