Home Profile Sitemap Contact Us
Join KS Page Follow KS Page Read KS RSS Mobile Version
Home » Blog » Web Design » Membangun Web Mobile Berbasis PHP : Part III - The Structures

Membangun Web Mobile Berbasis PHP : Part III - The Structures

Post: Sabtu, 17 September 2011 - 22:11:46 WIB - In: Web Design - Dilihat: 3.822 kali

4 bintang comment 1 suka 168 tidak suka 134increase font decrease font share via addthis
Membangun Web Mobile Berbasis PHP : Part III - The Structures

Setelah kemarin kita membahas Membangun Web Mobile Berbasis PHP : Part II - The PHP Mobile Script dan Membangun Web Mobile Berbasis PHP : Part I - The Tools , sekarang saya akan membahas struktur pengkodean yang perlu diperhatikan pada saat anda mendevelop web mobile, struktur tersebut antara lain :

1. Gunakan XHML Profile Untuk Mobile

Gunakan Document Type Declaration (DOCTYPE) dan juga ditambah dengan asistennya yaitu Document Type Definitition (DTD). Caranya sanagat mudah untuk menambahkan DOCTYPE pada halaman web anda yaitu tinggal copy paste code dibawah ini setelah code pengenal xml (salah satu contoh xml : <?xml version=1.0 charset=UTF-8 ?>). Ada beberapa DOCTYPE yang bisa digunakan yaitu :

XHTML Mobile 1.0:
<!DOCTYPE html PUBLIC -//WAPFORUM//DTD XHTML Mobile 1.0//EN http://www.wapforum.org/DTD/xhtml-mobile10.dtd>

XHTML Mobile 1.1:
<!DOCTYPE html PUBLIC -//WAPFORUM//DTD XHTML Mobile 1.1//EN http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd>

XHTML Mobile 1.2:
<!DOCTYPE html PUBLIC -//WAPFORUM//DTD XHTML Mobile 1.2//EN http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd>

XHTML Basic 1.0
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML Basic 1.0//EN http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd>

XHTML Basic 1.1
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML Basic 1.1//EN http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd>

Tapi saran saya coba gunakan ini saja

<?xml version=1.0 charset=UTF-8 ?>
<!DOCTYPE html PUBLIC -//WAPFORUM//DTD XHTML Mobile 1.0//EN http://www.wapforum.org/DTD/xhtml-mobile10.dtd>

Komponen tersebut diletakkan sebelum kode <html>

2. Jangan Gunakan Frame

Bila anda seorang web developer pasti sudah tidak asing dengan komponen yang satu ini, dalam web mobile komponen yang satu ini tidak boleh digunakan karena akan memperberat kerja mobile yang mengakses web anda.

3. Gunakan Character Encoding

Character encoding yang benar adalah penting untuk memastikan bahwa halaman akan di render secara benar pada perangkat mobile yang digunakan. Misalnya

<?xml version=&1.0& encoding=&UTF-8& ?>

Kode tersebut ditempatkan sebelum code xhtml mobile profile (no.1).

4. Jangan Gunakan POP UP Windows

Pop up windows adalah jendela baru / halaman web baru yang mana halaman tersebut akan muncul jika sebuah link diklik. Kode link yang biasanya digunakan untuk web versi desktop yaitu :

<a href=&http://alamatwebanda.com/& target=&_blank&> kode tersebut memang diperbolehkan, namun untuk web mobile ini tidak mobile friendly karena akan dikenali sebagai link pop up, kode yang diperbolehkan untuk web mobile pada saat kita memberi link yaitu <a href=&http://alamatwebanda.com/& target=&_self&> atau <a href=&http://alamatwebanda.com/&>

5. Gunakan alt tag

Alt tag biasanya digunakan untuk acessories atau properties pada pengkodean pemanggilan image <img>. Contoh penggunaan alt tag yaitu <img src=&gambar.jpg& alt=&nama gambar& />

6. Ukuran Gambar Yang Spesifik

Pada tag <img> anda harus menambahkan properties width / lebar dan height / tinggi karena fungsi ini akan memerintahkan mobile untuk menyediakan tempat pada saat gambar di selesai di load oleh mobile. Contoh : <img src=&gambar.jpg& alt=&nama gambar& width=&10& height=&10& />

7. Ukuran

