Implementing Automatic Application Failover

Sumber : http://sqlserver-indo.org/blogs/suherman/archive/2011/06/18/implementing-automatic-application-failover.aspx

wow…. sudah lama gak ngeblog. udah kangen banget pingin bisa ngeblog lagi, namun karena kesibukan kantor jadinya baru sekarang saya bisa nulis lagi.
Tulisan kali ini adalah hasil eksperimen saya terhadap pertanyaan dari salahsatu member di milis SQLServer-indo mengenai apakah aplikasi Visual Basic 6 dapat beradaptasi dengan fitur Database mirroring yang ada di SQL Server 2005 keatas.
Makin terpancing lagi karena di kantor saya sudah menerapkan Database Mirroring, namun aplikasi di client masih menggunakan Visual Foxpro. Jadi Apakah aplikasi Visual Basic 6 dan Visual Foxpro dapat beradaptasi dengan fitur Database Mirroring di SQL Server 2005 keatas ?
Jawabannya adalah …… BISA!
So, ga perlu deh migrasi ke .NET. Project berikutnya aja deh kalo tim saya mau pake .NET
Langkah untuk membuat aplikasi VB6 anda dapat menjadi application failover adalah :

1. Pastikan SQL Server Browser Services di kedua server (principal dan Mirror) sudah berjalan.
2. pada sisi client sudah terinstal SQL Server Native Component yang dapat di didownload disini (untuk SQL Server 2008): X86 Package (sqlncli.msi) - 4549 KB
   X64 Package (sqlncli.msi) - 7963 KB
   IA64 Package (sqlncli.msi) - 11112 KB
   
3. Gunakan connectionstring seperti contoh berikut (code ini untuk di vb6):

   Public Con As ADODB.Connection

    Sub OpenSQLCOnnection()

       Const CLOSED As Integer = 0

           If Con.State = CLOSED Then

           constr = "Provider=SQLNCLI10;"

           constr = constr & "Integrated Security=SSPI;"

           constr = constr & "Initial Catalog=AdventureWorks;"

           constr = constr & "Data Source=Suherman-PC\SS2008R2;"

           constr = constr & "FailoverPartner=Suherman-PC\MIRRORSERVER;"

           constr = constr & "DataTypeCompatibility=80;"

           constr = constr & "Network=dbmssocn;"

           Con.Open constr

           End If

   End Sub

4. Selesai.

Yup, sesederhana itu aja. kita tinggal mengganti Provider untuk connectionstringnya dan menambah beberapa atribut di connectionstringnya.
Berikut ini saya sertakan juga sample application failover yg dibuat dari VB6 yang ddapat didownload disini. dan sample yang dibuat dengan VB.NET yang dapat didownload disini.
Semoga bermanfaat.

Memanfaatkan Virtualbox sebagai server development (Ubuntu LAMP + Samba Server) part 1

Sumber : http://foxyland.blogspot.com/2012/04/memanfaatkan-virtualbox-sebagai-server.html

Hi guys... Long time no see... :) Wow... hampir dua tahun saya gak post di blog ini. Lots of things happen, tapi itu untuk lain kali dah... Untuk sekarang, saya mau share bagaimana saya memanfaatkan Oracle Virtualbox untuk membantu saya saat membangun aplikasi. Mungkin ada yang bertanya; "Ngapain kok capek-capek harus menggunakan virtualbox? Install aja langsung XAMPP atau AppServ. Beres kan?" . Nah alasannya ini:

1. Melatih kita untuk ‘terbiasa’ dengan environment Linux, jadi kita bisa men-setup server Linux di production (berarti menghindari penggunaan keluarga Window$). Kalau aplikasi di-deploy dengan Linux, tentunya akan meniadakan biaya lisensi Windows. Berarti biaya yang lebih murah untuk client.
2.  Dengan LAMP Server, kita juga menginstall Apache dan PHP. Jadi bisa digunakan juga untuk belajar PHP di waktu luang.
3. Pasti pernah dengar keluhan, "Aplikasi saya bisa jalan di komputer saya dengan baik, tapi waktu diinstall di client kok gak jalan?” . Nah, dengan mesin virtual yang terpisah dari development box, saat development kita bisa lebih mensimulasi keadaan di production secara lebih riil (untuk yang gak tau apa itu production: yang dimaksud production adalah kondisi yang sebenarnya di client).
4. Masih melanjutkan point 3) di atas, kita bisa melakukan testing aplikasi kita dengan lebih baik. Kita bisa memberi beban kepada server, bisa mengurangi kecepatan network, atau bahkan bisa mensimulasi keadaan koneksi network terputus atau server mendadak mati ditengah-tengah aplikasi yang sedang berjalan.
5. Sebagian besar aplikasi yang saya buat menggunakan database MS-SQL Server sebagai back-end. Saya gak mau membebani komputer saya dengan service PHP atau MySQL atau PostgreSQL atau service-service lain yang tidak sedang saya gunakan. Dengan Virtualbox, kita bisa 'mematikan' server dan hanya menyalakan kalau diperlukan saja.
6. Saya juga akan memanfaatkan Samba Server sebagai pengganti File Server Windows. Jadi ini juga bisa digunakan sebagai file server pengganti Windows Server. Lumayan kan? Windows Server harga-nya sekitar Rp 7jt. Daripada untuk beli Windows Server, client pasti gak akan keberatan kalau mereka cuma bayar 1/4-nya saja kepada kita untuk support Linux Server-nya :)
7. "Kenapa Virtualbox? Kan lebih bagus VMWare?" Yup. Betul. Silahkan pakai VMWare kalau Anda mau --- tapi daripada Anda pakai VMWare versi pasar minggu, apa gak lebih baik pakai Oracle Virtualbox yang resmi (dan gratis)

