Percantik Desain Mobile Web Layaknya Aplikasi Native dengan jQuery Mobile

Percantik Desain Mobile Web Layaknya Aplikasi Native dengan jQuery Mobile

Tutorial Information

ProgramjQueryMobile
Version1.1
DifficultyStandar

Seiring dengan perkembangan teknologi perangkat bergerak (mobile device), perkembangan teknologi web juga turut meramaikan peluang tersebut. Jumlah pengguna perangkat bergerak pun semakin banyak karena…

Seiring dengan perkembangan teknologi perangkat bergerak (mobile device), perkembangan teknologi web juga turut meramaikan peluang tersebut. Jumlah pengguna perangkat bergerak pun semakin banyak karena semakin mudahnya akses internet dengan harga yang terjangkau. Jika dahulu web hanya bisa diakses dengan baik melalui sebuah komputer, saat ini bagaimanapun caranya, sebuah web juga harus bisa menyesuaikan berbagai ukuran perangkat portabel, seperti high-end handheld, smartphone, juga tablet.

Bukankah semuanya sudah diakomodir oleh aplikasi native? Baiklah, sebuah aplikasi native pada dasarnya hanya dibuat untuk platform tertentu. Jika pun dibuat untuk platform yang lain, tentu saja harus dikembangkan lagi sesuai dengan SDK masing-masing platform. Berbeda halnya dengan sebuah web, yang sudah jelas dapat diakses oleh semua platform perangkat bergerak yang sudah dilengkapi dengan web browser.

Namun, bagi para pengembang web jangan khawatir. Saat ini sudah ada beberapa framework yang bisa dimanfaatkan oleh pengembang web untuk membuat desain antarmuka mobile web, sehingga nampak seperti sebuah aplikasi native. Salah satunya yaitu jQueryMobile. jQueryMobile merupakan sebuah framework untuk membuat desain template dan antarmuka yang user-friendly. Berikut akan dijelaskan beberapa fitur menarik seputar jQueryMobile. 

Dokumentasi yang Baik

Dokumentasi yang disediakan pada web jQueryMobile sangatlah mudah dipahami. Di bagian awal akan dijelaskan bagaimana langkah-langkah untuk memulai menggunakan jQueryMobile. Dengan pengetahuan dasar HTML saja, seseorang akan cepat memahami tutorial yang ada didalamnya. Selain itu, dokumentasi juga dikemas dalam bentuk yang menyenangkan, yaitu dengan melampirkan contoh tampilan yang dihasilkan.

Pada halaman resources web jQueryMobile, banyak sekali informasi yang didapatkan seputar tutorial, plugins, extension, tools pengambangan, ebook, dsb. yang bisa digunakan sebagai panduan.

Dokumentasi JQueryMobile

Screenshot Halaman Dokumentasi jQueryMobile

Susun Warna Themes dengan Themeroller

Untuk mengganti warna dasar template default (bawaan), pengguna jQueryMobile akan dimanjakan dengan fasilitas Themeroller. Themeroller merupakan fasilitas yang disediakan oleh jQueryMobile untuk mengganti warna dasar desain tampilan sesuai kebutuhan dengan cara drag & drop. Script hasil modifikasi yang dihasilkan pun dapat diunduh untuk dapat dikembangkan lebih lanjut.

Uniknya, themes untuk tampilan jQueryMobile dapat terdiri dari beberapa kombinasi, sehingga untuk menggunakan jenis themes yang dipilih cukup dipanggil nama class dalam HTML yang bersesuaian.

Themeroller

Tampilan Themeroller

Fitur Unggulan

jQueryMobile dikembangkan dengan core jQuery yang terkenal dengan desain UI nya yang ringan dan lembut, sehingga bisa menggantikan teknologi flash. Kemampuan yang baik untuk layar sentuh seperti pada perangkat-perangkat dengan browser iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook, dan lainnya menambah daya tarik jQueryMobile. Untuk tahu lebih detail tentang dukungan jQueryMobile pada banyak platform populer saat ini, dapat dilihat pada halaman ini.

JQueryMobile juga telah menggunakan markup dasar HTML5 dan CSS3. Desain tampilan yang responsive sangat membantu ketika ditampilkan pada smartphone yang mendukung fitur accelorometer (tampilan otomatis vertikal/horizontal). Fitur-fitur unggulan lain secara terperinci dapat disimak pada halaman ini.

Komponen

Beberapa komponen antarmuka yang disediakan jQueryMobile dengan berbagai macam atributnya diantaranya yaitu seperti pages&dialogs, toolbars, buttons, content formatting, form elements, dan list views. Selain itu, jQueryMobile juga menyediakan beberapa API (application programming interface) bawaan, seperti configuring defaults, events, methods & utilities, data attribute references, dan theme framework. 

Penggunaan Komponen Thumbnail pada JQueryMobile

Salah Satu Contoh Penggunaan Komponen Thumbnail pada JQueryMobile

Menurut penulis, semua komponen tersebut merupakan komponen yang seringkali dibutuhkan dalam membuat sebuah web. Jadi, apabila komponen yang Anda butuhkan tidak tersedia, Anda bisa mengembangkan sendiri. Anda juga dapat ikut memberikan kontribusi untuk ikut membuat komponen lain dan  selanjutnya dapat diarsipkan ke dalam dokumentasi komponen tambahan jQueryMobile.

