WAP site Tampilan WEB site
Sun, Sept 06 2009 04:35 pm
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 betul2 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 yg 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 page yang kita pakai baik itu html, xhtml dan lain-lainnya. Dan kedua, Cascading Stylesheet atau CSS yang kita gunakan.
Jenis Dokumen
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.
Sekarang mari perhatikan dan bandingkan beberapa contoh jenis dokumen di bawah ini:
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)
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 sini.
Sebelum mulai membuat halaman, alangkah baiknya kamu mempelajari dulu bagian2 "id" atau pengenal dalam css itu. 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:
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 yg 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 page yang kita pakai baik itu html, xhtml dan lain-lainnya. Dan kedua, Cascading Stylesheet atau CSS yang kita gunakan.
Jenis Dokumen
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.
Sekarang mari perhatikan dan bandingkan beberapa contoh jenis dokumen di bawah ini:
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)
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 sini.
Sebelum mulai membuat halaman, alangkah baiknya kamu mempelajari dulu bagian2 "id" atau pengenal dalam css itu. 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.
