Desain Aplikasi Ponsel / Panduan Pemula Pengembang untuk jQuery Mobile

Selama 2-3 tahun terakhir kami telah melihat pertumbuhan luar biasa dalam dukungan browser dan OS untuk situs web seluler. Terutama iOS Apple dan platform Android Google datang ke pikiran. Tetapi yang lain seperti PalmOS dan Blackberry masih dalam campuran. Sampai saat ini sangat sulit untuk mencocokkan satu tema seluler ke semua platform ini.

JavaScript adalah permulaan, tetapi sampai sekarang belum ada perpustakaan yang benar-benar bersatu. jQuery Mobile mengambil semua fitur terbaik jQuery dan memindahkannya ke sumber web berbasis seluler. Perpustakaan lebih seperti kerangka kerja yang mencakup animasi, efek transisi, dan gaya CSS otomatis untuk elemen HTML dasar. Dalam panduan ini saya berharap untuk memperkenalkan platform dengan cara yang Anda bisa merasa nyaman merancang aplikasi seluler jQuery Anda sendiri.

Fitur & Dukungan OS

Alasan saya menyarankan belajar jQuery Mobile di atas kerangka kerja lain adalah kesederhanaan. Kode ini dibangun di atas inti jQuery dan memiliki tim pengembang aktif yang menulis skrip dan mengedit bug. Dari sekian banyak fitur termasuk dukungan HTML5, tautan navigasi bertenaga Ajax, dan penangan event sentuh / gesek.

Dukungan bervariasi di antara ponsel dan dipecah menjadi bagan 3 kategori dari A-C. A adalah tingkat teratas yang menawarkan dukungan penuh dari jQuery Mobile, B memiliki segalanya kecuali Ajax sementara C adalah HTML dasar dengan sedikit-ke-tanpa JavaScript. Untungnya sebagian besar sistem operasi populer didukung sepenuhnya - saya menambahkan daftar di bawah ini hanya beberapa contoh.

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• Windows Phone 7
• Blackberry 6.0, Blackberry 7
• Palm WebOS 1.4-2.0, 3.0

Jika Anda ingin mempelajari lebih lanjut, coba baca di halaman dokumen resmi mereka. Itu tidak ditulis dalam omong kosong dan sebenarnya terasa sangat mudah untuk diikuti. Sekarang mari kita fokus pada dasar-dasar penulisan halaman ponsel jQuery dan bagaimana kita dapat membangun aplikasi kecil!

Template HTML Standar

Agar aplikasi seluler pertama Anda berfungsi ada template yang harus Anda mulai. Ini termasuk kode dasar jQuery bersama dengan JS seluler dan CSS, semua eksternal di-host dari CDN jQuery. Lihat contoh kode saya di bawah ini.

Satu-satunya unsur asing di sini adalah dua tag meta. Atas viewport tag memperbarui browser seluler untuk menggunakan efek pembesaran penuh. Pengaturan nilai width = lebar perangkat akan mengatur lebar halaman persis lebar layar ponsel. Dan yang terbaik dari semuanya itu tidak menonaktifkan fitur zoom karena jQuery Mobile dapat beradaptasi dengan pergeseran tata letak.

Tag meta berikutnya Kompatibel dengan X-UA hanya memaksa Internet Explorer untuk membuat HTML dalam iterasi terbaru. Peramban yang lebih lama dan terutama seluler akan mencoba mengatasi bug rendering yang tidak dikenal.

Membangun Konten Tubuh

Sekarang di sinilah jQuery mobile bisa menjadi rumit. Setiap halaman HTML tidak harus 1 halaman di situs seluler. Kerangka kerja ini menggunakan atribut data HTML5, yang dapat Anda buat sesaat dengan menambahkan data- sebelumnya. Dengan cara yang serupa data-role = "halaman" dapat diatur ke beberapa div dalam satu file HTML, memberi Anda lebih dari satu halaman.

Anda kemudian akan berpindah di antara halaman-halaman ini dengan tautan jangkar dan ID unik. Pengaturan ini adalah ide bagus untuk aplikasi dasar dan sederhana. Jika Anda hanya perlu 3-5 halaman, mengapa tidak menyimpannya dalam satu file? Kecuali Anda memiliki banyak konten tertulis, dalam hal ini coba gunakan PHP termasuk untuk menghemat waktu.

Periksa contoh kode di bawah ini jika Anda tersesat.

 
 
 
Bilah judul atas
 
 
 
Tampilkan halaman lain??
 
petunjuk: klik tombol di bawah ini!
 
Tentang kami
 
  
 
 
 
Halaman 2 Di Sini
 
 
 
hanya beberapa konten tambahan juga.
 
Maksudku, kamu bisa kembali kapan saja.
 
 
   

Lihatlah tautan jangkar dari halaman indeks sejenak. Perhatikan saya menambahkan atribut data-role = "tombol" untuk mengatur tautan sebagai tombol. Tetapi alih-alih menggunakan gaya default yang kami sertakan data-theme = "c". Ini beralih di antara 1 dari 5 (tema a-e) templat yang datang dikemas secara default sebagai gaya CSS dalam jQ Mobile.

