Membuat Web Versi Mobile PDF

D i tutorial sebelumnya saya telah menjelaskan cara mendeteksi
browser client yang menggunakan perangkat mobile. Silahkan

dibaca disini: Cara mendeteksi mobile browser. Sekarang saya akan
jelaskan perbedaan HTML untuk versi desktop dengan HTML untuk versi
mobile.
Perbedaannya hanya pada meta tag:
1 <meta name="view port" content="w idth=device-w idth; initial-scale=1.0; maximum-scale=1.0;"
Jadi jika anda ingin membuat halaman HTML anda menjadi versi mobile Search this site...
anda cukup menambahkan meta tag di atas ke header HTML anda.
Misalnya:
1 <!DOCTYPE html PUBLIC -//W 3C//DTD XHTML 1.0 Transitional//EN http://w w w .w 3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
2 <html xmlns=http://w w w .w 3.org/1999/xhtml> 20 Template Gratis dan
3 <head> bagus-bagus untuk
4 <meta name=view port content=w idth=device-w idth; initial-scale=1.0; maximum blogger
5 <meta http-equiv=Content-Type content=text/html; charset=utf-8 />
6 <title>Web versi mobile</title> 40 contoh tutorial
7 <link href=style.css rel=stylesheet type=text/css /> photoshop efek abstrak
8 </head> dan cahaya (Lighting and
9 <body> Abstract Effects)
10 Hallo ini w eb versi moblie
11 </body> 50 Contoh website atau
12 </html> situs terbaik 2013
Cara membuat web versi
Gampang kan?! mobile
60 contoh jquery
Nah agar tampilan web anda tidak kacau dalam artian tidak melebihi lebar slideshow
layar HP/tablet maka semua element width dalam css dan html anda Cara mengatur ukuran
jangan menggunakan lebih dari 400px. Untuk leibih amannya gunakan gambar agar pas sesuai
width:100%; atau width:auto; dengan ukuran yang kita
inginkan
Semoga bermanfaat. Cara membuat kotak
komentar paling mudah
untuk website anda
Cara mencari email dari
alamat email tertentu di
gmail
Cara gampang embed

Cara membuat webiste mobile dengan jquery mobile video youtube dengan
Cara Membuat Website WordPress Versi Mobile PHP
Tutorial Jquery Mobile Bagian I Tips SEO untuk situs
Cara mendeteksi mobile browser indocuttingsticker.com
Tools untuk membuat web versi mobile
Belajar Jquery
Cara gila
menyederhanakan query
mysql
Cara menyederhanakan
Posted by Vebri Dores+ on Jul 7, 2012 in CSS, Mobile, PHP, Tingkat Lanjut, query mysql
Tingkat Menengah, Web Desain | 61 comments menggunakan meekrodb
Authored by:
converted by Web2PDFConvert.com
Vebri Dores on Jual
Sofware Untuk Bappeda
dedi on Jual Sofware
Untuk Bappeda
Nasrullah on 20
Template Gratis dan
bagus-bagus untuk
blogger
Nama: Vebri Dores, S.Kom Tips Kesehatan on Cara
Jabatan: Programmer Produkdalamnegeri.com paling mudah dan paling
Website: www.waroengweb.co.id cepat belajar PHP
Email: responsiblevebri/at/gmail/dot/com ijam on Tips SEO Cara
FB: http://www.facebook.com/vebridrs Membuat Artikel Anda
Google+: https://plus.google.com/110317889564068613562 Muncul Di Halaman
Call/SMS/WhatsApp/Line: O813-6620-5760 Pertama Google
Pin BBM:751DBD53
AUG 24, 2012

saya ingin bertanya.jika saya sudah mempunyai website namun ingin
diubah menjadi versi mobile menggunakan wap.apakah saya harus
membuat dari awal atau mengubah dari web yg sudah ada?dan apa saja yg
diubah?terima kasih.
Respond
AUG 24, 2012 March 2014

