3 Bootstrap Editor yang Mempercepat Desain Web

Twitter Bootstrap, merupakan salah satu CSS Framework termahsyur di dunia desain web. Framework tersebut dirilis oleh Twitter yang sekarang sudah berada di versi 3.x. Dengan Twitter Bootstrap, Anda dapat melakukan prototyping atau membuat halaman web produksi dengan mengurangi effort dalam perancangan desain komponen web seperti button, typograhpy, table, images, responsivity, grid system, dan lainnya. Anda cukup menggunakan beberapa class yang sudah dirancang oleh Twitter Bootstrap dan menggunakannya di halaman web yang Anda rancang.

Selain untuk menangani keperluan CSS dasar seperti yang telah disebutkan, Twitter Bootstrap pun memberikan sebuah penanganan terhadap pembuatan dropdowns, form, navigasi, breadcrumbs, label, pagination, alerts, progress bar, dan lainnya. Lalu Twitter Bootstrap pun memiliki sejumlah komponen berbasis Javascript siap guna seperti modal, tab, tooltip, popover, alert, collapse, carousel, dan lainnya.

Ada beberapa pesaing Twitter Bootstrap di pasaran, beberapa diantaranya antara lain Foundation by Zurb, Gumby Framework, SemanticUI, dan lainnya. Tetapi Twitter Bootstrap masih menjadi nomor satu untuk alat bantu dalam perancangan halaman web. Bahkan website Codepolitan ini pun menggunakan Twitter Bootstrap 3.x untuk membuat pembaca lebih nyaman dalam membaca.

Saat ini dalam merancang halaman web, kita masih menggunakan text editor atau IDE yang masih membantu kita membuat halaman web dengan berbasiskan teks. Jika ingin melihat perubahan, maka kita pun harus memuat ulang file HTML tersebut di web browser yang digunakan. Namun sayangnya cara tersebut mungkin bisa menjadi usang, setelah adanya tiga Bootstrap Editor berikut. Anda dapat dengan mudah membuat halaman web yang berbasis Twitter Bootstrap dengan berbasiskan komponen dengan cara drag n drop, mirip dengan pembuatan tampilan aplikasi desktop menggunakan Netbeans pada Swing, atau Visual Basic. Dan beberapa Bootstrap Editor dibawah ini dibangun diatas Node-Webkit.

Berikut ini adalah tiga Bootstrap Editor yang dapat Anda gunakan untuk merancang halaman web lebih cepat dari sekedar mengetik teks biasa:

1. Bootstrap Studio

[caption id="attachment_4201" align="aligncenter" width="600"] Bootstrap Studio[/caption]

Tools ini pertama kali diumumkan oleh TutorialZine.Com. Mereka menyebut bahwa Tools ini merupakan sebuah revolusi yang akan digunakan oleh developer dan desainer dalam membuat interface yang cantik dengan menggunakan Twitter Bootstrap. Bootstrap Studio merupakan aplikasi desktop hanya dengan drag & drop.

Bootstrap Studio hadir dengan koleksi lengkap berbagai komponen web seperti grafik, peta, data tables, forms, menu, list, dialog, dan masih banyak lagi. Selama perancangan, Anda cukup melakukannya dengan drag & drop, kemudian tekan tombol generate dan Anda akan mendapatkan layout halaman web berbasis Twitter Bootstrap dengan semantic HTML, CSS yang bersih, dan Javascript yang mudah dimodifikasi. Selain itu Bootstrap Studio dilengkapi juga dengan adanya tema built-in dan fonts yang dapat mengurangi development time dalam membuat sebuah halaman web.

Bootstrap Studio segera tersedia untuk Windows, Mac, dan Linux. Hanya saya Anda belum dapat mencicipinya sekarang, berhubung Bootstrap Studio masih dalam tahap beta testing. Tapi Anda bisa mendapatkan pengumuman resmi tanggal rilisnya di Website Bootstrap Studio.

2. Pingendo

[caption id="attachment_4203" align="aligncenter" width="600"] Pingendo[/caption]

Mempunyai motto web authoring with comfort, Pingendo hadir untuk mempermudah perancangan halaman web yang berbasis Twitter Bootstrap. Pingendo merupakan Free Software yang dapat Anda gunakan di Mac, Windows, dan Linux. Berdasarkan informasi yang dirilis oleh pengembangnya, Pingendo akan menjadi web authoring tool yang bersifat free.

Pingendo mempunyai fitur unggulan seperti drag & drop design, koleksi komponen web berbasis Twitter Bootstrap siap pakai, integrasi dengan LESS, dan Font Awesome. Dengan Pingendo, Anda dapat mengintegrasikan pula dengan alat seperti Git dan Console. Anda pun dapat menghasilkan halaman web dalam bentuk HTML atau LESS.

3. PineGrow

[caption id="attachment_4202" align="aligncenter" width="600"] PIneGrow[/caption]

PineGrow mempunyai motto Website Builder for Professionals, memang dengan motto tersebut PineGrow hadir dengan harusnya Anda membayar lisensi untuk mendapatkan fitur penuh dari PineGrow. Lisensi yang tersedia terdiri dari personal license ($49), company license ($79), dan team license ($249). Satu lisensi dapat digunakan oleh satu user, dan satu user dapat memasang PineGrow ke tiga komputer. Untuk mendapatkan PineGrow dengan Wordpress Theme BUilder Anda harus memberikan biaya tambahan ketika membeli lisensi. Jika Anda merupakan seorang pengajar, PineGrow memberikan penawaran khusus untuk Anda.

PineGrow tersedia untuk Mac, Windows, dan Linux. Bila Anda belum mampu untuk membeli lisensi, Anda dapat menggunakan PineGrow versi trial, atau versi online. PineGrow dapat bekerja untuk halaman HTML biasa, tema Wordpress, atau halaman HTML yang dibangun menggunakan Bootstrap atau Foundation. Anda dapat melakukan perancangan halaman HTML secara visual dan drag & drop, live editing, mendukung AngularJS & 960 Grid secara otomatis, multipage editing, responsive design, menambahkan elemen buatan Anda dan menyertakannya ke library komponen PineGrow.

PineGrow dibuat oleh Humane Technologies, sebuah perusahaan kecil di Slovenia yang dikelola oleh Ivona dan Matjaz.