Adventures in jQuery Mobile

  • 610 views
Uploaded 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.

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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
610
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
12
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 1. Adventures in jQuery MobileAmber Brucker6/6/11
  • 2. Hi! I’m Amber. @AmberBrucker
  • 3. Hi! I’m Amber. @AmberBrucker✤ I’m a web administrator at Retail Micro
  • 4. Hi! I’m Amber. @AmberBrucker✤ I’m a web administrator at Retail Micro✤ Received an Associate’s in Multimedia in 2008
  • 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. 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. What is Kitty Kaddy?
  • 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. 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. http://samuraiop.com/sites/hipstercat
  • 11. http://samuraiop.com/sites/hipstercat
  • 12. Challenges
  • 13. Challenges✤ I didn’t know JavaScript or jQuery
  • 14. Challenges✤ I didn’t know JavaScript or jQuery✤ I didn’t know jQuery Mobile
  • 15. Challenges✤ I didn’t know JavaScript or jQuery✤ I didn’t know jQuery Mobile✤ How hard could it be - What, me worry?
  • 16. Some Reality
  • 17. Some Reality✤ I was taking a Javascript class concurrently with Portfolio
  • 18. Some Reality✤ I was taking a Javascript class concurrently with Portfolio✤ I am excellent with code
  • 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. Time to go to work!
  • 21. Time to go to work!
  • 22. Requirements of the Project
  • 23. Requirements of the Project ✤ It had to be touch-enabled
  • 24. Requirements of the Project ✤ It had to be touch-enabled ✤ It had to be simple, elegant, yet mine
  • 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. 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. The Swipe
  • 28. The Swipe ✤ To start, I found a code snippet that registered actions on a touch-enabled device.
  • 29. The Swipe ✤ To start, I found a code snippet that registered actions on a touch-enabled device.
  • 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. The Counter
  • 32. The Counter ✤ Todd wrote a count expression for me.
  • 33. The Counter ✤ Todd wrote a count expression for me.
  • 34. The Counter ✤ Todd wrote a count expression for me. ✤ The counter noted items in an implicit array, from 0 to 4.
  • 35. The Counter ✤ Todd wrote a count expression for me. ✤ The counter noted items in an implicit array, from 0 to 4.
  • 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. The Array
  • 38. The Array✤ I added an explicit array with the names of the divs I needed to navigate to.
  • 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. 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. The changePage
  • 42. The changePage✤ I had to reference jQuery Mobile’s documentation to figure out how to change pages.
  • 43. The changePage✤ I had to reference jQuery Mobile’s documentation to figure out how to change pages.
  • 44. Did I do it? Let’s Find out!http://samuraiop.com/sites/mobile
  • 45. I did it!A very happy ending.
  • 46. I did it!A very happy ending.