Apakah yang membuat tampilan situs wap kita bisa tampil seperti web? Sebenarnya, Jawabannya sangat-sangatlah sederhana sekali, tidak perlu pengetahuan khusus untuk bisa merubah tampilan wap sitemu supaya tampil seperti web. Aku sendiri masih baru membuat situs, dan tadinyapun sama sekali tak punya dasar atau latbel khusus tentang web, alias betul-betul belajar dari nol.
Kuncinya adalah kembali kepada pengetahun mendasar mengenai situs itu sendiri. Jika diperhatikan, banyak wapper yg sebetulnya adalah “wapmaster”, dalam arti paham tentang pembuatan dan design situs namun seringkali melupakan hal yang mendasar padahal sangatlah penting ini. Sebagai perbandingan, pernahkah kita bertanya kenapa di antara penyedia situs wap, tampilannya bisa berbeda? Padahal misalnya, kita memasukan kode yang sama. Lalu kenapa tampilan di ponsel (wap) beda dengan tampilan di PC (web)? Kenapa bisa begitu?
Berdasarkan pengalamanku, ada dua faktor utama yang paling mempengaruhi perbedaan ini. Yaitu pertama, jenis dokumen HTML yang kita pakai baik itu html, xhtml dan lain-lainnya. Dan kedua, Cascading Stylesheet atau CSS yang kita gunakan.
Jenis Dokumen HTML
Jenis dokumen ini jika diibaratkan adalah seperti halnya jenis kain/ kertas yang kita pakai untuk melukis atau print. Meskipun bahan yang kita gunakan sama, cat ataupun tintanya, bukankah sudah pasti hasilnya akan beda jika kita melukis pada kain kanvas dan kertas karton atau bahkan kertas bekas dus mie??? Demikian pula halnya dengan halaman situs kita. Di sinilah sebenarnya perbedaan mendasar WAP dan WEB. Sekarang mari perhatikan dan bandingkan beberapa contoh jenis dokumen di bawah ini:
Jenis Dokumen WAP
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.1//EN” “http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd“> (jenis dokumen untuk XtGem)
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd“> (wzan)
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> (wen ru)
Jenis Dokumen WEB
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
Maka jika kamu ingin WAPmu dengan tampilan WEB maka tentunya kamu harus merubah jenis dokumennya.
Cascading Stylesheet
Apa jadinya situs kita tanpa css. Css merupakan pengaturan tampilan umum dan tata letak bagian-bagian pada halaman site kita. Untuk situs wap, CSS-nya cenderung sangat sederhana. Biasanya, hanya mengatur warna latar, ukuran dan jenis huruf, warna link, dan div styles. Adapun CSS untuk web lebih kompleks dengan adanya pengaturan untuk bagian (div) horizontal / vertical navigation, wrapper, collumn, sidebar, header / footer dan lain-lain. Inilah sebenarnya yang menyebabkan hasil tampilan situs kita lebih menarik seperti halnya website, walaupun situs kita sebenarnya wapsite. Maka jika kamu ingin tampilan sitemu spt web, gunakanlah CSS untuk web. Kamu bisa mencari dan mendownloadnya di templated.co.
Sebelum mulai membuat halaman, alangkah baiknya kamu mempelajari dulu bagian2 “id” atau pengenal dalam css itu, juga bagian2 vital dalam mengedit source. Tak perlu harus bingung, dan tak perlu pula mempelajari/ paham keseluruhan css itu. Kamu hanya perlu memahami bagian utamanya saja, misalkan bagian menu navigasi utama untuk bagian atas halaman (biasanya horizontal navigation), bagian post content untuk artikel atau info, kemudian bagian sidebar atau vertical navigation untuk menu download/ service kamu dan lain2nya. Setelah itu kamu bisa mulai membuat halaman webmu. Berikut langkah-langkah singkat untuk mulai menyusun halaman web site kamu:
- Buat file html/xhtml seperti biasa.
- Pada bagian head, ubahlah jenis dokumen wap kamu dengan jenis dokumen web, kamu bisa menyesuaikannya dengan CSS kamu.
- Gunakan CSS web yang sudah kamu download tadi, dengan mengupload kembali CSS itu dan gambarnya (jika ada) ke situsmu kemudian buat link stylesheet-nya.
- Pada bagian body, buatlah menu navigasi utama. Caranya, setelah kamu pahami CSS tadi, kamu perlu memasukan kode “id” untuk menu navigasi utama itu. Misalkan dalam CSS, menu navigasi utama adalah “hornav” atau horizontal navigation maka kodenya adalah <div id=“hornav”>
- Kemudian dilanjutkan dengan membuat link menu seperti biasa misal <ul> <li> <a href=”/”> Home</a></li> </ul>, dan seterusnya
- Setelah bagian menu utama selesai, maka dilanjutkan dengan membuat bagian lainnya, misalkan “post-content” untuk info situs ataupun artikel, adapun caranya sama seperti langkah sebelumnya.
- Demikian pula seterusnya sampai akhir, adapun bagian2nya disesuaikan kebutuhanmu. Tentunya kamupun memiliki selera sendiri untuk design situs sesukamu.
Selain cara di atas kamu jg bisa membuat design tampilan “default” bawaan asli CSS yg kamu download tadi. Caranya, buka file index.html copy source-nya (text) dan paste di editor situsmu. Selanjutnya hanya tinggal mengganti isinya dengan isi halaman situsmu, lihat contoh. Adapun sebagai langkah awal menerapkan tutorial ini bisa dilakukan secara offline, caranya dapat dibaca pada Trik Edit Situs Offline.Demikian tutorial singkat membuat tampilan wapsite ala website ini. Semoga bermanfaat dan selamat mencoba…
Sy mau buat wap tp ga bisa ada kwan2 yg bisa bantu sy?
Rajin bertanya saja, saya juga dulu gitu sebelum akhirnya serius ngeblog
Thanks gan . It’s Working 🙂
Bagus artikelnya.. padat dan berisi, semoga selau sehat, rejekinya tambah banyak dan sehat selalu.. salam sukses buat teman-teman semua..amiin
Terima kasih atas doanya, sukses juga untuk Anda sob 😉