1 / 15

JQuery Mobile

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.

kalin
Télécharger la présentation

JQuery Mobile

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JQuery Mobile NamaKelompok: Ely Chusniah R S (7408040003) FathanMustaqim(7408040007) AndiasCahya U(7408040013) www.themegallery.com

  2. Outline 1 Introduction 2 Features Accesibility 3 Supported Platforms 4 5 Components 6 API

  3. Introduction • StrategidariJQuery mobile adalahmembuat web mobile yang dapatdiringkasdengansederhana. • JQuery mobile adalahantarmuka user yang dapatdenganbaikbekerjapadasemua platform perangkat mobile yang populersaatini. • JQuery mobile dikembangkandariJQuerydanJQuery UI yang handal • FokusJQuery mobile pada basis kode yang ringandibangundenganpeningkatanprogresif yang fleksibel, danmudahdalamdesaintema http://jquerymobile.com/demos/1.0/

  4. Introduction • JQuery mobile dibangun agar dapatberinteraksidengan platform perangkat mobile secaraluas • JQuery mobile dikembangkanuntukdapatberintegrasidenganseluruh browser mobile yang ada • Denganbegitu, browser mobile seolah-olahdapatseperti browser komputer • JQuery mobile menyediakan widget antarmuka user dandidukungsistemnavigasi AJAX untukmendukunganimasitransisihalaman http://jquerymobile.com/demos/1.0/

  5. Introduction • Template halamandasarmenggunakanJQuery 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> http://jquerymobile.com/demos/1.0/

  6. Introduction <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> http://jquerymobile.com/demos/1.0/

  7. Features Fitur – fiturutamajQuery mobile : • Built on jQuery core, supaya syntax jQuerykonsistendan familiar danmemanfaatkanjQuery UI code dan pattern • Compatible dengansemua mobile, tablet, e-reader & desktop platforms – IOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook, dansemua browser modern dinilaidengantingkatdukungan • Ukuran yang ringan, dandependensigambar yang minimal untukkecepatan. • Modular arsitektur, untukmeng-create custom builds yang dioptimalkanhanyafitur yang dibutuhkanuntukaplikasitertentu (particular application) • HTML5 Markup-driven, konfigurasihalamanuntukpengembangan yang cepatdan scripting yang diperlukan minimal • Progressive enhancement, membawakontenintidanfungsionalitasuntuksemua mobile, tablet dan desktop platform danmenginstalaplikasisepertipengalamanpada platform mobile baru. http://jquerymobile.com/demos/1.0/

  8. Features • Responsive design techniques and toolsmemungkinkan codebase yang samauntuksecaraotomatisskaladarismartphoneke desktop-sized screens. • Powerful Ajax-powered navigation systemuntukmengaktifkananimasi page transitions sambil back button, bookmarking danmembersihkan URL. • Accessibility features, seperti WAI-ARIA juga included untukmemastikanbahwa pages bekerjauntuk screen readers (misalnyaVoiceOverdalam IOS) danteknologipendukunglainnya. • Touch and mouse event support, merampingkanprosesmendukung touch, mouse, dankursor focus yang berbasisinputanpenggunadengan API sederhana. • Unified UI widgets, untuk common control aslidengan touch yang dioptimalkan, themable controls yang platform-agnosticdanmudahdigunakan • Powerful theming framework danaplikasiThemeRollermembuatpengalaman highly-branded yang mudahuntukdidiciptakan http://jquerymobile.com/demos/1.0/

  9. Accesibility • Dengantujuanuntukmembuatsebuah web framework dengankemampuanlayarsentuhuntukpenggunaan tablet danjugasmartphone, jQuery Mobile telahmenjadisatusatunyaproyek yang memilikimasadepan, memilikipotensiakan cross-platform, cross-device web development untukpengguna mobile browsers ketahap yang lebihcanggih • Sebagaimanasemakinbanyakpara developer mulaimembangunaplikasiberbasis HTML5, sebuah mobile JavaScript framework yang solid tentunyaakanmembuatmasingmasing platform inibersinergidenganbaik • Denganteknologi HTML5 danJavascriptsertadidukung CSS, JQuery Mobile dapatberjalandiperangkat mobile baikponselmaupunsmartphone yang didukungdengan browser HTML5 • Bagi yang terbiasamembuataplikasi web menggunakanJQuery, tentusangatmudahbermigrasikeJQuery Mobile, karenapadaprinsipnyaadalahsamadaninihanyapenambahanfitursaja, sehingga pas padaperangkat mobile http://jquerymobile.com/demos/1.0/

  10. Supported Platforms • JQuery mobile telahmendukunghampirseluruh desktop, smartphone, tablet danperangkat e-reader • Dukungan platform terhadapJQuery mobile dapatdibagimenjadi 3 tingkat, antara lain : - Tingkat A (dukunganpenuh) - Tingkat B (dukunganpenuhtanpa AJAX) - Tingkat C (dukunganstandar) • Visual yang ditampilkanketikamenggunakanJQuery mobile sangattergantungkemampuan rendering CSS dan platform perangkat http://jquerymobile.com/demos/1.0/

  11. Supported Platforms • Tingkat A (dukunganpenuhdengananimasitransisihalaman 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 XOOM Windows 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 9670 Blackberry 7 - Tested on BlackBerry® Torch 9810 Blackberry Playbook - Tested on PlayBook version 1.0.1 / 1.0.5 Palm WebOS (1.4-2.0) - Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0) http://jquerymobile.com/demos/1.0/

  12. Supported Platforms Palm WebOS 3.0 - Tested on HP TouchPad Firebox Mobile (Beta) - Tested on Android 2.2 Opera 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 N9 Kindle 3 and Fire: Tested on the built-in WebKit browser for each Chrome Desktop 11-15 - Tested on OS X 10.6.7 and Windows 7 Firefox Desktop 4-8 - Tested on OS X 10.6.7 and Windows 7 Internet 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 http://jquerymobile.com/demos/1.0/

  13. Supported Platforms • Tingkat B (dukunganpenuhtanpafiturnavigasi AJAX) Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770 Opera Mini (5.0-6.0) - Tested on iOS 3.2/4.3 Nokia 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 8330 Windows 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 tidakdidukung Samsung Bada http://jquerymobile.com/demos/1.0/

  14. Components • Beberapajeniskomponen yang disediakandanmendapatdukungandariJQuery Pages dan dialogs Toolbars Buttons Content formatting Form elements List views • Beberapajenis API yang disediakandanmendapatdukungandariJQuery Events Method dan utilities Data attribute reference Theme framework http://jquerymobile.com/demos/1.0/

  15. Thank You! www.themegallery.com

More Related