Mssql Functions

sumber : http://id.php.net/manual/en/ref.mssql.php

Table of Contents

• mssql_bind — Adds a parameter to a stored procedure or a remote stored procedure
• mssql_close — Close MS SQL Server connection
• mssql_connect — Open MS SQL server connection
• mssql_data_seek — Moves internal row pointer
• mssql_execute — Executes a stored procedure on a MS SQL server database
• mssql_fetch_array — Fetch a result row as an associative array, a numeric array, or both
• mssql_fetch_assoc — Returns an associative array of the current row in the result
• mssql_fetch_batch — Returns the next batch of records
• mssql_fetch_field — Get field information
• mssql_fetch_object — Fetch row as object
• mssql_fetch_row — Get row as enumerated array
• mssql_field_length — Get the length of a field
• mssql_field_name — Get the name of a field
• mssql_field_seek — Seeks to the specified field offset
• mssql_field_type — Gets the type of a field
• mssql_free_result — Free result memory
• mssql_free_statement — Free statement memory
• mssql_get_last_message — Returns the last message from the server
• mssql_guid_string — Converts a 16 byte binary GUID to a string
• mssql_init — Initializes a stored procedure or a remote stored procedure
• mssql_min_error_severity — Sets the minimum error severity
• mssql_min_message_severity — Sets the minimum message severity
• mssql_next_result — Move the internal result pointer to the next result
• mssql_num_fields — Gets the number of fields in result
• mssql_num_rows — Gets the number of rows in result
• mssql_pconnect — Open persistent MS SQL connection
• mssql_query — Send MS SQL query
• mssql_result — Get result data
• mssql_rows_affected — Returns the number of records affected by the query
• mssql_select_db — Select MS SQL database

Teknik Paging PHP dari rosihanari.net

Paging merupakan teknik menampilkan data dengan cara membaginya ke beberapa halaman. Teknik ini diberikan untuk mengurangi scrolling window apabila data yang disajikan terlalu banyak, sehingga akan menimbulkan kejemuan orang yang melihat dan juga akan menghasilkan page load time yang besar karena ukuran filenya besar (apabila data disajikan dalam satu halaman saja).
Untuk keperluan navigasi data biasanya disajikan dengan link berupa nomor halaman atau kadang berbentuk Previous dan Next.
Pada tutorial ini akan dipaparkan bagaimana ide membuat advance paging ini dilakukan. Advance paging adalah paging yang navigasinya berbentuk
1 2 3 4 … 20 Next >>
Contoh tampilan di atas diasumsikan terdapat 20 halaman paging dan halaman yang sedang aktif adalah halaman 1. Bila yang aktif halaman 10, maka tampilan navigasinya adalah:
<< Prev 1 ... 7 8 9 10 11 12 13 … 20 Next >>
Sedangkan bila yang aktif adalah halaman terakhir (20) maka tampilan navigasinya adalah
<< Prev 1 .. 17 18 19 20
Dalam contoh ini kasus advance paging ini akan diterapkan pada data guestbook atau buku tamu. Istilah ‘advance paging’ ini adalah istilah saya saja sih
Mau tau bagaimana ide dan cara membuatnya? simak baik-baik artikel ini. Artikel ini merupakan request dari mas Sadeli (salah satu member saya)

Koneksi PHP dan SQL Server 2000 Bagian II

Sumber : http://lemahhegar.blogspot.com/2010/07/mengakses-microsoft-sql-server-2000_28.html

D. Membuat Koneksi ke MS SQL Server 2000 dengan PHP

Bagian ini akan membahas mengenai penulisan script untuk mendapatkan acces ke MS SQL server dengan metode ODBC. Fungsi yang digunakan untuk mengakses MS SQL server dengan metode tersebut adalah odbc_connect(dsn, nama user, password), script ini memerintahkan untuk melakukan koneksi terhadap sumber data yang telah kita buat DSN systemnya (nama sumber data yang dapat diakses oleh siapa saja yang memiliki akses terhadap mesin), dengan user name dan password yang telah disimpan dalam database MS SQL Server, mengenai DSN dan bagaimana membuat System DSN telah dibahas dengan cukup panjang pada bagian sebelumnya, sedangkan mengenai cara membuat user name dan password pada MS SQL server 2000 akan dijelaskan secara ringkas pada bagian ini, langkah yang dilakukan adalah sebagai berikut:

Koneksi PHP dan SQL Server 2000 Bagian I

