Adventures in jQuery MobileAmber Brucker6/6/11
Hi! I’m Amber.   @AmberBrucker
Hi! I’m Amber.          @AmberBrucker✤   I’m a web administrator at    Retail Micro
Hi! I’m Amber.          @AmberBrucker✤   I’m a web administrator at    Retail Micro✤   Received an Associate’s in    Multi...
Hi! I’m Amber.          @AmberBrucker✤   I’m a web administrator at    Retail Micro✤   Received an Associate’s in    Multi...
Hi! I’m Amber.          @AmberBrucker✤   I’m a web administrator at    Retail Micro✤   Received an Associate’s in    Multi...
What is Kitty Kaddy?
What is Kitty Kaddy?✤   The original Kitty Kaddy was a single-page site created from a    mockup powered by a jQuery Plugi...
What is Kitty Kaddy?✤   The original Kitty Kaddy was a single-page site created from a    mockup powered by a jQuery Plugi...
http://samuraiop.com/sites/hipstercat
http://samuraiop.com/sites/hipstercat
Challenges
Challenges✤   I didn’t know JavaScript or    jQuery
Challenges✤   I didn’t know JavaScript or    jQuery✤   I didn’t know jQuery Mobile
Challenges✤   I didn’t know JavaScript or    jQuery✤   I didn’t know jQuery Mobile✤   How hard could it be - What,    me w...
Some Reality
Some Reality✤   I was taking a Javascript class    concurrently with Portfolio
Some Reality✤   I was taking a Javascript class    concurrently with Portfolio✤   I am excellent with code
Some Reality✤   I was taking a Javascript class    concurrently with Portfolio✤   I am excellent with code✤   I had two de...
Time to go to work!
Time to go to work!
Requirements of the Project
Requirements of the Project        ✤   It had to be touch-enabled
Requirements of the Project        ✤   It had to be touch-enabled        ✤   It had to be simple, elegant, yet            ...
Requirements of the Project        ✤   It had to be touch-enabled        ✤   It had to be simple, elegant, yet            ...
Requirements of the Project        ✤   It had to be touch-enabled        ✤   It had to be simple, elegant, yet            ...
The Swipe
The Swipe            ✤   To start, I found a code snippet                that registered actions on a                touch...
The Swipe            ✤   To start, I found a code snippet                that registered actions on a                touch...
The Swipe            ✤   To start, I found a code snippet                that registered actions on a                touch...
The Counter
The Counter              ✤   Todd wrote a count expression                  for me.
The Counter              ✤   Todd wrote a count expression                  for me.
The Counter              ✤   Todd wrote a count expression                  for me.              ✤   The counter noted ite...
The Counter              ✤   Todd wrote a count expression                  for me.              ✤   The counter noted ite...
The Counter              ✤   Todd wrote a count expression                  for me.              ✤   The counter noted ite...
The Array
The Array✤   I added an explicit array with    the names of the divs I needed    to navigate to.
The Array✤   I added an explicit array with    the names of the divs I needed    to navigate to.✤   The console listed bac...
The Array✤   I added an explicit array with    the names of the divs I needed    to navigate to.✤   The console listed bac...
The changePage
The changePage✤   I had to reference jQuery    Mobile’s documentation to    figure out how to change pages.
The changePage✤   I had to reference jQuery    Mobile’s documentation to    figure out how to change pages.
Did I do it? Let’s Find out!http://samuraiop.com/sites/mobile
I did it!A very happy ending.
I did it!A very happy ending.
Adventures in jQuery Mobile
Adventures in jQuery Mobile
Adventures in jQuery Mobile
Adventures in jQuery Mobile
Adventures in jQuery Mobile
Adventures in jQuery Mobile
Adventures in jQuery Mobile
Upcoming SlideShare
Loading in...5
×

Adventures in jQuery Mobile

697

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
697
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.

    ×