bukan mengubah tetapi menambahkan versi mobile. jadi February 2014
kalau pengunjung mengakses web anda menggunakan laptop January 2014
maka tampilkan web versi desktop, dan kalau pengunjuang December 2013
mengakses melalui hp/mobile maka alihkan ke versi mobile. November 2013
web versi mobile harus anda sediakan terlibihdahulu. anda October 2013
bisa memisahkan alamat url untuk versi mobile dengan yang September 2013
versi desktop seperti facebook.com dan m.facebook.com August 2013
namun anda juga bisa tidak memisahkan kedua versinya, July 2013
dengan cara ketika pengunjung mengakses menggunakan June 2013
perangkat mobile maka yang di css include adalah css yang May 2013
versi mobile dan kalau tidak maka css yang diinclude adalah April 2013
css versi desktop. March 2013
February 2013
agar kita tahu pengunjung mengakses pakai perangkat January 2013
mobile atau tidak anda bisa baca tutorial saya disini December 2012
http://blog.waroengweb.co.id/php/cara-mendeteksi- November 2012
mobile-browser.html October 2012
silahkan mencoba dulu kalau masih kurang jelas kami September 2012
bersedia membantu anda. August 2012
July 2012
Respond
June 2012
March 2012
OCT 10, 2012
boleh tanya, klo buat web mobile itu buat aplikasinya ato cuma tampilan
web versi mobilenya saja?, trus kalo apa bedanya kalo membuat web
mobile menggunakan wml dgn html?
Produkdalamnegeri.com
terima kasih
WaroengWeb
Respond
OCT 12, 2012

wml itu bahasa markup yang digunakan untuk Bisnis Online
mengimplementasikan WAP. sekarang kita sudah hampir Blogspot
meninggalkan web versi wap. browser di hp sekarang sdh Cara Membuat Donat
mampu menampilkan html dan css bahkan javascript dan Cara Membuat Pempek
flash. Cara Membuat Tekwan
sebenarnya web versi mobile itu bisa menggunakan aplikasi CSS
yang kita buat khusus untuk device moblie tertentu. contoh Facebook
gampangnya coba buka facebook via operamini maka yg Islami
tampil adalah halaman html versi mobile. tapi kalau kita Joomla
buka via BB mengguanakan aplikasi facebook untuk bb JQuery
maka yang tampilannya pasti lain karena itu bukan sekedar Mobile
web tapi aplikasi. MySql
unutk bisa membuat aplikasi mobile kita harus tahu bahasa Photoshop
pemograman yang digunakan di handphone tersebut. ada 3 PHP
aplikasi mobile yang sedang populer sekarang yaitu android, SIPPD Bappeda
iphone, dan bb. SOE
Respond Tingkat Lanjut
Tingkat Menengah
TIngkat Pemula
NOV 13, 2012 Tips internet
test Tips Menulis
terimakasih sudah berkunjung Ubuntu
Web Desain
Respond
Wordpress
NOV 15, 2012

Terimakasih telah berkunjung
Respond 4shared.com Admin Login
animasi aplikasi blogspot
Browser Cara Membuat
NOV 18, 2012 Donat Cara Membuat empek-
Bingungg gan, hehe sorry masih newbie, empek cara membuat
pempek Cara Membuat
Respond Pempek palembang Cara
Mendapatkan Uang Dari
Facebook Chace browser
NOV 19, 2012 CSS domain Email
gmana caranya untuk membuat aplikasi di dreamweafer untuk excel facebook google
Islami Joomla Jquery
membedakan mobile dengan dekstop ?
Jquery Plugin labrary Linux
apa itu membuat dua file yang satu buat indeks mobile dan yang satu buat Meekrodb Menulis Online
indeks dekstop? mobile MySql Optimise
Respond Image Pagination PHP
Random String Resize Image
seo Short url sippd
slideshow spambot template
NOV 19, 2012
Tingkat Pemula Tombol
struktur filnya mungkin bisa begini:
Twitter Ubuntu Unzip Zip
/ (folder utama)
index.php
utama.php
m (folder / subdomain)
index.php
file home untuk versi desktop ada di file utama.php dan file home untuk
mobile ada di index.php dalam folder m
lalu fil index.php yang di folder utama pasang pendeteksi browser. jika
yang akses pakai komputer biasa maka include file utama.php jika yg akses
dari mobile maka include file m/index.php
untuk membuat pendeteksi silahkan baca artikel saya