Lihat Sumber berikut
http://lemahhegar.blogspot.com/2010/07/mengakses-microsoft-sql-server-2000.html

A. Pengenalan
a. Microsoft SQL Server 2000

Berdasarkan penjelasan yang ditemukan pada Wikipedia, Microsoft SQL Server adalah sebuah sistem manajemen basis data relasional (RDBMS) yang dikembangkan oleh Microsoft, bahasa query utamanya adalah Transact-SQL yang merupakan implementasi dari SQL standar ANSI/ISO yang digunakan oleh Microsoft dan Sybase. Pada umumnya SQL server digunakan oleh perusahaan yang memiliki basis data dalam skala kecil dan menengah, namun kemudian penggunaan SQL server berkembang sehingga digunakan oleh perusahaan yang memiliki basis data dalam skala besar. Microsoft SQL server dapat melakukan komunikasi data melalui jaringan dengan menggunakan protokol TDS (Tabular Data Stream), selain itu Microsoft SQL server juga mendukung penggunaan ODBC (Open Database Connectivity), dan juga memiliki driver JDBC untuk bahasa pemrograman java. Fitur lain dari SQL server ini adalah kemampuannya untuk membuat basis data mirroring dan clustering

Tips Membuat Script PHP Pengolah Password dengan MD5

Sumber : http://blog.rosihanari.net/tips-membuat-script-php-pengolah-password-dengan-md5/
Setiap password pengguna aplikasi hendaknya dienkripsi untuk keperluan faktor keamanan. Mengapa password harus dienkripsi? atau apa sih enkripsi itu? OK… enkripsi adalah teknik penyandian pesan, yang semula pesan tersebut dapat dibaca dan bermakna, setelah dienkripsi menjadi tidak terbaca dan tidak bermakna. Lantas… mengapa password harus dienkripsi? Pertanyaan tersebut saya balik, bagaimana jika password tidak dienkripsi? Apabila password tidak dienkripsi, maka dapat dengan mudah dibaca, dan digunakan oleh orang lain yang tidak berhak untuk masuk ke dalam sistem atau aplikasi.
Dalam PHP, tentu kita tidak asing dengan perintah atau function md5(). Function ini sering digunakan para programmer untuk mengenkripsi password sebelum hasil enkripsi tersebut disimpan dalam database sistem, ketika registrasi user baru. Hasil enkripsi md5() berupa suatu string acak dengan panjang 32 karakter (256 bit). Sudah amankah penggunaan md5()? Artikel ini akan membahasnya, serta memberikan tips bagaimana cara membuat script PHP yang baik untuk mengolah password.

Cek Validasi Tanggal di PHP dengan fungsi checkdate()

Sumber : http://blog.rosihanari.net/teknik-memvalidasi-input-tanggal-dengan-php/
Berikut ini saya jelaskan penggunaan  function checkdate() melalui contoh yang saya berikan.

Sebelumnya, perlu kita bahas terlebih dahulu cara penggunaan function checkdate() ini. Function ini akan menghasilkan nilai TRUE jika tanggal yang kita ingin cek adalah valid, serta FALSE jika tidak valid.
Function ini dalam penggunaannya memerlukan 3 buah parameter

 1.checkdate(m, d, y);

dengan m adalah bulan, d adalah tanggal dan y adalah tahun. Ketiga parameter tersebut bisa dalam bentuk string maupun integer.
Misalkan kita ingin mengecek apakah tanggal 12/02/2008 itu valid atau tidak, maka kita gunakan perintah

1.

2.$tgl = 12;

3.$bln = 2;

4.$thn = 2008;

5.if (checkdate($bln, $tgl, $thn)) echo "Tanggal Valid";

6.else echo "Tanggal Tidak Valid";

7.?>

Contoh di atas sebagai gambaran bila kita menggunakan tanggalnya sudah terpisah dan dinyatakan dalam bilangan integer. Lantas bagaimana bila tanggal yang kita peroleh dalam format string? misalnya “12/02/2008″?
Ya gak ada masalah.. Konsepnya adalah kita pecah terlebih dahulu dengan menggunakan explode(), lalu hasil pecahannya yang terdiri dari tanggal, bulan dan tahun ini barulah diletakkan pada parameter yang bersesuaian.
Ini dia contohnya

1.

2.$tgl = "12/02/2008";

3.$pecah = explode("/", $tgl);

4.if (checkdate($pecah[1], $pecah[0], $pecah[2])) echo "Tanggal Valid";

5.else echo "Tanggal Tidak Valid";

6.?>

Fungsi php simpan dan ambil tanggal/date pada mysql

Sumber : http://www.nusansifor.com/2009/11/fungsi-php-simpan-dan-ambil-tanggaldate-pada-mysql/comment-page-1/#comment-54237

Berikut salah satu fungsi simpel yg sering digunakan untuk mengconvert guna untuk menyimpan ke mysql dan kebalikkannya, yaitu untuk menampilkan tanggal/date dengan format yg kita inginkan, pada fungsi ini yang kita inginkan adalah dd/mm/yyyy (tanggal/bulan/tahun).

