Cara Membuat Flat Long Shadow ala Material Design di Inkscape

Material Design merupakan sebuah panduan desain yang dikembangkan oleh Google dan diperkenalkan pada saat konferensi Google I/O bulan Juni 2014 [sumber : wikipedia]. Dalam berbagai produk Google pola Material Design sering dipergunakan sebagai tampilan UI (user interface). Teman-teman yang pakai Android pasti sudah akrab dengan tampilan-tampilan Material Design.

Di website android developer sendiri, Material design dikatakan sebagai sebuah panduan untuk desain visual, gerak serta interaksi lintas platform dan perangkat. Dan fungsionalitas material design baru diterapkan di Android 5.0 (API level 21) secara menyeluruh.

Material Design di Aplikasi Gmail di Android
Material Design di Aplikasi Gmail di Android . credit : intoday.in

Oke, ngomong-ngomong soal material design, buat saya secara pribadi yang paling mudah untuk mengidentifikasi pola desain ini adalah pada icon-icon aplikasi atau logo. Biasanya, icon atau logo-logo yang menerapkan kaidah material design mempunyai tema warna tertentu dengan aksen bayangan panjang yang seolah membuat objek di depannya menonjol.

Saya sendiri tidak paham dan tidak ahli dalam desain, sehingga yang menurut saya paling menonjol dari material design untuk dibedakan dari desain lainnya adalah dari bayangan panjang khasnya. Mungkin buat teman-teman yang paham dalam desain bisa share nanti di kolom komentar tentang apa saja yang mudah diidentifikasi dari material design-nya Google.

Balik ke judul yang saya tulis di atas, biasanya untuk keperluan pribadi saya sering mendesain logo pakai aplikasi editor vektor gratisan Inkscape. Sebetulnya saya suka juga dengan Adobe Illustrator, tapi berhubung laptop yang saya pakai sehari-hari ber-OS Ubuntu jadilah Inkscape sebagai pilihan. Selain karena gratis :D dan available untuk sistem operasi Ubuntu, juga karena menurut saya Inkscape paling lengkap dibanding aplikasi vektor sejenis di Linux.

Nah, dengan tujuan ngikutin tren :) beberapa logo untuk blog dan lain-lain akhirnya saya kasih sentuhan material design. Yah.. walaupun mungkin belum seseuai kaidah atau guideline dari Google hehe..

Karena saking pengennya punya logo bercitarasa material desain, akhirnya belajarlah saya ke sana sini (lebih tepatnya browsing sana sini :D ). Dan yang pertama saya bisa yaitu membuat long shadow alias bayangan panjang yang khas material design.

Jadi posting ini bukan tutorial material design di Inkscape, tapi lebih ke share saya pribadi yang baru bisa desain logo di Inkscape haha..

Oke kita mulai aja ya.. Siapkan bahan, dan cemilan :D, buka Inkscape, kalau belum punya bisa install dulu. Khusus OS Windows ada Inkscape versi portable yang bisa dipakai tanpa perlu install. Silakan search aja di google.

Material Design Long Shadow di Inkscape


Goal kita adalah membuat logo icon bulat warna biru dengan kotak di tengahnya berwarna putih.
Logo sederhana material desain
Logo sederhana material desain

Sangat sederhana memang, tapi ini adalah mile stone kita untuk membuat desain – desain lainnya yang lebih rumit.



Oke setelah aplikasi Inkscape terbuka, buat sebuah lingkaran dengan warna biru. Gunakan tombol Ctrl saat membuat lingkaran untuk menghasilkan bentuk bulat sempurna.
tutorial long shadow material design di inkscape
Buat Lingkaran bulat sempurna, beri warna biru

Step kedua, buat kotak atau persegi (sama sisi) dan beri warna putih.
step 2 tutorial material design di inkscape
Buat persegi, beri warna putih

Pilih kedua objek, dengan cara klik objek pertama kemudian klik objek kedua bersamaan dengan menekan tombol Shift. Atau bisa juga dengan mem-blok kedua objek secara langsung.

Pilih menu Object → Align and Distribute.. atau bisa langsung dengan Shift + Ctrl + A. Di sebelah kanan, akan ada kotak dialog Align and Distribute. Pilih Relative to Last Selected atau First Selected (sesuaikan keperluan, pilih salah satu). Kemudian klik icon dan , dan kotak putih sekarang berada persis di tengah-tengah lingkaran biru.
Pilih Menu Align and Distribute untuk membuat objek persis di tengah lingkaran
Align and Distribute untuk membuat objek di tengah-tengah
tutorial inkscape - material design shadow


Sekarang pilih objek perseginya saja. Duplikat objek dengan klik kanan → Duplicate atau menggunakan tombol Ctrl + D sehingga objek persegi menjadi dua dan saling bertumpuk.
tutorial inkscape bahasa indonesia
Duplicate persegi menjadi 2 buah dan saling bertumpuk

Klik pada area kosong untuk menghilangkan seleksi objek (2 persegi yang saling bertumpuk), dan klik kembali objek persegi sehingga hanya 1 persegi paling atas saja yang terseleksi.

