Adventures in jQuery Mobile

728
-1

Published on

This was my Portfolio presentation detailing my first experience developing with jQuery Mobile. This presentation was given in June of 2011 at Portland State University.

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

  • Be the first to like this

No Downloads
Views
Total Views
728
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Adventures in jQuery Mobile

    1. 1. Adventures in jQuery MobileAmber Brucker6/6/11
    2. 2. Hi! I’m Amber. @AmberBrucker
    3. 3. Hi! I’m Amber. @AmberBrucker✤ I’m a web administrator at Retail Micro
    4. 4. Hi! I’m Amber. @AmberBrucker✤ I’m a web administrator at Retail Micro✤ Received an Associate’s in Multimedia in 2008
    5. 5. Hi! I’m Amber. @AmberBrucker✤ I’m a web administrator at Retail Micro✤ Received an Associate’s in Multimedia in 2008✤ Followed up by a Bachelor’s in Project Management in 2009
    6. 6. Hi! I’m Amber. @AmberBrucker✤ I’m a web administrator at Retail Micro✤ Received an Associate’s in Multimedia in 2008✤ Followed up by a Bachelor’s in Project Management in 2009✤ Certified in Digital Marketing Strategies
    7. 7. What is Kitty Kaddy?
    8. 8. What is Kitty Kaddy?✤ The original Kitty Kaddy was a single-page site created from a mockup powered by a jQuery Plugin, HTML, and CSS.
    9. 9. What is Kitty Kaddy?✤ The original Kitty Kaddy was a single-page site created from a mockup powered by a jQuery Plugin, HTML, and CSS.✤ It was suggested by several to create a mobile version of the site.
    10. 10. http://samuraiop.com/sites/hipstercat
    11. 11. http://samuraiop.com/sites/hipstercat
    12. 12. Challenges
    13. 13. Challenges✤ I didn’t know JavaScript or jQuery
    14. 14. Challenges✤ I didn’t know JavaScript or jQuery✤ I didn’t know jQuery Mobile
    15. 15. Challenges✤ I didn’t know JavaScript or jQuery✤ I didn’t know jQuery Mobile✤ How hard could it be - What, me worry?
    16. 16. Some Reality
    17. 17. Some Reality✤ I was taking a Javascript class concurrently with Portfolio
    18. 18. Some Reality✤ I was taking a Javascript class concurrently with Portfolio✤ I am excellent with code
    19. 19. Some Reality✤ I was taking a Javascript class concurrently with Portfolio✤ I am excellent with code✤ I had two devices to test a mobile site with
    20. 20. Time to go to work!
    21. 21. Time to go to work!
    22. 22. Requirements of the Project
    23. 23. Requirements of the Project ✤ It had to be touch-enabled
    24. 24. Requirements of the Project ✤ It had to be touch-enabled ✤ It had to be simple, elegant, yet mine
    25. 25. Requirements of the Project ✤ It had to be touch-enabled ✤ It had to be simple, elegant, yet mine ✤ It had to swipe to change images
    26. 26. Requirements of the Project ✤ It had to be touch-enabled ✤ It had to be simple, elegant, yet mine ✤ It had to swipe to change images ✤ It had to loop images
    27. 27. The Swipe
    28. 28. The Swipe ✤ To start, I found a code snippet that registered actions on a touch-enabled device.
    29. 29. The Swipe ✤ To start, I found a code snippet that registered actions on a touch-enabled device.
    30. 30. The Swipe ✤ To start, I found a code snippet that registered actions on a touch-enabled device. ✤ I used swipeleft and swiperight since those would be the most common actions when changing images.
    31. 31. The Counter
    32. 32. The Counter ✤ Todd wrote a count expression for me.
    33. 33. The Counter ✤ Todd wrote a count expression for me.
    34. 34. The Counter ✤ Todd wrote a count expression for me. ✤ The counter noted items in an implicit array, from 0 to 4.
    35. 35. The Counter ✤ Todd wrote a count expression for me. ✤ The counter noted items in an implicit array, from 0 to 4.
    36. 36. The Counter ✤ Todd wrote a count expression for me. ✤ The counter noted items in an implicit array, from 0 to 4. ✤ The console told me where it was in the array.
    37. 37. The Array
    38. 38. The Array✤ I added an explicit array with the names of the divs I needed to navigate to.
    39. 39. The Array✤ I added an explicit array with the names of the divs I needed to navigate to.✤ The console listed back to me the names I had given the items in the array.
    40. 40. The Array✤ I added an explicit array with the names of the divs I needed to navigate to.✤ The console listed back to me the names I had given the items in the array.
    41. 41. The changePage
    42. 42. The changePage✤ I had to reference jQuery Mobile’s documentation to figure out how to change pages.
    43. 43. The changePage✤ I had to reference jQuery Mobile’s documentation to figure out how to change pages.
    44. 44. Did I do it? Let’s Find out!http://samuraiop.com/sites/mobile
    45. 45. I did it!A very happy ending.
    46. 46. I did it!A very happy ending.
    1. A particular slide catching your eye?

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

    ×