Your SlideShare is downloading. ×
0
Hi! I’m DavidAbout me:• Senior Web Developer, Southern Bancorp• Multiple disciplines including: PHP, Javascript, Objective...
…And YOU?
Today’s Sessions• 9:00am – 12:00pm   – Seven life changing reasons why you should design     for the mobile web   – Why is...
Today’s Sessions• 12:45pm – 4:00pm  – Time to get your hands dirty  – “Hello” + $(“#world”).val() + “!”;  – Toolbars foolb...
Bribery!
Also Learning
Seven life changing reasonswhy you should design for the mobile webReason #1:By 2014, mobile internet should take over    ...
Seven life changing reasonswhy you should design for the mobile webReason #2:85% of mobile devices will be web enabled by ...
Seven life changing reasonswhy you should design for the mobile webReason #3:More than 50% of U.S. adults will be using a ...
Seven life changing reasonswhy you should design for the mobile webReason #4:In a typical week, 81% of smartphone users   ...
Seven life changing reasonswhy you should design for the mobile webReason #5:49% of those who have seen a mobile ad take a...
Seven life changing reasonswhy you should design for the mobile webReason #6:29% of smartphone owners in the U.S. have    ...
Seven life changing reasonswhy you should design for the mobile webReason #7:Everybody’s doing it: “We understand that the...
“OK OK OK! I get it.”
Why is jQuery so dang cool?• jQuery makes writing Javascript almost effortless   – DOM selectors! $(“li.navigation”)   – D...
Why is jQuery so dang cool?• jQuery is used…. a lot… by a lot of people. This  means:   – Extensive cache of plugins and t...
A brief history of jQuery2005:John Resig posts about improving upon Behaviour.js  methods. Description of jQuery by Behavi...
A brief history of jQuery2006:• jQuery announced at BarCampNYC and world rejoices• jQuery 1.0 released2007:• Plugin reposi...
A brief history of jQuery2008:• jQuery UI release candidate made available2009:• Boring2010• jQuery Mobile project announc...
jQuery Mobile: “What It Do?”
jQuery Mobile: “What It Do?”The company line: “A unified user interface system that  works seamlessly across all popular m...
jQuery Mobile: “What It Don’t?”ALERT! You should probably stay away from developing with jQuery Mobile for these devices:B...
Creating gorgeous mobile web apps(in about 30 seconds)1.   Open our example files folder and go to /like_a_boss/2.   Open ...
Let’s get to work!“Hello” + $(“#world”).val() + “!”;1.    Open our example files folder and go to /helloworld/2.    Open i...
Let’s get to work!Toolbars foolbars1.   Open our example files folder and go to /foolbars/2.   Open index.html and check i...
Let’s get to work!Buttons… and danger1.        Open our example files folder and go to /dangerbuttons/2.        Open index...
Let’s get to work!Buttons… and danger1.        Add icons to grouped buttons     1.        Icons are: arrow-l, arrow-r, arr...
Let’s get to work!Creating forms that don’t suck1.    Open our example files folder and go to /suckbegone/2.    Open index...
Great Resources•   jQuery 1.6 Visual Cheat Sheet    http://woorkup.com/2011/05/12/jquery-visual-cheat-sheet-1-6/•   jQuery...
Keep in touch!    http://flickr.hudsoncs.com/    _davidhudson    david@hudsoncs.com
24 reasons why I love beer
Introduction to jQuery Mobile
Upcoming SlideShare
Loading in...5
×

Introduction to jQuery Mobile

1,547

Published on

Slides from my 2011 mLearning DevCon session.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,547
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to jQuery Mobile"

  1. 1. Hi! I’m DavidAbout 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
  2. 2. …And YOU?
  3. 3. 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!
  4. 4. 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
  5. 5. Bribery!
  6. 6. Also Learning
  7. 7. Seven life changing reasonswhy you should design for the mobile webReason #1:By 2014, mobile internet should take over desktop usageSource: http://www.digitalbuzzblog.com/2011-mobile-statistics-stats-facts-marketing-infographic/
  8. 8. Seven life changing reasonswhy you should design for the mobile webReason #2:85% of mobile devices will be web enabled by 2012Source: http://www.google.com/think/insights/topics/think-mobile.html
  9. 9. Seven life changing reasonswhy you should design for the mobile webReason #3:More than 50% of U.S. adults will be using a smartphone by the end of 2011Source: http://www.google.com/think/insights/topics/think-mobile.html
  10. 10. Seven life changing reasonswhy you should design for the mobile webReason #4:In a typical week, 81% of smartphone users will browse the InternetSource: http://www.google.com/think/insights/topics/think-mobile.html
  11. 11. Seven life changing reasonswhy you should design for the mobile webReason #5:49% of those who have seen a mobile ad take action. Of those: – 49% purchase – 42% click on the ad – 35% visit websiteSource: http://www.google.com/think/insights/topics/think-mobile.html
  12. 12. Seven life changing reasonswhy you should design for the mobile webReason #6:29% of smartphone owners in the U.S. have made an online purchase using their smartphoneSource: https://docs.google.com/gview?url=http://www.gstatic.com/ads/research/en/2011_Google_MMA_Global_Perspectives.pdf&chrome=true
  13. 13. Seven life changing reasonswhy you should design for the mobile webReason #7:Everybody’s doing it: “We understand that the new rule is ‘Mobile First.’ ” ~ Eric Schmidt, Google CEO
  14. 14. “OK OK OK! I get it.”
  15. 15. 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)
  16. 16. 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
  17. 17. A brief history of jQuery2005: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”
  18. 18. A brief history of jQuery2006:• jQuery announced at BarCampNYC and world rejoices• jQuery 1.0 released2007:• Plugin repository created• jQuery UI announced
  19. 19. A brief history of jQuery2008:• jQuery UI release candidate made available2009:• Boring2010• jQuery Mobile project announced and world rejoices once more
  20. 20. jQuery Mobile: “What It Do?”
  21. 21. 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.”
  22. 22. jQuery Mobile: “What It Don’t?”ALERT! You should probably stay away from developing with jQuery Mobile for these devices:Blackberry 4.xAll older smartphone platforms and feature phonesAny device that doesn’t support media queriesMeeGo – 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.
  23. 23. 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 editor4. 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 reopen7. BAM!
  24. 24. 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 out3. Open index.html in your favorite text editor4. 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
  25. 25. Let’s get to work!Toolbars foolbars1. Open our example files folder and go to /foolbars/2. Open index.html and check it out3. Open index.html in your favorite text editor4. 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
  26. 26. Let’s get to work!Buttons… and danger1. Open our example files folder and go to /dangerbuttons/2. Open index.html and check it out3. Open index.html in your favorite text editor4. 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
  27. 27. Let’s get to work!Buttons… and danger1. 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 controlgroup3. Add additional inline buttons 1. Play with different theme options to differentiate buttons4. Test it!!
  28. 28. Let’s get to work!Creating forms that don’t suck1. Open our example files folder and go to /suckbegone/2. Open index.html and check it out3. Open index.html in your favorite text editor4. Create a contact form that includes at least: 1. Name, e-mail, phone, subject, website rating, city, state, zip code5. Turn off native selection (HOLY $#%#! THIS IS AWESOME)6. Save, test, HALELUJAH!
  29. 29. 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/
  30. 30. Keep in touch! http://flickr.hudsoncs.com/ _davidhudson david@hudsoncs.com
  31. 31. 24 reasons why I love beer
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×