Pilih menu Object → Transform atau Shift + Ctrl + M, pada tab Move isi kotak Horizontal dengan 200 dan Vertical dengan -200. Teman-teman boleh mengisi dengan angka lain, hanya saja nilai Vertical harus negatif dari dari nilai Horizontalnya. Misal 300 dan -300 dan seterusnya. Setelah itu klik apply. Maka salah satu objek persegi akan berada di bawah kanan dari lokasi sebelumnya.
Pilihan Transform di Menu Objek
Pilihan Transform Inkscape
Pilihan Transform Inkscape
Move Object di Inkscape
Move Object di Inkscape
Seleksi kedua persegi dengan klik + Shift atau drag block langsung. Kemudian pilih menu Path → Object to Path agar kedua objek berubah menjadi path namun tetap dalam bentuk aslinya.
cara membuat logo di Inkscape
Seleksi kedua persegi
Menu Inkscape untuk desain grafis
Ubah kedua persegi tersebut dari Objek menjadi Path

Lalu pilih menu Extensions → Generate from Paths → Interpolate . Pada jendela dialog Interpolate, isi kotak Exponent dengan 1,0 - Interpolate steps dengan 200 – Interpolate method dengan 2. Klik apply dan close. Anda juga bisa meng-klik kotak Live preview sebelum meng-klik apply untuk melihat hasil sebelum dieksekusi.
cara menampilkan menu interpolate di Inkscape
Menu Interpoate di Menu Bar Extensions
Menu Interpolate Inkscape untuk material design
Window Dialog Interpolate.  Sesuaikan kotak isian parameternya.

Setelah proses interpolate, akan tercipta objek memanjang dari persegi atas hingga persegi bagian bawah. Klik objek baru tersebut, lalu UnGroup dengan Ctrl + Shift + G atau menu Object → UnGroup. Setelah itu pilih menu Path → Union.
interpolate untuk membuat bayangan material design
Objek baru hasil interpolate
belajar material design pakai inkscape
Ungroup objek hasil interpolate
Menu Union Path di menu bar Inkscape
Union Objek yang sudah di-ungroup

Step berikutnya adalah menduplikasi lingkaran biru sehingga ada lingkaran biru baru di atas objek hasil interpolate tadi. Caranya sama Ctrl + D, atau dari menu klik kanan.
Menu duplicate di Inkscape
Duplikasi lingkaran biru

Seleksi objek panjang hasil interpolate di atas dan lingakaran yang baru. Gunakan Shift + klik untuk untuk memilih keduanya. Pilih menu Path → Intersection dan lihat hasilnya, objek hasil interpolate akan terpotong sesuai bentuk lingkaran.
Belajar Inkscape
Pilih lingkaran hasil duplikasi dan objek hasil interpolate secara bersamaan
menu intersection Inkscape
Pilihan menu Intersection untuk membuat objek bayangan
belajar material design pakai inkscape
Objek akhir hasil intersection

Jangan lupa untuk menghapus persegi yang digunakan untuk membuat objek interpolate tadi (persegi yang berada di luar objek lingkaran).
belajar desain grafis inkscape
Hapus persegi yang berada di luar area lingkaran

Beri warna hitam pada objek potongan hasil intersection dan pindahkan objek tersebut persis di belakang persegi. Sekarang urutan objeknya dari paling belakang menjadi Lingkaran biru – objek hasil intersection – persegi putih.
menu rearrang object inkscape
Menu Re-arrange
rearrange object di inkscape
Hasil akhir setelah di-rearrange (susun ulang)
Sekarang klik objek hasil intersection yang akan kita gunakan sebagai long shadow ala material design. Pilih Gradient Tool gradient tool inkscape dan berikan gradient pada objek tersebut. Buat gradien dengan warna hitam dengan opacity awal 79 dan opacity akhir di 0. Hasilnya objek tersebut akan menjadi bayangan panjang khas material design.
Tampilan hasil akhir logo simple material design menggunakan Inkscape
Tampilan hasil akhir logo simple material design menggunakan Inkscape
 Sampai di sini proses pembuatan logo sederhana dengan sentuhan material design di Inkscape sudah selesai. Teman-teman bisa berkreasi dengan desain atau logo yang lebih kompleks.
Kalau ingin lihat versi videonya, teman-teman bisa cek Youtube channel ayayank.com atau tonton di video di bawah ini.


Cara Cek IP Address Operator Seluler Ponsel Android

Cara cek ip? hmm.. mungkin ini adalah cara yang semua orang sudah pandai mengerjakannya. Bisa jadi sobat cukup mengunjungi google dan mengetik "what is my ip address". Yups memang sangat mudah untuk mengecek IP Adress.

Tapi selain dengan cara di atas, tentu saja ada cara lain yaitu dengan aplikasi. Nah, di play store ada banyak banget aplikasi untuk mengecek ip address yang tentunya dengan kemampuan dan fitur yang kurang lebih sama.

Aplikasi Cek IP Address Info di Android Pilihan Saya





Kalau ditanya pilihan saya? saya jawab aplikasi ini nih, See My IP. Apa sih kelebihannya? Sebetulnya, gak beda jauh sama aplikasi serupa. Cuma menurut saya aplikasi ini cukup simple dan ga pake banyak menu. Begitu dibuka, dia bakal langsung menampilkan Informasi IP kamu secara lengkap mulai dari Nama Operator, Kota dan Negara, sampai lokasi dalam bentuk peta.