http://blog.waroengweb.co.id/php/cara-mendeteksi-mobile-
browser.html
Respond
DEC 4, 2012
Wahhhh, ini merupakan ilmu yang sangat bermanfaat bagi saya sebagai
seorang pemula, Sobat. Terimakahih.
Respond
DEC 17, 2012

Thanks berat ilmunya yg sangat berguna Masih boleh banyak belajar
khan mas ? maklum masih pemula nich. gimana membuat file index.php
dan apa isi filenya ? trims.
Respond
JAN 2, 2013
pak, gimana caranya
1. dr panduan yg bapak berikan, itu save filenya apa?
2. kebnykan website http://www.domain.com, mengkonversi jd
m.namadomain.com, itu bagaimana?
3. bagaimana caranya tampilan web utama kita, sama spt versi mobilenya?
ditunggu informasinya
thank you
Respond
JAN 2, 2013
1. save filnya index.php lihat komentar saya diatas sudah
saya jelaskan
2. bukan mengkonversi tapi caranya buatlah subdomain di
server hosting anda dengan nama m . maka otomatis di
server anda akan ada folder m. nah lalu duplikat script
website utama anda ke dalam folder m kemudian ubah file
index.php nya atau tambahkan meta tag seperti ini :
1 <meta name="view port" content="w idth=device-w idth; initial-scale=1.0; maximum-scale=1.0;"
3. berarti ga perlu web versi desktop dong. jadinya web

mobile aja ga usah bikin subdomain m.
Respond
JAN 6, 2013
q mau tanya gan
q punya wapsite di wen.ru dan pertanyaanya gimana kalo tampilan wap di
desktop brbeda dngn tampilan di mobile, lebih gampangnya ada dua
tampilan.
makasih
Respond
JAN 7, 2013
wen.ru itu situs apa kok ga bisa dibuka. caranya mungkin
seprti tulisan saya yg ini
http://blog.waroengweb.co.id/php/cara-mendeteksi-
mobile-browser.html
Respond
JAN 10, 2013

saya udah coba, udah buat subdomainna. tetapi masih gak bisa.
yg saya lakukan,
mengganti script index.php dengan script diatas, kemudian script lama
index.php saya ruba ke utama.php.
saya udah ikutin caranya, tapi gak bisa? apakah ada yg ketinggalan step-
step diatas. mohon informasi dan bantuannya yah
Respond
JAN 15, 2013

testingnya pakai hp bro. sebenarnya bedanya cuman sedikit.
lihat meta tag nya ini
initial-scale=1.0; maximum-scale=1.0;
itu artinya layar di hp kita tidak bisa dizoom karena skala

maksimumnya 1.0. jadi resulusi gambar dan ukuran
hurufnya otomatis disesuaikan dengan resolusi layar hp
Respond
JAN 13, 2013

keren bangat sharingnya mas bro bagaimana dengan 2 pilihan tampilan,
bila menggunakan pc akan langsung pake web bila menggunakan ponsel
akan langsung menggunakan mobile version trims bro sharingnya
Respond
JAN 15, 2013

trims sudah berkunjung. kalau itu sudah dibahas di
http://blog.waroengweb.co.id/php/cara-mendeteksi-
mobile-browser.html
Respond
JAN 15, 2013