Tombol saya juga menjangkau seluruh lebar halaman. Untuk menghapus perilaku, kita perlu mengatur elemen dari blok ke tampilan inline. Atribut untuk melakukan ini adalah data-inline = "true" yang dapat Anda tambahkan ke tombol jangkar apa pun.

Header dan Footer Bars

Di bagian paling atas dan bawah aplikasi Anda, Anda harus menambahkan konten header dan footer. Gaya desain ini sering dikaitkan dengan aplikasi iOS yang pertama kali menjadi populer menggunakan App Store seluler Apple. jQ Mobile menggunakan atribut peran data untuk menentukan header, footer, dan konten halaman. Mari kita lihat sekilas bidang-bidang ini.

Tombol Bilah Top

Secara default bilah atas mendukung satu set dua (2) tautan dengan cara yang mirip dengan aplikasi seluler lainnya. iOS default untuk menggunakan a “kembali” tombol ke kiri dan sering sebuah “pilihan” atau “konfigurasi” di kanan.

 
 Pengaturan 
Halaman 2 Di Sini
 
 

Kode di atas hanya berfokus pada wadah div untuk halaman Tentang kami bersama dengan konten tajuk. Atribut HTML tambahan data-add-back-btn = "true" hanya akan berfungsi bila ditambahkan ke peran data halaman. Tujuannya adalah untuk secara otomatis memasukkan tombol kembali yang berfungsi mirip dengan tombol kembali browser Anda.

Kami bisa menambahkan tombol kembali secara manual dengan kode yang sama seperti yang kami gunakan di area konten. Tetapi saya merasa ini membutuhkan waktu lebih lama untuk pemasangan terutama pada banyak halaman. Semua tautan jangkar dalam bagian tajuk akan default ke posisi tombol kiri / kanan. Dengan menggunakan class = "ui-btn-right" ini memposisikan kembali tombol Pengaturan saya sehingga ada ruang kosong untuk tombol kembali. Saya juga menggunakan gaya tema sekunder untuk memberikan sedikit keberanian tambahan!

Navigasi Footer

Area footer banyak yang tidak terasa sangat berguna pada awalnya. Ini adalah tempat di mana Anda dapat menyimpan hal-hal hak cipta dan tautan yang lebih penting, tetapi ini dapat dengan mudah ditambahkan di bagian bawah area konten Anda. Jadi apa gunanya menggunakan catatan kaki?

Nah contoh terbaik yang saya lihat menggunakan ruang footer sebagai sistem navigasi di mana tautan tab muncul untuk mengontrol navigasi halaman. Ada banyak opsi di mana Anda dapat memilih efek layar penuh, menambahkan ikon, menyesuaikan penempatan, dan beberapa atribut lainnya juga. Tapi mari kita buat footer nav sederhana dengan 3 tombol untuk mendapatkan ide bagaimana ini bekerja.

• Pratinjau Demo Langsung

Jadi di sini adalah beberapa kode footer untuk bagian halaman tentang. data-role = "navbar" harus ditambahkan ke dalam wadah elemen yang berisi daftar tidak berurutan dan BUKAN elemen UL itu sendiri. Setiap tautan dalam daftar diperlakukan sebagai bilah tab, yang kemudian dibagi berdasarkan jumlah total tautan. Kelas tambahan ui-tubuh-b hanya menambahkan efek estetika saat kami beralih di antara beberapa gaya yang tersedia.

Jika Anda perhatikan pada tombol pertama saya memiliki atribut arah data = "mundur". Meskipun saya bisa menggunakan pengaturan tombol kembali seperti sebelumnya untuk kembali ke halaman rumah, saya malah menggunakan ID halaman #indeks. Secara default, jendela aplikasi akan bertransisi ke kanan yang terlihat cukup norak karena Anda berharap animasi bergerak mundur. Anda dapat bermain-main dengan lebih banyak efek animasi ini jika Anda punya waktu. Lihat halaman info transisi di dokumentasi jQuery.

Ajax & Halaman Dinamis

Segmen pertama benar-benar membuka poin utama untuk membangun aplikasi seluler dengan jQuery. Tapi saya ingin memulai aplikasi baru yang memuat data dari halaman eksternal. Saya akan menggunakan skrip PHP yang sangat sederhana untuk mencapai $ _REQUEST [] variabel dan menampilkan bidikan Dribbble kecil sesuai. Tangkapan layar di bawah ini seharusnya memberi Anda gambaran tentang apa yang akan kami buat.

Pertama saya akan membuat halaman index.html diatur pada template default. Untuk layar beranda ini saya menggunakan pengaturan tampilan daftar untuk menampilkan setiap tautan secara berurutan. Ini dilakukan di area konten dengan a data-role = "listview" atribut pada daftar kontainer. Memotong hal-hal header yang sama seperti sebelumnya, saya menambahkan semua kode saya dari halaman indeks baru di bawah ini.

 
 
 
Oktober 2011 Tembakan
 
 
 
 
Gambar pertama
 
Gambar kedua
 
Gambar ketiga
 
