jquery mobile
DESCRIPTION
JQuery Mobile. Nama Kelompok : Ely Chusniah R S (7408040003) Fathan Mustaqim ( 7408040007) Andias Cahya U(7408040013 ). www.themegallery.com. Outline. 1. Introduction . 2. Features. Accesibility. 3. Supported Platforms. 4. 5. Components. 6. API. Introduction. - PowerPoint PPT PresentationTRANSCRIPT
L/O/G/O
www.themegallery.com
JQuery Mobile
Nama Kelompok:Ely Chusniah R S (7408040003)Fathan Mustaqim (7408040007)Andias Cahya U(7408040013)
www.themegallery.com
Outline
Introduction
Features
Accesibility
Supported Platforms4
1
2
3
Components5
API6
www.themegallery.com
Introduction
http://jquerymobile.com/demos/1.0/
• Strategi dari JQuery mobile adalah membuat web mobile yang dapat diringkas dengan sederhana.
• JQuery mobile adalah antarmuka user yang dapat dengan baik bekerja pada semua platform perangkat mobile yang populer saat ini.
• JQuery mobile dikembangkan dari JQuery dan JQuery UI yang handal
• Fokus JQuery mobile pada basis kode yang ringan dibangun dengan peningkatan progresif yang fleksibel, dan mudah dalam desain tema
www.themegallery.com
Introduction
http://jquerymobile.com/demos/1.0/
• JQuery mobile dibangun agar dapat berinteraksi dengan platform perangkat mobile secara luas
• JQuery mobile dikembangkan untuk dapat berintegrasi dengan seluruh browser mobile yang ada
• Dengan begitu, browser mobile seolah-olah dapat seperti browser komputer
• JQuery mobile menyediakan widget antarmuka user dan didukung sistem navigasi AJAX untuk mendukung animasi transisi halaman
www.themegallery.com
Introduction
http://jquerymobile.com/demos/1.0/
• Template halaman dasar menggunakan JQuery mobile<!DOCTYPE html><html> <head> <title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet“ href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script></head>
www.themegallery.com
Introduction
http://jquerymobile.com/demos/1.0/
<body><div data-role="page">
<div data-role="header"><h1>My Title</h1>
</div><!-- /header --><div data-role="content">
<p>Hello world</p></div><!-- /content -->
</div><!-- /page --></body></html>
www.themegallery.com
FeaturesFitur – fitur utama jQuery mobile :• Built on jQuery core, supaya syntax jQuery konsisten dan familiar dan
memanfaatkan jQuery UI code dan pattern• Compatible dengan semua mobile, tablet, e-reader & desktop platforms – IOS,
Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook, dan semua browser modern dinilai dengan tingkat dukungan
• Ukuran yang ringan, dan dependensi gambar yang minimal untuk kecepatan.• Modular arsitektur, untuk meng-create custom builds yang dioptimalkan hanya
fitur yang dibutuhkan untuk aplikasi tertentu (particular application)• HTML5 Markup-driven, konfigurasi halaman untuk pengembangan yang cepat
dan scripting yang diperlukan minimal• Progressive enhancement, membawa konten inti dan fungsionalitas untuk
semua mobile, tablet dan desktop platform dan menginstal aplikasi seperti pengalaman pada platform mobile baru.
http://jquerymobile.com/demos/1.0/
www.themegallery.com
Features• Responsive design techniques and tools memungkinkan codebase yang
sama untuk secara otomatis skala dari smartphone ke desktop-sized screens. • Powerful Ajax-powered navigation system untuk mengaktifkan animasi page
transitions sambil back button, bookmarking dan membersihkan URL.• Accessibility features, seperti WAI-ARIA juga included untuk memastikan
bahwa pages bekerja untuk screen readers (misalnya VoiceOver dalam IOS) dan teknologi pendukung lainnya.
• Touch and mouse event support, merampingkan proses mendukung touch, mouse, dan kursor focus yang berbasis inputan pengguna dengan API sederhana.
• Unified UI widgets, untuk common control asli dengan touch yang dioptimalkan, themable controls yang platform-agnostic dan mudah digunakan
• Powerful theming framework dan aplikasi ThemeRoller membuat pengalaman highly-branded yang mudah untuk di diciptakan
http://jquerymobile.com/demos/1.0/
www.themegallery.com
Accesibility
http://jquerymobile.com/demos/1.0/
• Dengan tujuan untuk membuat sebuah web framework dengan kemampuan layar sentuh untuk penggunaan tablet dan juga smartphone, jQuery Mobile telah menjadi satu satunya proyek yang memiliki masa depan, memiliki potensi akan cross-platform, cross-device web development untuk pengguna mobile browsers ke tahap yang lebih canggih
• Sebagaimana semakin banyak para developer mulai membangun aplikasi berbasis HTML5, sebuah mobile JavaScript framework yang solid tentunya akan membuat masing masing platform ini bersinergi dengan baik
• Dengan teknologi HTML5 dan Javascript serta didukung CSS, JQuery Mobile dapat berjalan di perangkat mobile baik ponsel maupun smartphone yang didukung dengan browser HTML5
• Bagi yang terbiasa membuat aplikasi web menggunakan JQuery, tentu sangat mudah bermigrasi ke JQuery Mobile, karena pada prinsipnya adalah sama dan ini hanya penambahan fitur saja, sehingga pas pada perangkat mobile
www.themegallery.com
Supported Platforms
http://jquerymobile.com/demos/1.0/
• JQuery mobile telah mendukung hampir seluruh desktop, smartphone, tablet dan perangkat e-reader
• Dukungan platform terhadap JQuery mobile dapat dibagi menjadi 3 tingkat, antara lain :- Tingkat A (dukungan penuh)- Tingkat B (dukungan penuh tanpa AJAX)- Tingkat C (dukungan standar)
• Visual yang ditampilkan ketika menggunakan JQuery mobile sangat tergantung kemampuan rendering CSS dan platform perangkat
www.themegallery.com
Supported Platforms
http://jquerymobile.com/demos/1.0/
• Tingkat A (dukungan penuh dengan animasi transisi halaman AJAX)Apple iOS 3.2-5.0 - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0)Android 2.1-2.3 - Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (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 Honeycomb- Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOMWindows Phone 7-7.5 - Tested on the HTC Surround (7.0) HTC Trophy (7.5), and LG-E900 (7.5)Blackberry 6.0 - Tested on the Torch 9800 and Style 9670Blackberry 7 - Tested on BlackBerry® Torch 9810Blackberry Playbook - Tested on PlayBook version 1.0.1 / 1.0.5Palm WebOS (1.4-2.0) - Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
www.themegallery.com
Supported Platforms
http://jquerymobile.com/demos/1.0/
Palm WebOS 3.0 - Tested on HP TouchPadFirebox Mobile (Beta) - Tested on Android 2.2Opera Mobile 11.0: Tested on the iPhone 3GS and 4 (5.0/6.0), Android 2.2 (5.0/6.0)Meego 1.2 - Tested on Nokia 950 and N9Kindle 3 and Fire: Tested on the built-in WebKit browser for eachChrome Desktop 11-15 - Tested on OS X 10.6.7 and Windows 7Firefox Desktop 4-8 - Tested on OS X 10.6.7 and Windows 7Internet Explorer 7-9 - Tested on Windows XP, Vista and 7 (minor CSS issues)Opera Desktop 10-11 - Tested on OS X 10.6.7 and Windows 7
www.themegallery.com
Supported Platforms
http://jquerymobile.com/demos/1.0/
• Tingkat B (dukungan penuh tanpa fitur navigasi AJAX)Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770Opera Mini (5.0-6.0) - Tested on iOS 3.2/4.3Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)
• Tingkat B (basic)Blackberry 4.x - Tested on the Curve 8330Windows Mobile - Tested on the HTC Leo (WInMo 5.2)All older smartphone platforms and featurephones - Any device that doesn't support media queries will receive the basic, C grade experience
• Yang tidak didukungSamsung Bada
www.themegallery.com
Components
http://jquerymobile.com/demos/1.0/
• Beberapa jenis komponen yang disediakan dan mendapat dukungan dari JQueryPages dan dialogsToolbarsButtonsContent formattingForm elementsList views
• Beberapa jenis API yang disediakan dan mendapat dukungan dari JQueryEventsMethod dan utilitiesData attribute referenceTheme framework
L/O/G/O
www.themegallery.com
Thank You!