Slides from my 2011 mLearning DevCon session.

2. Hi! I’m David
About me:
• Senior Web Developer, Southern Bancorp
• Multiple disciplines including: PHP, Javascript, Objective-C ,
MySQL, CSS, HTML, Graphic Design, WordPress and Joomla
themes/modules/plugins/widgets
• <3 building interesting data driven web sites

3. …And YOU?

4. Today’s Sessions
• 9:00am – 12:00pm
– Seven life changing reasons why you should design
for the mobile web
– Why is jQuery so dang cool?
– A Brief History of jQuery
– jQuery Mobile: “What It Do?”
– Creating gorgeous mobile web apps (in about 30 seconds)
– GAMES!

5. Today’s Sessions
• 12:45pm – 4:00pm
– Time to get your hands dirty
– “Hello” + $(“#world”).val() + “!”;
– Toolbars foolbars
– Buttons… and danger
– Creating forms that don’t suck
– Great resources
– Closing arguments + bonus: 24 reasons why I love beer

6. Bribery!

7. Also Learning

8. Seven life changing reasons
why you should design for the mobile web
Reason #1:
By 2014, mobile internet should take over
desktop usage
Source: http://www.digitalbuzzblog.com/2011-mobile-statistics-stats-facts-marketing-infographic/

9. Seven life changing reasons
why you should design for the mobile web
Reason #2:
85% of mobile devices will be web enabled by
2012
Source: http://www.google.com/think/insights/topics/think-mobile.html

10. Seven life changing reasons
why you should design for the mobile web
Reason #3:
More than 50% of U.S. adults will be using a
smartphone by the end of 2011
Source: http://www.google.com/think/insights/topics/think-mobile.html

11. Seven life changing reasons
why you should design for the mobile web
Reason #4:
In a typical week, 81% of smartphone users
will browse the Internet
Source: http://www.google.com/think/insights/topics/think-mobile.html

12. Seven life changing reasons
why you should design for the mobile web
Reason #5:
49% of those who have seen a mobile ad take action. Of
those:
– 49% purchase
– 42% click on the ad
– 35% visit website
Source: http://www.google.com/think/insights/topics/think-mobile.html

13. Seven life changing reasons
why you should design for the mobile web
Reason #6:
29% of smartphone owners in the U.S. have
made an online purchase using their
smartphone
Source: https://docs.google.com/gview?url=http://www.gstatic.com/ads/research/en/2011_Google_MMA_Global_Perspectives.pdf&chrome=true

14. Seven life changing reasons
why you should design for the mobile web
Reason #7:
Everybody’s doing it: “We understand that the
new rule is ‘Mobile First.’ ” ~ Eric Schmidt,
Google CEO

15. “OK OK OK! I get it.”

16. Why is jQuery so dang cool?
• jQuery makes writing Javascript almost effortless
– DOM selectors! $(“li.navigation”)
– Daisy chain events and commands
$(“li.navigation”).click(function() {
alert(‘You clicked me!’);
}).mouseover(function() {
alert(‘You moused over me!’);
}).css(‘color’, ‘red’);
– Automaticly cross-browser compatible (mostly)

17. Why is jQuery so dang cool?
• jQuery is used…. a lot… by a lot of people. This
means:
– Extensive cache of plugins and themes that you can straight-up
jack from jQuery.com for use in your mobile site.
– Quick and easy access to help from websites like
stackoverflow.com

18. A brief history of jQuery
2005:
John Resig posts about improving upon Behaviour.js
methods. Description of jQuery by Behaviour.js
website: “Jquery is like behaviour that has been sent
back from the future by a secret f$%# government
lab”

19. A brief history of jQuery
2006:
• jQuery announced at BarCampNYC and world rejoices
• jQuery 1.0 released
2007:
• Plugin repository created
• jQuery UI announced

20. A brief history of jQuery
2008:
• jQuery UI release candidate made available
2009:
• Boring
2010
• jQuery Mobile project announced and world rejoices once
more

21. jQuery Mobile: “What It Do?”

22. jQuery Mobile: “What It Do?”
The company line: “A unified user interface system that
works seamlessly across all popular mobile device
platforms, built on the rock-solid jQuery and jQuery
UI foundation. Focused on a lightweight codebase
built on progressive enhancement with a flexible,
easily themeable design.”

23. jQuery Mobile: “What It Don’t?”
ALERT! You should probably stay away from developing with jQuery Mobile for these devices:
Blackberry 4.x
All older smartphone platforms and feature phones
Any device that doesn’t support media queries
MeeGo – Originally a target platform, but Nokia decision to relegate this platform to
“experimental”, the good folks at jQuery are considering dropping support.
Samsung Bada – The project doesn’t currently have test devices or emulators although so far
it’s showing good support. No guarantee of future support.

24. Creating gorgeous mobile web apps
(in about 30 seconds)
1. Open our example files folder and go to /like_a_boss/
2. Open index.html and check it out.
3. Open index.html in your favorite text editor
4. Edit line #23:
<div data-role="page" id="main_page">
5. Change to:
<div data-role="page" id="main_page" data-theme="e" data-content-theme="e">
6. Save and reopen
7. BAM!

25. Let’s get to work!
“Hello” + $(“#world”).val() + “!”;
1. Open our example files folder and go to /helloworld/
2. Open index.html and check it out
3. Open index.html in your favorite text editor
4. Create new page containing text “Hello World!”
5. Create button to link to that page
1. Use data-role=“button”
6. Save that bad boy

26. Let’s get to work!
Toolbars foolbars
1. Open our example files folder and go to /foolbars/
2. Open index.html and check it out
3. Open index.html in your favorite text editor
4. Learn more about buttons and come back 
5. Add buttons to toolbar like so:
<a href="index.html" data-icon=“delete”>Cancel</a>
<h1>Toolbars Foolbars</h1>
<a href="index.html" data-icon=“check”>Save</a>
6. Add footer buttons using a horizontal controlgroup

27. Let’s get to work!
Buttons… and danger
1. Open our example files folder and go to /dangerbuttons/
2. Open index.html and check it out
3. Open index.html in your favorite text editor
4. Add positioning data rolls to each test button
1. Positions are: top, bottom, left, right and notext
2. Use data-iconpos=“whatever”
5. Change themes for each individual button
1. Themes are: a, b, c, d, e
2. Use data-theme=“whatever”
6. TEST TEST TEST TEST TEST

28. Let’s get to work!
Buttons… and danger
1. Add icons to grouped buttons
1. Icons are: arrow-l, arrow-r, arrow-u, arrow-d, delete, plus, minus, check, gear, refresh, forward,
back, grid, star, alert, info, home, search
2. Use data-icon=“whatever”
2. Make group buttons horizontal
1. Add data-type=“horizontal” to your controlgroup
3. Add additional inline buttons
1. Play with different theme options to differentiate buttons
4. Test it!!

29. Let’s get to work!
Creating forms that don’t suck
1. Open our example files folder and go to /suckbegone/
2. Open index.html and check it out
3. Open index.html in your favorite text editor
4. Create a contact form that includes at least:
1. Name, e-mail, phone, subject, website rating, city, state, zip code
5. Turn off native selection (HOLY $#%#! THIS IS AWESOME)
6. Save, test, HALELUJAH!

30. Great Resources
• jQuery 1.6 Visual Cheat Sheet
http://woorkup.com/2011/05/12/jquery-visual-cheat-sheet-1-6/
• jQueryMobile.com
• jQuery Mobile on github
https://github.com/jquery/jquery-mobile
• Stack Overflow
http://stackoverflow.com/

31. Keep in touch!
http://flickr.hudsoncs.com/
_davidhudson
david@hudsoncs.com

32. 24 reasons why I love beer