// FUNGSI DATE CONVERT
function jin_date_sql($date){
 $exp = explode('/',$date);
 if(count($exp) == 3) {
  $date = $exp[2].'-'.$exp[1].'-'.$exp[0];
 }
 return $date;
}
 
function jin_date_str($date){
 $exp = explode('-',$date);
 if(count($exp) == 3) {
  $date = $exp[2].'/'.$exp[1].'/'.$exp[0];
 }
 return $date;
}

Cara penggunaannya adalah sbb.:
Convert dari tanggal DD/MM/YYYY ke YYYY-MM-DD untuk insert ke database mysql

$data_tanggal_form = "23/02/2009"; // DD/MM/YYYY
$data_tanggal_mysql = jin_date_sql($data_tanggal_form);  

// hasilnya: 2009-01-01 = YYYY-MM-DD

Dan kebalikannya, yaitu ingin menampilkan.
Convert dari tanggal YYYY-MM-DD ke DD/MM/YYYY untuk tampil ambil dari database mysql

$data_tanggal_db = "2009-01-01"; // YYYY-MM-DD
$data_tanggal_tampil = jin_date_str($data_tanggal_db);  

// hasilnya: 23/02/2009 = DD/MM/YYYY

Responsive Webdesign, Apa dan Bagaimana ?

Sumber : http://www.ariona.net/responsive-webdesign-apa-dan-bagaimana/
Saat ini, internet sudah dapat diakses oleh berbagai macam perangkat, mulai dari Komputer sampai dengan Smartphone. Dan yang menjadi permasalahan adalah semua perangkat tersebut memiliki layar dengan resolusi yang berbeda-beda, sehingga jika situs yang kita buat dibuka di dalam handphone dengan layar yang kecil, maka konten yang ditampilkanpun menjadi rusak, atau jika bisa ditampilkan secara penuh atau mungkin akan direpotkan dengan aktifitas zoom-in dan zoom-out untuk membaca kontent.
Disinilah Responsive webdesign berperan. Webdesign yang responsive akan langsung beradaptasi dengan ukuran layar device, sehingga konten yang ditampilkan tidak rusak atau tidak perlu lagi zoom-in dan zoom-out. Dan pada tutorial inilah saya akan membahas bagaimana cara membuat responsive web design tersebut dengan menggunakan metode CSS media queries.
Jika masih bingung apa yang sedang saya bicarakan, silahkan tengok demonstrasi berikut, lalu resize browser anda secara horizontal. Perhatikan bahwa konten juga ikut beradaptasi sesuai dengan ukuran browser.
Demonstrasi

Ketika browser diresize dengan ukuran lebar 768px, Sidebar berpindah lokasi menjadi di bawah. selanjutnya ketika browser diresize kembali ke ukuran 600px, List menu berubah menjadi Combo Menu. Menarik bukan jika desain web seperti itu ?.

HTML

Pertama-tama kita buat markup untuk demonstrasi tutorial ini, markup adalah layout web standar yakni header, navigation, content, sidebar dan footer.

 lang="en-US">

 

id="wrapper">

id="header">

href="http://www.ariona.net" title="">Responsive Webdesign Demonstration

id="navigation">

class="menu">
• href="">Home
• href="">Blog
• href="">Arsip
• href="">About
• href="">Contact

value="Home">Home value="Blog">Blog value="Arsip">Arsip value="About">About value="Contact">Contact

id="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

id="sidebar"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod quis nostrud exercitation ullamco laboris nisi ut tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

class="clear">

id="footer"> copyright © 2011 by href="http://www.ariona.net" rel="dofollow">ariona.net

class="clear">

Perhatikan bahwa pada navigation, selain saya menuliskan Unordered list untuk menu, saya juga menyiapkan combobox untuk menu.

CSS

Selanjutnya kita beri style pada markup yang telah kita buat, untuk style berikut saya yakin anda sudah pada jago.

*{
 margin:0;padding:0;
}
body{
 background:#F9F4EB;
 font-family: georgia;
}
p{padding:20px;line-height:30px;}
a{color:black;text-decoration:none}
#wrapper{
 width:960px;
 margin:auto;
 background: white;
}
.clear{clear:both;}
#header{
 background:#9acf11;
 padding:20px;
}

#navigation ul{list-style:none;background:#62830a;overflow:hidden;}
#navigation ul li{float:left;padding:10px;border-right:1px solid #384b06;}
#navigation select{
 padding:10px;width:100%;
 display:none;
 background:#62830a
}
#content {
 float:left;
 width:600px;
}

#sidebar{float:left;width:360px;}

#footer{
 background:#62830a;
}

Untuk menu yang menggunakan combobox, saya hide terlebih dahulu, karena kita akan memunculkannya pada resolusi 600px kebawah sebagai pengganti menu list.

Let’s Make it Responsive

Tahap yang paling utama dari tutorial ini adalah membuat layout yang kita buat menjadi responsive. Seperti yang saya katakan tadi, bahwa kita akan menggunakan CSS media queries untuk membuat layout kita menjadi responsive. Contoh penggunaannya seperti berikut

@media screen and (max-width:768px){
 /* Masukkan style yang akan dirubah */
}

