1. Social Media Apps Programming Min-Yuh Day, Ph.D. Assistant Professor Department of Information Management Tamkang University http://mail.tku.edu.tw/myday jQuery Mobile Tamkang University 2014-10-22 1031SMAP06 TLMXM1A (8687) (M2143) (Fall 2014) (MIS MBA) (2 Credits, Elective) [Full English Course] Thu 8,9 (15:10-17:00) V201

2. Course Schedule (1/3) Week Date Subject/Topics 1 2014/09/17 Course Orientation and Introduction to Social Media and Mobile Apps Programming 2 2014/09/24 Introduction to Android / iOS Apps Programming 3 2014/10/01 Developing Android Native Apps with Java (Eclipse) (MIT App Inventor) 4 2014/10/08 Developing iPhone / iPad Native Apps with Swift / Objective-C (XCode) 5 2014/10/15 Mobile Apps Using HTML5/CSS3/JavaScript 6 2014/10/22 jQuery Mobile 2

3. Course Schedule (2/3) Week Date Subject/Topics 7 2014/10/29 Create Hybrid Apps with Phonegap 8 2014/11/05 jQuery Mobile/Phonegap 9 2014/11/12 jQuery Mobile/Phonegap 10 2014/11/19 Midterm Exam Week (Midterm Project Report) 11 2014/11/26 Case Study on Social Media Apps Programming and Marketing in Google Play and App Store 12 2014/12/03 Google Cloud Platform 3

4. Course Schedule (3/3) Week Date Subject/Topics 13 2014/12/10 Google App Engine 14 2014/12/17 Google Map API 15 2014/12/24 Facebook API (Facebook JavaScript SDK) (Integrate Facebook with iOS/Android Apps) 16 2014/01/31 Twitter API 17 2015/01/07 Final Project Presentation 18 2015/01/14 Final Exam Week (Final Project Report) 4

5. Outline jQuery Mobile – JavaScript Library – jQuery – jQuery UI Demo – Building Mobile Apps with JQuery Mobile 5

6. Android /iOS Apps Programming 6 Native Apps Mobile Web Apps Hybrid Apps

7. 7 Source: http://www.amazon.com/Learn-HTML5-JavaScript-iOS-Standards-based/dp/1430240385http://www.amazon.com/Learn-HTML5-JavaScript-iOS-Standards-based/dp/1430240385 Learn HTML5 and JavaScript for iOS: Web Standards-based Apps for iPhone, iPad, and iPod touch, Scott Preston, Apress, 2012

8. Mobile Web App 8 HTML JavaScript CSS Phone Data External Data Templates Mobile frameworks and Libraries Source: Scott Preston, Learn HTML5 and JavaScript for iOS: Web Standards-based Apps for iPhone, iPad, and iPod touch, Apress, 2012

9. jQuery Mobile 9 http://jquerymobile.com/

10. jQuery Mobile Touch-Optimized Web Framework for Smartphones & Tablets – A unified, HTML5-based user interface system for all popular mobile device platforms – built on the rock-solid jQuery and jQuery UI foundation. – Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. 10 Source: http://jquerymobile.com/http://jquerymobile.com/

11. 11 http://jquery.com/

12. jQuery jQuery is a fast, small, and feature-rich JavaScript library. jQuery is the most popular JavaScript library – versatility and extensibility It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. 12 Source: http://jquery.com/http://jquery.com/

13. jQuery UI 13 http://jqueryui.com/

14. jQuery Mobile Seriously cross-platform with HTML5 write less, do more 14 Source: http://jquerymobile.com/http://jquerymobile.com/

15. 15 Source: http://jquerymobile.com/demos/http://jquerymobile.com/demos/

16. 16 Source: http://demos.jquerymobile.com/1.4.4/http://demos.jquerymobile.com/1.4.4/

17. 17 Source: http://demos.jquerymobile.com/1.4.4/http://demos.jquerymobile.com/1.4.4/

18. 18 Source: http://jquerymobile.com/download/

19. viewport 19 Mobile App Title

20. jquery-1.11.1.min.js jquery.mobile-1.4.4.min.css jquery.mobile-1.4.4.min.js 20 Mobile App Title

21. jQuery Mobile Page 21 http://jsbin.com/fegesilaje

22. 22 http://jsbin.com/fegesilaje Mobile App Title Hello jQuery Mobile Simple jQuery Mobile App Footer 2014 jQuery Mobile Page

23. 23 jQuery Mobile: Mobile Graded Browser Support Source: http://jquerymobile.com/gbs/1.4/http://jquerymobile.com/gbs/1.4/

24. jQuery Mobile: Mobile Graded Browser Support jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. A-grade – Full enhanced experience with Ajax-based animated page transitions. – Apple iOS 4-7.0 Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3 / 5.1 / 6.1), iPad 3 (5.1 / 6.0), iPad Mini (6.1), iPad Retina (7.0), iPhone 3GS (4.3), iPhone 4 (4.3 / 5.1), iPhone 4S (5.1 / 6.0), iPhone 5 (6.0), and iPhone 5S (7.0) – Android 4.4 (KitKat) Tested on a Nexus 5 – Android 4.1-4.3 (Jelly Bean) Tested on a Galaxy Nexus and Galaxy 7 24 Source: http://jquerymobile.com/gbs/http://jquerymobile.com/gbs/

25. W3schools.com jQuery Mobile 25 Source: http://www.w3schools.com/jquerymobile/default.asphttp://www.w3schools.com/jquerymobile/default.asp

26. codiqa: drag-and-drop builder for mobile apps 26 Source: http://jquerymobile.com/http://jquerymobile.com/

27. 27 https://codiqa.com/ codiqa: drag-and-drop builder for mobile apps

