Adventures in jQuery Mobile

865 views
777 views

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
865
On SlideShare
0
From Embeds
0
Number of Embeds
1
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.

    ×