mantap gan tipsnya.akan saya coba untuk copas ya.apakah ini berlaku
untuk semua website baik itu joomla maupun worpdress ya
Respond
JAN 15, 2013

kalau untuk cms ada modul/plugin tersendiri untuk buat
web mobile. sudah otomatis jadi. saya pernah baca2 tapi
belum pernah coba
Respond
JAN 19, 2013

apa mobile dapat membuka php?
Respond
JAN 29, 2013

bisa
Respond
JAN 31, 2013

bagaimana caranya mengetes php?
kalo di komputerkan lewat localhost tuh
kalo di mobile?
Respond
JAN 31, 2013

bisa pakai opera mini emulator
download disini:
http://get.opera.com/pub/.custom/campaign/labs/20100421/OperaMobileWindows_49.exe
atau tampilan di localhost itu di

save as html lalu masukkan ke
hp anda
Respond
FEB 7, 2013
Hai.mantap penjelasannya gan!Tapi gan tahu gak cara nge generate scr
otomatis data yang diinput ke dalam web?
Respond
FEB 9, 2013
Maksudnya gimana gan? kurang paham ane
Respond
FEB 21, 2013

Pak,,,saya lagi membuat web mobile menggunakan dreamweaver cs5.5
tapi untuk build ke mobile aplication nya tidak tersedia di tool
dreamweaver.bapak punya tutorial web mobile gak?Trima kasih
sebelumnya.
Respond
FEB 24, 2013

NICE tutorial gan
sangat membantu bangett
makasi ya
Respond
FEB 26, 2013

mas mw tanya gmn caranya agar web versi mobile bisa support html5..??
bls ke email saya ya.. terima ksih infonya..
Respond
MAR 8, 2013
support. javascript juga support. tidak perlu seting-seting
tinggal tulis aja html5 nya
Respond
FEB 28, 2013

maaf, msh bingung bgt, neh. Ini berarti kita beli 2 domain ya? maksud sy
domain utk web biasa dan domain untuk hp gitu ya?
salam kenal
Respond
MAR 8, 2013
bukan. dalam contoh diatas hanya 1 domain
Respond
MAR 5, 2013
apakah ada cara menghindari hack untuk web versi mobile gan,dulu saya
punya klien.webnya yang versi mobile yang dihack sementara versi yang
lain bisa diakses
Respond
MAR 8, 2013
kalau hack bukan pada versi mobile atau tidak tapi di sisi
keamanan server anda
Respond
MAR 7, 2013
hmm jadi bisa menyesuaikan layar dari Hp nya ya.
GPS Tracker
Respond
MAR 9, 2013
keren sob nambah 1 ilmu baru lagi nih, tak coba dulu nanti klau ada yg
kurang jelas tanya lagi, thankss
Respond
MAR 16, 2013

askum sob. . Mau tanya ni. . Gimana cara memasang theme kreator sendiri
di hp yg sudah kita rubah tampilan. Dan digunakan di mywapblog.
Contohnya spiderme.thm atau harypother.nth itukan theme hp. Tp
digunakan di mywapblog bs gk sob. Trims..
Respond
MAR 23, 2013

ga bisa sob. itu ibarat kita mau pasang pintu kamar di
gerbang masjid. beda banget.
Respond
MAR 31, 2013

mau nanya nih kk masih newbie, saya punya website html/css, ditutorial
ditunjukan bahwa kita hanya menambahkan meta saja, itu artinya
membuat html ulang untuk versi mobile nya dong kak?
satu lg kak, untuk web mobile tsb, harus menggunakan php. apakah bisa
website html saya dirubah menjadi phpV
Respond
MAR 31, 2013

mau nanya nih kk masih newbie, saya punya website html/css, ditutorial
ditunjukan bahwa kita hanya menambahkan meta saja, itu artinya
membuat html ulang untuk versi mobile nya dong kak?
satu lg kak, untuk web mobile tsb, harus menggunakan php. apakah bisa
website html saya dirubah menjadi php? bagaimana cranya kak ?
maaf bnyk tanya, masih baru banget didunia website

