jQuery Mobile Introduction Presented at Dutch Mobile Conference, June 9, 2012 www.mobileconference.nl Level: beginner

1. jQuery Mobile!
Dutch Mobile Conference 2012!
June 9!

2. Introduction!
• Joris Graaumans!
• Lecturer @ Fontys University of Applied
Sciences!
• Bachelor's program ICT & Media Design!
– web development!
– interaction & visual design!
– media strategy!
!

3. What
keeps
me
busy?

4. Agenda
• Teaching
web
development
• What
is
jQuery
Mobile?
• jQuery
Mobile
Demo

5. Teaching
Web
Development
• HTML
/
CSS
/
JavaScript
• PHP
/
Web
APIs
• Mobile
web
• Augmented
/
Virtual
Reality
• Flash
AcJonScript
3.0

6. 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

7. Design
principles
• User
Interface
System
– Mobile
Web
ApplicaJons
– HTML5
based
• One
single
app
or
site
– All
popular
mobile
device
plaorms
– Tested
on
a
large
set
of
devices
and
plaorms

8. Design
principles
• "Super
easy
to
use"
– SemanJc
markup
– Use
regular
HTML
with
data-­‐*
a^ributes
• Flexible
– Themes
– CSS
styles
– ScripJng

9. Examples ...!

10. jQuery
Mobile
Examples

11. m.venraybloeit.nl/test

12. cultuurbewust.nl

13. All platforms?!

14. Test
setup
...

15. Cultuurbewust.nl

16. test.bertvanelswijk.nl

17. jQuery Mobile How To!

18. jQuery
How
To
• pages
– content
– header
– footer
• list
views
• page
transiJons
• navigaJon
bars
• forms
• events

19. index.html
• Simple
page
• Fixed
header
and
footer
• Theming

20. 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)

21. 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)

22. 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.

23. index5.html
• Forms
• Use
regular
HTML5
Forms
• Improve
styling
– data-­‐role="fieldcontain"
• Group
a
set
of
controls
– data-­‐role="controlgroup"

24. ScripJng
• Pageinit
/
pageshow
events
• Form
submit
• Page
transiJon
• index6.html

25. 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.

26. 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!

27. 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/

28. Please
fill
in
this
survey
h^p://Jnyurl.com/appuex

29. Contact
• j.graaumans@fontys.nl
• @JorisGraaumans