Downloaded 14 times
Uploaded byJames Quick
Intro to Jquery Mobile
This document provides an introduction to mobile application development using jQuery Mobile, covering essential topics such as setting up a development environment, basic app structure, and practical examples including a Magic 8 Ball web app. The session is structured with a range of activities including demos, hands-on applications, and Q&A, emphasizing the importance of a customer-centric approach through lean startup principles. Additional resources and links are offered for participants to submit their apps and explore tools like PhoneGap and Intel XDK.
More Related Content
Similar to Intro to Jquery Mobile
Intro to Jquery Mobile
- 1. INTRODUCTION TO JQUERY MOBILE JAMES QUICK @JQUICKWIT JAQUICK@MICROSOFT.COM MEETUP: HTTP://BIT.LY/MFLWAD (MIAMI FT LAUDERDALE WINDOWS APP DEVELOPERS) BLOG: HTTP://WWW.BLOGS.MSDN.COM/QUICK_THOUGHTS
- 2. AGENDA • 12:30-1:00INTRODUCTION TO MOBILE APPLICATION DEVELOPMENT • 1:00-1:30 INTRO TO JQUERY MOBILE • 1:30-2:30 DEMOS AND HANDS ON • 2:30-3:00 Q AND A • 3:00-7:00 OFFICE HOURS
- 3. EXPECTATIONS • NEED • BROWSER AND TEXT EDITOR • EXPERIENCE • BASIC HTML/CSS/JAVASCRIPT ENCOURAGED • NO EXPERIENCE REQUIRED • BUILD YOUR OWN JQUERY MOBILE WEB APP BY THE END
- 4.
- 5. MOBILE PLATFORMS •ANDROID • IOS • WINDOWS 8 AND WINDOWS PHONE • BLACKBERRY
- 6. WINDOWS DEVELOPER ACCOUNT • $20 DOLLARS PER YEAR (WINDOWS 8 AND WINDOWS PHONE) • HTTPS://DEV.WINDOWS.COM/ • BIZSPARK…GET SIGNED UP TODAY TO PUBLISH! • FREE DEVELOPER ACCOUNT • $150 PER/MONTH TO USE IN AZURE
- 7. • 3 YEARSFREE SOFTWARE/DEVELOPMENT TOOLS • WINDOWS AZURE CREDITS $200 FIRST MONTH/$150 THEREAFTER • • • • • Is your startup: • Developing Software? • Privately held? • Less than 5 years old? • Making less than US $1M in annual revenue? http://aka.ms/BizSpark Now
- 8. HOW TO MARKET? • BUILD A WEBSITE IN AZURE…FOR FREE! • BLOGS • SOCIAL MEDIA • FACEBOOK, TWITTER, LINKEDIN • HIGHLIGHTED ARTICLES • EX. WMPOWERUSER • COLLECT FEEDBACK
- 9. MONETIZATION • FLAPPYBIRDS • ADVERTISING • CANDY CRUSH • IN APP PURCHASING…PAY MORE MONEY TO KEEP PLAYING, BUY POWERUPS, ETC. • CUT THE ROPE/ANGRY BIRDS • SELL YOUR APP ($1,$2, ETC.)
- 10. LEAN STARTUP •LEAN • GET RID OF THE FAT • OPTIMIZE YOUR TIME • EVERYTHING SHOULD BE CUSTOMER CENTRIC • STARTUP • NOT NECESSARILY TECH • UNCERTAINTY…GROWTH…OPPORTUNITY
- 11. LEAN STARTUP •“IDENTIFY THE RISKIEST PARTS OF YOUR BUSINESS PLAN, THEN FIND WAYS TO REDUCE THOSE RISKS IN A QUICK, ITERATIVE CYCLE OF LEARNING”
- 12. “ ” DON’TSELL WHAT YOU CAN MAKE…MAKE WHAT YOU CAN SELL
- 13.
- 14. WHAT IS IT? • HTML5-BASED USER INTERFACE FRAMEWORK FOR RESPONSIVE WEB SITES AND APPS • ACCESSIBLE ON ALL DEVICES (PHONES, TABLETS, ETC.) • BUILT ON JQUERY • OFFERS AJAX NAVIGATION (TRANSITIONS, TOUCH EVENTS, WIDGETS) • TOUCH OPTIMIZED
- 15. WHY USE IT? • WRITE LESS/DO MORE • WRITE ONCE HIT ALL MAJOR PLATFORMS • THEMES FOR MOBILE FEEL • RESPONSIVE • ADAPTS TO DIFFERENT SCREEN SIZES
- 16. HOW TO GETSTARTED • LINK TO JQUERY MOBILE LIBRARY • CONTENT DELIVERY NETWORK (PREFERRED) OR ON LOCAL COMPUTER • 3 REFERENCES • JQUERY MOBILE CSS • JQUERY • JQUERY MOBILE JAVASCRIPT
- 17.
- 18. ADD YOUR REFERENCE <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile- 1.4.2.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile- 1.4.2.min.js"></script> </head>
- 19. PAGE • EACHPAGE HAS 3 PARTS • HEADER, CONTENT, AND FOOTER • DEFINE THESE WITH DATA-ROLE=“” • EX. DATA-ROLE=“HEADER”
- 20. BASIC SINGLE PAGETEMPLATE <DIV DATA-ROLE="PAGE"> <DIV DATA-ROLE="HEADER"> <H1>WELCOME TO MY HOMEPAGE</H1> </DIV> <DIV DATA-ROLE="MAIN" CLASS="UI-CONTENT"> <P>I AM NOW A MOBILE DEVELOPER!!</P> </DIV> <DIV DATA-ROLE="FOOTER"> <H1>FOOTER TEXT</H1> </DIV> </DIV>
- 21. ADDING PAGES •SIMPLE ADD ANOTHER DATA-ROLE=“PAGE” • EACH PAGE WILL HAVE ITS HEADER, CONTENT, AND FOOTER • HAVE MULTIPLE PAGES IN ONE FILE • FASTER LOADING OF THESE PAGES • CAN HAVE DIALOG POPUPS AS PAGES • DATA-DIALOG=“TRUE” • NAVIGATION HREF=“#PAGENAME”
- 22. TRANSITIONS • TYPESOF TRANSITIONS • FADE, FLIP, FLOW, POP, SLIDE, SLIDEUP, SLIDEDOWN, TURN, NONE • ADD DATA-TRANSITION ATTRIBUTE TO LINK • <A HREF=“#PAGENAME DATA-TRANSITION=“SLIDE”>SLIDE TO PAGE TWO</A>
- 23. ADDING A BACKBUTTON • ADD A LEFT ARROW ICON • SET THE DATA-REL PROPERTY TO BACK • DATA-REL=“BACK” • AUTOMATICALLY TAKES CARE OF THE NAVIGATION FOR YOU
- 24. BUTTONS • 3DIFFERENT WAYS TO CREATE BUTTONS • <INPUT TYPE="BUTTON" VALUE="BUTTON"> • <BUTTON CLASS="UI-BTN">BUTTON</BUTTON> (FORM SUBMISSIONS) • <A HREF="#" CLASS="UI-BTN">BUTTON</A> (PAGE NAVIGATIONS)
- 25. NAVBAR • GROUPOF LINKS ALIGNED HORIZONTALLY • CREATE A DIV WITH NAVBAR AS DATA ROLE <DIV DATA-ROLE=“NAVBAR”> • INSIDE OF THAT DIV ADD AN UNORDERED LIST (UL) • ADD LIST ITEMS TO THE UNORDERED LIST • ICONS • EX. DATA-ICON=“SEARCH”
- 26. THEMES • SETTHE DATA-THEME ATTRIBUTE • VALUE A • BLACK TEXT ON A LIGHT GRAY BACKGROUND FOR PAGE CONTENT • VALUE B • WHITE TEXT ON A DARK GREY BACKGROUND FOR PAGE CONTENT • CREATE CUSTOM THEME USING THEMEROLLER • THEMEROLLER.JQUERYMOBILE.COM
- 27. HANDS ON EXAMPLE • WHAT ARE WE GOING TO BUILD? • MAGIC 8 BALL WEB APP • FEATURES • 2 PAGES • HOME- CLICK BUTTON TO GET A RESPONSE FROM THE MAGIC 8 BALL • ABOUT- LINKS TO SOCIAL MEDIA, BLOG, ETC.
- 28. WHAT WILL WEBE USING • NAVBAR • BUTTONS • HEADERS, CONTENT, AND FOOTERS • THEMES
- 29. GETTING STARTED •USE STANDARD JQUERY MOBILE PAGE FROM JQUERY MOBILE OR W3 SCHOOLS • COPY AND PASTE INTO A TEXT EDITOR • I SUGGEST NOTEPAD++, SUBLIME TEXT 2, ETC.
- 30. STEP 1- PAGENAVIGATION • ADD A SECOND PAGE WITH ID=“ABOUT” • ADD A BACK BUTTON TO ITS HEADER • ADD A BUTTON TO HEADER OF HOMEPAGE • HREF=“#ABOUT”
- 31.
- 32. STEP 2- ADDINGCONTENT • ADD TITLE TO YOUR HEADER • ADD A TEXT TO YOUR CONTENT “ASK THE MAGIC 8 BALL” • ADD ANOTHER <P> TO YOUR CONTENT (YOU CAN LEAVE IT BLANK FOR NOW) • SET ID TO RESPONSE • ADD A BUTTON TO YOUR FOOTER
- 33.
- 34. STEP 3 FUNCTIONALITYWITH JS • SET THE ONCLICK PROPERTY OF YOUR BUTTON • <BUTTON ONCLICK=“GETRESPONSE()”>ASK THE MAGIC Q BALL</BUTTON> • GETRESPONSE() WILL BE THE JS METHOD THAT IS TRIGGERED • SETS THE TEXT FOR #RESPONSE TO RANDOM EXPRESSION • ADD A FILE CALLED SCRIPT.JS • ADD REFERENCE IN HEAD • <SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="SCRIPTS.JS"></SCRIPT>
- 35. FUNCTIONALITY WITH JS • CREATE ARRAY OF STRING RESPONSES • ADD YOUR GET RESPONSE METHOD
- 36. STEP 4- FINISHABOUT PAGE • ADD NAVBAR IN FOOTER • SOCIAL MEDIA LINKS, BLOG, WEBSITE, ETC. • ADD ABOUT PAGE TEXT • EX “THIS IS MY AWESOME FIRST APP”
- 37. PHONE GAP •SET OF ABSTRACTED APIS • GET ACCESS TO HARDWARE SPECIFIC FEATURES • CAMERA, ACCELEROMETER, COMPASS, CONTACTS, ETC. • FREE! • COMMAND LINE INTERFACE
- 38. INTEL XDK •IDE BUILT ON PHONE GAP • RUN EMULATORS • WRITE CODE • PACKAGE WEB APP FOR DIFFERENT PLATFORMS • LET’S TAKE A LOOK!
- 39. SUBMITTING YOUR APP • WINDOWS 8 - HTTP://BIT.LY/SUBMITW8 • WINDOWS PHONE- HTTP://BIT.LY/SUBMITWP
- 40. RESOURCES • W3SCHOOLS JQUERY MOBILE- HTTP://WWW.W3SCHOOLS.COM/JQUERYMOBILE/ • JQUERY MOBILE- HTTP://JQUERYMOBILE.COM/ • PHONE GAP- HTTP://PHONEGAP.COM/ • INTEL XDK- HTTP://XDK-SOFTWARE.INTEL.COM/ • DVLUP (NOKIA REWARDS) - HTTP://WWW.DVLUP.COM/ • WINDOWS DEVELOPER ACCOUNT- HTTPS://DEV.WINDOWS.COM • SOURCE CODE- HTTPS://GITHUB.COM/JQQUICK223/MAGIC-Q-BALL
Editor's Notes
- #8 bizspark is your pipeline to Microsoft software development tools. need proof? over 75,000 startups from more than 100 countries have already joined Microsoft BizSpark is a global program that provides free software, support and visibility to help startups succeed To qualify, startups must be: Developing Software Privately held and generating less than U.S. $1M in revenue per year Less than 5 years old