terimakasih sebelumnya kak :))
Respond
APR 11, 2013

wow ilmu yang patut dicoba, thanks kang..
Respond
MAY 14, 2013

permisi numpang tanya, kalau mau test web jquery mobile nya lgsg ke hp
android pakai connectify me apakah bisa ? soalnya sy cb hp sy tdk bs
masuk server tp ketika sy coba pakai emulator opera mini emulator bisaa ,
makasih sbelumnyaa..
Respond
MAY 14, 2013

tinggal di akses aja servernya dari hp. kalau servernya pakai
localhost tinggal akses ip komputernya dari hp. jadi bukan
file jquerynya yang dimasukkan kedalam hp.
Respond
MAY 14, 2013

terimakasih sebelemnya ,maksd sy sy sudah
mencoba akses dr hp mengetik alamat
ip/folder/namafile.php tp selalu koneksi
serve timeout apakah hal ini bisa disebabkan
karena jquery mobile nya tdk support ?
Respond
MAY 21, 2013

coba aja anda akses file anda
yang selain jquery mobile
apakah timeout juga. kalau iya
berarti koneksi ke server anda
yang bermasalah. jika anda
menggunakan server localhost
di windows anda harus
membuat setingan firewall
anda off
Respond
JUN 6, 2013
mas mau nanya, saya punya situs yang di flas itu bagaimana ya untuk
convert ke versi mobile, apa html pakai yang di atas yadi ya?
makasih.terus apa kode di atas tadi langsung say ataroh di situs langsung
work ya,, saya belom mmencoba, karena saya tes di blogspot tidak
bekerja, terim kasih
Respond
JUN 14, 2013
tidak bisa kalau pakai flash
Respond
JUN 6, 2013
mau nanya mas, saya kan punya situs ya, nah situs saya di flash, terus yang
saya tanyakan kan situs flash kan pake XML, apa bisa ya pake kode di atas,
terus misal untuk ngetes apa harus pake hp? misalnya di blogspot kan ada
preview untuk mobile apa bisa ya pake itu?
terus satu lagi mas kalo situs yang yang belom ada set untuk versi mobile
sperti blogspot apa harus menambah kode lain selain kode di atas? apa
hanya menggunakan kode di atas sudah bia?
terima kasih mas, saya lagi pengen nie mas situs versi mobil.
Respond
JUN 14, 2013

kode diatas bukan untk blogspot, wordpress dll. melainkan
untuk html murni binan sendiri. cobanya harus buka pakai
hp.
Respond
SEP 2, 2013
wah, tutorial nya bagus skali
saya ada pertanyaan, apa bila tidak keberatan,

saya menggunakan dreamweaver untuk mencoba membuat
mobile web, menggunakan jquery
itu secara otomatis berbentuk mobile size,
tetapi, yang saya bingungkan, bagaimana cara input gambar untuk header
dan footer
serta cara menata layoutnya
mungkin bisa membantu,

dan terima kasih banyak mas
Respond
SEP 4, 2013
biasa aja sama dengan versi desktop namun disarankan
untuk width nya pakai % aja misal 100% atau 50%. kalau
pakai px nanti tidak bisa menyesuaikan dengan ukuran layar
handphone atau tablet yang berbeda2
Respond
SEP 7, 2013
Wahhhh, ini merupakan ilmu yang sangat bermanfaat bagi saya sebagai
seorang pemula, Sobat. Terimakahih.
Respond
SEP 30, 2013

Boss, klo website mobile apakah masih bisa menggunakan SQL sebagai
databasenya. Contoh Souch COdenya dimana yah ane bisa dapetin..
makasih sebelumnya,,
Respond
OCT 7, 2013
bisa. anda tidak perlu mengubah apapun selain meta tag
pada header hatml seperti yg dijelaskan diatas.
Respond
OCT 25, 2013