Contoh Aplikasi Mobile Web Berbasis jQuery Mobile

Saat ini, ada banyak aplikasi mobile web yang sudah menggunakan jQueryMobile dengan sedikit atau banyak modifikasi. Kebetulan di web ofisial jQueryMobile juga ditampilkan beberapa showcase aplikasi mobile yang telah dikembangkan di seluruh dunia, cek di http://www.jqmgallery.com/. Bagi Anda yang ingin memulai mengembangkan mobile web, ada baiknya melihat-lihat showcase tersebut terlebih dahulu sebagai referensi.

contoh web dengan JQueryMobile

Beberapa Contoh Mobile Web dengan JQueryMobile

Konversi ke Aplikasi Native dengan Bantuan PhoneGap

Kabar baik bagi pengembang web, yaitu bahwa jQueryMobile dapat diadopsi menjadi sebuah aplikasi native dengan bantuan PhoneGap. PhoneGap sendiri merupakan framework lain yang lebih kompleks, dimana sebuah aplikasi native dapat dikembangkan layaknya membuat sebuah web biasa. PhoneGap menggunakan basis pemrograman HTML5, CSS, dan Javascript. Kita semua tahu bahwa kombinasi HTML5 dan Javascript akan menjadi tren di masa depan, dimana salah satu fitur yang menarik yaitu dapat melakukan akses hardware.

jQueryMobile Maps

Penggunaan peta (maps) dalam perangkat bergerak sangatlah penting. Para pengembang jQueryMobile juga telah menyiasati hal tersebut dengan mulai membuat dokumentasi cara menampilkan maps untuk tujuan tertentu. Tutorial dan contoh aplikasi jQueryMobile Maps dapat dipelajari pada halaman ini: http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html. Sebagai tambahan, jenis maps yang digunakan pada tutorial tersebut telah menggunakan Google Maps v3, yang merupakan versi Google Maps terbaru.

Kelemahan

Karena jQueryMobile memang dirancang untuk mobile web pada perangkat berlayar sentuh, maka framework ini tidak tepat bila digunakan untuk mendesain sebuah web berbasis desktop. Oleh karena itu, apabila ingin mengembangkan versi mobile web dari web yang sudah ada sebelumnya dan menginginkan tampilan seperti layaknya aplikasi native, maka jQueryMobile bisa menjadi pilihan.

Saat ini beberapa framework yang menyediakan fitur responsive juga kian banyak. Sebuah web yang dari awal diniatkan untuk bisa ditampilkan otomatis ke dalam mobile web dapat dikontrol melalui script Javascript dan CSS. Sehingga seorang developer cukup mengembangkan tampilan web, tidak perlu melakukan coding untuk versi mobile web. Namun, kelemahan teknik responsive ini yaitu tampilannya tidak seperti layaknya aplikasi native.

Penutup

jQueryMobile sendiri mulai populer sekitar tahun 2010 (http://en.wikipedia.org/wiki/JQuery_Mobile). Semenjak saat itu, menurut pengalaman penulis, jQueryMobile sudah beberapa kali melakukan update versi terbarunya. Peningkatan performa, serta penambahan variasi dukungan di sisi scripting jQueryMobile semakin dioptimasi sesuai dengan perkembangan masif performa gadget terkini. Saat artikel ini ditulis, versi final jQueryMobile 1.1 sudah dirilis dan sedang menuju ke versi jQueryMobile 1.2. So, tunggu kapan lagi untuk mencicipi jQueryMobile? :D.

Tag: , ,

7 Comments

Leave Comment
  1. wahy says:

    ini yang bisa di nativin oleh phonegap web bentukan html ya bukan php ??

    • Aditya Rizki says:

      lebih tepatnya HTML dan JavaScript, sepertinya kalau PHP belum support karena PHP harus berjalan di browser (bukan untuk aplikasi native) :D

    • SENDYYeah says:

      sebenarnya bisa dibikin native pake phonegap kok..

      kalau mau bikin PHP, mending tetep web karena di HP atau mobile device tidak terinstall PHP server..

      bener kata mas @buluhijau PHP harus berjalan di PHP server via browser, kalau mau dibikin native ya harus menggunakan client-side programming, bukan server side…

  2. afri says:

    Nah kalo umpama kita punya sebuah database di sebuah pc. lalu kita buat aplikasi dengan jquery mobile tersebut, apa bisa terkoneksi dengan phonegap itu ya?

  3. slz says:

    makasi infonya :)

  4. ugy says:

    mas, misal permasalahannya gini, di file index.php yang diakses melalui web, ketika web tersebut diakses oleh melalui perangkat mobile, dia secara otomatis nge-redirect ke halaman ato folder yg disetting mobile dengan jQuery mobile. Nah sintak yang dituliskan itu gimana? itu masih sy bingungkan, selain penggunaan

    makasih ^^

  5. akbar says:

    kalau mau hilangin alamat browser nya bisa gak gan?
    ane puyeng cari” framework yg cocok, mau ke hybrid tp masih galau.hehe,, bales ke email ane ya gan kalo bisa. makasih

Write Comment

Your email will not be published. The marked label is required.