Mudahnya Membangun Mobile Site dengan jQuery Framework Mobile

Populasi dan perkembangan teknologi ponsel, berdampak cukup besar pada dunia programming. Yang tadinya kita hanya berkutat memikirkan pemenuhan kebutuhan di web yang diakses dengan komputer maupun laptop saja, kini kita harus memikirkan bagaimana agar website yang kita buat juga dengan mudahnya bisa diakses secara mobile. Untuk website yang memiliki banyak content tulisan, gambar serta video rasanya akan sangat sulit untuk 'memaksakan' agar website yang kita miliki saat ini bisa kompatibel bila diakses dengan ponsel manapun. Salah satu alasannya karena keterbatasan yang ada pada perangkat mobile akan menghambat loading halaman tersebut. Alhasil, website yang tadinya loadingnya cepat diakses melalui komputer, malah akan sangat lambat atau malah tidak bisa dibuka di mobile saking lambatnya, sekalipun yang mengakses tersebut merupakan 'jajaran ponsel pintar'.

Ada solusi untuk masalah ini? Tentu saja. Kenapa tidak membuat website berbasis mobile? Tidak punya banyak waktu untuk pengerjaannya? Serahkan saja keluhan Anda pada jQuery Framework Mobile yang mana akan membantu Anda menghemat waktu dalam mengerjakannya, sekaligus Anda bisa membuat animasi-animasi agar website mobile terlihat lebih ciamik. Dalam tutorial kali ini, kita akan belajar bagaimana menggunakan framework tersebut dengan langkah-langkah yang sangat mudah diikuti. Yuk simak lebih lanjut.

Langkah 1

Buatlah HTML sederhana yang mana di bagian Head, tambahkan link ke source JS dan CSS-nya seperti berikut ini

<link rel='stylesheet' href='http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css' />
<script src='http://code.jquery.com/jquery-1.4.4.min.js' ></script>
<script src='http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js' ></script>

Langkah 2

Framework jQuery Mobile ini memungkinkan Anda untuk mendesain web dengan tag HTML biasa maupun HTML5, namun Anda harus mengingat bahwa penggunaannya harus disertakan atribut data seperti data-role, data-theme dan lain sebagainya. Selanjutnya tambahkan kode berikut ini pada bagian Body HTML.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>jQuery Mobile Framework</title>
        <link rel='stylesheet' href='http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css'  />
        <script src='http://code.jquery.com/jquery-1.4.4.min.js' ></script>
        <script src='http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js' ></script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header" data-theme="b">
                <h1>WWW.DISKUSIWEB.COM</h1>
            </div>
 
            <div data-role="content">
                <ul data-role="listview" data-theme="c">
                    <li><a href="#"  data-transition="flip"><h2>Mengenal MongoDB, Open Source Database NoSQL Document-Oriented</h2>     
                    <li><a href="#"  data-transition="flip"><h2>7 Plugin Firefox yang Wajib Dimiliki Para Web Developer</h2></a></li> 
                    <li><a href="#"  data-transition="flip"><h2>Membuat SpreadSheet Online Dengan dhtmlxSpreadSheet</h2></a></li> 
                    <li><a href="#"  data-transition="flip"><h2>Kendo UI, Framework HTML5 Dibundel JQuery dan CSS3</h2></a></li>      
                    <li><a href="#"  data-transition="flip"><h2>Membuat Pretty URL Sederhana Pada ASP.NET 4.0</h2></a></li> 
                    <li><a href="#"  data-transition="flip"><h2>Deteksi Perangkat Mobile Dengan Javascript Sederhana</h2></a></li> 
                </ul>
            </div>
 
            <div data-role="footer" data-theme="a">
                <h3>Komunitas Teknologi Indonesia</h3>
            </div>
        </div>
    </body>
</html>

Maka nantinya halaman web mobile yang Anda buat, akan tampil seperti ini.

Langkah 3

Untuk mempercantik menu navigasi halamannya, akan lebih bagus kalau kita menambahkan descripsi dan juga counter semisalnya untuk jumlah komentar atau page view. Untuk mencobanya silahkan edit kembali salah satu judul menu di atas dengan menambahkan kode berikut ini.

<li>
    <a href="#"  data-transition="flip">
    <h2>Kendo UI, Framework HTML5 Dibundel JQuery dan CSS3</h2></a>
    <p>Ini dia framework HTML5 yang sudah diintegrasikan dengan jQuery dan dirancang dengan CSS3</p>
    <span class="ui-li-count">17</span>
</li>

Setelah Anda tambahkan, maka akan tampil seperti berikut.

Langkah 4

Anda bisa memilih theme yang sudah ada pada jQuery Mobile misalnya dengan meletakkan elemen data-theme yang diisi dengan value a,b,c,d,e. Kabarnya ke depannya akan ditambahkan pula theme sehingga Anda bisa memilih lebih banyak theme berurutan dari a-z. Untuk mengetahui theme yang sesuai, Anda bisa melihat gambar berikut ini.

Langkah 5

Untuk dapat membuat animasi dari setiap perpindahan halaman, akan lebih bagus kalau Anda tambahkan animasi menggunakan elemen data-transition yang mana sudah terdapat pilihan jenis animasinya yaitu seperti slide, slidedown, slideup, flip, pop serta fade. Cara menambahkannya cukuplah mudah hanya dengan langkah seperti ini.

<a href="#slide" data-transition="slide">Deteksi Perangkat Mobile Dengan Javascript Sederhana</a>

Nah, cukup sederhana bukan? Sudah ada themenya juga tinggal dimodifikasi sesuai kebutuhan Anda. Selamat mencoba

Posted by Iskandar