Berikut ini nih penampakannya
Aplikasi Let Me See My IP Free
Aplikasi Let Me See My IP


Nah, kalau kamu mau silakan cari aja di play store untuk download aplikasi ini.

Review HP Android Terbaik di Tahun 2016, Wajib Punya

Meski Samsung masih merajai pasaran, tapi ternyata persaingan pasar ponsel Android di tahun 2015 lalu cukup sengit. Terbukti dengan dipasarkannya berbagai macam HP Android dengan spesifikasi ciamik oelh berbagai produsen ponsel dunia. Meskipun begitu, perlu diakui bahwa Samsung memang masih yang terdepan dalam menghadirkan Smartphone Android dengan spesifikasi dan teknologi terkini. Contohnya, Samsung Galaxy S6 da Galaxy S6 Edge yang dibekali teknologi terbaru Samsung.

Bicara soal ponsel terbaik, maka tahun ini masih dikuasai nama-nama produsen ponsel yang sebelumnya telah dikenal baik. HP Android terbaik yang akan kita bahas sekarang merupakan besutan produsen Smartphone Terbaik Dunia seperti Samsung, HTC, Xiaomi, dan Asus.

Mari segera kita ulas sebagai referensi anda.

HP Android Terbaik 2016 versi Ayayank

1. Samsung Galaxy S6 Edge

HP android terbaik tahun 2016 Samsung
Samsung Galaxy S6 Edge
Di posisi pertama ada Samsung Galaxy S6 Edge yang merupakan salah satu HP android terbaik tahun ini. Teknologi terbaru Samsung yang dibenamkan pada ponsel ini, sukses menjadikannnya dengan fitur terbaik. Menggunakan teknologi layar lengkung samsung (Edge) dengan jenis layar Super Amoled 5.1 inch berresolusi 1440 x 2560 px atau biasa disebut Quad HD ditambah lagi tingkat kerapatan pixel 577 pixel per inch (ppi). Tak ketinggalan lapisan kaca Gorilla Glass 4 dari Corning. Ponsel ini berukuran sangat tipis dengna ketebalan hanya 7 mm.

Soal harga, dari yang kami kumpulkan Samsung S6 edge terbilang cukup mahal. Di beberapa online store, Harga Samsung Galaxy S6 Edge ini mencapai Rp 10.500.000 untuk type dengan memori 32 GB.

Detail Spesifikasi Samsung Galaxy S6 Edge

  • Ukuran : 142,1 x 70,1 x 7 mm. Dengan bobot 132 gr
  • Layar : Curved Edge Screen Super AMOLED, 5,1 inches 1440 x 2560 pixels (577 ppi pixel) + Corning Gorilla Glass 4
  • Memory Internal : Terdapat 3 pilihan : 32/64/128 GB
  • RAM : 3 GB
  • Memory External : n/a
  • OS : Android v5.0.2 OS / Lollipop
  • Jaringan : HSPA dan 4G LTE
  • Konektivitas : Wifi 802.11 a/b/g/n/ac, dual-band GSM, Bluetooth v4.1, NFC, Infrared, microUSB v 1.0 (MHL 3 TV-out), USB Host
  • Prosesor : Exynos 7420 Quad-core 1.5 GHz Cortex-A53 & Quad-core 2.1 GHz Cortex-A57
  • GPU : Mali T 760
  • Kamera Belakang : 16 MP, 2988 x 5312 pixels + optical image stabilization + autofocus, LED Flash + video recorder 2160p@30pcs
  • Kamera Depan : 5 MP
  • Baterai : Non Removable Li-Ion 2600 mAh

Nah, sekarang mari kita membicarakan kekurangan apa dari ponsel terbaik besutan Samsung ini. Dari spesifikasi di atas, kita bisa ketahui bahwa salah satu kekurangan HP Android terbaik ini adalah tidak mempunyai memory external dan baterai tidak bisa dicopot. Selain itu, jika dibandingkan dengan ponsel lain yang sekelas, ponsel ini tidak dilengkapi dengan teknologi tahan air atau tahan debu.

Samsung Galaxy S6

HP Android Terbaik Samsung Galaxy S6
Samsung Galaxy S6
Samsung Galaxy S6 ini tidak memiliki layar lengkung layaknya Galaxy S6 Edge, namun ponsel ini didesain lebih tipis dengan ketebalan 6.8 mm dan tetap menggunakan layar Super Amoled berukuran 5.1 inch dengan resolusi Quad HD 1440 x 2560 pixels. Layar tersebut tampil sempurna dengan kerapatan pixel mencapai -577 ppi, dan sudah dilapisi Gorilla Glass 4 pada bagian depan dan belakang, agar semua sisi bisa terlindung sempurna dari goresan dan saat terjatuh. Sama seperti Galaxy S6 Edge, smartphone ini juga menggunakan material metal yang didesain tipis dan memiliki berat ringan hanya 138 gram.