Wihh ilmu baru di dapatkan lagi, nanti mau di coba mas thanks ilmu nya
Respond
NOV 3, 2013
Gak mudeng Gan
Dah di test gak bisamaklum masih pemula nih
Respond
NOV 16, 2013

wah ini yg saya cari-cari. terimakasih sekali pak ilmunya
Respond
DEC 29, 2013

wehh :0 gituh ya kak ?? makasih banyak ilmunya ya xixixixixixix
Respond
JAN 22, 2014

Mantaffff.
masih ada pertanyaan nih gan..

ketika kita buat sub domain m"
apakah seluruh isi file utama seperti index.. contact us. css. jaquery, dll
nya do copy semua ke folder m" dan di ubah beberpa point css nya agar
user frendly..?
soalnya kalo cuma index nya saja yang di copy ke folder m.. ketika kita
mengakses hlaman lain maka akan kembali ke versi dekstop..
Respond
JAN 26, 2014

ya nggak harus dipindahkan. kan bisa di include file lainnya
dari folder m misal include ../contact.php; jadi yang dibikin
baru hanya css dan jquerynya saja
Respond
Cara membuat webiste mobile dengan jquery mobile | WaroengWeb Blog -

[...] tutorial sebelumnya saya sudah jelaskan tentang Cara membuat
website versi mobile dengan menggunakan html standar. Sekarang saya
akan coba jelaskan
Your email address will not be published. Required fields are marked *
Name *
Email *
Website
Comment
You may use these HTML tags and attributes: <a href="" title="">
<abbr title=""> <acronym title=""> <blockquote
cite=""> <cite> <code class="" title="" data-url=""> <del
datetime=""> <q cite=""> <strike> <pre
class="" title="" data-url=""> 
Submit Comment
Confirm you are NOT a spammer
Blog Waroengweb
Switch to our mobile site

Membuat Web Versi Mobile PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Web Versi Mobile PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

D i tutorial sebelumnya saya telah menjelaskan cara mendeteksi

browser client yang menggunakan perangkat mobile. Silahkan

1 <meta name="view port" content="w idth=device-w idth; initial-scale=1.0; maximum-scale=1.0;"

Cara gampang embed

AUG 24, 2012

AUG 24, 2012 March 2014

OCT 12, 2012

NOV 15, 2012

untuk membuat pendeteksi silahkan baca artikel saya

DEC 17, 2012

1 <meta name="view port" content="w idth=device-w idth; initial-scale=1.0; maximum-scale=1.0;"

3. berarti ga perlu web versi desktop dong. jadinya web

JAN 10, 2013

JAN 15, 2013

itu artinya layar di hp kita tidak bisa dizoom karena skala

JAN 13, 2013

JAN 15, 2013

JAN 15, 2013

JAN 15, 2013

JAN 19, 2013

JAN 29, 2013

JAN 31, 2013

kalo di komputerkan lewat localhost tuh

JAN 31, 2013

atau tampilan di localhost itu di

FEB 21, 2013

FEB 24, 2013

FEB 26, 2013

FEB 28, 2013

MAR 16, 2013

MAR 23, 2013

MAR 31, 2013

MAR 31, 2013

maaf bnyk tanya, masih baru banget didunia website

APR 11, 2013

MAY 14, 2013

MAY 14, 2013

MAY 14, 2013

MAY 21, 2013

JUN 14, 2013

saya ada pertanyaan, apa bila tidak keberatan,

mungkin bisa membantu,

SEP 30, 2013

OCT 25, 2013

NOV 16, 2013

DEC 29, 2013

JAN 22, 2014

masih ada pertanyaan nih gan..

JAN 26, 2014

Cara membuat webiste mobile dengan jquery mobile | WaroengWeb Blog -

Switch to our mobile site

Anda mungkin juga menyukai