NieR

Pada topic kali ini kita akan membahas mengnai bootstrap untuk web development. Untuk membuat sebuah web dari awal pastinya tidak mudah. Selain itu, waktu pembuatan website juga tidak sebentar. Yang mana developer benar-benar merancang website tersebut dari awal html, css bahkan java script. Hal ini pastinya sudah sangat tidak flexible.

Maka dari itu ada toolkit bernama bootstrap yang membantu dalam web development. Sehingga proses pengerjaan web tidak memakan waktu yang lama. Bootstrap awalnya dibuat oleh pengembang Twitter untuk penggunaan internal, tetapi setelah beberapa saat, bootstrap dibuat dalam akses terbuka dan menjadi seperangkat alat yang nyaman untuk mengembangkan antarmuka pengguna dengan kerumitan apa pun.

Bootstrap adalah kumpulan besar kode berguna dan dapat digunakan kembali yang ditulis dalam HTML, CSS, dan JavaScript. Ini juga merupakan kerangka kerja pengembangan frontend yang memungkinkan pengembang dan desainer untuk dengan cepat membangun situs web yang sepenuhnya responsif. Pada dasarnya, Bootstrap sudah menyelamatkan kita dari menulis banyak kode CSS yang bahkan sampai ribuan baris, memberi kita lebih banyak waktu untuk dihabiskan untuk mendesain halaman web.

Jadi, sekarang Bootstrap adalah toolkit HTML, CSS dan JS terbuka dan gratis yang digunakan oleh pengembang web untuk membuat desain situs web yang responsif dengan cepat dan efektif. Kerangka Bootstrap digunakan tidak hanya oleh pengembang independen tetapi juga oleh seluruh perusahaan. Area utama aplikasinya adalah pengembangan situs komponen front-end dan antarmuka admin.

Berikut adalah 5 alasan mengapa harus menggunakan bootstrap untuk web development:

Grid yang sudah responsive

Dengan ini kita tidak pelu menghabiskan waktu berjam-jam untuk membuat grid kita pribadi. Bootstap sudah menyediakannya.  Dimana kita bisa mendefinisikan breakpoint kustom untuk setiap kolom sangat mudah menggunakan jeda ekstra kecil, kecil, sedang, besar, dan ekstra besar. Kita juga dapat tetap menggunakan default karena mungkin sudah memenuhi kebutuhan situs.

Gambar yang responsive

Dengan menggunakan bootstrap untuk mengubah ukuran image agar sesuai dengan device lebih mudah.  Bootstrap memiliki kodenya sendiri untuk mengubah ukuran gambar secara otomatis berdasarkan ukuran layar saat ini. Cukup tambahkan kelas .img-responsive ke gambar, dan aturan CSS yang telah ditentukan akan menangani sisanya. Bootstrap bahkan dapat mengubah bentuk gambar website dengan penambahan kelas seperti img-circle dan img-rounded, dan itu tanpa bolak-balik antara kode dan perangkat lunak desain kita.

Mudah untuk dipelajari

Banyak tema untuk sistem manajemen konten (CMS) populer yang dikembangkan menggunakan Bootstrap, yang membuktikan tingkat kualitasnya. Intinya, ini adalah kerangka kerja yang berisi komponen CSS, HTML, dan JavaScript, serta gaya dan fontnya sendiri. 

Komponennya yang lengkap

Bootstrap memiliki banyak sekali komponen yang dapat kitatempelkan dengan mudah ke halaman web, termasuk: Bilah navigasi, Dropdown, Bilah kemajuan, Gambar kecil. Tidak hanya mudah untuk menambahkan elemen desain yang menarik ke halaman web , kita juga akan yakin mengetahui bahwa setiap elemen akan terlihat bagus tidak peduli ukuran layar atau perangkat yang digunakan untuk melihatnya. Ada banyak fungsi siap pakai di ujung jari Anda.

Template eksternalnya yang menarik

Seiring popularitasnya tumbuh, orang-orang mulai membuat template berdasarkan Bootstrap untuk mempercepat proses pengembangan web lebih jauh. Ada banyak situs web di luar sana yang didedikasikan untuk berbagi dan membeli templat khusus berdasarkan Bootstrap.

Apa itu Bootstrap ?