Samsung memberikan fitur baru pada HP Android terbaik nya yaitu fitur Samsung Pay sebagai fitur pembayaran digital yang memanfaatkan NFC. Cara kerja Samsung Pay sama persis dengan Apple Pay, namun sayangnya fitur tersebut belum bisa digunakan di Indonesia. Sementara itu untuk dapur pacunya mengandalkan Chipset 64 Bit Samsung Exynos 7420, yang berpacu pada 2 inti processor Quad-core 1.5 GHz Cortex-A53, dan Quad-core 2.1 GHz Cortex-A57. Untuk peformanya tak perlu diragukan lagi, karena Samsung sudah memberikan Ram 3GB berteknologi LPDDR4, dan GPUU Mali-T760, sedangkan sistem operasinya menggunakan Android Lollipop dengan sentuhan TouchWiz UI.

Kamera terbaik memang harus dimiliki sebuah HP Android Terbaik Di Dunia, untuk itu Samsung melengkapi smartphonenya dengan kamera 16 Megapixel yang memiliki kemampuan OIS (optical image stabilization), dan perekam video 4K (UltraHD). Sementara itu untuk kamera depannya mengandalkan lensa 5 Megapixel dengan Aperture F/1.9, sama seperti yang dimiliki kamera belakang Galaxy S6. Kemampuan kamera Galaxy S6 mampu mengalahkan iPhone 6 dan smartphone premium lainnya, terutama saat memotret dan merekam video pada kondisi low ligh atau bercahaya rendah. Kemudian untuk konektivitasnya mengandalkan jaringan LTE Cat.6 dan sudah dilengkapi baterai 2550 mAh.

Spesifikasi Samsung Galaxy S6


  • Ukuran : 143.4 x 70.5 x 6.8 mm / 138 g
  • Layar : Super AMOLED, 5.1 inches 1440 x 2560 pixels (~577 ppi pixel density) + Corning Gorilla Glass 4
  • Memory Internal : 32/64/128 GB
  • Memory Ekternal : –
  • Ram : 3GB
  • OS : Android OS, v5.0.2 (Lollipop)
  • Jaringan : HSPA 42.2/5.76 Mbps, LTE Cat6 300/50 Mbps
  • Konektivitas : Wi-Fi 802.11 a/b/g/n/ac, dual-band, Bluetooth V4.1, NFC, Infrared, microUSB v2.0 (MHL 3 TV-out), USB Host
  • Processor :Exynos 7420 Quad-core 1.5 GHz Cortex-A53 & Quad-core 2.1 GHz Cortex-A57
  • GPU : Mali-T760
  • Kamera Depan :5 MP
  • Kamera Belakang : 16 MP, 2988 x 5312 pixels, optical image stabilization, autofocus, LED flash, Perekam Video 2160p@30fps
  • Baterai : Non-removable Li-Ion 2550 mAh


HTC One M9

Ponsel Android Terbaik 2016 HTC One
HTC One M9
Salah satu HP Android terbaik tahun ini, dirilis pada acara World Mobile Congress 2015 berbarengan dengan diperkenalkannya Samsung Galaxy S6 Edge. Ditenagai dengan Chipset buatan Qualcomm seri Snapdragon 810, ditambah prosesor Octa Core 64 Bit (Cortex A53 dan Cortex A57). Diperkuat dengan pengolah grafis Adreno 430 dan RAM 3 GB. Tak lupa system Android Lollipop juga diadopsi untuk performa terbaik.

Spesifikasi HTC One M9


  • Sim Card : Single Sim
  • Ukuran : 144.6 x 69.7 x 9.6 mm / 157 g
  • Layar : Super LCD3, 080 x 1920 pixels (~441 ppi pixel density) + Corning Gorilla Glass 4
  • Memory Internal : 32 GB
  • Memory Ekternal : microSD, up to 128 GB
  • Ram : 3GB
  • OS : Android OS, v5.0.2 (Lollipop)
  • Jaringan : HSPA 42.2/5.76 Mbps, LTE Cat6 300/50 Mbps
  • Konektivitas : Wi-Fi 802.11 a/b/g/n/ac, dual-band, Bluetooth V4.1, NFC, Infrared, microUSB v2.0 (MHL 3 TV-out), USB Host
  • Processor :Qualcomm MSM8994 Snapdragon 810 Quad-core 1.5 GHz Cortex-A53 & Quad-core 2 GHz Cortex-A57
  • GPU : Adreno 430
  • Kamera Depan : 4 MP
  • Kamera Belakang : 20.7 MP, 5376 x 3752 pixels, autofocus, dual-LED (dual tone) flash, Perekam Video 2160p@30fps
  • Baterai : Non-removable Li-Po 2840 mAh

Nah, sementara saya bahas 3 HP Terbaik dulu.  Nanti akan saya tambah menjadi 5, tapi sedang diriset dulu hehe.. 

Belajar HTML5: Belajar Dasar SVG, Penggunaan SVG untuk men-generate Grafis pada dokumen HTML

SVG - Scalable Vector Graphic oleh HTML5
HTML5 sekarang ini memang bukan teknologi baru, meski implementasi bersar-besaran dan dukungan berbagai perangkat baru mulai terasa 2 - 3 tahun belakangan ini. Seperti yang mungkin sudah anda tahu, atau kita ketahui bersama bahwa HTML5 memberikan dukungan fitur yang sebelumnya tidak pernah terbayangkan pada versi HTML lain. Salah satu yang akan kita bahas adalah tentang SVG.