Dalam penulisan css untuk web mobile, anda dilarang untuk menulis / menggunakan properties absolute dan pixel karena nanti oleh mobile web anda akan di auto fit sehingga bisa jadi tampilan web mobile anda akan diperkecil dan membutuhkan fungsi zoom untuk bisa melihatnya (repot sekali :) ). Cara alternatifnya, gunakan ukuran persen (%) atau menggunakan ukuran yang relatif seperti em, ex, bolder, larger and thick.

8. Title Tag

Jangan lupa untuk menggunakan komponen <title></title> yang diletakkan antara <head> dan </head> pada web mobile anda karena komponen tersebut digunakan sebagai pengenal web mobile anda. Contoh <title> Judul Web Anda </title>

9. Gunakan Stylesheet

Jangan menggunakan inline-markup seperti <b>,<i>,<u> karena akan menimbulkan hasil tampilan yang berbeda-beda untuk web mobile anda pada saat diakses lewat mobile. Alternativenya, anda gunakan file stylesheet / css.

10. Ketergantungan Pada Stylesheet

Jangan menggunakan properties float dan display pada file stylesheet anda.

11. No Object Dan No Script

Jangan menggunakan fungsi object seperti file swf dan fungsi script seperti <script type=text/javascript> karena kebanyakan device tidak support dengan komponen tersebut cara alternativenya yaitu anda harus menggunakan logika manual seperti php untuk validasi bukan menggunakan javascript seperti jquery.

12. No Auto Refresh

Jangan menggunakan fungsi auto refresh ( contohnya : <META HTTP-EQUIV=REFRESH CONTENT=5> ) karena akan menyebabkan mobile membutuhkan waktu tambahan dan dana tambahan ( pulsa ) untuk me-load web anda.

13. No Redirect

Jangan menggunakan fungsi redirect ( contohnya : header( &Location: http://www.yoursite.com/new_page.html& ) ; ) karena akan menyebabkan mobile membutuhkan waktu tambahan dan dana tambahan ( pulsa ) untuk me redirect web anda menuju ke halaman yang lain.

14. Jangan Gunakan Gambar Besar

Gambar besar = size besar = dana besar, itu perumpamaan apabila anda mengincludekan gambar ukuran besar pada web mobile anda dan juga ada beberapa mobile yang tidak support dengan gambar besar. Ukuran gambar yang diijinkan untuk diincludekan pada web mobile anda yaitu kurang dari 200px x 150px.

15. No / Limit Cache

Jangan menggunakan fungsi cache pada web anda karena akan memperberat media penyimpanan mobile. Di sarankan untuk tidak menggunakan fungsi cache atau menggunakan cache limit seperti <meta http-equiv=Cache-Control content=max-age=200 /> jika max-age=200 diganti menjadi max-age=0 itu sama dengan no-cache.

16. No / Limit External Resources

Jangan atau kurangi penggunaan resource objek (gambar,suara,dll) dari web luar karena selain memperberat untuk meload gambar, mobile juga harus mengakses halaman web tersebut. Contoh kode external resources yaitu <img src=&http://www.alamatwebluar.com/gambar.jpg& alt=&nama gambar& width=&10& height=&10& />

Mungkin itu saja beberapa komponen yang perlu diperhatikan dalam pengkodean web mobile. Apabila ada yang kurang jelas, ada yang salah, atau ada yang perlu ditambahi, silahkan tuliskan pernyataan tersebut pada form dibawah ini.

Happy Web Mobile Programming :)

Baca Juga
Komentar

adi sasmito 4 bintang
Ijin menyimak buat belajar membuat web mobile... kapan-kapan konsultasi masalah ini. :)
" Oke, silahkan ^_^ "

[ Tulis Komentar ]

Nama
Website
Email
Rating 1 2 3 4 5
Komentar
Key Codekode captcha
Kode
 
Costumer Service
CS KS 1
Chat yahoo messenger with CS KS 1
Wilda Satya Perdana (Owner)
Phone: +62 898-1390-966
E-Mail: Ke Email
FB: Klik Disini
Chat yahoo messenger with Wilda Satya Perdana (Owner)
We Accept
BANK MANDIRI CAB BATU - MALANG
BANK MANDIRI CAB BATU - MALANG
Rek: 1440011320709
a/n: WILDA SATYA PERDANA
Pesan Domain
Silahkan masukkan nama domain yang anda pesan pada form diatas untuk di cek statusnya ada (Available) atau sudah diambil (Taken)

Belum Punya Hosting ? Atau Mau Cari Hosting? [Cek disini]