Bootstrap adalah kerangka kerja CSS yang khusus digunakan untuk pengembangan situs web front-end. Nama asli framework ini adalah Twitter Blueprint. Kata “Twitter” ada karena pada awalnya dikembangkan untuk media sosial. Twitter sangat populer saat ini, dengan hampir 326 juta pengguna.

Sebelum Bootstrap muncul, ada kerangka kerja lain yang tersedia. Hanya saja tingkat konsistensi dalam proses pembangunan masih kurang. Selain itu juga membutuhkan biaya perawatan yang mahal.

Berdasarkan pertanyaan tersebut, akhirnya pengembang menemukan Bootstrap. Tidak seperti framework sebelumnya, Boot-strap dikenal konsisten dan sederhana.

Boot-strap adalah kerangka kerja yang memungkinkan pengembang mengembangkan situs web dengan mudah dan cepat. Pengembang hanya perlu memanggil kelas tertentu untuk membuat tombol, panel, tabel, pesan peringatan, dll.

Fungsi Bootstrap

Sebagai pengguna, Anda hanya perlu menggunakan setiap kelas yang ada, misalnya navigasi, tabel, tombol, dll. Banyak fungsi bootstrap tersedia untuk situs web. Fungsi-fungsinya adalah berikut ini:

Dapat mempercepat waktu pengerjaan front end website.

Menunjukkan sisi situs web yang lebih modern dan juga merupakan representasi khas dari anak-anak masa kini.

Tampilan dari boot-strap sendiri sangatlah sensitif, sehingga sangat berguna untuk semua jenis resolusi seperti tablet, smartphone ataupun PC dan laptop.

Situs web yang menggunakan boot-strap umumnya lebih ringan karena lebih terstruktur secara logis.

Keunggulan Bootstrap

Menghemat waktu

Bootstrap sendiri menyediakan banyak pustaka, yang berisi berbagai skrip, yang dapat digunakan pemrogram saat mengembangkan situs web front-end. Dengan cara ini, pengembang tidak lagi menghabiskan waktu untuk menulis berbagai skrip SCC dari awal. Tentunya dengan menggunakan fragmen script tersebut, situs tersebut akan sangat menguntungkan.

Di tangan programmer yang handal, struktur website dapat meningkatkan produktivitas. Perlu Anda ketahui bahwa versi terbaru dari boot-strap dibuat dengan menggunakan fungsi LESS. Ini berarti boot-strap memiliki banyak aspek menguntungkan dalam desain situs web, yang membuatnya sangat mudah bagi pemrogram.

Lebih fleksibel

Menggunakan situs web panduan juga dapat membuat pekerjaan pengembang dan pemrogram lebih fleksibel. Ya, karena frameworknya bisa digunakan sesuka hati, dan gratis. Anda bisa lebih mudah memodifikasi berbagai script yang sudah ada. Tidak ada aturan khusus untuk menggunakan panduan Twitter ini.

Ini adalah bagaimana Anda bisa berkreasi dalam bentuk yang Anda inginkan dengan menggunakan berbagai alat yang sudah ada di boot-strap itu sendiri. Hal inilah yang membuat developer lebih leluasa dalam membangun website sendiri.

Kali ini kita akan ngerefresh sejenak ingatan kita mengenai HTML. Yah, artikel ini mungkin cocok buat yang baru mendalami pemrograman web.

HTML atau Hyper Text Markup Language. Adalah bahasa yang digunakan untuk mendisain dan

memformat halaman web. Kita mungkin sudah mendengar tentang bahasa program seperti C,

C++, Java, dan Visual basic. Masing-Masing bahasa ini terdiri dari perintah sintak

dan programming . Sintak ini adalah yang programmer gunakan untuk memanggil kode.

Sangatlah penting mengetahui bagaimana cara menulis kode menggunakan bahassa yang

relevan.

Lebih dari itu, kita harus konvensional dengan aturan menyangkut bahasa tertentu.

Didalam HTML, sintak ini disebut tag.Tag ditulis dengan tanda-kurung bersudut< dan

>.Ada kelompok tag yang sudah dikenal didalam HTML, yang mana digunakan untuk berbagai tujuan.

Sebagai contoh, dalam rangka memodifikasi satu baris teks ke dalam Bold, kita menerapkan

