Pada pembahasan mengenai 'Media descriptors' pada media screen dan print, belum diangkat masalah 'media handheld'. Karena untuk ngeset 'media handheld' perlu menggunakan handphone yang memadai untuk melihat hasilnya.
Mobify Alternatif Media Handheld
Kini ada cara alternatif untuk mengatasi masalah 'media handheld' melalui jasa yang bernama Mobify.
Make your Website Mobile whit Mobify
Dengan Mobify, kita lebih mudah membuat tampilan weblog di 'handphone' atau 'small screen'. Oleh karena kemudahannya itu Mobify kini cukup populer digunakan, telah banyak blog menggunakan jasanya, baik yang gratis (seperti blog ini) maupun yang berbayar (costume domain).
Blog code-code-an yang menggunakan mesin blogger ini sudah menggunakan fasilitas tersebut, dan hasilnya memuaskan. Anda dapat melihat tampilannya di alamat berikut untuk memastikan http://deconstructioncode.mobify.me/. Jadi apabila kita mengetik alamat http://deconstructioncode.blogspot.com/ di handphone ketika online, akan diarahkan langsung ke alamat http://deconstructioncode.mobify.me/.
Ini tampilan pada halaman utama bila dilihat dengan handphone.
Gambar 1.
Tampilan ini sengaja dibuat sederhana. Namun anda dapat membuatnya lebih bergaya. Lihat hasil beberapa weblog yang menggunakan fasilitas ini di "Gallery Mobify", sebagai bahan inspirasi.
Langkah Penggunaan Mobify
Nah untuk media handheld ini, dengan Mobify, kita dapat memilih mana yang perlu ditampilkan dan tidak. Baik itu untuk halaman utamanya maupun pada halaman label dan arsip. Jadi untuk tampilan weblog di handphone kita buat jadi lebih sederhana, agar lebih mudah diakses.
Agar lebih lengkap pembahasannya, berikut ini langkah umum penggunaan Mobify (catatan: jangan takut kutak katik sendiri):
1. Masuk ke Mobify dan buat akun atau "sign up"
2. Masukan alamat url weblog anda ke form "create a new mobile view" dan "Click here to begin!"
3. Selanjutnya anda akan diberikan panduan dan masuk kehalaman "choose", ada tiga tahapan, yaitu 'Choose', 'Design' dan 'Manage' seperti gambar dibawah ini.
Gambar 2.
Arahkan mouse anda pada layar halaman gambar blog anda yang tampil, dan choose atau pilih bagian yang mana saja yang ingin anda tampilkan untuk media handheld ini. Seperti gambar dibawah ini.
Gambar 3.
(klik gambar untuk memperbesar)
Saya hanya memilih header (judul blog), nav menu, post dan arsip, untuk ditampilkan di halaman utamanya.
4. Setelah anda memilih bagian yang ingin ditampilkan kemudian klik 'design' (lihat gambar 2.) maka akan tampil halaman seperti dibawah ini.
Gambar 4.
(klik gambar untuk memperbesar)
Halaman ini untuk mendesain tampilan di handphone berupa bagaian CSS disebelah kiri dan preview disebelah kanan (lihat gambar 4).
- Langkah pertama:
Susun urutan tampilan (hasil ditahapan 'choose'), misal header di atas, kemudian nav menu, post, dan paling bawah arsip. Caranya dengan mengklik bagian yang ingin rubah posisinya dilayar tampilan (dibagian kanan) sebelah CSS. Jadi jika diklik bagian itu akan berwarna merah, lihat gambar 4..
Kemudian klik 'move down' atau 'move up' untuk mengatur posisinya, seperti pada gambar dibawah ini.
Gambar 5.
- Langkah kedua:
Mengatur kode CSS nya (pada bagian sebelah kiri). Ini sama seperti kita membuat template (dalam tampilan screen). Saya tidak bisa menjelaskan detil disini, sebab ini mesti disesuaikan dengan karakter template yang anda miliki. Jadi perhatikan CSS yang ada dan silahkan dimodifikasi. Contoh saya memodifikasi body seperti:
body {
background:#2e2e2e;
color: #fff;
margin-left:5px;
font-family: helvetica, arial, sans-serif;
}Maka tampilannya (sebelah kanan pada gambar 4.) akan langsung berubah.
Tapi yang terpenting, dibagian CSS ini ada beberapa kode yang perlu dihapus, seperti kode CSS bawaan dari Blogger, sebab sepertinya tidak ada pengaruh untuk ditampilan di media handheld atau mobile.
catatan: setiap anda melakukan perubahan kode CSS, klik save dibagian atas.
- Langka ketiga:
Dibagian bawah (lihat gambar 5.) ada 'New Block' (untuk membuat HTML baru jika diperlukan) dan lainnya. Saya hanya menggunakan CSS Filter untuk mengaktifkan fungsi readmore, dengan memasukkan kode
.fullpost (karena perintah readmore yang saya gunakan adalah .fullpost, mungkin masing2 template berbeda). Jadi CSS Filter ini berfungsi untuk menyembunyikan.5. Setelah merasa tampilan sudah pas. Sekarang klik 'Manage' (lihat gambar 2.). Tadi kita baru membuat tampilan untuk halaman utama atau 'Home'. Selanjutnya anda juga perlu memodifikasi halaman postingan, arsip dan label.
Anda klik pada bagian path seperti gambar dibawah ini (bagian path adalah yang belum di desain)
gambar 6.
Tahapannya sama persis seperti sebelumnya. Seperti pada arsip, saya hanya sekedar menampilkan judul postingan. jadi lebih simpel lagi dan disini sengaja agar tidak berat seperti pada gambar dibawah ini.
gambar 7.
6. Ini tahapan terakhir. Klik live seperti gambar dibawah ini, tetap pada tahapan 'Manage'.
gambar 8.
Disini anda dapat membuat nama alamat mobile anda, contoh saya menggunakan http://deconstructioncode.mobify.me/, seperti pada gambar dibawah
gambar 9.
. Anda dapat membuka langsung alamat mobile tersebut di komputer.Dan terakhir ambil scriptnya, copy dan paste di template anda, bisa diatas </head> atau </body>
gambar 10.
Demikian kesuluruhannya.
Penutup
Tampilan antara media 'screen', 'print' dan 'handheld' itu semestinya dibedakan atau disesuaikan dengan karakternya masing-masing. Untuk media print menurut saya lebih mudah dibuat sendiri langsung ditemplate anda. Tapi untuk media handheld menurut saya Mobify lebih membantu dan mempermudah. Jadi kalau ada tertarik silahkan mencoba.
Catatan: Blogspot/blogger.com lagi-lagi ada kelemahan, yaitu tidak muncul form untuk komentarnya :), tidak seperti WordPress.
Sip demikian.
0 comments:
Posting Komentar