Jika saya translate ke bahasa Indonesia , kira-kira menjadi seperti berikut :
“Jika website dibuka dengan perangkat layar dan ukuran maksimal layar adalah 768px maka gunakan style berikut”
Maksud screen adalah website yang dibuka menggunakan layar baik itu monitor atau layar handphone, kita juga bisa membuat style untuk printer, jadi medianya print.
Cukup penjelasan singkatnya, kita lanjutkan ke praktek. Seperti yang saya demonstrasikan pertama kita buat style untuk ukuran layar 768px ke bawah. Jadi dalam file CSS tambahkan kode berikut :

@media screen and (max-width:768px){
 
}

yang akan kita rubah adalah ukuran #wrapper, #content dan #sidebar, jadi tambahkan kode berikut di dalam Media Queries yang kita buat barusan.

@media screen and (max-width:768px){
 #wrapper{
  width:90%;
 }
 #content{
  width:100%;
  float:none;
 }
 #sidebar{
  width:100%;
  float:none;
  border-top:1px solid #384b06;
 }
}

Jika kita menggunakan persentasi untuk ukuran, maka layout akan otomatis berubah mengikuti ukuran layar. Selanjutnya kita override float:left pada #content dan #sidebar menjadi none, dan kita tambahkan border atas pada #sidebar, sebagai pemisah antara #content dan #sidebar.
Selanjutnya kita tambahkan media querie baru untuk ukuran layar 600px ke bawah. Dalam query ini kita akan menyembunyikan Menu List dan menampilkan menu combo.

@media screen and (max-width:600px){
 #navigation ul{display:none;}                           
 #navigation select{display:block;}
}

Yep, projek selesai, silahkan save dan buka pada browser. Coba untuk meresize browser secara horizontal. Sebagai contoh kasus lainnya Saya juga membuat web ini responsive, namun hanya untuk ukuran 800px.

Kesimpulan

Pada dasarnya kita bisa menggunakan persentasi untuk membuat web menjadi responsive, namun cara ini sangat sulit karena kita harus menentukan setiap ukuran element dalam persentasi. Untuk itu cara Media Query lah yang termudah untuk membuat website menjadi responsive dan Jangan Lupa untuk meninggalkan komentar .

Sumber Referensi

Sebagai sumber referensi lainnya anda dapat membuka situs-situs berikut. disana dibahas bagaimana membuat video, gambar, table menjadi responsive.

• catswhocode.com : Create an adaptable website layout with CSS3 media queries
• unstoppablerobotninja.com : Fluid images
• webdesignerwall.com : CSS3: Elastic videos
• css-tricks.com : Responsive Data Tables

Update

Tambahkan tag berikut di dalam header supaya bisa berjalan dengan baik di perangkat Android atau iOS. Karena jika tidak kedua device tersebut biasanya menampilkan versi desktop bukan versi mobile.

 name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >

Peralatan Desain Web Responsif

Sumber : http://modification-blog.blogspot.com/2012/04/peralatan-desain-web-responsif.html

Sekarang kita sudah memahami tentang Unsur Dasar Desain Web Responsif, dengan harapan memahami konsep dasar yang harus dilakukan ketika akan memulai belajar lebih jauh mengenai desain web yang responsif. Berkembangnya perangkat keras untuk mengakses situs membuat para desainer harus mencari solusi terbaik agar halaman-halaman situs mampu dinikmati oleh para pengunjung tanpa kendala yang berarti. Joshua Johnson mengatakan bahwa "Apple mendorong industri teknologi maju dengan meningkatkan pixel density (kepadatan pixel) pada layar iPhone dan iPad. Hal ini bagus dari sudut pandang pengguna, tetapi sebagai web designer atau web developer secara harfiah hal ini merupakan ancaman dan pemaksaan agar mengubah cara Anda membangun website." Pernyataan Joshua tersebut menggambarkan bahwa para web desainer cukup kerepotan dalam menciptakan website yang mampu beradaptasi dengan perangkat keras yang ada dipasaran. Namun ternyata hal tersebut bukanlah rintangan berarti, ini justru membuat para web desainer menjadi lebih kreatif lagi menciptakan peralatan (tools) untuk membangun desain web yang lebih mudah dan lebih responsif.

Untuk memudahkah pemahaman tentang peralatan yang akan digunakan, maka dibawah ini peralatan desain web akan disederhanakan dengan pengkategorian yang lebih sempit. Selain itu daftar peralatan desain web responsif yang akan dibahas, baru sebatas peralatan yang populer digunakan. Dibawah ini daftar peralatan yang kemudian dikategorikan menjadi:

Responsif Tipografi (Responsive Typography)

Ini merupakan bagian yang harus diperhatikan untuk mendesain web yang responsif. Responsif Tipografi adalah cara untuk mengatur penampilan huruf, dari mulai warna, posisi, ukuran, dan hal-hal lain yang berhubungan dengan huruf agar bisa menyesuaikan dengan lebar layar secara otomatis.

1. Lettering.js