tag bold dengan suatu tag <b>, kemudian tulis beberapa teks atau suatu paragrap yang

berisi beberapa teks,dan tutup tag menggunakan tag </b> seperti dalam contoh listing 1.

Semua tag didalam HTML harus ditutup menggunakan sintak </>.Tetapi ada beberapa perkecualian pada aturan ini, yang mana kita akan mendiskusikanya nanti.Kita memakai tag ini

sebab HTML bukanlah bahasa yang sensitip seperti C++ dan Java.

Struktur

Setiap kode HTML perlu ditulis dalam suatu struktur yang mana dapat dihubungkan dengan

Word Wide Web.Tidaklah wajib untuk mengikuti struktur ini. Bagaimanapun juga,lebih

baik

mempraktekan langsung struktur ini sbg perancangan halaman web kita.

Listing 1 menunjukkan struktur suatu halaman HTML sederhana:

Listing 1

• <!– Ini komentar didalam HTML.Ini tidak akan diperliatkan pada browser–>
• 
  
• <HTML>
• <HEAD>
• <TITLE>
• Welcome to HTML
• </TITLE>
• </HEAD>
• <BODY>
• <!–halaman CONTENT dimulai –>
• <B>Yang ditampilkan di browser, cuma tulisan ini.
• </BODY>
• </HTML>

Kode diatas menggunakan Notepad dan menyimpan file sebagai satu.html. Kemudian, klik kanan file yang disimpan tadi. bagaimanakah keluarannya?

Listing 2

• <B>Untuk menampilkan tulisan cetak tebal</B><BR>
• <I>Untuk menampilkan tulisan cetak miring (italic) </I><BR>
• <U>Untuk menampilkan tulisan bergaris bawah (underline) </U><BR>
• <BR> digunakan untuk menampilkan baris baru.

Listing 3

<Pon> Bla bla bla bla, dan tulisan ini pun akan dianggap satu paragraf. kalau ga percaya, coba aja sendiri. dengan menggunakannya dua kali atau lebih bakal lebih keliatan hasilnya.

</P>

Tidak wajib untuk menutup tag <P>. Tetapi seperti dikatakan sebelumnya, menutup

tiap-tiap tag adalah suatu yang baik yang pemprogram praktekkan.

Listing 4

Bekerja dengan Heading

Kita dapat menggunakan heading untuk mengorganisir teks kita dalam berbagai

tingkatan. Ada lima tingkatan heading didalam HTML seprti di bawah:

• <H1>Level – 1 </H1>
• <H2>Level – 2 </H2>
• <H3>Level – 3 </H3>
• <H4>Level – 4 </H4>
• <H5>Level – 5 </H5>

Listing 5

Penempatan List contoh teks atau items.Ada dua jenis list didalam HTML.

sebagai berikut

• Ordered List
• Unordered List

Ordered List diwakili oleh tag <ol> tag secara otomatis menomori, dan

Unordered List diwakili oleh tag <ul> dan terlihat seperti bullet.

Cobalah kode di bawah ini:

<OL>

<LI>Java

<LI>C++

</OL>

kode diatas menghasilkan suatu daftar perintah bahasa. Jika kita

menginginkannya seperti bullet kemudian kita ubah tag <OL> menjadi tag <UL>

sebagai di bawah ini:

Listing 6

• <UL>
• <LI>Java
• <LI>C++
• </UL>

Listing 7

Penerapan Definisi List

Definisi List adalah serupa dengan daftar kata. Diterapkan menggunakan tag <DL>

dan <DT> seperti ditunjukkan listing 7 dibawah ini.

<DL>

<DT>Java

<DD>Developed by Sun Microsystems Inc

<DT>Yang kedua

<DD>Developed by saya sendiri

</DL>

Listing 8

Indenting Text

Tag <BLOCKQUOTE> yaitu teks yang menjorok lebih kedalam dari garis tepi secara

otomatis dari kiri ke kanan. Cobalah contoh berikut :

<BLOCKQUOTE>

You can use Sound Recorder to record, play, and edit sound files.

To use Sound Recorder, you must have a sound card and speakers

installed on your computer. If you want to record live sound,

you also need a microphone.

</BLOCKQUOTE>

