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.

1. Adventures in jQuery Mobile
Amber Brucker
6/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.

45. Did I do it? Let’s Find out!
http://samuraiop.com/sites/mobile

52. I did it!
A very happy ending.

53. I did it!
A very happy ending.