Apa itu SVG?

SVG merupakan singkatan dari Scalable Vector Graphics atau secara sederhana bisa diartikan sebagai bentuk Grafis Vektor yang dapat diatur baik ukuran maupun nilainya (Scalable). Bagi anda yang pernah belajar program grafis seperti Corel Draw atau Adobe Illustrator, tentu sudah paham tentang Vector Graphic. Salah satu jenis file grafis yang tidak akan pecah meski diperbesar berkali-kali.

Oke, kembali lagi ke SVG milik HTML5. SVG dalam HTML5 merupakan sebuah bahasa tersendiri untuk membuat gambar grafis 2 dimensi yang dirender dalam bentuk aplikasi grafis berbasis bahasa XML. Penggunaan paling umum SVG dalam dunia web saat ini adalah untuk menampilkan grafik, diagram atau chart dan sebagainya. Standar SVG diatur oleh W3C sepenuhnya sebagai konsorsium W3.

Menampilkan SVG di dokumen HTML

Jika anda mempunyai sebuah file grafis berformat SVG, untuk membukanya anda bisa langsung "open with" menggunakan aplikasi web browser semacam Internet Explorer, Mozilla Firefox dll. Selain itu, di HTML5 anda bisa meng-embed SVG secara langsung dengan menggunakan sintax <svg></svg>.

Membuat Bentuk Geometri Dasar Dengan SVG

Lingkaran dengan SVG

Coba anda ketik script berikut dan simpan sebagai sebuah file .html
<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
         
      <title>SVG</title>
      
      
   </head>
   <body>
   
      <h2 align="center">
Lingkaran dengan SVG</h2>
<svg height="200" id="svgelem" xmlns="http://www.w3.org/2000/svg">
         <circle cx="50" cy="50" fill="red" id="redcircle" r="50">
      </circle></svg>
  
   </body>
</html>
Maka akan menghasilkan :
SVG Lingkaran
Lingkaran dengan SVG HTML5




Baca juga : Membuat fungsi terbilang di JAVA

Menggambar Kotak dengan SVG

Sekarang coba menggambar kotak persegi panjang dengan mengetikkan kode berikut:
<html>
   <head>
   
      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
         
      <title>SVG</title>
      
      
   </head>
   <body>
 
      <h2 align="center">
HTML5 SVG Persegi Panjang</h2>
<svg height="200" id="svgelem" xmlns="http://www.w3.org/2000/svg">
         <rect fill="red" height="100" id="redrect" width="300">
      </rect></svg>
  
   </body>
</html>
Maka akan menghasilkan :
Rectangle SVG

HTML5: Menggambar Garis dengan SVG

Kemudian cobalah mengggambar garis denga script HMTL berikut :
<html>
   <head>
      
      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      
      <title>SVG</title>
      
   </head>
 
   <body>
 
      <h2 align="center">
HTML5 SVG Garis</h2>
<svg height="200" id="svgelem" xmlns="http://www.w3.org/2000/svg">
         <line style="stroke-width: 2; stroke: red;" x1="0" x2="200" y1="0" y2="100">
      </line></svg>
  
   </body>
</html>
Hasilnya:
Garis dengan SVG HTML5


Demikian sekilas tentang SVG, lain kesempatan akan kita bahas lagi.

Tutorial Bootstrap: Membuat Panel Dengan Bootstrap 3

Penggunaan panel dalam web desain banyak diperlukan terutama untuk masalah tata letak konten dialog box. Di Bootstrap 3 terdapat class .panel yang bisa digunakan untuk membuat panel ataupun dialog box dengan tampilan yang rapi dan baik.

Nah, untuk penggunaan class .panel Bootstrap 3 anda cukup menambahkan class tersebut pada container (<div) yang akan digunakan. Berikut ini contoh penggunaannya.

Pembuatan Panel di Bootstrap 3

<div class="panel panel-default">
 <div class="panel-heading"><h3 class="panel-title">Belajarlah Dengan Baik</h3></div>
 <div class="panel-body">Untuk bisa lancar menggunakan framework Bootstrap, sering-seringlah berlatih dan belajar.</div>
 <div class="panel-footer clearfix">
  <div class="pull-right">
   <a href="#" class="btn btn-primary">Pelajari</a>
   <a href="#" class="btn btn-default">Kembali</a>
  </div>
 </div>
</div>
Kode panel bootstrap tersebut akan menampilkan :
Tutorial Panel di Bootstrap 3
Panel Default dengan Bootstrap

Baca juga : Membuat kotak alert dengan Bootstrap 3

Selain class .panel-default, Bootstrap 3 juga menyediakan beberapa tipe panel lain untuk berbagai kebutuhan. Class panel yang tersedia di Bootstrap 3 diantaranya .panel-success, .panel-primary, .panel-danger, dan .panel-warning. Berikut ini contoh penggunaan class-class panel bootstrap tersebut.