Membuat Links

Suatu website bukanlah halaman tunggal.Terdiri dari beberapa halaman yang saling

berhubungan. Sebagai contoh,ketika kita klik suatu link nama ” About Us”,

pada browser secara otomatis Kita ke halaman web itu .

Bagaimana sihir ini terjadi? Itu merupakan suatu konsep Hyperlinks

Kita dapat menciptakan Hyperlinks menggunakan tag <a>.Dan harus ditutup menggunakan

tag </a> dan itu mewakili anchor.

Listing 9

<A href =“http://www.rumahweb.com”>Rumahweb </A>

href adalah suatu atribut yang digunakan untuk menetapkan link dan mewakili

Teks Reference. Atribut lain meliputi suatu target opsional, yang mana menandakan

bagaimana cara membuka link. Nilai atribut ini jadi kosong. Sebagai contoh,

kode berikut memanggil lokasi Rumahweb.com didalam suatu jendela browser baru

ketika seseorang mengklik teks.

Listing 10

<A href = http://mhdfzl.com>Fzl </A>

Selalu ingat untuk menyimpan file yang telah dibuat dalam ekstensi .html

Ada Beberapa cara untuk mendapatkan penghasilan dari membuat konten blog, diantaranya yaitu :

1. Adsense

Sebagai penayang blog, Anda bisa mendapatkan aliran pendapatan yang bagus untuk konten online Anda dari iklan. Pengiklan bersedia membayar untuk mendapatkan eksposur ke audiens Anda. Sama halnya seperti surat kabar dengan sirkulasi besar yang dapat mengenakan biaya yang lebih tinggi kepada pengiklan, semakin populer situs dan konten Anda, semakin besar penghasilan yang dapat Anda peroleh.

Cara kerja AdSense adalah lewat penayangan iklan yang relevan dengan konten yang muncul di halaman tertentu pada blog Anda. Misalnya, jika blog Anda adalah tentang wisata petualangan dan Anda baru saja mengupload sebuah postingan tentang perjalanan ke Gunung Rinjani, AdSense mungkin akan menampilkan iklan tentang asuransi perjalanan, Lombok, atau jaket. Sebagai pemilik situs tempat iklan ditampilkan, AdSense akan membayar Anda saat pengguna melihat atau berinteraksi dengan iklan.

2. Program Afiliasi

Marketing afiliasi adalah saat Anda menyertakan link di konten Anda ke produk atau layanan yang dijual di situs lain. Berikut cara kerjanya: saat seseorang mengklik link di situs Anda, membuka situs afiliasi, dan melanjutkan untuk membeli produk yang Anda promosikan, Anda mendapatkan komisi atas penjualan tersebut.

Bagi blog yang audiens-nya sangat aktif dan tertarik dengan rekomendasi produk, ini dapat menjadi model pendapatan yang realistis. Artikel informasi, petunjuk, dan gaya hidup menawarkan banyak peluang untuk mempromosikan produk afiliasi.

3. Menjual Produk Sendiri

Sebagai cara untuk memonetisasi blog, banyak blogger mengukuhkan kehadirannya di platform e-commerce, membuat toko online, dan mulai menjual produk. Produk Anda bisa dalam bentuk fisik atau digital. Pada contoh blog wisata petualangan, Anda dapat menjual kaos yang menampilkan logo Anda atau buku panduan digital untuk destinasi eksotis.

Apakah produk Anda berbentuk fisik atau virtual, Anda harus membuat sistem untuk menerima pembayaran. Menjual merchandise fisik mengharuskan Anda untuk memikirkan tentang penyimpanan stok barang, mengatur pengiriman, dan menangani pajak dan bea. Dari segi logistik, barang digital bisa lebih sederhana karena dapat dikirim secara elektronik.

4. Job Review

Pada job review kita menulis review, kita menulis review mengenai sebuah produk atau perusahaan dimana perusahaan membayar kita untuk menulis review tersebut. Ini juga merupakan salah satu cara mendapatkan uang dari blog dengan mudah dan praktis.  Akan tetapi, untuk menarik perusahaan tersebut agar mau memberi job kita juga harus meningkatkan kualitas blog agar lebih terkemuka. Dengan begitu, banyak  tawaran job review.