jquery mobile introduction
DESCRIPTION
jQuery Mobile IntroductionPresented at Dutch Mobile Conference, June 9, 2012www.mobileconference.nlLevel: beginnerTRANSCRIPT
jQuery Mobile!
Dutch Mobile Conference 2012!June 9!
Introduction!• Joris Graaumans!• Lecturer @ Fontys University of Applied
Sciences!• Bachelor's program ICT & Media Design!– web development!– interaction & visual design!– media strategy!
!
What keeps me busy?
Agenda
• Teaching web development • What is jQuery Mobile? • jQuery Mobile Demo
Teaching Web Development
• HTML / CSS / JavaScript • PHP / Web APIs • Mobile web • Augmented / Virtual Reality • Flash AcJonScript 3.0
What is jQuery Mobile?
"A unified user interface system that works seamlessly across all popular mobile device pla4orms, built on the rock-‐solid jQuery and jQuery UI foundaJon."
• Started in August 2010 • Current version: 1.1.0 – April 13, 2012 • jquerymobile.com
6
Design principles
• User Interface System – Mobile Web ApplicaJons – HTML5 based
• One single app or site – All popular mobile device pla\orms – Tested on a large set of devices and pla\orms
Design principles
• "Super easy to use" – SemanJc markup – Use regular HTML with data-‐* a^ributes
• Flexible – Themes – CSS styles – ScripJng
Examples ...!
jQuery Mobile Examples
m.venraybloeit.nl/test
cultuurbewust.nl
All platforms?!
Test setup ...
Cultuurbewust.nl
test.bertvanelswijk.nl
jQuery Mobile How To!
jQuery How To
• pages – content – header – footer
• list views • page transiJons • navigaJon bars • forms • events
index.html
• Simple page • Fixed header and footer • Theming
index2.html
Typically used for navigaJon between pages • Basic <ul> and <li> elements • Listviews – data-‐role="listview" – inset appearance: data-‐inset="true"
• Listheaders – data-‐divider-‐theme (on the <ul> element)
index3.html
• TransiJons between pages • Links: <a href="#idOfThePage"> ... </a>!• Links are loaded with Ajax by JQM – page transiJons
• Dialogs: no history & pop-‐up • Different transiJon types (pop, slide, etc)
index4.html
• NavigaJon bar: data-role="navbar" • NavigaJon bu^ons, Go back, Go Home • Icons – data-‐icon="home" – data-‐icon="arrow-‐l" – data-‐icon="plus" – data-‐icon="back" – etc.
index5.html
• Forms • Use regular HTML5 Forms • Improve styling – data-‐role="fieldcontain"
• Group a set of controls – data-‐role="controlgroup"
ScripJng
• Pageinit / pageshow events • Form submit • Page transiJon • index6.html
LimitaJons of jQuery Mobile
• Try it and find out • Performance • jQuery Mobile does not try to mimic – iOS – Android – Windows
• NaJve app? – Use PhoneGap as a wrapper.
Conclusions
• jQuery Mobile is super easy to use – declaraJve style – not very different from wriJng regular HTML
• Builds on HTML / JQuery / jQuery UI • Go and give it a try!
References
• h^p://jquerymobile.com/demos/1.1.0/docs/about/gemng-‐started.html
• h^p://jquerymobile.com/themeroller/
• Tool for a quick GUI setup: h^p://codiqa.com/
Please fill in this survey
h^p://Jnyurl.com/appuex
Contact
• [email protected] • @JorisGraaumans