Plugin jQuery ini sangat populer di kalangan web desainer karena kemudahan dalam penggunaan dan fungsi yang beragam. Lettering.js seakan menjadi plugin wajib bagi siapa saja yang berencana membuat desain web responsif karena kemampuannya yang komplek dalam mengatur posisi huruf. Beberapa kemampuan Lettering.js diantaranya; mengatur spasi antar huruf (kerning), mengatur spasi dan ukuran huruf yang komplek, kemudahan pengelolaan kode, dan kompleksitas posisi huruf (down-to-the-letter) sehingga mampu menghasilkan pengalaman membaca yang optimal dalam ruang visual yang beragam. Lettering.js di gunakan karena CSS belum mampu melakukan kompleksitas pengaturan huruf. Seorang Paul Irish saja sampai berkomentar "Hebat. Dunia sangat membutuhkannya - sebuah plugin jQuery yang berbeda dari yang lainnya".

2. FitText.js

Ini Plugin jQuery berikutnya yang juga sangat populer. Jika Lettering.js berhubungan dengan kompleksitas posisi huruf, maka FitText.js berhubungan dengan kemampuan pengaturan ukuran huruf secara otomatis pada berbagai ukuran layar. FitText.js mampu membuat huruf menjadi sangat fleksibel dalam berbagai visualisasi viewport, namun dengan penerapan yang sangat sederhana. FitText.js menciptakan visualisasi huruf yang benar-benar fluid dan responsif. Plugin yang tidak boleh anda lewatkan.

3. Font.js

Plugin jQuery yang satu ini termasuk masih baru sehingga kurang begitu populer. Font.js digunakan untuk memilih bentuk huruf yang akan digunakan pada sebuah situs. Ini salah satu plugin yang mungkin lebih cocok disebut sebagai perpustakaan huruf untuk pemilihan jenis huruf yang dibutuhkan. Font.js dapat digunakan sebagai remote untuk mengambil jenis huruf dari system atau dari URL yang telah ditentukan.

Gambar Fleksibel (Flexible Images)

Christopher Schmitt pada artikelnya "Adaptive Images in Responsive Web Design" menuliskan, gambar yang dikirimkan ke perangkat dan tersajikan pada halaman web harus memperhatikan beberapa faktor berikut:

1. Resolusi Layar
2. Bandwidth
3. Lebar Jendela Browser

Masalahnya adalah cara menentukan gambar yang terbaik untuk dikirimkan ke browser, hal ini membuat faktor menjadi independen satu sama lain. Ketika sebuah halaman situs mengandung elemen gambar maka gambar tersebut harus bisa menyesuaikan dengan lebar browser, jika ukuran file gambar tersebut dipaksakan dengan rasio skala penampilan saja maka ini akan memperlambat pemanggilan halaman. Tentunya juga akan menurunkan kecepatan koneksi internet, sedangkan perangkat jenis mobile phone cenderung memiliki kecepatan koneksi yang lebih lambat dari pada komputer biasa, hal ini menambah beban load halaman yang menjadi semakin lambat. Jika demikian adanya, yang harus kita pikirkan bersama, Apakah anda akan memberikan resolusi rendah demi kemudahan versi mobile? Atau apakah anda membiarkan saja browser memanggilnya dengan versi sebenarnya, tetapi dengan waktu download yang lebih lama? Terlepas dari permasalah diatas, sampai dengan artikel ini dibuat, para web desainer memberikan jalan keluar dengan metode:

1. Memaksakan gambar dalam ukurannya sebenarnya namun dengan penampilan responsive yang mampu menyesuaikan dengan lebar browser. Cara ini berarti bermain pada skala rasio penampilan gambar sesuai ukuran browser.
2. Dengan teknik DOM, yaitu penyediaan gambar dengan berbagai ukuran untuk berbagai perangkat pada server situs yang kemudian gambar akan ditampilkan sesuai dengan viewport (ukuran browser).

1. Adaptive Images

Plugin yang ditulis dengan bahasa PHP ini akan secara otomatis membuat berbagai ukuran gambar dan cache dan kemudian menampilkannya sesuai dengan ukuran browser. Tidak diperlukan perubahan mark-up. Hal ini dimaksudkan untuk kemudahan pada penggunaan situs dengan desain yang responsif dan untuk digabungkan dengan teknik gambar fluid.

2. imgSizer.js

Sebelum menggunakan imgSizer.js lebih baik anda membaca dulu rincian yang di sampaikan pembuatnya, Ethan Marcotte tentang peran script ini dalam penerapannya pada desain web responsif. Pada dasarnya, script ini dirancang untuk memastikan bahwa gambar mampu di render dengan baik pada Microsoft Windows. Langkah Marcotte ini cukup berhasil untuk me-render gambar agar ukurannya turun secara otomatis sesuai dengan browser yang digunakan.

3. Spacer PNG

Ini adalah cara sederhana untuk menampilkan gambar yang responsive. Menggunakan teknik media query dalam mendeteksi ukuran browser dan mengganti ukuran gambar yang sesuai dengan browser. Gambar yang akan ditampilkan justru diganti dengan blank PNG atau blank GIF transparan yang ukurannya sesuai dengan ukuran gambar yang akan ditampilkan. Sedangkan gambar yang ditampilkan justru dijadikan background dengan penyajian background-size: contain.