<div class="panel panel-primary">
 <div class="panel-heading"><h3 class="panel-title">Contoh Panel Primary</h3></div>
 <div class="panel-body">Ini adalah contoh panel Primary</div>
</div>

<div class="panel panel-success">
 <div class="panel-heading"><h3 class="panel-title">Contoh Panel Success</h3></div>
 <div class="panel-body">Ini adalah contoh panel Success</div>
</div>

<div class="panel panel-info">
 <div class="panel-heading"><h3 class="panel-title">Contoh Panel Info</h3></div>
 <div class="panel-body">Ini adalah contoh panel Info</div>
</div>

<div class="panel panel-danger">
 <div class="panel-heading"><h3 class="panel-title">Contoh Panel Danger</h3></div>
 <div class="panel-body">Ini adalah contoh panel Danger</div>
</div>

<div class="panel panel-warning">
 <div class="panel-heading"><h3 class="panel-title">Contoh Panel warning</h3></div>
 <div class="panel-body">Ini adalah contoh panel Warning</div>
</div>

Hasilnya:
Tutorial panel di Bootstrap 3
Macam-macam Class Panel Bootstrap

Selamat mencoba.

Tutorial Bootstrap: Membuat Kotak Pemberitahuan dengan Twitter Bootstrap 3

Di tulisan kali ini, kita akan membahas tentang bagaimana cara membuat kotak pemberitahuan dengan memanfaatkan class-class yang ada pada Bootstrap 3. Kotak pemberitahuan atau biasa disebut alert box atau alert message sangat sering digunakan untuk keperluan desain web yang baik agar lebih informatif dan interaktif.

Membuat Alert Message dengan Bootstrap 3

Berikut ini adalah penggunaan alert message box dengan Bootstrap 3.

Warning Alert dengan Bootstrap 3

Warning alert adalah kotak pemberitahuan yang bersifat memberi peringatan kepada user tentang sesuatu. Dengan class alert-warning di Bootstrap 3 anda bisa membuat kotak peringatan dengan mudah. Cara pengguanaannya:
<div class="alert alert-warning">
 <a herf="#" class="close" data-dismiss="alert">&times;</a>
 <strong>Peringatan!</strong> Terjadi masalah dengan koneksi.
</div>

Hasil yang ditampilkan
alert warning dengan bootstrap 3
class .alert-warning di Bootstrap 3

Error Alert dengan Bootstrap 3

Jenis alert kedua yang sering digunakan adalah error alert. Di Bootstrap 3, class yang meng-handle fungsi tampilan ini adalah .alert-danger. Class ini akan menampilkan kotak berwarna merah. Penggunaannya:
<div class="alert alert-danger">
  <a herf="#" class="close" data-dismiss="alert">&times;</a>
  <strong>Error!</strong> Email yang anda masukkan tidak valid
 </div>

Hasil yang ditampilkan
alert danger dengan bootstrap 3
class .alert-danger dengan bootstrap 3

Success Alert dengan Bootstrap 3

Baca Juga : Mempercantik tampilan Tombol dengan bootstrap 3

Success alert, atau biasa disebut dengan confirm alert akan menampilkan kotak pemberitahuan berwarna hijau. Contoh penggunaannya :
<div class="alert alert-success">
  <a herf="#" class="close" data-dismiss="alert">&times;</a>
  <strong>Berhasil!</strong> Data berhasil diperbarui.
 </div>
Hasil yang ditampilkan
Membuat kotak alert success dengan bootstrap 3
class .alert-success di Bootstrap 3

Information alert dengan Bootstrap 3

Jenis alert yang keempat adalah information alert. Dengan class .alert-info anda bisa membuat kotak pemberitahuan berwarna biru. Penggunaannya adalah sebagai berikut:
<div class="alert alert-info">
  <a herf="#" class="close" data-dismiss="alert">&times;</a>
  <strong>Perhatian!</strong> Mohon baca terlebih dahulu syarat dan ketentuan.
 </div>
Hasil yang ditampilkan
Penggunaan alert info di bootstrap 3
class .alert-info di Bootstrap 3

Selain itu, anda menggunakan Javascript untuk melakukan dismiss alert. Untuk pembahasan yang ini, di tulisan berikutnya ya..! :)

Tutorial Bootstrap: Penanganan Gambar (Image) di Bootstrap 3

Halo, kembali posting tentang Tutorial Bootstrap 3 di Ayayank.com kali ini hadir untuk berbagi tips tentang framework web desain yang sangat populer ini. Di posting terdahulu kita pernah membahas tentang bagaimana mempercantik tombol di Bootstrap, membuat layout responsive dengan Bootstrap dan lain-lain. Nah kali ini yang akan kita bahas adalah tentang kustumasi gambar / image.

Bootstrap mempunyai cara penanganan image / gambar yang cukup lengkap untuk kebutuhan web desain anda. Cukup menambahkan beberapa baris kode (class) pada tag "<img" sehingga style css bawaan bootstrap akan mempercantik tampilan gambar sesuai dengan kebutuhan. Class built-in yang disediakan Bootstrap untuk menganani gambar anda yaitu :