28. codiqa demo 28 https://codiqa.com/demo

29. Codiqa Components 29 https://codiqa.com/demo

30. 30 Source: http://jquerymobile.com/http://jquerymobile.com/

31. 31 Source: http://jquerymobile.com/http://jquerymobile.com/

32. 32 Source: http://jquerymobile.com/http://jquerymobile.com/

33. 33 http://jsbin.com/ImorikO/1/edit

34. 34 JS Bin Tamkang U. <img src="https://maps.googleapis.com/maps/api/staticmap?center=No.151, Yingzhang Rd.,Tamsui, New Taipei, Taiwan&zoom=14&size=288x200&markers=Taipei&sensor=false" width="288" height="200"> Button Footer

35. Get inspired: Built with jQuery Mobile 35 Source: http://jquerymobile.com/http://jquerymobile.com/

36. 36 http://m.stanford.edu/

37. 37 http://www.stanford.edu/

38. Mobile website for Stanford University http://m.stanford.edu 38 http://www.jqmgallery.com/2011/06/10/stanford/

39. data-role="page” 39 Page Header Page content goes here. Go to second page Page Footer

40. data-role=“button” 40 Star button Source: http://view.jquerymobile.com/1.3.2/dist/demos/intro/http://view.jquerymobile.com/1.3.2/dist/demos/intro/

41. data-role=“listview” 41 Acura Audi BMW Cadillac Ferrari

42. ListView Example 42 http://www.learnhtml5book.com/chapter5/jquerymobile/lists.html

43. ListView Example 43 http://www.learnhtml5book.com/chapter5/jquerymobile/lists.html List Example Basic List Link 1 Link 2 List with Counts Link 1 11 Link 2 22 List with Thumbnails Staufs Staufs Coffee Vino Vino Vino Vino Restaurant

44. Form Element 44 Text Input: Select: One Two Three Input slider:

45. data-theme=“a” 45 data-theme="a" data-theme="b" data-theme="c" data-theme="d" data-theme="e" Source: http://view.jquerymobile.com/1.3.2/dist/demos/intro/http://view.jquerymobile.com/1.3.2/dist/demos/intro/

46. data-icon=“star” 46 data-icon="star" Source: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/icons/http://view.jquerymobile.com/1.3.2/dist/demos/widgets/icons/ Custom Icons.ui-icon-myapp-email { background-image: url("app-icon-email.png"); } white icon 18x18 pixels PNG-8 with alpha transparency

47. jQuery Mobile Icon Pack 47 Source: http://jqmiconpack.andymatthews.net/http://jqmiconpack.andymatthews.net/

48. ThemeRoller for jQuery Mobile 48 http://jquerymobile.com/themeroller/

49. 49 ThemeRoller for jQuery Mobile http://jquerymobile.com/themeroller/

50. 50 http://grandviewave.com

51. Demo Building Mobile Apps with jQuery Mobile 51 http://jsbin.com

52. Mobile Myday 52 http://jsbin.com/IwOMezo

53. Online Editor: http://jsbin.com 53 http://jsbin.com/

54. 54 http://www.compileonline.com/try_jquerymobile_online.php CompileOnline: Try jQueryMobile Online

55. 55 http://jsbin.com/IwOMezo

56. jQuery jQuery.Mobile js css 56 Min-Yuh Day Mobile App http://jsbin.com/IwOMezo

57. 57 Min-Yuh Day Home Vita Education Research Publications Teaching Professional Activities Classic Web Mobile Myday @ 2013 http://jsbin.com/IwOMezo Page 1 MyHome

58. 58 Vita Dr. Min-Yuh Day is an Assistant Professor in the Department of Information Management at Tamkang University, Taiwan. …. Mobile Myday @ 2013 http://jsbin.com/IwOMezo Page 2 Vita

59. Page 3 Education 59 Back Education Home Ph.D. Department of Information Management, National Taiwan University, 2001-2010 M.B.A. Department of Information Management, Tamkang University, 1993-1995 B.B.A. Department of Information Management, Tamkang University, 1989-1993 Mobile Myday @ 2013 http://jsbin.com/IwOMezo

60. Mobile Myday 60 http://jsbin.com/IwOMezo

61. 61 Mobile Myday http://mail.tku.edu.tw/myday/m

62. 62 Back Myday Research Home Research Interests Social Media Service Mobile Apps Marketing Data Mining and Text Mining Business Intelligence Big Data Analytics Information Systems Evaluation Question Answering Systems Knowledge Management Electronic Commerce Learning Technology Intelligent Information Systems Biomedical Informatics Home Research Teaching About Page 4 Research http://mail.tku.edu.tw/myday/m

63. 63 Back Myday Teaching Home Fall 2013 (2013.09-2014.01) 3 Social Media Apps Programming (Fall 2013) Case Study for Information Management (Fall 2013) Digital Information Services (Fall 2013) Spring 2013 (2013.02-2013.06) 4 Business Intelligence Trends (Spring 2013) Social Media Marketing Management (Spring 2013) Data Mining (Spring 2013) The Issue of Information Security Management (Spring 2013) Home Research Teaching About Page 5 Teaching http://mail.tku.edu.tw/myday/m

64. Summary jQuery Mobile – JavaScript Library – jQuery – jQuery UI Demo – Building Mobile Apps with JQuery Mobile 64

65. References Learn HTML5 and JavaScript for iOS: Web Standards-based Apps for iPhone, iPad, and iPod touch, Scott Preston, Apress, 2012 jQuery Mobile – http://jquerymobile.com/ http://jquerymobile.com/ W3schools jQuery Mobile – http://www.w3schools.com/jquerymobile/default.asp http://www.w3schools.com/jquerymobile/default.asp 65