Gambar keempat
 
 
  
   

Setiap tautan jangkar di tampilan daftar saya mengarah ke file yang sama - index.php. Tapi kami melewati parameter imgid sebagai variabel permintaan. Pada file image.php kita mengambil ID dan mengujinya terhadap 4 nilai yang telah ditetapkan. Jika ada kecocokan kami menggunakan URL dan judul gambar yang cocok, jika tidak kami hanya menampilkan bidikan Dribbble default.

Script Pemuat Gambar

Skrip image.php masih memiliki templat seluler jQuery default yang ditambahkan ke dalam kode. Ini sebenarnya berbagi header dan footer yang sangat mirip, kecuali untuk penambahan atribut back link kami data-add-back-btn = "true". Perhatikan tombol ini hanya akan muncul jika kita berasal dari index.html dulu! Coba langsung memuat image.php dan tidak ada yang akan muncul karena tidak ada “kembali” untuk pindah ke.

Saya pikir kita bisa lebih memahami kode dengan memeriksa logika PHP saya terlebih dahulu. Kami menggunakan a beralih / kasus metode untuk memeriksa 4 ID yang berbeda dan memberikan judul header, URL gambar, dan tautan sumber artis asli.

Semua tampak cukup mudah - bahkan pengembang PHP pemula harus dapat mengikuti! Dan jika Anda tidak mengerti itu tidak penting untuk kode jQuery, jadi jangan khawatir. Kita harus beralih sekarang dan melihat template yang saya buat di halaman baru ini. Semua kode HTML ditambahkan setelah seluruh blok PHP di atas. Saya menggunakan ID dari “gambar” untuk wadah dan bahkan mengatur tajuk untuk berubah dengan setiap foto baru.

 
 
 
 
 
 Lihat yang Asli
 
 
  
 

Anda mungkin dapat melihat betapa sederhananya demo ini. Tetapi seluruh tujuannya adalah untuk menunjukkan skalabilitas ponsel jQuery. PHP dapat dengan mudah ditambahkan ke dalam campuran dan Anda dapat membuat beberapa aplikasi yang sangat rapi hanya dengan beberapa jam pengembangan.

Desain Mewah dengan Thumbnail Daftar

Satu efek tambahan terakhir yang dapat kami terapkan adalah penggunaan thumbnail untuk menghidupkan halaman listing. Saya juga akan membagi teks menjadi kotak judul dan deskripsi untuk menampilkan judul karya seni dan nama artis.

Untuk mulai membuka Photoshop dan membuat dokumen 80 × 80 px. Saya akan dengan cepat mengubah ukuran setiap gambar dan menyimpan gambar mini agar sesuai dengan masing-masing gambar. Kemudian memperbarui item tampilan daftar kami harus menyertakan beberapa elemen lagi.

Lihat kode di bawah ini dan contoh demo saya untuk melihat apa yang saya maksud.

[Pratinjau Demo Langsung]

 
 
  
Tugas Wunderkit
 
oleh Sebastian Scheerer
 
  
Colleeeeeeeeeeeeeeege
 
oleh Scott Hill
 
  
Aplikasi forum untuk Facebook
 
oleh Ionut Zamfir
 
  
Kericau
 
oleh Sam Jones
 
 
 

Kelas untuk ui-li-heading dan ui-li-desc ditambahkan secara default ke dalam stylesheet jQuery Mobile. Ini mirip dengan kelas gambar ui-li-jempol yang secara otomatis menata ulang setiap bilah tampilan daftar sesuai dengan tinggi gambar. Sekarang dari sini Anda dapat membangun lebih banyak di frontend dengan animasi, efek halaman, stylesheet, dll.

Atau sebagai alternatif Anda dapat mulai membangun sistem backend untuk mengunggah gambar baru dan secara otomatis memotong thumbnail untuk dimasukkan dalam daftar. Ada begitu banyak fleksibilitas dengan jQuery Mobile sehingga Anda hampir tidak dapat menandainya hanya sebagai pustaka JavaScript. Ini lebih dari keseluruhan kerangka HTML5 / CSS / jQuery untuk membangun aplikasi seluler yang cepat dan dapat diskalakan.

Kesimpulan

Saat menulis artikel ini tim jQuery Mobile telah secara resmi mengeluarkan RC1.0 dari perpustakaan kode. Ini berarti kebanyakan jika tidak semua perbaikan bug utama telah terjepit dan sekarang penguji bersiap untuk rilis penuh. Karena itu, Anda tidak akan menemukan banyak informasi di web.

Namun seiring berbulan-bulan yang lalu, pengembang web yakin untuk mengikuti tren. Aplikasi seluler dan bahkan tata letak web seluler semakin populer dengan peningkatan besar dalam smartphone. Pengembang web tidak punya waktu untuk mempelajari bahasa pemrograman penuh untuk membangun aplikasi Android / iOS. Dengan demikian jQuery Mobile adalah alternatif tipis yang mencakup dukungan untuk sebagian besar perangkat lunak industri seluler, dan terus bertambah setiap hari dengan komunitas pengembang aktif.