Responsif Web Layout (Responsive Web Page Layouts)

Inilah bagian inti yang menjadi pembahasan hangat sekarang ini. Inti dari desain web responsif adalah kemampuan tata letak yang fluid dan fleksibel serta mampu menyesuaikan diri dengan ukuran layar dan fitur dari browser pengguna. Dibawah ini adalah beberapa sumber daya yang terkait dengan tata letak dan populer digunakan dalam mendesain web responsif.

1. Fluid 960 Grid System

Fluid 960 Grid System pada dasarnya adalah pengembangan dari 960 Grid System yang dibuat oleh Nathan Smith. Perubahan besar dilakukan pada kemampuan fluid pada berbagai ukuran layar. Berbeda dengan 960 Grid Sytem yang bersifat tetap (fixed), sedangkan Fluid 960 Grid System bersifat fleksibel terhadap ukuran browser. Grid System ini merupakan yang paling banyak digunakan oleh para web desainer saat ini. Jika anda terbiasa dengan 960 Grid System maka begitu pula penggunaannya pada Fluid 960 Grid System. Mengenai bagaimana cara menggunakan Fluid 960 Grid System, Deny E. Wicahyo memaparkan dengan jelas dalam salah satu artikelnya "Responsive Layout dengan Grid System"

2. Gridless

Jika anda menggunakan Fluid 960 Grid System kemudian merasa bahwa tata letak halaman terlalu sempit maka Gridless adalah solusi untuk mengatasi area yang terlalu sempit. Gridless dibuat lebih ramping dibangdingkan dengan sistem grid yang lainnya dan dibangun dengan dasar desain responsife. Kode Gridless didasarkan pada filosofi yang telah banyak dibahas pada diskusi-diskusi "metode mobile utama (mobile first)" untuk pembuatan website yang mampu digunakan pada berbagai perangkat.

3. Skeleton

Sistem Grid yang satu ini juga sedang hangat-hangatnya dibahas. Silahkan anda eksplorasi pada sistem grid yang satu ini dan temukan kehebatannya dibandingkan sistem grid yang lainnya.

4. Semantic Grid System

Sistem Grid yang satu ini menitik beratkan pada semantic dan terintegrasi dengan beberapa bahasa pemrograman CSS seperti LESS, SCSS atau Stylus. Mereka mengklaim dirinya mampu memberiksa cita rasa baru pada saat mendesain web responsif.

Pengujian Web Layout (Testing and Cross-Browser)

Setelah anda memahami dan mampu membuat desain web responsive maka waktunya untuk memeriksa, apakah desain yang sudah anda buat benar-benar dapat bekerja pada berbagai ukuran browser dan perangkat, atau justru gagal. Silahkan gunakan beberapa peralatan tester dan cross-browser dibawah ini untuk meyakinkan diri bahwa kita telah berhasil membuat desain web yang responsif.

1. Matt Kersley Responsive Tester
2. Web Developer
3. iPadPeek
4. iPhone Web Simulator
5. Opera Mini Simulator
6. Adobe Device Central CS5.5

Kesimpulan

Akhirnya, tidak setiap proyek desain web harus melibatkan semua peralatan dan sumber daya yang telah disebutkan diatas. Namun kembali lagi dengan menganalisa proyek desain web yang sedang anda hadapi. Artikel ini disusun hanya untuk memberikan gambaran dan kemudahan dalam mencapai tujuan desain web yang responsif dan sesuai dengan apa yang diinginkan. Dalam prakteknya, kadang kita membutuhkan fitur lain untuk mempercantik dan memperbaiki tampilan akhir dari desain web yang sedang kita buat dan yang sesuai dengan keinginan orang yang membutuhkan desain kita. Semua ini kembali pada kemampuan anda dalam memahami resource yang tersedia, imajinasi dalam membuat desain, dan ide yang merupakan dasar dari rancang bangun desain web yang responsif. Selamat bekerja...

Responsive Design, Solusi Desain Web Yang Fleksibel

Sumber : http://kangtanto.com/web-2/responsive-design-solusi-desain-web-yang-fleksibel

Saat ini masih sering kita temui berbagai website yang menggunakan ukuran lebar halaman yang tetap, misalnya 960 pixel, dengan harapan bahwa semua pengguna yang mengakses website tersebut akan mendapatkan tampilan yang sama dan pengalaman yang sama saat berinteraksi dengan website terkait. Ukuran ini memang tidak terlalu lebar untuk layar laptop dan pengguna dengan layar yang memiliki resolusi besar akan mendapatkan margin yang cukup lebar di kanan kiri website.

Akan tetapi sekarang ada Smartphone. Di indonesia pengguna Smartphone kian meningkat baik itu berbasis android ataupun menggunakan produk Apple yakni iPhone. Seperti beberapa data yang sempat dirillis, pengguna internet di Indonesia yang menggunakan perangkat mobile dalam melakukan browsing di internet telah meningkat tajam. Belum lagi ditunjang semakin meningkatnya pengguna tablet dimana ukuran layarnya lebih besar dari smartphone dan lebih kecil dibandingkan laptop.