Kostumasi Image di Bootstrap

  • img-rounded
    Class ini digunakan untuk menampilkan gambar yang memiliki sudut melengkung atau lebih dikenal dengan istilah rounded-corner. Cara penulisannya adalah
    <img src="gambar.jpg" class="img-rounded">

  • img-circle
    Class
    img-circle
    adalah cara terbaik menampilkan gambar dalam sebuah lingkaran penuh. Jika anda pengguna aplikasi Blackberry Messenger di perangkat Android, tentu sudah terbiasa melihat tampilan profile picture dalam frame berbentuk lingkaran. Nah penggunaannya adalah
    <img src="gambar.jpg" class="img-circle"/>
  • img-thumbnail
    Untuk memberi sentuhan bingkai, anda bisa menggunakan class
    img-thumbnail
    dari Bootstrap. Tampilan gambar dengan class ini sangat sesuai untuk keperluan thumbnailing sesuai namanya. Penggunaan class ini pada tag img adalah
    <img src="gambar.jpg" class="img-thumbnail"/>

Tampilan yang akan dihasilkan untuk masing-masing class adalah seperti gambar berikut :

Penanganan Gambar di Bootstrap
Tampilan gambar hasil manipulasi class bootstrap




Catatan :
Anda tidak bisa menggunakan class
img-rounded
dan
img-circle
pada Internet Explorer 8 dan versi di bawahnya. Dua class bootstrap ini tidak bisa bekerja di browser bawaan Microsoft Windows tersebut, karena belum sepenuhnya mendukung property CSS
border-radius

Semoga bermanfaat, dan baca terus ayayank yah ! :)

Tutorial Bootstrap : Membuat Responsive Layout Dengan Bootstrap 3

Di tulisan sebelumnya, saya menulis tentang bagaimana membuat / meng-customize link menjadi tombol dengan bootstrap 3. Nah, di tulisan kali ini saya ingin share lagi tentang bagaimana membuat layout web khususnya responsive web design / layout.

Membuat Responsive Web Design Dengan Bootstrap 3

Nah, pertama kita bahas tentang responsive layout itu sendiri. Yaitu sebuah cara mendesain web agar mempunyai aksesibilitas yang lebih baik serta tampil optimal pada berbagai macam perangkat yang dimiliki oleh user. Responive layout sangat membantu dalam hal pengoptimalan website pada perangkat-perangkat berlayar kecil semisal smartphone maupun tablet. Tapi, dengan desain responsive kita juga tidak mengesampingkan tampilan di layar yang lebih besar seperti laptop atau PC.

Responsive Web Design Dengan Bootstrap
Ilustrasi Responsive Web Desain


Berikut ini adalah salah satu contoh koding membuat desain web responsive dengan bootstrap.

Contoh Web Responsive Dengan Bootstrap


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Desain Web Responsive Dengan Bootstrap 3</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
    <!-- Tampilan Nama Web -->
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
                <span class="sr-only">Navigasi</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Ayayank.com</a>
        </div>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="http://www.ayayank.com" target="_blank">Home</a></li>
                <li><a href="http://www.saranwisata.com" target="_blank">Sawi</a></li>
                <li><a href="http://www.ayayank.com/p/hubungi-ayayank.html" target="_blank">Kontak</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="container">
    <div class="jumbotron">
        <h1>Belajar Membuat Website</h1>
        <p>Internet adalah cara paling efektif untuk berbagi dan menyebarluaskan ilmu.  Di <a href="http://www.ayayank.com" target="_blank">ayayank.com</a> anda bisa menemukan artikel-artikel menarik seputar pemrograman dasar juga contoh-contoh pemrograman web dengan PHP, HTML, CSS, Javascript dan framework seperti Bootstrap</p>
        <p><a href="http://www.ayayank.com.com" target="_blank" class="btn btn-success btn-lg">Selengkapnya..</a></p>
    </div>
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-2">
            <h2>HTML</h2>
            <p>HTML adalah bahasa pemrograman dasar untuk membuat sebuah website.  HTML wajib dipelajari jika anda ingin belajar web, baik itu desain web ataupun pemrograman web secara menyeluruh</p>
            <p><a href="http://www.ayayank.com/" target="_blank" class="btn btn-success">Selengkapnya &raquo;</a></p>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-2">
            <h2>CSS</h2>
            <p>CSS adalah salah satu cara untuk meng-kostumasi tampilan web agar tak terkesan monoton sehingga menarik bagi pembaca dan pengunjung website kita. Sebagai seorang desainer web, CSS wajib dipelajari dan dikuasai.</p>
            <p><a href="http://www.ayayank.com" target="_blank" class="btn btn-success">Selengkapnya &raquo;</a></p>
        </div>
        <div class="clearfix visible-sm-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-2">
            <h2>Bootstrap</h2>
            <p>Bootstrap adalah sebuah framework siap pakai yang terdiri dari kumpulan styling CSS, fungsi Javascript, dan Jquery.  Anda dapat mendesain website dengan lebih terorganisir dan mudah menggunakan framework Bootstrap.  Bootstrap memberikan kemudahan desain, dengan upaya yang lebih sedikit karena memiliki banyak fungsi umum yang siap pakai untuk desain web anda.</p>
            <p><a href="http://www.ayayank.com/" target="_blank" class="btn btn-success">Seengkapnya &raquo;</a></p>
        </div>
        <div class="clearfix visible-md-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-2">
            <h2>Lain-lain</h2>
            <p>Temukan Pula banyak informasi bermanfaat lainnya di Ayayank.com, Anda juga dapat berbagi dan berpartisipasi dalam kolom komentar yang disediakan.</p>
            <p><a href="http://www.ayayan.com" target="_blank" class="btn btn-success">Selengkapnya &raquo;</a></p>
        </div>
        <div class="clearfix visible-sm-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-2">
            <h2>Contoh Program</h2>
            <p>Silakan pelajari contoh-contoh program yang dijelaskan dalam blog ini.  Anda tinggal memperhatikan dan mempraktekan agar kemampuan dalam pemrograman meningkat</p>
            <p><a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Selengkapnya &raquo;</a></p>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-2">
            <h2>Referensi</h2>
            <p>Semoga ayayank.com bisa menjadi referensi bagi kawan-kawan yang senang dengan pemrograman ataupun ingin belajar tentang web dan programming.</p>
            <p><a href="http://www.ayayank.com" target="_blank" class="btn btn-success">Kunjungi Ayayank &raquo;</a></p>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-sm-12">
            <footer>
                <p>© Ayayank.com </p>
            </footer>
        </div>
    </div>
