6Mobile Computing

2 SKSDedy Alamsyah, S.Kom.

Jquery Mobile + HTML 5

Sifat Aplikasi di Perangkat Mobile

Contoh Aplikasi dibangun dengan Jquery Mobile

Apa HTML 5

HTML5 adalah sebuah bahasa mark-up untuk menstrukturkan dan menampilkan isi dari World Wide Web (Web), sebuah teknologi inti dari Internet . HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997[1]) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.HTML5 merupakan salah satu karya Konsortium WWW(World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak]] pembuat web.

Fitur HTML 5

Fitur HTML 5

Fitur HTML 5

Fitur HTML 5

Fitur HTML 5

Fitur HTML 5

Apa Jquery Mobile

jQuery Mobile adalah web framework yang dioptimalkan untuk layar sentuh (dikenal juga sebagai pustaka/librari JavaScript atau framework untuk perangkat mobile) yang saat ini sedang dikembangkan oleh tim proyek jQuery. Pengembangan berfokus dengan menciptakan framework yang kompatibel dengan berbagai macam smartphone dan komputer tablet, yang dibuat akibat fenomena perkembangan perangkat mobile dan tablet yang cukup pesat tetapi sekaligus juga heterogen. Framework Jquery Mobile kompatibel dengan framework mobile lainnya seperti PhoneGap, worklight dan banyak lagi.

Framework yang sudah include sistem navigasi dengan fitur Ajax yang membawa efek animasi pada halaman web, transisi, core dari UI wiget seperti: halaman, dialog, toolbar, listview, button dengan icon, form element, accordion, collapsible , dan banyak lagi

Fitur Jquery Mobile Built on jQuery core for familiar and consistent jQuery syntax and minimal learning curve and

leverages jQuery UI code and patterns. Compatible with all major mobile, tablet, e-reader & desktop platforms - iOS, Android, Blackberry,

Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook and all modern browsers with graded levels of support.

Lightweight size and minimal image dependencies for speed. Modular architecture for creating custom builds that are optimized to only include the features

needed for a particular application. HTML5 Markup-driven configuration of pages and behavior for fast development and minimal

required scripting. Progressive enhancement approach brings core content and functionality to all mobile, tablet and

desktop platforms and a rich, installed application-like experience on newer mobile platforms. Responsive design techniques and tools allow the same underlying codebase to automatically scale

from smartphone to desktop-sized screens. Powerful Ajax-powered navigation system to enable animated page transitions while maintaining

back button, bookmarking and clean URLs through pushState. Accessibility features such as WAI-ARIA are also included to ensure that the pages work for screen

readers (e.g. VoiceOver in iOS) and other assistive technologies. Touch and mouse event support streamline the process of supporting touch, mouse and cursor

focus-based user input methods with a simple API. Unified UI widgets for common controls enhance native controls with touch-optimized, themable

controls that are platform-agnostic and easy to use. Powerful theming framework and the ThemeRoller application make highly-branded experiences

easy to build.

Kompatibilitas Fitur

jQuery Mobile memiliki dukungan luas untuk sebagian besar dari semua desktop modern, smartphone, tablet, dan e-reader platform. Selain itu, fitur ponsel, dan browser lama yang di support jQuery Mobile memiliki dukungan luas untuk sebagian besar dari semua desktop modern, smartphone, tablet, dan e-reader platform.

Jquery Mobile membagi 3 kategori Sistem Platform Yang disupport1. Kategori A (Full Fitur)2. Kategori B (Full minus Ajax)3. Kategori C (HTML)

Daftar Platform yang didukung Jquery Mobile – Grade A

A-grade - Full enhanced experience with Ajax-based animated page transitions. Apple iOS 3.2*-6.0 - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), iPad 3 (5.1 / 6.0), original

iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.1 / 6.0) Android 2.1-2.3 - Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S

(2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5) Android 3.2 (Honeycomb) - Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM Android 4.0 (ICS) - Tested on a Galaxy Nexus. Note: transition performance can be poor

on upgradeddevices Android 4.1 (Jelly Bean) - Tested on a Galaxy Nexus and Galaxy 7 Windows Phone 7-7.5 - Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia

800 Blackberry 6.0 - Tested on the Torch 9800 and Style 9670 Blackberry 7 - Tested on BlackBerry® Torch 9810 Blackberry Playbook (1.0-2.0) - Tested on PlayBook Dll

http://jquerymobile.com/demos/1.2.0/docs/about/platforms.html

Daftar Platform yang didukung Jquery Mobile – Grade B

B-grade - Enhanced experience except without Ajax navigation features.

Blackberry 5.0*: Tested on the Storm 2 9550, Bold 9770

Opera Mini 7 - Tested on iOS 5.1 and Android 2.3

Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)

Daftar Platform yang didukung Jquery Mobile – Grade C

C-grade - Basic, non-enhanced HTML experience that is still functionalBlackberry 4.x - Tested on the Curve 8330

Windows Mobile - Tested on the HTC Leo (WinMo 5.2)

Arsitektur Aplikasi Mobile Berbasis Web

LAN Internet

Tool yang harus disiapkan untuk membangung aplikasi berbasis Jquery Mobile

1. Web Server (Apache , IIS)

2. PHP, ASP

3. Database (MySQL, SQL Server, dll)

4. Jquery Mobile (http://jquerymobile.com/)

5. Editor (Notepad ++, Dreamweaver, Netbeans, Visual Studio)

6. Browser Firefox, Chrome, IIS 7+

Getting Started

Membuat Listview

Membuat Slider

Membuat Tombol

Fasilitas Theming dengan Theme Roller

www.jquerymobile.com/themeroller

Theme Roller untuk Jquery Mobile

Q & A