sebelum kita bahas lebih lanjut, mari kita lihat gambar dibawah ini yang menjelaskan tentang berbagai ukuran resolusi layar yang digunakan diberbagai perangkat saat ini.

Beberapa ukuran layar yang ada (sumber gambar: http://line25.com)

Pengalaman yang berbeda akan dirasakan para pengguna smartphone saat melakukan akses ke website dimana website tersebut menerapkan fixed width, misalnya 960 pixel. Maka pengguna smartphone akan perlu melakukan zoom in zoom out untuk menampilkan atau membaca tulisan yang ada di website tersebut. Belum lagi seringkali adanya salah pencet link dikarenakan terlalu kecilnya tulisan.

Untunglah sekarang telah ada solusi untuk menangani berbagai ukuran layar yang berbeda tersebut. Responsive Design, adalah salah satu istilah dari sekian istilah tentang konsep tampilan web yang akan menyesuaikan dengan besarnya viewport(luasan area pada browser untuk menampilkan website) yang digunakan oleh pengguna saat mengakses sebuah website. Teknik ini didukung teknologi terbaru yakni HTML5 dan CSS3. Serunya teknik ini dapat diimplementasikan tanpa harus berbasis server atau backend solutions.

Pada gambar di bawah ini dapat kita lihat salah satu website yang menggunakan teknik responsive design dan ditampilkan dalam berbagai ukuran.

contoh tampilan responsive design (sumber gambar: http://www.white-fire.co.uk)

Definisi Responsive Design
Secara sekilas, teknik ini cukup sederhana, apabila anda menguasai HTML dan CSS, maka anda bisa menerapkan teknik Responsive Design. Karena sebenarnya yang dilakukan adalah CSS mengecek ukuran area browser, kemudian akan menerapkan style CSS yang sesuai dengan ukuran tersebut. Jadi tidak memerlukan kode pemrograman yang script based seperti PHP, ASP atau lainnya. Teknik ini murni urusan si UX designer atau front end designer.

Istilah Responsive web design awalnya dicetuskan oleh Ethan Marcotte dalam sebuah artikelnya di ListApart(http://www.alistapart.com/articles/responsive-web-design/). Ia mengulas tiga teknik yang telah ada yakni Flexible grid layout, flexible images, dan media and media queries ke dalam satu pendekatan dan menamakannya Responsive Design. Beberapa istilah yang digunakan untuk mengacu hal yang sama antara lain fluid design, elastic layout, rubber layout, liquid design, adaptive layout, cross-device design, dan flexible design.

Marcotte dan beberapa ahli lainnya berargumen bahwa metodologi responsive yang sebenarnya adalah tidak hanya cukup melakukan perubahan layout sesuai dengan ukuran browser yang mengaksesnya, akan tetapi melakukan perubahan total secara keseluruhan terhadap pendekatan yang kita pakai saat mendesain sebuah web. Daripada memulai desain pada ukuran layar desktop yang fixed atau tetap dan kemudian mengecilkannya dan mengatur isinya guna keperluan ukuran yang lebih kecil, maka sebaiknya desain dilakukan pada ukuran viewport yang terkecil terlebih dahulu dan dilanjutkan pada ukuran viewport yang lebih besar.

Viewport atau ukuran layar
Penting untuk diketahui bahwa viewport dan ukuran layar atau screen size merupakan dua istilah yang berbeda. Viewport merupakan area content pada browser, diluar toolbars, tab, address box atau lainnya pada browser. Lebih sederhananya lagi adalah ukuran atau luasan dimana sebuah website ditampilkan pada browser. Sedangkan  screen size mengacu pada ukuran layar secara fisik.

Mengapa harus HTML5 dan CSS3?
HTML5 menawarkan kelebihan yang luar biasa dibandingkan generasi sebelumnya yakni HTML4 dan element yang digunakan pada HTML5 lebih memiliki arti atau gampang kita pahami saat kita membaca atau menuliskannya. CSS3 memiliki salah satu fitur yakni media queries yang merupakan salah satu fitur utama untuk responsive design dan tentunya didukung fitur-fitur lain untuk menghasilkan web yang fleksibel. Beberapa fitur CSS3 yang lain misalnya gradient, shadows, animasi dan transformasi.

Galeri Responsive design
Sebelum kita membahas secara lebih detail tentang responsive design, mari kita lihat beberapa website yang telah menerapkannya. Siapa tahu bisa menjadi inspirasi bagi anda. Anda bisa langsung mencoba mengaksesnya melalui berbagai perangkat yang anda miliki. Akan tetapi apabila anda hanya menggunakan komputer atau laptop, cobalah saat selesai halaman web di load, silahkan secara perlahan lebar browser anda kecilkan. Bisa anda lakukan dengan klik dan drag secara perlahan ke arah kiri pada batas tampilan sebelah kanan browser anda. Anda akan melihat perubahan tampilan pada website-website tersebut.

Cognition

Teixido

Beberapa contoh lainnya dapat dilihat disini http://kangtanto.com/web-2/top-ten-examples-of-website-using-css3-media-queries