</div>
</body>
</html>

Dan hasil tampilan yang akan diperoleh adalah sbb :

Membuat Responsive Web Desain Dengan Bootstrap 3
Tampilan di Desktop PC

Membuat Responsive Web Desain Dengan Bootstrap 3
Tampilan di Tablet

Membuat Responsive Web Desain Dengan Bootstrap 3
Tampilan di Smartphone

Nah, silakan teman-teman coba sendiri dengan mengotak-atik kode di atas. Dengan bantuan Bootstrap 3, kita bisa membuat tampilan website yang eye catchy, jadi pengunjung pun akan betah berlama-lama di website yang kita buat.

Selamat mencoba, semoga bermanfaat.

Baca Juga : Membuat Tombol Dengan Bootstrap

Tutorial Bootstrap : Membuat Tombol Dengan Bootstrap 3

Halo, ini adalah posting pertama saya tentang Bootstrap. Saya gak menulis dengan sistematis tutorial Bootstrap ini, jadi judulnya pun gak berurut seperti tutorial bootstrap di website lain. Oiya, ngomong-ngomong soal tutorial, sepertinya posting ini belum cocok disebut tutorial karena cuma berbagi ala kadarnya tentang bagaimana menggunakan Bootstrap untuk mempercantik tampilan website yang kita desain.

Kostumasi Tombol Di Bootstrap

Untuk membuat tombol yang keliatan menarik, Bootstrap punya class 'btn' yang siap meng-customize tampilan hyperlink biasa menjadi tombol yang enak dilihat.

Sebelum mencoba, pastikan bootstrap styling sheet sudah di-link dan bootstrap.js juga jquery-nya sudah di-include-kan dalam file html yang dibuat. Caranya?

Baca Juga : Membuat desain web responsive dengan Bootstrap

<head>
  <title>Judul dokumen</title>
  <link rel="stylesheet" type="text/css" href="bootstap/css/bootstrap.css">
 </head>
 <body>
  
 </body>
 <script type="text/javascript" src="bootstrap/js/jquery.js"></script>
 <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

Nah, untuk menampilkan tombol yang baik, kita cukup menambahkan class 'btn' pada hyperlink atau button yang dibuat. Setelah itu, tambahkan class 'btn-...' untuk memberikan tampilan spesifik pada tombol tersebut. Bootstrap mempunyai beberapa jenis tombol, berikut ini adalah class yang tersedia.

HasilKode HTML
Tutorial Tombol Bootstrap<a href="#" class="btn btn-default">Default</a>
Tutorial Tombol Bootstrap<a href="#" class="btn btn-primary">Primary</a>
Tutorial Tombol Bootstrap<a href="#" class="btn btn-info">Info</a>
Tutorial Tombol Bootstrap<a href="#" class="btn btn-success">Success</a>
Tutorial Tombol Bootstrap<a href="#" class="btn btn-warning">Warning</a>
Tutorial Tombol Bootstrap<a href="#" class="btn btn-danger">Danger</a>

Selain dipakai untuk meng-customize hyperlink (<a href=""></a>), class 'btn' bisa dipakai juga untuk jenis kode <input type="button"> atau <button>.

Baca juga : Aplikasi Cetak Kwitansi dengan PHP MySQL

Untuk mengatur ukuran tombol, kita bisa tambahkan class berikut :
  • btn-lg : untuk membuat tombol dengan ukuran besar
  • btn-sm : untuk membuat tombol dengan ukuran kecil
  • btn-xs : untuk membuat tombol dengan ukuran sangat kecil
  • Untuk membuat tombol ukuran sedang, cukup tanpa menambahkan salah satu dari 3 class di atas.

Kira, ini dulu untuk tutorial bootstrap (eh, sharing maksudnya bukan tutorial :D ). Di tulisan berikutnya, saya akan coba share lagi tentang element di bootstrap yang bisa kita pakai untuk customize desain web kita. Semoga bermanfaat.